baseui 12.1.3 → 13.0.0

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

@@ -8,7 +8,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';
@@ -16,6 +16,7 @@ import LabelEnhancer from './label-enhancer';
 const PinHead = ({
   size = PINHEAD_SIZES_SHAPES.medium,
   label = '',
+  secondaryLabel = '',
   startEnhancer: StartEnhancer,
   endEnhancer: EndEnhancer,
   color,
@@ -38,7 +39,10 @@ const PinHead = ({
     icon
   } = PINHEAD_DIMENSIONS[size];
   const [PinHead, pinHeadProps] = getOverrides(overrides.PinHead, StyledPinHead);
-  const [ContentItem, contentItemProps] = getOverrides(overrides.PinHeadContent, StyledContentItem);
+  const [EnhancerSlot, enhancerSlotProps] = getOverrides(overrides.EnhancerSlot, StyledEnhancerSlot);
+  const [LabelSlot, labelSlotProps] = getOverrides(overrides.LabelSlot, StyledLabelSlot);
+  const [Label, labelProps] = getOverrides(overrides.Label, StyledLabel);
+  const [SecondaryLabel, secondaryLabelProps] = getOverrides(overrides.SecondaryLabel, StyledLabel);
   const [InnerXXSmallAnchor, innerXXSmallAnchorProps] = getOverrides(overrides.InnerAnchor, StyledInnerXXSmallAnchor);
   const [OuterXXSmallAnchor, outerXXSmallAnchorProps] = getOverrides(overrides.OuterAnchor, StyledOuterXXSmallAnchor);
   const [InnerXSmallAnchor, innerXSmallAnchorProps] = getOverrides(overrides.InnerAnchor, StyledInnerXSmallAnchor);
@@ -77,6 +81,7 @@ const PinHead = ({
     }, innerXSmallAnchorProps))));
   }
 
