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

package/docs/content/Pagination.md

@@ -127,27 +127,18 @@ To hide all the page numbers and create a simple pagination container with just
 </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>
-
-Pagination 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                                                            |
-| :------------------- | :------- | :--------: | :--------------------------------------------------------------------- |
-| currentPage          | Number   |            | **Required.** The currently selected page.                             |
-| hrefBuilder          | Function | `#${page}` | A function to generate links based on page number.                     |
-| marginPageCount      | Number   |     1      | How many pages to always show at the left and right of the component.  |
-| onPageChange         | Function |   no-op    | Called with event and page number when a page is clicked.              |
-| pageCount            | Number   |            | **Required.** The total number of pages.                               |
-| showPages            | Boolean  |   `true`   | Whether or not to show the individual page links.                      |
-| surroundingPageCount | Number   |     2      | How many pages to display on each side of the currently selected page. |
+| Name                 | Type              |  Default   | Description                                                            |
+| :------------------- | :---------------- | :--------: | :--------------------------------------------------------------------- |
+| currentPage          | Number            |            | **Required.** The currently selected page.                             |
+| hrefBuilder          | Function          | `#${page}` | A function to generate links based on page number.                     |
+| marginPageCount      | Number            |     1      | How many pages to always show at the left and right of the component.  |
+| onPageChange         | Function          |   no-op    | Called with event and page number when a page is clicked.              |
+| pageCount            | Number            |            | **Required.** The total number of pages.                               |
+| showPages            | Boolean           |   `true`   | Whether or not to show the individual page links.                      |
+| surroundingPageCount | Number            |     2      | How many pages to display on each side of the currently selected page. |
+| sx                   | SystemStyleObject |     {}     | Style to be applied to the component                                   |
 
 ## Theming
 

package/docs/content/Popover.md

