feat(WEB-170): edit profile view

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

@@ -0,0 +1,25 @@
+.phone {
+  --react-international-phone-border-color: var(--some-black-color, #757575);
+  --react-international-phone-border-radius: 0.4rem;
+  --react-international-phone-font-size: 1.6rem;
+  --react-international-phone-height: 4rem;
+  --react-international-phone-text-color: color:
+    var(--some-black-color, #757575);
+}
+
+.phone :global(.react-international-phone-input-container) {
+  display: grid;
+  /* r-i-p sets their width dynamically and doesn't respect the width property of its parent */
+  grid-template-columns: 4.7rem minmax(20.3rem, 1fr);
+  width: min(28rem, 100%);
+}
+
+/* react-international-phone only exposes variables to change border-color */
+.phone :global(.react-international-phone-country-selector-button),
+.phone :global(.react-international-phone-input) {
+  border-width: 0.2rem;
+}
+
+.phone :global(.react-international-phone-input) {
+  padding: 0.8rem 1.6rem;
+}