baseui 10.10.0 → 10.12.0

package/es/phone-input/base-country-picker.js

@@ -35,6 +35,7 @@ const DropdownListItem = /*#__PURE__*/React.forwardRef((props, ref) => {
     ref: ref
   }, rest), props.children);
 });
+DropdownListItem.displayName = 'DropdownListItem';
 
 function DropdownOptionContent(props) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, props.children);
@@ -140,15 +141,12 @@ export default function CountryPicker(props) {
       }
     }
   };
-  const [Select, selectProps] = getOverrides(overrides.CountrySelect, DefaultSelect); // $FlowFixMe
-
+  const [Select, selectProps] = getOverrides(overrides.CountrySelect, DefaultSelect);
   const selectOverrides = mergeOverrides(baseSelectOverrides, {
-    Dropdown: overrides.CountrySelectDropdown,
-    DropdownListItem: overrides.CountrySelectDropdownListItem
-  }); // $FlowFixMe
-
-  selectProps.overrides = mergeOverrides(selectOverrides, // $FlowFixMe
-  selectProps.overrides);
+    Dropdown: overrides.CountrySelectDropdown || {},
+    DropdownListItem: overrides.CountrySelectDropdownListItem || {}
+  });
+  selectProps.overrides = mergeOverrides(selectOverrides, selectProps.overrides);
   const [FlagColumn, flagColumnProps] = getOverrides(overrides.CountrySelectDropdownFlagColumn, DefaultFlagColumn);
   const [FlagContainer, flagContainerProps] = getOverrides(overrides.FlagContainer, StyledFlagContainer);
   const [NameColumn, nameColumnProps] = getOverrides(overrides.CountrySelectDropdownNameColumn, DefaultNameColumn);

package/es/phone-input/country-picker.js

@@ -84,15 +84,12 @@ export default function CountryPicker(props) {
       }
     }
   };
-  const [Select, selectProps] = getOverrides(overrides.CountrySelect, DefaultSelect); // $FlowFixMe
-
+  const [Select, selectProps] = getOverrides(overrides.CountrySelect, DefaultSelect);
   const selectOverrides = mergeOverrides(baseSelectOverrides, {
-    Dropdown: overrides.CountrySelectDropdown,
-    DropdownListItem: overrides.CountrySelectDropdownListItem
-  }); // $FlowFixMe
-
-  selectProps.overrides = mergeOverrides(selectOverrides, // $FlowFixMe
-  selectProps.overrides);
+    Dropdown: overrides.CountrySelectDropdown || {},
+    DropdownListItem: overrides.CountrySelectDropdownListItem || {}
+  });
+  selectProps.overrides = mergeOverrides(selectOverrides, selectProps.overrides);
   const baseOverrides = {
     FlagContainer: {
       style: ({

package/es/phone-input/country-select-dropdown.js

@@ -88,6 +88,8 @@ function CountrySelectDropdown(props) {
   }));
 }
 
-export default /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(CountrySelectDropdown, _extends({}, props, {
+const CountrySelectDropdownFwd = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(CountrySelectDropdown, _extends({}, props, {
   $forwardedRef: ref
-})));
+})));
+CountrySelectDropdownFwd.displayName = 'CountrySelectDropdownFwd';
+export default CountrySelectDropdownFwd;

package/es/phone-input/country-select.js

@@ -62,15 +62,12 @@ export default function CountrySelect(props) {
       }
     }
   };
