@primer/components 0.0.0-2021113144816 → 0.0.0-2021113174023

package/lib/Token/TokenBase.jsx

@@ -0,0 +1,88 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isTokenInteractive = exports.defaultTokenSize = exports.tokenSizes = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const styled_system_1 = require("styled-system");
+const constants_1 = require("../constants");
+const sx_1 = __importDefault(require("../sx"));
+exports.tokenSizes = {
+    small: '16px',
+    medium: '20px',
+    large: '24px',
+    extralarge: '32px'
+};
+exports.defaultTokenSize = 'medium';
+const isTokenInteractive = ({ as = 'span', onClick, onFocus, tabIndex = -1 }) => Boolean(onFocus || onClick || tabIndex > -1 || ['a', 'button'].includes(as));
+exports.isTokenInteractive = isTokenInteractive;
+const variants = styled_system_1.variant({
+    prop: 'size',
+    variants: {
+        small: {
+            fontSize: 0,
+            height: exports.tokenSizes.small,
+            // without setting lineHeight to match height, the "x" appears vertically mis-aligned
+            lineHeight: exports.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: exports.tokenSizes.medium,
+            lineHeight: exports.tokenSizes.medium,
+            paddingLeft: 2,
+            paddingRight: 2,
+            paddingTop: 0,
+            paddingBottom: 0
+        },
+        large: {
+            fontSize: 0,
+            height: exports.tokenSizes.large,
+            lineHeight: exports.tokenSizes.large,
+            paddingLeft: 2,
+            paddingRight: 2,
+            paddingTop: 0,
+            paddingBottom: 0
+        },
+        extralarge: {
+            fontSize: 1,
+            height: exports.tokenSizes.extralarge,
+            lineHeight: exports.tokenSizes.extralarge,
+            paddingLeft: 3,
+            paddingRight: 3,
+            paddingTop: 0,
+            paddingBottom: 0
+        }
+    }
+});
+const TokenBase = styled_components_1.default.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
+})) `
+  align-items: center;
+  border-radius: 999px;
+  cursor: ${props => (exports.isTokenInteractive(props) ? 'pointer' : 'auto')};
+  display: inline-flex;
+  font-weight: ${constants_1.get('fontWeights.bold')};
+  font-family: inherit;
+  text-decoration: none;
+  white-space: nowrap;
+  ${variants}
+  ${sx_1.default}
+`;
+TokenBase.defaultProps = {
+    as: 'span',
+    size: exports.defaultTokenSize
+};
+exports.default = TokenBase;

package/lib/Token/_RemoveTokenButton.jsx

@@ -0,0 +1,108 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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 octicons_react_1 = require("@primer/octicons-react");
+const styled_components_1 = __importStar(require("styled-components"));
+const styled_system_1 = require("styled-system");
+const constants_1 = require("../constants");
+const sx_1 = __importDefault(require("../sx"));
+const TokenBase_1 = require("./TokenBase");
+const variants = styled_system_1.variant({
+    prop: 'size',
+    variants: {
+        small: {
+            height: TokenBase_1.tokenSizes.small,
+            width: TokenBase_1.tokenSizes.small
+        },
+        medium: {
+            height: TokenBase_1.tokenSizes.medium,
+            width: TokenBase_1.tokenSizes.medium
+        },
+        large: {
+            height: TokenBase_1.tokenSizes.large,
+            width: TokenBase_1.tokenSizes.large
+        },
+        extralarge: {
+            height: TokenBase_1.tokenSizes.extralarge,
+            width: TokenBase_1.tokenSizes.extralarge
+        }
+    }
+});
+const getTokenButtonIconSize = (size) => parseInt(TokenBase_1.tokenSizes[size || TokenBase_1.defaultTokenSize], 10) * 0.75;
+const StyledTokenButton = styled_components_1.default.span `
+  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: ${props => `translate(${props.borderOffset}px, -${props.borderOffset}px)`};
+  align-self: baseline;
+  border: 0;
+  border-radius: 999px;
+
+  ${props => {
+    switch (props.size) {
+        case 'large':
+        case 'extralarge':
+            return styled_components_1.css `
+          margin-left: ${constants_1.get('space.2')};
+        `;
+        default:
+            return styled_components_1.css `
+          margin-left: ${constants_1.get('space.1')};
+        `;
+    }
+}}
+
+  &:hover,
+  &:focus {
+    // TODO: choose a better functional color variable for this
+    background-color: ${constants_1.get('colors.neutral.muted')};
+  }
+
+  &:active {
+    // TODO: choose a better functional color variable for this
+    background-color: ${constants_1.get('colors.neutral.subtle')};
+  }
+
+  ${variants}
+  ${sx_1.default}
+`;
+const RemoveTokenButton = ({ 'aria-label': ariaLabel, isParentInteractive, size, ...rest }) => {
+    delete rest.children;
+    return (<StyledTokenButton as={isParentInteractive ? 'span' : 'button'} tabIndex={isParentInteractive ? -1 : undefined} aria-label={!isParentInteractive ? 'Remove token' : ariaLabel} size={size} {...rest}>
+      <octicons_react_1.XIcon size={getTokenButtonIconSize(size)}/>
+    </StyledTokenButton>);
+};
+RemoveTokenButton.defaultProps = {
+    size: TokenBase_1.defaultTokenSize
+};
+exports.default = RemoveTokenButton;

