diff --git a/.changeset/hip-pandas-bow.md b/.changeset/hip-pandas-bow.md
index 4530c619c2..3de84708d6 100644
--- a/.changeset/hip-pandas-bow.md
+++ b/.changeset/hip-pandas-bow.md
@@ -10,14 +10,11 @@
 
 - display reset button on hover of full width of the input
 
----
 
 ### Select
 
 - implicit update from Input
 
----
-
 ### Autocomplete
 
 - implicit update from Input
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/Calendar/src/Calendar/__snapshots__/test.tsx.snap b/packages/base/Calendar/src/Calendar/__snapshots__/test.tsx.snap
index bdc53bd67e..228957f603 100644
--- a/packages/base/Calendar/src/Calendar/__snapshots__/test.tsx.snap
+++ b/packages/base/Calendar/src/Calendar/__snapshots__/test.tsx.snap
@@ -154,7 +154,7 @@ exports[`Calendar renders 1`] = `
                         data-calendar-day="2019-11-25"
                         data-testid="day-button-25"
                         type="button"
-                        value="Mon Nov 25 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+                        value="Mon Nov 25 2019 00:00:00 GMT+0000 (Συντονισμένη Παγκόσμια Ώρα)"
                       >
                         25
                       </button>
@@ -168,7 +168,7 @@ exports[`Calendar renders 1`] = `
                         data-calendar-day="2019-11-26"
                         data-testid="day-button-26"
                         type="button"
-                        value="Tue Nov 26 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+                        value="Tue Nov 26 2019 00:00:00 GMT+0000 (Συντονισμένη Παγκόσμια Ώρα)"
                       >
                         26
                       </button>
@@ -182,7 +182,7 @@ exports[`Calendar renders 1`] = `
                         data-calendar-day="2019-11-27"
                         data-testid="day-button-27"
                         type="button"
-                        value="Wed Nov 27 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+                        value="Wed Nov 27 2019 00:00:00 GMT+0000 (Συντονισμένη Παγκόσμια Ώρα)"
                       >
                         27
                       </button>
@@ -196,7 +196,7 @@ exports[`Calendar renders 1`] = `
                         data-calendar-day="2019-11-28"
                         data-testid="day-button-28"
                         type="button"
-                        value="Thu Nov 28 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+                        value="Thu Nov 28 2019 00:00:00 GMT+0000 (Συντονισμένη Παγκόσμια Ώρα)"
                       >
                         28
                       </button>
@@ -210,7 +210,7 @@ exports[`Calendar renders 1`] = `
                         data-calendar-day="2019-11-29"
                         data-testid="day-button-29"
                         type="button"
-                        value="Fri Nov 29 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+                        value="Fri Nov 29 2019 00:00:00 GMT+0000 (Συντονισμένη Παγκόσμια Ώρα)"
                       >
                         29
                       </button>
@@ -224,7 +224,7 @@ exports[`Calendar renders 1`] = `
                         data-calendar-day="2019-11-30"
                         data-testid="day-button-30"
                         type="button"
-                        value="Sat Nov 30 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+                        value="Sat Nov 30 2019 00:00:00 GMT+0000 (Συντονισμένη Παγκόσμια Ώρα)"
                       >
                         30
                       </button>
@@ -238,7 +238,7 @@ exports[`Calendar renders 1`] = `
                         data-calendar-day="2019-12-01"
                         data-testid="day-button-1"
                         type="button"
-                        value="Sun Dec 01 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+                        value="Sun Dec 01 2019 00:00:00 GMT+0000 (Συντονισμένη Παγκόσμια Ώρα)"
                       >
                         1
                       </button>
@@ -256,7 +256,7 @@ exports[`Calendar renders 1`] = `
                         data-calendar-day="2019-12-02"
                         data-testid="day-button-2"
                         type="button"
-                        value="Mon Dec 02 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+                        value="Mon Dec 02 2019 00:00:00 GMT+0000 (Συντονισμένη Παγκόσμια Ώρα)"
                       >
                         2
                       </button>
@@ -270,7 +270,7 @@ exports[`Calendar renders 1`] = `
                         data-calendar-day="2019-12-03"
                         data-testid="day-button-3"
                         type="button"
-                        value="Tue Dec 03 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+                        value="Tue Dec 03 2019 00:00:00 GMT+0000 (Συντονισμένη Παγκόσμια Ώρα)"
                       >
                         3
                       </button>
@@ -284,7 +284,7 @@ exports[`Calendar renders 1`] = `
                         data-calendar-day="2019-12-04"
                         data-testid="day-button-4"
                         type="button"
