@primer/components 0.0.0-20219815255 → 0.0.0-20219835928

package/lib-esm/Overlay.js

@@ -92,6 +92,7 @@ const Overlay = /*#__PURE__*/React.forwardRef(({
   left,
   anchorSide,
   portalContainerName,
+  preventFocusOnOpen,
   ...rest
 }, forwardedRef) => {
   const overlayRef = useRef(null);
@@ -107,7 +108,8 @@ const Overlay = /*#__PURE__*/React.forwardRef(({
     onEscape,
     ignoreClickRefs,
     onClickOutside,
-    initialFocusRef
+    initialFocusRef,
+    preventFocusOnOpen
   });
   useEffect(() => {
     var _combinedRef$current;
@@ -136,9 +138,7 @@ const Overlay = /*#__PURE__*/React.forwardRef(({
       easing: slideAnimationEasing
     });
   }, [anchorSide, slideAnimationDistance, slideAnimationEasing, visibility]);
-  return /*#__PURE__*/React.createElement(Portal, {
-    containerName: portalContainerName
-  }, /*#__PURE__*/React.createElement(StyledOverlay, _extends({
+  const styledOverlay = /*#__PURE__*/React.createElement(StyledOverlay, _extends({
     height: height,
     role: role
   }, rest, {
@@ -149,7 +149,10 @@ const Overlay = /*#__PURE__*/React.forwardRef(({
       ...rest.style,
       '--styled-overlay-visibility': visibility
     }
-  })));
+  }));
+  return /*#__PURE__*/React.createElement(Portal, {
+    containerName: portalContainerName
+  }, styledOverlay);
 });
 Overlay.defaultProps = {
   height: 'auto',

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

@@ -32,9 +32,7 @@ declare const _default: React.ForwardRefExoticComponent<Pick<SelectMenuInternalP
     Divider: import("styled-components").StyledComponent<"div", any, SystemCommonProps & SxProp, never>;
     Filter: React.ForwardRefExoticComponent<Pick<{
         value?: string | undefined;
-    } & Omit<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & {
-        ref?: ((instance: HTMLInputElement | null) => void) | React.RefObject<HTMLInputElement> | null | undefined;
-    }, string | number | symbol> & Omit<Pick<{
+    } & Pick<Omit<Pick<{
         [x: string]: any;
         [x: number]: any;
     } & {
@@ -42,12 +40,11 @@ declare const _default: React.ForwardRefExoticComponent<Pick<SelectMenuInternalP
     } & {
         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" | "wrapperRef"> & {
+    }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "className" | "block" | "icon" | "sx" | "disabled" | "variant" | "contrast"> & {
         className?: string | undefined;
         icon?: React.ComponentType<{
             className?: string | undefined;
         }> | undefined;
-        wrapperRef?: React.RefObject<HTMLSpanElement> | undefined;
     } & Pick<{
         color?: string | undefined;
         maxWidth?: import("styled-system").ResponsiveValue<import("csstype").Property.MaxWidth<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -318,9 +315,7 @@ declare const _default: React.ForwardRefExoticComponent<Pick<SelectMenuInternalP
         contrast?: boolean | undefined;
     } & {
         theme?: any;
-    }, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "sx" | "disabled" | "variant" | "contrast"> & {
-        as?: "input" | undefined;
-    }, string | number | symbol> & React.RefAttributes<HTMLInputElement>>;
+    }, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "sx" | "disabled" | "variant" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>, string | number | symbol> & React.RefAttributes<HTMLInputElement>>;
     Footer: import("styled-components").StyledComponent<"footer", any, SystemCommonProps & SxProp, never>;
     Item: React.ForwardRefExoticComponent<Pick<{
         as?: React.ElementType<any> | undefined;

package/lib-esm/TextInput.d.ts

@@ -1,24 +1,14 @@
 import React from 'react';
-import { MaxWidthProps, MinWidthProps, WidthProps } from 'styled-system';
-import { ForwardRefComponent as PolymorphicForwardRefComponent } from '@radix-ui/react-polymorphic';
-import { SxProp } from './sx';
 import { ComponentProps, Merge } from './utils/types';
 import UnstyledTextInput from './_UnstyledTextInput';
-declare const Wrapper: import("styled-components").StyledComponent<"span", any, {
-    disabled?: boolean | undefined;
-    hasIcon?: boolean | undefined;
-    block?: boolean | undefined;
-    contrast?: boolean | undefined;
-    variant?: "large" | "small" | undefined;
-} & WidthProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Width<import("styled-system").TLengthStyledSystem>> & MinWidthProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.MinWidth<import("styled-system").TLengthStyledSystem>> & MaxWidthProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.MaxWidth<import("styled-system").TLengthStyledSystem>> & SxProp, never>;
+import TextInputWrapper from './_TextInputWrapper';
 declare type NonPassthroughProps = {
     className?: string;
     icon?: React.ComponentType<{
         className?: string;
     }>;
-    wrapperRef?: React.RefObject<HTMLSpanElement>;
-} & Pick<ComponentProps<typeof Wrapper>, 'block' | 'contrast' | 'disabled' | 'sx' | 'theme' | 'width' | 'maxWidth' | 'minWidth' | 'variant'>;
+} & Pick<ComponentProps<typeof TextInputWrapper>, 'block' | 'contrast' | 'disabled' | 'sx' | 'theme' | 'width' | 'maxWidth' | 'minWidth' | 'variant'>;
 declare type TextInputInternalProps = Merge<React.ComponentPropsWithoutRef<typeof UnstyledTextInput>, NonPassthroughProps>;
-declare const TextInput: PolymorphicForwardRefComponent<"input", TextInputInternalProps>;
+declare const TextInput: React.ForwardRefExoticComponent<Pick<TextInputInternalProps, string | number | symbol> & React.RefAttributes<HTMLInputElement>>;
 export declare type TextInputProps = ComponentProps<typeof TextInput>;
 export default TextInput;

package/lib-esm/TextInput.js

@@ -2,37 +2,8 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import classnames from 'classnames';
 import React from 'react';
-import styled, { css } from 'styled-components';
-import { maxWidth, minWidth, variant, width } from 'styled-system';
-import { get } from './constants';
-import sx from './sx';
 import UnstyledTextInput from './_UnstyledTextInput';
-const sizeVariants = variant({
-  variants: {
-    small: {
-      minHeight: '28px',
-      px: 2,
-      py: '3px',
-      fontSize: 0,
-      lineHeight: '20px'
-    },
-    large: {
-      px: 2,
-      py: '10px',
-      fontSize: 3
-    }
-  }
-});
-const Wrapper = styled.span.withConfig({
-  displayName: "TextInput__Wrapper",
-  componentId: "sc-1apmpmt-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 => {
-  if (props.hasIcon) {
-    return css(["padding:0;"]);
-  } else {
-    return css(["padding:6px 12px;"]);
-  }
-}, get('colors.fg.muted'), get('space.2'), get('colors.accent.emphasis'), get('shadows.primer.shadow.focus'), props => props.contrast && css(["background-color:", ";"], get('colors.canvas.inset')), props => props.disabled && css(["color:", ";background-color:", ";border-color:", ";"], get('colors.fg.muted'), get('colors.input.disabledBg'), get('colors.border.default')), props => props.block && css(["display:block;width:100%;"]), get('breakpoints.1'), get('fontSizes.1'), width, minWidth, maxWidth, sizeVariants, sx);
+import TextInputWrapper from './_TextInputWrapper';
 // using forwardRef is important so that other components (ex. SelectMenu) can autofocus the input
 const TextInput = /*#__PURE__*/React.forwardRef(({
   icon: IconComponent,
@@ -46,12 +17,11 @@ const TextInput = /*#__PURE__*/React.forwardRef(({
   minWidth: minWidthProp,
   maxWidth: maxWidthProp,
   variant: variantProp,
-  wrapperRef,
   ...inputProps
 }, ref) => {
   // this class is necessary to style FilterSearch, plz no touchy!
   const wrapperClasses = classnames(className, 'TextInput-wrapper');
-  return /*#__PURE__*/React.createElement(Wrapper, {
+  return /*#__PURE__*/React.createElement(TextInputWrapper, {
     block: block,
     className: wrapperClasses,
     contrast: contrast,
@@ -62,8 +32,7 @@ const TextInput = /*#__PURE__*/React.forwardRef(({
     width: widthProp,
     minWidth: minWidthProp,
     maxWidth: maxWidthProp,
-    variant: variantProp,
-    ref: wrapperRef
+    variant: variantProp
   }, IconComponent && /*#__PURE__*/React.createElement(IconComponent, {
     className: "TextInput-icon"
   }), /*#__PURE__*/React.createElement(UnstyledTextInput, _extends({

package/lib-esm/TextInputWithTokens.d.ts

@@ -2,11 +2,11 @@ import React from 'react';
 import { ComponentProps } from './utils/types';
 import { TokenSizeKeys } from './Token/TokenBase';
 declare type AnyReactComponent = React.ComponentType<any>;
-declare type TextInputWithTokensInternalProps<TokenComponentType extends AnyReactComponent> = {
+declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<{
     /**
      * The array of tokens to render
      */
-    tokens: TokenComponentType extends React.ComponentType<infer TokenProps> ? TokenProps[] : never;
+    tokens: any[];
     /**
      * The function that gets called when a token is removed
      */
@@ -14,7 +14,7 @@ declare type TextInputWithTokensInternalProps<TokenComponentType extends AnyReac
     /**
      * The component used to render each token
      */
-    tokenComponent?: TokenComponentType;
+    tokenComponent?: AnyReactComponent | undefined;
     /**
      * The maximum height of the component. If the content in the input exceeds this height,
      * it will scroll vertically
@@ -23,19 +23,16 @@ declare type TextInputWithTokensInternalProps<TokenComponentType extends AnyReac
     /**
      * Whether tokens should render inline horizontally. By default, tokens wrap to new lines.
      */
-    preventTokenWrapping?: boolean;
+    preventTokenWrapping?: boolean | undefined;
     /**
      * The size of the tokens
      */
-    size?: TokenSizeKeys;
+    size?: TokenSizeKeys | undefined;
     /**
      * Whether the remove buttons should be rendered in the tokens
      */
-    hideTokenRemoveButtons?: boolean;
-};
-declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<TextInputWithTokensInternalProps<AnyReactComponent> & Omit<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | React.RefObject<HTMLInputElement> | null | undefined;
-}, string | number | symbol> & Omit<Pick<{
+    hideTokenRemoveButtons?: boolean | undefined;
+} & Pick<Omit<Pick<{
     [x: string]: any;
     [x: number]: any;
 } & {
@@ -43,12 +40,11 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<TextInpu
 } & {
     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" | "wrapperRef"> & {
+}, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "className" | "block" | "icon" | "sx" | "disabled" | "variant" | "contrast"> & {
     className?: string | undefined;
     icon?: React.ComponentType<{
         className?: string | undefined;
     }> | undefined;
-    wrapperRef?: React.RefObject<HTMLSpanElement> | undefined;
 } & Pick<{
     color?: string | undefined;
     maxWidth?: import("styled-system").ResponsiveValue<import("csstype").Property.MaxWidth<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -319,8 +315,9 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<TextInpu
     contrast?: boolean | undefined;
 } & {
     theme?: any;
-}, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "sx" | "disabled" | "variant" | "contrast"> & {
-    as?: "input" | undefined;
+}, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "sx" | "disabled" | "variant" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement> & {
+    selectedTokenIndex: number | undefined;
+    setSelectedTokenIndex: React.Dispatch<React.SetStateAction<number | undefined>>;
 }, string | number | symbol> & React.RefAttributes<HTMLInputElement>>;
 export declare type TextInputWithTokensProps = ComponentProps<typeof TextInputWithTokens>;
 export default TextInputWithTokens;

package/lib-esm/TextInputWithTokens.js

@@ -2,37 +2,89 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React, { useRef, useState } from 'react';
 import { omit } from '@styled-system/props';
-import styled from 'styled-components';
 import { FocusKeys } from './behaviors/focusZone';
 import { useCombinedRefs } from './hooks/useCombinedRefs';
 import { useFocusZone } from './hooks/useFocusZone';
 import Token from './Token/Token';
-import TextInput from './TextInput';
 import { useProvidedRefOrCreate } from './hooks';
 import UnstyledTextInput from './_UnstyledTextInput';
-const InputWrapper = styled.div.withConfig({
-  displayName: "TextInputWithTokens__InputWrapper",
-  componentId: "sc-8z94t5-0"
-})(["order:1;flex-grow:1;"]); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+import TextInputWrapper from './_TextInputWrapper';
+import Box from './Box'; // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
-// The inner contents of `TextInputWithTokens` are separated so they may be passed to the `as`
-// prop of the `TextInput` component
+// using forwardRef is important so that other components (ex. Autocomplete) can use the ref
 function TextInputWithTokensInnerComponent({
+  icon: IconComponent,
+  contrast,
+  className,
+  block,
+  disabled,
+  theme,
+  sx: sxProp,
   tokens,
   onTokenRemove,
   tokenComponent: TokenComponent,
+  preventTokenWrapping,
   size,
   hideTokenRemoveButtons,
-  selectedTokenIndex,
-  setSelectedTokenIndex,
+  maxHeight,
+  width: widthProp,
+  minWidth: minWidthProp,
+  maxWidth: maxWidthProp,
+  variant: variantProp,
   ...rest
 }, externalRef) {
-  const ref = useProvidedRefOrCreate(externalRef);
   const {
     onFocus,
     onKeyDown,
     ...inputPropsRest
   } = omit(rest);
+  const ref = useProvidedRefOrCreate(externalRef);
+  const localInputRef = useRef(null);
+  const combinedInputRef = useCombinedRefs(localInputRef, ref);
+  const [selectedTokenIndex, setSelectedTokenIndex] = useState();
+  const {
+    containerRef
+  } = useFocusZone({
+    focusOutBehavior: 'wrap',
+    bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
+    focusableElementFilter: element => {
+      return !element.getAttributeNames().includes('aria-hidden');
+    },
+    getNextFocusable: direction => {
+      var _containerRef$current;
+
+      if (!selectedTokenIndex && selectedTokenIndex !== 0) {
+        return undefined;
+      }
+
+      let nextIndex = selectedTokenIndex + 1; // "+ 1" accounts for the first element: the text input
+
+      if (direction === 'next') {
+        nextIndex += 1;
+      }
+
+      if (direction === 'previous') {
+        nextIndex -= 1;
+      }
+
+      if (nextIndex > tokens.length || nextIndex < 1) {
+        return combinedInputRef.current || undefined;
+      }
+
+      return (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.children[nextIndex];
+    }
+  }, [selectedTokenIndex]);
+
+  const handleTokenRemove = tokenId => {
+    onTokenRemove(tokenId);
+
+    if (selectedTokenIndex) {
+      var _containerRef$current2;
+
+      const nextElementToFocus = (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.children[selectedTokenIndex];
+      nextElementToFocus.focus();
+    }
+  };
 
   const handleTokenFocus = tokenIndex => () => {
     setSelectedTokenIndex(tokenIndex);
@@ -42,24 +94,24 @@ function TextInputWithTokensInnerComponent({
     setSelectedTokenIndex(undefined);
   };
 
-  const handleTokenKeyUp = event => {
-    if (event.key === 'Escape') {
+  const handleTokenKeyUp = e => {
+    if (e.key === 'Escape') {
       var _ref$current;
 
       (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
     }
   };
 
-  const handleInputFocus = event => {
-    onFocus && onFocus(event);
+  const handleInputFocus = e => {
+    onFocus && onFocus(e);
     setSelectedTokenIndex(undefined);
   };
 
-  const handleInputKeyDown = event => {
+  const handleInputKeyDown = e => {
     var _ref$current2;
 
     if (onKeyDown) {
-      onKeyDown(event);
+      onKeyDown(e);
     }
 
     if ((_ref$current2 = ref.current) !== null && _ref$current2 !== void 0 && _ref$current2.value) {
@@ -68,8 +120,8 @@ function TextInputWithTokensInnerComponent({
 
     const lastToken = tokens[tokens.length - 1];
 
-    if (event.key === 'Backspace' && lastToken) {
-      onTokenRemove(lastToken.id);
+    if (e.key === 'Backspace' && lastToken) {
+      handleTokenRemove(lastToken.id);
 
       if (ref.current) {
         // TODO: eliminate the first hack by making changes to the Autocomplete component
@@ -90,10 +142,48 @@ function TextInputWithTokensInnerComponent({
     }
   };
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InputWrapper, {
-    key: "inputWrapper"
-  }, /*#__PURE__*/React.createElement(UnstyledTextInput, _extends({
-    ref: ref,
+  return /*#__PURE__*/React.createElement(TextInputWrapper, {
+    block: block,
+    className: className,
+    contrast: contrast,
+    disabled: disabled,
+    hasIcon: !!IconComponent,
+    theme: theme,
+    width: widthProp,
+    minWidth: minWidthProp,
+    maxWidth: maxWidthProp,
+    variant: variantProp,
+    ref: containerRef,
+    sx: {
+      alignItems: 'center',
+      flexWrap: preventTokenWrapping ? 'nowrap' : 'wrap',
+      gap: '0.25rem',
+      '> *': {
+        flexShrink: 0
+      },
+      ...(block ? {
+        display: 'flex',
+        width: '100%'
+      } : {}),
+      ...(maxHeight ? {
+        maxHeight,
+        overflow: 'auto'
+      } : {}),
+      ...(preventTokenWrapping ? {
+        overflow: 'auto'
+      } : {}),
+      ...sxProp
+    }
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      order: 1,
+      flexGrow: 1
+    }
+  }, IconComponent && /*#__PURE__*/React.createElement(IconComponent, {
+    className: "TextInput-icon"
+  }), /*#__PURE__*/React.createElement(UnstyledTextInput, _extends({
+    ref: combinedInputRef,
+    disabled: disabled,
     onFocus: handleInputFocus,
     onKeyDown: handleInputKeyDown,
     type: "text",
@@ -110,107 +200,19 @@ function TextInputWithTokensInnerComponent({
     onKeyUp: handleTokenKeyUp,
     isSelected: selectedTokenIndex === i,
     onRemove: () => {
-      onTokenRemove(id);
+      handleTokenRemove(id);
     },
     hideRemoveButton: hideTokenRemoveButtons,
     size: size,
     tabIndex: 0
   }, tokenRest))) : null);
-} // using forwardRef is important so that other components (ex. Autocomplete) can use the ref
-
-
-const TextInputWithTokensInnerComponentWithRef = /*#__PURE__*/React.forwardRef(TextInputWithTokensInnerComponent);
-
-function TextInputWithTokensComponent({
-  tokens,
-  onTokenRemove,
-  sx: sxProp,
-  ...props
-}, ref) {
-  const localInputRef = useRef(null);
-  const combinedInputRef = useCombinedRefs(localInputRef, ref);
-  const [selectedTokenIndex, setSelectedTokenIndex] = useState();
-  const {
-    containerRef
-  } = useFocusZone({
-    focusOutBehavior: 'wrap',
-    bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
-    focusableElementFilter: element => {
-      return !element.getAttributeNames().includes('aria-hidden');
-    },
-    getNextFocusable: direction => {
-      var _containerRef$current;
-
-      if (!selectedTokenIndex && selectedTokenIndex !== 0) {
-        return undefined;
-      }
-
-      let nextIndex = selectedTokenIndex + 1; // "+ 1" accounts for the first element: the text input
-
-      if (direction === 'next') {
-        nextIndex += 1;
-      }
-
-      if (direction === 'previous') {
-        nextIndex -= 1;
-      }
-
-      if (nextIndex > tokens.length || nextIndex < 1) {
-        return combinedInputRef.current || undefined;
-      }
-
-      return (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.children[nextIndex];
-    }
-  }, [selectedTokenIndex]);
-
-  const handleTokenRemove = tokenId => {
-    onTokenRemove(tokenId);
-
-    if (selectedTokenIndex) {
-      var _containerRef$current2;
-
-      const nextElementToFocus = (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.children[selectedTokenIndex];
-      nextElementToFocus.focus();
-    }
-  };
-
-  return /*#__PURE__*/React.createElement(TextInput, _extends({
-    ref: combinedInputRef,
-    wrapperRef: containerRef,
-    as: TextInputWithTokensInnerComponentWithRef,
-    selectedTokenIndex: selectedTokenIndex,
-    setSelectedTokenIndex: setSelectedTokenIndex,
-    tokens: tokens,
-    onTokenRemove: handleTokenRemove,
-    sx: {
-      alignItems: 'center',
-      flexWrap: props.preventTokenWrapping ? 'nowrap' : 'wrap',
-      gap: '0.25rem',
-      '> *': {
-        flexShrink: 0
-      },
-      ...(props.block ? {
-        display: 'flex',
-        width: '100%'
-      } : {}),
-      ...(props.maxHeight ? {
-        maxHeight: props.maxHeight,
-        overflow: 'auto'
-      } : {}),
-      ...(props.preventTokenWrapping ? {
-        overflow: 'auto'
-      } : {}),
-      ...sxProp
-    }
-  }, props));
 }
 
-TextInputWithTokensComponent.displayName = "TextInputWithTokensComponent";
-// using forwardRef is important so that other components (ex. Autocomplete) can use the ref
-const TextInputWithTokens = /*#__PURE__*/React.forwardRef(TextInputWithTokensComponent);
+TextInputWithTokensInnerComponent.displayName = "TextInputWithTokensInnerComponent";
+const TextInputWithTokens = /*#__PURE__*/React.forwardRef(TextInputWithTokensInnerComponent);
 TextInputWithTokens.defaultProps = {
   tokenComponent: Token,
-  size: 'xlarge',
+  size: 'extralarge',
   hideTokenRemoveButtons: false
 };
 TextInputWithTokens.displayName = 'TextInputWithTokens';

package/lib-esm/_TextInputWrapper.d.ts

@@ -0,0 +1,10 @@
+import { MaxWidthProps, MinWidthProps, WidthProps } from 'styled-system';
+import { SxProp } from './sx';
+declare const TextInputWrapper: import("styled-components").StyledComponent<"span", any, {
+    disabled?: boolean | undefined;
+    hasIcon?: boolean | undefined;
+    block?: boolean | undefined;
+    contrast?: boolean | undefined;
+    variant?: "large" | "small" | undefined;
+} & WidthProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Width<import("styled-system").TLengthStyledSystem>> & MinWidthProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.MinWidth<import("styled-system").TLengthStyledSystem>> & MaxWidthProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.MaxWidth<import("styled-system").TLengthStyledSystem>> & SxProp, never>;
+export default TextInputWrapper;

package/lib-esm/_TextInputWrapper.js

@@ -0,0 +1,31 @@
+import styled, { css } from 'styled-components';
+import { maxWidth, minWidth, variant, width } from 'styled-system';
+import { get } from './constants';
+import sx from './sx';
+const sizeVariants = variant({
+  variants: {
+    small: {
+      minHeight: '28px',
+      px: 2,
+      py: '3px',
+      fontSize: 0,
+      lineHeight: '20px'
+    },
+    large: {
+      px: 2,
+      py: '10px',
+      fontSize: 3
+    }
+  }
+});
+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 => {
+  if (props.hasIcon) {
+    return css(["padding:0;"]);
+  } else {
+    return css(["padding:6px 12px;"]);
+  }
+}, get('colors.fg.muted'), get('space.2'), get('colors.accent.emphasis'), get('shadows.primer.shadow.focus'), props => props.contrast && css(["background-color:", ";"], get('colors.canvas.inset')), props => props.disabled && css(["color:", ";background-color:", ";border-color:", ";"], get('colors.fg.muted'), get('colors.input.disabledBg'), get('colors.border.default')), props => props.block && css(["display:block;width:100%;"]), get('breakpoints.1'), get('fontSizes.1'), width, minWidth, maxWidth, sizeVariants, sx);
+export default TextInputWrapper;

package/lib-esm/hooks/useOpenAndCloseFocus.d.ts

@@ -3,5 +3,6 @@ export declare type UseOpenAndCloseFocusSettings = {
     initialFocusRef?: React.RefObject<HTMLElement>;
     containerRef: React.RefObject<HTMLElement>;
     returnFocusRef: React.RefObject<HTMLElement>;
+    preventFocusOnOpen?: boolean;
 };
-export declare function useOpenAndCloseFocus({ initialFocusRef, returnFocusRef, containerRef }: UseOpenAndCloseFocusSettings): void;
+export declare function useOpenAndCloseFocus({ initialFocusRef, returnFocusRef, containerRef, preventFocusOnOpen }: UseOpenAndCloseFocusSettings): void;

package/lib-esm/hooks/useOpenAndCloseFocus.js

@@ -3,9 +3,14 @@ import { iterateFocusableElements } from '../utils/iterateFocusableElements';
 export function useOpenAndCloseFocus({
   initialFocusRef,
   returnFocusRef,
-  containerRef
+  containerRef,
+  preventFocusOnOpen
 }) {
   useEffect(() => {
+    if (preventFocusOnOpen) {
+      return;
+    }
+
     const returnRef = returnFocusRef.current;
 
     if (initialFocusRef && initialFocusRef.current) {
@@ -18,5 +23,5 @@ export function useOpenAndCloseFocus({
     return function () {
       returnRef === null || returnRef === void 0 ? void 0 : returnRef.focus();
     };
-  }, [initialFocusRef, returnFocusRef, containerRef]);
+  }, [initialFocusRef, returnFocusRef, containerRef, preventFocusOnOpen]);
 }

package/lib-esm/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;

package/lib-esm/hooks/useOverlay.js

@@ -8,13 +8,15 @@ export const useOverlay = ({
   initialFocusRef,
   onEscape,
   ignoreClickRefs,
-  onClickOutside
+  onClickOutside,
+  preventFocusOnOpen
 }) => {
   const overlayRef = useProvidedRefOrCreate(_overlayRef);
   useOpenAndCloseFocus({
     containerRef: overlayRef,
     returnFocusRef,
-    initialFocusRef
+    initialFocusRef,
+    preventFocusOnOpen
   });
   useOnOutsideClick({
     containerRef: overlayRef,