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

package/select/styled-components.js

@@ -29,21 +29,6 @@ function getFont() {
   return (_SIZE$mini$SIZE$compa = {}, _defineProperty(_SIZE$mini$SIZE$compa, _constants.SIZE.mini, typography.font100), _defineProperty(_SIZE$mini$SIZE$compa, _constants.SIZE.compact, typography.font200), _defineProperty(_SIZE$mini$SIZE$compa, _constants.SIZE.default, typography.font300), _defineProperty(_SIZE$mini$SIZE$compa, _constants.SIZE.large, typography.font400), _SIZE$mini$SIZE$compa)[size];
 }
 
-function getBorderRadius(size, borders) {
-  var radius = borders.inputBorderRadius;
-
-  if (size === _constants.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;
 
@@ -84,7 +69,6 @@ var StyledDropdownContainer = (0, _styles.styled)('div', function (props) {
 });
 exports.StyledDropdownContainer = StyledDropdownContainer;
 StyledDropdownContainer.displayName = "StyledDropdownContainer";
-StyledDropdownContainer.displayName = 'StyledDropdownContainer';
 var StyledDropdown = _menu.StyledList;
 exports.StyledDropdown = StyledDropdown;
 var StyledDropdownListItem = _menu.StyledListItem;
@@ -102,7 +86,6 @@ var StyledOptionContent = (0, _styles.styled)('div', function (props) {
 });
 exports.StyledOptionContent = StyledOptionContent;
 StyledOptionContent.displayName = "StyledOptionContent";
-StyledOptionContent.displayName = 'StyledOptionContent';
 var StyledRoot = (0, _styles.styled)('div', function (props) {
   var typography = props.$theme.typography,
       $size = props.$size;
@@ -114,7 +97,6 @@ var StyledRoot = (0, _styles.styled)('div', function (props) {
 });
 exports.StyledRoot = StyledRoot;
 StyledRoot.displayName = "StyledRoot";
-StyledRoot.displayName = 'StyledRoot';
 
 function getControlContainerColors($disabled, $isFocused, $isPseudoFocused, $positive, $error, colors) {
   if ($disabled) {
@@ -179,12 +161,15 @@ var StyledControlContainer = (0, _styles.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%',
@@ -206,7 +191,6 @@ var StyledControlContainer = (0, _styles.styled)('div', function (props) {
 });
 exports.StyledControlContainer = StyledControlContainer;
 StyledControlContainer.displayName = "StyledControlContainer";
-StyledControlContainer.displayName = 'StyledControlContainer';
 var StyledValueContainer = (0, _styles.styled)('div', function (props) {
   var padding = getControlPadding(props);
   return _objectSpread({
@@ -223,7 +207,6 @@ var StyledValueContainer = (0, _styles.styled)('div', function (props) {
 });
 exports.StyledValueContainer = StyledValueContainer;
 StyledValueContainer.displayName = "StyledValueContainer";
-StyledValueContainer.displayName = 'StyledValueContainer';
 var StyledPlaceholder = (0, _styles.styled)('div', function (props) {
   var $disabled = props.$disabled,
       colors = props.$theme.colors;
@@ -237,7 +220,6 @@ var StyledPlaceholder = (0, _styles.styled)('div', function (props) {
 });
 exports.StyledPlaceholder = StyledPlaceholder;
 StyledPlaceholder.displayName = "StyledPlaceholder";
-StyledPlaceholder.displayName = 'StyledPlaceholder';
 var StyledSingleValue = (0, _styles.styled)('div', function (props) {
   var _objectSpread2;
 
@@ -254,7 +236,6 @@ var StyledSingleValue = (0, _styles.styled)('div', function (props) {
 });
 exports.StyledSingleValue = StyledSingleValue;
 StyledSingleValue.displayName = "StyledSingleValue";
-StyledSingleValue.displayName = 'StyledSingleValue';
 var StyledInputContainer = (0, _styles.styled)('div', function (props) {
   var $size = props.$size,
       $searchable = props.$searchable,
@@ -289,7 +270,6 @@ var StyledInputContainer = (0, _styles.styled)('div', function (props) {
 });
 exports.StyledInputContainer = StyledInputContainer;
 StyledInputContainer.displayName = "StyledInputContainer";
-StyledInputContainer.displayName = 'StyledInputContainer';
 var StyledInput = (0, _styles.styled)('input', function (props) {
   var _props$$theme3 = props.$theme,
       colors = _props$$theme3.colors,
@@ -322,7 +302,6 @@ var StyledInput = (0, _styles.styled)('input', function (props) {
 });
 exports.StyledInput = StyledInput;
 StyledInput.displayName = "StyledInput";
-StyledInput.displayName = 'StyledInput';
 var StyledInputSizer = (0, _styles.styled)('div', function (_ref) {
   var _objectSpread3;
 
@@ -337,7 +316,6 @@ var StyledInputSizer = (0, _styles.styled)('div', function (_ref) {
 });
 exports.StyledInputSizer = StyledInputSizer;
 StyledInputSizer.displayName = "StyledInputSizer";
-StyledInputSizer.displayName = 'StyledInputSizer';
 var StyledIconsContainer = (0, _styles.styled)('div', function (_ref2) {
   var $theme = _ref2.$theme,
       sizing = _ref2.$theme.sizing;
@@ -353,7 +331,6 @@ var StyledIconsContainer = (0, _styles.styled)('div', function (_ref2) {
 });
 exports.StyledIconsContainer = StyledIconsContainer;
 StyledIconsContainer.displayName = "StyledIconsContainer";
-StyledIconsContainer.displayName = 'StyledIconsContainer';
 
 function getSvgStyles(_ref4) {
   var $theme = _ref4.$theme;
@@ -391,7 +368,6 @@ var StyledSelectArrow = (0, _styles.styled)('svg', function (props) {
 });
 exports.StyledSelectArrow = StyledSelectArrow;
 StyledSelectArrow.displayName = "StyledSelectArrow";
-StyledSelectArrow.displayName = 'StyledSelectArrow';
 var StyledClearIcon = (0, _styles.styled)('svg', function (props) {
   var _sizes2;
 
@@ -416,7 +392,6 @@ var StyledClearIcon = (0, _styles.styled)('svg', function (props) {
 });
 exports.StyledClearIcon = StyledClearIcon;
 StyledClearIcon.displayName = "StyledClearIcon";
-StyledClearIcon.displayName = 'StyledClearIcon';
 var StyledLoadingIndicator = (0, _styles.withStyle)(_spinner.Spinner, function (_ref5) {
   var $theme = _ref5.$theme;
   return {
@@ -433,7 +408,6 @@ var StyledLoadingIndicator = (0, _styles.withStyle)(_spinner.Spinner, function (
 });
 exports.StyledLoadingIndicator = StyledLoadingIndicator;
 StyledLoadingIndicator.displayName = "StyledLoadingIndicator";
-StyledLoadingIndicator.displayName = 'StyledLoadingIndicator';
 var StyledSearchIconContainer = (0, _styles.styled)('div', function (props) {
   var _objectSpread4;
 
@@ -450,5 +424,4 @@ var StyledSearchIconContainer = (0, _styles.styled)('div', function (props) {
   }, _defineProperty(_objectSpread4, dir, sizing.scale500), _defineProperty(_objectSpread4, "display", 'flex'), _defineProperty(_objectSpread4, "alignItems", 'center'), _defineProperty(_objectSpread4, "height", '100%'), _objectSpread4));
 });
 exports.StyledSearchIconContainer = StyledSearchIconContainer;
-StyledSearchIconContainer.displayName = "StyledSearchIconContainer";
-StyledSearchIconContainer.displayName = 'StyledSearchIconContainer';
+StyledSearchIconContainer.displayName = "StyledSearchIconContainer";

package/select/styled-components.js.flow

@@ -11,8 +11,7 @@ import { TYPE, SIZE } from './constants.js';
 import { StyledList, StyledListItem } from '../menu/index.js';
 import { Spinner } from '../spinner/index.js';
 
-import type { SizeT, SharedStylePropsArgT } from './types.js';
-import type { ThemeT } from '../styles/types.js';
+import type { SharedStylePropsArgT } from './types.js';
 import { ellipsisText } from '../styles/util.js';
 
 function getFont(size = SIZE.default, typography) {
@@ -24,27 +23,6 @@ function getFont(size = SIZE.default, typography) {
   }[size];
 }
 
-function getBorderRadius(
-  size = SIZE.default,
-  borders
-): {|
-  borderTopLeftRadius: string,
-  borderBottomLeftRadius: string,
-  borderTopRightRadius: string,
-  borderBottomRightRadius: string,
-|} {
-  let radius = borders.inputBorderRadius;
-  if (size === SIZE.mini) {
-    radius = borders.inputBorderRadiusMini;
-  }
-  return {
-    borderTopLeftRadius: radius,
-    borderBottomLeftRadius: radius,
-    borderTopRightRadius: radius,
-    borderBottomRightRadius: radius,
-  };
-}
-
 function getControlPadding(props) {
   const {
     $theme,
@@ -206,11 +184,13 @@ export const StyledControlContainer = styled<SharedStylePropsArgT>('div', (props
     $isPseudoFocused,
     $type,
     $searchable,
-    $size,
     $theme: { borders, colors, animation },
   } = props;
   return {
-    ...getBorderRadius($size, borders),
+    borderTopLeftRadius: borders.inputBorderRadius,
+    borderTopRightRadius: borders.inputBorderRadius,
+    borderBottomRightRadius: borders.inputBorderRadius,
+    borderBottomLeftRadius: borders.inputBorderRadius,
     boxSizing: 'border-box',
     overflow: 'hidden',
     width: '100%',

package/select/types.d.ts

@@ -1,7 +1,8 @@
-import type * as React from 'react';
+import * as React from 'react';
 import type { Override } from '../helpers/overrides';
-import type { STATE_CHANGE_TYPE, SIZE, TYPE } from './constants';
+import { STATE_CHANGE_TYPE, SIZE, TYPE } from './constants';
 import type { OnItemSelectFn } from '../menu';
+import type { ReactNode, SyntheticEvent, ChangeEvent } from 'react';
 export declare type ChangeAction = keyof typeof STATE_CHANGE_TYPE;
 export declare type Size = keyof typeof SIZE;
 export declare type Type = keyof typeof TYPE;
@@ -140,8 +141,8 @@ export declare type SelectProps = {
     onBlurResetsInput?: boolean;
     /** change handler of the select to be called when a value is changed. */
     onChange?: (params: OnChangeParams) => unknown;
-    onFocus?: (e: React.SyntheticEvent<HTMLElement>) => unknown;
-    onInputChange?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    onFocus?: (e: SyntheticEvent<HTMLElement>) => unknown;
+    onInputChange?: (e: ChangeEvent<HTMLInputElement>) => unknown;
     /** Defines if the input value is reset to an empty string when dropdown is closed. */
     onCloseResetsInput?: boolean;
     /** Defines if the input value is reset to an empty string when a selection is made. */
@@ -195,7 +196,7 @@ export declare type State = {
 export declare type StateReducer = (stateType: string, nextState: State, currentState: State) => State;
 export declare type StatefulContainerProps = {
     overrides: SelectOverrides;
-    children: (a: SelectProps) => React.ReactNode;
+    children: (a: SelectProps) => ReactNode;
     initialState: State;
     stateReducer: StateReducer;
     onChange: (params: OnChangeParams) => unknown;

package/select/value.js

@@ -37,7 +37,6 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function Value(props) {
   var _props$overrides = props.overrides,
       overrides = _props$overrides === void 0 ? {} : _props$overrides,
@@ -48,5 +47,7 @@ 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/side-navigation/nav-item.js

@@ -109,7 +109,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/side-navigation/nav.js

@@ -171,7 +171,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/side-navigation/stateful-container.js

@@ -102,7 +102,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/side-navigation/styled-components.js

@@ -46,11 +46,9 @@ var StyledRoot = (0, _styles.styled)('nav', function (props) {
 });
 exports.StyledRoot = StyledRoot;
 StyledRoot.displayName = "StyledRoot";
-StyledRoot.displayName = 'StyledRoot';
 var StyledNavItemContainer = (0, _styles.styled)('li', {});
 exports.StyledNavItemContainer = StyledNavItemContainer;
 StyledNavItemContainer.displayName = "StyledNavItemContainer";
-StyledNavItemContainer.displayName = 'StyledNavItemContainer';
 var StyledNavLink = (0, _styles.styled)('a', function (_ref) {
   var $theme = _ref.$theme,
       $isFocusVisible = _ref.$isFocusVisible;
@@ -72,7 +70,6 @@ var StyledNavLink = (0, _styles.styled)('a', function (_ref) {
 });
 exports.StyledNavLink = StyledNavLink;
 StyledNavLink.displayName = "StyledNavLink";
-StyledNavLink.displayName = 'StyledNavLink';
 var StyledNavItemElement = (0, _styles.styled)('div', function (props) {
   var _ref2;
 
@@ -112,16 +109,13 @@ var StyledNavItemElement = (0, _styles.styled)('div', function (props) {
 });
 exports.StyledNavItemElement = StyledNavItemElement;
 StyledNavItemElement.displayName = "StyledNavItemElement";
-StyledNavItemElement.displayName = 'StyledNavItemElement';
 var StyledNavItem = (0, _styles.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);
+  };
 });
 exports.StyledNavItem = StyledNavItem;
 var StyledSubNavContainer = (0, _styles.styled)('ul', {
@@ -136,5 +130,4 @@ var StyledSubNavContainer = (0, _styles.styled)('ul', {
   paddingRight: 0
 });
 exports.StyledSubNavContainer = StyledSubNavContainer;
-StyledSubNavContainer.displayName = "StyledSubNavContainer";
-StyledSubNavContainer.displayName = 'StyledSubNavContainer';
+StyledSubNavContainer.displayName = "StyledSubNavContainer";

package/side-navigation/types.d.ts

@@ -1,4 +1,4 @@
-import type * as React from 'react';
+import * as React from 'react';
 import type { Override } from '../helpers/overrides';
 declare const stateChangeType: Readonly<{
     readonly change: "change";
@@ -32,7 +32,7 @@ export declare type NavigationProps = {
       Is called on the nav item render to test if the item is currently selected.
       If returns true the item will be rendered as an active one
       */
-    activePredicate?: ((item: Item, activeItemId: string) => boolean) | null;
+    activePredicate: ((item: Item, activeItemId: string) => boolean) | undefined | null;
     /** List of navigation items */
     items: Item[];
     /** Used as a performance optimization if many nav items are rendered. Function provided to
@@ -45,9 +45,9 @@ export declare type NavigationProps = {
         event: Event | KeyboardEvent;
     }) => unknown;
     /** Overrides for the internal elements and components */
-    overrides?: NavigationOverrides;
+    overrides: NavigationOverrides;
     /** Optional transform function that is called for each Item */
-    mapItem?: ((item: Item) => Item) | null;
+    mapItem: ((item: Item) => Item) | undefined | null;
 };
 export declare type Item = {
     /** Navigation item's title to render */

package/skeleton/styled-components.js

@@ -53,7 +53,6 @@ var StyledRoot = (0, _styles.styled)('div', function (props) {
 });
 exports.StyledRoot = StyledRoot;
 StyledRoot.displayName = "StyledRoot";
-StyledRoot.displayName = 'StyledRoot';
 var StyledRow = (0, _styles.styled)('div', function (props) {
   return _objectSpread(_objectSpread({}, props.$animation ? _objectSpread(_objectSpread({}, animationStyle), {}, {
     backgroundImage: getAnimationColor(props)
@@ -66,5 +65,4 @@ var StyledRow = (0, _styles.styled)('div', function (props) {
   });
 });
 exports.StyledRow = StyledRow;
-StyledRow.displayName = "StyledRow";
-StyledRow.displayName = 'StyledRow';
+StyledRow.displayName = "StyledRow";

package/slider/slider.js

@@ -104,13 +104,11 @@ function Slider(_ref) {
   var handleFocus = React.useCallback(function (event) {
     if ((0, _focusVisible.isFocusVisible)(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/slider/styled-components.js

@@ -21,7 +21,6 @@ var Root = (0, _styles.styled)('div', {
 });
 exports.Root = Root;
 Root.displayName = "Root";
-Root.displayName = 'Root';
 Root.displayName = 'StyledRoot';
 var Track = (0, _styles.styled)('div', function (props) {
   var $theme = props.$theme,
@@ -52,7 +51,6 @@ var Track = (0, _styles.styled)('div', function (props) {
 });
 exports.Track = Track;
 Track.displayName = "Track";
-Track.displayName = 'Track';
 Track.displayName = 'StyledTrack';
 var InnerTrack = (0, _styles.styled)('div', function (props) {
   var $theme = props.$theme,
@@ -85,7 +83,6 @@ var InnerTrack = (0, _styles.styled)('div', function (props) {
 });
 exports.InnerTrack = InnerTrack;
 InnerTrack.displayName = "InnerTrack";
-InnerTrack.displayName = 'InnerTrack';
 InnerTrack.displayName = 'StyledInnerTrack';
 var Mark = (0, _styles.styled)('div', function (props) {
   return {
@@ -97,7 +94,6 @@ var Mark = (0, _styles.styled)('div', function (props) {
 });
 exports.Mark = Mark;
 Mark.displayName = "Mark";
-Mark.displayName = 'Mark';
 Mark.displayName = 'StyledMark';
 var Tick = (0, _styles.styled)('div', function (props) {
   return _objectSpread(_objectSpread({}, props.$theme.typography.font200), {}, {
@@ -106,7 +102,6 @@ var Tick = (0, _styles.styled)('div', function (props) {
 });
 exports.Tick = Tick;
 Tick.displayName = "Tick";
-Tick.displayName = 'Tick';
 Tick.displayName = 'StyledTick';
 var TickBar = (0, _styles.styled)('div', function (props) {
   var $theme = props.$theme;
@@ -122,7 +117,6 @@ var TickBar = (0, _styles.styled)('div', function (props) {
 });
 exports.TickBar = TickBar;
 TickBar.displayName = "TickBar";
-TickBar.displayName = 'TickBar';
 TickBar.displayName = 'StyledTickBar';
 var Thumb = (0, _styles.styled)('div', function (props) {
   var $theme = props.$theme,
@@ -156,7 +150,6 @@ var Thumb = (0, _styles.styled)('div', function (props) {
 });
 exports.Thumb = Thumb;
 Thumb.displayName = "Thumb";
-Thumb.displayName = 'Thumb';
 Thumb.displayName = 'StyledThumb';
 var InnerThumb = (0, _styles.styled)('div', function (props) {
   var $disabled = props.$disabled,
@@ -171,7 +164,6 @@ var InnerThumb = (0, _styles.styled)('div', function (props) {
 });
 exports.InnerThumb = InnerThumb;
 InnerThumb.displayName = "InnerThumb";
-InnerThumb.displayName = 'InnerThumb';
 InnerThumb.displayName = 'StyledInnerThumb';
 var ThumbValue = (0, _styles.styled)('div', function (props) {
   var $disabled = props.$disabled,
@@ -195,5 +187,4 @@ var ThumbValue = (0, _styles.styled)('div', function (props) {
 });
 exports.ThumbValue = ThumbValue;
 ThumbValue.displayName = "ThumbValue";
-ThumbValue.displayName = 'ThumbValue';
 ThumbValue.displayName = 'StyledThumbValue';

package/slider/types.d.ts

@@ -1,5 +1,5 @@
 import type { Override } from '../helpers/overrides';
-import type { STATE_CHANGE_TYPE } from './constants';
+import { STATE_CHANGE_TYPE } from './constants';
 import type { ReactNode } from 'react';
 export declare type ChangeAction = keyof typeof STATE_CHANGE_TYPE;
 export declare type Params = {

package/snackbar/snackbar-element.js

@@ -36,7 +36,6 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 // 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/snackbar/styled-components.js

@@ -34,7 +34,6 @@ var StyledRoot = (0, _styles.styled)('div', function (_ref) {
 });
 exports.StyledRoot = StyledRoot;
 StyledRoot.displayName = "StyledRoot";
-StyledRoot.displayName = 'StyledRoot';
 var StyledContent = (0, _styles.styled)('div', {
   alignItems: 'center',
   display: 'inline-flex',
@@ -42,7 +41,6 @@ var StyledContent = (0, _styles.styled)('div', {
 });
 exports.StyledContent = StyledContent;
 StyledContent.displayName = "StyledContent";
-StyledContent.displayName = 'StyledContent';
 var StyledStartEnhancerContainer = (0, _styles.styled)('span', function (_ref2) {
   var $theme = _ref2.$theme;
   var paddingDir = $theme.direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
@@ -53,7 +51,6 @@ var StyledStartEnhancerContainer = (0, _styles.styled)('span', function (_ref2)
 });
 exports.StyledStartEnhancerContainer = StyledStartEnhancerContainer;
 StyledStartEnhancerContainer.displayName = "StyledStartEnhancerContainer";
-StyledStartEnhancerContainer.displayName = 'StyledStartEnhancerContainer';
 var StyledSpinner = (0, _styles.withStyle)(_spinner.Spinner, function (_ref4) {
   var $height = _ref4.$height,
       $width = _ref4.$width;
@@ -65,7 +62,6 @@ var StyledSpinner = (0, _styles.withStyle)(_spinner.Spinner, function (_ref4) {
 });
 exports.StyledSpinner = StyledSpinner;
 StyledSpinner.displayName = "StyledSpinner";
-StyledSpinner.displayName = 'StyledSpinner';
 var StyledMessage = (0, _styles.styled)('p', //$FlowExpectedError[incompatible-shape]
 function (_ref5) {
   var _objectSpread2;
@@ -85,14 +81,12 @@ function (_ref5) {
 });
 exports.StyledMessage = StyledMessage;
 StyledMessage.displayName = "StyledMessage";
-StyledMessage.displayName = 'StyledMessage';
 var StyledWrapActionButtonContainer = (0, _styles.styled)('div', {
   display: 'flex',
   justifyContent: 'flex-end'
 });
 exports.StyledWrapActionButtonContainer = StyledWrapActionButtonContainer;
 StyledWrapActionButtonContainer.displayName = "StyledWrapActionButtonContainer";
-StyledWrapActionButtonContainer.displayName = 'StyledWrapActionButtonContainer';
 var StyledActionButtonContainer = (0, _styles.styled)('div', function (_ref6) {
   var $theme = _ref6.$theme;
   var marginDir = $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
@@ -100,7 +94,6 @@ var StyledActionButtonContainer = (0, _styles.styled)('div', function (_ref6) {
 });
 exports.StyledActionButtonContainer = StyledActionButtonContainer;
 StyledActionButtonContainer.displayName = "StyledActionButtonContainer";
-StyledActionButtonContainer.displayName = 'StyledActionButtonContainer';
 
 function placementRules(placement) {
   switch (placement) {
@@ -177,5 +170,4 @@ var StyledPlacementContainer = (0, _styles.styled)('div', function (_ref8) {
   }));
 });
 exports.StyledPlacementContainer = StyledPlacementContainer;
-StyledPlacementContainer.displayName = "StyledPlacementContainer";
-StyledPlacementContainer.displayName = 'StyledPlacementContainer';
+StyledPlacementContainer.displayName = "StyledPlacementContainer";

package/snackbar/types.d.ts

@@ -1,6 +1,7 @@
-import type * as React from 'react';
+import * as React from 'react';
 import type { Override } from '../helpers/overrides';
-import type { DURATION, PLACEMENT } from './constants';
+import { DURATION, PLACEMENT } from './constants';
+import type { SyntheticEvent } from 'react';
 export declare type Duration = typeof DURATION.infinite | typeof DURATION.short | typeof DURATION.medium | typeof DURATION.long;
 export declare type Placement = typeof PLACEMENT.topLeft | typeof PLACEMENT.top | typeof PLACEMENT.topRight | typeof PLACEMENT.bottomLeft | typeof PLACEMENT.bottom | typeof PLACEMENT.bottomRight;
 export declare type SnackbarElementOverrides = {
@@ -14,7 +15,7 @@ export declare type SnackbarElementOverrides = {
 };
 export declare type SnackbarElementProps = {
     actionMessage?: string;
-    actionOnClick?: (a: React.SyntheticEvent<HTMLButtonElement>) => unknown;
+    actionOnClick?: (a: SyntheticEvent<HTMLButtonElement>) => unknown;
     focus?: boolean;
     message: React.ReactNode;
     overrides?: SnackbarElementOverrides;

package/spinner/styled-components.js

@@ -84,5 +84,4 @@ var StyledSpinner = (0, _styles.styled)('i', function (_ref) {
   };
 });
 exports.StyledSpinner = StyledSpinner;
-StyledSpinner.displayName = "StyledSpinner";
-StyledSpinner.displayName = 'StyledSpinner';
+StyledSpinner.displayName = "StyledSpinner";

package/spinner/types.d.ts

@@ -1,4 +1,4 @@
-import type { SIZE } from './constants';
+import { SIZE } from './constants';
 import type { Sizing } from '../themes/types';
 export declare type Size = keyof typeof SIZE;
 export declare type SpinnerProps = {

package/styles/__mocks__/styled.js

@@ -65,7 +65,6 @@ var IDENTITY = function IDENTITY(x) {
 };
 
 function useStyletron() {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   function css(styles) {
     return _objectSpread({
       label: 'useStyletron mock describes the applied css properties'
@@ -73,8 +72,7 @@ function useStyletron() {
   }
 
   return [css, MOCK_THEME];
-} // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
+}
 
 function styled(ElementName) {
   var objOrFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -103,7 +101,6 @@ 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);
@@ -172,10 +169,8 @@ function styled(ElementName) {
 var withStyle = styled;
 exports.withStyle = withStyle;
 
-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
+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/styles/styled.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { StyletronComponent } from 'styletron-react';
+import { StyletronComponent } from 'styletron-react';
 import type { StyleObject } from 'styletron-standard';
 import type { Theme } from './types';
 export type { StyletronComponent };