-                        value="Wed Dec 04 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+                        value="Wed Dec 04 2019 00:00:00 GMT+0000 (Συντονισμένη Παγκόσμια Ώρα)"
                       >
                         4
                       </button>
@@ -298,7 +298,7 @@ exports[`Calendar renders 1`] = `
                         data-calendar-day="2019-12-05"
                         data-testid="day-button-5"
                         type="button"
-                        value="Thu Dec 05 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+                        value="Thu Dec 05 2019 00:00:00 GMT+0000 (Συντονισμένη Παγκόσμια Ώρα)"
                       >
                         5
                       </button>
@@ -312,7 +312,7 @@ exports[`Calendar renders 1`] = `
                         data-calendar-day="2019-12-06"
                         data-testid="day-button-6"
                         type="button"
-                        value="Fri Dec 06 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+                        value="Fri Dec 06 2019 00:00:00 GMT+0000 (Συντονισμένη Παγκόσμια Ώρα)"
                       >
                         6
                       </button>
@@ -326,7 +326,7 @@ exports[`Calendar renders 1`] = `
                         data-calendar-day="2019-12-07"
                         data-testid="day-button-7"
                         type="button"
-                        value="Sat Dec 07 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+                        value="Sat Dec 07 2019 00:00:00 GMT+0000 (Συντονισμένη Παγκόσμια Ώρα)"
                       >
                         7
                       </button>
@@ -340,7 +340,7 @@ exports[`Calendar renders 1`] = `
                         data-calendar-day="2019-12-08"
                         data-testid="day-button-8"
                         type="button"
-                        value="Sun Dec 08 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+                        value="Sun Dec 08 2019 00:00:00 GMT+0000 (Συντονισμένη Παγκόσμια Ώρα)"
                       >
                         8
                       </button>
@@ -358,7 +358,7 @@ exports[`Calendar renders 1`] = `
                         data-calendar-day="2019-12-09"
                         data-testid="day-button-9"
                         type="button"
-                        value="Mon Dec 09 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+                        value="Mon Dec 09 2019 00:00:00 GMT+0000 (Συντονισμένη Παγκόσμια Ώρα)"
                       >
                         9
                       </button>
@@ -372,7 +372,7 @@ exports[`Calendar renders 1`] = `
                         data-calendar-day="2019-12-10"
                         data-testid="day-button-10"
                         type="button"
-                        value="Tue Dec 10 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+                        value="Tue Dec 10 2019 00:00:00 GMT+0000 (Συντονισμένη Παγκόσμια Ώρα)"
                       >
                         10
                       </button>
@@ -386,7 +386,7 @@ exports[`Calendar renders 1`] = `
                         data-calendar-day="2019-12-11"
                         data-testid="day-button-11"
                         type="button"
-                        value="Wed Dec 11 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+                        value="Wed Dec 11 2019 00:00:00 GMT+0000 (Συντονισμένη Παγκόσμια Ώρα)"
                       >
                         11
                       </button>
@@ -400,7 +400,7 @@ exports[`Calendar renders 1`] = `
                         data-calendar-day="2019-12-12"
                         data-testid="day-button-selected"
                         type="button"
-                        value="Thu Dec 12 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+                        value="Thu Dec 12 2019 00:00:00 GMT+0000 (Συντονισμένη Παγκόσμια Ώρα)"
                       >
                         12
                       </button>
@@ -414,7 +414,7 @@ exports[`Calendar renders 1`] = `
                         data-calendar-day="2019-12-13"
                         data-testid="day-button-13"
                         type="button"
-                        value="Fri Dec 13 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+                        value="Fri Dec 13 2019 00:00:00 GMT+0000 (Συντονισμένη Παγκόσμια Ώρα)"
                       >
                         13
                       </button>
@@ -428,7 +428,7 @@ exports[`Calendar renders 1`] = `
                         data-calendar-day="2019-12-14"
                         data-testid="day-button-14"
                         type="button"
-                        value="Sat Dec 14 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+                        value="Sat Dec 14 2019 00:00:00 GMT+0000 (Συντονισμένη Παγκόσμια Ώρα)"
                       >
                         14
                       </button>
