baseui 10.9.1 → 10.11.0

package/tabs-motion/utils.js.flow

@@ -8,18 +8,14 @@ LICENSE file in the root directory of this source tree.
 // @flow
 
 import * as React from 'react';
-import {ORIENTATION, FILL} from './constants.js';
+import { ORIENTATION, FILL } from './constants.js';
 
-import type {FillT, OrientationT} from './types.js';
+import type { FillT, OrientationT } from './types.js';
 
-export const getTabId = (uid: string, key: React.Key) =>
-  `tabs-${uid}-tab-${key}`;
-export const getTabPanelId = (uid: string, key: React.Key) =>
-  `tabs-${uid}-tabpanel-${key}`;
-export const isHorizontal = (orientation: OrientationT) =>
-  orientation === ORIENTATION.horizontal;
-export const isVertical = (orientation: OrientationT) =>
-  orientation === ORIENTATION.vertical;
+export const getTabId = (uid: string, key: React.Key) => `tabs-${uid}-tab-${key}`;
+export const getTabPanelId = (uid: string, key: React.Key) => `tabs-${uid}-tabpanel-${key}`;
+export const isHorizontal = (orientation: OrientationT) => orientation === ORIENTATION.horizontal;
+export const isVertical = (orientation: OrientationT) => orientation === ORIENTATION.vertical;
 export const isRTL = (direction: string) => direction === 'rtl';
 export const isIntrinsic = (fill: FillT) => fill === FILL.intrinsic;
 export const isFixed = (fill: FillT) => fill === FILL.fixed;

package/tag/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 Tag} from './tag.js';
+export { default as Tag } from './tag.js';
 // Styled elements
 export {
   Root as StyledRoot,
   Action as StyledAction,
   Text as StyledText,
 } from './styled-components.js';
-export {KIND, VARIANT, SIZE} from './constants.js';
+export { KIND, VARIANT, SIZE } from './constants.js';
 export type * from './types.js';
 
 declare var __DEV__: boolean;

package/tag/styled-components.js

