From b3868a1c174d9567b4d1638089ea5ab5f941f252 Mon Sep 17 00:00:00 2001
From: George Aidonidis <george.aidonidis@toptal.com>
Date: Thu, 14 Nov 2024 10:38:38 +0200
Subject: [PATCH] [BILL-5689] Display reset button on root hover for Input
 component (#4622)

* Display reset button on root hover
* Add changeset
* Update snapshots
* Add cypress test
---
 .changeset/hip-pandas-bow.md                  | 19 +++++++++++++++++++
 cypress/component/Input.spec.tsx              | 17 +++++++++++++++++
 package.json                                  |  1 -
 .../Autocomplete/__snapshots__/test.tsx.snap  |  2 +-
 .../DatePicker/__snapshots__/test.tsx.snap    |  2 +-
 .../MonthSelect/__snapshots__/test.tsx.snap   |  2 +-
 .../YearSelect/__snapshots__/test.tsx.snap    |  2 +-
 .../src/FormError/__snapshots__/test.tsx.snap |  2 +-
 .../src/Input/__snapshots__/test.tsx.snap     | 14 +++++++-------
 .../NumberInput/__snapshots__/test.tsx.snap   |  2 +-
 .../src/OutlinedInput/OutlinedInput.tsx       |  2 +-
 .../src/OutlinedInput/stylesRoot.ts           |  2 +-
 .../__snapshots__/test.tsx.snap               |  2 +-
 .../NativeSelect/__snapshots__/test.tsx.snap  |  4 ++--
 .../__snapshots__/test.tsx.snap               |  2 +-
 .../TagSelector/__snapshots__/test.tsx.snap   |  6 +++---
 .../__snapshots__/test.tsx.snap               |  2 +-
 .../TimePicker/__snapshots__/test.tsx.snap    |  2 +-
 .../src/Form/__snapshots__/test.tsx.snap      |  4 ++--
 19 files changed, 62 insertions(+), 27 deletions(-)
 create mode 100644 .changeset/hip-pandas-bow.md

diff --git a/.changeset/hip-pandas-bow.md b/.changeset/hip-pandas-bow.md
new file mode 100644
index 0000000000..2455272fb2
--- /dev/null
+++ b/.changeset/hip-pandas-bow.md
@@ -0,0 +1,19 @@
+---
+'@toptal/picasso-outlined-input': patch
+'@toptal/picasso-select': patch
+'@toptal/picasso-input': patch
+---
+
+---
+
+### Input
+
+- display reset button on hover of full width of the input
+
+### Select
+
+- implicit update from input
+
+### Autocomplete
+
+- implicit update from input
diff --git a/cypress/component/Input.spec.tsx b/cypress/component/Input.spec.tsx
index 1ede239533..7c4bf3d39d 100644
--- a/cypress/component/Input.spec.tsx
+++ b/cypress/component/Input.spec.tsx
@@ -45,4 +45,21 @@ describe('Input', () => {
       variant: 'error-status/after-focused',
     })
   })
+
+  it('shows the `X` when hover over the input', () => {
+    cy.mount(
+      <Container padded='small'>
+        <Input
+          enableReset
+          value='Text'
+          testIds={{ resetButton: 'reset-button' }}
+        />
+      </Container>
+    )
+
+    cy.getByTestId('reset-button').should('not.be.visible')
+    // making sure that we hover over the very end of the input not just the text of the input
+    cy.getByTestId('reset-button').realHover()
+    cy.getByTestId('reset-button').should('be.visible')
+  })
 })
diff --git a/package.json b/package.json
index 7823c5985a..b173bf1de7 100644
--- a/package.json
+++ b/package.json
@@ -105,7 +105,6 @@
     "webpack": "^5.0.0",
     "yaml": "2",
     "micromatch": "^4.0.8"
