@primer/components 0.0.0-2021113144816 → 0.0.0-2021113174023

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

@@ -83,8 +83,8 @@ const sizeVariants = (0, _styledSystem.variant)({
 
 const StateLabelBase = _styledComponents.default.span.withConfig({
   displayName: "StateLabel__StateLabelBase",
-  componentId: "sc-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);
+  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, _constants.COMMON, _sx.default);
 
 function StateLabel({
   children,
@@ -98,11 +98,10 @@ function StateLabel({
   return /*#__PURE__*/_react.default.createElement(StateLabelBase, _extends({}, rest, {
     variant: variantProp,
     status: status
-  }), status && /*#__PURE__*/_react.default.createElement(_StyledOcticon.default, _extends({}, octiconProps, {
-    icon: octiconMap[status] || _octiconsReact.QuestionIcon,
-    sx: {
-      mr: 1
-    }
+  }), status && /*#__PURE__*/_react.default.createElement(_StyledOcticon.default, _extends({
+    mr: 1
+  }, octiconProps, {
+    icon: octiconMap[status] || _octiconsReact.QuestionIcon
   })), children);
 }
 

package/lib/StateLabel.jsx

@@ -0,0 +1,94 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const octicons_react_1 = require("@primer/octicons-react");
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const styled_system_1 = require("styled-system");
+const constants_1 = require("./constants");
+const StyledOcticon_1 = __importDefault(require("./StyledOcticon"));
+const sx_1 = __importDefault(require("./sx"));
+const octiconMap = {
+    issueOpened: octicons_react_1.IssueOpenedIcon,
+    pullOpened: octicons_react_1.GitPullRequestIcon,
+    issueClosed: octicons_react_1.IssueClosedIcon,
+    pullClosed: octicons_react_1.GitPullRequestIcon,
+    pullMerged: octicons_react_1.GitMergeIcon,
+    draft: octicons_react_1.GitPullRequestIcon,
+    issueDraft: octicons_react_1.IssueDraftIcon
+};
+const colorVariants = styled_system_1.variant({
+    prop: 'status',
+    variants: {
+        issueClosed: {
+            backgroundColor: 'danger.emphasis',
+            color: 'fg.onEmphasis'
+        },
+        pullClosed: {
+            backgroundColor: 'danger.emphasis',
+            color: 'fg.onEmphasis'
+        },
+        pullMerged: {
+            backgroundColor: 'done.emphasis',
+            color: 'fg.onEmphasis'
+        },
+        issueOpened: {
+            backgroundColor: 'success.emphasis',
+            color: 'fg.onEmphasis'
+        },
+        pullOpened: {
+            backgroundColor: 'success.emphasis',
+            color: 'fg.onEmphasis'
+        },
+        draft: {
+            backgroundColor: 'neutral.emphasis',
+            color: 'fg.onEmphasis'
+        },
+        issueDraft: {
+            backgroundColor: 'neutral.emphasis',
+            color: 'fg.onEmphasis'
+        }
+    }
+});
+const sizeVariants = styled_system_1.variant({
+    prop: 'variant',
+    variants: {
+        small: {
+            paddingX: 2,
+            paddingY: 1,
+            fontSize: 0
+        },
+        normal: {
+            paddingX: '12px',
+            paddingY: 2,
+            fontSize: 1
+        }
+    }
+});
+const StateLabelBase = styled_components_1.default.span `
+  display: inline-flex;
+  align-items: center;
+  font-weight: ${constants_1.get('fontWeights.bold')};
+  line-height: 16px;
+  color: ${constants_1.get('colors.canvas.default')};
+  text-align: center;
+  border-radius: ${constants_1.get('radii.3')};
+  ${colorVariants};
+  ${sizeVariants};
+  ${constants_1.COMMON};
+  ${sx_1.default};
+`;
+function StateLabel({ children, status, variant: variantProp, ...rest }) {
+    const octiconProps = variantProp === 'small' ? { width: '1em' } : {};
+    return (<StateLabelBase {...rest} variant={variantProp} status={status}>
+      {/* eslint-disable-next-line @typescript-eslint/no-unnecessary-condition */}
+      {status && <StyledOcticon_1.default mr={1} {...octiconProps} icon={octiconMap[status] || octicons_react_1.QuestionIcon}/>}
+      {children}
+    </StateLabelBase>);
+}
+StateLabel.defaultProps = {
+    variant: 'normal'
+};
+exports.default = StateLabel;

package/lib/StyledOcticon.d.ts

@@ -1,11 +1,12 @@
 import { IconProps } from '@primer/octicons-react';
 import React from 'react';
+import { SystemCommonProps } from './constants';
 import { SxProp } from './sx';
 import { ComponentProps } from './utils/types';
 declare type OcticonProps = {
     icon: React.ElementType;
 } & IconProps;
 declare function Octicon({ icon: IconComponent, ...rest }: OcticonProps): JSX.Element;
-declare const StyledOcticon: import("styled-components").StyledComponent<typeof Octicon, any, SxProp, never>;
+declare const StyledOcticon: import("styled-components").StyledComponent<typeof Octicon, any, SystemCommonProps & SxProp, never>;
 export declare type StyledOcticonProps = ComponentProps<typeof StyledOcticon>;
 export default StyledOcticon;

package/lib/StyledOcticon.js

@@ -9,6 +9,8 @@ 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 }; }
@@ -23,8 +25,8 @@ function Octicon({
 Octicon.displayName = "Octicon";
 const StyledOcticon = (0, _styledComponents.default)(Octicon).withConfig({
   displayName: "StyledOcticon",
-  componentId: "sc-uhnt7w-0"
-})(["", ""], _sx.default);
+  componentId: "uhnt7w-0"
+})(["", " ", ""], _constants.COMMON, _sx.default);
 StyledOcticon.defaultProps = {
   size: 16
 };

package/lib/StyledOcticon.jsx

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const constants_1 = require("./constants");
+const sx_1 = __importDefault(require("./sx"));
+function Octicon({ icon: IconComponent, ...rest }) {
+    return <IconComponent {...rest}/>;
+}
+const StyledOcticon = styled_components_1.default(Octicon) `
+  ${constants_1.COMMON}
+  ${sx_1.default}
+`;
+StyledOcticon.defaultProps = {
+    size: 16
+};
+exports.default = StyledOcticon;

package/lib/SubNav.d.ts

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

package/lib/SubNav.js

@@ -13,6 +13,8 @@ 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 }; }
@@ -24,8 +26,8 @@ const SELECTED_CLASS = 'selected';
 
 const SubNavBase = _styledComponents.default.nav.withConfig({
   displayName: "SubNav__SubNavBase",
-  componentId: "sc-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'), _sx.default);
+  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);
 
 function SubNav({
   actions,
@@ -47,18 +49,21 @@ function SubNav({
 
 SubNav.displayName = "SubNav";
 
-const SubNavLinks = _styledComponents.default.div.withConfig({
-  displayName: "SubNav__SubNavLinks",
-  componentId: "sc-f7w0xa-1"
-})(["display:flex;", ";"], _sx.default);
+function SubNavLinks(props) {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
+    display: "flex"
+  }, props));
+}
+
+SubNavLinks.displayName = "SubNavLinks";
 
 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: "sc-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);
+  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);
 
 SubNavLink.displayName = 'SubNav.Link';
 SubNavLinks.displayName = 'SubNav.Links';

package/lib/SubNav.jsx

@@ -0,0 +1,104 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const constants_1 = require("./constants");
+const Box_1 = __importDefault(require("./Box"));
+const sx_1 = __importDefault(require("./sx"));
+const ITEM_CLASS = 'SubNav-item';
+const SELECTED_CLASS = 'selected';
+const SubNavBase = styled_components_1.default.nav `
+  display: flex;
+  justify-content: space-between;
+
+  .SubNav-body {
+    display: flex;
+    margin-bottom: -1px;
+
+    > * {
+      margin-left: ${constants_1.get('space.2')};
+    }
+
+    > *:first-child {
+      margin-left: 0;
+    }
+  }
+
+  .SubNav-actions {
+    align-self: center;
+  }
+
+  ${constants_1.COMMON};
+  ${constants_1.FLEX};
+  ${sx_1.default};
+`;
+function SubNav({ actions, className, children, label, ...rest }) {
+    const classes = classnames_1.default(className, 'SubNav');
+    return (<SubNavBase className={classes} aria-label={label} {...rest}>
+      <div className="SubNav-body">{children}</div>
+      {actions && <div className="SubNav-actions">{actions}</div>}
+    </SubNavBase>);
+}
+function SubNavLinks(props) {
+    return <Box_1.default display="flex" {...props}/>;
+}
+const SubNavLink = styled_components_1.default.a.attrs(props => ({
+    activeClassName: typeof props.to === 'string' ? 'selected' : '',
+    className: classnames_1.default(ITEM_CLASS, props.selected && SELECTED_CLASS, props.className)
+})) `
+  padding-left: ${constants_1.get('space.3')};
+  padding-right: ${constants_1.get('space.3')};
+  font-weight: ${constants_1.get('fontWeights.semibold')};
+  font-size: ${constants_1.get('fontSizes.1')};
+  line-height: 20px; //custom value for SubNav
+  min-height: 34px; //custom value for SubNav
+  color: ${constants_1.get('colors.fg.default')};
+  text-align: center;
+  text-decoration: none;
+  border-top: 1px solid ${constants_1.get('colors.border.default')};
+  border-bottom: 1px solid ${constants_1.get('colors.border.default')};
+  border-right: 1px solid ${constants_1.get('colors.border.default')};
+  display: flex;
+  align-items: center;
+
+  &:first-of-type {
+    border-top-left-radius: ${constants_1.get('radii.2')};
+    border-bottom-left-radius: ${constants_1.get('radii.2')};
+    border-left: 1px solid ${constants_1.get('colors.border.default')};
+  }
+
+  &:last-of-type {
+    border-top-right-radius: ${constants_1.get('radii.2')};
+    border-bottom-right-radius: ${constants_1.get('radii.2')};
+  }
+
+  &:hover,
+  &:focus {
+    text-decoration: none;
+    background-color: ${constants_1.get('colors.canvas.subtle')};
+    transition: 0.2s ease;
+
+    .SubNav-octicon {
+      color: ${constants_1.get('colors.fg.muted')};
+    }
+  }
+
+  &.selected {
+    color: ${constants_1.get('colors.fg.onEmphasis')};
+    background-color: ${constants_1.get('colors.accent.emphasis')};
+    border-color: ${constants_1.get('colors.accent.emphasis')};
+    .SubNav-octicon {
+      color: ${constants_1.get('colors.fg.onEmphasis')};
+    }
+  }
+
+  ${constants_1.COMMON};
+  ${sx_1.default};
+`;
+SubNavLink.displayName = 'SubNav.Link';
+SubNavLinks.displayName = 'SubNav.Links';
+exports.default = Object.assign(SubNav, { Link: SubNavLink, Links: SubNavLinks });

package/lib/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/TabNav.js

@@ -23,7 +23,7 @@ const SELECTED_CLASS = 'selected';
 const TabNavBase = _styledComponents.default.div.withConfig({
   displayName: "TabNav__TabNavBase",
   componentId: "sc-1xod0ow-0"
-})(["margin-top:0;border-bottom:1px solid ", ";", ""], (0, _constants.get)('colors.border.default'), _sx.default);
+})(["margin-top:0;border-bottom:1px solid ", ";", " ", ""], (0, _constants.get)('colors.border.default'), _constants.COMMON, _sx.default);
 
 const TabNavBody = _styledComponents.default.nav.withConfig({
   displayName: "TabNav__TabNavBody",
@@ -48,7 +48,7 @@ const TabNavLink = _styledComponents.default.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:", ";}", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.canvas.default'), _sx.default);
+})(["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:", ";}", ";", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.canvas.default'), _constants.COMMON, _sx.default);
 
 TabNavLink.displayName = 'TabNav.Link';
 

package/lib/TabNav.jsx

@@ -0,0 +1,60 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const constants_1 = require("./constants");
+const sx_1 = __importDefault(require("./sx"));
+const ITEM_CLASS = 'TabNav-item';
+const SELECTED_CLASS = 'selected';
+const TabNavBase = styled_components_1.default.div `
+  margin-top: 0;
+  border-bottom: 1px solid ${constants_1.get('colors.border.default')};
+  ${constants_1.COMMON}
+  ${sx_1.default}
+`;
+const TabNavBody = styled_components_1.default.nav `
+  display: flex;
+  margin-bottom: -1px;
+  overflow: auto;
+`;
+function TabNav({ children, 'aria-label': ariaLabel, ...rest }) {
+    return (<TabNavBase {...rest}>
+      <TabNavBody aria-label={ariaLabel}>{children}</TabNavBody>
+    </TabNavBase>);
+}
+const TabNavLink = styled_components_1.default.a.attrs(props => ({
+    activeClassName: typeof props.to === 'string' ? 'selected' : '',
+    className: classnames_1.default(ITEM_CLASS, props.selected && SELECTED_CLASS, props.className)
+})) `
+  padding: 8px 12px;
+  font-size: ${constants_1.get('fontSizes.1')};
+  line-height: 20px;
+  color: ${constants_1.get('colors.fg.default')};
+  text-decoration: none;
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-bottom: 0;
+
+  &:hover,
+  &:focus {
+    color: ${constants_1.get('colors.fg.default')};
+    text-decoration: none;
+  }
+
+  &.selected {
+    color: ${constants_1.get('colors.fg.default')};
+    border-color: ${constants_1.get('colors.border.default')};
+    border-top-right-radius: ${constants_1.get('radii.2')};
+    border-top-left-radius: ${constants_1.get('radii.2')};
+    background-color: ${constants_1.get('colors.canvas.default')};
+  }
+
+  ${constants_1.COMMON};
+  ${sx_1.default};
+`;
+TabNavLink.displayName = 'TabNav.Link';
+exports.default = Object.assign(TabNav, { Link: TabNavLink });

package/lib/Text.jsx

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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 Text = styled_components_1.default.span `
+  ${constants_1.TYPOGRAPHY};
+  ${constants_1.COMMON};
+  ${sx_1.default};
+`;
+exports.default = Text;

package/lib/TextInput.jsx

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const _UnstyledTextInput_1 = __importDefault(require("./_UnstyledTextInput"));
+const _TextInputWrapper_1 = __importDefault(require("./_TextInputWrapper"));
+// using forwardRef is important so that other components (ex. SelectMenu) can autofocus the input
+const TextInput = react_1.default.forwardRef(({ icon: IconComponent, block, className, contrast, disabled, sx: sxProp, theme, width: widthProp, minWidth: minWidthProp, maxWidth: maxWidthProp, variant: variantProp, ...inputProps }, ref) => {
+    // this class is necessary to style FilterSearch, plz no touchy!
+    const wrapperClasses = classnames_1.default(className, 'TextInput-wrapper');
+    return (<_TextInputWrapper_1.default block={block} className={wrapperClasses} contrast={contrast} disabled={disabled} hasIcon={!!IconComponent} sx={sxProp} theme={theme} width={widthProp} minWidth={minWidthProp} maxWidth={maxWidthProp} variant={variantProp}>
+        {IconComponent && <IconComponent className="TextInput-icon"/>}
+        <_UnstyledTextInput_1.default ref={ref} disabled={disabled} {...inputProps}/>
+      </_TextInputWrapper_1.default>);
+});
+TextInput.defaultProps = {
+    type: 'text'
+};
+TextInput.displayName = 'TextInput';
+exports.default = TextInput;

package/lib/TextInputWithTokens.d.ts

@@ -39,20 +39,18 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<{
 } & Pick<Omit<Pick<{
     [x: string]: any;
     [x: number]: any;
-    [x: symbol]: any;
 } & {
     theme?: any;
 } & {
     as?: string | React.ComponentType<any> | undefined;
     forwardedAs?: string | React.ComponentType<any> | undefined;
-}, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "contrast"> & {
+}, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "icon" | "sx" | "variant" | "className" | "disabled" | "contrast"> & {
     className?: string | undefined;
     icon?: React.ComponentType<{
         className?: string | undefined;
     }> | undefined;
 } & Pick<{
     color?: string | undefined;
-    property?: string | undefined;
     maxWidth?: import("styled-system").ResponsiveValue<import("csstype").Property.MaxWidth<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     minWidth?: import("styled-system").ResponsiveValue<import("csstype").Property.MinWidth<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     translate?: "yes" | "no" | undefined;
@@ -64,9 +62,9 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<{
     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;
@@ -88,6 +86,7 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<{
     datatype?: string | undefined;
     inlist?: any;
     prefix?: string | undefined;
+    property?: string | undefined;
     resource?: string | undefined;
     typeof?: string | undefined;
     vocab?: string | undefined;
@@ -315,13 +314,12 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<{
     onAnimationIterationCapture?: React.AnimationEventHandler<HTMLSpanElement> | undefined;
     onTransitionEnd?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
     onTransitionEndCapture?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
-    css?: import("@emotion/core").InterpolationWithTheme<any>;
     disabled?: boolean | undefined;
     hasIcon?: boolean | undefined;
     contrast?: boolean | undefined;
 } & {
     theme?: any;
-}, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "variant" | "sx" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement> & {
+}, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "sx" | "variant" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement> & {
     selectedTokenIndex: number | undefined;
     setSelectedTokenIndex: React.Dispatch<React.SetStateAction<number | undefined>>;
 }, string | number | symbol> & React.RefAttributes<HTMLInputElement>>;