@primer/components 29.0.0-rc.f749c85e → 29.1.0

package/src/Portal/Portal.tsx

@@ -1,96 +0,0 @@
-import React from 'react'
-import {createPortal} from 'react-dom'
-
-const PRIMER_PORTAL_ROOT_ID = '__primerPortalRoot__'
-const DEFAULT_PORTAL_CONTAINER_NAME = '__default__'
-
-const portalRootRegistry: Partial<Record<string, Element>> = {}
-
-/**
- * Register a container to serve as a portal root.
- * @param root The element that will be the root for portals created in this container
- * @param name The name of the container, to be used with the `containerName` prop on the Portal Component.
- * If name is not specified, registers the default portal root.
- */
-export function registerPortalRoot(root: Element, name = DEFAULT_PORTAL_CONTAINER_NAME): void {
-  portalRootRegistry[name] = root
-}
-
-// Ensures that a default portal root exists and is registered. If a DOM element exists
-// with id __primerPortalRoot__, allow that element to serve as the default portal root.
-// Otherwise, create that element and attach it to the end of document.body.
-function ensureDefaultPortal() {
-  const existingDefaultPortalContainer = portalRootRegistry[DEFAULT_PORTAL_CONTAINER_NAME]
-  if (!existingDefaultPortalContainer || !document.body.contains(existingDefaultPortalContainer)) {
-    let defaultPortalContainer = document.getElementById(PRIMER_PORTAL_ROOT_ID)
-    if (!(defaultPortalContainer instanceof Element)) {
-      defaultPortalContainer = document.createElement('div')
-      defaultPortalContainer.setAttribute('id', PRIMER_PORTAL_ROOT_ID)
-      defaultPortalContainer.style.position = 'absolute'
-      defaultPortalContainer.style.top = '0'
-      defaultPortalContainer.style.left = '0'
-      const suitablePortalRoot = document.querySelector('[data-portal-root]')
-      if (suitablePortalRoot) {
-        suitablePortalRoot.appendChild(defaultPortalContainer)
-      } else {
-        document.body.appendChild(defaultPortalContainer)
-      }
-    }
-
-    registerPortalRoot(defaultPortalContainer)
-  }
-}
-
-export interface PortalProps {
-  /**
-   * Called when this portal is added to the DOM
-   */
-  onMount?: () => void
-
-  /**
-   * Optional. Mount this portal at the container specified
-   * by this name. The container must be previously registered
-   * with `registerPortal`.
-   */
-  containerName?: string
-}
-
-/**
- * Creates a React Portal, placing all children in a separate physical DOM root node.
- * @see https://reactjs.org/docs/portals.html
- */
-export const Portal: React.FC<PortalProps> = ({children, onMount, containerName: _containerName}) => {
-  const hostElement = document.createElement('div')
-
-  // Portaled content should get their own stacking context so they don't interfere
-  // with each other in unexpected ways. One should never find themselves tempted
-  // to change the zIndex to a value other than "1".
-  hostElement.style.position = 'relative'
-  hostElement.style.zIndex = '1'
-  const elementRef = React.useRef(hostElement)
-
-  React.useLayoutEffect(() => {
-    let containerName = _containerName
-    if (containerName === undefined) {
-      containerName = DEFAULT_PORTAL_CONTAINER_NAME
-      ensureDefaultPortal()
-    }
-    const parentElement = portalRootRegistry[containerName]
-
-    if (!parentElement) {
-      throw new Error(
-        `Portal container '${_containerName}' is not yet registered. Container must be registered with registerPortal before use.`
-      )
-    }
-    const element = elementRef.current
-    parentElement.appendChild(element)
-    onMount?.()
-
-    return () => {
-      parentElement.removeChild(element)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [elementRef])
-
-  return createPortal(children, elementRef.current)
-}

package/src/Portal/index.ts

@@ -1,5 +0,0 @@
-import {Portal, PortalProps, registerPortalRoot} from './Portal'
-
-export default Portal
-export {registerPortalRoot}
-export type {PortalProps}

package/src/Position.tsx

@@ -1,63 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-import Box from './Box'
-import {ComponentProps} from './utils/types'
-
-type StyledPositionProps = {as?: React.ElementType}
-
-/**
- * @deprecated Use the Box component instead (i.e. <Position> → <Box>)
- */
-const Position = styled(Box)<StyledPositionProps>``
-
-export type PositionProps = ComponentProps<typeof Position>
-
-/**
- * @deprecated Use the Box component instead (i.e. <Absolute> → <Box position="absolute">)
- */
-export default Position
-
-// Absolute
-export type AbsoluteProps = Omit<PositionProps, 'position'>
-
-/**
- * @deprecated Use the Box component instead (i.e. <Absolute> → <Box position="absolute">)
- */
-export const Absolute = React.forwardRef((props: AbsoluteProps, ref) => {
-  return <Position {...props} position="absolute" ref={ref} />
-})
-Absolute.displayName = 'Absolute'
-
-// Fixed
-export type FixedProps = Omit<PositionProps, 'position'>
-
-/**
- * @deprecated Use the Box component instead (i.e. <Fixed> → <Box position="fixed">)
- */
-export const Fixed = React.forwardRef((props: AbsoluteProps, ref) => {
-  return <Position {...props} position="fixed" ref={ref} />
-})
-Fixed.displayName = 'Fixed'
-
-// Relative
-export type RelativeProps = Omit<PositionProps, 'position'>
-
-/**
- * @deprecated Use the Box component instead (i.e. <Relative> → <Box position="relative">)
- */
-export const Relative = React.forwardRef((props: RelativeProps, ref) => {
-  return <Position {...props} position="relative" ref={ref} />
-})
-Relative.displayName = 'Relative'
-
-// Sticky
-export type StickyProps = Omit<PositionProps, 'position'>
-
-/**
- * @deprecated Use the Box component instead (i.e. <Sticky> → <Box position="sticky">)
- */
-export const Sticky = React.forwardRef((props: StickyProps, ref) => {
-  return <Position {...props} position="sticky" ref={ref} />
-})
-Sticky.defaultProps = {top: 0, zIndex: 1}
-Sticky.displayName = 'Sticky'

package/src/ProgressBar.tsx

@@ -1,52 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-import {width, WidthProps} from 'styled-system'
-import {COMMON, get, SystemCommonProps} from './constants'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
-
-const Bar = styled.span<{progress?: string | number} & SystemCommonProps>`
-  width: ${props => (props.progress ? `${props.progress}%` : 0)};
-  ${COMMON}
-`
-
-const sizeMap = {
-  small: '5px',
-  large: '10px',
-  default: '8px'
-}
-
-type StyledProgressContainerProps = {
-  inline?: boolean
-  barSize?: keyof typeof sizeMap
-} & WidthProps &
-  SystemCommonProps &
-  SxProp
-
-const ProgressContainer = styled.span<StyledProgressContainerProps>`
-  display: ${props => (props.inline ? 'inline-flex' : 'flex')};
-  overflow: hidden;
-  background-color: ${get('colors.border.primary')};
-  border-radius: ${get('radii.1')};
-  height: ${props => sizeMap[props.barSize || 'default']};
-  ${COMMON}
-  ${width}
-  ${sx};
-`
-
-export type ProgressBarProps = ComponentProps<typeof ProgressContainer> & ComponentProps<typeof Bar>
-
-function ProgressBar({progress, bg, theme, ...rest}: ProgressBarProps) {
-  return (
-    <ProgressContainer theme={theme} {...rest}>
-      <Bar progress={progress} bg={bg} theme={theme} />
-    </ProgressContainer>
-  )
-}
-
-ProgressBar.defaultProps = {
-  bg: 'bg.successInverse',
-  barSize: 'default'
-}
-
-export default ProgressBar

package/src/SelectMenu/SelectMenu.tsx

@@ -1,125 +0,0 @@
-import React, {useCallback, useEffect, useRef, useState} from 'react'
-import styled from 'styled-components'
-import {COMMON, SystemCommonProps} from '../constants'
-import sx, {SxProp} from '../sx'
-import {ComponentProps} from '../utils/types'
-import useKeyboardNav from './hooks/useKeyboardNav'
-import {MenuContext} from './SelectMenuContext'
-import SelectMenuDivider from './SelectMenuDivider'
-import SelectMenuFilter from './SelectMenuFilter'
-import SelectMenuFooter from './SelectMenuFooter'
-import SelectMenuHeader from './SelectMenuHeader'
-import SelectMenuItem from './SelectMenuItem'
-import SelectMenuList from './SelectMenuList'
-import SelectMenuLoadingAnimation from './SelectMenuLoadingAnimation'
-import SelectMenuModal from './SelectMenuModal'
-import SelectMenuTab from './SelectMenuTab'
-import SelectMenuTabPanel from './SelectMenuTabPanel'
-import SelectMenuTabs from './SelectMenuTabs'
-
-const wrapperStyles = `
-  // Remove marker added by the display: list-item browser default
-  > summary {
-    list-style: none;
-  }
-  // Remove marker added by details polyfill
-  > summary::before {
-    display: none;
-  }
-  // Remove marker added by Chrome
-  > summary::-webkit-details-marker {
-    display: none;
-  }
-`
-
-const StyledSelectMenu = styled.details<SystemCommonProps & SxProp>`
-  ${wrapperStyles}
-  ${COMMON}
-  ${sx};
-`
-
-type SelectMenuInternalProps = {
-  initialTab?: string
-  as?: React.ReactElement
-} & ComponentProps<typeof StyledSelectMenu>
-
-// 'as' is spread out because we don't want users to be able to change the tag.
-const SelectMenu = React.forwardRef<HTMLElement, SelectMenuInternalProps>(
-  ({children, initialTab = '', as: _ignoredAs, ...rest}, forwardedRef) => {
-    const backupRef = useRef<HTMLElement>(null)
-    const ref = forwardedRef ?? backupRef
-    const [selectedTab, setSelectedTab] = useState(initialTab)
-    const [open, setOpen] = useState(false)
-    const menuProviderValues = {
-      selectedTab,
-      setSelectedTab,
-      setOpen,
-      open,
-      initialTab
-    }
-
-    const onClickOutside = useCallback(
-      event => {
-        if ('current' in ref && ref.current && !ref.current.contains(event.target)) {
-          if (!event.defaultPrevented) {
-            setOpen(false)
-          }
-        }
-      },
-      [ref, setOpen]
-    )
-
-    // handles the overlay behavior - closing the menu when clicking outside of it
-    useEffect(() => {
-      if (open) {
-        document.addEventListener('click', onClickOutside)
-        return () => {
-          document.removeEventListener('click', onClickOutside)
-        }
-      }
-    }, [open, onClickOutside])
-
-    function toggle(event: React.SyntheticEvent<HTMLDetailsElement, Event>) {
-      setOpen((event.target as HTMLDetailsElement).open)
-    }
-
-    useKeyboardNav(ref, open, setOpen)
-
-    return (
-      <MenuContext.Provider value={menuProviderValues}>
-        <StyledSelectMenu ref={ref} {...rest} open={open} onToggle={toggle}>
-          {children}
-        </StyledSelectMenu>
-      </MenuContext.Provider>
-    )
-  }
-)
-
-SelectMenu.displayName = 'SelectMenu'
-
-export type SelectMenuProps = ComponentProps<typeof SelectMenu>
-export type {SelectMenuDividerProps} from './SelectMenuDivider'
-export type {SelectMenuFilterProps} from './SelectMenuFilter'
-export type {SelectMenuFooterProps} from './SelectMenuFooter'
-export type {SelectMenuHeaderProps} from './SelectMenuHeader'
-export type {SelectMenuItemProps} from './SelectMenuItem'
-export type {SelectMenuListProps} from './SelectMenuList'
-export type {SelectMenuLoadingAnimationProps} from './SelectMenuLoadingAnimation'
-export type {SelectMenuModalProps} from './SelectMenuModal'
-export type {SelectMenuTabProps} from './SelectMenuTab'
-export type {SelectMenuTabPanelProps} from './SelectMenuTabPanel'
-export type {SelectMenuTabsProps} from './SelectMenuTabs'
-export default Object.assign(SelectMenu, {
-  MenuContext,
-  List: SelectMenuList,
-  Divider: SelectMenuDivider,
-  Filter: SelectMenuFilter,
-  Footer: SelectMenuFooter,
-  Item: SelectMenuItem,
-  Modal: SelectMenuModal,
-  Tabs: SelectMenuTabs,
-  Tab: SelectMenuTab,
-  TabPanel: SelectMenuTabPanel,
-  Header: SelectMenuHeader,
-  LoadingAnimation: SelectMenuLoadingAnimation
-})

package/src/SelectMenu/SelectMenuContext.tsx

@@ -1,9 +0,0 @@
-import {createContext} from 'react'
-
-export const MenuContext = createContext<{
-  selectedTab?: string
-  setSelectedTab?: React.Dispatch<React.SetStateAction<string>>
-  setOpen?: React.Dispatch<React.SetStateAction<boolean>>
-  open?: boolean
-  initialTab?: string
-}>({})

package/src/SelectMenu/SelectMenuDivider.tsx

@@ -1,25 +0,0 @@
-import styled, {css} from 'styled-components'
-import {COMMON, get, SystemCommonProps} from '../constants'
-import sx, {SxProp} from '../sx'
-import {ComponentProps} from '../utils/types'
-
-const dividerStyles = css`
-  padding: ${get('space.1')} ${get('space.3')};
-  margin: 0;
-  font-size: ${get('fontSizes.0')};
-  font-weight: ${get('fontWeights.bold')};
-  color: ${get('colors.text.tertiary')};
-  background-color: ${get('colors.bg.tertiary')};
-  border-bottom: ${get('borderWidths.1')} solid ${get('colors.selectMenu.borderSecondary')};
-`
-
-const SelectMenuDivider = styled.div<SystemCommonProps & SxProp>`
-  ${dividerStyles}
-  ${COMMON}
-  ${sx};
-`
-
-SelectMenuDivider.displayName = 'SelectMenu.Divider'
-
-export type SelectMenuDividerProps = ComponentProps<typeof SelectMenuDivider>
-export default SelectMenuDivider

package/src/SelectMenu/SelectMenuFilter.tsx

@@ -1,51 +0,0 @@
-import React, {forwardRef, useContext, useEffect, useRef} from 'react'
-import styled from 'styled-components'
-import {COMMON, get, SystemCommonProps} from '../constants'
-import sx, {SxProp} from '../sx'
-import TextInput, {TextInputProps} from '../TextInput'
-import {ComponentProps} from '../utils/types'
-import {MenuContext} from './SelectMenuContext'
-
-const StyledForm = styled.form<SystemCommonProps & SxProp>`
-  padding: ${get('space.3')};
-  margin: 0;
-  border-bottom: ${get('borderWidths.1')} solid ${get('colors.selectMenu.borderSecondary')};
-  background-color: ${get('colors.bg.overlay')};
-  ${COMMON};
-
-  @media (min-width: ${get('breakpoints.0')}) {
-    padding: ${get('space.2')};
-  }
-
-  ${sx};
-`
-
-type SelectMenuFilterInternalProps = {
-  value?: string
-} & TextInputProps
-
-const SelectMenuFilter = forwardRef<HTMLInputElement, SelectMenuFilterInternalProps>(
-  ({theme, value, sx: sxProp, ...rest}, forwardedRef) => {
-    const inputRef = useRef<HTMLInputElement>(null)
-    const ref = forwardedRef ?? inputRef
-    const {open} = useContext(MenuContext)
-
-    // puts focus on the filter input when the menu is opened
-    useEffect(() => {
-      if (open) {
-        inputRef.current?.focus()
-      }
-    }, [open])
-
-    return (
-      <StyledForm theme={theme} sx={sxProp}>
-        <TextInput theme={theme} ref={ref} width="100%" block value={value} contrast {...rest} />
-      </StyledForm>
-    )
-  }
-)
-
-SelectMenuFilter.displayName = 'SelectMenu.Filter'
-
-export type SelectMenuFilterProps = ComponentProps<typeof SelectMenuFilter>
-export default SelectMenuFilter

package/src/SelectMenu/SelectMenuFooter.tsx

@@ -1,28 +0,0 @@
-import styled, {css} from 'styled-components'
-import {COMMON, get, SystemCommonProps} from '../constants'
-import sx, {SxProp} from '../sx'
-import {ComponentProps} from '../utils/types'
-
-const footerStyles = css`
-  margin-top: -1px;
-  padding: ${get('space.2')} ${get('space.3')};
-  font-size: ${get('fontSizes.0')};
-  color: ${get('colors.text.tertiary')};
-  text-align: center;
-  border-top: ${get('borderWidths.1')} solid ${get('colors.selectMenu.borderSecondary')};
-
-  @media (min-width: ${get('breakpoints.0')}) {
-    padding: ${get('space.1')} ${get('space.2')};
-  }
-`
-
-const SelectMenuFooter = styled.footer<SystemCommonProps & SxProp>`
-  ${footerStyles}
-  ${COMMON}
-  ${sx};
-`
-
-SelectMenuFooter.displayName = 'SelectMenu.Footer'
-
-export type SelectMenuFooterProps = ComponentProps<typeof SelectMenuFooter>
-export default SelectMenuFooter

package/src/SelectMenu/SelectMenuHeader.tsx

@@ -1,50 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-import {COMMON, get, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from '../constants'
-import sx, {SxProp} from '../sx'
-import {ComponentProps} from '../utils/types'
-
-// SelectMenu.Header is intentionally not exported, it's an internal component used in
-// SelectMenu.Modal
-
-const SelectMenuTitle = styled.h3`
-  color: ${get('colors.text.primary')};
-  flex: auto;
-  font-size: ${get('fontSizes.1')};
-  font-weight: ${get('fontWeights.bold')};
-  margin: 0;
-
-  @media (min-width: ${get('breakpoints.0')}) {
-    font-size: inherit;
-  }
-`
-
-const StyledHeader = styled.header<SystemTypographyProps & SystemCommonProps & SxProp>`
-  display: flex;
-  flex: none; // fixes header from getting squeezed in Safari iOS
-  padding: ${get('space.3')};
-  border-bottom: ${get('borderWidths')} solid ${get('colors.selectMenu.borderSecondary')};
-  ${COMMON}
-  ${TYPOGRAPHY}
-
-  @media (min-width: ${get('breakpoints.0')}) {
-    padding-top: ${get('space.2')};
-    padding-bottom: ${get('space.2')};
-  }
-
-  ${sx};
-`
-
-export type SelectMenuHeaderProps = ComponentProps<typeof StyledHeader>
-
-const SelectMenuHeader = ({children, theme, ...rest}: SelectMenuHeaderProps) => {
-  return (
-    <StyledHeader theme={theme} {...rest}>
-      <SelectMenuTitle theme={theme}>{children}</SelectMenuTitle>
-    </StyledHeader>
-  )
-}
-
-SelectMenuHeader.displayName = 'SelectMenu.Header'
-
-export default SelectMenuHeader

package/src/SelectMenu/SelectMenuItem.tsx

@@ -1,137 +0,0 @@
-import {CheckIcon} from '@primer/octicons-react'
-import React, {forwardRef, useContext, useRef} from 'react'
-import styled, {css} from 'styled-components'
-import {COMMON, get, SystemCommonProps} from '../constants'
-import StyledOcticon from '../StyledOcticon'
-import sx, {SxProp} from '../sx'
-import {ComponentProps} from '../utils/types'
-import {MenuContext} from './SelectMenuContext'
-
-export const listItemStyles = css`
-  display: flex;
-  align-items: center;
-  padding: ${get('space.3')};
-  overflow: hidden;
-  text-align: left;
-  cursor: pointer;
-  background-color: ${get('colors.bg.overlay')};
-  border: 0;
-  border-bottom: ${get('borderWidths.1')} solid ${get('colors.selectMenu.borderSecondary')};
-  color: ${get('colors.text.secondary')};
-  text-decoration: none;
-  font-size: ${get('fontSizes.0')};
-  font-family: inherit; // needed if user uses a "button" tag
-  width: 100%;
-
-  &:hover {
-    text-decoration: none;
-  }
-  &:focus {
-    outline: none;
-  }
-
-  &[hidden] {
-    display: none !important;
-  }
-
-  @media (min-width: ${get('breakpoints.0')}) {
-    padding-top: ${get('space.2')};
-    padding-bottom: ${get('space.2')};
-  }
-
-  .SelectMenu-icon {
-    width: ${get('space.3')};
-    margin-right: ${get('space.2')};
-    flex-shrink: 0;
-  }
-
-  .SelectMenu-selected-icon {
-    visibility: hidden;
-    transition: transform 0.12s cubic-bezier(0.5, 0.1, 1, 0.5), visibility 0s 0.12s linear;
-    transform: scale(0);
-  }
-
-  // selected items
-  &[aria-checked='true'] {
-    font-weight: 500;
-    color: ${get('colors.text.primary')};
-
-    .SelectMenu-selected-icon {
-      visibility: visible;
-      transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), visibility 0s linear;
-      transform: scale(1);
-    }
-  }
-
-  // can hover states
-  @media (hover: hover) {
-    &:hover,
-    &:active,
-    &:focus {
-      background-color: ${get('colors.state.hover.secondaryBg')};
-    }
-  }
-
-  // Can not hover states
-  //
-  // For touch input
-
-  @media (hover: none) {
-    // Android
-    &:focus,
-    &:active {
-      background-color: ${get('colors.bg.secondary')};
-    }
-
-    // iOS Safari
-    // :active would work if ontouchstart is added to the button
-    // Instead this tweaks the "native" highlight color
-    -webkit-tap-highlight-color: ${get('colors.selectMenu.tapHighlight')};
-  }
-`
-
-const StyledItem = styled.a.attrs(() => ({
-  role: 'menuitemcheckbox'
-}))<SystemCommonProps & SxProp>`
-  ${listItemStyles}
-  ${COMMON}
-  ${sx};
-`
-
-type SelectMenuItemInteralProps = {
-  as?: React.ElementType
-  selected?: boolean
-} & ComponentProps<typeof StyledItem>
-
-const SelectMenuItem = forwardRef<HTMLAnchorElement, SelectMenuItemInteralProps>(
-  ({children, selected, theme, onClick, ...rest}, forwardedRef) => {
-    const menuContext = useContext(MenuContext)
-    const backupRef = useRef<HTMLAnchorElement>(null)
-    const itemRef = forwardedRef ?? backupRef
-
-    // close the menu when an item is clicked
-    // this can be overriden if the user provides a `onClick` prop and prevents default in it
-    const handleClick = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
-      onClick && onClick(e)
-
-      if (!e.defaultPrevented) {
-        menuContext.setOpen?.(false)
-      }
-    }
-    return (
-      <StyledItem ref={itemRef} {...rest} theme={theme} onClick={handleClick} aria-checked={selected}>
-        <StyledOcticon theme={theme} className="SelectMenu-icon SelectMenu-selected-icon" icon={CheckIcon} />
-        {children}
-      </StyledItem>
-    )
-  }
-)
-
-SelectMenuItem.defaultProps = {
-  selected: false
-}
-
-SelectMenuItem.displayName = 'SelectMenu.Item'
-
-export type SelectMenuItemProps = ComponentProps<typeof SelectMenuItem>
-export default SelectMenuItem

package/src/SelectMenu/SelectMenuList.tsx

@@ -1,42 +0,0 @@
-import styled, {css} from 'styled-components'
-import {COMMON, get, SystemCommonProps} from '../constants'
-import sx, {SxProp} from '../sx'
-import {ComponentProps} from '../utils/types'
-
-const listStyles = css`
-  position: relative;
-  padding: 0;
-  margin: 0;
-  flex: auto;
-  overflow-x: hidden;
-  overflow-y: auto;
-  background-color: ${get('colors.bg.overlay')};
-  -webkit-overflow-scrolling: touch; // Adds momentum + bouncy scrolling
-
-  @media (hover: hover) {
-    .SelectMenuTab:focus {
-      background-color: ${get('colors.selectMenu.tapFocusBg')};
-    }
-
-    .SelectMenuTab:not([aria-checked='true']):hover {
-      color: ${get('colors.text.primary')};
-      background-color: ${get('colors.bg.tertiary')};
-    }
-
-    .SelectMenuTab:not([aria-checked='true']):active {
-      color: ${get('colors.text.primary')};
-      background-color: ${get('colors.bg.tertiary')};
-    }
-  }
-`
-
-const SelectMenuList = styled.div<SystemCommonProps & SxProp>`
-  ${listStyles}
-  ${COMMON}
-  ${sx};
-`
-
-SelectMenuList.displayName = 'SelectMenu.List'
-
-export type SelectMenuListProps = ComponentProps<typeof SelectMenuList>
-export default SelectMenuList