baseui 10.11.1 → 11.0.0

package/phone-input/phone-input-lite.js

@@ -9,13 +9,15 @@ exports.default = PhoneInputLite;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _index = require("../input/index.js");
+var _countryPicker = _interopRequireDefault(require("./country-picker.js"));
 
-var _countrySelect = _interopRequireDefault(require("./country-select.js"));
+var _defaultProps = _interopRequireDefault(require("./default-props.js"));
 
-var _overrides = require("../helpers/overrides.js");
+var _styledComponents = require("./styled-components.js");
 
-var _defaultProps = _interopRequireDefault(require("./default-props.js"));
+var _index = require("../input/index.js");
+
+var _overrides = require("../helpers/overrides.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -37,19 +39,19 @@ function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+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; }
+
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 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; }
 
-var country = _defaultProps.default.country,
-    lightDefaultProps = _objectWithoutProperties(_defaultProps.default, ["country"]);
-
-PhoneInputLite.defaultProps = lightDefaultProps;
+PhoneInputLite.defaultProps = _defaultProps.default;
 
 function PhoneInputLite(props) {
   var ariaLabel = props['aria-label'],
       ariaLabelledBy = props['aria-labelledby'],
       ariaDescribedBy = props['aria-describedby'],
+      clearable = props.clearable,
       countries = props.countries,
       country = props.country,
       disabled = props.disabled,
@@ -67,45 +69,67 @@ function PhoneInputLite(props) {
       required = props.required,
       size = props.size,
       text = props.text,
-      restProps = _objectWithoutProperties(props, ["aria-label", "aria-labelledby", "aria-describedby", "countries", "country", "disabled", "error", "id", "mapIsoToLabel", "maxDropdownHeight", "maxDropdownWidth", "name", "onTextChange", "onCountryChange", "overrides", "placeholder", "positive", "required", "size", "text"]);
+      restProps = _objectWithoutProperties(props, ["aria-label", "aria-labelledby", "aria-describedby", "clearable", "countries", "country", "disabled", "error", "id", "mapIsoToLabel", "maxDropdownHeight", "maxDropdownWidth", "name", "onTextChange", "onCountryChange", "overrides", "placeholder", "positive", "required", "size", "text"]);
 
   var inputRef = (0, _react.useRef)(null);
+  var baseDialCodeOverride = {
+    component: _styledComponents.StyledDialCode,
+    style: function style(_ref) {
+      var _ref$$theme = _ref.$theme,
+          direction = _ref$$theme.direction,
+          sizing = _ref$$theme.sizing;
+      var marginDir = direction === 'rtl' ? 'marginRight' : 'marginLeft';
+      return _defineProperty({}, marginDir, sizing.scale600);
+    },
+    props: {
+      children: country.dialCode
+    }
+  };
+  var mergedDialCodeOverride = (0, _overrides.mergeOverrides)({
+    DialCode: baseDialCodeOverride
+  }, {
+    DialCode: overrides.DialCode || {}
+  });
   var baseOverrides = {
     Input: {
-      style: function style(_ref) {
-        var sizing = _ref.$theme.sizing;
-        return {
-          paddingLeft: sizing.scale100
-        };
+      style: function style(_ref3) {
+        var _ref3$$theme = _ref3.$theme,
+            direction = _ref3$$theme.direction,
+            sizing = _ref3$$theme.sizing;
+        var paddingDir = direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
+        return _defineProperty({}, paddingDir, sizing.scale100);
       }
     },
-    Before: {
-      component: _countrySelect.default,
-      props: {
-        countries: countries,
-        country: country,
-        disabled: disabled,
-        error: error,
-        inputRef: inputRef,
-        mapIsoToLabel: mapIsoToLabel,
-        maxDropdownHeight: maxDropdownHeight,
-        maxDropdownWidth: maxDropdownWidth,
-        onCountryChange: onCountryChange,
-        overrides: overrides,
-        positive: positive,
-        required: required,
-        size: size
-      }
-    }
+    Before: mergedDialCodeOverride.DialCode
   };
 
-  var _getOverrides = (0, _overrides.getOverrides)(overrides.Input, _index.Input),
+  var _getOverrides = (0, _overrides.getOverrides)(overrides.Root, _styledComponents.StyledPhoneInputRoot),
       _getOverrides2 = _slicedToArray(_getOverrides, 2),
-      Input = _getOverrides2[0],
-      inputProps = _getOverrides2[1];
+      Root = _getOverrides2[0],
+      rootProps = _getOverrides2[1];
+
+  var _getOverrides3 = (0, _overrides.getOverrides)(overrides.Input, _index.Input),
+      _getOverrides4 = _slicedToArray(_getOverrides3, 2),
+      Input = _getOverrides4[0],
+      inputProps = _getOverrides4[1];
 
   inputProps.overrides = (0, _overrides.mergeOverrides)(baseOverrides, inputProps.overrides);
-  return /*#__PURE__*/_react.default.createElement(Input, _extends({
+  return /*#__PURE__*/_react.default.createElement(Root, _extends({}, rootProps, {
+    "data-baseweb": "phone-input"
+  }), /*#__PURE__*/_react.default.createElement(_countryPicker.default, {
+    country: country,
+    countries: countries,
+    disabled: disabled,
+    error: error,
+    mapIsoToLabel: mapIsoToLabel,
+    maxDropdownHeight: maxDropdownHeight,
+    maxDropdownWidth: maxDropdownWidth,
+    onCountryChange: onCountryChange,
+    overrides: overrides,
+    positive: positive,
+    required: required,
+    size: size
+  }), /*#__PURE__*/_react.default.createElement(Input, _extends({
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
     "aria-describedby": ariaDescribedBy,
@@ -122,6 +146,7 @@ function PhoneInputLite(props) {
     placeholder: placeholder,
     size: size,
     type: "text",
-    value: text
-  }, restProps, inputProps));
+    value: text,
+    clearable: clearable
+  }, restProps, inputProps)));
 }

package/phone-input/phone-input-lite.js.flow

@@ -6,21 +6,21 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import React, { useRef } from 'react';
+import CountryPicker from './country-picker.js';
+import defaultProps from './default-props.js';
+import { StyledPhoneInputRoot, StyledDialCode } from './styled-components.js';
 import { Input as DefaultInput } from '../input/index.js';
-import CountrySelect from './country-select.js';
 import { getOverrides, mergeOverrides } from '../helpers/overrides.js';
-import defaultProps from './default-props.js';
 import type { LitePropsT } from './types.js';
 
-const { country, ...lightDefaultProps } = defaultProps;
-
-PhoneInputLite.defaultProps = lightDefaultProps;
+PhoneInputLite.defaultProps = defaultProps;
 
 export default function PhoneInputLite(props: LitePropsT) {
   const {
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy,
     'aria-describedby': ariaDescribedBy,
+    clearable,
     countries,
     country,
     disabled,
@@ -41,53 +41,75 @@ export default function PhoneInputLite(props: LitePropsT) {
     ...restProps
   } = props;
   const inputRef = useRef(null);
+
+  const baseDialCodeOverride = {
+    component: StyledDialCode,
+    style: ({ $theme: { direction, sizing } }) => {
+      const marginDir: string = direction === 'rtl' ? 'marginRight' : 'marginLeft';
+      return {
+        [marginDir]: sizing.scale600,
+      };
+    },
+    props: { children: country.dialCode },
+  };
+  const mergedDialCodeOverride = mergeOverrides(
+    { DialCode: baseDialCodeOverride },
+    { DialCode: overrides.DialCode || {} }
+  );
+
   const baseOverrides = {
     Input: {
-      style: ({ $theme: { sizing } }) => ({ paddingLeft: sizing.scale100 }),
-    },
-    Before: {
-      component: CountrySelect,
-      props: {
-        countries,
-        country,
-        disabled,
-        error,
-        inputRef,
-        mapIsoToLabel,
-        maxDropdownHeight,
-        maxDropdownWidth,
-        onCountryChange,
-        overrides,
-        positive,
-        required,
-        size,
+      style: ({ $theme: { direction, sizing } }) => {
+        const paddingDir: string = direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
+        return {
+          [paddingDir]: sizing.scale100,
+        };
       },
     },
+    Before: mergedDialCodeOverride.DialCode,
   };
+  const [Root, rootProps] = getOverrides(overrides.Root, StyledPhoneInputRoot);
   const [Input, inputProps] = getOverrides(overrides.Input, DefaultInput);
   inputProps.overrides = mergeOverrides(baseOverrides, inputProps.overrides);
   return (
-    <Input
-      aria-label={ariaLabel}
-      aria-labelledby={ariaLabelledBy}
-      aria-describedby={ariaDescribedBy}
-      autoComplete="tel-national"
-      data-baseweb="phone-input"
-      disabled={disabled}
-      error={error}
-      id={id}
-      inputMode="tel"
-      inputRef={inputRef}
-      name={name}
-      onChange={onTextChange}
-      positive={positive}
-      placeholder={placeholder}
-      size={size}
-      type="text"
-      value={text}
-      {...restProps}
-      {...inputProps}
-    />
+    <Root {...rootProps} data-baseweb="phone-input">
+      <CountryPicker
+        country={country}
+        countries={countries}
+        disabled={disabled}
+        error={error}
+        mapIsoToLabel={mapIsoToLabel}
+        maxDropdownHeight={maxDropdownHeight}
+        maxDropdownWidth={maxDropdownWidth}
+        onCountryChange={onCountryChange}
+        overrides={overrides}
+        positive={positive}
+        required={required}
+        size={size}
+      />
+      <Input
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledBy}
+        aria-describedby={ariaDescribedBy}
+        autoComplete="tel-national"
+        data-baseweb="phone-input"
+        disabled={disabled}
+        error={error}
+        id={id}
+        inputMode="tel"
+        inputRef={inputRef}
+        name={name}
+        onChange={onTextChange}
+        positive={positive}
+        placeholder={placeholder}
+        size={size}
+        type="text"
+        value={text}
+        clearable={clearable}
+        {...restProps}
+        {...inputProps}
+      />
+    </Root>
   );
 }
 

package/progress-bar/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import {StyletronComponent} from 'styletron-react';
-import {Override} from '../overrides';
+import { StyletronComponent } from 'styletron-react';
+import { Override } from '../overrides';
 
 export interface SIZE {
   small: 'small';
@@ -27,7 +27,7 @@ export interface ProgressBarProps {
   steps?: number;
   successValue?: number;
   minValue?: number;
-  mxaValue?: number;
+  maxValue?: number;
   value?: number;
 }
 export class ProgressBar extends React.Component<ProgressBarProps> {}

package/radio/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import {StyletronComponent} from 'styletron-react';
-import {Override} from '../overrides';
+import { StyletronComponent } from 'styletron-react';
+import { Override } from '../overrides';
 
 export interface STATE_TYPE {
   change: 'CHANGE';
@@ -15,7 +15,7 @@ export type StateReducer = (
   stateType: string,
   nextState: State,
   currentState: State,
-  event: React.SyntheticEvent<HTMLInputElement>,
+  event: React.SyntheticEvent<HTMLInputElement>
 ) => State;
 
 export interface State {
@@ -31,10 +31,7 @@ export interface StatefulContainerProps {
   autoFocus?: boolean;
 }
 
-export class StatefulContainer extends React.Component<
-  StatefulContainerProps,
-  State
-> {
+export class StatefulContainer extends React.Component<StatefulContainerProps, State> {
   onChange(e: React.ChangeEventHandler<HTMLInputElement>): void;
   stateReducer(type: string, e: React.SyntheticEvent<HTMLInputElement>): void;
 }
@@ -61,7 +58,6 @@ export interface RadioGroupProps {
   value?: string;
   disabled?: boolean;
   required?: boolean;
-  isError?: boolean;
   error?: boolean;
   autoFocus?: boolean;
   align?: 'horizontal' | 'vertical';
@@ -97,7 +93,6 @@ export interface RadioProps {
   description?: string;
   disabled?: boolean;
   inputRef?: React.Ref<HTMLInputElement>;
-  isError?: boolean;
   error?: boolean;
   isFocused?: boolean;
   isFocusVisible?: boolean;

package/radio/radio.js

@@ -129,10 +129,6 @@ var Radio = /*#__PURE__*/function (_React$Component) {
       if (this.props.autoFocus && (_this$props$inputRef = this.props.inputRef) !== null && _this$props$inputRef !== void 0 && _this$props$inputRef.current) {
         this.props.inputRef.current.focus();
       }
-
-      if (process.env.NODE_ENV !== "production" && this.props.isError) {
-        console.warn('baseui:Radio Property "isError" will be removed in the next major version. Use "error" property instead.');
-      }
     }
   }, {
     key: "render",
@@ -176,7 +172,6 @@ var Radio = /*#__PURE__*/function (_React$Component) {
         $disabled: this.props.disabled,
         $hasDescription: !!this.props.description,
         $isActive: this.state.isActive,
-        $isError: this.props.isError,
         $error: this.props.error,
         $isFocused: this.props.isFocused,
         $isFocusVisible: this.props.isFocused && this.props.isFocusVisible,
@@ -201,7 +196,7 @@ var Radio = /*#__PURE__*/function (_React$Component) {
         onMouseDown: this.onMouseDown,
         onMouseUp: this.onMouseUp
       }, sharedProps, rootProps), isLabelTopLeft(this.props.labelPlacement) && label, /*#__PURE__*/React.createElement(RadioMarkOuter, _extends({}, sharedProps, radioMarkOuterProps), /*#__PURE__*/React.createElement(RadioMarkInner, _extends({}, sharedProps, radioMarkInnerProps))), /*#__PURE__*/React.createElement(Input, _extends({
-        "aria-invalid": this.props.error || this.props.isError || null,
+        "aria-invalid": this.props.error || null,
         checked: this.props.checked,
         disabled: this.props.disabled,
         name: this.props.name,
@@ -231,7 +226,6 @@ _defineProperty(Radio, "defaultProps", {
   autoFocus: false,
   inputRef: /*#__PURE__*/React.createRef(),
   align: 'vertical',
-  isError: false,
   error: false,
   onChange: function onChange() {},
   onMouseEnter: function onMouseEnter() {},

package/radio/radio.js.flow

@@ -39,7 +39,6 @@ class Radio extends React.Component<RadioPropsT, RadioStateT> {
     autoFocus: false,
     inputRef: React.createRef<HTMLInputElement>(),
     align: 'vertical',
-    isError: false,
     error: false,
     onChange: () => {},
     onMouseEnter: () => {},
@@ -59,11 +58,6 @@ class Radio extends React.Component<RadioPropsT, RadioStateT> {
     if (this.props.autoFocus && this.props.inputRef?.current) {
       this.props.inputRef.current.focus();
     }
-    if (__DEV__ && this.props.isError) {
-      console.warn(
-        'baseui:Radio Property "isError" will be removed in the next major version. Use "error" property instead.'
-      );
-    }
   }
 
   onMouseEnter = (e: SyntheticInputEvent<HTMLInputElement>) => {
@@ -107,7 +101,6 @@ class Radio extends React.Component<RadioPropsT, RadioStateT> {
       $disabled: this.props.disabled,
       $hasDescription: !!this.props.description,
       $isActive: this.state.isActive,
-      $isError: this.props.isError,
       $error: this.props.error,
       $isFocused: this.props.isFocused,
       $isFocusVisible: this.props.isFocused && this.props.isFocusVisible,
@@ -145,7 +138,7 @@ class Radio extends React.Component<RadioPropsT, RadioStateT> {
             <RadioMarkInner {...sharedProps} {...radioMarkInnerProps} />
           </RadioMarkOuter>
           <Input
-            aria-invalid={this.props.error || this.props.isError || null}
+            aria-invalid={this.props.error || null}
             checked={this.props.checked}
             disabled={this.props.disabled}
             name={this.props.name}

package/radio/radiogroup.js

@@ -21,10 +21,6 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -112,13 +108,6 @@ var StatelessRadioGroup = /*#__PURE__*/function (_React$Component) {
   }
 
   _createClass(StatelessRadioGroup, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (process.env.NODE_ENV !== "production" && this.props.isError) {
-        console.warn('baseui:Radio Property "isError" will be removed in the next major version. Use "error" property instead.');
-      }
-    }
-  }, {
     key: "render",
     value: function render() {
       var _this2 = this;
@@ -131,27 +120,17 @@ var StatelessRadioGroup = /*#__PURE__*/function (_React$Component) {
           RadioGroupRoot = _getOverrides2[0],
           radioGroupRootProps = _getOverrides2[1];
 
-      if (process.env.NODE_ENV !== "production") {
-        var overrideKeys = Object.keys(overrides); // TODO(v11)
-
-        if (Boolean(overrideKeys.length) && !overrideKeys.includes('RadioGroupRoot')) {
-          // eslint-disable-next-line no-console
-          console.warn("All overrides beside 'RadioGroupRoot' will be deprecated in the next major version update.\n          Pass other overrides to the 'Radio' children instead.\n        ");
-        }
-      }
-
       return /*#__PURE__*/React.createElement(RadioGroupRoot, _extends({
         id: this.props.id,
         role: "radiogroup",
         "aria-describedby": this.props['aria-describedby'],
         "aria-errormessage": this.props['aria-errormessage'],
-        "aria-invalid": this.props.error || this.props.isError || null,
+        "aria-invalid": this.props.error || null,
         "aria-label": this.props['aria-label'],
         "aria-labelledby": this.props['aria-labelledby'],
         $align: this.props.align,
         $disabled: this.props.disabled,
-        $isError: this.props.error || this.props.isError,
-        $error: this.props.error || this.props.isError,
+        $error: this.props.error,
         $required: this.props.required
       }, radioGroupRootProps), React.Children.map(this.props.children, function (child, index) {
         if (! /*#__PURE__*/React.isValidElement(child)) {
@@ -164,7 +143,6 @@ var StatelessRadioGroup = /*#__PURE__*/function (_React$Component) {
           autoFocus: _this2.props.autoFocus,
           checked: checked,
           disabled: _this2.props.disabled || child.props.disabled,
-          isError: _this2.props.isError,
           error: _this2.props.error,
           isFocused: _this2.state.focusedRadioIndex === index,
           isFocusVisible: _this2.state.isFocusVisible,
@@ -179,9 +157,7 @@ var StatelessRadioGroup = /*#__PURE__*/function (_React$Component) {
           },
           onChange: _this2.props.onChange,
           onMouseEnter: _this2.props.onMouseEnter,
-          onMouseLeave: _this2.props.onMouseLeave,
-          // will need to remove overrides pass-through on next major version
-          overrides: _objectSpread(_objectSpread({}, _this2.props.overrides), child.props.overrides)
+          onMouseLeave: _this2.props.onMouseLeave
         });
       }));
     }
@@ -197,7 +173,6 @@ _defineProperty(StatelessRadioGroup, "defaultProps", {
   autoFocus: false,
   labelPlacement: 'right',
   align: 'vertical',
-  isError: false,
   error: false,
   required: false,
   onChange: function onChange() {},

package/radio/radiogroup.js.flow

@@ -21,7 +21,6 @@ class StatelessRadioGroup extends React.Component<PropsT, StatelessStateT> {
     autoFocus: false,
     labelPlacement: 'right',
     align: 'vertical',
-    isError: false,
     error: false,
     required: false,
     onChange: () => {},
@@ -34,14 +33,6 @@ class StatelessRadioGroup extends React.Component<PropsT, StatelessStateT> {
 
   state = { isFocusVisible: false, focusedRadioIndex: -1 };
 
-  componentDidMount() {
-    if (__DEV__ && this.props.isError) {
-      console.warn(
-        'baseui:Radio Property "isError" will be removed in the next major version. Use "error" property instead.'
-      );
-    }
-  }
-
   handleFocus = (event: SyntheticInputEvent<HTMLInputElement>, index: number) => {
     if (isFocusVisible(event)) {
       this.setState({ isFocusVisible: true });
@@ -65,30 +56,18 @@ class StatelessRadioGroup extends React.Component<PropsT, StatelessStateT> {
       StyledRadioGroupRoot
     );
 
-    if (__DEV__) {
-      const overrideKeys = Object.keys(overrides);
-      // TODO(v11)
-      if (Boolean(overrideKeys.length) && !overrideKeys.includes('RadioGroupRoot')) {
-        // eslint-disable-next-line no-console
-        console.warn(`All overrides beside 'RadioGroupRoot' will be deprecated in the next major version update.
-          Pass other overrides to the 'Radio' children instead.
-        `);
-      }
-    }
-
     return (
       <RadioGroupRoot
         id={this.props.id}
         role="radiogroup"
         aria-describedby={this.props['aria-describedby']}
         aria-errormessage={this.props['aria-errormessage']}
-        aria-invalid={this.props.error || this.props.isError || null}
+        aria-invalid={this.props.error || null}
         aria-label={this.props['aria-label']}
         aria-labelledby={this.props['aria-labelledby']}
         $align={this.props.align}
         $disabled={this.props.disabled}
-        $isError={this.props.error || this.props.isError}
-        $error={this.props.error || this.props.isError}
+        $error={this.props.error}
         $required={this.props.required}
         {...radioGroupRootProps}
       >
@@ -102,7 +81,6 @@ class StatelessRadioGroup extends React.Component<PropsT, StatelessStateT> {
             autoFocus: this.props.autoFocus,
             checked,
             disabled: this.props.disabled || child.props.disabled,
-            isError: this.props.isError,
             error: this.props.error,
             isFocused: this.state.focusedRadioIndex === index,
             isFocusVisible: this.state.isFocusVisible,
@@ -114,8 +92,6 @@ class StatelessRadioGroup extends React.Component<PropsT, StatelessStateT> {
             onChange: this.props.onChange,
             onMouseEnter: this.props.onMouseEnter,
             onMouseLeave: this.props.onMouseLeave,
-            // will need to remove overrides pass-through on next major version
-            overrides: { ...this.props.overrides, ...child.props.overrides },
           });
         })}
       </RadioGroupRoot>

package/radio/styled-components.js

@@ -28,16 +28,15 @@ function getOuterColor(props) {
       $disabled = props.$disabled,
       $checked = props.$checked,
       $isFocusVisible = props.$isFocusVisible,
-      $error = props.$error,
-      $isError = props.$isError;
+      $error = props.$error;
   if ($disabled) return colors.tickFillDisabled;
 
   if (!$checked) {
     if ($isFocusVisible) return colors.borderSelected;
-    if ($error || $isError) return colors.tickBorderError;
+    if ($error) return colors.tickBorderError;
     return colors.tickBorder;
   } else {
-    if ($error || $isError) {
+    if ($error) {
       switch (getState(props)) {
         case DEFAULT:
           return colors.tickFillErrorSelected;
@@ -73,7 +72,7 @@ function getInnerColor(props) {
   }
 
   if (!props.$checked) {
-    if (props.$error || props.$isError) {
+    if (props.$error) {
       switch (getState(props)) {
         case DEFAULT:
           return colors.tickFillError;

package/radio/styled-components.js.flow

@@ -26,15 +26,14 @@ function getOuterColor(props) {
     $checked,
     $isFocusVisible,
     $error,
-    $isError,
   } = props;
   if ($disabled) return colors.tickFillDisabled;
   if (!$checked) {
     if ($isFocusVisible) return colors.borderSelected;
-    if ($error || $isError) return colors.tickBorderError;
+    if ($error) return colors.tickBorderError;
     return colors.tickBorder;
   } else {
-    if ($error || $isError) {
+    if ($error) {
       switch (getState(props)) {
         case DEFAULT:
           return colors.tickFillErrorSelected;
@@ -66,7 +65,7 @@ function getInnerColor(props) {
   }
 
   if (!props.$checked) {
-    if (props.$error || props.$isError) {
+    if (props.$error) {
       switch (getState(props)) {
         case DEFAULT:
           return colors.tickFillError;