@@ -272,8 +272,7 @@ var getColorStateFromProps = function getColorStateFromProps(props) {
   if (props.$disabled) return COLOR_STATE.disabled;
   if (props.$variant === _constants.VARIANT.solid) return COLOR_STATE.solid;
   return COLOR_STATE.outline;
-}; // $FlowFixMe https://github.com/facebook/flow/issues/7745
-
+};
 
 var Action = (0, _index.styled)('span', function (props) {
   var _SIZE$small$SIZE$medi, _ref;
@@ -288,8 +287,7 @@ var Action = (0, _index.styled)('span', function (props) {
   return _ref = {
     alignItems: 'center'
   }, _defineProperty(_ref, bottomRadiusDir, $theme.borders.useRoundedCorners ? $theme.borders.radius400 : 0), _defineProperty(_ref, topRadiusDir, $theme.borders.useRoundedCorners ? $theme.borders.radius400 : 0), _defineProperty(_ref, "cursor", $disabled ? 'not-allowed' : 'pointer'), _defineProperty(_ref, "display", 'flex'), _defineProperty(_ref, marginDir, (_SIZE$small$SIZE$medi = {}, _defineProperty(_SIZE$small$SIZE$medi, _constants.SIZE.small, '8px'), _defineProperty(_SIZE$small$SIZE$medi, _constants.SIZE.medium, '12px'), _defineProperty(_SIZE$small$SIZE$medi, _constants.SIZE.large, '16px'), _SIZE$small$SIZE$medi)[$size]), _defineProperty(_ref, "outline", 'none'), _defineProperty(_ref, "transitionProperty", 'all'), _defineProperty(_ref, "transitionDuration", 'background-color'), _defineProperty(_ref, "transitionTimingFunction", $theme.animation.easeOutCurve), _ref;
-}); // $FlowFixMe https://github.com/facebook/flow/issues/7745
-
+});
 exports.Action = Action;
 Action.displayName = "Action";
 var StartEnhancerContainer = (0, _index.styled)('div', function (_ref2) {
@@ -309,8 +307,7 @@ var StartEnhancerContainer = (0, _index.styled)('div', function (_ref2) {
     alignItems: 'center',
     display: 'flex'
   }, paddingDir, paddingMagnitude);
-}); // $FlowFixMe https://github.com/facebook/flow/issues/7745
-
+});
 exports.StartEnhancerContainer = StartEnhancerContainer;
 StartEnhancerContainer.displayName = "StartEnhancerContainer";
 var Text = (0, _index.styled)('span', function (props) {
@@ -322,8 +319,7 @@ var Text = (0, _index.styled)('span', function (props) {
     maxWidth: props.$theme.sizing.scale3200,
     order: $theme.direction === 'rtl' ? 1 : 0
   };
-}); // $FlowFixMe https://github.com/facebook/flow/issues/7745
-
+});
 exports.Text = Text;
 Text.displayName = "Text";
 var Root = (0, _index.styled)('span', function (props) {

package/tag/styled-components.js.flow

@@ -5,14 +5,13 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-
 import tint from 'polished/lib/color/tint.js';
 import shade from 'polished/lib/color/shade.js';
 
-import {styled} from '../styles/index.js';
-import {KIND, VARIANT, SIZE} from './constants.js';
-import type {SharedPropsArgT} from './types.js';
-import {colors as colorTokens} from '../tokens/index.js';
+import { styled, type ThemeT } from '../styles/index.js';
+import { KIND, VARIANT, SIZE } from './constants.js';
+import type { SharedPropsArgT } from './types.js';
+import { colors as colorTokens } from '../tokens/index.js';
 
 export function customOnRamp(color?: string, unit?: string) {
   switch (unit) {
@@ -50,8 +49,7 @@ const COLOR_STATE = {
 };
 
 // Probably best to bake this into the theme once we hit our next major.
-const pick = (theme, light, dark) =>
-  theme.name && theme.name.includes('dark') ? dark : light;
+const pick = (theme, light, dark) => (theme.name && theme.name.includes('dark') ? dark : light);
 
 const neutralColorStates = {
   [COLOR_STATE.disabled]: (theme, color) => ({
@@ -251,49 +249,43 @@ const colorMap = {
   [KIND.custom]: customColorStates,
 };
 
-const getColorStateFromProps = props => {
+const getColorStateFromProps = (props) => {
   if (props.$disabled) return COLOR_STATE.disabled;
   if (props.$variant === VARIANT.solid) return COLOR_STATE.solid;
   return COLOR_STATE.outline;
 };
 
-// $FlowFixMe https://github.com/facebook/flow/issues/7745
-export const Action = styled<SharedPropsArgT>('span', props => {
-  const {$theme, $disabled, $size = SIZE.small} = props;
-  const bottomRadiusDir: string =
-    $theme.direction === 'rtl'
-      ? 'borderBottomLeftRadius'
-      : 'borderBottomRightRadius';
-  const topRadiusDir: string =
-    $theme.direction === 'rtl' ? 'borderTopLeftRadius' : 'borderTopRightRadius';
-  const marginDir: string =
-    $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
-  return ({
-    alignItems: 'center',
-    [bottomRadiusDir]: $theme.borders.useRoundedCorners
-      ? $theme.borders.radius400
-      : 0,
-    [topRadiusDir]: $theme.borders.useRoundedCorners
-      ? $theme.borders.radius400
-      : 0,
-    cursor: $disabled ? 'not-allowed' : 'pointer',
-    display: 'flex',
-    [marginDir]: {
-      [SIZE.small]: '8px',
-      [SIZE.medium]: '12px',
-      [SIZE.large]: '16px',
-    }[$size],
-    outline: 'none',
-    transitionProperty: 'all',
-    transitionDuration: 'background-color',
-    transitionTimingFunction: $theme.animation.easeOutCurve,
-  }: {});
-});
+export const Action = styled<SharedPropsArgT>(
+  'span',
+  (props: SharedPropsArgT & { $theme: ThemeT }) => {
+    const { $theme, $disabled, $size = SIZE.small } = props;
+    const bottomRadiusDir: string =
+      $theme.direction === 'rtl' ? 'borderBottomLeftRadius' : 'borderBottomRightRadius';
+    const topRadiusDir: string =
+      $theme.direction === 'rtl' ? 'borderTopLeftRadius' : 'borderTopRightRadius';
+    const marginDir: string = $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
+    return ({
+      alignItems: 'center',
+      [bottomRadiusDir]: $theme.borders.useRoundedCorners ? $theme.borders.radius400 : 0,
+      [topRadiusDir]: $theme.borders.useRoundedCorners ? $theme.borders.radius400 : 0,
+      cursor: $disabled ? 'not-allowed' : 'pointer',
+      display: 'flex',
+      [marginDir]: {
+        [SIZE.small]: '8px',
+        [SIZE.medium]: '12px',
+        [SIZE.large]: '16px',
+      }[$size],
+      outline: 'none',
+      transitionProperty: 'all',
+      transitionDuration: 'background-color',
+      transitionTimingFunction: $theme.animation.easeOutCurve,
+    }: {});
+  }
+);
 
-// $FlowFixMe https://github.com/facebook/flow/issues/7745
 export const StartEnhancerContainer = styled<SharedPropsArgT>(
   'div',
-  ({$theme, $size = SIZE.small}) => {
+  ({ $theme, $size = SIZE.small }: SharedPropsArgT & { $theme: ThemeT }) => {
     let paddingMagnitude = $theme.sizing.scale300;
     if ($size === SIZE.medium) {
       paddingMagnitude = $theme.sizing.scale400;
@@ -301,120 +293,122 @@ export const StartEnhancerContainer = styled<SharedPropsArgT>(
       paddingMagnitude = $theme.sizing.scale600;
     }
 
-    const paddingDir: string =
-      $theme.direction === 'rtl' ? 'paddingLeft' : 'paddingRight';
+    const paddingDir: string = $theme.direction === 'rtl' ? 'paddingLeft' : 'paddingRight';
 
     return {
       alignItems: 'center',
       display: 'flex',
       [paddingDir]: paddingMagnitude,
     };
-  },
+  }
 );
 
-// $FlowFixMe https://github.com/facebook/flow/issues/7745
-export const Text = styled<SharedPropsArgT>('span', props => {
-  const {$theme} = props;
+export const Text = styled<SharedPropsArgT>(
+  'span',
+  (props: SharedPropsArgT & { $theme: ThemeT }) => {
+    const { $theme } = props;
 
-  return {
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-    maxWidth: props.$theme.sizing.scale3200,
-    order: $theme.direction === 'rtl' ? 1 : 0,
-  };
-});
+    return {
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+      maxWidth: props.$theme.sizing.scale3200,
+      order: $theme.direction === 'rtl' ? 1 : 0,
+    };
+  }
+);
 
-// $FlowFixMe https://github.com/facebook/flow/issues/7745
-export const Root = styled<SharedPropsArgT>('span', props => {
-  const {
-    $theme,
-    $kind = KIND.primary,
-    $clickable,
-    $variant,
-    $disabled,
-    $closeable,
-    $isFocusVisible,
-    $color,
-    $size = SIZE.small,
-  } = props;
-  const borderRadius = $theme.borders.tagBorderRadius;
-  const paddingMagnitude = {
-    [SIZE.small]: $theme.sizing.scale300,
-    [SIZE.medium]: $theme.sizing.scale500,
-    [SIZE.large]: $theme.sizing.scale600,
-  }[$size];
-  const borderWidth = !$disabled && $variant === VARIANT.solid ? 0 : '2px';
-  const {color, backgroundColor, borderColor} = colorMap[$kind][
-    getColorStateFromProps(props)
-  ]($theme, $color);
-  return ({
-    ...{
-      [SIZE.small]: $theme.typography.LabelSmall,
-      [SIZE.medium]: $theme.typography.LabelMedium,
-      [SIZE.large]: $theme.typography.LabelLarge,
-    }[$size],
-    alignItems: 'center',
-    color,
-    backgroundColor,
-    borderLeftColor: borderColor,
-    borderRightColor: borderColor,
-    borderTopColor: borderColor,
-    borderBottomColor: borderColor,
-    borderLeftStyle: 'solid',
-    borderRightStyle: 'solid',
-    borderTopStyle: 'solid',
-    borderBottomStyle: 'solid',
-    borderLeftWidth: borderWidth,
-    borderRightWidth: borderWidth,
-    borderTopWidth: borderWidth,
-    borderBottomWidth: borderWidth,
-    borderTopLeftRadius: borderRadius,
-    borderTopRightRadius: borderRadius,
-    borderBottomRightRadius: borderRadius,
-    borderBottomLeftRadius: borderRadius,
-    boxSizing: 'border-box',
-    cursor: $disabled ? 'not-allowed' : $clickable ? 'pointer' : 'default',
-    display: 'inline-flex',
-    height: {
-      [SIZE.small]: '24px',
-      [SIZE.medium]: '32px',
-      [SIZE.large]: '40px',
-    }[$size],
-    justifyContent: 'space-between',
-    marginTop: '5px',
-    marginBottom: '5px',
-    marginLeft: '5px',
-    marginRight: '5px',
-    paddingTop: $theme.sizing.scale0,
-    paddingBottom: $theme.sizing.scale0,
-    paddingLeft: paddingMagnitude,
-    paddingRight: paddingMagnitude,
-    outline: 'none',
-    ':hover':
-      $disabled || !$clickable
-        ? {}
-        : {
-            boxShadow: `inset 0px 0px 100px ${pick(
-              $theme,
-              `rgba(0, 0, 0, 0.08)`,
-              `rgba(255, 255, 255, 0.2)`,
-            )}`,
-          },
-    ':focus':
-      $disabled || (!$clickable && !$closeable)
-        ? {}
-        : {
-            boxShadow: $isFocusVisible
-              ? `0 0 0 3px ${
-                  $kind === KIND.accent
-                    ? $theme.colors.primaryA
-                    : $theme.colors.accent
-                }`
-              : 'none',
-          },
-  }: {});
-});
+export const Root = styled<SharedPropsArgT>(
+  'span',
+  (props: SharedPropsArgT & { $theme: ThemeT }) => {
+    const {
+      $theme,
+      $kind = KIND.primary,
+      $clickable,
+      $variant,
+      $disabled,
+      $closeable,
+      $isFocusVisible,
+      $color,
+      $size = SIZE.small,
+    } = props;
+    const borderRadius = $theme.borders.tagBorderRadius;
+    const paddingMagnitude = {
+      [SIZE.small]: $theme.sizing.scale300,
+      [SIZE.medium]: $theme.sizing.scale500,
+      [SIZE.large]: $theme.sizing.scale600,
+    }[$size];
+    const borderWidth = !$disabled && $variant === VARIANT.solid ? 0 : '2px';
+    const { color, backgroundColor, borderColor } = colorMap[$kind][getColorStateFromProps(props)](
+      $theme,
+      $color
+    );
+    return ({
+      ...{
+        [SIZE.small]: $theme.typography.LabelSmall,
+        [SIZE.medium]: $theme.typography.LabelMedium,
+        [SIZE.large]: $theme.typography.LabelLarge,
+      }[$size],
+      alignItems: 'center',
+      color,
+      backgroundColor,
+      borderLeftColor: borderColor,
+      borderRightColor: borderColor,
+      borderTopColor: borderColor,
+      borderBottomColor: borderColor,
+      borderLeftStyle: 'solid',
+      borderRightStyle: 'solid',
+      borderTopStyle: 'solid',
+      borderBottomStyle: 'solid',
+      borderLeftWidth: borderWidth,
+      borderRightWidth: borderWidth,
+      borderTopWidth: borderWidth,
+      borderBottomWidth: borderWidth,
+      borderTopLeftRadius: borderRadius,
+      borderTopRightRadius: borderRadius,
+      borderBottomRightRadius: borderRadius,
+      borderBottomLeftRadius: borderRadius,
+      boxSizing: 'border-box',
+      cursor: $disabled ? 'not-allowed' : $clickable ? 'pointer' : 'default',
+      display: 'inline-flex',
+      height: {
+        [SIZE.small]: '24px',
+        [SIZE.medium]: '32px',
+        [SIZE.large]: '40px',
+      }[$size],
+      justifyContent: 'space-between',
+      marginTop: '5px',
+      marginBottom: '5px',
+      marginLeft: '5px',
+      marginRight: '5px',
+      paddingTop: $theme.sizing.scale0,
+      paddingBottom: $theme.sizing.scale0,
+      paddingLeft: paddingMagnitude,
+      paddingRight: paddingMagnitude,
+      outline: 'none',
+      ':hover':
+        $disabled || !$clickable
+          ? {}
+          : {
+              boxShadow: `inset 0px 0px 100px ${pick(
+                $theme,
+                `rgba(0, 0, 0, 0.08)`,
+                `rgba(255, 255, 255, 0.2)`
+              )}`,
+            },
+      ':focus':
+        $disabled || (!$clickable && !$closeable)
+          ? {}
+          : {
+              boxShadow: $isFocusVisible
+                ? `0 0 0 3px ${
+                    $kind === KIND.accent ? $theme.colors.primaryA : $theme.colors.accent
+                  }`
+                : 'none',
+            },
+    }: {});
+  }
+);
 
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;

package/tag/tag.js

@@ -175,7 +175,7 @@ var Tag = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var actionSize = (_SIZE$small$SIZE$medi = {}, _defineProperty(_SIZE$small$SIZE$medi, _constants.SIZE.small, 12), _defineProperty(_SIZE$small$SIZE$medi, _constants.SIZE.medium, 16), _defineProperty(_SIZE$small$SIZE$medi, _constants.SIZE.large, 20), _SIZE$small$SIZE$medi)[size]; // Capitalize for JSX
 
   var StartEnhancer = startEnhancer;
-  return /*#__PURE__*/React.createElement(Root // eslint-disable-next-line flowtype/no-weak-types
+  return /*#__PURE__*/React.createElement(Root // flowlint-next-line unclear-type:off
   , _extends({
     ref: ref,
     "data-baseweb": "tag",

package/tag/tag.js.flow

@@ -6,24 +6,22 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import {getOverrides} from '../helpers/overrides.js';
+import { getOverrides } from '../helpers/overrides.js';
 import {
   Action as StyledAction,
   Root as StyledRoot,
   StartEnhancerContainer as StyledStartEnhancerContainer,
   Text as StyledText,
 } from './styled-components.js';
-import {KIND, VARIANT, SIZE} from './constants.js';
-import {getTextFromChildren} from './utils.js';
-import type {PropsT, SharedPropsArgT} from './types.js';
+import { KIND, VARIANT, SIZE } from './constants.js';
+import { getTextFromChildren } from './utils.js';
+import type { PropsT, SharedPropsArgT } from './types.js';
 import DeleteIcon from '../icon/delete.js';
-import {isFocusVisible, forkFocus, forkBlur} from '../utils/focusVisible.js';
+import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible.js';
 
 // Previously, Tag used a hardcoded SVG as its 'close' icon. Replacing it with
 // Delete requires modifying Delete's viewbox to prevent visual regressions.
-const ModifiedViewBoxDeleteIcon = props => (
-  <DeleteIcon viewBox="5 5 13.186 13.186" {...props} />
-);
+const ModifiedViewBoxDeleteIcon = (props) => <DeleteIcon viewBox="5 5 13.186 13.186" {...props} />;
 
 const Tag = React.forwardRef<PropsT, HTMLSpanElement>((props, ref) => {
   const {
@@ -35,8 +33,8 @@ const Tag = React.forwardRef<PropsT, HTMLSpanElement>((props, ref) => {
     isFocused = false,
     isHovered = false,
     kind = KIND.primary,
-    onActionClick = event => {},
-    onActionKeyDown = event => {},
+    onActionClick = (event) => {},
+    onActionKeyDown = (event) => {},
     onClick = null,
     onKeyDown = null,
     overrides = {},
@@ -79,11 +77,11 @@ const Tag = React.forwardRef<PropsT, HTMLSpanElement>((props, ref) => {
   const [Action, actionProps] = getOverrides(overrides.Action, StyledAction);
   const [ActionIcon, actionIconProps] = getOverrides(
     overrides.ActionIcon,
-    ModifiedViewBoxDeleteIcon,
+    ModifiedViewBoxDeleteIcon
   );
   const [StartEnhancerContainer, startEnhancerContainerProps] = getOverrides(
     overrides.StartEnhancerContainer,
-    StyledStartEnhancerContainer,
+    StyledStartEnhancerContainer
   );
   const [Text, textProps] = getOverrides(overrides.Text, StyledText);
   const clickable = typeof onClick === 'function';
@@ -96,7 +94,7 @@ const Tag = React.forwardRef<PropsT, HTMLSpanElement>((props, ref) => {
   const actionHandlers = disabled
     ? {}
     : {
-        onClick: event => {
+        onClick: (event) => {
           // we don't want onClick to be called when the close icon is clicked
           event.stopPropagation();
           onActionClick(event);
@@ -127,14 +125,12 @@ const Tag = React.forwardRef<PropsT, HTMLSpanElement>((props, ref) => {
 
   return (
     <Root
-      // eslint-disable-next-line flowtype/no-weak-types
+      // flowlint-next-line unclear-type:off
       ref={(ref: any)}
       data-baseweb="tag"
       aria-label={
         isButton && closeable
-          ? `${
-              typeof children === 'string' ? `${children}, ` : ''
-            }close by backspace`
+          ? `${typeof children === 'string' ? `${children}, ` : ''}close by backspace`
           : null
       }
       aria-disabled={disabled ? true : null}

package/tag/types.js.flow

@@ -8,8 +8,8 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import type {OverrideT} from '../helpers/overrides.js';
-import {KIND, VARIANT, SIZE} from './constants.js';
+import type { OverrideT } from '../helpers/overrides.js';
+import { KIND, VARIANT, SIZE } from './constants.js';
 
 export const TagKind = Object.freeze(KIND);
 export const TagVariant = Object.freeze(VARIANT);

package/tag/utils.js.flow

@@ -15,14 +15,14 @@ const JOINABLE_TYPES = new Set(['string', 'number']);
 // text from the child of a node to use as an attribute.
 export function getTextFromChildren(children: ?React$Node) {
   const childList = React.Children.toArray(children).filter(
-    child => child !== null && child !== undefined,
+    (child) => child !== null && child !== undefined
   );
 
   if (!childList.length) {
     return null;
   }
 
-  const isJoinable = childList.every(child => JOINABLE_TYPES.has(typeof child));
+  const isJoinable = childList.every((child) => JOINABLE_TYPES.has(typeof child));
 
   if (!isJoinable) {
     return null;

package/textarea/constants.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
-export {SIZE, ADJOINED, STATE_CHANGE_TYPE} from '../input/constants.js';
+export { SIZE, ADJOINED, STATE_CHANGE_TYPE } from '../input/constants.js';
 
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;

package/textarea/index.js.flow

@@ -5,12 +5,12 @@ 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 Textarea} from './textarea.js';
-export {default as StatefulTextarea} from './stateful-textarea.js';
-export {default as StatefulContainer} from './stateful-container.js';
+export { default as Textarea } from './textarea.js';
+export { default as StatefulTextarea } from './stateful-textarea.js';
+export { default as StatefulContainer } from './stateful-container.js';
 // Styled elements
-export {StyledTextareaContainer, StyledTextarea} from './styled-components.js';
-export {STATE_CHANGE_TYPE, SIZE} from './constants.js';
+export { StyledTextareaContainer, StyledTextarea } from './styled-components.js';
+export { STATE_CHANGE_TYPE, SIZE } from './constants.js';
 export type * from './types.js';
 
 declare var __DEV__: boolean;

package/textarea/stateful-container.js.flow

@@ -6,6 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import StatefulContainer from '../input/stateful-container.js';
+
 export default StatefulContainer;
 
 declare var __DEV__: boolean;

package/textarea/stateful-textarea.js.flow

@@ -8,7 +8,7 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import StatefulContainer from './stateful-container.js';
 import Textarea from './textarea.js';
-import type {StatefulTextareaPropsT, TextareaPropsT} from './types.js';
+import type { StatefulTextareaPropsT, TextareaPropsT } from './types.js';
 
 export default function StatefulTextarea(props: StatefulTextareaPropsT) {
   return (

package/textarea/styled-components.js

@@ -15,19 +15,20 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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; }
 
-// $FlowFixMe https://github.com/facebook/flow/issues/7745
 var StyledTextAreaRoot = (0, _index.styled)('div', function (props) {
-  return (0, _styledComponents.getRootStyles)(_objectSpread(_objectSpread({}, props), {}, {
+  return (0, _styledComponents.getRootStyles)(_objectSpread(_objectSpread({
+    $positive: false
+  }, props), {}, {
     $hasIconTrailing: false
   }));
-}); // $FlowFixMe https://github.com/facebook/flow/issues/7745
-
+});
 exports.StyledTextAreaRoot = StyledTextAreaRoot;
 StyledTextAreaRoot.displayName = "StyledTextAreaRoot";
 var StyledTextareaContainer = (0, _index.styled)('div', function (props) {
-  return _objectSpread({}, (0, _styledComponents.getInputContainerStyles)(props));
-}); // $FlowFixMe https://github.com/facebook/flow/issues/7745
-
+  return _objectSpread({}, (0, _styledComponents.getInputContainerStyles)(_objectSpread({
+    $positive: false
+  }, props)));
+});
 exports.StyledTextareaContainer = StyledTextareaContainer;
 StyledTextareaContainer.displayName = "StyledTextareaContainer";
 var StyledTextarea = (0, _index.styled)('textarea', function (props) {