baseui 12.1.3 → 13.0.0

package/es/pagination/pagination.js

@@ -8,7 +8,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';
@@ -18,7 +19,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';
 export default class Pagination extends React.PureComponent {
   constructor(...args) {
@@ -48,6 +49,7 @@ export default class Pagination extends React.PureComponent {
       const menuOptions = [];
 
       for (let i = 1; i <= numPages; i++) {
+        // @ts-ignore
         menuOptions.push({
           label: i
         });
@@ -131,6 +133,63 @@ export default class Pagination extends React.PureComponent {
     const [MaxLabel, maxLabelProps] = getOverrides(overrides.MaxLabel, StyledMaxLabel);
     const [DropdownContainer, dropdownContainerProps] = getOverrides(overrides.DropdownContainer, StyledDropdownContainer);
     const [Select, selectProps] = getOverrides(overrides.Select, BaseSelect);
+    const defaultSelectOverrides = {
+      ControlContainer: {
+        // @ts-ignore
+        style: ({
+          $theme,
+          $disabled,
+          $isOpen,
+          $error
+        }) => ({
+          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: ({
+          $theme
+        }) => ({
+          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: ({
+          $theme
+        }) => ({
+          width: '24px',
+          height: '24px',
+          color: $theme.colors.buttonTertiaryText
+        })
+      }
+    };
+    selectProps.overrides = mergeOverrides(defaultSelectOverrides, selectProps.overrides);
     const options = this.getMenuOptions(numPages);
     return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, theme => /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, locale => /*#__PURE__*/React.createElement(Root, _extends({
       "data-baseweb": "pagination"
@@ -169,60 +228,7 @@ export default class Pagination extends React.PureComponent {
         label: currentPage
       }],
       maxDropdownHeight: "200px",
-      size: size,
-      overrides: {
-        ControlContainer: {
-          style: ({
-            $theme,
-            $disabled,
-            $isOpen,
-            $error
-          }) => ({
-            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: ({
-            $theme
-          }) => ({
-            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: ({
-            $theme
-          }) => ({
-            width: '24px',
-            height: '24px',
-            color: $theme.colors.buttonTertiaryText
-          })
-        }
-      }
+      size: size
     }, selectProps))), /*#__PURE__*/React.createElement(MaxLabel, _extends({}, maxLabelProps, {
       "aria-hidden": true
     }), `${labels && labels.preposition ? labels.preposition : locale.pagination.preposition || ''} ${numPages}`), /*#__PURE__*/React.createElement(Button, {

package/es/payment-card/payment-card.js

@@ -81,7 +81,8 @@ class PaymentCard extends React.Component {
     if (validatedValue.card) {
       gaps = validatedValue.card.gaps || [];
       type = validatedValue.card.type;
-    }
+    } // @ts-ignore
+
 
     const getBeforeComponent = theme => {
       const iconSize = {
@@ -109,7 +110,8 @@ class PaymentCard extends React.Component {
         Before: getBeforeComponent(theme)
       }),
       onChange: e => {
-        const [position, value] = getCaretPosition(e.target.value, this.props.value ? String(this.props.value) : '', e.target.selectionStart); // @ts-expect-error todo(flow->ts): looks dangerous
+        const [position, value] = getCaretPosition(e.target.value, this.props.value ? String(this.props.value) : '', // @ts-ignore
+        e.target.selectionStart); // @ts-expect-error todo(flow->ts): looks dangerous
 
         this.caretPosition = position;
         this.inRef = e.target; // @ts-expect-error todo(flow->ts): looks dangerous
@@ -134,7 +136,9 @@ _defineProperty(PaymentCard, "defaultProps", {
   overrides: {},
   required: false,
   size: 'default',
+  // @ts-ignore
   startEnhancer: null,
+  // @ts-ignore
   endEnhancer: null
 });
 

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

@@ -36,7 +36,7 @@ const DropdownListItem = /*#__PURE__*/React.forwardRef((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);
@@ -94,6 +94,7 @@ export default function CountryPicker(props) {
     },
     StatefulMenu: {
       props: {
+        // @ts-ignore
         stateReducer: (type, nextState) => {
           const next = { ...nextState,
             highlightedIndex: resetScrollIndex ? 0 : nextState.highlightedIndex
@@ -154,6 +155,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: ({
       option,
@@ -173,7 +175,8 @@ export default function CountryPicker(props) {
       }, sharedProps, flagContainerProps), iso2FlagEmoji(iso));
     },
     error: error,
-    maxDropdownHeight: maxDropdownHeight,
+    maxDropdownHeight: maxDropdownHeight // @ts-ignore
+    ,
     onChange: event => {
       if (typeof onCountryChange === 'function') {
         onCountryChange(event);

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

@@ -31,6 +31,7 @@ export default function CountryPicker(props) {
   } = props;
   const baseSelectOverrides = {
     Root: {
+      // @ts-ignore
       style: ({
         $theme: {
           direction,
@@ -45,6 +46,7 @@ export default function CountryPicker(props) {
       }
     },
     ControlContainer: {
+      // @ts-ignore
       style: ({
         $theme: {
           direction,
@@ -67,7 +69,9 @@ export default function CountryPicker(props) {
         const padStartDir = direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
         const padEndDir = direction === 'rtl' ? 'paddingLeft' : 'paddingRight';
         const styleOverride = {
+          // @ts-ignore
           [padStartDir]: sizeToLeftPadding[props.$size || SIZE.default],
+          // @ts-ignore
           [padEndDir]: sizeToRightPadding[props.$size || SIZE.default]
         }; // do not add positive and error color borders when not focused
 
@@ -92,6 +96,7 @@ export default function CountryPicker(props) {
   selectProps.overrides = mergeOverrides(selectOverrides, selectProps.overrides);
   const baseOverrides = {
     FlagContainer: {
+      // @ts-ignore
       style: ({
         $theme: {
           direction,
@@ -107,11 +112,13 @@ export default function CountryPicker(props) {
         };
         const marginDir = direction === 'rtl' ? 'marginLeft' : 'marginRight';
         return {
+          // @ts-ignore
           [marginDir]: sizeToMargin[props.$size || SIZE.default]
         };
       }
     },
     DialCode: {
+      // @ts-ignore
       style: ({
         $theme: {
           direction,

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

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

package/es/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';
 const 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 @@ const defaultProps = {
   },
   disabled: false,
   error: false,
+  // @ts-ignore
   id: null,
   maxDropdownHeight: DEFAULT_MAX_DROPDOWN_HEIGHT,
   maxDropdownWidth: DEFAULT_MAX_DROPDOWN_WIDTH,
+  // @ts-ignore
   name: null,
   onCountryChange: () => {},
   onTextChange: () => {},

package/es/phone-input/flag.js

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

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

@@ -41,6 +41,7 @@ export default function PhoneInputLite(props) {
   const inputRef = useRef(null);
   const baseDialCodeOverride = {
     component: StyledDialCode,
+    // @ts-ignore
     style: ({
       $theme: {
         direction,
@@ -63,6 +64,7 @@ export default function PhoneInputLite(props) {
   });
   const baseOverrides = {
     Input: {
+      // @ts-ignore
       style: ({
         $theme: {
           direction,

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

@@ -45,6 +45,7 @@ export default function PhoneInputNext(props) {
   const inputRef = useRef(null);
   const baseDialCodeOverride = {
     component: StyledDialCode,
+    // @ts-ignore
     style: ({
       $theme: {
         direction,
@@ -67,6 +68,7 @@ export default function PhoneInputNext(props) {
   });
   const baseOverrides = {
     Input: {
+      // @ts-ignore
       style: ({
         $theme: {
           direction,

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

@@ -40,6 +40,7 @@ export default class StatefulPhoneInputContainer extends React.Component {
 
       if (event.option && event.option.id) {
         this.internalSetState(STATE_CHANGE_TYPE.countryChange, {
+          // @ts-ignore
           country: COUNTRIES[event.option.id]
         });
       }

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

@@ -7,13 +7,17 @@ LICENSE file in the root directory of this source tree.
 import { SIZE } from '../input';
 const 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: () => {},
   overrides: {},

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

@@ -76,7 +76,8 @@ export default class PinCode extends React.Component {
         }),
         onFocus: () => this.setState({
           hasFocus: true
-        }),
+        }) // @ts-ignore
+        ,
         onChange: event => {
           const eventValue = event.target.value; // in the case of an autocomplete or copy and paste
 
@@ -128,7 +129,8 @@ export default class PinCode extends React.Component {
               if (inputRef && inputRef.focus) inputRef.focus();
             }
           }
-        },
+        } // @ts-ignore
+        ,
         onKeyDown: event => {
           // if we see a backspace/delete and the input is empty, transfer focus backward
           if (this.props.manageFocus && event.key === 'Backspace' && this.props.values[i] === '' && i > 0) {

package/es/popover/popover.js

@@ -58,6 +58,7 @@ class PopoverInner extends 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);
@@ -102,6 +103,7 @@ class PopoverInner extends React.Component {
     _defineProperty(this, "onPopperUpdate", (normalizedOffsets, data) => {
       const placement = fromPopperPlacement(data.placement) || PLACEMENT.top;
       this.setState({
+        // @ts-ignore
         arrowOffset: normalizedOffsets.arrow,
         popoverOffset: normalizedOffsets.popper,
         placement
@@ -132,7 +134,7 @@ class PopoverInner extends React.Component {
         return;
       }
 
-      if (!anchor || anchor === target || target instanceof Node && popper.contains(target)) {
+      if (!anchor || anchor === target || target instanceof Node && anchor.contains(target)) {
         return;
       }
 
@@ -162,7 +164,7 @@ class PopoverInner extends React.Component {
         // eslint-disable-next-line no-console
         console.warn(`[baseui][Popover] ref has not been passed to the Popper's anchor element.
               See how to pass the ref to an anchor element in the Popover example
-              http://baseui.design/components/popover#anchor-ref-handling-example`);
+              https://baseweb.design/components/popover/#anchor-ref-handling-example`);
       }
     }
   }
@@ -291,7 +293,15 @@ class PopoverInner extends 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;
@@ -302,8 +312,10 @@ class PopoverInner extends React.Component {
     const popoverId = this.getPopoverIdAttr();
 
     if (this.isAccessibilityTypeMenu()) {
+      // @ts-ignore
       bodyProps.id = popoverId;
     } else if (this.isAccessibilityTypeTooltip()) {
+      // @ts-ignore
       bodyProps.id = popoverId;
       bodyProps.role = 'tooltip';
     }
@@ -332,6 +344,7 @@ class PopoverInner extends React.Component {
       $showArrow: !!showArrow,
       $arrowOffset: arrowOffset,
       $popoverOffset: popoverOffset,
+      // @ts-ignore
       $placement: placement,
       $isAnimating: isAnimating,
       $animationDuration: this.props.animateOutTime || ANIMATE_OUT_TIME,
@@ -369,9 +382,13 @@ class PopoverInner extends 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)
+    );
   }
 
   renderPopover(renderedContent) {

package/es/popover/stateful-popover.js

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

package/es/popover/utils.js

@@ -22,6 +22,7 @@ const OPPOSITE_POSITIONS = {
  */
 
 export function getOppositePosition(position) {
+  // @ts-ignore
   return OPPOSITE_POSITIONS[position];
 }
 /**
@@ -44,7 +45,8 @@ export function capitalize(str) {
  */
 
 export function fromPopperPlacement(placement) {
-  const popoverPlacement = placement.replace(/(top|bottom)-start$/, '$1Left').replace(/(top|bottom)-end$/, '$1Right').replace(/(left|right)-start$/, '$1Top').replace(/(left|right)-end$/, '$1Bottom');
+  const 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;
 }
 /**
@@ -112,6 +114,7 @@ export function getArrowPositionStyles(offsets, placement) {
 
   const alignmentProperty = isVerticalPosition(position) ? 'left' : 'top';
   return {
+    // @ts-ignore
     [alignmentProperty]: `${offsets[alignmentProperty]}px`,
     [oppositePosition]: `-${ARROW_SIZE - 2}px`
   };

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

@@ -18,7 +18,7 @@ const defaults = {
   TrackBackground: StyledProgressBarRoundedTrackBackground,
   TrackForeground: StyledProgressBarRoundedTrackForeground,
   Text: StyledProgressBarRoundedText
-};
+}; // @ts-ignore
 
 function roundTo(n, digits) {
   if (digits === undefined) {
@@ -68,13 +68,16 @@ function ProgressBarRounded({
       window.cancelAnimationFrame(animationFrameRef.current);
     }
 
-    let animationDuration = Math.max(1000 * (progress - pathProgress), 250);
+    let animationDuration = Math.max(1000 * (progress - pathProgress), 250); // @ts-ignore
+
     let animationTimeStarted;
 
     function loop(now = 0) {
+      // @ts-ignore
       if (!animationTimeStarted) {
         animationTimeStarted = now;
-      }
+      } // @ts-ignore
+
 
       let animationTimeElapsed = now - animationTimeStarted; // Move out of state - might need to reverse calculate the path progress for interruped animations
 
@@ -90,31 +93,27 @@ function ProgressBarRounded({
     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;

package/es/progress-bar/progressbar.js

@@ -62,7 +62,10 @@ class ProgressBar extends React.Component {
       const children = [];
 
       for (let i = 0; i < steps; i++) {
-        children.push( /*#__PURE__*/React.createElement(Bar, _extends({
+        children.push(
+        /*#__PURE__*/
+        // @ts-ignore
+        React.createElement(Bar, _extends({
           key: i
         }, sharedProps, barProps), /*#__PURE__*/React.createElement(BarProgress, _extends({
           $index: i
@@ -74,7 +77,8 @@ class ProgressBar extends React.Component {
 
     return (
       /*#__PURE__*/
-      // eslint-disable-next-line jsx-a11y/role-supports-aria-props
+
+      /* eslint-disable jsx-a11y/role-supports-aria-props */
       React.createElement(Root, _extends({
         ref: forwardedRef,
         "data-baseweb": "progress-bar",
@@ -92,6 +96,7 @@ class ProgressBar extends React.Component {
         $size: sharedProps.$size
       }, infiniteBarProps))) : renderProgressBar()), showLabel && /*#__PURE__*/React.createElement(Label, _extends({}, sharedProps, labelProps), getProgressLabel(value, maximumValue, minValue)))
     );
+    /* eslint-enable jsx-a11y/role-supports-aria-props */
   }
 
 }
@@ -109,7 +114,8 @@ _defineProperty(ProgressBar, "defaultProps", {
   value: 0
 });
 
-const ForwardedProgressBar = /*#__PURE__*/React.forwardRef((props, ref) =>
+const ForwardedProgressBar = /*#__PURE__*/React.forwardRef( // @ts-ignore
+(props, ref) =>
 /*#__PURE__*/
 //$FlowExpectedError[cannot-spread-inexact]
 React.createElement(ProgressBar, _extends({

package/es/progress-bar/styled-components.js

@@ -10,7 +10,9 @@ import { styled, hexToRgb, withWrapper } from '../styles';
 import { SIZE } from './constants';
 import React from 'react';
 
+// @ts-ignore
 function getBarHeight(size) {
+  // @ts-ignore
   return {
     [SIZE.small]: '2px',
     [SIZE.medium]: '4px',
@@ -64,6 +66,7 @@ export const StyledBar = styled('div', props => {
     height: getBarHeight($size),
     flex: 1,
     overflow: 'hidden',
+    // @ts-ignore
     ...($steps < 2 ? {} : {
       marginLeft: sizing.scale300,
       ':first-child': {
@@ -338,6 +341,7 @@ export const StyledProgressBarRoundedText = styled('div', ({
 }) => {
   return {
     color: $theme.colors.contentPrimary,
+    // @ts-ignore
     ...$theme.typography[PROGRESS_BAR_ROUNDED_SIZES[$size].typography]
   };
 });

package/es/progress-steps/progress-steps.js

@@ -24,6 +24,7 @@ function ProgressSteps({
     const isActive = child.props.isActive !== undefined ? child.props.isActive : index === current;
     return /*#__PURE__*/React.cloneElement(child, {
       isLast: index === numChildren - 1,
+      // @ts-ignore
       isCompleted: index < current,
       isActive,
       step: index + 1,