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

package/list/list-item.js.flow

@@ -8,89 +8,84 @@ LICENSE file in the root directory of this source tree.
 
 import React from 'react';
 
-import {getOverrides} from '../helpers/overrides.js';
+import { getOverrides } from '../helpers/overrides.js';
 
-import {ARTWORK_SIZES, SHAPE} from './constants.js';
+import { ARTWORK_SIZES, SHAPE } from './constants.js';
 import {
   StyledRoot,
   StyledContent,
   StyledEndEnhancerContainer,
   StyledArtworkContainer,
 } from './styled-components.js';
-import type {PropsT} from './types.js';
-import {artworkSizeToValue} from './utils.js';
+import type { PropsT } from './types.js';
+import { artworkSizeToValue } from './utils.js';
 
-const ListItem = React.forwardRef<PropsT, HTMLLIElement>(
-  (props: PropsT, ref) => {
-    const {overrides = {}} = props;
-    const Artwork = props.artwork;
-    const EndEnhancer = props.endEnhancer;
+const ListItem = React.forwardRef<PropsT, HTMLLIElement>((props: PropsT, ref) => {
+  const { overrides = {} } = props;
+  const Artwork = props.artwork;
+  const EndEnhancer = props.endEnhancer;
 
-    const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
-    const [ArtworkContainer, artworkContainerProps] = getOverrides(
-      overrides.ArtworkContainer,
-      StyledArtworkContainer,
-    );
-    const [Content, contentProps] = getOverrides(
-      overrides.Content,
-      StyledContent,
-    );
-    const [EndEnhancerContainer, endEnhancerContainerProps] = getOverrides(
-      overrides.EndEnhancerContainer,
-      StyledEndEnhancerContainer,
-    );
+  const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
+  const [ArtworkContainer, artworkContainerProps] = getOverrides(
+    overrides.ArtworkContainer,
+    StyledArtworkContainer
+  );
+  const [Content, contentProps] = getOverrides(overrides.Content, StyledContent);
+  const [EndEnhancerContainer, endEnhancerContainerProps] = getOverrides(
+    overrides.EndEnhancerContainer,
+    StyledEndEnhancerContainer
+  );
 
-    const artworkSize = React.useMemo(() => {
-      if (props.sublist) {
-        let size = props.artworkSize || ARTWORK_SIZES.SMALL;
-        if (props.artworkSize === ARTWORK_SIZES.MEDIUM) {
-          size = ARTWORK_SIZES.SMALL;
-          if (__DEV__) {
-            console.warn(
-              'When ListItem sublist prop is true, artworkSize MEDIUM is aliased to SMALL',
-            );
-          }
+  const artworkSize = React.useMemo(() => {
+    if (props.sublist) {
+      let size = props.artworkSize || ARTWORK_SIZES.SMALL;
+      if (props.artworkSize === ARTWORK_SIZES.MEDIUM) {
+        size = ARTWORK_SIZES.SMALL;
+        if (__DEV__) {
+          console.warn(
+            'When ListItem sublist prop is true, artworkSize MEDIUM is aliased to SMALL'
+          );
         }
-        return size;
-      } else {
-        return props.artworkSize || ARTWORK_SIZES.MEDIUM;
       }
-    }, [props.artworkSize, props.sublist]);
+      return size;
+    } else {
+      return props.artworkSize || ARTWORK_SIZES.MEDIUM;
+    }
+  }, [props.artworkSize, props.sublist]);
 
-    return (
-      <Root
-        // flowlint-next-line unclear-type:off
-        ref={(ref: any)}
-        $shape={props.shape || SHAPE.DEFAULT}
-        {...rootProps}
-      >
-        {Artwork && (
-          <ArtworkContainer
-            $artworkSize={artworkSize}
-            $sublist={Boolean(props.sublist)}
-            {...artworkContainerProps}
-          >
-            <Artwork
-              size={
-                typeof artworkSize === 'number'
-                  ? artworkSize
-                  : artworkSizeToValue(artworkSize, Boolean(props.sublist))
-              }
-            />
-          </ArtworkContainer>
+  return (
+    <Root
+      // flowlint-next-line unclear-type:off
+      ref={(ref: any)}
+      $shape={props.shape || SHAPE.DEFAULT}
+      {...rootProps}
+    >
+      {Artwork && (
+        <ArtworkContainer
+          $artworkSize={artworkSize}
+          $sublist={Boolean(props.sublist)}
+          {...artworkContainerProps}
+        >
+          <Artwork
+            size={
+              typeof artworkSize === 'number'
+                ? artworkSize
+                : artworkSizeToValue(artworkSize, Boolean(props.sublist))
+            }
+          />
+        </ArtworkContainer>
+      )}
+      <Content $mLeft={!Artwork} $sublist={!!props.sublist} {...contentProps}>
+        {props.children}
+        {EndEnhancer && EndEnhancer !== 0 && (
+          <EndEnhancerContainer {...endEnhancerContainerProps}>
+            <EndEnhancer />
+          </EndEnhancerContainer>
         )}
-        <Content $mLeft={!Artwork} $sublist={!!props.sublist} {...contentProps}>
-          {props.children}
-          {EndEnhancer && EndEnhancer !== 0 && (
-            <EndEnhancerContainer {...endEnhancerContainerProps}>
-              <EndEnhancer />
-            </EndEnhancerContainer>
-          )}
-        </Content>
-      </Root>
-    );
-  },
-);
+      </Content>
+    </Root>
+  );
+});
 ListItem.displayName = 'ListItem';
 
 export default ListItem;

package/list/menu-adapter.js.flow

@@ -9,44 +9,40 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 
 import ListItem from './list-item.js';
-import type {MenuAdapterPropsT} from './types.js';
-import {mergeOverrides} from '../helpers/overrides.js';
+import type { MenuAdapterPropsT } from './types.js';
+import { mergeOverrides } from '../helpers/overrides.js';
 
-const MenuAdapter = React.forwardRef<MenuAdapterPropsT, HTMLLIElement>(
-  (props, ref) => {
-    return (
-      <ListItem
-        ref={ref}
-        sublist={props.sublist || props.$size === 'compact'}
-        artwork={props.artwork}
-        artworkSize={props.artworkSize}
-        endEnhancer={props.endEnhancer}
-        overrides={
-          // $FlowFixMe
-          mergeOverrides(
-            {
-              Root: {
-                props: {
-                  onMouseEnter: props.onMouseEnter,
-                  onClick: props.onClick,
-                },
-                style: ({$theme}) => ({
-                  backgroundColor: props.$isHighlighted
-                    ? $theme.colors.menuFillHover
-                    : null,
-                  cursor: props.$disabled ? 'not-allowed' : 'pointer',
-                }),
+const MenuAdapter = React.forwardRef<MenuAdapterPropsT, HTMLLIElement>((props, ref) => {
+  return (
+    <ListItem
+      ref={ref}
+      sublist={props.sublist || props.$size === 'compact'}
+      artwork={props.artwork}
+      artworkSize={props.artworkSize}
+      endEnhancer={props.endEnhancer}
+      overrides={
+        // $FlowFixMe
+        mergeOverrides(
+          {
+            Root: {
+              props: {
+                onMouseEnter: props.onMouseEnter,
+                onClick: props.onClick,
               },
+              style: ({ $theme }) => ({
+                backgroundColor: props.$isHighlighted ? $theme.colors.menuFillHover : null,
+                cursor: props.$disabled ? 'not-allowed' : 'pointer',
+              }),
             },
-            props.overrides,
-          )
-        }
-      >
-        {props.children}
-      </ListItem>
-    );
-  },
-);
+          },
+          props.overrides
+        )
+      }
+    >
+      {props.children}
+    </ListItem>
+  );
+});
 MenuAdapter.displayName = 'MenuAdapter';
 
 export default MenuAdapter;

package/list/styled-components.js.flow

@@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-import {styled, expandBorderStyles} from '../styles/index.js';
+import { styled, expandBorderStyles } from '../styles/index.js';
 
 import type {
   StyledRootPropsT,
@@ -14,10 +14,10 @@ import type {
   StyledArtworkContainerPropsT,
   StyledHeadingHeadingPropsT,
 } from './types.js';
-import {artworkSizeToValue} from './utils.js';
-import {SHAPE} from './constants.js';
+import { artworkSizeToValue } from './utils.js';
+import { SHAPE } from './constants.js';
 
-export const StyledRoot = styled<StyledRootPropsT>('li', ({$theme, $shape}) => {
+export const StyledRoot = styled<StyledRootPropsT>('li', ({ $theme, $shape }) => {
   return {
     alignItems: 'center',
     backgroundColor: $theme.colors.backgroundPrimary,
@@ -26,39 +26,34 @@ export const StyledRoot = styled<StyledRootPropsT>('li', ({$theme, $shape}) => {
     width: '100%',
     borderTopLeftRadius: $shape === SHAPE.ROUND ? $theme.borders.radius400 : 0,
     borderTopRightRadius: $shape === SHAPE.ROUND ? $theme.borders.radius400 : 0,
-    borderBottomLeftRadius:
-      $shape === SHAPE.ROUND ? $theme.borders.radius400 : 0,
-    borderBottomRightRadius:
-      $shape === SHAPE.ROUND ? $theme.borders.radius400 : 0,
+    borderBottomLeftRadius: $shape === SHAPE.ROUND ? $theme.borders.radius400 : 0,
+    borderBottomRightRadius: $shape === SHAPE.ROUND ? $theme.borders.radius400 : 0,
     overflow: 'hidden',
   };
 });
 
-export const StyledContent = styled<StyledContentPropsT>(
-  'div',
-  ({$mLeft, $sublist, $theme}) => {
-    return {
-      ...expandBorderStyles($theme.borders.border100),
-      alignItems: 'center',
-      borderTopStyle: 'none',
-      borderRightStyle: 'none',
-      borderLeftStyle: 'none',
-      display: 'flex',
-      flexGrow: 1,
-      minHeight: $sublist ? 'initial' : $theme.sizing.scale1600,
-      justifyContent: 'space-between',
-      ...($theme.direction === 'rtl'
-        ? {
-            paddingLeft: $theme.sizing.scale600,
-            marginRight: $mLeft ? $theme.sizing.scale600 : null,
-          }
-        : {
-            paddingRight: $theme.sizing.scale600,
-            marginLeft: $mLeft ? $theme.sizing.scale600 : null,
-          }),
-    };
-  },
-);
+export const StyledContent = styled<StyledContentPropsT>('div', ({ $mLeft, $sublist, $theme }) => {
+  return {
+    ...expandBorderStyles($theme.borders.border100),
+    alignItems: 'center',
+    borderTopStyle: 'none',
+    borderRightStyle: 'none',
+    borderLeftStyle: 'none',
+    display: 'flex',
+    flexGrow: 1,
+    minHeight: $sublist ? 'initial' : $theme.sizing.scale1600,
+    justifyContent: 'space-between',
+    ...($theme.direction === 'rtl'
+      ? {
+          paddingLeft: $theme.sizing.scale600,
+          marginRight: $mLeft ? $theme.sizing.scale600 : null,
+        }
+      : {
+          paddingRight: $theme.sizing.scale600,
+          marginLeft: $mLeft ? $theme.sizing.scale600 : null,
+        }),
+  };
+});
 
 export const StyledEndEnhancerContainer = styled('div', {
   alignItems: 'center',
@@ -67,7 +62,7 @@ export const StyledEndEnhancerContainer = styled('div', {
 
 export const StyledArtworkContainer = styled<StyledArtworkContainerPropsT>(
   'div',
-  ({$artworkSize, $sublist, $theme}) => {
+  ({ $artworkSize, $sublist, $theme }) => {
     let sizeValue: number =
       typeof $artworkSize === 'number'
         ? $artworkSize
@@ -88,10 +83,10 @@ export const StyledArtworkContainer = styled<StyledArtworkContainerPropsT>(
       justifyContent: 'center',
       width: $theme.sizing.scale1600,
     };
-  },
+  }
 );
 
-export const StyledLabelContent = styled<{||}>('p', ({$theme}) => {
+export const StyledLabelContent = styled<{||}>('p', ({ $theme }) => {
   return {
     ...$theme.typography.LabelMedium,
     color: $theme.colors.contentPrimary,
@@ -100,7 +95,7 @@ export const StyledLabelContent = styled<{||}>('p', ({$theme}) => {
   };
 });
 
-export const StyledLabelDescription = styled<{||}>('p', ({$theme}) => {
+export const StyledLabelDescription = styled<{||}>('p', ({ $theme }) => {
   return {
     ...$theme.typography.ParagraphSmall,
     color: $theme.colors.contentPrimary,
@@ -109,7 +104,7 @@ export const StyledLabelDescription = styled<{||}>('p', ({$theme}) => {
   };
 });
 
-export const StyledLabelSublistContent = styled<{||}>('p', ({$theme}) => {
+export const StyledLabelSublistContent = styled<{||}>('p', ({ $theme }) => {
   return {
     ...$theme.typography.LabelMedium,
     color: $theme.colors.contentPrimary,
@@ -118,7 +113,7 @@ export const StyledLabelSublistContent = styled<{||}>('p', ({$theme}) => {
   };
 });
 
-export const StyledHeadingRoot = styled<StyledRootPropsT>('div', ({$theme}) => {
+export const StyledHeadingRoot = styled<StyledRootPropsT>('div', ({ $theme }) => {
   return {
     display: 'flex',
     alignItems: 'center',
@@ -129,7 +124,7 @@ export const StyledHeadingRoot = styled<StyledRootPropsT>('div', ({$theme}) => {
   };
 });
 
-export const StyledHeadingContent = styled<{}>('div', ({$theme}) => {
+export const StyledHeadingContent = styled<{}>('div', ({ $theme }) => {
   return {
     flexGrow: 1,
     width: '100%',
@@ -157,7 +152,7 @@ export const StyledHeadingContentRow = styled('div', {
 export const StyledHeadingMainHeading = styled<StyledHeadingHeadingPropsT>(
   'p',
   // $FlowFixMe - suppressing due to webkit properties
-  ({$maxLines = 1, $theme}) => {
+  ({ $maxLines = 1, $theme }) => {
     return {
       ...$theme.typography.HeadingSmall,
       color: $theme.colors.contentPrimary,
@@ -169,13 +164,13 @@ export const StyledHeadingMainHeading = styled<StyledHeadingHeadingPropsT>(
       '-webkit-box-orient': 'vertical',
       overflow: 'hidden',
     };
-  },
+  }
 );
 
 export const StyledHeadingSubHeading = styled<StyledHeadingHeadingPropsT>(
   'p',
   // $FlowFixMe - suppressing due to webkit properties
-  ({$maxLines = 1, $theme}) => {
+  ({ $maxLines = 1, $theme }) => {
     return {
       ...$theme.typography.ParagraphLarge,
       color: $theme.colors.contentPrimary,
@@ -187,34 +182,31 @@ export const StyledHeadingSubHeading = styled<StyledHeadingHeadingPropsT>(
       '-webkit-box-orient': 'vertical',
       overflow: 'hidden',
     };
-  },
+  }
 );
 
-export const StyledHeadingEndEnhancerContainer = styled<{$isText: boolean}>(
+export const StyledHeadingEndEnhancerContainer = styled<{ $isText: boolean }>(
   'div',
-  ({$isText, $theme}) => ({
+  ({ $isText, $theme }) => ({
     ...$theme.typography.LabelMedium,
     display: 'flex',
     alignItems: $isText ? 'flex-end' : 'center',
     whiteSpace: 'nowrap',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
-  }),
+  })
 );
 
-export const StyledHeadingEndEnhancerDescriptionContainer = styled<{}>(
-  'p',
-  ({$theme}) => ({
-    ...$theme.typography.ParagraphMedium,
-    marginTop: 0,
-    marginBottom: 0,
-    display: 'flex',
-    alignItems: 'flex-start',
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-  }),
-);
+export const StyledHeadingEndEnhancerDescriptionContainer = styled<{}>('p', ({ $theme }) => ({
+  ...$theme.typography.ParagraphMedium,
+  marginTop: 0,
+  marginBottom: 0,
+  display: 'flex',
+  alignItems: 'flex-start',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+}));
 
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;

package/list/types.js.flow

@@ -8,9 +8,9 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import type {OverrideT} from '../helpers/overrides.js';
-import type {IconPropsT} from '../icon/types.js';
-import {ARTWORK_SIZES, SHAPE} from './constants.js';
+import type { OverrideT } from '../helpers/overrides.js';
+import type { IconPropsT } from '../icon/types.js';
+import { ARTWORK_SIZES, SHAPE } from './constants.js';
 
 export type ArtworkSizesT =
   | typeof ARTWORK_SIZES.SMALL
@@ -26,7 +26,7 @@ export type StyledArtworkContainerPropsT = {
   $artworkSize: ArtworkSizesT | number,
   $sublist?: boolean,
 };
-export type StyledContentPropsT = {$mLeft: boolean, $sublist: boolean};
+export type StyledContentPropsT = { $mLeft: boolean, $sublist: boolean };
 
 export type OverridesT = {|
   Root?: OverrideT,

package/list/utils.js.flow

@@ -6,13 +6,10 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-import {ARTWORK_SIZES} from './constants.js';
-import type {ArtworkSizesT} from './types.js';
+import { ARTWORK_SIZES } from './constants.js';
+import type { ArtworkSizesT } from './types.js';
 
-export function artworkSizeToValue(
-  artworkSize: ArtworkSizesT,
-  isSublist: boolean,
-) {
+export function artworkSizeToValue(artworkSize: ArtworkSizesT, isSublist: boolean) {
   if (isSublist) {
     switch (artworkSize) {
       case ARTWORK_SIZES.LARGE:

package/locale/es_AR.js.flow

@@ -30,8 +30,7 @@ export default {
     screenReaderMessageInput:
       'Presione la tecla de flecha hacia abajo para interactuar con el calendario y seleccione una fecha. Presione el botón de escape para cerrar el calendario.',
     selectedDate: 'La fecha seleccionada es ${date}.',
-    selectedDateRange:
-      'El rango de fecha seleccionado es desde ${startDate} hasta ${endDate}.',
+    selectedDateRange: 'El rango de fecha seleccionado es desde ${startDate} hasta ${endDate}.',
     selectSecondDatePrompt: 'Selecciona la segunda fecha.',
     quickSelectLabel: 'Selecciona un rango de fechas.',
     quickSelectAriaLabel: 'Selecciona un rango de fechas.',

package/locale/index.js.flow

@@ -8,27 +8,22 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import extend from 'just-extend';
 
-import type {LocaleT} from './types.js';
+import type { LocaleT } from './types.js';
 import en_US from './en_US.js';
 
 export const LocaleContext: React.Context<LocaleT> = React.createContext(en_US);
 
-const LocaleProvider = (props: {
-  locale: $Shape<LocaleT>,
-  children: ?React.Node,
-}) => {
-  const {locale, children} = props;
+const LocaleProvider = (props: { locale: $Shape<LocaleT>, children: ?React.Node }) => {
+  const { locale, children } = props;
   if (__DEV__) {
     if (locale.datepicker && locale.datepicker.timePickerAriaLabel) {
       console.warn(
-        '`timePickerAriaLabel` will be removed in v11 - please use timePickerAriaLabel12Hour and timePickerAriaLabel24Hour instead',
+        '`timePickerAriaLabel` will be removed in v11 - please use timePickerAriaLabel12Hour and timePickerAriaLabel24Hour instead'
       );
     }
   }
   return (
-    <LocaleContext.Provider value={extend({}, en_US, locale)}>
-      {children}
-    </LocaleContext.Provider>
+    <LocaleContext.Provider value={extend({}, en_US, locale)}>{children}</LocaleContext.Provider>
   );
 };
 

package/locale/types.js.flow

@@ -6,18 +6,18 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-import type {AccordionLocaleT} from '../accordion/locale.js';
-import type {BreadcrumbLocaleT} from '../breadcrumbs/locale.js';
-import type {DatepickerLocaleT} from '../datepicker/locale.js';
-import type {DataTableLocaleT} from '../data-table/locale.js';
-import type {ButtonGroupLocaleT} from '../button-group/locale.js';
-import type {FileUploaderLocaleT} from '../file-uploader/locale.js';
-import type {MenuLocaleT} from '../menu/locale.js';
-import type {ModalLocaleT} from '../modal/locale.js';
-import type {DrawerLocaleT} from '../drawer/locale.js';
-import type {PaginationLocaleT} from '../pagination/locale.js';
-import type {SelectLocaleT} from '../select/locale.js';
-import type {ToastLocaleT} from '../toast/locale.js';
+import type { AccordionLocaleT } from '../accordion/locale.js';
+import type { BreadcrumbLocaleT } from '../breadcrumbs/locale.js';
+import type { DatepickerLocaleT } from '../datepicker/locale.js';
+import type { DataTableLocaleT } from '../data-table/locale.js';
+import type { ButtonGroupLocaleT } from '../button-group/locale.js';
+import type { FileUploaderLocaleT } from '../file-uploader/locale.js';
+import type { MenuLocaleT } from '../menu/locale.js';
+import type { ModalLocaleT } from '../modal/locale.js';
+import type { DrawerLocaleT } from '../drawer/locale.js';
+import type { PaginationLocaleT } from '../pagination/locale.js';
+import type { SelectLocaleT } from '../select/locale.js';
+import type { ToastLocaleT } from '../toast/locale.js';
 
 export type LocaleT = {|
   accordion: AccordionLocaleT,

package/map-marker/badge-enhancer.js.flow

@@ -7,9 +7,9 @@ LICENSE file in the root directory of this source tree.
 
 // @flow
 import * as React from 'react';
-import type {BadgeEnhancerComponentT} from './types.js';
-import {getOverrides} from '../helpers/overrides.js';
-import {StyledBadgeEnhancerRoot} from './styled-components.js';
+import type { BadgeEnhancerComponentT } from './types.js';
+import { getOverrides } from '../helpers/overrides.js';
+import { StyledBadgeEnhancerRoot } from './styled-components.js';
 import {
   PINHEAD_TYPES,
   BADGE_ENHANCER_SIZES,
@@ -24,20 +24,12 @@ const BadgeEnhancer = ({
   badgeEnhancerContent: BadgeEnhancerContent,
   overrides = {},
 }: BadgeEnhancerComponentT) => {
-  if (
-    badgeEnhancerSize === null ||
-    badgeEnhancerSize == BADGE_ENHANCER_SIZES.none
-  ) {
+  if (badgeEnhancerSize === null || badgeEnhancerSize == BADGE_ENHANCER_SIZES.none) {
     return null;
   }
-  if (
-    badgeEnhancerSize !== BADGE_ENHANCER_SIZES.xSmall &&
-    !BadgeEnhancerContent
-  ) {
+  if (badgeEnhancerSize !== BADGE_ENHANCER_SIZES.xSmall && !BadgeEnhancerContent) {
     if (__DEV__) {
-      console.warn(
-        `Badges (except for size ${BADGE_ENHANCER_SIZES.xSmall}) must contain content`,
-      );
+      console.warn(`Badges (except for size ${BADGE_ENHANCER_SIZES.xSmall}) must contain content`);
     }
     return null;
   }
@@ -52,7 +44,7 @@ const BadgeEnhancer = ({
   if (!position) {
     if (__DEV__) {
       console.warn(
-        `Badge size ${badgeEnhancerSize} cannot be rendered with pinhead size ${pinHeadSize}`,
+        `Badge size ${badgeEnhancerSize} cannot be rendered with pinhead size ${pinHeadSize}`
       );
     }
     return null;
@@ -60,21 +52,14 @@ const BadgeEnhancer = ({
 
   const [BadgeEnhancerRoot, badgeEnhancerRootProps] = getOverrides(
     overrides.BadgeEnhancer,
-    StyledBadgeEnhancerRoot,
+    StyledBadgeEnhancerRoot
   );
 
   return (
-    <BadgeEnhancerRoot
-      $size={badgeEnhancerSize}
-      $position={position}
-      {...badgeEnhancerRootProps}
-    >
-      {BadgeEnhancerContent &&
-        badgeEnhancerSize !== BADGE_ENHANCER_SIZES.xSmall && (
-          <BadgeEnhancerContent
-            size={BADGE_ENHANCER_CONTENT_SIZE[badgeEnhancerSize]}
-          />
-        )}
+    <BadgeEnhancerRoot $size={badgeEnhancerSize} $position={position} {...badgeEnhancerRootProps}>
+      {BadgeEnhancerContent && badgeEnhancerSize !== BADGE_ENHANCER_SIZES.xSmall && (
+        <BadgeEnhancerContent size={BADGE_ENHANCER_CONTENT_SIZE[badgeEnhancerSize]} />
+      )}
     </BadgeEnhancerRoot>
   );
 };

package/map-marker/constants.js.flow

@@ -44,9 +44,9 @@ export const PINHEAD_DIMENSIONS = Object.freeze({
   [PINHEAD_SIZES_SHAPES.xxSmallCircle]: xxSmallPinheadDimension,
   [PINHEAD_SIZES_SHAPES.xSmallSquare]: xSmallPinheadDimension,
   [PINHEAD_SIZES_SHAPES.xSmallCircle]: xSmallPinheadDimension,
-  [PINHEAD_SIZES_SHAPES.small]: {height: 24, icon: 16},
-  [PINHEAD_SIZES_SHAPES.medium]: {height: 36, icon: 16},
-  [PINHEAD_SIZES_SHAPES.large]: {height: 48, icon: 24},
+  [PINHEAD_SIZES_SHAPES.small]: { height: 24, icon: 16 },
+  [PINHEAD_SIZES_SHAPES.medium]: { height: 36, icon: 16 },
+  [PINHEAD_SIZES_SHAPES.large]: { height: 48, icon: 24 },
 });
 
 export const PINHEAD_TYPES = Object.freeze({