baseui 0.0.0-next-2992a67 → 0.0.0-next-ecc760f

package/esm/page-control/styled-components.js

@@ -0,0 +1,95 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+/*
+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.
+*/
+import { styled, hexToRgb } from '../styles';
+import { SIZE, KIND } from './constants';
+export var StyledRoot = styled('div', function (_ref) {
+  var $kind = _ref.$kind,
+      $theme = _ref.$theme;
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    gap: $theme.sizing.scale300,
+    width: 'fit-content',
+    paddingTop: $theme.sizing.scale100,
+    paddingRight: $theme.sizing.scale500,
+    paddingBottom: $theme.sizing.scale100,
+    paddingLeft: $theme.sizing.scale500,
+    borderRadius: $theme.borders.radius500,
+    backgroundColor: $kind === KIND.backgroundProtection ? $theme.colors.backgroundPrimary : 'transparent'
+  };
+});
+StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
+export var StyledDot = styled('input', function (_ref2) {
+  var _sizes, _colors;
+
+  var $active = _ref2.$active,
+      $kind = _ref2.$kind,
+      $size = _ref2.$size,
+      $disabled = _ref2.$disabled,
+      $isVisible = _ref2.$isVisible,
+      $theme = _ref2.$theme;
+  var sizes = (_sizes = {}, _defineProperty(_sizes, SIZE.large, {
+    height: $theme.sizing.scale300,
+    width: $theme.sizing.scale300
+  }), _defineProperty(_sizes, SIZE.medium, {
+    height: $theme.sizing.scale200,
+    width: $theme.sizing.scale200,
+    marginTop: '1px',
+    marginRight: '1px',
+    marginBottom: '1px',
+    marginLeft: '1px'
+  }), _defineProperty(_sizes, SIZE.small, {
+    height: $theme.sizing.scale100,
+    width: $theme.sizing.scale100,
+    marginTop: $theme.sizing.scale0,
+    marginRight: $theme.sizing.scale0,
+    marginBottom: $theme.sizing.scale0,
+    marginLeft: $theme.sizing.scale0
+  }), _sizes);
+  var colors = (_colors = {}, _defineProperty(_colors, KIND.default, {
+    active: $theme.colors.contentPrimary,
+    inactive: $theme.colors.backgroundTertiary
+  }), _defineProperty(_colors, KIND.backgroundProtection, {
+    active: $theme.colors.contentPrimary,
+    inactive: $theme.colors.backgroundTertiary
+  }), _defineProperty(_colors, KIND.inverse, {
+    active: $theme.colors.contentInversePrimary,
+    inactive: $theme.colors.backgroundInversePrimary
+  }), _defineProperty(_colors, KIND.alwaysLight, {
+    active: $theme.colors.contentOnColorInverse,
+    inactive: hexToRgb($theme.colors.backgroundAlwaysDark, '0.12')
+  }), _defineProperty(_colors, KIND.alwaysDark, {
+    active: $theme.colors.contentOnColor,
+    inactive: hexToRgb($theme.colors.backgroundAlwaysLight, '0.24')
+  }), _colors);
+  return _objectSpread(_objectSpread({
+    // reset default input styles
+    appearance: 'none',
+    margin: 0
+  }, sizes[$size]), {}, {
+    borderRadius: '50%',
+    backgroundColor: $disabled ? $theme.colors.contentStateDisabled : $active ? colors[$kind].active : colors[$kind].inactive
+  }, !$isVisible ? {
+    // https://www.nomensa.com/blog/how-improve-web-accessibility-hiding-elements
+    border: 0,
+    clip: 'rect(1px, 1px, 1px, 1px)',
+    height: '1px',
+    margin: '-1px',
+    overflow: 'hidden',
+    padding: 0,
+    position: 'absolute',
+    width: '1px'
+  } : {});
+});
+StyledDot.displayName = "StyledDot";
+StyledDot.displayName = 'StyledDot';

package/esm/page-control/types.js

