baseui 0.0.0-alpha-8ab2335 → 0.0.0-alpha-e79754d

package/esm/select/multi-value.js

@@ -26,8 +26,7 @@ LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
 import { getOverrides } from '../helpers/overrides';
-import { Tag, VARIANT as TAG_VARIANT } from '../tag'; // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
+import { Tag, VARIANT as TAG_VARIANT } from '../tag';
 export default function MultiValue(props) {
   var _props$overrides = props.overrides,
       overrides = _props$overrides === void 0 ? {} : _props$overrides,

package/esm/select/select-component.js

@@ -57,13 +57,15 @@ 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 cup/no-undef */
 import * as React from 'react';
 import { getOverrides, mergeOverrides } from '../helpers/overrides';
 import DeleteAlt from '../icon/delete-alt';
 import TriangleDownIcon from '../icon/triangle-down';
 import SearchIconComponent from '../icon/search';
 import { LocaleContext } from '../locale';
-import { Popover, PLACEMENT, ACCESSIBILITY_TYPE } from '../popover';
+import { Popover, PLACEMENT } from '../popover';
 import { UIDConsumer } from 'react-uid';
 import AutosizeInput from './autosize-input';
 import { TYPE, STATE_CHANGE_TYPE, SIZE } from './constants';
@@ -86,7 +88,6 @@ var isLeftClick = function isLeftClick(event) {
 
 var containsNode = function containsNode(parent, child) {
   if (typeof document !== 'undefined') {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     return child && parent && parent.contains(child);
   }
 };
@@ -818,7 +819,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
     }
   }, {
     key: "renderValue",
-    value: function renderValue(valueArray) {
+    value: function renderValue(valueArray, isOpen, locale) {
       var _this4 = this;
 
       var _this$props$overrides2 = this.props.overrides,
@@ -887,10 +888,13 @@ var Select = /*#__PURE__*/function (_React$Component) {
 
       if (!this.props.searchable) {
         return /*#__PURE__*/React.createElement(InputContainer, _extends({
+          role: "listbox",
           "aria-activedescendant": this.state.activeDescendant,
+          "aria-expanded": isOpen,
           "aria-describedby": this.props['aria-describedby'],
           "aria-errormessage": this.props['aria-errormessage'],
           "aria-disabled": this.props.disabled,
+          "aria-label": label,
           "aria-labelledby": this.props['aria-labelledby'],
           "aria-owns": this.state.isOpen ? listboxId : null,
           "aria-required": this.props.required || null,
@@ -947,8 +951,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
 
       if (!this.props.clearable || this.props.disabled || this.props.isLoading || !isValueEntered) {
         return;
-      } // eslint-disable-next-line @typescript-eslint/no-unused-vars
-
+      }
 
       var _this$getSharedProps = this.getSharedProps(),
           $size = _this$getSharedProps.$size,
@@ -979,8 +982,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
 
       if (this.props.type !== TYPE.select) {
         return null;
-      } // eslint-disable-next-line @typescript-eslint/no-unused-vars
-
+      }
 
       var _this$getSharedProps2 = this.getSharedProps(),
           $size = _this$getSharedProps2.$size,
@@ -1178,13 +1180,11 @@ var Select = /*#__PURE__*/function (_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 @typescript-eslint/no-explicit-any
           , _extends({
             innerRef: function innerRef(ref) {
               if (!ref) return;
               _this7.anchor = ref.anchorRef;
             },
-            accessibilityType: ACCESSIBILITY_TYPE.none,
             autoFocus: false,
             focusLock: false,
             mountNode: _this7.props.mountNode,
@@ -1231,7 +1231,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
             onTouchEnd: _this7.handleTouchEnd,
             onTouchMove: _this7.handleTouchMove,
             onTouchStart: _this7.handleTouchStart
-          }, sharedProps, controlContainerProps), type === TYPE.search ? _this7.renderSearch() : null, /*#__PURE__*/React.createElement(ValueContainer, _extends({}, sharedProps, valueContainerProps), _this7.renderValue(valueArray), _this7.renderInput(listboxId), _this7.shouldShowPlaceholder() ? /*#__PURE__*/React.createElement(Placeholder, _extends({}, sharedProps, placeholderProps), typeof _this7.props.placeholder !== 'undefined' ? _this7.props.placeholder : locale.select.placeholder) : null), /*#__PURE__*/React.createElement(IconsContainer, _extends({}, sharedProps, iconsContainerProps), _this7.renderLoading(), _this7.renderClear(), type === TYPE.select ? _this7.renderArrow() : null))));
+          }, sharedProps, controlContainerProps), type === TYPE.search ? _this7.renderSearch() : null, /*#__PURE__*/React.createElement(ValueContainer, _extends({}, sharedProps, valueContainerProps), _this7.renderValue(valueArray, isOpen, locale), _this7.renderInput(listboxId), _this7.shouldShowPlaceholder() ? /*#__PURE__*/React.createElement(Placeholder, _extends({}, sharedProps, placeholderProps), typeof _this7.props.placeholder !== 'undefined' ? _this7.props.placeholder : locale.select.placeholder) : null), /*#__PURE__*/React.createElement(IconsContainer, _extends({}, sharedProps, iconsContainerProps), _this7.renderLoading(), _this7.renderClear(), type === TYPE.select ? _this7.renderArrow() : null))));
         });
       });
     }

