From c16be96913e51702794b78540d657610ae49dbf8 Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Mon, 11 Dec 2023 16:57:54 +1000
Subject: [PATCH 01/16] Add tooltip to iconbutton

---
 src/Button/IconButton.features.stories.tsx | 15 ++++-
 src/Button/IconButton.tsx                  | 66 ++++++++++++++++++----
 src/Button/types.ts                        | 10 +++-
 3 files changed, 74 insertions(+), 17 deletions(-)

diff --git a/src/Button/IconButton.features.stories.tsx b/src/Button/IconButton.features.stories.tsx
index 2f8b979aac3..b0d5286b2eb 100644
--- a/src/Button/IconButton.features.stories.tsx
+++ b/src/Button/IconButton.features.stories.tsx
@@ -1,12 +1,23 @@
-import {HeartIcon} from '@primer/octicons-react'
+import {InboxIcon, HeartIcon} from '@primer/octicons-react'
 import React from 'react'
 import {IconButton} from '.'
+import {Tooltip} from '../drafts/Tooltip'
 
 export default {
   title: 'Components/IconButton/Features',
 }
 
-export const Primary = () => <IconButton icon={HeartIcon} variant="primary" aria-label="Primary" />
+export const Primary = () => <IconButton icon={HeartIcon} variant="primary" label="Primary" />
+
+export const WithDescription = () => (
+  <IconButton icon={InboxIcon} label="Notifications" description="You have no unread notifications." />
+)
+
+export const ExternalTooltip = () => (
+  <Tooltip text="this is a supportive description for icon button" direction="se">
+    <IconButton icon={HeartIcon} label="HeartIcon" />
+  </Tooltip>
+)
 
 export const Danger = () => <IconButton icon={HeartIcon} variant="danger" aria-label="Danger" />
 
diff --git a/src/Button/IconButton.tsx b/src/Button/IconButton.tsx
index e313aa1a4e7..1cc2a6e4348 100644
--- a/src/Button/IconButton.tsx
+++ b/src/Button/IconButton.tsx
@@ -4,20 +4,62 @@ import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/po
 import {ButtonBase} from './ButtonBase'
 import {defaultSxProp} from '../utils/defaultSxProp'
 import {generateCustomSxProp} from './Button'
+import {Tooltip, TooltipContext} from '../drafts/Tooltip'
 
-const IconButton = forwardRef(({sx: sxProp = defaultSxProp, icon: Icon, ...props}, forwardedRef): JSX.Element => {
-  let sxStyles = sxProp
-  // grap the button props that have associated data attributes in the styles
-  const {size} = props
+const IconButton = forwardRef(
+  (
+    {sx: sxProp = defaultSxProp, icon: Icon, 'aria-label': ariaLabel, label, description, ...props},
+    forwardedRef,
+  ): JSX.Element => {
+    let sxStyles = sxProp
+    // grap the button props that have associated data attributes in the styles
+    const {size} = props
 
-  if (sxProp !== null && Object.keys(sxProp).length > 0) {
-    sxStyles = generateCustomSxProp({size}, sxProp)
-  }
+    if (sxProp !== null && Object.keys(sxProp).length > 0) {
+      sxStyles = generateCustomSxProp({size}, sxProp)
+    }
 
-  return (
-    // @ts-expect-error StyledButton wants both Anchor and Button refs
-    <ButtonBase icon={Icon} data-component="IconButton" sx={sxStyles} type="button" {...props} ref={forwardedRef} />
-  )
-}) as PolymorphicForwardRefComponent<'button' | 'a', IconButtonProps>
+    // If the icon button is already wrapped in a tooltip, do not add one.
+    const {tooltipId} = React.useContext(TooltipContext)
+
+    // aria-label is going to be deprecated in favor of label but for now we are supporting both.
+    const iconButtonLabel = label ?? ariaLabel
+
+    if (!tooltipId) {
+      return (
+        // if description exists, we use tooltip for adding description to the icon button. Otherwise, we use tooltip for labelling the icon button.
+        // @ts-ignore for now
+        <Tooltip text={description ?? iconButtonLabel} type={description ? 'description' : 'label'}>
+          <ButtonBase
+            icon={Icon}
+            data-component="IconButton"
+            sx={sxStyles}
+            type="button"
+            {...props}
+            // @ts-expect-error StyledButton wants both Anchor and Button refs
+            ref={forwardedRef}
+            // If description exists, we need to explicitly set aria-label to the button for an accessible name
+            aria-label={description ? iconButtonLabel : undefined}
+          />
+        </Tooltip>
+      )
+    } else {
+      return (
+        // If icon button is already wrapped in a tooltip, we do not need to add another tooltip.
+        <ButtonBase
+          icon={Icon}
+          data-component="IconButton"
+          sx={sxStyles}
+          type="button"
+          {...props}
+          // @ts-expect-error StyledButton wants both Anchor and Button refs
+          ref={forwardedRef}
+          // External tooltip can only be used to set description. Icon button should always have aria-label or label
+          aria-label={iconButtonLabel}
+        />
+      )
+    }
+  },
+) as PolymorphicForwardRefComponent<'button' | 'a', IconButtonProps>
 
 export {IconButton}
diff --git a/src/Button/types.ts b/src/Button/types.ts
index 49ad7969eb9..9a81b0a2eae 100644
--- a/src/Button/types.ts
+++ b/src/Button/types.ts
@@ -14,9 +14,13 @@ export type Size = 'small' | 'medium' | 'large'
 
 export type AlignContent = 'start' | 'center'
 