@@ -442,7 +442,7 @@ exports[`Calendar renders 1`] = `
                         data-calendar-day="2019-12-15"
                         data-testid="day-button-15"
                         type="button"
-                        value="Sun Dec 15 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+                        value="Sun Dec 15 2019 00:00:00 GMT+0000 (Συντονισμένη Παγκόσμια Ώρα)"
                       >
                         15
                       </button>
@@ -460,7 +460,7 @@ exports[`Calendar renders 1`] = `
                         data-calendar-day="2019-12-16"
                         data-testid="day-button-16"
                         type="button"
-                        value="Mon Dec 16 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+                        value="Mon Dec 16 2019 00:00:00 GMT+0000 (Συντονισμένη Παγκόσμια Ώρα)"
                       >
                         16
                       </button>
@@ -474,7 +474,7 @@ exports[`Calendar renders 1`] = `
                         data-calendar-day="2019-12-17"
                         data-testid="day-button-17"
                         type="button"
-                        value="Tue Dec 17 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+                        value="Tue Dec 17 2019 00:00:00 GMT+0000 (Συντονισμένη Παγκόσμια Ώρα)"
                       >
                         17
                       </button>
@@ -488,7 +488,7 @@ exports[`Calendar renders 1`] = `
                         data-calendar-day="2019-12-18"
                         data-testid="day-button-18"
                         type="button"
-                        value="Wed Dec 18 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+                        value="Wed Dec 18 2019 00:00:00 GMT+0000 (Συντονισμένη Παγκόσμια Ώρα)"
                       >
                         18
                       </button>
@@ -502,7 +502,7 @@ exports[`Calendar renders 1`] = `
                         data-calendar-day="2019-12-19"
                         data-testid="day-button-19"
                         type="button"
-                        value="Thu Dec 19 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+                        value="Thu Dec 19 2019 00:00:00 GMT+0000 (Συντονισμένη Παγκόσμια Ώρα)"
                       >
                         19
                       </button>
@@ -516,7 +516,7 @@ exports[`Calendar renders 1`] = `
                         data-calendar-day="2019-12-20"
                         data-testid="day-button-20"
                         type="button"
-                        value="Fri Dec 20 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+                        value="Fri Dec 20 2019 00:00:00 GMT+0000 (Συντονισμένη Παγκόσμια Ώρα)"
                       >
                         20
                       </button>
@@ -530,7 +530,7 @@ exports[`Calendar renders 1`] = `
                         data-calendar-day="2019-12-21"
                         data-testid="day-button-21"
                         type="button"
-                        value="Sat Dec 21 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+                        value="Sat Dec 21 2019 00:00:00 GMT+0000 (Συντονισμένη Παγκόσμια Ώρα)"
                       >
                         21
                       </button>
@@ -544,7 +544,7 @@ exports[`Calendar renders 1`] = `
                         data-calendar-day="2019-12-22"
                         data-testid="day-button-22"
                         type="button"
-                        value="Sun Dec 22 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+                        value="Sun Dec 22 2019 00:00:00 GMT+0000 (Συντονισμένη Παγκόσμια Ώρα)"
                       >
                         22
                       </button>
@@ -562,7 +562,7 @@ exports[`Calendar renders 1`] = `
                         data-calendar-day="2019-12-23"
                         data-testid="day-button-23"
                         type="button"
-                        value="Mon Dec 23 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+                        value="Mon Dec 23 2019 00:00:00 GMT+0000 (Συντονισμένη Παγκόσμια Ώρα)"
                       >
                         23
                       </button>
@@ -576,7 +576,7 @@ exports[`Calendar renders 1`] = `
                         data-calendar-day="2019-12-24"
                         data-testid="day-button-24"
                         type="button"
-                        value="Tue Dec 24 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+                        value="Tue Dec 24 2019 00:00:00 GMT+0000 (Συντονισμένη Παγκόσμια Ώρα)"
                       >
                         24
                       </button>
@@ -590,7 +590,7 @@ exports[`Calendar renders 1`] = `
                         data-calendar-day="2019-12-25"
                         data-testid="day-button-25"
                         type="button"
-                        value="Wed Dec 25 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+                        value="Wed Dec 25 2019 00:00:00 GMT+0000 (Συντονισμένη Παγκόσμια Ώρα)"
                       >
                         25
                       </button>
@@ -604,7 +604,7 @@ exports[`Calendar renders 1`] = `
                         data-calendar-day="2019-12-26"
                         data-testid="day-button-26"
                         type="button"
-                        value="Thu Dec 26 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+                        value="Thu Dec 26 2019 00:00:00 GMT+0000 (Συντονισμένη Παγκόσμια Ώρα)"
                       >
                         26
                       </button>
