baseui 12.0.0 → 12.1.0

package/select/styled-components.js

@@ -29,6 +29,21 @@ 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;
 
@@ -69,6 +84,7 @@ 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;
@@ -86,6 +102,7 @@ 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;
@@ -97,6 +114,7 @@ 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) {
@@ -161,15 +179,12 @@ 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({
-    borderTopLeftRadius: borders.inputBorderRadius,
-    borderTopRightRadius: borders.inputBorderRadius,
-    borderBottomRightRadius: borders.inputBorderRadius,
-    borderBottomLeftRadius: borders.inputBorderRadius,
+  return _objectSpread(_objectSpread({}, getBorderRadius($size, borders)), {}, {
     boxSizing: 'border-box',
     overflow: 'hidden',
     width: '100%',
@@ -191,6 +206,7 @@ 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({
@@ -207,6 +223,7 @@ 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;
@@ -220,6 +237,7 @@ 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;
 
@@ -236,6 +254,7 @@ 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,
@@ -270,6 +289,7 @@ 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,
@@ -302,6 +322,7 @@ 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;
 
@@ -316,6 +337,7 @@ 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;
@@ -331,6 +353,7 @@ var StyledIconsContainer = (0, _styles.styled)('div', function (_ref2) {
 });
 exports.StyledIconsContainer = StyledIconsContainer;
 StyledIconsContainer.displayName = "StyledIconsContainer";
+StyledIconsContainer.displayName = 'StyledIconsContainer';
 
 function getSvgStyles(_ref4) {
   var $theme = _ref4.$theme;
@@ -368,6 +391,7 @@ 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;
 
@@ -392,6 +416,7 @@ 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 {
@@ -408,6 +433,7 @@ 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;
 
@@ -424,4 +450,5 @@ 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,7 +11,8 @@ import { TYPE, SIZE } from './constants.js';
 import { StyledList, StyledListItem } from '../menu/index.js';
 import { Spinner } from '../spinner/index.js';
 
-import type { SharedStylePropsArgT } from './types.js';
+import type { SizeT, SharedStylePropsArgT } from './types.js';
+import type { ThemeT } from '../styles/types.js';
 import { ellipsisText } from '../styles/util.js';
 
 function getFont(size = SIZE.default, typography) {
@@ -23,6 +24,27 @@ 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,
@@ -184,13 +206,11 @@ export const StyledControlContainer = styled<SharedStylePropsArgT>('div', (props
     $isPseudoFocused,
     $type,
     $searchable,
+    $size,
     $theme: { borders, colors, animation },
   } = props;
   return {
-    borderTopLeftRadius: borders.inputBorderRadius,
-    borderTopRightRadius: borders.inputBorderRadius,
-    borderBottomRightRadius: borders.inputBorderRadius,
-    borderBottomLeftRadius: borders.inputBorderRadius,
+    ...getBorderRadius($size, borders),
     boxSizing: 'border-box',
     overflow: 'hidden',
     width: '100%',

package/select/types.d.ts

@@ -1,8 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { Override } from '../helpers/overrides';
-import { STATE_CHANGE_TYPE, SIZE, TYPE } from './constants';
+import type { 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;
@@ -141,8 +140,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: SyntheticEvent<HTMLElement>) => unknown;
-    onInputChange?: (e: ChangeEvent<HTMLInputElement>) => unknown;
+    onFocus?: (e: React.SyntheticEvent<HTMLElement>) => unknown;
+    onInputChange?: (e: React.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. */
@@ -196,7 +195,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) => ReactNode;
+    children: (a: SelectProps) => React.ReactNode;
     initialState: State;
     stateReducer: StateReducer;
     onChange: (params: OnChangeParams) => unknown;

package/select/value.js

@@ -37,6 +37,7 @@ 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,
@@ -47,7 +48,5 @@ function Value(props) {
       SingleValue = _getOverrides2[0],
       singleValueProps = _getOverrides2[1];
 
-  return /*#__PURE__*/React.createElement(SingleValue, _extends({
-    "aria-selected": "true"
-  }, restProps, singleValueProps), props.children);
+  return /*#__PURE__*/React.createElement(SingleValue, _extends({}, restProps, singleValueProps), props.children);
 }

package/side-navigation/nav-item.js

@@ -109,6 +109,7 @@ 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, idx) {
+        }, sharedProps, subNavContainerProps), item.subNav.map(function (subitem) {
           return renderNavItem(subitem, level + 1, index);
         })) : null));
       };

package/side-navigation/stateful-container.js

@@ -102,6 +102,7 @@ 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,9 +46,11 @@ 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;
@@ -70,6 +72,7 @@ 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;
 
@@ -109,13 +112,16 @@ 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 function StyledNav(_ref3) {
-    var item = _ref3.item,
-        restProps = _objectWithoutProperties(_ref3, _excluded);
+  return (// eslint-disable-next-line @typescript-eslint/no-unused-vars
+    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', {
@@ -130,4 +136,5 @@ 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 * as React from 'react';
+import type * as React from 'react';
 import type { Override } from '../helpers/overrides';
 declare const stateChangeType: Readonly<{
     readonly change: "change";

package/skeleton/styled-components.js

@@ -53,6 +53,7 @@ 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)
@@ -65,4 +66,5 @@ 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,11 +104,13 @@ 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,6 +21,7 @@ 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,
@@ -51,6 +52,7 @@ 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,
@@ -83,6 +85,7 @@ 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 {
@@ -94,6 +97,7 @@ 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), {}, {
@@ -102,6 +106,7 @@ 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;
@@ -117,6 +122,7 @@ 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,
@@ -150,6 +156,7 @@ 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,
@@ -164,6 +171,7 @@ 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,
@@ -187,4 +195,5 @@ 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 { STATE_CHANGE_TYPE } from './constants';
+import type { 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,6 +36,7 @@ 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,6 +34,7 @@ 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',
@@ -41,6 +42,7 @@ 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';
@@ -51,6 +53,7 @@ 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;
@@ -62,6 +65,7 @@ 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;
@@ -81,12 +85,14 @@ 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';
@@ -94,6 +100,7 @@ var StyledActionButtonContainer = (0, _styles.styled)('div', function (_ref6) {
 });
 exports.StyledActionButtonContainer = StyledActionButtonContainer;
 StyledActionButtonContainer.displayName = "StyledActionButtonContainer";
+StyledActionButtonContainer.displayName = 'StyledActionButtonContainer';
 
 function placementRules(placement) {
   switch (placement) {
@@ -170,4 +177,5 @@ 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,7 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { Override } from '../helpers/overrides';
-import { DURATION, PLACEMENT } from './constants';
-import type { SyntheticEvent } from 'react';
+import type { DURATION, PLACEMENT } from './constants';
 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 = {
@@ -15,7 +14,7 @@ export declare type SnackbarElementOverrides = {
 };
 export declare type SnackbarElementProps = {
     actionMessage?: string;
-    actionOnClick?: (a: SyntheticEvent<HTMLButtonElement>) => unknown;
+    actionOnClick?: (a: React.SyntheticEvent<HTMLButtonElement>) => unknown;
     focus?: boolean;
     message: React.ReactNode;
     overrides?: SnackbarElementOverrides;

package/spinner/styled-components.js

@@ -84,4 +84,5 @@ 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 { SIZE } from './constants';
+import type { 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,6 +65,7 @@ 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'
@@ -72,7 +73,8 @@ 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] : {};
@@ -101,6 +103,7 @@ 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);
@@ -169,8 +172,10 @@ function styled(ElementName) {
 var withStyle = styled;
 exports.withStyle = withStyle;
 
-function withWrapper(StyledElement, wrapperFn) {
-  // eslint-disable-next-line react/display-name
+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
   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 { StyletronComponent } from 'styletron-react';
+import type { StyletronComponent } from 'styletron-react';
 import type { StyleObject } from 'styletron-standard';
 import type { Theme } from './types';
 export type { StyletronComponent };

package/styles/styled.js

@@ -56,14 +56,12 @@ var wrapper = function wrapper(StyledComponent) {
   });
 };
 
-/* eslint-enable flowtype/generic-spacing */
-
-/* flowlint unclear-type:error */
 function createThemedStyled() {
   return (0, _styletronReact.createStyled)({
     wrapper: wrapper,
     getInitialStyle: _styletronStandard.getInitialStyle,
-    driver: _styletronStandard.driver
+    driver: _styletronStandard.driver // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
   });
 }
 
@@ -71,6 +69,7 @@ var styled = createThemedStyled();
 exports.styled = styled;
 
 function createThemedWithStyle() {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return _styletronReact.withStyle;
 }
 
@@ -79,6 +78,7 @@ exports.withStyle = withStyle;
 
 function createThemedUseStyletron() {
   return function () {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     var theme = React.useContext(_themeProvider.ThemeContext);
 
     var _styletronUseStyletro = (0, _styletronReact.useStyletron)(),
@@ -89,12 +89,13 @@ function createThemedUseStyletron() {
   };
 }
 
-var useStyletron = createThemedUseStyletron();
+var useStyletron = createThemedUseStyletron(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
 exports.useStyletron = useStyletron;
 
 function withWrapper(StyledElement, wrapperFn) {
   return (0, _styletronReact.withWrapper)(StyledElement, function (Styled) {
-    // eslint-disable-next-line react/display-name
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any,react/display-name
     return /*#__PURE__*/React.forwardRef(function (props, ref) {
       return /*#__PURE__*/React.createElement(_themeProvider.ThemeContext.Consumer, null, function (theme) {
         return (// @ts-ignore