baseui 12.2.0 → 13.0.0

package/button-docked/styled-components.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledRoot = exports.StyledActionSubContainer = exports.StyledActionContainer = void 0;
+
+var _index = require("../styles/index");
+
+/*
+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.
+*/
+var StyledRoot = (0, _index.styled)('div', function (_ref) {
+  var $theme = _ref.$theme;
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: $theme.sizing.scale300,
+    paddingTop: $theme.sizing.scale600,
+    paddingRight: $theme.sizing.scale600,
+    paddingBottom: $theme.sizing.scale600,
+    paddingLeft: $theme.sizing.scale600,
+    backgroundColor: $theme.colors.backgroundPrimary,
+    container: 'root / inline-size'
+  };
+});
+exports.StyledRoot = StyledRoot;
+StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
+var StyledActionContainer = (0, _index.styled)('div', function (_ref2) {
+  var $theme = _ref2.$theme;
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: $theme.sizing.scale300,
+    '@container root (min-width: 600px)': {
+      flexDirection: 'row',
+      justifyContent: 'space-between'
+    }
+  };
+});
+exports.StyledActionContainer = StyledActionContainer;
+StyledActionContainer.displayName = "StyledActionContainer";
+StyledActionContainer.displayName = 'StyledActionContainer';
+var StyledActionSubContainer = (0, _index.styled)('div', function (_ref3) {
+  var $reverseWhenWide = _ref3.$reverseWhenWide,
+      $theme = _ref3.$theme;
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: $theme.sizing.scale300,
+    '@container root (min-width: 600px)': {
+      flexDirection: $reverseWhenWide ? 'row-reverse' : 'row'
+    }
+  };
+});
+exports.StyledActionSubContainer = StyledActionSubContainer;
+StyledActionSubContainer.displayName = "StyledActionSubContainer";
+StyledActionSubContainer.displayName = 'StyledActionSubContainer';

package/button-docked/types.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { Override } from '../helpers/overrides';
+export type ButtonDockedOverrides = {
+    Root?: Override;
+    ActionContainer?: Override;
+    ActionSubContainer?: Override;
+};
+export type ButtonDockedProps = {
+    primaryAction: React.ReactNode;
+    secondaryActions?: [React.ReactNode] | [React.ReactNode, React.ReactNode];
+    dismissiveAction?: React.ReactNode;
+    topAccessory?: React.ReactNode;
+    overrides?: ButtonDockedOverrides;
+};

package/button-docked/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/button-group/button-group.js

