baseui 12.2.0 → 13.0.0

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

@@ -20,7 +20,7 @@ LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
 import { getOverrides } from '../helpers/overrides';
-import { StyledInnerXXSmallAnchor, StyledOuterXXSmallAnchor, StyledInnerXSmallAnchor, StyledOuterXSmallAnchor, StyledPinHead, RelativeContainer, StyledContentItem } from './styled-components';
+import { StyledInnerXXSmallAnchor, StyledOuterXXSmallAnchor, StyledInnerXSmallAnchor, StyledOuterXSmallAnchor, StyledPinHead, RelativeContainer, StyledEnhancerSlot, StyledLabelSlot, StyledLabel } from './styled-components';
 import { PINHEAD_DIMENSIONS, PINHEAD_TYPES, PINHEAD_SIZES_SHAPES, NEEDLE_HEIGHTS, NEEDLE_SIZES } from './constants';
 import BadgeEnhancer from './badge-enhancer';
 import LabelEnhancer from './label-enhancer';
@@ -30,6 +30,8 @@ var PinHead = function PinHead(_ref) {
       size = _ref$size === void 0 ? PINHEAD_SIZES_SHAPES.medium : _ref$size,
       _ref$label = _ref.label,
       label = _ref$label === void 0 ? '' : _ref$label,
+      _ref$secondaryLabel = _ref.secondaryLabel,
+      secondaryLabel = _ref$secondaryLabel === void 0 ? '' : _ref$secondaryLabel,
       StartEnhancer = _ref.startEnhancer,
       EndEnhancer = _ref.endEnhancer,
       color = _ref.color,
@@ -61,30 +63,45 @@ var PinHead = function PinHead(_ref) {
       PinHead = _getOverrides2[0],
       pinHeadProps = _getOverrides2[1];
 
-  var _getOverrides3 = getOverrides(overrides.PinHeadContent, StyledContentItem),
+  var _getOverrides3 = getOverrides(overrides.EnhancerSlot, StyledEnhancerSlot),
       _getOverrides4 = _slicedToArray(_getOverrides3, 2),
-      ContentItem = _getOverrides4[0],
-      contentItemProps = _getOverrides4[1];
+      EnhancerSlot = _getOverrides4[0],
+      enhancerSlotProps = _getOverrides4[1];
 
-  var _getOverrides5 = getOverrides(overrides.InnerAnchor, StyledInnerXXSmallAnchor),
+  var _getOverrides5 = getOverrides(overrides.LabelSlot, StyledLabelSlot),
       _getOverrides6 = _slicedToArray(_getOverrides5, 2),
-      InnerXXSmallAnchor = _getOverrides6[0],
-      innerXXSmallAnchorProps = _getOverrides6[1];
+      LabelSlot = _getOverrides6[0],
+      labelSlotProps = _getOverrides6[1];
 
-  var _getOverrides7 = getOverrides(overrides.OuterAnchor, StyledOuterXXSmallAnchor),
+  var _getOverrides7 = getOverrides(overrides.Label, StyledLabel),
       _getOverrides8 = _slicedToArray(_getOverrides7, 2),
-      OuterXXSmallAnchor = _getOverrides8[0],
-      outerXXSmallAnchorProps = _getOverrides8[1];
+      Label = _getOverrides8[0],
+      labelProps = _getOverrides8[1];
 
-  var _getOverrides9 = getOverrides(overrides.InnerAnchor, StyledInnerXSmallAnchor),
+  var _getOverrides9 = getOverrides(overrides.SecondaryLabel, StyledLabel),
       _getOverrides10 = _slicedToArray(_getOverrides9, 2),
-      InnerXSmallAnchor = _getOverrides10[0],
-      innerXSmallAnchorProps = _getOverrides10[1];
+      SecondaryLabel = _getOverrides10[0],
+      secondaryLabelProps = _getOverrides10[1];
 
-  var _getOverrides11 = getOverrides(overrides.OuterAnchor, StyledOuterXSmallAnchor),
+  var _getOverrides11 = getOverrides(overrides.InnerAnchor, StyledInnerXXSmallAnchor),
       _getOverrides12 = _slicedToArray(_getOverrides11, 2),
-      OuterXSmallAnchor = _getOverrides12[0],
-      outerXSmallAnchorProps = _getOverrides12[1];
+      InnerXXSmallAnchor = _getOverrides12[0],
+      innerXXSmallAnchorProps = _getOverrides12[1];
+
+  var _getOverrides13 = getOverrides(overrides.OuterAnchor, StyledOuterXXSmallAnchor),
+      _getOverrides14 = _slicedToArray(_getOverrides13, 2),
+      OuterXXSmallAnchor = _getOverrides14[0],
+      outerXXSmallAnchorProps = _getOverrides14[1];
+
+  var _getOverrides15 = getOverrides(overrides.InnerAnchor, StyledInnerXSmallAnchor),
+      _getOverrides16 = _slicedToArray(_getOverrides15, 2),
+      InnerXSmallAnchor = _getOverrides16[0],
+      innerXSmallAnchorProps = _getOverrides16[1];
+
+  var _getOverrides17 = getOverrides(overrides.OuterAnchor, StyledOuterXSmallAnchor),
+      _getOverrides18 = _slicedToArray(_getOverrides17, 2),
+      OuterXSmallAnchor = _getOverrides18[0],
+      outerXSmallAnchorProps = _getOverrides18[1];
 
   var badge = /*#__PURE__*/React.createElement(BadgeEnhancer, {
     markerType: type,
@@ -121,6 +138,7 @@ var PinHead = function PinHead(_ref) {
     }, innerXSmallAnchorProps))));
   }
 
