baseui 12.0.0 → 12.1.0

package/banner/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 { ACTION_POSITION, ARTWORK_TYPE, HIERARCHY, KIND } from './constants';
-import type { SyntheticEvent } from 'react';
+import type { ACTION_POSITION, ARTWORK_TYPE, HIERARCHY, KIND } from './constants';
 export declare type ActionPosition = typeof ACTION_POSITION[keyof typeof ACTION_POSITION];
 export declare type ArtworkType = typeof ARTWORK_TYPE[keyof typeof ARTWORK_TYPE];
 export declare type Hierarchy = typeof HIERARCHY[keyof typeof HIERARCHY];
@@ -11,7 +10,7 @@ export declare type ActionContent = {
     icon?: (a: {
         size: string;
     }) => React.ReactNode;
-    onClick: (a: SyntheticEvent<HTMLButtonElement>) => unknown;
+    onClick: (a: React.SyntheticEvent<HTMLButtonElement>) => unknown;
     position?: ActionPosition;
 };
 export declare type ArtworkContent = {
@@ -20,23 +19,24 @@ export declare type ArtworkContent = {
     }) => React.ReactNode;
     type?: ArtworkType;
 };
+export declare type BannerOverrides = {
+    BelowContent?: Override;
+    LeadingContent?: Override;
+    Message?: Override;
+    MessageContent?: Override;
+    Root?: Override;
+    Title?: Override;
+    TrailingContent?: Override;
+    TrailingButtonContainer?: Override;
+    TrailingIconButton?: Override;
+};
 export declare type BannerProps = {
     action?: ActionContent;
     artwork?: ArtworkContent;
     children: React.ReactNode;
     hierarchy?: Hierarchy;
     kind?: Kind;
-    overrides?: {
-        BelowContent?: Override;
-        LeadingContent?: Override;
-        Message?: Override;
-        MessageContent?: Override;
-        Root?: Override;
-        Title?: Override;
-        TrailingContent?: Override;
-        TrailingButtonContainer?: Override;
-        TrailingIconButton?: Override;
-    };
+    overrides?: BannerOverrides;
     nested?: boolean;
     title?: React.ReactNode;
 };

package/banner/types.js.flow

@@ -33,6 +33,18 @@ export type ArtworkContentT = {|
   type?: ArtworkTypeT,
 |};
 
