@primer/components 0.0.0-202110322537 → 0.0.0-2021103231920

package/lib/Breadcrumbs.d.ts

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

package/lib/Breadcrumbs.js

@@ -19,6 +19,8 @@ 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({
@@ -29,20 +31,23 @@ const Wrapper = _styledComponents.default.li.withConfig({
 const BreadcrumbsBase = _styledComponents.default.nav.withConfig({
   displayName: "Breadcrumbs__BreadcrumbsBase",
   componentId: "hwwoo0-1"
-})(["display:flex;justify-content:space-between;", ";"], _sx.default);
+})(["display:flex;justify-content:space-between;", ";", ";", ";"], _constants.COMMON, _constants.FLEX, _sx.default);
 
 function Breadcrumbs({
   className,
   children,
-  sx: sxProp
+  theme,
+  ...rest
 }) {
-  const wrappedChildren = _react.default.Children.map(children, child => /*#__PURE__*/_react.default.createElement(Wrapper, null, child));
+  const wrappedChildren = _react.default.Children.map(children, child => /*#__PURE__*/_react.default.createElement(Wrapper, {
+    theme: theme
+  }, child));
 
-  return /*#__PURE__*/_react.default.createElement(BreadcrumbsBase, {
+  return /*#__PURE__*/_react.default.createElement(BreadcrumbsBase, _extends({
     className: className,
     "aria-label": "Breadcrumbs",
-    sx: sxProp
-  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
+    theme: theme
+  }, rest), /*#__PURE__*/_react.default.createElement(_Box.default, {
     as: "ol",
     my: 0,
     pl: 0
@@ -58,7 +63,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'), _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'), _constants.COMMON, _sx.default);
 
 Breadcrumbs.displayName = 'Breadcrumbs';
 BreadcrumbsItem.displayName = 'Breadcrumbs.Item';

package/lib/Link.d.ts

@@ -1,10 +1,9 @@
-import { SystemCommonProps, SystemTypographyProps } from './constants';
 import { SxProp } from './sx';
 import { ComponentProps } from './utils/types';
 declare const Link: import("styled-components").StyledComponent<"a", any, {
     hoverColor?: string | undefined;
     muted?: boolean | undefined;
     underline?: boolean | undefined;
-} & SystemCommonProps & SxProp & SystemTypographyProps, never>;
+} & SxProp, never>;
 export declare type LinkProps = ComponentProps<typeof Link>;
 export default Link;

package/lib/Link.js

@@ -25,7 +25,7 @@ const hoverColor = (0, _styledSystem.system)({
 const Link = _styledComponents.default.a.withConfig({
   displayName: "Link",
   componentId: "sc-1brdqhf-0"
-})(["color:", ";text-decoration:", ";&:hover{text-decoration:", ";", ";}&:is(button){display:inline-block;padding:0;font-size:inherit;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;}", ";", ";", ";"], props => props.muted ? (0, _constants.get)('colors.fg.muted')(props) : (0, _constants.get)('colors.accent.fg')(props), props => props.underline ? 'underline' : 'none', props => props.muted ? 'none' : 'underline', props => props.hoverColor ? hoverColor : props.muted ? `color: ${(0, _constants.get)('colors.accent.fg')(props)}` : '', _constants.TYPOGRAPHY, _constants.COMMON, _sx.default);
+})(["color:", ";text-decoration:", ";&:hover{text-decoration:", ";", ";}&:is(button){display:inline-block;padding:0;font-size:inherit;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;}", ";"], props => props.muted ? (0, _constants.get)('colors.fg.muted')(props) : (0, _constants.get)('colors.accent.fg')(props), props => props.underline ? 'underline' : 'none', props => props.muted ? 'none' : 'underline', props => props.hoverColor ? hoverColor : props.muted ? `color: ${(0, _constants.get)('colors.accent.fg')(props)}` : '', _sx.default);
 
 var _default = Link;
 exports.default = _default;

package/lib/SideNav.d.ts

@@ -18,7 +18,7 @@ declare const SideNavLink: import("styled-components").StyledComponent<"a", any,
     hoverColor?: string | undefined;
     muted?: boolean | undefined;
     underline?: boolean | undefined;
-} & import("./constants").SystemCommonProps & import("./sx").SxProp & import("./constants").SystemTypographyProps & StyledSideNavLinkProps, never>;
+} & import("./sx").SxProp & StyledSideNavLinkProps, never>;
 export declare type SideNavProps = ComponentProps<typeof SideNav>;
 export declare type SideNavLinkProps = ComponentProps<typeof SideNavLink>;
 declare const _default: string & import("styled-components").StyledComponentBase<typeof SideNavBase, any, {}, never> & import("hoist-non-react-statics").NonReactStatics<typeof SideNavBase, {}> & {
@@ -26,6 +26,6 @@ declare const _default: string & import("styled-components").StyledComponentBase
         hoverColor?: string | undefined;
         muted?: boolean | undefined;
         underline?: boolean | undefined;
-    } & import("./constants").SystemCommonProps & import("./sx").SxProp & import("./constants").SystemTypographyProps & StyledSideNavLinkProps, never>;
+    } & import("./sx").SxProp & StyledSideNavLinkProps, never>;
 };
 export default _default;

package/lib-esm/Breadcrumbs.d.ts

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

package/lib-esm/Breadcrumbs.js

@@ -1,9 +1,11 @@
+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 classnames from 'classnames'; // eslint-disable-next-line import/no-namespace
 
 import React from 'react';
 import styled from 'styled-components';
 import Box from './Box';
-import { get } from './constants';
+import { COMMON, FLEX, get } from './constants';
 import sx from './sx';
 const SELECTED_CLASS = 'selected';
 const Wrapper = styled.li.withConfig({
@@ -13,19 +15,22 @@ const Wrapper = styled.li.withConfig({
 const BreadcrumbsBase = styled.nav.withConfig({
   displayName: "Breadcrumbs__BreadcrumbsBase",
   componentId: "hwwoo0-1"
-})(["display:flex;justify-content:space-between;", ";"], sx);
+})(["display:flex;justify-content:space-between;", ";", ";", ";"], COMMON, FLEX, sx);
 
 function Breadcrumbs({
   className,
   children,
-  sx: sxProp
+  theme,
+  ...rest
 }) {
-  const wrappedChildren = React.Children.map(children, child => /*#__PURE__*/React.createElement(Wrapper, null, child));
-  return /*#__PURE__*/React.createElement(BreadcrumbsBase, {
+  const wrappedChildren = React.Children.map(children, child => /*#__PURE__*/React.createElement(Wrapper, {
+    theme: theme
+  }, child));
+  return /*#__PURE__*/React.createElement(BreadcrumbsBase, _extends({
     className: className,
     "aria-label": "Breadcrumbs",
-    sx: sxProp
-  }, /*#__PURE__*/React.createElement(Box, {
+    theme: theme
+  }, rest), /*#__PURE__*/React.createElement(Box, {
     as: "ol",
     my: 0,
     pl: 0
@@ -40,7 +45,7 @@ const BreadcrumbsItem = styled.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;}", ";"], get('colors.accent.fg'), get('fontSizes.1'), get('colors.fg.default'), sx);
+})(["color:", ";display:inline-block;font-size:", ";text-decoration:none;&:hover{text-decoration:underline;}&.selected{color:", ";pointer-events:none;}", " ", ";"], get('colors.accent.fg'), get('fontSizes.1'), get('colors.fg.default'), COMMON, sx);
 Breadcrumbs.displayName = 'Breadcrumbs';
 BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
 export default Object.assign(Breadcrumbs, {

package/lib-esm/Link.d.ts

@@ -1,10 +1,9 @@
-import { SystemCommonProps, SystemTypographyProps } from './constants';
 import { SxProp } from './sx';
 import { ComponentProps } from './utils/types';
 declare const Link: import("styled-components").StyledComponent<"a", any, {
     hoverColor?: string | undefined;
     muted?: boolean | undefined;
     underline?: boolean | undefined;
-} & SystemCommonProps & SxProp & SystemTypographyProps, never>;
+} & SxProp, never>;
 export declare type LinkProps = ComponentProps<typeof Link>;
 export default Link;

package/lib-esm/Link.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { system } from 'styled-system';
-import { COMMON, get, TYPOGRAPHY } from './constants';
+import { get } from './constants';
 import sx from './sx';
 const hoverColor = system({
   hoverColor: {
@@ -11,5 +11,5 @@ const hoverColor = system({
 const Link = styled.a.withConfig({
   displayName: "Link",
   componentId: "sc-1brdqhf-0"
-})(["color:", ";text-decoration:", ";&:hover{text-decoration:", ";", ";}&:is(button){display:inline-block;padding:0;font-size:inherit;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;}", ";", ";", ";"], props => props.muted ? get('colors.fg.muted')(props) : get('colors.accent.fg')(props), props => props.underline ? 'underline' : 'none', props => props.muted ? 'none' : 'underline', props => props.hoverColor ? hoverColor : props.muted ? `color: ${get('colors.accent.fg')(props)}` : '', TYPOGRAPHY, COMMON, sx);
+})(["color:", ";text-decoration:", ";&:hover{text-decoration:", ";", ";}&:is(button){display:inline-block;padding:0;font-size:inherit;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;}", ";"], props => props.muted ? get('colors.fg.muted')(props) : get('colors.accent.fg')(props), props => props.underline ? 'underline' : 'none', props => props.muted ? 'none' : 'underline', props => props.hoverColor ? hoverColor : props.muted ? `color: ${get('colors.accent.fg')(props)}` : '', sx);
 export default Link;

package/lib-esm/SideNav.d.ts

@@ -18,7 +18,7 @@ declare const SideNavLink: import("styled-components").StyledComponent<"a", any,
     hoverColor?: string | undefined;
     muted?: boolean | undefined;
     underline?: boolean | undefined;
-} & import("./constants").SystemCommonProps & import("./sx").SxProp & import("./constants").SystemTypographyProps & StyledSideNavLinkProps, never>;
+} & import("./sx").SxProp & StyledSideNavLinkProps, never>;
 export declare type SideNavProps = ComponentProps<typeof SideNav>;
 export declare type SideNavLinkProps = ComponentProps<typeof SideNavLink>;
 declare const _default: string & import("styled-components").StyledComponentBase<typeof SideNavBase, any, {}, never> & import("hoist-non-react-statics").NonReactStatics<typeof SideNavBase, {}> & {
@@ -26,6 +26,6 @@ declare const _default: string & import("styled-components").StyledComponentBase
         hoverColor?: string | undefined;
         muted?: boolean | undefined;
         underline?: boolean | undefined;
-    } & import("./constants").SystemCommonProps & import("./sx").SxProp & import("./constants").SystemTypographyProps & StyledSideNavLinkProps, never>;
+    } & import("./sx").SxProp & StyledSideNavLinkProps, never>;
 };
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "0.0.0-202110322537",
+  "version": "0.0.0-2021103231920",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",