fix(phone-input): resolve styling inconsistencies in focus states and hover effects (#25744)

This commit is contained in:
Kartik Labhshetwar authored and GitHub committed 2025-12-10 11:25:38 +00:00
1 parent 34e1122667
commit 6c21a12a88
1 file changed
+6 -6
@@ -77,12 +77,12 @@ function BasePhoneInput({
onChange(`+${val}`);
}}
containerClass={classNames(
"hover:border-emphasis dark:focus:border-emphasis border-default !bg-default rounded-md border focus-within:outline-none focus-within:ring-2 focus-within:ring-brand-default disabled:cursor-not-allowed",
"hover:border-emphasis focus-within:border-emphasis border-default !bg-default rounded-md border focus-within:outline-none focus-within:ring-0 focus-within:ring-brand-default disabled:cursor-not-allowed",
className
)}
inputClass="text-sm focus:ring-0 !bg-default text-default placeholder:text-muted"
buttonClass="text-emphasis !bg-default hover:!bg-emphasis"
searchClass="!text-default !bg-default hover:!bg-emphasis"
buttonClass="text-emphasis !bg-default"
searchClass="!text-default !bg-default"
dropdownClass="!text-default !bg-default"
inputStyle={{ width: "inherit", border: 0 }}
searchStyle={{
@@ -128,13 +128,13 @@ function BasePhoneInputWeb({
onChange(`+${val}`);
}}
containerClass={classNames(
"hover:border-emphasis dark:focus:border-emphasis border-default !bg-default rounded-md border focus-within:outline-none focus-within:ring-2 focus-within:ring-brand-default disabled:cursor-not-allowed",
"hover:border-emphasis focus-within:border-emphasis border-default !bg-default rounded-md border focus-within:outline-none focus-within:ring-0 focus-within:ring-brand-default disabled:cursor-not-allowed",
className
)}
inputClass="text-sm focus:ring-0 !bg-default text-default placeholder:text-muted"
buttonClass="text-emphasis !bg-default hover:!bg-emphasis"
buttonClass="text-emphasis !bg-default"
buttonStyle={{ ...flagButtonStyle }}
searchClass="!text-default !bg-default hover:!bg-emphasis"
searchClass="!text-default !bg-default"
dropdownClass="!text-default !bg-default"
inputStyle={{ width: "inherit", border: 0, ...inputStyle }}
searchStyle={{