@primer/components 0.0.0-202111114525 → 0.0.0-2021111164412

package/lib-esm/Token/Token.js

@@ -0,0 +1,84 @@
+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, { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { get } from '../constants';
+import sx from '../sx';
+import TokenBase, { defaultTokenSize, isTokenInteractive } from './TokenBase';
+import RemoveTokenButton from './_RemoveTokenButton';
+import TokenTextContainer from './_TokenTextContainer';
+const tokenBorderWidthPx = 1;
+const DefaultTokenStyled = styled(TokenBase).withConfig({
+  displayName: "Token__DefaultTokenStyled",
+  componentId: "sc-1dg52pw-0"
+})(["background-color:", ";border-color:", ";border-style:solid;border-width:", "px;color:", ";max-width:100%;padding-right:", ";position:relative;", " ", ""], get('colors.neutral.subtle'), props => props.isSelected ? get('colors.fg.default') : get('colors.border.subtle'), tokenBorderWidthPx, props => props.isSelected ? get('colors.fg.default') : get('colors.fg.muted'), props => !props.hideRemoveButton ? 0 : undefined, sx, props => {
+  if (props.isTokenInteractive) {
+    return css(["&:hover{background-color:", ";box-shadow:", ";color:", ";}"], get('colors.neutral.muted'), get('colors.shadow.medium'), get('colors.fg.default'));
+  }
+});
+const LeadingVisualContainer = styled('span').withConfig({
+  displayName: "Token__LeadingVisualContainer",
+  componentId: "sc-1dg52pw-1"
+})(["flex-shrink:0;line-height:0;", ""], props => {
+  switch (props.size) {
+    case 'large':
+    case 'extralarge':
+      return css(["margin-right:", ";"], get('space.2'));
+
+    default:
+      return css(["margin-right:", ";"], get('space.1'));
+  }
+});
+const Token = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    as,
+    onRemove,
+    id,
+    leadingVisual: LeadingVisual,
+    text,
+    size,
+    hideRemoveButton,
+    href,
+    onClick,
+    ...rest
+  } = props;
+  const hasMultipleActionTargets = isTokenInteractive(props) && Boolean(onRemove) && !hideRemoveButton;
+
+  const onRemoveClick = e => {
+    e.stopPropagation();
+    onRemove && onRemove();
+  };
+
+  const interactiveTokenProps = {
+    as,
+    href,
+    onClick
+  };
+  return /*#__PURE__*/React.createElement(DefaultTokenStyled, _extends({
+    onRemove: onRemove,
+    hideRemoveButton: hideRemoveButton || !onRemove,
+    id: id === null || id === void 0 ? void 0 : id.toString(),
+    text: text,
+    size: size,
+    isTokenInteractive: isTokenInteractive(props)
+  }, !hasMultipleActionTargets ? interactiveTokenProps : {}, rest, {
+    ref: forwardedRef
+  }), LeadingVisual ? /*#__PURE__*/React.createElement(LeadingVisualContainer, {
+    size: size
+  }, /*#__PURE__*/React.createElement(LeadingVisual, null)) : null, /*#__PURE__*/React.createElement(TokenTextContainer, hasMultipleActionTargets ? interactiveTokenProps : {}, text), !hideRemoveButton && onRemove ? /*#__PURE__*/React.createElement(RemoveTokenButton, {
+    borderOffset: tokenBorderWidthPx,
+    onClick: onRemoveClick,
+    size: size,
+    isParentInteractive: isTokenInteractive(props),
+    "aria-hidden": hasMultipleActionTargets ? 'true' : 'false',
+    sx: hasMultipleActionTargets ? {
+      position: 'relative',
+      zIndex: '1'
+    } : {}
+  }) : null);
+});
+Token.displayName = 'Token';
+Token.defaultProps = {
+  size: defaultTokenSize
+};
+export default Token;

