@primer/components 0.0.0-202111023322 → 0.0.0-2021111104725

package/lib-esm/SideNav.js

@@ -1,13 +1,10 @@
-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 React from 'react';
-import PropTypes from 'prop-types';
+// eslint-disable-next-line import/no-namespace
+import { get } from './constants';
 import styled, { css } from 'styled-components';
-import classnames from 'classnames';
-import { COMMON, get } from './constants';
-import theme from './theme';
+import Box from './Box';
 import Link from './Link';
-import BorderBox from './BorderBox';
+import React from 'react';
+import classnames from 'classnames';
 import sx from './sx';
 
 function SideNavBase({
@@ -15,29 +12,31 @@ function SideNavBase({
   className,
   bordered,
   children,
-  ...props
+  'aria-label': ariaLabel
 }) {
   const variantClassName = variant === 'lightweight' ? 'lightweight' : 'normal';
   const newClassName = classnames(className, `variant-${variantClassName}`);
-
-  if (!bordered) {
-    props = { ...props,
-      borderWidth: 0
-    };
-  }
-
-  return /*#__PURE__*/React.createElement(BorderBox, _extends({
+  return /*#__PURE__*/React.createElement(Box, {
+    borderWidth: bordered ? '1px' : 0,
+    borderStyle: "solid",
+    borderColor: "border.default",
+    borderRadius: 2,
     as: "nav",
-    className: newClassName
-  }, props), children);
+    className: newClassName,
+    "aria-label": ariaLabel
+  }, children);
 }
 
 SideNavBase.displayName = "SideNavBase";
 const SideNav = styled(SideNavBase).withConfig({
   displayName: "SideNav",
-  componentId: "upvvge-0"
-})(["background-color:", ";", " ", ";", ";"], get('colors.white'), props => props.bordered && css(["& > &{border-left:0;border-right:0;border-bottom:0;}"]), COMMON, sx);
-SideNav.Link = styled(Link).attrs(props => {
+  componentId: "sc-15k667c-0"
+})(["background-color:", ";", " ", ";"], get('colors.canvas.subtle'), props => props.bordered && css(["& > &{border-left:0;border-right:0;border-bottom:0;}"]), sx);
+// used for variant normal hover, focus pseudo selectors
+const CommonAccessibilityVariantNormalStyles = css(["background-color:", ";outline:none;text-decoration:none;"], get('colors.neutral.subtle')); // used for light weight hover, focus pseudo selectors
+
+const CommonAccessibilityVariantLightWeightStyles = css(["color:", ";text-decoration:none;outline:none;"], get('colors.fg.default'));
+const SideNavLink = styled(Link).attrs(props => {
   const isReactRouter = typeof props.to === 'string';
 
   if (isReactRouter || props.selected) {
@@ -50,31 +49,16 @@ SideNav.Link = styled(Link).attrs(props => {
     return {};
   }
 }).withConfig({
-  displayName: "SideNav__Link",
-  componentId: "upvvge-1"
-})(["position:relative;display:block;", " width:100%;text-align:left;font-size:", ";& > ", "{border-bottom:none;}&:first-child{border-top-right-radius:", ";border-top-left-radius:", ";}&:last-child{border-bottom-right-radius:", ";border-bottom-left-radius:", ";}", ".variant-normal > &{color:", ";padding:", ";border:0;border-top:", " solid ", ";&:first-child{border-top:0;}&::before{position:absolute;top:0;bottom:0;left:0;z-index:1;width:3px;pointer-events:none;content:'';}&:hover,&:focus{color:", ";text-decoration:none;background-color:", ";outline:none;}&[aria-current='page'],&[aria-selected='true']{font-weight:", ";color:", ";&::before{background-color:", ";}}}", ".variant-lightweight > &{padding:", " 0;color:", ";&:hover,&:focus{color:", ";text-decoration:none;outline:none;}&[aria-current='page'],&[aria-selected='true']{color:", ";font-weight:", ";}}", ";"], props => props.variant === 'full' && css(["display:flex;align-items:center;justify-content:space-between;"]), get('fontSizes.1'), SideNav, get('radii.2'), get('radii.2'), get('radii.2'), get('radii.2'), SideNav, get('colors.gray.6'), get('space.3'), get('borderWidths.1'), get('colors.gray.2'), get('colors.gray.9'), get('colors.gray.1'), get('fontWeights.semibold'), get('colors.gray.9'), get('colors.accent'), SideNav, get('space.1'), get('colors.blue.5'), get('colors.gray.9'), get('colors.gray.9'), get('fontWeights.semibold'), sx);
+  displayName: "SideNav__SideNavLink",
+  componentId: "sc-15k667c-1"
+})(["position:relative;display:block;", " width:100%;text-align:left;font-size:", ";& > ", "{border-bottom:none;}", ".variant-normal > &{color:", ";padding:", ";border:0;border-top:", " solid ", ";&:first-child{border-top:0;border-top-right-radius:", ";border-top-left-radius:", ";}&:last-child{border-bottom-right-radius:", ";border-bottom-left-radius:", ";}&::before{position:absolute;top:0;bottom:0;left:0;z-index:1;width:3px;pointer-events:none;content:'';}&:hover{", "}&:focus{", " box-shadow:", ";z-index:1;}&[aria-current='page'],&[aria-selected='true']{background-color:", ";&::before{background-color:", ";}}}", ".variant-lightweight > &{padding:", " 0;color:", ";&:hover{", "}&:focus{", " box-shadow:", ";z-index:1;}&[aria-current='page'],&[aria-selected='true']{color:", ";font-weight:", ";}}", ";"], props => props.variant === 'full' && css(["display:flex;align-items:center;justify-content:space-between;"]), get('fontSizes.1'), SideNav, SideNav, get('colors.fg.default'), get('space.3'), get('borderWidths.1'), get('colors.border.muted'), get('radii.2'), get('radii.2'), get('radii.2'), get('radii.2'), CommonAccessibilityVariantNormalStyles, CommonAccessibilityVariantNormalStyles, get('shadows.primer.shadow.focus'), get('colors.sidenav.selectedBg'), get('colors.primer.border.active'), SideNav, get('space.1'), get('colors.accent.fg'), CommonAccessibilityVariantLightWeightStyles, CommonAccessibilityVariantLightWeightStyles, get('shadows.primer.shadow.focus'), get('colors.fg.default'), get('fontWeights.semibold'), sx);
 SideNav.defaultProps = {
-  theme,
   variant: 'normal'
 };
-SideNav.propTypes = {
-  as: PropTypes.elementType,
-  bordered: PropTypes.bool,
-  children: PropTypes.node,
-  theme: PropTypes.object,
-  variant: PropTypes.oneOf(['normal', 'lightweight']),
-  ...BorderBox.propTypes
-};
-SideNav.Link.defaultProps = {
-  theme,
+SideNavLink.defaultProps = {
   variant: 'normal'
 };
-SideNav.Link.propTypes = {
-  as: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-  selected: PropTypes.bool,
-  theme: PropTypes.object,
-  variant: PropTypes.oneOf(['normal', 'full']),
-  ...Link.propTypes
-};
-SideNav.Link.displayName = 'SideNav.Link';
-export default SideNav;
+SideNavLink.displayName = 'SideNav.Link';
+export default Object.assign(SideNav, {
+  Link: SideNavLink
+});

package/lib-esm/Spinner.js

@@ -0,0 +1,45 @@
+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 React from 'react';
+import styled from 'styled-components';
+import sx from './sx';
+const sizeMap = {
+  small: '16px',
+  medium: '32px',
+  large: '64px'
+};
+
+function Spinner({
+  size: sizeKey = 'medium',
+  ...props
+}) {
+  const size = sizeMap[sizeKey];
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    height: size,
+    width: size,
+    viewBox: "0 0 16 16",
+    fill: "none"
+  }, props), /*#__PURE__*/React.createElement("circle", {
+    cx: "8",
+    cy: "8",
+    r: "7",
+    stroke: "currentColor",
+    strokeOpacity: "0.25",
+    strokeWidth: "2",
+    vectorEffect: "non-scaling-stroke"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M15 8a7.002 7.002 0 00-7-7",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    vectorEffect: "non-scaling-stroke"
+  }));
+}
+
+Spinner.displayName = "Spinner";
+const StyledSpinner = styled(Spinner).withConfig({
+  displayName: "Spinner__StyledSpinner",
+  componentId: "sc-14tspit-0"
+})(["@keyframes rotate-keyframes{100%{transform:rotate(360deg);}}animation:rotate-keyframes 1s linear infinite;", ""], sx);
+StyledSpinner.displayName = 'Spinner';
+export default StyledSpinner;

