@primer/components 31.2.1-rc.f73a0f8c → 32.0.0-next.0

package/lib/ActionList2/Group.d.ts

@@ -1,11 +1,37 @@
 import React from 'react';
 import { SxProp } from '../sx';
-import { HeaderProps } from './Header';
 import { ListProps } from './List';
-export declare type GroupProps = HeaderProps & SxProp & {
+import { AriaRole } from '../utils/types';
+export declare type GroupProps = {
+    /**
+     * Style variations. Usage is discretionary.
+     *
+     * - `"filled"` - Superimposed on a background, offset from nearby content
+     * - `"subtle"` - Relatively less offset from nearby content
+     */
+    variant?: 'subtle' | 'filled';
+    /**
+     * Primary text which names a `Group`.
+     */
+    title?: string;
+    /**
+     * Secondary text which provides additional information about a `Group`.
+     */
+    auxiliaryText?: string;
+    /**
+     * The ARIA role describing the function of the list inside `Group` component. `listbox` or `menu` are a common values.
+     */
+    role?: AriaRole;
+} & SxProp & {
+    /**
+     * Whether multiple Items or a single Item can be selected in the Group. Overrides value on ActionList root.
+     */
     selectionVariant?: ListProps['selectionVariant'] | false;
 };
 declare type ContextProps = Pick<GroupProps, 'selectionVariant'>;
 export declare const GroupContext: React.Context<ContextProps>;
 export declare const Group: React.FC<GroupProps>;
+export declare type HeaderProps = Pick<GroupProps, 'variant' | 'title' | 'auxiliaryText'> & {
+    labelId: string;
+};
 export {};

package/lib/ActionList2/Group.js

@@ -7,9 +7,11 @@ exports.Group = exports.GroupContext = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _ssr = require("@react-aria/ssr");
+
 var _Box = _interopRequireDefault(require("../Box"));
 
-var _Header = require("./Header");
+var _List = require("./List");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -21,12 +23,14 @@ exports.GroupContext = GroupContext;
 
 const Group = ({
   title,
-  variant,
+  variant = 'subtle',
   auxiliaryText,
   selectionVariant,
+  role,
   sx = {},
   ...props
 }) => {
+  const labelId = (0, _ssr.useSSRSafeId)();
   return /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
     as: "li",
     sx: {
@@ -37,10 +41,11 @@ const Group = ({
       // hide the ::marker inserted by browser's stylesheet
       ...sx
     }
-  }, props), title && /*#__PURE__*/_react.default.createElement(_Header.Header, {
+  }, props), title && /*#__PURE__*/_react.default.createElement(Header, {
     title: title,
     variant: variant,
-    auxiliaryText: auxiliaryText
+    auxiliaryText: auxiliaryText,
+    labelId: labelId
   }), /*#__PURE__*/_react.default.createElement(GroupContext.Provider, {
     value: {
       selectionVariant
@@ -49,9 +54,53 @@ const Group = ({
     as: "ul",
     sx: {
       paddingInlineStart: 0
-    }
+    },
+    "aria-labelledby": title ? labelId : undefined,
+    role: role
   }, props.children)));
 };
 
 exports.Group = Group;
-Group.displayName = "Group";
+Group.displayName = "Group";
+
+/**
+ * Displays the name and description of a `Group`.
+ *
+ * For visual presentation only. It's hidden from screen readers.
+ */
+const Header = ({
+  variant,
+  title,
+  auxiliaryText,
+  labelId,
+  ...props
+}) => {
+  const {
+    variant: listVariant
+  } = _react.default.useContext(_List.ListContext);
+
+  const styles = {
+    paddingY: '6px',
+    paddingX: listVariant === 'full' ? 2 : 3,
+    fontSize: 0,
+    fontWeight: 'bold',
+    color: 'fg.muted',
+    ...(variant === 'filled' && {
+      backgroundColor: 'canvas.subtle',
+      marginX: 0,
+      marginBottom: 2,
+      borderTop: '1px solid',
+      borderBottom: '1px solid',
+      borderColor: 'neutral.muted'
+    })
+  };
+  return /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
+    sx: styles,
+    role: "presentation",
+    "aria-hidden": "true"
+  }, props), /*#__PURE__*/_react.default.createElement("span", {
+    id: labelId
+  }, title), auxiliaryText && /*#__PURE__*/_react.default.createElement("span", null, auxiliaryText));
+};
+
+Header.displayName = "Header";

package/lib/ActionList2/Group.jsx

@@ -5,21 +5,50 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Group = exports.GroupContext = void 0;
 const react_1 = __importDefault(require("react"));
