@primer/components 32.1.1-rc.b4502a34 → 33.0.0-rc.9f3670b7

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";

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/drafts.d.ts

@@ -6,3 +6,4 @@
  */
 export * from './ActionList2';
 export * from './NewButton';
+export * from './ActionMenu2';

package/lib/drafts.js

@@ -28,4 +28,17 @@ Object.keys(_NewButton).forEach(function (key) {
       return _NewButton[key];
     }
   });
+});
+
+var _ActionMenu = require("./ActionMenu2");
+
+Object.keys(_ActionMenu).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ActionMenu[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ActionMenu[key];
+    }
+  });
 });