@primer/components 0.0.0-202195162314 → 0.0.0-202195163539

package/lib/Token/TokenBase.js

@@ -14,10 +14,10 @@ var _constants = require("../constants");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const tokenSizes = {
-  sm: '16px',
-  md: '20px',
-  lg: '24px',
-  xl: '32px'
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 32
 };
 exports.tokenSizes = tokenSizes;
 const defaultTokenSize = 'md';
@@ -32,67 +32,51 @@ const isTokenInteractive = ({
 
 exports.isTokenInteractive = isTokenInteractive;
 const variants = (0, _styledSystem.variant)({
-  prop: 'size',
   variants: {
     sm: {
       fontSize: 0,
       gap: 1,
-      height: tokenSizes.sm,
-      // without setting lineHeight to match height, the "x" appears vertically mis-aligned
-      lineHeight: tokenSizes.sm,
+      height: `${tokenSizes.sm}px`,
       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
+      paddingRight: 1
     },
     md: {
       fontSize: 0,
       gap: 1,
-      height: tokenSizes.md,
-      lineHeight: tokenSizes.md,
+      height: `${tokenSizes.md}px`,
       paddingLeft: 2,
-      paddingRight: 2,
-      paddingTop: 0,
-      paddingBottom: 0
+      paddingRight: 2
     },
     lg: {
       fontSize: 0,
       gap: 2,
-      height: tokenSizes.lg,
-      lineHeight: tokenSizes.lg,
+      height: `${tokenSizes.lg}px`,
       paddingLeft: 2,
-      paddingRight: 2,
-      paddingTop: 0,
-      paddingBottom: 0
+      paddingRight: 2
     },
     xl: {
       fontSize: 1,
       gap: 2,
-      height: tokenSizes.xl,
-      lineHeight: tokenSizes.xl,
+      height: `${tokenSizes.xl}px`,
       paddingLeft: 3,
-      paddingRight: 3,
-      paddingTop: 0,
-      paddingBottom: 0
+      paddingRight: 3
     }
   }
 });
 
 const TokenBase = _styledComponents.default.span.attrs(({
   text,
-  onRemove,
-  onKeyDown
+  handleRemove,
+  onKeyUp
 }) => ({
-  onKeyDown: event => {
-    onKeyDown && onKeyDown(event);
+  onKeyUp: e => {
+    onKeyUp && onKeyUp(e);
 
-    if ((event.key === 'Backspace' || event.key === 'Delete') && onRemove) {
-      onRemove();
+    if ((e.key === 'Backspace' || e.key === 'Delete') && handleRemove) {
+      handleRemove();
     }
   },
-  'aria-label': onRemove ? `${text}, press backspace or delete to remove` : undefined
+  'aria-label': handleRemove ? `${text}, press backspace or delete to remove` : undefined
 })).withConfig({
   displayName: "TokenBase",
   componentId: "opajvp-0"
@@ -100,7 +84,7 @@ const TokenBase = _styledComponents.default.span.attrs(({
 
 TokenBase.defaultProps = {
   as: 'span',
-  size: defaultTokenSize
+  variant: defaultTokenSize
 };
 var _default = TokenBase;
 exports.default = _default;

package/lib/Token/TokenLabel.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { TokenBaseProps } from './TokenBase';
+export interface TokenLabelProps extends TokenBaseProps {
+    /**
+     * The color that corresponds to the label
+     */
+    fillColor?: string;
+    /**
+     * Whether the remove button should be rendered in the token
+     */
+    hideRemoveButton?: boolean;
+}
+declare const TokenLabel: React.ForwardRefExoticComponent<Pick<TokenLabelProps, "sizes" | "color" | "content" | "height" | "translate" | "width" | "hidden" | "children" | "value" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "text" | "list" | "default" | "type" | "name" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "start" | "step" | "wrap" | "open" | "max" | "media" | "method" | "min" | "target" | "crossOrigin" | "href" | "classID" | "useMap" | "wmode" | "download" | "hrefLang" | "rel" | "alt" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "src" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dateTime" | "acceptCharset" | "action" | "autoComplete" | "encType" | "noValidate" | "manifest" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "srcSet" | "async" | "accept" | "capture" | "checked" | "maxLength" | "minLength" | "multiple" | "readOnly" | "required" | "challenge" | "keyType" | "keyParams" | "htmlFor" | "as" | "integrity" | "charSet" | "httpEquiv" | "high" | "low" | "optimum" | "reversed" | "selected" | "defer" | "nonce" | "scoped" | "cellPadding" | "cellSpacing" | "colSpan" | "headers" | "rowSpan" | "scope" | "cols" | "rows" | "kind" | "srcLang" | "poster" | "variant" | "handleRemove" | "isSelected" | "hideRemoveButton" | "fillColor"> & React.RefAttributes<HTMLElement>>;
+export default TokenLabel;

package/lib/Token/{IssueLabelToken.js → TokenLabel.js}

@@ -17,8 +17,6 @@ var _tinycolor = _interopRequireDefault(require("tinycolor2"));
 
 var _ThemeProvider = require("../ThemeProvider");
 
-var _TokenTextContainer = _interopRequireDefault(require("./_TokenTextContainer"));
-
 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); }
@@ -42,34 +40,31 @@ const colorModeConfigs = {
   }
 };
 const tokenBorderWidthPx = 1;
-const StyledIssueLabelToken = (0, _styledComponents.default)(_TokenBase.default).withConfig({
-  displayName: "IssueLabelToken__StyledIssueLabelToken",
-  componentId: "j8tie2-0"
+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:", ";color:", ";padding-right:", ";position:relative;", ""], props => props.bgColor, tokenBorderWidthPx, props => props.borderColor, props => props.textColor, props => !props.hideRemoveButton ? 0 : undefined, props => {
   if (props.isSelected) {
     return (0, _styledComponents.css)(["&:after{content:'';position:absolute;z-index:1;top:-2px;right:-2px;bottom:-2px;left:-2px;display:block;pointer-events:none;box-shadow:0 0 0 2px ", ";border-radius:999px;}"], props.bgColor);
   }
 });
-const IssueLabelToken = /*#__PURE__*/(0, _react.forwardRef)((props, forwardedRef) => {
+const TokenTextContainer = (0, _styledComponents.default)('span').withConfig({
+  displayName: "TokenLabel__TokenTextContainer",
+  componentId: "sc-1bdmgzv-1"
+})(["flex-grow:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
+const TokenLabel = /*#__PURE__*/(0, _react.forwardRef)((props, forwardedRef) => {
   const {
     as,
     fillColor,
-    onRemove,
+    handleRemove,
     id,
     isSelected,
     ref,
     text,
-    size,
+    variant,
     hideRemoveButton,
-    href,
-    onClick,
     ...rest
   } = props;
-  const interactiveTokenProps = {
-    as,
-    href,
-    onClick
-  };
   const {
     colorScheme
   } = (0, _ThemeProvider.useTheme)();
@@ -99,50 +94,48 @@ const IssueLabelToken = /*#__PURE__*/(0, _react.forwardRef)((props, forwardedRef
     }
 
     if (isSelected) {
-      bgColor = isFillColorDark ? (0, _tinycolor.default)(fillColor).lighten(10).toString() : // TODO: darken more than 10 if the fillColor is really bright and doesn't darken well
+      bgColor = isFillColorDark ? (0, _tinycolor.default)(fillColor).lighten(10).toString() // TODO: darken more than 10 if the fillColor is really bright and doesn't darken well
       //       Examples of colors that don't darken well:
       //       - #a2eeef
       //       - #ffd78e
       //       - #a4f287
-      (0, _tinycolor.default)(fillColor).darken(10).toString();
+      : (0, _tinycolor.default)(fillColor).darken(10).toString();
     }
   }
 
-  const hasMultipleActionTargets = (0, _TokenBase.isTokenInteractive)(props) && Boolean(onRemove) && !hideRemoveButton;
+  const hasMultipleActionTargets = (0, _TokenBase.isTokenInteractive)(props) && Boolean(handleRemove) && !hideRemoveButton;
 
-  const onRemoveClick = e => {
+  const handleRemoveClick = e => {
     e.stopPropagation();
-    onRemove && onRemove();
+    handleRemove && handleRemove();
   };
 
-  return /*#__PURE__*/_react.default.createElement(StyledIssueLabelToken // specific to labels
+  return /*#__PURE__*/_react.default.createElement(StyledTokenLabel // specific to labels
   , _extends({
     fillColor: fillColor,
     bgColor: bgColor,
     borderColor: borderColor,
     textColor: textColor // common token props
     ,
-    hideRemoveButton: hideRemoveButton || !onRemove,
-    onRemove: onRemove,
+    as: as,
+    hideRemoveButton: hideRemoveButton || !handleRemove,
+    handleRemove: handleRemove,
     id: id === null || id === void 0 ? void 0 : id.toString(),
     isSelected: isSelected,
     ref: forwardedRef,
     text: text,
-    size: size
-  }, !hasMultipleActionTargets ? interactiveTokenProps : {}, rest), /*#__PURE__*/_react.default.createElement(_TokenTextContainer.default, hasMultipleActionTargets ? interactiveTokenProps : {}, text), !hideRemoveButton && onRemove ? /*#__PURE__*/_react.default.createElement(_RemoveTokenButton.default, {
+    variant: variant
+  }, rest), /*#__PURE__*/_react.default.createElement(TokenTextContainer, null, text), !hideRemoveButton && handleRemove ? /*#__PURE__*/_react.default.createElement(_RemoveTokenButton.default, {
     borderOffset: tokenBorderWidthPx,
-    onClick: onRemoveClick,
-    size: size,
-    "aria-hidden": hasMultipleActionTargets ? 'true' : 'false',
-    isParentInteractive: (0, _TokenBase.isTokenInteractive)(props),
-    sx: hasMultipleActionTargets ? {
-      position: 'relative',
-      zIndex: '1'
-    } : {}
+    parentTokenTag: as || 'span',
+    tabIndex: -1,
+    onClick: handleRemoveClick,
+    variant: variant,
+    "aria-hidden": hasMultipleActionTargets ? "true" : "false"
   }) : null);
 });
-IssueLabelToken.defaultProps = {
+TokenLabel.defaultProps = {
   fillColor: '#999'
 };
-var _default = IssueLabelToken;
+var _default = TokenLabel;
 exports.default = _default;

package/lib/Token/{ProfileToken.d.ts → TokenProfile.d.ts}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TokenBaseProps } from './TokenBase';
-export interface ProfileTokenProps extends TokenBaseProps {
+export interface TokenProfileProps extends TokenBaseProps {
     avatarSrc: string;
 }
-declare const ProfileToken: React.ForwardRefExoticComponent<Pick<ProfileTokenProps, "sizes" | "color" | "content" | "height" | "translate" | "width" | "hidden" | "children" | "value" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "text" | "list" | "default" | "type" | "name" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "start" | "step" | "size" | "wrap" | "open" | "max" | "media" | "method" | "min" | "target" | "crossOrigin" | "href" | "classID" | "useMap" | "wmode" | "download" | "hrefLang" | "rel" | "alt" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "src" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dateTime" | "acceptCharset" | "action" | "autoComplete" | "encType" | "noValidate" | "manifest" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "srcSet" | "async" | "accept" | "capture" | "checked" | "maxLength" | "minLength" | "multiple" | "readOnly" | "required" | "challenge" | "keyType" | "keyParams" | "htmlFor" | "as" | "integrity" | "charSet" | "httpEquiv" | "high" | "low" | "optimum" | "reversed" | "selected" | "defer" | "nonce" | "scoped" | "cellPadding" | "cellSpacing" | "colSpan" | "headers" | "rowSpan" | "scope" | "cols" | "rows" | "kind" | "srcLang" | "poster" | "onRemove" | "isSelected" | "avatarSrc"> & React.RefAttributes<HTMLElement>>;
-export default ProfileToken;
+declare const TokenProfile: React.ForwardRefExoticComponent<Pick<TokenProfileProps, "sizes" | "color" | "content" | "height" | "translate" | "width" | "hidden" | "children" | "value" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "text" | "list" | "default" | "type" | "name" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "start" | "step" | "wrap" | "open" | "max" | "media" | "method" | "min" | "target" | "crossOrigin" | "href" | "classID" | "useMap" | "wmode" | "download" | "hrefLang" | "rel" | "alt" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "src" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dateTime" | "acceptCharset" | "action" | "autoComplete" | "encType" | "noValidate" | "manifest" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "srcSet" | "async" | "accept" | "capture" | "checked" | "maxLength" | "minLength" | "multiple" | "readOnly" | "required" | "challenge" | "keyType" | "keyParams" | "htmlFor" | "as" | "integrity" | "charSet" | "httpEquiv" | "high" | "low" | "optimum" | "reversed" | "selected" | "defer" | "nonce" | "scoped" | "cellPadding" | "cellSpacing" | "colSpan" | "headers" | "rowSpan" | "scope" | "cols" | "rows" | "kind" | "srcLang" | "poster" | "variant" | "handleRemove" | "isSelected" | "avatarSrc"> & React.RefAttributes<HTMLElement>>;
+export default TokenProfile;

package/lib/Token/{ProfileToken.js → TokenProfile.js}

@@ -28,23 +28,23 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && 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: "ProfileToken__StyledToken",
-  componentId: "sg4u2f-0"
+  displayName: "TokenProfile__StyledToken",
+  componentId: "sc-1vf9jhf-0"
 })(["padding-left:", ";"], (0, _constants.get)('space.1'));
-const ProfileToken = /*#__PURE__*/(0, _react.forwardRef)(({
+const TokenProfile = /*#__PURE__*/(0, _react.forwardRef)(({
   avatarSrc,
   id,
   ref,
-  size,
+  variant,
   ...rest
 }, forwardedRef) => /*#__PURE__*/_react.default.createElement(StyledToken, _extends({
   leadingVisual: () => /*#__PURE__*/_react.default.createElement(_.Avatar, {
     src: avatarSrc,
-    size: parseInt(_TokenBase.tokenSizes[size || _TokenBase.defaultTokenSize], 10) - parseInt(_primitives.default.spacing.normal.spacer[1], 10) * 2
+    size: _TokenBase.tokenSizes[variant || _TokenBase.defaultTokenSize] - parseInt(_primitives.default.spacing.normal.spacer[1], 10) * 2
   }),
-  size: size,
+  variant: variant,
   id: id === null || id === void 0 ? void 0 : id.toString(),
   ref: forwardedRef
 }, rest)));
-var _default = ProfileToken;
+var _default = TokenProfile;
 exports.default = _default;

package/lib/Token/_RemoveTokenButton.d.ts

@@ -1,12 +1,3 @@
-/// <reference types="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>>;
+import { TokenButtonProps } from './_tokenButtonUtils';
+declare const RemoveTokenButton: import("styled-components").StyledComponent<"span", any, TokenButtonProps, never>;
 export default RemoveTokenButton;

package/lib/Token/_RemoveTokenButton.js

@@ -9,67 +9,36 @@ var _octiconsReact = require("@primer/octicons-react");
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _styledSystem = require("styled-system");
-
-var _constants = require("../constants");
-
-var _sx = _interopRequireDefault(require("../sx"));
-
 var _TokenBase = require("./TokenBase");
 
-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 variants = (0, _styledSystem.variant)({
-  prop: 'size',
-  variants: {
-    sm: {
-      height: _TokenBase.tokenSizes.sm,
-      width: _TokenBase.tokenSizes.sm
-    },
-    md: {
-      height: _TokenBase.tokenSizes.md,
-      width: _TokenBase.tokenSizes.md
-    },
-    lg: {
-      height: _TokenBase.tokenSizes.lg,
-      width: _TokenBase.tokenSizes.lg
-    },
-    xl: {
-      height: _TokenBase.tokenSizes.xl,
-      width: _TokenBase.tokenSizes.xl
-    }
-  }
-});
-
-const getTokenButtonIconSize = variant => parseInt(_TokenBase.tokenSizes[variant || _TokenBase.defaultTokenSize], 10) * 0.75;
+var _tokenButtonUtils = require("./_tokenButtonUtils");
 
-const StyledTokenButton = _styledComponents.default.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)`, (0, _constants.get)('colors.fade.fg10'), (0, _constants.get)('colors.fade.fg15'), variants, _sx.default);
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const RemoveTokenButton = ({
-  "aria-label": ariaLabel,
-  isParentInteractive,
-  size,
-  children,
+const RemoveTokenButton = _styledComponents.default.span.attrs(({
+  borderOffset,
+  parentTokenTag,
+  variant,
+  parentTokenIsInteractive,
   ...rest
 }) => {
-  return /*#__PURE__*/React.createElement(StyledTokenButton, _extends({
-    as: isParentInteractive ? 'span' : 'button',
-    tabIndex: isParentInteractive ? -1 : undefined,
-    "aria-label": !isParentInteractive ? 'Remove token' : undefined,
-    size: size
-  }, rest), /*#__PURE__*/React.createElement(_octiconsReact.XIcon, {
-    size: getTokenButtonIconSize(size)
-  }));
-};
+  delete rest.children;
+  return {
+    borderOffset,
+    as: parentTokenIsInteractive ? 'span' : 'button',
+    tabIndex: parentTokenIsInteractive ? -1 : undefined,
+    'aria-label': !parentTokenIsInteractive ? 'Remove token' : undefined,
+    children: /*#__PURE__*/React.createElement(_octiconsReact.XIcon, {
+      size: (0, _tokenButtonUtils.getTokenButtonIconSize)(variant)
+    })
+  };
+}).withConfig({
+  displayName: "_RemoveTokenButton__RemoveTokenButton",
+  componentId: "sc-14lvcw1-0"
+})(["", " ", " transform:", ";"], _tokenButtonUtils.tokenButtonStyles, _tokenButtonUtils.variants, props => `translate(${props.borderOffset}px, -${props.borderOffset}px)`);
 
-RemoveTokenButton.displayName = "RemoveTokenButton";
 RemoveTokenButton.defaultProps = {
-  size: _TokenBase.defaultTokenSize
+  variant: _TokenBase.defaultTokenSize
 };
 var _default = RemoveTokenButton;
 exports.default = _default;

package/lib/Token/_tokenButtonUtils.d.ts

@@ -0,0 +1,10 @@
+import { TokenSizeKeys } from "./TokenBase";
+export interface TokenButtonProps {
+    borderOffset?: number;
+    parentTokenTag: 'span' | 'button' | 'a';
+    variant?: TokenSizeKeys;
+    parentTokenIsInteractive?: boolean;
+}
+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;display:inline-flex;justify-content:center;align-items:center;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/Token/index.d.ts

@@ -1,3 +1,3 @@
 export { default } from './Token';
-export { default as IssueLabelToken } from './IssueLabelToken';
-export { default as ProfileToken } from './ProfileToken';
+export { default as TokenLabel } from './TokenLabel';
+export { default as TokenProfile } from './TokenProfile';

package/lib/Token/index.js

@@ -9,23 +9,23 @@ Object.defineProperty(exports, "default", {
     return _Token.default;
   }
 });
-Object.defineProperty(exports, "IssueLabelToken", {
+Object.defineProperty(exports, "TokenLabel", {
   enumerable: true,
   get: function () {
-    return _IssueLabelToken.default;
+    return _TokenLabel.default;
   }
 });
-Object.defineProperty(exports, "ProfileToken", {
+Object.defineProperty(exports, "TokenProfile", {
   enumerable: true,
   get: function () {
-    return _ProfileToken.default;
+    return _TokenProfile.default;
   }
 });
 
 var _Token = _interopRequireDefault(require("./Token"));
 
-var _IssueLabelToken = _interopRequireDefault(require("./IssueLabelToken"));
+var _TokenLabel = _interopRequireDefault(require("./TokenLabel"));
 
-var _ProfileToken = _interopRequireDefault(require("./ProfileToken"));
+var _TokenProfile = _interopRequireDefault(require("./TokenProfile"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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/index.d.ts

@@ -98,11 +98,12 @@ export { default as TabNav } from './TabNav';
 export type { TabNavProps, TabNavLinkProps } from './TabNav';
 export { default as TextInput } from './TextInput';
 export type { TextInputProps } from './TextInput';
+export { default as TextInputWithTokens } from './TextInputWithTokens';
 export { default as Text } from './Text';
 export type { TextProps } from './Text';
 export { default as Timeline } from './Timeline';
 export type { TimelineProps, TimelineBadgeProps, TimelineBodyProps, TimelineBreakProps, TimelineItemsProps } from './Timeline';
-export { default as Token, IssueLabelToken, ProfileToken } from './Token';
+export { default as Token, TokenLabel, TokenProfile } from './Token';
 export { default as Tooltip } from './Tooltip';
 export type { TooltipProps } from './Tooltip';
 export { default as Truncate } from './Truncate';

package/lib/index.js

@@ -429,6 +429,12 @@ Object.defineProperty(exports, "TextInput", {
     return _TextInput.default;
   }
 });
+Object.defineProperty(exports, "TextInputWithTokens", {
+  enumerable: true,
+  get: function () {
+    return _TextInputWithTokens.default;
+  }
+});
 Object.defineProperty(exports, "Text", {
   enumerable: true,
   get: function () {
@@ -447,16 +453,16 @@ Object.defineProperty(exports, "Token", {
     return _Token.default;
   }
 });
-Object.defineProperty(exports, "IssueLabelToken", {
+Object.defineProperty(exports, "TokenLabel", {
   enumerable: true,
   get: function () {
-    return _Token.IssueLabelToken;
+    return _Token.TokenLabel;
   }
 });
-Object.defineProperty(exports, "ProfileToken", {
+Object.defineProperty(exports, "TokenProfile", {
   enumerable: true,
   get: function () {
-    return _Token.ProfileToken;
+    return _Token.TokenProfile;
   }
 });
 Object.defineProperty(exports, "Tooltip", {
@@ -600,6 +606,8 @@ var _TabNav = _interopRequireDefault(require("./TabNav"));
 
 var _TextInput = _interopRequireDefault(require("./TextInput"));
 
+var _TextInputWithTokens = _interopRequireDefault(require("./TextInputWithTokens"));
+
 var _Text = _interopRequireDefault(require("./Text"));
 
 var _Timeline = _interopRequireDefault(require("./Timeline"));