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

package/lib/__tests__/Heading.test.js

@@ -12,6 +12,8 @@ var _jestAxe = require("jest-axe");
 
 require("babel-polyfill");
 
+var _ThemeProvider = _interopRequireDefault(require("../ThemeProvider"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 expect.extend(_jestAxe.toHaveNoViolations);
@@ -56,54 +58,85 @@ describe('Heading', () => {
     (0, _react2.cleanup)();
   });
   it('respects fontWeight', () => {
-    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Heading, {
-      fontWeight: "bold",
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_ThemeProvider.default, {
       theme: theme
-    }))).toHaveStyleRule('font-weight', theme.fontWeights.bold);
-    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Heading, {
-      fontWeight: "normal",
+    }, /*#__PURE__*/_react.default.createElement(_.Heading, {
+      sx: {
+        fontWeight: 'bold'
+      }
+    })))).toHaveStyleRule('font-weight', theme.fontWeights.bold);
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_ThemeProvider.default, {
       theme: theme
-    }))).toHaveStyleRule('font-weight', theme.fontWeights.normal);
-    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Heading, {
-      fontWeight: "semibold",
+    }, /*#__PURE__*/_react.default.createElement(_.Heading, {
+      sx: {
+        fontWeight: 'normal'
+      }
+    })))).toHaveStyleRule('font-weight', theme.fontWeights.normal);
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_ThemeProvider.default, {
       theme: theme
-    }))).toHaveStyleRule('font-weight', theme.fontWeights.semibold);
-    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Heading, {
-      fontWeight: "light",
+    }, /*#__PURE__*/_react.default.createElement(_.Heading, {
+      sx: {
+        fontWeight: 'semibold'
+      }
+    })))).toHaveStyleRule('font-weight', theme.fontWeights.semibold);
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_ThemeProvider.default, {
       theme: theme
-    }))).toHaveStyleRule('font-weight', theme.fontWeights.light);
+    }, /*#__PURE__*/_react.default.createElement(_.Heading, {
+      sx: {
+        fontWeight: 'light'
+      }
+    })))).toHaveStyleRule('font-weight', theme.fontWeights.light);
   });
   it('respects lineHeight', () => {
-    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Heading, {
-      lineHeight: "normal",
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_ThemeProvider.default, {
       theme: theme
-    }))).toHaveStyleRule('line-height', String(theme.lineHeights.normal));
-    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Heading, {
-      lineHeight: "condensed",
+    }, /*#__PURE__*/_react.default.createElement(_.Heading, {
+      sx: {
+        lineHeight: 'normal'
+      }
+    })))).toHaveStyleRule('line-height', String(theme.lineHeights.normal));
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_ThemeProvider.default, {
       theme: theme
-    }))).toHaveStyleRule('line-height', String(theme.lineHeights.condensed));
-    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Heading, {
-      lineHeight: "condensedUltra",
+    }, /*#__PURE__*/_react.default.createElement(_.Heading, {
+      sx: {
+        lineHeight: 'condensed'
+      }
+    })))).toHaveStyleRule('line-height', String(theme.lineHeights.condensed));
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_ThemeProvider.default, {
       theme: theme
-    }))).toHaveStyleRule('line-height', String(theme.lineHeights.condensedUltra));
+    }, /*#__PURE__*/_react.default.createElement(_.Heading, {
+      sx: {
+        lineHeight: 'condensedUltra'
+      }
+    })))).toHaveStyleRule('line-height', String(theme.lineHeights.condensedUltra));
   });
   it('respects fontFamily="mono"', () => {
-    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Heading, {
-      fontFamily: "mono",
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_ThemeProvider.default, {
       theme: theme
-    }))).toHaveStyleRule('font-family', theme.fonts.mono);
+    }, /*#__PURE__*/_react.default.createElement(_.Heading, {
+      sx: {
+        fontFamily: 'mono'
+      }
+    })))).toHaveStyleRule('font-family', theme.fonts.mono);
   });
   it('renders fontSize', () => {
     for (const fontSize of theme.fontSizes) {
-      expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Heading, {
-        fontSize: fontSize,
+      expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_ThemeProvider.default, {
         theme: theme
-      }))).toHaveStyleRule('font-size', `${fontSize}`);
+      }, /*#__PURE__*/_react.default.createElement(_.Heading, {
+        sx: {
+          fontSize
+        }
+      })))).toHaveStyleRule('font-size', `${fontSize}`);
     }
   });
   it('respects the "fontStyle" prop', () => {
-    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Heading, {
-      fontStyle: "italic"
-    }))).toHaveStyleRule('font-style', 'italic');
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_ThemeProvider.default, {
+      theme: theme
+    }, /*#__PURE__*/_react.default.createElement(_.Heading, {
+      sx: {
+        fontStyle: 'italic'
+      }
+    })))).toHaveStyleRule('font-style', 'italic');
   });
 });