@@ -63,6 +63,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+// @ts-ignore
 function isIndexSelected(selected, index) {
   if (!Array.isArray(selected) && typeof selected !== 'number') {
     return false;
@@ -141,10 +142,12 @@ var ButtonGroup = /*#__PURE__*/function (_React$Component) {
           }
 
           return /*#__PURE__*/React.cloneElement(child, {
+            // @ts-ignore
             disabled: disabled || child.props.disabled,
             isSelected: isSelected,
             ref: isRadio ? _this2.childRefs[index] : undefined,
             tabIndex: !isRadio || isSelected || isRadio && (!selected || selected === -1) && index === 0 ? 0 : -1,
+            // @ts-ignore
             onKeyDown: function onKeyDown(e) {
               if (!isRadio) return;
               var value = Number(selected) ? Number(selected) : 0;
@@ -164,6 +167,7 @@ var ButtonGroup = /*#__PURE__*/function (_React$Component) {
               }
             },
             kind: kind,
+            // @ts-ignore
             onClick: function onClick(event) {
               if (disabled) {
                 return;
@@ -181,6 +185,7 @@ var ButtonGroup = /*#__PURE__*/function (_React$Component) {
             size: size,
             overrides: _objectSpread({
               BaseButton: {
+                // @ts-ignore
                 style: function style(_ref) {
                   var $theme = _ref.$theme;
 

package/button-group/locale.d.ts

@@ -1,4 +1,4 @@
-export declare type ButtonGroupLocale = {
+export type ButtonGroupLocale = {
     ariaLabel: string;
 };
 declare const locale: {

package/button-group/stateful-container.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { STATE_CHANGE_TYPE } from './constants';
 import type { StatefulContainerProps, State } from './types';
 import type { SyntheticEvent } from 'react';
-declare function defaultStateReducer(type: typeof STATE_CHANGE_TYPE[keyof typeof STATE_CHANGE_TYPE], nextState: State, currentState: State): State;
+declare function defaultStateReducer(type: (typeof STATE_CHANGE_TYPE)[keyof typeof STATE_CHANGE_TYPE], nextState: State, currentState: State): State;
 export default class StatefulContainer extends React.Component<StatefulContainerProps, State> {
     static defaultProps: {
         initialState: {

package/button-group/stateful-container.js

@@ -60,6 +60,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 // handles the case where selected = 0
+// @ts-ignore
 function isSelectedDefined(selected) {
   return Array.isArray(selected) || typeof selected === 'number';
 }
@@ -126,6 +127,7 @@ var StatefulContainer = /*#__PURE__*/function (_React$Component) {
     var _initialState$selecte = initialState.selected,
         selected = _initialState$selecte === void 0 ? [] : _initialState$selecte;
     _this.state = {
+      // @ts-ignore
       selected: isSelectedDefined(selected) ? [].concat(selected) : []
     };
     return _this;
@@ -153,6 +155,7 @@ var StatefulContainer = /*#__PURE__*/function (_React$Component) {
 exports.default = StatefulContainer;
 
 _defineProperty(StatefulContainer, "defaultProps", {
+  // @ts-ignore
   initialState: {
     selected: []
   },

package/button-group/types.d.ts

@@ -2,7 +2,7 @@ import type * as React from 'react';
 import type { SIZE, SHAPE, KIND } from '../button';
 import type { Override } from '../helpers/overrides';
 import type { MODE, STATE_CHANGE_TYPE } from './constants';
-export declare type ButtonGroupProps = {
+export type ButtonGroupProps = {
     /** Accessible label. */
     ariaLabel?: string;
     'aria-label'?: string;
@@ -15,7 +15,7 @@ export declare type ButtonGroupProps = {
      * the value `radio` will cause Buttons to behave like radio buttons,
      * the value `checkbox` will cause Buttons to behave like checkboxes.
      */
-    mode?: typeof MODE[keyof typeof MODE];
+    mode?: (typeof MODE)[keyof typeof MODE];
     /**
      * Called with click events from children. If a child button has its
      * own click handler, the local handler will be called first, then
@@ -29,30 +29,30 @@ export declare type ButtonGroupProps = {
      */
     selected?: number | Array<number>;
     /** Defines the shape of the buttons in the button group. */
-    shape?: typeof SHAPE[keyof typeof SHAPE];
+    shape?: (typeof SHAPE)[keyof typeof SHAPE];
     /** Defines the size of the buttons in the button group. */
-    size?: typeof SIZE[keyof typeof SIZE];
+    size?: (typeof SIZE)[keyof typeof SIZE];
     /** Defines the `kind` of the buttons in the group */
-    kind?: typeof KIND[keyof typeof KIND];
+    kind?: (typeof KIND)[keyof typeof KIND];
 };
-declare type ButtonGroupOverrides = {
+type ButtonGroupOverrides = {
     Root?: Override;
 };
-export declare type StatefulButtonGroupProps = Omit<{
+export type StatefulButtonGroupProps = Omit<{
     initialState?: {
         selected: number | Array<number>;
     };
     stateReducer?: StateReducer;
 } & ButtonGroupProps, 'selected'>;
-export declare type StatefulContainerProps = {
+export type StatefulContainerProps = {
     children: (props: {
         onClick: ClickHandler;
         selected: number | Array<number>;
     } & Omit<ButtonGroupProps, 'children'>) => React.ReactNode;
 } & Omit<StatefulButtonGroupProps, 'children'>;
-export declare type State = {
+export 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: React.SyntheticEvent<HTMLButtonElement>, index: number) => unknown;
+export type StateReducer = (stateType: (typeof STATE_CHANGE_TYPE)[keyof typeof STATE_CHANGE_TYPE], nextState: State, currentState: State) => State;
+type ClickHandler = (event: React.SyntheticEvent<HTMLButtonElement>, index: number) => unknown;
 export {};

package/button-timed/button-timed.js

@@ -84,14 +84,14 @@ var ButtonTimed = function ButtonTimed(props) {
   var TimerContainerOverride = overrides.TimerContainer,
       buttonOverrides = _objectWithoutProperties(overrides, _excluded2);
 
-  var _getOverrides = (0, _overrides.getOverrides)(TimerContainerOverride, _styledComponents.TimerContainer),
+  var _getOverrides = (0, _overrides.getOverrides)(TimerContainerOverride, _styledComponents.StyledTimerContainer),
       _getOverrides2 = _slicedToArray(_getOverrides, 2),
       TimerContainer = _getOverrides2[0],
       timerContainerProps = _getOverrides2[1];
 
   var buttonMergedOverrides = (0, _overrides.mergeOverrides)({
     BaseButton: {
-      component: _styledComponents.BaseButtonTimed,
+      component: _styledComponents.StyledBaseButtonTimed,
       props: {
         $initialTime: initialTime,
         $timeElapsed: (initialTime * 1000 - timeRemaining) / 1000
@@ -104,6 +104,7 @@ var ButtonTimed = function ButtonTimed(props) {
     }
   }, {
     Root: buttonOverrides.Root || {},
+    // @ts-ignore
     BaseButton: buttonOverrides.BaseButton,
     StartEnhancer: buttonOverrides.StartEnhancer || {},
     EndEnhancer: buttonOverrides.EndEnhancer || {},

package/button-timed/index.d.ts

@@ -1,5 +1,5 @@
 import { StyledStartEnhancer, StyledEndEnhancer, StyledLoadingSpinner, StyledLoadingSpinnerContainer } from '../button';
-import { BaseButtonTimed as StyledBaseButtonTimed, TimerContainer as StyledTimercontainer } from './styled-components';
-export { StyledBaseButtonTimed, StyledTimercontainer, StyledStartEnhancer, StyledEndEnhancer, StyledLoadingSpinner, StyledLoadingSpinnerContainer, };
+import { StyledBaseButtonTimed, StyledTimerContainer } from './styled-components';
+export { StyledBaseButtonTimed, StyledTimerContainer, StyledStartEnhancer, StyledEndEnhancer, StyledLoadingSpinner, StyledLoadingSpinnerContainer, };
 export * from './types';
 export { default as ButtonTimed } from './button-timed';

package/button-timed/index.js

@@ -9,7 +9,7 @@ var _exportNames = {
   StyledLoadingSpinner: true,
   StyledLoadingSpinnerContainer: true,
   StyledBaseButtonTimed: true,
-  StyledTimercontainer: true,
+  StyledTimerContainer: true,
   ButtonTimed: true
 };
 Object.defineProperty(exports, "ButtonTimed", {
@@ -21,7 +21,7 @@ Object.defineProperty(exports, "ButtonTimed", {
 Object.defineProperty(exports, "StyledBaseButtonTimed", {
   enumerable: true,
   get: function get() {
-    return _styledComponents.BaseButtonTimed;
+    return _styledComponents.StyledBaseButtonTimed;
   }
 });
 Object.defineProperty(exports, "StyledEndEnhancer", {
@@ -48,10 +48,10 @@ Object.defineProperty(exports, "StyledStartEnhancer", {
     return _button.StyledStartEnhancer;
   }
 });
-Object.defineProperty(exports, "StyledTimercontainer", {
+Object.defineProperty(exports, "StyledTimerContainer", {
   enumerable: true,
   get: function get() {
-    return _styledComponents.TimerContainer;
+    return _styledComponents.StyledTimerContainer;
   }
 });
 

package/button-timed/styled-components.d.ts

@@ -1,5 +1,5 @@
-export declare const BaseButtonTimed: import("styletron-react").StyletronComponent<"button", {
+export declare const StyledBaseButtonTimed: import("styletron-react").StyletronComponent<"button", {
     $initialTime: number;
     $timeElapsed: number;
 } & import("../button").SharedStyleProps>;
-export declare const TimerContainer: import("styletron-react").StyletronComponent<"span", {}>;
+export declare const StyledTimerContainer: import("styletron-react").StyletronComponent<"span", {}>;

package/button-timed/styled-components.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TimerContainer = exports.BaseButtonTimed = void 0;
+exports.StyledTimerContainer = exports.StyledBaseButtonTimed = void 0;
 
 var _index = require("../styles/index");
 
@@ -17,7 +17,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-var BaseButtonTimed = (0, _index.withStyle)(_button.StyledBaseButton, function (_ref) {
+var StyledBaseButtonTimed = (0, _index.withStyle)(_button.StyledBaseButton, function (_ref) {
   var $theme = _ref.$theme,
       $initialTime = _ref.$initialTime,
       $timeElapsed = _ref.$timeElapsed;
@@ -47,11 +47,13 @@ var BaseButtonTimed = (0, _index.withStyle)(_button.StyledBaseButton, function (
     }
   } : {});
 });
-exports.BaseButtonTimed = BaseButtonTimed;
-BaseButtonTimed.displayName = "BaseButtonTimed";
-var TimerContainer = (0, _index.styled)('span', {
+exports.StyledBaseButtonTimed = StyledBaseButtonTimed;
+StyledBaseButtonTimed.displayName = "StyledBaseButtonTimed";
+StyledBaseButtonTimed.displayName = 'StyledBaseButtonTimed';
+var StyledTimerContainer = (0, _index.styled)('span', {
   // minWidth to ensure button width stays consistent as timeRemaining changes
   minWidth: '53px'
 });
-exports.TimerContainer = TimerContainer;
-TimerContainer.displayName = "TimerContainer";
+exports.StyledTimerContainer = StyledTimerContainer;
+StyledTimerContainer.displayName = "StyledTimerContainer";
+StyledTimerContainer.displayName = 'StyledTimerContainer';

package/button-timed/types.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
 import type { ButtonProps, ButtonOverrides } from '../button';
 import type { Override } from '../helpers/overrides';
-export declare type ButtonTimedOverrides = ButtonOverrides & {
+export type ButtonTimedOverrides = ButtonOverrides & {
     TimerContainer?: Override;
 };
-export declare type ButtonTimedProps = Omit<ButtonProps, 'kind' | 'shape' | 'size' | 'onClick' | 'overrides'> & {
+export type ButtonTimedProps = Omit<ButtonProps, 'kind' | 'shape' | 'size' | 'onClick' | 'overrides'> & {
     initialTime: number;
     paused?: boolean;
     onClick: (a?: React.SyntheticEvent<HTMLButtonElement>) => unknown;

package/card/card.js

@@ -31,7 +31,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 function hasThumbnail(props) {
   return !!props.thumbnail;
-}
+} // @ts-ignore
+
 
 var SemanticTitle = function SemanticTitle(_ref) {
   var children = _ref.children,
@@ -82,7 +83,8 @@ function Card(props) {
   var Title = (0, _overrides.getOverride)(TitleOverride) || SemanticTitle;
   var headerImageProps = typeof headerImage === 'string' ? {
     src: headerImage
-  } : headerImage;
+  } : headerImage; // @ts-ignore
+
   var $hasThumbnail = hasThumbnail(props);
   return /*#__PURE__*/React.createElement(Root, _extends({
     "data-baseweb": "card"

package/card/types.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import type { Override } from '../helpers/overrides';
-export declare type CardOverrides = {
+export type CardOverrides = {
     Action?: Override;
     Body?: Override;
     Contents?: Override;
@@ -9,7 +9,7 @@ export declare type CardOverrides = {
     Thumbnail?: Override;
     Title?: Override;
 };
-export declare type ImageProps = {
+export type ImageProps = {
     alt?: string;
     complete?: boolean;
     crossOrigin?: string;
@@ -25,7 +25,7 @@ export declare type ImageProps = {
     useMap?: string;
     width?: number;
 };
-export declare type CardProps = {
+export type CardProps = {
     /** Contents to be rendered at the bottom of the Card. Used to organize UI which enables user action. */
     readonly action?: ReactNode;
     /** Content to be rendered within the Card body. */

package/checkbox/checkbox.d.ts

@@ -3,6 +3,7 @@ import type { CheckboxProps, DefaultProps, CheckboxState } from './types';
 import type { ChangeEvent } from 'react';
 declare class StatelessCheckbox extends React.Component<CheckboxProps, CheckboxState> {
     static defaultProps: DefaultProps;
+    inputRef: React.RefObject<HTMLInputElement>;
     state: {
         isFocused: boolean;
         isFocusVisible: boolean;
@@ -10,6 +11,7 @@ declare class StatelessCheckbox extends React.Component<CheckboxProps, CheckboxS
         isActive: boolean;
     };
     componentDidMount(): void;
+    componentDidUpdate(prevProps: CheckboxProps): void;
     onMouseEnter: (e: ChangeEvent<HTMLInputElement>) => void;
     onMouseLeave: (e: ChangeEvent<HTMLInputElement>) => void;
     onMouseDown: (e: ChangeEvent<HTMLInputElement>) => void;

package/checkbox/checkbox.js

@@ -45,6 +45,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+// @ts-ignore
 var stopPropagation = function stopPropagation(e) {
   return e.stopPropagation();
 };
@@ -65,6 +66,8 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call.apply(_super, [this].concat(args));
 
+    _defineProperty(_assertThisInitialized(_this), "inputRef", _this.props.inputRef || /*#__PURE__*/React.createRef());
+
     _defineProperty(_assertThisInitialized(_this), "state", {
       isFocused: _this.props.autoFocus || false,
       isFocusVisible: false,
@@ -75,7 +78,8 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "onMouseEnter", function (e) {
       _this.setState({
         isHovered: true
-      });
+      }); // @ts-ignore
+
 
       _this.props.onMouseEnter(e);
     });
@@ -84,7 +88,8 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
       _this.setState({
         isHovered: false,
         isActive: false
-      });
+      }); // @ts-ignore
+
 
       _this.props.onMouseLeave(e);
     });
@@ -92,7 +97,8 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "onMouseDown", function (e) {
       _this.setState({
         isActive: true
-      });
+      }); // @ts-ignore
+
 
       _this.props.onMouseDown(e);
     });
@@ -100,7 +106,8 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "onMouseUp", function (e) {
       _this.setState({
         isActive: false
-      });
+      }); // @ts-ignore
+
 
       _this.props.onMouseUp(e);
     });
@@ -108,7 +115,8 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "onFocus", function (e) {
       _this.setState({
         isFocused: true
-      });
+      }); // @ts-ignore
+
 
       _this.props.onFocus(e);
 
@@ -122,7 +130,8 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "onBlur", function (e) {
       _this.setState({
         isFocused: false
-      });
+      }); // @ts-ignore
+
 
       _this.props.onBlur(e);
 
@@ -141,10 +150,24 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
     value: function componentDidMount() {
       var _this$props = this.props,
           autoFocus = _this$props.autoFocus,
-          inputRef = _this$props.inputRef;
+          isIndeterminate = _this$props.isIndeterminate; // @ts-ignore
+
+      if (autoFocus && this.inputRef.current) {
+        // @ts-ignore
+        this.inputRef.current.focus();
+      }
+
+      if (this.inputRef.current) {
+        this.inputRef.current.indeterminate = Boolean(isIndeterminate);
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var isIndeterminate = this.props.isIndeterminate;
 
-      if (autoFocus && inputRef.current) {
-        inputRef.current.focus();
+      if (this.inputRef.current && isIndeterminate !== prevProps.isIndeterminate) {
+        this.inputRef.current.indeterminate = Boolean(isIndeterminate);
       }
     }
   }, {
@@ -156,13 +179,12 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
           onChange = _this$props2.onChange,
           _this$props2$labelPla = _this$props2.labelPlacement,
           labelPlacement = _this$props2$labelPla === void 0 ? this.props.checkmarkType === _constants.STYLE_TYPE.toggle ? 'left' : 'right' : _this$props2$labelPla,
-          inputRef = _this$props2.inputRef,
           isIndeterminate = _this$props2.isIndeterminate,
           error = _this$props2.error,
           disabled = _this$props2.disabled,
           value = _this$props2.value,
+          id = _this$props2.id,
           name = _this$props2.name,
-          type = _this$props2.type,
           checked = _this$props2.checked,
           children = _this$props2.children,
           required = _this$props2.required,
@@ -226,18 +248,18 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
         $labelPlacement: labelPlacement
       }, sharedProps, mouseEvents, (0, _overrides.getOverrideProps)(RootOverride)), (labelPlacement === 'top' || labelPlacement === 'left') && labelComp, this.props.checkmarkType === _constants.STYLE_TYPE.toggle ? /*#__PURE__*/React.createElement(ToggleTrack, _extends({}, sharedProps, (0, _overrides.getOverrideProps)(ToggleTrackOverride)), /*#__PURE__*/React.createElement(Toggle, _extends({}, sharedProps, (0, _overrides.getOverrideProps)(ToggleOverride)))) : /*#__PURE__*/React.createElement(Checkmark, _extends({}, sharedProps, (0, _overrides.getOverrideProps)(CheckmarkOverride))), /*#__PURE__*/React.createElement(Input, _extends({
         value: value,
+        id: id,
         name: name,
         checked: checked,
         required: required,
         "aria-label": this.props['aria-label'] || this.props.ariaLabel,
-        "aria-checked": isIndeterminate ? 'mixed' : checked,
         "aria-describedby": this.props['aria-describedby'],
         "aria-errormessage": this.props['aria-errormessage'],
         "aria-invalid": error || null,
         "aria-required": required || null,
         disabled: disabled,
-        type: type,
-        ref: inputRef // Prevent a second click event from firing when label is clicked.
+        type: "checkbox",
+        ref: this.inputRef // Prevent a second click event from firing when label is clicked.
         // See https://github.com/uber/baseweb/issues/3847
         ,
         onClick: stopPropagation
@@ -256,9 +278,7 @@ _defineProperty(StatelessCheckbox, "defaultProps", {
   disabled: false,
   autoFocus: false,
   isIndeterminate: false,
-  inputRef: /*#__PURE__*/React.createRef(),
   error: false,
-  type: 'checkbox',
   checkmarkType: _constants.STYLE_TYPE.default,
   onChange: function onChange() {},
   onMouseEnter: function onMouseEnter() {},

package/checkbox/checkbox.js.flow

@@ -31,7 +31,6 @@ class StatelessCheckbox extends React.Component<PropsT, StatelessStateT> {
     isIndeterminate: false,
     inputRef: React.createRef(),
     error: false,
-    type: 'checkbox',
     checkmarkType: STYLE_TYPE.default,
     onChange: () => {},
     onMouseEnter: () => {},
@@ -103,7 +102,6 @@ class StatelessCheckbox extends React.Component<PropsT, StatelessStateT> {
       disabled,
       value,
       name,
-      type,
       checked,
       children,
       required,
@@ -185,13 +183,12 @@ class StatelessCheckbox extends React.Component<PropsT, StatelessStateT> {
           checked={checked}
           required={required}
           aria-label={this.props['aria-label'] || this.props.ariaLabel}
-          aria-checked={isIndeterminate ? 'mixed' : checked}
           aria-describedby={this.props['aria-describedby']}
           aria-errormessage={this.props['aria-errormessage']}
           aria-invalid={error || null}
           aria-required={required || null}
           disabled={disabled}
-          type={type}
+          type="checkbox"
           ref={inputRef}
           // Prevent a second click event from firing when label is clicked.
           // See https://github.com/uber/baseweb/issues/3847

package/checkbox/styled-components.js

@@ -13,6 +13,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+// @ts-ignore
 function getBorderColor(props) {
   var $disabled = props.$disabled,
       $checked = props.$checked,
@@ -33,7 +34,8 @@ function getBorderColor(props) {
   } else {
     return colors.tickBorder;
   }
-}
+} // @ts-ignore
+
 
 function getLabelPadding(props) {
   var _props$$labelPlacemen = props.$labelPlacement,
@@ -69,7 +71,8 @@ function getLabelPadding(props) {
   }
 
   return _defineProperty({}, "padding".concat(paddingDirection), scale300);
-}
+} // @ts-ignore
+
 
 function getBackgroundColor(props) {
   var $disabled = props.$disabled,
@@ -120,7 +123,8 @@ function getBackgroundColor(props) {
       return colors.tickFill;
     }
   }
-}
+} // @ts-ignore
+
 
 function getLabelColor(props) {
   var $disabled = props.$disabled,
@@ -142,7 +146,8 @@ var Root = (0, _styles.styled)('label', function (props) {
 });
 exports.Root = Root;
 Root.displayName = "Root";
-Root.displayName = 'Root';
+Root.displayName = 'Root'; // @ts-ignore
+
 var Checkmark = (0, _styles.styled)('span', function (props) {
   var $checked = props.$checked,
       $disabled = props.$disabled,
@@ -226,7 +231,8 @@ var Input = (0, _styles.styled)('input', {
 });
 exports.Input = Input;
 Input.displayName = "Input";
-Input.displayName = 'Input';
+Input.displayName = 'Input'; // @ts-ignore
+
 var Toggle = (0, _styles.styled)('div', function (props) {
   var backgroundColor = props.$theme.colors.toggleFill;