feat: guest information form enter details

components/TempDesignSystem/Form/Phone/phone.module.css

@@ -19,6 +19,9 @@
   --react-international-phone-dropdown-top: calc(
     var(--react-international-phone-height) + var(--Spacing-x1)
   );
+  --react-international-phone-dial-code-preview-font-size: var(
+    --typography-Body-Regular-fontSize
+  );
 }
 
 .phone:has(.input:active, .input:focus) {
@@ -46,7 +49,6 @@
   align-self: center;
 }
 
-.inputContainer,
 .select {
   align-content: center;
   background-color: var(--Main-Grey-White);
@@ -93,42 +95,8 @@
 
 .select .dialCode {
   border: none;
-  color: var(--Main-Grey-100);
+  color: var(--UI-Text-High-contrast);
   line-height: 1;
   justify-self: flex-start;
   padding: 0;
 }
-
-.inputContainer:has(.input:not(:focus):placeholder-shown) {
-  gap: 0;
-  grid-template-rows: 1fr;
-}
-
-.inputContainer:has(.input:active, .input:focus) {
-  border-color: var(--Scandic-Blue-90);
-}
-
-.inputContainer:has(.input[data-invalid="true"], .input[aria-invalid="true"]) {
-  border-color: var(--Scandic-Red-60);
-}
-
-.input {
-  background: none;
-  border: none;
-  color: var(--Main-Grey-100);
-  height: 18px;
-  margin: 0;
-  order: 2;
-  overflow: visible;
-  padding: 0;
-}
-
-.input:not(:active, :focus):placeholder-shown {
-  height: 0px;
-}
-
-.input:focus,
-.input:focus:placeholder-shown {
-  height: 18px;
-  outline: none;
-}