@primer/components 0.0.0-202192719508 → 0.0.0-2021927202224

package/lib-esm/ActionList/Item.js

@@ -154,6 +154,7 @@ export const Item = /*#__PURE__*/React.forwardRef((itemProps, ref) => {
     selectionVariant,
     leadingVisual: LeadingVisual,
     trailingIcon: TrailingIcon,
+    trailingVisual: TrailingVisual,
     trailingText,
     variant = 'default',
     showDivider,
@@ -245,7 +246,10 @@ export const Item = /*#__PURE__*/React.forwardRef((itemProps, ref) => {
     title: description,
     inline: true,
     maxWidth: "100%"
-  }, description)) : null), TrailingIcon || trailingText ? /*#__PURE__*/React.createElement(TrailingContent, {
+  }, description)) : null), TrailingVisual ? /*#__PURE__*/React.createElement(TrailingContent, {
+    variant: variant,
+    disabled: disabled
+  }, typeof TrailingVisual === 'function' ? /*#__PURE__*/React.createElement(TrailingVisual, null) : TrailingVisual) : TrailingIcon || trailingText ? /*#__PURE__*/React.createElement(TrailingContent, {
     variant: variant,
     disabled: disabled
   }, trailingText, TrailingIcon && /*#__PURE__*/React.createElement(TrailingIcon, null)) : null));

package/lib-esm/AnchoredOverlay/AnchoredOverlay.d.ts

@@ -26,8 +26,6 @@ interface AnchoredOverlayPropsWithoutAnchor {
      */
     anchorRef: React.RefObject<HTMLElement>;
 }
