baseui 10.10.0 → 10.12.0

package/flex-grid/types.js.flow

@@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-import type {BlockPropsT, ResponsiveT, ScaleT} from '../block/types.js';
+import type { BlockPropsT, ResponsiveT, ScaleT } from '../block/types.js';
 
 export type FlexGridPropsT = {
   /** Number of equal-width columns to allow for */

package/form-control/form-control.js

@@ -44,11 +44,11 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 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 chooseRenderedHint(caption, error, positive, sharedProps) {
-  if (error && typeof error !== 'boolean') {
+  if (!!error && typeof error !== 'boolean') {
     return typeof error === 'function' ? error(sharedProps) : error;
   }
 
-  if (positive && typeof positive !== 'boolean') {
+  if (!!positive && typeof positive !== 'boolean') {
     return typeof positive === 'function' ? positive(sharedProps) : positive;
   }
 
@@ -162,7 +162,7 @@ var FormControl = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement(LabelContainer, _extends({}, sharedProps, (0, _overrides.getOverrideProps)(LabelContainerOverride)), /*#__PURE__*/React.createElement(Label, _extends({
         "data-baseweb": "form-control-label",
         htmlFor: htmlFor || onlyChildProps.id
-      }, sharedProps, (0, _overrides.getOverrideProps)(LabelOverride)), typeof label === 'function' ? label(sharedProps) : label), labelEndEnhancer && /*#__PURE__*/React.createElement(LabelEndEnhancer, _extends({}, sharedProps, (0, _overrides.getOverrideProps)(LabelEndEnhancerOverride)), typeof labelEndEnhancer === 'function' ? labelEndEnhancer(sharedProps) : labelEndEnhancer)), /*#__PURE__*/React.createElement(_reactUid.UIDConsumer, null, function (captionId) {
+      }, sharedProps, (0, _overrides.getOverrideProps)(LabelOverride)), typeof label === 'function' ? label(sharedProps) : label), !!labelEndEnhancer && /*#__PURE__*/React.createElement(LabelEndEnhancer, _extends({}, sharedProps, (0, _overrides.getOverrideProps)(LabelEndEnhancerOverride)), typeof labelEndEnhancer === 'function' ? labelEndEnhancer(sharedProps) : labelEndEnhancer)), /*#__PURE__*/React.createElement(_reactUid.UIDConsumer, null, function (captionId) {
         return /*#__PURE__*/React.createElement(ControlContainer, _extends({
           "data-baseweb": "form-control-container"
         }, sharedProps, (0, _overrides.getOverrideProps)(ControlContainerOverride)), React.Children.map(children, function (child, index) {
@@ -176,7 +176,7 @@ var FormControl = /*#__PURE__*/function (_React$Component) {
             error: typeof onlyChildProps.error !== 'undefined' ? onlyChildProps.error : sharedProps.$error,
             positive: typeof onlyChildProps.positive !== 'undefined' ? onlyChildProps.positive : sharedProps.$positive
           });
-        }), (caption || error || positive) && /*#__PURE__*/React.createElement(Caption, _extends({
+        }), (!!caption || !!error || positive) && /*#__PURE__*/React.createElement(Caption, _extends({
           "data-baseweb": "form-control-caption",
           id: captionId
         }, sharedProps, (0, _overrides.getOverrideProps)(CaptionOverride)), hint));

package/form-control/form-control.js.flow

@@ -7,8 +7,8 @@ LICENSE file in the root directory of this source tree.
 
 // @flow
 import * as React from 'react';
-import {getOverride, getOverrideProps} from '../helpers/overrides.js';
-import {UIDConsumer} from 'react-uid';
+import { getOverride, getOverrideProps } from '../helpers/overrides.js';
+import { UIDConsumer } from 'react-uid';
 import {
   Label as StyledLabel,
   LabelEndEnhancer as StyledLabelEndEnhancer,
@@ -16,18 +16,14 @@ import {
   Caption as StyledCaption,
   ControlContainer as StyledControlContainer,
 } from './styled-components.js';
-import type {
-  FormControlPropsT,
-  FormControlStateT,
-  StylePropsT,
-} from './types.js';
+import type { FormControlPropsT, FormControlStateT, StylePropsT } from './types.js';
 
 function chooseRenderedHint(caption, error, positive, sharedProps) {
-  if (error && typeof error !== 'boolean') {
+  if (!!error && typeof error !== 'boolean') {
     return typeof error === 'function' ? error(sharedProps) : error;
   }
 
-  if (positive && typeof positive !== 'boolean') {
+  if (!!positive && typeof positive !== 'boolean') {
     return typeof positive === 'function' ? positive(sharedProps) : positive;
   }
 
@@ -38,10 +34,7 @@ function chooseRenderedHint(caption, error, positive, sharedProps) {
   return null;
 }
 
-export default class FormControl extends React.Component<
-  FormControlPropsT,
-  FormControlStateT,
-> {
+export default class FormControl extends React.Component<FormControlPropsT, FormControlStateT> {
   static defaultProps = {
     overrides: {},
     label: null,
@@ -78,13 +71,10 @@ export default class FormControl extends React.Component<
     };
 
     const Label = getOverride(LabelOverride) || StyledLabel;
-    const LabelEndEnhancer =
-      getOverride(LabelEndEnhancerOverride) || StyledLabelEndEnhancer;
-    const LabelContainer =
-      getOverride(LabelContainerOverride) || StyledLabelContainer;
+    const LabelEndEnhancer = getOverride(LabelEndEnhancerOverride) || StyledLabelEndEnhancer;
+    const LabelContainer = getOverride(LabelContainerOverride) || StyledLabelContainer;
     const Caption = getOverride(CaptionOverride) || StyledCaption;
-    const ControlContainer =
-      getOverride(ControlContainerOverride) || StyledControlContainer;
+    const ControlContainer = getOverride(ControlContainerOverride) || StyledControlContainer;
 
     const hint = chooseRenderedHint(caption, error, positive, sharedProps);
 
@@ -92,7 +82,7 @@ export default class FormControl extends React.Component<
       if (error && positive) {
         // eslint-disable-next-line no-console
         console.warn(
-          `[FormControl] \`error\` and \`positive\` are both set to \`true\`. \`error\` will take precedence but this may not be what you want.`,
+          `[FormControl] \`error\` and \`positive\` are both set to \`true\`. \`error\` will take precedence but this may not be what you want.`
         );
       }
     }
@@ -120,7 +110,7 @@ export default class FormControl extends React.Component<
         length = 0;
         if (__DEV__) {
           console.warn(
-            `[FromControl] \`length\` must either be explicitly set via \`counter\` object property, or \`value\` string property on the child component.`,
+            `[FromControl] \`length\` must either be explicitly set via \`counter\` object property, or \`value\` string property on the child component.`
           );
         }
       }
@@ -143,10 +133,7 @@ export default class FormControl extends React.Component<
     return (
       <React.Fragment>
         {label && (
-          <LabelContainer
-            {...sharedProps}
-            {...getOverrideProps(LabelContainerOverride)}
-          >
+          <LabelContainer {...sharedProps} {...getOverrideProps(LabelContainerOverride)}>
             <Label
               data-baseweb="form-control-label"
               htmlFor={htmlFor || onlyChildProps.id}
@@ -155,11 +142,8 @@ export default class FormControl extends React.Component<
             >
               {typeof label === 'function' ? label(sharedProps) : label}
             </Label>
-            {labelEndEnhancer && (
-              <LabelEndEnhancer
-                {...sharedProps}
-                {...getOverrideProps(LabelEndEnhancerOverride)}
-              >
+            {!!labelEndEnhancer && (
+              <LabelEndEnhancer {...sharedProps} {...getOverrideProps(LabelEndEnhancerOverride)}>
                 {typeof labelEndEnhancer === 'function'
                   ? labelEndEnhancer(sharedProps)
                   : labelEndEnhancer}
@@ -168,7 +152,7 @@ export default class FormControl extends React.Component<
           </LabelContainer>
         )}
         <UIDConsumer>
-          {captionId => (
+          {(captionId) => (
             <ControlContainer
               data-baseweb="form-control-container"
               {...sharedProps}
@@ -193,7 +177,7 @@ export default class FormControl extends React.Component<
                       : sharedProps.$positive,
                 });
               })}
-              {(caption || error || positive) && (
+              {(!!caption || !!error || positive) && (
                 <Caption
                   data-baseweb="form-control-caption"
                   id={captionId}

package/form-control/index.js.flow

@@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 
 // @flow
-export {default as FormControl} from './form-control.js';
+export { default as FormControl } from './form-control.js';
 export {
   Label as StyledLabel,
   Caption as StyledCaption,

package/form-control/styled-components.js.flow

@@ -6,13 +6,13 @@ LICENSE file in the root directory of this source tree.
 */
 
 // @flow
-import {styled} from '../styles/index.js';
-import type {StylePropsT} from './types.js';
+import { styled } from '../styles/index.js';
+import type { StylePropsT } from './types.js';
 
-export const Label = styled<StylePropsT>('label', props => {
+export const Label = styled<StylePropsT>('label', (props) => {
   const {
     $disabled,
-    $theme: {colors, typography},
+    $theme: { colors, typography },
   } = props;
   return {
     ...typography.font250,
@@ -27,21 +27,18 @@ export const Label = styled<StylePropsT>('label', props => {
   };
 });
 
-export const LabelContainer = styled<StylePropsT>(
-  'span',
-  ({$theme: {sizing}}) => ({
-    display: 'flex',
-    width: '100%',
-    marginTop: sizing.scale300,
-    marginRight: 0,
-    marginBottom: sizing.scale300,
-    marginLeft: 0,
-  }),
-);
+export const LabelContainer = styled<StylePropsT>('span', ({ $theme: { sizing } }) => ({
+  display: 'flex',
+  width: '100%',
+  marginTop: sizing.scale300,
+  marginRight: 0,
+  marginBottom: sizing.scale300,
+  marginLeft: 0,
+}));
 
 export const LabelEndEnhancer = styled<StylePropsT>(
   'span',
-  ({$disabled, $counterError, $theme: {colors, typography}}) => ({
+  ({ $disabled, $counterError, $theme: { colors, typography } }) => ({
     ...typography.font100,
     flex: 0,
     width: '100%',
@@ -50,14 +47,14 @@ export const LabelEndEnhancer = styled<StylePropsT>(
       : $disabled
       ? colors.contentSecondary
       : colors.contentPrimary,
-  }),
+  })
 );
 
-export const Caption = styled<StylePropsT>('div', props => {
+export const Caption = styled<StylePropsT>('div', (props) => {
   const {
     $error,
     $positive,
-    $theme: {colors, sizing, typography},
+    $theme: { colors, sizing, typography },
   } = props;
 
   let fontColor = colors.contentSecondary;
@@ -81,9 +78,9 @@ export const Caption = styled<StylePropsT>('div', props => {
   };
 });
 
-export const ControlContainer = styled<StylePropsT>('div', props => {
+export const ControlContainer = styled<StylePropsT>('div', (props) => {
   const {
-    $theme: {sizing},
+    $theme: { sizing },
   } = props;
   return {
     width: '100%',

package/form-control/types.js.flow

@@ -7,7 +7,7 @@ LICENSE file in the root directory of this source tree.
 
 // @flow
 import * as React from 'react';
-import type {OverrideT} from '../helpers/overrides.js';
+import type { OverrideT } from '../helpers/overrides.js';
 
 export type FormControlStateT = {|
   captionId: string,
@@ -42,7 +42,7 @@ export type FormControlPropsT = {
   /** Adds a label end enhancer to the label */
   labelEndEnhancer?: ?(React.Node | ((props: {}) => React.Node)),
   /** Adds a length counter to the form control. If your input does not have a "string" value exposed as a prop, you provide the length as an object.*/
-  counter?: boolean | {|length?: number, maxLength?: number, error?: boolean|},
+  counter?: boolean | {| length?: number, maxLength?: number, error?: boolean |},
   children: React.Node,
 };
 

package/header-navigation/header-navigation.js.flow

@@ -7,24 +7,19 @@ LICENSE file in the root directory of this source tree.
 // @flow
 import * as React from 'react';
 
-import {getOverrides} from '../helpers/overrides.js';
-import type {PropsT} from './types.js';
-import {Root as StyledRoot} from './styled-components.js';
+import { getOverrides } from '../helpers/overrides.js';
+import type { PropsT } from './types.js';
+import { Root as StyledRoot } from './styled-components.js';
 
 class HeaderNavigation extends React.Component<PropsT, {}> {
   static defaultProps = {
     overrides: {},
   };
   render() {
-    const {overrides, ...restProps} = this.props;
+    const { overrides, ...restProps } = this.props;
     const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
     return (
-      <Root
-        data-baseweb="header-navigation"
-        role="navigation"
-        {...restProps}
-        {...rootProps}
-      />
+      <Root data-baseweb="header-navigation" role="navigation" {...restProps} {...rootProps} />
     );
   }
 }

package/header-navigation/index.js.flow

@@ -5,14 +5,14 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-export {default as HeaderNavigation} from './header-navigation.js';
+export { default as HeaderNavigation } from './header-navigation.js';
 // Styled elements
 export {
   Root as StyledRoot,
   NavigationItem as StyledNavigationItem,
   NavigationList as StyledNavigationList,
 } from './styled-components.js';
-export {ALIGN} from './constants.js';
+export { ALIGN } from './constants.js';
 export type * from './types.js';
 
 declare var __DEV__: boolean;

package/header-navigation/styled-components.js.flow

@@ -5,15 +5,15 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-import {styled} from '../styles/index.js';
-import {ALIGN} from './constants.js';
+import { styled } from '../styles/index.js';
+import { ALIGN } from './constants.js';
 
-export const Root = styled<{}>('nav', props => {
-  const {$theme} = props;
+export const Root = styled<{}>('nav', (props) => {
+  const { $theme } = props;
   const {
-    sizing: {scale500},
-    typography: {font300},
-    colors: {border},
+    sizing: { scale500 },
+    typography: { font300 },
+    colors: { border },
   } = $theme;
   return {
     ...font300,
@@ -27,10 +27,10 @@ export const Root = styled<{}>('nav', props => {
   };
 });
 
-export const NavigationItem = styled<{}>('li', props => {
-  const {$theme} = props;
+export const NavigationItem = styled<{}>('li', (props) => {
+  const { $theme } = props;
   const {
-    sizing: {scale800},
+    sizing: { scale800 },
   } = $theme;
   return {
     alignSelf: 'center',
@@ -38,37 +38,34 @@ export const NavigationItem = styled<{}>('li', props => {
   };
 });
 
-export const NavigationList = styled<{$align: $Values<typeof ALIGN>}>(
-  'ul',
-  props => {
-    const {$align, $theme} = props;
-    const aligned = $align === ALIGN.right || $align === ALIGN.left;
-    const {
-      sizing: {scale800},
-    } = $theme;
-    return {
-      display: 'flex',
-      ':first-child': {
-        padding: 0,
-      },
-      ':last-child': {
-        padding: 0,
-      },
-      flexGrow: aligned ? 0 : 1,
-      flexShrink: aligned ? 0 : 1,
-      flexBasis: aligned ? 'auto' : '0%',
-      paddingLeft: scale800,
-      paddingRight: scale800,
-      justifySelf: $align,
-      justifyContent: $align,
-      listStyle: 'none',
-      marginBottom: 0,
-      marginTop: 0,
-      marginLeft: 0,
-      marginRight: 0,
-    };
-  },
-);
+export const NavigationList = styled<{ $align: $Values<typeof ALIGN> }>('ul', (props) => {
+  const { $align, $theme } = props;
+  const aligned = $align === ALIGN.right || $align === ALIGN.left;
+  const {
+    sizing: { scale800 },
+  } = $theme;
+  return {
+    display: 'flex',
+    ':first-child': {
+      padding: 0,
+    },
+    ':last-child': {
+      padding: 0,
+    },
+    flexGrow: aligned ? 0 : 1,
+    flexShrink: aligned ? 0 : 1,
+    flexBasis: aligned ? 'auto' : '0%',
+    paddingLeft: scale800,
+    paddingRight: scale800,
+    justifySelf: $align,
+    justifyContent: $align,
+    listStyle: 'none',
+    marginBottom: 0,
+    marginTop: 0,
+    marginLeft: 0,
+    marginRight: 0,
+  };
+});
 
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;

package/header-navigation/types.js.flow

@@ -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.
 */
 // @flow
-import type {OverrideT} from '../helpers/overrides.js';
+import type { OverrideT } from '../helpers/overrides.js';
 
 export type OverridesT = {
   Root?: OverrideT,

package/heading/heading-level.js.flow

@@ -7,17 +7,13 @@ LICENSE file in the root directory of this source tree.
 // @flow
 
 import * as React from 'react';
-import type {HeadingLevelPropsT} from './types.js';
+import type { HeadingLevelPropsT } from './types.js';
 
 export const LevelContext: React.Context<number> = React.createContext(0);
 
-export const HeadingLevel = ({children}: HeadingLevelPropsT) => (
+export const HeadingLevel = ({ children }: HeadingLevelPropsT) => (
   <LevelContext.Consumer>
-    {level => (
-      <LevelContext.Provider value={level + 1}>
-        {children}
-      </LevelContext.Provider>
-    )}
+    {(level) => <LevelContext.Provider value={level + 1}>{children}</LevelContext.Provider>}
   </LevelContext.Consumer>
 );
 

package/heading/heading.js

@@ -25,7 +25,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-var FONTS = ['', 'font1050', 'font950', 'font850', 'font750', 'font650', 'font550'];
+var FONTS = ['', 'font1050', 'font950', 'font850', 'font750', 'font650', 'font550']; //$FlowFixMe
 
 var Heading = function Heading(_ref) {
   var styleLevel = _ref.styleLevel,

package/heading/heading.js.flow

@@ -8,36 +8,22 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 import Block from '../block/block.js';
-import {LevelContext} from './heading-level.js';
-import type {HeadingPropsT} from './types.js';
+import { LevelContext } from './heading-level.js';
+import type { HeadingPropsT } from './types.js';
 
-const FONTS = [
-  '',
-  'font1050',
-  'font950',
-  'font850',
-  'font750',
-  'font650',
-  'font550',
-];
+const FONTS = ['', 'font1050', 'font950', 'font850', 'font750', 'font650', 'font550'];
 
-const Heading = ({styleLevel, ...restProps}: HeadingPropsT) => (
+//$FlowFixMe
+const Heading = ({ styleLevel, ...restProps }: HeadingPropsT) => (
   <LevelContext.Consumer>
-    {level => {
+    {(level) => {
       if (level === 0) {
-        throw new Error(
-          'Heading component must be a descendant of HeadingLevel component.',
-        );
+        throw new Error('Heading component must be a descendant of HeadingLevel component.');
       }
       if (level > 6) {
-        throw new Error(
-          `HeadingLevel cannot be nested ${level} times. The maximum is 6 levels.`,
-        );
+        throw new Error(`HeadingLevel cannot be nested ${level} times. The maximum is 6 levels.`);
       }
-      if (
-        typeof styleLevel !== 'undefined' &&
-        (styleLevel < 1 || styleLevel > 6)
-      ) {
+      if (typeof styleLevel !== 'undefined' && (styleLevel < 1 || styleLevel > 6)) {
         throw new Error(`styleLevel = ${styleLevel} is out of 1-6 range.`);
       }
       return (

package/heading/index.js.flow

@@ -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.
 */
 // @flow
-export {default as HeadingLevel, LevelContext} from './heading-level.js';
-export {default as Heading} from './heading.js';
+export { default as HeadingLevel, LevelContext } from './heading-level.js';
+export { default as Heading } from './heading.js';
 export type * from './types.js';
 
 declare var __DEV__: boolean;

package/heading/types.js.flow

@@ -7,7 +7,7 @@ LICENSE file in the root directory of this source tree.
 // @flow
 
 import * as React from 'react';
-import type {BlockPropsT} from '../block/types.js';
+import type { BlockPropsT } from '../block/types.js';
 
 export type HeadingPropsT = {
   /** Set and fix the style level independently on the hierarchy context. */

package/helper/constants.js.flow

@@ -7,7 +7,7 @@ LICENSE file in the root directory of this source tree.
 
 // @flow
 
-export {ACCESSIBILITY_TYPE, PLACEMENT, TRIGGER_TYPE} from '../popover/index.js';
+export { ACCESSIBILITY_TYPE, PLACEMENT, TRIGGER_TYPE } from '../popover/index.js';
 
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;

package/helper/helper-steps.js.flow

@@ -9,19 +9,13 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import {ArrowLeft, ArrowRight, Check} from '../icon/index.js';
-import {Button, KIND, SHAPE} from '../button/index.js';
-import {useStyletron} from '../styles/index.js';
+import { ArrowLeft, ArrowRight, Check } from '../icon/index.js';
+import { Button, KIND, SHAPE } from '../button/index.js';
+import { useStyletron } from '../styles/index.js';
 
-import type {HelperStepsPropsT} from './types.js';
+import type { HelperStepsPropsT } from './types.js';
 
-export function HelperSteps({
-  index,
-  length,
-  onFinish,
-  onPrev,
-  onNext,
-}: HelperStepsPropsT) {
+export function HelperSteps({ index, length, onFinish, onPrev, onNext }: HelperStepsPropsT) {
   const [css, theme] = useStyletron();
 
   const isLast = index === length - 1;
@@ -34,15 +28,10 @@ export function HelperSteps({
         justifyContent: 'space-between',
       })}
     >
-      <Button
-        disabled={index === 0}
-        kind={KIND.secondary}
-        onClick={onPrev}
-        shape={SHAPE.circle}
-      >
+      <Button disabled={index === 0} kind={KIND.secondary} onClick={onPrev} shape={SHAPE.circle}>
         <ArrowLeft size={20} />
       </Button>
-      <div className={css({display: 'flex'})}>
+      <div className={css({ display: 'flex' })}>
         {new Array(length).fill().map((_, i) => {
           return (
             <div
@@ -51,9 +40,7 @@ export function HelperSteps({
                 height: '8px',
                 width: '8px',
                 backgroundColor:
-                  i === index
-                    ? theme.colors.contentPrimary
-                    : theme.colors.backgroundTertiary,
+                  i === index ? theme.colors.contentPrimary : theme.colors.backgroundTertiary,
                 borderTopLeftRadius: '50%',
                 borderTopRightRadius: '50%',
                 borderBottomRightRadius: '50%',

package/helper/helper.js.flow

@@ -9,26 +9,26 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import {Popover, PLACEMENT} from '../popover/index.js';
-import {mergeOverrides} from '../helpers/overrides.js';
+import { Popover, PLACEMENT } from '../popover/index.js';
+import { mergeOverrides } from '../helpers/overrides.js';
 
-import {StyledArrow, StyledBody} from './styled-components.js';
-import type {PropsT} from './types.js';
+import { StyledArrow, StyledBody } from './styled-components.js';
+import type { PropsT } from './types.js';
 
 export function Helper(props: PropsT) {
-  const {overrides = {}, placement, ...restProps} = props;
+  const { overrides = {}, placement, ...restProps } = props;
 
   const mergedOverrides = mergeOverrides(
     {
       Arrow: placement !== PLACEMENT.auto ? StyledArrow : {},
       Body: placement !== PLACEMENT.auto ? StyledBody : {},
       Inner: {
-        style: ({$theme}) => {
-          return {backgroundColor: $theme.colors.backgroundPrimary};
+        style: ({ $theme }) => {
+          return { backgroundColor: $theme.colors.backgroundPrimary };
         },
       },
     },
-    overrides,
+    overrides
   );
 
   return (

package/helper/index.js.flow

@@ -7,10 +7,10 @@ LICENSE file in the root directory of this source tree.
 
 // @flow
 
-export {ACCESSIBILITY_TYPE, PLACEMENT, TRIGGER_TYPE} from './constants.js';
-export {Helper as Unstable_Helper} from './helper.js';
-export {HelperSteps as Unstable_HelperSteps} from './helper-steps.js';
-export {StatefulHelper as Unstable_StatefulHelper} from './stateful-helper.js';
+export { ACCESSIBILITY_TYPE, PLACEMENT, TRIGGER_TYPE } from './constants.js';
+export { Helper as Unstable_Helper } from './helper.js';
+export { HelperSteps as Unstable_HelperSteps } from './helper-steps.js';
+export { StatefulHelper as Unstable_StatefulHelper } from './stateful-helper.js';
 export * from './styled-components.js';
 export type * from './types.js';