+  var renderSecondaryLabel = (size === PINHEAD_SIZES_SHAPES.large || size === PINHEAD_SIZES_SHAPES.medium) && secondaryLabel;
   return /*#__PURE__*/React.createElement(RelativeContainer, null, /*#__PURE__*/React.createElement(LabelEnhancer, {
     labelEnhancerContent: labelEnhancerContent,
     labelEnhancerPosition: labelEnhancerPosition,
@@ -133,21 +151,25 @@ var PinHead = function PinHead(_ref) {
     $gridTemplateColumns: gridTemplateColumns,
     $forceCircle: forceCircle,
     $type: type
-  }, pinHeadProps), StartEnhancer && /*#__PURE__*/React.createElement(ContentItem, _extends({
+  }, pinHeadProps), StartEnhancer && /*#__PURE__*/React.createElement(EnhancerSlot, _extends({
     $height: height,
     $color: color,
     $size: size
-  }, contentItemProps), /*#__PURE__*/React.createElement(StartEnhancer, {
+  }, enhancerSlotProps), /*#__PURE__*/React.createElement(StartEnhancer, {
     size: icon
-  })), label && /*#__PURE__*/React.createElement(ContentItem, _extends({
-    $height: height,
-    $color: color,
-    $size: size
-  }, contentItemProps), label), EndEnhancer && /*#__PURE__*/React.createElement(ContentItem, _extends({
+  })), label && /*#__PURE__*/React.createElement(LabelSlot, labelSlotProps, /*#__PURE__*/React.createElement(Label, _extends({
+    $size: size,
+    $renderSecondaryLabel: renderSecondaryLabel,
+    $color: color
+  }, labelProps), label), renderSecondaryLabel && /*#__PURE__*/React.createElement(SecondaryLabel, _extends({
+    $size: size,
+    $renderSecondaryLabel: renderSecondaryLabel,
+    $color: color
+  }, secondaryLabelProps), secondaryLabel)), EndEnhancer && /*#__PURE__*/React.createElement(EnhancerSlot, _extends({
     $height: height,
     $color: color,
     $size: size
-  }, contentItemProps), /*#__PURE__*/React.createElement(EndEnhancer, {
+  }, enhancerSlotProps), /*#__PURE__*/React.createElement(EndEnhancer, {
     size: icon
   }))));
 };

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

