baseui 0.0.0-next-2aecb6f → 0.0.0-next-aad2baf

package/rating/emoticon-rating.js.flow

@@ -8,61 +8,50 @@ LICENSE file in the root directory of this source tree.
 // @flow
 
 import * as React from 'react';
-import type {EmoticonRatingPropsT, RatingStateT} from './types.js';
-import {StyledRoot, StyledEmoticon} from './styled-components.js';
-import {getOverrides} from '../helpers/overrides.js';
-import {ARROW_UP, ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT} from './utils.js';
-import {isFocusVisible, forkFocus, forkBlur} from '../utils/focusVisible.js';
-
-class EmoticonRating extends React.Component<
-  EmoticonRatingPropsT,
-  RatingStateT,
-> {
+import type { EmoticonRatingPropsT, RatingStateT } from './types.js';
+import { StyledRoot, StyledEmoticon } from './styled-components.js';
+import { getOverrides } from '../helpers/overrides.js';
+import { ARROW_UP, ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT } from './utils.js';
+import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible.js';
+
+class EmoticonRating extends React.Component<EmoticonRatingPropsT, RatingStateT> {
   static defaultProps = {
     overrides: {},
     readOnly: false,
   };
 
-  state = {isFocusVisible: false, previewIndex: undefined};
+  state = { isFocusVisible: false, previewIndex: undefined };
 
   selectItem = (value: number) => {
-    const {onChange} = this.props;
+    const { onChange } = this.props;
 
-    onChange && onChange({value});
-    this.setState({previewIndex: undefined});
+    onChange && onChange({ value });
+    this.setState({ previewIndex: undefined });
   };
 
   updatePreview = (previewIndex?: number) => {
-    this.setState({previewIndex});
+    this.setState({ previewIndex });
   };
 
   handleFocus = (event: SyntheticEvent<>) => {
     if (isFocusVisible(event)) {
-      this.setState({isFocusVisible: true});
+      this.setState({ isFocusVisible: true });
     }
   };
 
   handleBlur = (event: SyntheticEvent<>) => {
     if (this.state.isFocusVisible !== false) {
-      this.setState({isFocusVisible: false});
+      this.setState({ isFocusVisible: false });
     }
   };
 
   renderRatingContents = () => {
-    const {
-      overrides = {},
-      value = -1,
-      size = 44,
-      readOnly = false,
-    } = this.props;
-    const {previewIndex} = this.state;
-
-    const [Emoticon, emoticonProps] = getOverrides(
-      overrides.Item,
-      StyledEmoticon,
-    );
+    const { overrides = {}, value = -1, size = 44, readOnly = false } = this.props;
+    const { previewIndex } = this.state;
+
+    const [Emoticon, emoticonProps] = getOverrides(overrides.Item, StyledEmoticon);
     const ratings = [];
-    const refs = [{current: null}];
+    const refs = [{ current: null }];
     for (let x = 1; x <= 5; x++) {
       const isFocusable = x === value || (value < 1 && x === 1);
       const starRef = React.createRef<HTMLLIElement>();
@@ -81,9 +70,7 @@ class EmoticonRating extends React.Component<
           aria-disabled={readOnly}
           $size={size}
           $index={x}
-          $isActive={
-            previewIndex !== undefined ? x === previewIndex : x === value
-          }
+          $isActive={previewIndex !== undefined ? x === previewIndex : x === value}
           $isSelected={x === previewIndex}
           $isFocusVisible={this.state.isFocusVisible && isFocusable}
           $isReadOnly={readOnly}
@@ -120,7 +107,7 @@ class EmoticonRating extends React.Component<
           onFocus={forkFocus(emoticonProps, this.handleFocus)}
           onBlur={forkBlur(emoticonProps, this.handleBlur)}
           {...emoticonProps}
-        />,
+        />
       );
     }
 
@@ -128,7 +115,7 @@ class EmoticonRating extends React.Component<
   };
 
   render() {
-    const {overrides = {}} = this.props;
+    const { overrides = {} } = this.props;
     const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
 
     return (
@@ -136,8 +123,7 @@ class EmoticonRating extends React.Component<
         data-baseweb="emoticon-rating"
         role="radiogroup"
         onBlur={(e) => {
-          if (!e.currentTarget.contains(e.relatedTarget))
-            this.updatePreview(undefined);
+          if (!e.currentTarget.contains(e.relatedTarget)) this.updatePreview(undefined);
         }}
         onMouseLeave={() => this.updatePreview(undefined)}
         {...rootProps}

package/rating/index.js.flow

@@ -7,8 +7,8 @@ LICENSE file in the root directory of this source tree.
 
 // @flow
 
-export {default as StarRating} from './star-rating.js';
-export {default as EmoticonRating} from './emoticon-rating.js';
+export { default as StarRating } from './star-rating.js';
+export { default as EmoticonRating } from './emoticon-rating.js';
 export * from './styled-components.js';
 export type * from './types.js';
 

package/rating/star-rating.js.flow

@@ -8,11 +8,11 @@ LICENSE file in the root directory of this source tree.
 // @flow
 
 import * as React from 'react';
-import type {StarRatingPropsT, RatingStateT} from './types.js';
-import {StyledRoot, StyledStar} from './styled-components.js';
-import {getOverrides} from '../helpers/overrides.js';
-import {ARROW_UP, ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT} from './utils.js';
-import {isFocusVisible, forkFocus, forkBlur} from '../utils/focusVisible.js';
+import type { StarRatingPropsT, RatingStateT } from './types.js';
+import { StyledRoot, StyledStar } from './styled-components.js';
+import { getOverrides } from '../helpers/overrides.js';
+import { ARROW_UP, ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT } from './utils.js';
+import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible.js';
 
 class StarRating extends React.Component<StarRatingPropsT, RatingStateT> {
   static defaultProps = {
@@ -21,44 +21,38 @@ class StarRating extends React.Component<StarRatingPropsT, RatingStateT> {
     readOnly: false,
   };
 
-  state = {isFocusVisible: false, previewIndex: undefined};
+  state = { isFocusVisible: false, previewIndex: undefined };
 
   selectItem = (value: number) => {
-    const {onChange} = this.props;
+    const { onChange } = this.props;
 
-    onChange && onChange({value});
-    this.setState({previewIndex: undefined});
+    onChange && onChange({ value });
+    this.setState({ previewIndex: undefined });
   };
 
   updatePreview = (previewIndex?: number) => {
-    this.setState({previewIndex});
+    this.setState({ previewIndex });
   };
 
   handleFocus = (event: SyntheticEvent<>) => {
     if (isFocusVisible(event)) {
-      this.setState({isFocusVisible: true});
+      this.setState({ isFocusVisible: true });
     }
   };
 
   handleBlur = (event: SyntheticEvent<>) => {
     if (this.state.isFocusVisible !== false) {
-      this.setState({isFocusVisible: false});
+      this.setState({ isFocusVisible: false });
     }
   };
 
   renderRatingContents = () => {
-    const {
-      overrides = {},
-      value = -1,
-      numItems,
-      size = 22,
-      readOnly = false,
-    } = this.props;
-    const {previewIndex} = this.state;
+    const { overrides = {}, value = -1, numItems, size = 22, readOnly = false } = this.props;
+    const { previewIndex } = this.state;
     const [Star, starProps] = getOverrides(overrides.Item, StyledStar);
 
     const ratings = [];
-    const refs = [{current: null}];
+    const refs = [{ current: null }];
     for (let x = 1; x <= numItems; x++) {
       const isFocusable = x === value || (value < 1 && x === 1);
       const starRef = React.createRef<HTMLLIElement>();
@@ -77,12 +71,8 @@ class StarRating extends React.Component<StarRatingPropsT, RatingStateT> {
           aria-disabled={readOnly}
           $size={size}
           $index={x}
-          $isActive={
-            previewIndex !== undefined ? x <= previewIndex : x <= value
-          }
-          $isPartialActive={
-            previewIndex !== undefined ? false : x <= value + 0.5
-          }
+          $isActive={previewIndex !== undefined ? x <= previewIndex : x <= value}
+          $isPartialActive={previewIndex !== undefined ? false : x <= value + 0.5}
           $isSelected={x === previewIndex}
           $isFocusVisible={this.state.isFocusVisible && isFocusable}
           $isReadOnly={readOnly}
@@ -118,7 +108,7 @@ class StarRating extends React.Component<StarRatingPropsT, RatingStateT> {
           {...starProps}
           onFocus={forkFocus(starProps, this.handleFocus)}
           onBlur={forkBlur(starProps, this.handleBlur)}
-        />,
+        />
       );
     }
 
@@ -126,7 +116,7 @@ class StarRating extends React.Component<StarRatingPropsT, RatingStateT> {
   };
 
   render() {
-    const {overrides = {}} = this.props;
+    const { overrides = {} } = this.props;
     const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
 
     return (
@@ -134,8 +124,7 @@ class StarRating extends React.Component<StarRatingPropsT, RatingStateT> {
         data-baseweb="star-rating"
         role="radiogroup"
         onBlur={(e) => {
-          if (!e.currentTarget.contains(e.relatedTarget))
-            this.updatePreview(undefined);
+          if (!e.currentTarget.contains(e.relatedTarget)) this.updatePreview(undefined);
         }}
         onMouseLeave={() => this.updatePreview(undefined)}
         {...rootProps}

package/rating/styled-components.js.flow

@@ -7,8 +7,8 @@ LICENSE file in the root directory of this source tree.
 
 // @flow
 
-import {styled} from '../styles/index.js';
-import type {StyledRootPropsT, StyledRatingItemPropsT} from './types.js';
+import { styled } from '../styles/index.js';
+import type { StyledRootPropsT, StyledRatingItemPropsT } from './types.js';
 import {
   starSVG,
   angryRatingSVG,
@@ -18,7 +18,7 @@ import {
   veryHappyRatingSVG,
 } from './svg-icons.js';
 
-export const StyledRoot = styled<StyledRootPropsT>('ul', ({$theme}) => {
+export const StyledRoot = styled<StyledRootPropsT>('ul', ({ $theme }) => {
   return {
     marginLeft: 0,
     marginRight: 0,
@@ -37,15 +37,7 @@ export const StyledRoot = styled<StyledRootPropsT>('ul', ({$theme}) => {
 
 export const StyledStar = styled<StyledRatingItemPropsT>(
   'li',
-  ({
-    $theme,
-    $isActive,
-    $isPartialActive,
-    $isSelected,
-    $isFocusVisible,
-    $isReadOnly,
-    $size,
-  }) => {
+  ({ $theme, $isActive, $isPartialActive, $isSelected, $isFocusVisible, $isReadOnly, $size }) => {
     let starStroke = $theme.colors.ratingStroke;
     let starFill = $theme.colors.ratingInactiveFill;
     let prePartialStarStroke;
@@ -79,10 +71,7 @@ export const StyledStar = styled<StyledRatingItemPropsT>(
       position: 'relative',
       ':after': {
         transition: `all ${$theme.animation.timing400}`,
-        content:
-          `url('data:image/svg+xml,` +
-          starSVG(starFill, starStroke, $size) +
-          `')`,
+        content: `url('data:image/svg+xml,` + starSVG(starFill, starStroke, $size) + `')`,
         height: '100%',
       },
       ':before':
@@ -108,20 +97,12 @@ export const StyledStar = styled<StyledRatingItemPropsT>(
     };
 
     return styles;
-  },
+  }
 );
 
 export const StyledEmoticon = styled<StyledRatingItemPropsT>(
   'li',
-  ({
-    $theme,
-    $isActive,
-    $isSelected,
-    $index = 1,
-    $isFocusVisible,
-    $isReadOnly,
-    $size,
-  }) => {
+  ({ $theme, $isActive, $isSelected, $index = 1, $isFocusVisible, $isReadOnly, $size }) => {
     let emoticonFill = $theme.colors.ratingInactiveFill;
 
     if ($isActive) {
@@ -160,7 +141,7 @@ export const StyledEmoticon = styled<StyledRatingItemPropsT>(
     };
 
     return styles;
-  },
+  }
 );
 
 declare var __DEV__: boolean;

package/rating/types.js.flow

@@ -6,8 +6,8 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-import type {ThemeT} from '../styles/types.js';
-import type {OverrideT} from '../helpers/overrides.js';
+import type { ThemeT } from '../styles/types.js';
+import type { OverrideT } from '../helpers/overrides.js';
 
 export type RatingOverridesT = {
   Root?: OverrideT,
@@ -22,7 +22,7 @@ export type StarRatingPropsT = {
   numItems: number,
   readOnly?: boolean,
   /** Callback that's called with the newly selected value. */
-  onChange?: ({value: number}) => mixed,
+  onChange?: ({ value: number }) => mixed,
   size?: number,
 };
 
@@ -32,7 +32,7 @@ export type EmoticonRatingPropsT = {
   value?: number,
   readOnly?: boolean,
   /** Callback that's called with the newly selected value. */
-  onChange?: ({value: number}) => mixed,
+  onChange?: ({ value: number }) => mixed,
   size?: number,
 };
 

package/select/autosize-input.js.flow

@@ -7,19 +7,19 @@ LICENSE file in the root directory of this source tree.
 // @flow
 /* eslint-disable cup/no-undef */
 import * as React from 'react';
-import {StyledInput, StyledInputSizer} from './styled-components.js';
-import {getOverrides} from '../helpers/overrides.js';
-import type {AutosizeInputPropsT, AutosizeInputStateT} from './types.js';
+import { StyledInput, StyledInputSizer } from './styled-components.js';
+import { getOverrides } from '../helpers/overrides.js';
+import type { AutosizeInputPropsT, AutosizeInputStateT } from './types.js';
 
 export default class AutosizeInput extends React.Component<
   AutosizeInputPropsT,
-  AutosizeInputStateT,
+  AutosizeInputStateT
 > {
   mounted: boolean;
   sizer: ?HTMLElement;
 
   static defaultProps = {
-    inputRef: (React.createRef(): {current: HTMLInputElement | null}),
+    inputRef: (React.createRef(): { current: HTMLInputElement | null }),
     value: '',
     overrides: {},
   };
@@ -30,10 +30,7 @@ export default class AutosizeInput extends React.Component<
     this.mounted = true;
     this.updateInputWidth();
   }
-  componentDidUpdate(
-    prevProps: AutosizeInputPropsT,
-    prevState: AutosizeInputStateT,
-  ) {
+  componentDidUpdate(prevProps: AutosizeInputPropsT, prevState: AutosizeInputStateT) {
     this.updateInputWidth();
   }
   componentWillUnmount() {
@@ -43,11 +40,7 @@ export default class AutosizeInput extends React.Component<
     this.sizer = el;
   };
   updateInputWidth() {
-    if (
-      !this.mounted ||
-      !this.sizer ||
-      typeof this.sizer.scrollWidth === 'undefined'
-    ) {
+    if (!this.mounted || !this.sizer || typeof this.sizer.scrollWidth === 'undefined') {
       return;
     }
     const newInputWidth = this.sizer.scrollWidth + 2;
@@ -55,11 +48,11 @@ export default class AutosizeInput extends React.Component<
       newInputWidth !== this.state.inputWidth &&
       this.sizer.scrollWidth !== this.state.inputWidth
     ) {
-      this.setState({inputWidth: newInputWidth});
+      this.setState({ inputWidth: newInputWidth });
     }
   }
   render() {
-    const {overrides = {}, inputRef, ...restProps} = this.props;
+    const { overrides = {}, inputRef, ...restProps } = this.props;
     const [Input, inputProps] = getOverrides(overrides.Input, StyledInput);
     const sizerValue = [this.props.defaultValue, this.props.value, ''].reduce(
       (previousValue, currentValue) => {
@@ -67,7 +60,7 @@ export default class AutosizeInput extends React.Component<
           return previousValue;
         }
         return currentValue;
-      },
+      }
     );
     const componentInputProps = {
       ...restProps,

package/select/constants.js.flow

@@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-export {SIZE} from '../input/index.js';
+export { SIZE } from '../input/index.js';
 
 export const TYPE = {
   select: 'select',

package/select/default-props.js.flow

@@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import defaultFilterOptions from './utils/default-filter-options.js';
-import {TYPE, SIZE} from './constants.js';
+import { TYPE, SIZE } from './constants.js';
 
 const defaultProps = {
   'aria-label': null,

package/select/dropdown.js.flow

@@ -12,9 +12,9 @@ import {
   StyledDropdownListItem,
   StyledOptionContent,
 } from './styled-components.js';
-import {StatefulMenu} from '../menu/index.js';
-import type {DropdownPropsT, OptionT, ValueT} from './types.js';
-import {getOverrides, mergeOverrides} from '../helpers/overrides.js';
+import { StatefulMenu } from '../menu/index.js';
+import type { DropdownPropsT, OptionT, ValueT } from './types.js';
+import { getOverrides, mergeOverrides } from '../helpers/overrides.js';
 
 function groupOptions(options: ValueT) {
   return options.reduce(
@@ -29,14 +29,13 @@ function groupOptions(options: ValueT) {
       }
       return groups;
     },
-    {__ungrouped: []},
+    { __ungrouped: [] }
   );
 }
 
 export default class SelectDropdown extends React.Component<DropdownPropsT> {
   getSharedProps() {
-    const {error, isLoading, multi, required, size, searchable, type, width} =
-      this.props;
+    const { error, isLoading, multi, required, size, searchable, type, width } = this.props;
     return {
       $error: error,
       $isLoading: isLoading,
@@ -49,19 +48,17 @@ export default class SelectDropdown extends React.Component<DropdownPropsT> {
     };
   }
   // flowlint-next-line unclear-type:off
-  getItemLabel = (option: {[string]: any}) => {
-    const {getOptionLabel, overrides = {}, value, valueKey} = this.props;
+  getItemLabel = (option: { [string]: any }) => {
+    const { getOptionLabel, overrides = {}, value, valueKey } = this.props;
 
     const [OptionContent, optionContentProps] = getOverrides(
       overrides.OptionContent,
-      StyledOptionContent,
+      StyledOptionContent
     );
 
     let $selected;
     if (Array.isArray(value)) {
-      $selected = !!value.find(
-        (selected) => selected && selected[valueKey] === option[valueKey],
-      );
+      $selected = !!value.find((selected) => selected && selected[valueKey] === option[valueKey]);
     } else {
       $selected = value[valueKey] === option[valueKey];
     }
@@ -80,7 +77,7 @@ export default class SelectDropdown extends React.Component<DropdownPropsT> {
         {...optionSharedProps}
         {...optionContentProps}
       >
-        {getOptionLabel({option, optionState: optionSharedProps})}
+        {getOptionLabel({ option, optionState: optionSharedProps })}
       </OptionContent>
     );
   };
@@ -90,7 +87,7 @@ export default class SelectDropdown extends React.Component<DropdownPropsT> {
   };
 
   getHighlightedIndex = () => {
-    const {value, options, valueKey} = this.props;
+    const { value, options, valueKey } = this.props;
     // Highlight only first value as menu supports only a single highlight index
     let firstValue: OptionT = {};
 
@@ -101,9 +98,7 @@ export default class SelectDropdown extends React.Component<DropdownPropsT> {
     }
 
     if (Object.keys(firstValue).length > 0) {
-      const a = options.findIndex(
-        (option) => option && option[valueKey] === firstValue[valueKey],
-      );
+      const a = options.findIndex((option) => option && option[valueKey] === firstValue[valueKey]);
       return a === -1 ? 0 : a;
     }
     return 0;
@@ -122,15 +117,15 @@ export default class SelectDropdown extends React.Component<DropdownPropsT> {
     } = this.props;
     const [DropdownContainer, dropdownContainerProps] = getOverrides(
       overrides.DropdownContainer,
-      StyledDropdownContainer,
+      StyledDropdownContainer
     );
     const [ListItem, listItemProps] = getOverrides(
       overrides.DropdownListItem,
-      StyledDropdownListItem,
+      StyledDropdownListItem
     );
     const [
       OverriddenStatefulMenu,
-      {overrides: statefulMenuOverrides = {}, ...restStatefulMenuProps},
+      { overrides: statefulMenuOverrides = {}, ...restStatefulMenuProps },
     ] = getOverrides(overrides.StatefulMenu, StatefulMenu);
     const highlightedIndex = this.getHighlightedIndex();
     const groupedOptions = groupOptions(options);
@@ -180,7 +175,7 @@ export default class SelectDropdown extends React.Component<DropdownPropsT> {
                   overrides: {
                     ListItem: {
                       component: ListItem,
-                      props: {...listItemProps, role: 'option'},
+                      props: { ...listItemProps, role: 'option' },
                       // slightly hacky way to handle the list item style overrides
                       // since the menu component doesn't provide a top level overrides for it
                       style: listItemProps.$style,
@@ -194,7 +189,7 @@ export default class SelectDropdown extends React.Component<DropdownPropsT> {
               List: overrides.Dropdown || {},
               Option: overrides.DropdownOption || {},
               ...statefulMenuOverrides,
-            },
+            }
           )}
           {...restStatefulMenuProps}
         />

package/select/index.js.flow

@@ -5,15 +5,15 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-export {default as Select} from './select.js';
-export {default as SingleSelect} from './single-select.js';
-export {default as MultiSelect} from './multi-select.js';
-export {default as SingleValue} from './value.js';
-export {default as MultiValue} from './multi-value.js';
-export {default as AutosizeInput} from './autosize-input.js';
-export {default as SelectDropdown} from './dropdown.js';
-export {default as StatefulSelect} from './stateful-select.js';
-export {default as StatefulSelectContainer} from './stateful-select-container.js';
+export { default as Select } from './select.js';
+export { default as SingleSelect } from './single-select.js';
+export { default as MultiSelect } from './multi-select.js';
+export { default as SingleValue } from './value.js';
+export { default as MultiValue } from './multi-value.js';
+export { default as AutosizeInput } from './autosize-input.js';
+export { default as SelectDropdown } from './dropdown.js';
+export { default as StatefulSelect } from './stateful-select.js';
+export { default as StatefulSelectContainer } from './stateful-select-container.js';
 // Styled elements
 export {
   StyledRoot,
@@ -35,8 +35,8 @@ export {
   StyledDropdownListItem,
   StyledOptionContent,
 } from './styled-components.js';
-export {default as filterOptions} from './utils/default-filter-options.js';
-export {SIZE, TYPE, STATE_CHANGE_TYPE} from './constants.js';
+export { default as filterOptions } from './utils/default-filter-options.js';
+export { SIZE, TYPE, STATE_CHANGE_TYPE } from './constants.js';
 export type * from './types.js';
 
 declare var __DEV__: boolean;

package/select/multi-select.js.flow

@@ -8,12 +8,10 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import SelectComponent from './select-component.js';
 import MultiValue from './multi-value.js';
-import type {PropsT} from './types.js';
+import type { PropsT } from './types.js';
 
 function MultiSelect(props: $Shape<PropsT>) {
-  return (
-    <SelectComponent {...props} multi={true} valueComponent={MultiValue} />
-  );
+  return <SelectComponent {...props} multi={true} valueComponent={MultiValue} />;
 }
 
 export default MultiSelect;

package/select/multi-value.js.flow

@@ -6,23 +6,20 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import {getOverrides} from '../helpers/overrides.js';
-import {Tag, VARIANT as TAG_VARIANT} from '../tag/index.js';
+import { getOverrides } from '../helpers/overrides.js';
+import { Tag, VARIANT as TAG_VARIANT } from '../tag/index.js';
 
 // flowlint-next-line unclear-type:off
 export default function MultiValue(props: any) {
-  const {overrides = {}, removeValue, ...restProps} = props;
+  const { overrides = {}, removeValue, ...restProps } = props;
   // todo(v11): remove the MultiValue override in favor of Tag
-  const [MultiValue, tagProps] = getOverrides(
-    overrides.Tag || overrides.MultiValue,
-    Tag,
-  );
+  const [MultiValue, tagProps] = getOverrides(overrides.Tag || overrides.MultiValue, Tag);
   return (
     <MultiValue
       variant={TAG_VARIANT.solid}
       overrides={{
         Root: {
-          style: ({$theme: {sizing}}) => ({
+          style: ({ $theme: { sizing } }) => ({
             marginRight: sizing.scale0,
             marginBottom: sizing.scale0,
             marginLeft: sizing.scale0,