Next major

.changeset/beige-dots-buy.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': major
+---
+
+Truncate no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.

.changeset/brave-trains-give.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': major
+---
+
+Timeline no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.

.changeset/bright-baboons-peel.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': major
+---
+
+Dropdown no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.

.changeset/chilly-socks-compare.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': major
+---
+
+Pagehead no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.

.changeset/eleven-cycles-search.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': major
+---
+
+LabelGroup no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.

.changeset/fast-fireants-sell.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': major
+---
+
+Link no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.

.changeset/gentle-birds-cough.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': major
+---
+
+Popover no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.

.changeset/gentle-tips-hear.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': major
+---
+
+StateLabel no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.

.changeset/gold-countries-kneel.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': major
+---
+
+CircleBadge no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.

.changeset/large-chefs-fix.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': major
+---
+
+SelectMenu no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.

.changeset/little-bats-repeat.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': major
+---
+
+Header no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.

.changeset/lucky-hounds-lie.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': major
+---
+
+UnderlineNav no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.

.changeset/lucky-zoos-smoke.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': major
+---
+
+Overlay no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.

.changeset/mean-bananas-explain.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': major
+---
+
+StyledOcticon no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.

.changeset/moody-buttons-swim.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': major
+---
+
+Dialog no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.

.changeset/neat-masks-grab.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': major
+---
+
+TabNav no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.

.changeset/new-tigers-yawn.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': major
+---
+
+SubNav no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.

.changeset/old-taxis-argue.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': major
+---
+
+Dialog2 no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.

.changeset/purple-buttons-look.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': major
+---
+
+Buttons no longer accept styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.

.changeset/rotten-apricots-float.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': major
+---
+
+Label no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.

.changeset/shaggy-pens-run.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': major
+---
+
+Flash no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.

.changeset/silver-worms-talk.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': major
+---
+
+Tooltip no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.

.changeset/spicy-olives-lick.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': major
+---
+
+Pagination no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.

.changeset/spicy-seas-mate.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': major
+---
+
+Breadcrumbs no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.

.changeset/swift-days-hammer.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': major
+---
+
+FilteredSearch no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.

.changeset/tender-beds-learn.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': major
+---
+
+SideNav no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.

.changeset/twenty-coins-marry.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': major
+---
+
+FilterList no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.

.changeset/unlucky-snails-pull.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': major
+---
+
+CounterLabel no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.

.changeset/wild-olives-talk.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': major
+---
+
+FormGroup no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.

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             |

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
 

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

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                                                                                                                                                                        |

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 |