package/lib/__tests__/Heading.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__/Heading.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 _Heading = _interopRequireDefault(require("../Heading"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function shouldAcceptCallWithNoProps() {
+  return /*#__PURE__*/_react.default.createElement(_Heading.default, null);
+}
+
+shouldAcceptCallWithNoProps.displayName = "shouldAcceptCallWithNoProps";
+
+function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return /*#__PURE__*/_react.default.createElement(_Heading.default, {
+    backgroundColor: "thistle"
+  });
+}
+
+shouldNotAcceptSystemProps.displayName = "shouldNotAcceptSystemProps";

package/lib-esm/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-esm/Avatar.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { COMMON, get } from './constants';
+import { get } from './constants';
 import sx from './sx';
 
 function getBorderRadius({
@@ -19,7 +19,7 @@ const Avatar = styled.img.attrs(props => ({
 })).withConfig({
   displayName: "Avatar",
   componentId: "sc-1waaaky-0"
-})(["display:inline-block;overflow:hidden;line-height:", ";vertical-align:middle;border-radius:", ";", ";", ""], get('lineHeights.condensedUltra'), props => getBorderRadius(props), COMMON, sx);
+})(["display:inline-block;overflow:hidden;line-height:", ";vertical-align:middle;border-radius:", ";", ""], get('lineHeights.condensedUltra'), props => getBorderRadius(props), sx);
 Avatar.defaultProps = {
   size: 20,
   alt: '',

package/lib-esm/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-esm/BranchName.js

@@ -1,8 +1,8 @@
 import styled from 'styled-components';
-import { COMMON, get } from './constants';
+import { get } from './constants';
 import sx from './sx';
 const BranchName = styled.a.withConfig({
   displayName: "BranchName",
   componentId: "sc-167ouzm-0"
-})(["display:inline-block;padding:2px 6px;font-size:", ";font-family:", ";color:", ";background-color:", ";border-radius:", ";", ";", ";"], get('fontSizes.0'), get('fonts.mono'), get('colors.fg.muted'), get('colors.accent.subtle'), get('radii.2'), COMMON, sx);
+})(["display:inline-block;padding:2px 6px;font-size:", ";font-family:", ";color:", ";background-color:", ";border-radius:", ";", ";"], get('fontSizes.0'), get('fonts.mono'), get('colors.fg.muted'), get('colors.accent.subtle'), get('radii.2'), sx);
 export default BranchName;

package/lib-esm/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-esm/Details.js

@@ -1,9 +1,8 @@
 import styled from 'styled-components';
-import { COMMON } from './constants';
 import sx from './sx';
 const Details = styled.details.withConfig({
   displayName: "Details",
   componentId: "ssy9qz-0"
-})(["& > summary{list-style:none;}& > summary::-webkit-details-marker{display:none;}", " ", ";"], COMMON, sx);
+})(["& > summary{list-style:none;}& > summary::-webkit-details-marker{display:none;}", ";"], sx);
 Details.displayName = 'Details';
 export default Details;

package/lib-esm/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-esm/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-esm/Heading.js

@@ -1,12 +1,8 @@
 import styled from 'styled-components';
-import { COMMON, get, TYPOGRAPHY } from './constants';
+import { get } from './constants';
 import sx from './sx';
-import theme from './theme';
 const Heading = styled.h2.withConfig({
   displayName: "Heading",
   componentId: "sc-1cjoo9h-0"
-})(["font-weight:", ";font-size:", ";margin:0;", ";", ";", ";"], get('fontWeights.bold'), get('fontSizes.5'), TYPOGRAPHY, COMMON, sx);
-Heading.defaultProps = {
-  theme
-};
+})(["font-weight:", ";font-size:", ";margin:0;", ";"], get('fontWeights.bold'), get('fontSizes.5'), sx);
 export default Heading;

package/lib-esm/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-esm/ProgressBar.js

@@ -1,14 +1,12 @@
-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); }
-
 import React from 'react';
 import styled from 'styled-components';
 import { width } from 'styled-system';
