baseui 12.0.0 → 12.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "12.0.0",
+  "version": "12.1.0",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",
@@ -36,7 +36,7 @@
     "e2e:serve": "static-server build-ladle --port 8080",
     "e2e:test": "playwright test",
     "e2e:test:ci": "PUPPETEER_TARGET_URL=http://e2e-server:8080 yarn e2e:test",
-    "vrt": "playwright test --config playwright-vrt.config.js",
+    "vrt": "playwright test --config playwright-vrt.config.ts",
     "vrt:docker:run": "docker-compose run e2e-test bash -c 'PUPPETEER_TARGET_URL=http://e2e-server:8080 yarn vrt'",
     "vrt:docker:update": "docker-compose run e2e-test bash -c 'PUPPETEER_TARGET_URL=http://e2e-server:8080 yarn vrt --update'",
     "vrt:ci": "PUPPETEER_TARGET_URL=http://e2e-server:8080 node ./vrt/ci.js",
@@ -53,7 +53,7 @@
     "documentation:build": "run-s prebuild build:cjs next:build next:export",
     "documentation:serve": "static-server public --port 8081",
     "next:dev": "next dev documentation-site",
-    "next:build": "NODE_OPTIONS=--max_old_space_size=4096 next build documentation-site",
+    "next:build": "NODE_OPTIONS=--max_old_space_size=8192 next build documentation-site",
     "next:export": "next export documentation-site -o public",
     "tsc": "tsc",
     "validate:examples": "node ./scripts/validate-examples.js"
@@ -85,12 +85,12 @@
     "@date-io/luxon": "^2.7.0",
     "@date-io/moment": "^2.7.0",
     "@dubstep/core": "^3.5.3",
-    "@ladle/react": "^1.0.1",
+    "@ladle/react": "^2.0.2",
     "@mdx-js/tag": "^0.20.0",
     "@octokit/rest": "^16.33.1",
-    "@playwright/test": "^1.22.2",
+    "@playwright/test": "^1.24.0",
     "@svgr/cli": "^4.3.2",
-    "@testing-library/dom": "^8.13.0",
+    "@testing-library/dom": "^8.17.1",
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
@@ -117,7 +117,7 @@
     "@typescript-eslint/parser": "^5.26.0",
     "@zeit/next-css": "^1.0.1",
     "@zeit/next-mdx": "^1.2.0",
-    "axe-core": "^4.2.2",
+    "axe-core": "^4.4.3",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "10.1.0",
     "babel-jest": "^24.0.0",
@@ -145,7 +145,6 @@
     "eslint-plugin-react": "^7.27.0",
     "eslint-plugin-react-hooks": "3.0.0",
     "flow-bin": "0.131.0",
-    "flow-remove-types": "^2.179.0",
     "globby": "^10.0.1",
     "husky": "^3.0.0",
     "isomorphic-fetch": "^2.2.1",
@@ -167,7 +166,7 @@
     "node-fetch": "^2.6.1",
     "now": "16.5.2",
     "npm-run-all": "^4.1.5",
-    "playwright": "^1.22.2",
+    "playwright": "^1.24.0",
     "prettier": "^2.5.1",
     "pretty-proptypes": "^1.0.5",
     "pretty-quick": "^1.4.1",
@@ -187,7 +186,6 @@
     "react-view": "^2.3.3",
     "react-vis": "^1.11.6",
     "remove-flow-types-loader": "^1.1.0",
-    "rollup-pluginutils": "^2.8.2",
     "semver": "^6.2.0",
     "shx": "^0.3.2",
     "static-server": "^2.2.1",