@@ -0,0 +1 @@
+export {};

package/esm/pagination/pagination.js

@@ -46,7 +46,8 @@ 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.
 */
-import * as React from 'react';
+import * as React from 'react'; // @ts-ignore
+
 import memoize from 'memoize-one'; // Files
 
 import { LocaleContext } from '../locale';
@@ -56,7 +57,7 @@ import { Button, KIND } from '../button';
 import { StyledRoot, StyledMaxLabel, StyledDropdownContainer } from './styled-components';
 import ChevronLeft from '../icon/chevron-left';
 import ChevronRight from '../icon/chevron-right';
-import { getOverrides } from '../helpers/overrides';
+import { getOverrides, mergeOverrides } from '../helpers/overrides';
 import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible';
 
 var Pagination = /*#__PURE__*/function (_React$PureComponent) {
@@ -99,6 +100,7 @@ var Pagination = /*#__PURE__*/function (_React$PureComponent) {
       var menuOptions = [];
 
       for (var i = 1; i <= numPages; i++) {
+        // @ts-ignore
         menuOptions.push({
           label: i
         });
@@ -201,6 +203,66 @@ var Pagination = /*#__PURE__*/function (_React$PureComponent) {
           Select = _getOverrides8[0],
           selectProps = _getOverrides8[1];
 
+      var defaultSelectOverrides = {
+        ControlContainer: {
+          // @ts-ignore
+          style: function style(_ref) {
+            var $theme = _ref.$theme,
+                $disabled = _ref.$disabled,
+                $isOpen = _ref.$isOpen,
+                $error = _ref.$error;
+            return {
+              borderLeftColor: 'transparent',
+              borderRightColor: 'transparent',
+              borderTopColor: 'transparent',
+              borderBottomColor: 'transparent',
+              boxShadow: 'none',
+              backgroundColor: $disabled ? $theme.colors.buttonDisabledFill : $isOpen ? $theme.colors.buttonTertiaryHover : $error ? $theme.colors.negative50 : $theme.colors.buttonTertiaryFill,
+              ':hover': {
+                backgroundColor: $theme.colors.buttonTertiaryHover
+              }
+            };
+          }
+        },
+        InputContainer: {
+          style: {
+            marginLeft: 0
+          }
+        },
+        ValueContainer: {
+          style: {
+            flexBasis: 'auto'
+          }
+        },
+        SingleValue: {
+          // @ts-ignore
+          style: function style(_ref2) {
+            var $theme = _ref2.$theme;
+            return _objectSpread(_objectSpread({
+              position: 'relative',
+              paddingTop: '0',
+              paddingBottom: '0',
+              paddingLeft: $theme.sizing.scale200,
+              paddingRight: $theme.sizing.scale500,
+              color: $theme.colors.buttonTertiaryText
+            }, $theme.typography.font350), {}, {
+              lineHeight: 'unset'
+            });
+          }
+        },
+        SelectArrow: {
+          // @ts-ignore
+          style: function style(_ref3) {
+            var $theme = _ref3.$theme;
+            return {
+              width: '24px',
+              height: '24px',
+              color: $theme.colors.buttonTertiaryText
+            };
+          }
+        }
+      };
+      selectProps.overrides = mergeOverrides(defaultSelectOverrides, selectProps.overrides);
       var options = this.getMenuOptions(numPages);
       return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
         return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, function (locale) {
@@ -241,63 +303,7 @@ var Pagination = /*#__PURE__*/function (_React$PureComponent) {
               label: currentPage
             }],
             maxDropdownHeight: "200px",
-            size: size,
-            overrides: {
-              ControlContainer: {
-                style: function style(_ref) {
-                  var $theme = _ref.$theme,
-                      $disabled = _ref.$disabled,
-                      $isOpen = _ref.$isOpen,
-                      $error = _ref.$error;
-                  return {
-                    borderLeftColor: 'transparent',
-                    borderRightColor: 'transparent',
-                    borderTopColor: 'transparent',
-                    borderBottomColor: 'transparent',
-                    boxShadow: 'none',
-                    backgroundColor: $disabled ? $theme.colors.buttonDisabledFill : $isOpen ? $theme.colors.buttonTertiaryHover : $error ? $theme.colors.negative50 : $theme.colors.buttonTertiaryFill,
-                    ':hover': {
-                      backgroundColor: $theme.colors.buttonTertiaryHover
-                    }
-                  };
-                }
-              },
-              InputContainer: {
-                style: {
-                  marginLeft: 0
-                }
-              },
-              ValueContainer: {
-                style: {
-                  flexBasis: 'auto'
-                }
-              },
-              SingleValue: {
-                style: function style(_ref2) {
-                  var $theme = _ref2.$theme;
-                  return _objectSpread(_objectSpread({
-                    position: 'relative',
-                    paddingTop: '0',
-                    paddingBottom: '0',
-                    paddingLeft: $theme.sizing.scale200,
-                    paddingRight: $theme.sizing.scale500,
-                    color: $theme.colors.buttonTertiaryText
-                  }, $theme.typography.font350), {}, {
-                    lineHeight: 'unset'
-                  });
-                }
-              },
-              SelectArrow: {
-                style: function style(_ref3) {
-                  var $theme = _ref3.$theme;
-                  return {
-                    width: '24px',
-                    height: '24px',
-                    color: $theme.colors.buttonTertiaryText
-                  };
-                }
-              }
-            }
+            size: size
           }, selectProps))), /*#__PURE__*/React.createElement(MaxLabel, _extends({}, maxLabelProps, {
             "aria-hidden": true
           }), "".concat(labels && labels.preposition ? labels.preposition : locale.pagination.preposition || '', " ").concat(numPages)), /*#__PURE__*/React.createElement(Button, {

package/esm/payment-card/payment-card.js

@@ -149,7 +149,8 @@ var PaymentCard = /*#__PURE__*/function (_React$Component) {
       if (validatedValue.card) {
         gaps = validatedValue.card.gaps || [];
         type = validatedValue.card.type;
-      }
+      } // @ts-ignore
+
 
       var getBeforeComponent = function getBeforeComponent(theme) {
         var _iconSize;
@@ -177,7 +178,8 @@ var PaymentCard = /*#__PURE__*/function (_React$Component) {
               Before: getBeforeComponent(theme)
             })),
             onChange: function onChange(e) {
-              var _getCaretPosition = getCaretPosition(e.target.value, _this2.props.value ? String(_this2.props.value) : '', e.target.selectionStart),
+              var _getCaretPosition = getCaretPosition(e.target.value, _this2.props.value ? String(_this2.props.value) : '', // @ts-ignore
+              e.target.selectionStart),
                   _getCaretPosition2 = _slicedToArray(_getCaretPosition, 2),
                   position = _getCaretPosition2[0],
                   value = _getCaretPosition2[1]; // @ts-expect-error todo(flow->ts): looks dangerous
@@ -210,7 +212,9 @@ _defineProperty(PaymentCard, "defaultProps", {
   overrides: {},
   required: false,
   size: 'default',
+  // @ts-ignore
   startEnhancer: null,
+  // @ts-ignore
   endEnhancer: null
 });
 

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

@@ -59,7 +59,7 @@ var DropdownListItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
     ref: ref
   }, rest), props.children);
 });