package/lib/Token/_TokenTextContainer.jsx

@@ -0,0 +1,49 @@
+"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 TokenTextContainer = styled_components_1.default('span') `
+  flex-grow: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  // reset button styles, make the cursor a pointer, and add line-height
+  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;
+
+  // reset anchor styles
+  color: currentColor;
+  text-decoration: none;
+
+  // Position psuedo-element above text content, but below the
+  // remove button.
+  // This ensures the <a> or <button> receives the click no
+  // matter where on the token the user clicks.
+  &:is(a, button, [tabIndex='0']) {
+    cursor: pointer;
+
+    &:after {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+    }
+  }
+`;
+exports.default = TokenTextContainer;

package/lib/Token/index.js

@@ -1,31 +1,12 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _Token.default;
-  }
-});
-Object.defineProperty(exports, "IssueLabelToken", {
-  enumerable: true,
-  get: function () {
-    return _IssueLabelToken.default;
-  }
-});
-Object.defineProperty(exports, "AvatarToken", {
-  enumerable: true,
-  get: function () {
-    return _AvatarToken.default;
-  }
-});
-
-var _Token = _interopRequireDefault(require("./Token"));
-
-var _IssueLabelToken = _interopRequireDefault(require("./IssueLabelToken"));
-
-var _AvatarToken = _interopRequireDefault(require("./AvatarToken"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AvatarToken = exports.IssueLabelToken = exports.default = void 0;
+var Token_1 = require("./Token");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Token_1).default; } });
+var IssueLabelToken_1 = require("./IssueLabelToken");
+Object.defineProperty(exports, "IssueLabelToken", { enumerable: true, get: function () { return __importDefault(IssueLabelToken_1).default; } });
+var AvatarToken_1 = require("./AvatarToken");
+Object.defineProperty(exports, "AvatarToken", { enumerable: true, get: function () { return __importDefault(AvatarToken_1).default; } });

package/lib/Tooltip.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
+import { SystemCommonProps } from './constants';
 import { SxProp } from './sx';
 import { ComponentProps } from './utils/types';
-declare const TooltipBase: import("styled-components").StyledComponent<"span", any, SxProp, never>;
+declare const TooltipBase: import("styled-components").StyledComponent<"span", any, SystemCommonProps & SxProp, never>;
 export declare type TooltipProps = {
     direction?: 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw';
     text?: string;

package/lib/Tooltip.js

@@ -21,8 +21,8 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 const TooltipBase = _styledComponents.default.span.withConfig({
   displayName: "Tooltip__TooltipBase",
-  componentId: "sc-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;}", ";"], (0, _constants.get)('colors.neutral.emphasisPlus'), (0, _constants.get)('fonts.normal'), (0, _constants.get)('colors.fg.onEmphasis'), (0, _constants.get)('colors.neutral.emphasisPlus'), (0, _constants.get)('radii.1'), (0, _constants.get)('colors.neutral.emphasisPlus'), (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('colors.neutral.emphasisPlus'), (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('colors.neutral.emphasisPlus'), (0, _constants.get)('colors.neutral.emphasisPlus'), _sx.default);
+  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;}", ";", ";"], (0, _constants.get)('colors.neutral.emphasisPlus'), (0, _constants.get)('fonts.normal'), (0, _constants.get)('colors.fg.onEmphasis'), (0, _constants.get)('colors.neutral.emphasisPlus'), (0, _constants.get)('radii.1'), (0, _constants.get)('colors.neutral.emphasisPlus'), (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('colors.neutral.emphasisPlus'), (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('colors.neutral.emphasisPlus'), (0, _constants.get)('colors.neutral.emphasisPlus'), _constants.COMMON, _sx.default);
 
 function Tooltip({
   direction = 'n',

package/lib/Tooltip.jsx

@@ -0,0 +1,246 @@
+"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 TooltipBase = styled_components_1.default.span `
+  position: relative;
+
+  &::before {
+    position: absolute;
+    z-index: 1000001;
+    display: none;
+    width: 0px;
+    height: 0px;
+    color: ${constants_1.get('colors.neutral.emphasisPlus')};
+    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 ${constants_1.get('fonts.normal')};
+    -webkit-font-smoothing: subpixel-antialiased;
+    color: ${constants_1.get('colors.fg.onEmphasis')};
+    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: ${constants_1.get('colors.neutral.emphasisPlus')};
+    border-radius: ${constants_1.get('radii.1')};
+    opacity: 0;
+  }
+
+  // delay animation for tooltip
+  @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 south
+  &.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: ${constants_1.get('colors.neutral.emphasisPlus')};
+    }
+  }
+
+  &.tooltipped-se {
+    &::after {
+      right: auto;
+      left: 50%;
+      margin-left: -${constants_1.get('space.3')};
+    }
+  }
+
+  &.tooltipped-sw::after {
+    margin-right: -${constants_1.get('space.3')};
+  }
+
+  // Tooltips above the object
+  &.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: ${constants_1.get('colors.neutral.emphasisPlus')};
+    }
+  }
+
+  &.tooltipped-ne {
+    &::after {
+      right: auto;
+      left: 50%;
+      margin-left: -${constants_1.get('space.3')};
+    }
+  }
+
+  &.tooltipped-nw::after {
+    margin-right: -${constants_1.get('space.3')};
+  }
+
+  // Move the tooltip body to the center of the object.
+  &.tooltipped-s::after,
+  &.tooltipped-n::after {
+    transform: translateX(50%);
+  }
+
+  // Tooltipped to the left
+  &.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: ${constants_1.get('colors.neutral.emphasisPlus')};
+    }
+  }
+
+  // tooltipped to the right
+  &.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: ${constants_1.get('colors.neutral.emphasisPlus')};
+    }
+  }
+
+  &.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;
+  }
+  ${constants_1.COMMON};
+  ${sx_1.default};
+`;
+function Tooltip({ direction = 'n', children, className, text, noDelay, align, wrap, ...rest }) {
+    const classes = classnames_1.default(className, `tooltipped-${direction}`, align && `tooltipped-align-${align}-2`, noDelay && 'tooltipped-no-delay', wrap && 'tooltipped-multiline');
+    return (<TooltipBase role="tooltip" aria-label={text} {...rest} className={classes}>
+      {children}
+    </TooltipBase>);
+}
+Tooltip.alignments = ['left', 'right'];
+Tooltip.directions = ['n', 'ne', 'e', 'se', 's', 'sw', 'w', 'nw'];
+exports.default = Tooltip;

package/lib/Truncate.d.ts

@@ -1,10 +1,11 @@
 import { MaxWidthProps } from 'styled-system';
+import { SystemCommonProps, SystemTypographyProps } from './constants';
 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>;
+} & MaxWidthProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.MaxWidth<import("styled-system").TLengthStyledSystem>> & SystemTypographyProps & SystemCommonProps & SxProp, never>;
 export declare type TruncateProps = ComponentProps<typeof Truncate>;
 export default Truncate;

package/lib/Truncate.js

@@ -9,6 +9,8 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _styledSystem = require("styled-system");
 
+var _constants = require("./constants");
+
 var _sx = _interopRequireDefault(require("./sx"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -16,7 +18,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const Truncate = _styledComponents.default.div.withConfig({
   displayName: "Truncate",
   componentId: "sc-1074h1l-0"
-})(["display:", ";overflow:hidden;text-overflow:ellipsis;vertical-align:", ";white-space:nowrap;", " ", " ", ";"], props => props.inline ? 'inline-block' : 'inherit', props => props.inline ? 'top' : 'initial', _styledSystem.maxWidth, props => props.expandable ? `&:hover { max-width: 10000px; }` : '', _sx.default);
+})(["", " ", " display:", ";overflow:hidden;text-overflow:ellipsis;vertical-align:", ";white-space:nowrap;", " ", " ", ";"], _constants.TYPOGRAPHY, _constants.COMMON, props => props.inline ? 'inline-block' : 'inherit', props => props.inline ? 'top' : 'initial', _styledSystem.maxWidth, props => props.expandable ? `&:hover { max-width: 10000px; }` : '', _sx.default);
 
 Truncate.defaultProps = {
   expandable: false,

package/lib/Truncate.jsx

@@ -0,0 +1,27 @@
+"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 styled_system_1 = require("styled-system");
+const constants_1 = require("./constants");
+const sx_1 = __importDefault(require("./sx"));
+const Truncate = styled_components_1.default.div `
+  ${constants_1.TYPOGRAPHY}
+  ${constants_1.COMMON}
+  display: ${props => (props.inline ? 'inline-block' : 'inherit')};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: ${props => (props.inline ? 'top' : 'initial')};
+  white-space: nowrap;
+  ${styled_system_1.maxWidth}
+  ${props => (props.expandable ? `&:hover { max-width: 10000px; }` : '')}
+  ${sx_1.default};
+`;
+Truncate.defaultProps = {
+    expandable: false,
+    inline: false,
+    maxWidth: 125
+};
+exports.default = Truncate;

package/lib/UnderlineNav.d.ts

@@ -1,5 +1,6 @@
 import * as History from 'history';
 import React from 'react';
+import { SystemCommonProps } from './constants';
 import { SxProp } from './sx';
 import { ComponentProps } from './utils/types';
 declare const UnderlineNavBase: import("styled-components").StyledComponent<"nav", any, SxProp, never>;
@@ -13,12 +14,12 @@ declare function UnderlineNav({ actions, className, align, children, full, label
 declare const UnderlineNavLink: import("styled-components").StyledComponent<"a", any, {
     to?: History.LocationDescriptor<unknown> | undefined;
     selected?: boolean | undefined;
-} & SxProp, never>;
+} & SystemCommonProps & 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>;
+    } & SystemCommonProps & SxProp, never>;
 };
 export default _default;