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

package/flex-grid/flex-grid-item.js

@@ -5,8 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.flexGridItemStyle = exports.flexGridItemMediaQueryStyle = exports.default = void 0;
-exports.getResponsiveValue = getResponsiveValue;
+exports.getResponsiveValue = exports.flexGridItemStyle = exports.flexGridItemMediaQueryStyle = exports.default = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
@@ -67,12 +66,14 @@ var flexGridItemMediaQueryStyle = function flexGridItemMediaQueryStyle(_ref) {
     // Subtract .5px to avoid rounding issues on IE/Edge
     // See https://github.com/uber/baseweb/pull/1748
     width: "calc(".concat(widthCalc, " - .5px)")
-  }, _defineProperty(_objectSpread2, marginDirection, colGapQuantity && ((itemIndex + 1) % colCount !== 0 ? colGap : 0)), _defineProperty(_objectSpread2, "marginBottom", rowGapQuantity && (~~(itemIndex / colCount) !== ~~((itemCount - 1) / colCount) ? rowGap : 0)), _objectSpread2), itemIndex === itemCount - 1 && (itemIndex + 1) % colCount !== 0 ? _defineProperty({}, marginDirection, "calc(".concat(colCount - itemIndex % colCount - 1, " * (").concat(colGap, " + ").concat(widthCalc, "))")) : {}));
+  }, _defineProperty(_objectSpread2, marginDirection, colGapQuantity && ( //flowlint-line sketchy-number-and:off
+  (itemIndex + 1) % colCount !== 0 ? colGap : 0)), _defineProperty(_objectSpread2, "marginBottom", rowGapQuantity && ( //flowlint-line sketchy-number-and:off
+  ~~(itemIndex / colCount) !== ~~((itemCount - 1) / colCount) ? rowGap : 0)), _objectSpread2), itemIndex === itemCount - 1 && (itemIndex + 1) % colCount !== 0 ? _defineProperty({}, marginDirection, "calc(".concat(colCount - itemIndex % colCount - 1, " * (").concat(colGap, " + ").concat(widthCalc, "))")) : {}));
 };
 
 exports.flexGridItemMediaQueryStyle = flexGridItemMediaQueryStyle;
 