+  const 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,
@@ -89,21 +94,25 @@ const PinHead = ({
     $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({
+  })), 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), label), EndEnhancer && /*#__PURE__*/React.createElement(ContentItem, _extends({
-    $height: height,
-    $color: color,
-    $size: size
-  }, contentItemProps), /*#__PURE__*/React.createElement(EndEnhancer, {
+  }, enhancerSlotProps), /*#__PURE__*/React.createElement(EndEnhancer, {
     size: icon
   }))));
 };

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, 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 const getAnchorTransform = (anchor, anchorSize) => ({
   [FLOATING_MARKER_ANCHOR_POSITIONS.none]: ``,
   [FLOATING_MARKER_ANCHOR_POSITIONS.topLeft]: `translate(${anchorSize}px, ${anchorSize}px)`,
@@ -185,6 +185,7 @@ export const StyledPinHead = styled('div', ({
     gap: '8px',
     boxShadow: $theme.lighting.shadow600,
     whiteSpace: 'nowrap',
+    // @ts-ignore
     ...sharedStyles[$type],
     ...($forceCircle && {
       width: `${$height}px`,
@@ -259,6 +260,7 @@ export const StyledStrokedLabel = styled('div', ({
    -${strokeWidth}px 0 0 ${strokeColor}`;
   return {
     display: 'flex',
+    // @ts-ignore
     ...$theme.typography[LABEL_SIZES[$size]],
     color: $theme.colors.primaryA,
     transition: `${$theme.animation.timing300} ${$theme.animation.easeOutCurve} all`,
@@ -300,13 +302,14 @@ export const RelativeContainer = styled('div', () => {
 });
 RelativeContainer.displayName = "RelativeContainer";
 RelativeContainer.displayName = 'RelativeContainer';
-export const StyledContentItem = styled('div', ({
+export const StyledEnhancerSlot = styled('div', ({
   $theme,
   $color,
   $height,
   $size
 }) => {
-  return { ...$theme.typography[LABEL_SIZES[$size]],
+  return { // @ts-ignore
+    ...$theme.typography[LABEL_SIZES[$size]],
     display: 'flex',
     alignItems: 'center',
     textAlign: 'center',
@@ -315,8 +318,59 @@ export const StyledContentItem = styled('div', ({
     color: $color
   };
 });
-StyledContentItem.displayName = "StyledContentItem";
-StyledContentItem.displayName = 'StyledContentItem';
+StyledEnhancerSlot.displayName = "StyledEnhancerSlot";
+export const StyledFloatingRouteMarkerRoot = styled('div', ({
+  $theme,
+  $height,
+  $background,
+  $gridTemplateColumns
+}) => {
+  return {
+    position: 'absolute',
+    backgroundColor: $background,
+    height: `${$height}px`,
+    display: 'grid',
+    gridTemplateColumns: $gridTemplateColumns,
+    gap: '8px',
+    filter: `drop-shadow(${$theme.lighting.shadow600})`,
+    whiteSpace: 'nowrap',
+    borderRadius: `${8}px`,
+    padding: `${4}px ${8}px`,
+    transition: `${$theme.animation.timing300} ${$theme.animation.easeOutCurve} all`
+  };
+});
+StyledFloatingRouteMarkerRoot.displayName = "StyledFloatingRouteMarkerRoot";
+StyledFloatingRouteMarkerRoot.displayName = 'StyledFloatingRouteMarkerRoot';
+StyledEnhancerSlot.displayName = 'StyledEnhancerSlot';
+export const StyledLabelSlot = styled('div', () => {
+  return {
+    display: 'flex',
+    justifyContent: 'center',
+    flexDirection: 'column'
+  };
+});
+StyledLabelSlot.displayName = "StyledLabelSlot";
+StyledLabelSlot.displayName = 'StyledLabelSlot';
+export const StyledLabel = styled('div', ({
+  $theme,
+  $size,
+  $renderSecondaryLabel,
+  $color
+}) => {
+  const pinheadSizeOrder = Object.values(PINHEAD_SIZES_SHAPES);
+  let labelSizeIndex = pinheadSizeOrder.findIndex(x => $size === x);
+
+  if ($renderSecondaryLabel) {
+    labelSizeIndex--;
+  }
+
+  const typographyStyle = LABEL_SIZES[pinheadSizeOrder[labelSizeIndex]];
+  return { ...$theme.typography[typographyStyle],
+    color: $color
+  };
+});
+StyledLabel.displayName = "StyledLabel";
+StyledLabel.displayName = 'StyledLabel';
 export const LocationPuckContainer = styled('div', () => {
   return {
     position: 'relative',
@@ -382,4 +436,25 @@ export const StyledEarnerLocationPuckCore = styled('div', ({
   };
 });
 StyledEarnerLocationPuckCore.displayName = "StyledEarnerLocationPuckCore";
-StyledEarnerLocationPuckCore.displayName = 'StyledEarnerLocationPuckCore';
+StyledEarnerLocationPuckCore.displayName = 'StyledEarnerLocationPuckCore';
+export const StyledFloatingRouteMarkerPointerContainer = styled('svg', ({
+  $position
+}) => {
+  return {
+    position: 'absolute',
+    ...FLOATING_ROUTE_MARKER_POINTER_TRANSFORMS[$position]
+  };
+});
+StyledFloatingRouteMarkerPointerContainer.displayName = "StyledFloatingRouteMarkerPointerContainer";
+StyledFloatingRouteMarkerPointerContainer.displayName = 'StyledFloatingRouteMarkerPointerContainer';
+export const StyledFloatingRouteMarkerPointer = styled('path', ({
+  $theme,
+  $background
+}) => {
+  return {
+    transition: `${$theme.animation.timing300} ${$theme.animation.easeOutCurve} all`,
+    fill: $background
+  };
+});
+StyledFloatingRouteMarkerPointer.displayName = "StyledFloatingRouteMarkerPointer";
+StyledFloatingRouteMarkerPointer.displayName = 'StyledFloatingRouteMarkerPointer';

package/es/menu/menu.js

@@ -52,10 +52,14 @@ export default function Menu(props) {
   const optgroups = Object.keys(groupedItems);
   const [elements] = optgroups.reduce(([els, itemIndex], optgroup) => {
     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
 
 
     const groupItems = groupedItems[optgroup].map((item, index) => {
@@ -66,7 +70,9 @@ export default function Menu(props) {
       } = props;
 
       if (item.divider === true) {
-        return /*#__PURE__*/React.createElement(MenuDivider, menuDividerProps);
+        return /*#__PURE__*/React.createElement(MenuDivider, _extends({
+          key: itemIndex
+        }, menuDividerProps));
       }
 
       const {
@@ -91,7 +97,8 @@ export default function Menu(props) {
       }, restProps, optionProps));
     });
     return [els.concat(groupItems), itemIndex];
-  }, [[], -1]);
+  }, [[], -1]); // @ts-ignore
+
   const isEmpty = optgroups.every(optgroup => !groupedItems[optgroup].length);
   return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, locale => /*#__PURE__*/React.createElement(List, _extends({
     "aria-activedescendant": props.activedescendantId || null,
@@ -106,7 +113,8 @@ export default function Menu(props) {
     }, handleFocus),
     onBlur: forkBlur({
       onBlur: unfocusMenu
-    }, handleBlur),
+    }, handleBlur) // @ts-ignore
+    ,
     onKeyDown: event => {
       if (props.isFocused) {
         handleKeyDown(event);

package/es/menu/nested-menus.js

@@ -43,6 +43,7 @@ export default class NestedMenus extends React.Component {
     _defineProperty(this, "mouseLeaveTimeoueId", null);
 
     _defineProperty(this, "handleMenuMouseLeave", event => {
+      // @ts-ignore
       this.mouseLeaveTimeoueId = setTimeout(() => {
         this.setState({
           nestedMenuHoverIndex: -1
@@ -52,9 +53,13 @@ export default class NestedMenus extends React.Component {
 
     _defineProperty(this, "handleMenuMouseEnter", event => {
       if (typeof document !== 'undefined') {
+        // @ts-ignore
         clearTimeout(this.mouseLeaveTimeoueId);
         const index = this.state.menus.findIndex(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({
           nestedMenuHoverIndex: index
@@ -82,7 +87,9 @@ export default class NestedMenus extends React.Component {
     _defineProperty(this, "removeMenuFromNesting", ref => {
       this.setState(state => {
         for (const r of this.state.menus) {
+          // @ts-ignore
           if (r.current && isSame(r.current, ref.current)) {
+            // @ts-ignore
             const element = r.current;
             element.removeEventListener('mouseenter', this.handleMenuMouseEnter);
             element.removeEventListener('mouseleave', this.handleMenuMouseLeave);
@@ -99,6 +106,7 @@ export default class NestedMenus extends React.Component {
     });
 
     _defineProperty(this, "findMenuIndexByRef", ref => {
+      // @ts-ignore
       return this.state.menus.findIndex(r => isSame(r.current, ref.current));
     });
 

package/es/menu/option-list.js

@@ -29,7 +29,7 @@ function OptionList(props, ref) {
     ...restProps
   } = props;
   const [ListItem, listItemProps] = getOverrides(overrides.ListItem, StyledListItem);
-  const [ListItemAnchor, listItemAnchorProps] = getOverrides(overrides.ListItemAnchor, StyledListItemAnchor);
+  const [ListItemAnchor, listItemAnchorProps] = getOverrides(overrides.ListItemAnchor, StyledListItemAnchor); // @ts-ignore
 
   const getItem = item => {
     if (item.href && renderHrefAsAnchor) {
@@ -62,7 +62,8 @@ function OptionList(props, ref) {
     isHighlighted: $isHighlighted,
     ...item
   }))));
-}
+} // @ts-ignore
+
 
 function areEqualShallow(a, b) {
   if (!a || !b) return false;
@@ -74,11 +75,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
+
 
 const forwarded = /*#__PURE__*/React.forwardRef(OptionList);
 forwarded.displayName = 'OptionList';

package/es/menu/option-profile.js

@@ -39,8 +39,7 @@ function OptionProfile(props, ref) {
     subtitle,
     body
   } = getProfileItemLabels(item);
-  return /*#__PURE__*/React.createElement(MaybeChildMenu // @ts-expect-error todo(flow->ts)
-  , {
+  return /*#__PURE__*/React.createElement(MaybeChildMenu, {
     ref: ref,
     getChildMenu: getChildMenu,
     isOpen: !!$isHighlighted,
@@ -58,7 +57,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
+
 
 const forwarded = /*#__PURE__*/React.forwardRef(OptionProfile);
 forwarded.displayName = 'OptionProfile';

package/es/menu/stateful-container.js

@@ -28,6 +28,7 @@ const DEFAULT_PROPS = {
   stateReducer: (changeType, changes) => changes,
   onItemSelect: () => {},
   getRequiredItemProps: () => ({}),
+  // @ts-ignore
   children: () => null,
   // from nested-menus context
   addMenuToNesting: () => {},
@@ -83,6 +84,7 @@ class MenuStatefulContainerInner extends React.Component {
 
         default:
           if (this.props.typeAhead) {
+            // @ts-ignore
             clearTimeout(this.typeAheadTimeOut);
             this.handleAlphaDown(event);
           }
@@ -129,7 +131,8 @@ class MenuStatefulContainerInner extends 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);
       }
     });
 
@@ -181,7 +184,8 @@ class MenuStatefulContainerInner extends 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);
       }
     });
 
@@ -298,6 +302,7 @@ class MenuStatefulContainerInner extends React.Component {
 
     const optgroups = Object.keys(this.props.items);
     return optgroups.reduce((output, optgroup) => {
+      // @ts-ignore
       return output.concat(this.props.items[optgroup]);
     }, []);
   }
@@ -412,6 +417,7 @@ class MenuStatefulContainerInner extends 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 ? event => {} : this.onKeyDown,
       focusMenu: this.focusMenu,
       unfocusMenu: this.unfocusMenu
@@ -424,7 +430,6 @@ class MenuStatefulContainerInner extends React.Component {
 _defineProperty(MenuStatefulContainerInner, "defaultProps", DEFAULT_PROPS);
 
 const MenuStatefulContainer = props => {
-  //$FlowExpectedError[cannot-spread-inexact]
   return /*#__PURE__*/React.createElement(MenuStatefulContainerInner, _extends({
     uidSeed: useUIDSeed()
   }, props));

package/es/menu/styled-components.js

@@ -34,7 +34,7 @@ export const StyledList = styled('ul', ({
   };
 });
 StyledList.displayName = "StyledList";
-StyledList.displayName = 'StyledList';
+StyledList.displayName = 'StyledList'; // @ts-ignore
 
 function getFontColor(props) {
   if (props.$disabled) {
@@ -50,7 +50,8 @@ function getFontColor(props) {
   }
 
   return props.$theme.colors.menuFontDefault;
-}
+} // @ts-ignore
+
 
 function getBackgroundColor(props) {
   if (props.$disabled) {
@@ -133,7 +134,8 @@ export const StyledListItemElement = styled('li', props => {
   };
 });
 StyledListItemElement.displayName = "StyledListItemElement";
-StyledListItemElement.displayName = 'StyledListItemElement';
+StyledListItemElement.displayName = 'StyledListItemElement'; // @ts-ignore
+
 export const StyledListItem = withWrapper(StyledListItemElement, Styled => // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function StyledListItem({
   item,

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

@@ -13,7 +13,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';
 
 const ButtonAlwaysLightTheme = ({
@@ -40,13 +40,28 @@ const MessageCard = ({
     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();
+  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 defaultButtonOverrides = {
+    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.overrides = mergeOverrides(defaultButtonOverrides, buttonProps.overrides);
   let backgroundColorType = backgroundColorTypeProp || getBackgroundColorType(backgroundColor);
 
   if (!backgroundColorType) {
@@ -80,35 +95,21 @@ const MessageCard = ({
     $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: {
-          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)));
+    colors: buttonColors
+  }, buttonProps), buttonLabel)));
 };
 
 export default MessageCard;

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

@@ -65,6 +65,7 @@ export const StyledRoot = styled('button', ({
   };
 });
 StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
 export const StyledImage = styled('div', ({
   $imageLayout = IMAGE_LAYOUT.top,
   $backgroundPosition = 'center',
@@ -84,6 +85,7 @@ export const StyledImage = styled('div', ({
   };
 });
 StyledImage.displayName = "StyledImage";
+StyledImage.displayName = 'StyledImage';
 export const StyledContentContainer = styled('div', ({
   $theme
 }) => ({
@@ -95,14 +97,17 @@ export const StyledContentContainer = styled('div', ({
   paddingLeft: $theme.sizing.scale600
 }));
 StyledContentContainer.displayName = "StyledContentContainer";
+StyledContentContainer.displayName = 'StyledContentContainer';
 export const StyledHeadingContainer = styled('div', ({
   $theme
 }) => ({ ...$theme.typography.HeadingXSmall
 }));
 StyledHeadingContainer.displayName = "StyledHeadingContainer";
+StyledHeadingContainer.displayName = 'StyledHeadingContainer';
 export const StyledParagraphContainer = styled('div', ({
   $theme
 }) => ({ ...$theme.typography.ParagraphSmall,
   marginTop: $theme.sizing.scale100
 }));
-StyledParagraphContainer.displayName = "StyledParagraphContainer";
+StyledParagraphContainer.displayName = "StyledParagraphContainer";
+StyledParagraphContainer.displayName = 'StyledParagraphContainer';

package/es/mobile-header/constants.js

@@ -0,0 +1,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 const TYPE = Object.freeze({
+  fixed: 'fixed',
+  floating: 'floating'
+});

package/es/mobile-header/index.js

@@ -0,0 +1,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 MobileHeader } from './mobile-header';
+export * from './constants';
+export * from './styled-components';
+export * from './types';