@primer/components 0.0.0-202182720420 → 0.0.0-202182722258

package/lib/Timeline.d.ts

@@ -374,6 +374,7 @@ declare const _default: string & import("styled-components").StyledComponentBase
             onAnimationIterationCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
             onTransitionEnd?: React.TransitionEventHandler<HTMLDivElement> | undefined;
             onTransitionEndCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
+            css?: import("@emotion/core").InterpolationWithTheme<any>;
             bg?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
             m?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
             mt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;

package/lib/Timeline.js

@@ -5,24 +5,24 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
 var _Box = _interopRequireDefault(require("./Box"));
 
 var _constants = require("./constants");
 
 var _sx = _interopRequireDefault(require("./sx"));
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 const Timeline = (0, _styledComponents.default)(_Box.default).withConfig({
@@ -34,22 +34,23 @@ const TimelineItem = (0, _styledComponents.default)(_Box.default).attrs(props =>
 })).withConfig({
   displayName: "Timeline__TimelineItem",
   componentId: "c4dq2e-1"
-})(["display:flex;position:relative;padding:", " 0;margin-left:", ";&::before{position:absolute;top:0;bottom:0;left:0;display:block;width:2px;content:'';background-color:", ";}", " ", ";", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('colors.border.muted'), props => props.condensed && (0, _styledComponents.css)(["padding-top:", ";padding-bottom:0;&:last-child{padding-bottom:", ";}.TimelineItem-Badge{height:16px;margin-top:", ";margin-bottom:", ";color:", ";background-color:", ";border:0;}"], (0, _constants.get)('space.1'), (0, _constants.get)('space.3'), (0, _constants.get)('space.2'), (0, _constants.get)('space.2'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.canvas.default')), _constants.COMMON, _sx.default);
+})(["display:flex;position:relative;padding:", " 0;margin-left:", ";&::before{position:absolute;top:0;bottom:0;left:0;display:block;width:2px;content:'';background-color:", ";}", " ", ";", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('colors.border.secondary'), props => props.condensed && (0, _styledComponents.css)(["padding-top:", ";padding-bottom:0;&:last-child{padding-bottom:", ";}.TimelineItem-Badge{height:16px;margin-top:", ";margin-bottom:", ";color:", ";background-color:", ";border:0;}"], (0, _constants.get)('space.1'), (0, _constants.get)('space.3'), (0, _constants.get)('space.2'), (0, _constants.get)('space.2'), (0, _constants.get)('colors.icon.tertiary'), (0, _constants.get)('colors.bg.canvas')), _constants.COMMON, _sx.default);
+
+var _StyledBox = (0, _styledComponents.default)(_Box.default).withConfig({
+  displayName: "Timeline___StyledBox",
+  componentId: "c4dq2e-2"
+})(["border-radius:50%;border:2px solid ", ";"], p => p._css);
 
 const TimelineBadge = props => {
   return /*#__PURE__*/_react.default.createElement(_Box.default, {
     position: "relative",
     zIndex: 1
-  }, /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
+  }, /*#__PURE__*/_react.default.createElement(_StyledBox, _extends({
     display: "flex",
     className: (0, _classnames.default)(props.className, 'TimelineItem-Badge'),
     flexShrink: 0,
-    borderRadius: "50%",
-    borderWidth: "2px",
-    borderStyle: "solid",
-    borderColor: "canvas.default",
     overflow: "hidden",
-    color: "fg.muted",
+    color: "icon.secondary",
     bg: "timeline.badgeBg",
     width: "32px",
     height: "32px",
@@ -57,18 +58,20 @@ const TimelineBadge = props => {
     ml: "-15px",
     alignItems: "center",
     justifyContent: "center"
-  }, props), props.children));
+  }, props, {
+    _css: (0, _constants.get)('colors.bg.canvas')
+  }), props.children));
 };
 
 TimelineBadge.displayName = "TimelineBadge";
 const TimelineBody = (0, _styledComponents.default)(_Box.default).withConfig({
   displayName: "Timeline__TimelineBody",
-  componentId: "c4dq2e-2"
-})(["min-width:0;max-width:100%;margin-top:", ";color:", ";flex:auto;font-size:", ";", ";"], (0, _constants.get)('space.1'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('fontSizes.1'), _sx.default);
+  componentId: "c4dq2e-3"
+})(["min-width:0;max-width:100%;margin-top:", ";color:", ";flex:auto;font-size:", ";", ";"], (0, _constants.get)('space.1'), (0, _constants.get)('colors.timeline.text'), (0, _constants.get)('fontSizes.1'), _sx.default);
 const TimelineBreak = (0, _styledComponents.default)(_Box.default).withConfig({
   displayName: "Timeline__TimelineBreak",
-  componentId: "c4dq2e-3"
-})(["position:relative z-index:1;height:24px;margin:0;margin-bottom:-", ";margin-left:0;background-color:", ";border:0;border-top:", " solid ", ";", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('colors.canvas.default'), (0, _constants.get)('space.1'), (0, _constants.get)('colors.border.default'), _sx.default);
+  componentId: "c4dq2e-4"
+})(["position:relative z-index:1;height:24px;margin:0;margin-bottom:-", ";margin-left:0;background-color:", ";border:0;border-top:", " solid ", ";", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('colors.bg.canvas'), (0, _constants.get)('space.1'), (0, _constants.get)('colors.border.primary'), _sx.default);
 TimelineItem.displayName = 'Timeline.Item';
 TimelineBadge.displayName = 'Timeline.Badge';
 TimelineBody.displayName = 'Timeline.Body';

package/lib/Token/Token.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TokenBaseProps } from './TokenBase';
+export interface TokenProps extends TokenBaseProps {
+    leadingVisual?: React.FunctionComponent<any>;
+}
+declare const Token: React.FC<TokenProps>;
+export default Token;