-function getResponsiveValue(responsive, i) {
+var getResponsiveValue = function getResponsiveValue(responsive, i) {
   if (!responsive) {
     return null;
   }
@@ -82,7 +83,9 @@ function getResponsiveValue(responsive, i) {
   }
 
   return responsive[i] || responsive[responsive.length - 1];
-}
+};
+
+exports.getResponsiveValue = getResponsiveValue;
 
 var flexGridItemStyle = function flexGridItemStyle(_ref3) {
   var $flexGridColumnCount = _ref3.$flexGridColumnCount,
@@ -161,7 +164,6 @@ var FlexGridItem = function FlexGridItem(_ref4) {
   var blockOverrides = overrides ? (0, _overrides.mergeOverrides)(flexGridItemOverrides, overrides) : flexGridItemOverrides;
   return /*#__PURE__*/React.createElement(_block.Block // coerced to any because of how react components are typed.
   // cannot guarantee an html element
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   , _extends({
     ref: forwardedRef,
     as: as,

package/flex-grid/flex-grid.js

@@ -90,13 +90,9 @@ var FlexGrid = function FlexGrid(_ref2) {
 };
 
 var FlexGridComponent = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    React.createElement(FlexGrid, _extends({}, props, {
-      forwardedRef: ref
-    }))
-  );
+  return /*#__PURE__*/React.createElement(FlexGrid, _extends({}, props, {
+    forwardedRef: ref
+  }));
 });
 FlexGridComponent.displayName = 'FlexGrid';
 var _default = FlexGridComponent;

package/flex-grid/types.d.ts

@@ -1,5 +1,5 @@
 import type { BlockProps, Responsive, Scale } from '../block';
-import type { ElementType } from 'react';
+import { ElementType } from 'react';
 export declare type FlexGridProps<T extends ElementType = ElementType> = {
     /** Number of equal-width columns to allow for */
     flexGridColumnCount?: Responsive<number>;

package/form-control/styled-components.js

@@ -30,7 +30,6 @@ var Label = (0, _styles.styled)('label', function (props) {
 });
 exports.Label = Label;
 Label.displayName = "Label";
-Label.displayName = 'Label';
 var LabelContainer = (0, _styles.styled)('span', function (_ref) {
   var sizing = _ref.$theme.sizing;
   return {
@@ -44,7 +43,6 @@ var LabelContainer = (0, _styles.styled)('span', function (_ref) {
 });
 exports.LabelContainer = LabelContainer;
 LabelContainer.displayName = "LabelContainer";
-LabelContainer.displayName = 'LabelContainer';
 var LabelEndEnhancer = (0, _styles.styled)('span', function (_ref2) {
   var $disabled = _ref2.$disabled,
       $counterError = _ref2.$counterError,
@@ -59,7 +57,6 @@ var LabelEndEnhancer = (0, _styles.styled)('span', function (_ref2) {
 });
 exports.LabelEndEnhancer = LabelEndEnhancer;
 LabelEndEnhancer.displayName = "LabelEndEnhancer";
-LabelEndEnhancer.displayName = 'LabelEndEnhancer';
 var Caption = (0, _styles.styled)('div', function (props) {
   var $error = props.$error,
       $positive = props.$positive,
@@ -89,7 +86,6 @@ var Caption = (0, _styles.styled)('div', function (props) {
 });
 exports.Caption = Caption;
 Caption.displayName = "Caption";
-Caption.displayName = 'Caption';
 var ControlContainer = (0, _styles.styled)('div', function (props) {
   var sizing = props.$theme.sizing;
   return {
@@ -98,5 +94,4 @@ var ControlContainer = (0, _styles.styled)('div', function (props) {
   };
 });
 exports.ControlContainer = ControlContainer;
-ControlContainer.displayName = "ControlContainer";
-ControlContainer.displayName = 'ControlContainer';
+ControlContainer.displayName = "ControlContainer";

package/form-control/types.d.ts

@@ -1,4 +1,4 @@
-import type * as React from 'react';
+import * as React from 'react';
 import type { Override } from '../helpers/overrides';
 export declare type FormControlState = {
     captionId: string;

package/header-navigation/styled-components.js

@@ -32,7 +32,6 @@ var Root = (0, _styles.styled)('nav', function (props) {
 });
 exports.Root = Root;
 Root.displayName = "Root";
-Root.displayName = 'Root';
 var NavigationItem = (0, _styles.styled)('li', function (props) {
   var $theme = props.$theme;
   var scale800 = $theme.sizing.scale800;
@@ -43,7 +42,6 @@ var NavigationItem = (0, _styles.styled)('li', function (props) {
 });
 exports.NavigationItem = NavigationItem;
 NavigationItem.displayName = "NavigationItem";
-NavigationItem.displayName = 'NavigationItem';
 var NavigationList = (0, _styles.styled)('ul', function (props) {
   var $align = props.$align,
       $theme = props.$theme;
@@ -72,5 +70,4 @@ var NavigationList = (0, _styles.styled)('ul', function (props) {
   };
 });
 exports.NavigationList = NavigationList;
-NavigationList.displayName = "NavigationList";
-NavigationList.displayName = 'NavigationList';
+NavigationList.displayName = "NavigationList";

package/heading/types.d.ts

@@ -1,4 +1,4 @@
-import type * as React from 'react';
+import * as React from 'react';
 import type { BlockProps } from '../block';
 export declare type HeadingProps = {
     /** Set and fix the style level independently on the hierarchy context. */

package/helper/styled-components.js

@@ -202,10 +202,8 @@ var StyledBody = (0, _styles.styled)('div', function (props) {
 });
 exports.StyledBody = StyledBody;
 StyledBody.displayName = "StyledBody";
-StyledBody.displayName = 'StyledBody';
 var StyledArrow = (0, _styles.styled)('div', function (props) {
   return _objectSpread({}, clampArrowStyle(props.$arrowOffset, props.$placement, props.$theme.colors.backgroundPrimary));
 });
 exports.StyledArrow = StyledArrow;
-StyledArrow.displayName = "StyledArrow";
-StyledArrow.displayName = 'StyledArrow';
+StyledArrow.displayName = "StyledArrow";

package/helpers/overrides.js

@@ -37,7 +37,6 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 /**
  * Given an override argument, returns the component implementation override if it exists
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function getOverride(_override) {
   if ((0, _reactIs.isValidElementType)(_override)) {
     return _override;
@@ -47,7 +46,6 @@ function getOverride(_override) {
   if (_override && _typeof(_override) === 'object') {
     // Remove this 'any' once this flow issue is fixed:
     // https://github.com/facebook/flow/issues/6666
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     return _override.component;
   } // null/undefined
 
@@ -87,13 +85,11 @@ function getOverrideProps(_override) {
 function toObjectOverride(_override) {
   if ((0, _reactIs.isValidElementType)(_override)) {
     return {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       component: _override
     };
   } // Flow can't figure out that typeof 'function' above will
   // catch React.StatelessFunctionalComponent
   // (probably related to https://github.com/facebook/flow/issues/6666)
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
 
   return _override || {};
@@ -101,12 +97,9 @@ function toObjectOverride(_override) {
 /**
  * Get a convenient override array that will always have [component, props]
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 
 
-function getOverrides( // eslint-disable-next-line @typescript-eslint/no-explicit-any
-_override, // eslint-disable-next-line @typescript-eslint/no-explicit-any
-defaultComponent) {
+function getOverrides(_override, defaultComponent) {
   var Component = getOverride(_override) || defaultComponent;
 
   if (_override && _typeof(_override) === 'object' && typeof _override.props === 'function') {
@@ -133,6 +126,8 @@ defaultComponent) {
   var props = getOverrideProps(_override);
   return [Component, props];
 }
+/* flowlint unclear-type:error */
+
 /**
  * Merges two overrides objects – this is useful if you want to inject your own
  * overrides into a child component, but also accept further overrides from

package/helpers/overrides.js.flow

@@ -5,7 +5,7 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-
+/* eslint-disable cup/no-undef */
 import * as React from 'react';
 import { isValidElementType } from 'react-is';
 import deepMerge from '../utils/deep-merge.js';

package/helpers/types.d.ts

@@ -1,4 +1,4 @@
-import type * as React from 'react';
+import * as React from 'react';
 import type { Theme } from '../styles/types';
 import type { Override } from '../helpers/overrides';
 export declare type BaseProviderOverrides = {

package/icon/build-icons.js

@@ -7,6 +7,8 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 
+/* eslint-disable flowtype/require-valid-file-annotation */
+
 /* eslint-env node*/
 "use strict";
 

package/icon/build-icons.js.flow

@@ -7,6 +7,7 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 
+/* eslint-disable flowtype/require-valid-file-annotation */
 /* eslint-env node*/
 const fs = require('fs');
 const path = require('path');

package/icon/index.d.ts

@@ -1,6 +1,6 @@
 import type { StyledComponentArgs } from './types';
 export { default as Icon } from './icon';
-export { Svg as StyledSvg, getSvgStyles } from './styled-components';
+export { Svg as StyledSvg } from './styled-components';
 export * from './icon-exports';
 export * from './types';
 /** @deprecated use StyledComponentArgs instead. To be removed in future versions.*/

package/icon/index.js

@@ -5,8 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {
   Icon: true,
-  StyledSvg: true,
-  getSvgStyles: true
+  StyledSvg: true
 };
 Object.defineProperty(exports, "Icon", {
   enumerable: true,
@@ -20,12 +19,6 @@ Object.defineProperty(exports, "StyledSvg", {
     return _styledComponents.Svg;
   }
 });
-Object.defineProperty(exports, "getSvgStyles", {
-  enumerable: true,
-  get: function get() {
-    return _styledComponents.getSvgStyles;
-  }
-});
 
 var _icon = _interopRequireDefault(require("./icon"));
 

package/icon/index.js.flow

@@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 export { default as Icon } from './icon.js';
-export { Svg as StyledSvg, getSvgStyles } from './styled-components.js';
+export { Svg as StyledSvg } from './styled-components.js';
 export * from './icon-exports.js';
 export type * from './types.js';
 

package/icon/omit-dollar-prefixed-keys.js

@@ -11,7 +11,6 @@ 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-next-line @typescript-eslint/no-explicit-any
 function omitDollarPrefixedKeys(source) {
   var result = {};
 

package/icon/styled-components.js

@@ -51,5 +51,4 @@ function getSvgStyles(_ref) {
 
 var Svg = (0, _styles.styled)('svg', getSvgStyles);
 exports.Svg = Svg;
-Svg.displayName = "Svg";
-Svg.displayName = 'Svg';
+Svg.displayName = "Svg";

package/icon/types.d.ts

@@ -1,4 +1,4 @@
-import type * as React from 'react';
+import * as React from 'react';
 import type { Override } from '../helpers/overrides';
 export declare type IconOverrides = {
     Svg?: Override;

package/input/base-input.js

@@ -113,19 +113,23 @@ var BaseInput = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "onFocus", function (e) {
-      _this.setState({
-        isFocused: true
-      });
+      if (!_this.props.readOnly) {
+        _this.setState({
+          isFocused: true
+        });
 
-      _this.props.onFocus(e);
+        _this.props.onFocus(e);
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "onBlur", function (e) {
-      _this.setState({
-        isFocused: false
-      });
+      if (!_this.props.readOnly) {
+        _this.setState({
+          isFocused: false
+        });
 
-      _this.props.onBlur(e);
+        _this.props.onBlur(e);
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleFocusForMaskToggle", function (event) {

package/input/base-input.js.flow

@@ -137,13 +137,17 @@ class BaseInput<T: HTMLInputElement | HTMLTextAreaElement> extends React.Compone
   };
 
   onFocus = (e: SyntheticFocusEvent<T>) => {
-    this.setState({ isFocused: true });
-    this.props.onFocus(e);
+    if (!this.props.readOnly) {
+      this.setState({ isFocused: true });
+      this.props.onFocus(e);
+    }
   };
 
   onBlur = (e: SyntheticFocusEvent<T>) => {
-    this.setState({ isFocused: false });
-    this.props.onBlur(e);
+    if (!this.props.readOnly) {
+      this.setState({ isFocused: false });
+      this.props.onBlur(e);
+    }
   };
 
   getInputType() {

package/input/input.js

@@ -93,23 +93,27 @@ var Input = /*#__PURE__*/function (_React$Component) {
     _this = _super.call.apply(_super, [this].concat(args));
 
     _defineProperty(_assertThisInitialized(_this), "state", {
-      isFocused: _this.props.autoFocus || false
+      isFocused: _this.props.autoFocus && !_this.props.readOnly || false
     });
 
     _defineProperty(_assertThisInitialized(_this), "onFocus", function (e) {
-      _this.setState({
-        isFocused: true
-      });
+      if (!_this.props.readOnly) {
+        _this.setState({
+          isFocused: true
+        });
 
-      _this.props.onFocus(e);
+        _this.props.onFocus(e);
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "onBlur", function (e) {
-      _this.setState({
-        isFocused: false
-      });
+      if (!_this.props.readOnly) {
+        _this.setState({
+          isFocused: false
+        });
 
-      _this.props.onBlur(e);
+        _this.props.onBlur(e);
+      }
     });
 
     return _this;

package/input/input.js.flow

@@ -36,17 +36,21 @@ class Input extends React.Component<InputPropsT, InternalStateT> {
    * customers shouldn't have to manage themselves, such as input's focus state.
    */
   state = {
-    isFocused: this.props.autoFocus || false,
+    isFocused: (this.props.autoFocus && !this.props.readOnly) || false,
   };
 
   onFocus = (e: SyntheticFocusEvent<HTMLInputElement>) => {
-    this.setState({ isFocused: true });
-    this.props.onFocus(e);
+    if (!this.props.readOnly) {
+      this.setState({ isFocused: true });
+      this.props.onFocus(e);
+    }
   };
 
   onBlur = (e: SyntheticFocusEvent<HTMLInputElement>) => {
-    this.setState({ isFocused: false });
-    this.props.onBlur(e);
+    if (!this.props.readOnly) {
+      this.setState({ isFocused: false });
+      this.props.onBlur(e);
+    }
   };
 
   render() {

package/input/masked-input.js

@@ -82,11 +82,8 @@ function MaskedInput(_ref2) {
       restOverrides = _objectWithoutProperties(_ref2$overrides, _excluded2),
       restProps = _objectWithoutProperties(_ref2, _excluded3);
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  var componentOverride = MaskOverride; // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
-  var propsOverride = {}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
+  var componentOverride = MaskOverride;
+  var propsOverride = {};
   var styleOverride = {};
 
   if (typeof inputOverride === 'function') {

package/input/stateful-container.js

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

package/input/styled-components.js

@@ -42,7 +42,6 @@ var StyledMaskToggleButton = (0, _styles.styled)('button', function (_ref) {
 });
 exports.StyledMaskToggleButton = StyledMaskToggleButton;
 StyledMaskToggleButton.displayName = "StyledMaskToggleButton";
-StyledMaskToggleButton.displayName = 'StyledMaskToggleButton';
 var StyledClearIconContainer = (0, _styles.styled)('div', function (_ref2) {
   var _SIZE$mini$SIZE$compa2;
 
@@ -62,7 +61,6 @@ var StyledClearIconContainer = (0, _styles.styled)('div', function (_ref2) {
 });
 exports.StyledClearIconContainer = StyledClearIconContainer;
 StyledClearIconContainer.displayName = "StyledClearIconContainer";
-StyledClearIconContainer.displayName = 'StyledClearIconContainer';
 var StyledClearIcon = (0, _styles.styled)(_deleteAlt.default, function (_ref3) {
   var $theme = _ref3.$theme,
       $isFocusVisible = _ref3.$isFocusVisible;
@@ -73,7 +71,6 @@ var StyledClearIcon = (0, _styles.styled)(_deleteAlt.default, function (_ref3) {
 });
 exports.StyledClearIcon = StyledClearIcon;
 StyledClearIcon.displayName = "StyledClearIcon";
-StyledClearIcon.displayName = 'StyledClearIcon';
 
 function getInputPadding(size, sizing) {
   var _SIZE$mini$SIZE$compa3;
@@ -169,13 +166,7 @@ function getRootColors($disabled, $isFocused, $error) {
   };
 }
 
-function getRootBorderRadius(size, borders) {
-  var radius = borders.inputBorderRadius;
-
-  if (size === _constants.SIZE.mini) {
-    radius = borders.inputBorderRadiusMini;
-  }
-
+function getRootBorderRadius(radius) {
   return {
     borderTopLeftRadius: radius,
     borderBottomLeftRadius: radius,
@@ -215,14 +206,14 @@ var getRootStyles = function getRootStyles(props) {
     transitionProperty: 'border',
     transitionDuration: animation.timing200,
     transitionTimingFunction: animation.easeOutCurve
-  }, getRootBorderRadius($size, borders)), getFont($size, typography)), getRootColors($disabled, $isFocused, $error, $positive, colors)), getRootPadding($adjoined, $size, sizing, $theme.direction, $hasIconTrailing));
+  }, getRootBorderRadius(borders.inputBorderRadius)), getFont($size, typography)), getRootColors($disabled, $isFocused, $error, $positive, colors)), getRootPadding($adjoined, $size, sizing, $theme.direction, $hasIconTrailing));
 };
 
 exports.getRootStyles = getRootStyles;
-var Root = (0, _styles.styled)('div', getRootStyles);
+var Root = (0, _styles.styled)('div', getRootStyles); // InputEnhancer
+
 exports.Root = Root;
 Root.displayName = "Root";
-Root.displayName = 'Root'; // InputEnhancer
 
 function getInputEnhancerPadding($size, sizing) {
   var _SIZE$mini$SIZE$compa5;
@@ -296,10 +287,10 @@ var InputEnhancer = (0, _styles.styled)('div', function (props) {
     transitionDuration: animation.timing200,
     transitionTimingFunction: animation.easeOutCurve
   }, getFont($size, typography)), getInputEnhancerPadding($size, sizing)), getInputEnhancerColors($disabled, $isFocused, $error, $positive, colors));
-});
+}); // InputContainer
+
 exports.InputEnhancer = InputEnhancer;
 InputEnhancer.displayName = "InputEnhancer";
-InputEnhancer.displayName = 'InputEnhancer'; // InputContainer
 
 function getInputContainerColors($disabled, $isFocused, $error, $positive, colors) {
   if ($disabled) {
@@ -359,7 +350,6 @@ exports.getInputContainerStyles = getInputContainerStyles;
 var InputContainer = (0, _styles.styled)('div', getInputContainerStyles);
 exports.InputContainer = InputContainer;
 InputContainer.displayName = "InputContainer";
-InputContainer.displayName = 'InputContainer';
 
 function getInputColors($disabled, $isFocused, $error, colors) {
   if ($disabled) {
@@ -419,5 +409,4 @@ var getInputStyles = function getInputStyles(props) {
 exports.getInputStyles = getInputStyles;
 var Input = (0, _styles.styled)('input', getInputStyles);
 exports.Input = Input;
-Input.displayName = "Input";
-Input.displayName = 'Input';
+Input.displayName = "Input";

package/input/styled-components.js.flow

@@ -201,19 +201,12 @@ function getRootColors(
   };
 }
 
-function getRootBorderRadius(
-  size,
-  borders
-): {|
+function getRootBorderRadius(radius): {|
   borderTopLeftRadius: string,
   borderBottomLeftRadius: string,
   borderTopRightRadius: string,
   borderBottomRightRadius: string,
 |} {
-  let radius = borders.inputBorderRadius;
-  if (size === SIZE.mini) {
-    radius = borders.inputBorderRadiusMini;
-  }
   return {
     borderTopLeftRadius: radius,
     borderBottomLeftRadius: radius,
@@ -259,7 +252,7 @@ export const getRootStyles = (props: {
     transitionProperty: 'border',
     transitionDuration: animation.timing200,
     transitionTimingFunction: animation.easeOutCurve,
-    ...getRootBorderRadius($size, borders),
+    ...getRootBorderRadius(borders.inputBorderRadius),
     ...getFont($size, typography),
     ...getRootColors($disabled, $isFocused, $error, $positive, colors),
     ...getRootPadding($adjoined, $size, sizing, $theme.direction, $hasIconTrailing),

package/input/types.d.ts

@@ -1,7 +1,7 @@
-import type * as React from 'react';
-import type { Properties } from 'csstype';
+import * as React from 'react';
 import type { Override } from '../helpers/overrides';
-import type { STATE_CHANGE_TYPE, ADJOINED, SIZE, ENHANCER_POSITION } from './constants';
+import { STATE_CHANGE_TYPE, ADJOINED, SIZE, ENHANCER_POSITION } from './constants';
+import type { SyntheticEvent, ChangeEvent, FocusEvent, KeyboardEvent } from 'react';
 export declare type Adjoined = keyof typeof ADJOINED;
 export declare type Size = keyof typeof SIZE;
 export declare type StateType = keyof typeof STATE_CHANGE_TYPE;
@@ -36,7 +36,6 @@ export declare type SharedProps = {
     $size: Size;
     /** Renders UI in 'required' state */
     $required?: boolean;
-    $resize?: Properties['resize'];
     $position?: keyof typeof ENHANCER_POSITION;
     /** Defines if has a clearable or MaskToggleButton at the end */
     $hasIconTrailing?: boolean;
@@ -93,23 +92,22 @@ export declare type BaseInputProps<T> = {
     /** A ref to access an input element. */
     inputRef?: React.RefObject<T>;
     name?: string;
-    onBlur?: (e: React.FocusEvent<T>) => void;
-    onChange?: (e: React.ChangeEvent<T>) => void;
-    onKeyDown?: (e: React.KeyboardEvent<T>) => void;
-    onKeyPress?: (e: React.KeyboardEvent<T>) => void;
-    onKeyUp?: (e: React.KeyboardEvent<T>) => void;
-    onFocus?: (e: React.FocusEvent<T>) => void;
+    onBlur?: (e: FocusEvent<T>) => void;
+    onChange?: (e: ChangeEvent<T>) => void;
+    onKeyDown?: (e: KeyboardEvent<T>) => void;
+    onKeyPress?: (e: KeyboardEvent<T>) => void;
+    onKeyUp?: (e: KeyboardEvent<T>) => void;
+    onFocus?: (e: FocusEvent<T>) => void;
     /** If true, adds a clear value icon button to the end of the input container. */
     clearable?: boolean;
     /** If undefined or true, clears the input when the Escape button is pressed with the input focused. True by default. */
     clearOnEscape?: boolean;
     maxLength?: number;
-    onClear?: (e: React.SyntheticEvent<T>) => void;
+    onClear?: (e: SyntheticEvent<T>) => void;
     overrides?: BaseInputOverrides;
     placeholder?: string;
     /** Renders component in 'required' state. */
     required?: boolean;
-    resize?: Properties['resize'];
     /** Input role attribute. */
     role?: string;
     /** Renders component in provided size. */
@@ -135,9 +133,9 @@ export declare type InputProps = {
     /** An input helper rendered after and attached to the input field. */
     endEnhancer?: React.ReactNode | ((props: SharedProps) => React.ReactNode);
     /** Handler for the `focus` event. */
-    onFocus?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onFocus?: (e: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     /** Handler for the `blur` event. */
-    onBlur?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onBlur?: (e: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
 } & BaseInputProps<HTMLInputElement | HTMLTextAreaElement>;
 export declare type MaskedInputProps = Partial<{
     /** See mask examples here: https://github.com/sanniassin/react-input-mask */
@@ -146,7 +144,7 @@ export declare type MaskedInputProps = Partial<{
     maskChar?: string;
 } & InputProps>;
 export declare type StatefulContainerChildrenProps<T> = {
-    onChange: (e: React.ChangeEvent<T>) => void;
+    onChange: (e: ChangeEvent<T>) => void;
     /** If true, adds a clear value icon button to the end of the input container. */
     clearable?: boolean;
 } & StatefulInputProps;
@@ -156,7 +154,7 @@ export declare type StatefulContainerProps<T> = {
     initialState?: State;
     /** A state change handler. Used to override default state transitions. */
     stateReducer?: StateReducer;
-    onChange?: (e: React.ChangeEvent<T>) => void;
+    onChange?: (e: ChangeEvent<T>) => void;
     /** If true, adds a clear value icon button to the end of the input container. */
     clearable?: boolean;
 } & {