package/lib-esm/Token/TokenBase.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import { SxProp } from '../sx';
+export declare type TokenSizeKeys = 'small' | 'medium' | 'large' | 'extralarge';
+export declare const tokenSizes: Record<TokenSizeKeys, string>;
+export declare const defaultTokenSize: TokenSizeKeys;
+export interface TokenBaseProps extends Omit<React.HTMLProps<HTMLSpanElement | HTMLButtonElement | HTMLAnchorElement>, 'size' | 'id'> {
+    as?: 'button' | 'a' | 'span';
+    /**
+     * The function that gets called when a user clicks the remove button, or keys "Backspace" or "Delete" when focused on the token
+     */
+    onRemove?: () => void;
+    /**
+     * Whether the token is selected
+     */
+    isSelected?: boolean;
+    /**
+     * The text label inside the token
+     */
+    text: string;
+    /**
+     * A unique identifier that can be associated with the token
+     */
+    id?: number | string;
+    /**
+     * Which size the token will be rendered at
+     */
+    size?: TokenSizeKeys;
+}
+export declare const isTokenInteractive: ({ as, onClick, onFocus, tabIndex }: TokenBaseProps) => boolean;
+declare const TokenBase: import("styled-components").StyledComponent<"span", any, TokenBaseProps & SxProp, never>;
+export default TokenBase;

package/lib-esm/Token/TokenBase.js

@@ -0,0 +1,83 @@
+import styled from 'styled-components';
+import { variant } from 'styled-system';
+import { get } from '../constants';
+import sx from '../sx';
+export const tokenSizes = {
+  small: '16px',
+  medium: '20px',
+  large: '24px',
+  extralarge: '32px'
+};
+export const defaultTokenSize = 'medium';
+export const isTokenInteractive = ({
+  as = 'span',
+  onClick,
+  onFocus,
+  tabIndex = -1
+}) => Boolean(onFocus || onClick || tabIndex > -1 || ['a', 'button'].includes(as));
+const variants = variant({
+  prop: 'size',
+  variants: {
+    small: {
+      fontSize: 0,
+      height: tokenSizes.small,
+      // without setting lineHeight to match height, the "x" appears vertically mis-aligned
+      lineHeight: tokenSizes.small,
+      paddingLeft: 1,
+      paddingRight: 1,
+      // need to explicitly set padding top and bottom to "0" to override default `<button>` element styles
+      // without setting these, the "x" appears vertically mis-aligned
+      paddingTop: 0,
+      paddingBottom: 0
+    },
+    medium: {
+      fontSize: 0,
+      height: tokenSizes.medium,
+      lineHeight: tokenSizes.medium,
+      paddingLeft: 2,
+      paddingRight: 2,
+      paddingTop: 0,
+      paddingBottom: 0
+    },
+    large: {
+      fontSize: 0,
+      height: tokenSizes.large,
+      lineHeight: tokenSizes.large,
+      paddingLeft: 2,
+      paddingRight: 2,
+      paddingTop: 0,
+      paddingBottom: 0
+    },
+    extralarge: {
+      fontSize: 1,
+      height: tokenSizes.extralarge,
+      lineHeight: tokenSizes.extralarge,
+      paddingLeft: 3,
+      paddingRight: 3,
+      paddingTop: 0,
+      paddingBottom: 0
+    }
+  }
+});
+const TokenBase = styled.span.attrs(({
+  text,
+  onRemove,
+  onKeyDown
+}) => ({
+  onKeyDown: event => {
+    onKeyDown && onKeyDown(event);
+
+    if ((event.key === 'Backspace' || event.key === 'Delete') && onRemove) {
+      onRemove();
+    }
+  },
+  'aria-label': onRemove ? `${text}, press backspace or delete to remove` : undefined
+})).withConfig({
+  displayName: "TokenBase",
+  componentId: "opajvp-0"
+})(["align-items:center;border-radius:999px;cursor:", ";display:inline-flex;font-weight:", ";font-family:inherit;text-decoration:none;white-space:nowrap;", " ", ""], props => isTokenInteractive(props) ? 'pointer' : 'auto', get('fontWeights.bold'), variants, sx);
+TokenBase.defaultProps = {
+  as: 'span',
+  size: defaultTokenSize
+};
+export default TokenBase;

