From 32add9da65484318a5542eddfd7d7f7544b6ad86 Mon Sep 17 00:00:00 2001
From: Gary Kang <42440452+kangaree@users.noreply.github.com>
Date: Tue, 22 Oct 2024 15:51:12 -0400
Subject: [PATCH] [PLAY-1548] Upgrade intl-tel-input to Latest and Make Fixes
 (#3791)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**What does this PR do?**

- Bump intl-tel-input from 18.0.15 to 24.6.0

From the package update:
- the drop down arrow and the area code switch places so area code is to
the left of the number input
- flag sizes are smaller - from "20 x 15" to "16 x 12"
- the "active" checkmark in the dropdown was removed
- more countries
- placeholders remove the leading 0's ("070 123 4567" becomes "70 123
4567")
- when using preferredCountries, there is no "separator" between the
preferred and the rest

Custom fixes made:
- Update the
`playbook/app/pb_kits/playbook/pb_phone_number_input/intlTelInput.scss`
copy. See
[PLAY-1506](https://runway.powerhrg.com/backlog_items/PLAY-1506) for
more details- we added it so we could theme properly.
- Use intlTelInput from package instead of window. Use
'intl-tel-input/build/js/intlTelInputWithUtils.js'
- Update class names (e.g., flag -> country)
- Turn off "country search" default
- Turn off "format as you type" default as there are issues with
validation
- Turn off "globe" blank default. Set initial country fallback to match
current behavior- otherwise a blank "globe" shows and you don't have a
country area code selected
- Make CSS edits for this globe, even though it's not seen.
- Change dropdown to not be the full width of the input
- Use utils so a placeholder is added
- Make various CSS fixes for dropdown, selected country, and  input
- Change "preferredCountries" to new "countryOrder" prop
- Fix type errors
- The "country" button area hover matches the rest of the input.
Previously, it was ever so slightly darker (you have to zoom in to
notice). There is still a cursor button, though.
- Set padding by using CSS variables to fix Phone Number Inputs in
Dialogs

**Screenshots:**
![Screenshot 2024-10-21 at 9 27
41 AM](https://github.com/user-attachments/assets/43efbff7-19e4-45c2-8e39-cc81876ef211)
![Screenshot 2024-10-21 at 9 21
00 AM](https://github.com/user-attachments/assets/73e08c9d-72e8-4e7a-bc8b-e583d582ad9e)


**How to test?** Steps to confirm the desired behavior:
1. Go to the Phone Number Input Kit
2. Test all doc examples for both Rails and React
3. Test on Nitro.


#### Checklist:
- [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new
kit`, `deprecated`, or `breaking`. See [Changelog &
Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels)
for details.
- [x] **DEPLOY** I have added the `milano` label to show I'm ready for a
review.
---
 .../_phone_number_input.scss                  |  104 +-
 .../_phone_number_input.tsx                   |   21 +-
 ..._phone_number_input_preferred_countries.md |    2 +-
 .../pb_phone_number_input/intlTelInput.scss   | 1780 ++++++++---------
 .../playbook/pb_phone_number_input/types.d.ts |    5 +-
 playbook/package.json                         |    2 +-
 yarn.lock                                     |    8 +-
 7 files changed, 960 insertions(+), 962 deletions(-)

diff --git a/playbook/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss b/playbook/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss
index 6b6adfb8ba..bee3513ac0 100644
--- a/playbook/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss
+++ b/playbook/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss
@@ -5,7 +5,54 @@ $transform-rotate-deg: 135deg;
 $dropdown-min-width: 340px;
 $flag-min-resolution: 192dpi;
 
+:root {
+  --iti-arrow-padding: #{$space_xs};
+  --iti-spacer-horizontal: #{$space_sm};
+  --iti-path-flags-1x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags.png");
+  --iti-path-flags-2x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags@2x.png");
+  --iti-path-globe-1x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/globe.png");
+  --iti-path-globe-2x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/globe@2x.png");
+}
+
 .pb_phone_number_input {
+  .iti {
+    width: 100%;
+  }
+
+  .iti__flag {
+    margin-right: 6px;
+  }
+
+  .iti__a11y-text {
+    display: none;
+  }
+
+  .iti__selected-dial-code {
+    font-family: $font_family_base;
+    font-size: $font_base;
+    line-height: 1.5;
+    letter-spacing: $lspace_normal;
+    font-weight: $regular;
+    font-style: normal;
+    text-rendering: optimizeLegibility;
+    -moz-font-feature-settings: "liga" on;
+    color: $charcoal;
+  }
+
+  // iti-spacer-horizontal's default is 8px, or $space_xs 
+  .iti__country-list .iti__flag, .iti__country-name {
+    margin-right: $space_xs;
+  }
+  [dir=rtl] .iti__country-list .iti__flag, [dir=rtl] .iti__country-name {
+    margin-right: 0;
+    margin-left: $space_xs;
+  }
+
+  .iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country-primary:hover,
+  .iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country:has(+ .iti__dropdown-content:hover) .iti__selected-country-primary {
+    background-color: transparent;
+  }
+
   input::placeholder {
     color: $focus_input_light;
   }
@@ -15,13 +62,13 @@ $flag-min-resolution: 192dpi;
       border-color: $primary !important;
     }
 
-    .iti__selected-flag:focus-visible {
+    .iti__selected-country:focus-visible {
       outline-style: none;
     }
   }
 
   .iti__country {
-    padding: 5px 10px 5px 16px;
+    padding: 5px $space_xs 5px $space_sm;
     transition: $transition_default;
   }
 
@@ -29,8 +76,23 @@ $flag-min-resolution: 192dpi;
     border-bottom: 1px solid $border_light !important;  
   }
 
-  .iti__selected-flag {
-    padding: 0 $space_xxs 0 $space_sm;
+  .iti__selected-country-primary {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .iti__flag {
+      margin-right: 0;
+    }
+  }
+
+  .iti__selected-country {
+    position: absolute;
+    top: 0;
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+    border-width: 0;
     border-radius: $space_xxs; 
 
     &[aria-expanded="true"] {
@@ -51,24 +113,24 @@ $flag-min-resolution: 192dpi;
     }
   }
 
-  .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
-    background-color: $focus_input_light;
-  }
-
-  .iti__flag-container:hover + .text_input {
+  .iti__country-container:hover + .text_input {
     background-color: $focus_input_light;
   }
 
   .iti__flag {
-    background-image: url("https://unpkg.com/playbook-ui@14.2.0-alpha.fixphonenumberinputflag3631/dist/assets/flags.png");
+    background-image: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags.png");
     border-radius: 1px;
   }
 
-  .iti--separate-dial-code {
-    width: 100%;
+  .iti__flag.iti__globe {
+    background-image: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/globe.png");
+    background-position: center;
+    height: 16px;
+    width: 16px;
+    background-size: 16px 16px;
   }
 
-  .iti--separate-dial-code .iti__selected-flag {
+  .iti--show-flags .iti__selected-country {
     background-color: rgba($white, $opacity_1);
   }
 
@@ -136,10 +198,12 @@ $flag-min-resolution: 192dpi;
   .iti__dropdown-content {
     border-radius: $space_xs; 
     border: 1px solid $border_light !important;
+    position: absolute;
+    top: 100%;
   }
 
   &.dark {
-    .iti--allow-dropdown .iti__flag-container {
+    .iti--allow-dropdown .iti__country-container {
       background-color: rgba($white, 0);
 
       &:hover {
@@ -149,13 +213,13 @@ $flag-min-resolution: 192dpi;
           background-color: rgba($white, 0.15);
         }
 
-        .iti__selected-flag {
+        .iti__selected-country {
           background-color: rgba($white, 0);
         }
       }
     }
 
-    .iti__selected-flag {
+    .iti__selected-country {
       background-color: rgba($white, 0);
       color: $white;
     }
@@ -196,11 +260,15 @@ $flag-min-resolution: 192dpi;
         background-color: rgba($white, 0.025) !important;
       }
     }
-  }
 
+    .iti__selected-dial-code {
+      color: $white;
+    }
+  }
+  
   @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: $flag-min-resolution) {
     .iti__flag {
-      background-image: url("https://unpkg.com/playbook-ui@14.2.0-alpha.fixphonenumberinputflag3631/dist/assets/flags.png");
+      background-image: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags@2x.png");
     }
   }
 }
diff --git a/playbook/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx b/playbook/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx
index ecdf4f4f7b..5cd84a7d14 100644
--- a/playbook/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx
+++ b/playbook/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx
@@ -1,8 +1,7 @@
 import React, { forwardRef, useEffect, useRef, useState, useImperativeHandle } from 'react'
 import classnames from 'classnames'
 
-import intlTelInput from 'intl-tel-input'
-import 'intl-tel-input/build/js/utils.js'
+import intlTelInput from 'intl-tel-input/build/js/intlTelInputWithUtils.js'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
@@ -50,7 +49,7 @@ const formatToGlobalCountryName = (countryName: string) => {
 }
 
 const formatAllCountries = () => {
-  const countryData = window.intlTelInputGlobals.getCountryData()
+  const countryData = intlTelInput.getCountryData()
 
   for (let i = 0; i < countryData.length; i++) {
     const country = countryData[i]
@@ -214,14 +213,24 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
   // This also Fixes things for our react_component rendering on the Rails Side
   useEffect(formatAllCountries, [])
 
+  // If an initial country is not specified, the "globe" icon will show
+  // Always set a country
+  const fallbackCountry =
+    preferredCountries.length > 0 ? preferredCountries[0] :
+      onlyCountries.length > 0 ? onlyCountries.sort()[0] :
+        "af";
+
   useEffect(() => {
     const telInputInit = intlTelInput(inputRef.current, {
       separateDialCode: true,
-      preferredCountries,
+      countryOrder: preferredCountries,
       allowDropdown: !disabled,
       autoInsertDialCode: false,
-      initialCountry,
-      onlyCountries
+      initialCountry: initialCountry || fallbackCountry,
+      onlyCountries,
+      countrySearch: false,
+      fixDropdownWidth: false,
+      formatAsYouType: false,
     })
 
     inputRef.current.addEventListener("countrychange", (evt: Event) => {
diff --git a/playbook/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md b/playbook/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md
index 01c22b7dff..0613f5ed32 100644
--- a/playbook/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md
+++ b/playbook/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md
@@ -1 +1 @@
-Preferred countries will display in the order they are listed with the first country preselected, and all non-preferred countries listed alphabetically below a section separator within the remaining dropdown.
+Preferred countries will display in the order they are listed with the first country preselected, and all non-preferred countries listed alphabetically below in the remaining dropdown.
diff --git a/playbook/app/pb_kits/playbook/pb_phone_number_input/intlTelInput.scss b/playbook/app/pb_kits/playbook/pb_phone_number_input/intlTelInput.scss
index 1140d3a9bd..933dbe8e32 100644
--- a/playbook/app/pb_kits/playbook/pb_phone_number_input/intlTelInput.scss
+++ b/playbook/app/pb_kits/playbook/pb_phone_number_input/intlTelInput.scss
@@ -1,4 +1,29 @@
 /* @import "intl-tel-input/build/css/intlTelInput.css"; */
+// If you update intl-tel-input, make sure to move this over
+// And replace the relative path urls with the images from unpkg
+:root {
+  --iti-hover-color: rgba(0, 0, 0, 0.05);
+  --iti-border-color: #ccc;
+  --iti-dialcode-color: #999;
+  --iti-dropdown-bg: white;
+  --iti-spacer-horizontal: 8px;
+  --iti-flag-height: 12px;
+  --iti-flag-width: 16px;
+  --iti-border-width: 1px;
+  --iti-arrow-height: 4px;
+  --iti-arrow-width: 6px;
+  --iti-triangle-border: calc(var(--iti-arrow-width) / 2);
+  --iti-arrow-padding: 6px;
+  --iti-arrow-color: #555;
+  --iti-path-flags-1x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags.png");
+  --iti-path-flags-2x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags@2x.png");
+  --iti-path-globe-1x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/globe.png");
+  --iti-path-globe-2x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/globe@2x.png");
+  --iti-flag-sprite-width: 3904px;
+  --iti-flag-sprite-height: 12px;
+  --iti-mobile-popup-margin: 30px;
+}
+
 .iti {
   position: relative;
   display: inline-block;
@@ -12,70 +37,95 @@
 .iti__v-hide {
   visibility: hidden;
 }
+.iti__a11y-text {
+  width: 1px;
+  height: 1px;
+  clip: rect(1px, 1px, 1px, 1px);
+  overflow: hidden;
+  position: absolute;
+}
 .iti input.iti__tel-input,
 .iti input.iti__tel-input[type=text],
 .iti input.iti__tel-input[type=tel] {
   position: relative;
   z-index: 0;
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-  padding-right: 36px;
-  margin-right: 0;
+  margin: 0 !important;
 }
-.iti__flag-container {
+.iti__country-container {
   position: absolute;
   top: 0;
   bottom: 0;
-  right: 0;
-  padding: 1px;
+  padding: var(--iti-border-width);
 }
-.iti__selected-flag {
+.iti__selected-country {
   z-index: 1;
   position: relative;
   display: flex;
   align-items: center;
   height: 100%;
-  padding: 0 6px 0 8px;
+  background: none;
+  border: 0;
+  margin: 0;
+  padding: 0;
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+  border-radius: 0;
+  font-weight: inherit;
+  line-height: inherit;
+  text-decoration: none;
+}
+.iti__selected-country-primary {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 var(--iti-arrow-padding) 0 var(--iti-spacer-horizontal);
 }
 .iti__arrow {
-  margin-left: 6px;
+  margin-left: var(--iti-arrow-padding);
   width: 0;
   height: 0;
-  border-left: 3px solid transparent;
-  border-right: 3px solid transparent;
-  border-top: 4px solid #555;
+  border-left: var(--iti-triangle-border) solid transparent;
+  border-right: var(--iti-triangle-border) solid transparent;
+  border-top: var(--iti-arrow-height) solid var(--iti-arrow-color);
 }
 [dir=rtl] .iti__arrow {
-  margin-right: 6px;
+  margin-right: var(--iti-arrow-padding);
   margin-left: 0;
 }
 .iti__arrow--up {
   border-top: none;
-  border-bottom: 4px solid #555;
+  border-bottom: var(--iti-arrow-height) solid var(--iti-arrow-color);
 }
 .iti__dropdown-content {
+  border-radius: 3px;
+  background-color: var(--iti-dropdown-bg);
+}
+.iti--inline-dropdown .iti__dropdown-content {
   position: absolute;
   z-index: 2;
-  margin-left: -1px;
+  margin-top: 3px;
+  margin-left: calc(var(--iti-border-width) * -1);
+  border: var(--iti-border-width) solid var(--iti-border-color);
   box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
-  background-color: white;
-  border: 1px solid #ccc;
-  max-height: 200px;
-  overflow-y: scroll;
-  -webkit-overflow-scrolling: touch;
-}
-.iti__dropdown-content--dropup {
-  bottom: 100%;
-  margin-bottom: -1px;
 }
 .iti__search-input {
   width: 100%;
   border-width: 0;
+  border-radius: 3px;
+}
+.iti__search-input + .iti__country-list {
+  border-top: 1px solid var(--iti-border-color);
 }
 .iti__country-list {
   list-style: none;
   padding: 0;
   margin: 0;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+}
+.iti--inline-dropdown .iti__country-list {
+  max-height: 185px;
 }
 .iti--flexible-dropdown-width .iti__country-list {
   white-space: nowrap;
@@ -85,90 +135,45 @@
     white-space: normal;
   }
 }
-.iti__flag-box {
-  display: inline-block;
-  width: 20px;
-}
-.iti__divider {
-  padding-bottom: 5px;
-  margin-bottom: 5px;
-  border-bottom: 1px solid #ccc;
-}
 .iti__country {
   display: flex;
   align-items: center;
-  padding: 5px 10px;
+  padding: 8px var(--iti-spacer-horizontal);
   outline: none;
 }
 .iti__dial-code {
-  color: #999;
+  color: var(--iti-dialcode-color);
 }
 .iti__country.iti__highlight {
-  background-color: rgba(0, 0, 0, 0.05);
-}
-.iti__flag-box, .iti__country-name {
-  margin-right: 6px;
+  background-color: var(--iti-hover-color);
 }
-[dir=rtl] .iti__flag-box, [dir=rtl] .iti__country-name {
-  margin-right: 0;
-  margin-left: 6px;
-}
-.iti--allow-dropdown input.iti__tel-input,
-.iti--allow-dropdown input.iti__tel-input[type=text],
-.iti--allow-dropdown input.iti__tel-input[type=tel], .iti--separate-dial-code input.iti__tel-input,
-.iti--separate-dial-code input.iti__tel-input[type=text],
-.iti--separate-dial-code input.iti__tel-input[type=tel] {
-  padding-right: 6px;
-  padding-left: 52px;
-  margin-left: 0;
+.iti__country-list .iti__flag, .iti__country-name {
+  margin-right: var(--iti-spacer-horizontal);
 }
-[dir=rtl] .iti--allow-dropdown input.iti__tel-input,
-[dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=text],
-[dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=tel], [dir=rtl] .iti--separate-dial-code input.iti__tel-input,
-[dir=rtl] .iti--separate-dial-code input.iti__tel-input[type=text],
-[dir=rtl] .iti--separate-dial-code input.iti__tel-input[type=tel] {
-  padding-right: 52px;
-  padding-left: 6px;
+[dir=rtl] .iti__country-list .iti__flag, [dir=rtl] .iti__country-name {
   margin-right: 0;
+  margin-left: var(--iti-spacer-horizontal);
 }
-.iti--allow-dropdown .iti__flag-container, .iti--separate-dial-code .iti__flag-container {
-  right: auto;
-  left: 0;
-}
-[dir=rtl] .iti--allow-dropdown .iti__flag-container, [dir=rtl] .iti--separate-dial-code .iti__flag-container {
-  right: 0;
-  left: auto;
-}
-.iti--allow-dropdown .iti__flag-container:hover {
+.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])):hover, .iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])):hover button {
   cursor: pointer;
 }
-.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
-  background-color: rgba(0, 0, 0, 0.05);
-}
-.iti--allow-dropdown .iti__flag-container:has(+ input[disabled]):hover,
-.iti--allow-dropdown .iti__flag-container:has(+ input[readonly]):hover {
-  cursor: default;
+.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country-primary:hover,
+.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country:has(+ .iti__dropdown-content:hover) .iti__selected-country-primary {
+  background-color: var(--iti-hover-color);
 }
-.iti--allow-dropdown .iti__flag-container:has(+ input[disabled]):hover .iti__selected-flag,
-.iti--allow-dropdown .iti__flag-container:has(+ input[readonly]):hover .iti__selected-flag {
-  background-color: transparent;
+.iti .iti__selected-dial-code {
+  margin-left: 4px;
 }
-.iti--separate-dial-code .iti__selected-flag {
-  background-color: rgba(0, 0, 0, 0.05);
-}
-.iti--separate-dial-code.iti--show-flags .iti__selected-dial-code {
-  margin-left: 6px;
-}
-[dir=rtl] .iti--separate-dial-code.iti--show-flags .iti__selected-dial-code {
+[dir=rtl] .iti .iti__selected-dial-code {
   margin-left: 0;
-  margin-right: 6px;
+  margin-right: 4px;
 }
 .iti--container {
-  position: absolute;
+  position: fixed;
   top: -1000px;
   left: -1000px;
   z-index: 1060;
-  padding: 1px;
+  padding: var(--iti-border-width);
 }
 .iti--container:hover {
   cursor: pointer;
@@ -181,15 +186,14 @@
   left: 0;
   right: 0;
   position: fixed;
-  padding: 30px;
+  padding: var(--iti-mobile-popup-margin);
   display: flex;
   flex-direction: column;
-  justify-content: center;
-}
-.iti--fullscreen-popup.iti--container.iti--country-search {
   justify-content: flex-start;
 }
 .iti--fullscreen-popup .iti__dropdown-content {
+  display: flex;
+  flex-direction: column;
   max-height: 100%;
   position: relative;
 }
@@ -199,1092 +203,1006 @@
 }
 
 .iti__flag {
-  width: 20px;
-}
-.iti__flag.iti__be {
-  width: 18px;
-}
-.iti__flag.iti__ch {
-  width: 15px;
-}
-.iti__flag.iti__mc {
-  width: 19px;
-}
-.iti__flag.iti__ne {
-  width: 18px;
-}
-.iti__flag.iti__np {
-  width: 13px;
-}
-.iti__flag.iti__va {
-  width: 15px;
-}
-@media (min-resolution: 2x) {
-  .iti__flag {
-    background-size: 5762px 15px;
-  }
-}
-.iti__flag.iti__ac {
-  height: 10px;
-  background-position: 0px 0px;
-}
-.iti__flag.iti__ad {
-  height: 14px;
-  background-position: -22px 0px;
-}
-.iti__flag.iti__ae {
-  height: 10px;
-  background-position: -44px 0px;
-}
-.iti__flag.iti__af {
-  height: 14px;
-  background-position: -66px 0px;
-}
-.iti__flag.iti__ag {
-  height: 14px;
-  background-position: -88px 0px;
-}
-.iti__flag.iti__ai {
-  height: 10px;
-  background-position: -110px 0px;
-}
-.iti__flag.iti__al {
-  height: 15px;
-  background-position: -132px 0px;
-}
-.iti__flag.iti__am {
-  height: 10px;
-  background-position: -154px 0px;
-}
-.iti__flag.iti__ao {
-  height: 14px;
-  background-position: -176px 0px;
-}
-.iti__flag.iti__aq {
-  height: 14px;
-  background-position: -198px 0px;
-}
-.iti__flag.iti__ar {
-  height: 13px;
-  background-position: -220px 0px;
-}
-.iti__flag.iti__as {
-  height: 10px;
-  background-position: -242px 0px;
-}
-.iti__flag.iti__at {
-  height: 14px;
-  background-position: -264px 0px;
-}
-.iti__flag.iti__au {
-  height: 10px;
-  background-position: -286px 0px;
-}
-.iti__flag.iti__aw {
-  height: 14px;
-  background-position: -308px 0px;
-}
-.iti__flag.iti__ax {
-  height: 13px;
-  background-position: -330px 0px;
-}
-.iti__flag.iti__az {
-  height: 10px;
-  background-position: -352px 0px;
-}
-.iti__flag.iti__ba {
-  height: 10px;
-  background-position: -374px 0px;
-}
-.iti__flag.iti__bb {
-  height: 14px;
-  background-position: -396px 0px;
+  --iti-flag-offset: 100px;
+  height: var(--iti-flag-height);
+  width: var(--iti-flag-width);
+  border-radius: 1px;
+  box-shadow: 0px 0px 1px 0px #888;
+  background-image: var(--iti-path-flags-1x);
+  background-repeat: no-repeat;
+  background-position: var(--iti-flag-offset) 0;
+  background-size: var(--iti-flag-sprite-width) var(--iti-flag-sprite-height);
 }
-.iti__flag.iti__bd {
-  height: 12px;
-  background-position: -418px 0px;
+
+.iti__ac {
+  --iti-flag-offset: 0px;
 }
-.iti__flag.iti__be {
-  height: 15px;
-  background-position: -440px 0px;
+
+.iti__ad {
+  --iti-flag-offset: -16px;
 }
-.iti__flag.iti__bf {
-  height: 14px;
-  background-position: -460px 0px;
+
+.iti__ae {
+  --iti-flag-offset: -32px;
 }
-.iti__flag.iti__bg {
-  height: 12px;
-  background-position: -482px 0px;
+
+.iti__af {
+  --iti-flag-offset: -48px;
 }
-.iti__flag.iti__bh {
-  height: 12px;
-  background-position: -504px 0px;
+
+.iti__ag {
+  --iti-flag-offset: -64px;
 }
-.iti__flag.iti__bi {
-  height: 12px;
-  background-position: -526px 0px;
+
+.iti__ai {
+  --iti-flag-offset: -80px;
 }
-.iti__flag.iti__bj {
-  height: 14px;
-  background-position: -548px 0px;
+
+.iti__al {
+  --iti-flag-offset: -96px;
 }
-.iti__flag.iti__bl {
-  height: 14px;
-  background-position: -570px 0px;
+
+.iti__am {
+  --iti-flag-offset: -112px;
 }
-.iti__flag.iti__bm {
-  height: 10px;
-  background-position: -592px 0px;
+
+.iti__ao {
+  --iti-flag-offset: -128px;
 }
-.iti__flag.iti__bn {
-  height: 10px;
-  background-position: -614px 0px;
+
+.iti__ar {
+  --iti-flag-offset: -144px;
 }
-.iti__flag.iti__bo {
-  height: 14px;
-  background-position: -636px 0px;
+
+.iti__as {
+  --iti-flag-offset: -160px;
 }
-.iti__flag.iti__bq {
-  height: 14px;
-  background-position: -658px 0px;
+
+.iti__at {
+  --iti-flag-offset: -176px;
 }
-.iti__flag.iti__br {
-  height: 14px;
-  background-position: -680px 0px;
+
+.iti__au {
+  --iti-flag-offset: -192px;
 }
-.iti__flag.iti__bs {
-  height: 10px;
-  background-position: -702px 0px;
+
+.iti__aw {
+  --iti-flag-offset: -208px;
 }
-.iti__flag.iti__bt {
-  height: 14px;
-  background-position: -724px 0px;
+
+.iti__ax {
+  --iti-flag-offset: -224px;
 }
-.iti__flag.iti__bv {
-  height: 15px;
-  background-position: -746px 0px;
+
+.iti__az {
+  --iti-flag-offset: -240px;
 }
-.iti__flag.iti__bw {
-  height: 14px;
-  background-position: -768px 0px;
+
+.iti__ba {
+  --iti-flag-offset: -256px;
 }
-.iti__flag.iti__by {
-  height: 10px;
-  background-position: -790px 0px;
+
+.iti__bb {
+  --iti-flag-offset: -272px;
 }
-.iti__flag.iti__bz {
-  height: 12px;
-  background-position: -812px 0px;
+
+.iti__bd {
+  --iti-flag-offset: -288px;
 }
-.iti__flag.iti__ca {
-  height: 10px;
-  background-position: -834px 0px;
+
+.iti__be {
+  --iti-flag-offset: -304px;
 }
-.iti__flag.iti__cc {
-  height: 10px;
-  background-position: -856px 0px;
+
+.iti__bf {
+  --iti-flag-offset: -320px;
 }
-.iti__flag.iti__cd {
-  height: 15px;
-  background-position: -878px 0px;
+
+.iti__bg {
+  --iti-flag-offset: -336px;
 }
-.iti__flag.iti__cf {
-  height: 14px;
-  background-position: -900px 0px;
+
+.iti__bh {
+  --iti-flag-offset: -352px;
 }
-.iti__flag.iti__cg {
-  height: 14px;
-  background-position: -922px 0px;
+
+.iti__bi {
+  --iti-flag-offset: -368px;
 }
-.iti__flag.iti__ch {
-  height: 15px;
-  background-position: -944px 0px;
+
+.iti__bj {
+  --iti-flag-offset: -384px;
 }
-.iti__flag.iti__ci {
-  height: 14px;
-  background-position: -961px 0px;
+
+.iti__bl {
+  --iti-flag-offset: -400px;
 }
-.iti__flag.iti__ck {
-  height: 10px;
-  background-position: -983px 0px;
+
+.iti__bm {
+  --iti-flag-offset: -416px;
 }
-.iti__flag.iti__cl {
-  height: 14px;
-  background-position: -1005px 0px;
+
+.iti__bn {
+  --iti-flag-offset: -432px;
 }
-.iti__flag.iti__cm {
-  height: 14px;
-  background-position: -1027px 0px;
+
+.iti__bo {
+  --iti-flag-offset: -448px;
 }
-.iti__flag.iti__cn {
-  height: 14px;
-  background-position: -1049px 0px;
+
+.iti__bq {
+  --iti-flag-offset: -464px;
 }
-.iti__flag.iti__co {
-  height: 14px;
-  background-position: -1071px 0px;
+
+.iti__br {
+  --iti-flag-offset: -480px;
 }
-.iti__flag.iti__cp {
-  height: 14px;
-  background-position: -1093px 0px;
+
+.iti__bs {
+  --iti-flag-offset: -496px;
 }
-.iti__flag.iti__cq {
-  height: 12px;
-  background-position: -1115px 0px;
+
+.iti__bt {
+  --iti-flag-offset: -512px;
 }
-.iti__flag.iti__cr {
-  height: 12px;
-  background-position: -1137px 0px;
+
+.iti__bw {
+  --iti-flag-offset: -528px;
 }
-.iti__flag.iti__cu {
-  height: 10px;
-  background-position: -1159px 0px;
+
+.iti__by {
+  --iti-flag-offset: -544px;
 }
-.iti__flag.iti__cv {
-  height: 12px;
-  background-position: -1181px 0px;
+
+.iti__bz {
+  --iti-flag-offset: -560px;
 }
-.iti__flag.iti__cw {
-  height: 14px;
-  background-position: -1203px 0px;
+
+.iti__ca {
+  --iti-flag-offset: -576px;
 }
-.iti__flag.iti__cx {
-  height: 10px;
-  background-position: -1225px 0px;
+
+.iti__cc {
+  --iti-flag-offset: -592px;
 }
-.iti__flag.iti__cy {
-  height: 14px;
-  background-position: -1247px 0px;
+
+.iti__cd {
+  --iti-flag-offset: -608px;
 }
-.iti__flag.iti__cz {
-  height: 14px;
-  background-position: -1269px 0px;
+
+.iti__cf {
+  --iti-flag-offset: -624px;
 }
-.iti__flag.iti__de {
-  height: 12px;
-  background-position: -1291px 0px;
+
+.iti__cg {
+  --iti-flag-offset: -640px;
 }
-.iti__flag.iti__dg {
-  height: 10px;
-  background-position: -1313px 0px;
+
+.iti__ch {
+  --iti-flag-offset: -656px;
 }
-.iti__flag.iti__dj {
-  height: 14px;
-  background-position: -1335px 0px;
+
+.iti__ci {
+  --iti-flag-offset: -672px;
 }
-.iti__flag.iti__dk {
-  height: 15px;
-  background-position: -1357px 0px;
+
+.iti__ck {
+  --iti-flag-offset: -688px;
 }
-.iti__flag.iti__dm {
-  height: 10px;
-  background-position: -1379px 0px;
+
+.iti__cl {
+  --iti-flag-offset: -704px;
 }
-.iti__flag.iti__do {
-  height: 14px;
-  background-position: -1401px 0px;
+
+.iti__cm {
+  --iti-flag-offset: -720px;
 }
-.iti__flag.iti__dz {
-  height: 14px;
-  background-position: -1423px 0px;
+
+.iti__cn {
+  --iti-flag-offset: -736px;
 }
-.iti__flag.iti__ea {
-  height: 14px;
-  background-position: -1445px 0px;
+
+.iti__co {
+  --iti-flag-offset: -752px;
 }
-.iti__flag.iti__ec {
-  height: 14px;
-  background-position: -1467px 0px;
+
+.iti__cr {
+  --iti-flag-offset: -768px;
 }
-.iti__flag.iti__ee {
-  height: 13px;
-  background-position: -1489px 0px;
+
+.iti__cu {
+  --iti-flag-offset: -784px;
 }
-.iti__flag.iti__eg {
-  height: 14px;
-  background-position: -1511px 0px;
+
+.iti__cv {
+  --iti-flag-offset: -800px;
 }
-.iti__flag.iti__eh {
-  height: 10px;
-  background-position: -1533px 0px;
+
+.iti__cw {
+  --iti-flag-offset: -816px;
 }
-.iti__flag.iti__er {
-  height: 10px;
-  background-position: -1555px 0px;
+
+.iti__cx {
+  --iti-flag-offset: -832px;
 }
-.iti__flag.iti__es {
-  height: 14px;
-  background-position: -1577px 0px;
+
+.iti__cy {
+  --iti-flag-offset: -848px;
 }
-.iti__flag.iti__et {
-  height: 10px;
-  background-position: -1599px 0px;
+
+.iti__cz {
+  --iti-flag-offset: -864px;
 }
-.iti__flag.iti__eu {
-  height: 14px;
-  background-position: -1621px 0px;
+
+.iti__de {
+  --iti-flag-offset: -880px;
 }
-.iti__flag.iti__ez {
-  height: 14px;
-  background-position: -1643px 0px;
+
+.iti__dj {
+  --iti-flag-offset: -896px;
 }
-.iti__flag.iti__fi {
-  height: 12px;
-  background-position: -1665px 0px;
+
+.iti__dk {
+  --iti-flag-offset: -912px;
 }
-.iti__flag.iti__fj {
-  height: 10px;
-  background-position: -1687px 0px;
+
+.iti__dm {
+  --iti-flag-offset: -928px;
 }
-.iti__flag.iti__fk {
-  height: 10px;
-  background-position: -1709px 0px;
+
+.iti__do {
+  --iti-flag-offset: -944px;
 }
-.iti__flag.iti__fm {
-  height: 11px;
-  background-position: -1731px 0px;
+
+.iti__dz {
+  --iti-flag-offset: -960px;
 }
-.iti__flag.iti__fo {
-  height: 15px;
-  background-position: -1753px 0px;
+
+.iti__ec {
+  --iti-flag-offset: -976px;
 }
-.iti__flag.iti__fr {
-  height: 14px;
-  background-position: -1775px 0px;
+
+.iti__ee {
+  --iti-flag-offset: -992px;
 }
-.iti__flag.iti__fx {
-  height: 14px;
-  background-position: -1797px 0px;
+
+.iti__eg {
+  --iti-flag-offset: -1008px;
 }
-.iti__flag.iti__ga {
-  height: 15px;
-  background-position: -1819px 0px;
+
+.iti__eh {
+  --iti-flag-offset: -1024px;
 }
-.iti__flag.iti__gb {
-  height: 10px;
-  background-position: -1841px 0px;
+
+.iti__er {
+  --iti-flag-offset: -1040px;
 }
-.iti__flag.iti__gd {
-  height: 12px;
-  background-position: -1863px 0px;
+
+.iti__es {
+  --iti-flag-offset: -1056px;
 }
-.iti__flag.iti__ge {
-  height: 14px;
-  background-position: -1885px 0px;
+
+.iti__et {
+  --iti-flag-offset: -1072px;
 }
-.iti__flag.iti__gf {
-  height: 14px;
-  background-position: -1907px 0px;
+
+.iti__fi {
+  --iti-flag-offset: -1088px;
 }
-.iti__flag.iti__gg {
-  height: 14px;
-  background-position: -1929px 0px;
+
+.iti__fj {
+  --iti-flag-offset: -1104px;
 }
-.iti__flag.iti__gh {
-  height: 14px;
-  background-position: -1951px 0px;
+
+.iti__fk {
+  --iti-flag-offset: -1120px;
 }
-.iti__flag.iti__gi {
-  height: 10px;
-  background-position: -1973px 0px;
+
+.iti__fm {
+  --iti-flag-offset: -1136px;
 }
-.iti__flag.iti__gl {
-  height: 14px;
-  background-position: -1995px 0px;
+
+.iti__fo {
+  --iti-flag-offset: -1152px;
 }
-.iti__flag.iti__gm {
-  height: 14px;
-  background-position: -2017px 0px;
+
+.iti__fr {
+  --iti-flag-offset: -1168px;
 }
-.iti__flag.iti__gn {
-  height: 14px;
-  background-position: -2039px 0px;
+
+.iti__ga {
+  --iti-flag-offset: -1184px;
 }
-.iti__flag.iti__gp {
-  height: 14px;
-  background-position: -2061px 0px;
+
+.iti__gb {
+  --iti-flag-offset: -1200px;
 }
-.iti__flag.iti__gq {
-  height: 14px;
-  background-position: -2083px 0px;
+
+.iti__gd {
+  --iti-flag-offset: -1216px;
 }
-.iti__flag.iti__gr {
-  height: 14px;
-  background-position: -2105px 0px;
+
+.iti__ge {
+  --iti-flag-offset: -1232px;
 }
-.iti__flag.iti__gs {
-  height: 10px;
-  background-position: -2127px 0px;
+
+.iti__gf {
+  --iti-flag-offset: -1248px;
 }
-.iti__flag.iti__gt {
-  height: 13px;
-  background-position: -2149px 0px;
+
+.iti__gg {
+  --iti-flag-offset: -1264px;
 }
-.iti__flag.iti__gu {
-  height: 11px;
-  background-position: -2171px 0px;
+
+.iti__gh {
+  --iti-flag-offset: -1280px;
 }
-.iti__flag.iti__gw {
-  height: 10px;
-  background-position: -2193px 0px;
+
+.iti__gi {
+  --iti-flag-offset: -1296px;
 }
-.iti__flag.iti__gy {
-  height: 12px;
-  background-position: -2215px 0px;
+
+.iti__gl {
+  --iti-flag-offset: -1312px;
 }
-.iti__flag.iti__hk {
-  height: 14px;
-  background-position: -2237px 0px;
+
+.iti__gm {
+  --iti-flag-offset: -1328px;
 }
-.iti__flag.iti__hm {
-  height: 10px;
-  background-position: -2259px 0px;
+
+.iti__gn {
+  --iti-flag-offset: -1344px;
 }
-.iti__flag.iti__hn {
-  height: 10px;
-  background-position: -2281px 0px;
+
+.iti__gp {
+  --iti-flag-offset: -1360px;
 }
-.iti__flag.iti__hr {
-  height: 10px;
-  background-position: -2303px 0px;
+
+.iti__gq {
+  --iti-flag-offset: -1376px;
 }
-.iti__flag.iti__ht {
-  height: 12px;
-  background-position: -2325px 0px;
+
+.iti__gr {
+  --iti-flag-offset: -1392px;
 }
-.iti__flag.iti__hu {
-  height: 10px;
-  background-position: -2347px 0px;
+
+.iti__gt {
+  --iti-flag-offset: -1408px;
 }
-.iti__flag.iti__ic {
-  height: 14px;
-  background-position: -2369px 0px;
+
+.iti__gu {
+  --iti-flag-offset: -1424px;
 }
-.iti__flag.iti__id {
-  height: 14px;
-  background-position: -2391px 0px;
+
+.iti__gw {
+  --iti-flag-offset: -1440px;
 }
-.iti__flag.iti__ie {
-  height: 10px;
-  background-position: -2413px 0px;
+
+.iti__gy {
+  --iti-flag-offset: -1456px;
 }
-.iti__flag.iti__il {
-  height: 15px;
-  background-position: -2435px 0px;
+
+.iti__hk {
+  --iti-flag-offset: -1472px;
 }
-.iti__flag.iti__im {
-  height: 10px;
-  background-position: -2457px 0px;
+
+.iti__hn {
+  --iti-flag-offset: -1488px;
 }
-.iti__flag.iti__in {
-  height: 14px;
-  background-position: -2479px 0px;
+
+.iti__hr {
+  --iti-flag-offset: -1504px;
 }
-.iti__flag.iti__io {
-  height: 10px;
-  background-position: -2501px 0px;
+
+.iti__ht {
+  --iti-flag-offset: -1520px;
 }
-.iti__flag.iti__iq {
-  height: 14px;
-  background-position: -2523px 0px;
+
+.iti__hu {
+  --iti-flag-offset: -1536px;
 }
-.iti__flag.iti__ir {
-  height: 12px;
-  background-position: -2545px 0px;
+
+.iti__id {
+  --iti-flag-offset: -1552px;
 }
-.iti__flag.iti__is {
-  height: 15px;
-  background-position: -2567px 0px;
+
+.iti__ie {
+  --iti-flag-offset: -1568px;
 }
-.iti__flag.iti__it {
-  height: 14px;
-  background-position: -2589px 0px;
+
+.iti__il {
+  --iti-flag-offset: -1584px;
 }
-.iti__flag.iti__je {
-  height: 12px;
-  background-position: -2611px 0px;
+
+.iti__im {
+  --iti-flag-offset: -1600px;
 }
-.iti__flag.iti__jm {
-  height: 10px;
-  background-position: -2633px 0px;
+
+.iti__in {
+  --iti-flag-offset: -1616px;
 }
-.iti__flag.iti__jo {
-  height: 10px;
-  background-position: -2655px 0px;
+
+.iti__io {
+  --iti-flag-offset: -1632px;
 }
-.iti__flag.iti__jp {
-  height: 14px;
-  background-position: -2677px 0px;
+
+.iti__iq {
+  --iti-flag-offset: -1648px;
 }
-.iti__flag.iti__ke {
-  height: 14px;
-  background-position: -2699px 0px;
+
+.iti__ir {
+  --iti-flag-offset: -1664px;
 }
-.iti__flag.iti__kg {
-  height: 12px;
-  background-position: -2721px 0px;
+
+.iti__is {
+  --iti-flag-offset: -1680px;
 }
-.iti__flag.iti__kh {
-  height: 13px;
-  background-position: -2743px 0px;
+
+.iti__it {
+  --iti-flag-offset: -1696px;
 }
-.iti__flag.iti__ki {
-  height: 10px;
-  background-position: -2765px 0px;
+
+.iti__je {
+  --iti-flag-offset: -1712px;
 }
-.iti__flag.iti__km {
-  height: 12px;
-  background-position: -2787px 0px;
+
+.iti__jm {
+  --iti-flag-offset: -1728px;
 }
-.iti__flag.iti__kn {
-  height: 14px;
-  background-position: -2809px 0px;
+
+.iti__jo {
+  --iti-flag-offset: -1744px;
 }
-.iti__flag.iti__kp {
-  height: 10px;
-  background-position: -2831px 0px;
+
+.iti__jp {
+  --iti-flag-offset: -1760px;
 }
-.iti__flag.iti__kr {
-  height: 14px;
-  background-position: -2853px 0px;
+
+.iti__ke {
+  --iti-flag-offset: -1776px;
 }
-.iti__flag.iti__kw {
-  height: 10px;
-  background-position: -2875px 0px;
+
+.iti__kg {
+  --iti-flag-offset: -1792px;
 }
-.iti__flag.iti__ky {
-  height: 10px;
-  background-position: -2897px 0px;
+
+.iti__kh {
+  --iti-flag-offset: -1808px;
 }
-.iti__flag.iti__kz {
-  height: 10px;
-  background-position: -2919px 0px;
+
+.iti__ki {
+  --iti-flag-offset: -1824px;
 }
-.iti__flag.iti__la {
-  height: 14px;
-  background-position: -2941px 0px;
+
+.iti__km {
+  --iti-flag-offset: -1840px;
 }
-.iti__flag.iti__lb {
-  height: 14px;
-  background-position: -2963px 0px;
+
+.iti__kn {
+  --iti-flag-offset: -1856px;
 }
-.iti__flag.iti__lc {
-  height: 10px;
-  background-position: -2985px 0px;
+
+.iti__kp {
+  --iti-flag-offset: -1872px;
 }
-.iti__flag.iti__li {
-  height: 12px;
-  background-position: -3007px 0px;
+
+.iti__kr {
+  --iti-flag-offset: -1888px;
 }
-.iti__flag.iti__lk {
-  height: 10px;
-  background-position: -3029px 0px;
+
+.iti__kw {
+  --iti-flag-offset: -1904px;
 }
-.iti__flag.iti__lr {
-  height: 11px;
-  background-position: -3051px 0px;
+
+.iti__ky {
+  --iti-flag-offset: -1920px;
 }
-.iti__flag.iti__ls {
-  height: 14px;
-  background-position: -3073px 0px;
+
+.iti__kz {
+  --iti-flag-offset: -1936px;
 }
-.iti__flag.iti__lt {
-  height: 12px;
-  background-position: -3095px 0px;
+
+.iti__la {
+  --iti-flag-offset: -1952px;
 }
-.iti__flag.iti__lu {
-  height: 12px;
-  background-position: -3117px 0px;
+
+.iti__lb {
+  --iti-flag-offset: -1968px;
 }
-.iti__flag.iti__lv {
-  height: 10px;
-  background-position: -3139px 0px;
+
+.iti__lc {
+  --iti-flag-offset: -1984px;
 }
-.iti__flag.iti__ly {
-  height: 10px;
-  background-position: -3161px 0px;
+
+.iti__li {
+  --iti-flag-offset: -2000px;
 }
-.iti__flag.iti__ma {
-  height: 14px;
-  background-position: -3183px 0px;
+
+.iti__lk {
+  --iti-flag-offset: -2016px;
 }
-.iti__flag.iti__mc {
-  height: 15px;
-  background-position: -3205px 0px;
+
+.iti__lr {
+  --iti-flag-offset: -2032px;
 }
-.iti__flag.iti__md {
-  height: 10px;
-  background-position: -3226px 0px;
+
+.iti__ls {
+  --iti-flag-offset: -2048px;
 }
-.iti__flag.iti__me {
-  height: 10px;
-  background-position: -3248px 0px;
+
+.iti__lt {
+  --iti-flag-offset: -2064px;
 }
-.iti__flag.iti__mf {
-  height: 14px;
-  background-position: -3270px 0px;
+
+.iti__lu {
+  --iti-flag-offset: -2080px;
 }
-.iti__flag.iti__mg {
-  height: 14px;
-  background-position: -3292px 0px;
+
+.iti__lv {
+  --iti-flag-offset: -2096px;
 }
-.iti__flag.iti__mh {
-  height: 11px;
-  background-position: -3314px 0px;
+
+.iti__ly {
+  --iti-flag-offset: -2112px;
 }
-.iti__flag.iti__mk {
-  height: 10px;
-  background-position: -3336px 0px;
+
+.iti__ma {
+  --iti-flag-offset: -2128px;
 }
-.iti__flag.iti__ml {
-  height: 14px;
-  background-position: -3358px 0px;
+
+.iti__mc {
+  --iti-flag-offset: -2144px;
 }
-.iti__flag.iti__mm {
-  height: 14px;
-  background-position: -3380px 0px;
+
+.iti__md {
+  --iti-flag-offset: -2160px;
 }
-.iti__flag.iti__mn {
-  height: 10px;
-  background-position: -3402px 0px;
+
+.iti__me {
+  --iti-flag-offset: -2176px;
 }
-.iti__flag.iti__mo {
-  height: 14px;
-  background-position: -3424px 0px;
+
+.iti__mf {
+  --iti-flag-offset: -2192px;
 }
-.iti__flag.iti__mp {
-  height: 10px;
-  background-position: -3446px 0px;
+
+.iti__mg {
+  --iti-flag-offset: -2208px;
 }
-.iti__flag.iti__mq {
-  height: 14px;
-  background-position: -3468px 0px;
+
+.iti__mh {
+  --iti-flag-offset: -2224px;
 }
-.iti__flag.iti__mr {
-  height: 14px;
-  background-position: -3490px 0px;
+
+.iti__mk {
+  --iti-flag-offset: -2240px;
 }
-.iti__flag.iti__ms {
-  height: 10px;
-  background-position: -3512px 0px;
+
+.iti__ml {
+  --iti-flag-offset: -2256px;
 }
-.iti__flag.iti__mt {
-  height: 14px;
-  background-position: -3534px 0px;
+
+.iti__mm {
+  --iti-flag-offset: -2272px;
 }
-.iti__flag.iti__mu {
-  height: 14px;
-  background-position: -3556px 0px;
+
+.iti__mn {
+  --iti-flag-offset: -2288px;
 }
-.iti__flag.iti__mv {
-  height: 14px;
-  background-position: -3578px 0px;
+
+.iti__mo {
+  --iti-flag-offset: -2304px;
 }
-.iti__flag.iti__mw {
-  height: 14px;
-  background-position: -3600px 0px;
+
+.iti__mp {
+  --iti-flag-offset: -2320px;
 }
-.iti__flag.iti__mx {
-  height: 12px;
-  background-position: -3622px 0px;
+
+.iti__mq {
+  --iti-flag-offset: -2336px;
 }
-.iti__flag.iti__my {
-  height: 10px;
-  background-position: -3644px 0px;
+
+.iti__mr {
+  --iti-flag-offset: -2352px;
 }
-.iti__flag.iti__mz {
-  height: 14px;
-  background-position: -3666px 0px;
+
+.iti__ms {
+  --iti-flag-offset: -2368px;
 }
-.iti__flag.iti__na {
-  height: 14px;
-  background-position: -3688px 0px;
+
+.iti__mt {
+  --iti-flag-offset: -2384px;
 }
-.iti__flag.iti__nc {
-  height: 10px;
-  background-position: -3710px 0px;
+
+.iti__mu {
+  --iti-flag-offset: -2400px;
 }
-.iti__flag.iti__ne {
-  height: 15px;
-  background-position: -3732px 0px;
+
+.iti__mv {
+  --iti-flag-offset: -2416px;
 }
-.iti__flag.iti__nf {
-  height: 10px;
-  background-position: -3752px 0px;
+
+.iti__mw {
+  --iti-flag-offset: -2432px;
 }
-.iti__flag.iti__ng {
-  height: 10px;
-  background-position: -3774px 0px;
+
+.iti__mx {
+  --iti-flag-offset: -2448px;
 }
-.iti__flag.iti__ni {
-  height: 12px;
-  background-position: -3796px 0px;
+
+.iti__my {
+  --iti-flag-offset: -2464px;
 }
-.iti__flag.iti__nl {
-  height: 14px;
-  background-position: -3818px 0px;
+
+.iti__mz {
+  --iti-flag-offset: -2480px;
 }
-.iti__flag.iti__no {
-  height: 15px;
-  background-position: -3840px 0px;
+
+.iti__na {
+  --iti-flag-offset: -2496px;
 }
-.iti__flag.iti__np {
-  height: 15px;
-  background-position: -3862px 0px;
+
+.iti__nc {
+  --iti-flag-offset: -2512px;
 }
-.iti__flag.iti__nr {
-  height: 10px;
-  background-position: -3877px 0px;
+
+.iti__ne {
+  --iti-flag-offset: -2528px;
 }
-.iti__flag.iti__nu {
-  height: 10px;
-  background-position: -3899px 0px;
+
+.iti__nf {
+  --iti-flag-offset: -2544px;
 }
-.iti__flag.iti__nz {
-  height: 10px;
-  background-position: -3921px 0px;
+
+.iti__ng {
+  --iti-flag-offset: -2560px;
 }
-.iti__flag.iti__om {
-  height: 10px;
-  background-position: -3943px 0px;
+
+.iti__ni {
+  --iti-flag-offset: -2576px;
 }
-.iti__flag.iti__pa {
-  height: 14px;
-  background-position: -3965px 0px;
+
+.iti__nl {
+  --iti-flag-offset: -2592px;
 }
-.iti__flag.iti__pe {
-  height: 14px;
-  background-position: -3987px 0px;
+
+.iti__no {
+  --iti-flag-offset: -2608px;
 }
-.iti__flag.iti__pf {
-  height: 14px;
-  background-position: -4009px 0px;
+
+.iti__np {
+  --iti-flag-offset: -2624px;
 }
-.iti__flag.iti__pg {
-  height: 15px;
-  background-position: -4031px 0px;
+
+.iti__nr {
+  --iti-flag-offset: -2640px;
 }
-.iti__flag.iti__ph {
-  height: 10px;
-  background-position: -4053px 0px;
+
+.iti__nu {
+  --iti-flag-offset: -2656px;
 }
-.iti__flag.iti__pk {
-  height: 14px;
-  background-position: -4075px 0px;
+
+.iti__nz {
+  --iti-flag-offset: -2672px;
 }
-.iti__flag.iti__pl {
-  height: 13px;
-  background-position: -4097px 0px;
+
+.iti__om {
+  --iti-flag-offset: -2688px;
 }
-.iti__flag.iti__pm {
-  height: 14px;
-  background-position: -4119px 0px;
+
+.iti__pa {
+  --iti-flag-offset: -2704px;
 }
-.iti__flag.iti__pn {
-  height: 10px;
-  background-position: -4141px 0px;
+
+.iti__pe {
+  --iti-flag-offset: -2720px;
 }
-.iti__flag.iti__pr {
-  height: 14px;
-  background-position: -4163px 0px;
+
+.iti__pf {
+  --iti-flag-offset: -2736px;
 }
-.iti__flag.iti__ps {
-  height: 10px;
-  background-position: -4185px 0px;
+
+.iti__pg {
+  --iti-flag-offset: -2752px;
 }
-.iti__flag.iti__pt {
-  height: 14px;
-  background-position: -4207px 0px;
+
+.iti__ph {
+  --iti-flag-offset: -2768px;
 }
-.iti__flag.iti__pw {
-  height: 13px;
-  background-position: -4229px 0px;
+
+.iti__pk {
+  --iti-flag-offset: -2784px;
 }
-.iti__flag.iti__py {
-  height: 11px;
-  background-position: -4251px 0px;
+
+.iti__pl {
+  --iti-flag-offset: -2800px;
 }
-.iti__flag.iti__qa {
-  height: 8px;
-  background-position: -4273px 0px;
+
+.iti__pm {
+  --iti-flag-offset: -2816px;
 }
-.iti__flag.iti__re {
-  height: 14px;
-  background-position: -4295px 0px;
+
+.iti__pr {
+  --iti-flag-offset: -2832px;
 }
-.iti__flag.iti__ro {
-  height: 14px;
-  background-position: -4317px 0px;
+
+.iti__ps {
+  --iti-flag-offset: -2848px;
 }
-.iti__flag.iti__rs {
-  height: 14px;
-  background-position: -4339px 0px;
+
+.iti__pt {
+  --iti-flag-offset: -2864px;
 }
-.iti__flag.iti__ru {
-  height: 14px;
-  background-position: -4361px 0px;
+
+.iti__pw {
+  --iti-flag-offset: -2880px;
 }
-.iti__flag.iti__rw {
-  height: 14px;
-  background-position: -4383px 0px;
+
+.iti__py {
+  --iti-flag-offset: -2896px;
 }
-.iti__flag.iti__sa {
-  height: 14px;
-  background-position: -4405px 0px;
+
+.iti__qa {
+  --iti-flag-offset: -2912px;
 }
-.iti__flag.iti__sb {
-  height: 10px;
-  background-position: -4427px 0px;
+
+.iti__re {
+  --iti-flag-offset: -2928px;
 }
-.iti__flag.iti__sc {
-  height: 10px;
-  background-position: -4449px 0px;
+
+.iti__ro {
+  --iti-flag-offset: -2944px;
 }
-.iti__flag.iti__sd {
-  height: 10px;
-  background-position: -4471px 0px;
+
+.iti__rs {
+  --iti-flag-offset: -2960px;
 }
-.iti__flag.iti__se {
-  height: 13px;
-  background-position: -4493px 0px;
+
+.iti__ru {
+  --iti-flag-offset: -2976px;
 }
-.iti__flag.iti__sg {
-  height: 14px;
-  background-position: -4515px 0px;
+
+.iti__rw {
+  --iti-flag-offset: -2992px;
 }
-.iti__flag.iti__sh {
-  height: 10px;
-  background-position: -4537px 0px;
+
+.iti__sa {
+  --iti-flag-offset: -3008px;
 }
-.iti__flag.iti__si {
-  height: 10px;
-  background-position: -4559px 0px;
+
+.iti__sb {
+  --iti-flag-offset: -3024px;
 }
-.iti__flag.iti__sj {
-  height: 15px;
-  background-position: -4581px 0px;
+
+.iti__sc {
+  --iti-flag-offset: -3040px;
 }
-.iti__flag.iti__sk {
-  height: 14px;
-  background-position: -4603px 0px;
+
+.iti__sd {
+  --iti-flag-offset: -3056px;
 }
-.iti__flag.iti__sl {
-  height: 14px;
-  background-position: -4625px 0px;
+
+.iti__se {
+  --iti-flag-offset: -3072px;
 }
-.iti__flag.iti__sm {
-  height: 15px;
-  background-position: -4647px 0px;
+
+.iti__sg {
+  --iti-flag-offset: -3088px;
 }
-.iti__flag.iti__sn {
-  height: 14px;
-  background-position: -4669px 0px;
+
+.iti__sh {
+  --iti-flag-offset: -3104px;
 }
-.iti__flag.iti__so {
-  height: 14px;
-  background-position: -4691px 0px;
+
+.iti__si {
+  --iti-flag-offset: -3120px;
 }
-.iti__flag.iti__sr {
-  height: 14px;
-  background-position: -4713px 0px;
+
+.iti__sj {
+  --iti-flag-offset: -3136px;
 }
-.iti__flag.iti__ss {
-  height: 10px;
-  background-position: -4735px 0px;
+
+.iti__sk {
+  --iti-flag-offset: -3152px;
 }
-.iti__flag.iti__st {
-  height: 10px;
-  background-position: -4757px 0px;
+
+.iti__sl {
+  --iti-flag-offset: -3168px;
 }
-.iti__flag.iti__su {
-  height: 10px;
-  background-position: -4779px 0px;
+
+.iti__sm {
+  --iti-flag-offset: -3184px;
 }
-.iti__flag.iti__sv {
-  height: 12px;
-  background-position: -4801px 0px;
+
+.iti__sn {
+  --iti-flag-offset: -3200px;
 }
-.iti__flag.iti__sx {
-  height: 14px;
-  background-position: -4823px 0px;
+
+.iti__so {
+  --iti-flag-offset: -3216px;
 }
-.iti__flag.iti__sy {
-  height: 14px;
-  background-position: -4845px 0px;
+
+.iti__sr {
+  --iti-flag-offset: -3232px;
 }
-.iti__flag.iti__sz {
-  height: 14px;
-  background-position: -4867px 0px;
+
+.iti__ss {
+  --iti-flag-offset: -3248px;
 }
-.iti__flag.iti__ta {
-  height: 10px;
-  background-position: -4889px 0px;
+
+.iti__st {
+  --iti-flag-offset: -3264px;
 }
-.iti__flag.iti__tc {
-  height: 10px;
-  background-position: -4911px 0px;
+
+.iti__sv {
+  --iti-flag-offset: -3280px;
 }
-.iti__flag.iti__td {
-  height: 14px;
-  background-position: -4933px 0px;
+
+.iti__sx {
+  --iti-flag-offset: -3296px;
 }
-.iti__flag.iti__tf {
-  height: 14px;
-  background-position: -4955px 0px;
+
+.iti__sy {
+  --iti-flag-offset: -3312px;
 }
-.iti__flag.iti__tg {
-  height: 13px;
-  background-position: -4977px 0px;
+
+.iti__sz {
+  --iti-flag-offset: -3328px;
 }
-.iti__flag.iti__th {
-  height: 14px;
-  background-position: -4999px 0px;
+
+.iti__tc {
+  --iti-flag-offset: -3344px;
 }
-.iti__flag.iti__tj {
-  height: 10px;
-  background-position: -5021px 0px;
+
+.iti__td {
+  --iti-flag-offset: -3360px;
 }
-.iti__flag.iti__tk {
-  height: 10px;
-  background-position: -5043px 0px;
+
+.iti__tg {
+  --iti-flag-offset: -3376px;
 }
-.iti__flag.iti__tl {
-  height: 10px;
-  background-position: -5065px 0px;
+
+.iti__th {
+  --iti-flag-offset: -3392px;
 }
-.iti__flag.iti__tm {
-  height: 14px;
-  background-position: -5087px 0px;
+
+.iti__tj {
+  --iti-flag-offset: -3408px;
 }
-.iti__flag.iti__tn {
-  height: 14px;
-  background-position: -5109px 0px;
+
+.iti__tk {
+  --iti-flag-offset: -3424px;
 }
-.iti__flag.iti__to {
-  height: 10px;
-  background-position: -5131px 0px;
+
+.iti__tl {
+  --iti-flag-offset: -3440px;
 }
-.iti__flag.iti__tr {
-  height: 14px;
-  background-position: -5153px 0px;
+
+.iti__tm {
+  --iti-flag-offset: -3456px;
 }
-.iti__flag.iti__tt {
-  height: 12px;
-  background-position: -5175px 0px;
+
+.iti__tn {
+  --iti-flag-offset: -3472px;
 }
-.iti__flag.iti__tv {
-  height: 10px;
-  background-position: -5197px 0px;
+
+.iti__to {
+  --iti-flag-offset: -3488px;
 }
-.iti__flag.iti__tw {
-  height: 14px;
-  background-position: -5219px 0px;
+
+.iti__tr {
+  --iti-flag-offset: -3504px;
 }
-.iti__flag.iti__tz {
-  height: 14px;
-  background-position: -5241px 0px;
+
+.iti__tt {
+  --iti-flag-offset: -3520px;
 }
-.iti__flag.iti__ua {
-  height: 14px;
-  background-position: -5263px 0px;
+
+.iti__tv {
+  --iti-flag-offset: -3536px;
 }
-.iti__flag.iti__ug {
-  height: 14px;
-  background-position: -5285px 0px;
+
+.iti__tw {
+  --iti-flag-offset: -3552px;
 }
-.iti__flag.iti__uk {
-  height: 10px;
-  background-position: -5307px 0px;
+
+.iti__tz {
+  --iti-flag-offset: -3568px;
 }
-.iti__flag.iti__um {
-  height: 11px;
-  background-position: -5329px 0px;
+
+.iti__ua {
+  --iti-flag-offset: -3584px;
 }
-.iti__flag.iti__un {
-  height: 14px;
-  background-position: -5351px 0px;
+
+.iti__ug {
+  --iti-flag-offset: -3600px;
 }
-.iti__flag.iti__us {
-  height: 11px;
-  background-position: -5373px 0px;
+
+.iti__us {
+  --iti-flag-offset: -3616px;
 }
-.iti__flag.iti__uy {
-  height: 14px;
-  background-position: -5395px 0px;
+
+.iti__uy {
+  --iti-flag-offset: -3632px;
 }
-.iti__flag.iti__uz {
-  height: 10px;
-  background-position: -5417px 0px;
+
+.iti__uz {
+  --iti-flag-offset: -3648px;
 }
-.iti__flag.iti__va {
-  height: 15px;
-  background-position: -5439px 0px;
+
+.iti__va {
+  --iti-flag-offset: -3664px;
 }
-.iti__flag.iti__vc {
-  height: 14px;
-  background-position: -5456px 0px;
+
+.iti__vc {
+  --iti-flag-offset: -3680px;
 }
-.iti__flag.iti__ve {
-  height: 14px;
-  background-position: -5478px 0px;
+
+.iti__ve {
+  --iti-flag-offset: -3696px;
 }
-.iti__flag.iti__vg {
-  height: 10px;
-  background-position: -5500px 0px;
+
+.iti__vg {
+  --iti-flag-offset: -3712px;
 }
-.iti__flag.iti__vi {
-  height: 14px;
-  background-position: -5522px 0px;
+
+.iti__vi {
+  --iti-flag-offset: -3728px;
 }
-.iti__flag.iti__vn {
-  height: 14px;
-  background-position: -5544px 0px;
+
+.iti__vn {
+  --iti-flag-offset: -3744px;
 }
-.iti__flag.iti__vu {
-  height: 12px;
-  background-position: -5566px 0px;
+
+.iti__vu {
+  --iti-flag-offset: -3760px;
 }
-.iti__flag.iti__wf {
-  height: 14px;
-  background-position: -5588px 0px;
+
+.iti__wf {
+  --iti-flag-offset: -3776px;
 }
-.iti__flag.iti__ws {
-  height: 10px;
-  background-position: -5610px 0px;
+
+.iti__ws {
+  --iti-flag-offset: -3792px;
 }
-.iti__flag.iti__xk {
-  height: 15px;
-  background-position: -5632px 0px;
+
+.iti__xk {
+  --iti-flag-offset: -3808px;
 }
-.iti__flag.iti__ye {
-  height: 14px;
-  background-position: -5654px 0px;
+
+.iti__ye {
+  --iti-flag-offset: -3824px;
 }
-.iti__flag.iti__yt {
-  height: 14px;
-  background-position: -5676px 0px;
+
+.iti__yt {
+  --iti-flag-offset: -3840px;
 }
-.iti__flag.iti__za {
-  height: 14px;
-  background-position: -5698px 0px;
+
+.iti__za {
+  --iti-flag-offset: -3856px;
 }
-.iti__flag.iti__zm {
-  height: 14px;
-  background-position: -5720px 0px;
+
+.iti__zm {
+  --iti-flag-offset: -3872px;
 }
-.iti__flag.iti__zw {
-  height: 10px;
-  background-position: -5742px 0px;
+
+.iti__zw {
+  --iti-flag-offset: -3888px;
 }
 
-.iti__flag {
-  height: 15px;
-  box-shadow: 0px 0px 1px 0px #888;
-  background-repeat: no-repeat;
-  background-color: #dbdbdb;
-  background-position: 20px 0;
+.iti__globe {
+  background-image: var(--iti-path-globe-1x);
+  background-size: contain;
+  background-position: right;
+  box-shadow: none;
+  height: 19px;
 }
 
-.iti__flag.iti__np {
-  background-color: transparent;
+@media (min-resolution: 2x) {
+  .iti__flag {
+    background-image: var(--iti-path-flags-2x);
+  }
+  .iti__globe {
+    background-image: var(--iti-path-globe-2x);
+  }
 }
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_phone_number_input/types.d.ts b/playbook/app/pb_kits/playbook/pb_phone_number_input/types.d.ts
index 7215d16eba..168ba33c65 100644
--- a/playbook/app/pb_kits/playbook/pb_phone_number_input/types.d.ts
+++ b/playbook/app/pb_kits/playbook/pb_phone_number_input/types.d.ts
@@ -1 +1,4 @@
-declare module 'intl-tel-input'
\ No newline at end of file
+declare module 'intl-tel-input/build/js/intlTelInputWithUtils.js' {
+    const intlTelInput: any;
+    export default intlTelInput;
+}
\ No newline at end of file
diff --git a/playbook/package.json b/playbook/package.json
index 7912739d79..8888bd9e13 100644
--- a/playbook/package.json
+++ b/playbook/package.json
@@ -39,7 +39,7 @@
     "flatpickr": "^4.6.13",
     "highcharts": "^11.4.8",
     "highcharts-react-official": "^3.2.1",
-    "intl-tel-input": "^18.0.15"
+    "intl-tel-input": "^24.6.0"
   },
   "devDependencies": {
     "@actions/core": "1.10.0",
diff --git a/yarn.lock b/yarn.lock
index a06995b3b4..bc890a2c0b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7324,10 +7324,10 @@ intersection-observer@^0.10.0:
   resolved "https://npm.powerapp.cloud/intersection-observer/-/intersection-observer-0.10.0.tgz#4d11d63c1ff67e21e62987be24d55218da1a1a69"
   integrity sha512-fn4bQ0Xq8FTej09YC/jqKZwtijpvARlRp6wxL5WTA6yPe2YWSJ5RJh7Nm79rK2qB0wr6iDQzH60XGq5V/7u8YQ==
 
-intl-tel-input@^18.0.15:
-  version "18.5.3"
-  resolved "https://npm.powerapp.cloud/intl-tel-input/-/intl-tel-input-18.5.3.tgz#20b18431cb802d33c118f52e332e218e641ec09b"
-  integrity sha512-ncFqSpkdGf2YC/FvAiwBH44KAeRG8L7aqDODEpOvMAT3ZpBtvc/WtwaQ/6X4+HKDTlGkobdBjr6P3nAMwO8jtA==
+intl-tel-input@^24.6.0:
+  version "24.6.0"
+  resolved "https://npm.powerapp.cloud/intl-tel-input/-/intl-tel-input-24.6.0.tgz#f3b070b337f6981493b2c3b9d28e31828ce32a2f"
+  integrity sha512-3ZlxJk7IOhNCRRxGrAcGiP1uzZFaDEQUIHNHk516RORZpOoPh1kqZP8ksE8nm+/5HZk+tRV7F/iex0aWnkkixQ==
 
 is-accessor-descriptor@^0.1.6:
   version "0.1.6"