package/esm/select/single-select.js

@@ -10,11 +10,11 @@ import * as React from 'react';
 import SelectComponent from './select-component';
 import Value from './value';
 
-function SingleSelect(props) {
+function MultiSelect(props) {
   return /*#__PURE__*/React.createElement(SelectComponent, _extends({}, props, {
     multi: false,
     valueComponent: Value
   }));
 }
 
-export default SingleSelect;
+export default MultiSelect;

package/esm/select/styled-components.js

@@ -24,21 +24,6 @@ function getFont() {
   return (_SIZE$mini$SIZE$compa = {}, _defineProperty(_SIZE$mini$SIZE$compa, SIZE.mini, typography.font100), _defineProperty(_SIZE$mini$SIZE$compa, SIZE.compact, typography.font200), _defineProperty(_SIZE$mini$SIZE$compa, SIZE.default, typography.font300), _defineProperty(_SIZE$mini$SIZE$compa, SIZE.large, typography.font400), _SIZE$mini$SIZE$compa)[size];
 }
 
-function getBorderRadius(size, borders) {
-  var radius = borders.inputBorderRadius;
-
-  if (size === SIZE.mini) {
-    radius = borders.inputBorderRadiusMini;
-  }
-
-  return {
-    borderTopLeftRadius: radius,
-    borderBottomLeftRadius: radius,
-    borderTopRightRadius: radius,
-    borderBottomRightRadius: radius
-  };
-}
-
 function getControlPadding(props) {
   var _SIZE$mini, _SIZE$compact, _SIZE$default, _SIZE$large, _SIZE$mini$SIZE$compa2;
 
@@ -78,7 +63,6 @@ export var StyledDropdownContainer = styled('div', function (props) {
   };
 });
 StyledDropdownContainer.displayName = "StyledDropdownContainer";
-StyledDropdownContainer.displayName = 'StyledDropdownContainer';
 export var StyledDropdown = StyledList;
 export var StyledDropdownListItem = StyledListItem;
 export var StyledOptionContent = styled('div', function (props) {
@@ -93,7 +77,6 @@ export var StyledOptionContent = styled('div', function (props) {
   };
 });
 StyledOptionContent.displayName = "StyledOptionContent";
-StyledOptionContent.displayName = 'StyledOptionContent';
 export var StyledRoot = styled('div', function (props) {
   var typography = props.$theme.typography,
       $size = props.$size;
@@ -104,7 +87,6 @@ export var StyledRoot = styled('div', function (props) {
   });
 });
 StyledRoot.displayName = "StyledRoot";
-StyledRoot.displayName = 'StyledRoot';
 
 function getControlContainerColors($disabled, $isFocused, $isPseudoFocused, $positive, $error, colors) {
   if ($disabled) {
@@ -169,12 +151,15 @@ export var StyledControlContainer = styled('div', function (props) {
       $isPseudoFocused = props.$isPseudoFocused,
       $type = props.$type,
       $searchable = props.$searchable,
-      $size = props.$size,
       _props$$theme = props.$theme,
       borders = _props$$theme.borders,
       colors = _props$$theme.colors,
       animation = _props$$theme.animation;
-  return _objectSpread(_objectSpread({}, getBorderRadius($size, borders)), {}, {
+  return _objectSpread({
+    borderTopLeftRadius: borders.inputBorderRadius,
+    borderTopRightRadius: borders.inputBorderRadius,
+    borderBottomRightRadius: borders.inputBorderRadius,
+    borderBottomLeftRadius: borders.inputBorderRadius,
     boxSizing: 'border-box',
     overflow: 'hidden',
     width: '100%',
@@ -195,7 +180,6 @@ export var StyledControlContainer = styled('div', function (props) {
   }, getControlContainerColors($disabled, $isFocused, $isPseudoFocused, $positive, $error, colors));
 });
 StyledControlContainer.displayName = "StyledControlContainer";
-StyledControlContainer.displayName = 'StyledControlContainer';
 export var StyledValueContainer = styled('div', function (props) {
   var padding = getControlPadding(props);
   return _objectSpread({
@@ -211,7 +195,6 @@ export var StyledValueContainer = styled('div', function (props) {
   }, padding);
 });
 StyledValueContainer.displayName = "StyledValueContainer";
-StyledValueContainer.displayName = 'StyledValueContainer';
 export var StyledPlaceholder = styled('div', function (props) {
   var $disabled = props.$disabled,
       colors = props.$theme.colors;
@@ -224,7 +207,6 @@ export var StyledPlaceholder = styled('div', function (props) {
   };
 });
 StyledPlaceholder.displayName = "StyledPlaceholder";
-StyledPlaceholder.displayName = 'StyledPlaceholder';
 export var StyledSingleValue = styled('div', function (props) {
   var _objectSpread2;
 
@@ -240,7 +222,6 @@ export var StyledSingleValue = styled('div', function (props) {
   }, _defineProperty(_objectSpread2, marginDir, $theme.sizing.scale0), _defineProperty(_objectSpread2, "height", '100%'), _defineProperty(_objectSpread2, "maxWidth", '100%'), _objectSpread2), ellipsisText);
 });
 StyledSingleValue.displayName = "StyledSingleValue";
-StyledSingleValue.displayName = 'StyledSingleValue';
 export var StyledInputContainer = styled('div', function (props) {
   var $size = props.$size,
       $searchable = props.$searchable,
@@ -274,7 +255,6 @@ export var StyledInputContainer = styled('div', function (props) {
   };
 });
 StyledInputContainer.displayName = "StyledInputContainer";
-StyledInputContainer.displayName = 'StyledInputContainer';
 export var StyledInput = styled('input', function (props) {
   var _props$$theme3 = props.$theme,
       colors = _props$$theme3.colors,
@@ -306,7 +286,6 @@ export var StyledInput = styled('input', function (props) {
   });
 });
 StyledInput.displayName = "StyledInput";
-StyledInput.displayName = 'StyledInput';
 export var StyledInputSizer = styled('div', function (_ref) {
   var _objectSpread3;
 
@@ -320,7 +299,6 @@ export var StyledInputSizer = styled('div', function (_ref) {
   }, _defineProperty(_objectSpread3, dir, 0), _defineProperty(_objectSpread3, "visibility", 'hidden'), _defineProperty(_objectSpread3, "height", 0), _defineProperty(_objectSpread3, "overflow", 'scroll'), _defineProperty(_objectSpread3, "whiteSpace", 'pre'), _objectSpread3));
 });
 StyledInputSizer.displayName = "StyledInputSizer";
-StyledInputSizer.displayName = 'StyledInputSizer';
 export var StyledIconsContainer = styled('div', function (_ref2) {
   var $theme = _ref2.$theme,
       sizing = _ref2.$theme.sizing;
@@ -335,7 +313,6 @@ export var StyledIconsContainer = styled('div', function (_ref2) {
   }, paddingDir, sizing.scale500);
 });
 StyledIconsContainer.displayName = "StyledIconsContainer";
-StyledIconsContainer.displayName = 'StyledIconsContainer';
 
 function getSvgStyles(_ref4) {
   var $theme = _ref4.$theme;
@@ -372,7 +349,6 @@ export var StyledSelectArrow = styled('svg', function (props) {
   });
 });
 StyledSelectArrow.displayName = "StyledSelectArrow";
-StyledSelectArrow.displayName = 'StyledSelectArrow';
 export var StyledClearIcon = styled('svg', function (props) {
   var _sizes2;
 
@@ -396,7 +372,6 @@ export var StyledClearIcon = styled('svg', function (props) {
   });
 });
 StyledClearIcon.displayName = "StyledClearIcon";
-StyledClearIcon.displayName = 'StyledClearIcon';
 export var StyledLoadingIndicator = withStyle(Spinner, function (_ref5) {
   var $theme = _ref5.$theme;
   return {
@@ -412,7 +387,6 @@ export var StyledLoadingIndicator = withStyle(Spinner, function (_ref5) {
   };
 });
 StyledLoadingIndicator.displayName = "StyledLoadingIndicator";
-StyledLoadingIndicator.displayName = 'StyledLoadingIndicator';
 export var StyledSearchIconContainer = styled('div', function (props) {
   var _objectSpread4;
 
@@ -428,5 +402,4 @@ export var StyledSearchIconContainer = styled('div', function (props) {
     top: 0
   }, _defineProperty(_objectSpread4, dir, sizing.scale500), _defineProperty(_objectSpread4, "display", 'flex'), _defineProperty(_objectSpread4, "alignItems", 'center'), _defineProperty(_objectSpread4, "height", '100%'), _objectSpread4));
 });
-StyledSearchIconContainer.displayName = "StyledSearchIconContainer";
-StyledSearchIconContainer.displayName = 'StyledSearchIconContainer';
+StyledSearchIconContainer.displayName = "StyledSearchIconContainer";

package/esm/select/value.js

@@ -26,8 +26,7 @@ LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
 import { StyledSingleValue } from './styled-components';
-import { getOverrides } from '../helpers/overrides'; // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
+import { getOverrides } from '../helpers/overrides';
 export default function Value(props) {
   var _props$overrides = props.overrides,
       overrides = _props$overrides === void 0 ? {} : _props$overrides,
@@ -38,5 +37,7 @@ export default function Value(props) {
       SingleValue = _getOverrides2[0],
       singleValueProps = _getOverrides2[1];
 
-  return /*#__PURE__*/React.createElement(SingleValue, _extends({}, restProps, singleValueProps), props.children);
+  return /*#__PURE__*/React.createElement(SingleValue, _extends({
+    "aria-selected": "true"
+  }, restProps, singleValueProps), props.children);
 }

package/esm/side-navigation/index.js

@@ -10,5 +10,4 @@ export { default as NavItem } from './nav-item'; // Styled elements
 export * from './styled-components'; // Types
 
 export * from './types';
-/** @deprecated type is already removed*/
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
+/** @deprecated type is already removed*/

package/esm/side-navigation/nav-item.js

@@ -102,7 +102,6 @@ var NavItem = /*#__PURE__*/function (_React$Component) {
   _createClass(NavItem, [{
     key: "render",
     value: function render() {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       var _this$props3 = this.props,
           item = _this$props3.item,
           overrides = _this$props3.overrides,

package/esm/side-navigation/nav.js

@@ -160,7 +160,7 @@ var SideNav = /*#__PURE__*/function (_React$Component) {
           overrides: overrides
         }, sharedProps)), item.subNav ? /*#__PURE__*/React.createElement(SubNavContainer, _extends({
           role: "list"
-        }, sharedProps, subNavContainerProps), item.subNav.map(function (subitem) {
+        }, sharedProps, subNavContainerProps), item.subNav.map(function (subitem, idx) {
           return renderNavItem(subitem, level + 1, index);
         })) : null));
       };

package/esm/side-navigation/stateful-container.js

@@ -96,7 +96,6 @@ var StatefulContainer = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       // eslint-disable-next-line no-unused-vars
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       var _this$props = this.props,
           children = _this$props.children,
           initialState = _this$props.initialState,

package/esm/side-navigation/styled-components.js

@@ -36,10 +36,8 @@ export var StyledRoot = styled('nav', function (props) {
   });
 });
 StyledRoot.displayName = "StyledRoot";
-StyledRoot.displayName = 'StyledRoot';
 export var StyledNavItemContainer = styled('li', {});
 StyledNavItemContainer.displayName = "StyledNavItemContainer";
-StyledNavItemContainer.displayName = 'StyledNavItemContainer';
 export var StyledNavLink = styled('a', function (_ref) {
   var $theme = _ref.$theme,
       $isFocusVisible = _ref.$isFocusVisible;
@@ -60,7 +58,6 @@ export var StyledNavLink = styled('a', function (_ref) {
   };
 });
 StyledNavLink.displayName = "StyledNavLink";
-StyledNavLink.displayName = 'StyledNavLink';
 export var StyledNavItemElement = styled('div', function (props) {
   var _ref2;
 
@@ -99,16 +96,13 @@ export var StyledNavItemElement = styled('div', function (props) {
   }), _ref2;
 });
 StyledNavItemElement.displayName = "StyledNavItemElement";
-StyledNavItemElement.displayName = 'StyledNavItemElement';
 export var StyledNavItem = withWrapper(StyledNavItemElement, function (Styled) {
-  return (// eslint-disable-next-line @typescript-eslint/no-unused-vars
-    function StyledNav(_ref3) {
-      var item = _ref3.item,
-          restProps = _objectWithoutProperties(_ref3, _excluded);
+  return function StyledNav(_ref3) {
+    var item = _ref3.item,
+        restProps = _objectWithoutProperties(_ref3, _excluded);
 
-      return /*#__PURE__*/React.createElement(Styled, restProps);
-    }
-  );
+    return /*#__PURE__*/React.createElement(Styled, restProps);
+  };
 });
 export var StyledSubNavContainer = styled('ul', {
   listStyleType: 'none',
@@ -121,5 +115,4 @@ export var StyledSubNavContainer = styled('ul', {
   paddingLeft: 0,
   paddingRight: 0
 });
-StyledSubNavContainer.displayName = "StyledSubNavContainer";
-StyledSubNavContainer.displayName = 'StyledSubNavContainer';
+StyledSubNavContainer.displayName = "StyledSubNavContainer";

package/esm/skeleton/styled-components.js

@@ -51,7 +51,6 @@ export var StyledRoot = styled('div', function (props) {
   });
 });
 StyledRoot.displayName = "StyledRoot";
-StyledRoot.displayName = 'StyledRoot';
 export var StyledRow = styled('div', function (props) {
   return _objectSpread(_objectSpread({}, props.$animation ? _objectSpread(_objectSpread({}, animationStyle), {}, {
     backgroundImage: getAnimationColor(props)
@@ -63,5 +62,4 @@ export var StyledRow = styled('div', function (props) {
     marginBottom: props.$isLastRow ? '0px' : '10px'
   });
 });
-StyledRow.displayName = "StyledRow";
-StyledRow.displayName = 'StyledRow';
+StyledRow.displayName = "StyledRow";

package/esm/slider/slider.js

@@ -92,13 +92,11 @@ function Slider(_ref) {
   var handleFocus = React.useCallback(function (event) {
     if (focusVisible(event)) {
       setIsFocusVisible(true);
-    } // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
+    }
 
     var index = event.target.parentNode.firstChild === event.target ? 0 : 1;
     setFocusedThumbIndex(index);
-  }, []); // eslint-disable-next-line @typescript-eslint/no-unused-vars
-
+  }, []);
   var handleBlur = React.useCallback(function (event) {
     if (isFocusVisible !== false) {
       setIsFocusVisible(false);

package/esm/slider/styled-components.js

@@ -17,7 +17,6 @@ export var Root = styled('div', {
   width: '100%'
 });
 Root.displayName = "Root";
-Root.displayName = 'Root';
 Root.displayName = 'StyledRoot';
 export var Track = styled('div', function (props) {
   var $theme = props.$theme,
@@ -47,7 +46,6 @@ export var Track = styled('div', function (props) {
   };
 });
 Track.displayName = "Track";
-Track.displayName = 'Track';
 Track.displayName = 'StyledTrack';
 export var InnerTrack = styled('div', function (props) {
   var $theme = props.$theme,
@@ -79,7 +77,6 @@ export var InnerTrack = styled('div', function (props) {
   };
 });
 InnerTrack.displayName = "InnerTrack";
-InnerTrack.displayName = 'InnerTrack';
 InnerTrack.displayName = 'StyledInnerTrack';
 export var Mark = styled('div', function (props) {
   return {
@@ -90,7 +87,6 @@ export var Mark = styled('div', function (props) {
   };
 });
 Mark.displayName = "Mark";
-Mark.displayName = 'Mark';
 Mark.displayName = 'StyledMark';
 export var Tick = styled('div', function (props) {
   return _objectSpread(_objectSpread({}, props.$theme.typography.font200), {}, {
@@ -98,7 +94,6 @@ export var Tick = styled('div', function (props) {
   });
 });
 Tick.displayName = "Tick";
-Tick.displayName = 'Tick';
 Tick.displayName = 'StyledTick';
 export var TickBar = styled('div', function (props) {
   var $theme = props.$theme;
@@ -113,7 +108,6 @@ export var TickBar = styled('div', function (props) {
   };
 });
 TickBar.displayName = "TickBar";
-TickBar.displayName = 'TickBar';
 TickBar.displayName = 'StyledTickBar';
 export var Thumb = styled('div', function (props) {
   var $theme = props.$theme,
@@ -146,7 +140,6 @@ export var Thumb = styled('div', function (props) {
   };
 });
 Thumb.displayName = "Thumb";
-Thumb.displayName = 'Thumb';
 Thumb.displayName = 'StyledThumb';
 export var InnerThumb = styled('div', function (props) {
   var $disabled = props.$disabled,
@@ -160,7 +153,6 @@ export var InnerThumb = styled('div', function (props) {
   };
 });
 InnerThumb.displayName = "InnerThumb";
-InnerThumb.displayName = 'InnerThumb';
 InnerThumb.displayName = 'StyledInnerThumb';
 export var ThumbValue = styled('div', function (props) {
   var $disabled = props.$disabled,
@@ -183,5 +175,4 @@ export var ThumbValue = styled('div', function (props) {
   });
 });
 ThumbValue.displayName = "ThumbValue";
-ThumbValue.displayName = 'ThumbValue';
 ThumbValue.displayName = 'StyledThumbValue';

package/esm/snackbar/snackbar-element.js

@@ -24,7 +24,6 @@ import { getOverrides } from '../helpers/overrides';
 import { useStyletron } from '../styles';
 import { StyledRoot, StyledContent, StyledStartEnhancerContainer, StyledSpinner, StyledMessage, StyledWrapActionButtonContainer, StyledActionButtonContainer } from './styled-components';
 // todo(flow->ts): types
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 var ActionButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var onClick = _ref.onClick,
       message = _ref.message,

package/esm/snackbar/styled-components.js

@@ -29,14 +29,12 @@ export var StyledRoot = styled('div', function (_ref) {
   };
 });
 StyledRoot.displayName = "StyledRoot";
-StyledRoot.displayName = 'StyledRoot';
 export var StyledContent = styled('div', {
   alignItems: 'center',
   display: 'inline-flex',
   width: '100%'
 });
 StyledContent.displayName = "StyledContent";
-StyledContent.displayName = 'StyledContent';
 export var StyledStartEnhancerContainer = styled('span', function (_ref2) {
   var $theme = _ref2.$theme;
   var paddingDir = $theme.direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
@@ -46,7 +44,6 @@ export var StyledStartEnhancerContainer = styled('span', function (_ref2) {
   }, paddingDir, $theme.sizing.scale600);
 });
 StyledStartEnhancerContainer.displayName = "StyledStartEnhancerContainer";
-StyledStartEnhancerContainer.displayName = 'StyledStartEnhancerContainer';
 export var StyledSpinner = withStyle(Spinner, function (_ref4) {
   var $height = _ref4.$height,
       $width = _ref4.$width;
@@ -57,7 +54,6 @@ export var StyledSpinner = withStyle(Spinner, function (_ref4) {
   };
 });
 StyledSpinner.displayName = "StyledSpinner";
-StyledSpinner.displayName = 'StyledSpinner';
 export var StyledMessage = styled('p', //$FlowExpectedError[incompatible-shape]
 function (_ref5) {
   var _objectSpread2;
@@ -76,20 +72,17 @@ function (_ref5) {
   }, _defineProperty(_objectSpread2, prefixPadding, $theme.sizing.scale600), _defineProperty(_objectSpread2, suffixPadding, $hasSuffix ? $theme.sizing.scale300 : $theme.sizing.scale600), _objectSpread2));
 });
 StyledMessage.displayName = "StyledMessage";
-StyledMessage.displayName = 'StyledMessage';
 export var StyledWrapActionButtonContainer = styled('div', {
   display: 'flex',
   justifyContent: 'flex-end'
 });
 StyledWrapActionButtonContainer.displayName = "StyledWrapActionButtonContainer";
-StyledWrapActionButtonContainer.displayName = 'StyledWrapActionButtonContainer';
 export var StyledActionButtonContainer = styled('div', function (_ref6) {
   var $theme = _ref6.$theme;
   var marginDir = $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
   return _defineProperty({}, marginDir, 'auto');
 });
 StyledActionButtonContainer.displayName = "StyledActionButtonContainer";
-StyledActionButtonContainer.displayName = 'StyledActionButtonContainer';
 
 function placementRules(placement) {
   switch (placement) {
@@ -165,5 +158,4 @@ export var StyledPlacementContainer = styled('div', function (_ref8) {
     marginLeft: $theme.sizing.scale600
   }));
 });
-StyledPlacementContainer.displayName = "StyledPlacementContainer";
-StyledPlacementContainer.displayName = 'StyledPlacementContainer';
+StyledPlacementContainer.displayName = "StyledPlacementContainer";

package/esm/spinner/styled-components.js

@@ -74,5 +74,4 @@ export var StyledSpinner = styled('i', function (_ref) {
     cursor: 'wait'
   };
 });
-StyledSpinner.displayName = "StyledSpinner";
-StyledSpinner.displayName = 'StyledSpinner';
+StyledSpinner.displayName = "StyledSpinner";

package/esm/styles/__mocks__/styled.js

@@ -40,6 +40,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.
 */
+
+/* flowlint unclear-type:off */
 import * as React from 'react';
 import { getInitialStyle } from 'styletron-standard';
 import { LightTheme } from '../../themes';
@@ -51,7 +53,6 @@ var IDENTITY = function IDENTITY(x) {
 };
 
 export function useStyletron() {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   function css(styles) {
     return _objectSpread({
       label: 'useStyletron mock describes the applied css properties'
@@ -59,8 +60,7 @@ export function useStyletron() {
   }
 
   return [css, MOCK_THEME];
-} // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
+}
 export function styled(ElementName) {
   var objOrFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
@@ -88,7 +88,6 @@ export function styled(ElementName) {
     _createClass(MockStyledComponent, [{
       key: "getPassedProps",
       value: function getPassedProps() {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         var _this$props = this.props,
             forwardedRef = _this$props.forwardedRef,
             restProps = _objectWithoutProperties(_this$props, _excluded);
@@ -154,10 +153,8 @@ export function styled(ElementName) {
   });
 }
 export var withStyle = styled;
-export function withWrapper( // eslint-disable-next-line @typescript-eslint/no-explicit-any
-StyledElement, // eslint-disable-next-line @typescript-eslint/no-explicit-any
-wrapperFn) {
-  // eslint-disable-next-line react/display-name,@typescript-eslint/no-explicit-any
+export function withWrapper(StyledElement, wrapperFn) {
+  // eslint-disable-next-line react/display-name
   return /*#__PURE__*/React.forwardRef(function (props, ref) {
     return wrapperFn(StyledElement)(_objectSpread(_objectSpread({
       ref: ref

package/esm/styles/styled.js

@@ -42,23 +42,23 @@ var wrapper = function wrapper(StyledComponent) {
   });
 };
 
+/* eslint-enable flowtype/generic-spacing */
+
+/* flowlint unclear-type:error */
 export function createThemedStyled() {
   return createStyled({
     wrapper: wrapper,
     getInitialStyle: getInitialStyle,
-    driver: driver // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
+    driver: driver
   });
 }
 export var styled = createThemedStyled();
 export function createThemedWithStyle() {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return styletronWithStyle;
 }
 export var withStyle = createThemedWithStyle();
 export function createThemedUseStyletron() {
   return function () {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     var theme = React.useContext(ThemeContext);
 
     var _styletronUseStyletro = styletronUseStyletron(),
@@ -68,11 +68,10 @@ export function createThemedUseStyletron() {
     return [css, theme];
   };
 }
-export var useStyletron = createThemedUseStyletron(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
+export var useStyletron = createThemedUseStyletron();
 export function withWrapper(StyledElement, wrapperFn) {
   return styletronWithWrapper(StyledElement, function (Styled) {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any,react/display-name
+    // eslint-disable-next-line react/display-name
     return /*#__PURE__*/React.forwardRef(function (props, ref) {
       return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
         return (// @ts-ignore

package/esm/table/index.js

@@ -13,5 +13,4 @@ export { SORT_DIRECTION } from './constants'; // Styled elements
 export { StyledTable, StyledFilterButton, StyledFilterContent, StyledFilterHeading, StyledFilterFooter, StyledHead, StyledHeadCell, StyledBody, StyledRow, StyledCell, StyledAction, StyledSortableLabel } from './styled-components'; // Flow
 
 export * from './types';
-/** @deprecated use HeadCellOverrides instead. To be removed in future versions.*/
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
+/** @deprecated use HeadCellOverrides instead. To be removed in future versions.*/