package/lib-esm/Token/_RemoveTokenButton.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SxProp } from '../sx';
+import { ComponentProps } from '../utils/types';
+import { TokenSizeKeys } from './TokenBase';
+interface TokenButtonProps {
+    borderOffset?: number;
+    size?: TokenSizeKeys;
+    isParentInteractive?: boolean;
+}
+declare const StyledTokenButton: import("styled-components").StyledComponent<"span", any, TokenButtonProps & SxProp, never>;
+declare const RemoveTokenButton: React.FC<ComponentProps<typeof StyledTokenButton>>;
+export default RemoveTokenButton;

package/lib-esm/Token/_RemoveTokenButton.js

@@ -0,0 +1,69 @@
+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 { XIcon } from '@primer/octicons-react';
+import styled, { css } from 'styled-components';
+import { variant } from 'styled-system';
+import { get } from '../constants';
+import sx from '../sx';
+import { tokenSizes, defaultTokenSize } from './TokenBase';
+const variants = variant({
+  prop: 'size',
+  variants: {
+    small: {
+      height: tokenSizes.small,
+      width: tokenSizes.small
+    },
+    medium: {
+      height: tokenSizes.medium,
+      width: tokenSizes.medium
+    },
+    large: {
+      height: tokenSizes.large,
+      width: tokenSizes.large
+    },
+    extralarge: {
+      height: tokenSizes.extralarge,
+      width: tokenSizes.extralarge
+    }
+  }
+});
+
+const getTokenButtonIconSize = size => parseInt(tokenSizes[size || defaultTokenSize], 10) * 0.75;
+
+const StyledTokenButton = styled.span.withConfig({
+  displayName: "_RemoveTokenButton__StyledTokenButton",
+  componentId: "sc-14lvcw1-0"
+})(["background-color:transparent;font-family:inherit;color:currentColor;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;user-select:none;appearance:none;text-decoration:none;padding:0;transform:", ";align-self:baseline;border:0;border-radius:999px;", " &:hover,&:focus{background-color:", ";}&:active{background-color:", ";}", " ", ""], props => `translate(${props.borderOffset}px, -${props.borderOffset}px)`, props => {
+  switch (props.size) {
+    case 'large':
+    case 'extralarge':
+      return css(["margin-left:", ";"], get('space.2'));
+
+    default:
+      return css(["margin-left:", ";"], get('space.1'));
+  }
+}, get('colors.neutral.muted'), get('colors.neutral.subtle'), variants, sx);
+
+const RemoveTokenButton = ({
+  'aria-label': ariaLabel,
+  isParentInteractive,
+  size,
+  ...rest
+}) => {
+  delete rest.children;
+  return /*#__PURE__*/React.createElement(StyledTokenButton, _extends({
+    as: isParentInteractive ? 'span' : 'button',
+    tabIndex: isParentInteractive ? -1 : undefined,
+    "aria-label": !isParentInteractive ? 'Remove token' : ariaLabel,
+    size: size
+  }, rest), /*#__PURE__*/React.createElement(XIcon, {
+    size: getTokenButtonIconSize(size)
+  }));
+};
+
+RemoveTokenButton.displayName = "RemoveTokenButton";
+RemoveTokenButton.defaultProps = {
+  size: defaultTokenSize
+};
+export default RemoveTokenButton;

package/lib-esm/Token/_TokenTextContainer.d.ts

@@ -0,0 +1,3 @@
+import { TokenBaseProps } from './TokenBase';
+declare const TokenTextContainer: import("styled-components").StyledComponent<"span", any, Partial<TokenBaseProps>, never>;
+export default TokenTextContainer;

package/lib-esm/Token/_TokenTextContainer.js

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+const TokenTextContainer = styled('span').withConfig({
+  displayName: "_TokenTextContainer__TokenTextContainer",
+  componentId: "sc-4t2bev-0"
+})(["flex-grow:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:transparent;border:none;color:inherit;font:inherit;margin:0;overflow:visible;padding:0;width:auto;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none;line-height:1;color:currentColor;text-decoration:none;&:is(a,button,[tabIndex='0']){cursor:pointer;&:after{content:'';position:absolute;left:0;top:0;right:0;bottom:0;}}"]);
+export default TokenTextContainer;