-
   },
   "devDependencies": {
     "@actions/core": "^1.10.0",
diff --git a/packages/base/Autocomplete/src/Autocomplete/__snapshots__/test.tsx.snap b/packages/base/Autocomplete/src/Autocomplete/__snapshots__/test.tsx.snap
index b9a6a3376b..d7efe8931b 100644
--- a/packages/base/Autocomplete/src/Autocomplete/__snapshots__/test.tsx.snap
+++ b/packages/base/Autocomplete/src/Autocomplete/__snapshots__/test.tsx.snap
@@ -239,7 +239,7 @@ exports[`Autocomplete static behavior renders 1`] = `
         class="flex"
       >
         <div
-          class="base-Input base-Input base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] hover:[&_.resetButtonDirty]:visible text-nowrap p-2 h-8 w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black cursor-[inherit]"
+          class="base-Input base-Input base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] group text-nowrap p-2 h-8 w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black cursor-[inherit]"
         >
           <input
             aria-autocomplete="list"
diff --git a/packages/base/DatePicker/src/DatePicker/__snapshots__/test.tsx.snap b/packages/base/DatePicker/src/DatePicker/__snapshots__/test.tsx.snap
index 99cba3e4e5..07ae1a7359 100644
--- a/packages/base/DatePicker/src/DatePicker/__snapshots__/test.tsx.snap
+++ b/packages/base/DatePicker/src/DatePicker/__snapshots__/test.tsx.snap
@@ -9,7 +9,7 @@ exports[`DatePicker renders 1`] = `
       class="inline-block"
     >
       <div
-        class="base-Input base-Input base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] hover:[&_.resetButtonDirty]:visible text-nowrap p-2 h-8 w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black cursor-[inherit]"
+        class="base-Input base-Input base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] group text-nowrap p-2 h-8 w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black cursor-[inherit]"
       >
         <div
           class="text-graphite h-auto flex items-center whitespace-nowrap max-h pointer-events"
diff --git a/packages/base/DateSelect/src/MonthSelect/__snapshots__/test.tsx.snap b/packages/base/DateSelect/src/MonthSelect/__snapshots__/test.tsx.snap
index 8c50bcbcab..dbed3ec4eb 100644
--- a/packages/base/DateSelect/src/MonthSelect/__snapshots__/test.tsx.snap
+++ b/packages/base/DateSelect/src/MonthSelect/__snapshots__/test.tsx.snap
@@ -12,7 +12,7 @@ exports[`MonthSelect renders 1`] = `
         class="w-[inherit] outline-0"
       >
         <div
-          class="base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] hover:[&_.resetButtonDirty]:visible text-nowrap p-2 h-8 w-full bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black cursor-[inherit] pr-[1.625rem]"
+          class="base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] group text-nowrap p-2 h-8 w-full bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black cursor-[inherit] pr-[1.625rem]"
           role="textbox"
         >
           <input
diff --git a/packages/base/DateSelect/src/YearSelect/__snapshots__/test.tsx.snap b/packages/base/DateSelect/src/YearSelect/__snapshots__/test.tsx.snap
index 2a6c983f83..6403783a53 100644
--- a/packages/base/DateSelect/src/YearSelect/__snapshots__/test.tsx.snap
+++ b/packages/base/DateSelect/src/YearSelect/__snapshots__/test.tsx.snap
@@ -179,7 +179,7 @@ exports[`YearSelect renders 1`] = `
         class="w-[inherit] outline-0"
       >
         <div
-          class="base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] hover:[&_.resetButtonDirty]:visible text-nowrap p-2 h-8 w-full bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black cursor-[inherit] pr-[1.625rem]"
+          class="base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] group text-nowrap p-2 h-8 w-full bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black cursor-[inherit] pr-[1.625rem]"
           role="textbox"
         >
           <input
diff --git a/packages/base/Form/src/FormError/__snapshots__/test.tsx.snap b/packages/base/Form/src/FormError/__snapshots__/test.tsx.snap
index ca28227a89..dccba40f3d 100644
--- a/packages/base/Form/src/FormError/__snapshots__/test.tsx.snap
+++ b/packages/base/Form/src/FormError/__snapshots__/test.tsx.snap
@@ -22,7 +22,7 @@ exports[`FormError renders 1`] = `
           </span>
         </label>
         <div
-          class="base-Input base-Input base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] hover:[&_.resetButtonDirty]:visible text-nowrap p-2 h-8 w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black cursor-[inherit]"
+          class="base-Input base-Input base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] group text-nowrap p-2 h-8 w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black cursor-[inherit]"
         >
           <input
             aria-invalid="false"
diff --git a/packages/base/Input/src/Input/__snapshots__/test.tsx.snap b/packages/base/Input/src/Input/__snapshots__/test.tsx.snap
index 0a71ab7d98..61474cf218 100644
--- a/packages/base/Input/src/Input/__snapshots__/test.tsx.snap
+++ b/packages/base/Input/src/Input/__snapshots__/test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Input renders icon in the beginning 1`] = `
     class="Picasso-root"
   >
     <div
-      class="base-Input base-Input base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] hover:[&_.resetButtonDirty]:visible text-nowrap p-2 h-8 w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black cursor-[inherit]"
+      class="base-Input base-Input base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] group text-nowrap p-2 h-8 w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black cursor-[inherit]"
     >
       <div
         class="text-graphite h-auto flex items-center whitespace-nowrap max-h pointer-events"
@@ -39,7 +39,7 @@ exports[`Input renders icon in the end 1`] = `
     class="Picasso-root"
   >
     <div