+export type OverridesT = {|
+  BelowContent?: OverrideT,
+  LeadingContent?: OverrideT,
+  Message?: OverrideT,
+  MessageContent?: OverrideT,
+  Root?: OverrideT,
+  Title?: OverrideT,
+  TrailingContent?: OverrideT,
+  TrailingButtonContainer?: OverrideT,
+  TrailingIconButton?: OverrideT,
+|};
+
 export type PropsT = {|
   // Provide a method to "accept", "dismiss", or otherwise interact with the message shown.
   action?: ActionContentT,
@@ -44,17 +56,7 @@ export type PropsT = {|
   hierarchy?: HierarchyT,
   // Determines color scheme and conveys message intent.
   kind?: KindT,
-  overrides?: {|
-    BelowContent?: OverrideT,
-    LeadingContent?: OverrideT,
-    Message?: OverrideT,
-    MessageContent?: OverrideT,
-    Root?: OverrideT,
-    Title?: OverrideT,
-    TrailingContent?: OverrideT,
-    TrailingButtonContainer?: OverrideT,
-    TrailingIconButton?: OverrideT,
-  |},
+  overrides?: OverridesT,
   // Used to make the banner visually distinct from its container element.
   nested?: boolean,
   // Bold text displayed when message content should be separated to two lines.

package/block/block.js

@@ -118,6 +118,7 @@ var Block = function Block(_ref) {
 
   return /*#__PURE__*/React.createElement(BaseBlock // coerced to any because 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,
@@ -188,7 +189,8 @@ var Block = function Block(_ref) {
     $whiteSpace: whiteSpace,
     "data-baseweb": "block"
   }, restProps, baseBlockProps), children);
-};
+}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
 
 var BlockComponent = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(Block, _extends({}, props, {

package/block/styled-components.js

@@ -435,4 +435,5 @@ var StyledBlock = (0, _styles.styled)('div', function (props) {
   return styles.value();
 });
 exports.StyledBlock = StyledBlock;
-StyledBlock.displayName = "StyledBlock";
+StyledBlock.displayName = "StyledBlock";
+StyledBlock.displayName = 'StyledBlock';

package/block/types.d.ts

@@ -1,7 +1,6 @@
-import type { ElementType, ReactNode } from 'react';
+import type * as React from 'react';
 import type { StyleObject } from 'styletron-standard';
 import type { Override } from '../helpers/overrides';
-import * as React from 'react';
 export declare type BlockOverrides = {
     Block?: Override;
 };
@@ -20,8 +19,8 @@ declare type Position = 'static' | 'absolute' | 'relative' | 'fixed' | 'sticky';
 declare type Overflow = 'visible' | 'hidden' | 'scroll' | 'scrollX' | 'scrollY' | 'auto' | 'inherit' | 'initial' | 'unset';
 export declare type Scale = 0 | string;
 export declare type WhiteSpace = 'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line' | 'break-spaces' | 'inherit' | 'initial' | 'unset';
-export declare type BlockProps<T extends ElementType = ElementType> = {
-    children?: ReactNode;
+export declare type BlockProps<T extends React.ElementType = React.ElementType> = {
+    children?: React.ReactNode;
     /** Modifies the base element used to render the block. */
     as?: T;
     overrides?: BlockOverrides;

package/breadcrumbs/styled-components.js

@@ -21,6 +21,7 @@ var StyledRoot = (0, _styles.styled)('nav', function (_ref) {
 });
 exports.StyledRoot = StyledRoot;
 StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
 var StyledList = (0, _styles.styled)('ol', function (_ref2) {
   var $theme = _ref2.$theme;
   return _objectSpread({
@@ -31,6 +32,7 @@ var StyledList = (0, _styles.styled)('ol', function (_ref2) {
 });
 exports.StyledList = StyledList;
 StyledList.displayName = "StyledList";
+StyledList.displayName = 'StyledList';
 var StyledListItem = (0, _styles.styled)('li', function (_ref3) {
   var $theme = _ref3.$theme;
   return _objectSpread({
@@ -39,6 +41,7 @@ var StyledListItem = (0, _styles.styled)('li', function (_ref3) {
 });
 exports.StyledListItem = StyledListItem;
 StyledListItem.displayName = "StyledListItem";
+StyledListItem.displayName = 'StyledListItem';
 var StyledSeparator = (0, _styles.styled)('div', function (_ref4) {
   var $theme = _ref4.$theme;
   return {
@@ -50,4 +53,5 @@ var StyledSeparator = (0, _styles.styled)('div', function (_ref4) {
   };
 });
 exports.StyledSeparator = StyledSeparator;
-StyledSeparator.displayName = "StyledSeparator";
+StyledSeparator.displayName = "StyledSeparator";
+StyledSeparator.displayName = 'StyledSeparator';

package/button/styled-components.js

@@ -84,6 +84,7 @@ var BaseButton = (0, _styles.styled)('button', function (_ref) {
 });
 exports.BaseButton = BaseButton;
 BaseButton.displayName = "BaseButton";
+BaseButton.displayName = 'BaseButton';
 var EndEnhancer = (0, _styles.styled)('div', function (_ref2) {
   var $theme = _ref2.$theme;
   var marginDirection = $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
@@ -93,6 +94,7 @@ var EndEnhancer = (0, _styles.styled)('div', function (_ref2) {
 });
 exports.EndEnhancer = EndEnhancer;
 EndEnhancer.displayName = "EndEnhancer";
+EndEnhancer.displayName = 'EndEnhancer';
 var StartEnhancer = (0, _styles.styled)('div', function (_ref4) {
   var $theme = _ref4.$theme;
   var marginDirection = $theme.direction === 'rtl' ? 'marginLeft' : 'marginRight';
@@ -102,6 +104,7 @@ var StartEnhancer = (0, _styles.styled)('div', function (_ref4) {
 });
 exports.StartEnhancer = StartEnhancer;
 StartEnhancer.displayName = "StartEnhancer";
+StartEnhancer.displayName = 'StartEnhancer';
 var LoadingSpinnerContainer = (0, _styles.styled)('div', function (_ref6) {
   var $theme = _ref6.$theme,
       $size = _ref6.$size;
@@ -125,6 +128,7 @@ var LoadingSpinnerContainer = (0, _styles.styled)('div', function (_ref6) {
 });
 exports.LoadingSpinnerContainer = LoadingSpinnerContainer;
 LoadingSpinnerContainer.displayName = "LoadingSpinnerContainer";
+LoadingSpinnerContainer.displayName = 'LoadingSpinnerContainer';
 var LoadingSpinner = (0, _styles.styled)('span', function (_ref7) {
   var $theme = _ref7.$theme,
       $kind = _ref7.$kind,
@@ -185,6 +189,7 @@ var LoadingSpinner = (0, _styles.styled)('span', function (_ref7) {
 });
 exports.LoadingSpinner = LoadingSpinner;
 LoadingSpinner.displayName = "LoadingSpinner";
+LoadingSpinner.displayName = 'LoadingSpinner';
 
 function getLoadingSpinnerColors(_ref8) {
   var $theme = _ref8.$theme,
@@ -242,6 +247,8 @@ function getBorderRadiiStyles(_ref9) {
     }
   } else if ($shape === _constants.SHAPE.circle || $shape === _constants.SHAPE.round) {
     value = '50%';
+  } else if ($size === _constants.SIZE.mini) {
+    value = $theme.borders.buttonBorderRadiusMini;
   }
 
   return {

package/button/styled-components.js.flow

@@ -198,6 +198,8 @@ function getBorderRadiiStyles({ $theme, $size, $shape }) {
     }
   } else if ($shape === SHAPE.circle || $shape === SHAPE.round) {
     value = '50%';
+  } else if ($size === SIZE.mini) {
+    value = $theme.borders.buttonBorderRadiusMini;
   }
 
   return {

package/button/types.d.ts

@@ -1,7 +1,6 @@
-import * as React from 'react';
-import { KIND, SIZE, SHAPE } from './constants';
+import type * as React from 'react';
+import type { KIND, SIZE, SHAPE } from './constants';
 import type { Override } from '../helpers/overrides';
-import type { ReactNode, SyntheticEvent } from 'react';
 export declare type ButtonOverrides = {
     Root?: Override;
     BaseButton?: Override;
@@ -15,7 +14,7 @@ export declare type CustomColors = {
     color: string;
 };
 export declare type ButtonProps = {
-    children?: ReactNode;
+    children?: React.ReactNode;
     colors?: CustomColors;
     disabled?: boolean;
     /** A helper rendered at the end of the button. */
@@ -26,7 +25,7 @@ export declare type ButtonProps = {
     isSelected?: boolean;
     /** Defines the kind (purpose) of a button */
     kind?: keyof typeof KIND;
-    onClick?: (a: SyntheticEvent<HTMLButtonElement>) => unknown;
+    onClick?: (a: React.SyntheticEvent<HTMLButtonElement>) => unknown;
     overrides?: ButtonOverrides;
     /** Defines the shape of the button */
     shape?: keyof typeof SHAPE;

package/button-group/stateful-button-group.js

@@ -28,6 +28,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; }
 
 function StatefulButtonGroup(props) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   var children = props.children,
       initialState = props.initialState,
       restProps = _objectWithoutProperties(props, _excluded);

package/button-group/stateful-container.js

@@ -64,7 +64,8 @@ function isSelectedDefined(selected) {
   return Array.isArray(selected) || typeof selected === 'number';
 }
 
-function defaultStateReducer(type, nextState, currentState) {
+function defaultStateReducer(type, nextState, // eslint-disable-next-line @typescript-eslint/no-unused-vars
+currentState) {
   return nextState;
 }
 
@@ -133,6 +134,7 @@ 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,
           initialState = _this$props.initialState,
           stateReducer = _this$props.stateReducer,

package/button-group/styled-components.js

@@ -27,4 +27,5 @@ var StyledRoot = (0, _styles.styled)('div', function (_ref) {
   };
 });
 exports.StyledRoot = StyledRoot;
-StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';

package/button-group/types.d.ts

@@ -1,8 +1,7 @@
-import * as React from 'react';
-import { SIZE, SHAPE, KIND } from '../button';
+import type * as React from 'react';
+import type { SIZE, SHAPE, KIND } from '../button';
 import type { Override } from '../helpers/overrides';
-import { MODE, STATE_CHANGE_TYPE } from './constants';
-import type { SyntheticEvent } from 'react';
+import type { MODE, STATE_CHANGE_TYPE } from './constants';
 export declare type ButtonGroupProps = {
     /** Accessible label. */
     ariaLabel?: string;
@@ -55,5 +54,5 @@ export declare type State = {
     selected: Array<number>;
 };
 export declare type StateReducer = (stateType: typeof STATE_CHANGE_TYPE[keyof typeof STATE_CHANGE_TYPE], nextState: State, currentState: State) => State;
-declare type ClickHandler = (event: SyntheticEvent<HTMLButtonElement>, index: number) => unknown;
+declare type ClickHandler = (event: React.SyntheticEvent<HTMLButtonElement>, index: number) => unknown;
 export {};

package/card/styled-components.js

@@ -19,6 +19,7 @@ var Action = (0, _styles.styled)('div', function (_ref) {
 });
 exports.Action = Action;
 Action.displayName = "Action";
+Action.displayName = 'Action';
 var Body = (0, _styles.styled)('div', function (_ref2) {
   var $theme = _ref2.$theme;
   return _objectSpread({
@@ -28,6 +29,7 @@ var Body = (0, _styles.styled)('div', function (_ref2) {
 });
 exports.Body = Body;
 Body.displayName = "Body";
+Body.displayName = 'Body';
 var Contents = (0, _styles.styled)('div', function (_ref3) {
   var $theme = _ref3.$theme;
   return {
@@ -39,6 +41,7 @@ var Contents = (0, _styles.styled)('div', function (_ref3) {
 });
 exports.Contents = Contents;
 Contents.displayName = "Contents";
+Contents.displayName = 'Contents';
 var HeaderImage = (0, _styles.styled)('img', function (_ref4) {
   var $theme = _ref4.$theme;
   return {
@@ -47,11 +50,12 @@ var HeaderImage = (0, _styles.styled)('img', function (_ref4) {
     objectFit: 'contain',
     maxWidth: '100%'
   };
-}); // by using the section tag, we can keep the h1 for the title
-// https://html.spec.whatwg.org/multipage/sections.html#headings-and-sections
-
+});
 exports.HeaderImage = HeaderImage;
 HeaderImage.displayName = "HeaderImage";
+HeaderImage.displayName = 'HeaderImage'; // by using the section tag, we can keep the h1 for the title
+// https://html.spec.whatwg.org/multipage/sections.html#headings-and-sections
+
 var Root = (0, _styles.styled)('section', function (_ref5) {
   var $theme = _ref5.$theme;
   return {
@@ -77,6 +81,7 @@ var Root = (0, _styles.styled)('section', function (_ref5) {
 });
 exports.Root = Root;
 Root.displayName = "Root";
+Root.displayName = 'Root';
 var Thumbnail = (0, _styles.styled)('img', function (_ref6) {
   var $theme = _ref6.$theme;
   return _objectSpread(_objectSpread({
@@ -94,6 +99,7 @@ var Thumbnail = (0, _styles.styled)('img', function (_ref6) {
 });
 exports.Thumbnail = Thumbnail;
 Thumbnail.displayName = "Thumbnail";
+Thumbnail.displayName = 'Thumbnail';
 var Title = (0, _styles.styled)('h1', function (_ref7) {
   var $theme = _ref7.$theme;
   return _objectSpread(_objectSpread({}, $theme.typography.HeadingSmall), {}, {
@@ -109,4 +115,5 @@ var Title = (0, _styles.styled)('h1', function (_ref7) {
   });
 });
 exports.Title = Title;
-Title.displayName = "Title";
+Title.displayName = "Title";
+Title.displayName = 'Title';

package/checkbox/styled-components.js

@@ -142,6 +142,7 @@ var Root = (0, _styles.styled)('label', function (props) {
 });
 exports.Root = Root;
 Root.displayName = "Root";
+Root.displayName = 'Root';
 var Checkmark = (0, _styles.styled)('span', function (props) {
   var $checked = props.$checked,
       $disabled = props.$disabled,
@@ -154,7 +155,7 @@ var Checkmark = (0, _styles.styled)('span', function (props) {
   var tickColor = $disabled ? $theme.colors.tickMarkFillDisabled : $error ? $theme.colors.tickMarkFillError : $theme.colors.tickMarkFill;
   var indeterminate = encodeURIComponent("\n    <svg width=\"14\" height=\"4\" viewBox=\"0 0 14 4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M14 0.5H0V3.5H14V0.5Z\" fill=\"".concat(tickColor, "\"/>\n    </svg>\n  "));
   var check = encodeURIComponent("\n    <svg width=\"17\" height=\"13\" viewBox=\"0 0 17 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M6.50002 12.6L0.400024 6.60002L2.60002 4.40002L6.50002 8.40002L13.9 0.900024L16.1 3.10002L6.50002 12.6Z\" fill=\"".concat(tickColor, "\"/>\n    </svg>\n  "));
-  var borderRadius = $theme.borders.inputBorderRadius;
+  var borderRadius = $theme.borders.checkboxBorderRadius;
   var borderColor = getBorderColor(props);
   return {
     flex: '0 0 auto',
@@ -198,6 +199,7 @@ var Checkmark = (0, _styles.styled)('span', function (props) {
 });
 exports.Checkmark = Checkmark;
 Checkmark.displayName = "Checkmark";
+Checkmark.displayName = 'Checkmark';
 var Label = (0, _styles.styled)('div', function (props) {
   var $theme = props.$theme;
   var typography = $theme.typography;
@@ -208,10 +210,11 @@ var Label = (0, _styles.styled)('div', function (props) {
   }, typography.LabelMedium), {}, {
     lineHeight: '24px'
   });
-}); // tricky style for focus event cause display: none doesn't work
-
+});
 exports.Label = Label;
 Label.displayName = "Label";
+Label.displayName = 'Label'; // tricky style for focus event cause display: none doesn't work
+
 var Input = (0, _styles.styled)('input', {
   opacity: 0,
   width: 0,
@@ -223,6 +226,7 @@ var Input = (0, _styles.styled)('input', {
 });
 exports.Input = Input;
 Input.displayName = "Input";
+Input.displayName = 'Input';
 var Toggle = (0, _styles.styled)('div', function (props) {
   var backgroundColor = props.$theme.colors.toggleFill;
 
@@ -250,6 +254,7 @@ var Toggle = (0, _styles.styled)('div', function (props) {
 });
 exports.Toggle = Toggle;
 Toggle.displayName = "Toggle";
+Toggle.displayName = 'Toggle';
 var ToggleTrack = (0, _styles.styled)('div', function (props) {
   var backgroundColor = props.$theme.colors.toggleTrackFill;
 
@@ -276,4 +281,5 @@ var ToggleTrack = (0, _styles.styled)('div', function (props) {
   };
 });
 exports.ToggleTrack = ToggleTrack;
-ToggleTrack.displayName = "ToggleTrack";
+ToggleTrack.displayName = "ToggleTrack";
+ToggleTrack.displayName = 'ToggleTrack';

package/checkbox/styled-components.js.flow

@@ -142,7 +142,7 @@ export const Checkmark = styled<SharedStylePropsT>('span', (props) => {
     </svg>
   `);
 
-  const borderRadius = $theme.borders.inputBorderRadius;
+  const borderRadius = $theme.borders.checkboxBorderRadius;
   const borderColor = getBorderColor(props);
 
   return ({

package/checkbox/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 { STYLE_TYPE } from './constants';
-import type { ReactNode, ChangeEvent } from 'react';
+import type { STYLE_TYPE } from './constants';
 export declare type LabelPlacement = 'top' | 'right' | 'bottom' | 'left';
 export declare type StyleType = keyof typeof STYLE_TYPE;
 export declare type CheckboxOverrides = {
@@ -15,7 +14,7 @@ export declare type CheckboxOverrides = {
 };
 export declare type DefaultProps = {
     overrides?: any;
-    children?: ReactNode;
+    children?: React.ReactNode;
     checked: boolean;
     disabled: boolean;
     error: boolean;
@@ -24,13 +23,13 @@ export declare type DefaultProps = {
     isIndeterminate: boolean;
     inputRef: React.RefObject<HTMLInputElement>;
     checkmarkType: StyleType;
-    onChange: (e: ChangeEvent<HTMLInputElement>) => unknown;
-    onMouseEnter: (e: ChangeEvent<HTMLInputElement>) => unknown;
-    onMouseLeave: (e: ChangeEvent<HTMLInputElement>) => unknown;
-    onMouseDown: (e: ChangeEvent<HTMLInputElement>) => unknown;
-    onMouseUp: (e: ChangeEvent<HTMLInputElement>) => unknown;
-    onFocus: (e: ChangeEvent<HTMLInputElement>) => unknown;
-    onBlur: (e: ChangeEvent<HTMLInputElement>) => unknown;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    onMouseEnter: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    onMouseLeave: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    onMouseDown: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    onMouseUp: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    onFocus: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    onBlur: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
     containsInteractiveElement?: boolean;
 };
 export declare type CheckboxProps = {
@@ -42,7 +41,7 @@ export declare type CheckboxProps = {
     ariaLabel?: string;
     'aria-label'?: string;
     /** Component or String value for label of checkbox. */
-    children?: ReactNode;
+    children?: React.ReactNode;
     /** Indicates if this checkbox children contain an interactive element (prevents the label from moving focus from the child element to the radio button) */
     containsInteractiveElement?: boolean;
     overrides?: CheckboxOverrides;
@@ -73,19 +72,19 @@ export declare type CheckboxProps = {
     /** Text to display in native OS tooltip on long hover. */
     title?: string | null;
     /** Handler for change events on trigger element. */
-    onChange?: (e: ChangeEvent<HTMLInputElement>) => unknown;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
     /** Handler for mouseenter events on trigger element. */
-    onMouseEnter?: (e: ChangeEvent<HTMLInputElement>) => unknown;
+    onMouseEnter?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
     /** Handler for mouseleave events on trigger element. */
-    onMouseLeave?: (e: ChangeEvent<HTMLInputElement>) => unknown;
+    onMouseLeave?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
     /** Handler for mousedown events on trigger element. */
-    onMouseDown?: (e: ChangeEvent<HTMLInputElement>) => unknown;
+    onMouseDown?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
     /** Handler for mouseup events on trigger element. */
-    onMouseUp?: (e: ChangeEvent<HTMLInputElement>) => unknown;
+    onMouseUp?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
     /** handler for focus events on trigger element. */
-    onFocus?: (e: ChangeEvent<HTMLInputElement>) => unknown;
+    onFocus?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
     /** handler for blur events on trigger element. */
-    onBlur?: (e: ChangeEvent<HTMLInputElement>) => unknown;
+    onBlur?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
 };
 export declare type CheckboxState = {
     isFocused: boolean;
@@ -97,50 +96,50 @@ export declare type CheckboxReducerState = {
     checked?: boolean;
     isIndeterminate?: boolean;
 };
-export declare type StateReducer = (stateType: string, nextState: CheckboxReducerState, currentState: CheckboxReducerState, event: ChangeEvent<HTMLInputElement>) => CheckboxReducerState;
+export declare type StateReducer = (stateType: string, nextState: CheckboxReducerState, currentState: CheckboxReducerState, event: React.ChangeEvent<HTMLInputElement>) => CheckboxReducerState;
 export declare type StatefulContainerChildProps = {
     overrides?: CheckboxOverrides;
     /** Handler for change events on trigger element. */
-    onChange?: (e: ChangeEvent<HTMLInputElement>) => unknown;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
     /** Handler for mouseenter events on trigger element. */
-    onMouseEnter?: (e: ChangeEvent<HTMLInputElement>) => unknown;
+    onMouseEnter?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
     /** Handler for mouseleave events on trigger element. */
-    onMouseLeave?: (e: ChangeEvent<HTMLInputElement>) => unknown;
+    onMouseLeave?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
     /** Handler for focus events on trigger element. */
-    onFocus?: (e: ChangeEvent<HTMLInputElement>) => unknown;
+    onFocus?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
     /** Handler for blur events on trigger element. */
-    onBlur?: (e: ChangeEvent<HTMLInputElement>) => unknown;
+    onBlur?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
     /** Focus the checkbox on initial render. */
     autoFocus?: boolean;
 } & CheckboxReducerState;
 export declare type DefaultStatefulProps = {
     initialState: CheckboxReducerState;
-    children?: (a: StatefulContainerChildProps) => ReactNode;
+    children?: (a: StatefulContainerChildProps) => React.ReactNode;
     stateReducer: StateReducer;
-    onChange: (e: ChangeEvent<HTMLInputElement>) => unknown;
-    onMouseEnter: (e: ChangeEvent<HTMLInputElement>) => unknown;
-    onMouseLeave: (e: ChangeEvent<HTMLInputElement>) => unknown;
-    onFocus: (e: ChangeEvent<HTMLInputElement>) => unknown;
-    onBlur: (e: ChangeEvent<HTMLInputElement>) => unknown;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    onMouseEnter: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    onMouseLeave: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    onFocus: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    onBlur: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
 };
 export declare type StatefulContainerProps = {
     overrides?: CheckboxOverrides;
     /** Component or String value for label of checkbox. */
-    children?: (a: StatefulContainerChildProps) => ReactNode;
+    children?: (a: StatefulContainerChildProps) => React.ReactNode;
     /** Defines the components initial state value */
     initialState?: CheckboxReducerState;
     /** A state change handler. Used to override default state transitions. */
     stateReducer: StateReducer;
     /** Handler for change events on trigger element. */
-    onChange?: (e: ChangeEvent<HTMLInputElement>) => unknown;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
     /** Handler for mouseenter events on trigger element. */
-    onMouseEnter?: (e: ChangeEvent<HTMLInputElement>) => unknown;
+    onMouseEnter?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
     /** Handler for mouseleave events on trigger element. */
-    onMouseLeave?: (e: ChangeEvent<HTMLInputElement>) => unknown;
+    onMouseLeave?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
     /** Handler for focus events on trigger element. */
-    onFocus?: (e: ChangeEvent<HTMLInputElement>) => unknown;
+    onFocus?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
     /** Handler for blur events on trigger element. */
-    onBlur?: (e: ChangeEvent<HTMLInputElement>) => unknown;
+    onBlur?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
     /** Focus the checkbox on initial render. */
     autoFocus?: boolean;
 };