-type ButtonA11yProps =
-  | {'aria-label': string; 'aria-labelledby'?: undefined}
-  | {'aria-label'?: undefined; 'aria-labelledby': string}
+type ButtonA11yProps = (
+  | {'aria-label': string; label?: string; 'aria-labelledby'?: undefined}
+  | {'aria-label'?: string; label: string; 'aria-labelledby'?: undefined}
+  | {'aria-label'?: undefined; label?: string; 'aria-labelledby': string}
+) & {
+  description?: string
+}
 
 export type ButtonBaseProps = {
   /**

From 47af0572ae5863795ee005d35ab20f3e441007e5 Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Tue, 12 Dec 2023 16:13:27 +1000
Subject: [PATCH 02/16] do not add tooltip for disabled icon button and update
 button group styles to encounter icon buttons wrapped with a div for tooltip

---
 src/Button/IconButton.tsx       |  5 +++--
 src/ButtonGroup/ButtonGroup.tsx | 25 +++++++++++++------------
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/Button/IconButton.tsx b/src/Button/IconButton.tsx
index 1cc2a6e4348..55c3734eb1b 100644
--- a/src/Button/IconButton.tsx
+++ b/src/Button/IconButton.tsx
@@ -8,7 +8,7 @@ import {Tooltip, TooltipContext} from '../drafts/Tooltip'
 
 const IconButton = forwardRef(
   (
-    {sx: sxProp = defaultSxProp, icon: Icon, 'aria-label': ariaLabel, label, description, ...props},
+    {sx: sxProp = defaultSxProp, icon: Icon, disabled, 'aria-label': ariaLabel, label, description, ...props},
     forwardedRef,
   ): JSX.Element => {
     let sxStyles = sxProp
@@ -25,7 +25,7 @@ const IconButton = forwardRef(
     // aria-label is going to be deprecated in favor of label but for now we are supporting both.
     const iconButtonLabel = label ?? ariaLabel
 
-    if (!tooltipId) {
+    if (!tooltipId && !disabled) {
       return (
         // if description exists, we use tooltip for adding description to the icon button. Otherwise, we use tooltip for labelling the icon button.
         // @ts-ignore for now
@@ -50,6 +50,7 @@ const IconButton = forwardRef(
           icon={Icon}
           data-component="IconButton"
           sx={sxStyles}
+          disabled={disabled}
           type="button"
           {...props}
           // @ts-expect-error StyledButton wants both Anchor and Button refs
diff --git a/src/ButtonGroup/ButtonGroup.tsx b/src/ButtonGroup/ButtonGroup.tsx
index 9e49b669aca..9e3cbb3413d 100644
--- a/src/ButtonGroup/ButtonGroup.tsx
+++ b/src/ButtonGroup/ButtonGroup.tsx
@@ -9,25 +9,26 @@ const ButtonGroup = styled.div`
   isolation: isolate;
 
   && > * {
-    margin-inline-end: -1px;
-    position: relative;
-    border-radius: 0;
+    & > button {
+      margin-inline-end: -1px;
+      position: relative;
+      border-radius: 0;
 
-    :first-child {
+      :focus,
+      :active,
+      :hover {
+        z-index: 1;
+      }
+    }
+
+    &:first-child > button {
       border-top-left-radius: ${get('radii.2')};
       border-bottom-left-radius: ${get('radii.2')};
     }
-
-    :last-child {
+    &:last-child > button {
       border-top-right-radius: ${get('radii.2')};
       border-bottom-right-radius: ${get('radii.2')};
     }
-
-    :focus,
-    :active,
-    :hover {
-      z-index: 1;
-    }
   }
 
   ${sx};

From 5e873307683ab061318aa9de6d25be22ffd6f9d2 Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Wed, 13 Dec 2023 15:43:07 +1000
Subject: [PATCH 03/16] move the ref up and add tooltip v1 context and update
 snapshots

---
 src/Button/IconButton.tsx                     |  13 +-
 src/Dialog/__snapshots__/Dialog.test.tsx.snap | 209 +++++++++---
 src/Tooltip/Tooltip.tsx                       |  11 +-
 .../__snapshots__/TextInput.test.tsx.snap     | 316 +++++++++---------
 .../__snapshots__/Button.test.tsx.snap        |  18 +-
 5 files changed, 351 insertions(+), 216 deletions(-)

diff --git a/src/Button/IconButton.tsx b/src/Button/IconButton.tsx
index 55c3734eb1b..9902e101cd0 100644
--- a/src/Button/IconButton.tsx
+++ b/src/Button/IconButton.tsx
@@ -4,7 +4,8 @@ import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/po
 import {ButtonBase} from './ButtonBase'
 import {defaultSxProp} from '../utils/defaultSxProp'
 import {generateCustomSxProp} from './Button'
-import {Tooltip, TooltipContext} from '../drafts/Tooltip'
+import {Tooltip, TooltipContext} from '../drafts/Tooltip/Tooltip'
+import {TooltipContext as TooltipV1Context} from '../Tooltip/Tooltip'
 
 const IconButton = forwardRef(
   (
@@ -18,26 +19,24 @@ const IconButton = forwardRef(
     if (sxProp !== null && Object.keys(sxProp).length > 0) {
       sxStyles = generateCustomSxProp({size}, sxProp)
     }
-
     // If the icon button is already wrapped in a tooltip, do not add one.
-    const {tooltipId} = React.useContext(TooltipContext)
+    const {tooltipId} = React.useContext(TooltipContext) // Tooltip v2
+    const {container} = React.useContext(TooltipV1Context) // Tooltip v1
 
     // aria-label is going to be deprecated in favor of label but for now we are supporting both.
     const iconButtonLabel = label ?? ariaLabel
 
-    if (!tooltipId && !disabled) {
+    if (!tooltipId && container !== 'Tooltip' && !disabled) {
       return (
         // if description exists, we use tooltip for adding description to the icon button. Otherwise, we use tooltip for labelling the icon button.
         // @ts-ignore for now
-        <Tooltip text={description ?? iconButtonLabel} type={description ? 'description' : 'label'}>
+        <Tooltip text={description ?? iconButtonLabel} type={description ? 'description' : 'label'} ref={forwardedRef}>
           <ButtonBase
             icon={Icon}
             data-component="IconButton"
             sx={sxStyles}
             type="button"
             {...props}
-            // @ts-expect-error StyledButton wants both Anchor and Button refs
-            ref={forwardedRef}
             // If description exists, we need to explicitly set aria-label to the button for an accessible name
             aria-label={description ? iconButtonLabel : undefined}
           />
diff --git a/src/Dialog/__snapshots__/Dialog.test.tsx.snap b/src/Dialog/__snapshots__/Dialog.test.tsx.snap
index f3aaf3ab027..c1a4297dbac 100644
--- a/src/Dialog/__snapshots__/Dialog.test.tsx.snap
+++ b/src/Dialog/__snapshots__/Dialog.test.tsx.snap
@@ -61,6 +61,10 @@ exports[`Dialog renders consistently 1`] = `
 
 }
 
+@media (forced-colors:active) {
+
+}
+
 @media screen and (max-width:750px) {
 
 }
@@ -72,12 +76,12 @@ exports[`Dialog renders consistently 1`] = `
 <span
     className="c0"
   />,
-  .c2 {
+  .c3 {
   padding: 16px;
   background-color: #f6f8fa;
 }
 
-.c5 {
+.c6 {
   padding: 16px;
 }
 
@@ -320,14 +324,119 @@ exports[`Dialog renders consistently 1`] = `
   color: inherit;
 }
 
-.c4 {
+.c2 {
+  display: none;
+}
+
+.c2[popover] {
+  padding: 0.5em 0.75em;
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+  margin: auto;
+  -webkit-clip: auto;
+  clip: auto;
+  white-space: normal;
+  font: normal normal 11px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
+  -webkit-font-smoothing: subpixel-antialiased;
+  color: #ffffff;
+  text-align: center;
+  word-wrap: break-word;
+  background: #24292f;
+  border-radius: 6px;
+  border: 0;
+  opacity: 0;
+  max-width: 250px;
+  inset: auto;
+  overflow: visible;
+}
+
+.c2[popover]:popover-open {
+  display: block;
+}
+
+.c2[popover].\\:popover-open {
+  display: block;
+}
+
+.c2::after {
+  position: absolute;
+  display: block;
+  right: 0;
+  left: 0;
+  height: 8px;
+  content: '';
+}
+
+.c2[data-direction='n']::after,
+.c2[data-direction='ne']::after,
+.c2[data-direction='nw']::after {
+  top: 100%;
+}
+
+.c2[data-direction='s']::after,
+.c2[data-direction='se']::after,
+.c2[data-direction='sw']::after {
+  bottom: 100%;
+}
+
+.c2[data-direction='w']::after {
+  position: absolute;
+  display: block;
+  height: 100%;
+  width: 8px;
+  content: '';
+  bottom: 0;
+  left: 100%;
+}
+
+.c2[data-direction='e']::after {
+  position: absolute;
+  display: block;
+  height: 100%;
+  width: 8px;
+  content: '';
+  bottom: 0;
+  right: 100%;
+  margin-left: -8px;
+}
+
+.c2:popover-open,
+.c2:popover-open::before {
+  -webkit-animation-name: tooltip-appear;
+  animation-name: tooltip-appear;
+  -webkit-animation-duration: 0.1s;
+  animation-duration: 0.1s;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  -webkit-animation-timing-function: ease-in;
+  animation-timing-function: ease-in;
+  -webkit-animation-delay: 0s;
+  animation-delay: 0s;
+}
+
+.c2.\\:popover-open,
+.c2.\\:popover-open::before {
+  -webkit-animation-name: tooltip-appear;
+  animation-name: tooltip-appear;
+  -webkit-animation-duration: 0.1s;
+  animation-duration: 0.1s;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  -webkit-animation-timing-function: ease-in;
+  animation-timing-function: ease-in;
+  -webkit-animation-delay: 0s;
+  animation-delay: 0s;
+}
+
+.c5 {
   font-size: 14px;
   font-weight: 600;
   font-family: sans-serif;
   color: #1F2328;
 }
 
-.c6 {
+.c7 {
   font-family: sans-serif;
 }
 
@@ -348,7 +457,7 @@ exports[`Dialog renders consistently 1`] = `
   outline: none;
 }
 
-.c3 {
+.c4 {
   border-radius: 6px 6px 0px 0px;
   border-bottom: 1px solid #d0d7de;
   display: -webkit-box;
@@ -363,6 +472,12 @@ exports[`Dialog renders consistently 1`] = `
   }
 }
 
+@media (forced-colors:active) {
+  .c2 {
+    outline: 1px solid transparent;
+  }
+}
+
 @media screen and (max-width:750px) {
   .c0 {
     width: 100vw;
@@ -373,7 +488,7 @@ exports[`Dialog renders consistently 1`] = `
 }
 
 @media screen and (max-width:750px) {
-  .c3 {
+  .c4 {
     border-radius: 0px;
   }
 }
@@ -386,44 +501,60 @@ exports[`Dialog renders consistently 1`] = `
     role="dialog"
     tabIndex={-1}
   >
-    <button
-      aria-label="Close"
-      className="c1"
-      data-block={null}
-      data-component="IconButton"
-      data-no-visuals={true}
-      onClick={[Function]}
-      type="button"
+    <div
+      className=""
+      onMouseLeave={[Function]}
     >
-      <svg
-        aria-hidden="true"
-        className="octicon octicon-x"
-        fill="currentColor"
-        focusable="false"
-        height={16}
-        role="img"
-        style={
-          {
-            "display": "inline-block",
-            "overflow": "visible",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
+      <button
+        aria-labelledby="tooltip-:r0:"
+        className="c1"
+        data-block={null}
+        data-component="IconButton"
+        data-no-visuals={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onMouseEnter={[Function]}
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          fill="currentColor"
+          focusable="false"
+          height={16}
+          role="img"
+          style={
+            {
+              "display": "inline-block",
+              "overflow": "visible",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
           }
-        }
-        viewBox="0 0 16 16"
-        width={16}
+          viewBox="0 0 16 16"
+          width={16}
+        >
+          <path
+            d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+          />
+        </svg>
+      </button>
+      <div
+        aria-hidden={true}
+        className="c2"
+        data-direction="s"
+        id="tooltip-:r0:"
       >
-        <path
-          d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
-        />
-      </svg>
-    </button>
+        Close
+      </div>
+    </div>
     <div
-      className="c2 c3"
+      className="c3 c4"
       id="header"
     >
       <span
-        className="c4"
+        className="c5"
         color="fg.default"
         fontFamily="sans-serif"
         fontSize={1}
@@ -433,10 +564,10 @@ exports[`Dialog renders consistently 1`] = `
       </span>
     </div>
     <div
-      className="c5"
+      className="c6"
     >
       <span
-        className="c6"
+        className="c7"
         fontFamily="sans-serif"
       >
         Some content
diff --git a/src/Tooltip/Tooltip.tsx b/src/Tooltip/Tooltip.tsx
index a2b1de01bde..9e0301fb668 100644
--- a/src/Tooltip/Tooltip.tsx
+++ b/src/Tooltip/Tooltip.tsx
@@ -247,6 +247,8 @@ export type TooltipProps = {
   wrap?: boolean
 } & ComponentProps<typeof TooltipBase>
 
+export const TooltipContext = React.createContext<{container?: string}>({})
+
 function Tooltip({direction = 'n', children, className, text, noDelay, align, wrap, ...rest}: TooltipProps) {
   const classes = clsx(
     className,
@@ -256,9 +258,12 @@ function Tooltip({direction = 'n', children, className, text, noDelay, align, wr
     wrap && 'tooltipped-multiline',
   )
   return (
-    <TooltipBase role="tooltip" aria-label={text} {...rest} className={classes}>
-      {children}
-    </TooltipBase>
+    // This provider is used to check if an icon button is wrapped with tooltip or not.
+    <TooltipContext.Provider value={{container: 'Tooltip'}}>
+      <TooltipBase role="tooltip" aria-label={text} {...rest} className={classes}>
+        {children}
+      </TooltipBase>
+    </TooltipContext.Provider>
   )
 }
 
diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap
index 63eaeab5e13..a36657bbb5e 100644
--- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -1958,85 +1958,6 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   height: var(--inner-action-size);
 }
 
-.c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: #1F2328;
-  vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
-  border-radius: 6px;
-  outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
-  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;
-  overflow: hidden;
-}
-
-.c0 input,
-.c0 textarea {
-  cursor: text;
-}
-
-.c0 select {
-  cursor: pointer;
-}
-
-.c0::-webkit-input-placeholder {
-  color: #6e7781;
-}
-
-.c0::-moz-placeholder {
-  color: #6e7781;
-}
-
-.c0:-ms-input-placeholder {
-  color: #6e7781;
-}
-
-.c0::placeholder {
-  color: #6e7781;
-}
-
-.c0 > textarea {
-  padding: 12px;
-}
-
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.c1 > :not(:last-child) {
-  margin-right: 8px;
-}
-
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-  color: #656d76;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 0;
-}
-
 .c4 {
   position: relative;
   display: inline-block;
@@ -2262,6 +2183,85 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   left: 10px;
 }
 
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: #1F2328;
+  vertical-align: middle;
+  background-color: #ffffff;
+  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  border-radius: 6px;
+  outline: none;
+  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  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;
+  overflow: hidden;
+}
+
+.c0 input,
+.c0 textarea {
+  cursor: text;
+}
+
+.c0 select {
+  cursor: pointer;
+}
+
+.c0::-webkit-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::-moz-placeholder {
+  color: #6e7781;
+}
+
+.c0:-ms-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::placeholder {
+  color: #6e7781;
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c1 > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #656d76;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 0;
+}
+
 .c2 {
   border: 0;
   font-size: inherit;
@@ -3043,85 +3043,6 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   color: inherit;
 }
 
-.c0 {
-  font-size: 14px;
-  line-height: 20px;
-  color: #1F2328;
-  vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
-  border-radius: 6px;
-  outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
-  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;
-  overflow: hidden;
-}
-
-.c0 input,
-.c0 textarea {
-  cursor: text;
-}
-
-.c0 select {
-  cursor: pointer;
-}
-
-.c0::-webkit-input-placeholder {
-  color: #6e7781;
-}
-
-.c0::-moz-placeholder {
-  color: #6e7781;
-}
-
-.c0:-ms-input-placeholder {
-  color: #6e7781;
-}
-
-.c0::placeholder {
-  color: #6e7781;
-}
-
-.c0 > textarea {
-  padding: 12px;
-}
-
-.c1 {
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.c1 > :not(:last-child) {
-  margin-right: 8px;
-}
-
-.c1 .TextInput-icon,
-.c1 .TextInput-action {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-  color: #656d76;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-.c1 > input,
-.c1 > select {
-  padding-left: 12px;
-  padding-right: 0;
-}
-
 .c4 {
   position: relative;
   display: inline-block;
@@ -3348,6 +3269,85 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   left: 10px;
 }
 
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: #1F2328;
+  vertical-align: middle;
+  background-color: #ffffff;
+  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  border-radius: 6px;
+  outline: none;
+  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  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;
+  overflow: hidden;
+}
+
+.c0 input,
+.c0 textarea {
+  cursor: text;
+}
+
+.c0 select {
+  cursor: pointer;
+}
+
+.c0::-webkit-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::-moz-placeholder {
+  color: #6e7781;
+}
+
+.c0:-ms-input-placeholder {
+  color: #6e7781;
+}
+
+.c0::placeholder {
+  color: #6e7781;
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c1 > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #656d76;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 0;
+}
+
 .c2 {
   border: 0;
   font-size: inherit;
diff --git a/src/__tests__/deprecated/__snapshots__/Button.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/Button.test.tsx.snap
index 412399621ca..614309fa5f9 100644
--- a/src/__tests__/deprecated/__snapshots__/Button.test.tsx.snap
+++ b/src/__tests__/deprecated/__snapshots__/Button.test.tsx.snap
@@ -304,28 +304,28 @@ exports[`ButtonGroup renders consistently 1`] = `
   isolation: isolate;
 }
 
-.c0.c0 > * {
+.c0.c0 > * > button {
   margin-inline-end: -1px;
   position: relative;
   border-radius: 0;
 }
 
-.c0.c0 > *:first-child {
+.c0.c0 > * > button:focus,
+.c0.c0 > * > button:active,
+.c0.c0 > * > button:hover {
+  z-index: 1;
+}
+
+.c0.c0 > *:first-child > button {
   border-top-left-radius: 6px;
   border-bottom-left-radius: 6px;
 }
 
-.c0.c0 > *:last-child {
+.c0.c0 > *:last-child > button {
   border-top-right-radius: 6px;
   border-bottom-right-radius: 6px;
 }
 
-.c0.c0 > *:focus,
-.c0.c0 > *:active,
-.c0.c0 > *:hover {
-  z-index: 1;
-}
-
 <div
   className="c0"
 />

From df7f98fb28c1c0ba96b79a2464fed976f4a727a0 Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Thu, 14 Dec 2023 11:41:51 +1000
Subject: [PATCH 04/16] update types

---
 src/Button/types.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Button/types.ts b/src/Button/types.ts
index 9a81b0a2eae..bfa8be2fe8f 100644
--- a/src/Button/types.ts
+++ b/src/Button/types.ts
@@ -15,9 +15,9 @@ export type Size = 'small' | 'medium' | 'large'
 export type AlignContent = 'start' | 'center'
 
 type ButtonA11yProps = (
-  | {'aria-label': string; label?: string; 'aria-labelledby'?: undefined}
-  | {'aria-label'?: string; label: string; 'aria-labelledby'?: undefined}
-  | {'aria-label'?: undefined; label?: string; 'aria-labelledby': string}
+  | {'aria-label': string; label?: undefined; 'aria-labelledby'?: undefined}
+  | {'aria-label'?: undefined; label: string; 'aria-labelledby'?: undefined}
+  | {'aria-label'?: undefined; label?: undefined; 'aria-labelledby': string}
 ) & {
   description?: string
 }

From 5d48aa6222a39a3e16da21b046cec893b7082455 Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Wed, 13 Dec 2023 15:33:13 +1000
Subject: [PATCH 05/16] Do not wrap the tooltip and the trigger in a div

---
 src/drafts/Tooltip/Tooltip.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/drafts/Tooltip/Tooltip.tsx b/src/drafts/Tooltip/Tooltip.tsx
index 6570e939bf0..969e9f6a195 100644
--- a/src/drafts/Tooltip/Tooltip.tsx
+++ b/src/drafts/Tooltip/Tooltip.tsx
@@ -1,5 +1,4 @@
 import React, {Children, useEffect, useRef, useState} from 'react'
-import Box from '../../Box'
 import sx, {SxProp} from '../../sx'
 import {useId, useProvidedRefOrCreate} from '../../hooks'
 import {invariant} from '../../utils/invariant'
@@ -139,6 +138,7 @@ export type TriggerPropsType = {
   onBlur?: React.FocusEventHandler
   onFocus?: React.FocusEventHandler
   onMouseEnter?: React.MouseEventHandler
+  onMouseLeave?: React.MouseEventHandler
   ref?: React.RefObject<HTMLElement>
 }
 
@@ -268,7 +268,7 @@ export const Tooltip = React.forwardRef(
 
     return (
       <TooltipContext.Provider value={{tooltipId}}>
-        <Box onMouseLeave={() => closeTooltip()}>
+        <>
           {React.isValidElement(child) &&
             React.cloneElement(child as React.ReactElement<TriggerPropsType>, {
               ref: triggerRef,
@@ -288,6 +288,10 @@ export const Tooltip = React.forwardRef(
                 openTooltip()
                 child.props.onMouseEnter?.(event)
               },
+              onMouseLeave: (event: React.MouseEvent) => {
+                closeTooltip()
+                child.props.onMouseLeave?.(event)
+              },
             })}
           <StyledTooltip
             ref={tooltipElRef}
@@ -298,10 +302,13 @@ export const Tooltip = React.forwardRef(
             // stop AT from announcing the tooltip twice when it is a label type because it will be announced with "aria-labelledby"
             aria-hidden={type === 'label' ? true : undefined}
             id={`tooltip-${tooltipId}`}
+            // mouse leave and enter on the tooltip itself is needed to keep the tooltip open when the mouse is over the tooltip
+            onMouseEnter={openTooltip}
+            onMouseLeave={closeTooltip}
           >
             {text}
           </StyledTooltip>
-        </Box>
+        </>
       </TooltipContext.Provider>
     )
   },

From 651b36806b1991a71d5a9f0862acdf0ab9199af7 Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Mon, 15 Jan 2024 15:40:39 +1000
Subject: [PATCH 06/16] tests

---
 src/Button/types.ts                           | 21 ++++-
 .../__snapshots__/Dialog.test.tsx.snap        | 84 +++++++++----------
 src/drafts/Tooltip/Tooltip.tsx                | 17 ++--
 src/drafts/Tooltip/__tests__/Tooltip.test.tsx | 33 +++++++-
 4 files changed, 98 insertions(+), 57 deletions(-)

diff --git a/src/Button/types.ts b/src/Button/types.ts
index bfa8be2fe8f..0aff474f5d4 100644
--- a/src/Button/types.ts
+++ b/src/Button/types.ts
@@ -15,9 +15,24 @@ export type Size = 'small' | 'medium' | 'large'
 export type AlignContent = 'start' | 'center'
 
 type ButtonA11yProps = (
-  | {'aria-label': string; label?: undefined; 'aria-labelledby'?: undefined}
-  | {'aria-label'?: undefined; label: string; 'aria-labelledby'?: undefined}
-  | {'aria-label'?: undefined; label?: undefined; 'aria-labelledby': string}
+  | {
+      // @deprecated use label prop instead
+      'aria-label': string
+      label?: undefined
+      'aria-labelledby'?: undefined
+    }
+  | {
+      // @deprecated use label prop instead
+      'aria-label'?: undefined
+      label: string
+      'aria-labelledby'?: undefined
+    }
+  | {
+      // @deprecated use label prop instead
+      'aria-label'?: undefined
+      label?: undefined
+      'aria-labelledby': string
+    }
 ) & {
   description?: string
 }
diff --git a/src/__tests__/__snapshots__/Dialog.test.tsx.snap b/src/__tests__/__snapshots__/Dialog.test.tsx.snap
index c1a4297dbac..9bdc0582b52 100644
--- a/src/__tests__/__snapshots__/Dialog.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Dialog.test.tsx.snap
@@ -501,53 +501,51 @@ exports[`Dialog renders consistently 1`] = `
     role="dialog"
     tabIndex={-1}
   >
-    <div
-      className=""
+    <button
+      aria-labelledby="tooltip-:r0:"
+      className="c1"
+      data-block={null}
+      data-component="IconButton"
+      data-no-visuals={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onMouseEnter={[Function]}
       onMouseLeave={[Function]}
+      type="button"
     >
-      <button
-        aria-labelledby="tooltip-:r0:"
-        className="c1"
-        data-block={null}
-        data-component="IconButton"
-        data-no-visuals={true}
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseEnter={[Function]}
-        type="button"
-      >
-        <svg
-          aria-hidden="true"
-          className="octicon octicon-x"
-          fill="currentColor"
-          focusable="false"
-          height={16}
-          role="img"
-          style={
-            {
-              "display": "inline-block",
-              "overflow": "visible",
-              "userSelect": "none",
-              "verticalAlign": "text-bottom",
-            }
+      <svg
+        aria-hidden="true"
+        className="octicon octicon-x"
+        fill="currentColor"
+        focusable="false"
+        height={16}
+        role="img"
+        style={
+          {
+            "display": "inline-block",
+            "overflow": "visible",
+            "userSelect": "none",
+            "verticalAlign": "text-bottom",
           }
-          viewBox="0 0 16 16"
-          width={16}
-        >
-          <path
-            d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
-          />
-        </svg>
-      </button>
-      <div
-        aria-hidden={true}
-        className="c2"
-        data-direction="s"
-        id="tooltip-:r0:"
+        }
+        viewBox="0 0 16 16"
+        width={16}
       >
-        Close
-      </div>
+        <path
+          d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+        />
+      </svg>
+    </button>
+    <div
+      aria-hidden={true}
+      className="c2"
+      data-direction="s"
+      id="tooltip-:r0:"
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+    >
+      Close
     </div>
     <div
       className="c3 c4"
diff --git a/src/drafts/Tooltip/Tooltip.tsx b/src/drafts/Tooltip/Tooltip.tsx
index 949ea46c34b..a2b38a13454 100644
--- a/src/drafts/Tooltip/Tooltip.tsx
+++ b/src/drafts/Tooltip/Tooltip.tsx
@@ -167,19 +167,16 @@ const positionToDirection: Record<string, TooltipDirection> = {
 }
 
 // The list is from GitHub's custom-axe-rules https://github.com/github/github/blob/master/app/assets/modules/github/axe-custom-rules.ts#L3
-const interactiveElements = [
-  'a[href]',
-  'button:not(:disabled)',
-  'summary',
-  'select',
-  'input:not([type=hidden])',
-  'textarea',
-]
+const interactiveElements = ['a[href]', 'button', 'summary', 'select', 'input:not([type=hidden])', 'textarea']
 
 const isInteractive = (element: HTMLElement) => {
   return (
-    interactiveElements.some(selector => element.matches(selector)) ||
-    (element.hasAttribute('role') && element.getAttribute('role') === 'button')
+    interactiveElements.some(selector => {
+      if (element.tagName === 'BUTTON') {
+        return !element.hasAttribute('disabled')
+      } else return element.matches(selector)
+    }) ||
+    (element.hasAttribute('role') && element.getAttribute('role') === 'button' && !element.hasAttribute('disabled'))
   )
 }
 export const TooltipContext = React.createContext<{tooltipId?: string}>({})
diff --git a/src/drafts/Tooltip/__tests__/Tooltip.test.tsx b/src/drafts/Tooltip/__tests__/Tooltip.test.tsx
index e8fbea212f3..d7811844d54 100644
--- a/src/drafts/Tooltip/__tests__/Tooltip.test.tsx
+++ b/src/drafts/Tooltip/__tests__/Tooltip.test.tsx
@@ -3,7 +3,8 @@ import {Tooltip, TooltipProps} from '../Tooltip'
 import {checkStoriesForAxeViolations} from '../../../utils/testing'
 import {render as HTMLRender} from '@testing-library/react'
 import theme from '../../../theme'
-import {Button, ActionMenu, ActionList, ThemeProvider, SSRProvider, BaseStyles} from '../../../'
+import {Button, ActionMenu, ActionList, ThemeProvider, SSRProvider, BaseStyles, IconButton} from '../../../'
+import {HeartIcon} from '@primer/octicons-react'
 
 const TooltipComponent = (props: Omit<TooltipProps, 'text'> & {text?: string}) => (
   <Tooltip text="Tooltip text" {...props}>
@@ -91,4 +92,34 @@ describe('Tooltip', () => {
     expect(menuButton).toHaveAttribute('aria-describedby', tooltip.id)
     expect(menuButton).toHaveAttribute('aria-haspopup', 'true')
   })
+  it('should throw an error when the tooltip is used on a disabled button', () => {
+    const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {})
+    expect(() => {
+      HTMLRender(
+        <Tooltip text="Tooltip text">
+          <Button size="large" icon={HeartIcon} disabled>
+            Button
+          </Button>
+        </Tooltip>,
+      )
+    }).toThrow(
+      'The `Tooltip` component expects a single React element that contains interactive content. Consider using a `<button>` or equivalent interactive element instead.',
+    )
+    consoleErrorSpy.mockRestore()
+  })
+  it('renders tooltip as default on an icon button', () => {
+    const {getByRole, getByText} = HTMLRender(<IconButton size="large" icon={HeartIcon} label="Heart" />)
+    const triggerEL = getByRole('button')
+    const tooltipEl = getByText('Heart')
+    expect(triggerEL).toHaveAttribute('aria-labelledby', tooltipEl.id)
+  })
+  it('renders description type tooltip as default on an icon button', () => {
+    const {getByRole, getByText} = HTMLRender(
+      <IconButton size="large" icon={HeartIcon} label="Heart" description="Love is all around" />,
+    )
+    const triggerEL = getByRole('button')
+    expect(triggerEL).toHaveAttribute('aria-label', 'Heart')
+    const tooltipEl = getByText('Love is all around')
+    expect(triggerEL).toHaveAttribute('aria-describedby', tooltipEl.id)
+  })
 })

From 80a9ee3754da402b73d782226f89466ae3f11051 Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Tue, 16 Jan 2024 12:35:29 +1000
Subject: [PATCH 07/16] fix button group styling

---
 src/ButtonGroup/ButtonGroup.tsx | 26 ++++++++++++--------------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/ButtonGroup/ButtonGroup.tsx b/src/ButtonGroup/ButtonGroup.tsx
index 9e3cbb3413d..0278e75aee2 100644
--- a/src/ButtonGroup/ButtonGroup.tsx
+++ b/src/ButtonGroup/ButtonGroup.tsx
@@ -8,27 +8,25 @@ const ButtonGroup = styled.div`
   vertical-align: middle;
   isolation: isolate;
 
-  && > * {
-    & > button {
-      margin-inline-end: -1px;
-      position: relative;
-      border-radius: 0;
+  && > button {
+    margin-inline-end: -1px;
+    position: relative;
+    border-radius: 0;
 
-      :focus,
-      :active,
-      :hover {
-        z-index: 1;
-      }
-    }
-
-    &:first-child > button {
+    :first-of-type {
       border-top-left-radius: ${get('radii.2')};
       border-bottom-left-radius: ${get('radii.2')};
     }
-    &:last-child > button {
+
+    :last-of-type {
       border-top-right-radius: ${get('radii.2')};
       border-bottom-right-radius: ${get('radii.2')};
     }
+    :focus,
+    :active,
+    :hover {
+      z-index: 1;
+    }
   }
 
   ${sx};

From e1f59dbfe42e901a85cf902ebbfafba8aa18faff Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Tue, 16 Jan 2024 15:29:56 +1000
Subject: [PATCH 08/16] Add icon button as action menu anchor

---
 src/Button/IconButton.features.stories.tsx    | 31 ++++++++++++++++++
 src/Button/__tests__/Button.test.tsx          | 32 ++++++++++++++++++-
 .../__snapshots__/Button.test.tsx.snap        | 18 +++++------
 3 files changed, 71 insertions(+), 10 deletions(-)

diff --git a/src/Button/IconButton.features.stories.tsx b/src/Button/IconButton.features.stories.tsx
index b0d5286b2eb..3d7135a20e1 100644
--- a/src/Button/IconButton.features.stories.tsx
+++ b/src/Button/IconButton.features.stories.tsx
@@ -2,6 +2,7 @@ import {InboxIcon, HeartIcon} from '@primer/octicons-react'
 import React from 'react'
 import {IconButton} from '.'
 import {Tooltip} from '../drafts/Tooltip'
+import {ActionMenu, ActionList} from '..'
 
 export default {
   title: 'Components/IconButton/Features',
@@ -19,6 +20,36 @@ export const ExternalTooltip = () => (
   </Tooltip>
 )
 
+export const AsMenuAnchor = () => (
+  <ActionMenu>
+    <ActionMenu.Anchor>
+      <IconButton icon={HeartIcon} label="HeartIcon" />
+    </ActionMenu.Anchor>
+
+    <ActionMenu.Overlay width="medium">
+      <ActionList>
+        <ActionList.Item onSelect={() => alert('Copy link clicked')}>
+          Copy link
+          <ActionList.TrailingVisual>⌘C</ActionList.TrailingVisual>
+        </ActionList.Item>
+        <ActionList.Item onSelect={() => alert('Quote reply clicked')}>
+          Quote reply
+          <ActionList.TrailingVisual>⌘Q</ActionList.TrailingVisual>
+        </ActionList.Item>
+        <ActionList.Item onSelect={() => alert('Edit comment clicked')}>
+          Edit comment
+          <ActionList.TrailingVisual>⌘E</ActionList.TrailingVisual>
+        </ActionList.Item>
+        <ActionList.Divider />
+        <ActionList.Item variant="danger" onSelect={() => alert('Delete file clicked')}>
+          Delete file
+          <ActionList.TrailingVisual>⌘D</ActionList.TrailingVisual>
+        </ActionList.Item>
+      </ActionList>
+    </ActionMenu.Overlay>
+  </ActionMenu>
+)
+
 export const Danger = () => <IconButton icon={HeartIcon} variant="danger" aria-label="Danger" />
 
 export const Invisible = () => <IconButton icon={HeartIcon} variant="invisible" aria-label="Invisible" />
diff --git a/src/Button/__tests__/Button.test.tsx b/src/Button/__tests__/Button.test.tsx
index 186f4a029a7..7df2b99c9ca 100644
--- a/src/Button/__tests__/Button.test.tsx
+++ b/src/Button/__tests__/Button.test.tsx
@@ -4,7 +4,9 @@ import {axe} from 'jest-axe'
 import React from 'react'
 import {IconButton, Button} from '../../Button'
 import {behavesAsComponent} from '../../utils/testing'
-
+import {ActionMenu, theme, ActionList, BaseStyles, ThemeProvider, SSRProvider} from '../..'
+import userEvent from '@testing-library/user-event'
+// import theme from '../../'
 describe('Button', () => {
   behavesAsComponent({Component: Button, options: {skipSx: true}})
 
@@ -113,4 +115,32 @@ describe('Button', () => {
     const position = screen.getByText('content').compareDocumentPosition(screen.getByTestId('trailingVisual'))
     expect(position).toBe(Node.DOCUMENT_POSITION_FOLLOWING)
   })
+  it.only('should render the anchor icon button and correctly name the menu', async () => {
+    render(
+      <ThemeProvider theme={theme}>
+        <SSRProvider>
+          <BaseStyles>
+            <ActionMenu>
+              <ActionMenu.Anchor>
+                <IconButton icon={SearchIcon} label="More actions" />
+              </ActionMenu.Anchor>
+
+              <ActionMenu.Overlay width="medium">
+                <ActionList>
+                  <ActionList.Item onSelect={() => alert('Copy link clicked')}>
+                    Copy link
+                    <ActionList.TrailingVisual>⌘C</ActionList.TrailingVisual>
+                  </ActionList.Item>
+                </ActionList>
+              </ActionMenu.Overlay>
+            </ActionMenu>
+          </BaseStyles>
+        </SSRProvider>
+      </ThemeProvider>,
+    )
+
+    const toggleButton = screen.getByRole('button', {name: 'More actions'})
+    await userEvent.click(toggleButton)
+    expect(screen.getByRole('menu', {name: 'More actions'})).toBeInTheDocument()
+  })
 })
diff --git a/src/__tests__/deprecated/__snapshots__/Button.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/Button.test.tsx.snap
index 614309fa5f9..0e28e40465a 100644
--- a/src/__tests__/deprecated/__snapshots__/Button.test.tsx.snap
+++ b/src/__tests__/deprecated/__snapshots__/Button.test.tsx.snap
@@ -304,28 +304,28 @@ exports[`ButtonGroup renders consistently 1`] = `
   isolation: isolate;
 }
 
-.c0.c0 > * > button {
+.c0.c0 > button {
   margin-inline-end: -1px;
   position: relative;
   border-radius: 0;
 }
 
-.c0.c0 > * > button:focus,
-.c0.c0 > * > button:active,
-.c0.c0 > * > button:hover {
-  z-index: 1;
-}
-
-.c0.c0 > *:first-child > button {
+.c0.c0 > button:first-of-type {
   border-top-left-radius: 6px;
   border-bottom-left-radius: 6px;
 }
 
-.c0.c0 > *:last-child > button {
+.c0.c0 > button:last-of-type {
   border-top-right-radius: 6px;
   border-bottom-right-radius: 6px;
 }
 
+.c0.c0 > button:focus,
+.c0.c0 > button:active,
+.c0.c0 > button:hover {
+  z-index: 1;
+}
+
 <div
   className="c0"
 />

From 81b10ce5c941b31fdcf976b8e76548409e79d271 Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Wed, 17 Jan 2024 11:09:28 +1000
Subject: [PATCH 09/16] keep aria-label for both label and description type

---
 src/Button/IconButton.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/Button/IconButton.tsx b/src/Button/IconButton.tsx
index 9902e101cd0..0a9f749ada2 100644
--- a/src/Button/IconButton.tsx
+++ b/src/Button/IconButton.tsx
@@ -37,8 +37,9 @@ const IconButton = forwardRef(
             sx={sxStyles}
             type="button"
             {...props}
-            // If description exists, we need to explicitly set aria-label to the button for an accessible name
-            aria-label={description ? iconButtonLabel : undefined}
+            // (TODO: to be confirm): aria-label will be present to make sure that the menu is properly labelled when icon button is used as an anchor. In other standalone icon button cases, the button will be labelled by the tooltip via aria-labelledby. This is fine because both values are the same and aria-labelledby takes precedence over aria-label.
+            // If description exists, aria-label will be used to label the icon button whereas tooltip will be used to describe the button.
+            aria-label={iconButtonLabel}
           />
         </Tooltip>
       )

From 660180e164a25ba77d52569b48e9dedbcb5d1ddf Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Wed, 17 Jan 2024 11:43:35 +1000
Subject: [PATCH 10/16] comment out the warning to test icon button

---
 src/drafts/Tooltip/Tooltip.tsx | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/drafts/Tooltip/Tooltip.tsx b/src/drafts/Tooltip/Tooltip.tsx
index a2b38a13454..0d52c4b6d44 100644
--- a/src/drafts/Tooltip/Tooltip.tsx
+++ b/src/drafts/Tooltip/Tooltip.tsx
@@ -217,16 +217,17 @@ export const Tooltip = React.forwardRef(
         'The `Tooltip` component expects a single React element that contains interactive content. Consider using a `<button>` or equivalent interactive element instead.',
       )
       // If the tooltip is used for labelling the interactive element, the trigger element or any of its children should not have aria-label
-      if (type === 'label') {
-        const hasAriaLabel = triggerRef.current.hasAttribute('aria-label')
-        const hasAriaLabelInChildren = Array.from(triggerRef.current.childNodes).some(
-          child => child instanceof HTMLElement && child.hasAttribute('aria-label'),
-        )
-        warning(
-          hasAriaLabel || hasAriaLabelInChildren,
-          'The label type `Tooltip` is going to be used here to label the trigger element. Please remove the aria-label from the trigger element.',
-        )
-      }
+      // Commenting out for now to test the icon button. We expect that the aria-labelledby will take precedence over the aria-label
+      // if (type === 'label') {
+      //   const hasAriaLabel = triggerRef.current.hasAttribute('aria-label')
+      //   const hasAriaLabelInChildren = Array.from(triggerRef.current.childNodes).some(
+      //     child => child instanceof HTMLElement && child.hasAttribute('aria-label'),
+      //   )
+      //   warning(
+      //     hasAriaLabel || hasAriaLabelInChildren,
+      //     'The label type `Tooltip` is going to be used here to label the trigger element. Please remove the aria-label from the trigger element.',
+      //   )
+      // }
 
       // SSR safe polyfill apply
       if (typeof window !== 'undefined') {

From ccf83091365818a9f8f56b975e9a2396369434cb Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Wed, 17 Jan 2024 15:00:55 +1000
Subject: [PATCH 11/16] do not label the icon button by tooltip when it is a
 menu anchor

comment out the warning
---
 src/ActionMenu/ActionMenu.tsx              |  2 +-
 src/Button/IconButton.features.stories.tsx |  4 ++--
 src/Button/IconButton.tsx                  | 11 ++++++++---
 src/drafts/Tooltip/Tooltip.tsx             | 15 +++++++++------
 4 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/ActionMenu/ActionMenu.tsx b/src/ActionMenu/ActionMenu.tsx
index d579694cd3f..d07d3eab4e5 100644
--- a/src/ActionMenu/ActionMenu.tsx
+++ b/src/ActionMenu/ActionMenu.tsx
@@ -17,7 +17,7 @@ export type MenuContextProps = Pick<
 > & {
   onClose?: (gesture: 'anchor-click' | 'click-outside' | 'escape' | 'tab') => void
 }
-const MenuContext = React.createContext<MenuContextProps>({renderAnchor: null, open: false})
+export const MenuContext = React.createContext<MenuContextProps>({renderAnchor: null, open: false})
 
 export type ActionMenuProps = {
   /**
diff --git a/src/Button/IconButton.features.stories.tsx b/src/Button/IconButton.features.stories.tsx
index 3d7135a20e1..5a17975062f 100644
--- a/src/Button/IconButton.features.stories.tsx
+++ b/src/Button/IconButton.features.stories.tsx
@@ -1,4 +1,4 @@
-import {InboxIcon, HeartIcon} from '@primer/octicons-react'
+import {InboxIcon, HeartIcon, ChevronDownIcon} from '@primer/octicons-react'
 import React from 'react'
 import {IconButton} from '.'
 import {Tooltip} from '../drafts/Tooltip'
@@ -23,7 +23,7 @@ export const ExternalTooltip = () => (
 export const AsMenuAnchor = () => (
   <ActionMenu>
     <ActionMenu.Anchor>
-      <IconButton icon={HeartIcon} label="HeartIcon" />
+      <IconButton icon={ChevronDownIcon} label="Open Menu" />
     </ActionMenu.Anchor>
 
     <ActionMenu.Overlay width="medium">
diff --git a/src/Button/IconButton.tsx b/src/Button/IconButton.tsx
index 0a9f749ada2..38a64e5f604 100644
--- a/src/Button/IconButton.tsx
+++ b/src/Button/IconButton.tsx
@@ -6,6 +6,7 @@ import {defaultSxProp} from '../utils/defaultSxProp'
 import {generateCustomSxProp} from './Button'
 import {Tooltip, TooltipContext} from '../drafts/Tooltip/Tooltip'
 import {TooltipContext as TooltipV1Context} from '../Tooltip/Tooltip'
+import {MenuContext} from '../ActionMenu/ActionMenu'
 
 const IconButton = forwardRef(
   (
@@ -22,10 +23,12 @@ const IconButton = forwardRef(
     // If the icon button is already wrapped in a tooltip, do not add one.
     const {tooltipId} = React.useContext(TooltipContext) // Tooltip v2
     const {container} = React.useContext(TooltipV1Context) // Tooltip v1
+    const {anchorRef, anchorId} = React.useContext(MenuContext)
 
+    // we need to know if the icon button is used as a menu anchor to render the tooltip and aria properties correctly.
+    const isIconButtonAnchor = anchorRef !== undefined && anchorId !== undefined
     // aria-label is going to be deprecated in favor of label but for now we are supporting both.
     const iconButtonLabel = label ?? ariaLabel
-
     if (!tooltipId && container !== 'Tooltip' && !disabled) {
       return (
         // if description exists, we use tooltip for adding description to the icon button. Otherwise, we use tooltip for labelling the icon button.
@@ -34,12 +37,13 @@ const IconButton = forwardRef(
           <ButtonBase
             icon={Icon}
             data-component="IconButton"
+            data-anchor={isIconButtonAnchor ? 'true' : undefined}
             sx={sxStyles}
             type="button"
             {...props}
-            // (TODO: to be confirm): aria-label will be present to make sure that the menu is properly labelled when icon button is used as an anchor. In other standalone icon button cases, the button will be labelled by the tooltip via aria-labelledby. This is fine because both values are the same and aria-labelledby takes precedence over aria-label.
             // If description exists, aria-label will be used to label the icon button whereas tooltip will be used to describe the button.
-            aria-label={iconButtonLabel}
+            // Is icon button is used as a menu anchor, aria-label will be used to label the icon button and the menu.)
+            aria-label={description || isIconButtonAnchor ? iconButtonLabel : undefined}
           />
         </Tooltip>
       )
@@ -49,6 +53,7 @@ const IconButton = forwardRef(
         <ButtonBase
           icon={Icon}
           data-component="IconButton"
+          data-anchor={isIconButtonAnchor ? 'true' : undefined}
           sx={sxStyles}
           disabled={disabled}
           type="button"
diff --git a/src/drafts/Tooltip/Tooltip.tsx b/src/drafts/Tooltip/Tooltip.tsx
index 0d52c4b6d44..6b2348d83e4 100644
--- a/src/drafts/Tooltip/Tooltip.tsx
+++ b/src/drafts/Tooltip/Tooltip.tsx
@@ -186,6 +186,7 @@ export const Tooltip = React.forwardRef(
     const tooltipId = useId()
     const child = Children.only(children)
     const triggerRef = useProvidedRefOrCreate(forwardedRef as React.RefObject<HTMLElement>)
+    const [iconBtnAnchor, setIconBtnAnchor] = useState(false)
     const tooltipElRef = useRef<HTMLDivElement>(null)
 
     const [calculatedDirection, setCalculatedDirection] = useState<TooltipDirection>(direction)
@@ -217,14 +218,16 @@ export const Tooltip = React.forwardRef(
         'The `Tooltip` component expects a single React element that contains interactive content. Consider using a `<button>` or equivalent interactive element instead.',
       )
       // If the tooltip is used for labelling the interactive element, the trigger element or any of its children should not have aria-label
-      // Commenting out for now to test the icon button. We expect that the aria-labelledby will take precedence over the aria-label
+      const isIconBtnAnchor = triggerRef.current.getAttribute('data-anchor') === 'true'
+      setIconBtnAnchor(isIconBtnAnchor)
+      // commenting out for tests
       // if (type === 'label') {
       //   const hasAriaLabel = triggerRef.current.hasAttribute('aria-label')
       //   const hasAriaLabelInChildren = Array.from(triggerRef.current.childNodes).some(
       //     child => child instanceof HTMLElement && child.hasAttribute('aria-label'),
       //   )
       //   warning(
-      //     hasAriaLabel || hasAriaLabelInChildren,
+      //     (hasAriaLabel || hasAriaLabelInChildren) && !isIconBtnAnchor,
       //     'The label type `Tooltip` is going to be used here to label the trigger element. Please remove the aria-label from the trigger element.',
       //   )
       // }
@@ -262,7 +265,7 @@ export const Tooltip = React.forwardRef(
       return () => {
         tooltip.removeEventListener('toggle', positionSet)
       }
-    }, [tooltipElRef, triggerRef, direction, type])
+    }, [tooltipElRef, triggerRef, direction, type, iconBtnAnchor])
 
     return (
       <TooltipContext.Provider value={{tooltipId}}>
@@ -271,9 +274,9 @@ export const Tooltip = React.forwardRef(
             React.cloneElement(child as React.ReactElement<TriggerPropsType>, {
               ref: triggerRef,
               // If it is a type description, we use tooltip to describe the trigger
-              'aria-describedby': type === 'description' ? `tooltip-${tooltipId}` : child.props['aria-describedby'],
+              'aria-describedby': type === 'description' ? tooltipId : child.props['aria-describedby'],
               // If it is a label type, we use tooltip to label the trigger
-              'aria-labelledby': type === 'label' ? `tooltip-${tooltipId}` : child.props['aria-labelledby'],
+              'aria-labelledby': type === 'label' && !iconBtnAnchor ? tooltipId : child.props['aria-labelledby'],
               onBlur: (event: React.FocusEvent) => {
                 closeTooltip()
                 child.props.onBlur?.(event)
@@ -299,7 +302,7 @@ export const Tooltip = React.forwardRef(
             role={type === 'description' ? 'tooltip' : undefined}
             // stop AT from announcing the tooltip twice when it is a label type because it will be announced with "aria-labelledby"
             aria-hidden={type === 'label' ? true : undefined}
-            id={`tooltip-${tooltipId}`}
+            id={tooltipId}
             // mouse leave and enter on the tooltip itself is needed to keep the tooltip open when the mouse is over the tooltip
             onMouseEnter={openTooltip}
             onMouseLeave={closeTooltip}

From 0687c6b15b1526db28d2c7d2d1760e865c5fa226 Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Thu, 18 Jan 2024 13:57:51 +1000
Subject: [PATCH 12/16] rename the label prop to name - for testing...

---
 src/Button/IconButton.features.stories.tsx       | 8 ++++----
 src/Button/IconButton.tsx                        | 4 ++--
 src/Button/__tests__/Button.test.tsx             | 4 ++--
 src/Button/types.ts                              | 6 +++---
 src/__tests__/__snapshots__/Dialog.test.tsx.snap | 4 ++--
 src/drafts/Tooltip/__tests__/Tooltip.test.tsx    | 4 ++--
 src/internal/components/TextInputInnerAction.tsx | 1 +
 7 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/Button/IconButton.features.stories.tsx b/src/Button/IconButton.features.stories.tsx
index 5a17975062f..fba77430e91 100644
--- a/src/Button/IconButton.features.stories.tsx
+++ b/src/Button/IconButton.features.stories.tsx
@@ -8,22 +8,22 @@ export default {
   title: 'Components/IconButton/Features',
 }
 
-export const Primary = () => <IconButton icon={HeartIcon} variant="primary" label="Primary" />
+export const Primary = () => <IconButton icon={HeartIcon} variant="primary" name="Primary" />
 
 export const WithDescription = () => (
-  <IconButton icon={InboxIcon} label="Notifications" description="You have no unread notifications." />
+  <IconButton icon={InboxIcon} name="Notifications" description="You have no unread notifications." />
 )
 
 export const ExternalTooltip = () => (
   <Tooltip text="this is a supportive description for icon button" direction="se">
-    <IconButton icon={HeartIcon} label="HeartIcon" />
+    <IconButton icon={HeartIcon} name="HeartIcon" />
   </Tooltip>
 )
 
 export const AsMenuAnchor = () => (
   <ActionMenu>
     <ActionMenu.Anchor>
-      <IconButton icon={ChevronDownIcon} label="Open Menu" />
+      <IconButton icon={ChevronDownIcon} name="Open Menu" />
     </ActionMenu.Anchor>
 
     <ActionMenu.Overlay width="medium">
diff --git a/src/Button/IconButton.tsx b/src/Button/IconButton.tsx
index 38a64e5f604..09b2a4919d0 100644
--- a/src/Button/IconButton.tsx
+++ b/src/Button/IconButton.tsx
@@ -10,7 +10,7 @@ import {MenuContext} from '../ActionMenu/ActionMenu'
 
 const IconButton = forwardRef(
   (
-    {sx: sxProp = defaultSxProp, icon: Icon, disabled, 'aria-label': ariaLabel, label, description, ...props},
+    {sx: sxProp = defaultSxProp, icon: Icon, disabled, 'aria-label': ariaLabel, name, description, ...props},
     forwardedRef,
   ): JSX.Element => {
     let sxStyles = sxProp
@@ -28,7 +28,7 @@ const IconButton = forwardRef(
     // we need to know if the icon button is used as a menu anchor to render the tooltip and aria properties correctly.
     const isIconButtonAnchor = anchorRef !== undefined && anchorId !== undefined
     // aria-label is going to be deprecated in favor of label but for now we are supporting both.
-    const iconButtonLabel = label ?? ariaLabel
+    const iconButtonLabel = name ?? ariaLabel
     if (!tooltipId && container !== 'Tooltip' && !disabled) {
       return (
         // if description exists, we use tooltip for adding description to the icon button. Otherwise, we use tooltip for labelling the icon button.
diff --git a/src/Button/__tests__/Button.test.tsx b/src/Button/__tests__/Button.test.tsx
index 7df2b99c9ca..6e6f3459e6c 100644
--- a/src/Button/__tests__/Button.test.tsx
+++ b/src/Button/__tests__/Button.test.tsx
@@ -115,14 +115,14 @@ describe('Button', () => {
     const position = screen.getByText('content').compareDocumentPosition(screen.getByTestId('trailingVisual'))
     expect(position).toBe(Node.DOCUMENT_POSITION_FOLLOWING)
   })
-  it.only('should render the anchor icon button and correctly name the menu', async () => {
+  it('should render the anchor icon button and correctly name the menu', async () => {
     render(
       <ThemeProvider theme={theme}>
         <SSRProvider>
           <BaseStyles>
             <ActionMenu>
               <ActionMenu.Anchor>
-                <IconButton icon={SearchIcon} label="More actions" />
+                <IconButton icon={SearchIcon} name="More actions" />
               </ActionMenu.Anchor>
 
               <ActionMenu.Overlay width="medium">
diff --git a/src/Button/types.ts b/src/Button/types.ts
index 0aff474f5d4..46bf1e6079f 100644
--- a/src/Button/types.ts
+++ b/src/Button/types.ts
@@ -18,19 +18,19 @@ type ButtonA11yProps = (
   | {
       // @deprecated use label prop instead
       'aria-label': string
-      label?: undefined
+      name?: undefined
       'aria-labelledby'?: undefined
     }
   | {
       // @deprecated use label prop instead
       'aria-label'?: undefined
-      label: string
+      name: string
       'aria-labelledby'?: undefined
     }
   | {
       // @deprecated use label prop instead
       'aria-label'?: undefined
-      label?: undefined
+      name?: undefined
       'aria-labelledby': string
     }
 ) & {
diff --git a/src/__tests__/__snapshots__/Dialog.test.tsx.snap b/src/__tests__/__snapshots__/Dialog.test.tsx.snap
index 9bdc0582b52..a84fde6c3e1 100644
--- a/src/__tests__/__snapshots__/Dialog.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Dialog.test.tsx.snap
@@ -502,7 +502,7 @@ exports[`Dialog renders consistently 1`] = `
     tabIndex={-1}
   >
     <button
-      aria-labelledby="tooltip-:r0:"
+      aria-labelledby=":r0:"
       className="c1"
       data-block={null}
       data-component="IconButton"
@@ -541,7 +541,7 @@ exports[`Dialog renders consistently 1`] = `
       aria-hidden={true}
       className="c2"
       data-direction="s"
-      id="tooltip-:r0:"
+      id=":r0:"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
diff --git a/src/drafts/Tooltip/__tests__/Tooltip.test.tsx b/src/drafts/Tooltip/__tests__/Tooltip.test.tsx
index d7811844d54..4bfbce07885 100644
--- a/src/drafts/Tooltip/__tests__/Tooltip.test.tsx
+++ b/src/drafts/Tooltip/__tests__/Tooltip.test.tsx
@@ -108,14 +108,14 @@ describe('Tooltip', () => {
     consoleErrorSpy.mockRestore()
   })
   it('renders tooltip as default on an icon button', () => {
-    const {getByRole, getByText} = HTMLRender(<IconButton size="large" icon={HeartIcon} label="Heart" />)
+    const {getByRole, getByText} = HTMLRender(<IconButton size="large" icon={HeartIcon} name="Heart" />)
     const triggerEL = getByRole('button')
     const tooltipEl = getByText('Heart')
     expect(triggerEL).toHaveAttribute('aria-labelledby', tooltipEl.id)
   })
   it('renders description type tooltip as default on an icon button', () => {
     const {getByRole, getByText} = HTMLRender(
-      <IconButton size="large" icon={HeartIcon} label="Heart" description="Love is all around" />,
+      <IconButton size="large" icon={HeartIcon} name="Heart" description="Love is all around" />,
     )
     const triggerEL = getByRole('button')
     expect(triggerEL).toHaveAttribute('aria-label', 'Heart')
diff --git a/src/internal/components/TextInputInnerAction.tsx b/src/internal/components/TextInputInnerAction.tsx
index 2e634651069..911b503464c 100644
--- a/src/internal/components/TextInputInnerAction.tsx
+++ b/src/internal/components/TextInputInnerAction.tsx
@@ -94,6 +94,7 @@ const TextInputAction = forwardRef<HTMLButtonElement, TextInputActionProps>(
       <Box as="span" className="TextInput-action" marginLeft={1} marginRight={1} lineHeight="0">
         {icon && !children ? (
           <Tooltip direction={tooltipDirection} aria-label={ariaLabel}>
+            {/* @ts-ignore for now */}
             <IconButton
               variant={variant}
               type="button"