-      class="base-Input base-Input base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] hover:[&_.resetButtonDirty]:visible text-nowrap p-2 h-8 w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black cursor-[inherit]"
+      class="base-Input base-Input base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] group text-nowrap p-2 h-8 w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black cursor-[inherit]"
     >
       <div
         class="text-graphite h-auto flex items-center whitespace-nowrap max-h pointer-events"
@@ -72,7 +72,7 @@ exports[`Input should show manual resize handler 1`] = `
     class="Picasso-root"
   >
     <div
-      class="base-Input base-Input base-Input base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] hover:[&_.resetButtonDirty]:visible text-nowrap p-2 h-auto w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black cursor-[inherit]"
+      class="base-Input base-Input base-Input base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] group text-nowrap p-2 h-auto w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black cursor-[inherit]"
     >
       <textarea
         aria-invalid="false"
@@ -101,7 +101,7 @@ exports[`Input should show reset button 1`] = `
     class="Picasso-root"
   >
     <div
-      class="base-Input base-Input base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] hover:[&_.resetButtonDirty]:visible text-nowrap p-2 h-8 w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black cursor-[inherit]"
+      class="base-Input base-Input base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] group text-nowrap p-2 h-8 w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black cursor-[inherit]"
     >
       <input
         aria-invalid="false"
@@ -111,7 +111,7 @@ exports[`Input should show reset button 1`] = `
         value="Some value"
       />
       <div
-        class="text-graphite h-auto flex items-center whitespace-nowrap max-h justify-end ml-auto flex-grow flex-shrink basis-auto invisible peer-focus:visible peer-hover:visible"
+        class="text-graphite h-auto flex items-center whitespace-nowrap max-h justify-end ml-auto flex-grow flex-shrink basis-auto invisible peer-focus:visible peer-active:visible group-hover:visible"
         data-testid="reset-adornment"
       >
         <button
@@ -148,7 +148,7 @@ exports[`Input shows counter for multiline input 1`] = `
     class="Picasso-root"
   >
     <div
-      class="base-Input base-Input base-Input base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] hover:[&_.resetButtonDirty]:visible text-nowrap p-2 h-auto w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black cursor-[inherit]"
+      class="base-Input base-Input base-Input base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] group text-nowrap p-2 h-auto w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black cursor-[inherit]"
     >
       <textarea
         aria-invalid="false"
@@ -178,7 +178,7 @@ exports[`Input shows counter for regular input 1`] = `
     class="Picasso-root"
   >
     <div
-      class="base-Input base-Input base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] hover:[&_.resetButtonDirty]:visible text-nowrap p-2 h-8 w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black cursor-[inherit]"
+      class="base-Input base-Input base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] group text-nowrap p-2 h-8 w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black cursor-[inherit]"
     >
       <input
         aria-invalid="false"
diff --git a/packages/base/NumberInput/src/NumberInput/__snapshots__/test.tsx.snap b/packages/base/NumberInput/src/NumberInput/__snapshots__/test.tsx.snap
index b2f6e20dcb..f725a4b394 100644
--- a/packages/base/NumberInput/src/NumberInput/__snapshots__/test.tsx.snap
+++ b/packages/base/NumberInput/src/NumberInput/__snapshots__/test.tsx.snap
@@ -5,7 +5,7 @@ exports[`NumberInput renders 1`] = `
   class="Picasso-root"
 >
   <div