+const ssr_1 = require("@react-aria/ssr");
 const Box_1 = __importDefault(require("../Box"));
-const Header_1 = require("./Header");
+const List_1 = require("./List");
 exports.GroupContext = react_1.default.createContext({});
-const Group = ({ title, variant, auxiliaryText, selectionVariant, sx = {}, ...props }) => {
+const Group = ({ title, variant = 'subtle', auxiliaryText, selectionVariant, role, sx = {}, ...props }) => {
+    const labelId = ssr_1.useSSRSafeId();
     return (<Box_1.default as="li" sx={{
             '&:not(:first-child)': { marginTop: 2 },
             listStyle: 'none',
             ...sx
         }} {...props}>
-      {title && <Header_1.Header title={title} variant={variant} auxiliaryText={auxiliaryText}/>}
+      {title && <Header title={title} variant={variant} auxiliaryText={auxiliaryText} labelId={labelId}/>}
       <exports.GroupContext.Provider value={{ selectionVariant }}>
-        <Box_1.default as="ul" sx={{ paddingInlineStart: 0 }}>
+        <Box_1.default as="ul" sx={{ paddingInlineStart: 0 }} aria-labelledby={title ? labelId : undefined} role={role}>
           {props.children}
         </Box_1.default>
       </exports.GroupContext.Provider>
     </Box_1.default>);
 };
 exports.Group = Group;
+/**
+ * Displays the name and description of a `Group`.
+ *
+ * For visual presentation only. It's hidden from screen readers.
+ */
+const Header = ({ variant, title, auxiliaryText, labelId, ...props }) => {
+    const { variant: listVariant } = react_1.default.useContext(List_1.ListContext);
+    const styles = {
+        paddingY: '6px',
+        paddingX: listVariant === 'full' ? 2 : 3,
+        fontSize: 0,
+        fontWeight: 'bold',
+        color: 'fg.muted',
+        ...(variant === 'filled' && {
+            backgroundColor: 'canvas.subtle',
+            marginX: 0,
+            marginBottom: 2,
+            borderTop: '1px solid',
+            borderBottom: '1px solid',
+            borderColor: 'neutral.muted'
+        })
+    };
+    return (<Box_1.default sx={styles} role="presentation" aria-hidden="true" {...props}>
+      <span id={labelId}>{title}</span>
+      {auxiliaryText && <span>{auxiliaryText}</span>}
+    </Box_1.default>);
+};

package/lib/ActionList2/List.d.ts

@@ -20,7 +20,7 @@ export declare type ListProps = {
      */
     role?: AriaRole;
 } & SxProp;
-declare type ContextProps = Omit<ListProps, 'sx'>;
+declare type ContextProps = Pick<ListProps, 'variant' | 'selectionVariant' | 'showDividers'>;
 export declare const ListContext: React.Context<ContextProps>;
 export declare const List: PolymorphicForwardRefComponent<"ul", ListProps>;
 export {};

package/lib/Autocomplete/Autocomplete.d.ts

@@ -20,7 +20,7 @@ declare const _default: React.FC<{
     } & {
         as?: string | React.ComponentType<any> | undefined;
         forwardedAs?: string | React.ComponentType<any> | undefined;
-    }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "icon" | "sx" | "variant" | "className" | "disabled" | "contrast"> & {
+    }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "contrast"> & {
         className?: string | undefined;
         icon?: React.ComponentType<{
             className?: string | undefined;
@@ -38,9 +38,9 @@ declare const _default: React.FC<{
         style?: React.CSSProperties | undefined;
         title?: string | undefined;
         block?: boolean | undefined;
-        sx?: import("../sx").BetterSystemStyleObject | undefined;
         variant?: "small" | "large" | undefined;
         role?: React.AriaRole | undefined;
+        sx?: import("../sx").BetterSystemStyleObject | undefined;
         key?: React.Key | null | undefined;
         defaultChecked?: boolean | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
@@ -295,7 +295,7 @@ declare const _default: React.FC<{
         contrast?: boolean | undefined;
     } & {
         theme?: any;
-    }, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "sx" | "variant" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>>, {
+    }, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "variant" | "sx" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>>, {
         as?: React.ComponentType<any> | undefined;
     }>;
     Menu: typeof AutocompleteMenu;

package/lib/Autocomplete/AutocompleteInput.d.ts

@@ -12,7 +12,7 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
 } & {
     as?: string | React.ComponentType<any> | undefined;
     forwardedAs?: string | React.ComponentType<any> | undefined;
-}, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "icon" | "sx" | "variant" | "className" | "disabled" | "contrast"> & {
+}, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "contrast"> & {
     className?: string | undefined;
     icon?: React.ComponentType<{
         className?: string | undefined;
@@ -30,9 +30,9 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
     style?: React.CSSProperties | undefined;
     title?: string | undefined;
     block?: boolean | undefined;
-    sx?: import("../sx").BetterSystemStyleObject | undefined;
     variant?: "small" | "large" | undefined;
     role?: React.AriaRole | undefined;
+    sx?: import("../sx").BetterSystemStyleObject | undefined;
     key?: React.Key | null | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
@@ -287,6 +287,6 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
     contrast?: boolean | undefined;
 } & {
     theme?: any;
-}, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "sx" | "variant" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>>, InternalAutocompleteInputProps>;
+}, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "variant" | "sx" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>>, InternalAutocompleteInputProps>;
 export declare type AutocompleteInputProps = ComponentProps<typeof AutocompleteInput>;
 export default AutocompleteInput;

package/lib/Breadcrumbs.d.ts

@@ -1,24 +1,25 @@
 import * as History from 'history';
 import React from 'react';
-import { SystemCommonProps, SystemFlexProps } from './constants';
 import { SxProp } from './sx';
 import { ComponentProps } from './utils/types';
-declare const BreadcrumbsBase: import("styled-components").StyledComponent<"nav", any, SystemFlexProps & SystemCommonProps & SxProp, never>;
-export declare type BreadcrumbsProps = ComponentProps<typeof BreadcrumbsBase>;
-declare function Breadcrumbs({ className, children, theme, ...rest }: React.PropsWithChildren<BreadcrumbsProps>): JSX.Element;
+declare const BreadcrumbsBase: import("styled-components").StyledComponent<"nav", any, SxProp, never>;
+export declare type BreadcrumbsProps = React.PropsWithChildren<{
+    className?: string;
+} & SxProp>;
+declare function Breadcrumbs({ className, children, sx: sxProp }: React.PropsWithChildren<BreadcrumbsProps>): JSX.Element;
 declare namespace Breadcrumbs {
     var displayName: string;
 }
 declare const BreadcrumbsItem: import("styled-components").StyledComponent<"a", any, {
     to?: History.LocationDescriptor<unknown> | undefined;
     selected?: boolean | undefined;
-} & SystemCommonProps & SxProp, never>;
+} & SxProp, never>;
 export declare type BreadcrumbsItemProps = ComponentProps<typeof BreadcrumbsItem>;
 declare const _default: typeof Breadcrumbs & {
     Item: import("styled-components").StyledComponent<"a", any, {
         to?: History.LocationDescriptor<unknown> | undefined;
         selected?: boolean | undefined;
-    } & SystemCommonProps & SxProp, never>;
+    } & SxProp, never>;
 };
 export default _default;
 /**
@@ -28,7 +29,7 @@ export declare const Breadcrumb: typeof Breadcrumbs & {
     Item: import("styled-components").StyledComponent<"a", any, {
         to?: History.LocationDescriptor<unknown> | undefined;
         selected?: boolean | undefined;
-    } & SystemCommonProps & SxProp, never>;
+    } & SxProp, never>;
 };
 /**
  * @deprecated Use the `BreadcrumbsProps` type instead

package/lib/Breadcrumbs.js

@@ -19,8 +19,6 @@ 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 SELECTED_CLASS = 'selected';
 
 const Wrapper = _styledComponents.default.li.withConfig({
@@ -31,23 +29,20 @@ const Wrapper = _styledComponents.default.li.withConfig({
 const BreadcrumbsBase = _styledComponents.default.nav.withConfig({
   displayName: "Breadcrumbs__BreadcrumbsBase",
   componentId: "hwwoo0-1"
-})(["display:flex;justify-content:space-between;", ";", ";", ";"], _constants.COMMON, _constants.FLEX, _sx.default);
+})(["display:flex;justify-content:space-between;", ";"], _sx.default);
 
 function Breadcrumbs({
   className,
   children,
-  theme,
-  ...rest
+  sx: sxProp
 }) {
-  const wrappedChildren = _react.default.Children.map(children, child => /*#__PURE__*/_react.default.createElement(Wrapper, {
-    theme: theme
-  }, child));
+  const wrappedChildren = _react.default.Children.map(children, child => /*#__PURE__*/_react.default.createElement(Wrapper, null, child));
 