From 7e5dc8425818e3924743969ea6e1771a96b5d12b Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Thu, 18 Jan 2024 14:13:30 +1000
Subject: [PATCH 13/16] remove label/name prop and just keep going with the
 existing aria-label

---
 src/Button/IconButton.features.stories.tsx    | 8 ++++----
 src/Button/IconButton.tsx                     | 4 ++--
 src/Button/__tests__/Button.test.tsx          | 2 +-
 src/Button/types.ts                           | 8 --------
 src/drafts/Tooltip/Tooltip.tsx                | 2 +-
 src/drafts/Tooltip/__tests__/Tooltip.test.tsx | 4 ++--
 6 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/src/Button/IconButton.features.stories.tsx b/src/Button/IconButton.features.stories.tsx
index fba77430e91..5e7c4a0c6a1 100644
--- a/src/Button/IconButton.features.stories.tsx
+++ b/src/Button/IconButton.features.stories.tsx
@@ -8,22 +8,22 @@ export default {
   title: 'Components/IconButton/Features',
 }
 
-export const Primary = () => <IconButton icon={HeartIcon} variant="primary" name="Primary" />
+export const Primary = () => <IconButton icon={HeartIcon} variant="primary" aria-label="Primary" />
 
 export const WithDescription = () => (
-  <IconButton icon={InboxIcon} name="Notifications" description="You have no unread notifications." />
+  <IconButton icon={InboxIcon} aria-label="Notifications" description="You have no unread notifications." />
 )
 
 export const ExternalTooltip = () => (
   <Tooltip text="this is a supportive description for icon button" direction="se">
-    <IconButton icon={HeartIcon} name="HeartIcon" />
+    <IconButton icon={HeartIcon} aria-label="HeartIcon" />
   </Tooltip>
 )
 
 export const AsMenuAnchor = () => (
   <ActionMenu>
     <ActionMenu.Anchor>
-      <IconButton icon={ChevronDownIcon} name="Open Menu" />
+      <IconButton icon={ChevronDownIcon} aria-label="Open Menu" />
     </ActionMenu.Anchor>
 
     <ActionMenu.Overlay width="medium">
diff --git a/src/Button/IconButton.tsx b/src/Button/IconButton.tsx
index 09b2a4919d0..231eb3b6c96 100644
--- a/src/Button/IconButton.tsx
+++ b/src/Button/IconButton.tsx
@@ -10,7 +10,7 @@ import {MenuContext} from '../ActionMenu/ActionMenu'
 
 const IconButton = forwardRef(
   (
-    {sx: sxProp = defaultSxProp, icon: Icon, disabled, 'aria-label': ariaLabel, name, description, ...props},
+    {sx: sxProp = defaultSxProp, icon: Icon, disabled, 'aria-label': ariaLabel, description, ...props},
     forwardedRef,
   ): JSX.Element => {
     let sxStyles = sxProp
@@ -28,7 +28,7 @@ const IconButton = forwardRef(
     // we need to know if the icon button is used as a menu anchor to render the tooltip and aria properties correctly.
     const isIconButtonAnchor = anchorRef !== undefined && anchorId !== undefined
     // aria-label is going to be deprecated in favor of label but for now we are supporting both.
-    const iconButtonLabel = name ?? ariaLabel
+    const iconButtonLabel = ariaLabel
     if (!tooltipId && container !== 'Tooltip' && !disabled) {
       return (
         // if description exists, we use tooltip for adding description to the icon button. Otherwise, we use tooltip for labelling the icon button.
diff --git a/src/Button/__tests__/Button.test.tsx b/src/Button/__tests__/Button.test.tsx
index 6e6f3459e6c..30c415e4084 100644
--- a/src/Button/__tests__/Button.test.tsx
+++ b/src/Button/__tests__/Button.test.tsx
@@ -122,7 +122,7 @@ describe('Button', () => {
           <BaseStyles>
             <ActionMenu>
               <ActionMenu.Anchor>
-                <IconButton icon={SearchIcon} name="More actions" />
+                <IconButton icon={SearchIcon} aria-label="More actions" />
               </ActionMenu.Anchor>
 
               <ActionMenu.Overlay width="medium">
diff --git a/src/Button/types.ts b/src/Button/types.ts
index 46bf1e6079f..5fdb8766c64 100644
--- a/src/Button/types.ts
+++ b/src/Button/types.ts
@@ -18,19 +18,11 @@ type ButtonA11yProps = (
   | {
       // @deprecated use label prop instead
       'aria-label': string
-      name?: undefined
       'aria-labelledby'?: undefined
     }
   | {
       // @deprecated use label prop instead
       'aria-label'?: undefined
-      name: string
-      'aria-labelledby'?: undefined
-    }
-  | {
-      // @deprecated use label prop instead
-      'aria-label'?: undefined
-      name?: undefined
       'aria-labelledby': string
     }
 ) & {
diff --git a/src/drafts/Tooltip/Tooltip.tsx b/src/drafts/Tooltip/Tooltip.tsx
index 6b2348d83e4..691db05d19b 100644
--- a/src/drafts/Tooltip/Tooltip.tsx
+++ b/src/drafts/Tooltip/Tooltip.tsx
@@ -2,7 +2,7 @@ import React, {Children, useEffect, useRef, useState} from 'react'
 import sx, {SxProp} from '../../sx'
 import {useId, useProvidedRefOrCreate} from '../../hooks'
 import {invariant} from '../../utils/invariant'
-import {warning} from '../../utils/warning'
+// import {warning} from '../../utils/warning'
 import styled from 'styled-components'
 import {get} from '../../constants'
 import {ComponentProps} from '../../utils/types'
diff --git a/src/drafts/Tooltip/__tests__/Tooltip.test.tsx b/src/drafts/Tooltip/__tests__/Tooltip.test.tsx
index 4bfbce07885..a2962a8d192 100644
--- a/src/drafts/Tooltip/__tests__/Tooltip.test.tsx
+++ b/src/drafts/Tooltip/__tests__/Tooltip.test.tsx
@@ -108,14 +108,14 @@ describe('Tooltip', () => {
     consoleErrorSpy.mockRestore()
   })
   it('renders tooltip as default on an icon button', () => {
-    const {getByRole, getByText} = HTMLRender(<IconButton size="large" icon={HeartIcon} name="Heart" />)
+    const {getByRole, getByText} = HTMLRender(<IconButton size="large" icon={HeartIcon} aria-label="Heart" />)
     const triggerEL = getByRole('button')
     const tooltipEl = getByText('Heart')
     expect(triggerEL).toHaveAttribute('aria-labelledby', tooltipEl.id)
   })
   it('renders description type tooltip as default on an icon button', () => {
     const {getByRole, getByText} = HTMLRender(
-      <IconButton size="large" icon={HeartIcon} name="Heart" description="Love is all around" />,
+      <IconButton size="large" icon={HeartIcon} aria-label="Heart" description="Love is all around" />,
     )
     const triggerEL = getByRole('button')
     expect(triggerEL).toHaveAttribute('aria-label', 'Heart')

From f5d9a472056c030cccde0566c050aa8029c6d242 Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Fri, 19 Jan 2024 18:39:56 +1000
Subject: [PATCH 14/16] add a story

---
 src/Button/IconButton.features.stories.tsx | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/Button/IconButton.features.stories.tsx b/src/Button/IconButton.features.stories.tsx
index 5e7c4a0c6a1..4b8d582e0f3 100644
--- a/src/Button/IconButton.features.stories.tsx
+++ b/src/Button/IconButton.features.stories.tsx
@@ -50,6 +50,21 @@ export const AsMenuAnchor = () => (
   </ActionMenu>
 )
 
+export const HasExternalTooltip = () => (
+  <Tooltip
+    text="Notifications"
+    direction="e"
+    className="custom-class"
+    sx={
+      {
+        /* custom styling */
+      }
+    }
+  >
+    <IconButton icon={InboxIcon} aria-label="Notifications" />
+  </Tooltip>
+)
+
 export const Danger = () => <IconButton icon={HeartIcon} variant="danger" aria-label="Danger" />
 
 export const Invisible = () => <IconButton icon={HeartIcon} variant="invisible" aria-label="Invisible" />

From 03a0ac0135e171a6b2e7144de498835ba50089f7 Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Wed, 31 Jan 2024 15:35:06 +1000
Subject: [PATCH 15/16] fix merge issues

---
 .../__snapshots__/TextInput.test.tsx.snap     | 6968 +++++++++++++++++
 .../__snapshots__/Button.test.tsx.snap        |  367 +
 2 files changed, 7335 insertions(+)
 create mode 100644 src/__tests__/__snapshots__/TextInput.test.tsx.snap
 create mode 100644 src/__tests__/deprecated/__snapshots__/Button.test.tsx.snap

diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap
new file mode 100644
index 00000000000..975dadffff0
--- /dev/null
+++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -0,0 +1,6968 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TextInput renders 1`] = `
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
+  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;
+  overflow: hidden;
+}
+
+.c0 input,
+.c0 textarea {
+  cursor: text;
+}
+
+.c0 select {
+  cursor: pointer;
+}
+
+.c0::-webkit-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::-moz-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:-ms-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c1 > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+<span
+  aria-busy={false}
+  className="c0 c1 TextInput-wrapper"
+  onClick={[Function]}
+>
+  <input
+    className="c2"
+    data-component="input"
+    name="zipcode"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    type="text"
+  />
+</span>
+`;
+
+exports[`TextInput renders block 1`] = `
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
+  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;
+  overflow: hidden;
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c0 input,
+.c0 textarea {
+  cursor: text;
+}
+
+.c0 select {
+  cursor: pointer;
+}
+
+.c0::-webkit-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::-moz-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:-ms-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c1 > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+<span
+  aria-busy={false}
+  className="c0 c1 TextInput-wrapper"
+  onClick={[Function]}
+>
+  <input
+    className="c2"
+    data-component="input"
+    name="zipcode"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    type="text"
+  />
+</span>
+`;
+
+exports[`TextInput renders contrast 1`] = `
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
+  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;
+  overflow: hidden;
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
+}
+
+.c0 input,
+.c0 textarea {
+  cursor: text;
+}
+
+.c0 select {
+  cursor: pointer;
+}
+
+.c0::-webkit-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::-moz-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:-ms-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c1 > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+<span
+  aria-busy={false}
+  className="c0 c1 TextInput-wrapper"
+  onClick={[Function]}
+>
+  <input
+    className="c2"
+    data-component="input"
+    name="zipcode"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    type="text"
+  />
+</span>
+`;
+
+exports[`TextInput renders error 1`] = `
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
+  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;
+  overflow: hidden;
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+}
+
+.c0 input,
+.c0 textarea {
+  cursor: text;
+}
+
+.c0 select {
+  cursor: pointer;
+}
+
+.c0::-webkit-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::-moz-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:-ms-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c1 > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+<span
+  aria-busy={false}
+  className="c0 c1 TextInput-wrapper"
+  onClick={[Function]}
+>
+  <input
+    className="c2"
+    data-component="input"
+    name="zipcode"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    type="text"
+  />
+</span>
+`;
+
+exports[`TextInput renders large 1`] = `
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
+  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;
+  overflow: hidden;
+  --inner-action-size: 28px;
+  padding-left: 8px;
+  padding-right: 8px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  height: 40px;
+}
+
+.c0 input,
+.c0 textarea {
+  cursor: text;
+}
+
+.c0 select {
+  cursor: pointer;
+}
+
+.c0::-webkit-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::-moz-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:-ms-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c1 > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+<span
+  aria-busy={false}
+  className="c0 c1 TextInput-wrapper"
+  onClick={[Function]}
+  size="large"
+>
+  <input
+    className="c2"
+    data-component="input"
+    name="zipcode"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    type="text"
+  />
+</span>
+`;
+
+exports[`TextInput renders leadingVisual 1`] = `
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
+  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;
+  overflow: hidden;
+}
+
+.c0 input,
+.c0 textarea {
+  cursor: text;
+}
+
+.c0 select {
+  cursor: pointer;
+}
+
+.c0::-webkit-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::-moz-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:-ms-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 12px;
+  padding-right: 0;
+}
+
+.c1 > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-left: 0;
+  padding-right: 12px;
+}
+
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+<span
+  aria-busy={false}
+  className="c0 c1 TextInput-wrapper"
+  onClick={[Function]}
+>
+  <span
+    className="TextInput-icon"
+  >
+    <svg
+      aria-hidden="true"
+      className="octicon octicon-search"
+      fill="currentColor"
+      focusable="false"
+      height={16}
+      role="img"
+      style={
+        {
+          "display": "inline-block",
+          "overflow": "visible",
+          "userSelect": "none",
+          "verticalAlign": "text-bottom",
+        }
+      }
+      viewBox="0 0 16 16"
+      width={16}
+    >
+      <path
+        d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"
+      />
+    </svg>
+  </span>
+  <input
+    className="c2"
+    data-component="input"
+    name="search"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    placeholder="Search"
+    type="text"
+  />
+</span>
+`;
+
+exports[`TextInput renders leadingVisual 2`] = `
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
+  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;
+  overflow: hidden;
+}
+
+.c0 input,
+.c0 textarea {
+  cursor: text;
+}
+
+.c0 select {
+  cursor: pointer;
+}
+
+.c0::-webkit-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::-moz-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:-ms-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 12px;
+  padding-right: 0;
+}
+
+.c1 > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-left: 0;
+  padding-right: 12px;
+}
+
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+<span
+  aria-busy={false}
+  className="c0 c1 TextInput-wrapper"
+  onClick={[Function]}
+>
+  <span
+    className="TextInput-icon"
+  >
+    <svg
+      aria-hidden="true"
+      className="octicon octicon-search"
+      fill="currentColor"
+      focusable="false"
+      height={16}
+      role="img"
+      style={
+        {
+          "display": "inline-block",
+          "overflow": "visible",
+          "userSelect": "none",
+          "verticalAlign": "text-bottom",
+        }
+      }
+      viewBox="0 0 16 16"
+      width={16}
+    >
+      <path
+        d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"
+      />
+    </svg>
+  </span>
+  <input
+    className="c2"
+    data-component="input"
+    name="search"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    placeholder="Search"
+    type="text"
+  />
+</span>
+`;
+
+exports[`TextInput renders leadingVisual 3`] = `
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
+  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;
+  overflow: hidden;
+}
+
+.c0 input,
+.c0 textarea {
+  cursor: text;
+}
+
+.c0 select {
+  cursor: pointer;
+}
+
+.c0::-webkit-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::-moz-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:-ms-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 12px;
+  padding-right: 0;
+}
+
+.c1 > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-left: 0;
+  padding-right: 12px;
+}
+
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+<span
+  aria-busy={false}
+  className="c0 c1 TextInput-wrapper"
+  onClick={[Function]}
+>
+  <span
+    className="TextInput-icon"
+  >
+    <div>
+      Trailing
+    </div>
+  </span>
+  <input
+    className="c2"
+    data-component="input"
+    name="search"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    placeholder="Search"
+    type="text"
+  />
+</span>
+`;
+
+exports[`TextInput renders leadingVisual 4`] = `
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
+  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;
+  overflow: hidden;
+}
+
+.c0 input,
+.c0 textarea {
+  cursor: text;
+}
+
+.c0 select {
+  cursor: pointer;
+}
+
+.c0::-webkit-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::-moz-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:-ms-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 12px;
+  padding-right: 0;
+}
+
+.c1 > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-left: 0;
+  padding-right: 12px;
+}
+
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+<span
+  aria-busy={false}
+  className="c0 c1 TextInput-wrapper"
+  onClick={[Function]}
+>
+  <span
+    className="TextInput-icon"
+  >
+    <div>
+      Trailing
+    </div>
+  </span>
+  <input
+    className="c2"
+    data-component="input"
+    name="search"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    placeholder="Search"
+    type="text"
+  />
+</span>
+`;
+
+exports[`TextInput renders monospace 1`] = `
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
+  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;
+  overflow: hidden;
+  font-family: var(--fontStack-monospace),SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
+}
+
+.c0 input,
+.c0 textarea {
+  cursor: text;
+}
+
+.c0 select {
+  cursor: pointer;
+}
+
+.c0::-webkit-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::-moz-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:-ms-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c1 > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+<span
+  aria-busy={false}
+  className="c0 c1 TextInput-wrapper"
+  onClick={[Function]}
+>
+  <input
+    className="c2"
+    data-component="input"
+    name="zipcode"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    type="text"
+  />
+</span>
+`;
+
+exports[`TextInput renders placeholder 1`] = `
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
+  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;
+  overflow: hidden;
+}
+
+.c0 input,
+.c0 textarea {
+  cursor: text;
+}
+
+.c0 select {
+  cursor: pointer;
+}
+
+.c0::-webkit-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::-moz-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:-ms-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c1 > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+<span
+  aria-busy={false}
+  className="c0 c1 TextInput-wrapper"
+  onClick={[Function]}
+>
+  <input
+    className="c2"
+    data-component="input"
+    name="zipcode"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    placeholder="560076"
+    type="text"
+  />
+</span>
+`;
+
+exports[`TextInput renders small 1`] = `
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
+  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;
+  overflow: hidden;
+  --inner-action-size: 20px;
+  min-height: 28px;
+  padding-left: 8px;
+  padding-right: 8px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  font-size: 12px;
+  line-height: 20px;
+}
+
+.c0 input,
+.c0 textarea {
+  cursor: text;
+}
+
+.c0 select {
+  cursor: pointer;
+}
+
+.c0::-webkit-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::-moz-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:-ms-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c1 > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+<span
+  aria-busy={false}
+  className="c0 c1 TextInput-wrapper"
+  onClick={[Function]}
+  size="small"
+>
+  <input
+    className="c2"
+    data-component="input"
+    name="zipcode"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    type="text"
+  />
+</span>
+`;
+
+exports[`TextInput renders trailingAction icon button 1`] = `
+.c3 {
+  margin-left: 4px;
+  margin-right: 4px;
+  line-height: 0;
+}
+
+.c5 {
+  border-radius: 6px;
+  border: 1px solid;
+  border-color: transparent;
+  font-family: inherit;
+  font-weight: 500;
+  font-size: 14px;
+  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;
+  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-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  height: 32px;
+  padding: 0 12px;
+  gap: 8px;
+  min-width: -webkit-max-content;
+  min-width: -moz-max-content;
+  min-width: max-content;
+  -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1);
+  transition: 80ms cubic-bezier(0.65,0,0.35,1);
+  -webkit-transition-property: color,fill,background-color,border-color;
+  transition-property: color,fill,background-color,border-color;
+  color: var(--button-default-fgColor-rest,var(--color-btn-text,#24292f));
+  background-color: transparent;
+  box-shadow: none;
+}
+
+.c5:focus:not(:disabled) {
+  box-shadow: none;
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -2px;
+}
+
+.c5:focus:not(:disabled):not(:focus-visible) {
+  outline: solid 1px transparent;
+}
+
+.c5:focus-visible:not(:disabled) {
+  box-shadow: none;
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -2px;
+}
+
+.c5[href] {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c5[href]:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c5:hover {
+  -webkit-transition-duration: 80ms;
+  transition-duration: 80ms;
+}
+
+.c5:active {
+  -webkit-transition: none;
+  transition: none;
+}
+
+.c5[data-inactive] {
+  cursor: auto;
+}
+
+.c5:disabled {
+  cursor: not-allowed;
+  box-shadow: none;
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+}
+
+.c5:disabled [data-component=ButtonCounter],
+.c5:disabled [data-component="leadingVisual"],
+.c5:disabled [data-component="trailingAction"] {
+  color: inherit;
+}
+
+.c5 [data-component=ButtonCounter] {
+  font-size: 12px;
+}
+
+.c5[data-component=IconButton] {
+  display: inline-grid;
+  padding: unset;
+  place-content: center;
+  width: 32px;
+  min-width: unset;
+}
+
+.c5[data-size="small"] {
+  padding: 0 8px;
+  height: 28px;
+  gap: 4px;
+  font-size: 12px;
+}
+
+.c5[data-size="small"] [data-component="text"] {
+  line-height: calc(20 / 12);
+}
+
+.c5[data-size="small"] [data-component=ButtonCounter] {
+  font-size: 12px;
+}
+
+.c5[data-size="small"] [data-component="buttonContent"] > :not(:last-child) {
+  margin-right: 4px;
+}
+
+.c5[data-size="small"][data-component=IconButton] {
+  width: 28px;
+  padding: unset;
+}
+
+.c5[data-size="large"] {
+  padding: 0 16px;
+  height: 40px;
+  gap: 8px;
+}
+
+.c5[data-size="large"] [data-component="buttonContent"] > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c5[data-size="large"][data-component=IconButton] {
+  width: 40px;
+  padding: unset;
+}
+
+.c5[data-block="block"] {
+  width: 100%;
+}
+
+.c5[data-inactive]:not([disabled]) {
+  background-color: var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));
+  border-color: var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));
+  color: var(--button-inactive-fgColor,var(--button-inactive-fgColor-rest,var(--color-btn-inactive-text,#57606a)));
+}
+
+.c5[data-inactive]:not([disabled]):focus-visible {
+  box-shadow: none;
+}
+
+.c5 [data-component="leadingVisual"] {
+  grid-area: leadingVisual;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+}
+
+.c5 [data-component="text"] {
+  grid-area: text;
+  line-height: calc(20/14);
+  white-space: nowrap;
+}
+
+.c5 [data-component="trailingVisual"] {
+  grid-area: trailingVisual;
+}
+
+.c5 [data-component="trailingAction"] {
+  margin-right: -4px;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+}
+
+.c5 [data-component="buttonContent"] {
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  display: grid;
+  grid-template-areas: "leadingVisual text trailingVisual";
+  grid-template-columns: min-content minmax(0,auto) min-content;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+}
+
+.c5 [data-component="buttonContent"] > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c5:hover:not([disabled]) {
+  background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
+}
+
+.c5:active:not([disabled]) {
+  background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
+}
+
+.c5[aria-expanded=true] {
+  background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
+}
+
+.c5[data-component="IconButton"][data-no-visuals] {
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+}
+
+.c5[data-no-visuals] {
+  color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+}
+
+.c5:has([data-component="ButtonCounter"]) {
+  color: var(--button-default-fgColor-rest,var(--color-btn-text,#24292f));
+}
+
+.c5:disabled[data-no-visuals] {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+}
+
+.c5:disabled[data-no-visuals] [data-component=ButtonCounter] {
+  color: inherit;
+}
+
+.c5[data-size="small"][data-no-visuals] {
+  padding-top: 2px;
+  padding-right: 4px;
+  padding-bottom: 2px;
+  padding-left: 4px;
+  position: relative;
+}
+
+.c5[data-size="small"][data-no-visuals][data-component="IconButton"] {
+  width: var(--inner-action-size);
+  height: var(--inner-action-size);
+}
+
+.c4 {
+  position: relative;
+  display: inline-block;
+}
+
+.c4::before {
+  position: absolute;
+  z-index: 1000001;
+  display: none;
+  width: 0px;
+  height: 0px;
+  color: var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f));
+  pointer-events: none;
+  content: '';
+  border: 6px solid transparent;
+  opacity: 0;
+}
+
+.c4::after {
+  position: absolute;
+  z-index: 1000000;
+  display: none;
+  padding: 0.5em 0.75em;
+  font: normal normal 11px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
+  -webkit-font-smoothing: subpixel-antialiased;
+  color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: none;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  word-wrap: break-word;
+  white-space: pre;
+  pointer-events: none;
+  content: attr(aria-label);
+  background: var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f));
+  border-radius: 3px;
+  opacity: 0;
+}
+
+.c4:hover::before,
+.c4:active::before,
+.c4:focus::before,
+.c4:focus-within::before,
+.c4:hover::after,
+.c4:active::after,
+.c4:focus::after,
+.c4:focus-within::after {
+  display: inline-block;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  -webkit-animation-name: tooltip-appear;
+  animation-name: tooltip-appear;
+  -webkit-animation-duration: 0.1s;
+  animation-duration: 0.1s;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  -webkit-animation-timing-function: ease-in;
+  animation-timing-function: ease-in;
+  -webkit-animation-delay: 0.4s;
+  animation-delay: 0.4s;
+}
+
+.c4.tooltipped-no-delay:hover::before,
+.c4.tooltipped-no-delay:active::before,
+.c4.tooltipped-no-delay:focus::before,
+.c4.tooltipped-no-delay:focus-within::before,
+.c4.tooltipped-no-delay:hover::after,
+.c4.tooltipped-no-delay:active::after,
+.c4.tooltipped-no-delay:focus::after,
+.c4.tooltipped-no-delay:focus-within::after {
+  -webkit-animation-delay: 0s;
+  animation-delay: 0s;
+}
+
+.c4.tooltipped-multiline:hover::after,
+.c4.tooltipped-multiline:active::after,
+.c4.tooltipped-multiline:focus::after,
+.c4.tooltipped-multiline:focus-within::after {
+  display: table-cell;
+}
+
+.c4.tooltipped-s::after,
+.c4.tooltipped-se::after,
+.c4.tooltipped-sw::after {
+  top: 100%;
+  right: 50%;
+  margin-top: 6px;
+}
+
+.c4.tooltipped-s::before,
+.c4.tooltipped-se::before,
+.c4.tooltipped-sw::before {
+  top: auto;
+  right: 50%;
+  bottom: -7px;
+  margin-right: -6px;
+  border-bottom-color: var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f));
+}
+
+.c4.tooltipped-se::after {
+  right: auto;
+  left: 50%;
+  margin-left: -16px;
+}
+
+.c4.tooltipped-sw::after {
+  margin-right: -16px;
+}
+
+.c4.tooltipped-n::after,
+.c4.tooltipped-ne::after,
+.c4.tooltipped-nw::after {
+  right: 50%;
+  bottom: 100%;
+  margin-bottom: 6px;
+}
+
+.c4.tooltipped-n::before,
+.c4.tooltipped-ne::before,
+.c4.tooltipped-nw::before {
+  top: -7px;
+  right: 50%;
+  bottom: auto;
+  margin-right: -6px;
+  border-top-color: var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f));
+}
+
+.c4.tooltipped-ne::after {
+  right: auto;
+  left: 50%;
+  margin-left: -16px;
+}
+
+.c4.tooltipped-nw::after {
+  margin-right: -16px;
+}
+
+.c4.tooltipped-s::after,
+.c4.tooltipped-n::after {
+  -webkit-transform: translateX(50%);
+  -ms-transform: translateX(50%);
+  transform: translateX(50%);
+}
+
+.c4.tooltipped-w::after {
+  right: 100%;
+  bottom: 50%;
+  margin-right: 6px;
+  -webkit-transform: translateY(50%);
+  -ms-transform: translateY(50%);
+  transform: translateY(50%);
+}
+
+.c4.tooltipped-w::before {
+  top: 50%;
+  bottom: 50%;
+  left: -7px;
+  margin-top: -6px;
+  border-left-color: var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f));
+}
+
+.c4.tooltipped-e::after {
+  bottom: 50%;
+  left: 100%;
+  margin-left: 6px;
+  -webkit-transform: translateY(50%);
+  -ms-transform: translateY(50%);
+  transform: translateY(50%);
+}
+
+.c4.tooltipped-e::before {
+  top: 50%;
+  right: -7px;
+  bottom: 50%;
+  margin-top: -6px;
+  border-right-color: var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f));
+}
+
+.c4.tooltipped-multiline::after {
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+  max-width: 250px;
+  word-wrap: break-word;
+  white-space: pre-line;
+  border-collapse: separate;
+}
+
+.c4.tooltipped-multiline.tooltipped-s::after,
+.c4.tooltipped-multiline.tooltipped-n::after {
+  right: auto;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  transform: translateX(-50%);
+}
+
+.c4.tooltipped-multiline.tooltipped-w::after,
+.c4.tooltipped-multiline.tooltipped-e::after {
+  right: 100%;
+}
+
+.c4.tooltipped-align-right-2::after {
+  right: 0;
+  margin-right: 0;
+}
+
+.c4.tooltipped-align-right-2::before {
+  right: 15px;
+}
+
+.c4.tooltipped-align-left-2::after {
+  left: 0;
+  margin-left: 0;
+}
+
+.c4.tooltipped-align-left-2::before {
+  left: 10px;
+}
+
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
+  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;
+  overflow: hidden;
+}
+
+.c0 input,
+.c0 textarea {
+  cursor: text;
+}
+
+.c0 select {
+  cursor: pointer;
+}
+
+.c0::-webkit-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::-moz-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:-ms-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c1 > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 0;
+}
+
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
+@media (forced-colors:active) {
+  .c5:focus {
+    outline: solid 1px transparent;
+  }
+}
+
+@media (pointer:coarse) {
+  .c5[data-size="small"][data-no-visuals]:after {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    -webkit-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+    top: 50%;
+    min-height: 44px;
+  }
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+<span
+  aria-busy={false}
+  className="c0 c1 TextInput-wrapper"
+  onClick={[Function]}
+>
+  <input
+    className="c2"
+    data-component="input"
+    name="search"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    placeholder="Search"
+    type="text"
+  />
+  <span
+    className="c3 TextInput-action"
+  >
+    <span
+      aria-label="Icon label"
+      className="c4 tooltipped-n"
+      role="tooltip"
+    >
+      <button
+        aria-label="Icon label"
+        className="c5"
+        data-block={null}
+        data-component="IconButton"
+        data-no-visuals={true}
+        data-size="small"
+        onClick={[MockFunction]}
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-search"
+          fill="currentColor"
+          focusable="false"
+          height={16}
+          role="img"
+          style={
+            {
+              "display": "inline-block",
+              "overflow": "visible",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 16 16"
+          width={16}
+        >
+          <path
+            d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"
+          />
+        </svg>
+      </button>
+    </span>
+  </span>
+</span>
+`;
+
+exports[`TextInput renders trailingAction text button 1`] = `
+.c3 {
+  margin-left: 4px;
+  margin-right: 4px;
+  line-height: 0;
+}
+
+.c5 {
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.c4 {
+  border-radius: 6px;
+  border: 1px solid;
+  border-color: transparent;
+  font-family: inherit;
+  font-weight: 500;
+  font-size: 14px;
+  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;
+  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-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  height: 32px;
+  padding: 0 12px;
+  gap: 8px;
+  min-width: -webkit-max-content;
+  min-width: -moz-max-content;
+  min-width: max-content;
+  -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1);
+  transition: 80ms cubic-bezier(0.65,0,0.35,1);
+  -webkit-transition-property: color,fill,background-color,border-color;
+  transition-property: color,fill,background-color,border-color;
+  color: var(--button-default-fgColor-rest,var(--color-btn-text,#24292f));
+  background-color: transparent;
+  box-shadow: none;
+}
+
+.c4:focus:not(:disabled) {
+  box-shadow: none;
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -2px;
+}
+
+.c4:focus:not(:disabled):not(:focus-visible) {
+  outline: solid 1px transparent;
+}
+
+.c4:focus-visible:not(:disabled) {
+  box-shadow: none;
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -2px;
+}
+
+.c4[href] {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c4[href]:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c4:hover {
+  -webkit-transition-duration: 80ms;
+  transition-duration: 80ms;
+}
+
+.c4:active {
+  -webkit-transition: none;
+  transition: none;
+}
+
+.c4[data-inactive] {
+  cursor: auto;
+}
+
+.c4:disabled {
+  cursor: not-allowed;
+  box-shadow: none;
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+}
+
+.c4:disabled [data-component=ButtonCounter],
+.c4:disabled [data-component="leadingVisual"],
+.c4:disabled [data-component="trailingAction"] {
+  color: inherit;
+}
+
+.c4 [data-component=ButtonCounter] {
+  font-size: 12px;
+}
+
+.c4[data-component=IconButton] {
+  display: inline-grid;
+  padding: unset;
+  place-content: center;
+  width: 32px;
+  min-width: unset;
+}
+
+.c4[data-size="small"] {
+  padding: 0 8px;
+  height: 28px;
+  gap: 4px;
+  font-size: 12px;
+}
+
+.c4[data-size="small"] [data-component="text"] {
+  line-height: calc(20 / 12);
+}
+
+.c4[data-size="small"] [data-component=ButtonCounter] {
+  font-size: 12px;
+}
+
+.c4[data-size="small"] [data-component="buttonContent"] > :not(:last-child) {
+  margin-right: 4px;
+}
+
+.c4[data-size="small"][data-component=IconButton] {
+  width: 28px;
+  padding: unset;
+}
+
+.c4[data-size="large"] {
+  padding: 0 16px;
+  height: 40px;
+  gap: 8px;
+}
+
+.c4[data-size="large"] [data-component="buttonContent"] > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c4[data-size="large"][data-component=IconButton] {
+  width: 40px;
+  padding: unset;
+}
+
+.c4[data-block="block"] {
+  width: 100%;
+}
+
+.c4[data-inactive]:not([disabled]) {
+  background-color: var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));
+  border-color: var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));
+  color: var(--button-inactive-fgColor,var(--button-inactive-fgColor-rest,var(--color-btn-inactive-text,#57606a)));
+}
+
+.c4[data-inactive]:not([disabled]):focus-visible {
+  box-shadow: none;
+}
+
+.c4 [data-component="leadingVisual"] {
+  grid-area: leadingVisual;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+}
+
+.c4 [data-component="text"] {
+  grid-area: text;
+  line-height: calc(20/14);
+  white-space: nowrap;
+}
+
+.c4 [data-component="trailingVisual"] {
+  grid-area: trailingVisual;
+}
+
+.c4 [data-component="trailingAction"] {
+  margin-right: -4px;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+}
+
+.c4 [data-component="buttonContent"] {
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  display: grid;
+  grid-template-areas: "leadingVisual text trailingVisual";
+  grid-template-columns: min-content minmax(0,auto) min-content;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+}
+
+.c4 [data-component="buttonContent"] > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c4:hover:not([disabled]) {
+  background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
+}
+
+.c4:active:not([disabled]) {
+  background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
+}
+
+.c4[aria-expanded=true] {
+  background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
+}
+
+.c4[data-component="IconButton"][data-no-visuals] {
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+}
+
+.c4[data-no-visuals] {
+  color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  padding-top: 2px;
+  padding-right: 4px;
+  padding-bottom: 2px;
+  padding-left: 4px;
+  position: relative;
+}
+
+.c4[data-no-visuals][data-component="IconButton"] {
+  width: var(--inner-action-size);
+  height: var(--inner-action-size);
+}
+
+.c4:has([data-component="ButtonCounter"]) {
+  color: var(--button-default-fgColor-rest,var(--color-btn-text,#24292f));
+}
+
+.c4:disabled[data-no-visuals] {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+}
+
+.c4:disabled[data-no-visuals] [data-component=ButtonCounter] {
+  color: inherit;
+}
+
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
+  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;
+  overflow: hidden;
+}
+
+.c0 input,
+.c0 textarea {
+  cursor: text;
+}
+
+.c0 select {
+  cursor: pointer;
+}
+
+.c0::-webkit-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::-moz-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:-ms-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c1 > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 0;
+}
+
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
+@media (forced-colors:active) {
+  .c4:focus {
+    outline: solid 1px transparent;
+  }
+}
+
+@media (pointer:coarse) {
+  .c4[data-no-visuals]:after {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    -webkit-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+    top: 50%;
+    min-height: 44px;
+  }
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+<span
+  aria-busy={false}
+  className="c0 c1 TextInput-wrapper"
+  onClick={[Function]}
+>
+  <input
+    className="c2"
+    data-component="input"
+    name="search"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    placeholder="Search"
+    type="text"
+  />
+  <span
+    className="c3 TextInput-action"
+  >
+    <button
+      className="c4"
+      data-block={null}
+      data-no-visuals={true}
+      onClick={[MockFunction]}
+      style={{}}
+      type="button"
+    >
+      <span
+        className="c5"
+        data-component="buttonContent"
+      >
+        <span
+          data-component="text"
+        >
+          Clear
+        </span>
+      </span>
+    </button>
+  </span>
+</span>
+`;
+
+exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
+.c3 {
+  margin-left: 4px;
+  margin-right: 4px;
+  line-height: 0;
+}
+
+.c6 {
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.c5 {
+  border-radius: 6px;
+  border: 1px solid;
+  border-color: transparent;
+  font-family: inherit;
+  font-weight: 500;
+  font-size: 14px;
+  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;
+  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-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  height: 32px;
+  padding: 0 12px;
+  gap: 8px;
+  min-width: -webkit-max-content;
+  min-width: -moz-max-content;
+  min-width: max-content;
+  -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1);
+  transition: 80ms cubic-bezier(0.65,0,0.35,1);
+  -webkit-transition-property: color,fill,background-color,border-color;
+  transition-property: color,fill,background-color,border-color;
+  color: var(--button-default-fgColor-rest,var(--color-btn-text,#24292f));
+  background-color: transparent;
+  box-shadow: none;
+}
+
+.c5:focus:not(:disabled) {
+  box-shadow: none;
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -2px;
+}
+
+.c5:focus:not(:disabled):not(:focus-visible) {
+  outline: solid 1px transparent;
+}
+
+.c5:focus-visible:not(:disabled) {
+  box-shadow: none;
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -2px;
+}
+
+.c5[href] {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c5[href]:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c5:hover {
+  -webkit-transition-duration: 80ms;
+  transition-duration: 80ms;
+}
+
+.c5:active {
+  -webkit-transition: none;
+  transition: none;
+}
+
+.c5[data-inactive] {
+  cursor: auto;
+}
+
+.c5:disabled {
+  cursor: not-allowed;
+  box-shadow: none;
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+}
+
+.c5:disabled [data-component=ButtonCounter],
+.c5:disabled [data-component="leadingVisual"],
+.c5:disabled [data-component="trailingAction"] {
+  color: inherit;
+}
+
+.c5 [data-component=ButtonCounter] {
+  font-size: 12px;
+}
+
+.c5[data-component=IconButton] {
+  display: inline-grid;
+  padding: unset;
+  place-content: center;
+  width: 32px;
+  min-width: unset;
+}
+
+.c5[data-size="small"] {
+  padding: 0 8px;
+  height: 28px;
+  gap: 4px;
+  font-size: 12px;
+}
+
+.c5[data-size="small"] [data-component="text"] {
+  line-height: calc(20 / 12);
+}
+
+.c5[data-size="small"] [data-component=ButtonCounter] {
+  font-size: 12px;
+}
+
+.c5[data-size="small"] [data-component="buttonContent"] > :not(:last-child) {
+  margin-right: 4px;
+}
+
+.c5[data-size="small"][data-component=IconButton] {
+  width: 28px;
+  padding: unset;
+}
+
+.c5[data-size="large"] {
+  padding: 0 16px;
+  height: 40px;
+  gap: 8px;
+}
+
+.c5[data-size="large"] [data-component="buttonContent"] > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c5[data-size="large"][data-component=IconButton] {
+  width: 40px;
+  padding: unset;
+}
+
+.c5[data-block="block"] {
+  width: 100%;
+}
+
+.c5[data-inactive]:not([disabled]) {
+  background-color: var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));
+  border-color: var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));
+  color: var(--button-inactive-fgColor,var(--button-inactive-fgColor-rest,var(--color-btn-inactive-text,#57606a)));
+}
+
+.c5[data-inactive]:not([disabled]):focus-visible {
+  box-shadow: none;
+}
+
+.c5 [data-component="leadingVisual"] {
+  grid-area: leadingVisual;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+}
+
+.c5 [data-component="text"] {
+  grid-area: text;
+  line-height: calc(20/14);
+  white-space: nowrap;
+}
+
+.c5 [data-component="trailingVisual"] {
+  grid-area: trailingVisual;
+}
+
+.c5 [data-component="trailingAction"] {
+  margin-right: -4px;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+}
+
+.c5 [data-component="buttonContent"] {
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  display: grid;
+  grid-template-areas: "leadingVisual text trailingVisual";
+  grid-template-columns: min-content minmax(0,auto) min-content;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+}
+
+.c5 [data-component="buttonContent"] > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c5:hover:not([disabled]) {
+  background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
+}
+
+.c5:active:not([disabled]) {
+  background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
+}
+
+.c5[aria-expanded=true] {
+  background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
+}
+
+.c5[data-component="IconButton"][data-no-visuals] {
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+}
+
+.c5[data-no-visuals] {
+  color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  padding-top: 2px;
+  padding-right: 4px;
+  padding-bottom: 2px;
+  padding-left: 4px;
+  position: relative;
+}
+
+.c5[data-no-visuals][data-component="IconButton"] {
+  width: var(--inner-action-size);
+  height: var(--inner-action-size);
+}
+
+.c5:has([data-component="ButtonCounter"]) {
+  color: var(--button-default-fgColor-rest,var(--color-btn-text,#24292f));
+}
+
+.c5:disabled[data-no-visuals] {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+}
+
+.c5:disabled[data-no-visuals] [data-component=ButtonCounter] {
+  color: inherit;
+}
+
+.c4 {
+  position: relative;
+  display: inline-block;
+  display: inline-block;
+}
+
+.c4::before {
+  position: absolute;
+  z-index: 1000001;
+  display: none;
+  width: 0px;
+  height: 0px;
+  color: var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f));
+  pointer-events: none;
+  content: '';
+  border: 6px solid transparent;
+  opacity: 0;
+}
+
+.c4::after {
+  position: absolute;
+  z-index: 1000000;
+  display: none;
+  padding: 0.5em 0.75em;
+  font: normal normal 11px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
+  -webkit-font-smoothing: subpixel-antialiased;
+  color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: none;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  word-wrap: break-word;
+  white-space: pre;
+  pointer-events: none;
+  content: attr(aria-label);
+  background: var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f));
+  border-radius: 3px;
+  opacity: 0;
+}
+
+.c4:hover::before,
+.c4:active::before,
+.c4:focus::before,
+.c4:focus-within::before,
+.c4:hover::after,
+.c4:active::after,
+.c4:focus::after,
+.c4:focus-within::after {
+  display: inline-block;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  -webkit-animation-name: tooltip-appear;
+  animation-name: tooltip-appear;
+  -webkit-animation-duration: 0.1s;
+  animation-duration: 0.1s;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  -webkit-animation-timing-function: ease-in;
+  animation-timing-function: ease-in;
+  -webkit-animation-delay: 0.4s;
+  animation-delay: 0.4s;
+}
+
+.c4.tooltipped-no-delay:hover::before,
+.c4.tooltipped-no-delay:active::before,
+.c4.tooltipped-no-delay:focus::before,
+.c4.tooltipped-no-delay:focus-within::before,
+.c4.tooltipped-no-delay:hover::after,
+.c4.tooltipped-no-delay:active::after,
+.c4.tooltipped-no-delay:focus::after,
+.c4.tooltipped-no-delay:focus-within::after {
+  -webkit-animation-delay: 0s;
+  animation-delay: 0s;
+}
+
+.c4.tooltipped-multiline:hover::after,
+.c4.tooltipped-multiline:active::after,
+.c4.tooltipped-multiline:focus::after,
+.c4.tooltipped-multiline:focus-within::after {
+  display: table-cell;
+}
+
+.c4.tooltipped-s::after,
+.c4.tooltipped-se::after,
+.c4.tooltipped-sw::after {
+  top: 100%;
+  right: 50%;
+  margin-top: 6px;
+}
+
+.c4.tooltipped-s::before,
+.c4.tooltipped-se::before,
+.c4.tooltipped-sw::before {
+  top: auto;
+  right: 50%;
+  bottom: -7px;
+  margin-right: -6px;
+  border-bottom-color: var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f));
+}
+
+.c4.tooltipped-se::after {
+  right: auto;
+  left: 50%;
+  margin-left: -16px;
+}
+
+.c4.tooltipped-sw::after {
+  margin-right: -16px;
+}
+
+.c4.tooltipped-n::after,
+.c4.tooltipped-ne::after,
+.c4.tooltipped-nw::after {
+  right: 50%;
+  bottom: 100%;
+  margin-bottom: 6px;
+}
+
+.c4.tooltipped-n::before,
+.c4.tooltipped-ne::before,
+.c4.tooltipped-nw::before {
+  top: -7px;
+  right: 50%;
+  bottom: auto;
+  margin-right: -6px;
+  border-top-color: var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f));
+}
+
+.c4.tooltipped-ne::after {
+  right: auto;
+  left: 50%;
+  margin-left: -16px;
+}
+
+.c4.tooltipped-nw::after {
+  margin-right: -16px;
+}
+
+.c4.tooltipped-s::after,
+.c4.tooltipped-n::after {
+  -webkit-transform: translateX(50%);
+  -ms-transform: translateX(50%);
+  transform: translateX(50%);
+}
+
+.c4.tooltipped-w::after {
+  right: 100%;
+  bottom: 50%;
+  margin-right: 6px;
+  -webkit-transform: translateY(50%);
+  -ms-transform: translateY(50%);
+  transform: translateY(50%);
+}
+
+.c4.tooltipped-w::before {
+  top: 50%;
+  bottom: 50%;
+  left: -7px;
+  margin-top: -6px;
+  border-left-color: var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f));
+}
+
+.c4.tooltipped-e::after {
+  bottom: 50%;
+  left: 100%;
+  margin-left: 6px;
+  -webkit-transform: translateY(50%);
+  -ms-transform: translateY(50%);
+  transform: translateY(50%);
+}
+
+.c4.tooltipped-e::before {
+  top: 50%;
+  right: -7px;
+  bottom: 50%;
+  margin-top: -6px;
+  border-right-color: var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f));
+}
+
+.c4.tooltipped-multiline::after {
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+  max-width: 250px;
+  word-wrap: break-word;
+  white-space: pre-line;
+  border-collapse: separate;
+}
+
+.c4.tooltipped-multiline.tooltipped-s::after,
+.c4.tooltipped-multiline.tooltipped-n::after {
+  right: auto;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  transform: translateX(-50%);
+}
+
+.c4.tooltipped-multiline.tooltipped-w::after,
+.c4.tooltipped-multiline.tooltipped-e::after {
+  right: 100%;
+}
+
+.c4.tooltipped-align-right-2::after {
+  right: 0;
+  margin-right: 0;
+}
+
+.c4.tooltipped-align-right-2::before {
+  right: 15px;
+}
+
+.c4.tooltipped-align-left-2::after {
+  left: 0;
+  margin-left: 0;
+}
+
+.c4.tooltipped-align-left-2::before {
+  left: 10px;
+}
+
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
+  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;
+  overflow: hidden;
+}
+
+.c0 input,
+.c0 textarea {
+  cursor: text;
+}
+
+.c0 select {
+  cursor: pointer;
+}
+
+.c0::-webkit-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::-moz-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:-ms-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c1 > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 0;
+}
+
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
+@media (forced-colors:active) {
+  .c5:focus {
+    outline: solid 1px transparent;
+  }
+}
+
+@media (pointer:coarse) {
+  .c5[data-no-visuals]:after {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    -webkit-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+    top: 50%;
+    min-height: 44px;
+  }
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+<span
+  aria-busy={false}
+  className="c0 c1 TextInput-wrapper"
+  onClick={[Function]}
+>
+  <input
+    className="c2"
+    data-component="input"
+    name="search"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    placeholder="Search"
+    type="text"
+  />
+  <span
+    className="c3 TextInput-action"
+  >
+    <span
+      aria-label="Clear input"
+      className="c4 tooltipped-n"
+      role="tooltip"
+    >
+      <button
+        className="c5"
+        data-block={null}
+        data-no-visuals={true}
+        onClick={[MockFunction]}
+        style={{}}
+        type="button"
+      >
+        <span
+          className="c6"
+          data-component="buttonContent"
+        >
+          <span
+            data-component="text"
+          >
+            Clear
+          </span>
+        </span>
+      </button>
+    </span>
+  </span>
+</span>
+`;
+
+exports[`TextInput renders trailingVisual 1`] = `
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
+  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;
+  overflow: hidden;
+}
+
+.c0 input,
+.c0 textarea {
+  cursor: text;
+}
+
+.c0 select {
+  cursor: pointer;
+}
+
+.c0::-webkit-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::-moz-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:-ms-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 12px;
+}
+
+.c1 > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 0;
+}
+
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+<span
+  aria-busy={false}
+  className="c0 c1 TextInput-wrapper"
+  onClick={[Function]}
+>
+  <input
+    className="c2"
+    data-component="input"
+    name="search"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    placeholder="Search"
+    type="text"
+  />
+  <span
+    className="TextInput-icon"
+  >
+    <svg
+      aria-hidden="true"
+      className="octicon octicon-search"
+      fill="currentColor"
+      focusable="false"
+      height={16}
+      role="img"
+      style={
+        {
+          "display": "inline-block",
+          "overflow": "visible",
+          "userSelect": "none",
+          "verticalAlign": "text-bottom",
+        }
+      }
+      viewBox="0 0 16 16"
+      width={16}
+    >
+      <path
+        d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"
+      />
+    </svg>
+  </span>
+</span>
+`;
+
+exports[`TextInput renders trailingVisual 2`] = `
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
+  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;
+  overflow: hidden;
+}
+
+.c0 input,
+.c0 textarea {
+  cursor: text;
+}
+
+.c0 select {
+  cursor: pointer;
+}
+
+.c0::-webkit-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::-moz-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:-ms-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 12px;
+}
+
+.c1 > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 0;
+}
+
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+<span
+  aria-busy={false}
+  className="c0 c1 TextInput-wrapper"
+  onClick={[Function]}
+>
+  <input
+    className="c2"
+    data-component="input"
+    name="search"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    placeholder="Search"
+    type="text"
+  />
+  <span
+    className="TextInput-icon"
+  >
+    <svg
+      aria-hidden="true"
+      className="octicon octicon-search"
+      fill="currentColor"
+      focusable="false"
+      height={16}
+      role="img"
+      style={
+        {
+          "display": "inline-block",
+          "overflow": "visible",
+          "userSelect": "none",
+          "verticalAlign": "text-bottom",
+        }
+      }
+      viewBox="0 0 16 16"
+      width={16}
+    >
+      <path
+        d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"
+      />
+    </svg>
+  </span>
+</span>
+`;
+
+exports[`TextInput renders trailingVisual 3`] = `
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
+  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;
+  overflow: hidden;
+}
+
+.c0 input,
+.c0 textarea {
+  cursor: text;
+}
+
+.c0 select {
+  cursor: pointer;
+}
+
+.c0::-webkit-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::-moz-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:-ms-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 12px;
+}
+
+.c1 > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 0;
+}
+
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+<span
+  aria-busy={false}
+  className="c0 c1 TextInput-wrapper"
+  onClick={[Function]}
+>
+  <input
+    className="c2"
+    data-component="input"
+    name="search"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    placeholder="Search"
+    type="text"
+  />
+  <span
+    className="TextInput-icon"
+  >
+    <div>
+      Trailing
+    </div>
+  </span>
+</span>
+`;
+
+exports[`TextInput renders trailingVisual 4`] = `
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
+  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;
+  overflow: hidden;
+}
+
+.c0 input,
+.c0 textarea {
+  cursor: text;
+}
+
+.c0 select {
+  cursor: pointer;
+}
+
+.c0::-webkit-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::-moz-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:-ms-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 12px;
+}
+
+.c1 > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 0;
+}
+
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+<span
+  aria-busy={false}
+  className="c0 c1 TextInput-wrapper"
+  onClick={[Function]}
+>
+  <input
+    className="c2"
+    data-component="input"
+    name="search"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    placeholder="Search"
+    type="text"
+  />
+  <span
+    className="TextInput-icon"
+  >
+    <div>
+      Trailing
+    </div>
+  </span>
+</span>
+`;
+
+exports[`TextInput renders with a loading indicator 1`] = `
+[
+  .c3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+}
+
+.c4 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  visibility: visible;
+}
+
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
+  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;
+  overflow: hidden;
+}
+
+.c0 input,
+.c0 textarea {
+  cursor: text;
+}
+
+.c0 select {
+  cursor: pointer;
+}
+
+.c0::-webkit-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::-moz-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:-ms-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 12px;
+}
+
+.c1 > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 0;
+}
+
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+@media (min-width:768px) {
+
+}
+
+@media (min-width:768px) {
+
+}
+
+<span
+    aria-busy={true}
+    className="c0 c1 TextInput-wrapper"
+    onClick={[Function]}
+  >
+    <input
+      className="c2"
+      data-component="input"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      type="text"
+    />
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c3"
+        display="flex"
+      >
+        <svg
+          className="c4"
+          fill="none"
+          height="16px"
+          sx={
+            {
+              "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 {
+  -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;
+  visibility: hidden;
+}
+
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
+  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;
+  overflow: hidden;
+}
+
+.c0 input,
+.c0 textarea {
+  cursor: text;
+}
+
+.c0 select {
+  cursor: pointer;
+}
+
+.c0::-webkit-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::-moz-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:-ms-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 12px;
+  padding-right: 0;
+}
+
+.c1 > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c1 > input,
+.c1 > 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;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+@media (min-width:768px) {
+
+}
+
+@media (min-width:768px) {
+
+}
+
+<span
+    aria-busy={true}
+    className="c0 c1 TextInput-wrapper"
+    onClick={[Function]}
+  >
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c2"
+        display="flex"
+      >
+        <svg
+          className="c3"
+          fill="none"
+          height="16px"
+          sx={
+            {
+              "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="c4"
+      data-component="input"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      type="text"
+    />
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c2"
+        display="flex"
+      >
+        <svg
+          className="c5"
+          fill="none"
+          height="16px"
+          sx={
+            {
+              "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>,
+  .c3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+}
+
+.c4 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  visibility: visible;
+}
+
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
+  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;
+  overflow: hidden;
+}
+
+.c0 input,
+.c0 textarea {
+  cursor: text;
+}
+
+.c0 select {
+  cursor: pointer;
+}
+
+.c0::-webkit-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::-moz-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:-ms-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 12px;
+}
+
+.c1 > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 0;
+}
+
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+@media (min-width:768px) {
+
+}
+
+@media (min-width:768px) {
+
+}
+
+<span
+    aria-busy={true}
+    className="c0 c1 TextInput-wrapper"
+    onClick={[Function]}
+  >
+    <input
+      className="c2"
+      data-component="input"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      type="text"
+    />
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c3"
+        display="flex"
+      >
+        <svg
+          className="c4"
+          fill="none"
+          height="16px"
+          sx={
+            {
+              "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;
+}
+
+.c6 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  visibility: hidden;
+}
+
+.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;
+  left: 0;
+}
+
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
+  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;
+  overflow: hidden;
+}
+
+.c0 input,
+.c0 textarea {
+  cursor: text;
+}
+
+.c0 select {
+  cursor: pointer;
+}
+
+.c0::-webkit-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::-moz-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:-ms-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 12px;
+  padding-right: 0;
+}
+
+.c1 > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-left: 0;
+  padding-right: 12px;
+}
+
+.c5 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c5:focus {
+  outline: 0;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+@media (min-width:768px) {
+
+}
+
+@media (min-width:768px) {
+
+}
+
+<span
+    aria-busy={true}
+    className="c0 c1 TextInput-wrapper"
+    onClick={[Function]}
+  >
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c2"
+        display="flex"
+      >
+        <div
+          className="c3"
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-search"
+            fill="currentColor"
+            focusable="false"
+            height={16}
+            role="img"
+            style={
+              {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={16}
+          >
+            <path
+              d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"
+            />
+          </svg>
+        </div>
+        <svg
+          className="c4"
+          fill="none"
+          height="32px"
+          sx={
+            {
+              "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="c5"
+      data-component="input"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      type="text"
+    />
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c2"
+        display="flex"
+      >
+        <svg
+          className="c6"
+          fill="none"
+          height="16px"
+          sx={
+            {
+              "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;
+}
+
+.c3 {
+  visibility: hidden;
+}
+
+.c6 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  visibility: hidden;
+}
+
+.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;
+  left: 0;
+}
+
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
+  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;
+  overflow: hidden;
+}
+
+.c0 input,
+.c0 textarea {
+  cursor: text;
+}
+
+.c0 select {
+  cursor: pointer;
+}
+
+.c0::-webkit-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::-moz-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:-ms-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 12px;
+  padding-right: 0;
+}
+
+.c1 > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-left: 0;
+  padding-right: 12px;
+}
+
+.c5 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c5:focus {
+  outline: 0;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+@media (min-width:768px) {
+
+}
+
+@media (min-width:768px) {
+
+}
+
+<span
+    aria-busy={true}
+    className="c0 c1 TextInput-wrapper"
+    onClick={[Function]}
+  >
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c2"
+        display="flex"
+      >
+        <div
+          className="c3"
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-search"
+            fill="currentColor"
+            focusable="false"
+            height={16}
+            role="img"
+            style={
+              {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={16}
+          >
+            <path
+              d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"
+            />
+          </svg>
+        </div>
+        <svg
+          className="c4"
+          fill="none"
+          height="32px"
+          sx={
+            {
+              "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="c5"
+      data-component="input"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      type="text"
+    />
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c2"
+        display="flex"
+      >
+        <svg
+          className="c6"
+          fill="none"
+          height="16px"
+          sx={
+            {
+              "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;
+}
+
+.c3 {
+  visibility: visible;
+}
+
+.c6 {
+  -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;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  max-width: 100%;
+  visibility: hidden;
+  left: 0;
+}
+
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
+  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;
+  overflow: hidden;
+}
+
+.c0 input,
+.c0 textarea {
+  cursor: text;
+}
+
+.c0 select {
+  cursor: pointer;
+}
+
+.c0::-webkit-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::-moz-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:-ms-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.c1 > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c5 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c5:focus {
+  outline: 0;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+@media (min-width:768px) {
+
+}
+
+@media (min-width:768px) {
+
+}
+
+<span
+    aria-busy={true}
+    className="c0 c1 TextInput-wrapper"
+    onClick={[Function]}
+  >
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c2"
+        display="flex"
+      >
+        <div
+          className="c3"
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-search"
+            fill="currentColor"
+            focusable="false"
+            height={16}
+            role="img"
+            style={
+              {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={16}
+          >
+            <path
+              d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"
+            />
+          </svg>
+        </div>
+        <svg
+          className="c4"
+          fill="none"
+          height="32px"
+          sx={
+            {
+              "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="c5"
+      data-component="input"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      type="text"
+    />
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c2"
+        display="flex"
+      >
+        <svg
+          className="c6"
+          fill="none"
+          height="16px"
+          sx={
+            {
+              "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;
+  position: relative;
+}
+
+.c4 {
+  visibility: hidden;
+}
+
+.c5 {
+  -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;
+}
+
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
+  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;
+  overflow: hidden;
+}
+
+.c0 input,
+.c0 textarea {
+  cursor: text;
+}
+
+.c0 select {
+  cursor: pointer;
+}
+
+.c0::-webkit-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::-moz-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:-ms-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 12px;
+}
+
+.c1 > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 0;
+}
+
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+@media (min-width:768px) {
+
+}
+
+@media (min-width:768px) {
+
+}
+
+<span
+    aria-busy={true}
+    className="c0 c1 TextInput-wrapper"
+    onClick={[Function]}
+  >
+    <input
+      className="c2"
+      data-component="input"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      type="text"
+    />
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c3"
+        display="flex"
+      >
+        <div
+          className="c4"
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-search"
+            fill="currentColor"
+            focusable="false"
+            height={16}
+            role="img"
+            style={
+              {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={16}
+          >
+            <path
+              d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"
+            />
+          </svg>
+        </div>
+        <svg
+          className="c5"
+          fill="none"
+          height="32px"
+          sx={
+            {
+              "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>,
+  .c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+}
+
+.c5 {
+  visibility: visible;
+}
+
+.c3 {
+  -webkit-animation: rotate-keyframes 1s linear infinite;
+  animation: rotate-keyframes 1s linear infinite;
+  visibility: visible;
+}
+
+.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;
+}
+
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
+  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;
+  overflow: hidden;
+}
+
+.c0 input,
+.c0 textarea {
+  cursor: text;
+}
+
+.c0 select {
+  cursor: pointer;
+}
+
+.c0::-webkit-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::-moz-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:-ms-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.c1 > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c1 > input,
+.c1 > 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;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+@media (min-width:768px) {
+
+}
+
+@media (min-width:768px) {
+
+}
+
+<span
+    aria-busy={true}
+    className="c0 c1 TextInput-wrapper"
+    onClick={[Function]}
+  >
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c2"
+        display="flex"
+      >
+        <svg
+          className="c3"
+          fill="none"
+          height="16px"
+          sx={
+            {
+              "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="c4"
+      data-component="input"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      type="text"
+    />
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c2"
+        display="flex"
+      >
+        <div
+          className="c5"
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-search"
+            fill="currentColor"
+            focusable="false"
+            height={16}
+            role="img"
+            style={
+              {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={16}
+          >
+            <path
+              d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"
+            />
+          </svg>
+        </div>
+        <svg
+          className="c6"
+          fill="none"
+          height="32px"
+          sx={
+            {
+              "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>,
+  .c3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+}
+
+.c4 {
+  visibility: hidden;
+}
+
+.c5 {
+  -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;
+}
+
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
+  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;
+  overflow: hidden;
+}
+
+.c0 input,
+.c0 textarea {
+  cursor: text;
+}
+
+.c0 select {
+  cursor: pointer;
+}
+
+.c0::-webkit-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::-moz-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:-ms-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 12px;
+}
+
+.c1 > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 0;
+}
+
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+@media (min-width:768px) {
+
+}
+
+@media (min-width:768px) {
+
+}
+
+<span
+    aria-busy={true}
+    className="c0 c1 TextInput-wrapper"
+    onClick={[Function]}
+  >
+    <input
+      className="c2"
+      data-component="input"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      type="text"
+    />
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c3"
+        display="flex"
+      >
+        <div
+          className="c4"
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-search"
+            fill="currentColor"
+            focusable="false"
+            height={16}
+            role="img"
+            style={
+              {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={16}
+          >
+            <path
+              d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"
+            />
+          </svg>
+        </div>
+        <svg
+          className="c5"
+          fill="none"
+          height="32px"
+          sx={
+            {
+              "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>,
+  .c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+}
+
+.c3 {
+  visibility: hidden;
+}
+
+.c6 {
+  visibility: visible;
+}
+
+.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;
+  left: 0;
+}
+
+.c7 {
+  -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;
+}
+
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
+  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;
+  overflow: hidden;
+  --inner-action-size: 20px;
+  min-height: 28px;
+  padding-left: 8px;
+  padding-right: 8px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  font-size: 12px;
+  line-height: 20px;
+}
+
+.c0 input,
+.c0 textarea {
+  cursor: text;
+}
+
+.c0 select {
+  cursor: pointer;
+}
+
+.c0::-webkit-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::-moz-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:-ms-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.c1 > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c5 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c5:focus {
+  outline: 0;
+}
+
+@media (min-width:768px) {
+
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+@media (min-width:768px) {
+
+}
+
+<span
+    aria-busy={true}
+    className="c0 c1 TextInput-wrapper"
+    onClick={[Function]}
+    size="small"
+  >
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c2"
+        display="flex"
+      >
+        <div
+          className="c3"
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-search"
+            fill="currentColor"
+            focusable="false"
+            height={16}
+            role="img"
+            style={
+              {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={16}
+          >
+            <path
+              d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"
+            />
+          </svg>
+        </div>
+        <svg
+          className="c4"
+          fill="none"
+          height="32px"
+          sx={
+            {
+              "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="c5"
+      data-component="input"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      type="text"
+    />
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c2"
+        display="flex"
+      >
+        <div
+          className="c6"
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-search"
+            fill="currentColor"
+            focusable="false"
+            height={16}
+            role="img"
+            style={
+              {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={16}
+          >
+            <path
+              d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"
+            />
+          </svg>
+        </div>
+        <svg
+          className="c7"
+          fill="none"
+          height="32px"
+          sx={
+            {
+              "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;
+}
+
+.c6 {
+  visibility: visible;
+}
+
+.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;
+  left: 0;
+}
+
+.c7 {
+  -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;
+}
+
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
+  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;
+  overflow: hidden;
+}
+
+.c0 input,
+.c0 textarea {
+  cursor: text;
+}
+
+.c0 select {
+  cursor: pointer;
+}
+
+.c0::-webkit-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::-moz-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:-ms-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.c1 > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c5 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c5:focus {
+  outline: 0;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+@media (min-width:768px) {
+
+}
+
+@media (min-width:768px) {
+
+}
+
+<span
+    aria-busy={true}
+    className="c0 c1 TextInput-wrapper"
+    onClick={[Function]}
+  >
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c2"
+        display="flex"
+      >
+        <div
+          className="c3"
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-search"
+            fill="currentColor"
+            focusable="false"
+            height={16}
+            role="img"
+            style={
+              {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={16}
+          >
+            <path
+              d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"
+            />
+          </svg>
+        </div>
+        <svg
+          className="c4"
+          fill="none"
+          height="32px"
+          sx={
+            {
+              "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="c5"
+      data-component="input"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      type="text"
+    />
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c2"
+        display="flex"
+      >
+        <div
+          className="c6"
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-search"
+            fill="currentColor"
+            focusable="false"
+            height={16}
+            role="img"
+            style={
+              {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={16}
+          >
+            <path
+              d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"
+            />
+          </svg>
+        </div>
+        <svg
+          className="c7"
+          fill="none"
+          height="32px"
+          sx={
+            {
+              "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;
+}
+
+.c6 {
+  visibility: hidden;
+}
+
+.c3 {
+  visibility: visible;
+}
+
+.c4 {
+  -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;
+}
+
+.c7 {
+  -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;
+}
+
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
+  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;
+  overflow: hidden;
+  --inner-action-size: 28px;
+  padding-left: 8px;
+  padding-right: 8px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  height: 40px;
+}
+
+.c0 input,
+.c0 textarea {
+  cursor: text;
+}
+
+.c0 select {
+  cursor: pointer;
+}
+
+.c0::-webkit-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::-moz-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:-ms-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.c1 > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c5 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c5:focus {
+  outline: 0;
+}
+
+@media (min-width:768px) {
+
+}
+
+@media (min-width:768px) {
+
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+<span
+    aria-busy={true}
+    className="c0 c1 TextInput-wrapper"
+    onClick={[Function]}
+    size="large"
+  >
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c2"
+        display="flex"
+      >
+        <div
+          className="c3"
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-search"
+            fill="currentColor"
+            focusable="false"
+            height={16}
+            role="img"
+            style={
+              {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={16}
+          >
+            <path
+              d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"
+            />
+          </svg>
+        </div>
+        <svg
+          className="c4"
+          fill="none"
+          height="32px"
+          sx={
+            {
+              "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="c5"
+      data-component="input"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      type="text"
+    />
+    <span
+      className="TextInput-icon"
+    >
+      <div
+        className="c2"
+        display="flex"
+      >
+        <div
+          className="c6"
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-search"
+            fill="currentColor"
+            focusable="false"
+            height={16}
+            role="img"
+            style={
+              {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={16}
+          >
+            <path
+              d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"
+            />
+          </svg>
+        </div>
+        <svg
+          className="c7"
+          fill="none"
+          height="32px"
+          sx={
+            {
+              "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;
+  line-height: 20px;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  vertical-align: middle;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
+  border-radius: 6px;
+  outline: none;
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
+  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;
+  overflow: hidden;
+}
+
+.c0 input,
+.c0 textarea {
+  cursor: text;
+}
+
+.c0 select {
+  cursor: pointer;
+}
+
+.c0::-webkit-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::-moz-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:-ms-input-placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0::placeholder {
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c0:focus-within {
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: -1px;
+}
+
+.c0 > textarea {
+  padding: 12px;
+}
+
+.c1 {
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c1 > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c1 .TextInput-icon,
+.c1 .TextInput-action {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c1 > input,
+.c1 > select {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.c2 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+}
+
+.c2:focus {
+  outline: 0;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+<span
+  aria-busy={false}
+  className="c0 c1 TextInput-wrapper"
+  onClick={[Function]}
+>
+  <input
+    className="c2"
+    data-component="input"
+    name="password"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    type="password"
+  />
+</span>
+`;
diff --git a/src/__tests__/deprecated/__snapshots__/Button.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/Button.test.tsx.snap
new file mode 100644
index 00000000000..2ea3e7334e6
--- /dev/null
+++ b/src/__tests__/deprecated/__snapshots__/Button.test.tsx.snap
@@ -0,0 +1,367 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button respects the "disabled" prop 1`] = `
+.c0 {
+  position: relative;
+  display: inline-block;
+  padding: 6px 16px;
+  font-family: inherit;
+  font-weight: 600;
+  line-height: 20px;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border-radius: 6px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-align: center;
+  font-size: 14px;
+}
+
+.c0:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0:focus {
+  outline: none;
+}
+
+.c0:disabled {
+  cursor: default;
+}
+
+.c0:disabled svg {
+  opacity: 0.6;
+}
+
+.c1 {
+  color: var(--button-default-fgColor-rest,var(--color-btn-text,#24292f));
+  background-color: var(--button-default-bgColor-rest,var(--color-btn-bg,#f6f8fa));
+  border: 1px solid var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15)));
+  box-shadow: var(--button-default-shadow-resting,var(--color-btn-shadow,0 1px 0 rgba(31,35,40,0.04))),var(--button-default-shadow-inset,var(--color-btn-inset-shadow,inset 0 1px 0 rgba(255,255,255,0.25)));
+}
+
+.c1:hover {
+  background-color: var(--button-default-bgColor-hover,var(--color-btn-hover-bg,#f3f4f6));
+  border-color: var(--button-default-borderColor-hover,var(--color-btn-hover-border,rgba(31,35,40,0.15)));
+}
+
+.c1:focus {
+  outline: solid 2px var(--fgColor-accent,var(--color-accent-fg,#0969da));
+}
+
+.c1:active {
+  background-color: var(--button-default-bgColor-selected,var(--color-btn-selected-bg,hsla(220,14%,94%,1)));
+}
+
+.c1:disabled {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--button-default-bgColor-rest,var(--color-btn-bg,#f6f8fa));
+  border-color: var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15)));
+}
+
+<button
+  className="c0 c1"
+  disabled={true}
+/>
+`;
+
+exports[`ButtonDanger renders correct disabled styles 1`] = `
+.c0 {
+  position: relative;
+  display: inline-block;
+  padding: 6px 16px;
+  font-family: inherit;
+  font-weight: 600;
+  line-height: 20px;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border-radius: 6px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-align: center;
+  font-size: 14px;
+}
+
+.c0:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0:focus {
+  outline: none;
+}
+
+.c0:disabled {
+  cursor: default;
+}
+
+.c0:disabled svg {
+  opacity: 0.6;
+}
+
+.c1 {
+  color: var(--button-danger-fgColor-rest,var(--color-btn-danger-text,#cf222e));
+  border: 1px solid var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15)));
+  background-color: var(--button-default-bgColor-rest,var(--color-btn-bg,#f6f8fa));
+  box-shadow: var(--button-default-shadow-resting,var(--color-btn-shadow,0 1px 0 rgba(31,35,40,0.04)));
+}
+
+.c1:hover {
+  color: var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text,#ffffff));
+  background-color: var(--button-danger-bgColor-hover,var(--color-btn-danger-hover-bg,#a40e26));
+  border-color: var(--button-danger-borderColor-hover,var(--color-btn-danger-hover-border,rgba(31,35,40,0.15)));
+  box-shadow: var(--shadow-resting-small,var(--color-btn-danger-hover-shadow,0 1px 0 rgba(31,35,40,0.1)));
+}
+
+.c1:active {
+  color: var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text,#ffffff));
+  background-color: var(--button-danger-bgColor-active,var(--color-btn-danger-selected-bg,hsla(356,72%,44%,1)));
+  box-shadow: var(--button-danger-shadow-selected,var(--color-btn-danger-selected-shadow,inset 0 1px 0 rgba(76,0,20,0.2)));
+  border-color: var(--button-danger-borderColor-active,var(--color-btn-danger-selected-border,rgba(31,35,40,0.15)));
+}
+
+.c1:disabled {
+  color: var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text,rgba(207,34,46,0.5)));
+  background-color: var(--button-danger-bgColor-disabled,var(--color-btn-danger-disabled-bg,#f6f8fa));
+}
+
+<button
+  className="c0 c1"
+  disabled={true}
+/>
+`;
+
+exports[`ButtonInvisible renders correct disabled styles 1`] = `
+.c0 {
+  position: relative;
+  display: inline-block;
+  padding: 6px 16px;
+  font-family: inherit;
+  font-weight: 600;
+  line-height: 20px;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border-radius: 6px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-align: center;
+  font-size: 14px;
+}
+
+.c0:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0:focus {
+  outline: none;
+}
+
+.c0:disabled {
+  cursor: default;
+}
+
+.c0:disabled svg {
+  opacity: 0.6;
+}
+
+.c1 {
+  color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  background-color: transparent;
+  border: 0;
+  border-radius: 6px;
+  box-shadow: none;
+}
+
+.c1:disabled {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+}
+
+.c1:focus {
+  outline: solid 2px var(--fgColor-accent,var(--color-accent-fg,#0969da));
+}
+
+.c1:hover {
+  background-color: var(--button-default-bgColor-hover,var(--color-btn-hover-bg,#f3f4f6));
+}
+
+.c1:active {
+  background-color: var(--button-default-bgColor-selected,var(--color-btn-selected-bg,hsla(220,14%,94%,1)));
+}
+
+<button
+  className="c0 c1"
+  disabled={true}
+/>
+`;
+
+exports[`ButtonOutline renders correct disabled styles 1`] = `
+.c0 {
+  position: relative;
+  display: inline-block;
+  padding: 6px 16px;
+  font-family: inherit;
+  font-weight: 600;
+  line-height: 20px;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border-radius: 6px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-align: center;
+  font-size: 14px;
+}
+
+.c0:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0:focus {
+  outline: none;
+}
+
+.c0:disabled {
+  cursor: default;
+}
+
+.c0:disabled svg {
+  opacity: 0.6;
+}
+
+.c1 {
+  color: var(--button-outline-fgColor-rest,var(--color-btn-outline-text,#0969da));
+  border: 1px solid var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15)));
+  background-color: var(--button-default-bgColor-rest,var(--color-btn-bg,#f6f8fa));
+  box-shadow: var(--button-default-shadow-resting,var(--color-btn-shadow,0 1px 0 rgba(31,35,40,0.04)));
+}
+
+.c1:hover {
+  color: var(--button-outline-fgColor-hover,var(--color-btn-outline-hover-text,#ffffff));
+  background-color: var(--button-outline-bgColor-hover,var(--color-btn-outline-hover-bg,#0969da));
+  border-color: var(--button-outline-borderColor-hover,var(--color-btn-outline-hover-border,rgba(31,35,40,0.15)));
+  box-shadow: var(--shadow-resting-small,var(--color-btn-outline-hover-shadow,0 1px 0 rgba(31,35,40,0.1)));
+}
+
+.c1:active {
+  color: var(--button-outline-fgColor-active,var(--color-btn-outline-selected-text,#ffffff));
+  background-color: var(--button-outline-bgColor-active,var(--color-btn-outline-selected-bg,hsla(212,92%,42%,1)));
+  box-shadow: var(--button-outline-shadow-selected,var(--color-btn-outline-selected-shadow,inset 0 1px 0 rgba(0,33,85,0.2)));
+  border-color: var(--button-outline-borderColor-active,var(--color-btn-outline-selected-border,rgba(31,35,40,0.15)));
+}
+
+.c1:disabled {
+  color: var(--button-outline-fgColor-disabled,var(--color-btn-outline-disabled-text,rgba(9,105,218,0.5)));
+  background-color: var(--button-outline-bgColor-disabled,var(--color-btn-outline-disabled-bg,#f6f8fa));
+  border-color: var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15)));
+}
+
+<button
+  className="c0 c1"
+  disabled={true}
+/>
+`;
+
+exports[`ButtonPrimary renders correct disabled styles 1`] = `
+.c0 {
+  position: relative;
+  display: inline-block;
+  padding: 6px 16px;
+  font-family: inherit;
+  font-weight: 600;
+  line-height: 20px;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border-radius: 6px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-align: center;
+  font-size: 14px;
+}
+
+.c0:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0:focus {
+  outline: none;
+}
+
+.c0:disabled {
+  cursor: default;
+}
+
+.c0:disabled svg {
+  opacity: 0.6;
+}
+
+.c1 {
+  color: var(--button-primary-fgColor-rest,var(--color-btn-primary-text,#ffffff));
+  border: 1px solid var(--button-primary-borderColor-rest,var(--color-btn-primary-border,rgba(31,35,40,0.15)));
+  background-color: var(--button-primary-bgColor-rest,var(--color-btn-primary-bg,#1f883d));
+  box-shadow: var(--shadow-resting-small,var(--color-btn-primary-shadow,0 1px 0 rgba(31,35,40,0.1)));
+}
+
+.c1:hover {
+  background-color: var(--button-primary-bgColor-hover,var(--color-btn-primary-hover-bg,#1a7f37));
+  border-color: var(--button-primary-borderColor-hover,var(--color-btn-primary-hover-border,rgba(31,35,40,0.15)));
+}
+
+.c1:active {
+  background-color: var(--button-primary-bgColor-active,var(--color-btn-primary-selected-bg,hsla(137,66%,28%,1)));
+  box-shadow: var(--button-primary-shadow-selected,var(--color-btn-primary-selected-shadow,inset 0 1px 0 rgba(0,45,17,0.2)));
+}
+
+.c1:disabled {
+  color: var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text,rgba(255,255,255,0.8)));
+  background-color: var(--button-primary-bgColor-disabled,var(--color-btn-primary-disabled-bg,#94d3a2));
+  border-color: var(--button-primary-borderColor-disabled,var(--color-btn-primary-disabled-border,rgba(31,35,40,0.15)));
+}
+
+<button
+  className="c0 c1"
+  disabled={true}
+/>
+`;

From 999019f43c61ac25f65c1004045c4d1e4b2085eb Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Wed, 31 Jan 2024 15:49:09 +1000
Subject: [PATCH 16/16] experiment with hideTooltip prop

---
 src/Button/IconButton.tsx                     | 12 ++++++++++--
 src/Button/types.ts                           |  2 ++
 src/drafts/Tooltip/__tests__/Tooltip.test.tsx | 14 +++++++++++---
 3 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/Button/IconButton.tsx b/src/Button/IconButton.tsx
index 231eb3b6c96..3930e1d8734 100644
--- a/src/Button/IconButton.tsx
+++ b/src/Button/IconButton.tsx
@@ -10,7 +10,15 @@ import {MenuContext} from '../ActionMenu/ActionMenu'
 
 const IconButton = forwardRef(
   (
-    {sx: sxProp = defaultSxProp, icon: Icon, disabled, 'aria-label': ariaLabel, description, ...props},
+    {
+      sx: sxProp = defaultSxProp,
+      icon: Icon,
+      disabled,
+      'aria-label': ariaLabel,
+      description,
+      hideTooltip = true,
+      ...props
+    },
     forwardedRef,
   ): JSX.Element => {
     let sxStyles = sxProp
@@ -29,7 +37,7 @@ const IconButton = forwardRef(
     const isIconButtonAnchor = anchorRef !== undefined && anchorId !== undefined
     // aria-label is going to be deprecated in favor of label but for now we are supporting both.
     const iconButtonLabel = ariaLabel
-    if (!tooltipId && container !== 'Tooltip' && !disabled) {
+    if (!tooltipId && container !== 'Tooltip' && !disabled && !hideTooltip) {
       return (
         // if description exists, we use tooltip for adding description to the icon button. Otherwise, we use tooltip for labelling the icon button.
         // @ts-ignore for now
diff --git a/src/Button/types.ts b/src/Button/types.ts
index 5fdb8766c64..e17e9fe9c25 100644
--- a/src/Button/types.ts
+++ b/src/Button/types.ts
@@ -87,6 +87,8 @@ export type ButtonProps = {
 
 export type IconButtonProps = ButtonA11yProps & {
   icon: React.ElementType
+  // default to true until the major version bump
+  hideTooltip?: boolean
 } & Omit<ButtonBaseProps, 'aria-label' | 'aria-labelledby'>
 
 // adopted from React.AnchorHTMLAttributes
diff --git a/src/drafts/Tooltip/__tests__/Tooltip.test.tsx b/src/drafts/Tooltip/__tests__/Tooltip.test.tsx
index a2962a8d192..757a0340078 100644
--- a/src/drafts/Tooltip/__tests__/Tooltip.test.tsx
+++ b/src/drafts/Tooltip/__tests__/Tooltip.test.tsx
@@ -107,15 +107,23 @@ describe('Tooltip', () => {
     )
     consoleErrorSpy.mockRestore()
   })
-  it('renders tooltip as default on an icon button', () => {
-    const {getByRole, getByText} = HTMLRender(<IconButton size="large" icon={HeartIcon} aria-label="Heart" />)
+  it('renders tooltip on an icon button when the hideTooltip prop is passed false', () => {
+    const {getByRole, getByText} = HTMLRender(
+      <IconButton size="large" icon={HeartIcon} aria-label="Heart" hideTooltip={false} />,
+    )
     const triggerEL = getByRole('button')
     const tooltipEl = getByText('Heart')
     expect(triggerEL).toHaveAttribute('aria-labelledby', tooltipEl.id)
   })
   it('renders description type tooltip as default on an icon button', () => {
     const {getByRole, getByText} = HTMLRender(
-      <IconButton size="large" icon={HeartIcon} aria-label="Heart" description="Love is all around" />,
+      <IconButton
+        size="large"
+        icon={HeartIcon}
+        aria-label="Heart"
+        description="Love is all around"
+        hideTooltip={false}
+      />,
     )
     const triggerEL = getByRole('button')
     expect(triggerEL).toHaveAttribute('aria-label', 'Heart')