-    class="base-Input base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] hover:[&_.resetButtonDirty]:visible text-nowrap p-2 h-8 w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black pr-0 cursor-text"
+    class="base-Input base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] group text-nowrap p-2 h-8 w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black pr-0 cursor-text"
   >
     <input
       aria-invalid="false"
diff --git a/packages/base/OutlinedInput/src/OutlinedInput/OutlinedInput.tsx b/packages/base/OutlinedInput/src/OutlinedInput/OutlinedInput.tsx
index 55c0e69090..f1587cfa99 100644
--- a/packages/base/OutlinedInput/src/OutlinedInput/OutlinedInput.tsx
+++ b/packages/base/OutlinedInput/src/OutlinedInput/OutlinedInput.tsx
@@ -34,7 +34,7 @@ const ResetButton = ({
     position='end'
     className={twJoin(
       'invisible',
-      hasValue && 'peer-focus:visible peer-hover:visible'
+      hasValue && 'peer-focus:visible peer-active:visible group-hover:visible'
     )}
   >
     <ButtonCircular
diff --git a/packages/base/OutlinedInput/src/OutlinedInput/stylesRoot.ts b/packages/base/OutlinedInput/src/OutlinedInput/stylesRoot.ts
index a20ead4eba..3dbb3c2ee1 100644
--- a/packages/base/OutlinedInput/src/OutlinedInput/stylesRoot.ts
+++ b/packages/base/OutlinedInput/src/OutlinedInput/stylesRoot.ts
@@ -96,7 +96,7 @@ export const rootBasicClasses = [
   'items-center',
   'rounded-sm',
   '[font-size:_unset]',
-  'hover:[&_.resetButtonDirty]:visible',
+  'group',
   'text-nowrap',
 ]
 
diff --git a/packages/base/Page/src/PageAutocomplete/__snapshots__/test.tsx.snap b/packages/base/Page/src/PageAutocomplete/__snapshots__/test.tsx.snap
index 8009c87c88..73c6a6d70a 100644
--- a/packages/base/Page/src/PageAutocomplete/__snapshots__/test.tsx.snap
+++ b/packages/base/Page/src/PageAutocomplete/__snapshots__/test.tsx.snap
@@ -15,7 +15,7 @@ exports[`PageAutocomplete renders 1`] = `
         class="flex"
       >
         <div
-          class="base-Input base-Input base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] hover:[&_.resetButtonDirty]:visible text-nowrap p-2 h-8 w-[18.75rem] bg-[#081237] after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border-none [&:has(:focus)]:after:shadow-0 hover:[&:not(:has(:focus))]:after:border-gray text-black cursor-[inherit]"
+          class="base-Input base-Input base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] group text-nowrap p-2 h-8 w-[18.75rem] bg-[#081237] after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border-none [&:has(:focus)]:after:shadow-0 hover:[&:not(:has(:focus))]:after:border-gray text-black cursor-[inherit]"
         >
           <input
             aria-autocomplete="list"
diff --git a/packages/base/Select/src/NativeSelect/__snapshots__/test.tsx.snap b/packages/base/Select/src/NativeSelect/__snapshots__/test.tsx.snap
index eb11665de5..91cbcd3f94 100644
--- a/packages/base/Select/src/NativeSelect/__snapshots__/test.tsx.snap
+++ b/packages/base/Select/src/NativeSelect/__snapshots__/test.tsx.snap
@@ -9,7 +9,7 @@ exports[`NativeSelect renders native select 1`] = `
       class="relative inline-flex text-[1rem] cursor-pointer w-full"
     >
       <div
-        class="base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] hover:[&_.resetButtonDirty]:visible text-nowrap h-8 w-full after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black cursor-[inherit] p-0 bg-white"
+        class="base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] group text-nowrap h-8 w-full after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black cursor-[inherit] p-0 bg-white"
       >
         <select
           aria-invalid="false"
@@ -65,7 +65,7 @@ exports[`NativeSelect renders native select with the empty option enabled when e
       class="relative inline-flex text-[1rem] cursor-pointer w-full"
     >
       <div
-        class="base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] hover:[&_.resetButtonDirty]:visible text-nowrap h-8 w-full after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black cursor-[inherit] p-0 bg-white"
+        class="base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] group text-nowrap h-8 w-full after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black cursor-[inherit] p-0 bg-white"
       >
         <select
           aria-invalid="false"
diff --git a/packages/base/Select/src/NonNativeSelect/__snapshots__/test.tsx.snap b/packages/base/Select/src/NonNativeSelect/__snapshots__/test.tsx.snap
index 93f28281f7..09fd14dd1b 100644
--- a/packages/base/Select/src/NonNativeSelect/__snapshots__/test.tsx.snap
+++ b/packages/base/Select/src/NonNativeSelect/__snapshots__/test.tsx.snap
@@ -12,7 +12,7 @@ exports[`NonNativeSelect renders 1`] = `
         class="w-[inherit] outline-0"
       >
         <div
-          class="base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] hover:[&_.resetButtonDirty]:visible text-nowrap p-2 h-8 w-full bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black cursor-[inherit] pr-[1.625rem]"
+          class="base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] group text-nowrap p-2 h-8 w-full bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black cursor-[inherit] pr-[1.625rem]"
           role="textbox"
         >
           <input
diff --git a/packages/base/Tagselector/src/TagSelector/__snapshots__/test.tsx.snap b/packages/base/Tagselector/src/TagSelector/__snapshots__/test.tsx.snap
index b4b798c8d1..d1481a59d9 100644
--- a/packages/base/Tagselector/src/TagSelector/__snapshots__/test.tsx.snap
+++ b/packages/base/Tagselector/src/TagSelector/__snapshots__/test.tsx.snap
@@ -15,7 +15,7 @@ exports[`TagSelector disabled render 1`] = `
         class="flex"
       >
         <div
-          class="base-Input base- base-Input relative gap-y gap-x items-center rounded-sm [font-size:_unset] hover:[&_.resetButtonDirty]:visible text-nowrap p-2 w-[18.75rem] bg-gray after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue text-gray flex flex-wrap h-auto py-1 pl-1 cursor-pointer [&>input]:min-w [&>input]:flex-grow [&>input]:w-0 [&>input]:h-6 [&>input]:pl-1 [&>input]:pr-0 [&>input]:mb-0"
+          class="base-Input base- base-Input relative gap-y gap-x items-center rounded-sm [font-size:_unset] group text-nowrap p-2 w-[18.75rem] bg-gray after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue text-gray flex flex-wrap h-auto py-1 pl-1 cursor-pointer [&>input]:min-w [&>input]:flex-grow [&>input]:w-0 [&>input]:h-6 [&>input]:pl-1 [&>input]:pr-0 [&>input]:mb-0"
         >
           <div
             aria-disabled="true"
@@ -83,7 +83,7 @@ exports[`TagSelector preselected value 1`] = `
           class="flex"
         >
           <div
-            class="base-Input base-Input relative gap-y gap-x items-center rounded-sm [font-size:_unset] hover:[&_.resetButtonDirty]:visible text-nowrap p-2 w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black flex flex-wrap h-auto py-1 pl-1 cursor-pointer [&>input]:min-w [&>input]:flex-grow [&>input]:w-0 [&>input]:h-6 [&>input]:pl-1 [&>input]:pr-0 [&>input]:mb-0"
+            class="base-Input base-Input relative gap-y gap-x items-center rounded-sm [font-size:_unset] group text-nowrap p-2 w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black flex flex-wrap h-auto py-1 pl-1 cursor-pointer [&>input]:min-w [&>input]:flex-grow [&>input]:w-0 [&>input]:h-6 [&>input]:pl-1 [&>input]:pr-0 [&>input]:mb-0"
           >
             <div
               class="text-lg transition-none border border-solid rounded-[6.25rem] h-6 max-w inline-flex justify-center items-center cursor-default bg-white group align-middle leading-[inherit] text-graphite border-gray"
@@ -149,7 +149,7 @@ exports[`TagSelector renders 1`] = `
         class="flex"
       >
         <div
-          class="base-Input base-Input relative gap-y gap-x items-center rounded-sm [font-size:_unset] hover:[&_.resetButtonDirty]:visible text-nowrap p-2 w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black flex flex-wrap h-auto py-1 pl-1 cursor-pointer [&>input]:min-w [&>input]:flex-grow [&>input]:w-0 [&>input]:h-6 [&>input]:pl-1 [&>input]:pr-0 [&>input]:mb-0"
+          class="base-Input base-Input relative gap-y gap-x items-center rounded-sm [font-size:_unset] group text-nowrap p-2 w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black flex flex-wrap h-auto py-1 pl-1 cursor-pointer [&>input]:min-w [&>input]:flex-grow [&>input]:w-0 [&>input]:h-6 [&>input]:pl-1 [&>input]:pr-0 [&>input]:mb-0"
         >
           <input
             aria-autocomplete="list"
diff --git a/packages/base/Tagselector/src/TagSelectorInput/__snapshots__/test.tsx.snap b/packages/base/Tagselector/src/TagSelectorInput/__snapshots__/test.tsx.snap
index 679a929125..870f05c27e 100644
--- a/packages/base/Tagselector/src/TagSelectorInput/__snapshots__/test.tsx.snap
+++ b/packages/base/Tagselector/src/TagSelectorInput/__snapshots__/test.tsx.snap
@@ -6,7 +6,7 @@ exports[`TagSelectorInput renders 1`] = `
     class="Picasso-root"
   >
     <div
-      class="base-Input relative gap-y gap-x items-center rounded-sm [font-size:_unset] hover:[&_.resetButtonDirty]:visible text-nowrap p-2 w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black flex flex-wrap h-auto py-1 pl-1 cursor-pointer [&>input]:min-w [&>input]:flex-grow [&>input]:w-0 [&>input]:h-6 [&>input]:pl-1 [&>input]:pr-0 [&>input]:mb-0"
+      class="base-Input relative gap-y gap-x items-center rounded-sm [font-size:_unset] group text-nowrap p-2 w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black flex flex-wrap h-auto py-1 pl-1 cursor-pointer [&>input]:min-w [&>input]:flex-grow [&>input]:w-0 [&>input]:h-6 [&>input]:pl-1 [&>input]:pr-0 [&>input]:mb-0"
     >
       <input
         aria-invalid="false"
diff --git a/packages/base/Timepicker/src/TimePicker/__snapshots__/test.tsx.snap b/packages/base/Timepicker/src/TimePicker/__snapshots__/test.tsx.snap
index 3f18c61ef7..57dcb15364 100644
--- a/packages/base/Timepicker/src/TimePicker/__snapshots__/test.tsx.snap
+++ b/packages/base/Timepicker/src/TimePicker/__snapshots__/test.tsx.snap
@@ -6,7 +6,7 @@ exports[`TimePicker renders 1`] = `
     class="Picasso-root"
   >
     <div
-      class="base-Input base-Input base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] hover:[&_.resetButtonDirty]:visible text-nowrap p-2 h-8 w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black cursor-default"
+      class="base-Input base-Input base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] group text-nowrap p-2 h-8 w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black cursor-default"
     >
       <input
         aria-invalid="false"
diff --git a/packages/picasso-forms/src/Form/__snapshots__/test.tsx.snap b/packages/picasso-forms/src/Form/__snapshots__/test.tsx.snap
index e4c00fe0b5..b9e562e782 100644
--- a/packages/picasso-forms/src/Form/__snapshots__/test.tsx.snap
+++ b/packages/picasso-forms/src/Form/__snapshots__/test.tsx.snap
@@ -17,7 +17,7 @@ exports[`Form renders 1`] = `
           data-field-has-error="false"
         >
           <div
-            class="base-Input base-Input base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] hover:[&_.resetButtonDirty]:visible text-nowrap p-2 h-8 w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black cursor-[inherit]"
+            class="base-Input base-Input base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] group text-nowrap p-2 h-8 w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black cursor-[inherit]"
           >
             <input
               aria-invalid="false"
@@ -68,7 +68,7 @@ exports[`Form renders with an error 1`] = `
           data-field-has-error="true"
         >
           <div
-            class="base-Input base- base-Input base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] hover:[&_.resetButtonDirty]:visible text-nowrap p-2 h-8 w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-red [&:has(:focus)]:after:border-red after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-red text-black cursor-[inherit]"
+            class="base-Input base- base-Input base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] group text-nowrap p-2 h-8 w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-red [&:has(:focus)]:after:border-red after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-red text-black cursor-[inherit]"
           >
             <input
               aria-invalid="true"