@primer/components 0.0.0-2021103222654 → 0.0.0-202110322387

package/lib/Timeline.js

@@ -11,7 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _Box = _interopRequireDefault(require("./Box"));
+var _ = require(".");
 
 var _constants = require("./constants");
 
@@ -23,26 +23,25 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 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 Timeline = (0, _styledComponents.default)(_Box.default).withConfig({
+const Timeline = _styledComponents.default.div.withConfig({
   displayName: "Timeline",
   componentId: "c4dq2e-0"
 })(["display:flex;flex-direction:column;", " ", ";"], props => props.clipSidebar && (0, _styledComponents.css)([".Timeline-Item:first-child{padding-top:0;}.Timeline-Item:last-child{padding-bottom:0;}"]), _sx.default);
-const TimelineItem = (0, _styledComponents.default)(_Box.default).attrs(props => ({
+
+const TimelineItem = _styledComponents.default.div.attrs(props => ({
   className: (0, _classnames.default)('Timeline-Item', props.className)
 })).withConfig({
   displayName: "Timeline__TimelineItem",
   componentId: "c4dq2e-1"
-})(["display:flex;position:relative;padding:", " 0;margin-left:", ";&::before{position:absolute;top:0;bottom:0;left:0;display:block;width:2px;content:'';background-color:", ";}", " ", ";", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('colors.border.muted'), props => props.condensed && (0, _styledComponents.css)(["padding-top:", ";padding-bottom:0;&:last-child{padding-bottom:", ";}.TimelineItem-Badge{height:16px;margin-top:", ";margin-bottom:", ";color:", ";background-color:", ";border:0;}"], (0, _constants.get)('space.1'), (0, _constants.get)('space.3'), (0, _constants.get)('space.2'), (0, _constants.get)('space.2'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.canvas.default')), _constants.COMMON, _sx.default);
+})(["display:flex;position:relative;padding:", " 0;margin-left:", ";&::before{position:absolute;top:0;bottom:0;left:0;display:block;width:2px;content:'';background-color:", ";}", " ", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('colors.border.muted'), props => props.condensed && (0, _styledComponents.css)(["padding-top:", ";padding-bottom:0;&:last-child{padding-bottom:", ";}.TimelineItem-Badge{height:16px;margin-top:", ";margin-bottom:", ";color:", ";background-color:", ";border:0;}"], (0, _constants.get)('space.1'), (0, _constants.get)('space.3'), (0, _constants.get)('space.2'), (0, _constants.get)('space.2'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.canvas.default')), _sx.default);
 
 const TimelineBadge = props => {
-  return /*#__PURE__*/_react.default.createElement(_Box.default, {
+  return /*#__PURE__*/_react.default.createElement(_.Box, {
     position: "relative",
     zIndex: 1
-  }, /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
+  }, /*#__PURE__*/_react.default.createElement(_.Box, {
     display: "flex",
-    className: (0, _classnames.default)(props.className, 'TimelineItem-Badge'),
+    className: "TimelineItem-Badge",
     flexShrink: 0,
     borderRadius: "50%",
     borderWidth: "2px",
@@ -56,19 +55,23 @@ const TimelineBadge = props => {
     mr: 2,
     ml: "-15px",
     alignItems: "center",
-    justifyContent: "center"
-  }, props), props.children));
+    justifyContent: "center",
+    sx: props.sx
+  }, props.children));
 };
 
 TimelineBadge.displayName = "TimelineBadge";
-const TimelineBody = (0, _styledComponents.default)(_Box.default).withConfig({
+
+const TimelineBody = _styledComponents.default.div.withConfig({
   displayName: "Timeline__TimelineBody",
   componentId: "c4dq2e-2"
 })(["min-width:0;max-width:100%;margin-top:", ";color:", ";flex:auto;font-size:", ";", ";"], (0, _constants.get)('space.1'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('fontSizes.1'), _sx.default);
-const TimelineBreak = (0, _styledComponents.default)(_Box.default).withConfig({
+
+const TimelineBreak = _styledComponents.default.div.withConfig({
   displayName: "Timeline__TimelineBreak",
   componentId: "c4dq2e-3"
 })(["position:relative z-index:1;height:24px;margin:0;margin-bottom:-", ";margin-left:0;background-color:", ";border:0;border-top:", " solid ", ";", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('colors.canvas.default'), (0, _constants.get)('space.1'), (0, _constants.get)('colors.border.default'), _sx.default);
+
 TimelineItem.displayName = 'Timeline.Item';
 TimelineBadge.displayName = 'Timeline.Badge';
 TimelineBody.displayName = 'Timeline.Body';

package/lib-esm/TabNav.d.ts

@@ -1,19 +1,20 @@
 /// <reference types="react" />
 import * as History from 'history';
+import { SystemCommonProps, SystemTypographyProps } from './constants';
 import { SxProp } from './sx';
 import { ComponentProps } from './utils/types';
-declare const TabNavBase: import("styled-components").StyledComponent<"div", any, SxProp, never>;
+declare const TabNavBase: import("styled-components").StyledComponent<"div", any, SystemCommonProps & SxProp, never>;
 export declare type TabNavProps = ComponentProps<typeof TabNavBase>;
 declare function TabNav({ children, 'aria-label': ariaLabel, ...rest }: TabNavProps): JSX.Element;
 declare const TabNavLink: import("styled-components").StyledComponent<"a", any, {
     to?: History.LocationDescriptor<unknown> | undefined;
     selected?: boolean | undefined;
-} & SxProp, never>;
+} & SystemCommonProps & SxProp & SystemTypographyProps, never>;
 export declare type TabNavLinkProps = ComponentProps<typeof TabNavLink>;
 declare const _default: typeof TabNav & {
     Link: import("styled-components").StyledComponent<"a", any, {
         to?: History.LocationDescriptor<unknown> | undefined;
         selected?: boolean | undefined;
-    } & SxProp, never>;
+    } & SystemCommonProps & SxProp & SystemTypographyProps, never>;
 };
 export default _default;

package/lib-esm/TabNav.js

@@ -2,14 +2,14 @@ import classnames from 'classnames'; // eslint-disable-next-line import/no-names
 
 import React from 'react';
 import styled from 'styled-components';
-import { get } from './constants';
+import { COMMON, get } from './constants';
 import sx from './sx';
 const ITEM_CLASS = 'TabNav-item';
 const SELECTED_CLASS = 'selected';
 const TabNavBase = styled.div.withConfig({
   displayName: "TabNav__TabNavBase",
   componentId: "sc-1xod0ow-0"
-})(["margin-top:0;border-bottom:1px solid ", ";", ""], get('colors.border.default'), sx);
+})(["margin-top:0;border-bottom:1px solid ", ";", " ", ""], get('colors.border.default'), COMMON, sx);
 const TabNavBody = styled.nav.withConfig({
   displayName: "TabNav__TabNavBody",
   componentId: "sc-1xod0ow-1"
@@ -32,7 +32,7 @@ const TabNavLink = styled.a.attrs(props => ({
 })).withConfig({
   displayName: "TabNav__TabNavLink",
   componentId: "sc-1xod0ow-2"
-})(["padding:8px 12px;font-size:", ";line-height:20px;color:", ";text-decoration:none;background-color:transparent;border:1px solid transparent;border-bottom:0;&:hover,&:focus{color:", ";text-decoration:none;}&.selected{color:", ";border-color:", ";border-top-right-radius:", ";border-top-left-radius:", ";background-color:", ";}", ";"], get('fontSizes.1'), get('colors.fg.default'), get('colors.fg.default'), get('colors.fg.default'), get('colors.border.default'), get('radii.2'), get('radii.2'), get('colors.canvas.default'), sx);
+})(["padding:8px 12px;font-size:", ";line-height:20px;color:", ";text-decoration:none;background-color:transparent;border:1px solid transparent;border-bottom:0;&:hover,&:focus{color:", ";text-decoration:none;}&.selected{color:", ";border-color:", ";border-top-right-radius:", ";border-top-left-radius:", ";background-color:", ";}", ";", ";"], get('fontSizes.1'), get('colors.fg.default'), get('colors.fg.default'), get('colors.fg.default'), get('colors.border.default'), get('radii.2'), get('radii.2'), get('colors.canvas.default'), COMMON, sx);
 TabNavLink.displayName = 'TabNav.Link';
 export default Object.assign(TabNav, {
   Link: TabNavLink