package/lib/Token/Token.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _constants = require("../constants");
+
+var _TokenBase = _interopRequireWildcard(require("./TokenBase"));
+
+var _RemoveTokenButton = _interopRequireDefault(require("./_RemoveTokenButton"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const tokenBorderWidthPx = 1;
+const DefaultToken = (0, _styledComponents.default)(_TokenBase.default).withConfig({
+  displayName: "Token__DefaultToken",
+  componentId: "sc-1dg52pw-0"
+})(["background-color:", ";border-color:", ";border-style:solid;border-width:1px;color:", ";padding-right:", ";&:hover{background-color:", ";box-shadow:", ";color:", ";}"], (0, _constants.get)('colors.neutral.subtle'), props => props.isSelected ? (0, _constants.get)('colors.fg.default') : (0, _constants.get)('colors.border.subtle'), props => props.isSelected ? (0, _constants.get)('colors.fg.default') : (0, _constants.get)('colors.fg.muted'), props => props.handleRemove || props.handleAdd ? 0 : undefined, props => (0, _TokenBase.isTokenHoverable)(props) ? (0, _constants.get)('colors.neutral.muted') : undefined, props => (0, _TokenBase.isTokenHoverable)(props) ? (0, _constants.get)('colors.shadow.medium') : undefined, props => (0, _TokenBase.isTokenHoverable)(props) ? (0, _constants.get)('colors.fg.default') : undefined); // TODO: make this text truncate
+
+const TokenTextContainer = (0, _styledComponents.default)('span').withConfig({
+  displayName: "Token__TokenTextContainer",
+  componentId: "sc-1dg52pw-1"
+})(["flex-grow:1;white-space:nowrap;"]);
+const LeadingVisualContainer = (0, _styledComponents.default)('span').withConfig({
+  displayName: "Token__LeadingVisualContainer",
+  componentId: "sc-1dg52pw-2"
+})(["flex-shrink:0;line-height:0;"]);
+
+const Token = ({
+  /**
+   * A function that renders a component before the token text
+   */
+  leadingVisual: LeadingVisual,
+  ...tokenBaseProps
+}) => {
+  const {
+    handleRemove,
+    text,
+    as,
+    variant
+  } = tokenBaseProps;
+  return /*#__PURE__*/_react.default.createElement(DefaultToken, tokenBaseProps, LeadingVisual ? /*#__PURE__*/_react.default.createElement(LeadingVisualContainer, null, /*#__PURE__*/_react.default.createElement(LeadingVisual, null)) : null, /*#__PURE__*/_react.default.createElement(TokenTextContainer, null, text), handleRemove ? /*#__PURE__*/_react.default.createElement(_RemoveTokenButton.default, {
+    borderOffset: tokenBorderWidthPx,
+    parentTokenTag: as || 'span',
+    tabIndex: -1,
+    onClick: handleRemove,
+    variant: variant
+  }) : null);
+};
+
+Token.displayName = "Token";
+var _default = Token;
+exports.default = _default;

package/lib/Token/TokenBase.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export declare type TokenSizeKeys = 'sm' | 'md' | 'lg' | 'xl';
+export declare const tokenSizes: Record<TokenSizeKeys, number>;
+export declare const defaultTokenSize = "md";
+export interface TokenBaseProps extends Omit<React.HTMLProps<HTMLSpanElement | HTMLButtonElement | HTMLAnchorElement>, 'size' | 'id'> {
+    as?: 'button' | 'a' | 'span';
+    handleRemove?: () => void;
+    isSelected?: boolean;
+    tabIndex?: number;
+    text: string;
+    id?: number | string;
+    variant?: TokenSizeKeys;
+}
+export declare const isTokenHoverable: ({ as, onClick, onFocus }: TokenBaseProps) => boolean;
+declare const TokenBase: import("styled-components").StyledComponent<"span", any, TokenBaseProps, never>;
+export default TokenBase;

package/lib/Token/TokenBase.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.isTokenHoverable = exports.defaultTokenSize = exports.tokenSizes = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _styledSystem = require("styled-system");
+
+var _constants = require("../constants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const tokenSizes = {
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 32
+};
+exports.tokenSizes = tokenSizes;
+const defaultTokenSize = 'md';
+exports.defaultTokenSize = defaultTokenSize;
+
+const isTokenHoverable = ({
+  as = 'span',
+  onClick,
+  onFocus
+}) => Boolean(onFocus || onClick || ['a', 'button'].includes(as));
+
+exports.isTokenHoverable = isTokenHoverable;
+const variants = (0, _styledSystem.variant)({
+  variants: {
+    sm: {
+      fontSize: 0,
+      gap: 1,
+      height: `${tokenSizes.sm}px`,
+      paddingLeft: 1,
+      paddingRight: 1
+    },
+    md: {
+      fontSize: 0,
+      gap: 1,
+      height: `${tokenSizes.md}px`,
+      paddingLeft: 2,
+      paddingRight: 2
+    },
+    lg: {
+      fontSize: 0,
+      gap: 2,
+      height: `${tokenSizes.lg}px`,
+      paddingLeft: 2,
+      paddingRight: 2
+    },
+    xl: {
+      fontSize: 1,
+      gap: 2,
+      height: `${tokenSizes.xl}px`,
+      paddingLeft: 3,
+      paddingRight: 3
+    }
+  }
+});
+
+const TokenBase = _styledComponents.default.span.withConfig({
+  displayName: "TokenBase",
+  componentId: "opajvp-0"
+})(["align-items:center;border-radius:999px;cursor:", ";display:inline-flex;font-weight:", ";text-decoration:none;white-space:nowrap;", ""], props => isTokenHoverable(props) ? 'pointer' : 'auto', (0, _constants.get)('fontWeights.bold'), variants);
+
+TokenBase.defaultProps = {
+  as: 'span',
+  variant: defaultTokenSize
+};
+var _default = TokenBase;
+exports.default = _default;

package/lib/Token/TokenLabel.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { TokenBaseProps } from './TokenBase';
+export interface TokenLabelProps extends TokenBaseProps {
+    /**
+     * The color that corresponds to the label
+     */
+    fillColor?: string;
+}
+declare const TokenLabel: React.FC<TokenLabelProps>;
+export default TokenLabel;

package/lib/Token/TokenLabel.js

@@ -0,0 +1,115 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _TokenBase = _interopRequireDefault(require("./TokenBase"));
+
+var _RemoveTokenButton = _interopRequireDefault(require("./_RemoveTokenButton"));
+
+var _tinycolor = _interopRequireDefault(require("tinycolor2"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const colorModeConfig = {
+  dark: {
+    bgOpacity: 0.18,
+    borderThreshold: 0,
+    borderOpacity: 0.3,
+    lightnessThreshold: 0.6
+  },
+  light: {
+    bgOpacity: 1,
+    borderThreshold: 0.96,
+    borderOpacity: 1,
+    lightnessThreshold: 0.453
+  }
+};
+const tokenBorderWidthPx = 1;
+const StyledTokenLabel = (0, _styledComponents.default)(_TokenBase.default).withConfig({
+  displayName: "TokenLabel__StyledTokenLabel",
+  componentId: "sc-1bdmgzv-0"
+})(["background-color:", ";border-width:", "px;border-style:solid;border-color:", ";box-shadow:", ";color:", ";overflow:hidden;padding-right:", ";position:relative;"], props => props.bgColor, tokenBorderWidthPx, props => props.borderColor, props => props.isSelected ? `0 0 0 2px ${props.bgColor}` : undefined, props => props.textColor, props => props.handleRemove ? 0 : undefined); // TODO: make this text truncate
+
+const TokenTextContainer = (0, _styledComponents.default)('span').withConfig({
+  displayName: "TokenLabel__TokenTextContainer",
+  componentId: "sc-1bdmgzv-1"
+})(["white-space:nowrap;z-index:1;"]);
+
+const TokenLabel = ({
+  fillColor,
+  isSelected,
+  ...tokenBaseProps
+}) => {
+  const {
+    handleRemove,
+    text,
+    as,
+    variant
+  } = tokenBaseProps;
+  const {
+    colorScheme
+  } = (0, _ThemeProvider.useTheme)(); // const colorScheme = 'dark';
+
+  const {
+    bgOpacity,
+    borderOpacity,
+    borderThreshold,
+    lightnessThreshold
+  } = colorModeConfig[colorScheme || 'light'];
+  let bgColor = fillColor;
+  let borderColor = fillColor;
+  let textColor = '#FFF';
+  const perceivedLightness = (0, _tinycolor.default)(fillColor).getLuminance();
+  const isFillColorLight = perceivedLightness >= lightnessThreshold;
+
+  if (colorScheme === 'dark') {
+    const lightenBy = (perceivedLightness - lightnessThreshold) * 100 * (isFillColorLight ? 1 : 0);
+    bgColor = isSelected ? (0, _tinycolor.default)(fillColor).setAlpha(bgOpacity * 1.2).toRgbString() : (0, _tinycolor.default)(fillColor).setAlpha(bgOpacity).toRgbString();
+    textColor = isSelected ? (0, _tinycolor.default)(fillColor).lighten(lightenBy + 8).toString() : (0, _tinycolor.default)(fillColor).lighten(lightenBy).toString();
+    borderColor = isSelected ? (0, _tinycolor.default)(fillColor).lighten(lightenBy).toRgbString() : (0, _tinycolor.default)(fillColor).lighten(lightenBy).setAlpha(borderOpacity).toRgbString();
+  } else {
+    const isFillColorDark = perceivedLightness < 0.1;
+    borderColor = perceivedLightness >= borderThreshold ? (0, _tinycolor.default)(fillColor).darken(25).toString() : 'transparent';
+
+    if (isFillColorLight) {
+      textColor = '#000';
+    }
+
+    if (isSelected) {
+      bgColor = isFillColorDark ? (0, _tinycolor.default)(fillColor).lighten(10).toString() : (0, _tinycolor.default)(fillColor).darken(10).toString();
+    }
+  }
+
+  return /*#__PURE__*/_react.default.createElement(StyledTokenLabel, _extends({
+    fillColor: fillColor,
+    bgColor: bgColor,
+    borderColor: borderColor,
+    textColor: textColor,
+    isSelected: isSelected
+  }, tokenBaseProps), /*#__PURE__*/_react.default.createElement(TokenTextContainer, null, text), handleRemove ? /*#__PURE__*/_react.default.createElement(_RemoveTokenButton.default, {
+    borderOffset: tokenBorderWidthPx,
+    parentTokenTag: as || 'span',
+    tabIndex: -1,
+    onClick: handleRemove,
+    variant: variant
+  }) : null);
+};
+
+TokenLabel.displayName = "TokenLabel";
+TokenLabel.defaultProps = {
+  fillColor: '#999' // TODO: pick a real color
+
+};
+var _default = TokenLabel;
+exports.default = _default;

package/lib/Token/TokenProfile.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TokenBaseProps } from './TokenBase';
+export interface TokenProfileProps extends TokenBaseProps {
+    avatarSrc: string;
+}
+declare const TokenProfile: React.FC<TokenProfileProps>;
+export default TokenProfile;

package/lib/Token/TokenProfile.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _constants = require("../constants");
+
+var _primitives = _interopRequireDefault(require("@primer/primitives"));
+
+var _TokenBase = require("./TokenBase");
+
+var _Token = _interopRequireDefault(require("./Token"));
+
+var _ = require("..");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const StyledToken = (0, _styledComponents.default)(_Token.default).withConfig({
+  displayName: "TokenProfile__StyledToken",
+  componentId: "sc-1vf9jhf-0"
+})(["padding-left:", ";"], (0, _constants.get)('space.1'));
+
+const TokenProfile = ({
+  avatarSrc,
+  variant,
+  ...rest
+}) => /*#__PURE__*/_react.default.createElement(StyledToken, _extends({
+  leadingVisual: () => /*#__PURE__*/_react.default.createElement(_.Avatar, {
+    src: avatarSrc,
+    size: _TokenBase.tokenSizes[variant || _TokenBase.defaultTokenSize] - parseInt(_primitives.default.spacing.normal.spacer[1], 10) * 2
+  }),
+  variant: variant
+}, rest));
+
+TokenProfile.displayName = "TokenProfile";
+var _default = TokenProfile;
+exports.default = _default;

package/lib/Token/_RemoveTokenButton.d.ts

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

package/lib/Token/_RemoveTokenButton.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _octiconsReact = require("@primer/octicons-react");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _TokenBase = require("./TokenBase");
+
+var _tokenButtonUtils = require("./_tokenButtonUtils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const RemoveTokenButton = _styledComponents.default.span.attrs(({
+  borderOffset,
+  parentTokenTag,
+  variant,
+  ...rest
+}) => {
+  delete rest.children;
+  return {
+    borderOffset,
+    as: parentTokenTag === 'span' ? 'button' : 'span',
+    tabIndex: -1,
+    children: /*#__PURE__*/React.createElement(_octiconsReact.XIcon, {
+      size: (0, _tokenButtonUtils.getTokenButtonIconSize)(variant)
+    }) // TODO: figure out how to set `size` using `fontSizes` from Primitives
+
+  };
+}).withConfig({
+  displayName: "_RemoveTokenButton__RemoveTokenButton",
+  componentId: "sc-14lvcw1-0"
+})(["", " ", " transform:", ";"], _tokenButtonUtils.tokenButtonStyles, _tokenButtonUtils.variants, props => `translate(${props.borderOffset}px, -${props.borderOffset}px)`);
+
+RemoveTokenButton.defaultProps = {
+  variant: _TokenBase.defaultTokenSize
+};
+var _default = RemoveTokenButton;
+exports.default = _default;

package/lib/Token/_tokenButtonUtils.d.ts

@@ -0,0 +1,9 @@
+import { TokenSizeKeys } from "./TokenBase";
+export interface TokenButtonProps {
+    borderOffset?: number;
+    parentTokenTag: 'span' | 'button' | 'a';
+    variant?: TokenSizeKeys;
+}
+export declare const variants: (...args: any[]) => any;
+export declare const tokenButtonStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+export declare const getTokenButtonIconSize: (variant?: TokenSizeKeys | undefined) => number;

package/lib/Token/_tokenButtonUtils.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTokenButtonIconSize = exports.tokenButtonStyles = exports.variants = void 0;
+
+var _styledComponents = require("styled-components");
+
+var _styledSystem = require("styled-system");
+
+var _constants = require("../constants");
+
+var _TokenBase = require("./TokenBase");
+
+const variants = (0, _styledSystem.variant)({
+  variants: {
+    sm: {
+      height: `${_TokenBase.tokenSizes.sm}px`,
+      width: `${_TokenBase.tokenSizes.sm}px`
+    },
+    md: {
+      height: `${_TokenBase.tokenSizes.md}px`,
+      width: `${_TokenBase.tokenSizes.md}px`
+    },
+    lg: {
+      height: `${_TokenBase.tokenSizes.lg}px`,
+      width: `${_TokenBase.tokenSizes.lg}px`
+    },
+    xl: {
+      height: `${_TokenBase.tokenSizes.xl}px`,
+      width: `${_TokenBase.tokenSizes.xl}px`
+    }
+  }
+});
+exports.variants = variants;
+const tokenButtonStyles = (0, _styledComponents.css)(["background-color:transparent;font-family:inherit;color:currentColor;cursor:pointer;user-select:none;appearance:none;text-decoration:none;padding:0;align-self:baseline;border:0;border-radius:999px;&:hover,&:focus{background-color:", ";}&:active{background-color:", ";}"], (0, _constants.get)('colors.fade.fg10'), (0, _constants.get)('colors.fade.fg15'));
+exports.tokenButtonStyles = tokenButtonStyles;
+
+const getTokenButtonIconSize = variant => _TokenBase.tokenSizes[variant || _TokenBase.defaultTokenSize] * 0.75;
+
+exports.getTokenButtonIconSize = getTokenButtonIconSize;

package/lib/Tooltip.js

@@ -22,7 +22,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 const TooltipBase = _styledComponents.default.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;}", ";", ";"], (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);
+})(["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.tooltip.bg'), (0, _constants.get)('fonts.normal'), (0, _constants.get)('colors.tooltip.text'), (0, _constants.get)('colors.tooltip.bg'), (0, _constants.get)('radii.1'), (0, _constants.get)('colors.tooltip.bg'), (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('colors.tooltip.bg'), (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('colors.tooltip.bg'), (0, _constants.get)('colors.tooltip.bg'), _constants.COMMON, _sx.default);
 
 function Tooltip({
   direction = 'n',

package/lib/UnderlineNav.js

@@ -25,7 +25,7 @@ const SELECTED_CLASS = 'selected';
 const UnderlineNavBase = _styledComponents.default.nav.withConfig({
   displayName: "UnderlineNav__UnderlineNavBase",
   componentId: "zrnxqt-0"
-})(["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;}", ";", ";"], (0, _constants.get)('colors.border.muted'), (0, _constants.get)('space.3'), _constants.COMMON, _sx.default);
+})(["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;}", ";", ";"], (0, _constants.get)('colors.border.secondary'), (0, _constants.get)('space.3'), _constants.COMMON, _sx.default);
 
 function UnderlineNav({
   actions,
@@ -57,7 +57,7 @@ const UnderlineNavLink = _styledComponents.default.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:", ";}}", ";", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('space.2'), (0, _constants.get)('space.3'), (0, _constants.get)('fontSizes.1'), (0, _constants.get)('lineHeights.default'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.neutral.muted'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.primer.border.active'), (0, _constants.get)('colors.fg.default'), _constants.COMMON, _sx.default);
+})(["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:", ";}}", ";", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('space.2'), (0, _constants.get)('space.3'), (0, _constants.get)('fontSizes.1'), (0, _constants.get)('lineHeights.default'), (0, _constants.get)('colors.underlinenav.text'), (0, _constants.get)('colors.underlinenav.textHover'), (0, _constants.get)('colors.border.tertiary'), (0, _constants.get)('colors.text.tertiary'), (0, _constants.get)('colors.underlinenav.textActive'), (0, _constants.get)('colors.underlinenav.borderActive'), (0, _constants.get)('colors.underlinenav.iconActive'), _constants.COMMON, _sx.default);
 
 UnderlineNavLink.displayName = 'UnderlineNav.Link';
 

package/lib/_UnstyledTextInput.d.ts

@@ -0,0 +1,2 @@
+declare const UnstyledTextInput: import("styled-components").StyledComponent<"input", any, import("./sx").SxProp, never>;
+export default UnstyledTextInput;

package/lib/_UnstyledTextInput.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _sx = _interopRequireDefault(require("./sx"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const UnstyledTextInput = _styledComponents.default.input.withConfig({
+  displayName: "_UnstyledTextInput__UnstyledTextInput",
+  componentId: "sc-1jgl33s-0"
+})(["border:0;font-size:inherit;font-family:inherit;background-color:transparent;-webkit-appearance:none;color:inherit;width:100%;&:focus{outline:0;}", ";"], _sx.default);
+
+var _default = UnstyledTextInput;
+exports.default = _default;

package/lib/hooks/useOverlay.d.ts

@@ -7,8 +7,9 @@ export declare type UseOverlaySettings = {
     onEscape: (e: KeyboardEvent) => void;
     onClickOutside: (e: TouchOrMouseEvent) => void;
     overlayRef?: React.RefObject<HTMLDivElement>;
+    preventFocusOnOpen?: boolean;
 };
 export declare type OverlayReturnProps = {
     ref: React.RefObject<HTMLDivElement>;
 };
-export declare const useOverlay: ({ overlayRef: _overlayRef, returnFocusRef, initialFocusRef, onEscape, ignoreClickRefs, onClickOutside }: UseOverlaySettings) => OverlayReturnProps;
+export declare const useOverlay: ({ overlayRef: _overlayRef, returnFocusRef, initialFocusRef, onEscape, ignoreClickRefs, onClickOutside, preventFocusOnOpen }: UseOverlaySettings) => OverlayReturnProps;