From b319b29df6fca39bbdbce918fcebe1ff4e445e8c Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Fri, 20 May 2022 08:14:47 -0400 Subject: [PATCH] Fixes `onRemove` console error coming from token components (#2087) * prevents onRemove prop from being passed from token components though to the HTML element * adds changeset --- .changeset/grumpy-crabs-compete.md | 5 + src/Token/Token.tsx | 101 +- src/Token/TokenBase.tsx | 43 +- .../TextInputWithTokens.test.tsx.snap | 2134 ++++++++--------- .../__snapshots__/Token.test.tsx.snap | 1350 +++++------ 5 files changed, 1734 insertions(+), 1899 deletions(-) create mode 100644 .changeset/grumpy-crabs-compete.md diff --git a/.changeset/grumpy-crabs-compete.md b/.changeset/grumpy-crabs-compete.md new file mode 100644 index 00000000000..47c622e8f3e --- /dev/null +++ b/.changeset/grumpy-crabs-compete.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Prevents the `onRemove` prop from being passed through to the HTML element from Token, AvatarToken, and IssueToken. diff --git a/src/Token/Token.tsx b/src/Token/Token.tsx index e404b408f89..b742a84303e 100644 --- a/src/Token/Token.tsx +++ b/src/Token/Token.tsx @@ -1,7 +1,6 @@ import React, {forwardRef, MouseEventHandler} from 'react' -import styled, {css} from 'styled-components' -import {get} from '../constants' -import sx, {SxProp} from '../sx' +import {Box} from '..' +import {merge, SxProp} from '../sx' import TokenBase, {defaultTokenSize, isTokenInteractive, TokenBaseProps} from './TokenBase' import RemoveTokenButton from './_RemoveTokenButton' import TokenTextContainer from './_TokenTextContainer' @@ -16,53 +15,33 @@ export interface TokenProps extends TokenBaseProps { const tokenBorderWidthPx = 1 -const DefaultTokenStyled = styled(TokenBase)` - background-color: ${get('colors.neutral.subtle')}; - border-color: ${props => (props.isSelected ? get('colors.fg.default') : get('colors.border.subtle'))}; - border-style: solid; - border-width: ${tokenBorderWidthPx}px; - color: ${props => (props.isSelected ? get('colors.fg.default') : get('colors.fg.muted'))}; - max-width: 100%; - padding-right: ${props => (!props.hideRemoveButton ? 0 : undefined)}; - position: relative; - ${sx} - - ${props => { - if (props.isTokenInteractive) { - return css` - &:hover { - background-color: ${get('colors.neutral.muted')}; - box-shadow: ${get('colors.shadow.medium')}; - color: ${get('colors.fg.default')}; - } - ` - } - }} -` - -const LeadingVisualContainer = styled('span')>` - flex-shrink: 0; - line-height: 0; - - ${props => { - switch (props.size) { - case 'large': - case 'extralarge': - case 'xlarge': - return css` - margin-right: ${get('space.2')}; - ` - default: - return css` - margin-right: ${get('space.1')}; - ` - } - }} -` +const LeadingVisualContainer: React.FC> = ({children, size}) => ( + + {children} + +) const Token = forwardRef( (props, forwardedRef) => { - const {as, onRemove, id, leadingVisual: LeadingVisual, text, size, hideRemoveButton, href, onClick, ...rest} = props + const { + as, + onRemove, + id, + leadingVisual: LeadingVisual, + text, + size, + hideRemoveButton, + href, + onClick, + sx: sxProp = {}, + ...rest + } = props const hasMultipleActionTargets = isTokenInteractive(props) && Boolean(onRemove) && !hideRemoveButton const onRemoveClick: MouseEventHandler = e => { e.stopPropagation() @@ -73,15 +52,35 @@ const Token = forwardRef ) : null} - + ) } ) diff --git a/src/Token/TokenBase.tsx b/src/Token/TokenBase.tsx index 0567dee6182..0e9b5013f06 100644 --- a/src/Token/TokenBase.tsx +++ b/src/Token/TokenBase.tsx @@ -1,4 +1,4 @@ -import {KeyboardEvent} from 'react' +import React, {KeyboardEvent} from 'react' import styled from 'styled-components' import {variant} from 'styled-system' import {get} from '../constants' @@ -50,7 +50,14 @@ export interface TokenBaseProps size?: TokenSizeKeys } -export const isTokenInteractive = ({as = 'span', onClick, onFocus, tabIndex = -1}: TokenBaseProps) => +type TokenElements = HTMLSpanElement | HTMLButtonElement | HTMLAnchorElement + +export const isTokenInteractive = ({ + as = 'span', + onClick, + onFocus, + tabIndex = -1 +}: Pick) => Boolean(onFocus || onClick || tabIndex > -1 || ['a', 'button'].includes(as)) const xlargeVariantStyles = { @@ -112,16 +119,7 @@ const variants = variant< } }) -const TokenBase = styled.span.attrs(({text, onRemove, onKeyDown}) => ({ - onKeyDown: (event: KeyboardEvent) => { - onKeyDown && onKeyDown(event) - - if ((event.key === 'Backspace' || event.key === 'Delete') && onRemove) { - onRemove() - } - }, - 'aria-label': onRemove ? `${text}, press backspace or delete to remove` : undefined -}))` +const StyledTokenBase = styled.span` align-items: center; border-radius: 999px; cursor: ${props => (isTokenInteractive(props) ? 'pointer' : 'auto')}; @@ -129,11 +127,32 @@ const TokenBase = styled.span.attrs(({text, onRemove, onKeyDown} font-weight: ${get('fontWeights.bold')}; font-family: inherit; text-decoration: none; + position: relative; white-space: nowrap; ${variants} ${sx} ` +const TokenBase = React.forwardRef( + ({text, onRemove, onKeyDown, id, ...rest}, forwardedRef) => { + return ( + ) => { + onKeyDown && onKeyDown(event) + + if ((event.key === 'Backspace' || event.key === 'Delete') && onRemove) { + onRemove() + } + }} + aria-label={onRemove ? `${text}, press backspace or delete to remove` : undefined} + id={id?.toString()} + {...rest} + ref={forwardedRef} + /> + ) + } +) + TokenBase.defaultProps = { as: 'span', size: defaultTokenSize diff --git a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap index a4575b0092e..0b96054ba33 100644 --- a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap @@ -141,6 +141,45 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = ` outline: 0; } +.c4 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 999px; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-weight: 600; + font-family: inherit; + -webkit-text-decoration: none; + text-decoration: none; + position: relative; + white-space: nowrap; + font-size: 14px; + height: 32px; + line-height: 32px; + padding-left: 16px; + padding-right: 16px; + padding-top: 0; + padding-bottom: 0; + background-color: rgba(234,238,242,0.5); + border-color: rgba(27,31,36,0.15); + border-style: solid; + border-width: 1px; + color: #57606a; + max-width: 100%; + padding-right: 0; +} + +.c4:hover { + background-color: rgba(175,184,193,0.2); + box-shadow: 0 3px 6px rgba(140,149,159,0.15); + color: #24292f; +} + .c6 { background-color: transparent; font-family: inherit; @@ -231,44 +270,6 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = ` bottom: 0; } -.c4 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border-radius: 999px; - cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-weight: 600; - font-family: inherit; - -webkit-text-decoration: none; - text-decoration: none; - white-space: nowrap; - font-size: 14px; - height: 32px; - line-height: 32px; - padding-left: 16px; - padding-right: 16px; - padding-top: 0; - padding-bottom: 0; - background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); - border-style: solid; - border-width: 1px; - color: #57606a; - max-width: 100%; - padding-right: 0; - position: relative; -} - -.c4:hover { - background-color: rgba(175,184,193,0.2); - color: #24292f; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -329,7 +330,6 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -377,7 +377,6 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -425,7 +424,6 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -473,7 +471,6 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -521,7 +518,6 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -569,7 +565,6 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -617,7 +612,6 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -665,7 +659,6 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -882,6 +875,45 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = ` color: #57606a; } +.c4 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 999px; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-weight: 600; + font-family: inherit; + -webkit-text-decoration: none; + text-decoration: none; + position: relative; + white-space: nowrap; + font-size: 14px; + height: 32px; + line-height: 32px; + padding-left: 16px; + padding-right: 16px; + padding-top: 0; + padding-bottom: 0; + background-color: rgba(234,238,242,0.5); + border-color: rgba(27,31,36,0.15); + border-style: solid; + border-width: 1px; + color: #57606a; + max-width: 100%; + padding-right: 0; +} + +.c4:hover { + background-color: rgba(175,184,193,0.2); + box-shadow: 0 3px 6px rgba(140,149,159,0.15); + color: #24292f; +} + .c6 { background-color: transparent; font-family: inherit; @@ -972,44 +1004,6 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = ` bottom: 0; } -.c4 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border-radius: 999px; - cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-weight: 600; - font-family: inherit; - -webkit-text-decoration: none; - text-decoration: none; - white-space: nowrap; - font-size: 14px; - height: 32px; - line-height: 32px; - padding-left: 16px; - padding-right: 16px; - padding-top: 0; - padding-bottom: 0; - background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); - border-style: solid; - border-width: 1px; - color: #57606a; - max-width: 100%; - padding-right: 0; - position: relative; -} - -.c4:hover { - background-color: rgba(175,184,193,0.2); - color: #24292f; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -1044,7 +1038,6 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -1092,7 +1085,6 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -1480,6 +1472,45 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` outline: 0; } +.c4 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 999px; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-weight: 600; + font-family: inherit; + -webkit-text-decoration: none; + text-decoration: none; + position: relative; + white-space: nowrap; + font-size: 14px; + height: 32px; + line-height: 32px; + padding-left: 16px; + padding-right: 16px; + padding-top: 0; + padding-bottom: 0; + background-color: rgba(234,238,242,0.5); + border-color: rgba(27,31,36,0.15); + border-style: solid; + border-width: 1px; + color: #57606a; + max-width: 100%; + padding-right: 0; +} + +.c4:hover { + background-color: rgba(175,184,193,0.2); + box-shadow: 0 3px 6px rgba(140,149,159,0.15); + color: #24292f; +} + .c6 { background-color: transparent; font-family: inherit; @@ -1570,44 +1601,6 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` bottom: 0; } -.c4 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border-radius: 999px; - cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-weight: 600; - font-family: inherit; - -webkit-text-decoration: none; - text-decoration: none; - white-space: nowrap; - font-size: 14px; - height: 32px; - line-height: 32px; - padding-left: 16px; - padding-right: 16px; - padding-top: 0; - padding-bottom: 0; - background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); - border-style: solid; - border-width: 1px; - color: #57606a; - max-width: 100%; - padding-right: 0; - position: relative; -} - -.c4:hover { - background-color: rgba(175,184,193,0.2); - color: #24292f; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -1642,7 +1635,6 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -1690,7 +1682,6 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -1738,7 +1729,6 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -1786,7 +1776,6 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -1834,7 +1823,6 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -1882,7 +1870,6 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -1930,7 +1917,6 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -1978,7 +1964,6 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -2171,33 +2156,72 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` outline: 0; } -.c6 { - background-color: transparent; - font-family: inherit; - color: currentColor; +.c4 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 999px; cursor: pointer; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; + font-weight: 600; + font-family: inherit; -webkit-text-decoration: none; text-decoration: none; - padding: 0; + position: relative; + white-space: nowrap; + font-size: 12px; + height: 16px; + line-height: 16px; + padding-left: 4px; + padding-right: 4px; + padding-top: 0; + padding-bottom: 0; + background-color: rgba(234,238,242,0.5); + border-color: rgba(27,31,36,0.15); + border-style: solid; + border-width: 1px; + color: #57606a; + max-width: 100%; + padding-right: 0; +} + +.c4:hover { + background-color: rgba(175,184,193,0.2); + box-shadow: 0 3px 6px rgba(140,149,159,0.15); + color: #24292f; +} + +.c6 { + background-color: transparent; + font-family: inherit; + color: currentColor; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + -webkit-text-decoration: none; + text-decoration: none; + padding: 0; -webkit-transform: translate(1px,-1px); -ms-transform: translate(1px,-1px); transform: translate(1px,-1px); @@ -2261,44 +2285,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` bottom: 0; } -.c4 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border-radius: 999px; - cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-weight: 600; - font-family: inherit; - -webkit-text-decoration: none; - text-decoration: none; - white-space: nowrap; - font-size: 12px; - height: 16px; - line-height: 16px; - padding-left: 4px; - padding-right: 4px; - padding-top: 0; - padding-bottom: 0; - background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); - border-style: solid; - border-width: 1px; - color: #57606a; - max-width: 100%; - padding-right: 0; - position: relative; -} - -.c4:hover { - background-color: rgba(175,184,193,0.2); - color: #24292f; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -2333,7 +2319,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="small" tabIndex={0} > @@ -2381,7 +2366,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="small" tabIndex={0} > @@ -2429,7 +2413,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="small" tabIndex={0} > @@ -2477,7 +2460,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="small" tabIndex={0} > @@ -2525,7 +2507,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="small" tabIndex={0} > @@ -2573,7 +2554,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="small" tabIndex={0} > @@ -2621,7 +2601,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="small" tabIndex={0} > @@ -2669,7 +2648,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="small" tabIndex={0} > @@ -2862,6 +2840,45 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` outline: 0; } +.c4 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 999px; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-weight: 600; + font-family: inherit; + -webkit-text-decoration: none; + text-decoration: none; + position: relative; + white-space: nowrap; + font-size: 12px; + height: 20px; + line-height: 20px; + padding-left: 8px; + padding-right: 8px; + padding-top: 0; + padding-bottom: 0; + background-color: rgba(234,238,242,0.5); + border-color: rgba(27,31,36,0.15); + border-style: solid; + border-width: 1px; + color: #57606a; + max-width: 100%; + padding-right: 0; +} + +.c4:hover { + background-color: rgba(175,184,193,0.2); + box-shadow: 0 3px 6px rgba(140,149,159,0.15); + color: #24292f; +} + .c6 { background-color: transparent; font-family: inherit; @@ -2952,44 +2969,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` bottom: 0; } -.c4 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border-radius: 999px; - cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-weight: 600; - font-family: inherit; - -webkit-text-decoration: none; - text-decoration: none; - white-space: nowrap; - font-size: 12px; - height: 20px; - line-height: 20px; - padding-left: 8px; - padding-right: 8px; - padding-top: 0; - padding-bottom: 0; - background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); - border-style: solid; - border-width: 1px; - color: #57606a; - max-width: 100%; - padding-right: 0; - position: relative; -} - -.c4:hover { - background-color: rgba(175,184,193,0.2); - color: #24292f; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -3024,7 +3003,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="medium" tabIndex={0} > @@ -3072,7 +3050,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="medium" tabIndex={0} > @@ -3120,7 +3097,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="medium" tabIndex={0} > @@ -3168,7 +3144,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="medium" tabIndex={0} > @@ -3216,7 +3191,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="medium" tabIndex={0} > @@ -3264,7 +3238,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="medium" tabIndex={0} > @@ -3312,7 +3285,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="medium" tabIndex={0} > @@ -3360,7 +3332,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="medium" tabIndex={0} > @@ -3546,6 +3517,45 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` outline: 0; } +.c4 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 999px; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-weight: 600; + font-family: inherit; + -webkit-text-decoration: none; + text-decoration: none; + position: relative; + white-space: nowrap; + font-size: 12px; + height: 24px; + line-height: 24px; + padding-left: 8px; + padding-right: 8px; + padding-top: 0; + padding-bottom: 0; + background-color: rgba(234,238,242,0.5); + border-color: rgba(27,31,36,0.15); + border-style: solid; + border-width: 1px; + color: #57606a; + max-width: 100%; + padding-right: 0; +} + +.c4:hover { + background-color: rgba(175,184,193,0.2); + box-shadow: 0 3px 6px rgba(140,149,159,0.15); + color: #24292f; +} + .c6 { background-color: transparent; font-family: inherit; @@ -3636,44 +3646,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` bottom: 0; } -.c4 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border-radius: 999px; - cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-weight: 600; - font-family: inherit; - -webkit-text-decoration: none; - text-decoration: none; - white-space: nowrap; - font-size: 12px; - height: 24px; - line-height: 24px; - padding-left: 8px; - padding-right: 8px; - padding-top: 0; - padding-bottom: 0; - background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); - border-style: solid; - border-width: 1px; - color: #57606a; - max-width: 100%; - padding-right: 0; - position: relative; -} - -.c4:hover { - background-color: rgba(175,184,193,0.2); - color: #24292f; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -3708,7 +3680,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="large" tabIndex={0} > @@ -3756,7 +3727,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="large" tabIndex={0} > @@ -3804,7 +3774,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="large" tabIndex={0} > @@ -3852,7 +3821,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="large" tabIndex={0} > @@ -3900,7 +3868,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="large" tabIndex={0} > @@ -3948,7 +3915,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="large" tabIndex={0} > @@ -3996,7 +3962,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="large" tabIndex={0} > @@ -4044,7 +4009,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="large" tabIndex={0} > @@ -4230,21 +4194,60 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` outline: 0; } -.c6 { - background-color: transparent; - font-family: inherit; - color: currentColor; +.c4 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 999px; cursor: pointer; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; + font-weight: 600; + font-family: inherit; + -webkit-text-decoration: none; + text-decoration: none; + position: relative; + white-space: nowrap; + font-size: 14px; + height: 32px; + line-height: 32px; + padding-left: 16px; + padding-right: 16px; + padding-top: 0; + padding-bottom: 0; + background-color: rgba(234,238,242,0.5); + border-color: rgba(27,31,36,0.15); + border-style: solid; + border-width: 1px; + color: #57606a; + max-width: 100%; + padding-right: 0; +} + +.c4:hover { + background-color: rgba(175,184,193,0.2); + box-shadow: 0 3px 6px rgba(140,149,159,0.15); + color: #24292f; +} + +.c6 { + background-color: transparent; + font-family: inherit; + color: currentColor; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-user-select: none; @@ -4320,44 +4323,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` bottom: 0; } -.c4 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border-radius: 999px; - cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-weight: 600; - font-family: inherit; - -webkit-text-decoration: none; - text-decoration: none; - white-space: nowrap; - font-size: 14px; - height: 32px; - line-height: 32px; - padding-left: 16px; - padding-right: 16px; - padding-top: 0; - padding-bottom: 0; - background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); - border-style: solid; - border-width: 1px; - color: #57606a; - max-width: 100%; - padding-right: 0; - position: relative; -} - -.c4:hover { - background-color: rgba(175,184,193,0.2); - color: #24292f; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -4392,7 +4357,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="extralarge" tabIndex={0} > @@ -4440,7 +4404,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="extralarge" tabIndex={0} > @@ -4488,7 +4451,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="extralarge" tabIndex={0} > @@ -4536,7 +4498,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="extralarge" tabIndex={0} > @@ -4584,7 +4545,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="extralarge" tabIndex={0} > @@ -4632,7 +4592,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="extralarge" tabIndex={0} > @@ -4680,7 +4639,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="extralarge" tabIndex={0} > @@ -4728,7 +4686,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="extralarge" tabIndex={0} > @@ -4914,6 +4871,45 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = ` outline: 0; } +.c4 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 999px; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-weight: 600; + font-family: inherit; + -webkit-text-decoration: none; + text-decoration: none; + position: relative; + white-space: nowrap; + font-size: 14px; + height: 32px; + line-height: 32px; + padding-left: 16px; + padding-right: 16px; + padding-top: 0; + padding-bottom: 0; + background-color: rgba(234,238,242,0.5); + border-color: rgba(27,31,36,0.15); + border-style: solid; + border-width: 1px; + color: #57606a; + max-width: 100%; + padding-right: 0; +} + +.c4:hover { + background-color: rgba(175,184,193,0.2); + box-shadow: 0 3px 6px rgba(140,149,159,0.15); + color: #24292f; +} + .c6 { background-color: transparent; font-family: inherit; @@ -5004,44 +5000,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = ` bottom: 0; } -.c4 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border-radius: 999px; - cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-weight: 600; - font-family: inherit; - -webkit-text-decoration: none; - text-decoration: none; - white-space: nowrap; - font-size: 14px; - height: 32px; - line-height: 32px; - padding-left: 16px; - padding-right: 16px; - padding-top: 0; - padding-bottom: 0; - background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); - border-style: solid; - border-width: 1px; - color: #57606a; - max-width: 100%; - padding-right: 0; - position: relative; -} - -.c4:hover { - background-color: rgba(175,184,193,0.2); - color: #24292f; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -5076,7 +5034,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -5124,7 +5081,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -5172,7 +5128,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -5220,7 +5175,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -5268,7 +5222,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -5316,7 +5269,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -5364,7 +5316,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -5412,7 +5363,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -5600,6 +5550,45 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] outline: 0; } +.c4 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 999px; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-weight: 600; + font-family: inherit; + -webkit-text-decoration: none; + text-decoration: none; + position: relative; + white-space: nowrap; + font-size: 14px; + height: 32px; + line-height: 32px; + padding-left: 16px; + padding-right: 16px; + padding-top: 0; + padding-bottom: 0; + background-color: rgba(234,238,242,0.5); + border-color: rgba(27,31,36,0.15); + border-style: solid; + border-width: 1px; + color: #57606a; + max-width: 100%; + padding-right: 0; +} + +.c4:hover { + background-color: rgba(175,184,193,0.2); + box-shadow: 0 3px 6px rgba(140,149,159,0.15); + color: #24292f; +} + .c6 { background-color: transparent; font-family: inherit; @@ -5690,44 +5679,6 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] bottom: 0; } -.c4 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border-radius: 999px; - cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-weight: 600; - font-family: inherit; - -webkit-text-decoration: none; - text-decoration: none; - white-space: nowrap; - font-size: 14px; - height: 32px; - line-height: 32px; - padding-left: 16px; - padding-right: 16px; - padding-top: 0; - padding-bottom: 0; - background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); - border-style: solid; - border-width: 1px; - color: #57606a; - max-width: 100%; - padding-right: 0; - position: relative; -} - -.c4:hover { - background-color: rgba(175,184,193,0.2); - color: #24292f; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -5762,7 +5713,6 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -5810,7 +5760,6 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -5858,7 +5807,6 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -5906,7 +5854,6 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -5954,7 +5901,6 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -6002,7 +5948,6 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -6050,7 +5995,6 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -6098,7 +6042,6 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -6284,6 +6227,44 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi outline: 0; } +.c4 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 999px; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-weight: 600; + font-family: inherit; + -webkit-text-decoration: none; + text-decoration: none; + position: relative; + white-space: nowrap; + font-size: 14px; + height: 32px; + line-height: 32px; + padding-left: 16px; + padding-right: 16px; + padding-top: 0; + padding-bottom: 0; + background-color: rgba(234,238,242,0.5); + border-color: rgba(27,31,36,0.15); + border-style: solid; + border-width: 1px; + color: #57606a; + max-width: 100%; +} + +.c4:hover { + background-color: rgba(175,184,193,0.2); + box-shadow: 0 3px 6px rgba(140,149,159,0.15); + color: #24292f; +} + .c5 { -webkit-box-flex: 1; -webkit-flex-grow: 1; @@ -6323,43 +6304,6 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi bottom: 0; } -.c4 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border-radius: 999px; - cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-weight: 600; - font-family: inherit; - -webkit-text-decoration: none; - text-decoration: none; - white-space: nowrap; - font-size: 14px; - height: 32px; - line-height: 32px; - padding-left: 16px; - padding-right: 16px; - padding-top: 0; - padding-bottom: 0; - background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); - border-style: solid; - border-width: 1px; - color: #57606a; - max-width: 100%; - position: relative; -} - -.c4:hover { - background-color: rgba(175,184,193,0.2); - color: #24292f; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -6395,7 +6339,6 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -6413,7 +6356,6 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -6431,7 +6373,6 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -6449,7 +6390,6 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -6467,7 +6407,6 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -6485,7 +6424,6 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -6503,7 +6441,6 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -6521,7 +6458,6 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -6691,6 +6627,45 @@ Array [ visibility: visible; } +.c4 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 999px; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-weight: 600; + font-family: inherit; + -webkit-text-decoration: none; + text-decoration: none; + position: relative; + white-space: nowrap; + font-size: 14px; + height: 32px; + line-height: 32px; + padding-left: 16px; + padding-right: 16px; + padding-top: 0; + padding-bottom: 0; + background-color: rgba(234,238,242,0.5); + border-color: rgba(27,31,36,0.15); + border-style: solid; + border-width: 1px; + color: #57606a; + max-width: 100%; + padding-right: 0; +} + +.c4:hover { + background-color: rgba(175,184,193,0.2); + box-shadow: 0 3px 6px rgba(140,149,159,0.15); + color: #24292f; +} + .c6 { background-color: transparent; font-family: inherit; @@ -6767,56 +6742,18 @@ Array [ -webkit-text-decoration: none; text-decoration: none; } - -.c5:is(a,button,[tabIndex='0']) { - cursor: pointer; -} - -.c5:is(a,button,[tabIndex='0']):after { - content: ''; - position: absolute; - left: 0; - top: 0; - right: 0; - bottom: 0; -} - -.c4 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border-radius: 999px; - cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-weight: 600; - font-family: inherit; - -webkit-text-decoration: none; - text-decoration: none; - white-space: nowrap; - font-size: 14px; - height: 32px; - line-height: 32px; - padding-left: 16px; - padding-right: 16px; - padding-top: 0; - padding-bottom: 0; - background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); - border-style: solid; - border-width: 1px; - color: #57606a; - max-width: 100%; - padding-right: 0; - position: relative; + +.c5:is(a,button,[tabIndex='0']) { + cursor: pointer; } -.c4:hover { - background-color: rgba(175,184,193,0.2); - color: #24292f; +.c5:is(a,button,[tabIndex='0']):after { + content: ''; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; } @media (min-width:768px) { @@ -6853,7 +6790,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -6901,7 +6837,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -6949,7 +6884,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -6997,7 +6931,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -7045,7 +6978,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -7093,7 +7025,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -7141,7 +7072,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -7189,7 +7119,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -7430,6 +7359,45 @@ Array [ visibility: hidden; } +.c6 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 999px; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-weight: 600; + font-family: inherit; + -webkit-text-decoration: none; + text-decoration: none; + position: relative; + white-space: nowrap; + font-size: 14px; + height: 32px; + line-height: 32px; + padding-left: 16px; + padding-right: 16px; + padding-top: 0; + padding-bottom: 0; + background-color: rgba(234,238,242,0.5); + border-color: rgba(27,31,36,0.15); + border-style: solid; + border-width: 1px; + color: #57606a; + max-width: 100%; + padding-right: 0; +} + +.c6:hover { + background-color: rgba(175,184,193,0.2); + box-shadow: 0 3px 6px rgba(140,149,159,0.15); + color: #24292f; +} + .c8 { background-color: transparent; font-family: inherit; @@ -7520,44 +7488,6 @@ Array [ bottom: 0; } -.c6 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border-radius: 999px; - cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-weight: 600; - font-family: inherit; - -webkit-text-decoration: none; - text-decoration: none; - white-space: nowrap; - font-size: 14px; - height: 32px; - line-height: 32px; - padding-left: 16px; - padding-right: 16px; - padding-top: 0; - padding-bottom: 0; - background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); - border-style: solid; - border-width: 1px; - color: #57606a; - max-width: 100%; - padding-right: 0; - position: relative; -} - -.c6:hover { - background-color: rgba(175,184,193,0.2); - color: #24292f; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -7630,7 +7560,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -7678,7 +7607,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -7726,7 +7654,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -7774,7 +7701,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -7822,7 +7748,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -7870,7 +7795,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -7918,7 +7842,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -7966,7 +7889,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -8201,6 +8123,45 @@ Array [ visibility: visible; } +.c4 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 999px; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-weight: 600; + font-family: inherit; + -webkit-text-decoration: none; + text-decoration: none; + position: relative; + white-space: nowrap; + font-size: 14px; + height: 32px; + line-height: 32px; + padding-left: 16px; + padding-right: 16px; + padding-top: 0; + padding-bottom: 0; + background-color: rgba(234,238,242,0.5); + border-color: rgba(27,31,36,0.15); + border-style: solid; + border-width: 1px; + color: #57606a; + max-width: 100%; + padding-right: 0; +} + +.c4:hover { + background-color: rgba(175,184,193,0.2); + box-shadow: 0 3px 6px rgba(140,149,159,0.15); + color: #24292f; +} + .c6 { background-color: transparent; font-family: inherit; @@ -8291,44 +8252,6 @@ Array [ bottom: 0; } -.c4 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border-radius: 999px; - cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-weight: 600; - font-family: inherit; - -webkit-text-decoration: none; - text-decoration: none; - white-space: nowrap; - font-size: 14px; - height: 32px; - line-height: 32px; - padding-left: 16px; - padding-right: 16px; - padding-top: 0; - padding-bottom: 0; - background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); - border-style: solid; - border-width: 1px; - color: #57606a; - max-width: 100%; - padding-right: 0; - position: relative; -} - -.c4:hover { - background-color: rgba(175,184,193,0.2); - color: #24292f; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -8363,7 +8286,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -8411,7 +8333,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -8459,7 +8380,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -8507,7 +8427,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -8555,7 +8474,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -8603,7 +8521,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -8651,7 +8568,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -8699,7 +8615,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -8949,6 +8864,45 @@ Array [ left: 0; } +.c7 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 999px; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-weight: 600; + font-family: inherit; + -webkit-text-decoration: none; + text-decoration: none; + position: relative; + white-space: nowrap; + font-size: 14px; + height: 32px; + line-height: 32px; + padding-left: 16px; + padding-right: 16px; + padding-top: 0; + padding-bottom: 0; + background-color: rgba(234,238,242,0.5); + border-color: rgba(27,31,36,0.15); + border-style: solid; + border-width: 1px; + color: #57606a; + max-width: 100%; + padding-right: 0; +} + +.c7:hover { + background-color: rgba(175,184,193,0.2); + box-shadow: 0 3px 6px rgba(140,149,159,0.15); + color: #24292f; +} + .c9 { background-color: transparent; font-family: inherit; @@ -9017,64 +8971,26 @@ Array [ overflow: visible; padding: 0; width: auto; - -webkit-font-smoothing: inherit; - -moz-osx-font-smoothing: inherit; - -webkit-appearance: none; - line-height: 1; - color: currentColor; - -webkit-text-decoration: none; - text-decoration: none; -} - -.c8:is(a,button,[tabIndex='0']) { - cursor: pointer; -} - -.c8:is(a,button,[tabIndex='0']):after { - content: ''; - position: absolute; - left: 0; - top: 0; - right: 0; - bottom: 0; -} - -.c7 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border-radius: 999px; - cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-weight: 600; - font-family: inherit; - -webkit-text-decoration: none; - text-decoration: none; - white-space: nowrap; - font-size: 14px; - height: 32px; - line-height: 32px; - padding-left: 16px; - padding-right: 16px; - padding-top: 0; - padding-bottom: 0; - background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); - border-style: solid; - border-width: 1px; - color: #57606a; - max-width: 100%; - padding-right: 0; - position: relative; + -webkit-font-smoothing: inherit; + -moz-osx-font-smoothing: inherit; + -webkit-appearance: none; + line-height: 1; + color: currentColor; + -webkit-text-decoration: none; + text-decoration: none; } -.c7:hover { - background-color: rgba(175,184,193,0.2); - color: #24292f; +.c8:is(a,button,[tabIndex='0']) { + cursor: pointer; +} + +.c8:is(a,button,[tabIndex='0']):after { + content: ''; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; } @media (min-width:768px) { @@ -9180,7 +9096,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -9228,7 +9143,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -9276,7 +9190,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -9324,7 +9237,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -9372,7 +9284,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -9420,7 +9331,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -9468,7 +9378,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -9516,7 +9425,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -9766,6 +9674,45 @@ Array [ left: 0; } +.c7 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 999px; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-weight: 600; + font-family: inherit; + -webkit-text-decoration: none; + text-decoration: none; + position: relative; + white-space: nowrap; + font-size: 14px; + height: 32px; + line-height: 32px; + padding-left: 16px; + padding-right: 16px; + padding-top: 0; + padding-bottom: 0; + background-color: rgba(234,238,242,0.5); + border-color: rgba(27,31,36,0.15); + border-style: solid; + border-width: 1px; + color: #57606a; + max-width: 100%; + padding-right: 0; +} + +.c7:hover { + background-color: rgba(175,184,193,0.2); + box-shadow: 0 3px 6px rgba(140,149,159,0.15); + color: #24292f; +} + .c9 { background-color: transparent; font-family: inherit; @@ -9856,44 +9803,6 @@ Array [ bottom: 0; } -.c7 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border-radius: 999px; - cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-weight: 600; - font-family: inherit; - -webkit-text-decoration: none; - text-decoration: none; - white-space: nowrap; - font-size: 14px; - height: 32px; - line-height: 32px; - padding-left: 16px; - padding-right: 16px; - padding-top: 0; - padding-bottom: 0; - background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); - border-style: solid; - border-width: 1px; - color: #57606a; - max-width: 100%; - padding-right: 0; - position: relative; -} - -.c7:hover { - background-color: rgba(175,184,193,0.2); - color: #24292f; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -9997,7 +9906,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -10045,7 +9953,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -10093,7 +10000,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -10141,7 +10047,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -10189,7 +10094,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -10237,7 +10141,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -10285,7 +10188,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -10333,7 +10235,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -10583,6 +10484,45 @@ Array [ left: 0; } +.c7 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 999px; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-weight: 600; + font-family: inherit; + -webkit-text-decoration: none; + text-decoration: none; + position: relative; + white-space: nowrap; + font-size: 14px; + height: 32px; + line-height: 32px; + padding-left: 16px; + padding-right: 16px; + padding-top: 0; + padding-bottom: 0; + background-color: rgba(234,238,242,0.5); + border-color: rgba(27,31,36,0.15); + border-style: solid; + border-width: 1px; + color: #57606a; + max-width: 100%; + padding-right: 0; +} + +.c7:hover { + background-color: rgba(175,184,193,0.2); + box-shadow: 0 3px 6px rgba(140,149,159,0.15); + color: #24292f; +} + .c9 { background-color: transparent; font-family: inherit; @@ -10673,44 +10613,6 @@ Array [ bottom: 0; } -.c7 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border-radius: 999px; - cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-weight: 600; - font-family: inherit; - -webkit-text-decoration: none; - text-decoration: none; - white-space: nowrap; - font-size: 14px; - height: 32px; - line-height: 32px; - padding-left: 16px; - padding-right: 16px; - padding-top: 0; - padding-bottom: 0; - background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); - border-style: solid; - border-width: 1px; - color: #57606a; - max-width: 100%; - padding-right: 0; - position: relative; -} - -.c7:hover { - background-color: rgba(175,184,193,0.2); - color: #24292f; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -10814,7 +10716,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -10862,7 +10763,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -10910,7 +10810,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -10958,7 +10857,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -11006,7 +10904,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -11054,7 +10951,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -11102,7 +10998,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -11150,7 +11045,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -11394,6 +11288,45 @@ Array [ right: 0; } +.c4 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 999px; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-weight: 600; + font-family: inherit; + -webkit-text-decoration: none; + text-decoration: none; + position: relative; + white-space: nowrap; + font-size: 14px; + height: 32px; + line-height: 32px; + padding-left: 16px; + padding-right: 16px; + padding-top: 0; + padding-bottom: 0; + background-color: rgba(234,238,242,0.5); + border-color: rgba(27,31,36,0.15); + border-style: solid; + border-width: 1px; + color: #57606a; + max-width: 100%; + padding-right: 0; +} + +.c4:hover { + background-color: rgba(175,184,193,0.2); + box-shadow: 0 3px 6px rgba(140,149,159,0.15); + color: #24292f; +} + .c6 { background-color: transparent; font-family: inherit; @@ -11475,51 +11408,13 @@ Array [ cursor: pointer; } -.c5:is(a,button,[tabIndex='0']):after { - content: ''; - position: absolute; - left: 0; - top: 0; - right: 0; - bottom: 0; -} - -.c4 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border-radius: 999px; - cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-weight: 600; - font-family: inherit; - -webkit-text-decoration: none; - text-decoration: none; - white-space: nowrap; - font-size: 14px; - height: 32px; - line-height: 32px; - padding-left: 16px; - padding-right: 16px; - padding-top: 0; - padding-bottom: 0; - background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); - border-style: solid; - border-width: 1px; - color: #57606a; - max-width: 100%; - padding-right: 0; - position: relative; -} - -.c4:hover { - background-color: rgba(175,184,193,0.2); - color: #24292f; +.c5:is(a,button,[tabIndex='0']):after { + content: ''; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; } @media (min-width:768px) { @@ -11556,7 +11451,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -11604,7 +11498,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -11652,7 +11545,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -11700,7 +11592,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -11748,7 +11639,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -11796,7 +11686,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -11844,7 +11733,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -11892,7 +11780,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -12173,6 +12060,45 @@ Array [ right: 0; } +.c6 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 999px; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-weight: 600; + font-family: inherit; + -webkit-text-decoration: none; + text-decoration: none; + position: relative; + white-space: nowrap; + font-size: 14px; + height: 32px; + line-height: 32px; + padding-left: 16px; + padding-right: 16px; + padding-top: 0; + padding-bottom: 0; + background-color: rgba(234,238,242,0.5); + border-color: rgba(27,31,36,0.15); + border-style: solid; + border-width: 1px; + color: #57606a; + max-width: 100%; + padding-right: 0; +} + +.c6:hover { + background-color: rgba(175,184,193,0.2); + box-shadow: 0 3px 6px rgba(140,149,159,0.15); + color: #24292f; +} + .c8 { background-color: transparent; font-family: inherit; @@ -12263,44 +12189,6 @@ Array [ bottom: 0; } -.c6 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border-radius: 999px; - cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-weight: 600; - font-family: inherit; - -webkit-text-decoration: none; - text-decoration: none; - white-space: nowrap; - font-size: 14px; - height: 32px; - line-height: 32px; - padding-left: 16px; - padding-right: 16px; - padding-top: 0; - padding-bottom: 0; - background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); - border-style: solid; - border-width: 1px; - color: #57606a; - max-width: 100%; - padding-right: 0; - position: relative; -} - -.c6:hover { - background-color: rgba(175,184,193,0.2); - color: #24292f; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -12373,7 +12261,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -12421,7 +12308,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -12469,7 +12355,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -12517,7 +12402,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -12565,7 +12449,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -12613,7 +12496,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -12661,7 +12543,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -12709,7 +12590,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -12984,6 +12864,45 @@ Array [ right: 0; } +.c4 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 999px; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-weight: 600; + font-family: inherit; + -webkit-text-decoration: none; + text-decoration: none; + position: relative; + white-space: nowrap; + font-size: 14px; + height: 32px; + line-height: 32px; + padding-left: 16px; + padding-right: 16px; + padding-top: 0; + padding-bottom: 0; + background-color: rgba(234,238,242,0.5); + border-color: rgba(27,31,36,0.15); + border-style: solid; + border-width: 1px; + color: #57606a; + max-width: 100%; + padding-right: 0; +} + +.c4:hover { + background-color: rgba(175,184,193,0.2); + box-shadow: 0 3px 6px rgba(140,149,159,0.15); + color: #24292f; +} + .c6 { background-color: transparent; font-family: inherit; @@ -13074,44 +12993,6 @@ Array [ bottom: 0; } -.c4 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border-radius: 999px; - cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-weight: 600; - font-family: inherit; - -webkit-text-decoration: none; - text-decoration: none; - white-space: nowrap; - font-size: 14px; - height: 32px; - line-height: 32px; - padding-left: 16px; - padding-right: 16px; - padding-top: 0; - padding-bottom: 0; - background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); - border-style: solid; - border-width: 1px; - color: #57606a; - max-width: 100%; - padding-right: 0; - position: relative; -} - -.c4:hover { - background-color: rgba(175,184,193,0.2); - color: #24292f; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -13146,7 +13027,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -13194,7 +13074,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -13242,7 +13121,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -13290,7 +13168,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -13338,7 +13215,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -13386,7 +13262,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -13434,7 +13309,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -13482,7 +13356,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -13779,6 +13652,45 @@ Array [ right: 0; } +.c7 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 999px; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-weight: 600; + font-family: inherit; + -webkit-text-decoration: none; + text-decoration: none; + position: relative; + white-space: nowrap; + font-size: 12px; + height: 16px; + line-height: 16px; + padding-left: 4px; + padding-right: 4px; + padding-top: 0; + padding-bottom: 0; + background-color: rgba(234,238,242,0.5); + border-color: rgba(27,31,36,0.15); + border-style: solid; + border-width: 1px; + color: #57606a; + max-width: 100%; + padding-right: 0; +} + +.c7:hover { + background-color: rgba(175,184,193,0.2); + box-shadow: 0 3px 6px rgba(140,149,159,0.15); + color: #24292f; +} + .c9 { background-color: transparent; font-family: inherit; @@ -13841,70 +13753,32 @@ Array [ white-space: nowrap; background: transparent; border: none; - color: inherit; - font: inherit; - margin: 0; - overflow: visible; - padding: 0; - width: auto; - -webkit-font-smoothing: inherit; - -moz-osx-font-smoothing: inherit; - -webkit-appearance: none; - line-height: 1; - color: currentColor; - -webkit-text-decoration: none; - text-decoration: none; -} - -.c8:is(a,button,[tabIndex='0']) { - cursor: pointer; -} - -.c8:is(a,button,[tabIndex='0']):after { - content: ''; - position: absolute; - left: 0; - top: 0; - right: 0; - bottom: 0; -} - -.c7 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border-radius: 999px; - cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-weight: 600; - font-family: inherit; - -webkit-text-decoration: none; - text-decoration: none; - white-space: nowrap; - font-size: 12px; - height: 16px; - line-height: 16px; - padding-left: 4px; - padding-right: 4px; - padding-top: 0; - padding-bottom: 0; - background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); - border-style: solid; - border-width: 1px; - color: #57606a; - max-width: 100%; - padding-right: 0; - position: relative; + color: inherit; + font: inherit; + margin: 0; + overflow: visible; + padding: 0; + width: auto; + -webkit-font-smoothing: inherit; + -moz-osx-font-smoothing: inherit; + -webkit-appearance: none; + line-height: 1; + color: currentColor; + -webkit-text-decoration: none; + text-decoration: none; } -.c7:hover { - background-color: rgba(175,184,193,0.2); - color: #24292f; +.c8:is(a,button,[tabIndex='0']) { + cursor: pointer; +} + +.c8:is(a,button,[tabIndex='0']):after { + content: ''; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; } @media (min-width:768px) { @@ -14010,7 +13884,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="small" tabIndex={0} > @@ -14058,7 +13931,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="small" tabIndex={0} > @@ -14106,7 +13978,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="small" tabIndex={0} > @@ -14154,7 +14025,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="small" tabIndex={0} > @@ -14202,7 +14072,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="small" tabIndex={0} > @@ -14250,7 +14119,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="small" tabIndex={0} > @@ -14298,7 +14166,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="small" tabIndex={0} > @@ -14346,7 +14213,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="small" tabIndex={0} > @@ -14636,6 +14502,45 @@ Array [ right: 0; } +.c7 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 999px; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-weight: 600; + font-family: inherit; + -webkit-text-decoration: none; + text-decoration: none; + position: relative; + white-space: nowrap; + font-size: 14px; + height: 32px; + line-height: 32px; + padding-left: 16px; + padding-right: 16px; + padding-top: 0; + padding-bottom: 0; + background-color: rgba(234,238,242,0.5); + border-color: rgba(27,31,36,0.15); + border-style: solid; + border-width: 1px; + color: #57606a; + max-width: 100%; + padding-right: 0; +} + +.c7:hover { + background-color: rgba(175,184,193,0.2); + box-shadow: 0 3px 6px rgba(140,149,159,0.15); + color: #24292f; +} + .c9 { background-color: transparent; font-family: inherit; @@ -14726,44 +14631,6 @@ Array [ bottom: 0; } -.c7 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border-radius: 999px; - cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-weight: 600; - font-family: inherit; - -webkit-text-decoration: none; - text-decoration: none; - white-space: nowrap; - font-size: 14px; - height: 32px; - line-height: 32px; - padding-left: 16px; - padding-right: 16px; - padding-top: 0; - padding-bottom: 0; - background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); - border-style: solid; - border-width: 1px; - color: #57606a; - max-width: 100%; - padding-right: 0; - position: relative; -} - -.c7:hover { - background-color: rgba(175,184,193,0.2); - color: #24292f; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -14867,7 +14734,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -14915,7 +14781,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -14963,7 +14828,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -15011,7 +14875,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -15059,7 +14922,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -15107,7 +14969,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -15155,7 +15016,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -15203,7 +15063,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -15493,6 +15352,45 @@ Array [ right: 0; } +.c7 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 999px; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-weight: 600; + font-family: inherit; + -webkit-text-decoration: none; + text-decoration: none; + position: relative; + white-space: nowrap; + font-size: 12px; + height: 24px; + line-height: 24px; + padding-left: 8px; + padding-right: 8px; + padding-top: 0; + padding-bottom: 0; + background-color: rgba(234,238,242,0.5); + border-color: rgba(27,31,36,0.15); + border-style: solid; + border-width: 1px; + color: #57606a; + max-width: 100%; + padding-right: 0; +} + +.c7:hover { + background-color: rgba(175,184,193,0.2); + box-shadow: 0 3px 6px rgba(140,149,159,0.15); + color: #24292f; +} + .c9 { background-color: transparent; font-family: inherit; @@ -15583,44 +15481,6 @@ Array [ bottom: 0; } -.c7 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border-radius: 999px; - cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-weight: 600; - font-family: inherit; - -webkit-text-decoration: none; - text-decoration: none; - white-space: nowrap; - font-size: 12px; - height: 24px; - line-height: 24px; - padding-left: 8px; - padding-right: 8px; - padding-top: 0; - padding-bottom: 0; - background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); - border-style: solid; - border-width: 1px; - color: #57606a; - max-width: 100%; - padding-right: 0; - position: relative; -} - -.c7:hover { - background-color: rgba(175,184,193,0.2); - color: #24292f; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -15724,7 +15584,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="large" tabIndex={0} > @@ -15772,7 +15631,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="large" tabIndex={0} > @@ -15820,7 +15678,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="large" tabIndex={0} > @@ -15868,7 +15725,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="large" tabIndex={0} > @@ -15916,7 +15772,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="large" tabIndex={0} > @@ -15964,7 +15819,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="large" tabIndex={0} > @@ -16012,7 +15866,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="large" tabIndex={0} > @@ -16060,7 +15913,6 @@ Array [ onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="large" tabIndex={0} > @@ -16316,6 +16168,45 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` outline: 0; } +.c4 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 999px; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-weight: 600; + font-family: inherit; + -webkit-text-decoration: none; + text-decoration: none; + position: relative; + white-space: nowrap; + font-size: 14px; + height: 32px; + line-height: 32px; + padding-left: 16px; + padding-right: 16px; + padding-top: 0; + padding-bottom: 0; + background-color: rgba(234,238,242,0.5); + border-color: rgba(27,31,36,0.15); + border-style: solid; + border-width: 1px; + color: #57606a; + max-width: 100%; + padding-right: 0; +} + +.c4:hover { + background-color: rgba(175,184,193,0.2); + box-shadow: 0 3px 6px rgba(140,149,159,0.15); + color: #24292f; +} + .c6 { background-color: transparent; font-family: inherit; @@ -16406,44 +16297,6 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` bottom: 0; } -.c4 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border-radius: 999px; - cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-weight: 600; - font-family: inherit; - -webkit-text-decoration: none; - text-decoration: none; - white-space: nowrap; - font-size: 14px; - height: 32px; - line-height: 32px; - padding-left: 16px; - padding-right: 16px; - padding-top: 0; - padding-bottom: 0; - background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); - border-style: solid; - border-width: 1px; - color: #57606a; - max-width: 100%; - padding-right: 0; - position: relative; -} - -.c4:hover { - background-color: rgba(175,184,193,0.2); - color: #24292f; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -16478,7 +16331,6 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -16526,7 +16378,6 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -16574,7 +16425,6 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -16622,7 +16472,6 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -16670,7 +16519,6 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -16718,7 +16566,6 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -16766,7 +16613,6 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -16814,7 +16660,6 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -17015,6 +16860,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component font-family: inherit; -webkit-text-decoration: none; text-decoration: none; + position: relative; white-space: nowrap; font-size: 14px; height: 32px; @@ -17167,7 +17013,6 @@ exports[`TextInputWithTokens renders with tokens using a custom token component onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -17215,7 +17060,6 @@ exports[`TextInputWithTokens renders with tokens using a custom token component onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -17263,7 +17107,6 @@ exports[`TextInputWithTokens renders with tokens using a custom token component onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -17311,7 +17154,6 @@ exports[`TextInputWithTokens renders with tokens using a custom token component onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -17359,7 +17201,6 @@ exports[`TextInputWithTokens renders with tokens using a custom token component onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -17407,7 +17248,6 @@ exports[`TextInputWithTokens renders with tokens using a custom token component onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -17455,7 +17295,6 @@ exports[`TextInputWithTokens renders with tokens using a custom token component onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > @@ -17503,7 +17342,6 @@ exports[`TextInputWithTokens renders with tokens using a custom token component onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onRemove={[Function]} size="xlarge" tabIndex={0} > diff --git a/src/__tests__/__snapshots__/Token.test.tsx.snap b/src/__tests__/__snapshots__/Token.test.tsx.snap index f16b0d27a3a..bb88983f7cc 100644 --- a/src/__tests__/__snapshots__/Token.test.tsx.snap +++ b/src/__tests__/__snapshots__/Token.test.tsx.snap @@ -1,6 +1,14 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Token components AvatarToken renders all sizes 1`] = ` +.c1 { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + line-height: 0; + margin-right: 4px; +} + .c3 { display: inline-block; overflow: hidden; @@ -11,6 +19,40 @@ exports[`Token components AvatarToken renders all sizes 1`] = ` height: 100%; } +.c0 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 999px; + cursor: auto; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-weight: 600; + font-family: inherit; + -webkit-text-decoration: none; + text-decoration: none; + position: relative; + white-space: nowrap; + font-size: 12px; + height: 16px; + line-height: 16px; + padding-left: 4px; + padding-right: 4px; + padding-top: 0; + padding-bottom: 0; + background-color: rgba(234,238,242,0.5); + border-color: rgba(27,31,36,0.15); + border-style: solid; + border-width: 1px; + color: #57606a; + max-width: 100%; + padding-right: 0; + padding-left: 4px; +} + .c5 { background-color: transparent; font-family: inherit; @@ -99,49 +141,6 @@ exports[`Token components AvatarToken renders all sizes 1`] = ` bottom: 0; } -.c0 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border-radius: 999px; - cursor: auto; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-weight: 600; - font-family: inherit; - -webkit-text-decoration: none; - text-decoration: none; - white-space: nowrap; - font-size: 12px; - height: 16px; - line-height: 16px; - padding-left: 4px; - padding-right: 4px; - padding-top: 0; - padding-bottom: 0; - padding-left: 4px; - background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); - border-style: solid; - border-width: 1px; - color: #57606a; - max-width: 100%; - padding-right: 0; - position: relative; - padding-left: 4px; -} - -.c1 { - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - line-height: 0; - margin-right: 4px; -} - .c2 { --spacing: calc(4px * 2); display: block; @@ -153,12 +152,10 @@ exports[`Token components AvatarToken renders all sizes 1`] = ` aria-label="token, press backspace or delete to remove" className="c0" onKeyDown={[Function]} - onRemove={[MockFunction]} size="small" > - - + @@ -212,6 +209,14 @@ exports[`Token components AvatarToken renders all sizes 1`] = ` `; exports[`Token components AvatarToken renders all sizes 2`] = ` +.c1 { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + line-height: 0; + margin-right: 4px; +} + .c3 { display: inline-block; overflow: hidden; @@ -222,6 +227,40 @@ exports[`Token components AvatarToken renders all sizes 2`] = ` height: 100%; } +.c0 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 999px; + cursor: auto; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-weight: 600; + font-family: inherit; + -webkit-text-decoration: none; + text-decoration: none; + position: relative; + white-space: nowrap; + font-size: 12px; + height: 20px; + line-height: 20px; + padding-left: 8px; + padding-right: 8px; + padding-top: 0; + padding-bottom: 0; + background-color: rgba(234,238,242,0.5); + border-color: rgba(27,31,36,0.15); + border-style: solid; + border-width: 1px; + color: #57606a; + max-width: 100%; + padding-right: 0; + padding-left: 4px; +} + .c5 { background-color: transparent; font-family: inherit; @@ -310,49 +349,6 @@ exports[`Token components AvatarToken renders all sizes 2`] = ` bottom: 0; } -.c0 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border-radius: 999px; - cursor: auto; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-weight: 600; - font-family: inherit; - -webkit-text-decoration: none; - text-decoration: none; - white-space: nowrap; - font-size: 12px; - height: 20px; - line-height: 20px; - padding-left: 8px; - padding-right: 8px; - padding-top: 0; - padding-bottom: 0; - padding-left: 4px; - background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); - border-style: solid; - border-width: 1px; - color: #57606a; - max-width: 100%; - padding-right: 0; - position: relative; - padding-left: 4px; -} - -.c1 { - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - line-height: 0; - margin-right: 4px; -} - .c2 { --spacing: calc(4px * 2); display: block; @@ -364,12 +360,10 @@ exports[`Token components AvatarToken renders all sizes 2`] = ` aria-label="token, press backspace or delete to remove" className="c0" onKeyDown={[Function]} - onRemove={[MockFunction]} size="medium" > - - + @@ -423,6 +417,14 @@ exports[`Token components AvatarToken renders all sizes 2`] = ` `; exports[`Token components AvatarToken renders all sizes 3`] = ` +.c1 { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + line-height: 0; + margin-right: 8px; +} + .c3 { display: inline-block; overflow: hidden; @@ -433,6 +435,40 @@ exports[`Token components AvatarToken renders all sizes 3`] = ` height: 100%; } +.c0 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 999px; + cursor: auto; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-weight: 600; + font-family: inherit; + -webkit-text-decoration: none; + text-decoration: none; + position: relative; + white-space: nowrap; + font-size: 12px; + height: 24px; + line-height: 24px; + padding-left: 8px; + padding-right: 8px; + padding-top: 0; + padding-bottom: 0; + background-color: rgba(234,238,242,0.5); + border-color: rgba(27,31,36,0.15); + border-style: solid; + border-width: 1px; + color: #57606a; + max-width: 100%; + padding-right: 0; + padding-left: 4px; +} + .c5 { background-color: transparent; font-family: inherit; @@ -521,66 +557,21 @@ exports[`Token components AvatarToken renders all sizes 3`] = ` bottom: 0; } -.c0 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border-radius: 999px; - cursor: auto; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-weight: 600; - font-family: inherit; - -webkit-text-decoration: none; - text-decoration: none; - white-space: nowrap; - font-size: 12px; - height: 24px; - line-height: 24px; - padding-left: 8px; - padding-right: 8px; - padding-top: 0; - padding-bottom: 0; - padding-left: 4px; - background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); - border-style: solid; - border-width: 1px; - color: #57606a; - max-width: 100%; - padding-right: 0; - position: relative; - padding-left: 4px; -} - -.c1 { - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - line-height: 0; - margin-right: 8px; -} - -.c2 { - --spacing: calc(4px * 2); - display: block; - height: calc(24px - var(--spacing)); - width: calc(24px - var(--spacing)); +.c2 { + --spacing: calc(4px * 2); + display: block; + height: calc(24px - var(--spacing)); + width: calc(24px - var(--spacing)); } - - + @@ -634,6 +625,14 @@ exports[`Token components AvatarToken renders all sizes 3`] = ` `; exports[`Token components AvatarToken renders all sizes 4`] = ` +.c1 { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + line-height: 0; + margin-right: 8px; +} + .c3 { display: inline-block; overflow: hidden; @@ -644,6 +643,40 @@ exports[`Token components AvatarToken renders all sizes 4`] = ` height: 100%; } +.c0 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 999px; + cursor: auto; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-weight: 600; + font-family: inherit; + -webkit-text-decoration: none; + text-decoration: none; + position: relative; + white-space: nowrap; + font-size: 14px; + height: 32px; + line-height: 32px; + padding-left: 16px; + padding-right: 16px; + padding-top: 0; + padding-bottom: 0; + background-color: rgba(234,238,242,0.5); + border-color: rgba(27,31,36,0.15); + border-style: solid; + border-width: 1px; + color: #57606a; + max-width: 100%; + padding-right: 0; + padding-left: 4px; +} + .c5 { background-color: transparent; font-family: inherit; @@ -732,49 +765,6 @@ exports[`Token components AvatarToken renders all sizes 4`] = ` bottom: 0; } -.c0 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border-radius: 999px; - cursor: auto; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-weight: 600; - font-family: inherit; - -webkit-text-decoration: none; - text-decoration: none; - white-space: nowrap; - font-size: 14px; - height: 32px; - line-height: 32px; - padding-left: 16px; - padding-right: 16px; - padding-top: 0; - padding-bottom: 0; - padding-left: 4px; - background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); - border-style: solid; - border-width: 1px; - color: #57606a; - max-width: 100%; - padding-right: 0; - position: relative; - padding-left: 4px; -} - -.c1 { - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - line-height: 0; - margin-right: 8px; -} - .c2 { --spacing: calc(4px * 2); display: block; @@ -786,12 +776,10 @@ exports[`Token components AvatarToken renders all sizes 4`] = ` aria-label="token, press backspace or delete to remove" className="c0" onKeyDown={[Function]} - onRemove={[MockFunction]} size="extralarge" > - - + @@ -845,6 +833,14 @@ exports[`Token components AvatarToken renders all sizes 4`] = ` `; exports[`Token components AvatarToken renders all sizes 5`] = ` +.c1 { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + line-height: 0; + margin-right: 8px; +} + .c3 { display: inline-block; overflow: hidden; @@ -855,6 +851,40 @@ exports[`Token components AvatarToken renders all sizes 5`] = ` height: 100%; } +.c0 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 999px; + cursor: auto; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-weight: 600; + font-family: inherit; + -webkit-text-decoration: none; + text-decoration: none; + position: relative; + white-space: nowrap; + font-size: 14px; + height: 32px; + line-height: 32px; + padding-left: 16px; + padding-right: 16px; + padding-top: 0; + padding-bottom: 0; + background-color: rgba(234,238,242,0.5); + border-color: rgba(27,31,36,0.15); + border-style: solid; + border-width: 1px; + color: #57606a; + max-width: 100%; + padding-right: 0; + padding-left: 4px; +} + .c5 { background-color: transparent; font-family: inherit; @@ -943,49 +973,6 @@ exports[`Token components AvatarToken renders all sizes 5`] = ` bottom: 0; } -.c0 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border-radius: 999px; - cursor: auto; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-weight: 600; - font-family: inherit; - -webkit-text-decoration: none; - text-decoration: none; - white-space: nowrap; - font-size: 14px; - height: 32px; - line-height: 32px; - padding-left: 16px; - padding-right: 16px; - padding-top: 0; - padding-bottom: 0; - padding-left: 4px; - background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); - border-style: solid; - border-width: 1px; - color: #57606a; - max-width: 100%; - padding-right: 0; - position: relative; - padding-left: 4px; -} - -.c1 { - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - line-height: 0; - margin-right: 8px; -} - .c2 { --spacing: calc(4px * 2); display: block; @@ -997,12 +984,10 @@ exports[`Token components AvatarToken renders all sizes 5`] = ` aria-label="token, press backspace or delete to remove" className="c0" onKeyDown={[Function]} - onRemove={[MockFunction]} size="xlarge" > - - + @@ -1056,6 +1041,38 @@ exports[`Token components AvatarToken renders all sizes 5`] = ` `; exports[`Token components AvatarToken renders consistently 1`] = ` +.c0 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 999px; + cursor: auto; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-weight: 600; + font-family: inherit; + -webkit-text-decoration: none; + text-decoration: none; + position: relative; + white-space: nowrap; + font-size: 12px; + height: 20px; + line-height: 20px; + padding-left: 8px; + padding-right: 8px; + padding-top: 0; + padding-bottom: 0; + background-color: rgba(234,238,242,0.5); + border-color: rgba(27,31,36,0.15); + border-style: solid; + border-width: 1px; + color: #57606a; + max-width: 100%; +} + .c1 { -webkit-box-flex: 1; -webkit-flex-grow: 1; @@ -1095,6 +1112,36 @@ exports[`Token components AvatarToken renders consistently 1`] = ` bottom: 0; } + + + +`; + +exports[`Token components AvatarToken renders isSelected 1`] = ` +.c1 { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + line-height: 0; + margin-right: 4px; +} + +.c3 { + display: inline-block; + overflow: hidden; + line-height: 1; + vertical-align: middle; + border-radius: 50%; + width: 100%; + height: 100%; +} + .c0 { -webkit-align-items: center; -webkit-box-align: center; @@ -1110,6 +1157,7 @@ exports[`Token components AvatarToken renders consistently 1`] = ` font-family: inherit; -webkit-text-decoration: none; text-decoration: none; + position: relative; white-space: nowrap; font-size: 12px; height: 20px; @@ -1119,34 +1167,12 @@ exports[`Token components AvatarToken renders consistently 1`] = ` padding-top: 0; padding-bottom: 0; background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); + border-color: #24292f; border-style: solid; border-width: 1px; - color: #57606a; + color: #24292f; max-width: 100%; - position: relative; -} - - - - -`; - -exports[`Token components AvatarToken renders isSelected 1`] = ` -.c3 { - display: inline-block; - overflow: hidden; - line-height: 1; - vertical-align: middle; - border-radius: 50%; - width: 100%; - height: 100%; + padding-left: 4px; } .c4 { @@ -1188,48 +1214,6 @@ exports[`Token components AvatarToken renders isSelected 1`] = ` bottom: 0; } -.c0 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border-radius: 999px; - cursor: auto; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-weight: 600; - font-family: inherit; - -webkit-text-decoration: none; - text-decoration: none; - white-space: nowrap; - font-size: 12px; - height: 20px; - line-height: 20px; - padding-left: 8px; - padding-right: 8px; - padding-top: 0; - padding-bottom: 0; - padding-left: 4px; - background-color: rgba(234,238,242,0.5); - border-color: #24292f; - border-style: solid; - border-width: 1px; - color: #24292f; - max-width: 100%; - position: relative; - padding-left: 4px; -} - -.c1 { - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - line-height: 0; - margin-right: 4px; -} - .c2 { --spacing: calc(4px * 2); display: block; @@ -1242,9 +1226,8 @@ exports[`Token components AvatarToken renders isSelected 1`] = ` onKeyDown={[Function]} size="medium" > - - + @@ -1268,6 +1251,14 @@ exports[`Token components AvatarToken renders isSelected 1`] = ` `; exports[`Token components AvatarToken renders with a remove button 1`] = ` +.c1 { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + line-height: 0; + margin-right: 4px; +} + .c3 { display: inline-block; overflow: hidden; @@ -1278,6 +1269,40 @@ exports[`Token components AvatarToken renders with a remove button 1`] = ` height: 100%; } +.c0 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 999px; + cursor: auto; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-weight: 600; + font-family: inherit; + -webkit-text-decoration: none; + text-decoration: none; + position: relative; + white-space: nowrap; + font-size: 12px; + height: 20px; + line-height: 20px; + padding-left: 8px; + padding-right: 8px; + padding-top: 0; + padding-bottom: 0; + background-color: rgba(234,238,242,0.5); + border-color: rgba(27,31,36,0.15); + border-style: solid; + border-width: 1px; + color: #57606a; + max-width: 100%; + padding-right: 0; + padding-left: 4px; +} + .c5 { background-color: transparent; font-family: inherit; @@ -1366,49 +1391,6 @@ exports[`Token components AvatarToken renders with a remove button 1`] = ` bottom: 0; } -.c0 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border-radius: 999px; - cursor: auto; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-weight: 600; - font-family: inherit; - -webkit-text-decoration: none; - text-decoration: none; - white-space: nowrap; - font-size: 12px; - height: 20px; - line-height: 20px; - padding-left: 8px; - padding-right: 8px; - padding-top: 0; - padding-bottom: 0; - padding-left: 4px; - background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); - border-style: solid; - border-width: 1px; - color: #57606a; - max-width: 100%; - padding-right: 0; - position: relative; - padding-left: 4px; -} - -.c1 { - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - line-height: 0; - margin-right: 4px; -} - .c2 { --spacing: calc(4px * 2); display: block; @@ -1420,12 +1402,10 @@ exports[`Token components AvatarToken renders with a remove button 1`] = ` aria-label="token, press backspace or delete to remove" className="c0" onKeyDown={[Function]} - onRemove={[MockFunction]} size="medium" > - - + @@ -1494,6 +1474,7 @@ exports[`Token components IssueLabelToken renders all sizes 1`] = ` font-family: inherit; -webkit-text-decoration: none; text-decoration: none; + position: relative; white-space: nowrap; font-size: 12px; height: 16px; @@ -1614,7 +1595,6 @@ exports[`Token components IssueLabelToken renders all sizes 1`] = ` aria-label="token, press backspace or delete to remove" className="c0" onKeyDown={[Function]} - onRemove={[MockFunction]} size="small" > + + +`; + +exports[`Token components Token renders isSelected 1`] = ` .c0 { -webkit-align-items: center; -webkit-box-align: center; @@ -3980,6 +4000,7 @@ exports[`Token components Token renders consistently 1`] = ` font-family: inherit; -webkit-text-decoration: none; text-decoration: none; + position: relative; white-space: nowrap; font-size: 12px; height: 20px; @@ -3989,26 +4010,13 @@ exports[`Token components Token renders consistently 1`] = ` padding-top: 0; padding-bottom: 0; background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); + border-color: #24292f; border-style: solid; border-width: 1px; - color: #57606a; + color: #24292f; max-width: 100%; - position: relative; } - - - -`; - -exports[`Token components Token renders isSelected 1`] = ` .c1 { -webkit-box-flex: 1; -webkit-flex-grow: 1; @@ -4048,6 +4056,28 @@ exports[`Token components Token renders isSelected 1`] = ` bottom: 0; } + + + token + + +`; + +exports[`Token components Token renders with a leadingVisual 1`] = ` +.c1 { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + line-height: 0; + margin-right: 4px; +} + .c0 { -webkit-align-items: center; -webkit-box-align: center; @@ -4063,6 +4093,7 @@ exports[`Token components Token renders isSelected 1`] = ` font-family: inherit; -webkit-text-decoration: none; text-decoration: none; + position: relative; white-space: nowrap; font-size: 12px; height: 20px; @@ -4072,28 +4103,13 @@ exports[`Token components Token renders isSelected 1`] = ` padding-top: 0; padding-bottom: 0; background-color: rgba(234,238,242,0.5); - border-color: #24292f; + border-color: rgba(27,31,36,0.15); border-style: solid; border-width: 1px; - color: #24292f; + color: #57606a; max-width: 100%; - position: relative; } - - - token - - -`; - -exports[`Token components Token renders with a leadingVisual 1`] = ` .c2 { -webkit-box-flex: 1; -webkit-flex-grow: 1; @@ -4133,6 +4149,31 @@ exports[`Token components Token renders with a leadingVisual 1`] = ` bottom: 0; } + +
+
+
+ + token + + +`; + +exports[`Token components Token renders with a remove button 1`] = ` .c0 { -webkit-align-items: center; -webkit-box-align: center; @@ -4148,6 +4189,7 @@ exports[`Token components Token renders with a leadingVisual 1`] = ` font-family: inherit; -webkit-text-decoration: none; text-decoration: none; + position: relative; white-space: nowrap; font-size: 12px; height: 20px; @@ -4162,43 +4204,9 @@ exports[`Token components Token renders with a leadingVisual 1`] = ` border-width: 1px; color: #57606a; max-width: 100%; - position: relative; -} - -.c1 { - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - line-height: 0; - margin-right: 4px; + padding-right: 0; } - - -
- - - token - - -`; - -exports[`Token components Token renders with a remove button 1`] = ` .c2 { background-color: transparent; font-family: inherit; @@ -4287,44 +4295,10 @@ exports[`Token components Token renders with a remove button 1`] = ` bottom: 0; } -.c0 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border-radius: 999px; - cursor: auto; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-weight: 600; - font-family: inherit; - -webkit-text-decoration: none; - text-decoration: none; - white-space: nowrap; - font-size: 12px; - height: 20px; - line-height: 20px; - padding-left: 8px; - padding-right: 8px; - padding-top: 0; - padding-bottom: 0; - background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); - border-style: solid; - border-width: 1px; - color: #57606a; - max-width: 100%; - padding-right: 0; - position: relative; -} -