-export declare type OverlayOpenGesture = 'anchor-click' | 'anchor-key-press';
-export declare type OverlayCloseGesture = 'anchor-click' | 'click-outside' | 'escape';
 export declare type AnchoredOverlayWrapperAnchorProps = Partial<AnchoredOverlayPropsWithAnchor> | AnchoredOverlayPropsWithoutAnchor;
 interface AnchoredOverlayBaseProps extends Pick<OverlayProps, 'height' | 'width'> {
     /**
@@ -37,11 +35,11 @@ interface AnchoredOverlayBaseProps extends Pick<OverlayProps, 'height' | 'width'
     /**
      * A callback which is called whenever the overlay is currently closed and an "open gesture" is detected.
      */
-    onOpen?: (gesture: OverlayOpenGesture) => unknown;
+    onOpen?: (gesture: 'anchor-click' | 'anchor-key-press') => unknown;
     /**
      * A callback which is called whenever the overlay is currently open and a "close gesture" is detected.
      */
-    onClose?: (gesture: OverlayCloseGesture) => unknown;
+    onClose?: (gesture: 'anchor-click' | 'click-outside' | 'escape') => unknown;
     /**
      * Props to be spread on the internal `Overlay` component.
      */

package/lib-esm/Autocomplete/Autocomplete.d.ts

@@ -12,14 +12,12 @@ export type { AutocompleteOverlayProps } from './AutocompleteOverlay';
 declare const _default: React.FC<{
     id?: string | undefined;
 }> & {
-    Input: import("@radix-ui/react-polymorphic").ForwardRefComponent<React.ForwardRefExoticComponent<Pick<Omit<Pick<({
+    Input: import("@radix-ui/react-polymorphic").ForwardRefComponent<React.ForwardRefExoticComponent<Pick<Omit<Pick<{
         [x: string]: any;
         [x: number]: any;
     } & {
         theme?: any;
-    } & ({} | {
-        children?: React.ReactNode;
-    })) & {
+    } & {
         as?: string | React.ComponentType<any> | undefined;
         forwardedAs?: string | React.ComponentType<any> | undefined;
     }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "className" | "block" | "icon" | "sx" | "disabled" | "variant" | "contrast"> & {

package/lib-esm/Autocomplete/AutocompleteInput.d.ts

@@ -4,14 +4,12 @@ import { ComponentProps } from '../utils/types';
 declare type InternalAutocompleteInputProps = {
     as?: React.ComponentType<any>;
 };
-declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRefExoticComponent<Pick<Omit<Pick<({
+declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRefExoticComponent<Pick<Omit<Pick<{
     [x: string]: any;
     [x: number]: any;
 } & {
     theme?: any;
-} & ({} | {
-    children?: React.ReactNode;
-})) & {
+} & {
     as?: string | React.ComponentType<any> | undefined;
     forwardedAs?: string | React.ComponentType<any> | undefined;
 }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "className" | "block" | "icon" | "sx" | "disabled" | "variant" | "contrast"> & {

package/lib-esm/Breadcrumbs.d.ts

@@ -1,24 +1,25 @@
 import * as History from 'history';
 import React from 'react';
-import { SystemCommonProps, SystemFlexProps } from './constants';
 import { SxProp } from './sx';
 import { ComponentProps } from './utils/types';
-declare const BreadcrumbsBase: import("styled-components").StyledComponent<"nav", any, SystemFlexProps & SystemCommonProps & SxProp, never>;
-export declare type BreadcrumbsProps = ComponentProps<typeof BreadcrumbsBase>;
-declare function Breadcrumbs({ className, children, theme, ...rest }: React.PropsWithChildren<BreadcrumbsProps>): JSX.Element;
+declare const BreadcrumbsBase: import("styled-components").StyledComponent<"nav", any, SxProp, never>;
+export declare type BreadcrumbsProps = React.PropsWithChildren<{
+    className?: string;
+} & SxProp>;
+declare function Breadcrumbs({ className, children, sx: sxProp }: React.PropsWithChildren<BreadcrumbsProps>): JSX.Element;
 declare namespace Breadcrumbs {
     var displayName: string;
 }
 declare const BreadcrumbsItem: import("styled-components").StyledComponent<"a", any, {
     to?: History.LocationDescriptor<unknown> | undefined;
     selected?: boolean | undefined;
-} & SystemCommonProps & SxProp, never>;
+} & SxProp, never>;
 export declare type BreadcrumbsItemProps = ComponentProps<typeof BreadcrumbsItem>;
 declare const _default: typeof Breadcrumbs & {
     Item: import("styled-components").StyledComponent<"a", any, {
         to?: History.LocationDescriptor<unknown> | undefined;
         selected?: boolean | undefined;
-    } & SystemCommonProps & SxProp, never>;
+    } & SxProp, never>;
 };
 export default _default;
 /**
@@ -28,7 +29,7 @@ export declare const Breadcrumb: typeof Breadcrumbs & {
     Item: import("styled-components").StyledComponent<"a", any, {
         to?: History.LocationDescriptor<unknown> | undefined;
         selected?: boolean | undefined;
-    } & SystemCommonProps & SxProp, never>;
+    } & SxProp, never>;
 };
 /**
  * @deprecated Use the `BreadcrumbsProps` type instead

package/lib-esm/Breadcrumbs.js

@@ -1,11 +1,9 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import classnames from 'classnames'; // eslint-disable-next-line import/no-namespace
 
 import React from 'react';
 import styled from 'styled-components';
 import Box from './Box';
-import { COMMON, FLEX, get } from './constants';
+import { get } from './constants';
 import sx from './sx';
 const SELECTED_CLASS = 'selected';
 const Wrapper = styled.li.withConfig({
@@ -15,22 +13,19 @@ const Wrapper = styled.li.withConfig({
 const BreadcrumbsBase = styled.nav.withConfig({
   displayName: "Breadcrumbs__BreadcrumbsBase",
   componentId: "hwwoo0-1"
-})(["display:flex;justify-content:space-between;", ";", ";", ";"], COMMON, FLEX, sx);
+})(["display:flex;justify-content:space-between;", ";"], sx);
 
 function Breadcrumbs({
   className,
   children,
-  theme,
-  ...rest
+  sx: sxProp
 }) {
-  const wrappedChildren = React.Children.map(children, child => /*#__PURE__*/React.createElement(Wrapper, {
-    theme: theme
-  }, child));
-  return /*#__PURE__*/React.createElement(BreadcrumbsBase, _extends({
+  const wrappedChildren = React.Children.map(children, child => /*#__PURE__*/React.createElement(Wrapper, null, child));
+  return /*#__PURE__*/React.createElement(BreadcrumbsBase, {
     className: className,
     "aria-label": "Breadcrumbs",
-    theme: theme
-  }, rest), /*#__PURE__*/React.createElement(Box, {
+    sx: sxProp
+  }, /*#__PURE__*/React.createElement(Box, {
     as: "ol",
     my: 0,
     pl: 0
@@ -45,7 +40,7 @@ const BreadcrumbsItem = styled.a.attrs(props => ({
 })).withConfig({
   displayName: "Breadcrumbs__BreadcrumbsItem",
   componentId: "hwwoo0-2"
-})(["color:", ";display:inline-block;font-size:", ";text-decoration:none;&:hover{text-decoration:underline;}&.selected{color:", ";pointer-events:none;}", " ", ";"], get('colors.accent.fg'), get('fontSizes.1'), get('colors.fg.default'), COMMON, sx);
+})(["color:", ";display:inline-block;font-size:", ";text-decoration:none;&:hover{text-decoration:underline;}&.selected{color:", ";pointer-events:none;}", ";"], get('colors.accent.fg'), get('fontSizes.1'), get('colors.fg.default'), sx);
 Breadcrumbs.displayName = 'Breadcrumbs';
 BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
 export default Object.assign(Breadcrumbs, {

package/lib-esm/SelectMenu/SelectMenu.d.ts

@@ -32,14 +32,12 @@ declare const _default: React.ForwardRefExoticComponent<Pick<SelectMenuInternalP
     Divider: import("styled-components").StyledComponent<"div", any, SystemCommonProps & SxProp, never>;
     Filter: React.ForwardRefExoticComponent<Pick<{
         value?: string | undefined;
-    } & Pick<Omit<Pick<({
+    } & Pick<Omit<Pick<{
         [x: string]: any;
         [x: number]: any;
     } & {
         theme?: any;
-    } & ({} | {
-        children?: React.ReactNode;
-    })) & {
+    } & {
         as?: string | React.ComponentType<any> | undefined;
         forwardedAs?: string | React.ComponentType<any> | undefined;
     }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "className" | "block" | "icon" | "sx" | "disabled" | "variant" | "contrast"> & {

package/lib-esm/TextInputWithTokens.d.ts

@@ -32,14 +32,16 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<{
      * Whether the remove buttons should be rendered in the tokens
      */
     hideTokenRemoveButtons?: boolean | undefined;
-} & Pick<Omit<Pick<({
+    /**
+     * The number of tokens to display before truncating
+     */
+    visibleTokenCount?: number | undefined;
+} & Pick<Omit<Pick<{
     [x: string]: any;
     [x: number]: any;
 } & {
     theme?: any;
-} & ({} | {
-    children?: React.ReactNode;
-})) & {
+} & {
     as?: string | React.ComponentType<any> | undefined;
     forwardedAs?: string | React.ComponentType<any> | undefined;
 }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "className" | "block" | "icon" | "sx" | "disabled" | "variant" | "contrast"> & {

package/lib-esm/TextInputWithTokens.js

@@ -9,9 +9,17 @@ import Token from './Token/Token';
 import { useProvidedRefOrCreate } from './hooks';
 import UnstyledTextInput from './_UnstyledTextInput';
 import TextInputWrapper from './_TextInputWrapper';
-import Box from './Box'; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+import Box from './Box';
+import Text from './Text';
+import { isFocusable } from './utils/iterateFocusableElements'; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+const overflowCountFontSizeMap = {
+  small: 0,
+  medium: 1,
+  large: 1,
+  extralarge: 2
+}; // using forwardRef is important so that other components (ex. Autocomplete) can use the ref
 
-// using forwardRef is important so that other components (ex. Autocomplete) can use the ref
 function TextInputWithTokensInnerComponent({
   icon: IconComponent,
   contrast,
@@ -31,9 +39,11 @@ function TextInputWithTokensInnerComponent({
   minWidth: minWidthProp,
   maxWidth: maxWidthProp,
   variant: variantProp,
+  visibleTokenCount,
   ...rest
 }, externalRef) {
   const {
+    onBlur,
     onFocus,
     onKeyDown,
     ...inputPropsRest
@@ -42,6 +52,7 @@ function TextInputWithTokensInnerComponent({
   const localInputRef = useRef(null);
   const combinedInputRef = useCombinedRefs(localInputRef, ref);
   const [selectedTokenIndex, setSelectedTokenIndex] = useState();
+  const [tokensAreTruncated, setTokensAreTruncated] = useState(Boolean(visibleTokenCount));
   const {
     containerRef
   } = useFocusZone({
@@ -76,14 +87,25 @@ function TextInputWithTokensInnerComponent({
   }, [selectedTokenIndex]);
 
   const handleTokenRemove = tokenId => {
-    onTokenRemove(tokenId);
+    onTokenRemove(tokenId); // HACK: wait a tick for the the token node to be removed from the DOM
 
-    if (selectedTokenIndex) {
-      var _containerRef$current2;
+    setTimeout(() => {
+      var _containerRef$current2, _containerRef$current3;
 
-      const nextElementToFocus = (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.children[selectedTokenIndex];
-      nextElementToFocus.focus();
-    }
+      const nextElementToFocus = (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.children[selectedTokenIndex || 0]; // when removing the first token by keying "Backspace" or "Delete",
+      // `nextFocusableElement` is the div that wraps the input
+
+      const firstFocusable = nextElementToFocus && isFocusable(nextElementToFocus) ? nextElementToFocus : Array.from(((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.children) || []).find(el => isFocusable(el));
+
+      if (firstFocusable) {
+        firstFocusable.focus();
+      } else {
+        var _ref$current;
+
+        // if there are no tokens left, focus the input
+        (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
+      }
+    }, 0);
   };
 
   const handleTokenFocus = tokenIndex => () => {
@@ -91,30 +113,55 @@ function TextInputWithTokensInnerComponent({
   };
 
   const handleTokenBlur = () => {
-    setSelectedTokenIndex(undefined);
+    setSelectedTokenIndex(undefined); // HACK: wait a tick and check the focused element before hiding truncated tokens
+    // this prevents the tokens from hiding when the user is moving focus between tokens,
+    // but still hides the tokens when the user blurs the token by tabbing out or clicking somewhere else on the page
+
+    setTimeout(() => {
+      var _containerRef$current4;
+
+      if (!((_containerRef$current4 = containerRef.current) !== null && _containerRef$current4 !== void 0 && _containerRef$current4.contains(document.activeElement)) && visibleTokenCount) {
+        setTokensAreTruncated(true);
+      }
+    }, 0);
   };
 
-  const handleTokenKeyUp = e => {
-    if (e.key === 'Escape') {
-      var _ref$current;
+  const handleTokenKeyUp = event => {
+    if (event.key === 'Escape') {
+      var _ref$current2;
 
-      (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
+      (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.focus();
     }
   };
 
-  const handleInputFocus = e => {
-    onFocus && onFocus(e);
+  const handleInputFocus = event => {
+    onFocus && onFocus(event);
     setSelectedTokenIndex(undefined);
+    visibleTokenCount && setTokensAreTruncated(false);
+  };
+
+  const handleInputBlur = event => {
+    onBlur && onBlur(event); // HACK: wait a tick and check the focused element before hiding truncated tokens
+    // this prevents the tokens from hiding when the user is moving focus from the input to a token,
+    // but still hides the tokens when the user blurs the input by tabbing out or clicking somewhere else on the page
+
+    setTimeout(() => {
+      var _containerRef$current5;
+
+      if (!((_containerRef$current5 = containerRef.current) !== null && _containerRef$current5 !== void 0 && _containerRef$current5.contains(document.activeElement)) && visibleTokenCount) {
+        setTokensAreTruncated(true);
+      }
+    }, 0);
   };
 
   const handleInputKeyDown = e => {
-    var _ref$current2;
+    var _ref$current3;
 
     if (onKeyDown) {
       onKeyDown(e);
     }
 
-    if ((_ref$current2 = ref.current) !== null && _ref$current2 !== void 0 && _ref$current2.value) {
+    if ((_ref$current3 = ref.current) !== null && _ref$current3 !== void 0 && _ref$current3.value) {
       return;
     }
 
@@ -135,13 +182,24 @@ function TextInputWithTokensInnerComponent({
 
 
       setTimeout(() => {
-        var _ref$current3;
+        var _ref$current4;
 
-        (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.select();
+        (_ref$current4 = ref.current) === null || _ref$current4 === void 0 ? void 0 : _ref$current4.select();
       }, 0);
     }
   };
 
+  const focusInput = () => {
+    var _combinedInputRef$cur;
+
+    (_combinedInputRef$cur = combinedInputRef.current) === null || _combinedInputRef$cur === void 0 ? void 0 : _combinedInputRef$cur.focus();
+  };
+
+  const preventTokenClickPropagation = event => {
+    event.stopPropagation();
+  };
+
+  const visibleTokens = tokensAreTruncated ? tokens.slice(0, visibleTokenCount) : tokens;
   return /*#__PURE__*/React.createElement(TextInputWrapper, {
     block: block,
     className: className,
@@ -153,15 +211,8 @@ function TextInputWithTokensInnerComponent({
     minWidth: minWidthProp,
     maxWidth: maxWidthProp,
     variant: variantProp,
-    ref: containerRef,
-    sx: {
-      alignItems: 'center',
-      flexWrap: preventTokenWrapping ? 'nowrap' : 'wrap',
-      gap: '0.25rem',
-      '> *': {
-        flexShrink: 0
-      },
-      ...(block ? {
+    onClick: focusInput,
+    sx: { ...(block ? {
         display: 'flex',
         width: '100%'
       } : {}),
@@ -174,6 +225,21 @@ function TextInputWithTokensInnerComponent({
       } : {}),
       ...sxProp
     }
+  }, /*#__PURE__*/React.createElement(Box, {
+    ref: containerRef,
+    display: "flex",
+    sx: {
+      alignItems: 'center',
+      flexWrap: preventTokenWrapping ? 'nowrap' : 'wrap',
+      marginLeft: '-0.25rem',
+      marginBottom: '-0.25rem',
+      flexGrow: 1,
+      '> *': {
+        flexShrink: 0,
+        marginLeft: '0.25rem',
+        marginBottom: '0.25rem'
+      }
+    }
   }, /*#__PURE__*/React.createElement(Box, {
     sx: {
       order: 1,
@@ -185,12 +251,13 @@ function TextInputWithTokensInnerComponent({
     ref: combinedInputRef,
     disabled: disabled,
     onFocus: handleInputFocus,
+    onBlur: handleInputBlur,
     onKeyDown: handleInputKeyDown,
     type: "text",
     sx: {
       height: '100%'
     }
-  }, inputPropsRest))), tokens.length && TokenComponent ? tokens.map(({
+  }, inputPropsRest))), TokenComponent ? visibleTokens.map(({
     id,
     ...tokenRest
   }, i) => /*#__PURE__*/React.createElement(TokenComponent, _extends({
@@ -198,6 +265,7 @@ function TextInputWithTokensInnerComponent({
     onFocus: handleTokenFocus(i),
     onBlur: handleTokenBlur,
     onKeyUp: handleTokenKeyUp,
+    onClick: preventTokenClickPropagation,
     isSelected: selectedTokenIndex === i,
     onRemove: () => {
       handleTokenRemove(id);
@@ -205,7 +273,10 @@ function TextInputWithTokensInnerComponent({
     hideRemoveButton: hideTokenRemoveButtons,
     size: size,
     tabIndex: 0
-  }, tokenRest))) : null);
+  }, tokenRest))) : null, tokensAreTruncated ? /*#__PURE__*/React.createElement(Text, {
+    color: "fg.muted",
+    fontSize: size && overflowCountFontSizeMap[size]
+  }, "+", tokens.length - visibleTokens.length) : null));
 }
 
 TextInputWithTokensInnerComponent.displayName = "TextInputWithTokensInnerComponent";

package/lib-esm/Token/Token.js

@@ -19,7 +19,16 @@ const DefaultTokenStyled = styled(TokenBase).withConfig({
 const LeadingVisualContainer = styled('span').withConfig({
   displayName: "Token__LeadingVisualContainer",
   componentId: "sc-1dg52pw-1"
-})(["flex-shrink:0;line-height:0;"]);
+})(["flex-shrink:0;line-height:0;", ""], props => {
+  switch (props.size) {
+    case 'large':
+    case 'extralarge':
+      return css(["margin-right:", ";"], get('space.2'));
+
+    default:
+      return css(["margin-right:", ";"], get('space.1'));
+  }
+});
 const Token = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     as,
@@ -54,7 +63,9 @@ const Token = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     isTokenInteractive: isTokenInteractive(props)
   }, !hasMultipleActionTargets ? interactiveTokenProps : {}, rest, {
     ref: forwardedRef
-  }), LeadingVisual ? /*#__PURE__*/React.createElement(LeadingVisualContainer, null, /*#__PURE__*/React.createElement(LeadingVisual, null)) : null, /*#__PURE__*/React.createElement(TokenTextContainer, hasMultipleActionTargets ? interactiveTokenProps : {}, text), !hideRemoveButton && onRemove ? /*#__PURE__*/React.createElement(RemoveTokenButton, {
+  }), LeadingVisual ? /*#__PURE__*/React.createElement(LeadingVisualContainer, {
+    size: size
+  }, /*#__PURE__*/React.createElement(LeadingVisual, null)) : null, /*#__PURE__*/React.createElement(TokenTextContainer, hasMultipleActionTargets ? interactiveTokenProps : {}, text), !hideRemoveButton && onRemove ? /*#__PURE__*/React.createElement(RemoveTokenButton, {
     borderOffset: tokenBorderWidthPx,
     onClick: onRemoveClick,
     size: size,

package/lib-esm/Token/TokenBase.js

@@ -20,7 +20,6 @@ const variants = variant({
   variants: {
     small: {
       fontSize: 0,
-      gap: 1,
       height: tokenSizes.small,
       // without setting lineHeight to match height, the "x" appears vertically mis-aligned
       lineHeight: tokenSizes.small,
@@ -33,7 +32,6 @@ const variants = variant({
     },
     medium: {
       fontSize: 0,
-      gap: 1,
       height: tokenSizes.medium,
       lineHeight: tokenSizes.medium,
       paddingLeft: 2,
@@ -43,7 +41,6 @@ const variants = variant({
     },
     large: {
       fontSize: 0,
-      gap: 2,
       height: tokenSizes.large,
       lineHeight: tokenSizes.large,
       paddingLeft: 2,
@@ -53,7 +50,6 @@ const variants = variant({
     },
     extralarge: {
       fontSize: 1,
-      gap: 2,
       height: tokenSizes.extralarge,
       lineHeight: tokenSizes.extralarge,
       paddingLeft: 3,

package/lib-esm/Token/_RemoveTokenButton.js

@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React from 'react';
 import { XIcon } from '@primer/octicons-react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { variant } from 'styled-system';
 import { get } from '../constants';
 import sx from '../sx';
@@ -34,7 +34,16 @@ const getTokenButtonIconSize = size => parseInt(tokenSizes[size || defaultTokenS
 const StyledTokenButton = styled.span.withConfig({
   displayName: "_RemoveTokenButton__StyledTokenButton",
   componentId: "sc-14lvcw1-0"
-})(["background-color:transparent;font-family:inherit;color:currentColor;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;user-select:none;appearance:none;text-decoration:none;padding:0;transform:", ";align-self:baseline;border:0;border-radius:999px;&:hover,&:focus{background-color:", ";}&:active{background-color:", ";}", " ", ""], props => `translate(${props.borderOffset}px, -${props.borderOffset}px)`, get('colors.neutral.muted'), get('colors.neutral.subtle'), variants, sx);
+})(["background-color:transparent;font-family:inherit;color:currentColor;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;user-select:none;appearance:none;text-decoration:none;padding:0;transform:", ";align-self:baseline;border:0;border-radius:999px;", " &:hover,&:focus{background-color:", ";}&:active{background-color:", ";}", " ", ""], props => `translate(${props.borderOffset}px, -${props.borderOffset}px)`, props => {
+  switch (props.size) {
+    case 'large':
+    case 'extralarge':
+      return css(["margin-left:", ";"], get('space.2'));
+
+    default:
+      return css(["margin-left:", ";"], get('space.1'));
+  }
+}, get('colors.neutral.muted'), get('colors.neutral.subtle'), variants, sx);
 
 const RemoveTokenButton = ({
   'aria-label': ariaLabel,

package/lib-esm/_TextInputWrapper.js

@@ -21,7 +21,7 @@ const sizeVariants = variant({
 const TextInputWrapper = styled.span.withConfig({
   displayName: "_TextInputWrapper__TextInputWrapper",
   componentId: "sc-5vfcis-0"
-})(["display:inline-flex;align-items:stretch;min-height:34px;font-size:", ";line-height:20px;color:", ";vertical-align:middle;background-repeat:no-repeat;background-position:right 8px center;border:1px solid ", ";border-radius:", ";outline:none;box-shadow:", ";", " .TextInput-icon{align-self:center;color:", ";margin:0 ", ";flex-shrink:0;}&:focus-within{border-color:", ";box-shadow:", ";}", " ", " ", " @media (min-width:", "){font-size:", ";}", " ", " ", " ", " ", ";"], get('fontSizes.1'), get('colors.fg.default'), get('colors.border.default'), get('radii.2'), get('shadows.primer.shadow.inset'), props => {
+})(["display:inline-flex;align-items:stretch;min-height:34px;font-size:", ";line-height:20px;color:", ";vertical-align:middle;background-repeat:no-repeat;background-position:right 8px center;border:1px solid ", ";border-radius:", ";outline:none;box-shadow:", ";cursor:text;", " .TextInput-icon{align-self:center;color:", ";margin:0 ", ";flex-shrink:0;}&:focus-within{border-color:", ";box-shadow:", ";}", " ", " ", " @media (min-width:", "){font-size:", ";}", " ", " ", " ", " ", ";"], get('fontSizes.1'), get('colors.fg.default'), get('colors.border.default'), get('radii.2'), get('shadows.primer.shadow.inset'), props => {
   if (props.hasIcon) {
     return css(["padding:0;"]);
   } else {

package/lib-esm/theme-preval.js

@@ -515,7 +515,7 @@ module.exports = {
           }
         }
       },
-      "light_colorblind": {
+      "light_protanopia": {
         "colors": {
           "canvasDefaultTransparent": "rgba(255,255,255,0)",
           "marketingIcon": {
@@ -2456,7 +2456,7 @@ module.exports = {
           }
         }
       },
-      "dark_colorblind": {
+      "dark_protanopia": {
         "colors": {
           "canvasDefaultTransparent": "rgba(13,17,23,0)",
           "marketingIcon": {

package/lib-esm/utils/testing.d.ts

@@ -53,7 +53,7 @@ export declare function render(component: React.ReactElement, theme?: {
         xlarge: string;
     };
     space: string[];
-    colorSchemes: Record<"light" | "light_colorblind" | "dark" | "dark_dimmed" | "dark_high_contrast" | "dark_colorblind", Record<"colors" | "shadows", Partial<{
+    colorSchemes: Record<"light" | "light_protanopia" | "dark" | "dark_dimmed" | "dark_high_contrast" | "dark_protanopia", Record<"colors" | "shadows", Partial<{
         canvasDefaultTransparent: string;
         marketingIcon: {
             primary: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "0.0.0-202192719508",
+  "version": "0.0.0-2021927202224",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -43,16 +43,20 @@
   "author": "GitHub, Inc.",
   "license": "MIT",
   "dependencies": {
-    "@primer/octicons-react": "^16.1.0",
-    "@primer/primitives": "6.0.0",
+    "@primer/octicons-react": "^13.0.0",
+    "@primer/primitives": "5.1.0",
     "@radix-ui/react-polymorphic": "0.0.14",
     "@react-aria/ssr": "3.1.0",
     "@styled-system/css": "5.1.5",
     "@styled-system/props": "5.1.5",
     "@styled-system/theme-get": "5.1.2",
+    "@types/history": "4.7.8",
+    "@types/styled-components": "5.1.11",
+    "@types/styled-system": "5.1.12",
+    "@types/styled-system__css": "5.0.16",
+    "@types/styled-system__theme-get": "5.0.1",
     "classnames": "2.3.1",
     "color2k": "1.2.4",
-    "date-fns": "2.25.0",
     "deepmerge": "4.2.2",
     "focus-visible": "5.2.0",
     "styled-system": "5.1.5"
@@ -72,20 +76,15 @@
     "@rollup/plugin-commonjs": "19.0.2",
     "@rollup/plugin-node-resolve": "13.0.5",
     "@size-limit/preset-big-lib": "5.0.2",
-    "@storybook/addon-a11y": "6.3.4",
-    "@storybook/addon-actions": "^6.2.9",
-    "@storybook/addon-essentials": "6.2.9",
-    "@storybook/addon-links": "^6.2.9",
-    "@storybook/react": "6.3.8",
+    "@storybook/addon-a11y": "6.3.12",
+    "@storybook/addon-actions": "^6.3.12",
+    "@storybook/addon-essentials": "6.3.12",
+    "@storybook/addon-links": "^6.3.12",
+    "@storybook/react": "6.3.12",
     "@testing-library/dom": "7.31.2",
     "@testing-library/react": "11.2.7",
     "@testing-library/react-hooks": "7.0.2",
     "@testing-library/user-event": "13.1.9",
-    "@types/history": "4.7.9",
-    "@types/styled-components": "5.1.15",
-    "@types/styled-system": "5.1.13",
-    "@types/styled-system__css": "5.0.16",
-    "@types/styled-system__theme-get": "5.0.1",
     "@types/chroma-js": "2.1.3",
     "@types/enzyme": "3.10.9",
     "@types/jest": "26.0.23",