-  return /*#__PURE__*/_react.default.createElement(BreadcrumbsBase, _extends({
+  return /*#__PURE__*/_react.default.createElement(BreadcrumbsBase, {
     className: className,
     "aria-label": "Breadcrumbs",
-    theme: theme
-  }, rest), /*#__PURE__*/_react.default.createElement(_Box.default, {
+    sx: sxProp
+  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
     as: "ol",
     my: 0,
     pl: 0
@@ -63,7 +58,7 @@ const BreadcrumbsItem = _styledComponents.default.a.attrs(props => ({
 })).withConfig({
   displayName: "Breadcrumbs__BreadcrumbsItem",
   componentId: "hwwoo0-2"
-})(["color:", ";display:inline-block;font-size:", ";text-decoration:none;&:hover{text-decoration:underline;}&.selected{color:", ";pointer-events:none;}", " ", ";"], (0, _constants.get)('colors.accent.fg'), (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), _constants.COMMON, _sx.default);
+})(["color:", ";display:inline-block;font-size:", ";text-decoration:none;&:hover{text-decoration:underline;}&.selected{color:", ";pointer-events:none;}", ";"], (0, _constants.get)('colors.accent.fg'), (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), _sx.default);
 
 Breadcrumbs.displayName = 'Breadcrumbs';
 BreadcrumbsItem.displayName = 'Breadcrumbs.Item';

package/lib/Breadcrumbs.jsx

@@ -34,13 +34,11 @@ const Wrapper = styled_components_1.default.li `
 const BreadcrumbsBase = styled_components_1.default.nav `
   display: flex;
   justify-content: space-between;
-  ${constants_1.COMMON};
-  ${constants_1.FLEX};
   ${sx_1.default};
 `;
-function Breadcrumbs({ className, children, theme, ...rest }) {
-    const wrappedChildren = react_1.default.Children.map(children, child => <Wrapper theme={theme}>{child}</Wrapper>);
-    return (<BreadcrumbsBase className={className} aria-label="Breadcrumbs" theme={theme} {...rest}>
+function Breadcrumbs({ className, children, sx: sxProp }) {
+    const wrappedChildren = react_1.default.Children.map(children, child => <Wrapper>{child}</Wrapper>);
+    return (<BreadcrumbsBase className={className} aria-label="Breadcrumbs" sx={sxProp}>
       <Box_1.default as="ol" my={0} pl={0}>
         {wrappedChildren}
       </Box_1.default>
@@ -62,7 +60,6 @@ const BreadcrumbsItem = styled_components_1.default.a.attrs(props => ({
     color: ${constants_1.get('colors.fg.default')};
     pointer-events: none;
   }
-  ${constants_1.COMMON}
   ${sx_1.default};
 `;
 Breadcrumbs.displayName = 'Breadcrumbs';

package/lib/Button/Button.d.ts

@@ -4,9 +4,8 @@ import { ComponentProps } from '../utils/types';
 declare const Button: import("styled-components").StyledComponent<"button", any, {
     as?: string | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
     variant?: "small" | "medium" | "large" | undefined;
-} & import("styled-system").FontSizeProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
+} & {
     color?: string | undefined;
-    fontSize?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     translate?: "yes" | "no" | undefined;
     hidden?: boolean | undefined;
     children?: import("react").ReactNode;
@@ -279,6 +278,6 @@ declare const Button: import("styled-components").StyledComponent<"button", any,
     formTarget?: string | undefined;
 } & {
     theme?: any;
-} & import("styled-system").FontSizeProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("../constants").SystemCommonProps & import("../constants").SystemLayoutProps & SxProp, never>;
+} & SxProp, never>;
 export declare type ButtonProps = ComponentProps<typeof Button>;
 export default Button;

package/lib/Button/Button.js

@@ -11,17 +11,13 @@ var _constants = require("../constants");
 
 var _sx = _interopRequireDefault(require("../sx"));
 
-var _ButtonBase = _interopRequireWildcard(require("./ButtonBase"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _ButtonBase = _interopRequireDefault(require("./ButtonBase"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const Button = (0, _styledComponents.default)(_ButtonBase.default).withConfig({
   displayName: "Button",
   componentId: "xjtz72-0"
-})(["color:", ";background-color:", ";border:1px solid ", ";box-shadow:", ",", "};&:hover{background-color:", ";border-color:", ";}&:focus{border-color:", ";box-shadow:", ";}&:active{background-color:", ";box-shadow:", ";}&:disabled{color:", ";background-color:", ";border-color:", ";}", ";", ";"], (0, _constants.get)('colors.btn.text'), (0, _constants.get)('colors.btn.bg'), (0, _constants.get)('colors.btn.border'), (0, _constants.get)('shadows.btn.shadow'), (0, _constants.get)('shadows.btn.insetShadow'), (0, _constants.get)('colors.btn.hoverBg'), (0, _constants.get)('colors.btn.hoverBorder'), (0, _constants.get)('colors.btn.focusBorder'), (0, _constants.get)('shadows.btn.focusShadow'), (0, _constants.get)('colors.btn.selectedBg'), (0, _constants.get)('shadows.btn.shadowActive'), (0, _constants.get)('colors.primer.fg.disabled'), (0, _constants.get)('colors.btn.bg'), (0, _constants.get)('colors.btn.border'), _ButtonBase.buttonSystemProps, _sx.default);
+})(["color:", ";background-color:", ";border:1px solid ", ";box-shadow:", ",", "};&:hover{background-color:", ";border-color:", ";}&:focus{border-color:", ";box-shadow:", ";}&:active{background-color:", ";box-shadow:", ";}&:disabled{color:", ";background-color:", ";border-color:", ";}", ";"], (0, _constants.get)('colors.btn.text'), (0, _constants.get)('colors.btn.bg'), (0, _constants.get)('colors.btn.border'), (0, _constants.get)('shadows.btn.shadow'), (0, _constants.get)('shadows.btn.insetShadow'), (0, _constants.get)('colors.btn.hoverBg'), (0, _constants.get)('colors.btn.hoverBorder'), (0, _constants.get)('colors.btn.focusBorder'), (0, _constants.get)('shadows.btn.focusShadow'), (0, _constants.get)('colors.btn.selectedBg'), (0, _constants.get)('shadows.btn.shadowActive'), (0, _constants.get)('colors.primer.fg.disabled'), (0, _constants.get)('colors.btn.bg'), (0, _constants.get)('colors.btn.border'), _sx.default);
 var _default = Button;
 exports.default = _default;

package/lib/Button/Button.jsx

@@ -1,23 +1,4 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -25,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const styled_components_1 = __importDefault(require("styled-components"));
 const constants_1 = require("../constants");
 const sx_1 = __importDefault(require("../sx"));
-const ButtonBase_1 = __importStar(require("./ButtonBase"));
+const ButtonBase_1 = __importDefault(require("./ButtonBase"));
 const Button = styled_components_1.default(ButtonBase_1.default) `
   color: ${constants_1.get('colors.btn.text')};
   background-color: ${constants_1.get('colors.btn.bg')};
@@ -54,7 +35,6 @@ const Button = styled_components_1.default(ButtonBase_1.default) `
     border-color: ${constants_1.get('colors.btn.border')};
   }
 
-  ${ButtonBase_1.buttonSystemProps};
   ${sx_1.default};
 `;
 exports.default = Button;

package/lib/Button/ButtonBase.d.ts

@@ -1,12 +1,9 @@
 /// <reference types="react" />
-import { FontSizeProps } from 'styled-system';
-import { SystemCommonProps, SystemLayoutProps } from '../constants';
 import { ComponentProps } from '../utils/types';
-export declare const buttonSystemProps: import("styled-system").styleFn;
-export declare type ButtonSystemProps = FontSizeProps & SystemCommonProps & SystemLayoutProps;
-declare const ButtonBase: import("styled-components").StyledComponent<"button", any, {
-    as?: string | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
-    variant?: "small" | "medium" | "large" | undefined;
-} & FontSizeProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, never>;
+declare type StyledButtonBaseProps = {
+    as?: 'button' | 'a' | 'summary' | 'input' | string | React.ReactType;
+    variant?: 'small' | 'medium' | 'large';
+};
+declare const ButtonBase: import("styled-components").StyledComponent<"button", any, StyledButtonBaseProps, never>;
 export declare type ButtonBaseProps = ComponentProps<typeof ButtonBase>;
 export default ButtonBase;

package/lib/Button/ButtonBase.js

@@ -3,20 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.buttonSystemProps = void 0;
+exports.default = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _styledSystem = require("styled-system");
 
-var _constants = require("../constants");
-
 var _ButtonStyles = _interopRequireDefault(require("./ButtonStyles"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const buttonSystemProps = (0, _styledSystem.compose)(_styledSystem.fontSize, _constants.COMMON, _constants.LAYOUT);
-exports.buttonSystemProps = buttonSystemProps;
 const variants = (0, _styledSystem.variant)({
   variants: {
     small: {

package/lib/Button/ButtonBase.jsx

@@ -3,12 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.buttonSystemProps = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
 const styled_system_1 = require("styled-system");
-const constants_1 = require("../constants");
 const ButtonStyles_1 = __importDefault(require("./ButtonStyles"));
-exports.buttonSystemProps = styled_system_1.compose(styled_system_1.fontSize, constants_1.COMMON, constants_1.LAYOUT);
 const variants = styled_system_1.variant({
     variants: {
         small: {