From 3b23604438b850557e7e3d0a0594a8cca119859b Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Thu, 17 Mar 2022 16:55:39 +0100
Subject: [PATCH 1/9] ActionMenu: Fix styles for windows high contrast mode
 (#1970)

* add forced-colors styles for Overlay & focused Button

* respect comment style

* add changeset

* update snapshots

* Revert "update snapshots"

This reverts commit 63743cd452f6a4bb70fee64a52b03e797eab555e.

* only update relevant snapshots
---
 .../actionmenu-fix-high-contrast-mode.md      |  5 ++++
 src/ActionList/Item.tsx                       |  3 +-
 src/Button/styles.ts                          |  6 ++++
 src/Overlay.tsx                               |  6 ++++
 .../__snapshots__/ActionMenu.test.tsx.snap    |  6 ++++
 .../AnchoredOverlay.test.tsx.snap             |  6 ++++
 .../__snapshots__/Button.test.tsx.snap        | 30 +++++++++++++++++++
 7 files changed, 60 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/actionmenu-fix-high-contrast-mode.md

diff --git a/.changeset/actionmenu-fix-high-contrast-mode.md b/.changeset/actionmenu-fix-high-contrast-mode.md
new file mode 100644
index 00000000000..c4d3c5ef3b2
--- /dev/null
+++ b/.changeset/actionmenu-fix-high-contrast-mode.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+ActionMenu: Fix styles for windows high contrast mode
diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx
index 31a74a1ac52..c57eba32b85 100644
--- a/src/ActionList/Item.tsx
+++ b/src/ActionList/Item.tsx
@@ -161,8 +161,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
 
       '@media (forced-colors: active)': {
         ':focus': {
-          // we set color to be transparent and let the high contrast rules
-          // decide what color with contrast should that be corrected to
+          // Support for Windows high contrast https://sarahmhigley.com/writing/whcm-quick-tips
           outline: 'solid 1px transparent !important'
         }
       },
diff --git a/src/Button/styles.ts b/src/Button/styles.ts
index a17f6910347..a38b80b0b61 100644
--- a/src/Button/styles.ts
+++ b/src/Button/styles.ts
@@ -250,6 +250,12 @@ export const getBaseStyles = (theme?: Theme) => ({
   },
   '&:disabled svg': {
     opacity: '0.6'
+  },
+  '@media (forced-colors: active)': {
+    '&:focus': {
+      // Support for Windows high contrast https://sarahmhigley.com/writing/whcm-quick-tips
+      outline: 'solid 1px transparent'
+    }
   }
 })
 
diff --git a/src/Overlay.tsx b/src/Overlay.tsx
index 6962a1f6112..cc9c721213c 100644
--- a/src/Overlay.tsx
+++ b/src/Overlay.tsx
@@ -78,6 +78,12 @@ const StyledOverlay = styled.div<StyledOverlayProps>`
   :focus {
     outline: none;
   }
+
+  @media (forced-colors: active) {
+    /* Support for Windows high contrast https://sarahmhigley.com/writing/whcm-quick-tips */
+    outline: solid 1px transparent;
+  }
+
   ${sx};
 `
 type BaseOverlayProps = {
diff --git a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
index b7e6b825d1c..6a1ffc5e47e 100644
--- a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
+++ b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
@@ -104,6 +104,12 @@ exports[`ActionMenu renders consistently 1`] = `
   margin-right: -4px;
 }
 
+@media (forced-colors:active) {
+  .c1:focus {
+    outline: solid 1px transparent;
+  }
+}
+
 <div
   className="c0"
   color="fg.default"
diff --git a/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap b/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap
index 61783124d9b..82b17ad7de6 100644
--- a/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap
+++ b/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap
@@ -185,6 +185,12 @@ exports[`AnchoredOverlay should render consistently when open 1`] = `
   outline: none;
 }
 
+@media (forced-colors:active) {
+  .c2 {
+    outline: solid 1px transparent;
+  }
+}
+
 <div>
   <div
     class="c0"
diff --git a/src/__tests__/__snapshots__/Button.test.tsx.snap b/src/__tests__/__snapshots__/Button.test.tsx.snap
index f2e1657f35f..6055d1e1a3d 100644
--- a/src/__tests__/__snapshots__/Button.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Button.test.tsx.snap
@@ -88,6 +88,12 @@ exports[`Button renders consistently 1`] = `
   border-color: rgba(27,31,36,0.15);
 }
 
+@media (forced-colors:active) {
+  .c0:focus {
+    outline: solid 1px transparent;
+  }
+}
+
 <button
   className="c0"
 />
@@ -198,6 +204,12 @@ exports[`Button styles danger button appropriately 1`] = `
   border-color: btn.danger.selectedBorder;
 }
 
+@media (forced-colors:active) {
+  .c0:focus {
+    outline: solid 1px transparent;
+  }
+}
+
 <button
   class="c0"
 >
@@ -294,6 +306,12 @@ exports[`Button styles invisible button appropriately 1`] = `
   background-color: btn.selectedBg;
 }
 
+@media (forced-colors:active) {
+  .c0:focus {
+    outline: solid 1px transparent;
+  }
+}
+
 <button
   class="c0"
 >
@@ -411,6 +429,12 @@ exports[`Button styles outline button appropriately 1`] = `
   border-color: btn.outline.selectedBorder;
 }
 
+@media (forced-colors:active) {
+  .c0:focus {
+    outline: solid 1px transparent;
+  }
+}
+
 <button
   class="c0"
 >
@@ -514,6 +538,12 @@ exports[`Button styles primary button appropriately 1`] = `
   box-shadow: undefined;
 }
 
+@media (forced-colors:active) {
+  .c0:focus {
+    outline: solid 1px transparent;
+  }
+}
+
 <button
   class="c0"
 >

From e9bb595680ff51a563260c020d1475102eba2535 Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Thu, 17 Mar 2022 19:44:50 -0400
Subject: [PATCH 2/9] Firefox bug - fix contrast of <select> options in dark
 mode (#1981)

* reverts select options colors to initial

* adds changeset

* rm unnecessary option style
---
 .changeset/healthy-cooks-draw.md | 5 +++++
 src/Select.tsx                   | 9 ++++-----
 2 files changed, 9 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/healthy-cooks-draw.md

diff --git a/.changeset/healthy-cooks-draw.md b/.changeset/healthy-cooks-draw.md
new file mode 100644
index 00000000000..3680cb91a6f
--- /dev/null
+++ b/.changeset/healthy-cooks-draw.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Ensures select option text has acceptable contrast in Firefox when in dark mode
diff --git a/src/Select.tsx b/src/Select.tsx
index 25708efa576..6469abab957 100644
--- a/src/Select.tsx
+++ b/src/Select.tsx
@@ -16,15 +16,14 @@ const StyledSelect = styled.select`
   outline: none;
   width: 100%;
 
+  option {
+    color: initial;
+  }
+
   /* colors the select input's placeholder text */
   &:invalid {
     color: ${get('colors.fg.subtle')};
   }
-
-  /* For Firefox: reverts color of non-placeholder options in the dropdown */
-  &:invalid option:not(:first-child) {
-    color: ${get('colors.fg.default')};
-  }
 `
 
 const ArrowIndicatorSVG: React.FC<{className?: string}> = ({className}) => (

From 177f7c30000812cbb5e1d6128051ab7f2e00d73e Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Fri, 18 Mar 2022 11:47:38 +0100
Subject: [PATCH 3/9] Remove LinkButton from docs (#1975)

LinkButton was removed in https://github.com/primer/react/pull/1880

Co-authored-by: Pavithra Kodmad <pksjce@github.com>
---
 docs/src/@primer/gatsby-theme-doctocat/nav.yml | 2 --
 1 file changed, 2 deletions(-)

diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml
index 59369018686..0637cea346a 100644
--- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml
+++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml
@@ -89,8 +89,6 @@
       url: /LabelGroup
     - title: Link
       url: /Link
-    - title: LinkButton
-      url: /LinkButton
     - title: Overlay
       url: /Overlay
     - title: Pagehead

From 4c11203c1e19f34f5a3b7e439ded5ce256babbbd Mon Sep 17 00:00:00 2001
From: CHR-onicles <tpandivine48@gmail.com>
Date: Fri, 18 Mar 2022 11:13:44 +0000
Subject: [PATCH 4/9] Fixed minor typos under the Button component (#1982)

Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com>
---
 docs/content/Button.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/content/Button.mdx b/docs/content/Button.mdx
index e3adc9f2921..b31522104a6 100644
--- a/docs/content/Button.mdx
+++ b/docs/content/Button.mdx
@@ -65,7 +65,7 @@ The `invisible` variant of `Button` indicates that the action is a low priority
 
 ### Appending an icon
 
-We can place an inside the `Button` in either the leading or the trailing position to enhance the visual context.
+We can place an icon inside the `Button` in either the leading or the trailing position to enhance the visual context.
 It is recommended to use an octicon here.
 
 ```jsx live drafts
@@ -121,7 +121,7 @@ The counter will match the `variant` styles of the parent button.
 
 ### Styling a button
 
-A button can be styled in an appropriate manner using the `sx` prop. This maybe to change width, or to add margins etc.
+A button can be styled in an appropriate manner using the `sx` prop. This may be to change width, or to add margins etc.
 Here's an example of a block button which takes 100% of available width. Checkout [styled-system](https://styled-system.com/) to see what you can send in an `sx` prop.
 
 ```jsx live drafts

From ef3b58a1fdffc8d3f709c9f63e0ee70ee0f397ba Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Mon, 21 Mar 2022 19:26:49 +1100
Subject: [PATCH 5/9] Icon button fixes: Removes iconLabel and adds aria-label
 to the type (#1945)

* Icon button fixes removes iconLabel and adds aria-label to the type

* Update test

* Fix stories and tests. Also add tooltip story

* Fix aria label types

* Update docs from drafts to main

* Create large-owls-dance.md

* update icon only example in Button.mdx

* Update docs from drafts to main

Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com>
---
 .changeset/large-owls-dance.md                |   5 +
 docs/content/Button.mdx                       |  42 +++----
 docs/content/IconButton.mdx                   |  24 ++--
 ...Button2.stories.tsx => Button.stories.tsx} |  14 +--
 src/Button/IconButton.tsx                     |  11 +-
 src/Button/types.ts                           |   8 +-
 src/__tests__/Button.test.tsx                 |  52 +++++----
 .../__snapshots__/Button.test.tsx.snap        | 105 ++++++++++++++++++
 src/stories/Tooltip.stories.tsx               |  37 ++++++
 9 files changed, 215 insertions(+), 83 deletions(-)
 create mode 100644 .changeset/large-owls-dance.md
 rename src/Button/{Button2.stories.tsx => Button.stories.tsx} (92%)
 create mode 100644 src/stories/Tooltip.stories.tsx

diff --git a/.changeset/large-owls-dance.md b/.changeset/large-owls-dance.md
new file mode 100644
index 00000000000..0c218546dc7
--- /dev/null
+++ b/.changeset/large-owls-dance.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Icon button fixes: Removes iconLabel and adds aria-label to the type
diff --git a/docs/content/Button.mdx b/docs/content/Button.mdx
index b31522104a6..eeb8c234b7b 100644
--- a/docs/content/Button.mdx
+++ b/docs/content/Button.mdx
@@ -2,26 +2,26 @@
 componentId: button
 title: Button
 status: Alpha
-source: https://github.com/primer/react/tree/main/src/Button2
-storybook: '/react/storybook?path=/story/composite-components-button2'
+source: https://github.com/primer/react/tree/main/src/Button
+storybook: '/react/storybook?path=/story/composite-components-button'
 description: Use button for the main actions on a page or form.
 ---
 
-import {Button, IconButton, LinkButton} from '@primer/react/drafts'
+import {Button, IconButton, LinkButton} from '@primer/react'
 
 ## Usage
 
 ### Installation
 
 ```js
-import {Button} from '@primer/react/drafts'
+import {Button} from '@primer/react'
 ```
 
 ### Default button
 
 This is the default variant for the `Button` component.
 
-```jsx live drafts
+```jsx live
 <Button>Default</Button>
 ```
 
@@ -29,7 +29,7 @@ This is the default variant for the `Button` component.
 
 The `danger` variant of `Button` is used to warn users about potentially destructive actions
 
-```jsx live drafts
+```jsx live
 <Button variant="danger">Danger</Button>
 ```
 
@@ -37,7 +37,7 @@ The `danger` variant of `Button` is used to warn users about potentially destruc
 
 The `outline` variant of `Button` is typically used as a secondary button
 
-```jsx live drafts
+```jsx live
 <Button variant="outline">Outline</Button>
 ```
 
@@ -45,7 +45,7 @@ The `outline` variant of `Button` is typically used as a secondary button
 
 The `invisible` variant of `Button` indicates that the action is a low priority one.
 
-```jsx live drafts
+```jsx live
 <Button variant="invisible">Invisible</Button>
 ```
 
@@ -53,7 +53,7 @@ The `invisible` variant of `Button` indicates that the action is a low priority
 
 `Button` component supports three different sizes. `small`, `medium`, `large`.
 
-```jsx live drafts
+```jsx live
 <>
   <Button size="small">Search</Button>
   <Button sx={{mt: 2}}>Search</Button>
@@ -68,7 +68,7 @@ The `invisible` variant of `Button` indicates that the action is a low priority
 We can place an icon inside the `Button` in either the leading or the trailing position to enhance the visual context.
 It is recommended to use an octicon here.
 
-```jsx live drafts
+```jsx live
 <>
   <Button leadingIcon={SearchIcon}>Search</Button>
   <Button trailingIcon={SearchIcon} sx={{mt: 2}}>
@@ -84,25 +84,19 @@ It is recommended to use an octicon here.
 
 A separate component called `IconButton` is used if the action shows only an icon with no text. This button will remain square in shape.
 
-```jsx live drafts
-<IconButton icon={SearchIcon}>Search</IconButton>
+```jsx live
+<IconButton aria-label="Search" icon={SearchIcon} />
 ```
 
 ### Different sized icon buttons
 
 `IconButton` also supports the three different sizes. `small`, `medium`, `large`.
 
-```jsx live drafts
+```jsx live
 <>
-  <IconButton icon={SearchIcon} size="small">
-    Search
-  </IconButton>
-  <IconButton sx={{ml: 2}} icon={SearchIcon}>
-    Search
-  </IconButton>
-  <IconButton sx={{ml: 2}} icon={SearchIcon} size="large">
-    Search
-  </IconButton>
+  <IconButton aria-label="Search" size="small" icon={SearchIcon} />
+  <IconButton aria-label="Search" icon={SearchIcon} sx={{ml: 2}} />
+  <IconButton aria-label="Search" size="large" icon={SearchIcon} sx={{ml: 2}} />
 </>
 ```
 
@@ -112,7 +106,7 @@ A common use case for primer is a button with a counter component which shows th
 We provide `Button.Counter` as a composite component which requires you to provide a number as child.
 The counter will match the `variant` styles of the parent button.
 
-```jsx live drafts
+```jsx live
 <Button>
   Watch
   <Button.Counter>1</Button.Counter>
@@ -124,7 +118,7 @@ The counter will match the `variant` styles of the parent button.
 A button can be styled in an appropriate manner using the `sx` prop. This may be to change width, or to add margins etc.
 Here's an example of a block button which takes 100% of available width. Checkout [styled-system](https://styled-system.com/) to see what you can send in an `sx` prop.
 
-```jsx live drafts
+```jsx live
 <Button sx={{width: '100%'}}>Block</Button>
 ```
 
diff --git a/docs/content/IconButton.mdx b/docs/content/IconButton.mdx
index 0edea279283..2af6b14024b 100644
--- a/docs/content/IconButton.mdx
+++ b/docs/content/IconButton.mdx
@@ -2,8 +2,8 @@
 title: IconButton
 componentId: icon_button
 status: Alpha
-source: https://github.com/primer/react/tree/main/src/Button2
-storybook: '/react/storybook?path=/story/composite-components-button2'
+source: https://github.com/primer/react/tree/main/src/Button
+storybook: '/react/storybook?path=/story/composite-components-button'
 description: An accessible button component with no text and only icon.
 ---
 
@@ -12,32 +12,26 @@ description: An accessible button component with no text and only icon.
 ### Installation
 
 ```js
-import {IconButton} from '@primer/react/drafts'
+import {IconButton} from '@primer/react'
 ```
 
 ### Icon only button
 
 A separate component called `IconButton` is used if the action shows only an icon with no text. This button will remain square in shape.
 
-```jsx live drafts
-<IconButton icon={SearchIcon}>Search</IconButton>
+```jsx live
+<IconButton aria-label="Search" icon={SearchIcon} />
 ```
 
 ### Different sized icon buttons
 
 `IconButton` also supports the three different sizes. `small`, `medium`, `large`.
 
-```jsx live drafts
+```jsx live
 <>
-  <IconButton icon={SearchIcon} size="small">
-    Search
-  </IconButton>
-  <IconButton sx={{ml: 2}} icon={SearchIcon}>
-    Search
-  </IconButton>
-  <IconButton sx={{ml: 2}} icon={SearchIcon} size="large">
-    Search
-  </IconButton>
+  <IconButton aria-label="Search" icon={SearchIcon} size="small" />
+  <IconButton aria-label="Search" sx={{ml: 2}} icon={SearchIcon} />
+  <IconButton aria-label="Search" sx={{ml: 2}} icon={SearchIcon} size="large" />
 </>
 ```
 
