@primer/components 31.2.0-rc.fbb10090 → 31.2.0

package/src/Autocomplete/AutocompleteContext.tsx

@@ -1,19 +0,0 @@
-import {createContext} from 'react'
-
-export const AutocompleteContext = createContext<{
-  activeDescendantRef: React.MutableRefObject<HTMLElement | null>
-  autocompleteSuggestion: string
-  // TODO: consider changing `id` to `listboxId` because we're just using it to associate the input and combobox with the listbox
-  id: string
-  inputRef: React.MutableRefObject<HTMLInputElement | null>
-  inputValue: string
-  isMenuDirectlyActivated: boolean
-  scrollContainerRef: React.MutableRefObject<HTMLElement | null>
-  selectedItemLength: number
-  setAutocompleteSuggestion: (value: string) => void
-  setInputValue: (value: string) => void
-  setIsMenuDirectlyActivated: (value: boolean) => void
-  setSelectedItemLength: (value: number) => void
-  setShowMenu: (value: boolean) => void
-  showMenu: boolean
-} | null>(null)

package/src/Autocomplete/AutocompleteInput.tsx

@@ -1,179 +0,0 @@
-import React, {
-  ChangeEventHandler,
-  FocusEventHandler,
-  KeyboardEventHandler,
-  MutableRefObject,
-  useCallback,
-  useContext,
-  useEffect,
-  useState
-} from 'react'
-import {ForwardRefComponent as PolymorphicForwardRefComponent} from '@radix-ui/react-polymorphic'
-import {AutocompleteContext} from './AutocompleteContext'
-import TextInput from '../TextInput'
-import {useCombinedRefs} from '../hooks/useCombinedRefs'
-import {ComponentProps} from '../utils/types'
-
-type InternalAutocompleteInputProps = {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  as?: React.ComponentType<any>
-}
-
-const AutocompleteInput = React.forwardRef(
-  (
-    {as: Component = TextInput, onFocus, onBlur, onChange, onKeyDown, onKeyUp, onKeyPress, value, ...props},
-    forwardedRef
-  ) => {
-    const autocompleteContext = useContext(AutocompleteContext)
-    if (autocompleteContext === null) {
-      throw new Error('AutocompleteContext returned null values')
-    }
-    const {
-      activeDescendantRef,
-      autocompleteSuggestion = '',
-      id,
-      inputRef,
-      inputValue = '',
-      isMenuDirectlyActivated,
-      setInputValue,
-      setShowMenu,
-      showMenu
-    } = autocompleteContext
-    const combinedInputRef = useCombinedRefs(inputRef, forwardedRef)
-    const [highlightRemainingText, setHighlightRemainingText] = useState<boolean>(true)
-
-    const handleInputFocus: FocusEventHandler<HTMLInputElement> = useCallback(
-      event => {
-        onFocus && onFocus(event)
-        setShowMenu(true)
-      },
-      [onFocus, setShowMenu]
-    )
-
-    const handleInputBlur: FocusEventHandler<HTMLInputElement> = useCallback(
-      event => {
-        onBlur && onBlur(event)
-
-        // HACK: wait a tick and check the focused element before hiding the autocomplete menu
-        // this prevents the menu from hiding when the user is clicking an option in the Autoselect.Menu,
-        // but still hides the menu when the user blurs the input by tabbing out or clicking somewhere else on the page
-        setTimeout(() => {
-          if (document.activeElement !== combinedInputRef.current) {
-            setShowMenu(false)
-          }
-        }, 0)
-      },
-      [onBlur, setShowMenu, combinedInputRef]
-    )
-
-    const handleInputChange: ChangeEventHandler<HTMLInputElement> = useCallback(
-      event => {
-        onChange && onChange(event)
-        setInputValue(event.currentTarget.value)
-        if (!showMenu) {
-          setShowMenu(true)
-        }
-      },
-      [onChange, setInputValue, setShowMenu, showMenu]
-    )
-
-    const handleInputKeyDown: KeyboardEventHandler<HTMLInputElement> = useCallback(
-      event => {
-        onKeyDown && onKeyDown(event)
-
-        if (event.key === 'Backspace') {
-          setHighlightRemainingText(false)
-        }
-
-        if (event.key === 'Escape' && inputRef.current?.value) {
-          setInputValue('')
-          inputRef.current.value = ''
-        }
-      },
-      [inputRef, setInputValue, setHighlightRemainingText, onKeyDown]
-    )
-
-    const handleInputKeyUp: KeyboardEventHandler<HTMLInputElement> = useCallback(
-      event => {
-        onKeyUp && onKeyUp(event)
-
-        if (event.key === 'Backspace') {
-          setHighlightRemainingText(true)
-        }
-      },
-      [setHighlightRemainingText, onKeyUp]
-    )
-
-    const onInputKeyPress: KeyboardEventHandler<HTMLInputElement> = useCallback(
-      event => {
-        onKeyPress && onKeyPress(event)
-
-        if (showMenu && event.key === 'Enter' && activeDescendantRef.current) {
-          event.preventDefault()
-          event.nativeEvent.stopImmediatePropagation()
-
-          // Forward Enter key press to active descendant so that item gets activated
-          const activeDescendantEvent = new KeyboardEvent(event.type, event.nativeEvent)
-          activeDescendantRef.current.dispatchEvent(activeDescendantEvent)
-        }
-      },
-      [activeDescendantRef, showMenu, onKeyPress]
-    )
-
-    useEffect(() => {
-      if (!inputRef.current) {
-        return
-      }
-
-      // resets input value to being empty after a selection has been made
-      if (!autocompleteSuggestion) {
-        inputRef.current.value = inputValue
-      }
-
-      // TODO: fix bug where this function prevents `onChange` from being triggered if the highlighted item text
-      //       is the same as what I'm typing
-      //       e.g.: typing 'tw' highights 'two', but when I 'two', the text input change does not get triggered
-      if (highlightRemainingText && autocompleteSuggestion && (inputValue || isMenuDirectlyActivated)) {
-        inputRef.current.value = autocompleteSuggestion
-
-        if (autocompleteSuggestion.toLowerCase().indexOf(inputValue.toLowerCase()) === 0) {
-          inputRef.current.setSelectionRange(inputValue.length, autocompleteSuggestion.length)
-        }
-      }
-
-      // calling this useEffeect when `highlightRemainingText` changes breaks backspace functionality
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [autocompleteSuggestion, inputValue, inputRef, isMenuDirectlyActivated])
-
-    useEffect(() => {
-      if (value) {
-        setInputValue(value.toString())
-      }
-    }, [value, setInputValue])
-
-    return (
-      <Component
-        onFocus={handleInputFocus}
-        onBlur={handleInputBlur}
-        onChange={handleInputChange}
-        onKeyDown={handleInputKeyDown}
-        onKeyPress={onInputKeyPress}
-        onKeyUp={handleInputKeyUp}
-        ref={combinedInputRef as MutableRefObject<HTMLInputElement>}
-        aria-controls={`${id}-listbox`}
-        aria-autocomplete="both"
-        role="combobox"
-        aria-expanded={showMenu}
-        aria-haspopup="listbox"
-        aria-owns={`${id}-listbox`}
-        autocomplete="off"
-        {...props}
-      />
-    )
-  }
-) as PolymorphicForwardRefComponent<typeof TextInput, InternalAutocompleteInputProps>
-
-AutocompleteInput.displayName = 'AutocompleteInput'
-
-export type AutocompleteInputProps = ComponentProps<typeof AutocompleteInput>
-export default AutocompleteInput

package/src/Autocomplete/AutocompleteMenu.tsx

@@ -1,341 +0,0 @@
-import React, {useContext, useEffect, useMemo, useRef, useState} from 'react'
-import {ActionList, ItemProps} from '../ActionList'
-import {useFocusZone} from '../hooks/useFocusZone'
-import {ComponentProps, MandateProps} from '../utils/types'
-import {Box, Spinner} from '../'
-import {AutocompleteContext} from './AutocompleteContext'
-import {PlusIcon} from '@primer/octicons-react'
-import {uniqueId} from '../utils/uniqueId'
-import {scrollIntoViewingArea} from '../behaviors/scrollIntoViewingArea'
-
-type OnSelectedChange<T> = (item: T | T[]) => void
-type AutocompleteMenuItem = MandateProps<ItemProps, 'id'>
-
-const getDefaultSortFn =
-  (isItemSelectedFn: (itemId: string | number) => boolean) => (itemIdA: string | number, itemIdB: string | number) =>
-    isItemSelectedFn(itemIdA) === isItemSelectedFn(itemIdB) ? 0 : isItemSelectedFn(itemIdA) ? -1 : 1
-
-function getDefaultItemFilter<T extends AutocompleteMenuItem>(filterValue: string) {
-  return function (item: T, _i: number) {
-    return Boolean(item.text?.toLowerCase().startsWith(filterValue.toLowerCase()))
-  }
-}
-
-function getDefaultOnSelectionChange<T extends AutocompleteMenuItem>(
-  setInputValueFn: (value: string) => void
-): OnSelectedChange<T> {
-  return function (itemOrItems) {
-    const {text = ''} = Array.isArray(itemOrItems) ? itemOrItems.slice(-1)[0] : itemOrItems
-    setInputValueFn(text)
-  }
-}
-
-const isItemSelected = (itemId: string | number, selectedItemIds: Array<string | number>) =>
-  selectedItemIds.includes(itemId)
-
-function getItemById<T extends AutocompleteMenuItem>(itemId: string | number, items: T[]) {
-  return items.find(item => item.id === itemId)
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type AutocompleteItemProps<T = Record<string, any>> = AutocompleteMenuItem & {metadata?: T}
-
-export type AutocompleteMenuInternalProps<T extends AutocompleteItemProps> = {
-  /**
-   * A menu item that is used to allow users make a selection that is not available in the array passed to the `items` prop.
-   * This menu item gets appended to the end of the list of options.
-   */
-  // TODO: rethink this part of the component API. this is kind of weird and confusing to use
-  // TODO: rethink `addNewItem` prop name
-  addNewItem?: Omit<T, 'onAction' | 'leadingVisual' | 'id'> & {
-    handleAddItem: (item: Omit<T, 'onAction' | 'leadingVisual'>) => void
-  }
-
-  /**
-   * The text that appears in the menu when there are no options in the array passed to the `items` prop.
-   */
-  emptyStateText?: React.ReactNode | false
-
-  /**
-   * A custom function used to filter the options in the array passed to the `items` prop.
-   * By default, we filter out items that don't match the value of the autocomplete text input. The default filter is not case-sensitive.
-   */
-  filterFn?: (item: T, i: number) => boolean
-
-  /**
-   * The options for field values that are displayed in the dropdown menu.
-   * One or more may be selected depending on the value of the `selectionVariant` prop.
-   */
-  items: T[]
-
-  /**
-   * Whether the data is loaded for the menu items
-   */
-  loading?: boolean
-
-  /**
-   * The IDs of the selected items
-   */
-  // NOTE: this diverges from the SelectPanel component API, where we pass an array of objects to the `selected` prop
-  selectedItemIds: Array<string | number>
-
-  /**
-   * The sort function that is applied to the options in the array passed to the `items` prop after the user closes the menu.
-   * By default, selected items are sorted to the top after the user closes the menu.
-   */
-  sortOnCloseFn?: (itemIdA: string | number, itemIdB: string | number) => number
-
-  /**
-   * Whether there can be one item selected from the menu or multiple items selected from the menu
-   */
-  selectionVariant?: 'single' | 'multiple'
-
-  /**
-   * Function that gets called when the menu is opened or closed
-   */
-  onOpenChange?: (open: boolean) => void
-
-  /**
-   * The function that is called when an item in the list is selected or deselected
-   */
-  onSelectedChange?: OnSelectedChange<T>
-
-  /**
-   * If the menu is rendered in a scrolling element other than the `Autocomplete.Overlay` component,
-   * pass the ref of that element to `customScrollContainerRef` to ensure the container automatically
-   * scrolls when the user highlights an item in the menu that is outside the scroll container
-   */
-  customScrollContainerRef?: React.MutableRefObject<HTMLElement | null>
-} & Pick<React.AriaAttributes, 'aria-labelledby'>
-
-function AutocompleteMenu<T extends AutocompleteItemProps>(props: AutocompleteMenuInternalProps<T>) {
-  const autocompleteContext = useContext(AutocompleteContext)
-  if (autocompleteContext === null) {
-    throw new Error('AutocompleteContext returned null values')
-  }
-  const {
-    activeDescendantRef,
-    id,
-    inputRef,
-    inputValue = '',
-    scrollContainerRef,
-    setAutocompleteSuggestion,
-    setShowMenu,
-    setInputValue,
-    setIsMenuDirectlyActivated,
-    setSelectedItemLength,
-    showMenu
-  } = autocompleteContext
-  const {
-    items,
-    selectedItemIds,
-    sortOnCloseFn,
-    emptyStateText,
-    addNewItem,
-    loading,
-    selectionVariant,
-    filterFn,
-    'aria-labelledby': ariaLabelledBy,
-    onOpenChange,
-    onSelectedChange,
-    customScrollContainerRef
-  } = props
-  const listContainerRef = useRef<HTMLDivElement>(null)
-  const [highlightedItem, setHighlightedItem] = useState<T>()
-  const [sortedItemIds, setSortedItemIds] = useState<Array<number | string>>(items.map(({id: itemId}) => itemId))
-
-  const selectableItems = useMemo(
-    () =>
-      items.map(selectableItem => {
-        return {
-          ...selectableItem,
-          role: 'option',
-          id: selectableItem.id,
-          selected: selectionVariant === 'multiple' ? selectedItemIds.includes(selectableItem.id) : undefined,
-          onAction: (item: T) => {
-            const otherSelectedItemIds = selectedItemIds.filter(selectedItemId => selectedItemId !== item.id)
-            const newSelectedItemIds = selectedItemIds.includes(item.id)
-              ? otherSelectedItemIds
-              : [...otherSelectedItemIds, item.id]
-            const onSelectedChangeFn = onSelectedChange ? onSelectedChange : getDefaultOnSelectionChange(setInputValue)
-
-            onSelectedChangeFn(
-              newSelectedItemIds.map(newSelectedItemId => getItemById(newSelectedItemId, items)) as T[]
-            )
-
-            if (selectionVariant === 'multiple') {
-              setInputValue('')
-              setAutocompleteSuggestion('')
-            } else {
-              setShowMenu(false)
-              inputRef.current?.setSelectionRange(inputRef.current.value.length, inputRef.current.value.length)
-            }
-          }
-        }
-      }),
-    [
-      items,
-      selectedItemIds,
-      inputRef,
-      onSelectedChange,
-      selectionVariant,
-      setAutocompleteSuggestion,
-      setInputValue,
-      setShowMenu
-    ]
-  )
-
-  const itemSortOrderData = useMemo(
-    () =>
-      sortedItemIds.reduce<Record<string | number, number>>((acc, curr, i) => {
-        acc[curr] = i
-
-        return acc
-      }, {}),
-    [sortedItemIds]
-  )
-
-  const sortedAndFilteredItemsToRender = useMemo(
-    () =>
-      selectableItems
-        .filter(filterFn ? filterFn : getDefaultItemFilter(inputValue))
-        .sort((a, b) => itemSortOrderData[a.id] - itemSortOrderData[b.id]),
-    [selectableItems, itemSortOrderData, filterFn, inputValue]
-  )
-
-  const allItemsToRender = useMemo(
-    () => [
-      // sorted and filtered selectable items
-      ...sortedAndFilteredItemsToRender,
-
-      // menu item used for creating a token from whatever is in the text input
-      ...(addNewItem
-        ? [
-            {
-              ...addNewItem,
-              leadingVisual: () => <PlusIcon />,
-              onAction: (item: T) => {
-                // TODO: make it possible to pass a leadingVisual when using `addNewItem`
-                addNewItem.handleAddItem({...item, id: item.id || uniqueId(), leadingVisual: undefined})
-
-                if (selectionVariant === 'multiple') {
-                  setInputValue('')
-                  setAutocompleteSuggestion('')
-                }
-              }
-            }
-          ]
-        : [])
-    ],
-    [sortedAndFilteredItemsToRender, addNewItem, setAutocompleteSuggestion, selectionVariant, setInputValue]
-  )
-
-  useFocusZone(
-    {
-      containerRef: listContainerRef,
-      focusOutBehavior: 'wrap',
-      focusableElementFilter: element => {
-        return !(element instanceof HTMLInputElement)
-      },
-      activeDescendantFocus: inputRef,
-      onActiveDescendantChanged: (current, _previous, directlyActivated) => {
-        activeDescendantRef.current = current || null
-        if (current) {
-          const selectedItem = selectableItems.find(item => item.id.toString() === current.getAttribute('data-id'))
-
-          setHighlightedItem(selectedItem)
-          setIsMenuDirectlyActivated(directlyActivated)
-        }
-
-        if (current && customScrollContainerRef && customScrollContainerRef.current && directlyActivated) {
-          scrollIntoViewingArea(current, customScrollContainerRef.current)
-        } else if (current && scrollContainerRef.current && directlyActivated) {
-          scrollIntoViewingArea(current, scrollContainerRef.current)
-        }
-      }
-    },
-    [loading]
-  )
-
-  useEffect(() => {
-    if (highlightedItem?.text?.startsWith(inputValue) && !selectedItemIds.includes(highlightedItem.id)) {
-      setAutocompleteSuggestion(highlightedItem.text)
-    } else {
-      setAutocompleteSuggestion('')
-    }
-  }, [highlightedItem, inputValue, selectedItemIds, setAutocompleteSuggestion])
-
-  useEffect(() => {
-    const itemIdSortResult = [...sortedItemIds].sort(
-      sortOnCloseFn ? sortOnCloseFn : getDefaultSortFn(itemId => isItemSelected(itemId, selectedItemIds))
-    )
-    const sortResultMatchesState =
-      itemIdSortResult.length === sortedItemIds.length &&
-      itemIdSortResult.every((element, index) => element === sortedItemIds[index])
-
-    if (showMenu === false && !sortResultMatchesState) {
-      setSortedItemIds(itemIdSortResult)
-    }
-
-    onOpenChange && onOpenChange(Boolean(showMenu))
-  }, [showMenu, onOpenChange, selectedItemIds, sortOnCloseFn, sortedItemIds])
-
-  useEffect(() => {
-    if (selectedItemIds.length) {
-      setSelectedItemLength(selectedItemIds.length)
-    }
-  }, [selectedItemIds, setSelectedItemLength])
-
-  return (
-    <Box
-      sx={
-        !showMenu
-          ? {
-              // visually hides this label for sighted users
-              position: 'absolute',
-              width: '1px',
-              height: '1px',
-              padding: '0',
-              margin: '-1px',
-              overflow: 'hidden',
-              clip: 'rect(0, 0, 0, 0)',
-              whiteSpace: 'nowrap',
-              borderWidth: '0'
-            }
-          : {}
-      }
-    >
-      {loading ? (
-        <Box p={3} display="flex" justifyContent="center">
-          <Spinner />
-        </Box>
-      ) : (
-        <div ref={listContainerRef}>
-          {allItemsToRender.length ? (
-            <ActionList
-              selectionVariant="multiple"
-              // have to typecast to `ItemProps` because we have an extra property
-              // on `items` for Autocomplete: `metadata`
-              items={allItemsToRender as ItemProps[]}
-              role="listbox"
-              id={`${id}-listbox`}
-              aria-labelledby={ariaLabelledBy}
-            />
-          ) : (
-            <Box p={3}>{emptyStateText}</Box>
-          )}
-        </div>
-      )}
-    </Box>
-  )
-}
-
-AutocompleteMenu.defaultProps = {
-  emptyStateText: 'No selectable options',
-  selectionVariant: 'single'
-}
-
-AutocompleteMenu.displayName = 'AutocompleteMenu'
-
-export type AutocompleteMenuProps = ComponentProps<typeof AutocompleteMenu>
-export default AutocompleteMenu

package/src/Autocomplete/AutocompleteOverlay.tsx

@@ -1,68 +0,0 @@
-import React, {useCallback, useContext} from 'react'
-import {useAnchoredPosition} from '../hooks'
-import Overlay, {OverlayProps} from '../Overlay'
-import {ComponentProps} from '../utils/types'
-import {AutocompleteContext} from './AutocompleteContext'
-import {useCombinedRefs} from '../hooks/useCombinedRefs'
-
-type AutocompleteOverlayInternalProps = {
-  /**
-   * The ref of the element that the position of the menu is based on. By default, the menu is positioned based on the text input
-   */
-  menuAnchorRef?: React.RefObject<HTMLElement>
-  /**
-   * Props to be spread on the internal `Overlay` component.
-   */
-  overlayProps?: Partial<OverlayProps>
-  children?: React.ReactNode
-} & Pick<React.AriaAttributes, 'aria-labelledby'> // TODO: consider making 'aria-labelledby' required
-
-function AutocompleteOverlay({menuAnchorRef, overlayProps, children}: AutocompleteOverlayInternalProps) {
-  const autocompleteContext = useContext(AutocompleteContext)
-  if (autocompleteContext === null) {
-    throw new Error('AutocompleteContext returned null values')
-  }
-  const {inputRef, scrollContainerRef, selectedItemLength, setShowMenu, showMenu = false} = autocompleteContext
-  const {floatingElementRef, position} = useAnchoredPosition(
-    {
-      side: 'outside-bottom',
-      align: 'start',
-      anchorElementRef: menuAnchorRef ? menuAnchorRef : inputRef
-    },
-    [showMenu, selectedItemLength]
-  )
-
-  const combinedOverlayRef = useCombinedRefs(scrollContainerRef, floatingElementRef)
-
-  const closeOptionList = useCallback(() => {
-    setShowMenu(false)
-  }, [setShowMenu])
-
-  if (typeof window === 'undefined') {
-    return null
-  }
-
-  return (
-    <Overlay
-      returnFocusRef={inputRef}
-      preventFocusOnOpen={true}
-      onClickOutside={closeOptionList}
-      onEscape={closeOptionList}
-      ref={combinedOverlayRef as React.RefObject<HTMLDivElement>}
-      top={position?.top}
-      left={position?.left}
-      visibility={showMenu ? 'visible' : 'hidden'}
-      sx={{
-        overflow: 'auto'
-      }}
-      {...overlayProps}
-    >
-      {children}
-    </Overlay>
-  )
-}
-
-AutocompleteOverlay.displayName = 'AutocompleteOverlay'
-
-export type AutocompleteOverlayProps = ComponentProps<typeof AutocompleteOverlay>
-export default AutocompleteOverlay

package/src/Autocomplete/index.ts

@@ -1,2 +0,0 @@
-export {default} from './Autocomplete'
-export type {AutocompleteMenuProps, AutocompleteInputProps, AutocompleteOverlayProps} from './Autocomplete'

package/src/Avatar.tsx

@@ -1,46 +0,0 @@
-import styled from 'styled-components'
-import {COMMON, get, SystemCommonProps} from './constants'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
-
-type StyledAvatarProps = {
-  /** Sets the width and height of the avatar. */
-  size?: number
-  /** Sets the shape of the avatar to a square if true. If false, the avatar will be circular. */
-  square?: boolean
-  /** URL of the avatar image. */
-  src: string
-  /** Provide alt text when the Avatar is used without the user's name next to it. */
-  alt?: string
-} & SystemCommonProps &
-  SxProp
-
-function getBorderRadius({size, square}: StyledAvatarProps) {
-  if (square) {
-    return size && size <= 24 ? '4px' : '6px'
-  } else {
-    return '50%'
-  }
-}
-
-const Avatar = styled.img.attrs<StyledAvatarProps>(props => ({
-  height: props.size,
-  width: props.size
-}))<StyledAvatarProps>`
-  display: inline-block;
-  overflow: hidden; // Ensure page layout in Firefox should images fail to load
-  line-height: ${get('lineHeights.condensedUltra')};
-  vertical-align: middle;
-  border-radius: ${props => getBorderRadius(props)};
-  ${COMMON};
-  ${sx}
-`
-
-Avatar.defaultProps = {
-  size: 20,
-  alt: '',
-  square: false
-}
-
-export type AvatarProps = ComponentProps<typeof Avatar>
-export default Avatar

package/src/AvatarPair.tsx

@@ -1,35 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-import Avatar from './Avatar'
-import {get} from './constants'
-import {Box, BoxProps} from '.'
-
-const ChildAvatar = styled(Avatar)`
-  position: absolute;
-  right: -15%;
-  bottom: -9%;
-  box-shadow: ${get('shadows.avatar.childShadow')};
-`
-
-export type AvatarPairProps = BoxProps
-
-const AvatarPair = ({children, ...rest}: AvatarPairProps) => {
-  const avatars = React.Children.map(children, (child, i) => {
-    if (!React.isValidElement(child)) return child
-    return i === 0 ? (
-      React.cloneElement(child, {size: 40})
-    ) : (
-      <ChildAvatar bg="canvas.default" {...child.props} size={20} />
-    )
-  })
-  return (
-    <Box position="relative" display="inline-flex" {...rest}>
-      {avatars}
-    </Box>
-  )
-}
-
-// styled() changes this
-AvatarPair.displayName = 'AvatarPair'
-
-export default AvatarPair