-import { COMMON, get } from './constants';
+import { get } from './constants';
 import sx from './sx';
 const Bar = styled.span.withConfig({
   displayName: "ProgressBar__Bar",
   componentId: "sc-1tiva13-0"
-})(["width:", ";", ""], props => props.progress ? `${props.progress}%` : 0, COMMON);
+})(["width:", ";", ";"], props => props.progress ? `${props.progress}%` : 0, sx);
 const sizeMap = {
   small: '5px',
   large: '10px',
@@ -17,20 +15,18 @@ const sizeMap = {
 const ProgressContainer = styled.span.withConfig({
   displayName: "ProgressBar__ProgressContainer",
   componentId: "sc-1tiva13-1"
-})(["display:", ";overflow:hidden;background-color:", ";border-radius:", ";height:", ";", " ", " ", ";"], props => props.inline ? 'inline-flex' : 'flex', get('colors.border.default'), get('radii.1'), props => sizeMap[props.barSize || 'default'], COMMON, width, sx);
+})(["display:", ";overflow:hidden;background-color:", ";border-radius:", ";height:", ";", " ", ";"], props => props.inline ? 'inline-flex' : 'flex', get('colors.border.default'), get('radii.1'), props => sizeMap[props.barSize || 'default'], width, sx);
 
 function ProgressBar({
   progress,
   bg,
-  theme,
   ...rest
 }) {
-  return /*#__PURE__*/React.createElement(ProgressContainer, _extends({
-    theme: theme
-  }, rest), /*#__PURE__*/React.createElement(Bar, {
+  return /*#__PURE__*/React.createElement(ProgressContainer, rest, /*#__PURE__*/React.createElement(Bar, {
     progress: progress,
-    bg: bg,
-    theme: theme
+    sx: {
+      bg
+    }
   }));
 }
 

package/lib-esm/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-esm/Spinner.js

@@ -2,7 +2,6 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React from 'react';
 import styled from 'styled-components';
-import { COMMON } from './constants';
 import sx from './sx';
 const sizeMap = {
   small: '16px',
@@ -41,6 +40,6 @@ Spinner.displayName = "Spinner";
 const StyledSpinner = styled(Spinner).withConfig({
   displayName: "Spinner__StyledSpinner",
   componentId: "sc-14tspit-0"
-})(["@keyframes rotate-keyframes{100%{transform:rotate(360deg);}}animation:rotate-keyframes 1s linear infinite;", " ", ""], COMMON, sx);
+})(["@keyframes rotate-keyframes{100%{transform:rotate(360deg);}}animation:rotate-keyframes 1s linear infinite;", ""], sx);
 StyledSpinner.displayName = 'Spinner';
 export default StyledSpinner;

package/lib-esm/__tests__/Avatar.test.js

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

package/lib-esm/__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-esm/__tests__/Avatar.types.test.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import Avatar from '../Avatar';
+export function shouldAcceptCallWithNoProps() {
+  return /*#__PURE__*/React.createElement(Avatar, {
+    src: "https://avatars.githubusercontent.com/primer"
+  });
+}
+shouldAcceptCallWithNoProps.displayName = "shouldAcceptCallWithNoProps";
+export function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return /*#__PURE__*/React.createElement(Avatar, {
+    src: "https://avatars.githubusercontent.com/primer",
+    backgroundColor: "thistle"
+  });
+}
+shouldNotAcceptSystemProps.displayName = "shouldNotAcceptSystemProps";

package/lib-esm/__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-esm/__tests__/BranchName.types.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import BranchName from '../BranchName';
+export function shouldAcceptCallWithNoProps() {
+  return /*#__PURE__*/React.createElement(BranchName, null);
+}
+shouldAcceptCallWithNoProps.displayName = "shouldAcceptCallWithNoProps";
+export function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return /*#__PURE__*/React.createElement(BranchName, {
+    backgroundColor: "thistle"
+  });
+}
+shouldNotAcceptSystemProps.displayName = "shouldNotAcceptSystemProps";

package/lib-esm/__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-esm/__tests__/Details.types.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import Details from '../Details';
+export function shouldAcceptCallWithNoProps() {
+  return /*#__PURE__*/React.createElement(Details, null);
+}
+shouldAcceptCallWithNoProps.displayName = "shouldAcceptCallWithNoProps";
+export function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return /*#__PURE__*/React.createElement(Details, {
+    backgroundColor: "thistle"
+  });
+}
+shouldNotAcceptSystemProps.displayName = "shouldNotAcceptSystemProps";