@helpdice/ui 2.5.1 → 2.5.3

package/esm/input/input-phone.js

@@ -0,0 +1,1166 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useState, useRef, useEffect, useMemo } from 'react';
+// import countries from './countries.json';
+import { useTheme } from '@helpdice/theme';
+import { getColors } from './styles';
+import useScale, { withScale } from '../use-scale';
+import InputBlockLabel from './input-block-label';
+var countries = [{
+  "code": "AD",
+  "label": "Andorra",
+  "phone": "+376"
+}, {
+  "code": "AE",
+  "label": "United Arab Emirates",
+  "phone": "+971"
+}, {
+  "code": "AF",
+  "label": "Afghanistan",
+  "phone": "+93"
+}, {
+  "code": "AG",
+  "label": "Antigua and Barbuda",
+  "phone": "+1-268"
+}, {
+  "code": "AI",
+  "label": "Anguilla",
+  "phone": "+1-264"
+}, {
+  "code": "AL",
+  "label": "Albania",
+  "phone": "+355"
+}, {
+  "code": "AM",
+  "label": "Armenia",
+  "phone": "+374"
+}, {
+  "code": "AO",
+  "label": "Angola",
+  "phone": "+244"
+}, {
+  "code": "AQ",
+  "label": "Antarctica",
+  "phone": "+672"
+}, {
+  "code": "AR",
+  "label": "Argentina",
+  "phone": "+54"
+}, {
+  "code": "AS",
+  "label": "American Samoa",
+  "phone": "+1-684"
+}, {
+  "code": "AT",
+  "label": "Austria",
+  "phone": "+43"
+}, {
+  "code": "AU",
+  "label": "Australia",
+  "phone": "+61",
+  "suggested": true
+}, {
+  "code": "AW",
+  "label": "Aruba",
+  "phone": "+297"
+}, {
+  "code": "AX",
+  "label": "Alland Islands",
+  "phone": "+358"
+}, {
+  "code": "AZ",
+  "label": "Azerbaijan",
+  "phone": "+994"
+}, {
+  "code": "BA",
+  "label": "Bosnia and Herzegovina",
+  "phone": "+387"
+}, {
+  "code": "BB",
+  "label": "Barbados",
+  "phone": "+1-246"
+}, {
+  "code": "BD",
+  "label": "Bangladesh",
+  "phone": "+880"
+}, {
+  "code": "BE",
+  "label": "Belgium",
+  "phone": "+32"
+}, {
+  "code": "BF",
+  "label": "Burkina Faso",
+  "phone": "+226"
+}, {
+  "code": "BG",
+  "label": "Bulgaria",
+  "phone": "+359"
+}, {
+  "code": "BH",
+  "label": "Bahrain",
+  "phone": "+973"
+}, {
+  "code": "BI",
+  "label": "Burundi",
+  "phone": "+257"
+}, {
+  "code": "BJ",
+  "label": "Benin",
+  "phone": "+229"
+}, {
+  "code": "BL",
+  "label": "Saint Barthelemy",
+  "phone": "+590"
+}, {
+  "code": "BM",
+  "label": "Bermuda",
+  "phone": "+1-441"
+}, {
+  "code": "BN",
+  "label": "Brunei Darussalam",
+  "phone": "+673"
+}, {
+  "code": "BO",
+  "label": "Bolivia",
+  "phone": "+591"
+}, {
+  "code": "BR",
+  "label": "Brazil",
+  "phone": "+55"
+}, {
+  "code": "BS",
+  "label": "Bahamas",
+  "phone": "+1-242"
+}, {
+  "code": "BT",
+  "label": "Bhutan",
+  "phone": "+975"
+}, {
+  "code": "BV",
+  "label": "Bouvet Island",
+  "phone": "+47"
+}, {
+  "code": "BW",
+  "label": "Botswana",
+  "phone": "+267"
+}, {
+  "code": "BY",
+  "label": "Belarus",
+  "phone": "+375"
+}, {
+  "code": "BZ",
+  "label": "Belize",
+  "phone": "+501"
+}, {
+  "code": "CA",
+  "label": "Canada",
+  "phone": "+1",
+  "suggested": true
+}, {
+  "code": "CC",
+  "label": "Cocos (Keeling) Islands",
+  "phone": "+61"
+}, {
+  "code": "CD",
+  "label": "Congo, Democratic Republic of the",
+  "phone": "+243"
+}, {
+  "code": "CF",
+  "label": "Central African Republic",
+  "phone": "+236"
+}, {
+  "code": "CG",
+  "label": "Congo, Republic of the",
+  "phone": "+242"
+}, {
+  "code": "CH",
+  "label": "Switzerland",
+  "phone": "+41"
+}, {
+  "code": "CI",
+  "label": "Cote d'Ivoire",
+  "phone": "+225"
+}, {
+  "code": "CK",
+  "label": "Cook Islands",
+  "phone": "+682"
+}, {
+  "code": "CL",
+  "label": "Chile",
+  "phone": "+56"
+}, {
+  "code": "CM",
+  "label": "Cameroon",
+  "phone": "+237"
+}, {
+  "code": "CN",
+  "label": "China",
+  "phone": "+86"
+}, {
+  "code": "CO",
+  "label": "Colombia",
+  "phone": "+57"
+}, {
+  "code": "CR",
+  "label": "Costa Rica",
+  "phone": "+506"
+}, {
+  "code": "CU",
+  "label": "Cuba",
+  "phone": "+53"
+}, {
+  "code": "CV",
+  "label": "Cape Verde",
+  "phone": "+238"
+}, {
+  "code": "CW",
+  "label": "Curacao",
+  "phone": "+599"
+}, {
+  "code": "CX",
+  "label": "Christmas Island",
+  "phone": "+61"
+}, {
+  "code": "CY",
+  "label": "Cyprus",
+  "phone": "+357"
+}, {
+  "code": "CZ",
+  "label": "Czech Republic",
+  "phone": "+420"
+}, {
+  "code": "DE",
+  "label": "Germany",
+  "phone": "+49",
+  "suggested": true
+}, {
+  "code": "DJ",
+  "label": "Djibouti",
+  "phone": "+253"
+}, {
+  "code": "DK",
+  "label": "Denmark",
+  "phone": "+45"
+}, {
+  "code": "DM",
+  "label": "Dominica",
+  "phone": "+1-767"
+}, {
+  "code": "DO",
+  "label": "Dominican Republic",
+  "phone": "+1-809"
+}, {
+  "code": "DZ",
+  "label": "Algeria",
+  "phone": "+213"
+}, {
+  "code": "EC",
+  "label": "Ecuador",
+  "phone": "+593"
+}, {
+  "code": "EE",
+  "label": "Estonia",
+  "phone": "+372"
+}, {
+  "code": "EG",
+  "label": "Egypt",
+  "phone": "+20"
+}, {
+  "code": "EH",
+  "label": "Western Sahara",
+  "phone": "+212"
+}, {
+  "code": "ER",
+  "label": "Eritrea",
+  "phone": "+291"
+}, {
+  "code": "ES",
+  "label": "Spain",
+  "phone": "+34"
+}, {
+  "code": "ET",
+  "label": "Ethiopia",
+  "phone": "+251"
+}, {
+  "code": "FI",
+  "label": "Finland",
+  "phone": "+358"
+}, {
+  "code": "FJ",
+  "label": "Fiji",
+  "phone": "+679"
+}, {
+  "code": "FK",
+  "label": "Falkland Islands (Malvinas)",
+  "phone": "+500"
+}, {
+  "code": "FM",
+  "label": "Micronesia, Federated States of",
+  "phone": "+691"
+}, {
+  "code": "FO",
+  "label": "Faroe Islands",
+  "phone": "+298"
+}, {
+  "code": "FR",
+  "label": "France",
+  "phone": "+33",
+  "suggested": true
+}, {
+  "code": "GA",
+  "label": "Gabon",
+  "phone": "+241"
+}, {
+  "code": "GB",
+  "label": "United Kingdom",
+  "phone": "+44"
+}, {
+  "code": "GD",
+  "label": "Grenada",
+  "phone": "+1-473"
+}, {
+  "code": "GE",
+  "label": "Georgia",
+  "phone": "+995"
+}, {
+  "code": "GF",
+  "label": "French Guiana",
+  "phone": "+594"
+}, {
+  "code": "GG",
+  "label": "Guernsey",
+  "phone": "+44"
+}, {
+  "code": "GH",
+  "label": "Ghana",
+  "phone": "+233"
+}, {
+  "code": "GI",
+  "label": "Gibraltar",
+  "phone": "+350"
+}, {
+  "code": "GL",
+  "label": "Greenland",
+  "phone": "+299"
+}, {
+  "code": "GM",
+  "label": "Gambia",
+  "phone": "+220"
+}, {
+  "code": "GN",
+  "label": "Guinea",
+  "phone": "+224"
+}, {
+  "code": "GP",
+  "label": "Guadeloupe",
+  "phone": "+590"
+}, {
+  "code": "GQ",
+  "label": "Equatorial Guinea",
+  "phone": "+240"
+}, {
+  "code": "GR",
+  "label": "Greece",
+  "phone": "+30"
+}, {
+  "code": "GS",
+  "label": "South Georgia and the South Sandwich Islands",
+  "phone": "+500"
+}, {
+  "code": "GT",
+  "label": "Guatemala",
+  "phone": "+502"
+}, {
+  "code": "GU",
+  "label": "Guam",
+  "phone": "+1-671"
+}, {
+  "code": "GW",
+  "label": "Guinea-Bissau",
+  "phone": "+245"
+}, {
+  "code": "GY",
+  "label": "Guyana",
+  "phone": "+592"
+}, {
+  "code": "HK",
+  "label": "Hong Kong",
+  "phone": "+852"
+}, {
+  "code": "HM",
+  "label": "Heard Island and McDonald Islands",
+  "phone": "+672"
+}, {
+  "code": "HN",
+  "label": "Honduras",
+  "phone": "+504"
+}, {
+  "code": "HR",
+  "label": "Croatia",
+  "phone": "+385"
+}, {
+  "code": "HT",
+  "label": "Haiti",
+  "phone": "+509"
+}, {
+  "code": "HU",
+  "label": "Hungary",
+  "phone": "+36"
+}, {
+  "code": "ID",
+  "label": "Indonesia",
+  "phone": "+62"
+}, {
+  "code": "IE",
+  "label": "Ireland",
+  "phone": "+353"
+}, {
+  "code": "IL",
+  "label": "Israel",
+  "phone": "+972"
+}, {
+  "code": "IM",
+  "label": "Isle of Man",
+  "phone": "+44"
+}, {
+  "code": "IN",
+  "label": "India",
+  "phone": "+91"
+}, {
+  "code": "IO",
+  "label": "British Indian Ocean Territory",
+  "phone": "+246"
+}, {
+  "code": "IQ",
+  "label": "Iraq",
+  "phone": "+964"
+}, {
+  "code": "IR",
+  "label": "Iran, Islamic Republic of",
+  "phone": "+98"
+}, {
+  "code": "IS",
+  "label": "Iceland",
+  "phone": "+354"
+}, {
+  "code": "IT",
+  "label": "Italy",
+  "phone": "+39"
+}, {
+  "code": "JE",
+  "label": "Jersey",
+  "phone": "+44"
+}, {
+  "code": "JM",
+  "label": "Jamaica",
+  "phone": "+1-876"
+}, {
+  "code": "JO",
+  "label": "Jordan",
+  "phone": "+962"
+}, {
+  "code": "JP",
+  "label": "Japan",
+  "phone": "+81",
+  "suggested": true
+}, {
+  "code": "KE",
+  "label": "Kenya",
+  "phone": "+254"
+}, {
+  "code": "KG",
+  "label": "Kyrgyzstan",
+  "phone": "+996"
+}, {
+  "code": "KH",
+  "label": "Cambodia",
+  "phone": "+855"
+}, {
+  "code": "KI",
+  "label": "Kiribati",
+  "phone": "+686"
+}, {
+  "code": "KM",
+  "label": "Comoros",
+  "phone": "+269"
+}, {
+  "code": "KN",
+  "label": "Saint Kitts and Nevis",
+  "phone": "+1-869"
+}, {
+  "code": "KP",
+  "label": "Korea, Democratic People's Republic of",
+  "phone": "+850"
+}, {
+  "code": "KR",
+  "label": "Korea, Republic of",
+  "phone": "+82"
+}, {
+  "code": "KW",
+  "label": "Kuwait",
+  "phone": "+965"
+}, {
+  "code": "KY",
+  "label": "Cayman Islands",
+  "phone": "+1-345"
+}, {
+  "code": "KZ",
+  "label": "Kazakhstan",
+  "phone": "+7"
+}, {
+  "code": "LA",
+  "label": "Lao People's Democratic Republic",
+  "phone": "+856"
+}, {
+  "code": "LB",
+  "label": "Lebanon",
+  "phone": "+961"
+}, {
+  "code": "LC",
+  "label": "Saint Lucia",
+  "phone": "+1-758"
+}, {
+  "code": "LI",
+  "label": "Liechtenstein",
+  "phone": "+423"
+}, {
+  "code": "LK",
+  "label": "Sri Lanka",
+  "phone": "+94"
+}, {
+  "code": "LR",
+  "label": "Liberia",
+  "phone": "+231"
+}, {
+  "code": "LS",
+  "label": "Lesotho",
+  "phone": "+266"
+}, {
+  "code": "LT",
+  "label": "Lithuania",
+  "phone": "+370"
+}, {
+  "code": "LU",
+  "label": "Luxembourg",
+  "phone": "+352"
+}, {
+  "code": "LV",
+  "label": "Latvia",
+  "phone": "+371"
+}, {
+  "code": "LY",
+  "label": "Libya",
+  "phone": "+218"
+}, {
+  "code": "MA",
+  "label": "Morocco",
+  "phone": "+212"
+}, {
+  "code": "MC",
+  "label": "Monaco",
+  "phone": "+377"
+}, {
+  "code": "MD",
+  "label": "Moldova, Republic of",
+  "phone": "+373"
+}, {
+  "code": "ME",
+  "label": "Montenegro",
+  "phone": "+382"
+}, {
+  "code": "MF",
+  "label": "Saint Martin (French part)",
+  "phone": "+590"
+}, {
+  "code": "MG",
+  "label": "Madagascar",
+  "phone": "+261"
+}, {
+  "code": "MH",
+  "label": "Marshall Islands",
+  "phone": "+692"
+}, {
+  "code": "MK",
+  "label": "Macedonia, the Former Yugoslav Republic of",
+  "phone": "+389"
+}, {
+  "code": "ML",
+  "label": "Mali",
+  "phone": "+223"
+}, {
+  "code": "MM",
+  "label": "Myanmar",
+  "phone": "+95"
+}, {
+  "code": "MN",
+  "label": "Mongolia",
+  "phone": "+976"
+}, {
+  "code": "MO",
+  "label": "Macao",
+  "phone": "+853"
+}, {
+  "code": "MP",
+  "label": "Northern Mariana Islands",
+  "phone": "+1-670"
+}, {
+  "code": "MQ",
+  "label": "Martinique",
+  "phone": "+596"
+}, {
+  "code": "MR",
+  "label": "Mauritania",
+  "phone": "+222"
+}, {
+  "code": "MS",
+  "label": "Montserrat",
+  "phone": "+1-664"
+}, {
+  "code": "MT",
+  "label": "Malta",
+  "phone": "+356"
+}, {
+  "code": "MU",
+  "label": "Mauritius",
+  "phone": "+230"
+}, {
+  "code": "MV",
+  "label": "Maldives",
+  "phone": "+960"
+}, {
+  "code": "MW",
+  "label": "Malawi",
+  "phone": "+265"
+}, {
+  "code": "MX",
+  "label": "Mexico",
+  "phone": "+52"
+}, {
+  "code": "MY",
+  "label": "Malaysia",
+  "phone": "+60"
+}, {
+  "code": "MZ",
+  "label": "Mozambique",
+  "phone": "+258"
+}, {
+  "code": "NA",
+  "label": "Namibia",
+  "phone": "+264"
+}, {
+  "code": "NC",
+  "label": "New Caledonia",
+  "phone": "+687"
+}, {
+  "code": "NE",
+  "label": "Niger",
+  "phone": "+227"
+}, {
+  "code": "NF",
+  "label": "Norfolk Island",
+  "phone": "+672"
+}, {
+  "code": "NG",
+  "label": "Nigeria",
+  "phone": "+234"
+}, {
+  "code": "NI",
+  "label": "Nicaragua",
+  "phone": "+505"
+}, {
+  "code": "NL",
+  "label": "Netherlands",
+  "phone": "+31"
+}, {
+  "code": "NO",
+  "label": "Norway",
+  "phone": "+47"
+}, {
+  "code": "NP",
+  "label": "Nepal",
+  "phone": "+977"
+}, {
+  "code": "NR",
+  "label": "Nauru",
+  "phone": "+674"
+}, {
+  "code": "NU",
+  "label": "Niue",
+  "phone": "+683"
+}, {
+  "code": "NZ",
+  "label": "New Zealand",
+  "phone": "+64"
+}, {
+  "code": "OM",
+  "label": "Oman",
+  "phone": "+968"
+}, {
+  "code": "PA",
+  "label": "Panama",
+  "phone": "+507"
+}, {
+  "code": "PE",
+  "label": "Peru",
+  "phone": "+51"
+}, {
+  "code": "PF",
+  "label": "French Polynesia",
+  "phone": "+689"
+}, {
+  "code": "PG",
+  "label": "Papua New Guinea",
+  "phone": "+675"
+}, {
+  "code": "PH",
+  "label": "Philippines",
+  "phone": "+63"
+}, {
+  "code": "PK",
+  "label": "Pakistan",
+  "phone": "+92"
+}, {
+  "code": "PL",
+  "label": "Poland",
+  "phone": "+48"
+}, {
+  "code": "PM",
+  "label": "Saint Pierre and Miquelon",
+  "phone": "+508"
+}, {
+  "code": "PN",
+  "label": "Pitcairn",
+  "phone": "+870"
+}, {
+  "code": "PR",
+  "label": "Puerto Rico",
+  "phone": "+1"
+}, {
+  "code": "PS",
+  "label": "Palestine, State of",
+  "phone": "+970"
+}, {
+  "code": "PT",
+  "label": "Portugal",
+  "phone": "+351"
+}, {
+  "code": "PW",
+  "label": "Palau",
+  "phone": "+680"
+}, {
+  "code": "PY",
+  "label": "Paraguay",
+  "phone": "+595"
+}, {
+  "code": "QA",
+  "label": "Qatar",
+  "phone": "+974"
+}, {
+  "code": "RE",
+  "label": "Reunion",
+  "phone": "+262"
+}, {
+  "code": "RO",
+  "label": "Romania",
+  "phone": "+40"
+}, {
+  "code": "RS",
+  "label": "Serbia",
+  "phone": "+381"
+}, {
+  "code": "RU",
+  "label": "Russian Federation",
+  "phone": "+7"
+}, {
+  "code": "RW",
+  "label": "Rwanda",
+  "phone": "+250"
+}, {
+  "code": "SA",
+  "label": "Saudi Arabia",
+  "phone": "+966"
+}, {
+  "code": "SB",
+  "label": "Solomon Islands",
+  "phone": "+677"
+}, {
+  "code": "SC",
+  "label": "Seychelles",
+  "phone": "+248"
+}, {
+  "code": "SD",
+  "label": "Sudan",
+  "phone": "+249"
+}, {
+  "code": "SE",
+  "label": "Sweden",
+  "phone": "+46"
+}, {
+  "code": "SG",
+  "label": "Singapore",
+  "phone": "+65"
+}, {
+  "code": "SH",
+  "label": "Saint Helena",
+  "phone": "+290"
+}, {
+  "code": "SI",
+  "label": "Slovenia",
+  "phone": "+386"
+}, {
+  "code": "SJ",
+  "label": "Svalbard and Jan Mayen",
+  "phone": "+47"
+}, {
+  "code": "SK",
+  "label": "Slovakia",
+  "phone": "+421"
+}, {
+  "code": "SL",
+  "label": "Sierra Leone",
+  "phone": "+232"
+}, {
+  "code": "SM",
+  "label": "San Marino",
+  "phone": "+378"
+}, {
+  "code": "SN",
+  "label": "Senegal",
+  "phone": "+221"
+}, {
+  "code": "SO",
+  "label": "Somalia",
+  "phone": "+252"
+}, {
+  "code": "SR",
+  "label": "Suriname",
+  "phone": "+597"
+}, {
+  "code": "SS",
+  "label": "South Sudan",
+  "phone": "+211"
+}, {
+  "code": "ST",
+  "label": "Sao Tome and Principe",
+  "phone": "+239"
+}, {
+  "code": "SV",
+  "label": "El Salvador",
+  "phone": "+503"
+}, {
+  "code": "SX",
+  "label": "Sint Maarten (Dutch part)",
+  "phone": "+1-721"
+}, {
+  "code": "SY",
+  "label": "Syrian Arab Republic",
+  "phone": "+963"
+}, {
+  "code": "SZ",
+  "label": "Swaziland",
+  "phone": "+268"
+}, {
+  "code": "TC",
+  "label": "Turks and Caicos Islands",
+  "phone": "+1-649"
+}, {
+  "code": "TD",
+  "label": "Chad",
+  "phone": "+235"
+}, {
+  "code": "TF",
+  "label": "French Southern Territories",
+  "phone": "+262"
+}, {
+  "code": "TG",
+  "label": "Togo",
+  "phone": "+228"
+}, {
+  "code": "TH",
+  "label": "Thailand",
+  "phone": "+66"
+}, {
+  "code": "TJ",
+  "label": "Tajikistan",
+  "phone": "+992"
+}, {
+  "code": "TK",
+  "label": "Tokelau",
+  "phone": "+690"
+}, {
+  "code": "TL",
+  "label": "Timor-Leste",
+  "phone": "+670"
+}, {
+  "code": "TM",
+  "label": "Turkmenistan",
+  "phone": "+993"
+}, {
+  "code": "TN",
+  "label": "Tunisia",
+  "phone": "+216"
+}, {
+  "code": "TO",
+  "label": "Tonga",
+  "phone": "+676"
+}, {
+  "code": "TR",
+  "label": "Turkey",
+  "phone": "+90"
+}, {
+  "code": "TT",
+  "label": "Trinidad and Tobago",
+  "phone": "+1-868"
+}, {
+  "code": "TV",
+  "label": "Tuvalu",
+  "phone": "+688"
+}, {
+  "code": "TW",
+  "label": "Taiwan, Province of China",
+  "phone": "+886"
+}, {
+  "code": "TZ",
+  "label": "United Republic of Tanzania",
+  "phone": "+255"
+}, {
+  "code": "UA",
+  "label": "Ukraine",
+  "phone": "+380"
+}, {
+  "code": "UG",
+  "label": "Uganda",
+  "phone": "+256"
+}, {
+  "code": "US",
+  "label": "United States",
+  "phone": "+1",
+  "suggested": true
+}, {
+  "code": "UY",
+  "label": "Uruguay",
+  "phone": "+598"
+}, {
+  "code": "UZ",
+  "label": "Uzbekistan",
+  "phone": "+998"
+}, {
+  "code": "VA",
+  "label": "Holy See (Vatican City State)",
+  "phone": "+379"
+}, {
+  "code": "VC",
+  "label": "Saint Vincent and the Grenadines",
+  "phone": "+1-784"
+}, {
+  "code": "VE",
+  "label": "Venezuela",
+  "phone": "+58"
+}, {
+  "code": "VG",
+  "label": "British Virgin Islands",
+  "phone": "+1-284"
+}, {
+  "code": "VI",
+  "label": "US Virgin Islands",
+  "phone": "+1-340"
+}, {
+  "code": "VN",
+  "label": "Vietnam",
+  "phone": "+84"
+}, {
+  "code": "VU",
+  "label": "Vanuatu",
+  "phone": "+678"
+}, {
+  "code": "WF",
+  "label": "Wallis and Futuna",
+  "phone": "+681"
+}, {
+  "code": "WS",
+  "label": "Samoa",
+  "phone": "+685"
+}, {
+  "code": "XK",
+  "label": "Kosovo",
+  "phone": "+383"
+}, {
+  "code": "YE",
+  "label": "Yemen",
+  "phone": "+967"
+}, {
+  "code": "YT",
+  "label": "Mayotte",
+  "phone": "+262"
+}, {
+  "code": "ZA",
+  "label": "South Africa",
+  "phone": "+27"
+}, {
+  "code": "ZM",
+  "label": "Zambia",
+  "phone": "+260"
+}, {
+  "code": "ZW",
+  "label": "Zimbabwe",
+  "phone": "+263"
+}];
+function PhoneInput(_ref) {
+  var onChange = _ref.onChange,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? '' : _ref$value,
+    country = _ref.country,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? 'Enter phone number' : _ref$placeholder,
+    _ref$color = _ref.color,
+    _color = _ref$color === void 0 ? 'default' : _ref$color,
+    children = _ref.children,
+    fullWidth = _ref.fullWidth;
+  var theme = useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var defaultValue = country ? countries.findIndex(function (cn) {
+    return cn.code == country;
+  }) : 103;
+  var _useState = useState(countries[defaultValue]),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedCountry = _useState2[0],
+    setSelectedCountry = _useState2[1];
+  var _useState3 = useState(value),
+    _useState4 = _slicedToArray(_useState3, 2),
+    phoneNumber = _useState4[0],
+    setPhoneNumber = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isFocused = _useState6[0],
+    setIsFocused = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    dropdownOpen = _useState8[0],
+    setDropdownOpen = _useState8[1];
+  var _useState9 = useState(''),
+    _useState10 = _slicedToArray(_useState9, 2),
+    searchTerm = _useState10[0],
+    setSearchTerm = _useState10[1];
+  var dropdownRef = useRef(null);
+  var _useMemo = useMemo(function () {
+      return getColors(theme.palette, _color);
+    }, [theme.palette]),
+    borderColor = _useMemo.borderColor,
+    hoverBorder = _useMemo.hoverBorder;
+  var handleSelectCountry = function handleSelectCountry(country) {
+    setSelectedCountry(country);
+    setDropdownOpen(false);
+    setSearchTerm('');
+    if (onChange) onChange("".concat(country.code, ":").concat(phoneNumber));
+  };
+  var handlePhoneChange = function handlePhoneChange(e) {
+    var value = e.target.value.replace(/[^\d]/g, '');
+    setPhoneNumber(value);
+    if (onChange) onChange("".concat(selectedCountry.phone, ",").concat(value));
+  };
+  var handleClickOutside = function handleClickOutside(e) {
+    if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+      setDropdownOpen(false);
+      setSearchTerm('');
+    }
+  };
+  useEffect(function () {
+    document.addEventListener('mousedown', handleClickOutside);
+    return function () {
+      return document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+  var filteredCountries = countries.filter(function (c) {
+    return "".concat(c.label, " ").concat(c.code, " ").concat(c.phone).toLowerCase().includes(searchTerm.toLowerCase());
+  });
+  var defaultWidth = fullWidth ? '100%' : 'initial';
+  return /*#__PURE__*/React.createElement("div", {
+    ref: dropdownRef,
+    className: _JSXStyle.dynamic([["2480261071", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "with-label ".concat(isFocused ? 'focused' : '')
+  }, children && /*#__PURE__*/React.createElement(InputBlockLabel, null, children), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["2480261071", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "input-wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    onClick: function onClick() {
+      return setDropdownOpen(!dropdownOpen);
+    },
+    className: _JSXStyle.dynamic([["2480261071", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-toggle"
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 5,
+      paddingRight: '15px'
+    },
+    className: _JSXStyle.dynamic([["2480261071", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
+  }, /*#__PURE__*/React.createElement("img", {
+    loading: "lazy",
+    width: "20",
+    height: "20",
+    src: "https://flagcdn.com/w20/".concat(selectedCountry.code.toLowerCase(), ".png"),
+    srcSet: "https://flagcdn.com/w40/".concat(selectedCountry.code.toLowerCase(), ".png 2x"),
+    alt: "".concat(selectedCountry.label, " Flag"),
+    className: _JSXStyle.dynamic([["2480261071", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
+  }), /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["2480261071", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
+  }, selectedCountry.phone))), /*#__PURE__*/React.createElement("input", {
+    type: "tel",
+    placeholder: placeholder,
+    value: phoneNumber,
+    onChange: handlePhoneChange,
+    onFocus: function onFocus() {
+      return setIsFocused(true);
+    },
+    onBlur: function onBlur() {
+      return setIsFocused(false);
+    },
+    className: _JSXStyle.dynamic([["2480261071", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "phone-input"
+  })), dropdownOpen && /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["2480261071", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown"
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    placeholder: "Search country...",
+    value: searchTerm,
+    onChange: function onChange(e) {
+      return setSearchTerm(e.target.value);
+    },
+    className: _JSXStyle.dynamic([["2480261071", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "search-input"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["2480261071", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "country-list"
+  }, filteredCountries.length > 0 ? filteredCountries.map(function (c) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: c.code,
+      onClick: function onClick() {
+        return handleSelectCountry(c);
+      },
+      className: _JSXStyle.dynamic([["2480261071", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-item"
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 5
+      },
+      className: _JSXStyle.dynamic([["2480261071", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
+    }, /*#__PURE__*/React.createElement("img", {
+      loading: "lazy",
+      width: "23",
+      height: "23",
+      src: "https://flagcdn.com/w20/".concat(c.code.toLowerCase(), ".png"),
+      srcSet: "https://flagcdn.com/w40/".concat(c.code.toLowerCase(), ".png 2x"),
+      alt: "".concat(c.label, " Flag"),
+      className: _JSXStyle.dynamic([["2480261071", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
+    }), c.phone, " ", /*#__PURE__*/React.createElement("span", {
+      style: {
+        color: 'grey'
+      },
+      className: _JSXStyle.dynamic([["2480261071", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
+    }, c.label)));
+  }) : /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["2480261071", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-item disabled"
+  }, "No results"))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2480261071",
+    dynamic: [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']
+  }, ".with-label.__jsx-style-dynamic-selector{position:relative;display:inline-block;box-sizing:border-box;-webkit-box-align:center;--input-height:".concat(SCALES.height(2.25), ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, defaultWidth), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.phone-input-container.focused.__jsx-style-dynamic-selector{outline:1px solid ").concat(hoverBorder, ";border-radius:6px;}.input-wrapper.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:1px solid ").concat(borderColor, ";width:").concat(SCALES.width(1, defaultWidth), ";height:var(--input-height);border-radius:6px;overflow:hidden;}.dropdown-toggle.__jsx-style-dynamic-selector{padding:7px 12px;border-radius:6px 0px 0px 6px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:14px;border-right:1px solid ").concat(borderColor, ";}.phone-input.__jsx-style-dynamic-selector{width:100%;min-width:0;padding:5px 10px;background-color:transparent;font-size:14px;border:none;}.phone-input.__jsx-style-dynamic-selector:focus{outline:none;}.dropdown.__jsx-style-dynamic-selector{position:absolute;top:100%;left:0;width:").concat(SCALES.width(1, defaultWidth), ";background:").concat(theme.type == 'dark' ? 'black' : 'white', ";border:1px solid ").concat(borderColor, ";border-radius:6px;margin-top:4px;z-index:999;box-shadow:0 4px 10px rgba(0,0,0,0.1);}.search-input.__jsx-style-dynamic-selector{width:100%;padding:8px 10px;border:none;background-color:transparent;border-bottom:1px solid ").concat(borderColor, ";font-size:14px;}.search-input.__jsx-style-dynamic-selector:focus{outline:none;}.country-list.__jsx-style-dynamic-selector{max-height:200px;overflow-y:auto;}.dropdown-item.__jsx-style-dynamic-selector{padding:10px;cursor:pointer;font-size:14px;}.dropdown-item.__jsx-style-dynamic-selector:hover{background:").concat(theme.type == 'dark' ? '#3a3d3d' : '#efefef', ";}.dropdown-item.disabled.__jsx-style-dynamic-selector{color:#888;cursor:default;}")));
+}
+;
+export default withScale(PhoneInput);