-DropdownListItem.displayName = 'DropdownListItem';
+DropdownListItem.displayName = 'DropdownListItem'; // @ts-ignore
 
 function DropdownOptionContent(props) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, props.children);
@@ -122,6 +122,7 @@ export default function CountryPicker(props) {
     },
     StatefulMenu: {
       props: {
+        // @ts-ignore
         stateReducer: function stateReducer(type, nextState) {
           var next = _objectSpread(_objectSpread({}, nextState), {}, {
             highlightedIndex: resetScrollIndex ? 0 : nextState.highlightedIndex
@@ -205,6 +206,7 @@ export default function CountryPicker(props) {
   return /*#__PURE__*/React.createElement(Select, _extends({
     clearable: false,
     disabled: disabled // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    // @ts-ignore
     ,
     getOptionLabel: function getOptionLabel(_ref) {
       var option = _ref.option,
@@ -223,7 +225,8 @@ export default function CountryPicker(props) {
       }, sharedProps, flagContainerProps), iso2FlagEmoji(iso));
     },
     error: error,
-    maxDropdownHeight: maxDropdownHeight,
+    maxDropdownHeight: maxDropdownHeight // @ts-ignore
+    ,
     onChange: function onChange(event) {
       if (typeof onCountryChange === 'function') {
         onCountryChange(event);

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

@@ -54,6 +54,7 @@ export default function CountryPicker(props) {
   var overrides = props.overrides;
   var baseSelectOverrides = {
     Root: {
+      // @ts-ignore
       style: function style(_ref) {
         var _ref2;
 
@@ -65,6 +66,7 @@ export default function CountryPicker(props) {
       }
     },
     ControlContainer: {
+      // @ts-ignore
       style: function style(_ref3) {
         var _sizeToLeftPadding, _sizeToRightPadding, _styleOverride;
 
@@ -105,6 +107,7 @@ export default function CountryPicker(props) {
   selectProps.overrides = mergeOverrides(selectOverrides, selectProps.overrides);
   var baseOverrides = {
     FlagContainer: {
+      // @ts-ignore
       style: function style(_ref4) {
         var _sizeToMargin;
 
@@ -119,6 +122,7 @@ export default function CountryPicker(props) {
       }
     },
     DialCode: {
+      // @ts-ignore
       style: function style(_ref6) {
         var _ref6$$theme = _ref6.$theme,
             direction = _ref6$$theme.direction,

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

@@ -65,6 +65,7 @@ export default function CountrySelect(props) {
   };
   var baseSelectOverrides = {
     ControlContainer: {
+      // @ts-ignore
       style: function style(props) {
         if (!props.$isFocused && !props.$isPseudoFocused) {
           return {

package/esm/phone-input/default-props.js

@@ -7,7 +7,9 @@ LICENSE file in the root directory of this source tree.
 import { SIZE, DEFAULT_MAX_DROPDOWN_HEIGHT, DEFAULT_MAX_DROPDOWN_WIDTH } from './constants';
 var defaultProps = {
   'aria-label': 'Please enter a phone number without the country dial code.',
+  // @ts-ignore
   'aria-describedby': null,
+  // @ts-ignore
   'aria-labelledby': null,
   clearable: true,
   focusLock: false,
@@ -18,9 +20,11 @@ var defaultProps = {
   },
   disabled: false,
   error: false,
+  // @ts-ignore
   id: null,
   maxDropdownHeight: DEFAULT_MAX_DROPDOWN_HEIGHT,
   maxDropdownWidth: DEFAULT_MAX_DROPDOWN_WIDTH,
+  // @ts-ignore
   name: null,
   onCountryChange: function onCountryChange() {},
   onTextChange: function onTextChange() {},

package/esm/phone-input/flag.js

@@ -25,7 +25,8 @@ export default function Flag(props) {
       width = _props$width === void 0 ? '16px' : _props$width,
       restProps = _objectWithoutProperties(props, _excluded);
 
-  var iso = oldIsoProp || $iso;
+  var iso = oldIsoProp || $iso; // @ts-ignore
+
   var FlagComponent = flags["Flag".concat(iso.toUpperCase())]; //$FlowExpectedError[cannot-spread-inexact]
 
   return /*#__PURE__*/React.createElement(FlagComponent, _extends({

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

@@ -60,6 +60,7 @@ export default function PhoneInputLite(props) {
   var inputRef = useRef(null);
   var baseDialCodeOverride = {
     component: StyledDialCode,
+    // @ts-ignore
     style: function style(_ref) {
       var _ref$$theme = _ref.$theme,
           direction = _ref$$theme.direction,
@@ -78,6 +79,7 @@ export default function PhoneInputLite(props) {
   });
   var baseOverrides = {
     Input: {
+      // @ts-ignore
       style: function style(_ref3) {
         var _ref3$$theme = _ref3.$theme,
             direction = _ref3$$theme.direction,

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

@@ -68,6 +68,7 @@ export default function PhoneInputNext(props) {
   var inputRef = useRef(null);
   var baseDialCodeOverride = {
     component: StyledDialCode,
+    // @ts-ignore
     style: function style(_ref) {
       var _ref$$theme = _ref.$theme,
           direction = _ref$$theme.direction,
@@ -86,6 +87,7 @@ export default function PhoneInputNext(props) {
   });
   var baseOverrides = {
     Input: {
+      // @ts-ignore
       style: function style(_ref3) {
         var _ref3$$theme = _ref3.$theme,
             direction = _ref3$$theme.direction,

package/esm/phone-input/stateful-phone-input-container.js

@@ -80,6 +80,7 @@ var StatefulPhoneInputContainer = /*#__PURE__*/function (_React$Component) {
 
       if (event.option && event.option.id) {
         _this.internalSetState(STATE_CHANGE_TYPE.countryChange, {
+          // @ts-ignore
           country: COUNTRIES[event.option.id]
         });
       }

package/esm/pin-code/default-props.js

@@ -7,13 +7,17 @@ LICENSE file in the root directory of this source tree.
 import { SIZE } from '../input';
 var defaultProps = {
   'aria-label': 'Please enter your pin code',
+  // @ts-ignore
   'aria-labelledby': null,
+  // @ts-ignore
   'aria-describedby': null,
   autoComplete: 'one-time-code',
   autoFocus: false,
   disabled: false,
   error: false,
+  // @ts-ignore
   id: null,
+  // @ts-ignore
   name: null,
   onChange: function onChange() {},
   overrides: {},

package/esm/pin-code/pin-code.js

@@ -143,7 +143,8 @@ var PinCode = /*#__PURE__*/function (_React$Component) {
             return _this2.setState({
               hasFocus: true
             });
-          },
+          } // @ts-ignore
+          ,
           onChange: function onChange(event) {
             var eventValue = event.target.value; // in the case of an autocomplete or copy and paste
 
@@ -201,7 +202,8 @@ var PinCode = /*#__PURE__*/function (_React$Component) {
                 if (inputRef && inputRef.focus) inputRef.focus();
               }
             }
-          },
+          } // @ts-ignore
+          ,
           onKeyDown: function onKeyDown(event) {
             // if we see a backspace/delete and the input is empty, transfer focus backward
             if (_this2.props.manageFocus && event.key === 'Backspace' && _this2.props.values[i] === '' && i > 0) {

package/esm/popover/popover.js

@@ -97,6 +97,7 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
           _this.setState({
             isAnimating: false,
             // Reset to ideal placement specified in props
+            // @ts-ignore
             placement: _this.props.placement
           });
         }, _this.props.animateOutTime || ANIMATE_OUT_TIME);
@@ -142,6 +143,7 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
       var placement = fromPopperPlacement(data.placement) || PLACEMENT.top;
 
       _this.setState({
+        // @ts-ignore
         arrowOffset: normalizedOffsets.arrow,
         popoverOffset: normalizedOffsets.popper,
         placement: placement
@@ -350,7 +352,15 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
         anchorProps.onBlur = this.props.onBlur;
         anchorProps.onFocus = this.props.onFocus;
       } else {
-        anchorProps.onClick = this.onAnchorClick;
+        anchorProps.onClick = this.onAnchorClick; // Make it focusable too
+
+        if (this.props.onBlur) {
+          anchorProps.onBlur = this.props.onBlur;
+        }
+
+        if (this.props.onFocus) {
+          anchorProps.onFocus = this.props.onFocus;
+        }
       }
 
       return anchorProps;
@@ -362,8 +372,10 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
       var popoverId = this.getPopoverIdAttr();
 
       if (this.isAccessibilityTypeMenu()) {
+        // @ts-ignore
         bodyProps.id = popoverId;
       } else if (this.isAccessibilityTypeTooltip()) {
+        // @ts-ignore
         bodyProps.id = popoverId;
         bodyProps.role = 'tooltip';
       }
@@ -392,6 +404,7 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
         $showArrow: !!showArrow,
         $arrowOffset: arrowOffset,
         $popoverOffset: popoverOffset,
+        // @ts-ignore
         $placement: placement,
         $isAnimating: isAnimating,
         $animationDuration: this.props.animateOutTime || ANIMATE_OUT_TIME,
@@ -429,9 +442,13 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
         return /*#__PURE__*/React.cloneElement(anchor, anchorProps);
       }
 
-      return /*#__PURE__*/React.createElement("span", _extends({
-        key: "popover-anchor"
-      }, anchorProps), anchor);
+      return (
+        /*#__PURE__*/
+        // @ts-ignore
+        React.createElement("span", _extends({
+          key: "popover-anchor"
+        }, anchorProps), anchor)
+      );
     }
   }, {
     key: "renderPopover",

package/esm/popover/stateful-popover.js

@@ -35,6 +35,7 @@ StatefulPopover.defaultProps = {
   triggerType: TRIGGER_TYPE.click,
   dismissOnClickOutside: true,
   dismissOnEsc: true,
+  // @ts-ignore
   stateReducer: function stateReducer(_, nextState) {
     return nextState;
   },

package/esm/popover/utils.js

@@ -40,6 +40,7 @@ var OPPOSITE_POSITIONS = {
  */
 
 export function getOppositePosition(position) {
+  // @ts-ignore
   return OPPOSITE_POSITIONS[position];
 }
 /**
@@ -62,7 +63,8 @@ export function capitalize(str) {
  */
 
 export function fromPopperPlacement(placement) {
-  var popoverPlacement = placement.replace(/(top|bottom)-start$/, '$1Left').replace(/(top|bottom)-end$/, '$1Right').replace(/(left|right)-start$/, '$1Top').replace(/(left|right)-end$/, '$1Bottom');
+  var popoverPlacement = placement.replace(/(top|bottom)-start$/, '$1Left').replace(/(top|bottom)-end$/, '$1Right').replace(/(left|right)-start$/, '$1Top').replace(/(left|right)-end$/, '$1Bottom'); // @ts-ignore
+
   return PLACEMENT[popoverPlacement] || null;
 }
 /**

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

@@ -36,7 +36,7 @@ var defaults = {
   TrackBackground: StyledProgressBarRoundedTrackBackground,
   TrackForeground: StyledProgressBarRoundedTrackForeground,
   Text: StyledProgressBarRoundedText
-};
+}; // @ts-ignore
 
 function roundTo(n, digits) {
   if (digits === undefined) {
@@ -110,15 +110,18 @@ function ProgressBarRounded(_ref) {
       window.cancelAnimationFrame(animationFrameRef.current);
     }
 
-    var animationDuration = Math.max(1000 * (progress - pathProgress), 250);
+    var animationDuration = Math.max(1000 * (progress - pathProgress), 250); // @ts-ignore
+
     var animationTimeStarted;
 
     function loop() {
       var now = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
 
+      // @ts-ignore
       if (!animationTimeStarted) {
         animationTimeStarted = now;
-      }
+      } // @ts-ignore
+
 
       var animationTimeElapsed = now - animationTimeStarted; // Move out of state - might need to reverse calculate the path progress for interruped animations
 
@@ -134,31 +137,27 @@ function ProgressBarRounded(_ref) {
     loop();
   }, [progress]); // We want *only* `progress` to trigger this effect
 
-  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)), "%"))
-  );
+  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, _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;