@primer/components 31.2.1-rc.f73a0f8c → 32.0.1-rc.44e3df9b

package/src/ActionList2/Group.tsx

@@ -1,18 +1,51 @@
 import React from 'react'
+import {useSSRSafeId} from '@react-aria/ssr'
 import Box from '../Box'
 import {SxProp} from '../sx'
-import {Header, HeaderProps} from './Header'
-import {ListProps} from './List'
+import {ListContext, ListProps} from './List'
+import {AriaRole} from '../utils/types'
 
-export type GroupProps = HeaderProps &
-  SxProp & {
+export type GroupProps = {
+  /**
+   * Style variations. Usage is discretionary.
+   *
+   * - `"filled"` - Superimposed on a background, offset from nearby content
+   * - `"subtle"` - Relatively less offset from nearby content
+   */
+  variant?: 'subtle' | 'filled'
+  /**
+   * Primary text which names a `Group`.
+   */
+  title?: string
+  /**
+   * Secondary text which provides additional information about a `Group`.
+   */
+  auxiliaryText?: string
+  /**
+   * The ARIA role describing the function of the list inside `Group` component. `listbox` or `menu` are a common values.
+   */
+  role?: AriaRole
+} & SxProp & {
+    /**
+     * Whether multiple Items or a single Item can be selected in the Group. Overrides value on ActionList root.
+     */
     selectionVariant?: ListProps['selectionVariant'] | false
   }
 
 type ContextProps = Pick<GroupProps, 'selectionVariant'>
 export const GroupContext = React.createContext<ContextProps>({})
 
-export const Group: React.FC<GroupProps> = ({title, variant, auxiliaryText, selectionVariant, sx = {}, ...props}) => {
+export const Group: React.FC<GroupProps> = ({
+  title,
+  variant = 'subtle',
+  auxiliaryText,
+  selectionVariant,
+  role,
+  sx = {},
+  ...props
+}) => {
+  const labelId = useSSRSafeId()
+
   return (
     <Box
       as="li"
@@ -23,12 +56,48 @@ export const Group: React.FC<GroupProps> = ({title, variant, auxiliaryText, sele
       }}
       {...props}
     >
-      {title && <Header title={title} variant={variant} auxiliaryText={auxiliaryText} />}
+      {title && <Header title={title} variant={variant} auxiliaryText={auxiliaryText} labelId={labelId} />}
       <GroupContext.Provider value={{selectionVariant}}>
-        <Box as="ul" sx={{paddingInlineStart: 0}}>
+        <Box as="ul" sx={{paddingInlineStart: 0}} aria-labelledby={title ? labelId : undefined} role={role}>
           {props.children}
         </Box>
       </GroupContext.Provider>
     </Box>
   )
 }
+
+export type HeaderProps = Pick<GroupProps, 'variant' | 'title' | 'auxiliaryText'> & {
+  labelId: string
+}
+
+/**
+ * Displays the name and description of a `Group`.
+ *
+ * For visual presentation only. It's hidden from screen readers.
+ */
+const Header: React.FC<HeaderProps> = ({variant, title, auxiliaryText, labelId, ...props}) => {
+  const {variant: listVariant} = React.useContext(ListContext)
+
+  const styles = {
+    paddingY: '6px',
+    paddingX: listVariant === 'full' ? 2 : 3,
+    fontSize: 0,
+    fontWeight: 'bold',
+    color: 'fg.muted',
+    ...(variant === 'filled' && {
+      backgroundColor: 'canvas.subtle',
+      marginX: 0,
+      marginBottom: 2,
+      borderTop: '1px solid',
+      borderBottom: '1px solid',
+      borderColor: 'neutral.muted'
+    })
+  }
+
+  return (
+    <Box sx={styles} role="presentation" aria-hidden="true" {...props}>
+      <span id={labelId}>{title}</span>
+      {auxiliaryText && <span>{auxiliaryText}</span>}
+    </Box>
+  )
+}

package/src/ActionList2/List.tsx

@@ -23,7 +23,7 @@ export type ListProps = {
   role?: AriaRole
 } & SxProp
 
-type ContextProps = Omit<ListProps, 'sx'>
+type ContextProps = Pick<ListProps, 'variant' | 'selectionVariant' | 'showDividers'>
 export const ListContext = React.createContext<ContextProps>({})
 
 const ListBox = styled.ul<SxProp>(sx)

package/src/Breadcrumbs.tsx

@@ -4,7 +4,7 @@ import * as History from 'history'
 import React from 'react'
 import styled from 'styled-components'
 import Box from './Box'
-import {COMMON, FLEX, get, SystemCommonProps, SystemFlexProps} from './constants'
+import {get} from './constants'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
 
@@ -31,20 +31,22 @@ const Wrapper = styled.li`
   }
 `
 
-const BreadcrumbsBase = styled.nav<SystemFlexProps & SystemCommonProps & SxProp>`
+const BreadcrumbsBase = styled.nav<SxProp>`
   display: flex;
   justify-content: space-between;
-  ${COMMON};
-  ${FLEX};
   ${sx};
 `
 
-export type BreadcrumbsProps = ComponentProps<typeof BreadcrumbsBase>
+export type BreadcrumbsProps = React.PropsWithChildren<
+  {
+    className?: string
+  } & SxProp
+>
 
-function Breadcrumbs({className, children, theme, ...rest}: React.PropsWithChildren<BreadcrumbsProps>) {
-  const wrappedChildren = React.Children.map(children, child => <Wrapper theme={theme}>{child}</Wrapper>)
+function Breadcrumbs({className, children, sx: sxProp}: React.PropsWithChildren<BreadcrumbsProps>) {
+  const wrappedChildren = React.Children.map(children, child => <Wrapper>{child}</Wrapper>)
   return (
-    <BreadcrumbsBase className={className} aria-label="Breadcrumbs" theme={theme} {...rest}>
+    <BreadcrumbsBase className={className} aria-label="Breadcrumbs" sx={sxProp}>
       <Box as="ol" my={0} pl={0}>
         {wrappedChildren}
       </Box>
@@ -55,8 +57,7 @@ function Breadcrumbs({className, children, theme, ...rest}: React.PropsWithChild
 type StyledBreadcrumbsItemProps = {
   to?: History.LocationDescriptor
   selected?: boolean
-} & SystemCommonProps &
-  SxProp
+} & SxProp
 
 const BreadcrumbsItem = styled.a.attrs<StyledBreadcrumbsItemProps>(props => ({
   activeClassName: typeof props.to === 'string' ? 'selected' : '',
@@ -74,7 +75,6 @@ const BreadcrumbsItem = styled.a.attrs<StyledBreadcrumbsItemProps>(props => ({
     color: ${get('colors.fg.default')};
     pointer-events: none;
   }
-  ${COMMON}
   ${sx};
 `
 

package/src/Button/Button.tsx

@@ -2,9 +2,9 @@ import styled from 'styled-components'
 import {get} from '../constants'
 import sx, {SxProp} from '../sx'
 import {ComponentProps} from '../utils/types'
-import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'
+import ButtonBase, {ButtonBaseProps} from './ButtonBase'
 
-const Button = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
+const Button = styled(ButtonBase)<ButtonBaseProps & SxProp>`
   color: ${get('colors.btn.text')};
   background-color: ${get('colors.btn.bg')};
   border: 1px solid ${get('colors.btn.border')};
@@ -32,7 +32,6 @@ const Button = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
     border-color: ${get('colors.btn.border')};
   }
 
-  ${buttonSystemProps};
   ${sx};
 `
 

package/src/Button/ButtonBase.tsx

@@ -1,12 +1,8 @@
 import styled from 'styled-components'
-import {compose, fontSize, FontSizeProps, variant} from 'styled-system'
-import {COMMON, LAYOUT, SystemCommonProps, SystemLayoutProps} from '../constants'
+import {variant} from 'styled-system'
 import {ComponentProps} from '../utils/types'
 import buttonBaseStyles from './ButtonStyles'
 
-export const buttonSystemProps = compose(fontSize, COMMON, LAYOUT)
-export type ButtonSystemProps = FontSizeProps & SystemCommonProps & SystemLayoutProps
-
 const variants = variant({
   variants: {
     small: {
@@ -26,7 +22,7 @@ const variants = variant({
 type StyledButtonBaseProps = {
   as?: 'button' | 'a' | 'summary' | 'input' | string | React.ReactType
   variant?: 'small' | 'medium' | 'large'
-} & FontSizeProps
+}
 
 const ButtonBase = styled.button.attrs<StyledButtonBaseProps>(({disabled, onClick}) => ({
   onClick: disabled ? undefined : onClick

package/src/Button/ButtonClose.tsx

@@ -1,13 +1,11 @@
 import {XIcon} from '@primer/octicons-react'
 import React, {forwardRef} from 'react'
 import styled from 'styled-components'
-import {COMMON, get, LAYOUT, SystemCommonProps, SystemLayoutProps} from '../constants'
+import {get} from '../constants'
 import sx, {SxProp} from '../sx'
 import {ComponentProps} from '../utils/types'
 
-type StyledButtonProps = SystemCommonProps & SystemLayoutProps & SxProp
-
-const StyledButton = styled.button<StyledButtonProps>`
+const StyledButton = styled.button<SxProp>`
   border: none;
   padding: 0;
   background: transparent;
@@ -23,8 +21,6 @@ const StyledButton = styled.button<StyledButtonProps>`
   &:hover {
     color: ${get('colors.accent.fg')};
   }
-  ${COMMON};
-  ${LAYOUT};
   ${sx};
 `
 

package/src/Button/ButtonDanger.tsx

@@ -2,9 +2,9 @@ import styled from 'styled-components'
 import {get} from '../constants'
 import sx, {SxProp} from '../sx'
 import {ComponentProps} from '../utils/types'
-import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'
+import ButtonBase, {ButtonBaseProps} from './ButtonBase'
 
-const ButtonDanger = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
+const ButtonDanger = styled(ButtonBase)<ButtonBaseProps & SxProp>`
   color: ${get('colors.btn.danger.text')};
   border: 1px solid ${get('colors.btn.border')};
   background-color: ${get('colors.btn.bg')};
@@ -35,7 +35,6 @@ const ButtonDanger = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & Sx
     border-color: ${get('colors.btn.danger.disabledBorder')};
   }
 
-  ${buttonSystemProps};
   ${sx};
 `
 

package/src/Button/ButtonInvisible.tsx

@@ -2,9 +2,9 @@ import styled from 'styled-components'
 import {get} from '../constants'
 import sx, {SxProp} from '../sx'
 import {ComponentProps} from '../utils/types'
-import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'
+import ButtonBase, {ButtonBaseProps} from './ButtonBase'
 
-const ButtonInvisible = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
+const ButtonInvisible = styled(ButtonBase)<ButtonBaseProps & SxProp>`
   color: ${get('colors.accent.fg')};
   background-color: transparent;
   border: 0;
@@ -24,7 +24,6 @@ const ButtonInvisible = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps &
     background-color: ${get('colors.btn.selectedBg')};
   }
 
-  ${buttonSystemProps};
   ${sx}
 `
 

package/src/Button/ButtonOutline.tsx

@@ -2,9 +2,9 @@ import styled from 'styled-components'
 import {get} from '../constants'
 import sx, {SxProp} from '../sx'
 import {ComponentProps} from '../utils/types'
-import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'
+import ButtonBase, {ButtonBaseProps} from './ButtonBase'
 
-const ButtonOutline = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
+const ButtonOutline = styled(ButtonBase)<ButtonBaseProps & SxProp>`
   color: ${get('colors.btn.outline.text')};
   border: 1px solid ${get('colors.btn.border')};
   background-color: ${get('colors.btn.bg')};
@@ -35,7 +35,6 @@ const ButtonOutline = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & S
     border-color: ${get('colors.btn.border')};
   }
 
-  ${buttonSystemProps};
   ${sx};
 `
 

package/src/Button/ButtonPrimary.tsx

@@ -2,9 +2,9 @@ import styled from 'styled-components'
 import {get} from '../constants'
 import sx, {SxProp} from '../sx'
 import {ComponentProps} from '../utils/types'
-import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'
+import ButtonBase, {ButtonBaseProps} from './ButtonBase'
 
-export const ButtonPrimary = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
+export const ButtonPrimary = styled(ButtonBase)<ButtonBaseProps & SxProp>`
   color: ${get('colors.btn.primary.text')};
   border: 1px solid ${get('colors.btn.primary.border')};
   background-color: ${get('colors.btn.primary.bg')};
@@ -33,7 +33,6 @@ export const ButtonPrimary = styled(ButtonBase)<ButtonBaseProps & ButtonSystemPr
     border-color: ${get('colors.btn.primary.disabledBorder')};
   }
 
-  ${buttonSystemProps};
   ${sx};
 `
 

package/src/Button/ButtonTableList.tsx

@@ -1,19 +1,9 @@
 import styled from 'styled-components'
-import {
-  COMMON,
-  get,
-  LAYOUT,
-  SystemCommonProps,
-  SystemLayoutProps,
-  SystemTypographyProps,
-  TYPOGRAPHY
-} from '../constants'
+import {get} from '../constants'
 import sx, {SxProp} from '../sx'
 import {ComponentProps} from '../utils/types'
 
-type StyledButtonTableListProps = SystemCommonProps & SystemTypographyProps & SystemLayoutProps & SxProp
-
-const ButtonTableList = styled.summary<StyledButtonTableListProps>`
+const ButtonTableList = styled.summary<SxProp>`
   display: inline-block;
   padding: 0;
   font-size: ${get('fontSizes.1')};
@@ -48,9 +38,6 @@ const ButtonTableList = styled.summary<StyledButtonTableListProps>`
     border: 4px solid transparent;
     border-top-color: currentcolor;
   }
-  ${COMMON}
-  ${TYPOGRAPHY}
-  ${LAYOUT}
   ${sx};
 `
 

package/src/CircleBadge.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import {COMMON, get, SystemCommonProps} from './constants'
+import {get} from './constants'
 import StyledOcticon from './StyledOcticon'
 import sx, {SxProp} from './sx'
 import isNumeric from './utils/isNumeric'
@@ -15,8 +15,7 @@ type StyledCircleBadgeProps = {
   inline?: boolean
   variant?: keyof typeof variantSizes
   size?: number
-} & SystemCommonProps &
-  SxProp
+} & SxProp
 
 const sizeStyles = ({size, variant = 'medium'}: StyledCircleBadgeProps) => {
   const calc = isNumeric(size) ? size : variantSizes[variant]
@@ -33,7 +32,6 @@ const CircleBadge = styled.div<StyledCircleBadgeProps>`
   background-color: ${get('colors.canvas.default')};
   border-radius: 50%;
   box-shadow: ${get('shadows.shadow.medium')};
-  ${COMMON};
   ${sizeStyles};
   ${sx};
 `

package/src/CounterLabel.tsx

@@ -1,12 +1,11 @@
 import styled from 'styled-components'
-import {COMMON, get, SystemCommonProps} from './constants'
+import {get} from './constants'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
 
 type StyledCounterLabelProps = {
   scheme?: 'primary' | 'secondary'
-} & SystemCommonProps &
-  SxProp
+} & SxProp
 
 const colorStyles = ({scheme, ...props}: StyledCounterLabelProps) => {
   return {
@@ -39,7 +38,6 @@ const CounterLabel = styled.span<StyledCounterLabelProps>`
   border-radius: 20px;
   ${colorStyles};
   ${bgStyles};
-  ${COMMON};
 
   &:empty {
     display: none;

package/src/Dialog/Dialog.tsx

@@ -2,7 +2,7 @@ import React, {useCallback, useEffect, useRef, useState} from 'react'
 import styled from 'styled-components'
 import Button, {ButtonPrimary, ButtonDanger, ButtonProps} from '../Button'
 import Box from '../Box'
-import {get, SystemCommonProps, SystemPositionProps, COMMON, POSITION} from '../constants'
+import {get} from '../constants'
 import {useOnEscapePress, useProvidedRefOrCreate} from '../hooks'
 import {useFocusTrap} from '../hooks/useFocusTrap'
 import sx, {SxProp} from '../sx'
@@ -180,12 +180,12 @@ const widthMap = {
 export type DialogWidth = keyof typeof widthMap
 export type DialogHeight = keyof typeof heightMap
 
-interface StyledDialogProps {
+type StyledDialogProps = {
   width?: DialogWidth
   height?: DialogHeight
-}
+} & SxProp
 
-const StyledDialog = styled.div<StyledDialogProps & SystemCommonProps & SystemPositionProps & SxProp>`
+const StyledDialog = styled.div<StyledDialogProps>`
   display: flex;
   flex-direction: column;
   background-color: ${get('colors.canvas.overlay')};
@@ -210,8 +210,6 @@ const StyledDialog = styled.div<StyledDialogProps & SystemCommonProps & SystemPo
     }
   }
 
-  ${COMMON};
-  ${POSITION};
   ${sx};
 `
 
@@ -309,27 +307,37 @@ const _Dialog = React.forwardRef<HTMLDivElement, React.PropsWithChildren<DialogP
 })
 _Dialog.displayName = 'Dialog'
 
-const Header = styled(Box).attrs({as: 'header'})`
+const Header = styled.div.attrs<SxProp>({as: 'header'})`
   box-shadow: 0 1px 0 ${get('colors.border.default')};
   padding: ${get('space.2')};
   z-index: 1;
   flex-shrink: 0;
 `
-const Title = styled(Box)`
+
+const Title = styled.div<SxProp>`
   font-size: ${get('fontSizes.1')};
   font-weight: ${get('fontWeights.bold')};
+
+  ${sx};
 `
-const Subtitle = styled(Box)`
+
+const Subtitle = styled.div<SxProp>`
   font-size: ${get('fontSizes.0')};
   margin-top: ${get('space.1')};
   color: ${get('colors.fg.muted')};
+
+  ${sx};
 `
-const Body = styled(Box)`
+
+const Body = styled.div<SxProp>`
   flex-grow: 1;
   overflow: auto;
   padding: ${get('space.3')};
+
+  ${sx};
 `
-const Footer = styled(Box).attrs({as: 'footer'})`
+
+const Footer = styled.div.attrs<SxProp>({as: 'footer'})`
   box-shadow: 0 -1px 0 ${get('colors.border.default')};
   padding: ${get('space.3')};
   display: flex;
@@ -344,7 +352,10 @@ const Footer = styled(Box).attrs({as: 'footer'})`
       margin-left: 0;
     }
   }
+
+  ${sx};
 `
+
 const buttonTypes = {
   normal: Button,
   primary: ButtonPrimary,

package/src/Dialog.tsx

@@ -1,7 +1,7 @@
 import React, {forwardRef, useRef} from 'react'
 import styled from 'styled-components'
 import ButtonClose from './Button/ButtonClose'
-import {COMMON, get, LAYOUT, SystemCommonProps, SystemLayoutProps} from './constants'
+import {get} from './constants'
 import Box from './Box'
 import useDialog from './hooks/useDialog'
 import sx, {SxProp} from './sx'
@@ -14,9 +14,7 @@ const noop = () => null
 type StyledDialogBaseProps = {
   narrow?: boolean
   wide?: boolean
-} & SystemLayoutProps &
-  SystemCommonProps &
-  SxProp
+} & SxProp
 
 const DialogBase = styled.div<StyledDialogBaseProps>`
   box-shadow: ${get('shadows.shadow.large')};
@@ -39,8 +37,6 @@ const DialogBase = styled.div<StyledDialogBaseProps>`
     height: 100vh;
   }
 
-  ${LAYOUT};
-  ${COMMON};
   ${sx};
 `
 

package/src/Dropdown.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
 import Button, {ButtonProps} from './Button'
-import {COMMON, get, SystemCommonProps} from './constants'
+import {get} from './constants'
 import Details, {DetailsProps} from './Details'
 import getDirectionStyles from './DropdownStyles'
 import useDetails from './hooks/useDetails'
@@ -35,7 +35,7 @@ const DropdownButton = ({children, ...rest}: DropdownButtonProps) => {
   )
 }
 
-const DropdownCaret = styled.div<SystemCommonProps & SxProp>`
+const DropdownCaret = styled.div<SxProp>`
   border: 4px solid transparent;
   margin-left: 12px;
   border-top-color: currentcolor;
@@ -45,14 +45,12 @@ const DropdownCaret = styled.div<SystemCommonProps & SxProp>`
   height: 0;
   vertical-align: middle;
   width: 0;
-  ${COMMON};
   ${sx};
 `
 
 type StyledDropdownMenuProps = {
   direction?: 'ne' | 'e' | 'se' | 's' | 'sw' | 'w'
-} & SystemCommonProps &
-  SxProp
+} & SxProp
 
 const DropdownMenu = styled.ul<StyledDropdownMenuProps>`
   background-clip: padding-box;
@@ -96,7 +94,6 @@ const DropdownMenu = styled.ul<StyledDropdownMenuProps>`
     list-style: none;
   }
   ${props => (props.direction ? getDirectionStyles(props.theme, props.direction) : '')};
-  ${COMMON};
   ${sx};
 `
 
@@ -131,7 +128,6 @@ const DropdownItem = styled.li`
     background-color: ${get('colors.accent.emphasis')};
     outline: none;
   }
-  ${COMMON};
   ${sx};
 `
 

package/src/DropdownMenu/DropdownButton.tsx

@@ -9,7 +9,7 @@ export const DropdownButton = React.forwardRef<HTMLElement, React.PropsWithChild
   ({children, ...props}: React.PropsWithChildren<DropdownButtonProps>, ref): JSX.Element => (
     <Button ref={ref} type="button" {...props}>
       {children}
-      <StyledOcticon icon={TriangleDownIcon} ml={1} />
+      <StyledOcticon icon={TriangleDownIcon} sx={{ml: 1}} />
     </Button>
   )
 )

package/src/FilterList.tsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import styled from 'styled-components'
-import {COMMON, get, SystemCommonProps} from './constants'
+import {get} from './constants'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
 
-const FilterListBase = styled.ul<SystemCommonProps & SxProp>`
+const FilterListBase = styled.ul<SxProp>`
   list-style-type: none;
-  ${COMMON};
+  margin: 0;
+  padding: 0;
   ${sx};
 `
 
@@ -23,8 +24,7 @@ const FilterList = ({children, ...rest}: React.PropsWithChildren<FilterListProps
 type StyledFilterListItemBaseProps = {
   small?: boolean
   selected?: boolean
-} & SystemCommonProps &
-  SxProp
+} & SxProp
 
 const FilterListItemBase = styled.a<StyledFilterListItemBaseProps>`
   position: relative;
@@ -52,7 +52,6 @@ const FilterListItemBase = styled.a<StyledFilterListItemBaseProps>`
     float: right;
     font-weight: ${get('fontWeights.bold')};
   }
-  ${COMMON};
   ${sx};
 `
 
@@ -71,11 +70,6 @@ function FilterListItem({children, count, ...rest}: React.PropsWithChildren<Filt
   )
 }
 
-FilterList.defaultProps = {
-  m: 0,
-  p: 0
-}
-
 FilterListItem.displayName = 'FilterList.Item'
 
 export default Object.assign(FilterList, {Item: FilterListItem})

package/src/FilteredSearch.tsx

@@ -1,10 +1,9 @@
 import styled from 'styled-components'
-import {COMMON, get, SystemCommonProps} from './constants'
+import {get} from './constants'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
 
-const FilteredSearch = styled.div<SystemCommonProps & SxProp>`
-  ${COMMON};
+const FilteredSearch = styled.div<SxProp>`
   display: flex;
   align-items: stretch;
 

package/src/Flash.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 import {variant} from 'styled-system'
-import {COMMON, get, SystemCommonProps} from './constants'
+import {get} from './constants'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
 
@@ -45,8 +45,7 @@ const Flash = styled.div<
   {
     variant?: 'default' | 'warning' | 'success' | 'danger'
     full?: boolean
-  } & SystemCommonProps &
-    SxProp
+  } & SxProp
 >`
   position: relative;
   color: ${get('colors.fg.default')};
@@ -64,7 +63,6 @@ const Flash = styled.div<
     margin-right: ${get('space.2')};
   }
 
-  ${COMMON};
   ${variants};
   ${sx};
 `