diff --git a/src/Button/Button2.stories.tsx b/src/Button/Button.stories.tsx
similarity index 92%
rename from src/Button/Button2.stories.tsx
rename to src/Button/Button.stories.tsx
index a4ae611a3ba..800915dc3a9 100644
--- a/src/Button/Button2.stories.tsx
+++ b/src/Button/Button.stories.tsx
@@ -6,7 +6,7 @@ import {BaseStyles, ThemeProvider} from '..'
 import Box from '../Box'
 
 export default {
-  title: 'Composite components/Button2',
+  title: 'Composite components/Button',
 
   decorators: [
     Story => {
@@ -75,19 +75,19 @@ export const iconButton = ({...args}: ButtonProps) => {
   return (
     <>
       <Box mb={2}>
-        <IconButton icon={XIcon} iconLabel="Close" {...args} />
+        <IconButton icon={XIcon} aria-label="Close" {...args} />
       </Box>
       <Box mb={2}>
-        <IconButton icon={XIcon} iconLabel="Close" {...args} variant="invisible" sx={{mt: 2}} />
+        <IconButton icon={XIcon} aria-label="Close" {...args} variant="invisible" sx={{mt: 2}} />
       </Box>
       <Box mb={2}>
-        <IconButton icon={XIcon} iconLabel="Close" {...args} variant="danger" />
+        <IconButton icon={XIcon} aria-label="Close" {...args} variant="danger" />
       </Box>
       <Box mb={2}>
-        <IconButton icon={XIcon} iconLabel="Close" {...args} variant="primary" />
+        <IconButton icon={XIcon} aria-label="Close" {...args} variant="primary" />
       </Box>
       <Box mb={2}>
-        <IconButton icon={XIcon} iconLabel="Close" {...args} variant="outline" />
+        <IconButton icon={XIcon} aria-label="Close" {...args} variant="outline" />
       </Box>
     </>
   )
@@ -193,7 +193,7 @@ export const DisabledButton = ({...args}: ButtonProps) => {
         </Button>
       </Box>
       <Box mb={2}>
-        <IconButton disabled icon={() => <XIcon />} iconLabel="Close" {...args} />
+        <IconButton disabled icon={() => <XIcon />} aria-label="Close" {...args} />
       </Box>
     </>
   )
diff --git a/src/Button/IconButton.tsx b/src/Button/IconButton.tsx
index 2b7ad955e48..401650829fc 100644
--- a/src/Button/IconButton.tsx
+++ b/src/Button/IconButton.tsx
@@ -4,11 +4,9 @@ import {useTheme} from '../ThemeProvider'
 import Box from '../Box'
 import {IconButtonProps, StyledButton} from './types'
 import {getBaseStyles, getSizeStyles, getVariantStyles} from './styles'
-import {useSSRSafeId} from '@react-aria/ssr'
 
 const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>((props, forwardedRef): JSX.Element => {
-  const {variant = 'default', size = 'medium', sx: sxProp = {}, icon: Icon, iconLabel, ...rest} = props
-  const iconLabelId = useSSRSafeId()
+  const {variant = 'default', size = 'medium', sx: sxProp = {}, icon: Icon, ...rest} = props
   const {theme} = useTheme()
   const sxStyles = merge.all([
     getBaseStyles(theme),
@@ -17,12 +15,7 @@ const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>((props, forwar
     sxProp as SxProp
   ])
   return (
-    <StyledButton aria-labelledby={iconLabelId} sx={sxStyles} {...rest} ref={forwardedRef}>
-      {iconLabel && (
-        <span id={iconLabelId} hidden={true}>
-          {iconLabel}
-        </span>
-      )}
+    <StyledButton sx={sxStyles} {...rest} ref={forwardedRef}>
       <Box as="span" sx={{display: 'inline-block'}}>
         <Icon />
       </Box>
diff --git a/src/Button/types.ts b/src/Button/types.ts
index 9f391f7b122..10c7188bc1a 100644
--- a/src/Button/types.ts
+++ b/src/Button/types.ts
@@ -11,6 +11,8 @@ export type Size = 'small' | 'medium' | 'large'
 
 type StyledButtonProps = ComponentPropsWithRef<typeof StyledButton>
 
+type ButtonA11yProps = {'aria-label': string; 'aria-labelby'?: never} | {'aria-label'?: never; 'aria-labelby': string}
+
 export type ButtonBaseProps = {
   /**
    * Determine's the styles on a button one of 'default' | 'primary' | 'invisible' | 'danger'
@@ -40,12 +42,8 @@ export type ButtonProps = {
   children: React.ReactNode
 } & ButtonBaseProps
 
-export type IconButtonProps = {
-  /**
-   * This is to be used if it is an icon-only button. Will make text visually hidden
-   */
+export type IconButtonProps = ButtonA11yProps & {
   icon: React.FunctionComponent<IconProps>
-  iconLabel: string
 } & ButtonBaseProps
 
 // adopted from React.AnchorHTMLAttributes
diff --git a/src/__tests__/Button.test.tsx b/src/__tests__/Button.test.tsx
index 4da60203806..7e917445f9e 100644
--- a/src/__tests__/Button.test.tsx
+++ b/src/__tests__/Button.test.tsx
@@ -10,9 +10,9 @@ expect.extend(toHaveNoViolations)
 describe('Button', () => {
   behavesAsComponent({Component: Button, options: {skipAs: true}})
 
-  it('renders a <button>', async () => {
+  it('renders a <button>', () => {
     const container = render(<Button>Default</Button>)
-    const button = await container.findByRole('button')
+    const button = container.getByRole('button')
     expect(button.textContent).toEqual('Default')
   })
 
@@ -23,76 +23,82 @@ describe('Button', () => {
     cleanup()
   })
 
-  it('preserves "onClick" prop', async () => {
+  it('preserves "onClick" prop', () => {
     const onClick = jest.fn()
     const container = render(<Button onClick={onClick}>Noop</Button>)
-    const button = await container.findByRole('button')
+    const button = container.getByRole('button')
     fireEvent.click(button)
     expect(onClick).toHaveBeenCalledTimes(1)
   })
 
-  it('respects width props', async () => {
+  it('respects width props', () => {
     const container = render(<Button sx={{width: 200}}>Block</Button>)
-    const button = await container.findByRole('button')
+    const button = container.getByRole('button')
     expect(button).toHaveStyleRule('width', '200px')
   })
 
-  it('respects the "disabled" prop', async () => {
+  it('respects the "disabled" prop', () => {
     const onClick = jest.fn()
     const container = render(
       <Button onClick={onClick} disabled>
         Disabled
       </Button>
     )
-    const button = await container.findByRole('button')
+    const button = container.getByRole('button')
     expect(button.hasAttribute('disabled')).toEqual(true)
     fireEvent.click(button)
     expect(onClick).toHaveBeenCalledTimes(0)
   })
 
-  it('respects the "variant" prop', async () => {
+  it('respects the "variant" prop', () => {
     const container = render(<Button size="small">Smol</Button>)
-    const button = await container.findByRole('button')
+    const button = container.getByRole('button')
     expect(button).toHaveStyleRule('font-size', '12px')
   })
 
-  it('respects the "fontSize" prop over the "variant" prop', async () => {
+  it('respects the "fontSize" prop over the "variant" prop', () => {
     const container = render(
       <Button size="small" sx={{fontSize: 20}}>
         Big Smol
       </Button>
     )
-    const button = await container.findByRole('button')
+    const button = container.getByRole('button')
     expect(button).toHaveStyleRule('font-size', '20px')
   })
 
-  it('styles primary button appropriately', async () => {
+  it('styles primary button appropriately', () => {
     const container = render(<Button variant="primary">Primary</Button>)
-    const button = await container.findByRole('button')
+    const button = container.getByRole('button')
     expect(button).toMatchSnapshot()
   })
 
-  it('styles invisible button appropriately', async () => {
+  it('styles invisible button appropriately', () => {
     const container = render(<Button variant="invisible">Invisible</Button>)
-    const button = await container.findByRole('button')
+    const button = container.getByRole('button')
     expect(button).toMatchSnapshot()
   })
 
-  it('styles danger button appropriately', async () => {
+  it('styles danger button appropriately', () => {
     const container = render(<Button variant="danger">Danger</Button>)
-    const button = await container.findByRole('button')
+    const button = container.getByRole('button')
     expect(button).toMatchSnapshot()
   })
 
-  it('styles outline button appropriately', async () => {
+  it('styles outline button appropriately', () => {
     const container = render(<Button variant="outline">Outline</Button>)
-    const button = await container.findByRole('button')
+    const button = container.getByRole('button')
     expect(button).toMatchSnapshot()
   })
 
-  it('styles icon only button to make it a square', async () => {
-    const container = render(<IconButton icon={SearchIcon} iconLabel="Search icon only button" />)
-    const IconOnlyButton = await container.findByRole('button')
+  it('styles icon only button to make it a square', () => {
+    const container = render(<IconButton icon={SearchIcon} aria-label="Search button" />)
+    const IconOnlyButton = container.getByRole('button')
     expect(IconOnlyButton).toHaveStyleRule('padding-right', '8px')
+    expect(IconOnlyButton).toMatchSnapshot()
+  })
+  it('makes sure icon button has an aria-label', () => {
+    const container = render(<IconButton icon={SearchIcon} aria-label="Search button" />)
+    const IconOnlyButton = container.getByLabelText('Search button')
+    expect(IconOnlyButton).toBeTruthy()
   })
 })
diff --git a/src/__tests__/__snapshots__/Button.test.tsx.snap b/src/__tests__/__snapshots__/Button.test.tsx.snap
index 6055d1e1a3d..48a7b73120c 100644
--- a/src/__tests__/__snapshots__/Button.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Button.test.tsx.snap
@@ -221,6 +221,111 @@ exports[`Button styles danger button appropriately 1`] = `
 </button>
 `;
 
+exports[`Button styles icon only button to make it a square 1`] = `
+.c1 {
+  display: inline-block;
+}
+
+.c0 {
+  border-radius: 2;
+  border: 1px solid;
+  font-family: inherit;
+  font-weight: bold;
+  line-height: 20px;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-align: center;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  padding-left: 8px;
+  padding-right: 8px;
+  font-size: 14px;
+  color: btn.text;
+  background-color: btn.bg;
+  box-shadow: undefined,undefined;
+}
+
+.c0:focus {
+  outline: none;
+}
+
+.c0:disabled {
+  cursor: default;
+  color: primer.fg.disabled;
+}
+
+.c0:disabled [data-component=ButtonCounter] {
+  color: inherit;
+}
+
+.c0:disabled svg {
+  opacity: 0.6;
+}
+
+.c0 [data-component=ButtonCounter] {
+  font-size: 14px;
+}
+
+.c0:hover:not([disabled]) {
+  background-color: btn.hoverBg;
+}
+
+.c0:focus:not([disabled]) {
+  box-shadow: undefined;
+}
+
+.c0:active:not([disabled]) {
+  background-color: btn.activeBg;
+  border-color: btn.activeBorder;
+}
+
+.c0[aria-expanded=true] {
+  background-color: btn.activeBg;
+  border-color: btn.activeBorder;
+}
+
+@media (forced-colors:active) {
+  .c0:focus {
+    outline: solid 1px transparent;
+  }
+}
+
+<button
+  aria-label="Search button"
+  class="c0"
+>
+  <span
+    class="c1"
+  >
+    <svg
+      aria-hidden="true"
+      class="octicon octicon-search"
+      fill="currentColor"
+      height="16"
+      role="img"
+      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+      viewBox="0 0 16 16"
+      width="16"
+    >
+      <path
+        d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z"
+        fill-rule="evenodd"
+      />
+    </svg>
+  </span>
+</button>
+`;
+
 exports[`Button styles invisible button appropriately 1`] = `
 .c0 {
   border-radius: 2;
diff --git a/src/stories/Tooltip.stories.tsx b/src/stories/Tooltip.stories.tsx
new file mode 100644
index 00000000000..59d034282f1
--- /dev/null
+++ b/src/stories/Tooltip.stories.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import {Meta} from '@storybook/react'
+import {BaseStyles, ThemeProvider, IconButton} from '..'
+import Box from '../Box'
+import Tooltip from '../Tooltip'
+import {SearchIcon} from '@primer/octicons-react'
+
+export default {
+  title: 'Tooltip/Default',
+  component: Tooltip,
+
+  decorators: [
+    Story => {
+      return (
+        <ThemeProvider>
+          <BaseStyles>
+            <Story />
+          </BaseStyles>
+        </ThemeProvider>
+      )
+    }
+  ]
+} as Meta
+
+export const TextTooltip = () => (
+  <Box borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2} p={3}>
+    <Tooltip aria-label="Hello, Tooltip!">Text with a tooltip</Tooltip>
+  </Box>
+)
+
+export const IconButtonTooltip = () => (
+  <Box sx={{p: 5}}>
+    <Tooltip aria-label="Search">
+      <IconButton icon={SearchIcon} aria-label="Search" />
+    </Tooltip>
+  </Box>
+)

From de3088c11ee142084fc1774374296a5def8d0b9e Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Mon, 21 Mar 2022 14:07:59 +0100
Subject: [PATCH 6/9] ActionMenu: Update memex story with overrides for new
 button (#1977)

* Update story with overrides for new button

* Fix a11y bugs in story
---
 src/stories/ActionMenu/fixtures.stories.tsx | 45 +++++++++++++++------
 1 file changed, 33 insertions(+), 12 deletions(-)

diff --git a/src/stories/ActionMenu/fixtures.stories.tsx b/src/stories/ActionMenu/fixtures.stories.tsx
index 46d960a9ad3..8e74c3677f9 100644
--- a/src/stories/ActionMenu/fixtures.stories.tsx
+++ b/src/stories/ActionMenu/fixtures.stories.tsx
@@ -535,16 +535,26 @@ export function MemexAddColumn(): JSX.Element {
   const [selectedIndex, setSelectedIndex] = React.useState(0)
   const selectedType = fieldTypes[selectedIndex]
 
-  const [duration, setDuration] = React.useState(1)
+  const [durationUnit, setDurationUnit] = React.useState('weeks')
 
   return (
     <>
       <h1>Memex Add column</h1>
 
-      <Box as="form" sx={{display: 'flex', flexDirection: 'column', width: 200}}>
-        <TextInput defaultValue="Estimate" aria-label="Field Name" sx={{mb: 2}} />
+      <Box as="form" sx={{display: 'flex', flexDirection: 'column', width: 320}}>
+        <FormControl>
+          <FormControl.Label visuallyHidden>Column name</FormControl.Label>
+          <TextInput defaultValue="Estimate" aria-label="Field Name" sx={{mb: 2}} />
+        </FormControl>
         <ActionMenu>
-          <ActionMenu.Button aria-label="Select field type" leadingIcon={selectedType.icon}>
+          <ActionMenu.Button
+            aria-label="Select field type"
+            leadingIcon={selectedType.icon}
+            sx={{
+              gridTemplateColumns: 'min-content 1fr min-content',
+              '[data-component="text"]': {textAlign: 'left'}
+            }}
+          >
             {selectedType.name}
           </ActionMenu.Button>
           <ActionMenu.Overlay width="medium">
@@ -564,22 +574,33 @@ export function MemexAddColumn(): JSX.Element {
         <Text sx={{fontSize: 0, color: 'fg.muted', mt: 3, mb: 1}}>Options</Text>
 
         <Box sx={{display: 'flex', alignItems: 'center'}}>
-          <Text sx={{fontSize: 1}}>Duration:</Text>
+          <Text as="label" sx={{fontSize: 1, mr: 2}} htmlFor="duration">
+            Duration:
+          </Text>
+          <TextInput id="duration" type="number" defaultValue="2" sx={{width: '6ch'}} />
+
           <ActionMenu>
             <ActionMenu.Button
               id="duration"
               aria-label="Select field type"
-              sx={{textAlign: 'left', ml: 2, flexGrow: 1}}
+              sx={{
+                textAlign: 'left',
+                ml: 2,
+                flexGrow: 1,
+                gridTemplateColumns: 'min-content 1fr min-content',
+                '[data-component="text"]': {textAlign: 'left'}
+              }}
             >
-              {duration} {duration > 1 ? 'weeks' : 'week'}
+              {durationUnit}
             </ActionMenu.Button>
             <ActionMenu.Overlay width="medium">
               <ActionList selectionVariant="single">
-                {[1, 2, 3, 4, 5, 6].map(weeks => (
-                  <ActionList.Item key={weeks} selected={duration === weeks} onSelect={() => setDuration(weeks)}>
-                    {weeks} {weeks > 1 ? 'weeks' : 'week'}
-                  </ActionList.Item>
-                ))}
+                <ActionList.Item selected={durationUnit === 'weeks'} onSelect={() => setDurationUnit('weeks')}>
+                  weeks
+                </ActionList.Item>
+                <ActionList.Item selected={durationUnit === 'days'} onSelect={() => setDurationUnit('days')}>
+                  days
+                </ActionList.Item>
               </ActionList>
             </ActionMenu.Overlay>
           </ActionMenu>

From da4463596de5a43fa9e629bb9562b33be4acde56 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Mon, 21 Mar 2022 14:16:09 +0100
Subject: [PATCH 7/9] update ActionList status to beta :) (#1983)

---
 docs/content/ActionList.mdx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/content/ActionList.mdx b/docs/content/ActionList.mdx
index 02c2fb4b032..9ee2161e640 100644
--- a/docs/content/ActionList.mdx
+++ b/docs/content/ActionList.mdx
@@ -1,7 +1,7 @@
 ---
 componentId: action_list
 title: ActionList
-status: Alpha
+status: Beta
 source: https://github.com/primer/react/tree/main/src/ActionList
 storybook: '/react/storybook?path=/story/composite-components-actionlist'
 description: An ActionList is a list of items that can be activated or selected. ActionList is the base component for many menu-type components, including ActionMenu and SelectPanel.
@@ -429,9 +429,9 @@ render(<SelectFields />)
     usedInProduction: true,
     usageExamplesDocumented: true,
     hasStorybookStories: true,
-    designReviewed: false,
-    a11yReviewed: false,
-    stableApi: false,
+    designReviewed: true,
+    a11yReviewed: true,
+    stableApi: false, // TODO: revisit on April 10, 2022
     addressedApiFeedback: false,
     hasDesignGuidelines: true,
     hasFigmaComponent: true

From 40ed423ed546ed91b69bc7bcc8361fd1e41faa8c Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Mon, 21 Mar 2022 15:33:54 -0400
Subject: [PATCH 8/9] Text input loading state (#1920)

* adds loading indicator to text inputs

* removes style debugging div

* updates stories and docs

* updates tests

* fixes silly test mistakes

* revert default textinput story

* adds changeset

* Update src/TextInput.tsx

Co-authored-by: Pavithra Kodmad <pksjce@github.com>

* updates component API

* addresses PR feedback

* fixes linting error

* indicate a busy status to assistive technology

* updates snaps

* renames 'isLoading' prop to 'loading'

* Update docs/content/TextInput.mdx

Co-authored-by: Cole Bemis <colebemis@github.com>

* Update docs/content/TextInput.mdx

Co-authored-by: Cole Bemis <colebemis@github.com>

* Update docs/content/TextInput.mdx

Co-authored-by: Cole Bemis <colebemis@github.com>

* Update docs/content/TextInput.mdx

Co-authored-by: Cole Bemis <colebemis@github.com>

* Update docs/content/TextInput.mdx

Co-authored-by: Cole Bemis <colebemis@github.com>

* updates snapshots

* nests examples under an 'Examples' heading

* export TextInput non-pass-through props

* fix undefined type usage

* fixes story types

Co-authored-by: Pavithra Kodmad <pksjce@github.com>
Co-authored-by: Cole Bemis <colebemis@github.com>
---
 .changeset/smooth-lemons-brake.md             |    5 +
 docs/content/TextInput.mdx                    |  107 +-
 docs/content/TextInputWithTokens.mdx          |  153 +
 src/TextInput.tsx                             |   70 +-
 src/TextInputWithTokens.tsx                   |   34 +-
 src/_TextInputInnerVisualSlot.tsx             |   45 +
 src/__tests__/TextInput.test.tsx              |   68 +-
 src/__tests__/TextInputWithTokens.test.tsx    |   89 +
 .../__snapshots__/Autocomplete.test.tsx.snap  |   21 +
 .../__snapshots__/TextInput.test.tsx.snap     | 2750 +++++
 .../TextInputWithTokens.test.tsx.snap         | 9520 +++++++++++++++++
 src/stories/TextInput.stories.tsx             |  100 +-
 src/stories/TextInputWithTokens.stories.tsx   |   70 +-
 13 files changed, 12982 insertions(+), 50 deletions(-)
 create mode 100644 .changeset/smooth-lemons-brake.md
 create mode 100644 src/_TextInputInnerVisualSlot.tsx

diff --git a/.changeset/smooth-lemons-brake.md b/.changeset/smooth-lemons-brake.md
new file mode 100644
index 00000000000..4a68284bebf
--- /dev/null
+++ b/.changeset/smooth-lemons-brake.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Adds a loadings state to our text input components
diff --git a/docs/content/TextInput.mdx b/docs/content/TextInput.mdx
index b3bdfe57be6..bb98bb7113c 100644
--- a/docs/content/TextInput.mdx
+++ b/docs/content/TextInput.mdx
@@ -9,13 +9,15 @@ TextInput is a form component to add default styling to the native text input.
 
 **Note:** Don't forget to set `aria-label` to make the TextInput accessible to screen reader users.
 
-## Default example
+## Examples
+
+### Basic
 
 ```jsx live
 <TextInput aria-label="Zipcode" name="zipcode" placeholder="Zipcode" autoComplete="postal-code" />
 ```
 
-## Text Input with icons
+### With icons
 
 ```jsx live
 <>
@@ -37,7 +39,7 @@ TextInput is a form component to add default styling to the native text input.
 </>
 ```
 
-## Text Input with text visuals
+### With text visuals
 
 ```jsx live
 <>
@@ -47,7 +49,66 @@ TextInput is a form component to add default styling to the native text input.
 </>
 ```
 
-## Text Input with error and warning states
+### With visuals and loading indicators
+
+```javascript live noinline
+const WithIconAndLoadingIndicator = () => {
+  const [loading, setLoading] = React.useState(true)
+
+  const toggleLoadingState = () => {
+    setLoading(!loading)
+  }
+
+  return (
+    <>
+      <Box mb={6}>
+        <button type="button" onClick={toggleLoadingState}>
+          Toggle loading state {loading ? 'off' : 'on'}
+        </button>
+      </Box>
+
+      <Text fontSize={3} mb={1} display="block">
+        No visual
+      </Text>
+      <Box mb={3}>
+        <TextInput loading={loading} />
+      </Box>
+
+      <Text fontSize={3} mb={1} display="block">
+        Leading visual
+      </Text>
+      <Box mb={3}>
+        <TextInput leadingVisual={SearchIcon} loading={loading} />
+      </Box>
+
+      <Text fontSize={3} mb={1} display="block">
+        Trailing visual
+      </Text>
+      <Box mb={3}>
+        <TextInput trailingVisual={SearchIcon} loading={loading} />
+      </Box>
+
+      <Text fontSize={3} mb={1} display="block">
+        Both visuals
+      </Text>
+      <Box mb={3}>
+        <TextInput leadingVisual={SearchIcon} trailingVisual={SearchIcon} loading={loading} />
+      </Box>
+
+      <Text fontSize={3} mb={2} display="block">
+        Both visuals, position overriden
+      </Text>
+      <Box mb={3}>
+        <TextInput loaderPosition="trailing" leadingVisual={SearchIcon} trailingVisual={SearchIcon} loading={loading} />
+      </Box>
+    </>
+  )
+}
+
+render(<WithIconAndLoadingIndicator />)
+```
+
+### With error and warning states
 
 ```jsx live
 <>
@@ -69,19 +130,19 @@ TextInput is a form component to add default styling to the native text input.
 </>
 ```
 
-## Block text input
+### Block text input
 
 ```jsx live
 <TextInput block aria-label="Zipcode" name="zipcode" placeholder="560076" autoComplete="postal-code" />
 ```
 
-## Contrast text input
+### Contrast text input
 
 ```jsx live
 <TextInput contrast aria-label="Zipcode" name="zipcode" placeholder="Find user" autoComplete="postal-code" />
 ```
 
-## Monospace text input
+### Monospace text input
 
 ```jsx live
 <TextInput
@@ -103,11 +164,7 @@ TextInput is a form component to add default styling to the native text input.
     name="block"
     type="boolean"
     defaultValue="false"
-    description={
-      <>
-        Creates a full width input element
-      </>
-    }
+    description="Creates a full-width input element"
   />
   <PropsTableRow
     name="contrast"
@@ -115,19 +172,32 @@ TextInput is a form component to add default styling to the native text input.
     defaultValue="false"
     description="Changes background color to a higher contrast color"
   />
-  <PropsTableRow
-    name="monospace"
-    type="boolean"
-    defaultValue="false"
-    description="Shows input in monospace font"
-  />
   <PropsTableRow name='size' type="'small' | 'medium' | 'large'"     description="Creates a smaller or larger input than the default." />
 
+<PropsTableRow name="loading" type="boolean" description="Whether to show a loading indicator in the input" />
+<PropsTableRow
+  name="loaderPosition"
+  type="'auto' | 'leading' | 'trailing'"
+  description={
+    <>
+      <div>Which position to render the loading indicator</div>
+      <ul>
+        <li>
+          'auto' (default): at the end of the input, unless a `leadingVisual` is passed. Then, it will render at the
+          beginning
+        </li>
+        <li>'leading': at the beginning of the input</li>
+        <li>'trailing': at the end of the input</li>
+      </ul>
+    </>
+  }
+/>
 <PropsTableRow
   name="leadingVisual"
   type={<>string | React.ComponentType</>}
   description="Visual positioned on the left edge inside the input"
 />
+<PropsTableRow name="monospace" type="boolean" defaultValue="false" description="Shows input in monospace font" />
 <PropsTableRow
   name="trailingVisual"
   type={<>string | React.ComponentType</>}
@@ -138,7 +208,6 @@ TextInput is a form component to add default styling to the native text input.
   type="'error' | 'success' | 'warning'"
   description="Style the input to match the status"
 />
-
 <PropsTableRow
   name="variant"
   type="'small' | 'medium' | 'large'"
diff --git a/docs/content/TextInputWithTokens.mdx b/docs/content/TextInputWithTokens.mdx
index e40ea79bd85..52c35873354 100644
--- a/docs/content/TextInputWithTokens.mdx
+++ b/docs/content/TextInputWithTokens.mdx
@@ -237,6 +237,159 @@ const LeadingVisualExample = () => {
 render(LeadingVisualExample)
 ```
 
+## With visuals and loading indicators
+
+```javascript live noinline
+const WithIconAndLoadingIndicator = () => {
+  const [dates, setDates] = React.useState([
+    {text: '01 Jan', id: 0},
+    {text: '01 Feb', id: 1},
+    {text: '01 Mar', id: 2}
+  ])
+  const onDateRemove = tokenId => {
+    setDates(dates.filter(token => token.id !== tokenId))
+  }
+
+  const [loading, setLoading] = React.useState(true)
+  const toggleLoadingState = () => {
+    setLoading(!loading)
+  }
+
+  return (
+    <>
+      <Box mb={5} display="flex" justifyContent="flex-end">
+        <button type="button" onClick={toggleLoadingState}>
+          Toggle loading state {loading ? 'off' : 'on'}
+        </button>
+      </Box>
+
+      <h3>No visual</h3>
+      <Box mb={2}>
+        <TextInputWithTokens tokens={dates} onTokenRemove={onDateRemove} value="auto" loading={loading} />
+      </Box>
+      <Box mb={2}>
+        <TextInputWithTokens
+          tokens={dates}
+          onTokenRemove={onDateRemove}
+          value="leading"
+          loading={loading}
+          loaderPosition="leading"
+        />
+      </Box>
+      <Box mb={5}>
+        <TextInputWithTokens
+          tokens={dates}
+          onTokenRemove={onDateRemove}
+          value="trailing"
+          loading={loading}
+          loaderPosition="trailing"
+        />
+      </Box>
+
+      <h3>Leading visual</h3>
+      <Box mb={2}>
+        <TextInputWithTokens
+          tokens={dates}
+          onTokenRemove={onDateRemove}
+          leadingVisual={CalendarIcon}
+          loading={loading}
+          value="auto"
+        />
+      </Box>
+      <Box mb={2}>
+        <TextInputWithTokens
+          tokens={dates}
+          onTokenRemove={onDateRemove}
+          leadingVisual={CalendarIcon}
+          loading={loading}
+          loaderPosition="leading"
+          value="leading"
+        />
+      </Box>
+      <Box mb={5}>
+        <TextInputWithTokens
+          tokens={dates}
+          onTokenRemove={onDateRemove}
+          leadingVisual={CalendarIcon}
+          loading={loading}
+          loaderPosition="trailing"
+          value="trailing"
+        />
+      </Box>
+
+      <h3>Trailing visual</h3>
+      <Box mb={2}>
+        <TextInputWithTokens
+          tokens={dates}
+          onTokenRemove={onDateRemove}
+          trailingVisual={CalendarIcon}
+          loading={loading}
+          value="auto"
+        />
+      </Box>
+      <Box mb={2}>
+        <TextInputWithTokens
+          tokens={dates}
+          onTokenRemove={onDateRemove}
+          trailingVisual={CalendarIcon}
+          loading={loading}
+          loaderPosition="leading"
+          value="leading"
+        />
+      </Box>
+      <Box mb={5}>
+        <TextInputWithTokens
+          tokens={dates}
+          onTokenRemove={onDateRemove}
+          trailingVisual={CalendarIcon}
+          loading={loading}
+          loaderPosition="trailing"
+          value="trailing"
+        />
+      </Box>
+
+      <h3>Both visuals</h3>
+      <Box mb={2}>
+        <TextInputWithTokens
+          tokens={dates}
+          onTokenRemove={onDateRemove}
+          size="small"
+          leadingVisual={CalendarIcon}
+          trailingVisual={CalendarIcon}
+          loading={loading}
+          value="auto"
+        />
+      </Box>
+      <Box mb={2}>
+        <TextInputWithTokens
+          tokens={dates}
+          onTokenRemove={onDateRemove}
+          leadingVisual={CalendarIcon}
+          trailingVisual={CalendarIcon}
+          loading={loading}
+          loaderPosition="leading"
+          value="leading"
+        />
+      </Box>
+      <Box mb={2}>
+        <TextInputWithTokens
+          tokens={dates}
+          onTokenRemove={onDateRemove}
+          size="large"
+          leadingVisual={CalendarIcon}
+          trailingVisual={CalendarIcon}
+          loading={loading}
+          loaderPosition="trailing"
+          value="trailing"
+        />
+      </Box>
+    </>
+  )
+}
+
+render(<WithIconAndLoadingIndicator />)
+```
+
 ## Props
 
 <PropsTable>
diff --git a/src/TextInput.tsx b/src/TextInput.tsx
index 6c1a21d8e6d..08f59f3ea89 100644
--- a/src/TextInput.tsx
+++ b/src/TextInput.tsx
@@ -1,14 +1,32 @@
+import React, {MouseEventHandler} from 'react'
 import {ForwardRefComponent as PolymorphicForwardRefComponent} from '@radix-ui/react-polymorphic'
 import classnames from 'classnames'
-import React from 'react'
+
+import TextInputInnerVisualSlot from './_TextInputInnerVisualSlot'
+import {useProvidedRefOrCreate} from './hooks'
 import {Merge} from './utils/types'
 import TextInputWrapper, {StyledWrapperProps} from './_TextInputWrapper'
 import UnstyledTextInput from './_UnstyledTextInput'
 
-type NonPassthroughProps = {
+export type TextInputNonPassthroughProps = {
   /** @deprecated Use `leadingVisual` or `trailingVisual` prop instead */
   icon?: React.ComponentType<{className?: string}>
+  /** Whether the to show a loading indicator in the input */
+  loading?: boolean
+  /**
+   * Which position to render the loading indicator
+   * 'auto' (default): at the end of the input, unless a `leadingVisual` is passed. Then, it will render at the beginning
+   * 'leading': at the beginning of the input
+   * 'trailing': at the end of the input
+   **/
+  loaderPosition?: 'auto' | 'leading' | 'trailing'
+  /**
+   * A visual that renders inside the input before the typing area
+   */
   leadingVisual?: string | React.ComponentType<{className?: string}>
+  /**
+   * A visual that renders inside the input after the typing area
+   */
   trailingVisual?: string | React.ComponentType<{className?: string}>
 } & Pick<
   StyledWrapperProps,
@@ -25,7 +43,7 @@ type NonPassthroughProps = {
   | 'validationStatus'
 >
 
-export type TextInputProps = Merge<React.ComponentPropsWithoutRef<'input'>, NonPassthroughProps>
+export type TextInputProps = Merge<React.ComponentPropsWithoutRef<'input'>, TextInputNonPassthroughProps>
 
 // using forwardRef is important so that other components (ex. SelectMenu) can autofocus the input
 const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
@@ -38,6 +56,8 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
       className,
       contrast,
       disabled,
+      loading,
+      loaderPosition,
       monospace,
       validationStatus,
       sx: sxProp,
@@ -52,8 +72,16 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
     },
     ref
   ) => {
+    const inputRef = useProvidedRefOrCreate(ref as React.RefObject<HTMLInputElement>)
     // this class is necessary to style FilterSearch, plz no touchy!
     const wrapperClasses = classnames(className, 'TextInput-wrapper')
+    const showLeadingLoadingIndicator =
+      loading && (loaderPosition === 'leading' || Boolean(LeadingVisual && loaderPosition !== 'trailing'))
+    const showTrailingLoadingIndicator =
+      loading && (loaderPosition === 'trailing' || Boolean(loaderPosition === 'auto' && !LeadingVisual))
+    const focusInput: MouseEventHandler = () => {
+      inputRef.current?.focus()
+    }
 
     return (
       <TextInputWrapper
@@ -69,28 +97,36 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
         minWidth={minWidthProp}
         maxWidth={maxWidthProp}
         variant={variantProp}
-        hasLeadingVisual={Boolean(LeadingVisual)}
-        hasTrailingVisual={Boolean(TrailingVisual)}
+        hasLeadingVisual={Boolean(LeadingVisual || showLeadingLoadingIndicator)}
+        hasTrailingVisual={Boolean(TrailingVisual || showTrailingLoadingIndicator)}
+        onClick={focusInput}
+        aria-live="polite"
+        aria-busy={Boolean(loading)}
       >
         {IconComponent && <IconComponent className="TextInput-icon" />}
-        {LeadingVisual && (
-          <span className="TextInput-icon">
-            {typeof LeadingVisual === 'function' ? <LeadingVisual /> : LeadingVisual}
-          </span>
-        )}
-        <UnstyledTextInput ref={ref} disabled={disabled} {...inputProps} data-component="input" />
-        {TrailingVisual && (
-          <span className="TextInput-icon">
-            {typeof TrailingVisual === 'function' ? <TrailingVisual /> : TrailingVisual}
-          </span>
-        )}
+        <TextInputInnerVisualSlot
+          visualPosition="leading"
+          showLoadingIndicator={showLeadingLoadingIndicator}
+          hasLoadingIndicator={typeof loading === 'boolean'}
+        >
+          {typeof LeadingVisual === 'function' ? <LeadingVisual /> : LeadingVisual}
+        </TextInputInnerVisualSlot>
+        <UnstyledTextInput ref={inputRef} disabled={disabled} {...inputProps} data-component="input" />
+        <TextInputInnerVisualSlot
+          visualPosition="trailing"
+          showLoadingIndicator={showTrailingLoadingIndicator}
+          hasLoadingIndicator={typeof loading === 'boolean'}
+        >
+          {typeof TrailingVisual === 'function' ? <TrailingVisual /> : TrailingVisual}
+        </TextInputInnerVisualSlot>
       </TextInputWrapper>
     )
   }
 ) as PolymorphicForwardRefComponent<'input', TextInputProps>
 
 TextInput.defaultProps = {
-  type: 'text'
+  type: 'text',
+  loaderPosition: 'auto'
 }
 
 TextInput.displayName = 'TextInput'
diff --git a/src/TextInputWithTokens.tsx b/src/TextInputWithTokens.tsx
index f43c19f606f..4ab12930433 100644
--- a/src/TextInputWithTokens.tsx
+++ b/src/TextInputWithTokens.tsx
@@ -10,6 +10,7 @@ import Text from './Text'
 import {TextInputProps} from './TextInput'
 import Token from './Token/Token'
 import {TokenSizeKeys} from './Token/TokenBase'
+import TextInputInnerVisualSlot from './_TextInputInnerVisualSlot'
 import TextInputWrapper, {textInputHorizPadding, TextInputSizes} from './_TextInputWrapper'
 import UnstyledTextInput from './_UnstyledTextInput'
 
@@ -67,6 +68,8 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
     icon: IconComponent,
     leadingVisual: LeadingVisual,
     trailingVisual: TrailingVisual,
+    loading,
+    loaderPosition,
     contrast,
     className,
     block,
@@ -238,6 +241,10 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
     large: 'medium',
     extralarge: 'medium'
   }
+  const showLeadingLoadingIndicator =
+    loading && (loaderPosition === 'leading' || Boolean(LeadingVisual && loaderPosition !== 'trailing'))
+  const showTrailingLoadingIndicator =
+    loading && (loaderPosition === 'trailing' || (loaderPosition === 'auto' && !LeadingVisual))
 
   return (
     <TextInputWrapper
@@ -281,11 +288,13 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
       }}
     >
       {IconComponent && !LeadingVisual && <IconComponent className="TextInput-icon" />}
-      {LeadingVisual && !IconComponent && (
-        <span className="TextInput-icon">
-          {typeof LeadingVisual === 'function' ? <LeadingVisual /> : LeadingVisual}
-        </span>
-      )}
+      <TextInputInnerVisualSlot
+        hasLoadingIndicator={typeof loading === 'boolean'}
+        visualPosition="leading"
+        showLoadingIndicator={showLeadingLoadingIndicator}
+      >
+        {typeof LeadingVisual === 'function' ? <LeadingVisual /> : LeadingVisual}
+      </TextInputInnerVisualSlot>
       <Box
         ref={containerRef as RefObject<HTMLDivElement>}
         display="flex"
@@ -346,11 +355,13 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
           </Text>
         ) : null}
       </Box>
-      {TrailingVisual && (
-        <span className="TextInput-icon">
-          {typeof TrailingVisual === 'function' ? <TrailingVisual /> : TrailingVisual}
-        </span>
-      )}
+      <TextInputInnerVisualSlot
+        hasLoadingIndicator={typeof loading === 'boolean'}
+        visualPosition="trailing"
+        showLoadingIndicator={showTrailingLoadingIndicator}
+      >
+        {typeof TrailingVisual === 'function' ? <TrailingVisual /> : TrailingVisual}
+      </TextInputInnerVisualSlot>
     </TextInputWrapper>
   )
 }
@@ -361,7 +372,8 @@ TextInputWithTokens.defaultProps = {
   tokenComponent: Token,
   size: 'extralarge',
   hideTokenRemoveButtons: false,
-  preventTokenWrapping: false
+  preventTokenWrapping: false,
+  loaderPosition: 'auto'
 }
 
 TextInputWithTokens.displayName = 'TextInputWithTokens'
diff --git a/src/_TextInputInnerVisualSlot.tsx b/src/_TextInputInnerVisualSlot.tsx
new file mode 100644
index 00000000000..aac487b11e8
--- /dev/null
+++ b/src/_TextInputInnerVisualSlot.tsx
@@ -0,0 +1,45 @@
+import React from 'react'
+import {Box, Spinner} from '.'
+import {TextInputNonPassthroughProps} from './TextInput'
+
+const TextInputInnerVisualSlot: React.FC<{
+  /** Whether the input is expected to ever show a loading indicator */
+  hasLoadingIndicator: boolean
+  /** Whether the to show the loading indicator */
+  showLoadingIndicator: TextInputNonPassthroughProps['loading']
+  /** Which side of this visual is being rendered */
+  visualPosition: 'leading' | 'trailing'
+}> = ({children, hasLoadingIndicator, showLoadingIndicator, visualPosition}) => {
+  if ((!children && !hasLoadingIndicator) || (visualPosition === 'leading' && !children && !showLoadingIndicator)) {
+    return null
+  }
+
+  if (!hasLoadingIndicator) {
+    return <span className="TextInput-icon">{children}</span>
+  }
+
+  return (
+    <span className="TextInput-icon">
+      <Box display="flex" position="relative">
+        {children && <Box sx={{visibility: showLoadingIndicator ? 'hidden' : 'visible'}}>{children}</Box>}
+        <Spinner
+          sx={
+            children
+              ? {
+                  position: 'absolute',
+                  top: 0,
+                  height: '100%',
+                  maxWidth: '100%',
+                  visibility: showLoadingIndicator ? 'visible' : 'hidden',
+                  ...(visualPosition === 'leading' ? {left: 0} : {right: 0})
+                }
+              : {visibility: showLoadingIndicator ? 'visible' : 'hidden'}
+          }
+          size={children ? undefined : 'small'}
+        />
+      </Box>
+    </span>
+  )
+}
+
+export default TextInputInnerVisualSlot
diff --git a/src/__tests__/TextInput.test.tsx b/src/__tests__/TextInput.test.tsx
index 09cc2439d77..a99c5eee014 100644
--- a/src/__tests__/TextInput.test.tsx
+++ b/src/__tests__/TextInput.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import {TextInput} from '..'
 import {render, mount, behavesAsComponent, checkExports} from '../utils/testing'
-import {render as HTMLRender, cleanup} from '@testing-library/react'
+import {render as HTMLRender, cleanup, fireEvent} from '@testing-library/react'
 import {axe, toHaveNoViolations} from 'jest-axe'
 import 'babel-polyfill'
 import {SearchIcon} from '@primer/octicons-react'
@@ -64,6 +64,72 @@ describe('TextInput', () => {
     expect(render(<TextInput name="search" placeholder={'Search'} trailingVisual={SearchIcon} />)).toMatchSnapshot()
   })
 
+  it('focuses the text input if you do not click the input element', () => {
+    const {container, getByLabelText} = HTMLRender(
+      <>
+        {/* eslint-disable-next-line jsx-a11y/label-has-for */}
+        <label htmlFor="testInput">Search</label>
+        <TextInput id="testInput" name="search" placeholder={'Search'} trailingVisual={SearchIcon} />
+      </>
+    )
+
+    const icon = container.querySelector('svg')!
+
+    expect(getByLabelText('Search')).not.toEqual(document.activeElement)
+    fireEvent.click(icon)
+    expect(getByLabelText('Search')).toEqual(document.activeElement)
+  })
+
+  it('renders with a loading indicator', () => {
+    expect(
+      render(
+        <>
+          <TextInput loading />
+
+          <TextInput loading loaderPosition="leading" />
+
+          <TextInput loading loaderPosition="trailing" />
+
+          <TextInput loading leadingVisual={SearchIcon} />
+
+          <TextInput loading leadingVisual={SearchIcon} loaderPosition="leading" />
+
+          <TextInput loading leadingVisual={SearchIcon} loaderPosition="trailing" />
+
+          <TextInput loading trailingVisual={SearchIcon} />
+
+          <TextInput loading trailingVisual={SearchIcon} loaderPosition="leading" />
+
+          <TextInput loading trailingVisual={SearchIcon} loaderPosition="trailing" />
+
+          <TextInput loading size="small" leadingVisual={SearchIcon} trailingVisual={SearchIcon} />
+
+          <TextInput loading leadingVisual={SearchIcon} trailingVisual={SearchIcon} loaderPosition="leading" />
+
+          <TextInput
+            loading
+            size="large"
+            leadingVisual={SearchIcon}
+            trailingVisual={SearchIcon}
+            loaderPosition="trailing"
+          />
+        </>
+      )
+    ).toMatchSnapshot()
+  })
+
+  it('indicates a busy status to assistive technology', () => {
+    const {container} = HTMLRender(
+      <>
+        {/* eslint-disable-next-line jsx-a11y/label-has-for */}
+        <label htmlFor="loadingInput">Search</label>
+        <TextInput loading id="loadingInput" />
+      </>
+    )
+
+    expect(container.querySelector('span[aria-busy=true]')).not.toBeNull()
+  })
+
   it('should call onChange prop with input value', () => {
     const onChangeMock = jest.fn()
     const component = mount(<TextInput onChange={onChangeMock} value="test" />)
diff --git a/src/__tests__/TextInputWithTokens.test.tsx b/src/__tests__/TextInputWithTokens.test.tsx
index 79cf68a2bad..51cbfd28fc7 100644
--- a/src/__tests__/TextInputWithTokens.test.tsx
+++ b/src/__tests__/TextInputWithTokens.test.tsx
@@ -109,6 +109,95 @@ describe('TextInputWithTokens', () => {
     ).toMatchSnapshot()
   })
 
+  it('renders with a loading indicator', () => {
+    const onRemoveMock = jest.fn()
+    expect(
+      render(
+        <>
+          <TextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} loading />
+
+          <TextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} loading loaderPosition="leading" />
+
+          <TextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} loading loaderPosition="trailing" />
+
+          <TextInputWithTokens
+            tokens={mockTokens}
+            onTokenRemove={onRemoveMock}
+            loading
+            leadingVisual={MarkGithubIcon}
+          />
+
+          <TextInputWithTokens
+            tokens={mockTokens}
+            onTokenRemove={onRemoveMock}
+            loading
+            leadingVisual={MarkGithubIcon}
+            loaderPosition="leading"
+          />
+
+          <TextInputWithTokens
+            tokens={mockTokens}
+            onTokenRemove={onRemoveMock}
+            loading
+            leadingVisual={MarkGithubIcon}
+            loaderPosition="trailing"
+          />
+
+          <TextInputWithTokens
+            tokens={mockTokens}
+            onTokenRemove={onRemoveMock}
+            loading
+            trailingVisual={MarkGithubIcon}
+          />
+
+          <TextInputWithTokens
+            tokens={mockTokens}
+            onTokenRemove={onRemoveMock}
+            loading
+            trailingVisual={MarkGithubIcon}
+            loaderPosition="leading"
+          />
+
+          <TextInputWithTokens
+            tokens={mockTokens}
+            onTokenRemove={onRemoveMock}
+            loading
+            trailingVisual={MarkGithubIcon}
+            loaderPosition="trailing"
+          />
+
+          <TextInputWithTokens
+            tokens={mockTokens}
+            onTokenRemove={onRemoveMock}
+            loading
+            size="small"
+            leadingVisual={MarkGithubIcon}
+            trailingVisual={MarkGithubIcon}
+          />
+
+          <TextInputWithTokens
+            tokens={mockTokens}
+            onTokenRemove={onRemoveMock}
+            loading
+            leadingVisual={MarkGithubIcon}
+            trailingVisual={MarkGithubIcon}
+            loaderPosition="leading"
+          />
+
+          <TextInputWithTokens
+            tokens={mockTokens}
+            onTokenRemove={onRemoveMock}
+            loading
+            size="large"
+            leadingVisual={MarkGithubIcon}
+            trailingVisual={MarkGithubIcon}
+            loaderPosition="trailing"
+          />
+        </>
+      )
+    ).toMatchSnapshot()
+  })
+
   it('focuses the previous token when keying ArrowLeft', () => {
     const onRemoveMock = jest.fn()
     const {getByLabelText, getByText} = HTMLRender(
diff --git a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
index e8f6413770e..41a43e1d331 100644
--- a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -94,7 +94,10 @@ Array [
 }
 
 <span
+    aria-busy={false}
+    aria-live="polite"
     className="c0 TextInput-wrapper"
+    onClick={[Function]}
   >
     <input
       aria-autocomplete="both"
@@ -241,7 +244,10 @@ Array [
 }
 
 <span
+    aria-busy={false}
+    aria-live="polite"
     className="c0 TextInput-wrapper"
+    onClick={[Function]}
   >
     <input
       aria-autocomplete="both"
@@ -423,7 +429,10 @@ Array [
 }
 
 <span
+    aria-busy={false}
+    aria-live="polite"
     className="c0 TextInput-wrapper"
+    onClick={[Function]}
   >
     <input
       aria-autocomplete="both"
@@ -1368,7 +1377,10 @@ Array [
 }
 
 <span
+    aria-busy={false}
+    aria-live="polite"
     className="c0 TextInput-wrapper"
+    onClick={[Function]}
   >
     <input
       aria-autocomplete="both"
@@ -2223,7 +2235,10 @@ Array [
 }
 
 <span
+    aria-busy={false}
+    aria-live="polite"
     className="c0 TextInput-wrapper"
+    onClick={[Function]}
   >
     <input
       aria-autocomplete="both"
@@ -3089,7 +3104,10 @@ Array [
 }
 
 <span
+    aria-busy={false}
+    aria-live="polite"
     className="c0 TextInput-wrapper"
+    onClick={[Function]}
   >
     <input
       aria-autocomplete="both"
@@ -4085,7 +4103,10 @@ Array [
 }
 
 <span
+    aria-busy={false}
+    aria-live="polite"
     className="c0 TextInput-wrapper"
+    onClick={[Function]}
   >
     <input
       aria-autocomplete="both"
diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap
index 72357fe70a8..9b90d3ef97f 100644
--- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -93,7 +93,10 @@ exports[`TextInput renders 1`] = `
 }
 
 <span
+  aria-busy={false}
+  aria-live="polite"
   className="c0 TextInput-wrapper"
+  onClick={[Function]}
 >
   <input
     className="c1"
@@ -202,7 +205,10 @@ exports[`TextInput renders block 1`] = `
 }
 
 <span
+  aria-busy={false}
+  aria-live="polite"
   className="c0 TextInput-wrapper"
+  onClick={[Function]}
 >
   <input
     className="c1"
@@ -306,7 +312,10 @@ exports[`TextInput renders consistently 1`] = `
 }
 
 <span
+  aria-busy={false}
+  aria-live="polite"
   className="c0 TextInput-wrapper"
+  onClick={[Function]}
 >
   <input
     className="c1"
@@ -410,7 +419,10 @@ exports[`TextInput renders contrast 1`] = `
 }
 
 <span
+  aria-busy={false}
+  aria-live="polite"
   className="c0 TextInput-wrapper"
+  onClick={[Function]}
 >
   <input
     className="c1"
@@ -520,7 +532,10 @@ exports[`TextInput renders error 1`] = `
 }
 
 <span
+  aria-busy={false}
+  aria-live="polite"
   className="c0 TextInput-wrapper"
+  onClick={[Function]}
 >
   <input
     className="c1"
@@ -629,7 +644,10 @@ exports[`TextInput renders large 1`] = `
 }
 
 <span
+  aria-busy={false}
+  aria-live="polite"
   className="c0 TextInput-wrapper"
+  onClick={[Function]}
   size="large"
 >
   <input
@@ -734,7 +752,10 @@ exports[`TextInput renders leadingVisual 1`] = `
 }
 
 <span
+  aria-busy={false}
+  aria-live="polite"
   className="c0 TextInput-wrapper"
+  onClick={[Function]}
 >
   <span
     className="TextInput-icon"
@@ -866,7 +887,10 @@ exports[`TextInput renders monospace 1`] = `
 }
 
 <span
+  aria-busy={false}
+  aria-live="polite"
   className="c0 TextInput-wrapper"
+  onClick={[Function]}
 >
   <input
     className="c1"
@@ -970,7 +994,10 @@ exports[`TextInput renders placeholder 1`] = `
 }
 
 <span
+  aria-busy={false}
+  aria-live="polite"
   className="c0 TextInput-wrapper"
+  onClick={[Function]}
 >
   <input
     className="c1"
@@ -1082,7 +1109,10 @@ exports[`TextInput renders small 1`] = `
 }
 
 <span
+  aria-busy={false}
+  aria-live="polite"
   className="c0 TextInput-wrapper"
+  onClick={[Function]}
   size="small"
 >
   <input
@@ -1187,7 +1217,10 @@ exports[`TextInput renders trailingVisual 1`] = `
 }
 
 <span
+  aria-busy={false}
+  aria-live="polite"
   className="c0 TextInput-wrapper"
+  onClick={[Function]}
 >
   <input
     className="c1"
@@ -1324,7 +1357,10 @@ exports[`TextInput renders warning 1`] = `
 }
 
 <span
+  aria-busy={false}
+  aria-live="polite"
   className="c0 TextInput-wrapper"
+  onClick={[Function]}
 >
   <input
     className="c1"
@@ -1335,6 +1371,2717 @@ exports[`TextInput renders warning 1`] = `
 </span>
 `;
 
+exports[`TextInput renders with a loading indicator 1`] = `
+Array [
+  .c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+}
+
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: #24292f;
+  vertical-align: middle;
+  background-color: #ffffff;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  outline: none;
+  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  min-height: 32px;
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 12px;
+}
+
+.c0::-webkit-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::-moz-placeholder {
+  color: #6e7781;
+}
+
+.c0:-ms-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::placeholder {
+  color: #6e7781;
+}
+
+.c0:focus-within {
+  border-color: #0969da;
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 .TextInput-icon {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #57606a;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c0 > input,
+.c0 > select {
+  padding-left: 12px;
+  padding-right: 0;
+}
+
+.c1 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c1:focus {
+  outline: 0;
+}
+
+.c3 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  visibility: visible;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+<span
+    aria-busy={true}
+    aria-live="polite"
+    className="c0 TextInput-wrapper"
+    onClick={[Function]}
+  >
+    <input
+      className="c1"
+      data-component="input"
+      type="text"
+    />
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c2"
+        display="flex"
+      >
+        <svg
+          className="c3"
+          fill="none"
+          height="16px"
+          sx={
+            Object {
+              "visibility": "visible",
+            }
+          }
+          viewBox="0 0 16 16"
+          width="16px"
+        >
+          <circle
+            cx="8"
+            cy="8"
+            r="7"
+            stroke="currentColor"
+            strokeOpacity="0.25"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+          <path
+            d="M15 8a7.002 7.002 0 00-7-7"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+        </svg>
+      </div>
+    </span>
+  </span>,
+  .c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+}
+
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: #24292f;
+  vertical-align: middle;
+  background-color: #ffffff;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  outline: none;
+  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  min-height: 32px;
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 12px;
+  padding-right: 0;
+}
+
+.c0::-webkit-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::-moz-placeholder {
+  color: #6e7781;
+}
+
+.c0:-ms-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::placeholder {
+  color: #6e7781;
+}
+
+.c0:focus-within {
+  border-color: #0969da;
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 .TextInput-icon {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #57606a;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c0 > input,
+.c0 > select {
+  padding-left: 0;
+  padding-right: 12px;
+}
+
+.c3 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c3:focus {
+  outline: 0;
+}
+
+.c2 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  visibility: visible;
+}
+
+.c4 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  visibility: hidden;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+<span
+    aria-busy={true}
+    aria-live="polite"
+    className="c0 TextInput-wrapper"
+    onClick={[Function]}
+  >
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c1"
+        display="flex"
+      >
+        <svg
+          className="c2"
+          fill="none"
+          height="16px"
+          sx={
+            Object {
+              "visibility": "visible",
+            }
+          }
+          viewBox="0 0 16 16"
+          width="16px"
+        >
+          <circle
+            cx="8"
+            cy="8"
+            r="7"
+            stroke="currentColor"
+            strokeOpacity="0.25"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+          <path
+            d="M15 8a7.002 7.002 0 00-7-7"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+        </svg>
+      </div>
+    </span>
+    <input
+      className="c3"
+      data-component="input"
+      type="text"
+    />
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c1"
+        display="flex"
+      >
+        <svg
+          className="c4"
+          fill="none"
+          height="16px"
+          sx={
+            Object {
+              "visibility": "hidden",
+            }
+          }
+          viewBox="0 0 16 16"
+          width="16px"
+        >
+          <circle
+            cx="8"
+            cy="8"
+            r="7"
+            stroke="currentColor"
+            strokeOpacity="0.25"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+          <path
+            d="M15 8a7.002 7.002 0 00-7-7"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+        </svg>
+      </div>
+    </span>
+  </span>,
+  .c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+}
+
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: #24292f;
+  vertical-align: middle;
+  background-color: #ffffff;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  outline: none;
+  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  min-height: 32px;
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 12px;
+}
+
+.c0::-webkit-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::-moz-placeholder {
+  color: #6e7781;
+}
+
+.c0:-ms-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::placeholder {
+  color: #6e7781;
+}
+
+.c0:focus-within {
+  border-color: #0969da;
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 .TextInput-icon {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #57606a;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c0 > input,
+.c0 > select {
+  padding-left: 12px;
+  padding-right: 0;
+}
+
+.c1 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c1:focus {
+  outline: 0;
+}
+
+.c3 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  visibility: visible;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+<span
+    aria-busy={true}
+    aria-live="polite"
+    className="c0 TextInput-wrapper"
+    onClick={[Function]}
+  >
+    <input
+      className="c1"
+      data-component="input"
+      type="text"
+    />
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c2"
+        display="flex"
+      >
+        <svg
+          className="c3"
+          fill="none"
+          height="16px"
+          sx={
+            Object {
+              "visibility": "visible",
+            }
+          }
+          viewBox="0 0 16 16"
+          width="16px"
+        >
+          <circle
+            cx="8"
+            cy="8"
+            r="7"
+            stroke="currentColor"
+            strokeOpacity="0.25"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+          <path
+            d="M15 8a7.002 7.002 0 00-7-7"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+        </svg>
+      </div>
+    </span>
+  </span>,
+  .c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+}
+
+.c2 {
+  visibility: hidden;
+}
+
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: #24292f;
+  vertical-align: middle;
+  background-color: #ffffff;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  outline: none;
+  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  min-height: 32px;
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 12px;
+  padding-right: 0;
+}
+
+.c0::-webkit-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::-moz-placeholder {
+  color: #6e7781;
+}
+
+.c0:-ms-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::placeholder {
+  color: #6e7781;
+}
+
+.c0:focus-within {
+  border-color: #0969da;
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 .TextInput-icon {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #57606a;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c0 > input,
+.c0 > select {
+  padding-left: 0;
+  padding-right: 12px;
+}
+
+.c4 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c4:focus {
+  outline: 0;
+}
+
+.c5 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  visibility: hidden;
+}
+
+.c3 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  max-width: 100%;
+  visibility: visible;
+  left: 0;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+<span
+    aria-busy={true}
+    aria-live="polite"
+    className="c0 TextInput-wrapper"
+    onClick={[Function]}
+  >
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c1"
+        display="flex"
+      >
+        <div
+          className="c2"
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-search"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={16}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={16}
+          />
+        </div>
+        <svg
+          className="c3"
+          fill="none"
+          height="32px"
+          sx={
+            Object {
+              "height": "100%",
+              "left": 0,
+              "maxWidth": "100%",
+              "position": "absolute",
+              "top": 0,
+              "visibility": "visible",
+            }
+          }
+          viewBox="0 0 16 16"
+          width="32px"
+        >
+          <circle
+            cx="8"
+            cy="8"
+            r="7"
+            stroke="currentColor"
+            strokeOpacity="0.25"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+          <path
+            d="M15 8a7.002 7.002 0 00-7-7"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+        </svg>
+      </div>
+    </span>
+    <input
+      className="c4"
+      data-component="input"
+      type="text"
+    />
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c1"
+        display="flex"
+      >
+        <svg
+          className="c5"
+          fill="none"
+          height="16px"
+          sx={
+            Object {
+              "visibility": "hidden",
+            }
+          }
+          viewBox="0 0 16 16"
+          width="16px"
+        >
+          <circle
+            cx="8"
+            cy="8"
+            r="7"
+            stroke="currentColor"
+            strokeOpacity="0.25"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+          <path
+            d="M15 8a7.002 7.002 0 00-7-7"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+        </svg>
+      </div>
+    </span>
+  </span>,
+  .c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+}
+
+.c2 {
+  visibility: hidden;
+}
+
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: #24292f;
+  vertical-align: middle;
+  background-color: #ffffff;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  outline: none;
+  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  min-height: 32px;
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 12px;
+  padding-right: 0;
+}
+
+.c0::-webkit-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::-moz-placeholder {
+  color: #6e7781;
+}
+
+.c0:-ms-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::placeholder {
+  color: #6e7781;
+}
+
+.c0:focus-within {
+  border-color: #0969da;
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 .TextInput-icon {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #57606a;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c0 > input,
+.c0 > select {
+  padding-left: 0;
+  padding-right: 12px;
+}
+
+.c4 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c4:focus {
+  outline: 0;
+}
+
+.c5 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  visibility: hidden;
+}
+
+.c3 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  max-width: 100%;
+  visibility: visible;
+  left: 0;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+<span
+    aria-busy={true}
+    aria-live="polite"
+    className="c0 TextInput-wrapper"
+    onClick={[Function]}
+  >
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c1"
+        display="flex"
+      >
+        <div
+          className="c2"
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-search"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={16}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={16}
+          />
+        </div>
+        <svg
+          className="c3"
+          fill="none"
+          height="32px"
+          sx={
+            Object {
+              "height": "100%",
+              "left": 0,
+              "maxWidth": "100%",
+              "position": "absolute",
+              "top": 0,
+              "visibility": "visible",
+            }
+          }
+          viewBox="0 0 16 16"
+          width="32px"
+        >
+          <circle
+            cx="8"
+            cy="8"
+            r="7"
+            stroke="currentColor"
+            strokeOpacity="0.25"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+          <path
+            d="M15 8a7.002 7.002 0 00-7-7"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+        </svg>
+      </div>
+    </span>
+    <input
+      className="c4"
+      data-component="input"
+      type="text"
+    />
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c1"
+        display="flex"
+      >
+        <svg
+          className="c5"
+          fill="none"
+          height="16px"
+          sx={
+            Object {
+              "visibility": "hidden",
+            }
+          }
+          viewBox="0 0 16 16"
+          width="16px"
+        >
+          <circle
+            cx="8"
+            cy="8"
+            r="7"
+            stroke="currentColor"
+            strokeOpacity="0.25"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+          <path
+            d="M15 8a7.002 7.002 0 00-7-7"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+        </svg>
+      </div>
+    </span>
+  </span>,
+  .c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+}
+
+.c2 {
+  visibility: visible;
+}
+
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: #24292f;
+  vertical-align: middle;
+  background-color: #ffffff;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  outline: none;
+  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  min-height: 32px;
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.c0::-webkit-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::-moz-placeholder {
+  color: #6e7781;
+}
+
+.c0:-ms-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::placeholder {
+  color: #6e7781;
+}
+
+.c0:focus-within {
+  border-color: #0969da;
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 .TextInput-icon {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #57606a;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c0 > input,
+.c0 > select {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c4 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c4:focus {
+  outline: 0;
+}
+
+.c5 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  visibility: visible;
+}
+
+.c3 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  max-width: 100%;
+  visibility: hidden;
+  left: 0;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+<span
+    aria-busy={true}
+    aria-live="polite"
+    className="c0 TextInput-wrapper"
+    onClick={[Function]}
+  >
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c1"
+        display="flex"
+      >
+        <div
+          className="c2"
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-search"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={16}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={16}
+          />
+        </div>
+        <svg
+          className="c3"
+          fill="none"
+          height="32px"
+          sx={
+            Object {
+              "height": "100%",
+              "left": 0,
+              "maxWidth": "100%",
+              "position": "absolute",
+              "top": 0,
+              "visibility": "hidden",
+            }
+          }
+          viewBox="0 0 16 16"
+          width="32px"
+        >
+          <circle
+            cx="8"
+            cy="8"
+            r="7"
+            stroke="currentColor"
+            strokeOpacity="0.25"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+          <path
+            d="M15 8a7.002 7.002 0 00-7-7"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+        </svg>
+      </div>
+    </span>
+    <input
+      className="c4"
+      data-component="input"
+      type="text"
+    />
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c1"
+        display="flex"
+      >
+        <svg
+          className="c5"
+          fill="none"
+          height="16px"
+          sx={
+            Object {
+              "visibility": "visible",
+            }
+          }
+          viewBox="0 0 16 16"
+          width="16px"
+        >
+          <circle
+            cx="8"
+            cy="8"
+            r="7"
+            stroke="currentColor"
+            strokeOpacity="0.25"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+          <path
+            d="M15 8a7.002 7.002 0 00-7-7"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+        </svg>
+      </div>
+    </span>
+  </span>,
+  .c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+}
+
+.c3 {
+  visibility: hidden;
+}
+
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: #24292f;
+  vertical-align: middle;
+  background-color: #ffffff;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  outline: none;
+  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  min-height: 32px;
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 12px;
+}
+
+.c0::-webkit-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::-moz-placeholder {
+  color: #6e7781;
+}
+
+.c0:-ms-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::placeholder {
+  color: #6e7781;
+}
+
+.c0:focus-within {
+  border-color: #0969da;
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 .TextInput-icon {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #57606a;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c0 > input,
+.c0 > select {
+  padding-left: 12px;
+  padding-right: 0;
+}
+
+.c1 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c1:focus {
+  outline: 0;
+}
+
+.c4 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  max-width: 100%;
+  visibility: visible;
+  right: 0;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+<span
+    aria-busy={true}
+    aria-live="polite"
+    className="c0 TextInput-wrapper"
+    onClick={[Function]}
+  >
+    <input
+      className="c1"
+      data-component="input"
+      type="text"
+    />
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c2"
+        display="flex"
+      >
+        <div
+          className="c3"
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-search"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={16}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={16}
+          />
+        </div>
+        <svg
+          className="c4"
+          fill="none"
+          height="32px"
+          sx={
+            Object {
+              "height": "100%",
+              "maxWidth": "100%",
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+              "visibility": "visible",
+            }
+          }
+          viewBox="0 0 16 16"
+          width="32px"
+        >
+          <circle
+            cx="8"
+            cy="8"
+            r="7"
+            stroke="currentColor"
+            strokeOpacity="0.25"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+          <path
+            d="M15 8a7.002 7.002 0 00-7-7"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+        </svg>
+      </div>
+    </span>
+  </span>,
+  .c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+}
+
+.c4 {
+  visibility: visible;
+}
+
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: #24292f;
+  vertical-align: middle;
+  background-color: #ffffff;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  outline: none;
+  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  min-height: 32px;
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.c0::-webkit-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::-moz-placeholder {
+  color: #6e7781;
+}
+
+.c0:-ms-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::placeholder {
+  color: #6e7781;
+}
+
+.c0:focus-within {
+  border-color: #0969da;
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 .TextInput-icon {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #57606a;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c0 > input,
+.c0 > select {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c3 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c3:focus {
+  outline: 0;
+}
+
+.c2 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  visibility: visible;
+}
+
+.c5 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  max-width: 100%;
+  visibility: hidden;
+  right: 0;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+<span
+    aria-busy={true}
+    aria-live="polite"
+    className="c0 TextInput-wrapper"
+    onClick={[Function]}
+  >
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c1"
+        display="flex"
+      >
+        <svg
+          className="c2"
+          fill="none"
+          height="16px"
+          sx={
+            Object {
+              "visibility": "visible",
+            }
+          }
+          viewBox="0 0 16 16"
+          width="16px"
+        >
+          <circle
+            cx="8"
+            cy="8"
+            r="7"
+            stroke="currentColor"
+            strokeOpacity="0.25"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+          <path
+            d="M15 8a7.002 7.002 0 00-7-7"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+        </svg>
+      </div>
+    </span>
+    <input
+      className="c3"
+      data-component="input"
+      type="text"
+    />
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c1"
+        display="flex"
+      >
+        <div
+          className="c4"
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-search"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={16}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={16}
+          />
+        </div>
+        <svg
+          className="c5"
+          fill="none"
+          height="32px"
+          sx={
+            Object {
+              "height": "100%",
+              "maxWidth": "100%",
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+              "visibility": "hidden",
+            }
+          }
+          viewBox="0 0 16 16"
+          width="32px"
+        >
+          <circle
+            cx="8"
+            cy="8"
+            r="7"
+            stroke="currentColor"
+            strokeOpacity="0.25"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+          <path
+            d="M15 8a7.002 7.002 0 00-7-7"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+        </svg>
+      </div>
+    </span>
+  </span>,
+  .c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+}
+
+.c3 {
+  visibility: hidden;
+}
+
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: #24292f;
+  vertical-align: middle;
+  background-color: #ffffff;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  outline: none;
+  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  min-height: 32px;
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 12px;
+}
+
+.c0::-webkit-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::-moz-placeholder {
+  color: #6e7781;
+}
+
+.c0:-ms-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::placeholder {
+  color: #6e7781;
+}
+
+.c0:focus-within {
+  border-color: #0969da;
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 .TextInput-icon {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #57606a;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c0 > input,
+.c0 > select {
+  padding-left: 12px;
+  padding-right: 0;
+}
+
+.c1 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c1:focus {
+  outline: 0;
+}
+
+.c4 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  max-width: 100%;
+  visibility: visible;
+  right: 0;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+<span
+    aria-busy={true}
+    aria-live="polite"
+    className="c0 TextInput-wrapper"
+    onClick={[Function]}
+  >
+    <input
+      className="c1"
+      data-component="input"
+      type="text"
+    />
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c2"
+        display="flex"
+      >
+        <div
+          className="c3"
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-search"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={16}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={16}
+          />
+        </div>
+        <svg
+          className="c4"
+          fill="none"
+          height="32px"
+          sx={
+            Object {
+              "height": "100%",
+              "maxWidth": "100%",
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+              "visibility": "visible",
+            }
+          }
+          viewBox="0 0 16 16"
+          width="32px"
+        >
+          <circle
+            cx="8"
+            cy="8"
+            r="7"
+            stroke="currentColor"
+            strokeOpacity="0.25"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+          <path
+            d="M15 8a7.002 7.002 0 00-7-7"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+        </svg>
+      </div>
+    </span>
+  </span>,
+  .c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+}
+
+.c2 {
+  visibility: hidden;
+}
+
+.c5 {
+  visibility: visible;
+}
+
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: #24292f;
+  vertical-align: middle;
+  background-color: #ffffff;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  outline: none;
+  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  min-height: 32px;
+  min-height: 28px;
+  padding-left: 8px;
+  padding-right: 8px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  font-size: 12px;
+  line-height: 20px;
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.c0::-webkit-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::-moz-placeholder {
+  color: #6e7781;
+}
+
+.c0:-ms-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::placeholder {
+  color: #6e7781;
+}
+
+.c0:focus-within {
+  border-color: #0969da;
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 .TextInput-icon {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #57606a;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c0 > input,
+.c0 > select {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c4 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c4:focus {
+  outline: 0;
+}
+
+.c3 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  max-width: 100%;
+  visibility: visible;
+  left: 0;
+}
+
+.c6 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  max-width: 100%;
+  visibility: hidden;
+  right: 0;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+<span
+    aria-busy={true}
+    aria-live="polite"
+    className="c0 TextInput-wrapper"
+    onClick={[Function]}
+    size="small"
+  >
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c1"
+        display="flex"
+      >
+        <div
+          className="c2"
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-search"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={16}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={16}
+          />
+        </div>
+        <svg
+          className="c3"
+          fill="none"
+          height="32px"
+          sx={
+            Object {
+              "height": "100%",
+              "left": 0,
+              "maxWidth": "100%",
+              "position": "absolute",
+              "top": 0,
+              "visibility": "visible",
+            }
+          }
+          viewBox="0 0 16 16"
+          width="32px"
+        >
+          <circle
+            cx="8"
+            cy="8"
+            r="7"
+            stroke="currentColor"
+            strokeOpacity="0.25"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+          <path
+            d="M15 8a7.002 7.002 0 00-7-7"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+        </svg>
+      </div>
+    </span>
+    <input
+      className="c4"
+      data-component="input"
+      type="text"
+    />
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c1"
+        display="flex"
+      >
+        <div
+          className="c5"
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-search"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={16}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={16}
+          />
+        </div>
+        <svg
+          className="c6"
+          fill="none"
+          height="32px"
+          sx={
+            Object {
+              "height": "100%",
+              "maxWidth": "100%",
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+              "visibility": "hidden",
+            }
+          }
+          viewBox="0 0 16 16"
+          width="32px"
+        >
+          <circle
+            cx="8"
+            cy="8"
+            r="7"
+            stroke="currentColor"
+            strokeOpacity="0.25"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+          <path
+            d="M15 8a7.002 7.002 0 00-7-7"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+        </svg>
+      </div>
+    </span>
+  </span>,
+  .c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+}
+
+.c2 {
+  visibility: hidden;
+}
+
+.c5 {
+  visibility: visible;
+}
+
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: #24292f;
+  vertical-align: middle;
+  background-color: #ffffff;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  outline: none;
+  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  min-height: 32px;
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.c0::-webkit-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::-moz-placeholder {
+  color: #6e7781;
+}
+
+.c0:-ms-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::placeholder {
+  color: #6e7781;
+}
+
+.c0:focus-within {
+  border-color: #0969da;
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 .TextInput-icon {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #57606a;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c0 > input,
+.c0 > select {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c4 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c4:focus {
+  outline: 0;
+}
+
+.c3 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  max-width: 100%;
+  visibility: visible;
+  left: 0;
+}
+
+.c6 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  max-width: 100%;
+  visibility: hidden;
+  right: 0;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+<span
+    aria-busy={true}
+    aria-live="polite"
+    className="c0 TextInput-wrapper"
+    onClick={[Function]}
+  >
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c1"
+        display="flex"
+      >
+        <div
+          className="c2"
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-search"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={16}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={16}
+          />
+        </div>
+        <svg
+          className="c3"
+          fill="none"
+          height="32px"
+          sx={
+            Object {
+              "height": "100%",
+              "left": 0,
+              "maxWidth": "100%",
+              "position": "absolute",
+              "top": 0,
+              "visibility": "visible",
+            }
+          }
+          viewBox="0 0 16 16"
+          width="32px"
+        >
+          <circle
+            cx="8"
+            cy="8"
+            r="7"
+            stroke="currentColor"
+            strokeOpacity="0.25"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+          <path
+            d="M15 8a7.002 7.002 0 00-7-7"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+        </svg>
+      </div>
+    </span>
+    <input
+      className="c4"
+      data-component="input"
+      type="text"
+    />
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c1"
+        display="flex"
+      >
+        <div
+          className="c5"
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-search"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={16}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={16}
+          />
+        </div>
+        <svg
+          className="c6"
+          fill="none"
+          height="32px"
+          sx={
+            Object {
+              "height": "100%",
+              "maxWidth": "100%",
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+              "visibility": "hidden",
+            }
+          }
+          viewBox="0 0 16 16"
+          width="32px"
+        >
+          <circle
+            cx="8"
+            cy="8"
+            r="7"
+            stroke="currentColor"
+            strokeOpacity="0.25"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+          <path
+            d="M15 8a7.002 7.002 0 00-7-7"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+        </svg>
+      </div>
+    </span>
+  </span>,
+  .c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+}
+
+.c5 {
+  visibility: hidden;
+}
+
+.c2 {
+  visibility: visible;
+}
+
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: #24292f;
+  vertical-align: middle;
+  background-color: #ffffff;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  outline: none;
+  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  min-height: 32px;
+  padding-left: 8px;
+  padding-right: 8px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  font-size: 20px;
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.c0::-webkit-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::-moz-placeholder {
+  color: #6e7781;
+}
+
+.c0:-ms-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::placeholder {
+  color: #6e7781;
+}
+
+.c0:focus-within {
+  border-color: #0969da;
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 .TextInput-icon {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #57606a;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c0 > input,
+.c0 > select {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c4 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c4:focus {
+  outline: 0;
+}
+
+.c3 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  max-width: 100%;
+  visibility: hidden;
+  left: 0;
+}
+
+.c6 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  max-width: 100%;
+  visibility: visible;
+  right: 0;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+<span
+    aria-busy={true}
+    aria-live="polite"
+    className="c0 TextInput-wrapper"
+    onClick={[Function]}
+    size="large"
+  >
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c1"
+        display="flex"
+      >
+        <div
+          className="c2"
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-search"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={16}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={16}
+          />
+        </div>
+        <svg
+          className="c3"
+          fill="none"
+          height="32px"
+          sx={
+            Object {
+              "height": "100%",
+              "left": 0,
+              "maxWidth": "100%",
+              "position": "absolute",
+              "top": 0,
+              "visibility": "hidden",
+            }
+          }
+          viewBox="0 0 16 16"
+          width="32px"
+        >
+          <circle
+            cx="8"
+            cy="8"
+            r="7"
+            stroke="currentColor"
+            strokeOpacity="0.25"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+          <path
+            d="M15 8a7.002 7.002 0 00-7-7"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+        </svg>
+      </div>
+    </span>
+    <input
+      className="c4"
+      data-component="input"
+      type="text"
+    />
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c1"
+        display="flex"
+      >
+        <div
+          className="c5"
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-search"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={16}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={16}
+          />
+        </div>
+        <svg
+          className="c6"
+          fill="none"
+          height="32px"
+          sx={
+            Object {
+              "height": "100%",
+              "maxWidth": "100%",
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+              "visibility": "visible",
+            }
+          }
+          viewBox="0 0 16 16"
+          width="32px"
+        >
+          <circle
+            cx="8"
+            cy="8"
+            r="7"
+            stroke="currentColor"
+            strokeOpacity="0.25"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+          <path
+            d="M15 8a7.002 7.002 0 00-7-7"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+        </svg>
+      </div>
+    </span>
+  </span>,
+]
+`;
+
 exports[`TextInput should render a password input 1`] = `
 .c0 {
   font-size: 14px;
@@ -1428,7 +4175,10 @@ exports[`TextInput should render a password input 1`] = `
 }
 
 <span
+  aria-busy={false}
+  aria-live="polite"
   className="c0 TextInput-wrapper"
+  onClick={[Function]}
 >
   <input
     className="c1"
diff --git a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
index 5c17583b6d6..c4f02a602bc 100644
--- a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
+++ b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
@@ -5748,6 +5748,9526 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
 </span>
 `;
 
+exports[`TextInputWithTokens renders with a loading indicator 1`] = `
+Array [
+  .c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-left: -0.25rem;
+  margin-bottom: -0.25rem;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c1 > * {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  margin-left: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.c2 {
+  -webkit-order: 1;
+  -ms-flex-order: 1;
+  order: 1;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c7 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+}
+
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: #24292f;
+  vertical-align: middle;
+  background-color: #ffffff;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  outline: none;
+  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  min-height: 32px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
+.c0::-webkit-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::-moz-placeholder {
+  color: #6e7781;
+}
+
+.c0:-ms-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::placeholder {
+  color: #6e7781;
+}
+
+.c0:focus-within {
+  border-color: #0969da;
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 .TextInput-icon {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #57606a;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c0 > input,
+.c0 > select {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.c3 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c3:focus {
+  outline: 0;
+}
+
+.c8 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  visibility: visible;
+}
+
+.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);
+  -webkit-align-self: baseline;
+  -ms-flex-item-align: baseline;
+  align-self: baseline;
+  border: 0;
+  border-radius: 999px;
+  margin-left: 8px;
+  height: 32px;
+  width: 32px;
+  position: relative;
+  z-index: 1;
+}
+
+.c6:hover,
+.c6:focus {
+  background-color: rgba(175,184,193,0.2);
+}
+
+.c6:active {
+  background-color: rgba(234,238,242,0.5);
+}
+
+.c5 {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  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;
+}
+
+.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;
+}
+
+.c4:hover {
+  background-color: rgba(175,184,193,0.2);
+  color: #24292f;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+<span
+    className="c0"
+    onClick={[Function]}
+    size="medium"
+  >
+    <div
+      className="c1"
+      display="flex"
+    >
+      <div
+        className="c2"
+      >
+        <input
+          aria-invalid="false"
+          className="c3"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          type="text"
+        />
+      </div>
+      <span
+        aria-label="zero, press backspace or delete to remove"
+        className="c4"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c5"
+          onClick={[Function]}
+        >
+          zero
+        </span>
+        <span
+          aria-hidden="true"
+          className="c6"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="one, press backspace or delete to remove"
+        className="c4"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c5"
+          onClick={[Function]}
+        >
+          one
+        </span>
+        <span
+          aria-hidden="true"
+          className="c6"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="two, press backspace or delete to remove"
+        className="c4"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c5"
+          onClick={[Function]}
+        >
+          two
+        </span>
+        <span
+          aria-hidden="true"
+          className="c6"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="three, press backspace or delete to remove"
+        className="c4"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c5"
+          onClick={[Function]}
+        >
+          three
+        </span>
+        <span
+          aria-hidden="true"
+          className="c6"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="four, press backspace or delete to remove"
+        className="c4"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c5"
+          onClick={[Function]}
+        >
+          four
+        </span>
+        <span
+          aria-hidden="true"
+          className="c6"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="five, press backspace or delete to remove"
+        className="c4"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c5"
+          onClick={[Function]}
+        >
+          five
+        </span>
+        <span
+          aria-hidden="true"
+          className="c6"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="six, press backspace or delete to remove"
+        className="c4"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c5"
+          onClick={[Function]}
+        >
+          six
+        </span>
+        <span
+          aria-hidden="true"
+          className="c6"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="seven, press backspace or delete to remove"
+        className="c4"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c5"
+          onClick={[Function]}
+        >
+          seven
+        </span>
+        <span
+          aria-hidden="true"
+          className="c6"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+    </div>
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c7"
+        display="flex"
+      >
+        <svg
+          className="c8"
+          fill="none"
+          height="16px"
+          sx={
+            Object {
+              "visibility": "visible",
+            }
+          }
+          viewBox="0 0 16 16"
+          width="16px"
+        >
+          <circle
+            cx="8"
+            cy="8"
+            r="7"
+            stroke="currentColor"
+            strokeOpacity="0.25"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+          <path
+            d="M15 8a7.002 7.002 0 00-7-7"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+        </svg>
+      </div>
+    </span>
+  </span>,
+  .c3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-left: -0.25rem;
+  margin-bottom: -0.25rem;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c3 > * {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  margin-left: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.c4 {
+  -webkit-order: 1;
+  -ms-flex-order: 1;
+  order: 1;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+}
+
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: #24292f;
+  vertical-align: middle;
+  background-color: #ffffff;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  outline: none;
+  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  min-height: 32px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
+.c0::-webkit-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::-moz-placeholder {
+  color: #6e7781;
+}
+
+.c0:-ms-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::placeholder {
+  color: #6e7781;
+}
+
+.c0:focus-within {
+  border-color: #0969da;
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 .TextInput-icon {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #57606a;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c0 > input,
+.c0 > select {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.c5 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c5:focus {
+  outline: 0;
+}
+
+.c2 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  visibility: visible;
+}
+
+.c9 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  visibility: hidden;
+}
+
+.c8 {
+  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);
+  -webkit-align-self: baseline;
+  -ms-flex-item-align: baseline;
+  align-self: baseline;
+  border: 0;
+  border-radius: 999px;
+  margin-left: 8px;
+  height: 32px;
+  width: 32px;
+  position: relative;
+  z-index: 1;
+}
+
+.c8:hover,
+.c8:focus {
+  background-color: rgba(175,184,193,0.2);
+}
+
+.c8:active {
+  background-color: rgba(234,238,242,0.5);
+}
+
+.c7 {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  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;
+}
+
+.c7:is(a,button,[tabIndex='0']) {
+  cursor: pointer;
+}
+
+.c7:is(a,button,[tabIndex='0']):after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  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;
+  }
+}
+
+<span
+    className="c0"
+    onClick={[Function]}
+    size="medium"
+  >
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c1"
+        display="flex"
+      >
+        <svg
+          className="c2"
+          fill="none"
+          height="16px"
+          sx={
+            Object {
+              "visibility": "visible",
+            }
+          }
+          viewBox="0 0 16 16"
+          width="16px"
+        >
+          <circle
+            cx="8"
+            cy="8"
+            r="7"
+            stroke="currentColor"
+            strokeOpacity="0.25"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+          <path
+            d="M15 8a7.002 7.002 0 00-7-7"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+        </svg>
+      </div>
+    </span>
+    <div
+      className="c3"
+      display="flex"
+    >
+      <div
+        className="c4"
+      >
+        <input
+          aria-invalid="false"
+          className="c5"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          type="text"
+        />
+      </div>
+      <span
+        aria-label="zero, press backspace or delete to remove"
+        className="c6"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c7"
+          onClick={[Function]}
+        >
+          zero
+        </span>
+        <span
+          aria-hidden="true"
+          className="c8"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="one, press backspace or delete to remove"
+        className="c6"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c7"
+          onClick={[Function]}
+        >
+          one
+        </span>
+        <span
+          aria-hidden="true"
+          className="c8"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="two, press backspace or delete to remove"
+        className="c6"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c7"
+          onClick={[Function]}
+        >
+          two
+        </span>
+        <span
+          aria-hidden="true"
+          className="c8"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="three, press backspace or delete to remove"
+        className="c6"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c7"
+          onClick={[Function]}
+        >
+          three
+        </span>
+        <span
+          aria-hidden="true"
+          className="c8"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="four, press backspace or delete to remove"
+        className="c6"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c7"
+          onClick={[Function]}
+        >
+          four
+        </span>
+        <span
+          aria-hidden="true"
+          className="c8"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="five, press backspace or delete to remove"
+        className="c6"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c7"
+          onClick={[Function]}
+        >
+          five
+        </span>
+        <span
+          aria-hidden="true"
+          className="c8"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="six, press backspace or delete to remove"
+        className="c6"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c7"
+          onClick={[Function]}
+        >
+          six
+        </span>
+        <span
+          aria-hidden="true"
+          className="c8"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="seven, press backspace or delete to remove"
+        className="c6"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c7"
+          onClick={[Function]}
+        >
+          seven
+        </span>
+        <span
+          aria-hidden="true"
+          className="c8"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+    </div>
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c1"
+        display="flex"
+      >
+        <svg
+          className="c9"
+          fill="none"
+          height="16px"
+          sx={
+            Object {
+              "visibility": "hidden",
+            }
+          }
+          viewBox="0 0 16 16"
+          width="16px"
+        >
+          <circle
+            cx="8"
+            cy="8"
+            r="7"
+            stroke="currentColor"
+            strokeOpacity="0.25"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+          <path
+            d="M15 8a7.002 7.002 0 00-7-7"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+        </svg>
+      </div>
+    </span>
+  </span>,
+  .c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-left: -0.25rem;
+  margin-bottom: -0.25rem;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c1 > * {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  margin-left: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.c2 {
+  -webkit-order: 1;
+  -ms-flex-order: 1;
+  order: 1;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c7 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+}
+
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: #24292f;
+  vertical-align: middle;
+  background-color: #ffffff;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  outline: none;
+  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  min-height: 32px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
+.c0::-webkit-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::-moz-placeholder {
+  color: #6e7781;
+}
+
+.c0:-ms-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::placeholder {
+  color: #6e7781;
+}
+
+.c0:focus-within {
+  border-color: #0969da;
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 .TextInput-icon {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #57606a;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c0 > input,
+.c0 > select {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.c3 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c3:focus {
+  outline: 0;
+}
+
+.c8 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  visibility: visible;
+}
+
+.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);
+  -webkit-align-self: baseline;
+  -ms-flex-item-align: baseline;
+  align-self: baseline;
+  border: 0;
+  border-radius: 999px;
+  margin-left: 8px;
+  height: 32px;
+  width: 32px;
+  position: relative;
+  z-index: 1;
+}
+
+.c6:hover,
+.c6:focus {
+  background-color: rgba(175,184,193,0.2);
+}
+
+.c6:active {
+  background-color: rgba(234,238,242,0.5);
+}
+
+.c5 {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  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;
+}
+
+.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;
+}
+
+.c4:hover {
+  background-color: rgba(175,184,193,0.2);
+  color: #24292f;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+<span
+    className="c0"
+    onClick={[Function]}
+    size="medium"
+  >
+    <div
+      className="c1"
+      display="flex"
+    >
+      <div
+        className="c2"
+      >
+        <input
+          aria-invalid="false"
+          className="c3"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          type="text"
+        />
+      </div>
+      <span
+        aria-label="zero, press backspace or delete to remove"
+        className="c4"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c5"
+          onClick={[Function]}
+        >
+          zero
+        </span>
+        <span
+          aria-hidden="true"
+          className="c6"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="one, press backspace or delete to remove"
+        className="c4"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c5"
+          onClick={[Function]}
+        >
+          one
+        </span>
+        <span
+          aria-hidden="true"
+          className="c6"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="two, press backspace or delete to remove"
+        className="c4"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c5"
+          onClick={[Function]}
+        >
+          two
+        </span>
+        <span
+          aria-hidden="true"
+          className="c6"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="three, press backspace or delete to remove"
+        className="c4"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c5"
+          onClick={[Function]}
+        >
+          three
+        </span>
+        <span
+          aria-hidden="true"
+          className="c6"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="four, press backspace or delete to remove"
+        className="c4"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c5"
+          onClick={[Function]}
+        >
+          four
+        </span>
+        <span
+          aria-hidden="true"
+          className="c6"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="five, press backspace or delete to remove"
+        className="c4"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c5"
+          onClick={[Function]}
+        >
+          five
+        </span>
+        <span
+          aria-hidden="true"
+          className="c6"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="six, press backspace or delete to remove"
+        className="c4"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c5"
+          onClick={[Function]}
+        >
+          six
+        </span>
+        <span
+          aria-hidden="true"
+          className="c6"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="seven, press backspace or delete to remove"
+        className="c4"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c5"
+          onClick={[Function]}
+        >
+          seven
+        </span>
+        <span
+          aria-hidden="true"
+          className="c6"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+    </div>
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c7"
+        display="flex"
+      >
+        <svg
+          className="c8"
+          fill="none"
+          height="16px"
+          sx={
+            Object {
+              "visibility": "visible",
+            }
+          }
+          viewBox="0 0 16 16"
+          width="16px"
+        >
+          <circle
+            cx="8"
+            cy="8"
+            r="7"
+            stroke="currentColor"
+            strokeOpacity="0.25"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+          <path
+            d="M15 8a7.002 7.002 0 00-7-7"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+        </svg>
+      </div>
+    </span>
+  </span>,
+  .c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-left: -0.25rem;
+  margin-bottom: -0.25rem;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c4 > * {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  margin-left: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.c5 {
+  -webkit-order: 1;
+  -ms-flex-order: 1;
+  order: 1;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+}
+
+.c2 {
+  visibility: hidden;
+}
+
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: #24292f;
+  vertical-align: middle;
+  background-color: #ffffff;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  outline: none;
+  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  min-height: 32px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 12px;
+  padding-right: 0;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
+.c0::-webkit-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::-moz-placeholder {
+  color: #6e7781;
+}
+
+.c0:-ms-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::placeholder {
+  color: #6e7781;
+}
+
+.c0:focus-within {
+  border-color: #0969da;
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 .TextInput-icon {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #57606a;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c0 > input,
+.c0 > select {
+  padding-left: 0;
+  padding-right: 12px;
+}
+
+.c6 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c6:focus {
+  outline: 0;
+}
+
+.c10 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  visibility: hidden;
+}
+
+.c3 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  max-width: 100%;
+  visibility: visible;
+  left: 0;
+}
+
+.c9 {
+  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);
+  -webkit-align-self: baseline;
+  -ms-flex-item-align: baseline;
+  align-self: baseline;
+  border: 0;
+  border-radius: 999px;
+  margin-left: 8px;
+  height: 32px;
+  width: 32px;
+  position: relative;
+  z-index: 1;
+}
+
+.c9:hover,
+.c9:focus {
+  background-color: rgba(175,184,193,0.2);
+}
+
+.c9:active {
+  background-color: rgba(234,238,242,0.5);
+}
+
+.c8 {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  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: 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;
+  }
+}
+
+<span
+    className="c0"
+    onClick={[Function]}
+    size="medium"
+  >
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c1"
+        display="flex"
+      >
+        <div
+          className="c2"
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-mark-github"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={16}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={16}
+          />
+        </div>
+        <svg
+          className="c3"
+          fill="none"
+          height="32px"
+          sx={
+            Object {
+              "height": "100%",
+              "left": 0,
+              "maxWidth": "100%",
+              "position": "absolute",
+              "top": 0,
+              "visibility": "visible",
+            }
+          }
+          viewBox="0 0 16 16"
+          width="32px"
+        >
+          <circle
+            cx="8"
+            cy="8"
+            r="7"
+            stroke="currentColor"
+            strokeOpacity="0.25"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+          <path
+            d="M15 8a7.002 7.002 0 00-7-7"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+        </svg>
+      </div>
+    </span>
+    <div
+      className="c4"
+      display="flex"
+    >
+      <div
+        className="c5"
+      >
+        <input
+          aria-invalid="false"
+          className="c6"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          type="text"
+        />
+      </div>
+      <span
+        aria-label="zero, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          zero
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="one, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          one
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="two, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          two
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="three, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          three
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="four, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          four
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="five, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          five
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="six, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          six
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="seven, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          seven
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+    </div>
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c1"
+        display="flex"
+      >
+        <svg
+          className="c10"
+          fill="none"
+          height="16px"
+          sx={
+            Object {
+              "visibility": "hidden",
+            }
+          }
+          viewBox="0 0 16 16"
+          width="16px"
+        >
+          <circle
+            cx="8"
+            cy="8"
+            r="7"
+            stroke="currentColor"
+            strokeOpacity="0.25"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+          <path
+            d="M15 8a7.002 7.002 0 00-7-7"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+        </svg>
+      </div>
+    </span>
+  </span>,
+  .c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-left: -0.25rem;
+  margin-bottom: -0.25rem;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c4 > * {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  margin-left: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.c5 {
+  -webkit-order: 1;
+  -ms-flex-order: 1;
+  order: 1;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+}
+
+.c2 {
+  visibility: hidden;
+}
+
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: #24292f;
+  vertical-align: middle;
+  background-color: #ffffff;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  outline: none;
+  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  min-height: 32px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 12px;
+  padding-right: 0;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
+.c0::-webkit-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::-moz-placeholder {
+  color: #6e7781;
+}
+
+.c0:-ms-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::placeholder {
+  color: #6e7781;
+}
+
+.c0:focus-within {
+  border-color: #0969da;
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 .TextInput-icon {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #57606a;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c0 > input,
+.c0 > select {
+  padding-left: 0;
+  padding-right: 12px;
+}
+
+.c6 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c6:focus {
+  outline: 0;
+}
+
+.c10 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  visibility: hidden;
+}
+
+.c3 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  max-width: 100%;
+  visibility: visible;
+  left: 0;
+}
+
+.c9 {
+  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);
+  -webkit-align-self: baseline;
+  -ms-flex-item-align: baseline;
+  align-self: baseline;
+  border: 0;
+  border-radius: 999px;
+  margin-left: 8px;
+  height: 32px;
+  width: 32px;
+  position: relative;
+  z-index: 1;
+}
+
+.c9:hover,
+.c9:focus {
+  background-color: rgba(175,184,193,0.2);
+}
+
+.c9:active {
+  background-color: rgba(234,238,242,0.5);
+}
+
+.c8 {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  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: 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;
+  }
+}
+
+<span
+    className="c0"
+    onClick={[Function]}
+    size="medium"
+  >
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c1"
+        display="flex"
+      >
+        <div
+          className="c2"
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-mark-github"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={16}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={16}
+          />
+        </div>
+        <svg
+          className="c3"
+          fill="none"
+          height="32px"
+          sx={
+            Object {
+              "height": "100%",
+              "left": 0,
+              "maxWidth": "100%",
+              "position": "absolute",
+              "top": 0,
+              "visibility": "visible",
+            }
+          }
+          viewBox="0 0 16 16"
+          width="32px"
+        >
+          <circle
+            cx="8"
+            cy="8"
+            r="7"
+            stroke="currentColor"
+            strokeOpacity="0.25"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+          <path
+            d="M15 8a7.002 7.002 0 00-7-7"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+        </svg>
+      </div>
+    </span>
+    <div
+      className="c4"
+      display="flex"
+    >
+      <div
+        className="c5"
+      >
+        <input
+          aria-invalid="false"
+          className="c6"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          type="text"
+        />
+      </div>
+      <span
+        aria-label="zero, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          zero
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="one, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          one
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="two, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          two
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="three, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          three
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="four, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          four
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="five, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          five
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="six, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          six
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="seven, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          seven
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+    </div>
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c1"
+        display="flex"
+      >
+        <svg
+          className="c10"
+          fill="none"
+          height="16px"
+          sx={
+            Object {
+              "visibility": "hidden",
+            }
+          }
+          viewBox="0 0 16 16"
+          width="16px"
+        >
+          <circle
+            cx="8"
+            cy="8"
+            r="7"
+            stroke="currentColor"
+            strokeOpacity="0.25"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+          <path
+            d="M15 8a7.002 7.002 0 00-7-7"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+        </svg>
+      </div>
+    </span>
+  </span>,
+  .c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-left: -0.25rem;
+  margin-bottom: -0.25rem;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c4 > * {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  margin-left: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.c5 {
+  -webkit-order: 1;
+  -ms-flex-order: 1;
+  order: 1;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+}
+
+.c2 {
+  visibility: visible;
+}
+
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: #24292f;
+  vertical-align: middle;
+  background-color: #ffffff;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  outline: none;
+  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  min-height: 32px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 12px;
+  padding-right: 0;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
+.c0::-webkit-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::-moz-placeholder {
+  color: #6e7781;
+}
+
+.c0:-ms-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::placeholder {
+  color: #6e7781;
+}
+
+.c0:focus-within {
+  border-color: #0969da;
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 .TextInput-icon {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #57606a;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c0 > input,
+.c0 > select {
+  padding-left: 0;
+  padding-right: 12px;
+}
+
+.c6 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c6:focus {
+  outline: 0;
+}
+
+.c10 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  visibility: visible;
+}
+
+.c3 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  max-width: 100%;
+  visibility: hidden;
+  left: 0;
+}
+
+.c9 {
+  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);
+  -webkit-align-self: baseline;
+  -ms-flex-item-align: baseline;
+  align-self: baseline;
+  border: 0;
+  border-radius: 999px;
+  margin-left: 8px;
+  height: 32px;
+  width: 32px;
+  position: relative;
+  z-index: 1;
+}
+
+.c9:hover,
+.c9:focus {
+  background-color: rgba(175,184,193,0.2);
+}
+
+.c9:active {
+  background-color: rgba(234,238,242,0.5);
+}
+
+.c8 {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  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: 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;
+  }
+}
+
+<span
+    className="c0"
+    onClick={[Function]}
+    size="medium"
+  >
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c1"
+        display="flex"
+      >
+        <div
+          className="c2"
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-mark-github"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={16}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={16}
+          />
+        </div>
+        <svg
+          className="c3"
+          fill="none"
+          height="32px"
+          sx={
+            Object {
+              "height": "100%",
+              "left": 0,
+              "maxWidth": "100%",
+              "position": "absolute",
+              "top": 0,
+              "visibility": "hidden",
+            }
+          }
+          viewBox="0 0 16 16"
+          width="32px"
+        >
+          <circle
+            cx="8"
+            cy="8"
+            r="7"
+            stroke="currentColor"
+            strokeOpacity="0.25"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+          <path
+            d="M15 8a7.002 7.002 0 00-7-7"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+        </svg>
+      </div>
+    </span>
+    <div
+      className="c4"
+      display="flex"
+    >
+      <div
+        className="c5"
+      >
+        <input
+          aria-invalid="false"
+          className="c6"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          type="text"
+        />
+      </div>
+      <span
+        aria-label="zero, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          zero
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="one, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          one
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="two, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          two
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="three, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          three
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="four, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          four
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="five, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          five
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="six, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          six
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="seven, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          seven
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+    </div>
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c1"
+        display="flex"
+      >
+        <svg
+          className="c10"
+          fill="none"
+          height="16px"
+          sx={
+            Object {
+              "visibility": "visible",
+            }
+          }
+          viewBox="0 0 16 16"
+          width="16px"
+        >
+          <circle
+            cx="8"
+            cy="8"
+            r="7"
+            stroke="currentColor"
+            strokeOpacity="0.25"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+          <path
+            d="M15 8a7.002 7.002 0 00-7-7"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+        </svg>
+      </div>
+    </span>
+  </span>,
+  .c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-left: -0.25rem;
+  margin-bottom: -0.25rem;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c1 > * {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  margin-left: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.c2 {
+  -webkit-order: 1;
+  -ms-flex-order: 1;
+  order: 1;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c7 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+}
+
+.c8 {
+  visibility: hidden;
+}
+
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: #24292f;
+  vertical-align: middle;
+  background-color: #ffffff;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  outline: none;
+  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  min-height: 32px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 12px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
+.c0::-webkit-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::-moz-placeholder {
+  color: #6e7781;
+}
+
+.c0:-ms-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::placeholder {
+  color: #6e7781;
+}
+
+.c0:focus-within {
+  border-color: #0969da;
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 .TextInput-icon {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #57606a;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c0 > input,
+.c0 > select {
+  padding-left: 12px;
+  padding-right: 0;
+}
+
+.c3 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c3:focus {
+  outline: 0;
+}
+
+.c9 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  max-width: 100%;
+  visibility: visible;
+  right: 0;
+}
+
+.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);
+  -webkit-align-self: baseline;
+  -ms-flex-item-align: baseline;
+  align-self: baseline;
+  border: 0;
+  border-radius: 999px;
+  margin-left: 8px;
+  height: 32px;
+  width: 32px;
+  position: relative;
+  z-index: 1;
+}
+
+.c6:hover,
+.c6:focus {
+  background-color: rgba(175,184,193,0.2);
+}
+
+.c6:active {
+  background-color: rgba(234,238,242,0.5);
+}
+
+.c5 {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  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;
+}
+
+.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;
+}
+
+.c4:hover {
+  background-color: rgba(175,184,193,0.2);
+  color: #24292f;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+<span
+    className="c0"
+    onClick={[Function]}
+    size="medium"
+  >
+    <div
+      className="c1"
+      display="flex"
+    >
+      <div
+        className="c2"
+      >
+        <input
+          aria-invalid="false"
+          className="c3"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          type="text"
+        />
+      </div>
+      <span
+        aria-label="zero, press backspace or delete to remove"
+        className="c4"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c5"
+          onClick={[Function]}
+        >
+          zero
+        </span>
+        <span
+          aria-hidden="true"
+          className="c6"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="one, press backspace or delete to remove"
+        className="c4"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c5"
+          onClick={[Function]}
+        >
+          one
+        </span>
+        <span
+          aria-hidden="true"
+          className="c6"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="two, press backspace or delete to remove"
+        className="c4"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c5"
+          onClick={[Function]}
+        >
+          two
+        </span>
+        <span
+          aria-hidden="true"
+          className="c6"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="three, press backspace or delete to remove"
+        className="c4"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c5"
+          onClick={[Function]}
+        >
+          three
+        </span>
+        <span
+          aria-hidden="true"
+          className="c6"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="four, press backspace or delete to remove"
+        className="c4"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c5"
+          onClick={[Function]}
+        >
+          four
+        </span>
+        <span
+          aria-hidden="true"
+          className="c6"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="five, press backspace or delete to remove"
+        className="c4"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c5"
+          onClick={[Function]}
+        >
+          five
+        </span>
+        <span
+          aria-hidden="true"
+          className="c6"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="six, press backspace or delete to remove"
+        className="c4"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c5"
+          onClick={[Function]}
+        >
+          six
+        </span>
+        <span
+          aria-hidden="true"
+          className="c6"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="seven, press backspace or delete to remove"
+        className="c4"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c5"
+          onClick={[Function]}
+        >
+          seven
+        </span>
+        <span
+          aria-hidden="true"
+          className="c6"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+    </div>
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c7"
+        display="flex"
+      >
+        <div
+          className="c8"
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-mark-github"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={16}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={16}
+          />
+        </div>
+        <svg
+          className="c9"
+          fill="none"
+          height="32px"
+          sx={
+            Object {
+              "height": "100%",
+              "maxWidth": "100%",
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+              "visibility": "visible",
+            }
+          }
+          viewBox="0 0 16 16"
+          width="32px"
+        >
+          <circle
+            cx="8"
+            cy="8"
+            r="7"
+            stroke="currentColor"
+            strokeOpacity="0.25"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+          <path
+            d="M15 8a7.002 7.002 0 00-7-7"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+        </svg>
+      </div>
+    </span>
+  </span>,
+  .c3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-left: -0.25rem;
+  margin-bottom: -0.25rem;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c3 > * {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  margin-left: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.c4 {
+  -webkit-order: 1;
+  -ms-flex-order: 1;
+  order: 1;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+}
+
+.c9 {
+  visibility: visible;
+}
+
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: #24292f;
+  vertical-align: middle;
+  background-color: #ffffff;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  outline: none;
+  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  min-height: 32px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 12px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
+.c0::-webkit-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::-moz-placeholder {
+  color: #6e7781;
+}
+
+.c0:-ms-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::placeholder {
+  color: #6e7781;
+}
+
+.c0:focus-within {
+  border-color: #0969da;
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 .TextInput-icon {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #57606a;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c0 > input,
+.c0 > select {
+  padding-left: 12px;
+  padding-right: 0;
+}
+
+.c5 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c5:focus {
+  outline: 0;
+}
+
+.c2 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  visibility: visible;
+}
+
+.c10 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  max-width: 100%;
+  visibility: hidden;
+  right: 0;
+}
+
+.c8 {
+  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);
+  -webkit-align-self: baseline;
+  -ms-flex-item-align: baseline;
+  align-self: baseline;
+  border: 0;
+  border-radius: 999px;
+  margin-left: 8px;
+  height: 32px;
+  width: 32px;
+  position: relative;
+  z-index: 1;
+}
+
+.c8:hover,
+.c8:focus {
+  background-color: rgba(175,184,193,0.2);
+}
+
+.c8:active {
+  background-color: rgba(234,238,242,0.5);
+}
+
+.c7 {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  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;
+}
+
+.c7:is(a,button,[tabIndex='0']) {
+  cursor: pointer;
+}
+
+.c7:is(a,button,[tabIndex='0']):after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  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;
+  }
+}
+
+<span
+    className="c0"
+    onClick={[Function]}
+    size="medium"
+  >
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c1"
+        display="flex"
+      >
+        <svg
+          className="c2"
+          fill="none"
+          height="16px"
+          sx={
+            Object {
+              "visibility": "visible",
+            }
+          }
+          viewBox="0 0 16 16"
+          width="16px"
+        >
+          <circle
+            cx="8"
+            cy="8"
+            r="7"
+            stroke="currentColor"
+            strokeOpacity="0.25"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+          <path
+            d="M15 8a7.002 7.002 0 00-7-7"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+        </svg>
+      </div>
+    </span>
+    <div
+      className="c3"
+      display="flex"
+    >
+      <div
+        className="c4"
+      >
+        <input
+          aria-invalid="false"
+          className="c5"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          type="text"
+        />
+      </div>
+      <span
+        aria-label="zero, press backspace or delete to remove"
+        className="c6"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c7"
+          onClick={[Function]}
+        >
+          zero
+        </span>
+        <span
+          aria-hidden="true"
+          className="c8"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="one, press backspace or delete to remove"
+        className="c6"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c7"
+          onClick={[Function]}
+        >
+          one
+        </span>
+        <span
+          aria-hidden="true"
+          className="c8"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="two, press backspace or delete to remove"
+        className="c6"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c7"
+          onClick={[Function]}
+        >
+          two
+        </span>
+        <span
+          aria-hidden="true"
+          className="c8"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="three, press backspace or delete to remove"
+        className="c6"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c7"
+          onClick={[Function]}
+        >
+          three
+        </span>
+        <span
+          aria-hidden="true"
+          className="c8"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="four, press backspace or delete to remove"
+        className="c6"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c7"
+          onClick={[Function]}
+        >
+          four
+        </span>
+        <span
+          aria-hidden="true"
+          className="c8"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="five, press backspace or delete to remove"
+        className="c6"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c7"
+          onClick={[Function]}
+        >
+          five
+        </span>
+        <span
+          aria-hidden="true"
+          className="c8"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="six, press backspace or delete to remove"
+        className="c6"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c7"
+          onClick={[Function]}
+        >
+          six
+        </span>
+        <span
+          aria-hidden="true"
+          className="c8"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="seven, press backspace or delete to remove"
+        className="c6"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c7"
+          onClick={[Function]}
+        >
+          seven
+        </span>
+        <span
+          aria-hidden="true"
+          className="c8"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+    </div>
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c1"
+        display="flex"
+      >
+        <div
+          className="c9"
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-mark-github"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={16}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={16}
+          />
+        </div>
+        <svg
+          className="c10"
+          fill="none"
+          height="32px"
+          sx={
+            Object {
+              "height": "100%",
+              "maxWidth": "100%",
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+              "visibility": "hidden",
+            }
+          }
+          viewBox="0 0 16 16"
+          width="32px"
+        >
+          <circle
+            cx="8"
+            cy="8"
+            r="7"
+            stroke="currentColor"
+            strokeOpacity="0.25"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+          <path
+            d="M15 8a7.002 7.002 0 00-7-7"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+        </svg>
+      </div>
+    </span>
+  </span>,
+  .c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-left: -0.25rem;
+  margin-bottom: -0.25rem;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c1 > * {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  margin-left: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.c2 {
+  -webkit-order: 1;
+  -ms-flex-order: 1;
+  order: 1;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c7 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+}
+
+.c8 {
+  visibility: hidden;
+}
+
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: #24292f;
+  vertical-align: middle;
+  background-color: #ffffff;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  outline: none;
+  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  min-height: 32px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 12px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
+.c0::-webkit-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::-moz-placeholder {
+  color: #6e7781;
+}
+
+.c0:-ms-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::placeholder {
+  color: #6e7781;
+}
+
+.c0:focus-within {
+  border-color: #0969da;
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 .TextInput-icon {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #57606a;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c0 > input,
+.c0 > select {
+  padding-left: 12px;
+  padding-right: 0;
+}
+
+.c3 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c3:focus {
+  outline: 0;
+}
+
+.c9 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  max-width: 100%;
+  visibility: visible;
+  right: 0;
+}
+
+.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);
+  -webkit-align-self: baseline;
+  -ms-flex-item-align: baseline;
+  align-self: baseline;
+  border: 0;
+  border-radius: 999px;
+  margin-left: 8px;
+  height: 32px;
+  width: 32px;
+  position: relative;
+  z-index: 1;
+}
+
+.c6:hover,
+.c6:focus {
+  background-color: rgba(175,184,193,0.2);
+}
+
+.c6:active {
+  background-color: rgba(234,238,242,0.5);
+}
+
+.c5 {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  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;
+}
+
+.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;
+}
+
+.c4:hover {
+  background-color: rgba(175,184,193,0.2);
+  color: #24292f;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+<span
+    className="c0"
+    onClick={[Function]}
+    size="medium"
+  >
+    <div
+      className="c1"
+      display="flex"
+    >
+      <div
+        className="c2"
+      >
+        <input
+          aria-invalid="false"
+          className="c3"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          type="text"
+        />
+      </div>
+      <span
+        aria-label="zero, press backspace or delete to remove"
+        className="c4"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c5"
+          onClick={[Function]}
+        >
+          zero
+        </span>
+        <span
+          aria-hidden="true"
+          className="c6"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="one, press backspace or delete to remove"
+        className="c4"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c5"
+          onClick={[Function]}
+        >
+          one
+        </span>
+        <span
+          aria-hidden="true"
+          className="c6"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="two, press backspace or delete to remove"
+        className="c4"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c5"
+          onClick={[Function]}
+        >
+          two
+        </span>
+        <span
+          aria-hidden="true"
+          className="c6"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="three, press backspace or delete to remove"
+        className="c4"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c5"
+          onClick={[Function]}
+        >
+          three
+        </span>
+        <span
+          aria-hidden="true"
+          className="c6"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="four, press backspace or delete to remove"
+        className="c4"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c5"
+          onClick={[Function]}
+        >
+          four
+        </span>
+        <span
+          aria-hidden="true"
+          className="c6"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="five, press backspace or delete to remove"
+        className="c4"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c5"
+          onClick={[Function]}
+        >
+          five
+        </span>
+        <span
+          aria-hidden="true"
+          className="c6"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="six, press backspace or delete to remove"
+        className="c4"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c5"
+          onClick={[Function]}
+        >
+          six
+        </span>
+        <span
+          aria-hidden="true"
+          className="c6"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="seven, press backspace or delete to remove"
+        className="c4"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c5"
+          onClick={[Function]}
+        >
+          seven
+        </span>
+        <span
+          aria-hidden="true"
+          className="c6"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+    </div>
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c7"
+        display="flex"
+      >
+        <div
+          className="c8"
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-mark-github"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={16}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={16}
+          />
+        </div>
+        <svg
+          className="c9"
+          fill="none"
+          height="32px"
+          sx={
+            Object {
+              "height": "100%",
+              "maxWidth": "100%",
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+              "visibility": "visible",
+            }
+          }
+          viewBox="0 0 16 16"
+          width="32px"
+        >
+          <circle
+            cx="8"
+            cy="8"
+            r="7"
+            stroke="currentColor"
+            strokeOpacity="0.25"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+          <path
+            d="M15 8a7.002 7.002 0 00-7-7"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+        </svg>
+      </div>
+    </span>
+  </span>,
+  .c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-left: -0.25rem;
+  margin-bottom: -0.25rem;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c4 > * {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  margin-left: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.c5 {
+  -webkit-order: 1;
+  -ms-flex-order: 1;
+  order: 1;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+}
+
+.c2 {
+  visibility: hidden;
+}
+
+.c10 {
+  visibility: visible;
+}
+
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: #24292f;
+  vertical-align: middle;
+  background-color: #ffffff;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  outline: none;
+  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  min-height: 32px;
+  min-height: 28px;
+  padding-left: 8px;
+  padding-right: 8px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  font-size: 12px;
+  line-height: 20px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
+.c0::-webkit-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::-moz-placeholder {
+  color: #6e7781;
+}
+
+.c0:-ms-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::placeholder {
+  color: #6e7781;
+}
+
+.c0:focus-within {
+  border-color: #0969da;
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 .TextInput-icon {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #57606a;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c0 > input,
+.c0 > select {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c6 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c6:focus {
+  outline: 0;
+}
+
+.c3 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  max-width: 100%;
+  visibility: visible;
+  left: 0;
+}
+
+.c11 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  max-width: 100%;
+  visibility: hidden;
+  right: 0;
+}
+
+.c9 {
+  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);
+  -webkit-align-self: baseline;
+  -ms-flex-item-align: baseline;
+  align-self: baseline;
+  border: 0;
+  border-radius: 999px;
+  margin-left: 4px;
+  height: 16px;
+  width: 16px;
+  position: relative;
+  z-index: 1;
+}
+
+.c9:hover,
+.c9:focus {
+  background-color: rgba(175,184,193,0.2);
+}
+
+.c9:active {
+  background-color: rgba(234,238,242,0.5);
+}
+
+.c8 {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  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;
+}
+
+.c7:hover {
+  background-color: rgba(175,184,193,0.2);
+  color: #24292f;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+<span
+    className="c0"
+    onClick={[Function]}
+    size="small"
+  >
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c1"
+        display="flex"
+      >
+        <div
+          className="c2"
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-mark-github"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={16}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={16}
+          />
+        </div>
+        <svg
+          className="c3"
+          fill="none"
+          height="32px"
+          sx={
+            Object {
+              "height": "100%",
+              "left": 0,
+              "maxWidth": "100%",
+              "position": "absolute",
+              "top": 0,
+              "visibility": "visible",
+            }
+          }
+          viewBox="0 0 16 16"
+          width="32px"
+        >
+          <circle
+            cx="8"
+            cy="8"
+            r="7"
+            stroke="currentColor"
+            strokeOpacity="0.25"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+          <path
+            d="M15 8a7.002 7.002 0 00-7-7"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+        </svg>
+      </div>
+    </span>
+    <div
+      className="c4"
+      display="flex"
+    >
+      <div
+        className="c5"
+      >
+        <input
+          aria-invalid="false"
+          className="c6"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          type="text"
+        />
+      </div>
+      <span
+        aria-label="zero, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="small"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          zero
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="small"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={12}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={12}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="one, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="small"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          one
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="small"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={12}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={12}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="two, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="small"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          two
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="small"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={12}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={12}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="three, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="small"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          three
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="small"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={12}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={12}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="four, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="small"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          four
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="small"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={12}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={12}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="five, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="small"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          five
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="small"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={12}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={12}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="six, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="small"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          six
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="small"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={12}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={12}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="seven, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="small"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          seven
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="small"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={12}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={12}
+          />
+        </span>
+      </span>
+    </div>
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c1"
+        display="flex"
+      >
+        <div
+          className="c10"
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-mark-github"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={16}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={16}
+          />
+        </div>
+        <svg
+          className="c11"
+          fill="none"
+          height="32px"
+          sx={
+            Object {
+              "height": "100%",
+              "maxWidth": "100%",
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+              "visibility": "hidden",
+            }
+          }
+          viewBox="0 0 16 16"
+          width="32px"
+        >
+          <circle
+            cx="8"
+            cy="8"
+            r="7"
+            stroke="currentColor"
+            strokeOpacity="0.25"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+          <path
+            d="M15 8a7.002 7.002 0 00-7-7"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+        </svg>
+      </div>
+    </span>
+  </span>,
+  .c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-left: -0.25rem;
+  margin-bottom: -0.25rem;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c4 > * {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  margin-left: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.c5 {
+  -webkit-order: 1;
+  -ms-flex-order: 1;
+  order: 1;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+}
+
+.c2 {
+  visibility: hidden;
+}
+
+.c10 {
+  visibility: visible;
+}
+
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: #24292f;
+  vertical-align: middle;
+  background-color: #ffffff;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  outline: none;
+  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  min-height: 32px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
+.c0::-webkit-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::-moz-placeholder {
+  color: #6e7781;
+}
+
+.c0:-ms-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::placeholder {
+  color: #6e7781;
+}
+
+.c0:focus-within {
+  border-color: #0969da;
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 .TextInput-icon {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #57606a;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c0 > input,
+.c0 > select {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c6 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c6:focus {
+  outline: 0;
+}
+
+.c3 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  max-width: 100%;
+  visibility: visible;
+  left: 0;
+}
+
+.c11 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  max-width: 100%;
+  visibility: hidden;
+  right: 0;
+}
+
+.c9 {
+  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);
+  -webkit-align-self: baseline;
+  -ms-flex-item-align: baseline;
+  align-self: baseline;
+  border: 0;
+  border-radius: 999px;
+  margin-left: 8px;
+  height: 32px;
+  width: 32px;
+  position: relative;
+  z-index: 1;
+}
+
+.c9:hover,
+.c9:focus {
+  background-color: rgba(175,184,193,0.2);
+}
+
+.c9:active {
+  background-color: rgba(234,238,242,0.5);
+}
+
+.c8 {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  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: 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;
+  }
+}
+
+<span
+    className="c0"
+    onClick={[Function]}
+    size="medium"
+  >
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c1"
+        display="flex"
+      >
+        <div
+          className="c2"
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-mark-github"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={16}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={16}
+          />
+        </div>
+        <svg
+          className="c3"
+          fill="none"
+          height="32px"
+          sx={
+            Object {
+              "height": "100%",
+              "left": 0,
+              "maxWidth": "100%",
+              "position": "absolute",
+              "top": 0,
+              "visibility": "visible",
+            }
+          }
+          viewBox="0 0 16 16"
+          width="32px"
+        >
+          <circle
+            cx="8"
+            cy="8"
+            r="7"
+            stroke="currentColor"
+            strokeOpacity="0.25"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+          <path
+            d="M15 8a7.002 7.002 0 00-7-7"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+        </svg>
+      </div>
+    </span>
+    <div
+      className="c4"
+      display="flex"
+    >
+      <div
+        className="c5"
+      >
+        <input
+          aria-invalid="false"
+          className="c6"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          type="text"
+        />
+      </div>
+      <span
+        aria-label="zero, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          zero
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="one, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          one
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="two, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          two
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="three, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          three
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="four, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          four
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="five, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          five
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="six, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          six
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="seven, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="extralarge"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          seven
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="extralarge"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={24}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 24 24"
+            width={24}
+          />
+        </span>
+      </span>
+    </div>
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c1"
+        display="flex"
+      >
+        <div
+          className="c10"
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-mark-github"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={16}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={16}
+          />
+        </div>
+        <svg
+          className="c11"
+          fill="none"
+          height="32px"
+          sx={
+            Object {
+              "height": "100%",
+              "maxWidth": "100%",
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+              "visibility": "hidden",
+            }
+          }
+          viewBox="0 0 16 16"
+          width="32px"
+        >
+          <circle
+            cx="8"
+            cy="8"
+            r="7"
+            stroke="currentColor"
+            strokeOpacity="0.25"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+          <path
+            d="M15 8a7.002 7.002 0 00-7-7"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+        </svg>
+      </div>
+    </span>
+  </span>,
+  .c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-left: -0.25rem;
+  margin-bottom: -0.25rem;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c4 > * {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  margin-left: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.c5 {
+  -webkit-order: 1;
+  -ms-flex-order: 1;
+  order: 1;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+}
+
+.c10 {
+  visibility: hidden;
+}
+
+.c2 {
+  visibility: visible;
+}
+
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: #24292f;
+  vertical-align: middle;
+  background-color: #ffffff;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  outline: none;
+  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  min-height: 32px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-left: 12px;
+  padding-top: calc(12px / 2);
+  padding-bottom: calc(12px / 2);
+}
+
+.c0::-webkit-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::-moz-placeholder {
+  color: #6e7781;
+}
+
+.c0:-ms-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::placeholder {
+  color: #6e7781;
+}
+
+.c0:focus-within {
+  border-color: #0969da;
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c0 >:not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0 .TextInput-icon {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #57606a;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c0 > input,
+.c0 > select {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c6 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c6:focus {
+  outline: 0;
+}
+
+.c3 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  max-width: 100%;
+  visibility: hidden;
+  left: 0;
+}
+
+.c11 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  max-width: 100%;
+  visibility: visible;
+  right: 0;
+}
+
+.c9 {
+  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);
+  -webkit-align-self: baseline;
+  -ms-flex-item-align: baseline;
+  align-self: baseline;
+  border: 0;
+  border-radius: 999px;
+  margin-left: 8px;
+  height: 24px;
+  width: 24px;
+  position: relative;
+  z-index: 1;
+}
+
+.c9:hover,
+.c9:focus {
+  background-color: rgba(175,184,193,0.2);
+}
+
+.c9:active {
+  background-color: rgba(234,238,242,0.5);
+}
+
+.c8 {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  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: 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;
+  }
+}
+
+<span
+    className="c0"
+    onClick={[Function]}
+    size="medium"
+  >
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c1"
+        display="flex"
+      >
+        <div
+          className="c2"
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-mark-github"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={16}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={16}
+          />
+        </div>
+        <svg
+          className="c3"
+          fill="none"
+          height="32px"
+          sx={
+            Object {
+              "height": "100%",
+              "left": 0,
+              "maxWidth": "100%",
+              "position": "absolute",
+              "top": 0,
+              "visibility": "hidden",
+            }
+          }
+          viewBox="0 0 16 16"
+          width="32px"
+        >
+          <circle
+            cx="8"
+            cy="8"
+            r="7"
+            stroke="currentColor"
+            strokeOpacity="0.25"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+          <path
+            d="M15 8a7.002 7.002 0 00-7-7"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+        </svg>
+      </div>
+    </span>
+    <div
+      className="c4"
+      display="flex"
+    >
+      <div
+        className="c5"
+      >
+        <input
+          aria-invalid="false"
+          className="c6"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          type="text"
+        />
+      </div>
+      <span
+        aria-label="zero, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="large"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          zero
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="large"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={18}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={18}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="one, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="large"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          one
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="large"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={18}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={18}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="two, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="large"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          two
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="large"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={18}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={18}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="three, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="large"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          three
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="large"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={18}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={18}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="four, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="large"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          four
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="large"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={18}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={18}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="five, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="large"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          five
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="large"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={18}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={18}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="six, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="large"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          six
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="large"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={18}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={18}
+          />
+        </span>
+      </span>
+      <span
+        aria-label="seven, press backspace or delete to remove"
+        className="c7"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onRemove={[Function]}
+        size="large"
+        tabIndex={0}
+      >
+        <span
+          className="c8"
+          onClick={[Function]}
+        >
+          seven
+        </span>
+        <span
+          aria-hidden="true"
+          className="c9"
+          onClick={[Function]}
+          size="large"
+          tabIndex={-1}
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-x"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={18}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={18}
+          />
+        </span>
+      </span>
+    </div>
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c1"
+        display="flex"
+      >
+        <div
+          className="c10"
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-mark-github"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={16}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={16}
+          />
+        </div>
+        <svg
+          className="c11"
+          fill="none"
+          height="32px"
+          sx={
+            Object {
+              "height": "100%",
+              "maxWidth": "100%",
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+              "visibility": "visible",
+            }
+          }
+          viewBox="0 0 16 16"
+          width="32px"
+        >
+          <circle
+            cx="8"
+            cy="8"
+            r="7"
+            stroke="currentColor"
+            strokeOpacity="0.25"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+          <path
+            d="M15 8a7.002 7.002 0 00-7-7"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+        </svg>
+      </div>
+    </span>
+  </span>,
+]
+`;
+
 exports[`TextInputWithTokens renders with tokens 1`] = `
 .c1 {
   display: -webkit-box;
diff --git a/src/stories/TextInput.stories.tsx b/src/stories/TextInput.stories.tsx
index c9a06c451f0..c4f102f2161 100644
--- a/src/stories/TextInput.stories.tsx
+++ b/src/stories/TextInput.stories.tsx
@@ -3,7 +3,7 @@ import {Meta} from '@storybook/react'
 
 import {BaseStyles, Box, ThemeProvider, Text} from '..'
 import TextInput, {TextInputProps} from '../TextInput'
-import {CheckIcon} from '@primer/octicons-react'
+import {CalendarIcon, CheckIcon} from '@primer/octicons-react'
 
 export default {
   title: 'Forms/Text Input',
@@ -39,6 +39,21 @@ export default {
         type: 'boolean'
       }
     },
+    loading: {
+      name: 'loading',
+      defaultValue: false,
+      control: {
+        type: 'boolean'
+      }
+    },
+    loaderPosition: {
+      name: 'loaderPosition',
+      defaultValue: 'auto',
+      options: ['auto', 'leading', 'trailing'],
+      control: {
+        type: 'radio'
+      }
+    },
     monospace: {
       name: 'Monospace',
       defaultValue: false,
@@ -145,6 +160,89 @@ export const WithTrailingIcon = (args: TextInputProps) => {
   )
 }
 
+export const WithLoadingIndicator = () => {
+  const [loading, setLoading] = React.useState(true)
+
+  const toggleLoadingState = () => {
+    setLoading(!loading)
+  }
+
+  return (
+    <>
+      <Box mb={5}>
+        <button type="button" onClick={toggleLoadingState}>
+          Toggle loading state {loading ? 'off' : 'on'}
+        </button>
+      </Box>
+
+      <h3>No visual</h3>
+      <Box mb={2}>
+        <TextInput value="auto" loading={loading} />
+      </Box>
+      <Box mb={2}>
+        <TextInput value="leading" loading={loading} loaderPosition="leading" />
+      </Box>
+      <Box mb={5}>
+        <TextInput value="trailing" loading={loading} loaderPosition="trailing" />
+      </Box>
+
+      <h3>Leading visual</h3>
+      <Box mb={2}>
+        <TextInput leadingVisual={CalendarIcon} loading={loading} value="auto" />
+      </Box>
+      <Box mb={2}>
+        <TextInput leadingVisual={CalendarIcon} loading={loading} loaderPosition="leading" value="leading" />
+      </Box>
+      <Box mb={5}>
+        <TextInput leadingVisual={CalendarIcon} loading={loading} loaderPosition="trailing" value="trailing" />
+      </Box>
+
+      <h3>Trailing visual</h3>
+      <Box mb={2}>
+        <TextInput trailingVisual={CalendarIcon} loading={loading} value="auto" />
+      </Box>
+      <Box mb={2}>
+        <TextInput trailingVisual={CalendarIcon} loading={loading} loaderPosition="leading" value="leading" />
+      </Box>
+      <Box mb={5}>
+        <TextInput trailingVisual={CalendarIcon} loading={loading} loaderPosition="trailing" value="trailing" />
+      </Box>
+
+      <h3>Both visuals</h3>
+      <Box mb={2}>
+        <TextInput
+          size="small"
+          leadingVisual={CalendarIcon}
+          trailingVisual={CalendarIcon}
+          loading={loading}
+          value="auto"
+        />
+      </Box>
+      <Box mb={2}>
+        <TextInput
+          leadingVisual={CalendarIcon}
+          trailingVisual={CalendarIcon}
+          loading={loading}
+          loaderPosition="leading"
+          value="leading"
+        />
+      </Box>
+      <Box mb={2}>
+        <TextInput
+          size="large"
+          leadingVisual={CalendarIcon}
+          trailingVisual={CalendarIcon}
+          loading={loading}
+          loaderPosition="trailing"
+          value="trailing"
+        />
+      </Box>
+    </>
+  )
+}
+
+WithLoadingIndicator.parameters = {controls: {exclude: ['loading']}}
+
 export const ContrastTextInput = (args: TextInputProps) => {
   const [value, setValue] = useState('')
 
diff --git a/src/stories/TextInputWithTokens.stories.tsx b/src/stories/TextInputWithTokens.stories.tsx
index b02db775a99..084d3179f90 100644
--- a/src/stories/TextInputWithTokens.stories.tsx
+++ b/src/stories/TextInputWithTokens.stories.tsx
@@ -2,7 +2,7 @@ import React, {useCallback, useState} from 'react'
 import {Meta} from '@storybook/react'
 import {CheckIcon, NumberIcon} from '@primer/octicons-react'
 
-import {BaseStyles, Box, ThemeProvider} from '..'
+import {BaseStyles, Box, FormControl, ThemeProvider} from '..'
 import TextInputWithTokens, {TextInputWithTokensProps} from '../TextInputWithTokens'
 import IssueLabelToken from '../Token/IssueLabelToken'
 
@@ -47,6 +47,21 @@ export default {
         type: 'boolean'
       }
     },
+    loading: {
+      name: 'loading',
+      defaultValue: false,
+      control: {
+        type: 'boolean'
+      }
+    },
+    loaderPosition: {
+      name: 'loaderPosition',
+      defaultValue: 'auto',
+      options: ['auto', 'leading', 'trailing'],
+      control: {
+        type: 'radio'
+      }
+    },
     size: {
       name: 'size (token size)',
       defaultValue: 'extralarge',
@@ -121,6 +136,59 @@ export const WithTrailingVisual = (args: TextInputWithTokensProps) => {
 
 WithTrailingVisual.parameters = {controls: {exclude: [excludedControls, 'maxHeight']}}
 
+export const WithLoadingIndicator = (args: TextInputWithTokensProps) => {
+  const [tokens, setTokens] = useState([...mockTokens].slice(0, 3))
+  const [loading, setLoading] = useState(true)
+  const onTokenRemove: (tokenId: string | number) => void = tokenId => {
+    setTokens(tokens.filter(token => token.id !== tokenId))
+  }
+  const toggleLoadingState = () => {
+    setLoading(!loading)
+  }
+
+  return (
+    <form>
+      <Box mb={5} display="flex" justifyContent="flex-end">
+        <button type="button" onClick={toggleLoadingState}>
+          Toggle loading state {loading ? 'off' : 'on'}
+        </button>
+      </Box>
+
+      <Box display="grid" sx={{gap: 3}}>
+        <FormControl>
+          <FormControl.Label>No visual</FormControl.Label>
+          <TextInputWithTokens {...args} tokens={tokens} onTokenRemove={onTokenRemove} loading={loading} />
+        </FormControl>
+
+        <FormControl>
+          <FormControl.Label>Leading visual</FormControl.Label>
+          <TextInputWithTokens
+            {...args}
+            tokens={tokens}
+            onTokenRemove={onTokenRemove}
+            loading={loading}
+            leadingVisual={NumberIcon}
+          />
+        </FormControl>
+
+        <FormControl>
+          <FormControl.Label>Both visuals</FormControl.Label>
+          <TextInputWithTokens
+            {...args}
+            tokens={tokens}
+            onTokenRemove={onTokenRemove}
+            loading={loading}
+            leadingVisual={NumberIcon}
+            trailingVisual={CheckIcon}
+          />
+        </FormControl>
+      </Box>
+    </form>
+  )
+}
+
+WithLoadingIndicator.parameters = {controls: {exclude: [excludedControls, 'maxHeight', 'loading']}}
+
 export const UsingIssueLabelTokens = (args: TextInputWithTokensProps) => {
   const [tokens, setTokens] = useState([
     {text: 'enhancement', id: 1, fillColor: '#a2eeef'},

From a377a510a041c95ec9e002c07acd3431fe7b1dad Mon Sep 17 00:00:00 2001
From: GitHub Design Systems Bot <30705008+primer-css@users.noreply.github.com>
Date: Tue, 22 Mar 2022 06:17:15 -0700
Subject: [PATCH 9/9] Version Packages (#1966)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .../actionmenu-fix-high-contrast-mode.md      |  5 ----
 .changeset/healthy-cooks-draw.md              |  5 ----
 .changeset/large-owls-dance.md                |  5 ----
 .changeset/loud-schools-own.md                |  5 ----
 .changeset/seven-hornets-jam.md               |  5 ----
 .changeset/smooth-lemons-brake.md             |  5 ----
 .changeset/spotty-eagles-help.md              |  5 ----
 .changeset/stupid-terms-hang.md               |  5 ----
 .changeset/ten-apes-smell.md                  |  5 ----
 .changeset/yellow-planes-decide.md            |  5 ----
 CHANGELOG.md                                  | 26 +++++++++++++++++++
 package.json                                  |  2 +-
 12 files changed, 27 insertions(+), 51 deletions(-)
 delete mode 100644 .changeset/actionmenu-fix-high-contrast-mode.md
 delete mode 100644 .changeset/healthy-cooks-draw.md
 delete mode 100644 .changeset/large-owls-dance.md
 delete mode 100644 .changeset/loud-schools-own.md
 delete mode 100644 .changeset/seven-hornets-jam.md
 delete mode 100644 .changeset/smooth-lemons-brake.md
 delete mode 100644 .changeset/spotty-eagles-help.md
 delete mode 100644 .changeset/stupid-terms-hang.md
 delete mode 100644 .changeset/ten-apes-smell.md
 delete mode 100644 .changeset/yellow-planes-decide.md

diff --git a/.changeset/actionmenu-fix-high-contrast-mode.md b/.changeset/actionmenu-fix-high-contrast-mode.md
deleted file mode 100644
index c4d3c5ef3b2..00000000000
--- a/.changeset/actionmenu-fix-high-contrast-mode.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@primer/react': patch
----
-
-ActionMenu: Fix styles for windows high contrast mode
diff --git a/.changeset/healthy-cooks-draw.md b/.changeset/healthy-cooks-draw.md
deleted file mode 100644
index 3680cb91a6f..00000000000
--- a/.changeset/healthy-cooks-draw.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@primer/react': patch
----
-
-Ensures select option text has acceptable contrast in Firefox when in dark mode
diff --git a/.changeset/large-owls-dance.md b/.changeset/large-owls-dance.md
deleted file mode 100644
index 0c218546dc7..00000000000
--- a/.changeset/large-owls-dance.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@primer/react": patch
----
-
-Icon button fixes: Removes iconLabel and adds aria-label to the type
diff --git a/.changeset/loud-schools-own.md b/.changeset/loud-schools-own.md
deleted file mode 100644
index 068d42c986a..00000000000
--- a/.changeset/loud-schools-own.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@primer/react": patch
----
-
-Fix `TextInput` types
diff --git a/.changeset/seven-hornets-jam.md b/.changeset/seven-hornets-jam.md
deleted file mode 100644
index 2699e13c8dd..00000000000
--- a/.changeset/seven-hornets-jam.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@primer/react': minor
----
-
-Adds button element selector to FilteredSearch button styles
diff --git a/.changeset/smooth-lemons-brake.md b/.changeset/smooth-lemons-brake.md
deleted file mode 100644
index 4a68284bebf..00000000000
--- a/.changeset/smooth-lemons-brake.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@primer/react': minor
----
-
-Adds a loadings state to our text input components
diff --git a/.changeset/spotty-eagles-help.md b/.changeset/spotty-eagles-help.md
deleted file mode 100644
index 2593685d9e9..00000000000
--- a/.changeset/spotty-eagles-help.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@primer/react': patch
----
-
-Instead of rendering unexpected FormControl children before the rest of the content, we render them in the same spot we'd normally render a Primer input component
diff --git a/.changeset/stupid-terms-hang.md b/.changeset/stupid-terms-hang.md
deleted file mode 100644
index bee78b92e04..00000000000
--- a/.changeset/stupid-terms-hang.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@primer/react": minor
----
-
-Bump primer/primitives to `7.5.1`
diff --git a/.changeset/ten-apes-smell.md b/.changeset/ten-apes-smell.md
deleted file mode 100644
index 0485e9a3be5..00000000000
--- a/.changeset/ten-apes-smell.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@primer/react": patch
----
-
-Add overlay props to Autocomplete.Overlay
diff --git a/.changeset/yellow-planes-decide.md b/.changeset/yellow-planes-decide.md
deleted file mode 100644
index d0923ffb3ea..00000000000
--- a/.changeset/yellow-planes-decide.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@primer/react": patch
----
-
-Add disabled color and backgroundColor to Button.Counter
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5d23bad7bf2..3ba19a02fcd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,31 @@
 # @primer/components
 
+## 35.1.0
+
+### Minor Changes
+
+- [#1942](https://github.com/primer/react/pull/1942) [`3f50ef54`](https://github.com/primer/react/commit/3f50ef543b8cea0306aba44bb44611f22dae657d) Thanks [@mperrotti](https://github.com/mperrotti)! - Adds button element selector to FilteredSearch button styles
+
+* [#1920](https://github.com/primer/react/pull/1920) [`40ed423e`](https://github.com/primer/react/commit/40ed423ed546ed91b69bc7bcc8361fd1e41faa8c) Thanks [@mperrotti](https://github.com/mperrotti)! - Adds a loadings state to our text input components
+
+- [#1961](https://github.com/primer/react/pull/1961) [`767d4166`](https://github.com/primer/react/commit/767d4166ef3e76e8ea12b6eec2d1d22f45f8609c) Thanks [@simurai](https://github.com/simurai)! - Bump primer/primitives to `7.5.1`
+
+### Patch Changes
+
+- [#1970](https://github.com/primer/react/pull/1970) [`3b236044`](https://github.com/primer/react/commit/3b23604438b850557e7e3d0a0594a8cca119859b) Thanks [@siddharthkp](https://github.com/siddharthkp)! - ActionMenu: Fix styles for windows high contrast mode
+
+* [#1981](https://github.com/primer/react/pull/1981) [`e9bb5956`](https://github.com/primer/react/commit/e9bb595680ff51a563260c020d1475102eba2535) Thanks [@mperrotti](https://github.com/mperrotti)! - Ensures select option text has acceptable contrast in Firefox when in dark mode
+
+- [#1945](https://github.com/primer/react/pull/1945) [`ef3b58a1`](https://github.com/primer/react/commit/ef3b58a1fdffc8d3f709c9f63e0ee70ee0f397ba) Thanks [@pksjce](https://github.com/pksjce)! - Icon button fixes: Removes iconLabel and adds aria-label to the type
+
+* [#1959](https://github.com/primer/react/pull/1959) [`2025036e`](https://github.com/primer/react/commit/2025036e552d8c8d02ed3139e5c8da4cb1546bb7) Thanks [@colebemis](https://github.com/colebemis)! - Fix `TextInput` types
+
+- [#1968](https://github.com/primer/react/pull/1968) [`1b01485a`](https://github.com/primer/react/commit/1b01485a282dc882aa7c8cc3a55fe736afdac029) Thanks [@mperrotti](https://github.com/mperrotti)! - Instead of rendering unexpected FormControl children before the rest of the content, we render them in the same spot we'd normally render a Primer input component
+
+* [#1967](https://github.com/primer/react/pull/1967) [`c83a06f0`](https://github.com/primer/react/commit/c83a06f00280ee2f8139d0cc3489242f1af46982) Thanks [@pksjce](https://github.com/pksjce)! - Add overlay props to Autocomplete.Overlay
+
+- [#1955](https://github.com/primer/react/pull/1955) [`77e123f4`](https://github.com/primer/react/commit/77e123f403df0669f492ac636de651506709bd9a) Thanks [@pksjce](https://github.com/pksjce)! - Add disabled color and backgroundColor to Button.Counter
+
 ## 35.0.1
 
 ### Patch Changes
diff --git a/package.json b/package.json
index 1570c01b181..f80909698e1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@primer/react",
-  "version": "35.0.1",
+  "version": "35.1.0",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",