@@ -618,7 +618,7 @@ exports[`Calendar renders 1`] = `
                         data-calendar-day="2019-12-27"
                         data-testid="day-button-27"
                         type="button"
-                        value="Fri Dec 27 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+                        value="Fri Dec 27 2019 00:00:00 GMT+0000 (Συντονισμένη Παγκόσμια Ώρα)"
                       >
                         27
                       </button>
@@ -632,7 +632,7 @@ exports[`Calendar renders 1`] = `
                         data-calendar-day="2019-12-28"
                         data-testid="day-button-28"
                         type="button"
-                        value="Sat Dec 28 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+                        value="Sat Dec 28 2019 00:00:00 GMT+0000 (Συντονισμένη Παγκόσμια Ώρα)"
                       >
                         28
                       </button>
@@ -646,7 +646,7 @@ exports[`Calendar renders 1`] = `
                         data-calendar-day="2019-12-29"
                         data-testid="day-button-29"
                         type="button"
-                        value="Sun Dec 29 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+                        value="Sun Dec 29 2019 00:00:00 GMT+0000 (Συντονισμένη Παγκόσμια Ώρα)"
                       >
                         29
                       </button>
@@ -664,7 +664,7 @@ exports[`Calendar renders 1`] = `
                         data-calendar-day="2019-12-30"
                         data-testid="day-button-30"
                         type="button"
-                        value="Mon Dec 30 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+                        value="Mon Dec 30 2019 00:00:00 GMT+0000 (Συντονισμένη Παγκόσμια Ώρα)"
                       >
                         30
                       </button>
@@ -678,7 +678,7 @@ exports[`Calendar renders 1`] = `
                         data-calendar-day="2019-12-31"
                         data-testid="day-button-31"
                         type="button"
-                        value="Tue Dec 31 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
+                        value="Tue Dec 31 2019 00:00:00 GMT+0000 (Συντονισμένη Παγκόσμια Ώρα)"
                       >
                         31
                       </button>
@@ -692,7 +692,7 @@ exports[`Calendar renders 1`] = `
                         data-calendar-day="2020-01-01"
                         data-testid="day-button-1"
                         type="button"
-                        value="Wed Jan 01 2020 00:00:00 GMT+0000 (Coordinated Universal Time)"
+                        value="Wed Jan 01 2020 00:00:00 GMT+0000 (Συντονισμένη Παγκόσμια Ώρα)"
                       >
                         1
                       </button>
@@ -706,7 +706,7 @@ exports[`Calendar renders 1`] = `
                         data-calendar-day="2020-01-02"
                         data-testid="day-button-2"
                         type="button"
-                        value="Thu Jan 02 2020 00:00:00 GMT+0000 (Coordinated Universal Time)"
+                        value="Thu Jan 02 2020 00:00:00 GMT+0000 (Συντονισμένη Παγκόσμια Ώρα)"
                       >
                         2
                       </button>
@@ -720,7 +720,7 @@ exports[`Calendar renders 1`] = `
                         data-calendar-day="2020-01-03"
                         data-testid="day-button-3"
                         type="button"
-                        value="Fri Jan 03 2020 00:00:00 GMT+0000 (Coordinated Universal Time)"
+                        value="Fri Jan 03 2020 00:00:00 GMT+0000 (Συντονισμένη Παγκόσμια Ώρα)"
                       >
                         3
                       </button>
@@ -734,7 +734,7 @@ exports[`Calendar renders 1`] = `
                         data-calendar-day="2020-01-04"
                         data-testid="day-button-4"
                         type="button"
-                        value="Sat Jan 04 2020 00:00:00 GMT+0000 (Coordinated Universal Time)"
+                        value="Sat Jan 04 2020 00:00:00 GMT+0000 (Συντονισμένη Παγκόσμια Ώρα)"
                       >
                         4
                       </button>
@@ -748,7 +748,7 @@ exports[`Calendar renders 1`] = `
                         data-calendar-day="2020-01-05"
                         data-testid="day-button-5"
                         type="button"
-                        value="Sun Jan 05 2020 00:00:00 GMT+0000 (Coordinated Universal Time)"
+                        value="Sun Jan 05 2020 00:00:00 GMT+0000 (Συντονισμένη Παγκόσμια Ώρα)"
                       >
                         5
                       </button>
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 4ff249f36a..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 && 'group-focus:visible group-hover:visible'
+      hasValue && 'peer-focus:visible peer-active:visible group-hover:visible'
     )}
   >
     <ButtonCircular
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"