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

package/docs/content/ActionList2.mdx

@@ -336,13 +336,14 @@ render(<SelectFields />)
 
 ### ActionList.Group
 
-| Name             | Type                                         |  Default   | Description                                                                                                                              |
-| :--------------- | :------------------------------------------- | :--------: | :--------------------------------------------------------------------------------------------------------------------------------------- |
-| children\*       | `ActionList.Item[] or ActionList.LinkItem[]` |     -      | Required.                                                                                                                                |
-| title            | string                                       |     -      | Optional. Primary text which names a `Group`                                                                                             |
-| auxiliaryText    | string                                       |     -      | Optional. Secondary text which provides additional information about a `Group`.                                                          |
-| variant          | `'filled'` or `'subtle'`                     | `'subtle'` | Optional. `"filled"` - Superimposed on a background, offset from nearby content, `"subtle"` - Relatively less offset from nearby content |
-| selectionVariant | `'single'` or `'multiple'` or `false`        |     -      | Optional. Set `selectionVariant` at the group level                                                                                      |
+| Name             | Type                                                                                              |  Default   | Description                                                                                                                              |
+| :--------------- | :------------------------------------------------------------------------------------------------ | :--------: | :--------------------------------------------------------------------------------------------------------------------------------------- |
+| children\*       | `ActionList.Item[] or ActionList.LinkItem[]`                                                      |     -      | Required.                                                                                                                                |
+| title            | string                                                                                            |     -      | Optional. Primary text which names a `Group`                                                                                             |
+| auxiliaryText    | string                                                                                            |     -      | Optional. Secondary text which provides additional information about a `Group`.                                                          |
+| variant          | `'filled'` or `'subtle'`                                                                          | `'subtle'` | Optional. `"filled"` - Superimposed on a background, offset from nearby content, `"subtle"` - Relatively less offset from nearby content |
+| selectionVariant | `'single'` or `'multiple'` or `false`                                                             |     -      | Optional. Set `selectionVariant` at the group level                                                                                      |
+| role             | [AriaRole](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques#roles) |     -      | Optional. \* The ARIA role describing the function of the list inside `Group` component. `listbox` or `menu` are a common values.        |
 
 <br />
 

package/docs/content/Breadcrumbs.md

@@ -27,26 +27,21 @@ This ensures that the NavLink gets `activeClassName='selected'`
 </Breadcrumbs>
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-Breadcrumbs and Breadcrumbs.Item components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
-
 ## Component props
 
 ### Breadcrumbs
 
-The `Breadcrumbs` component does not receive any additional props besides `COMMON` system props.
+| Prop name | Type              | Default | Description                          |
+| :-------- | :---------------- | :-----: | :----------------------------------- |
+| children  | ReactNode         |         | The `Breadcrumbs.Item`s              |
+| className | string            |         |                                      |
+| sx        | SystemStyleObject |  `{}`   | Style to be applied to the component |
 
 ### Breadcrumbs.Item
 
-| Prop name | Type    | Default | Description                                      |
-| :-------- | :------ | :-----: | :----------------------------------------------- |
-| as        | String  |   `a`   | Sets the HTML tag for the component              |
-| href      | String  |         | URL to be used for the Link                      |
-| selected  | Boolean |  false  | Used to style the link as selected or unselected |
+| Prop name | Type              | Default | Description                                      |
+| :-------- | :---------------- | :-----: | :----------------------------------------------- |
+| as        | string            |   `a`   | Sets the HTML tag for the component              |
+| href      | string            |         | URL to be used for the Link                      |
+| selected  | boolean           | `false` | Used to style the link as selected or unselected |
+| sx        | SystemStyleObject |  `{}`   | Style to be applied to the component             |

package/docs/content/Buttons.md

@@ -17,9 +17,9 @@ To create a button group, wrap `Button` elements in the `ButtonGroup` element. `
   <ButtonOutline>Button Outline</ButtonOutline>
   <ButtonPrimary>Button Primary</ButtonPrimary>
   <ButtonInvisible>Button Invisible</ButtonInvisible>
-  <ButtonClose onClick={() => window.alert('button clicked')}/>
+  <ButtonClose onClick={() => window.alert('button clicked')} />
 
-  <ButtonGroup display='block' my={2}>
+  <ButtonGroup display="block" my={2}>
     <Button>Button</Button>
     <Button>Button</Button>
     <Button>Button</Button>
@@ -29,27 +29,17 @@ To create a button group, wrap `Button` elements in the `ButtonGroup` element. `
 </>
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-`Button` and `ButtonGroup` components get `COMMON` and `LAYOUT` system props. Read our [System Props](/system-props) doc page for a full list of available props.
-
 ## Component props
 
 Native `<button>` HTML attributes are forwarded to the underlying React `button` component and are not listed below.
 
 ### Button
 
-| Prop name | Type             | Default  | Description                                                                                                                 |
-| :-------- | :--------------- | :------: | :-------------------------------------------------------------------------------------------------------------------------- |
-| as        | String           | `button` | sets the HTML tag for the component                                                                                         |
-| fontSize  | Number or String |          | explicitly sets the font size for the Button text; overrides any value for the `variant` prop                               |
-| variant   | String           | 'medium' | a value of `small`, `medium`, or `large` results in smaller or larger Button text size; no effect if `fontSize` prop is set |
+| Prop name | Type              | Default  | Description                                                                                                                 |
+| :-------- | :---------------- | :------: | :-------------------------------------------------------------------------------------------------------------------------- |
+| as        | String            | `button` | sets the HTML tag for the component                                                                                         |
+| sx        | SystemStyleObject |    {}    | Additional styles                                                                                                           |
+| variant   | String            | 'medium' | a value of `small`, `medium`, or `large` results in smaller or larger Button text size; no effect if `fontSize` prop is set |
 
 ### ButtonGroup
 

package/docs/content/CircleBadge.md

@@ -12,16 +12,6 @@ Use CircleBadge to visually connect logos of third party services like in market
 </CircleBadge>
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-CircleBadge and CircleBadge.Icon components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
-
 ## Component props
 
 ### CircleBadge

package/docs/content/CounterLabel.md

@@ -15,16 +15,6 @@ Use the CounterLabel component to add a count to navigational elements and butto
 </>
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-CounterLabel components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
-
 ## Component props
 
 | Name   | Type   | Default | Description                                                                                                                                                                        |

package/docs/content/Dialog.md

@@ -84,25 +84,22 @@ You can also pass any non-text content into the header:
 </State>
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
+## Component props
 
-`Dialog` components get the `COMMON` and `LAYOUT` categories of system props. `Dialog.Header` components get `COMMON`, `LAYOUT`, and `FLEX` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+### Dialog
 
-## Component props
+| Prop name       | Type              | Default | Description                                                                                                                                               |
+| :-------------- | :---------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| isOpen          | Boolean           |         | Set whether or not the dialog is shown                                                                                                                    |
+| onDismiss       | Function          |         | A user-provided function that should close the dialog                                                                                                     |
+| returnFocusRef  | React ref         |         | The element to restore focus back to after the `Dialog` is closed                                                                                         |
+| initialFocusRef | React ref         |         | Element inside of the `Dialog` you'd like to be focused when the Dialog is opened. If nothing is passed to `initialFocusRef` the close button is focused. |
+| aria-labelledby | string            |         | Pass an id to use for the aria-label. Use either a `aria-label` or an `aria-labelledby` but not both.                                                     |
+| aria-label      | string            |         | Pass a label to be used to describe the Dialog. Use either a `aria-label` or an `aria-labelledby` but not both.                                           |
+| sx              | SystemStyleObject | {}      | Style to be applied to the component                                                                                                                      |
 
-| Prop name       | Type      | Description                                                                                                                                               |
-| :-------------- | :-------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| isOpen          | Boolean   | Set whether or not the dialog is shown                                                                                                                    |
-| onDismiss       | Function  | A user-provided function that should close the dialog                                                                                                     |
-| returnFocusRef  | React ref | The element to restore focus back to after the `Dialog` is closed                                                                                         |
-| initialFocusRef | React ref | Element inside of the `Dialog` you'd like to be focused when the Dialog is opened. If nothing is passed to `initialFocusRef` the close button is focused. |
-| aria-labelledby | string    | Pass an id to use for the aria-label. Use either a `aria-label` or an `aria-labelledby` but not both.                                                     |
-| aria-label      | string    | Pass a label to be used to describe the Dialog. Use either a `aria-label` or an `aria-labelledby` but not both.                                           |
+### Dialog.Header
 
-`Dialog.Header` does not take any non-system props.
+| Prop name | Type              | Default | Description                          |
+| :-------- | :---------------- | :------ | :----------------------------------- |
+| sx        | SystemStyleObject | {}      | Style to be applied to the component |

package/docs/content/Dialog2.mdx

@@ -87,6 +87,7 @@ By default, the Dialog component implements the design and interactions defined
 | role          | `"dialog" │ "alertdialog"`                     | `"dialog"` | The ARIA role given to the dialog element. More info: [dialog](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal), [alertdialog](https://www.w3.org/TR/wai-aria-practices-1.1/#alertdialog)                                                                    |
 | width         | `"small" │ "medium" │ "large" │ "xlarge"`      | `"xlarge"` | The fixed width of the dialog.                                                                                                                                                                                                                                          |
 | height        | `"small" │ "large" │ "auto"`                   | `"auto"`   | The fixed height of the dialog, or, auto to adjust the height based on its contents.                                                                                                                                                                                    |
+| sx            | `SystemStyleObject`                            | {}         | Style to be applied to the component                                                                                                                                                                                                                                    |
 
 ### DialogHeaderProps
 

package/docs/content/Dropdown.md

@@ -37,36 +37,29 @@ Dropdown.Menu wraps your menu content. Be sure to pass a `direction` prop to thi
 </Dropdown>
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-Dropdown, Dropdown.Menu, Dropdown.Button, Dropdown.Caret, and Dropdown.Item all get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
-
 ## Component props
 
 The Dropdown component is extended from the [`Details`](/Details) component and gets all props that the [`Details`](/Details) component gets.
 
 #### Dropdown.Menu
 
-| Name      | Type   | Default | Description                                                                           |
-| :-------- | :----- | :-----: | :------------------------------------------------------------------------------------ |
-| direction | String |  'sw'   | Sets the direction of the dropdown menu. Pick from 'ne', 'e', 'se', 's', 'sw', or 'w' |
+| Name      | Type              | Default | Description                                                                           |
+| :-------- | :---------------- | :-----: | :------------------------------------------------------------------------------------ |
+| direction | String            |  'sw'   | Sets the direction of the dropdown menu. Pick from 'ne', 'e', 'se', 's', 'sw', or 'w' |
+| sx        | SystemStyleObject |   {}    | Style to be applied to the component                                                  |
 
 #### Dropdown.Button
 
-| Name    | Type     | Default | Description                                                                                                  |
-| :------ | :------- | :-----: | :----------------------------------------------------------------------------------------------------------- |
-| onClick | Function |  none   | Use the `onClick` handler to add additional functionality when the button is clicked, such as fetching data. |
+See https://primer.style/react/Buttons#component-props
 
 #### Dropdown.Caret
 
-No additional props.
+| Name | Type              | Default | Description                          |
+| :--- | :---------------- | :-----: | :----------------------------------- |
+| sx   | SystemStyleObject |   {}    | Style to be applied to the component |
 
 #### Dropdown.Item
 
-No additional props.
+| Name | Type              | Default | Description                          |
+| :--- | :---------------- | :-----: | :----------------------------------- |
+| sx   | SystemStyleObject |   {}    | Style to be applied to the component |

package/docs/content/FilterList.md

@@ -18,27 +18,20 @@ The FilterList component is a menu with filter options that filter the main cont
 </FilterList>
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-FilterList components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
-
 ## Component props
 
 #### FilterList
 
-`FilterList` does not get any additional props other than the system props mentioned above.
+| Name | Type              | Default | Description                          |
+| :--- | :---------------- | :-----: | :----------------------------------- |
+| sx   | SystemStyleObject |   {}    | Style to be applied to the component |
 
 #### FilterList.Item
 
-| Name     | Type    | Default | Description                                                      |
-| :------- | :------ | :-----: | :--------------------------------------------------------------- |
-| count    | Number  |         | Number to be displayed in the list item                          |
-| as       | String  |   `a`   | sets the HTML tag for the component                              |
-| selected | Boolean |         | Used to set selected style                                       |
-| small    | Boolean |  false  | Used to create a smaller version of the standard FilterList.Item |
+| Name     | Type              | Default | Description                                                      |
+| :------- | :---------------- | :-----: | :--------------------------------------------------------------- |
+| count    | Number            |         | Number to be displayed in the list item                          |
+| as       | String            |   `a`   | sets the HTML tag for the component                              |
+| selected | Boolean           |         | Used to set selected style                                       |
+| small    | Boolean           |  false  | Used to create a smaller version of the standard FilterList.Item |
+| sx       | SystemStyleObject |   {}    | Style to be applied to the component                             |

package/docs/content/FilteredSearch.md

@@ -22,18 +22,11 @@ The FilteredSearch component helps style a Dropdown and a TextInput side-by-side
 </FilteredSearch>
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-FilteredSearch gets `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
-
 ## Component props
 
 #### FilteredSearch.Children
 
-FilteredSearch is expected to contain a [`Dropdown`](/Dropdown) followed by a [`TextInput`](/TextInput).
+| Name     | Type              | Default | Description                                                                                              |
+| :------- | :---------------- | :-----: | :------------------------------------------------------------------------------------------------------- |
+| children |                   |         | FilteredSearch is expected to contain a [`Dropdown`](/Dropdown) followed by a [`TextInput`](/TextInput). |
+| sx       | SystemStyleObject |   {}    | Style to be applied to the component                                                                     |

package/docs/content/Flash.md

@@ -26,19 +26,10 @@ Flash components with icons inside of them will automatically set the correct co
 </Flash>
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-Flash components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
-
 ## Component props
 
-| Name    | Type    | Default | Description                                                                                                              |
-| :------ | :------ | :-----: | :----------------------------------------------------------------------------------------------------------------------- |
-| full    | Boolean |         | Creates a full width Flash component                                                                                     |
-| variant | String  | default | Can be one of `default`, `success`, `warning`, or `danger` - sets the background color and border of the Flash component |
+| Name    | Type              | Default | Description                                                                                                              |
+| :------ | :---------------- | :-----: | :----------------------------------------------------------------------------------------------------------------------- |
+| full    | Boolean           |         | Creates a full width Flash component                                                                                     |
+| sx      | SystemStyleObject |   {}    | Style to be applied to the component                                                                                     |
+| variant | String            | default | Can be one of `default`, `success`, `warning`, or `danger` - sets the background color and border of the Flash component |

package/docs/content/FormGroup.md

@@ -20,27 +20,19 @@ Adds styles for multiple form elements used together.
 </>
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-FormGroup components get `COMMON` system props. FormGroup.Label components get `COMMON` and `TYPOGRAPHY` system props. Read our [System Props](/system-props) doc page for a full list of available props.
-
 ## Component props
 
 ### FormGroup
 
-| Name | Type   | Default | Description                         |
-| :--- | :----- | :-----: | :---------------------------------- |
-| as   | String |  `div`  | Sets the HTML tag for the component |
+| Name | Type              | Default | Description                          |
+| :--- | :---------------- | :-----: | :----------------------------------- |
+| as   | String            |  `div`  | Sets the HTML tag for the component  |
+| sx   | SystemStyleObject |   {}    | Style to be applied to the component |
 
 ### FormGroup.Label
 
-| Name    | Type   | Default | Description                                                                    |
-| :------ | :----- | :-----: | :----------------------------------------------------------------------------- |
-| as      | String | `label` | Sets the HTML tag for the component                                            |
-| htmlFor | String |         | The value of `htmlFor` needs to be the same as the `id` of the input it labels |
+| Name    | Type              | Default | Description                                                                    |
+| :------ | :---------------- | :-----: | :----------------------------------------------------------------------------- |
+| as      | String            | `label` | Sets the HTML tag for the component                                            |
+| htmlFor | String            |         | The value of `htmlFor` needs to be the same as the `id` of the input it labels |
+| sx      | SystemStyleObject |   {}    | Style to be applied to the component                                           |

package/docs/content/Header.md

@@ -53,27 +53,25 @@ All items directly under the Header component should be a `Header.Item` componen
 </Header>
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
+## Component props
 
-`Header` and `Header.Item` components get `COMMON` and `BORDER` system props. `Header.Link` component gets `COMMON`, `BORDER`, and `TYPOGRAPHY` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+### Header
 
-## Component props
+| Name | Type              | Default | Description                          |
+| :--- | :---------------- | :-----: | :----------------------------------- |
+| sx   | SystemStyleObject |   {}    | Style to be applied to the component |
 
 ### Header.Item
 
-| Prop name | Type    | Description                                |
-| :-------- | :------ | :----------------------------------------- |
-| full      | Boolean | stretches item to fill the available space |
+| Name | Type              | Default | Description                                |
+| :--- | :---------------- | :-----: | :----------------------------------------- |
+| full | Boolean           |         | stretches item to fill the available space |
+| sx   | SystemStyleObject |   {}    | Style to be applied to the component       |
 
 ### Header.Link
 
-| Prop name | Type   | Description                         |
-| :-------- | :----- | :---------------------------------- |
-| as        | String | sets the HTML tag for the component |
-| href      | String | URL to be used for the Link         |
+| Name | Type              | Default | Description                          |
+| :--- | :---------------- | :-----: | :----------------------------------- |
+| as   | String            |         | sets the HTML tag for the component  |
+| href | String            |         | URL to be used for the Link          |
+| sx   | SystemStyleObject |   {}    | Style to be applied to the component |

package/docs/content/Label.md

@@ -8,35 +8,42 @@ The Label component is used to add contextual metadata to a design. Visually it
 
 ```jsx live
 <>
-  <Label variant="small" outline sx={{borderColor: "danger.emphasis", mr: 2, color: "danger.fg"}}>small</Label>
-  <Label variant="medium" sx={{mr: 2}}>medium (default)</Label>
-  <Label variant="large" sx={{mr: 2}}>large</Label>
+  <Label variant="small" outline sx={{borderColor: 'danger.emphasis', mr: 2, color: 'danger.fg'}}>
+    small
+  </Label>
+  <Label variant="medium" sx={{mr: 2}}>
+    medium (default)
+  </Label>
+  <Label variant="large" sx={{mr: 2}}>
+    large
+  </Label>
   <Label variant="xl">xl label</Label>
 
-  <Box mt={4}/>
-  <Label variant="medium" sx={{bg:"#A575FF", m: 1}}>good first issue</Label>
-  <Label variant="medium" sx={{bg:"#FF75C8", m: 1}}>🚂 deploy: train</Label>
-  <Label variant="medium" sx={{bg:"#1C90FA", m: 1}}>css</Label>
-  <Label variant="medium" sx={{bg:"#FFF06C", color:"#24292E", m: 1}}>documentation</Label>
-  <Label variant="medium" sx={{bg: "#656BFE", m: 1}}>primer</Label>
+  <Box mt={4} />
+  <Label variant="medium" sx={{bg: '#A575FF', m: 1}}>
+    good first issue
+  </Label>
+  <Label variant="medium" sx={{bg: '#FF75C8', m: 1}}>
+    🚂 deploy: train
+  </Label>
+  <Label variant="medium" sx={{bg: '#1C90FA', m: 1}}>
+    css
+  </Label>
+  <Label variant="medium" sx={{bg: '#FFF06C', color: '#24292E', m: 1}}>
+    documentation
+  </Label>
+  <Label variant="medium" sx={{bg: '#656BFE', m: 1}}>
+    primer
+  </Label>
 </>
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-Label components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
-
 ## Component props
 
-| Name       | Type    |        Default         | Description                                                                    |
-| :--------- | :------ | :--------------------: | :----------------------------------------------------------------------------- |
-| outline    | Boolean |                        | Creates an outline style label                                                 |
-| variant    | String  |        'medium'        | Can be one of `small`, `medium` (default), `large` or `xl` .                   |
-| dropshadow | Boolean |                        | Adds a dropshadow to the label                                                 |
-| bg         | String  | 'label.primary.border' | Part of the `COMMON` system props, used to change the background of the label. |
+| Name       | Type              |        Default         | Description                                                                    |
+| :--------- | :---------------- | :--------------------: | :----------------------------------------------------------------------------- |
+| outline    | Boolean           |                        | Creates an outline style label                                                 |
+| variant    | String            |        'medium'        | Can be one of `small`, `medium` (default), `large` or `xl` .                   |
+| dropshadow | Boolean           |                        | Adds a dropshadow to the label                                                 |
+| bg         | String            | 'label.primary.border' | Part of the `COMMON` system props, used to change the background of the label. |
+| sx         | SystemStyleObject |           {}           | Style to be applied to the component                                           |

package/docs/content/LabelGroup.md

@@ -9,23 +9,13 @@ The LabelGroup component is used to add commonly used margins and wrapping for g
 ```jsx live
 <LabelGroup>
   <Label>Default label</Label>
-  <Label sx={{color: "fg.onEmphasis", bg: "danger.emphasis"}}>
-    Label with background indicating a closed PR state
-  </Label>
+  <Label sx={{color: 'fg.onEmphasis', bg: 'danger.emphasis'}}>Label with background indicating a closed PR state</Label>
   <Label outline>Default outline label</Label>
 </LabelGroup>
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-LabelGroup components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
-
 ## Component props
 
-LabelGroup does not get any additional props.
+| Name | Type              | Default | Description                          |
+| :--- | :---------------- | :-----: | :----------------------------------- |
+| sx   | SystemStyleObject |   {}    | Style to be applied to the component |

package/docs/content/Link.md

@@ -16,22 +16,13 @@ In special cases where you'd like a `<button>` styled like a `Link`, use `<Link
 </Link>
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-Link components get `COMMON` and `TYPOGRAPHY` system props. Read our [System Props](/system-props) doc page for a full list of available props.
-
 ## Component props
 
-| Name       | Type    | Default | Description                                                                     |
-| :--------- | :------ | :-----: | :------------------------------------------------------------------------------ |
-| href       | String  |         | URL to be used for the Link                                                     |
-| muted      | Boolean |  false  | Uses a less prominent shade for Link color, and the default link shade on hover |
-| underline  | Boolean |  false  | Adds underline to the Link                                                      |
-| as         | String  |   'a'   | Can be 'a', 'button', 'input', or 'summary'                                     |
-| hoverColor | String  |         | Color used when hovering over link                                              |
+| Name       | Type              | Default | Description                                                                     |
+| :--------- | :---------------- | :-----: | :------------------------------------------------------------------------------ |
+| href       | String            |         | URL to be used for the Link                                                     |
+| muted      | Boolean           |  false  | Uses a less prominent shade for Link color, and the default link shade on hover |
+| underline  | Boolean           |  false  | Adds underline to the Link                                                      |
+| as         | String            |   'a'   | Can be 'a', 'button', 'input', or 'summary'                                     |
+| hoverColor | String            |         | Color used when hovering over link                                              |
+| sx         | SystemStyleObject |   {}    | Style to be applied to the component                                            |

package/docs/content/Overlay.mdx

@@ -65,16 +65,6 @@ const Demo = () => {
 render(<Demo />)
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-`Overlay` gets `COMMON` system props. Read the [System Props](/system-props) doc page for a full list of available props.
-
 ## Component props
 
 | Name                | Type                                                           |   Default   | Description                                                                                                                                                                                                                                                                                                                   |
@@ -92,3 +82,4 @@ System props are deprecated in all components except [Box](/Box). Please use the
 | top                 | `number`                                                       |      0      | Vertical position of the overlay, relative to its closest positioned ancestor (often its `Portal`).                                                                                                                                                                                                                           |
 | left                | `number`                                                       |      0      | Horizontal position of the overlay, relative to its closest positioned ancestor (often its `Portal`).                                                                                                                                                                                                                         |
 | portalContainerName | `string`                                                       | `undefined` | Optional. If defined, Overlays will be rendered in the named portal. See also `Portal`.                                                                                                                                                                                                                                       |
+| sx                  | SystemStyleObject                                              |     {}      | Style to be applied to the component                                                                                                                                                                                                                                                                                          |

package/docs/content/Pagehead.md

@@ -10,18 +10,9 @@ Give a page a clear, separated title and optional top nav by using Pagehead.
 <Pagehead>Pagehead</Pagehead>
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-Pagehead components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
-
 ## Component props
 
-| Name | Type   | Default | Description                         |
-| :--- | :----- | :-----: | :---------------------------------- |
-| as   | String |  `div`  | Sets the HTML tag for the component |
+| Name | Type              | Default | Description                          |
+| :--- | :---------------- | :-----: | :----------------------------------- |
+| as   | String            |  `div`  | Sets the HTML tag for the component  |
+| sx   | SystemStyleObject |   {}    | Style to be applied to the component |