-  const [Select, selectProps] = getOverrides(overrides.CountrySelect, DefaultSelect); // $FlowFixMe
-
+  const [Select, selectProps] = getOverrides(overrides.CountrySelect, DefaultSelect);
   const selectOverrides = mergeOverrides(baseSelectOverrides, {
-    Dropdown: overrides.CountrySelectDropdown,
-    DropdownListItem: overrides.CountrySelectDropdownListItem
-  }); // $FlowFixMe
-
-  selectProps.overrides = mergeOverrides(selectOverrides, // $FlowFixMe
-  selectProps.overrides);
+    Dropdown: overrides.CountrySelectDropdown || {},
+    DropdownListItem: overrides.CountrySelectDropdownListItem || {}
+  });
+  selectProps.overrides = mergeOverrides(selectOverrides, selectProps.overrides);
   const [CountrySelectContainer, countrySelectContainerProps] = getOverrides(overrides.CountrySelectContainer, StyledCountrySelectContainer);
   const [DialCode, dialCodeProps] = getOverrides(overrides.DialCode, StyledDialCode);
   return /*#__PURE__*/React.createElement(CountrySelectContainer, countrySelectContainerProps, /*#__PURE__*/React.createElement(BaseCountryPicker, _extends({}, props, {

package/es/phone-input/flag.js

@@ -18,7 +18,8 @@ export default function Flag(props) {
     ...restProps
   } = props;
   const iso = oldIsoProp || $iso;
-  const FlagComponent = flags[`Flag${iso.toUpperCase()}`];
+  const FlagComponent = flags[`Flag${iso.toUpperCase()}`]; //$FlowExpectedError[cannot-spread-inexact]
+
   return /*#__PURE__*/React.createElement(FlagComponent, _extends({
     width: width,
     "data-iso": iso

package/es/phone-input/phone-input-lite.js

@@ -70,8 +70,7 @@ export default function PhoneInputLite(props) {
       }
     }
   };
-  const [Input, inputProps] = getOverrides(overrides.Input, DefaultInput); // $FlowFixMe
-
+  const [Input, inputProps] = getOverrides(overrides.Input, DefaultInput);
   inputProps.overrides = mergeOverrides(baseOverrides, inputProps.overrides);
   return /*#__PURE__*/React.createElement(Input, _extends({
     "aria-label": ariaLabel,

package/es/phone-input/phone-input-next.js

@@ -82,8 +82,7 @@ export default function PhoneInputNext(props) {
     Before: mergedDialCodeOverride.DialCode
   };
   const [Root, rootProps] = getOverrides(overrides.Root, StyledPhoneInputRoot);
-  const [Input, inputProps] = getOverrides(overrides.Input, DefaultInput); // $FlowFixMe
-
+  const [Input, inputProps] = getOverrides(overrides.Input, DefaultInput);
   inputProps.overrides = mergeOverrides(baseOverrides, inputProps.overrides);
   return /*#__PURE__*/React.createElement(Root, _extends({}, rootProps, {
     "data-baseweb": "phone-input-next"

package/es/pin-code/pin-code.js

@@ -54,8 +54,7 @@ export default class PinCode extends React.Component {
           type: typeof this.props.mask === 'boolean' && this.props.mask ? 'password' : 'text'
         }
       }
-    }; // $FlowFixMe
-
+    };
     inputProps.overrides = mergeOverrides(baseOverrides, inputProps.overrides);
     return /*#__PURE__*/React.createElement(Root, _extends({
       "data-baseweb": "pin-code"

package/es/popover/popover.js

@@ -8,10 +8,6 @@ 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.
 */
-
-/* eslint-disable react/no-find-dom-node */
-
-/* eslint-disable cup/no-undef */
 import * as React from 'react';
 import FocusLock, { MoveFocusInside } from 'react-focus-lock';
 import { getOverride, getOverrideProps } from '../helpers/overrides.js';
@@ -133,11 +129,13 @@ class PopoverInner extends React.Component {
       const popper = this.popperRef.current;
       const anchor = this.anchorRef.current; // Ignore document click if it came from popover or anchor
 
-      if (!popper || popper === target || popper.contains(target)) {
+      if (!popper || popper === target || // eslint-disable-next-line cup/no-undef
+      target instanceof Node && popper.contains(target)) {
         return;
       }
 
-      if (!anchor || anchor === target || anchor.contains(target)) {
+      if (!anchor || anchor === target || // eslint-disable-next-line cup/no-undef
+      target instanceof Node && popper.contains(target)) {
         return;
       }
 
@@ -478,8 +476,10 @@ const Popover = props => {
   const {
     innerRef
   } = props;
+  const gID = useUID(); //$FlowExpectedError[cannot-spread-inexact]
+
   return /*#__PURE__*/React.createElement(PopoverInner, _extends({
-    id: props.id || useUID(),
+    id: props.id || gID,
     ref: innerRef
   }, props));
 };

package/es/progress-bar/progressbar-rounded.js

@@ -89,28 +89,31 @@ function ProgressBarRounded({
     loop();
   }, [progress]); // We want *only* `progress` to trigger this effect
 
-  return /*#__PURE__*/React.createElement(Root, _extends({
-    "data-baseweb": "progressbar-rounded",
-    role: "progressbar",
-    "aria-valuenow": progress,
-    "aria-valuemin": 0,
-    "aria-valuemax": 1,
-    $size: size,
-    $inline: inline
-  }, restProps, rootProps), /*#__PURE__*/React.createElement(Svg, _extends({
-    $size: size
-  }, restProps, svgProps), /*#__PURE__*/React.createElement(TrackBackground, _extends({
-    $size: size
-  }, trackBackgroundProps)), /*#__PURE__*/React.createElement(TrackForeground // $FlowFixMe
-  , _extends({
-    ref: pathRef,
-    $size: size,
-    $visible: !!pathRef.current,
-    $pathLength: pathLength,
-    $pathProgress: pathProgress
-  }, trackForegroundProps))), /*#__PURE__*/React.createElement(Text, _extends({
-    $size: size
-  }, textProps), roundTo(Math.min(progress * 100, 100)), "%"));
+  return (
+    /*#__PURE__*/
+    // $FlowExpectedError[cannot-spread-inexact]
+    React.createElement(Root, _extends({
+      "data-baseweb": "progressbar-rounded",
+      role: "progressbar",
+      "aria-valuenow": progress,
+      "aria-valuemin": 0,
+      "aria-valuemax": 1,
+      $size: size,
+      $inline: inline
+    }, restProps, rootProps), /*#__PURE__*/React.createElement(Svg, _extends({
+      $size: size
+    }, restProps, svgProps), /*#__PURE__*/React.createElement(TrackBackground, _extends({
+      $size: size
+    }, trackBackgroundProps)), /*#__PURE__*/React.createElement(TrackForeground, _extends({
+      ref: pathRef,
+      $size: size,
+      $visible: !!pathRef.current,
+      $pathLength: pathLength,
+      $pathProgress: pathProgress
+    }, trackForegroundProps))), /*#__PURE__*/React.createElement(Text, _extends({
+      $size: size
+    }, textProps), roundTo(Math.min(progress * 100, 100)), "%"))
+  );
 }
 
 export default ProgressBarRounded;

package/es/progress-bar/progressbar.js

@@ -25,7 +25,6 @@ class ProgressBar extends React.Component {
 
   render() {
     const {
-      ariaLabel,
       overrides = {},
       getProgressLabel,
       value,
@@ -39,7 +38,8 @@ class ProgressBar extends React.Component {
       errorMessage,
       forwardedRef,
       ...restProps
-    } = this.props; // fallback on successValue (and it's default) if maxValue is not set by user
+    } = this.props;
+    const ariaLabel = this.props['aria-label'] || this.props.ariaLabel; // fallback on successValue (and it's default) if maxValue is not set by user
 
     const maximumValue = maxValue !== 100 ? maxValue : successValue;
     const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
@@ -109,7 +109,10 @@ _defineProperty(ProgressBar, "defaultProps", {
   value: 0
 });
 
-const ForwardedProgressBar = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(ProgressBar, _extends({
+const ForwardedProgressBar = /*#__PURE__*/React.forwardRef((props, ref) =>
+/*#__PURE__*/
+//$FlowExpectedError[cannot-spread-inexact]
+React.createElement(ProgressBar, _extends({
   forwardedRef: ref
 }, props)));
 ForwardedProgressBar.displayName = 'ProgressBar';

package/es/radio/radio.js

@@ -61,7 +61,7 @@ class Radio extends React.Component {
   }
 
   componentDidMount() {
-    if (this.props.autoFocus && this.props.inputRef.current) {
+    if (this.props.autoFocus && this.props.inputRef?.current) {
       this.props.inputRef.current.focus();
     }
 

package/es/radio/radiogroup.js

@@ -64,7 +64,7 @@ class StatelessRadioGroup extends React.Component {
     if (process.env.NODE_ENV !== "production") {
       const overrideKeys = Object.keys(overrides); // TODO(v11)
 
-      if (overrideKeys.length && !overrideKeys.includes('RadioGroupRoot')) {
+      if (Boolean(overrideKeys.length) && !overrideKeys.includes('RadioGroupRoot')) {
         // eslint-disable-next-line no-console
         console.warn(`All overrides beside 'RadioGroupRoot' will be deprecated in the next major version update.
           Pass other overrides to the 'Radio' children instead.

package/es/rating/emoticon-rating.js

@@ -79,7 +79,7 @@ class EmoticonRating extends React.Component {
         refs.push(starRef);
         ratings.push( /*#__PURE__*/React.createElement(Emoticon, _extends({
           key: x,
-          role: "radio" // eslint-disable-next-line flowtype/no-weak-types
+          role: "radio" // flowlint-next-line unclear-type:off
           ,
           ref: starRef,
           tabIndex: isFocusable ? '0' : '-1',

package/es/rating/star-rating.js

@@ -81,7 +81,7 @@ class StarRating extends React.Component {
         ratings.push( /*#__PURE__*/React.createElement(Star, _extends({
           key: x,
           role: "radio",
-          title: "rating" // eslint-disable-next-line flowtype/no-weak-types
+          title: "rating" // flowlint-next-line unclear-type:off
           ,
           ref: starRef,
           tabIndex: isFocusable ? '0' : '-1',

package/es/select/autosize-input.js

@@ -78,8 +78,7 @@ export default class AutosizeInput extends React.Component {
       ref: inputRef
     }, inputProps)), /*#__PURE__*/React.createElement(StyledInputSizer, {
       $size: this.props.$size,
-      ref: this.sizerRef // $FlowFixMe checking for $style before use
-      ,
+      ref: this.sizerRef,
       $style: inputProps.$style ? inputProps.$style : null
     }, sizerValue));
   }

package/es/select/dropdown.js

@@ -115,7 +115,7 @@ export default class SelectDropdown extends React.Component {
       $type: type,
       $width: width
     };
-  } // eslint-disable-next-line flowtype/no-weak-types
+  } // flowlint-next-line unclear-type:off
 
 
   render() {
@@ -131,8 +131,7 @@ export default class SelectDropdown extends React.Component {
     } = this.props;
     const [DropdownContainer, dropdownContainerProps] = getOverrides(overrides.DropdownContainer, StyledDropdownContainer);
     const [ListItem, listItemProps] = getOverrides(overrides.DropdownListItem, StyledDropdownListItem);
-    const [OverriddenStatefulMenu, // $FlowFixMe
-    {
+    const [OverriddenStatefulMenu, {
       overrides: statefulMenuOverrides = {},
       ...restStatefulMenuProps
     }] = getOverrides(overrides.StatefulMenu, StatefulMenu);
@@ -184,7 +183,6 @@ export default class SelectDropdown extends React.Component {
                 },
                 // slightly hacky way to handle the list item style overrides
                 // since the menu component doesn't provide a top level overrides for it
-                // $FlowFixMe
                 style: listItemProps.$style
               }
             },

package/es/select/multi-value.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.js';
-import { Tag, VARIANT as TAG_VARIANT } from '../tag/index.js'; // eslint-disable-next-line flowtype/no-weak-types
+import { Tag, VARIANT as TAG_VARIANT } from '../tag/index.js'; // flowlint-next-line unclear-type:off
 
 export default function MultiValue(props) {
   const {

package/es/select/select-component.js

@@ -36,7 +36,7 @@ const isLeftClick = event => event.button !== null && event.button !== undefined
 
 const containsNode = (parent, child) => {
   if (typeof document !== 'undefined') {
-    // eslint-disable-next-line flowtype/no-weak-types
+    // flowlint-next-line unclear-type:off
     return child && parent && parent.contains(child);
   }
 };
@@ -57,7 +57,7 @@ export function isInteractive(rootTarget, rootElement) {
   }
 
   return false;
-} // eslint-disable-next-line flowtype/no-weak-types
+}
 
 class Select extends React.Component {
   // anchor is a ref that refers to the outermost element rendered when the dropdown menu is not
@@ -437,12 +437,8 @@ class Select extends React.Component {
     _defineProperty(this, "handleInputRef", input => {
       this.input = input;
 
-      if (this.props.controlRef) {
-        if (typeof this.props.controlRef === 'function') {
-          this.props.controlRef(input);
-        } else {
-          this.props.controlRef.current = input;
-        }
+      if (this.props.controlRef && typeof this.props.controlRef === 'function') {
+        this.props.controlRef(input);
       }
     });
 
@@ -561,13 +557,19 @@ class Select extends React.Component {
     }
 
     this.isItMounted = true;
+    const {
+      controlRef
+    } = this.props;
 
-    if (this.props.methodsRef) {
-      const {
-        methodsRef
-      } = this.props;
-      methodsRef.current = {
-        setDropdownOpen: this.handleDropdownOpen.bind(this)
+    if (controlRef && typeof controlRef !== 'function') {
+      controlRef.current = {
+        setDropdownOpen: this.handleDropdownOpen.bind(this),
+        setInputValue: this.handleSetInputValue.bind(this),
+        setInputFocus: this.handleSetInputFocus.bind(this),
+        setInputBlur: this.handleSetInputBlur.bind(this),
+        // `focus` & `blur` below are for backwards compatibility and may be removed. Use setInputFocus and setInputBlur instead.
+        focus: this.handleSetInputFocus.bind(this),
+        blur: this.handleSetInputBlur.bind(this)
       };
     }
   }
@@ -608,6 +610,20 @@ class Select extends React.Component {
     this.setState({
       isOpen: nextOpenState
     });
+  }
+
+  handleSetInputValue(newInputValue) {
+    this.setState({
+      inputValue: newInputValue
+    });
+  }
+
+  handleSetInputFocus() {
+    this.input.focus();
+  }
+
+  handleSetInputBlur() {
+    this.input.blur();
   } // Handle touch outside on mobile to dismiss menu, ensures that the
   // touch target is not within the anchor DOM node.
 
@@ -748,7 +764,8 @@ class Select extends React.Component {
           padding: 0
         },
         tabIndex: -1
-      }, overrides.Input ? overrides.Input.props ? overrides.Input.props : {} : {})));
+      }, overrides.Input ? overrides.Input.props ? // $FlowExpectedError[not-an-object]
+      overrides.Input.props : {} : {})));
     }
 
     return /*#__PURE__*/React.createElement(InputContainer, _extends({}, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement(AutosizeInput, _extends({
@@ -956,7 +973,7 @@ class Select extends React.Component {
     // apply the ref to the Root component below it would be overwritten before the popover
     // renders it. Using this strategy, we will get a ref to the popover, then reuse its
     // anchorRef so we can check if clicks are on the select component or not.
-    // eslint-disable-next-line flowtype/no-weak-types
+    // flowlint-next-line unclear-type:off
     , _extends({
       innerRef: ref => {
         if (!ref) return;

package/es/select/styled-components.js

@@ -5,9 +5,8 @@ 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/index.js';
-import { TYPE } from './constants.js';
+import { TYPE, SIZE } from './constants.js';
 import { StyledList, StyledListItem } from '../menu/index.js';
-import { SIZE } from './constants.js';
 import { ellipsisText } from '../styles/util.js';
 
 function getFont(size = SIZE.default, typography) {

package/es/select/value.js

@@ -8,7 +8,7 @@ LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
 import { StyledSingleValue } from './styled-components.js';
-import { getOverrides } from '../helpers/overrides.js'; // eslint-disable-next-line flowtype/no-weak-types
+import { getOverrides } from '../helpers/overrides.js'; // flowlint-next-line unclear-type:off
 
 export default function Value(props) {
   const {

package/es/slider/slider.js

@@ -46,7 +46,7 @@ function Slider({
       setIsFocusVisible(true);
     }
 
-    const index = // eslint-disable-next-line flowtype/no-weak-types
+    const index = // flowlint-next-line unclear-type:off
     event.target.parentNode.firstChild === event.target ? 0 : 1;
     setFocusedThumbIndex(index);
   }, []);
@@ -111,7 +111,7 @@ function Slider({
       index,
       isDragged
     }) => {
-      const displayLabel = persistentThumb ? persistentThumb : (index && isHovered1 || !index && isHovered0 || isDragged) && !disabled;
+      const displayLabel = persistentThumb ? persistentThumb : (!!index && isHovered1 || !index && isHovered0 || isDragged) && !disabled;
       return /*#__PURE__*/React.createElement(Thumb, _extends({}, props, {
         onMouseEnter: () => {
           if (index === 0) {

package/es/snackbar/snackbar-element.js

@@ -11,7 +11,8 @@ import { Button, KIND, SHAPE } from '../button/index.js';
 import { getOverrides } from '../helpers/overrides.js';
 import { useStyletron } from '../styles/index.js';
 import { StyledRoot, StyledContent, StyledStartEnhancerContainer, StyledSpinner, StyledMessage, StyledWrapActionButtonContainer, StyledActionButtonContainer } from './styled-components.js';
-const ActionButton = /*#__PURE__*/React.forwardRef(({
+const ActionButton = /*#__PURE__*/React.forwardRef( // flowlint-next-line unclear-type:off
+({
   onClick,
   message,
   overrides = {}
@@ -42,6 +43,7 @@ const ActionButton = /*#__PURE__*/React.forwardRef(({
     shape: SHAPE.pill
   }, message));
 });
+ActionButton.displayName = 'ActionButton';
 export default function SnackbarElement({
   actionMessage,
   actionOnClick,
@@ -94,8 +96,7 @@ export default function SnackbarElement({
   React.useEffect(() => {
     if (typeof document !== 'undefined') {
       if (focus && actionButtonRef.current) {
-        prevFocusRef.current = document.activeElement; // $FlowFixMe
-
+        prevFocusRef.current = document.activeElement;
         actionButtonRef.current.focus();
       }
 

package/es/snackbar/styled-components.js

@@ -52,7 +52,7 @@ export const StyledSpinner = withStyle(StyledSpinnerNext, ({
   };
 });
 StyledSpinner.displayName = "StyledSpinner";
-export const StyledMessage = styled('p', // $FlowFixMe - suppressing due to webkit properties
+export const StyledMessage = styled('p', //$FlowExpectedError[incompatible-shape]
 ({
   $theme,
   $hasSuffix

package/es/spinner/spinner.js

@@ -32,24 +32,28 @@ class Spinner extends React.Component {
     }, overrides);
     const [TrackPath, trackPathProps] = getOverrides(overrides.TrackPath, StyledTrackPath);
     const [ActivePath, activePathProps] = getOverrides(overrides.ActivePath, StyledActivePath);
-    return /*#__PURE__*/React.createElement(Icon, _extends({
-      "aria-label": this.props['aria-label'] || 'Loading',
-      "data-baseweb": "spinner",
-      title: "Spinner",
-      viewBox: "3 3 18 18"
-    }, this.props, {
-      overrides: mergedOverrides
-    }), /*#__PURE__*/React.createElement(TrackPath, _extends({
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5ZM3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z",
-      $color: this.props.color
-    }, trackPathProps)), /*#__PURE__*/React.createElement(ActivePath, _extends({
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M16.9497 7.05015C14.2161 4.31648 9.78392 4.31648 7.05025 7.05015C6.65973 7.44067 6.02656 7.44067 5.63604 7.05015C5.24551 6.65962 5.24551 6.02646 5.63604 5.63593C9.15076 2.12121 14.8492 2.12121 18.364 5.63593C18.7545 6.02646 18.7545 6.65962 18.364 7.05015C17.9734 7.44067 17.3403 7.44067 16.9497 7.05015Z",
-      $color: this.props.color
-    }, activePathProps)));
+    return (
+      /*#__PURE__*/
+      // $FlowExpectedError[cannot-spread-inexact]
+      React.createElement(Icon, _extends({
+        "aria-label": 'Loading',
+        "data-baseweb": "spinner",
+        title: "Spinner",
+        viewBox: "3 3 18 18"
+      }, this.props, {
+        overrides: mergedOverrides
+      }), /*#__PURE__*/React.createElement(TrackPath, _extends({
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5ZM3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z",
+        $color: this.props.color
+      }, trackPathProps)), /*#__PURE__*/React.createElement(ActivePath, _extends({
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M16.9497 7.05015C14.2161 4.31648 9.78392 4.31648 7.05025 7.05015C6.65973 7.44067 6.02656 7.44067 5.63604 7.05015C5.24551 6.65962 5.24551 6.02646 5.63604 5.63593C9.15076 2.12121 14.8492 2.12121 18.364 5.63593C18.7545 6.02646 18.7545 6.65962 18.364 7.05015C17.9734 7.44067 17.3403 7.44067 16.9497 7.05015Z",
+        $color: this.props.color
+      }, activePathProps)))
+    );
   }
 
 }

package/es/spinner/styled-components.js

@@ -45,12 +45,14 @@ export const StyledActivePath = styled('path', props => ({
 
 StyledActivePath.displayName = "StyledActivePath";
 export const StyledSpinnerNext = styled('i', ({
+  //$FlowFixMe
   $theme,
   $color = $theme.colors.contentAccent,
+  //$FlowFixMe
   $borderWidth,
+  //$FlowFixMe
   $size = SIZE.medium
 }) => {
-  //$FlowFixMe
   let borderSize = {
     large: $theme.sizing.scale300,
     medium: $theme.sizing.scale100,
@@ -71,7 +73,6 @@ export const StyledSpinnerNext = styled('i', ({
   }
 
   if (!boxSize) {
-    //$FlowFixMe
     boxSize = $theme.sizing[$size];
 
     if (!boxSize) {

package/es/styles/__mocks__/styled.js

@@ -9,7 +9,7 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 
-/* eslint-disable flowtype/no-weak-types */
+/* flowlint unclear-type:off */
 import * as React from 'react';
 import { getInitialStyle } from 'styletron-standard';
 import { LightTheme } from '../../themes/index.js';
@@ -100,6 +100,7 @@ export function styled(ElementName, objOrFn = {}) {
 }
 export const withStyle = styled;
 export function withWrapper(StyledElement, wrapperFn) {
+  // eslint-disable-next-line react/display-name
   return /*#__PURE__*/React.forwardRef((props, ref) => wrapperFn(StyledElement)({
     ref: ref,
     ...props,