package/lib-esm/Token/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './Token';
+export { default as IssueLabelToken } from './IssueLabelToken';
+export { default as AvatarToken } from './AvatarToken';

package/lib-esm/Token/index.js

@@ -0,0 +1,3 @@
+export { default } from './Token';
+export { default as IssueLabelToken } from './IssueLabelToken';
+export { default as AvatarToken } from './AvatarToken';

package/lib-esm/Tooltip.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { SxProp } from './sx';
+import { ComponentProps } from './utils/types';
+declare const TooltipBase: import("styled-components").StyledComponent<"span", any, SxProp, never>;
+export declare type TooltipProps = {
+    direction?: 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw';
+    text?: string;
+    noDelay?: boolean;
+    align?: 'left' | 'right';
+    wrap?: boolean;
+} & ComponentProps<typeof TooltipBase>;
+declare function Tooltip({ direction, children, className, text, noDelay, align, wrap, ...rest }: TooltipProps): JSX.Element;
+declare namespace Tooltip {
+    var alignments: string[];
+    var directions: string[];
+}
+export default Tooltip;

package/lib-esm/Tooltip.js

@@ -1,52 +1,35 @@
 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 React from 'react';
 import styled from 'styled-components';
-import { COMMON, get } from './constants';
-import theme from './theme';
+import { get } from './constants';
 import sx from './sx';
+const TooltipBase = styled.span.withConfig({
+  displayName: "Tooltip__TooltipBase",
+  componentId: "kp39nc-0"
+})(["position:relative;&::before{position:absolute;z-index:1000001;display:none;width:0px;height:0px;color:", ";pointer-events:none;content:'';border:6px solid transparent;opacity:0;}&::after{position:absolute;z-index:1000000;display:none;padding:0.5em 0.75em;font:normal normal 11px/1.5 ", ";-webkit-font-smoothing:subpixel-antialiased;color:", ";text-align:center;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:", ";border-radius:", ";opacity:0;}@keyframes tooltip-appear{from{opacity:0;}to{opacity:1;}}&:hover,&:active,&:focus{&::before,&::after{display:inline-block;text-decoration:none;animation-name:tooltip-appear;animation-duration:0.1s;animation-fill-mode:forwards;animation-timing-function:ease-in;animation-delay:0.4s;}}&.tooltipped-no-delay:hover,&.tooltipped-no-delay:active,&.tooltipped-no-delay:focus{&::before,&::after{animation-delay:0s;}}&.tooltipped-multiline:hover,&.tooltipped-multiline:active,&.tooltipped-multiline:focus{&::after{display:table-cell;}}&.tooltipped-s,&.tooltipped-se,&.tooltipped-sw{&::after{top:100%;right:50%;margin-top:6px;}&::before{top:auto;right:50%;bottom:-7px;margin-right:-6px;border-bottom-color:", ";}}&.tooltipped-se{&::after{right:auto;left:50%;margin-left:-", ";}}&.tooltipped-sw::after{margin-right:-", ";}&.tooltipped-n,&.tooltipped-ne,&.tooltipped-nw{&::after{right:50%;bottom:100%;margin-bottom:6px;}&::before{top:-7px;right:50%;bottom:auto;margin-right:-6px;border-top-color:", ";}}&.tooltipped-ne{&::after{right:auto;left:50%;margin-left:-", ";}}&.tooltipped-nw::after{margin-right:-", ";}&.tooltipped-s::after,&.tooltipped-n::after{transform:translateX(50%);}&.tooltipped-w{&::after{right:100%;bottom:50%;margin-right:6px;transform:translateY(50%);}&::before{top:50%;bottom:50%;left:-7px;margin-top:-6px;border-left-color:", ";}}&.tooltipped-e{&::after{bottom:50%;left:100%;margin-left:6px;transform:translateY(50%);}&::before{top:50%;right:-7px;bottom:50%;margin-top:-6px;border-right-color:", ";}}&.tooltipped-multiline{&::after{width:max-content;max-width:250px;word-wrap:break-word;white-space:pre-line;border-collapse:separate;}&.tooltipped-s::after,&.tooltipped-n::after{right:auto;left:50%;transform:translateX(-50%);}&.tooltipped-w::after,&.tooltipped-e::after{right:100%;}}&.tooltipped-align-right-2::after{right:0;margin-right:0;}&.tooltipped-align-right-2::before{right:15px;}&.tooltipped-align-left-2::after{left:0;margin-left:0;}&.tooltipped-align-left-2::before{left:10px;}", ";"], get('colors.neutral.emphasisPlus'), get('fonts.normal'), get('colors.fg.onEmphasis'), get('colors.neutral.emphasisPlus'), get('radii.1'), get('colors.neutral.emphasisPlus'), get('space.3'), get('space.3'), get('colors.neutral.emphasisPlus'), get('space.3'), get('space.3'), get('colors.neutral.emphasisPlus'), get('colors.neutral.emphasisPlus'), sx);
 
