From 18055909ed29b80a1c48195565ef82b966093d1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=9E=C3=B3rarinn=20Gunnar=20=C3=81rnason?=
 <torarinng@gmail.com>
Date: Fri, 22 Nov 2024 12:23:06 +0000
Subject: [PATCH] fix(island-ui): Phone input z-indices stacking (#16875)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../src/lib/PhoneInput/CountryCodeSelect/Components/index.tsx  | 1 -
 .../lib/PhoneInput/CountryCodeSelect/CountryCodeSelect.css.ts  | 1 +
 libs/island-ui/core/src/lib/PhoneInput/PhoneInput.css.ts       | 3 +--
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/libs/island-ui/core/src/lib/PhoneInput/CountryCodeSelect/Components/index.tsx b/libs/island-ui/core/src/lib/PhoneInput/CountryCodeSelect/Components/index.tsx
index 1b82b2bbc344..bce19e04996f 100644
--- a/libs/island-ui/core/src/lib/PhoneInput/CountryCodeSelect/Components/index.tsx
+++ b/libs/island-ui/core/src/lib/PhoneInput/CountryCodeSelect/Components/index.tsx
@@ -242,7 +242,6 @@ export const customStyles = (): StylesConfig<
     left: 0,
     width: '100%',
     height: '100%',
-    zIndex: 1,
   }),
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore make web strict
diff --git a/libs/island-ui/core/src/lib/PhoneInput/CountryCodeSelect/CountryCodeSelect.css.ts b/libs/island-ui/core/src/lib/PhoneInput/CountryCodeSelect/CountryCodeSelect.css.ts
index 4202318bb409..bff4546129b0 100644
--- a/libs/island-ui/core/src/lib/PhoneInput/CountryCodeSelect/CountryCodeSelect.css.ts
+++ b/libs/island-ui/core/src/lib/PhoneInput/CountryCodeSelect/CountryCodeSelect.css.ts
@@ -292,6 +292,7 @@ export const dropdownIndicator = style(
 )
 export const menu = style(
   {
+    zIndex: theme.zIndex.belowModal,
     marginTop: -3,
     borderTopLeftRadius: 0,
     borderTopRightRadius: 0,
diff --git a/libs/island-ui/core/src/lib/PhoneInput/PhoneInput.css.ts b/libs/island-ui/core/src/lib/PhoneInput/PhoneInput.css.ts
index 960a0dc1694f..e532bf0403c8 100644
--- a/libs/island-ui/core/src/lib/PhoneInput/PhoneInput.css.ts
+++ b/libs/island-ui/core/src/lib/PhoneInput/PhoneInput.css.ts
@@ -33,7 +33,7 @@ export const containerSizes = styleVariants(inputMixins.containerSizes)
 export const input = recipe({
   base: {
     ...inputMixins.input,
-    zIndex: 2,
+    position: 'relative',
     marginLeft: '120px',
     '::placeholder': inputMixins.inputPlaceholder,
     ':focus': inputMixins.inputFocus,
@@ -118,7 +118,6 @@ export const hasError = style({
 export const label = recipe({
   base: {
     ...inputMixins.label,
-    zIndex: 2,
     position: 'relative',
     selectors: {
       [`${hasError} &`]: inputMixins.labelErrorState,