@primer/components 0.0.0-2021103221155 → 0.0.0-2021103221942

package/lib/StateLabel.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
+import { SystemCommonProps } from './constants';
 import { SxProp } from './sx';
 import { ComponentProps } from './utils/types';
 declare const StateLabelBase: import("styled-components").StyledComponent<"span", any, {
     variant?: "small" | "normal" | undefined;
     status?: "issueClosed" | "pullClosed" | "pullMerged" | "issueOpened" | "pullOpened" | "draft" | undefined;
-} & SxProp, never>;
+} & SystemCommonProps & SxProp, never>;
 export declare type StateLabelProps = ComponentProps<typeof StateLabelBase>;
 declare function StateLabel({ children, status, variant: variantProp, ...rest }: StateLabelProps): JSX.Element;
 declare namespace StateLabel {

package/lib/StateLabel.js

@@ -79,7 +79,7 @@ const sizeVariants = (0, _styledSystem.variant)({
 const StateLabelBase = _styledComponents.default.span.withConfig({
   displayName: "StateLabel__StateLabelBase",
   componentId: "k4pd9e-0"
-})(["display:inline-flex;align-items:center;font-weight:", ";line-height:16px;color:", ";text-align:center;border-radius:", ";", ";", ";", ";"], (0, _constants.get)('fontWeights.bold'), (0, _constants.get)('colors.canvas.default'), (0, _constants.get)('radii.3'), colorVariants, sizeVariants, _sx.default);
+})(["display:inline-flex;align-items:center;font-weight:", ";line-height:16px;color:", ";text-align:center;border-radius:", ";", ";", ";", ";", ";"], (0, _constants.get)('fontWeights.bold'), (0, _constants.get)('colors.canvas.default'), (0, _constants.get)('radii.3'), colorVariants, sizeVariants, _constants.COMMON, _sx.default);
 
 function StateLabel({
   children,

package/lib/SubNav.d.ts

@@ -1,10 +1,8 @@
 import * as History from 'history';
 import React from 'react';
-import { SystemBorderProps, SystemCommonProps, SystemFlexProps } from './constants';
-import { BoxProps } from './Box';
 import { SxProp } from './sx';
 import { ComponentProps } from './utils/types';
-declare const SubNavBase: import("styled-components").StyledComponent<"nav", any, SystemFlexProps & SystemCommonProps & SxProp, never>;
+declare const SubNavBase: import("styled-components").StyledComponent<"nav", any, SxProp, never>;
 export declare type SubNavProps = {
     actions?: React.ReactNode;
     align?: 'right';
@@ -12,21 +10,17 @@ export declare type SubNavProps = {
     label?: string;
 } & ComponentProps<typeof SubNavBase>;
 declare function SubNav({ actions, className, children, label, ...rest }: SubNavProps): JSX.Element;
-export declare type SubNavLinksProps = BoxProps;
-declare function SubNavLinks(props: SubNavLinksProps): JSX.Element;
-declare namespace SubNavLinks {
-    var displayName: string;
-}
+export declare type SubNavLinksProps = SxProp;
 declare const SubNavLink: import("styled-components").StyledComponent<"a", any, {
     to?: History.LocationDescriptor<unknown> | undefined;
     selected?: boolean | undefined;
-} & SystemCommonProps & SxProp & SystemBorderProps, never>;
+} & SxProp, never>;
 export declare type SubNavLinkProps = ComponentProps<typeof SubNavLink>;
 declare const _default: typeof SubNav & {
     Link: import("styled-components").StyledComponent<"a", any, {
         to?: History.LocationDescriptor<unknown> | undefined;
         selected?: boolean | undefined;
-    } & SystemCommonProps & SxProp & SystemBorderProps, never>;
-    Links: typeof SubNavLinks;
+    } & SxProp, never>;
+    Links: import("styled-components").StyledComponent<"div", any, SxProp, never>;
 };
 export default _default;

package/lib/SubNav.js

@@ -13,8 +13,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _constants = require("./constants");
 
-var _Box = _interopRequireDefault(require("./Box"));
-
 var _sx = _interopRequireDefault(require("./sx"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -27,7 +25,7 @@ const SELECTED_CLASS = 'selected';
 const SubNavBase = _styledComponents.default.nav.withConfig({
   displayName: "SubNav__SubNavBase",
   componentId: "f7w0xa-0"
-})(["display:flex;justify-content:space-between;.SubNav-body{display:flex;margin-bottom:-1px;> *{margin-left:", ";}> *:first-child{margin-left:0;}}.SubNav-actions{align-self:center;}", ";", ";", ";"], (0, _constants.get)('space.2'), _constants.COMMON, _constants.FLEX, _sx.default);
+})(["display:flex;justify-content:space-between;.SubNav-body{display:flex;margin-bottom:-1px;> *{margin-left:", ";}> *:first-child{margin-left:0;}}.SubNav-actions{align-self:center;}", ";"], (0, _constants.get)('space.2'), _sx.default);
 
 function SubNav({
   actions,
@@ -49,21 +47,18 @@ function SubNav({
 
 SubNav.displayName = "SubNav";
 
-function SubNavLinks(props) {
-  return /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
-    display: "flex"
-  }, props));
-}
-
-SubNavLinks.displayName = "SubNavLinks";
+const SubNavLinks = _styledComponents.default.div.withConfig({
+  displayName: "SubNav__SubNavLinks",
+  componentId: "f7w0xa-1"
+})(["display:flex;", ";"], _sx.default);
 
 const SubNavLink = _styledComponents.default.a.attrs(props => ({
   activeClassName: typeof props.to === 'string' ? 'selected' : '',
   className: (0, _classnames.default)(ITEM_CLASS, props.selected && SELECTED_CLASS, props.className)
 })).withConfig({
   displayName: "SubNav__SubNavLink",
-  componentId: "f7w0xa-1"
-})(["padding-left:", ";padding-right:", ";font-weight:", ";font-size:", ";line-height:20px;min-height:34px;color:", ";text-align:center;text-decoration:none;border-top:1px solid ", ";border-bottom:1px solid ", ";border-right:1px solid ", ";display:flex;align-items:center;&:first-of-type{border-top-left-radius:", ";border-bottom-left-radius:", ";border-left:1px solid ", ";}&:last-of-type{border-top-right-radius:", ";border-bottom-right-radius:", ";}&:hover,&:focus{text-decoration:none;background-color:", ";transition:0.2s ease;.SubNav-octicon{color:", ";}}&.selected{color:", ";background-color:", ";border-color:", ";.SubNav-octicon{color:", ";}}", ";", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('fontWeights.semibold'), (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.canvas.subtle'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.fg.onEmphasis'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('colors.fg.onEmphasis'), _constants.COMMON, _sx.default);
+  componentId: "f7w0xa-2"
+})(["padding-left:", ";padding-right:", ";font-weight:", ";font-size:", ";line-height:20px;min-height:34px;color:", ";text-align:center;text-decoration:none;border-top:1px solid ", ";border-bottom:1px solid ", ";border-right:1px solid ", ";display:flex;align-items:center;&:first-of-type{border-top-left-radius:", ";border-bottom-left-radius:", ";border-left:1px solid ", ";}&:last-of-type{border-top-right-radius:", ";border-bottom-right-radius:", ";}&:hover,&:focus{text-decoration:none;background-color:", ";transition:0.2s ease;.SubNav-octicon{color:", ";}}&.selected{color:", ";background-color:", ";border-color:", ";.SubNav-octicon{color:", ";}}", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('fontWeights.semibold'), (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.canvas.subtle'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.fg.onEmphasis'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('colors.fg.onEmphasis'), _sx.default);
 
 SubNavLink.displayName = 'SubNav.Link';
 SubNavLinks.displayName = 'SubNav.Links';

package/lib-esm/StateLabel.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
+import { SystemCommonProps } from './constants';
 import { SxProp } from './sx';
 import { ComponentProps } from './utils/types';
 declare const StateLabelBase: import("styled-components").StyledComponent<"span", any, {
     variant?: "small" | "normal" | undefined;
     status?: "issueClosed" | "pullClosed" | "pullMerged" | "issueOpened" | "pullOpened" | "draft" | undefined;
-} & SxProp, never>;
+} & SystemCommonProps & SxProp, never>;
 export declare type StateLabelProps = ComponentProps<typeof StateLabelBase>;
 declare function StateLabel({ children, status, variant: variantProp, ...rest }: StateLabelProps): JSX.Element;
 declare namespace StateLabel {

package/lib-esm/StateLabel.js

@@ -4,7 +4,7 @@ import { GitMergeIcon, GitPullRequestIcon, IssueClosedIcon, IssueOpenedIcon, Que
 import React from 'react';
 import styled from 'styled-components';
 import { variant } from 'styled-system';
-import { get } from './constants';
+import { COMMON, get } from './constants';
 import StyledOcticon from './StyledOcticon';
 import sx from './sx';
 const octiconMap = {
@@ -62,7 +62,7 @@ const sizeVariants = variant({
 const StateLabelBase = styled.span.withConfig({
   displayName: "StateLabel__StateLabelBase",
   componentId: "k4pd9e-0"
-})(["display:inline-flex;align-items:center;font-weight:", ";line-height:16px;color:", ";text-align:center;border-radius:", ";", ";", ";", ";"], get('fontWeights.bold'), get('colors.canvas.default'), get('radii.3'), colorVariants, sizeVariants, sx);
+})(["display:inline-flex;align-items:center;font-weight:", ";line-height:16px;color:", ";text-align:center;border-radius:", ";", ";", ";", ";", ";"], get('fontWeights.bold'), get('colors.canvas.default'), get('radii.3'), colorVariants, sizeVariants, COMMON, sx);
 
 function StateLabel({
   children,

package/lib-esm/SubNav.d.ts

@@ -1,10 +1,8 @@
 import * as History from 'history';
 import React from 'react';
-import { SystemBorderProps, SystemCommonProps, SystemFlexProps } from './constants';
-import { BoxProps } from './Box';
 import { SxProp } from './sx';
 import { ComponentProps } from './utils/types';
-declare const SubNavBase: import("styled-components").StyledComponent<"nav", any, SystemFlexProps & SystemCommonProps & SxProp, never>;
+declare const SubNavBase: import("styled-components").StyledComponent<"nav", any, SxProp, never>;
 export declare type SubNavProps = {
     actions?: React.ReactNode;
     align?: 'right';
@@ -12,21 +10,17 @@ export declare type SubNavProps = {
     label?: string;
 } & ComponentProps<typeof SubNavBase>;
 declare function SubNav({ actions, className, children, label, ...rest }: SubNavProps): JSX.Element;
-export declare type SubNavLinksProps = BoxProps;
-declare function SubNavLinks(props: SubNavLinksProps): JSX.Element;
-declare namespace SubNavLinks {
-    var displayName: string;
-}
+export declare type SubNavLinksProps = SxProp;
 declare const SubNavLink: import("styled-components").StyledComponent<"a", any, {
     to?: History.LocationDescriptor<unknown> | undefined;
     selected?: boolean | undefined;
-} & SystemCommonProps & SxProp & SystemBorderProps, never>;
+} & SxProp, never>;
 export declare type SubNavLinkProps = ComponentProps<typeof SubNavLink>;
 declare const _default: typeof SubNav & {
     Link: import("styled-components").StyledComponent<"a", any, {
         to?: History.LocationDescriptor<unknown> | undefined;
         selected?: boolean | undefined;
-    } & SystemCommonProps & SxProp & SystemBorderProps, never>;
-    Links: typeof SubNavLinks;
+    } & SxProp, never>;
+    Links: import("styled-components").StyledComponent<"div", any, SxProp, never>;
 };
 export default _default;

package/lib-esm/SubNav.js

@@ -4,15 +4,14 @@ import classnames from 'classnames'; // eslint-disable-next-line import/no-names
 
 import React from 'react';
 import styled from 'styled-components';
-import { COMMON, FLEX, get } from './constants';
-import Box from './Box';
+import { get } from './constants';
 import sx from './sx';
 const ITEM_CLASS = 'SubNav-item';
 const SELECTED_CLASS = 'selected';
 const SubNavBase = styled.nav.withConfig({
   displayName: "SubNav__SubNavBase",
   componentId: "f7w0xa-0"
-})(["display:flex;justify-content:space-between;.SubNav-body{display:flex;margin-bottom:-1px;> *{margin-left:", ";}> *:first-child{margin-left:0;}}.SubNav-actions{align-self:center;}", ";", ";", ";"], get('space.2'), COMMON, FLEX, sx);
+})(["display:flex;justify-content:space-between;.SubNav-body{display:flex;margin-bottom:-1px;> *{margin-left:", ";}> *:first-child{margin-left:0;}}.SubNav-actions{align-self:center;}", ";"], get('space.2'), sx);
 
 function SubNav({
   actions,
@@ -33,21 +32,17 @@ function SubNav({
 }
 
 SubNav.displayName = "SubNav";
-
-function SubNavLinks(props) {
-  return /*#__PURE__*/React.createElement(Box, _extends({
-    display: "flex"
-  }, props));
-}
-
-SubNavLinks.displayName = "SubNavLinks";
+const SubNavLinks = styled.div.withConfig({
+  displayName: "SubNav__SubNavLinks",
+  componentId: "f7w0xa-1"
+})(["display:flex;", ";"], sx);
 const SubNavLink = styled.a.attrs(props => ({
   activeClassName: typeof props.to === 'string' ? 'selected' : '',
   className: classnames(ITEM_CLASS, props.selected && SELECTED_CLASS, props.className)
 })).withConfig({
   displayName: "SubNav__SubNavLink",
-  componentId: "f7w0xa-1"
-})(["padding-left:", ";padding-right:", ";font-weight:", ";font-size:", ";line-height:20px;min-height:34px;color:", ";text-align:center;text-decoration:none;border-top:1px solid ", ";border-bottom:1px solid ", ";border-right:1px solid ", ";display:flex;align-items:center;&:first-of-type{border-top-left-radius:", ";border-bottom-left-radius:", ";border-left:1px solid ", ";}&:last-of-type{border-top-right-radius:", ";border-bottom-right-radius:", ";}&:hover,&:focus{text-decoration:none;background-color:", ";transition:0.2s ease;.SubNav-octicon{color:", ";}}&.selected{color:", ";background-color:", ";border-color:", ";.SubNav-octicon{color:", ";}}", ";", ";"], get('space.3'), get('space.3'), get('fontWeights.semibold'), get('fontSizes.1'), get('colors.fg.default'), get('colors.border.default'), get('colors.border.default'), get('colors.border.default'), get('radii.2'), get('radii.2'), get('colors.border.default'), get('radii.2'), get('radii.2'), get('colors.canvas.subtle'), get('colors.fg.muted'), get('colors.fg.onEmphasis'), get('colors.accent.emphasis'), get('colors.accent.emphasis'), get('colors.fg.onEmphasis'), COMMON, sx);
+  componentId: "f7w0xa-2"
+})(["padding-left:", ";padding-right:", ";font-weight:", ";font-size:", ";line-height:20px;min-height:34px;color:", ";text-align:center;text-decoration:none;border-top:1px solid ", ";border-bottom:1px solid ", ";border-right:1px solid ", ";display:flex;align-items:center;&:first-of-type{border-top-left-radius:", ";border-bottom-left-radius:", ";border-left:1px solid ", ";}&:last-of-type{border-top-right-radius:", ";border-bottom-right-radius:", ";}&:hover,&:focus{text-decoration:none;background-color:", ";transition:0.2s ease;.SubNav-octicon{color:", ";}}&.selected{color:", ";background-color:", ";border-color:", ";.SubNav-octicon{color:", ";}}", ";"], get('space.3'), get('space.3'), get('fontWeights.semibold'), get('fontSizes.1'), get('colors.fg.default'), get('colors.border.default'), get('colors.border.default'), get('colors.border.default'), get('radii.2'), get('radii.2'), get('colors.border.default'), get('radii.2'), get('radii.2'), get('colors.canvas.subtle'), get('colors.fg.muted'), get('colors.fg.onEmphasis'), get('colors.accent.emphasis'), get('colors.accent.emphasis'), get('colors.fg.onEmphasis'), sx);
 SubNavLink.displayName = 'SubNav.Link';
 SubNavLinks.displayName = 'SubNav.Links';
 export default Object.assign(SubNav, {

package/package.json

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