-function TooltipBase({
-  direction,
+function Tooltip({
+  direction = 'n',
   children,
   className,
   text,
   noDelay,
   align,
   wrap,
-  theme,
   ...rest
 }) {
   const classes = classnames(className, `tooltipped-${direction}`, align && `tooltipped-align-${align}-2`, noDelay && 'tooltipped-no-delay', wrap && 'tooltipped-multiline');
-  return /*#__PURE__*/React.createElement("span", _extends({
+  return /*#__PURE__*/React.createElement(TooltipBase, _extends({
+    role: "tooltip",
     "aria-label": text
   }, rest, {
     className: classes
   }), children);
 }
 
-TooltipBase.displayName = "TooltipBase";
-const Tooltip = styled(TooltipBase).withConfig({
-  displayName: "Tooltip",
-  componentId: "h3c7f-0"
-})(["position:relative;&::before{position:absolute;z-index:1000001;display:none;width:0px;height:0px;color:", ";pointer-events:none;content:'';border:6px solid transparent;opacity:0;}&::after{position:absolute;z-index:1000000;display:none;padding:0.5em 0.75em;font:normal normal 11px/1.5 ", ";-webkit-font-smoothing:subpixel-antialiased;color:", ";text-align:center;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:", ";border-radius:", ";opacity:0;}@keyframes tooltip-appear{from{opacity:0;}to{opacity:1;}}&:hover,&:active,&:focus{&::before,&::after{display:inline-block;text-decoration:none;animation-name:tooltip-appear;animation-duration:0.1s;animation-fill-mode:forwards;animation-timing-function:ease-in;animation-delay:0.4s;}}&.tooltipped-no-delay:hover,&.tooltipped-no-delay:active,&.tooltipped-no-delay:focus{&::before,&::after{animation-delay:0s;}}&.tooltipped-multiline:hover,&.tooltipped-multiline:active,&.tooltipped-multiline:focus{&::after{display:table-cell;}}&.tooltipped-s,&.tooltipped-se,&.tooltipped-sw{&::after{top:100%;right:50%;margin-top:6px;}&::before{top:auto;right:50%;bottom:-7px;margin-right:-6px;border-bottom-color:", ";}}&.tooltipped-se{&::after{right:auto;left:50%;margin-left:-", ";}}&.tooltipped-sw::after{margin-right:-", ";}&.tooltipped-n,&.tooltipped-ne,&.tooltipped-nw{&::after{right:50%;bottom:100%;margin-bottom:6px;}&::before{top:-7px;right:50%;bottom:auto;margin-right:-6px;border-top-color:", ";}}&.tooltipped-ne{&::after{right:auto;left:50%;margin-left:-", ";}}&.tooltipped-nw::after{margin-right:-", ";}&.tooltipped-s::after,&.tooltipped-n::after{transform:translateX(50%);}&.tooltipped-w{&::after{right:100%;bottom:50%;margin-right:6px;transform:translateY(50%);}&::before{top:50%;bottom:50%;left:-7px;margin-top:-6px;border-left-color:", ";}}&.tooltipped-e{&::after{bottom:50%;left:100%;margin-left:6px;transform:translateY(50%);}&::before{top:50%;right:-7px;bottom:50%;margin-top:-6px;border-right-color:", ";}}&.tooltipped-multiline{&::after{width:max-content;max-width:250px;word-wrap:break-word;white-space:pre-line;border-collapse:separate;}&.tooltipped-s::after,&.tooltipped-n::after{right:auto;left:50%;transform:translateX(-50%);}&.tooltipped-w::after,&.tooltipped-e::after{right:100%;}}&.tooltipped-align-right-2::after{right:0;margin-right:0;}&.tooltipped-align-right-2::before{right:15px;}&.tooltipped-align-left-2::after{left:0;margin-left:0;}&.tooltipped-align-left-2::before{left:10px;}", ";", ";"], get('colors.black'), get('fonts.normal'), get('colors.white'), get('colors.black'), get('radii.1'), get('colors.black'), get('space.3'), get('space.3'), get('colors.black'), get('space.3'), get('space.3'), get('colors.black'), get('colors.black'), COMMON, sx);
+Tooltip.displayName = "Tooltip";
 Tooltip.alignments = ['left', 'right'];
 Tooltip.directions = ['n', 'ne', 'e', 'se', 's', 'sw', 'w', 'nw'];
-Tooltip.defaultProps = {
-  theme,
-  direction: 'n'
-};
-Tooltip.propTypes = {
-  align: PropTypes.oneOf(Tooltip.alignments),
-  children: PropTypes.node,
-  direction: PropTypes.oneOf(Tooltip.directions),
-  noDelay: PropTypes.bool,
-  text: PropTypes.string,
-  theme: PropTypes.object,
-  wrap: PropTypes.bool,
-  ...COMMON.propTypes,
-  ...sx.propTypes
-};
 export default Tooltip;

package/lib-esm/Truncate.d.ts

@@ -0,0 +1,10 @@
+import { MaxWidthProps } from 'styled-system';
+import { SxProp } from './sx';
+import { ComponentProps } from './utils/types';
+declare const Truncate: import("styled-components").StyledComponent<"div", any, {
+    title: string;
+    inline?: boolean | undefined;
+    expandable?: boolean | undefined;
+} & MaxWidthProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.MaxWidth<import("styled-system").TLengthStyledSystem>> & SxProp, never>;
+export declare type TruncateProps = ComponentProps<typeof Truncate>;
+export default Truncate;

package/lib-esm/Truncate.js

@@ -1,26 +1,13 @@
-import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { maxWidth } from 'styled-system';
-import { COMMON, TYPOGRAPHY } from './constants';
 import sx from './sx';
-import theme from './theme';
 const Truncate = styled.div.withConfig({
   displayName: "Truncate",
   componentId: "sc-1074h1l-0"
-})(["", " ", " display:", ";overflow:hidden;text-overflow:ellipsis;vertical-align:", ";white-space:nowrap;", " ", " ", ";"], TYPOGRAPHY, COMMON, props => props.inline ? 'inline-block' : 'inherit', props => props.inline ? 'top' : 'initial', maxWidth, props => props.expandable ? `&:hover { max-width: 10000px; }` : '', sx);
+})(["display:", ";overflow:hidden;text-overflow:ellipsis;vertical-align:", ";white-space:nowrap;", " ", " ", ";"], props => props.inline ? 'inline-block' : 'inherit', props => props.inline ? 'top' : 'initial', maxWidth, props => props.expandable ? `&:hover { max-width: 10000px; }` : '', sx);
 Truncate.defaultProps = {
   expandable: false,
   inline: false,
-  maxWidth: 125,
-  theme
-};
-Truncate.propTypes = { ...TYPOGRAPHY.propTypes,
-  ...COMMON.propTypes,
-  expandable: PropTypes.bool,
-  inline: PropTypes.bool,
-  ...sx.propTypes,
-  maxWidth: PropTypes.number,
-  theme: PropTypes.object,
-  title: PropTypes.string.isRequired
+  maxWidth: 125
 };
 export default Truncate;

package/lib-esm/UnderlineNav.d.ts

@@ -0,0 +1,24 @@
+import * as History from 'history';
+import React from 'react';
+import { SxProp } from './sx';
+import { ComponentProps } from './utils/types';
+declare const UnderlineNavBase: import("styled-components").StyledComponent<"nav", any, SxProp, never>;
+export declare type UnderlineNavProps = {
+    actions?: React.ReactNode;
+    align?: 'right';
+    full?: boolean;
+    label?: string;
+} & ComponentProps<typeof UnderlineNavBase>;
+declare function UnderlineNav({ actions, className, align, children, full, label, theme, ...rest }: UnderlineNavProps): JSX.Element;
+declare const UnderlineNavLink: import("styled-components").StyledComponent<"a", any, {
+    to?: History.LocationDescriptor<unknown> | undefined;
+    selected?: boolean | undefined;
+} & SxProp, never>;
+export declare type UnderlineNavLinkProps = ComponentProps<typeof UnderlineNavLink>;
+declare const _default: typeof UnderlineNav & {
+    Link: import("styled-components").StyledComponent<"a", any, {
+        to?: History.LocationDescriptor<unknown> | undefined;
+        selected?: boolean | undefined;
+    } & SxProp, never>;
+};
+export default _default;

package/lib-esm/UnderlineNav.js

@@ -1,18 +1,17 @@
 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';
-import PropTypes from 'prop-types';
+import classnames from 'classnames'; // eslint-disable-next-line import/no-namespace
+
 import React from 'react';
 import styled from 'styled-components';
-import { COMMON, get } from './constants';
+import { get } from './constants';
 import sx from './sx';
-import theme from './theme';
 const ITEM_CLASS = 'UnderlineNav-item';
 const SELECTED_CLASS = 'selected';
 const UnderlineNavBase = styled.nav.withConfig({
   displayName: "UnderlineNav__UnderlineNavBase",
   componentId: "zrnxqt-0"
-})(["display:flex;justify-content:space-between;border-bottom:1px solid #eaecef;&.UnderlineNav--right{justify-content:flex-end;.UnderlineNav-item{margin-right:0;margin-left:", ";}.UnderlineNav-actions{flex:1 1 auto;}}&.UnderlineNav--full{display:block;}.UnderlineNav-body{display:flex;margin-bottom:-1px;}.UnderlineNav-actions{align-self:center;}", ";", ";"], get('space.3'), COMMON, sx);
+})(["display:flex;justify-content:space-between;border-bottom:1px solid ", ";&.UnderlineNav--right{justify-content:flex-end;.UnderlineNav-item{margin-right:0;margin-left:", ";}.UnderlineNav-actions{flex:1 1 auto;}}&.UnderlineNav--full{display:block;}.UnderlineNav-body{display:flex;margin-bottom:-1px;}.UnderlineNav-actions{align-self:center;}", ";"], get('colors.border.muted'), get('space.3'), sx);
 
 function UnderlineNav({
   actions,
@@ -43,29 +42,7 @@ const UnderlineNavLink = styled.a.attrs(props => ({
 })).withConfig({
   displayName: "UnderlineNav__UnderlineNavLink",
   componentId: "zrnxqt-1"
-})(["padding:", " ", ";margin-right:", ";font-size:", ";line-height:", ";color:", ";text-align:center;border-bottom:2px solid transparent;text-decoration:none;&:hover,&:focus{color:", ";text-decoration:none;border-bottom-color:", ";transition:0.2s ease;.UnderlineNav-octicon{color:", ";}}&.selected{color:", ";border-bottom-color:", ";.UnderlineNav-octicon{color:", ";}}", ";", ";"], get('space.3'), get('space.2'), get('space.3'), get('fontSizes.1'), get('lineHeights.default'), get('colors.gray.6'), get('colors.gray.9'), get('colors.gray.2'), get('colors.gray.5'), get('colors.gray.9'), get('colors.accent'), get('colors.gray.5'), COMMON, sx);
-UnderlineNav.defaultProps = {
-  theme
-};
-UnderlineNav.propTypes = {
-  actions: PropTypes.node,
-  align: PropTypes.oneOf(['right']),
-  children: PropTypes.node,
-  full: PropTypes.bool,
-  label: PropTypes.string,
-  theme: PropTypes.object,
-  ...COMMON.propTypes,
-  ...sx.propTypes
-};
-UnderlineNavLink.defaultProps = {
-  theme
-};
-UnderlineNavLink.propTypes = {
-  href: PropTypes.string,
-  selected: PropTypes.bool,
-  ...COMMON.propTypes,
-  ...sx.propTypes
-};
+})(["padding:", " ", ";margin-right:", ";font-size:", ";line-height:", ";color:", ";text-align:center;border-bottom:2px solid transparent;text-decoration:none;&:hover,&:focus{color:", ";text-decoration:none;border-bottom-color:", ";transition:0.2s ease;.UnderlineNav-octicon{color:", ";}}&.selected{color:", ";border-bottom-color:", ";.UnderlineNav-octicon{color:", ";}}", ";"], get('space.3'), get('space.2'), get('space.3'), get('fontSizes.1'), get('lineHeights.default'), get('colors.fg.default'), get('colors.fg.default'), get('colors.neutral.muted'), get('colors.fg.muted'), get('colors.fg.default'), get('colors.primer.border.active'), get('colors.fg.default'), sx);
 UnderlineNavLink.displayName = 'UnderlineNav.Link';
 export default Object.assign(UnderlineNav, {
   Link: UnderlineNavLink

package/lib-esm/_InputCaption.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface Props {
+    /**
+     * The unique identifier used to associate the caption with an input
+     */
+    id: string;
+    /**
+     * Whether the input associated with this caption is disabled
+     */
+    disabled?: boolean;
+}
+declare const InputCaption: React.FC<Props>;
+export default InputCaption;

package/lib-esm/_InputCaption.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Text } from '.';
+
+const InputCaption = ({
+  children,
+  disabled,
+  id
+}) => /*#__PURE__*/React.createElement(Text, {
+  color: disabled ? 'fg.subtle' : 'fg.muted',
+  display: "block",
+  fontSize: 0,
+  id: id
+}, children);
+
+InputCaption.displayName = "InputCaption";
+export default InputCaption;

package/lib-esm/_InputField/InputField.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import { ComponentProps } from '../utils/types';
+import { FormValidationStatus } from '../utils/types/FormValidationStatus';
+export interface Props<T = Record<string, FormValidationStatus>> {
+    children?: React.ReactNode;
+    /**
+     * Whether the field is ready for user input
+     */
+    disabled?: boolean;
+    /**
+     * The unique identifier for this field. Used to associate the label, validation text, and caption text
+     */
+    id?: string;
+    /**
+     * Whether this field must have a value for the user to complete their task
+     */
+    required?: boolean;
+    /**
+     * A map of validation statuses and their associated validation keys. When one of the validation keys is passed to the `validationResult` prop,
+     * the associated validation message will be rendered in the correct style
+     */
+    validationMap?: T;
+    /**
+     * The key of the validation message to show
+     */
+    validationResult?: keyof T;
+}
+export interface InputFieldContext extends Pick<Props<Record<string, FormValidationStatus>>, 'disabled' | 'id' | 'required'> {
+    captionId: string;
+    validationMessageId: string;
+}
+declare const InputField: <T extends Record<string, FormValidationStatus>>({ children, disabled, id: idProp, required, validationMap, validationResult }: Props<T>) => JSX.Element;
+export declare type InputFieldComponentProps = ComponentProps<typeof InputField>;
+declare const _default: (<T extends Record<string, FormValidationStatus>>({ children, disabled, id: idProp, required, validationMap, validationResult }: Props<T>) => JSX.Element) & {
+    Caption: React.FC<{}>;
+    Label: React.FC<import("./InputFieldLabel").Props>;
+    Validation: React.FC<import("./InputFieldValidation").InputFieldValidationProps>;
+};
+export default _default;