package/lib-esm/StateLabel.js

@@ -1,64 +1,96 @@
 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 { GitMergeIcon, GitPullRequestIcon, IssueClosedIcon, IssueOpenedIcon, QuestionIcon } from '@primer/octicons-react';
-import PropTypes from 'prop-types';
+import { GitMergeIcon, GitPullRequestIcon, IssueClosedIcon, IssueDraftIcon, IssueOpenedIcon, QuestionIcon } from '@primer/octicons-react';
 import React from 'react';
 import styled from 'styled-components';
 import { variant } from 'styled-system';
-import { COMMON, get } from './constants';
+import { get } from './constants';
 import StyledOcticon from './StyledOcticon';
 import sx from './sx';
-import theme from './theme';
 const octiconMap = {
   issueOpened: IssueOpenedIcon,
   pullOpened: GitPullRequestIcon,
   issueClosed: IssueClosedIcon,
   pullClosed: GitPullRequestIcon,
   pullMerged: GitMergeIcon,
-  draft: GitPullRequestIcon
+  draft: GitPullRequestIcon,
+  issueDraft: IssueDraftIcon
 };
 const colorVariants = variant({
   prop: 'status',
-  scale: 'stateLabels.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 = variant({
   prop: 'variant',
-  scale: 'stateLabels.sizes'
+  variants: {
+    small: {
+      paddingX: 2,
+      paddingY: 1,
+      fontSize: 0
+    },
+    normal: {
+      paddingX: '12px',
+      paddingY: 2,
+      fontSize: 1
+    }
+  }
 });
 const StateLabelBase = styled.span.withConfig({
   displayName: "StateLabel__StateLabelBase",
   componentId: "k4pd9e-0"
-})(["display:inline-flex;align-items:center;font-weight:600;line-height:16px;color:", ";text-align:center;border-radius:", ";", ";", ";", ";", ";"], get('colors.white'), get('radii.3'), colorVariants, sizeVariants, COMMON, 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, sx);
 
 function StateLabel({
   children,
   status,
-  variant,
+  variant: variantProp,
   ...rest
 }) {
-  const octiconProps = variant === 'small' ? {
+  const octiconProps = variantProp === 'small' ? {
     width: '1em'
   } : {};
   return /*#__PURE__*/React.createElement(StateLabelBase, _extends({}, rest, {
-    variant: variant,
+    variant: variantProp,
     status: status
-  }), status && /*#__PURE__*/React.createElement(StyledOcticon, _extends({
-    mr: 1
-  }, octiconProps, {
-    icon: octiconMap[status] || QuestionIcon
+  }), status && /*#__PURE__*/React.createElement(StyledOcticon, _extends({}, octiconProps, {
+    icon: octiconMap[status] || QuestionIcon,
+    sx: {
+      mr: 1
+    }
   })), children);
 }
 
 StateLabel.displayName = "StateLabel";
 StateLabel.defaultProps = {
-  theme,
   variant: 'normal'
 };
-StateLabel.propTypes = {
-  status: PropTypes.oneOf(['issueOpened', 'pullOpened', 'issueClosed', 'pullClosed', 'pullMerged', 'draft']).isRequired,
-  theme: PropTypes.object,
-  variant: PropTypes.oneOf(['small', 'normal']),
-  ...COMMON.propTypes,
-  ...sx.propTypes
-};
 export default StateLabel;

package/lib-esm/StyledOcticon.js

@@ -1,8 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { COMMON } from './constants';
-import theme from './theme';
 import sx from './sx';
 
 function Octicon({
@@ -16,16 +13,8 @@ Octicon.displayName = "Octicon";
 const StyledOcticon = styled(Octicon).withConfig({
   displayName: "StyledOcticon",
   componentId: "uhnt7w-0"
-})(["", " ", ""], COMMON, sx);
+})(["", ""], sx);
 StyledOcticon.defaultProps = {
-  theme,
   size: 16
 };
-StyledOcticon.propTypes = { ...COMMON.propTypes,
-  ...sx.propTypes,
-  icon: PropTypes.any.isRequired,
-  size: PropTypes.any,
-  theme: PropTypes.object,
-  verticalAlign: PropTypes.oneOf(['middle', 'text-bottom', 'text-top', 'top'])
-};
 export default StyledOcticon;

package/lib-esm/SubNav.js

@@ -1,26 +1,27 @@
 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 PropTypes from 'prop-types';
-import classnames from 'classnames';
 import styled from 'styled-components';
-import { COMMON, FLEX, get } from './constants';
-import theme from './theme';
-import Flex from './Flex';
+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'), sx);
 
-function SubNavBase({
+function SubNav({
   actions,
   className,
   children,
   label,
-  theme,
   ...rest
 }) {
   const classes = classnames(className, 'SubNav');
-  return /*#__PURE__*/React.createElement("nav", _extends({
+  return /*#__PURE__*/React.createElement(SubNavBase, _extends({
     className: classes,
     "aria-label": label
   }, rest), /*#__PURE__*/React.createElement("div", {
@@ -30,46 +31,21 @@ function SubNavBase({
   }, actions));
 }
 
-SubNavBase.displayName = "SubNavBase";
-const SubNav = styled(SubNavBase).withConfig({
-  displayName: "SubNav",
-  componentId: "sc-16bavxu-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);
-
-SubNav.Links = props => /*#__PURE__*/React.createElement(Flex, props);
-
-SubNav.Link = styled.a.attrs(props => ({
+SubNav.displayName = "SubNav";
+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__Link",
-  componentId: "sc-16bavxu-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:0;.SubNav-octicon{color:", ";}}", ";", ";"], get('space.3'), get('space.3'), get('fontWeights.semibold'), get('fontSizes.1'), get('colors.gray.9'), get('colors.gray.2'), get('colors.gray.2'), get('colors.gray.2'), get('radii.2'), get('radii.2'), get('colors.gray.2'), get('radii.2'), get('radii.2'), get('colors.gray.1'), get('colors.gray.5'), get('colors.white'), get('colors.blue.5'), get('colors.gray.5'), COMMON, sx);
-SubNav.defaultProps = {
-  theme
-};
-SubNav.propTypes = {
-  actions: PropTypes.node,
-  align: PropTypes.oneOf(['right']),
-  children: PropTypes.node,
-  full: PropTypes.bool,
-  label: PropTypes.string,
-  theme: PropTypes.object,
-  ...COMMON.propTypes,
-  ...sx.propTypes
-};
-SubNav.Link.defaultProps = {
-  theme
-};
-SubNav.Link.propTypes = {
-  as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
-  href: PropTypes.string,
-  selected: PropTypes.bool,
-  ...COMMON.propTypes,
-  ...sx.propTypes
-};
-SubNav.Link.displayName = 'SubNav.Link';
-SubNav.Links.propTypes = { ...Flex.propTypes
-};
-SubNav.Links.displayName = 'SubNav.Links';
-export default SubNav;
+  displayName: "SubNav__SubNavLink",
+  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, {
+  Link: SubNavLink,
+  Links: SubNavLinks
+});

package/lib-esm/TabNav.js

@@ -1,29 +1,27 @@
-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 PropTypes from 'prop-types';
-import classnames from 'classnames';
 import styled from 'styled-components';
-import { COMMON, get } from './constants';
-import theme from './theme';
+import { get } from './constants';
 import sx from './sx';
 const ITEM_CLASS = 'TabNav-item';
 const SELECTED_CLASS = 'selected';
-const TabNavBase = styled.nav.withConfig({
+const TabNavBase = styled.div.withConfig({
   displayName: "TabNav__TabNavBase",
   componentId: "sc-1xod0ow-0"
-})(["display:flex;border-bottom:1px solid ", ";.TabNav-body{display:flex;margin-bottom:-1px;}", " ", ""], get('colors.border.gray'), COMMON, sx);
+})(["margin-top:0;border-bottom:1px solid ", ";", ""], get('colors.border.default'), sx);
+const TabNavBody = styled.nav.withConfig({
+  displayName: "TabNav__TabNavBody",
+  componentId: "sc-1xod0ow-1"
+})(["display:flex;margin-bottom:-1px;overflow:auto;"]);
 
 function TabNav({
-  className,
   children,
+  'aria-label': ariaLabel,
   ...rest
 }) {
-  const classes = classnames(className, 'TabNav');
-  return /*#__PURE__*/React.createElement(TabNavBase, _extends({
-    className: classes
-  }, rest), /*#__PURE__*/React.createElement("div", {
-    className: "TabNav-body"
+  return /*#__PURE__*/React.createElement(TabNavBase, rest, /*#__PURE__*/React.createElement(TabNavBody, {
+    "aria-label": ariaLabel
   }, children));
 }
 
@@ -33,26 +31,8 @@ const TabNavLink = styled.a.attrs(props => ({
   className: classnames(ITEM_CLASS, props.selected && SELECTED_CLASS, props.className)
 })).withConfig({
   displayName: "TabNav__TabNavLink",
-  componentId: "sc-1xod0ow-1"
-})(["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.black'), get('colors.text.grayDark'), get('colors.text.grayDark'), get('colors.border.gray'), get('radii.2'), get('radii.2'), get('colors.white'), COMMON, sx);
-TabNav.defaultProps = {
-  theme
-};
-TabNav.propTypes = {
-  children: PropTypes.node,
-  theme: PropTypes.object,
-  ...COMMON.propTypes,
-  ...sx.propTypes
-};
-TabNavLink.defaultProps = {
-  theme
-};
-TabNavLink.propTypes = {
-  href: PropTypes.string,
-  selected: PropTypes.bool,
-  ...COMMON.propTypes,
-  ...sx.propTypes
-};
+  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);
 TabNavLink.displayName = 'TabNav.Link';
 export default Object.assign(TabNav, {
   Link: TabNavLink

package/lib-esm/Text.js

@@ -1,18 +1,8 @@
-import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { COMMON, TYPOGRAPHY } from './constants';
 import sx from './sx';
-import theme from './theme';
 const Text = styled.span.withConfig({
   displayName: "Text",
   componentId: "sc-1s3uzov-0"
 })(["", ";", ";", ";"], TYPOGRAPHY, COMMON, sx);
-Text.defaultProps = {
-  theme
-};
-Text.propTypes = { ...TYPOGRAPHY.propTypes,
-  ...COMMON.propTypes,
-  ...sx.propTypes,
-  theme: PropTypes.object
-};
 export default Text;

package/lib-esm/TextInput.js

@@ -1,85 +1,47 @@
 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 React from 'react';
-import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import systemPropTypes from '@styled-system/prop-types';
-import { omit, pick } from '@styled-system/props';
-import styled, { css } from 'styled-components';
-import { variant, width, minWidth, maxWidth } from 'styled-system';
-import { COMMON, get } from './constants';
-import theme from './theme';
-import sx from './sx';
-const sizeVariants = variant({
-  variants: {
-    small: {
-      minHeight: '28px',
-      px: 2,
-      py: '3px',
-      fontSize: 0,
-      lineHeight: '20px'
-    },
-    large: {
-      px: 2,
-      py: '10px',
-      fontSize: 3
-    }
-  }
-});
-const Input = styled.input.withConfig({
-  displayName: "TextInput__Input",
-  componentId: "sc-1apmpmt-0"
-})(["border:0;font-size:inherit;background-color:transparent;-webkit-appearance:none;color:inherit;width:100%;&:focus{outline:0;}"]);
-const Wrapper = styled.span.withConfig({
-  displayName: "TextInput__Wrapper",
-  componentId: "sc-1apmpmt-1"
-})(["display:inline-flex;align-items:stretch;min-height:34px;font-size:", ";line-height:20px;color:", ";vertical-align:middle;background-repeat:no-repeat;background-position:right 8px center;border:1px solid ", ";border-radius:", ";outline:none;box-shadow:", ";", " .TextInput-icon{align-self:center;color:", ";margin:0 ", ";flex-shrink:0;}&:focus-within{border-color:", ";box-shadow:", ",", ";}", " ", " @media (min-width:", "){font-size:", ";}", " ", " ", " ", " ", " ", ";"], get('fontSizes.1'), get('colors.gray.9'), get('colors.border.gray'), get('radii.2'), get('shadows.formControl'), props => {
-  if (props.hasIcon) {
-    return css(["padding:0;"]);
-  } else {
-    return css(["padding:6px 12px;"]);
-  }
-}, get('colors.gray.4'), get('space.2'), get('colors.blue.4'), get('shadows.formControl'), get('shadows.formControlFocus'), props => props.disabled && css(["background-color:", ";box-shadow:", "}"], get('colors.bg.disabled'), get('shadows.formControlDisabled')), props => props.block && css(["display:block;width:100%;"]), get('breakpoints.1'), get('fontSizes.1'), COMMON, width, minWidth, maxWidth, sizeVariants, sx);
+import React from 'react';
+import UnstyledTextInput from './_UnstyledTextInput';
+import TextInputWrapper from './_TextInputWrapper';
 // using forwardRef is important so that other components (ex. SelectMenu) can autofocus the input
-const TextInput = React.forwardRef(({
+const TextInput = /*#__PURE__*/React.forwardRef(({
   icon: IconComponent,
-  className,
   block,
+  className,
+  contrast,
   disabled,
-  sx,
-  ...rest
+  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(className, 'TextInput-wrapper');
-  const wrapperProps = pick(rest);
-  const inputProps = omit(rest);
-  return /*#__PURE__*/React.createElement(Wrapper, _extends({
+  return /*#__PURE__*/React.createElement(TextInputWrapper, {
+    block: block,
     className: wrapperClasses,
+    contrast: contrast,
+    disabled: disabled,
     hasIcon: !!IconComponent,
-    block: block,
+    sx: sxProp,
     theme: theme,
-    disabled: disabled,
-    sx: sx
-  }, wrapperProps), IconComponent && /*#__PURE__*/React.createElement(IconComponent, {
+    width: widthProp,
+    minWidth: minWidthProp,
+    maxWidth: maxWidthProp,
+    variant: variantProp
+  }, IconComponent && /*#__PURE__*/React.createElement(IconComponent, {
     className: "TextInput-icon"
-  }), /*#__PURE__*/React.createElement(Input, _extends({
+  }), /*#__PURE__*/React.createElement(UnstyledTextInput, _extends({
     ref: ref,
     disabled: disabled
   }, inputProps)));
 });
 TextInput.defaultProps = {
-  theme,
   type: 'text'
 };
-TextInput.propTypes = {
-  block: PropTypes.bool,
-  icon: PropTypes.any,
-  maxWidth: systemPropTypes.layout.maxWidth,
-  minWidth: systemPropTypes.layout.minWidth,
-  variant: PropTypes.oneOf(['small', 'large']),
-  ...COMMON.propTypes,
-  ...sx.propTypes,
-  width: systemPropTypes.layout.width
-};
 TextInput.displayName = 'TextInput';
 export default TextInput;