@primer/components 32.1.1-rc.b4502a34 → 33.0.0-rc.b3e4ccee

package/docs/content/BranchName.md

@@ -12,15 +12,16 @@ BranchName is a label-type component rendered as an `<a>` tag by default with mo
 
 ## Props
 
-| Name | Type   | Default | Description                         |
-| :--- | :----- | :-----: | :---------------------------------- |
-| as   | String |  `<a>`  | sets the HTML tag for the component |
-| href | String |         | a URL to link the component to      |
+| Name | Type              | Default | Description                          |
+| :--- | :---------------- | :-----: | :----------------------------------- |
+| as   | String            |  `<a>`  | sets the HTML tag for the component  |
+| href | String            |         | a URL to link the component to       |
+| sx   | SystemStyleObject |   {}    | Style to be applied to the component |
 
 ## Component status
 
 <ComponentChecklist
-  items={{
+items={{
     propsDocumented: true,
     noUnnecessaryDeps: true,
     adaptsToThemes: true,

package/docs/content/Details.md

@@ -79,15 +79,11 @@ In previous versions of Primer React Components, we allowed users to pass in a c
 </State>
 ```
 
-## `Details` System props
+## Details props
 
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-Details components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+| Name | Type              | Default | Description                          |
+| :--- | :---------------- | :-----: | :----------------------------------- |
+| sx   | SystemStyleObject |   {}    | Style to be applied to the component |
 
 ## `useDetails` hook configuration options
 

package/docs/content/Heading.md

@@ -10,17 +10,12 @@ The Heading component will render an html `h2` tag without any default styling.
 ## Default example
 
 ```jsx live
-<Heading fontSize={1} mb={2}>
-  H2 heading with fontSize={1}
-</Heading>
+<Heading sx={{fontSize: 1, mb: 2}}>H2 heading with fontSize={1}</Heading>
 ```
 
-## System props
-
-Heading components get `TYPOGRAPHY` and `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
-
 ## Component props
 
-| Prop name | Type                    | Description                         |
-| :-------- | :---------------------- | :---------------------------------- |
-| as        | String or React element | sets the HTML tag for the component |
+| Name | Type                    | Default | Description                          |
+| :--- | :---------------------- | :-----: | :----------------------------------- |
+| as   | String or React element |         | sets the HTML tag for the component  |
+| sx   | SystemStyleObject       |   {}    | Style to be applied to the component |

package/docs/content/Label.md

@@ -41,10 +41,9 @@ The Label component is used to add contextual metadata to a design. Visually it
 
 ## 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. |
-| sx         | SystemStyleObject |           {}           | Style to be applied to the component                                           |
+| 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                               |
+| sx         | SystemStyleObject |    {}    | Style to be applied to the component                         |

package/docs/content/ProgressBar.mdx

@@ -22,9 +22,10 @@ If you'd like to use ProgressBar inline, pass the `inline` boolean prop & **be s
 
 ## Component props
 
-| Name     | Type    |       Default       | Description                                                                                                                      |
-| :------- | :------ | :-----------------: | :------------------------------------------------------------------------------------------------------------------------------- |
-| progress | Number  |                     | Used to set the size of the green bar                                                                                            |
-| barSize  | String  |      'default'      | Controls the height of the progress bar. Can be 'small', 'large', or 'default'. If omitted, height is set to the default height. |
-| inline   | Boolean |        false        | Styles the progress bar inline                                                                                                   |
-| bg       | String  | 'bg.successInverse' | Set the progress bar color, defaults to bg-green                                                                                 |
+| Name     | Type              |       Default       | Description                                                                                                                      |
+| :------- | :---------------- | :-----------------: | :------------------------------------------------------------------------------------------------------------------------------- |
+| progress | Number            |                     | Used to set the size of the green bar                                                                                            |
+| barSize  | String            |      'default'      | Controls the height of the progress bar. Can be 'small', 'large', or 'default'. If omitted, height is set to the default height. |
+| inline   | Boolean           |        false        | Styles the progress bar inline                                                                                                   |
+| bg       | String            | 'bg.successInverse' | Set the progress bar color, defaults to bg-green                                                                                 |
+| sx       | SystemStyleObject |         {}          | Style to be applied to the component                                                                                             |

package/docs/content/Text.md

@@ -23,12 +23,6 @@ The Text component is a wrapper component that will apply typography styles to t
 
 ## System props
 
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
 Text components get `TYPOGRAPHY` and `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
 ## Component props

package/docs/content/status.mdx

@@ -1,5 +1,5 @@
 ---
-title: Component statuses
+title: Component status
 description: Check the current status of Primer React components
 ---
 

package/docs/content/system-props.mdx

@@ -6,7 +6,7 @@ import {PropsList, COMMON, LAYOUT, BORDER, TYPOGRAPHY, FLEX, POSITION, GRID} fro
 
 <Note variant="warning">
 
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
+System props are deprecated in all components except [Box](/Box) and [Text](/Text). Please use the [`sx` prop](/overriding-styles) instead.
 
 </Note>
 

package/docs/src/@primer/gatsby-theme-doctocat/nav.yml

@@ -19,7 +19,7 @@
       url: /overriding-styles
     - title: Server-side rendering
       url: /ssr
-    - title: Component statuses
+    - title: Component status
       url: /status
 - title: Hooks
   children:

package/lib/Avatar.d.ts

@@ -1,4 +1,3 @@
-import { SystemCommonProps } from './constants';
 import { SxProp } from './sx';
 import { ComponentProps } from './utils/types';
 declare const Avatar: import("styled-components").StyledComponent<"img", any, {
@@ -10,6 +9,6 @@ declare const Avatar: import("styled-components").StyledComponent<"img", any, {
     src: string;
     /** Provide alt text when the Avatar is used without the user's name next to it. */
     alt?: string | undefined;
-} & SystemCommonProps & SxProp, never>;
+} & SxProp, never>;
 export declare type AvatarProps = ComponentProps<typeof Avatar>;
 export default Avatar;

package/lib/Avatar.js

@@ -30,7 +30,7 @@ const Avatar = _styledComponents.default.img.attrs(props => ({
 })).withConfig({
   displayName: "Avatar",
   componentId: "sc-1waaaky-0"
-})(["display:inline-block;overflow:hidden;line-height:", ";vertical-align:middle;border-radius:", ";", ";", ""], (0, _constants.get)('lineHeights.condensedUltra'), props => getBorderRadius(props), _constants.COMMON, _sx.default);
+})(["display:inline-block;overflow:hidden;line-height:", ";vertical-align:middle;border-radius:", ";", ""], (0, _constants.get)('lineHeights.condensedUltra'), props => getBorderRadius(props), _sx.default);
 
 Avatar.defaultProps = {
   size: 20,

package/lib/BranchName.d.ts

@@ -1,6 +1,5 @@
-import { SystemCommonProps } from './constants';
 import { SxProp } from './sx';
 import { ComponentProps } from './utils/types';
-declare const BranchName: import("styled-components").StyledComponent<"a", any, SystemCommonProps & SxProp, never>;
+declare const BranchName: import("styled-components").StyledComponent<"a", any, SxProp, never>;
 export declare type BranchNameProps = ComponentProps<typeof BranchName>;
 export default BranchName;

package/lib/BranchName.js

@@ -16,7 +16,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const BranchName = _styledComponents.default.a.withConfig({
   displayName: "BranchName",
   componentId: "sc-167ouzm-0"
-})(["display:inline-block;padding:2px 6px;font-size:", ";font-family:", ";color:", ";background-color:", ";border-radius:", ";", ";", ";"], (0, _constants.get)('fontSizes.0'), (0, _constants.get)('fonts.mono'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.accent.subtle'), (0, _constants.get)('radii.2'), _constants.COMMON, _sx.default);
+})(["display:inline-block;padding:2px 6px;font-size:", ";font-family:", ";color:", ";background-color:", ";border-radius:", ";", ";"], (0, _constants.get)('fontSizes.0'), (0, _constants.get)('fonts.mono'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.accent.subtle'), (0, _constants.get)('radii.2'), _sx.default);
 
 var _default = BranchName;
 exports.default = _default;

package/lib/Details.d.ts

@@ -1,6 +1,5 @@
-import { SystemCommonProps } from './constants';
 import { SxProp } from './sx';
 import { ComponentProps } from './utils/types';
-declare const Details: import("styled-components").StyledComponent<"details", any, SystemCommonProps & SxProp, never>;
+declare const Details: import("styled-components").StyledComponent<"details", any, SxProp, never>;
 export declare type DetailsProps = ComponentProps<typeof Details>;
 export default Details;

package/lib/Details.js

@@ -7,8 +7,6 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _constants = require("./constants");
-
 var _sx = _interopRequireDefault(require("./sx"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -16,7 +14,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const Details = _styledComponents.default.details.withConfig({
   displayName: "Details",
   componentId: "ssy9qz-0"
-})(["& > summary{list-style:none;}& > summary::-webkit-details-marker{display:none;}", " ", ";"], _constants.COMMON, _sx.default);
+})(["& > summary{list-style:none;}& > summary::-webkit-details-marker{display:none;}", ";"], _sx.default);
 
 Details.displayName = 'Details';
 var _default = Details;

package/lib/Dropdown.d.ts

@@ -15,46 +15,14 @@ export declare type DropdownMenuProps = ComponentProps<typeof DropdownMenu>;
 export declare type DropdownItemProps = ComponentProps<typeof DropdownItem>;
 declare const _default: {
     ({ children, className, ...rest }: {
-        backgroundColor?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        color?: (string & import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>) | undefined;
-        display?: import("styled-system").ResponsiveValue<import("csstype").Property.Display, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        marginBottom?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        marginLeft?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        marginRight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        marginTop?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        opacity?: import("styled-system").ResponsiveValue<import("csstype").Property.Opacity, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        paddingBottom?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        paddingLeft?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        paddingRight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        paddingTop?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        color?: string | undefined;
         translate?: "yes" | "no" | undefined;
-        margin?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        padding?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         hidden?: boolean | undefined;
         children?: React.ReactNode;
         ref?: ((instance: HTMLElement | null) => void) | React.RefObject<HTMLElement> | null | undefined;
-        p?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         slot?: string | undefined;
         style?: React.CSSProperties | undefined;
         title?: string | undefined;
-        bg?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        m?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        mt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        mr?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        mb?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        ml?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        mx?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        marginX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        my?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        marginY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        pt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        pr?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        pb?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        pl?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        px?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        paddingX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         open?: boolean | undefined;
         role?: React.AriaRole | undefined;
         sx?: import("./sx").BetterSystemStyleObject | undefined;
@@ -313,46 +281,14 @@ declare const _default: {
         theme?: any;
     }): JSX.Element;
     defaultProps: Partial<{
-        backgroundColor?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        color?: (string & import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>) | undefined;
-        display?: import("styled-system").ResponsiveValue<import("csstype").Property.Display, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        marginBottom?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        marginLeft?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        marginRight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        marginTop?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        opacity?: import("styled-system").ResponsiveValue<import("csstype").Property.Opacity, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        paddingBottom?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        paddingLeft?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        paddingRight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        paddingTop?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+        color?: string | undefined;
         translate?: "yes" | "no" | undefined;
-        margin?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        padding?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         hidden?: boolean | undefined;
         children?: React.ReactNode;
         ref?: ((instance: HTMLElement | null) => void) | React.RefObject<HTMLElement> | null | undefined;
-        p?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         slot?: string | undefined;
         style?: React.CSSProperties | undefined;
         title?: string | undefined;
-        bg?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        m?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        mt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        mr?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        mb?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        ml?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        mx?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        marginX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        my?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        marginY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        pt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        pr?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        pb?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        pl?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        px?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        paddingX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         open?: boolean | undefined;
         role?: React.AriaRole | undefined;
         sx?: import("./sx").BetterSystemStyleObject | undefined;

package/lib/Heading.d.ts

@@ -1,6 +1,5 @@
-import { SystemCommonProps, SystemTypographyProps } from './constants';
 import { SxProp } from './sx';
 import { ComponentProps } from './utils/types';
-declare const Heading: import("styled-components").StyledComponent<"h2", any, SystemTypographyProps & SystemCommonProps & SxProp, never>;
+declare const Heading: import("styled-components").StyledComponent<"h2", any, SxProp, never>;
 export declare type HeadingProps = ComponentProps<typeof Heading>;
 export default Heading;

package/lib/Heading.js

@@ -11,17 +11,12 @@ var _constants = require("./constants");
 
 var _sx = _interopRequireDefault(require("./sx"));
 
-var _theme = _interopRequireDefault(require("./theme"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const Heading = _styledComponents.default.h2.withConfig({
   displayName: "Heading",
   componentId: "sc-1cjoo9h-0"
-})(["font-weight:", ";font-size:", ";margin:0;", ";", ";", ";"], (0, _constants.get)('fontWeights.bold'), (0, _constants.get)('fontSizes.5'), _constants.TYPOGRAPHY, _constants.COMMON, _sx.default);
+})(["font-weight:", ";font-size:", ";margin:0;", ";"], (0, _constants.get)('fontWeights.bold'), (0, _constants.get)('fontSizes.5'), _sx.default);
 
-Heading.defaultProps = {
-  theme: _theme.default
-};
 var _default = Heading;
 exports.default = _default;

package/lib/ProgressBar.d.ts

@@ -1,17 +1,22 @@
 /// <reference types="react" />
 import { WidthProps } from 'styled-system';
-import { SystemCommonProps } from './constants';
 import { SxProp } from './sx';
-import { ComponentProps } from './utils/types';
-declare const Bar: import("styled-components").StyledComponent<"span", any, {
-    progress?: string | number | undefined;
-} & SystemCommonProps, never>;
-declare const ProgressContainer: import("styled-components").StyledComponent<"span", any, {
-    inline?: boolean | undefined;
-    barSize?: "small" | "default" | "large" | undefined;
-} & WidthProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Width<import("styled-system").TLengthStyledSystem>> & SystemCommonProps & SxProp, never>;
-export declare type ProgressBarProps = ComponentProps<typeof ProgressContainer> & ComponentProps<typeof Bar>;
-declare function ProgressBar({ progress, bg, theme, ...rest }: ProgressBarProps): JSX.Element;
+declare type ProgressProp = {
+    progress?: string | number;
+};
+declare const sizeMap: {
+    small: string;
+    large: string;
+    default: string;
+};
+declare type StyledProgressContainerProps = {
+    inline?: boolean;
+    barSize?: keyof typeof sizeMap;
+} & WidthProps & SxProp;
+export declare type ProgressBarProps = {
+    bg: string;
+} & StyledProgressContainerProps & ProgressProp;
+declare function ProgressBar({ progress, bg, ...rest }: ProgressBarProps): JSX.Element;
 declare namespace ProgressBar {
     var defaultProps: {
         bg: string;

package/lib/ProgressBar.js

@@ -17,12 +17,10 @@ var _sx = _interopRequireDefault(require("./sx"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 const Bar = _styledComponents.default.span.withConfig({
   displayName: "ProgressBar__Bar",
   componentId: "sc-1tiva13-0"
-})(["width:", ";", ""], props => props.progress ? `${props.progress}%` : 0, _constants.COMMON);
+})(["width:", ";", ";"], props => props.progress ? `${props.progress}%` : 0, _sx.default);
 
 const sizeMap = {
   small: '5px',
@@ -33,20 +31,18 @@ const sizeMap = {
 const ProgressContainer = _styledComponents.default.span.withConfig({
   displayName: "ProgressBar__ProgressContainer",
   componentId: "sc-1tiva13-1"
-})(["display:", ";overflow:hidden;background-color:", ";border-radius:", ";height:", ";", " ", " ", ";"], props => props.inline ? 'inline-flex' : 'flex', (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.1'), props => sizeMap[props.barSize || 'default'], _constants.COMMON, _styledSystem.width, _sx.default);
+})(["display:", ";overflow:hidden;background-color:", ";border-radius:", ";height:", ";", " ", ";"], props => props.inline ? 'inline-flex' : 'flex', (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.1'), props => sizeMap[props.barSize || 'default'], _styledSystem.width, _sx.default);
 
 function ProgressBar({
   progress,
   bg,
-  theme,
   ...rest
 }) {
-  return /*#__PURE__*/_react.default.createElement(ProgressContainer, _extends({
-    theme: theme
-  }, rest), /*#__PURE__*/_react.default.createElement(Bar, {
+  return /*#__PURE__*/_react.default.createElement(ProgressContainer, rest, /*#__PURE__*/_react.default.createElement(Bar, {
     progress: progress,
-    bg: bg,
-    theme: theme
+    sx: {
+      bg
+    }
   }));
 }
 

package/lib/Spinner.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import { SystemCommonProps } from './constants';
 import { SxProp } from './sx';
 import { ComponentProps } from './utils/types';
 declare const sizeMap: {
@@ -12,6 +11,6 @@ export interface SpinnerInternalProps {
     size?: keyof typeof sizeMap;
 }
 declare function Spinner({ size: sizeKey, ...props }: SpinnerInternalProps): JSX.Element;
-declare const StyledSpinner: import("styled-components").StyledComponent<typeof Spinner, any, SystemCommonProps & SxProp, never>;
+declare const StyledSpinner: import("styled-components").StyledComponent<typeof Spinner, any, SxProp, never>;
 export declare type SpinnerProps = ComponentProps<typeof StyledSpinner>;
 export default StyledSpinner;

package/lib/Spinner.js

@@ -9,8 +9,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _constants = require("./constants");
-
 var _sx = _interopRequireDefault(require("./sx"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -54,7 +52,7 @@ Spinner.displayName = "Spinner";
 const StyledSpinner = (0, _styledComponents.default)(Spinner).withConfig({
   displayName: "Spinner__StyledSpinner",
   componentId: "sc-14tspit-0"
-})(["@keyframes rotate-keyframes{100%{transform:rotate(360deg);}}animation:rotate-keyframes 1s linear infinite;", " ", ""], _constants.COMMON, _sx.default);
+})(["@keyframes rotate-keyframes{100%{transform:rotate(360deg);}}animation:rotate-keyframes 1s linear infinite;", ""], _sx.default);
 StyledSpinner.displayName = 'Spinner';
 var _default = StyledSpinner;
 exports.default = _default;

package/lib/__tests__/Avatar.test.js

@@ -59,9 +59,11 @@ describe('Avatar', () => {
   });
   it('respects margin props', () => {
     expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Avatar, {
-      m: 2,
       src: "primer.png",
-      alt: ""
+      alt: "",
+      sx: {
+        m: 2
+      }
     }))).toHaveStyleRule('margin', (0, _testing.px)(_theme.default.space[2]));
   });
 });

package/lib/__tests__/Avatar.types.test.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function shouldAcceptCallWithNoProps(): JSX.Element;
+export declare function shouldNotAcceptSystemProps(): JSX.Element;

package/lib/__tests__/Avatar.types.test.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shouldAcceptCallWithNoProps = shouldAcceptCallWithNoProps;
+exports.shouldNotAcceptSystemProps = shouldNotAcceptSystemProps;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Avatar = _interopRequireDefault(require("../Avatar"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function shouldAcceptCallWithNoProps() {
+  return /*#__PURE__*/_react.default.createElement(_Avatar.default, {
+    src: "https://avatars.githubusercontent.com/primer"
+  });
+}
+
+shouldAcceptCallWithNoProps.displayName = "shouldAcceptCallWithNoProps";
+
+function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return /*#__PURE__*/_react.default.createElement(_Avatar.default, {
+    src: "https://avatars.githubusercontent.com/primer",
+    backgroundColor: "thistle"
+  });
+}
+
+shouldNotAcceptSystemProps.displayName = "shouldNotAcceptSystemProps";

package/lib/__tests__/BranchName.types.test.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function shouldAcceptCallWithNoProps(): JSX.Element;
+export declare function shouldNotAcceptSystemProps(): JSX.Element;

package/lib/__tests__/BranchName.types.test.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shouldAcceptCallWithNoProps = shouldAcceptCallWithNoProps;
+exports.shouldNotAcceptSystemProps = shouldNotAcceptSystemProps;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _BranchName = _interopRequireDefault(require("../BranchName"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function shouldAcceptCallWithNoProps() {
+  return /*#__PURE__*/_react.default.createElement(_BranchName.default, null);
+}
+
+shouldAcceptCallWithNoProps.displayName = "shouldAcceptCallWithNoProps";
+
+function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return /*#__PURE__*/_react.default.createElement(_BranchName.default, {
+    backgroundColor: "thistle"
+  });
+}
+
+shouldNotAcceptSystemProps.displayName = "shouldNotAcceptSystemProps";

package/lib/__tests__/Details.types.test.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function shouldAcceptCallWithNoProps(): JSX.Element;
+export declare function shouldNotAcceptSystemProps(): JSX.Element;

package/lib/__tests__/Details.types.test.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shouldAcceptCallWithNoProps = shouldAcceptCallWithNoProps;
+exports.shouldNotAcceptSystemProps = shouldNotAcceptSystemProps;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Details = _interopRequireDefault(require("../Details"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function shouldAcceptCallWithNoProps() {
+  return /*#__PURE__*/_react.default.createElement(_Details.default, null);
+}
+
+shouldAcceptCallWithNoProps.displayName = "shouldAcceptCallWithNoProps";
+
+function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return /*#__PURE__*/_react.default.createElement(_Details.default, {
+    backgroundColor: "thistle"
+  });
+}
+
+shouldNotAcceptSystemProps.displayName = "shouldNotAcceptSystemProps";