@@ -246,7 +244,7 @@
     }
   },
   "volta": {
-    "node": "14.15.4",
+    "node": "16.16.0",
     "yarn": "1.19.1"
   },
   "engines": {

package/pagination/stateful-container.js

@@ -115,6 +115,7 @@ exports.default = PaginationStatefulContainer;
 
 _defineProperty(PaginationStatefulContainer, "defaultProps", {
   initialState: initialState,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   stateReducer: function stateReducer(changeType, changes) {
     return changes;
   }

package/pagination/stateful-pagination.js

@@ -50,6 +50,7 @@ StatefulPagination.defaultProps = {
   initialState: {
     currentPage: 1
   },
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   stateReducer: function stateReducer(changeType, changes) {
     return changes;
   },

package/pagination/styled-components.js

@@ -23,6 +23,7 @@ var StyledRoot = (0, _styles.styled)('div', function (_ref) {
 });
 exports.StyledRoot = StyledRoot;
 StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
 var StyledMaxLabel = (0, _styles.styled)('span', function (_ref2) {
   var _ref3;
 
@@ -33,6 +34,7 @@ var StyledMaxLabel = (0, _styles.styled)('span', function (_ref2) {
 });
 exports.StyledMaxLabel = StyledMaxLabel;
 StyledMaxLabel.displayName = "StyledMaxLabel";
+StyledMaxLabel.displayName = 'StyledMaxLabel';
 var StyledDropdownContainer = (0, _styles.styled)('div', function (_ref4) {
   var _ref5;
 
@@ -46,4 +48,5 @@ var StyledDropdownContainer = (0, _styles.styled)('div', function (_ref4) {
   }, _defineProperty(_ref5, marginStartDir, $theme.sizing.scale600), _defineProperty(_ref5, marginEndDir, $theme.sizing.scale300), _ref5;
 });
 exports.StyledDropdownContainer = StyledDropdownContainer;
-StyledDropdownContainer.displayName = "StyledDropdownContainer";
+StyledDropdownContainer.displayName = "StyledDropdownContainer";
+StyledDropdownContainer.displayName = 'StyledDropdownContainer';

package/pagination/types.d.ts

@@ -1,6 +1,6 @@
 import type { Override } from '../helpers/overrides';
-import { STATE_CHANGE_TYPE } from './constants';
-import { SIZE } from '../input';
+import type { STATE_CHANGE_TYPE } from './constants';
+import type { SIZE } from '../input';
 export declare type Labels = {
     prevButton?: string;
     nextButton?: string;

package/payment-card/styled-components.js

@@ -20,4 +20,5 @@ var IconWrapper = (0, _styles.styled)('div', function (props) {
   return _ref = {}, _defineProperty(_ref, $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft', margin[$size]), _defineProperty(_ref, "height", '100%'), _defineProperty(_ref, "display", 'flex'), _defineProperty(_ref, "alignItems", 'center'), _ref;
 });
 exports.IconWrapper = IconWrapper;
-IconWrapper.displayName = "IconWrapper";
+IconWrapper.displayName = "IconWrapper";
+IconWrapper.displayName = 'IconWrapper';

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

@@ -68,6 +68,7 @@ CountryPicker.defaultProps = {
 };
 
 var DropdownListItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   var children = props.children,
       rest = _objectWithoutProperties(props, _excluded);
 
@@ -221,7 +222,8 @@ function CountryPicker(props) {
 
   return /*#__PURE__*/_react.default.createElement(Select, _extends({
     clearable: false,
-    disabled: disabled,
+    disabled: disabled // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    ,
     getOptionLabel: function getOptionLabel(_ref) {
       var option = _ref.option,
           optionState = _ref.optionState;

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

@@ -129,6 +129,7 @@ function CountrySelectDropdown(props) {
             style = _ref2.style;
 
         // resetMenu and getItemLabel should not end up on native html elements
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         var _children$index$props = // @ts-expect-error todo(flow->ts) type issue introduced in react 17
         children[index].props,
             item = _children$index$props.item,

package/phone-input/styled-components.js

@@ -39,6 +39,7 @@ var StyledPhoneInputRoot = (0, _styles.styled)('div', {
 });
 exports.StyledPhoneInputRoot = StyledPhoneInputRoot;
 StyledPhoneInputRoot.displayName = "StyledPhoneInputRoot";
+StyledPhoneInputRoot.displayName = 'StyledPhoneInputRoot';
 var StyledFlagContainer = (0, _styles.styled)('span', function (_ref) {
   var _sizeToFont;
 
@@ -49,10 +50,11 @@ var StyledFlagContainer = (0, _styles.styled)('span', function (_ref) {
   return {
     fontSize: sizeToFont[$size]
   };
-}); // An override component for the Select's Root styled element
-
+});
 exports.StyledFlagContainer = StyledFlagContainer;
 StyledFlagContainer.displayName = "StyledFlagContainer";
+StyledFlagContainer.displayName = 'StyledFlagContainer'; // An override component for the Select's Root styled element
+
 var StyledRoot = (0, _styles.withStyle)(_select.StyledRoot, function (props) {
   var _sizeToWidth;
 
@@ -65,6 +67,7 @@ var StyledRoot = (0, _styles.withStyle)(_select.StyledRoot, function (props) {
 });
 exports.StyledRoot = StyledRoot;
 StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
 var StyledDialCode = (0, _styles.styled)('div', function (_ref2) {
   var _ref3;
 
@@ -76,12 +79,14 @@ var StyledDialCode = (0, _styles.styled)('div', function (_ref2) {
 });
 exports.StyledDialCode = StyledDialCode;
 StyledDialCode.displayName = "StyledDialCode";
+StyledDialCode.displayName = 'StyledDialCode';
 var StyledCountrySelectContainer = (0, _styles.styled)('div', {
   display: 'flex',
   alignItems: 'center'
 });
 exports.StyledCountrySelectContainer = StyledCountrySelectContainer;
 StyledCountrySelectContainer.displayName = "StyledCountrySelectContainer";
+StyledCountrySelectContainer.displayName = 'StyledCountrySelectContainer';
 var StyledCountrySelectDropdownContainer = (0, _styles.withStyle)(_menu.StyledList, function (props) {
   var _props$$height = props.$height,
       $height = _props$$height === void 0 ? _defaultProps.default.maxDropdownHeight : _props$$height;
@@ -93,6 +98,7 @@ var StyledCountrySelectDropdownContainer = (0, _styles.withStyle)(_menu.StyledLi
 });
 exports.StyledCountrySelectDropdownContainer = StyledCountrySelectDropdownContainer;
 StyledCountrySelectDropdownContainer.displayName = "StyledCountrySelectDropdownContainer";
+StyledCountrySelectDropdownContainer.displayName = 'StyledCountrySelectDropdownContainer';
 var StyledCountrySelectDropdownListItemElement = (0, _styles.withStyle)(_select.StyledDropdownListItem, {
   paddingTop: 0,
   paddingBottom: 0,
@@ -104,13 +110,16 @@ var StyledCountrySelectDropdownListItemElement = (0, _styles.withStyle)(_select.
 });
 exports.StyledCountrySelectDropdownListItemElement = StyledCountrySelectDropdownListItemElement;
 StyledCountrySelectDropdownListItemElement.displayName = "StyledCountrySelectDropdownListItemElement";
+StyledCountrySelectDropdownListItemElement.displayName = 'StyledCountrySelectDropdownListItemElement';
 var StyledCountrySelectDropdownListItem = (0, _styles.withWrapper)(StyledCountrySelectDropdownListItemElement, function (Styled) {
-  return function StyledCountrySelectDropdownListItem(_ref4) {
-    var item = _ref4.item,
-        restProps = _objectWithoutProperties(_ref4, _excluded);
-
-    return /*#__PURE__*/React.createElement(Styled, restProps);
-  };
+  return (// eslint-disable-next-line @typescript-eslint/no-unused-vars
+    function StyledCountrySelectDropdownListItem(_ref4) {
+      var item = _ref4.item,
+          restProps = _objectWithoutProperties(_ref4, _excluded);
+
+      return /*#__PURE__*/React.createElement(Styled, restProps);
+    }
+  );
 });
 exports.StyledCountrySelectDropdownListItem = StyledCountrySelectDropdownListItem;
 var StyledCountrySelectDropdownFlagColumn = (0, _styles.styled)('div', function (_ref5) {
@@ -124,6 +133,7 @@ var StyledCountrySelectDropdownFlagColumn = (0, _styles.styled)('div', function
 });
 exports.StyledCountrySelectDropdownFlagColumn = StyledCountrySelectDropdownFlagColumn;
 StyledCountrySelectDropdownFlagColumn.displayName = "StyledCountrySelectDropdownFlagColumn";
+StyledCountrySelectDropdownFlagColumn.displayName = 'StyledCountrySelectDropdownFlagColumn';
 var StyledCountrySelectDropdownNameColumn = (0, _styles.styled)('div', function (_ref7) {
   var _ref7$$theme = _ref7.$theme,
       direction = _ref7$$theme.direction,
@@ -133,6 +143,7 @@ var StyledCountrySelectDropdownNameColumn = (0, _styles.styled)('div', function
 });
 exports.StyledCountrySelectDropdownNameColumn = StyledCountrySelectDropdownNameColumn;
 StyledCountrySelectDropdownNameColumn.displayName = "StyledCountrySelectDropdownNameColumn";
+StyledCountrySelectDropdownNameColumn.displayName = 'StyledCountrySelectDropdownNameColumn';
 var StyledCountrySelectDropdownDialcodeColumn = (0, _styles.styled)('div', function (_ref9) {
   var _ref10;
 
@@ -144,4 +155,5 @@ var StyledCountrySelectDropdownDialcodeColumn = (0, _styles.styled)('div', funct
   return _ref10 = {}, _defineProperty(_ref10, paddingDir, sizing.scale600), _defineProperty(_ref10, marginDir, 'auto'), _ref10;
 });
 exports.StyledCountrySelectDropdownDialcodeColumn = StyledCountrySelectDropdownDialcodeColumn;
-StyledCountrySelectDropdownDialcodeColumn.displayName = "StyledCountrySelectDropdownDialcodeColumn";
+StyledCountrySelectDropdownDialcodeColumn.displayName = "StyledCountrySelectDropdownDialcodeColumn";
+StyledCountrySelectDropdownDialcodeColumn.displayName = 'StyledCountrySelectDropdownDialcodeColumn';

package/phone-input/types.d.ts

@@ -1,8 +1,7 @@
-import * as React from 'react';
-import { STATE_CHANGE_TYPE, SIZE, COUNTRIES } from './constants';
+import type * as React from 'react';
+import type { STATE_CHANGE_TYPE, SIZE, COUNTRIES } from './constants';
 import type { Override } from '../helpers/overrides';
 import type { OnChangeParams } from '../select';
-import type { ChangeEvent } from 'react';
 export declare type Size = keyof typeof SIZE;
 export declare type CountryIso = keyof typeof COUNTRIES;
 export declare type Countries = Readonly<Country>;
@@ -101,7 +100,7 @@ export declare type PhoneInputProps = {
     /** A handler for the country select's change events. */
     onCountryChange: (event: OnChangeParams) => unknown;
     /** A handler for the input element's change events. */
-    onTextChange: (event: ChangeEvent<HTMLInputElement>) => unknown;
+    onTextChange: (event: React.ChangeEvent<HTMLInputElement>) => unknown;
     overrides: PhoneInputOverrides;
     /** Sets the placeholder text for the input element.  */
     placeholder?: string;
@@ -125,12 +124,12 @@ export declare type StatefulPhoneInputContainerProps = {
     children: (a: PhoneInputProps) => React.ReactNode;
     initialState: State;
     stateReducer: StateReducer;
-    onTextChange: (event: ChangeEvent<HTMLInputElement>) => unknown;
+    onTextChange: (event: React.ChangeEvent<HTMLInputElement>) => unknown;
     onCountryChange: (event: OnChangeParams) => unknown;
 } & PhoneInputProps;
 export declare type StatefulPhoneInputProps = PhoneInputProps & {
     initialState?: State;
     stateReducer?: StateReducer;
-    onTextChange?: (event: ChangeEvent<HTMLInputElement>) => unknown;
+    onTextChange?: (event: React.ChangeEvent<HTMLInputElement>) => unknown;
     onCountryChange?: (event: OnChangeParams) => unknown;
 };

package/pin-code/styled-components.js

@@ -17,6 +17,7 @@ var StyledRoot = (0, _styles.styled)('div', {
 });
 exports.StyledRoot = StyledRoot;
 StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
 var StyledInputOverrideRoot = (0, _styles.withStyle)(_input.StyledRoot, function (_ref) {
   var _SIZE$mini$SIZE$compa;
 
@@ -30,10 +31,12 @@ var StyledInputOverrideRoot = (0, _styles.withStyle)(_input.StyledRoot, function
 });
 exports.StyledInputOverrideRoot = StyledInputOverrideRoot;
 StyledInputOverrideRoot.displayName = "StyledInputOverrideRoot";
+StyledInputOverrideRoot.displayName = 'StyledInputOverrideRoot';
 var StyledInputOverrideInput = (0, _styles.withStyle)(_input.StyledInput, {
   textAlign: 'center',
   paddingLeft: '0',
   paddingRight: '0'
 });
 exports.StyledInputOverrideInput = StyledInputOverrideInput;
-StyledInputOverrideInput.displayName = "StyledInputOverrideInput";
+StyledInputOverrideInput.displayName = "StyledInputOverrideInput";
+StyledInputOverrideInput.displayName = 'StyledInputOverrideInput';

package/pin-code/types.d.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { Override } from '../helpers/overrides';
-import { SIZE, STATE_CHANGE_TYPE } from '../input';
+import type { SIZE, STATE_CHANGE_TYPE } from '../input';
 export declare type ChangeEvent = {
     values: string[];
     event: any;

package/popover/popover.js

@@ -184,13 +184,11 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
       var popper = _this.popperRef.current;
       var anchor = _this.anchorRef.current; // Ignore document click if it came from popover or anchor
 
-      if (!popper || popper === target || // eslint-disable-next-line cup/no-undef
-      target instanceof Node && popper.contains(target)) {
+      if (!popper || popper === target || target instanceof Node && popper.contains(target)) {
         return;
       }
 
-      if (!anchor || anchor === target || // eslint-disable-next-line cup/no-undef
-      target instanceof Node && popper.contains(target)) {
+      if (!anchor || anchor === target || target instanceof Node && popper.contains(target)) {
         return;
       }
 
@@ -214,7 +212,7 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
     value: function componentDidUpdate(prevProps, prevState) {
       this.init(prevProps, prevState);
 
-      if (this.props.autoFocus && !this.state.autoFocusAfterPositioning && this.popperRef.current !== null && this.popperRef.current.getBoundingClientRect().top > 0) {
+      if (this.props.accessibilityType !== _constants.ACCESSIBILITY_TYPE.tooltip && this.props.autoFocus && !this.state.autoFocusAfterPositioning && this.popperRef.current !== null && this.popperRef.current.getBoundingClientRect().top > 0) {
         this.setState({
           autoFocusAfterPositioning: true
         });
@@ -346,10 +344,6 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
     value: function getAnchorProps() {
       var isOpen = this.props.isOpen;
       var anchorProps = {
-        'aria-haspopup': true,
-        'aria-expanded': isOpen ? true : false,
-        // @ts-expect-error todo(flow->ts): should it be here?
-        key: 'popover-anchor',
         ref: this.anchorRef
       };
       var popoverId = this.getPopoverIdAttr();
@@ -357,6 +351,8 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
       if (this.isAccessibilityTypeMenu()) {
         var relationAttr = this.isClickTrigger() ? 'aria-controls' : 'aria-owns';
         anchorProps[relationAttr] = isOpen ? popoverId : null;
+        anchorProps['aria-haspopup'] = true;
+        anchorProps['aria-expanded'] = Boolean(isOpen);
       } else if (this.isAccessibilityTypeTooltip()) {
         anchorProps.id = this.getAnchorIdAttr();
         anchorProps['aria-describedby'] = isOpen ? popoverId : null;
@@ -384,7 +380,6 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
         bodyProps.id = popoverId;
       } else if (this.isAccessibilityTypeTooltip()) {
         bodyProps.id = popoverId;
-        bodyProps.role = 'tooltip';
       }
 
       if (this.isHoverTrigger()) {
@@ -448,7 +443,9 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
         return /*#__PURE__*/React.cloneElement(anchor, anchorProps);
       }
 
-      return /*#__PURE__*/React.createElement("span", anchorProps, anchor);
+      return /*#__PURE__*/React.createElement("span", _extends({
+        key: "popover-anchor"
+      }, anchorProps), anchor);
     }
   }, {
     key: "renderPopover",
@@ -528,7 +525,7 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
             popperOptions: _objectSpread(_objectSpread({}, defaultPopperOptions), this.props.popperOptions),
             onPopperUpdate: this.onPopperUpdate,
             placement: this.state.placement
-          }, this.props.focusLock ? /*#__PURE__*/React.createElement(_reactFocusLock.default, {
+          }, this.props.focusLock && this.props.accessibilityType !== _constants.ACCESSIBILITY_TYPE.tooltip ? /*#__PURE__*/React.createElement(_reactFocusLock.default, {
             disabled: !this.props.focusLock,
             noFocusGuards: false // see popover-focus-loop.scenario.js for why hover cannot return focus
             ,

package/popover/popover.js.flow

@@ -240,20 +240,10 @@ class PopoverInner extends React.Component<PopoverPropsT, PopoverPrivateStateT>
     const popper = this.popperRef.current;
     const anchor = this.anchorRef.current;
     // Ignore document click if it came from popover or anchor
-    if (
-      !popper ||
-      popper === target ||
-      // eslint-disable-next-line cup/no-undef
-      (target instanceof Node && popper.contains(target))
-    ) {
+    if (!popper || popper === target || (target instanceof Node && popper.contains(target))) {
       return;
     }
-    if (
-      !anchor ||
-      anchor === target ||
-      // eslint-disable-next-line cup/no-undef
-      (target instanceof Node && popper.contains(target))
-    ) {
+    if (!anchor || anchor === target || (target instanceof Node && popper.contains(target))) {
       return;
     }
     if (this.props.onClickOutside) {

package/popover/styled-components.js

@@ -65,13 +65,13 @@ function getBodyStyles(props) {
 }
 
 var Body = (0, _styles.styled)('div', getBodyStyles);
+exports.Body = Body;
+Body.displayName = "Body";
+Body.displayName = 'Body';
 /**
  * Arrow shown between the popover and the anchor element
  */
 
-exports.Body = Body;
-Body.displayName = "Body";
-
 function getArrowStyles(props) {
   var $arrowOffset = props.$arrowOffset,
       $placement = props.$placement,
@@ -87,6 +87,9 @@ function getArrowStyles(props) {
 }
 
 var Arrow = (0, _styles.styled)('div', getArrowStyles);
+exports.Arrow = Arrow;
+Arrow.displayName = "Arrow";
+Arrow.displayName = 'Arrow';
 /**
  * Extra div that holds the popover content. This extra element
  * is needed for the arrow–the arrow is just a 45deg rotated div,
@@ -94,9 +97,6 @@ var Arrow = (0, _styles.styled)('div', getArrowStyles);
  * clips the part of the arrow that extends into the popover.
  */
 
-exports.Arrow = Arrow;
-Arrow.displayName = "Arrow";
-
 function getInnerStyles(_ref) {
   var $theme = _ref.$theme;
   return {
@@ -111,14 +111,15 @@ function getInnerStyles(_ref) {
 }
 
 var Inner = (0, _styles.styled)('div', getInnerStyles);
+exports.Inner = Inner;
+Inner.displayName = "Inner";
+Inner.displayName = 'Inner';
 /**
  * A drop-in component that provides the recommended padding
  * for popovers. Mostly a convenience for users so they don't
  * have to define this themselves.
  */
 
-exports.Inner = Inner;
-Inner.displayName = "Inner";
 var Padding = (0, _styles.styled)('div', {
   paddingLeft: '12px',
   paddingTop: '12px',
@@ -127,8 +128,10 @@ var Padding = (0, _styles.styled)('div', {
 });
 exports.Padding = Padding;
 Padding.displayName = "Padding";
+Padding.displayName = 'Padding';
 var Hidden = (0, _styles.styled)('div', {
   display: 'none'
 });
 exports.Hidden = Hidden;
-Hidden.displayName = "Hidden";
+Hidden.displayName = "Hidden";
+Hidden.displayName = 'Hidden';

package/popover/types.d.ts

@@ -1,7 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { Override } from '../helpers/overrides';
 import type { TetherPlacement } from '../layer';
-import { ACCESSIBILITY_TYPE, STATE_CHANGE_TYPE, TRIGGER_TYPE } from './constants';
+import type { ACCESSIBILITY_TYPE, STATE_CHANGE_TYPE, TRIGGER_TYPE } from './constants';
 export type { PopperDataObject, PopperOffset, PopperOptions } from '../layer';
 export declare type PopoverPlacement = TetherPlacement;
 export declare type TriggerType = keyof typeof TRIGGER_TYPE;

package/progress-bar/progressbar-rounded.js

@@ -100,6 +100,7 @@ function ProgressBarRounded(_ref) {
       setPathLength(pathRef.current.getTotalLength());
     }
   }, []); // Animation
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
   var animationFrameRef = React.useRef();
 

package/progress-bar/styled-components.js

@@ -27,7 +27,8 @@ function getBarHeight(size) {
   var _SIZE$small$SIZE$medi;
 
   return (_SIZE$small$SIZE$medi = {}, _defineProperty(_SIZE$small$SIZE$medi, _constants.SIZE.small, '2px'), _defineProperty(_SIZE$small$SIZE$medi, _constants.SIZE.medium, '4px'), _defineProperty(_SIZE$small$SIZE$medi, _constants.SIZE.large, '8px'), _SIZE$small$SIZE$medi)[size];
-}
+} // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 
 var StyledRoot = (0, _styles.styled)('div', function (props) {
   return {
@@ -36,6 +37,7 @@ var StyledRoot = (0, _styles.styled)('div', function (props) {
 });
 exports.StyledRoot = StyledRoot;
 StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
 var StyledBarContainer = (0, _styles.styled)('div', function (props) {
   var $theme = props.$theme;
   var sizing = $theme.sizing;
@@ -49,6 +51,7 @@ var StyledBarContainer = (0, _styles.styled)('div', function (props) {
 });
 exports.StyledBarContainer = StyledBarContainer;
 StyledBarContainer.displayName = "StyledBarContainer";
+StyledBarContainer.displayName = 'StyledBarContainer';
 var StyledBar = (0, _styles.styled)('div', function (props) {
   var $theme = props.$theme,
       $size = props.$size,
@@ -75,6 +78,7 @@ var StyledBar = (0, _styles.styled)('div', function (props) {
 });
 exports.StyledBar = StyledBar;
 StyledBar.displayName = "StyledBar";
+StyledBar.displayName = 'StyledBar';
 var StyledBarProgress = (0, _styles.styled)('div', function (props) {
   var $theme = props.$theme,
       $value = props.$value,
@@ -153,6 +157,7 @@ var StyledBarProgress = (0, _styles.styled)('div', function (props) {
 });
 exports.StyledBarProgress = StyledBarProgress;
 StyledBarProgress.displayName = "StyledBarProgress";
+StyledBarProgress.displayName = 'StyledBarProgress';
 var StyledInfiniteBar = (0, _styles.styled)('div', function (props) {
   var $theme = props.$theme,
       _props$$isLeft = props.$isLeft,
@@ -217,6 +222,7 @@ var StyledInfiniteBar = (0, _styles.styled)('div', function (props) {
 });
 exports.StyledInfiniteBar = StyledInfiniteBar;
 StyledInfiniteBar.displayName = "StyledInfiniteBar";
+StyledInfiniteBar.displayName = 'StyledInfiniteBar';
 var StyledLabel = (0, _styles.styled)('div', function (props) {
   return _objectSpread(_objectSpread({
     textAlign: 'center'
@@ -226,6 +232,7 @@ var StyledLabel = (0, _styles.styled)('div', function (props) {
 });
 exports.StyledLabel = StyledLabel;
 StyledLabel.displayName = "StyledLabel";
+StyledLabel.displayName = 'StyledLabel';
 var PROGRESS_BAR_ROUNDED_SIZES = (_PROGRESS_BAR_ROUNDED = {}, _defineProperty(_PROGRESS_BAR_ROUNDED, _constants.SIZE.large, {
   d: 'M47.5 4H71.5529C82.2933 4 91 12.9543 91 24C91 35.0457 82.2933 44 71.5529 44H23.4471C12.7067 44 4 35.0457 4 24C4 12.9543 12.7067 4 23.4471 4H47.5195',
   width: 95,
@@ -259,6 +266,7 @@ var StyledProgressBarRoundedRoot = (0, _styles.styled)('div', function (_ref) {
 });
 exports.StyledProgressBarRoundedRoot = StyledProgressBarRoundedRoot;
 StyledProgressBarRoundedRoot.displayName = "StyledProgressBarRoundedRoot";
+StyledProgressBarRoundedRoot.displayName = 'StyledProgressBarRoundedRoot';
 
 var _StyledProgressBarRoundedSvg = (0, _styles.styled)('svg', function (_ref2) {
   var $size = _ref2.$size;
@@ -271,6 +279,7 @@ var _StyledProgressBarRoundedSvg = (0, _styles.styled)('svg', function (_ref2) {
 });
 
 _StyledProgressBarRoundedSvg.displayName = "_StyledProgressBarRoundedSvg";
+_StyledProgressBarRoundedSvg.displayName = '_StyledProgressBarRoundedSvg';
 var StyledProgressBarRoundedSvg = (0, _styles.withWrapper)(_StyledProgressBarRoundedSvg, function (Styled) {
   return function StyledProgressBarRoundedSvg(props) {
     return /*#__PURE__*/_react.default.createElement(Styled, _extends({
@@ -291,6 +300,7 @@ var _StyledProgressBarRoundedTrackBackground = (0, _styles.styled)('path', funct
 });
 
 _StyledProgressBarRoundedTrackBackground.displayName = "_StyledProgressBarRoundedTrackBackground";
+_StyledProgressBarRoundedTrackBackground.displayName = '_StyledProgressBarRoundedTrackBackground';
 var StyledProgressBarRoundedTrackBackground = (0, _styles.withWrapper)(_StyledProgressBarRoundedTrackBackground, function (Styled) {
   return function StyledProgressBarRoundedSvg(props) {
     return /*#__PURE__*/_react.default.createElement(Styled, _extends({
@@ -316,6 +326,7 @@ var _StyledProgressBarRoundedTrackForeground = (0, _styles.styled)('path', funct
 });
 
 _StyledProgressBarRoundedTrackForeground.displayName = "_StyledProgressBarRoundedTrackForeground";
+_StyledProgressBarRoundedTrackForeground.displayName = '_StyledProgressBarRoundedTrackForeground';
 var StyledProgressBarRoundedTrackForeground = (0, _styles.withWrapper)(_StyledProgressBarRoundedTrackForeground, function (Styled) {
   return function StyledProgressBarRoundedSvg(props) {
     return /*#__PURE__*/_react.default.createElement(Styled, _extends({
@@ -332,4 +343,5 @@ var StyledProgressBarRoundedText = (0, _styles.styled)('div', function (_ref5) {
   }, $theme.typography[PROGRESS_BAR_ROUNDED_SIZES[$size].typography]);
 });
 exports.StyledProgressBarRoundedText = StyledProgressBarRoundedText;
-StyledProgressBarRoundedText.displayName = "StyledProgressBarRoundedText";
+StyledProgressBarRoundedText.displayName = "StyledProgressBarRoundedText";
+StyledProgressBarRoundedText.displayName = 'StyledProgressBarRoundedText';

package/progress-bar/types.d.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { Override } from '../helpers/overrides';
-import { SIZE } from './constants';
+import type { SIZE } from './constants';
 export declare type Size = keyof typeof SIZE;
 export declare type ProgressBarOverrides = {
     Root?: Override;

package/progress-steps/progress-steps.js

@@ -48,7 +48,8 @@ function ProgressSteps(_ref) {
       Root = _getOverrides2[0],
       rootProps = _getOverrides2[1];
 
-  var numChildren = React.Children.count(children);
+  var numChildren = React.Children.count(children); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
   var modifiedChildren = React.Children.map(children, function (child, index) {
     if (!child) return;
     var childOverrides = child.props.overrides || {};