baseui 10.10.0 → 10.12.0

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

@@ -5,14 +5,14 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-import React, {useRef} from 'react';
-import {COUNTRIES} from './constants.js';
+import React, { useRef } from 'react';
+import { COUNTRIES } from './constants.js';
 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 {getOverrides, mergeOverrides} from '../helpers/overrides.js';
-import type {LitePropsT} from './types.js';
+import { StyledPhoneInputRoot, StyledDialCode } from './styled-components.js';
+import { Input as DefaultInput } from '../input/index.js';
+import { getOverrides, mergeOverrides } from '../helpers/overrides.js';
+import type { LitePropsT } from './types.js';
 
 PhoneInputNext.defaultProps = {
   ...defaultProps,
@@ -49,23 +49,23 @@ export default function PhoneInputNext(props: LitePropsT) {
 
   const baseDialCodeOverride = {
     component: StyledDialCode,
-    style: ({$theme: {direction, sizing}}) => {
-      const marginDir = direction === 'rtl' ? 'marginRight' : 'marginLeft';
+    style: ({ $theme: { direction, sizing } }) => {
+      const marginDir: string = direction === 'rtl' ? 'marginRight' : 'marginLeft';
       return {
         [marginDir]: sizing.scale600,
       };
     },
-    props: {children: country.dialCode},
+    props: { children: country.dialCode },
   };
   const mergedDialCodeOverride = mergeOverrides(
-    {DialCode: baseDialCodeOverride},
-    {DialCode: overrides.DialCode || {}},
+    { DialCode: baseDialCodeOverride },
+    { DialCode: overrides.DialCode || {} }
   );
 
   const baseOverrides = {
     Input: {
-      style: ({$theme: {direction, sizing}}) => {
-        const paddingDir = direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
+      style: ({ $theme: { direction, sizing } }) => {
+        const paddingDir: string = direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
         return {
           [paddingDir]: sizing.scale100,
         };
@@ -75,7 +75,6 @@ export default function PhoneInputNext(props: LitePropsT) {
   };
   const [Root, rootProps] = getOverrides(overrides.Root, StyledPhoneInputRoot);
   const [Input, inputProps] = getOverrides(overrides.Input, DefaultInput);
-  // $FlowFixMe
   inputProps.overrides = mergeOverrides(baseOverrides, inputProps.overrides);
   return (
     <Root {...rootProps} data-baseweb="phone-input-next">

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

@@ -6,10 +6,10 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import React from 'react';
-import {COUNTRIES} from './constants.js';
+import { COUNTRIES } from './constants.js';
 import PhoneInputLite from './phone-input-lite.js';
 import defaultProps from './default-props.js';
-import type {PropsT} from './types.js';
+import type { PropsT } from './types.js';
 
 PhoneInput.defaultProps = defaultProps;
 

package/phone-input/stateful-phone-input-container.js.flow

@@ -7,7 +7,7 @@ LICENSE file in the root directory of this source tree.
 // @flow
 import React from 'react';
 // needs to be removed from here
-import {COUNTRIES, STATE_CHANGE_TYPE} from './constants.js';
+import { COUNTRIES, STATE_CHANGE_TYPE } from './constants.js';
 import type {
   StatefulPhoneInputContainerPropsT,
   StateT,
@@ -15,13 +15,13 @@ import type {
   StateChangeT,
 } from './types.js';
 import defaultProps from './default-props.js';
-import type {OnChangeParamsT} from '../select/types.js';
+import type { OnChangeParamsT } from '../select/types.js';
 
 const defaultStateReducer: StateReducerT = (type, nextState) => nextState;
 
 export default class StatefulPhoneInputContainer extends React.Component<
   StatefulPhoneInputContainerPropsT,
-  StateT,
+  StateT
 > {
   static defaultProps = {
     initialState: {
@@ -34,7 +34,7 @@ export default class StatefulPhoneInputContainer extends React.Component<
     overrides: {},
   };
 
-  state = {text: '', country: COUNTRIES.US, ...this.props.initialState};
+  state = { text: '', country: COUNTRIES.US, ...this.props.initialState };
 
   internalSetState = (type: StateChangeT, nextState: $Shape<StateT>) => {
     this.setState(this.props.stateReducer(type, nextState, this.state));

package/phone-input/stateful-phone-input-next.js.flow

@@ -9,13 +9,11 @@ import React from 'react';
 import StatefulPhoneInputContainer from './stateful-phone-input-container.js';
 import PhoneInputNext from './phone-input-next.js';
 import defaultProps from './default-props.js';
-import type {PropsT, StatefulPhoneInputPropsT} from './types.js';
+import type { PropsT, StatefulPhoneInputPropsT } from './types.js';
 
-StatefulPhoneInputNext.defaultProps = {...defaultProps, clearable: true};
+StatefulPhoneInputNext.defaultProps = { ...defaultProps, clearable: true };
 
-export default function StatefulPhoneInputNext(
-  props: StatefulPhoneInputPropsT,
-) {
+export default function StatefulPhoneInputNext(props: StatefulPhoneInputPropsT) {
   return (
     <StatefulPhoneInputContainer {...props}>
       {(childrenProps: PropsT) => <PhoneInputNext {...childrenProps} />}

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

@@ -9,7 +9,7 @@ import React from 'react';
 import StatefulPhoneInputContainer from './stateful-phone-input-container.js';
 import PhoneInput from './phone-input.js';
 import defaultProps from './default-props.js';
-import type {PropsT, StatefulPhoneInputPropsT} from './types.js';
+import type { PropsT, StatefulPhoneInputPropsT } from './types.js';
 
 StatefulPhoneInput.defaultProps = defaultProps;
 

package/phone-input/styled-components.js.flow

@@ -6,27 +6,24 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import {SIZE} from './constants.js';
-import {styled, withStyle, withWrapper} from '../styles/index.js';
-import {StyledList} from '../menu/index.js';
-import {
-  StyledDropdownListItem,
-  StyledRoot as SelectStyledRoot,
-} from '../select/index.js';
+import { SIZE } from './constants.js';
+import { styled, withStyle, withWrapper } from '../styles/index.js';
+import { StyledList } from '../menu/index.js';
+import { StyledDropdownListItem, StyledRoot as SelectStyledRoot } from '../select/index.js';
 import defaultProps from '../select/default-props.js';
-import type {SizeT} from './types.js';
+import type { SizeT } from './types.js';
 
 type SizeStyleProps = {
   $size?: SizeT,
 };
-type HeightStyleProps = {$height: string};
+type HeightStyleProps = { $height: string };
 
 // The root element of the PhoneInputNext
-export const StyledPhoneInputRoot = styled('div', {display: 'flex'});
+export const StyledPhoneInputRoot = styled('div', { display: 'flex' });
 
 export const StyledFlagContainer = styled<SizeStyleProps>(
   'span',
-  ({$size = SIZE.default, $theme: {sizing}}) => {
+  ({ $size = SIZE.default, $theme: { sizing } }) => {
     const sizeToFont = {
       [SIZE.mini]: sizing.scale700,
       [SIZE.compact]: sizing.scale800,
@@ -36,13 +33,13 @@ export const StyledFlagContainer = styled<SizeStyleProps>(
     return {
       fontSize: sizeToFont[$size],
     };
-  },
+  }
 );
 
 // An override component for the Select's Root styled element
 export const StyledRoot = withStyle<typeof SelectStyledRoot, SizeStyleProps>(
   SelectStyledRoot,
-  props => {
+  (props) => {
     // hard coded widths for the flag dropdown anchor
     const sizeToWidth = {
       [SIZE.mini]: '50px',
@@ -55,90 +52,88 @@ export const StyledRoot = withStyle<typeof SelectStyledRoot, SizeStyleProps>(
       width: sizeToWidth[props.$size || SIZE.default],
       display: 'inline-block',
     };
-  },
+  }
 );
 
-export const StyledDialCode = styled<{}>(
-  'div',
-  ({$theme: {direction, sizing}}) => {
-    const marginDir = direction === 'rtl' ? 'marginRight' : 'marginLeft';
-    return {
-      [marginDir]: sizing.scale100,
-      display: 'flex',
-      alignItems: 'center',
-    };
-  },
-);
+export const StyledDialCode = styled<{}>('div', ({ $theme: { direction, sizing } }) => {
+  const marginDir: string = direction === 'rtl' ? 'marginRight' : 'marginLeft';
+  return {
+    [marginDir]: sizing.scale100,
+    display: 'flex',
+    alignItems: 'center',
+  };
+});
 
 export const StyledCountrySelectContainer = styled('div', {
   display: 'flex',
   alignItems: 'center',
 });
 
-export const StyledCountrySelectDropdownContainer = withStyle<
-  typeof StyledList,
-  HeightStyleProps,
->(StyledList, props => {
-  const {$height = defaultProps.maxDropdownHeight} = props;
-  return {
-    height: $height,
+export const StyledCountrySelectDropdownContainer = withStyle<typeof StyledList, HeightStyleProps>(
+  StyledList,
+  (props) => {
+    const { $height = defaultProps.maxDropdownHeight } = props;
+    return {
+      height: $height,
+      paddingTop: 0,
+      paddingBottom: 0,
+    };
+  }
+);
+
+export const StyledCountrySelectDropdownListItemElement = withStyle<typeof StyledDropdownListItem>(
+  StyledDropdownListItem,
+  {
     paddingTop: 0,
     paddingBottom: 0,
-  };
-});
-
-export const StyledCountrySelectDropdownListItemElement = withStyle<
-  typeof StyledDropdownListItem,
->(StyledDropdownListItem, {
-  paddingTop: 0,
-  paddingBottom: 0,
-  paddingLeft: 0,
-  paddingRight: 0,
-  display: 'flex',
-  alignItems: 'center',
-  height: '42px',
-});
+    paddingLeft: 0,
+    paddingRight: 0,
+    display: 'flex',
+    alignItems: 'center',
+    height: '42px',
+  }
+);
 
 export const StyledCountrySelectDropdownListItem = withWrapper(
   StyledCountrySelectDropdownListItemElement,
-  Styled =>
-    function StyledCountrySelectDropdownListItem({item, ...restProps}) {
+  (Styled) =>
+    function StyledCountrySelectDropdownListItem({ item, ...restProps }) {
       return <Styled {...restProps} />;
-    },
+    }
 );
 
 export const StyledCountrySelectDropdownFlagColumn = styled<{}>(
   'div',
-  ({$theme: {direction, sizing}}) => {
-    const paddingDir = direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
+  ({ $theme: { direction, sizing } }) => {
+    const paddingDir: string = direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
     return {
       [paddingDir]: sizing.scale600,
       display: 'flex',
       alignItems: 'center',
     };
-  },
+  }
 );
 
 export const StyledCountrySelectDropdownNameColumn = styled<{}>(
   'div',
-  ({$theme: {direction, sizing}}) => {
-    const paddingDir = direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
+  ({ $theme: { direction, sizing } }) => {
+    const paddingDir: string = direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
     return {
       [paddingDir]: sizing.scale600,
     };
-  },
+  }
 );
 
 export const StyledCountrySelectDropdownDialcodeColumn = styled<{}>(
   'div',
-  ({$theme: {direction, sizing}}) => {
-    const paddingDir = direction === 'rtl' ? 'paddingLeft' : 'paddingRight';
-    const marginDir = direction === 'rtl' ? 'marginRight' : 'marginLeft';
+  ({ $theme: { direction, sizing } }) => {
+    const paddingDir: string = direction === 'rtl' ? 'paddingLeft' : 'paddingRight';
+    const marginDir: string = direction === 'rtl' ? 'marginRight' : 'marginLeft';
     return {
       [paddingDir]: sizing.scale600,
       [marginDir]: 'auto',
     };
-  },
+  }
 );
 
 declare var __DEV__: boolean;

package/phone-input/types.js.flow

@@ -6,13 +6,14 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import {STATE_CHANGE_TYPE, SIZE, COUNTRIES} from './constants.js';
-import type {OverrideT} from '../helpers/overrides.js';
-import type {OnChangeParamsT} from '../select/types.js';
+import { STATE_CHANGE_TYPE, SIZE, COUNTRIES } from './constants.js';
+import type { OverrideT } from '../helpers/overrides.js';
+import type { OnChangeParamsT } from '../select/types.js';
 
+export type ReactRefT<T> = { current: null | T } | {| current: null | T |};
 export type SizeT = $Keys<typeof SIZE>;
-
 export type CountryIsoT = $Keys<typeof COUNTRIES>;
+export type CountriesT = $ReadOnly<CountryT>;
 
 export type CountryT = $ReadOnly<{
   dialCode: string,
@@ -20,8 +21,6 @@ export type CountryT = $ReadOnly<{
   label: string,
 }>;
 
-export type CountriesT = $ReadOnly<CountryT>;
-
 export type StateT = {
   country: CountryT,
   text: string,
@@ -29,18 +28,14 @@ export type StateT = {
 
 export type StateChangeT = $Keys<typeof STATE_CHANGE_TYPE>;
 
-export type StateReducerT = (
-  type: StateChangeT,
-  nextState: StateT,
-  currentState: StateT,
-) => StateT;
+export type StateReducerT = (type: StateChangeT, nextState: StateT, currentState: StateT) => StateT;
 
 export type mapIsoToLabelT = (iso: string) => string;
 
 // Props
 
 export type CountrySelectDropdownPropsT = {
-  // eslint-disable-next-line flowtype/no-weak-types
+  //flowlint-next-line unclear-type:off
   children: $ReadOnlyArray<React.Element<any>>,
   $country: CountryT,
   $mapIsoToLabel?: mapIsoToLabelT,
@@ -59,11 +54,11 @@ export type CountrySelectDropdownPropsT = {
 };
 
 export type CountrySelectPropsT = {
-  countries: {[string]: CountryT},
+  countries: { [string]: CountryT },
   country: CountryT,
   disabled: boolean,
   error: boolean,
-  inputRef: {current: HTMLInputElement | null},
+  inputRef: ReactRefT<HTMLInputElement>,
   onCountryChange: (event: OnChangeParamsT) => mixed,
   mapIsoToLabel?: mapIsoToLabelT,
   maxDropdownHeight: string,
@@ -140,12 +135,12 @@ export type PropsT = {
 
 export type LitePropsT = {
   ...$Exact<PropsT>,
-  countries: {[string]: CountryT},
+  countries: { [string]: CountryT },
 };
 
 export type StatefulPhoneInputContainerPropsT = {
   ...$Exact<PropsT>,
-  children: PropsT => React.Node,
+  children: (PropsT) => React.Node,
   initialState: StateT,
   stateReducer: StateReducerT,
   onTextChange: (event: SyntheticInputEvent<HTMLInputElement>) => mixed,

package/phone-input/utils.js.flow

@@ -18,14 +18,12 @@ export function iso2FlagEmoji(iso: string) {
       console.warn(
         `iso argument must be an ISO 3166-1 alpha-2 string, but got '${
           type === 'string' ? iso : type
-        }' instead.`,
+        }' instead.`
       );
     }
     return;
   }
-  const chars = Array.from(iso.toUpperCase()).map(
-    char => char.charCodeAt(0) + OFFSET,
-  );
+  const chars = Array.from(iso.toUpperCase()).map((char) => char.charCodeAt(0) + OFFSET);
   return String.fromCodePoint(...chars);
 }
 

package/pin-code/default-props.js.flow

@@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-import {SIZE} from '../input/index.js';
+import { SIZE } from '../input/index.js';
 
 const defaultProps = {
   'aria-label': 'Please enter your pin code',

package/pin-code/index.js.flow

@@ -6,12 +6,10 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-export {default as PinCode} from './pin-code.js';
-export {
-  default as StatefulPinCodeContainer,
-} from './stateful-pin-code-container.js';
-export {default as StatefulPinCode} from './stateful-pin-code.js';
-export {SIZE} from '../input/constants.js';
+export { default as PinCode } from './pin-code.js';
+export { default as StatefulPinCodeContainer } from './stateful-pin-code-container.js';
+export { default as StatefulPinCode } from './stateful-pin-code.js';
+export { SIZE } from '../input/constants.js';
 
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;

package/pin-code/pin-code.js

@@ -125,8 +125,7 @@ var PinCode = /*#__PURE__*/function (_React$Component) {
             type: typeof this.props.mask === 'boolean' && this.props.mask ? 'password' : 'text'
           }
         }
-      }; // $FlowFixMe
-
+      };
       inputProps.overrides = (0, _overrides.mergeOverrides)(baseOverrides, inputProps.overrides);
       return /*#__PURE__*/_react.default.createElement(Root, _extends({
         "data-baseweb": "pin-code"

package/pin-code/pin-code.js.flow

@@ -14,9 +14,9 @@ import {
   StyledInputOverrideRoot,
   StyledInputOverrideInput,
 } from './styled-components.js';
-import type {PropsT, StateT} from './types.js';
-import {getOverrides, mergeOverrides} from '../helpers/overrides.js';
-import {Input as DefaultInput} from '../input/index.js';
+import type { PropsT, StateT } from './types.js';
+import { getOverrides, mergeOverrides } from '../helpers/overrides.js';
+import { Input as DefaultInput } from '../input/index.js';
 
 export default class PinCode extends React.Component<PropsT, StateT> {
   static defaultProps = defaultProps;
@@ -43,27 +43,17 @@ export default class PinCode extends React.Component<PropsT, StateT> {
   }
 
   render() {
-    const [Root, rootProps] = getOverrides(
-      this.props.overrides.Root,
-      StyledRoot,
-    );
-    const [Input, inputProps] = getOverrides(
-      this.props.overrides.Input,
-      DefaultInput,
-    );
+    const [Root, rootProps] = getOverrides(this.props.overrides.Root, StyledRoot);
+    const [Input, inputProps] = getOverrides(this.props.overrides.Input, DefaultInput);
     const baseOverrides = {
-      Root: {component: StyledInputOverrideRoot},
+      Root: { component: StyledInputOverrideRoot },
       Input: {
         component: StyledInputOverrideInput,
         props: {
-          type:
-            typeof this.props.mask === 'boolean' && this.props.mask
-              ? 'password'
-              : 'text',
+          type: typeof this.props.mask === 'boolean' && this.props.mask ? 'password' : 'text',
         },
       },
     };
-    // $FlowFixMe
     inputProps.overrides = mergeOverrides(baseOverrides, inputProps.overrides);
     return (
       <Root data-baseweb="pin-code" {...rootProps}>
@@ -81,9 +71,9 @@ export default class PinCode extends React.Component<PropsT, StateT> {
               inputRef={this._inputRefs.ref(i)}
               key={i}
               name={this.props.name}
-              onBlur={() => this.setState({hasFocus: false})}
-              onFocus={() => this.setState({hasFocus: true})}
-              onChange={event => {
+              onBlur={() => this.setState({ hasFocus: false })}
+              onFocus={() => this.setState({ hasFocus: true })}
+              onChange={(event) => {
                 const eventValue = event.target.value;
                 // in the case of an autocomplete or copy and paste
                 if (eventValue.length > 2) {
@@ -92,7 +82,7 @@ export default class PinCode extends React.Component<PropsT, StateT> {
                     eventValue.length === this.props.values.length &&
                     eventValue.match(/^[0-9]+$/)
                   ) {
-                    this.props.onChange({values: eventValue.split(''), event});
+                    this.props.onChange({ values: eventValue.split(''), event });
                   }
                   return;
                 }
@@ -100,7 +90,7 @@ export default class PinCode extends React.Component<PropsT, StateT> {
                 if (eventValue === '') {
                   const newValues = this.props.values.slice();
                   newValues[i] = '';
-                  this.props.onChange({values: newValues, event});
+                  this.props.onChange({ values: newValues, event });
                   return;
                 }
                 // we want to override the input value with the last digit typed
@@ -115,18 +105,15 @@ export default class PinCode extends React.Component<PropsT, StateT> {
                 if (newValue.match(/^[0-9]$/)) {
                   const newValues = this.props.values.slice();
                   newValues[i] = newValue;
-                  this.props.onChange({values: newValues, event});
+                  this.props.onChange({ values: newValues, event });
                   // tab to next pin code input if we aren't at end already
-                  if (
-                    this.props.manageFocus &&
-                    i < this.props.values.length - 1
-                  ) {
+                  if (this.props.manageFocus && i < this.props.values.length - 1) {
                     const inputRef = this._inputRefs.map.get(i + 1);
                     if (inputRef && inputRef.focus) inputRef.focus();
                   }
                 }
               }}
-              onKeyDown={event => {
+              onKeyDown={(event) => {
                 // if we see a backspace/delete and the input is empty, transfer focus backward
                 if (
                   this.props.manageFocus &&

package/pin-code/stateful-pin-code-container.js.flow

@@ -15,29 +15,25 @@ import type {
   StateReducerT,
 } from './types.js';
 import defaultProps from './default-props.js';
-import {STATE_CHANGE_TYPE} from '../input/index.js';
+import { STATE_CHANGE_TYPE } from '../input/index.js';
 
 const stateReducer: StateReducerT = (type, nextState) => nextState;
 
 export default class StatefulPinCodeContainer extends React.Component<
   StatefulPinCodeContainerPropsT,
-  StatefulPinCodeContainerStateT,
+  StatefulPinCodeContainerStateT
 > {
   static defaultProps = {
-    initialState: {values: defaultProps.values},
+    initialState: { values: defaultProps.values },
     stateReducer,
     onChange: defaultProps.onChange,
   };
 
   state = this.props.initialState;
 
-  handleChange = ({values, event}: ChangeEventT) => {
-    this.props.onChange({values, event});
-    const nextState = this.props.stateReducer(
-      STATE_CHANGE_TYPE.change,
-      {values},
-      this.state,
-    );
+  handleChange = ({ values, event }: ChangeEventT) => {
+    this.props.onChange({ values, event });
+    const nextState = this.props.stateReducer(STATE_CHANGE_TYPE.change, { values }, this.state);
     this.setState(nextState);
   };
 

package/pin-code/stateful-pin-code.js.flow

@@ -10,7 +10,7 @@ import React from 'react';
 import defaultProps from './default-props.js';
 import PinCode from './pin-code.js';
 import StatefulPinCodeContainer from './stateful-pin-code-container.js';
-import type {PropsT, StatefulPinCodePropsT} from './types.js';
+import type { PropsT, StatefulPinCodePropsT } from './types.js';
 
 StatefulPinCode.defaultProps = defaultProps;
 

package/pin-code/styled-components.js.flow

@@ -6,34 +6,31 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-import {styled, withStyle} from '../styles/index.js';
-import {
-  Root as StyledInputRoot,
-  Input as StyledInputInput,
-} from '../input/styled-components.js';
-import type {SizeT} from '../input/types.js';
-import {SIZE} from '../input/constants.js';
+import { styled, withStyle } from '../styles/index.js';
+import { Root as StyledInputRoot, Input as StyledInputInput } from '../input/styled-components.js';
+import type { SizeT } from '../input/types.js';
+import { SIZE } from '../input/constants.js';
 
 export const StyledRoot = styled('div', {
   display: 'flex',
   alignItems: 'center',
 });
 
-export const StyledInputOverrideRoot = withStyle<
-  typeof StyledInputRoot,
-  {$size: SizeT},
->(StyledInputRoot, ({$size = SIZE.default}) => {
-  const width = {
-    [SIZE.mini]: '32px',
-    [SIZE.compact]: '36px',
-    [SIZE.default]: '48px',
-    [SIZE.large]: '56px',
-  }[$size];
-  return {
-    width,
-    marginRight: '8px',
-  };
-});
+export const StyledInputOverrideRoot = withStyle<typeof StyledInputRoot, { $size: SizeT }>(
+  StyledInputRoot,
+  ({ $size = SIZE.default }) => {
+    const width = {
+      [SIZE.mini]: '32px',
+      [SIZE.compact]: '36px',
+      [SIZE.default]: '48px',
+      [SIZE.large]: '56px',
+    }[$size];
+    return {
+      width,
+      marginRight: '8px',
+    };
+  }
+);
 
 export const StyledInputOverrideInput = withStyle(StyledInputInput, {
   textAlign: 'center',