baseui 10.12.0 → 11.0.1

package/esm/input/styled-components.js

@@ -120,10 +120,10 @@ function getRootColors($disabled, $isFocused, $error) {
 
   if ($isFocused) {
     return {
-      borderLeftColor: colors.borderFocus,
-      borderRightColor: colors.borderFocus,
-      borderTopColor: colors.borderFocus,
-      borderBottomColor: colors.borderFocus,
+      borderLeftColor: colors.borderSelected,
+      borderRightColor: colors.borderSelected,
+      borderTopColor: colors.borderSelected,
+      borderBottomColor: colors.borderSelected,
       backgroundColor: colors.inputFillActive
     };
   }

package/esm/layer/layer.js

@@ -198,10 +198,10 @@ var LayerComponent = /*#__PURE__*/function (_React$Component) {
       }, children) : children;
 
       if (typeof document !== 'undefined') {
-        var portalContainer = mountNode || container;
-
-        if (portalContainer) {
-          return /*#__PURE__*/ReactDOM.createPortal(childrenToRender, portalContainer);
+        if (mountNode) {
+          return /*#__PURE__*/ReactDOM.createPortal(childrenToRender, mountNode);
+        } else if (container) {
+          return /*#__PURE__*/ReactDOM.createPortal(childrenToRender, container);
         }
 
         return null;

package/esm/list/list-item.js

@@ -69,7 +69,11 @@ var ListItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(Root // flowlint-next-line unclear-type:off
   , _extends({
     ref: ref,
-    $shape: props.shape || SHAPE.DEFAULT
+    $shape: props.shape || SHAPE.DEFAULT,
+    "aria-label": props['aria-label'],
+    "aria-selected": props['aria-selected'],
+    id: props.id,
+    role: props.role
   }, rootProps), Artwork && /*#__PURE__*/React.createElement(ArtworkContainer, _extends({
     $artworkSize: artworkSize,
     $sublist: Boolean(props.sublist)

package/esm/list/menu-adapter.js

@@ -11,9 +11,13 @@ var MenuAdapter = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(ListItem, {
     ref: ref,
     sublist: props.sublist || props.$size === 'compact',
+    "aria-label": props['aria-label'],
+    "aria-selected": props['aria-selected'],
     artwork: props.artwork,
     artworkSize: props.artworkSize,
     endEnhancer: props.endEnhancer,
+    id: props.id,
+    role: props.role,
     overrides: mergeOverrides({
       Root: {
         props: {

package/esm/locale/index.js

@@ -12,13 +12,6 @@ export var LocaleContext = /*#__PURE__*/React.createContext(en_US);
 var LocaleProvider = function LocaleProvider(props) {
   var locale = props.locale,
       children = props.children;
-
-  if (process.env.NODE_ENV !== "production") {
-    if (locale.datepicker && locale.datepicker.timePickerAriaLabel) {
-      console.warn('`timePickerAriaLabel` will be removed in v11 - please use timePickerAriaLabel12Hour and timePickerAriaLabel24Hour instead');
-    }
-  }
-
   return /*#__PURE__*/React.createElement(LocaleContext.Provider, {
     value: extend({}, en_US, locale)
   }, children);

package/esm/menu/stateful-container.js

@@ -149,7 +149,6 @@ var MenuStatefulContainerInner = /*#__PURE__*/function (_React$Component) {
         _this.typeAheadChars = '';
       }, 500);
       var nextIndex = prevIndex;
-      event.preventDefault();
 
       var list = _this.getItems();
 

package/esm/menu/styled-components.js

@@ -94,7 +94,7 @@ export var StyledOptgroupHeader = styled('li', function (props) {
   var paddingX = props.$theme.sizing.scale300;
   var paddingY = props.$theme.sizing.scale200;
   return _objectSpread(_objectSpread({}, props.$theme.typography.font250), {}, {
-    color: props.$theme.colors.colorPrimary,
+    color: props.$theme.colors.contentPrimary,
     paddingTop: paddingY,
     paddingBottom: paddingY,
     paddingRight: paddingX,

package/esm/modal/index.js

@@ -8,4 +8,4 @@ export { default as Modal } from './modal.js';
 export { default as ModalButton } from './modal-button.js';
 export { default as FocusOnce } from './focus-once.js';
 export { SIZE, ROLE, CLOSE_SOURCE } from './constants.js';
-export { Root as StyledRoot, Backdrop as StyledBackdrop, Dialog as StyledDialog, DialogContainer as StyledDialogContainer, Close as StyledClose, ModalHeader, ModalBody, ModalFooter } from './styled-components.js';
+export { Root as StyledRoot, Dialog as StyledDialog, DialogContainer as StyledDialogContainer, Close as StyledClose, ModalHeader, ModalBody, ModalFooter } from './styled-components.js';

package/esm/modal/modal.js

@@ -52,7 +52,7 @@ import { LocaleContext } from '../locale/index.js';
 import { getOverrides } from '../helpers/overrides.js';
 import { Layer } from '../layer/index.js';
 import { SIZE, ROLE, CLOSE_SOURCE } from './constants.js';
-import { Root as StyledRoot, Backdrop as StyledBackdrop, Dialog as StyledDialog, DialogContainer as StyledDialogContainer, Close as StyledClose } from './styled-components.js';
+import { Root as StyledRoot, Dialog as StyledDialog, DialogContainer as StyledDialogContainer, Close as StyledClose } from './styled-components.js';
 import { CloseIcon } from './close-icon.js';
 import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible.js';
 
@@ -76,11 +76,13 @@ var Modal = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "animateStartTimer", void 0);
 
+    _defineProperty(_assertThisInitialized(_this), "dialogContainerRef", /*#__PURE__*/React.createRef());
+
     _defineProperty(_assertThisInitialized(_this), "lastFocus", null);
 
     _defineProperty(_assertThisInitialized(_this), "lastMountNodeOverflowStyle", null);
 
-    _defineProperty(_assertThisInitialized(_this), "_refs", {});
+    _defineProperty(_assertThisInitialized(_this), "rootRef", /*#__PURE__*/React.createRef());
 
     _defineProperty(_assertThisInitialized(_this), "state", {
       isVisible: false,
@@ -113,10 +115,7 @@ var Modal = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "onDocumentClick", function (e) {
-      if (e.target && e.target instanceof HTMLElement && ( // Handles modal closure when unstable_ModalBackdropScroll is set to true
-      e.target.contains(_this.getRef('DialogContainer').current) || // Handles modal closure when unstable_ModalBackdropScroll is set to false
-      // $FlowFixMe
-      e.target.contains(_this.getRef('DeprecatedBackdrop').current))) {
+      if (e.target && e.target instanceof HTMLElement && e.target.contains(_this.dialogContainerRef.current)) {
         _this.onBackdropClick();
       }
     });
@@ -147,18 +146,10 @@ var Modal = /*#__PURE__*/function (_React$Component) {
     value: function componentDidMount() {
       this.setState({
         mounted: true
-      }); // TODO(v11)
+      });
 
       if (process.env.NODE_ENV !== "production") {
-        if (!this.props.unstable_ModalBackdropScroll) {
-          console.warn("Consider setting 'unstable_ModalBackdropScroll' prop to true\n        to prepare for the next major version upgrade. 'unstable_ModalBackdropScroll'\n        prop will be removed in the next major version but implemented as the default behavior.");
-        }
-
-        if (this.props.overrides && this.props.overrides.Backdrop) {
-          console.warn("Backdrop element will be removed in the next major version in favor of\n        DialogContainer element that will have the backdrop styles and backdrop click handle.\n        Consider setting 'unstable_ModalBackdropScroll' prop to true that will apply backdrop\n        styles to DialogContainer enable modal scrolling while cursor in over the backdrop.\n        Then pass backdrop overrides to DialogContainer instead. Tha will help you with\n        the next major version upgrade.");
-        } // $FlowFixMe: flow complains that this prop doesn't exist
-
-
+        // $FlowFixMe: flow complains that this prop doesn't exist
         if (this.props.closable) {
           console.warn('The property `closable` is not supported on the Modal. Did you mean `closeable`?');
         }
@@ -226,7 +217,7 @@ var Modal = /*#__PURE__*/function (_React$Component) {
 
       // Sometimes scroll starts past zero, possibly due to animation
       // Reset scroll to 0 (other libraries do this as well)
-      var rootRef = this.getRef('Root').current;
+      var rootRef = this.rootRef.current;
 
       if (rootRef) {
         rootRef.scrollTop = 0;
@@ -266,8 +257,7 @@ var Modal = /*#__PURE__*/function (_React$Component) {
           isOpen = _this$props.isOpen,
           size = _this$props.size,
           role = _this$props.role,
-          closeable = _this$props.closeable,
-          unstable_ModalBackdropScroll = _this$props.unstable_ModalBackdropScroll;
+          closeable = _this$props.closeable;
       return {
         $animate: animate,
         $isVisible: this.state.isVisible,
@@ -275,7 +265,6 @@ var Modal = /*#__PURE__*/function (_React$Component) {
         $size: size,
         $role: role,
         $closeable: !!closeable,
-        $unstable_ModalBackdropScroll: unstable_ModalBackdropScroll,
         $isFocusVisible: this.state.isFocusVisible
       };
     }
@@ -298,15 +287,6 @@ var Modal = /*#__PURE__*/function (_React$Component) {
       var children = this.props.children;
       return typeof children === 'function' ? children() : children;
     }
-  }, {
-    key: "getRef",
-    value: function getRef(component) {
-      if (!this._refs[component]) {
-        this._refs[component] = /*#__PURE__*/React.createRef();
-      }
-
-      return this._refs[component];
-    }
   }, {
     key: "renderModal",
     value: function renderModal() {
@@ -317,15 +297,12 @@ var Modal = /*#__PURE__*/function (_React$Component) {
           overrides = _this$props2$override === void 0 ? {} : _this$props2$override,
           closeable = _this$props2.closeable,
           role = _this$props2.role,
-          unstable_ModalBackdropScroll = _this$props2.unstable_ModalBackdropScroll,
-          autofocus = _this$props2.autofocus,
           autoFocus = _this$props2.autoFocus,
           focusLock = _this$props2.focusLock,
           returnFocus = _this$props2.returnFocus;
       var RootOverride = overrides.Root,
           DialogOverride = overrides.Dialog,
           DialogContainerOverride = overrides.DialogContainer,
-          BackdropOverride = overrides.Backdrop,
           CloseOverride = overrides.Close;
 
       var _getOverrides = getOverrides(RootOverride, StyledRoot),
@@ -333,59 +310,42 @@ var Modal = /*#__PURE__*/function (_React$Component) {
           Root = _getOverrides2[0],
           rootProps = _getOverrides2[1];
 
-      var _getOverrides3 = getOverrides(BackdropOverride, StyledBackdrop),
+      var _getOverrides3 = getOverrides(DialogContainerOverride, StyledDialogContainer),
           _getOverrides4 = _slicedToArray(_getOverrides3, 2),
-          Backdrop = _getOverrides4[0],
-          backdropProps = _getOverrides4[1];
+          DialogContainer = _getOverrides4[0],
+          dialogContainerProps = _getOverrides4[1];
 
-      var _getOverrides5 = getOverrides(DialogContainerOverride, StyledDialogContainer),
+      var _getOverrides5 = getOverrides(DialogOverride, StyledDialog),
           _getOverrides6 = _slicedToArray(_getOverrides5, 2),
-          DialogContainer = _getOverrides6[0],
-          dialogContainerProps = _getOverrides6[1];
+          Dialog = _getOverrides6[0],
+          dialogProps = _getOverrides6[1];
 
-      var _getOverrides7 = getOverrides(DialogOverride, StyledDialog),
+      var _getOverrides7 = getOverrides(CloseOverride, StyledClose),
           _getOverrides8 = _slicedToArray(_getOverrides7, 2),
-          Dialog = _getOverrides8[0],
-          dialogProps = _getOverrides8[1];
-
-      var _getOverrides9 = getOverrides(CloseOverride, StyledClose),
-          _getOverrides10 = _slicedToArray(_getOverrides9, 2),
-          Close = _getOverrides10[0],
-          closeProps = _getOverrides10[1];
+          Close = _getOverrides8[0],
+          closeProps = _getOverrides8[1];
 
       var sharedProps = this.getSharedProps();
       var children = this.getChildren();
-
-      if (autofocus === false && process.env.NODE_ENV !== "production") {
-        console.warn("The prop \"autofocus\" is deprecated in favor of \"autoFocus\" to be consistent across the project.\n        The property \"autofocus\" will be removed in a future major version.");
-      } // Handles backdrop click when `unstable_ModalBackdropScroll` is set to true
-
-
-      if (dialogContainerProps.ref) {
-        this._refs.DialogContainer = dialogContainerProps.ref;
-      }
-
-      var dialogContainerConditionalProps = unstable_ModalBackdropScroll ? {
-        ref: this.getRef('DialogContainer')
-      } : {};
       return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, function (locale) {
         return /*#__PURE__*/React.createElement(FocusLock, {
           disabled: !focusLock // Allow focus to escape when UI is within an iframe
           ,
           crossFrame: false,
           returnFocus: returnFocus,
-          autoFocus: autofocus !== null ? autofocus : autoFocus
+          autoFocus: autoFocus
         }, /*#__PURE__*/React.createElement(Root, _extends({
-          "data-baseweb": "modal",
-          ref: _this3.getRef('Root')
-        }, sharedProps, rootProps), /*#__PURE__*/React.createElement(Backdrop, _extends({}, unstable_ModalBackdropScroll ? {} : {
-          ref: _this3.getRef('DeprecatedBackdrop')
-        }, sharedProps, backdropProps)), /*#__PURE__*/React.createElement(DialogContainer, _extends({}, dialogContainerConditionalProps, sharedProps, dialogContainerProps), /*#__PURE__*/React.createElement(Dialog, _extends({
+          "data-baseweb": "modal" // flowlint-next-line unclear-type:off
+          ,
+          ref: _this3.rootRef
+        }, sharedProps, rootProps), /*#__PURE__*/React.createElement(DialogContainer // flowlint-next-line unclear-type:off
+        , _extends({
+          ref: _this3.dialogContainerRef
+        }, sharedProps, dialogContainerProps), /*#__PURE__*/React.createElement(Dialog, _extends({
           tabIndex: -1,
           "aria-modal": true,
           "aria-label": "dialog",
-          role: role,
-          ref: _this3.getRef('Dialog')
+          role: role
         }, sharedProps, dialogProps), children, closeable ? /*#__PURE__*/React.createElement(Close, _extends({
           "aria-label": locale.modal.close,
           onClick: _this3.onCloseClick
@@ -421,8 +381,6 @@ var Modal = /*#__PURE__*/function (_React$Component) {
 
 _defineProperty(Modal, "defaultProps", {
   animate: true,
-  // TODO(v11): remove
-  autofocus: null,
   autoFocus: true,
   focusLock: true,
   returnFocus: true,
@@ -431,8 +389,7 @@ _defineProperty(Modal, "defaultProps", {
   isOpen: false,
   overrides: {},
   role: ROLE.dialog,
-  size: SIZE.default,
-  unstable_ModalBackdropScroll: false
+  size: SIZE.default
 });
 
 export default Modal;

package/esm/modal/styled-components.js

@@ -47,61 +47,29 @@ export var Root = styled('div', function (props) {
   };
 });
 Root.displayName = "Root";
-export var Backdrop = styled('div', function (props) {
+export var DialogContainer = styled('div', function (props) {
   var $animate = props.$animate,
       $isOpen = props.$isOpen,
       $isVisible = props.$isVisible,
-      $theme = props.$theme,
-      $unstable_ModalBackdropScroll = props.$unstable_ModalBackdropScroll;
-
-  if ($unstable_ModalBackdropScroll) {
-    return {};
-  }
-
-  return _objectSpread({
-    position: 'fixed',
-    right: 0,
-    bottom: 0,
-    top: 0,
-    left: 0,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    // Remove grey highlight
-    WebkitTapHighlightColor: 'transparent',
-    // Disable scroll capabilities.
-    touchAction: 'none',
-    opacity: $isVisible && $isOpen ? 1 : 0
-  }, $animate ? {
+      $theme = props.$theme;
+  var animationRules = {
     transitionProperty: 'opacity',
     transitionDuration: $theme.animation.timing400,
     transitionTimingFunction: $theme.animation.easeOutCurve
-  } : null);
-});
-Backdrop.displayName = "Backdrop";
-export var DialogContainer = styled('div', function (props) {
-  var $animate = props.$animate,
-      $isOpen = props.$isOpen,
-      $isVisible = props.$isVisible,
-      $theme = props.$theme,
-      $unstable_ModalBackdropScroll = props.$unstable_ModalBackdropScroll;
+  };
   return _objectSpread({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
     width: '100%',
     minHeight: '100%',
-    pointerEvents: 'none',
-    userSelect: 'none'
-  }, $unstable_ModalBackdropScroll ? _objectSpread({
+    userSelect: 'none',
     pointerEvents: 'auto',
     backgroundColor: 'rgba(0, 0, 0, 0.5)',
     // Remove grey highlight
     WebkitTapHighlightColor: 'transparent',
     opacity: $isVisible && $isOpen ? 1 : 0
-  }, $animate ? {
-    transitionProperty: 'opacity',
-    transitionDuration: $theme.animation.timing400,
-    transitionTimingFunction: $theme.animation.easeOutCurve
-  } : null) : {});
+  }, $animate ? animationRules : null);
 });
 DialogContainer.displayName = "DialogContainer";
 export var Dialog = styled('div', function (props) {

package/esm/phone-input/default-props.js

@@ -9,7 +9,7 @@ var defaultProps = {
   'aria-label': 'Please enter a phone number without the country dial code.',
   'aria-describedby': null,
   'aria-labelledby': null,
-  clearable: false,
+  clearable: true,
   focusLock: false,
   country: {
     label: 'United States',

package/esm/phone-input/index.js

@@ -6,13 +6,9 @@ LICENSE file in the root directory of this source tree.
 */
 export { default as PhoneInput } from './phone-input.js';
 export { default as PhoneInputLite } from './phone-input-lite.js';
-export { default as PhoneInputNext } from './phone-input-next.js';
 export { default as StatefulPhoneInput } from './stateful-phone-input.js';
-export { default as StatefulPhoneInputNext } from './stateful-phone-input-next.js';
 export { default as StatefulPhoneInputContainer } from './stateful-phone-input-container.js';
 export { default as CountryPicker } from './country-picker.js';
-export { default as CountrySelect } from './country-select.js';
-export { default as CountrySelectDropdown } from './country-select-dropdown.js';
 export { default as Flag, StyledFlag } from './flag.js';
 export * from './constants.js';
 export * from './styled-components.js';

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

@@ -12,6 +12,8 @@ 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; }
@@ -23,19 +25,17 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 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';
-
-var country = defaultProps.country,
-    lightDefaultProps = _objectWithoutProperties(defaultProps, ["country"]);
-
-PhoneInputLite.defaultProps = lightDefaultProps;
+PhoneInputLite.defaultProps = defaultProps;
 export 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,
@@ -53,45 +53,67 @@ export default 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 = useRef(null);
+  var baseDialCodeOverride = {
+    component: 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 = 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,
-      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 = getOverrides(overrides.Input, DefaultInput),
+  var _getOverrides = getOverrides(overrides.Root, StyledPhoneInputRoot),
       _getOverrides2 = _slicedToArray(_getOverrides, 2),
-      Input = _getOverrides2[0],
-      inputProps = _getOverrides2[1];
+      Root = _getOverrides2[0],
+      rootProps = _getOverrides2[1];
+
+  var _getOverrides3 = getOverrides(overrides.Input, DefaultInput),
+      _getOverrides4 = _slicedToArray(_getOverrides3, 2),
+      Input = _getOverrides4[0],
+      inputProps = _getOverrides4[1];
 
   inputProps.overrides = mergeOverrides(baseOverrides, inputProps.overrides);
-  return /*#__PURE__*/React.createElement(Input, _extends({
+  return /*#__PURE__*/React.createElement(Root, _extends({}, rootProps, {
+    "data-baseweb": "phone-input"
+  }), /*#__PURE__*/React.createElement(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
+  }), /*#__PURE__*/React.createElement(Input, _extends({
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
     "aria-describedby": ariaDescribedBy,
@@ -108,6 +130,7 @@ export default function PhoneInputLite(props) {
     placeholder: placeholder,
     size: size,
     type: "text",
-    value: text
-  }, restProps, inputProps));
+    value: text,
+    clearable: clearable
+  }, restProps, inputProps)));
 }

package/esm/radio/radio.js

@@ -122,10 +122,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",
@@ -169,7 +165,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,
@@ -194,7 +189,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,
@@ -224,7 +219,6 @@ _defineProperty(Radio, "defaultProps", {
   autoFocus: false,
   inputRef: /*#__PURE__*/React.createRef(),
   align: 'vertical',
-  isError: false,
   error: false,
   onChange: function onChange() {},
   onMouseEnter: function onMouseEnter() {},