@@ -11,7 +11,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, EARNER_LOCATION_PUCK_CORE_SCALES } from './constants';
+import { BADGE_ENHANCER_STYLES, FLOATING_MARKER_ANCHOR_POSITIONS, LABEL_SIZES, EARNER_LOCATION_PUCK_CORE_SCALES, PINHEAD_SIZES_SHAPES, FLOATING_ROUTE_MARKER_POINTER_TRANSFORMS } from './constants';
 export var getAnchorTransform = function getAnchorTransform(anchor, anchorSize) {
   var _FLOATING_MARKER_ANCH;
 
@@ -299,7 +299,7 @@ export var RelativeContainer = styled('div', function () {
 });
 RelativeContainer.displayName = "RelativeContainer";
 RelativeContainer.displayName = 'RelativeContainer';
-export var StyledContentItem = styled('div', function (_ref15) {
+export var StyledEnhancerSlot = styled('div', function (_ref15) {
   var $theme = _ref15.$theme,
       $color = _ref15.$color,
       $height = _ref15.$height,
@@ -313,8 +313,59 @@ export var StyledContentItem = styled('div', function (_ref15) {
     color: $color
   });
 });
-StyledContentItem.displayName = "StyledContentItem";
-StyledContentItem.displayName = 'StyledContentItem';
+StyledEnhancerSlot.displayName = "StyledEnhancerSlot";
+export var StyledFloatingRouteMarkerRoot = styled('div', function (_ref16) {
+  var $theme = _ref16.$theme,
+      $height = _ref16.$height,
+      $background = _ref16.$background,
+      $gridTemplateColumns = _ref16.$gridTemplateColumns;
+  return {
+    position: 'absolute',
+    backgroundColor: $background,
+    height: "".concat($height, "px"),
+    display: 'grid',
+    gridTemplateColumns: $gridTemplateColumns,
+    gap: '8px',
+    filter: "drop-shadow(".concat($theme.lighting.shadow600, ")"),
+    whiteSpace: 'nowrap',
+    borderRadius: "".concat(8, "px"),
+    padding: "".concat(4, "px ", 8, "px"),
+    transition: "".concat($theme.animation.timing300, " ").concat($theme.animation.easeOutCurve, " all")
+  };
+});
+StyledFloatingRouteMarkerRoot.displayName = "StyledFloatingRouteMarkerRoot";
+StyledFloatingRouteMarkerRoot.displayName = 'StyledFloatingRouteMarkerRoot';
+StyledEnhancerSlot.displayName = 'StyledEnhancerSlot';
+export var StyledLabelSlot = styled('div', function () {
+  return {
+    display: 'flex',
+    justifyContent: 'center',
+    flexDirection: 'column'
+  };
+});
+StyledLabelSlot.displayName = "StyledLabelSlot";
+StyledLabelSlot.displayName = 'StyledLabelSlot';
+export var StyledLabel = styled('div', function (_ref17) {
+  var $theme = _ref17.$theme,
+      $size = _ref17.$size,
+      $renderSecondaryLabel = _ref17.$renderSecondaryLabel,
+      $color = _ref17.$color;
+  var pinheadSizeOrder = Object.values(PINHEAD_SIZES_SHAPES);
+  var labelSizeIndex = pinheadSizeOrder.findIndex(function (x) {
+    return $size === x;
+  });
+
+  if ($renderSecondaryLabel) {
+    labelSizeIndex--;
+  }
+
+  var typographyStyle = LABEL_SIZES[pinheadSizeOrder[labelSizeIndex]];
+  return _objectSpread(_objectSpread({}, $theme.typography[typographyStyle]), {}, {
+    color: $color
+  });
+});
+StyledLabel.displayName = "StyledLabel";
+StyledLabel.displayName = 'StyledLabel';
 export var LocationPuckContainer = styled('div', function () {
   return {
     position: 'relative',
@@ -331,8 +382,8 @@ export var consumerLocationShadow = {
 export var earnerLocationShadow = {
   boxShadow: "0px 3px 5px 0px rgba(67, 76, 123, 0.4)"
 };
-export var StyledConsumerLocationPuckCore = styled('div', function (_ref16) {
-  var $theme = _ref16.$theme;
+export var StyledConsumerLocationPuckCore = styled('div', function (_ref18) {
+  var $theme = _ref18.$theme;
   return _objectSpread({
     height: "".concat(12, "px"),
     width: "".concat(12, "px"),
@@ -342,10 +393,10 @@ export var StyledConsumerLocationPuckCore = styled('div', function (_ref16) {
   }, consumerLocationShadow);
 });
 StyledConsumerLocationPuckCore.displayName = "StyledConsumerLocationPuckCore";
-export var StyledLocationPuckApproximation = styled('div', function (_ref17) {
-  var $theme = _ref17.$theme,
-      $color = _ref17.$color,
-      $radius = _ref17.$radius;
+export var StyledLocationPuckApproximation = styled('div', function (_ref19) {
+  var $theme = _ref19.$theme,
+      $color = _ref19.$color,
+      $radius = _ref19.$radius;
   return {
     background: $color,
     opacity: 0.12,
@@ -358,10 +409,10 @@ export var StyledLocationPuckApproximation = styled('div', function (_ref17) {
 });
 StyledLocationPuckApproximation.displayName = "StyledLocationPuckApproximation";
 StyledLocationPuckApproximation.displayName = 'StyledLocationPuckApproximation';
-export var StyledEarnerLocationPuckCore = styled('div', function (_ref18) {
-  var $theme = _ref18.$theme,
-      $color = _ref18.$color,
-      $size = _ref18.$size;
+export var StyledEarnerLocationPuckCore = styled('div', function (_ref20) {
+  var $theme = _ref20.$theme,
+      $color = _ref20.$color,
+      $size = _ref20.$size;
   return _objectSpread(_objectSpread({
     position: 'absolute',
     transform: "scale(".concat(EARNER_LOCATION_PUCK_CORE_SCALES[$size], ")"),
@@ -376,4 +427,22 @@ export var StyledEarnerLocationPuckCore = styled('div', function (_ref18) {
   });
 });
 StyledEarnerLocationPuckCore.displayName = "StyledEarnerLocationPuckCore";
-StyledEarnerLocationPuckCore.displayName = 'StyledEarnerLocationPuckCore';
+StyledEarnerLocationPuckCore.displayName = 'StyledEarnerLocationPuckCore';
+export var StyledFloatingRouteMarkerPointerContainer = styled('svg', function (_ref21) {
+  var $position = _ref21.$position;
+  return _objectSpread({
+    position: 'absolute'
+  }, FLOATING_ROUTE_MARKER_POINTER_TRANSFORMS[$position]);
+});
+StyledFloatingRouteMarkerPointerContainer.displayName = "StyledFloatingRouteMarkerPointerContainer";
+StyledFloatingRouteMarkerPointerContainer.displayName = 'StyledFloatingRouteMarkerPointerContainer';
+export var StyledFloatingRouteMarkerPointer = styled('path', function (_ref22) {
+  var $theme = _ref22.$theme,
+      $background = _ref22.$background;
+  return {
+    transition: "".concat($theme.animation.timing300, " ").concat($theme.animation.easeOutCurve, " all"),
+    fill: $background
+  };
+});
+StyledFloatingRouteMarkerPointer.displayName = "StyledFloatingRouteMarkerPointer";
+StyledFloatingRouteMarkerPointer.displayName = 'StyledFloatingRouteMarkerPointer';

package/esm/menu/menu.js

@@ -104,10 +104,14 @@ export default function Menu(props) {
         itemIndex = _ref2[1];
 
     if (optgroup !== '__ungrouped') {
-      els.push( /*#__PURE__*/React.createElement(OptgroupHeader, _extends({
+      els.push(
+      /*#__PURE__*/
+      // @ts-ignore
+      React.createElement(OptgroupHeader, _extends({
         key: optgroup
       }, optgroupHeaderProps), optgroup));
     } // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    // @ts-ignore
 
 
     var groupItems = groupedItems[optgroup].map(function (item, index) {
@@ -119,7 +123,9 @@ export default function Menu(props) {
       } : _props$getRequiredIte;
 
       if (item.divider === true) {
-        return /*#__PURE__*/React.createElement(MenuDivider, menuDividerProps);
+        return /*#__PURE__*/React.createElement(MenuDivider, _extends({
+          key: itemIndex
+        }, menuDividerProps));
       }
 
       var _getRequiredItemProps = getRequiredItemProps(item, itemIndex),
@@ -147,7 +153,8 @@ export default function Menu(props) {
     return [els.concat(groupItems), itemIndex];
   }, [[], -1]),
       _optgroups$reduce2 = _slicedToArray(_optgroups$reduce, 1),
-      elements = _optgroups$reduce2[0];
+      elements = _optgroups$reduce2[0]; // @ts-ignore
+
 
   var isEmpty = optgroups.every(function (optgroup) {
     return !groupedItems[optgroup].length;
@@ -166,7 +173,8 @@ export default function Menu(props) {
       }, handleFocus),
       onBlur: forkBlur({
         onBlur: unfocusMenu
-      }, handleBlur),
+      }, handleBlur) // @ts-ignore
+      ,
       onKeyDown: function onKeyDown(event) {
         if (props.isFocused) {
           handleKeyDown(event);

package/esm/menu/nested-menus.js

@@ -93,6 +93,7 @@ var NestedMenus = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "mouseLeaveTimeoueId", null);
 
     _defineProperty(_assertThisInitialized(_this), "handleMenuMouseLeave", function (event) {
+      // @ts-ignore
       _this.mouseLeaveTimeoueId = setTimeout(function () {
         _this.setState({
           nestedMenuHoverIndex: -1
@@ -102,10 +103,14 @@ var NestedMenus = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "handleMenuMouseEnter", function (event) {
       if (typeof document !== 'undefined') {
+        // @ts-ignore
         clearTimeout(_this.mouseLeaveTimeoueId);
 
         var index = _this.state.menus.findIndex(function (m) {
-          return m.current && event.currentTarget instanceof Node && m.current.contains(event.currentTarget);
+          return (// @ts-ignore
+            m.current && event.currentTarget instanceof Node && // @ts-ignore
+            m.current.contains(event.currentTarget)
+          );
         });
 
         _this.setState({
@@ -141,7 +146,9 @@ var NestedMenus = /*#__PURE__*/function (_React$Component) {
           for (_iterator.s(); !(_step = _iterator.n()).done;) {
             var r = _step.value;
 
+            // @ts-ignore
             if (r.current && isSame(r.current, ref.current)) {
+              // @ts-ignore
               var element = r.current;
               element.removeEventListener('mouseenter', _this.handleMenuMouseEnter);
               element.removeEventListener('mouseleave', _this.handleMenuMouseLeave);
@@ -163,6 +170,7 @@ var NestedMenus = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "findMenuIndexByRef", function (ref) {
+      // @ts-ignore
       return _this.state.menus.findIndex(function (r) {
         return isSame(r.current, ref.current);
       });

package/esm/menu/option-list.js

@@ -68,7 +68,8 @@ function OptionList(props, ref) {
   var _getOverrides3 = getOverrides(overrides.ListItemAnchor, StyledListItemAnchor),
       _getOverrides4 = _slicedToArray(_getOverrides3, 2),
       ListItemAnchor = _getOverrides4[0],
-      listItemAnchorProps = _getOverrides4[1];
+      listItemAnchorProps = _getOverrides4[1]; // @ts-ignore
+
 
   var getItem = function getItem(item) {
     if (item.href && renderHrefAsAnchor) {
@@ -102,7 +103,8 @@ function OptionList(props, ref) {
       isHighlighted: $isHighlighted
     }, item))));
   });
-}
+} // @ts-ignore
+
 
 function areEqualShallow(a, b) {
   if (!a || !b) return false;
@@ -114,11 +116,13 @@ function areEqualShallow(a, b) {
   }
 
   return true;
-}
+} // @ts-ignore
+
 
 function compare(prevProps, nextProps) {
   return prevProps.$isHighlighted === nextProps.$isHighlighted && prevProps.$isFocused === nextProps.$isFocused && areEqualShallow(prevProps.item, nextProps.item) && areEqualShallow(prevProps.overrides, nextProps.overrides) && prevProps.size === nextProps.size && prevProps.getItemLabel === nextProps.getItemLabel && prevProps.getChildMenu === nextProps.getChildMenu && prevProps.resetMenu === nextProps.resetMenu;
-}
+} // @ts-ignore
+
 
 var forwarded = /*#__PURE__*/React.forwardRef(OptionList);
 forwarded.displayName = 'OptionList';

package/esm/menu/option-profile.js

@@ -87,8 +87,7 @@ function OptionProfile(props, ref) {
       subtitle = _getProfileItemLabels.subtitle,
       body = _getProfileItemLabels.body;
 
-  return /*#__PURE__*/React.createElement(MaybeChildMenu // @ts-expect-error todo(flow->ts)
-  , {
+  return /*#__PURE__*/React.createElement(MaybeChildMenu, {
     ref: ref,
     getChildMenu: getChildMenu,
     isOpen: !!$isHighlighted,
@@ -106,7 +105,8 @@ function OptionProfile(props, ref) {
   /*#__PURE__*/
   // Or just render the entire component user specified
   React.createElement(ItemImg, profileImgProps))), /*#__PURE__*/React.createElement(ProfileLabelsContainer, profileLabelsContainerProps, title && /*#__PURE__*/React.createElement(ProfileTitle, profileTitleProps, title), subtitle && /*#__PURE__*/React.createElement(ProfileSubtitle, profileSubtitleProps, subtitle), body && /*#__PURE__*/React.createElement(ProfileBody, profileBodyProps, body))));
-}
+} // @ts-ignore
+
 
 var forwarded = /*#__PURE__*/React.forwardRef(OptionProfile);
 forwarded.displayName = 'OptionProfile';

package/esm/menu/stateful-container.js

@@ -65,6 +65,7 @@ var DEFAULT_PROPS = {
   getRequiredItemProps: function getRequiredItemProps() {
     return {};
   },
+  // @ts-ignore
   children: function children() {
     return null;
   },
@@ -135,6 +136,7 @@ var MenuStatefulContainerInner = /*#__PURE__*/function (_React$Component) {
 
         default:
           if (_this.props.typeAhead) {
+            // @ts-ignore
             clearTimeout(_this.typeAheadTimeOut);
 
             _this.handleAlphaDown(event);
@@ -184,7 +186,8 @@ var MenuStatefulContainerInner = /*#__PURE__*/function (_React$Component) {
       });
 
       if (_this.refList[nextIndex]) {
-        scrollItemIntoView(_this.refList[nextIndex].current, rootRef.current, nextIndex === 0, nextIndex === list.length - 1);
+        scrollItemIntoView(_this.refList[nextIndex].current, // @ts-ignore
+        rootRef.current, nextIndex === 0, nextIndex === list.length - 1);
       }
     });
 
@@ -240,7 +243,8 @@ var MenuStatefulContainerInner = /*#__PURE__*/function (_React$Component) {
       }
 
       if (_this.refList[nextIndex]) {
-        scrollItemIntoView(_this.refList[nextIndex].current, rootRef.current, nextIndex === 0, nextIndex === _this.getItems().length - 1);
+        scrollItemIntoView(_this.refList[nextIndex].current, // @ts-ignore
+        rootRef.current, nextIndex === 0, nextIndex === _this.getItems().length - 1);
       }
     });
 
@@ -357,6 +361,7 @@ var MenuStatefulContainerInner = /*#__PURE__*/function (_React$Component) {
 
       var optgroups = Object.keys(this.props.items);
       return optgroups.reduce(function (output, optgroup) {
+        // @ts-ignore
         return output.concat(_this2.props.items[optgroup]);
       }, []);
     }
@@ -469,6 +474,7 @@ var MenuStatefulContainerInner = /*#__PURE__*/function (_React$Component) {
         highlightedIndex: this.state.highlightedIndex,
         isFocused: this.state.isFocused,
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        // @ts-ignore
         handleKeyDown: this.props.keyboardControlNode.current ? function (event) {} : this.onKeyDown,
         focusMenu: this.focusMenu,
         unfocusMenu: this.unfocusMenu
@@ -483,7 +489,6 @@ var MenuStatefulContainerInner = /*#__PURE__*/function (_React$Component) {
 _defineProperty(MenuStatefulContainerInner, "defaultProps", DEFAULT_PROPS);
 
 var MenuStatefulContainer = function MenuStatefulContainer(props) {
-  //$FlowExpectedError[cannot-spread-inexact]
   return /*#__PURE__*/React.createElement(MenuStatefulContainerInner, _extends({
     uidSeed: useUIDSeed()
   }, props));

package/esm/menu/styled-components.js

@@ -45,7 +45,7 @@ export var StyledList = styled('ul', function (_ref) {
   };
 });
 StyledList.displayName = "StyledList";
-StyledList.displayName = 'StyledList';
+StyledList.displayName = 'StyledList'; // @ts-ignore
 
 function getFontColor(props) {
   if (props.$disabled) {
@@ -61,7 +61,8 @@ function getFontColor(props) {
   }
 
   return props.$theme.colors.menuFontDefault;
-}
+} // @ts-ignore
+
 
 function getBackgroundColor(props) {
   if (props.$disabled) {
@@ -140,7 +141,8 @@ export var StyledListItemElement = styled('li', function (props) {
   });
 });
 StyledListItemElement.displayName = "StyledListItemElement";
-StyledListItemElement.displayName = 'StyledListItemElement';
+StyledListItemElement.displayName = 'StyledListItemElement'; // @ts-ignore
+
 export var StyledListItem = withWrapper(StyledListItemElement, function (Styled) {
   return (// eslint-disable-next-line @typescript-eslint/no-unused-vars
     function StyledListItem(_ref2) {

package/esm/message-card/message-card.js

@@ -1,13 +1,13 @@
 var _excluded = ["children"];
 
+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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 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; }
 
-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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -37,7 +37,7 @@ import { useStyletron } from '../styles/index';
 import { ThemeProvider, LightTheme } from '../';
 import { getBackgroundColorType } from './utils';
 import { colors } from '../tokens';
-import { getOverrides } from '../helpers/overrides';
+import { getOverrides, mergeOverrides } from '../helpers/overrides';
 import { IMAGE_LAYOUT, BACKGROUND_COLOR_TYPE, BUTTON_KIND } from './constants';
 
 var ButtonAlwaysLightTheme = function ButtonAlwaysLightTheme(_ref) {
@@ -70,10 +70,14 @@ var MessageCard = function MessageCard(_ref2) {
       backgroundPosition = _ref3.backgroundPosition,
       ariaLabel = _ref3.ariaLabel;
 
+  var _useStyletron = useStyletron(),
+      _useStyletron2 = _slicedToArray(_useStyletron, 2),
+      theme = _useStyletron2[1];
+
   var _getOverrides = getOverrides(overrides.Root, StyledRoot),
       _getOverrides2 = _slicedToArray(_getOverrides, 2),
       Root = _getOverrides2[0],
-      RootProps = _getOverrides2[1];
+      rootProps = _getOverrides2[1];
 
   var _getOverrides3 = getOverrides(overrides.ContentContainer, StyledContentContainer),
       _getOverrides4 = _slicedToArray(_getOverrides3, 2),
@@ -83,27 +87,37 @@ var MessageCard = function MessageCard(_ref2) {
   var _getOverrides5 = getOverrides(overrides.HeadingContainer, StyledHeadingContainer),
       _getOverrides6 = _slicedToArray(_getOverrides5, 2),
       HeadingContainer = _getOverrides6[0],
-      HeadingContainerProps = _getOverrides6[1];
+      headingContainerProps = _getOverrides6[1];
 
   var _getOverrides7 = getOverrides(overrides.ParagraphContainer, StyledParagraphContainer),
       _getOverrides8 = _slicedToArray(_getOverrides7, 2),
       ParagraphContainer = _getOverrides8[0],
-      ParagraphContainerProps = _getOverrides8[1];
+      paragraphContainerProps = _getOverrides8[1];
 
   var _getOverrides9 = getOverrides(overrides.Image, StyledImage),
       _getOverrides10 = _slicedToArray(_getOverrides9, 2),
       Image = _getOverrides10[0],
-      ImageProps = _getOverrides10[1];
+      imageProps = _getOverrides10[1];
 
   var _getOverrides11 = getOverrides(overrides.Button, ButtonAlwaysLightTheme),
       _getOverrides12 = _slicedToArray(_getOverrides11, 2),
       Button = _getOverrides12[0],
-      ButtonProps = _getOverrides12[1];
-
-  var _useStyletron = useStyletron(),
-      _useStyletron2 = _slicedToArray(_useStyletron, 2),
-      theme = _useStyletron2[1];
-
+      buttonProps = _getOverrides12[1];
+
+  var defaultButtonOverrides = {
+    BaseButton: {
+      style: _objectSpread({
+        textAlign: 'center',
+        pointerEvents: 'none'
+      }, buttonKind === BUTTON_KIND.tertiary ? {
+        marginTop: theme.sizing.scale100,
+        transform: theme.direction === 'rtl' ? "translateX(".concat(theme.sizing.scale500, ")") : "translateX(-".concat(theme.sizing.scale500, ")")
+      } : {
+        marginTop: theme.sizing.scale500
+      })
+    }
+  };
+  buttonProps.overrides = mergeOverrides(defaultButtonOverrides, buttonProps.overrides);
   var backgroundColorType = backgroundColorTypeProp || getBackgroundColorType(backgroundColor);
 
   if (!backgroundColorType) {
@@ -135,34 +149,21 @@ var MessageCard = function MessageCard(_ref2) {
     $backgroundColor: backgroundColor,
     $backgroundColorType: backgroundColorType,
     $imageLayout: layout
-  }, RootProps), image && /*#__PURE__*/React.createElement(Image, _extends({
+  }, 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({
+  }, 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: _objectSpread({
-          textAlign: 'center',
-          pointerEvents: 'none'
-        }, buttonKind === BUTTON_KIND.tertiary ? {
-          marginTop: theme.sizing.scale100,
-          transform: theme.direction === 'rtl' ? "translateX(".concat(theme.sizing.scale500, ")") : "translateX(-".concat(theme.sizing.scale500, ")")
-        } : {
-          marginTop: theme.sizing.scale500
-        })
-      }
-    }
-  }, ButtonProps), buttonLabel)));
+    colors: buttonColors
+  }, buttonProps), buttonLabel)));
 };
 
 export default MessageCard;

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

@@ -71,6 +71,7 @@ export var StyledRoot = styled('button', function (_ref) {
   });
 });
 StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
 export var StyledImage = styled('div', function (_ref2) {
   var _ref2$$imageLayout = _ref2.$imageLayout,
       $imageLayout = _ref2$$imageLayout === void 0 ? IMAGE_LAYOUT.top : _ref2$$imageLayout,
@@ -90,6 +91,7 @@ export var StyledImage = styled('div', function (_ref2) {
   });
 });
 StyledImage.displayName = "StyledImage";
+StyledImage.displayName = 'StyledImage';
 export var StyledContentContainer = styled('div', function (_ref3) {
   var $theme = _ref3.$theme;
   return {
@@ -102,15 +104,18 @@ export var StyledContentContainer = styled('div', function (_ref3) {
   };
 });
 StyledContentContainer.displayName = "StyledContentContainer";
+StyledContentContainer.displayName = 'StyledContentContainer';
 export var StyledHeadingContainer = styled('div', function (_ref4) {
   var $theme = _ref4.$theme;
   return _objectSpread({}, $theme.typography.HeadingXSmall);
 });
 StyledHeadingContainer.displayName = "StyledHeadingContainer";
+StyledHeadingContainer.displayName = 'StyledHeadingContainer';
 export var StyledParagraphContainer = styled('div', function (_ref5) {
   var $theme = _ref5.$theme;
   return _objectSpread(_objectSpread({}, $theme.typography.ParagraphSmall), {}, {
     marginTop: $theme.sizing.scale100
   });
 });
-StyledParagraphContainer.displayName = "StyledParagraphContainer";
+StyledParagraphContainer.displayName = "StyledParagraphContainer";
+StyledParagraphContainer.displayName = 'StyledParagraphContainer';