@@ -105,26 +105,17 @@ function CaretSelector(props) {
 render(<PopoverDemo />)
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-ProgressBar components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
-
 ## Component props
 
 ### Popover
 
-| Name     | Type    | Default | Description                                                                    |
-| :------- | :------ | :-----: | :----------------------------------------------------------------------------- |
-| as       | String  |  'div'  | Sets the HTML tag for the component.                                           |
-| caret    | String  |  'top'  | Controls the position of the caret. See below for the list of caret positions. |
-| open     | Boolean |  false  | Controls the visibility of the popover.                                        |
-| relative | Boolean |  false  | Set to true to render the popover using relative positioning.                  |
+| Name     | Type              | Default | Description                                                                    |
+| :------- | :---------------- | :-----: | :----------------------------------------------------------------------------- |
+| as       | String            |  'div'  | Sets the HTML tag for the component.                                           |
+| caret    | String            |  'top'  | Controls the position of the caret. See below for the list of caret positions. |
+| open     | Boolean           |  false  | Controls the visibility of the popover.                                        |
+| relative | Boolean           |  false  | Set to true to render the popover using relative positioning.                  |
+| sx       | SystemStyleObject |   {}    | Style to be applied to the component                                           |
 
 #### Caret Positions
 
@@ -132,6 +123,7 @@ The `caret` prop can be one of the following values: `top`, `bottom`, `left`, `r
 
 ### Popover.Content
 
-| 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 |

package/docs/content/SelectMenu.md

@@ -33,10 +33,11 @@ Main wrapper component for select menu.
 
 ### Component Props
 
-| Name       | Type      | Default | Description                                                                                                                              |
-| :--------- | :-------- | :-----: | :--------------------------------------------------------------------------------------------------------------------------------------- |
-| initialTab | String    |         | If using the `SelectMenu.Tabs` component, you can use this prop to change the tab shown on open. By default, the first tab will be used. |
-| ref        | React ref |         | ref to pass down to SelectMenu component                                                                                                 |
+| Name       | Type              | Default | Description                                                                                                                              |
+| :--------- | :---------------- | :-----: | :--------------------------------------------------------------------------------------------------------------------------------------- |
+| initialTab | String            |         | If using the `SelectMenu.Tabs` component, you can use this prop to change the tab shown on open. By default, the first tab will be used. |
+| ref        | React ref         |         | ref to pass down to SelectMenu component                                                                                                 |
+| sx         | SystemStyleObject |   {}    | Style to be applied to the component                                                                                                     |
 
 ## SelectMenu.MenuContext
 
@@ -82,9 +83,7 @@ const MyButton = () => {
 Used to wrap the content in a `SelectMenu`.
 
 ```jsx
-<SelectMenu.Modal>
-  {/* all menu content is wrapped in the modal*/}
-</SelectMenu.Modal>
+<SelectMenu.Modal>{/* all menu content is wrapped in the modal*/}</SelectMenu.Modal>
 ```
 
 ### Right-aligned modal
@@ -110,10 +109,11 @@ Use the `align='right'` prop to align the modal to the right. Note that this onl
 
 ### Component Props
 
-| Prop name | Type             | Default | Description                                       |
-| :-------- | :--------------- | :------ | ------------------------------------------------- |
-| align     | String           | 'left'  | Use `right` to align the select menu to the right |
-| width     | String or Number | 300px   | Sets the modal width                              |
+| Prop name | Type              | Default | Description                                       |
+| :-------- | :---------------- | :------ | ------------------------------------------------- |
+| align     | String            | 'left'  | Use `right` to align the select menu to the right |
+| width     | String or Number  | 300px   | Sets the modal width                              |
+| sx        | SystemStyleObject | {}      | Style to be applied to the component              |
 
 ## SelectMenu.List
 
@@ -125,7 +125,9 @@ Used to wrap the select menu list content. All menu items **must** be wrapped in
 
 ### Component Props
 
-SelectMenu.List components do not get any additional props besides system props.
+| Name | Type              | Default | Description                          |
+| :--- | :---------------- | :-----: | :----------------------------------- |
+| sx   | SystemStyleObject |   {}    | Style to be applied to the component |
 
 ## SelectMenu.Item
 
@@ -139,22 +141,13 @@ You can use a `button` tag instead by utilizing the [`as` prop](/core-concepts#t
 </SelectMenu.Item>
 ```
 
-### System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-SelectMenu 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                                                                                                                                                                                    |
-| :------- | :------- | :-----: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| selected | boolean  |         | Used to apply styles to the selected items in the list.                                                                                                                                        |
-| onClick  | function |         | Function called when item is clicked. By default we also close the menu when items are clicked. If you would like the menu to stay open, pass an `e.preventDefault()` to your onClick handler. |
+| Name     | Type              | Default | Description                                                                                                                                                                                    |
+| :------- | :---------------- | :-----: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| selected | boolean           |         | Used to apply styles to the selected items in the list.                                                                                                                                        |
+| onClick  | function          |         | Function called when item is clicked. By default we also close the menu when items are clicked. If you would like the menu to stay open, pass an `e.preventDefault()` to your onClick handler. |
+| sx       | SystemStyleObject |   {}    | Style to be applied to the component                                                                                                                                                           |
 
 ## SelectMenu.Filter
 
@@ -177,23 +170,14 @@ Use a `SelectMenu.Filter` to add a filter UI to your select menu. Users are expe
 </SelectMenu>
 ```
 
-### System Props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-SelectMenu.Filter components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
-
 ### Component Props
 
 SelectMenu.Filter components receive all the props that the [TextInput](/TextInput) component gets.
 
-| Name  | Type   | Default | Description                                                                                                    |
-| :---- | :----- | :-----: | :------------------------------------------------------------------------------------------------------------- |
-| value | String |         | Users of this component must provide a value for the filter input that is managed in the consuming application |
+| Name  | Type              | Default | Description                                                                                                    |
+| :---- | :---------------- | :-----: | :------------------------------------------------------------------------------------------------------------- |
+| value | String            |         | Users of this component must provide a value for the filter input that is managed in the consuming application |
+| sx    | SystemStyleObject |   {}    | Style to be applied to the component                                                                           |
 
 ## SelectMenu.Tabs
 
@@ -232,7 +216,9 @@ If you need access to the selected tab state, you can find it in the MenuContext
 
 ### Component Props
 
-SelectMenu.Tabs components do not get any additional props besides system props.
+| Name | Type              | Default | Description                          |
+| :--- | :---------------- | :-----: | :----------------------------------- |
+| sx   | SystemStyleObject |   {}    | Style to be applied to the component |
 
 ## SelectMenu.Tab
 
@@ -242,28 +228,19 @@ The `onClick` prop is optional and can be used for any events or data fetching y
 
 ```jsx
 <>
-  <SelectMenu.Tab index={0} tabName="Repository"/>
-  <SelectMenu.Tab index={1} tabName="Organization"/>
+  <SelectMenu.Tab index={0} tabName="Repository" />
+  <SelectMenu.Tab index={1} tabName="Organization" />
 </>
 ```
 
-### System Props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-SelectMenu.Tab 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                                                                                                                |
-| :------ | :------- | :-----: | :------------------------------------------------------------------------------------------------------------------------- |
-| tabName | String   |         | Used to identify the corresponding tab. Must match the string used in the `tabs` array in the `SelectMenu.Tabs` component. |
-| index   | Number   |         | The index at which the tab is in the list of tabs                                                                          |
-| onClick | Function |         | Function to be called when the tab is clicked. Optional.                                                                   |
+| Name    | Type              | Default | Description                                                                                                                |
+| :------ | :---------------- | :-----: | :------------------------------------------------------------------------------------------------------------------------- |
+| tabName | String            |         | Used to identify the corresponding tab. Must match the string used in the `tabs` array in the `SelectMenu.Tabs` component. |
+| index   | Number            |         | The index at which the tab is in the list of tabs                                                                          |
+| onClick | Function          |         | Function to be called when the tab is clicked. Optional.                                                                   |
+| sx      | SystemStyleObject |   {}    | Style to be applied to the component                                                                                       |
 
 ## SelectMenu.TabPanel
 
@@ -275,21 +252,12 @@ Wraps the content for each tab. Make sure to use the `tabName` prop to identify
 <SelectMenu.TabPanel tabName="Repository">{/* Wraps content for each tab */}</SelectMenu.TabPanel>
 ```
 
-### System Props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-SelectMenu.TabPanel 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                                                                                                                |
-| :------ | :----- | :-----: | :------------------------------------------------------------------------------------------------------------------------- |
-| tabName | String |         | Used to identify the corresponding tab. Must match the string used in the `tabs` array in the `SelectMenu.Tabs` component. |
+| Name    | Type              | Default | Description                                                                                                                |
+| :------ | :---------------- | :-----: | :------------------------------------------------------------------------------------------------------------------------- |
+| tabName | String            |         | Used to identify the corresponding tab. Must match the string used in the `tabs` array in the `SelectMenu.Tabs` component. |
+| sx      | SystemStyleObject |   {}    | Style to be applied to the component                                                                                       |
 
 ## SelectMenu.Divider
 
@@ -311,19 +279,11 @@ Use a `SelectMenu.Divider` to add information between items in a `SelectMenu.Lis
 </SelectMenu>
 ```
 
-### System Props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-SelectMenu.Divder components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
-
 ### Component Props
 
-SelectMenu.Divider components do not get any additional props besides system props.
+| Name | Type              | Default | Description                          |
+| :--- | :---------------- | :-----: | :----------------------------------- |
+| sx   | SystemStyleObject |   {}    | Style to be applied to the component |
 
 ## SelectMenu.Footer
 
@@ -345,19 +305,11 @@ Use a `SelectMenu.Footer` to add content to the bottom of the select menu.
 </SelectMenu>
 ```
 
-### System Props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-SelectMenu.Footer components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
-
 ### Component Props
 
-SelectMenu.Footer components do not get any additional props besides system props.
+| Name | Type              | Default | Description                          |
+| :--- | :---------------- | :-----: | :----------------------------------- |
+| sx   | SystemStyleObject |   {}    | Style to be applied to the component |
 
 ## SelectMenu.Header
 
@@ -379,19 +331,11 @@ Use a `SelectMenu.Header` to add a header to the top of the select menu content.
 </SelectMenu>
 ```
 
-### System Props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-SelectMenu.Header components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
-
 ### Component Props
 
-SelectMenu.Header components do not get any additional props besides system props.
+| Name | Type              | Default | Description                          |
+| :--- | :---------------- | :-----: | :----------------------------------- |
+| sx   | SystemStyleObject |   {}    | Style to be applied to the component |
 
 ## SelectMenu.LoadingAnimation
 
@@ -420,16 +364,8 @@ Use a `SelectMenu.LoadingAnimation` to add a loading animation inside of the Sel
 </SelectMenu>
 ```
 
-### System Props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-SelectMenu.LoadingAnimation components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
-
 ### Component Props
 
-SelectMenu.LoadingAnimation components do not get any additional props besides system props.
+| Name | Type              | Default | Description                          |
+| :--- | :---------------- | :-----: | :----------------------------------- |
+| sx   | SystemStyleObject |   {}    | Style to be applied to the component |

package/docs/content/SideNav.md

@@ -147,33 +147,25 @@ If using React Router, you can use the `as` prop to render the element as a `Nav
 <SideNav.Link as={NavLink} to="...">...</SideNav.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>
-
-`SideNav` components get `COMMON`, `BORDER`, `LAYOUT`, and `FLEX` system props. `SideNav.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
 
 ### SideNav
 
-| Name     | Type    | Default  | Description                                                                    |
-| :------- | :------ | :------: | :----------------------------------------------------------------------------- |
-| as       | String  |  'nav'   | Sets the HTML tag for the component.                                           |
-| bordered | Boolean |  false   | Renders the component with a border.                                           |
-| variant  | String  | 'normal' | Set to `lightweight` to render [in a lightweight style](#lightweight-variant). |
+| Name     | Type              | Default  | Description                                                                    |
+| :------- | :---------------- | :------: | :----------------------------------------------------------------------------- |
+| as       | String            |  'nav'   | Sets the HTML tag for the component.                                           |
+| bordered | Boolean           |  false   | Renders the component with a border.                                           |
+| variant  | String            | 'normal' | Set to `lightweight` to render [in a lightweight style](#lightweight-variant). |
+| sx       | SystemStyleObject |    {}    | Style to be applied to the component                                           |
 
 ### SideNav.Link
 
-| Name      | Type    | Default  | Description                                                                                       |
-| :-------- | :------ | :------: | :------------------------------------------------------------------------------------------------ |
-| as        | String  |   'a'    | Sets the HTML tag for the component.                                                              |
-| 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                   |
-| selected  | Boolean |  false   | Sets the link as selected, giving it a different style and setting the `aria-current` attribute.  |
-| underline | Boolean |  false   | Adds underline to the Link                                                                        |
-| variant   | String  | 'normal' | Set to `full` to render [a full variant](#full-variant), suitable for including icons and labels. |
+| Name      | Type              | Default  | Description                                                                                       |
+| :-------- | :---------------- | :------: | :------------------------------------------------------------------------------------------------ |
+| as        | String            |   'a'    | Sets the HTML tag for the component.                                                              |
+| 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                   |
+| selected  | Boolean           |  false   | Sets the link as selected, giving it a different style and setting the `aria-current` attribute.  |
+| underline | Boolean           |  false   | Adds underline to the Link                                                                        |
+| variant   | String            | 'normal' | Set to `full` to render [a full variant](#full-variant), suitable for including icons and labels. |
+| sx        | SystemStyleObject |    {}    | Style to be applied to the component                                                              |

package/docs/content/StateLabel.md

@@ -18,19 +18,10 @@ Use StateLabel components to show the status of an issue or pull request.
 </>
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-StateLabel 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                                                                                                    |
-| :------ | :----- | :------: | :------------------------------------------------------------------------------------------------------------- |
-| variant | String | 'normal' | a value of `small` or `normal` results in a smaller or larger version of the StateLabel.                       |
-| status  | String |          | Can be one of `issueOpened`, `issueClosed`, `pullOpened`, `pullClosed`, `pullMerged`, `draft` or `issueDraft`. |
+| Name    | Type              | Default  | Description                                                                                                    |
+| :------ | :---------------- | :------: | :------------------------------------------------------------------------------------------------------------- |
+| variant | String            | 'normal' | a value of `small` or `normal` results in a smaller or larger version of the StateLabel.                       |
+| status  | String            |          | Can be one of `issueOpened`, `issueClosed`, `pullOpened`, `pullClosed`, `pullMerged`, `draft` or `issueDraft`. |
+| sx      | SystemStyleObject |    {}    | Style to be applied to the component                                                                           |

package/docs/content/StyledOcticon.md

@@ -14,23 +14,14 @@ StyledOcticon renders an [Octicon](https://octicons.github.com) with common syst
 </>
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-StyledOcticon components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
-
 ## Component props
 
 StyledOcticon passes all of its props except the common system props down to the [Octicon component](https://github.com/primer/octicons/tree/master/lib/octicons_react#usage), including:
 
-| Name          | Type      |    Default    | Description                                                                                                  |
-| :------------ | :-------- | :-----------: | :----------------------------------------------------------------------------------------------------------- |
-| ariaLabel     | String    |               | Specifies the `aria-label` attribute, which is read verbatim by screen readers                               |
-| icon          | Component |               | [Octicon component](https://github.com/primer/octicons/tree/master/lib/octicons_react) used in the component |
-| size          | Number    |      16       | Sets the uniform `width` and `height` of the SVG element                                                     |
-| verticalAlign | String    | `text-bottom` | Sets the `vertical-align` CSS property                                                                       |
+| Name          | Type              |    Default    | Description                                                                                                  |
+| :------------ | :---------------- | :-----------: | :----------------------------------------------------------------------------------------------------------- |
+| ariaLabel     | String            |               | Specifies the `aria-label` attribute, which is read verbatim by screen readers                               |
+| icon          | Component         |               | [Octicon component](https://github.com/primer/octicons/tree/master/lib/octicons_react) used in the component |
+| size          | Number            |      16       | Sets the uniform `width` and `height` of the SVG element                                                     |
+| verticalAlign | String            | `text-bottom` | Sets the `vertical-align` CSS property                                                                       |
+| sx            | SystemStyleObject |      {}       | Style to be applied to the component                                                                         |

package/docs/content/SubNav.md

@@ -72,31 +72,29 @@ This ensures that the NavLink gets `activeClassName='selected'`
 </SubNav>
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-SubNav and SubNav.Link components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
-
 ## Component props
 
 ### SubNav
 
-| Prop name  | Type    | Description                                                                            |
-| :--------- | :------ | :------------------------------------------------------------------------------------- |
-| actions    | Node    | Place another element, such as a button, to the opposite side of the navigation items. |
-| align      | String  | Use `right` to have navigation items aligned right.                                    |
-| full       | Boolean | Used to make navigation fill the width of the container.                               |
-| aria-label | String  | Used to set the `aria-label` on the top level `<nav>` element.                         |
+| Name       | Type              | Default | Description                                                                            |
+| :--------- | :---------------- | :-----: | :------------------------------------------------------------------------------------- |
+| actions    | Node              |         | Place another element, such as a button, to the opposite side of the navigation items. |
+| align      | String            |         | Use `right` to have navigation items aligned right.                                    |
+| full       | Boolean           |         | Used to make navigation fill the width of the container.                               |
+| aria-label | String            |         | Used to set the `aria-label` on the top level `<nav>` element.                         |
+| sx         | SystemStyleObject |   {}    | Style to be applied to the component                                                   |
 
 ### SubNav.Link
 
-| Prop name | Type    | Description                                      |
-| :-------- | :------ | :----------------------------------------------- |
-| as        | String  | sets the HTML tag for the component              |
-| href      | String  | URL to be used for the Link                      |
-| selected  | Boolean | Used to style the link as selected or unselected |
+| Name     | Type              | Default | Description                                      |
+| :------- | :---------------- | :-----: | :----------------------------------------------- |
+| as       | String            |         | sets the HTML tag for the component              |
+| href     | String            |         | URL to be used for the Link                      |
+| selected | Boolean           |         | Used to style the link as selected or unselected |
+| sx       | SystemStyleObject |   {}    | Style to be applied to the component             |
+
+### SubNav.Links
+
+| Name | Type              | Default | Description                          |
+| :--- | :---------------- | :-----: | :----------------------------------- |
+| sx   | SystemStyleObject |   {}    | Style to be applied to the component |

package/docs/content/TabNav.md

@@ -23,28 +23,20 @@ This ensures that the NavLink gets `activeClassName='selected'`
 </TabNav>
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-TabNav and TabNav.Link components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
-
 ## Component props
 
 ### TabNav
 
-| Prop name  | Type   | Description                                                    |
-| :--------- | :----- | :------------------------------------------------------------- |
-| aria-label | String | Used to set the `aria-label` on the top level `<nav>` element. |
+| Name       | Type              | Default | Description                                                    |
+| :--------- | :---------------- | :-----: | :------------------------------------------------------------- |
+| aria-label | String            |         | Used to set the `aria-label` on the top level `<nav>` element. |
+| sx         | SystemStyleObject |   {}    | Style to be applied to the component                           |
 
 ### TabNav.Link
 
-| Prop name | Type    | Description                                      |
-| :-------- | :------ | :----------------------------------------------- |
-| as        | String  | sets the HTML tag for the component              |
-| href      | String  | URL to be used for the Link                      |
-| selected  | Boolean | Used to style the link as selected or unselected |
+| Name     | Type              | Default | Description                                      |
+| :------- | :---------------- | :-----: | :----------------------------------------------- |
+| as       | String            |         | sets the HTML tag for the component              |
+| href     | String            |         | URL to be used for the Link                      |
+| selected | Boolean           |         | Used to style the link as selected or unselected |
+| sx       | SystemStyleObject |   {}    | Style to be applied to the component             |