@alfalab/core-components 33.1.0 → 34.0.1-beta.0

package/intl-phone-input/modern/component.js

@@ -1,18 +1,20 @@
-import React, { forwardRef, useState, useRef, useEffect } from 'react';
+import React, { forwardRef, useState, useRef, useCallback, useMemo, useEffect } from 'react';
 import cn from 'classnames';
+import WorldMagnifierMIcon from '@alfalab/icons-glyph/WorldMagnifierMIcon';
 import 'react-merge-refs';
 import '@alfalab/hooks';
 import { getCountriesHash, getCountries } from '@alfalab/utils';
 import { InputAutocomplete } from '../../input-autocomplete/modern';
-import './components/flag-icon/component.js';
+import { FlagIcon } from './components/flag-icon/component.js';
 import './components/select-field/component.js';
 import '../../select/modern';
 import { CountriesSelect } from './components/select/component.js';
 import { formatPhoneWithUnclearableCountryCode } from './utils/format-phone-with-unclearable-country-code.js';
 import { calculateCaretPos } from './utils/calculateCaretPos.js';
 import { useCaretAvoidCountryCode } from './useCaretAvoidCountryCode.js';
+import { preparePasteData } from './utils/preparePasteData.js';
 
-var styles = {"addons":"intl-phone-input__addons_lm7s9","l":"intl-phone-input__l_lm7s9","xl":"intl-phone-input__xl_lm7s9"};
+var styles = {"addons":"intl-phone-input__addons_1roio","l":"intl-phone-input__l_1roio","xl":"intl-phone-input__xl_1roio","flagIconWrapper":"intl-phone-input__flagIconWrapper_1roio","emptyCountryIcon":"intl-phone-input__emptyCountryIcon_1roio"};
 require('./index.css');
 
 const countriesHash = getCountriesHash();
@@ -20,22 +22,39 @@ const MAX_DIAL_CODE_LENGTH = 4;
 const MASK_SYMBOLS = [' ', '-', '(', ')'];
 const MAX_PHONE_LEN = 15;
 const DEFAULT_MAX_PHONE_LEN_BY_COUNTRY = { RU: 11 };
-const IntlPhoneInput = forwardRef(({ disabled = false, readOnly = false, size = 'm', colors = 'default', options = [], countries = getCountries(), clearableCountryCode = true, className, value, onChange, onCountryChange, defaultCountryIso2 = 'ru', preventFlip, inputProps, maxPhoneLen = DEFAULT_MAX_PHONE_LEN_BY_COUNTRY, ...restProps }, ref) => {
+const IntlPhoneInput = forwardRef(({ disabled = false, readOnly = false, hideCountrySelect = false, canBeEmptyCountry = false, ruNumberPriority = false, clear = false, size = 'm', colors = 'default', options = [], countries = getCountries(), clearableCountryCode = true, className, value, onChange, onCountryChange, defaultCountryIso2 = 'ru', preventFlip, inputProps, maxPhoneLen = DEFAULT_MAX_PHONE_LEN_BY_COUNTRY, ...restProps }, ref) => {
     const [countryIso2, setCountryIso2] = useState(defaultCountryIso2.toLowerCase());
-    const [fieldWidth, setFieldWidth] = useState(0);
     const inputRef = useRef(null);
     const [inputWrapperRef, setInputWrapperRef] = useState(null);
     const [caretPos, setCaretPos] = useState();
     const phoneLibUtils = useRef();
-    const formatPhone = (inputValue) => {
+    const formatPhone = useCallback((inputValue) => {
         let newValue = inputValue;
         if (phoneLibUtils.current) {
             const Utils = phoneLibUtils.current;
-            const utils = new Utils(countryIso2.toUpperCase());
+            const utils = new Utils(countryIso2 ? countryIso2.toUpperCase() : undefined);
             newValue = utils.input(inputValue);
         }
+        if (countryIso2 === 'ru') {
+            const parts = newValue.split(' ');
+            newValue = parts.reduce((acc, part, index) => {
+                if (index === 0) {
+                    return part;
+                }
+                if (index > 2) {
+                    return `${acc}-${part}`;
+                }
+                return `${acc} ${part}`;
+            }, '');
+        }
         return newValue;
-    };
+    }, [countryIso2]);
+    const formatedValue = useMemo(() => {
+        if (value.indexOf(' ') > 0) {
+            return value;
+        }
+        return formatPhone(value);
+    }, [value, formatPhone]);
     const setCountryByIso2 = (iso2) => {
         const country = countriesHash[iso2];
         const inputValue = `+${country.dialCode}`;
@@ -45,49 +64,64 @@ const IntlPhoneInput = forwardRef(({ disabled = false, readOnly = false, size =
     };
     const handleCountryChange = (countryCode) => {
         if (onCountryChange) {
-            onCountryChange(countryCode.toUpperCase());
+            onCountryChange(countryCode ? countryCode.toUpperCase() : undefined);
         }
     };
-    const setCountryByDialCode = (inputValue) => {
-        for (let i = 0; i < countries.length; i++) {
-            const country = countries[i];
+    const getCountryByNumber = (inputValue) => {
+        // dialcode казахстанских номеров совпадает с российскими, поэтому проверяем отдельно
+        if (new RegExp('^\\+7(\\s)?7').test(inputValue)) {
+            const kzCoutry = countries.find(item => item.iso2 === 'kz');
+            if (kzCoutry) {
+                return kzCoutry;
+            }
+        }
+        const targetCountry = countries.find(country => {
             if (new RegExp(`^\\+${country.dialCode}`).test(inputValue)) {
                 // Сначала проверяем, если приоритет не указан
                 if (country.priority === undefined) {
-                    onChange(formatPhone(inputValue));
-                    setCountryIso2(country.iso2);
-                    handleCountryChange(country.iso2);
-                    break;
+                    return true;
                 }
                 // Если страна уже была выставлена через селект, и коды совпадают
-                if (countryIso2 === country.iso2) {
-                    onChange(formatPhone(inputValue));
-                    setCountryIso2(country.iso2);
-                    handleCountryChange(country.iso2);
-                    break;
-                    // Если не совпадают - выбираем по приоритету
+                if (countryIso2 === country.iso2 && countryIso2 !== 'kz') {
+                    return true;
                 }
-                else if (country.priority === 0) {
-                    onChange(formatPhone(inputValue));
-                    setCountryIso2(country.iso2);
-                    handleCountryChange(country.iso2);
-                    break;
+                // Если не совпадают - выбираем по приоритету
+                if (country.priority === 0) {
+                    return true;
                 }
+                return false;
             }
+            return false;
+        });
+        return targetCountry;
+    };
+    const setCountryByDialCode = (inputValue) => {
+        const country = getCountryByNumber(inputValue);
+        onChange(formatPhone(inputValue));
+        if (country) {
+            setCountryIso2(country.iso2);
+            handleCountryChange(country.iso2);
+        }
+        else if (canBeEmptyCountry) {
+            setCountryIso2(undefined);
+            handleCountryChange(undefined);
         }
     };
     const setCountryByDialCodeWithLengthCheck = (inputValue) => {
-        if (value.length < MAX_DIAL_CODE_LENGTH) {
-            setCountryByDialCode(inputValue);
+        if (inputRef.current) {
+            const { selectionStart } = inputRef.current;
+            if ((selectionStart || 0) <= MAX_DIAL_CODE_LENGTH) {
+                setCountryByDialCode(inputValue);
+            }
         }
     };
     const addCountryCode = (inputValue) => {
-        const country = countriesHash[countryIso2];
-        if (clearableCountryCode) {
+        if (clearableCountryCode || !countryIso2) {
             return inputValue.length === 1 && inputValue !== '+'
                 ? `+${inputValue}`
                 : inputValue;
         }
+        const country = countriesHash[countryIso2];
         return formatPhoneWithUnclearableCountryCode(inputValue, country);
     };
     const handleInputChange = (event) => {
@@ -112,12 +146,15 @@ const IntlPhoneInput = forwardRef(({ disabled = false, readOnly = false, size =
         setCountryByDialCodeWithLengthCheck(selected.key);
         onChange(formatPhone(selected.key));
     };
-    const country = countriesHash[countryIso2];
-    const countryCodeLength = `+${country.dialCode}`.length;
+    const country = countryIso2 && countriesHash[countryIso2];
+    const countryCodeLength = country ? `+${country.dialCode}`.length : 0;
+    const isEmptyValue = clearableCountryCode
+        ? value === '' || value === '+'
+        : value.length <= countryCodeLength;
     const handleInputNewChar = (event, caretPosition) => {
         const input = event.target;
         const currentValue = input.value;
-        const maxPhoneLength = maxPhoneLen?.[countryIso2.toUpperCase()] || MAX_PHONE_LEN;
+        const maxPhoneLength = (countryIso2 && maxPhoneLen?.[countryIso2.toUpperCase()]) || MAX_PHONE_LEN;
         // Если номер полностью заполнен, то перезатираем цифры, если каретка не в самом конце.
         const shouldReplace = maxPhoneLength === currentValue.replace(/\D/g, '').length;
         let endPhonePart = currentValue.slice(caretPosition);
@@ -129,15 +166,27 @@ const IntlPhoneInput = forwardRef(({ disabled = false, readOnly = false, size =
             endPhonePart = endPhonePart.slice(cursor + 1);
         }
         let newValue = currentValue.slice(0, caretPosition) + event.key + endPhonePart;
+        const newValueDecimal = newValue.replace(/\D/g, '');
         // Запрещаем ввод, если номер уже заполнен.
-        if (newValue.replace(/\D/g, '').length > maxPhoneLength) {
+        if (newValueDecimal.length > maxPhoneLength) {
             newValue = newValue.slice(0, -1);
         }
+        if (ruNumberPriority && !value && countryIso2 === 'ru') {
+            if (newValue === '7' || newValue === '8') {
+                newValue = '+7';
+            }
+            else if (newValueDecimal.length === 1) {
+                newValue = `+7${newValueDecimal}`;
+            }
+        }
         newValue = formatPhone(addCountryCode(newValue));
         let phonePartWithoutMask = currentValue.slice(0, caretPosition).replace(/\D/g, '') + event.key;
         if (shouldReplace && phonePartWithoutMask.length > maxPhoneLength) {
             phonePartWithoutMask = phonePartWithoutMask.slice(0, -1);
         }
+        if (newValue && newValue[0] !== '+') {
+            newValue = `+${newValue}`;
+        }
         setCaretPos(calculateCaretPos(phonePartWithoutMask, newValue));
         setCountryByDialCodeWithLengthCheck(newValue);
         onChange(newValue);
@@ -181,6 +230,34 @@ const IntlPhoneInput = forwardRef(({ disabled = false, readOnly = false, size =
             handleInputNewChar(event, caretPosition);
         }
     };
+    const handleClear = () => {
+        if (clearableCountryCode) {
+            onChange('+');
+            if (canBeEmptyCountry) {
+                setCountryIso2(undefined);
+                handleCountryChange(undefined);
+            }
+        }
+        else {
+            onChange(formatedValue.substring(0, countryCodeLength));
+        }
+    };
+    const handlePaste = event => {
+        event.preventDefault();
+        const text = event.clipboardData?.getData('Text');
+        if (!text || !inputRef.current) {
+            return;
+        }
+        const { selectionStart, selectionEnd } = inputRef.current;
+        const preparedNumber = preparePasteData(value, text, selectionStart || 0, selectionEnd || 0);
+        const targetCountry = getCountryByNumber(preparedNumber);
+        const maxPhoneLength = (targetCountry && maxPhoneLen?.[targetCountry.iso2.toUpperCase()]) || MAX_PHONE_LEN;
+        const resultNumber = preparedNumber.substring(0, maxPhoneLength + 1);
+        if (resultNumber) {
+            setCountryIso2(targetCountry ? targetCountry.iso2 : undefined);
+            onChange(formatPhone(addCountryCode(resultNumber)));
+        }
+    };
     useEffect(() => {
         if (inputRef.current && caretPos !== undefined) {
             inputRef.current.setSelectionRange(caretPos, caretPos);
@@ -191,21 +268,23 @@ const IntlPhoneInput = forwardRef(({ disabled = false, readOnly = false, size =
         if (phoneLibUtils.current)
             return;
         import(
-        /* webpackChunkName: "libphonenumber" */ './libphonenumber-js.min-793726a8.js')
+        /* webpackChunkName: "libphonenumber" */ './libphonenumber-js.min-9205d2fb.js')
             .then(utils => {
             phoneLibUtils.current = utils.AsYouType;
-            setCountryByDialCode(value);
+            if (canBeEmptyCountry) {
+                onChange(formatPhone(value));
+            }
+            else {
+                setCountryByDialCode(value);
+            }
         })
             .catch(error => `An error occurred while loading libphonenumber-js:\n${error}`);
         /* eslint-disable-next-line react-hooks/exhaustive-deps */
     }, [value]);
     useCaretAvoidCountryCode({ inputRef, countryCodeLength, clearableCountryCode });
-    useEffect(() => {
-        if (inputWrapperRef) {
-            setFieldWidth(inputWrapperRef.getBoundingClientRect().width);
-        }
-    }, [inputWrapperRef]);
     return (React.createElement(InputAutocomplete, Object.assign({}, restProps, { ref: ref, inputProps: {
+            clear: clear && !isEmptyValue,
+            onClear: handleClear,
             ...inputProps,
             ref: inputRef,
             wrapperRef: setInputWrapperRef,
@@ -214,8 +293,9 @@ const IntlPhoneInput = forwardRef(({ disabled = false, readOnly = false, size =
             className: cn(className, styles[size]),
             addonsClassName: styles.addons,
             onKeyDown: handleKeyDown,
-            leftAddons: countries.length > 1 && (React.createElement(CountriesSelect, { dataTestId: 'countries-select', disabled: disabled || readOnly, size: size, selected: countryIso2, countries: countries, onChange: handleSelectChange, fieldWidth: fieldWidth, preventFlip: preventFlip })),
-        }, optionsListWidth: 'field', closeOnSelect: true, onInput: handleInputChange, onChange: handleChange, options: options, disabled: disabled, readOnly: readOnly, size: size, className: className, value: value })));
+            onPaste: handlePaste,
+            leftAddons: hideCountrySelect ? (React.createElement("span", { className: styles.flagIconWrapper }, countryIso2 ? (React.createElement(FlagIcon, { country: countryIso2 })) : (React.createElement(WorldMagnifierMIcon, { className: styles.emptyCountryIcon })))) : (countries.length > 1 && (React.createElement(CountriesSelect, { dataTestId: 'countries-select', disabled: disabled || readOnly, size: size, selected: countryIso2, countries: countries, onChange: handleSelectChange, fieldWidth: inputWrapperRef && inputWrapperRef.getBoundingClientRect().width, preventFlip: preventFlip }))),
+        }, optionsListWidth: 'field', closeOnSelect: true, onInput: handleInputChange, onChange: handleChange, options: options, disabled: disabled, readOnly: readOnly, size: size, className: className, value: formatedValue })));
 });
 IntlPhoneInput.defaultProps = {
     size: 'm',

package/intl-phone-input/modern/components/flag-icon/component.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 
-var styles = {"flagIcon":"intl-phone-input__flagIcon_szwsx","ac":"intl-phone-input__ac_szwsx","ad":"intl-phone-input__ad_szwsx","ae":"intl-phone-input__ae_szwsx","af":"intl-phone-input__af_szwsx","ag":"intl-phone-input__ag_szwsx","ai":"intl-phone-input__ai_szwsx","al":"intl-phone-input__al_szwsx","am":"intl-phone-input__am_szwsx","ao":"intl-phone-input__ao_szwsx","aq":"intl-phone-input__aq_szwsx","ar":"intl-phone-input__ar_szwsx","as":"intl-phone-input__as_szwsx","at":"intl-phone-input__at_szwsx","au":"intl-phone-input__au_szwsx","aw":"intl-phone-input__aw_szwsx","ax":"intl-phone-input__ax_szwsx","az":"intl-phone-input__az_szwsx","ba":"intl-phone-input__ba_szwsx","bb":"intl-phone-input__bb_szwsx","bd":"intl-phone-input__bd_szwsx","be":"intl-phone-input__be_szwsx","bf":"intl-phone-input__bf_szwsx","bg":"intl-phone-input__bg_szwsx","bh":"intl-phone-input__bh_szwsx","bi":"intl-phone-input__bi_szwsx","bj":"intl-phone-input__bj_szwsx","bl":"intl-phone-input__bl_szwsx","bm":"intl-phone-input__bm_szwsx","bn":"intl-phone-input__bn_szwsx","bo":"intl-phone-input__bo_szwsx","bq":"intl-phone-input__bq_szwsx","br":"intl-phone-input__br_szwsx","bs":"intl-phone-input__bs_szwsx","bt":"intl-phone-input__bt_szwsx","bv":"intl-phone-input__bv_szwsx","bw":"intl-phone-input__bw_szwsx","by":"intl-phone-input__by_szwsx","bz":"intl-phone-input__bz_szwsx","ca":"intl-phone-input__ca_szwsx","cc":"intl-phone-input__cc_szwsx","cd":"intl-phone-input__cd_szwsx","cf":"intl-phone-input__cf_szwsx","cg":"intl-phone-input__cg_szwsx","ch":"intl-phone-input__ch_szwsx","ci":"intl-phone-input__ci_szwsx","ck":"intl-phone-input__ck_szwsx","cl":"intl-phone-input__cl_szwsx","cm":"intl-phone-input__cm_szwsx","cn":"intl-phone-input__cn_szwsx","co":"intl-phone-input__co_szwsx","cp":"intl-phone-input__cp_szwsx","cr":"intl-phone-input__cr_szwsx","cu":"intl-phone-input__cu_szwsx","cv":"intl-phone-input__cv_szwsx","cw":"intl-phone-input__cw_szwsx","cx":"intl-phone-input__cx_szwsx","cy":"intl-phone-input__cy_szwsx","cz":"intl-phone-input__cz_szwsx","de":"intl-phone-input__de_szwsx","dg":"intl-phone-input__dg_szwsx","dj":"intl-phone-input__dj_szwsx","dk":"intl-phone-input__dk_szwsx","dm":"intl-phone-input__dm_szwsx","do":"intl-phone-input__do_szwsx","dz":"intl-phone-input__dz_szwsx","ea":"intl-phone-input__ea_szwsx","ec":"intl-phone-input__ec_szwsx","ee":"intl-phone-input__ee_szwsx","eg":"intl-phone-input__eg_szwsx","eh":"intl-phone-input__eh_szwsx","er":"intl-phone-input__er_szwsx","es":"intl-phone-input__es_szwsx","et":"intl-phone-input__et_szwsx","eu":"intl-phone-input__eu_szwsx","fi":"intl-phone-input__fi_szwsx","fj":"intl-phone-input__fj_szwsx","fk":"intl-phone-input__fk_szwsx","fm":"intl-phone-input__fm_szwsx","fo":"intl-phone-input__fo_szwsx","fr":"intl-phone-input__fr_szwsx","ga":"intl-phone-input__ga_szwsx","gb":"intl-phone-input__gb_szwsx","gd":"intl-phone-input__gd_szwsx","ge":"intl-phone-input__ge_szwsx","gf":"intl-phone-input__gf_szwsx","gg":"intl-phone-input__gg_szwsx","gh":"intl-phone-input__gh_szwsx","gi":"intl-phone-input__gi_szwsx","gl":"intl-phone-input__gl_szwsx","gm":"intl-phone-input__gm_szwsx","gn":"intl-phone-input__gn_szwsx","gp":"intl-phone-input__gp_szwsx","gq":"intl-phone-input__gq_szwsx","gr":"intl-phone-input__gr_szwsx","gs":"intl-phone-input__gs_szwsx","gt":"intl-phone-input__gt_szwsx","gu":"intl-phone-input__gu_szwsx","gw":"intl-phone-input__gw_szwsx","gy":"intl-phone-input__gy_szwsx","hk":"intl-phone-input__hk_szwsx","hm":"intl-phone-input__hm_szwsx","hn":"intl-phone-input__hn_szwsx","hr":"intl-phone-input__hr_szwsx","ht":"intl-phone-input__ht_szwsx","hu":"intl-phone-input__hu_szwsx","ic":"intl-phone-input__ic_szwsx","id":"intl-phone-input__id_szwsx","ie":"intl-phone-input__ie_szwsx","il":"intl-phone-input__il_szwsx","im":"intl-phone-input__im_szwsx","in":"intl-phone-input__in_szwsx","io":"intl-phone-input__io_szwsx","iq":"intl-phone-input__iq_szwsx","ir":"intl-phone-input__ir_szwsx","is":"intl-phone-input__is_szwsx","it":"intl-phone-input__it_szwsx","je":"intl-phone-input__je_szwsx","jm":"intl-phone-input__jm_szwsx","jo":"intl-phone-input__jo_szwsx","jp":"intl-phone-input__jp_szwsx","ke":"intl-phone-input__ke_szwsx","kg":"intl-phone-input__kg_szwsx","kh":"intl-phone-input__kh_szwsx","ki":"intl-phone-input__ki_szwsx","km":"intl-phone-input__km_szwsx","kn":"intl-phone-input__kn_szwsx","kp":"intl-phone-input__kp_szwsx","kr":"intl-phone-input__kr_szwsx","kw":"intl-phone-input__kw_szwsx","ky":"intl-phone-input__ky_szwsx","kz":"intl-phone-input__kz_szwsx","la":"intl-phone-input__la_szwsx","lb":"intl-phone-input__lb_szwsx","lc":"intl-phone-input__lc_szwsx","li":"intl-phone-input__li_szwsx","lk":"intl-phone-input__lk_szwsx","lr":"intl-phone-input__lr_szwsx","ls":"intl-phone-input__ls_szwsx","lt":"intl-phone-input__lt_szwsx","lu":"intl-phone-input__lu_szwsx","lv":"intl-phone-input__lv_szwsx","ly":"intl-phone-input__ly_szwsx","ma":"intl-phone-input__ma_szwsx","mc":"intl-phone-input__mc_szwsx","md":"intl-phone-input__md_szwsx","me":"intl-phone-input__me_szwsx","mf":"intl-phone-input__mf_szwsx","mg":"intl-phone-input__mg_szwsx","mh":"intl-phone-input__mh_szwsx","mk":"intl-phone-input__mk_szwsx","ml":"intl-phone-input__ml_szwsx","mm":"intl-phone-input__mm_szwsx","mn":"intl-phone-input__mn_szwsx","mo":"intl-phone-input__mo_szwsx","mp":"intl-phone-input__mp_szwsx","mq":"intl-phone-input__mq_szwsx","mr":"intl-phone-input__mr_szwsx","ms":"intl-phone-input__ms_szwsx","mt":"intl-phone-input__mt_szwsx","mu":"intl-phone-input__mu_szwsx","mv":"intl-phone-input__mv_szwsx","mw":"intl-phone-input__mw_szwsx","mx":"intl-phone-input__mx_szwsx","my":"intl-phone-input__my_szwsx","mz":"intl-phone-input__mz_szwsx","na":"intl-phone-input__na_szwsx","nc":"intl-phone-input__nc_szwsx","ne":"intl-phone-input__ne_szwsx","nf":"intl-phone-input__nf_szwsx","ng":"intl-phone-input__ng_szwsx","ni":"intl-phone-input__ni_szwsx","nl":"intl-phone-input__nl_szwsx","no":"intl-phone-input__no_szwsx","np":"intl-phone-input__np_szwsx","nr":"intl-phone-input__nr_szwsx","nu":"intl-phone-input__nu_szwsx","nz":"intl-phone-input__nz_szwsx","om":"intl-phone-input__om_szwsx","pa":"intl-phone-input__pa_szwsx","pe":"intl-phone-input__pe_szwsx","pf":"intl-phone-input__pf_szwsx","pg":"intl-phone-input__pg_szwsx","ph":"intl-phone-input__ph_szwsx","pk":"intl-phone-input__pk_szwsx","pl":"intl-phone-input__pl_szwsx","pm":"intl-phone-input__pm_szwsx","pn":"intl-phone-input__pn_szwsx","pr":"intl-phone-input__pr_szwsx","ps":"intl-phone-input__ps_szwsx","pt":"intl-phone-input__pt_szwsx","pw":"intl-phone-input__pw_szwsx","py":"intl-phone-input__py_szwsx","qa":"intl-phone-input__qa_szwsx","re":"intl-phone-input__re_szwsx","ro":"intl-phone-input__ro_szwsx","rs":"intl-phone-input__rs_szwsx","ru":"intl-phone-input__ru_szwsx","rw":"intl-phone-input__rw_szwsx","sa":"intl-phone-input__sa_szwsx","sb":"intl-phone-input__sb_szwsx","sc":"intl-phone-input__sc_szwsx","sd":"intl-phone-input__sd_szwsx","se":"intl-phone-input__se_szwsx","sg":"intl-phone-input__sg_szwsx","sh":"intl-phone-input__sh_szwsx","si":"intl-phone-input__si_szwsx","sj":"intl-phone-input__sj_szwsx","sk":"intl-phone-input__sk_szwsx","sl":"intl-phone-input__sl_szwsx","sm":"intl-phone-input__sm_szwsx","sn":"intl-phone-input__sn_szwsx","so":"intl-phone-input__so_szwsx","sr":"intl-phone-input__sr_szwsx","ss":"intl-phone-input__ss_szwsx","st":"intl-phone-input__st_szwsx","sv":"intl-phone-input__sv_szwsx","sx":"intl-phone-input__sx_szwsx","sy":"intl-phone-input__sy_szwsx","sz":"intl-phone-input__sz_szwsx","ta":"intl-phone-input__ta_szwsx","tc":"intl-phone-input__tc_szwsx","td":"intl-phone-input__td_szwsx","tf":"intl-phone-input__tf_szwsx","tg":"intl-phone-input__tg_szwsx","th":"intl-phone-input__th_szwsx","tj":"intl-phone-input__tj_szwsx","tk":"intl-phone-input__tk_szwsx","tl":"intl-phone-input__tl_szwsx","tm":"intl-phone-input__tm_szwsx","tn":"intl-phone-input__tn_szwsx","to":"intl-phone-input__to_szwsx","tr":"intl-phone-input__tr_szwsx","tt":"intl-phone-input__tt_szwsx","tv":"intl-phone-input__tv_szwsx","tw":"intl-phone-input__tw_szwsx","tz":"intl-phone-input__tz_szwsx","ua":"intl-phone-input__ua_szwsx","ug":"intl-phone-input__ug_szwsx","um":"intl-phone-input__um_szwsx","un":"intl-phone-input__un_szwsx","us":"intl-phone-input__us_szwsx","uy":"intl-phone-input__uy_szwsx","uz":"intl-phone-input__uz_szwsx","va":"intl-phone-input__va_szwsx","vc":"intl-phone-input__vc_szwsx","ve":"intl-phone-input__ve_szwsx","vg":"intl-phone-input__vg_szwsx","vi":"intl-phone-input__vi_szwsx","vn":"intl-phone-input__vn_szwsx","vu":"intl-phone-input__vu_szwsx","wf":"intl-phone-input__wf_szwsx","ws":"intl-phone-input__ws_szwsx","xk":"intl-phone-input__xk_szwsx","ye":"intl-phone-input__ye_szwsx","yt":"intl-phone-input__yt_szwsx","za":"intl-phone-input__za_szwsx","zm":"intl-phone-input__zm_szwsx","zw":"intl-phone-input__zw_szwsx"};
+var styles = {"flagIcon":"intl-phone-input__flagIcon_tg0no","ac":"intl-phone-input__ac_tg0no","ad":"intl-phone-input__ad_tg0no","ae":"intl-phone-input__ae_tg0no","af":"intl-phone-input__af_tg0no","ag":"intl-phone-input__ag_tg0no","ai":"intl-phone-input__ai_tg0no","al":"intl-phone-input__al_tg0no","am":"intl-phone-input__am_tg0no","ao":"intl-phone-input__ao_tg0no","aq":"intl-phone-input__aq_tg0no","ar":"intl-phone-input__ar_tg0no","as":"intl-phone-input__as_tg0no","at":"intl-phone-input__at_tg0no","au":"intl-phone-input__au_tg0no","aw":"intl-phone-input__aw_tg0no","ax":"intl-phone-input__ax_tg0no","az":"intl-phone-input__az_tg0no","ba":"intl-phone-input__ba_tg0no","bb":"intl-phone-input__bb_tg0no","bd":"intl-phone-input__bd_tg0no","be":"intl-phone-input__be_tg0no","bf":"intl-phone-input__bf_tg0no","bg":"intl-phone-input__bg_tg0no","bh":"intl-phone-input__bh_tg0no","bi":"intl-phone-input__bi_tg0no","bj":"intl-phone-input__bj_tg0no","bl":"intl-phone-input__bl_tg0no","bm":"intl-phone-input__bm_tg0no","bn":"intl-phone-input__bn_tg0no","bo":"intl-phone-input__bo_tg0no","bq":"intl-phone-input__bq_tg0no","br":"intl-phone-input__br_tg0no","bs":"intl-phone-input__bs_tg0no","bt":"intl-phone-input__bt_tg0no","bv":"intl-phone-input__bv_tg0no","bw":"intl-phone-input__bw_tg0no","by":"intl-phone-input__by_tg0no","bz":"intl-phone-input__bz_tg0no","ca":"intl-phone-input__ca_tg0no","cc":"intl-phone-input__cc_tg0no","cd":"intl-phone-input__cd_tg0no","cf":"intl-phone-input__cf_tg0no","cg":"intl-phone-input__cg_tg0no","ch":"intl-phone-input__ch_tg0no","ci":"intl-phone-input__ci_tg0no","ck":"intl-phone-input__ck_tg0no","cl":"intl-phone-input__cl_tg0no","cm":"intl-phone-input__cm_tg0no","cn":"intl-phone-input__cn_tg0no","co":"intl-phone-input__co_tg0no","cp":"intl-phone-input__cp_tg0no","cr":"intl-phone-input__cr_tg0no","cu":"intl-phone-input__cu_tg0no","cv":"intl-phone-input__cv_tg0no","cw":"intl-phone-input__cw_tg0no","cx":"intl-phone-input__cx_tg0no","cy":"intl-phone-input__cy_tg0no","cz":"intl-phone-input__cz_tg0no","de":"intl-phone-input__de_tg0no","dg":"intl-phone-input__dg_tg0no","dj":"intl-phone-input__dj_tg0no","dk":"intl-phone-input__dk_tg0no","dm":"intl-phone-input__dm_tg0no","do":"intl-phone-input__do_tg0no","dz":"intl-phone-input__dz_tg0no","ea":"intl-phone-input__ea_tg0no","ec":"intl-phone-input__ec_tg0no","ee":"intl-phone-input__ee_tg0no","eg":"intl-phone-input__eg_tg0no","eh":"intl-phone-input__eh_tg0no","er":"intl-phone-input__er_tg0no","es":"intl-phone-input__es_tg0no","et":"intl-phone-input__et_tg0no","eu":"intl-phone-input__eu_tg0no","fi":"intl-phone-input__fi_tg0no","fj":"intl-phone-input__fj_tg0no","fk":"intl-phone-input__fk_tg0no","fm":"intl-phone-input__fm_tg0no","fo":"intl-phone-input__fo_tg0no","fr":"intl-phone-input__fr_tg0no","ga":"intl-phone-input__ga_tg0no","gb":"intl-phone-input__gb_tg0no","gd":"intl-phone-input__gd_tg0no","ge":"intl-phone-input__ge_tg0no","gf":"intl-phone-input__gf_tg0no","gg":"intl-phone-input__gg_tg0no","gh":"intl-phone-input__gh_tg0no","gi":"intl-phone-input__gi_tg0no","gl":"intl-phone-input__gl_tg0no","gm":"intl-phone-input__gm_tg0no","gn":"intl-phone-input__gn_tg0no","gp":"intl-phone-input__gp_tg0no","gq":"intl-phone-input__gq_tg0no","gr":"intl-phone-input__gr_tg0no","gs":"intl-phone-input__gs_tg0no","gt":"intl-phone-input__gt_tg0no","gu":"intl-phone-input__gu_tg0no","gw":"intl-phone-input__gw_tg0no","gy":"intl-phone-input__gy_tg0no","hk":"intl-phone-input__hk_tg0no","hm":"intl-phone-input__hm_tg0no","hn":"intl-phone-input__hn_tg0no","hr":"intl-phone-input__hr_tg0no","ht":"intl-phone-input__ht_tg0no","hu":"intl-phone-input__hu_tg0no","ic":"intl-phone-input__ic_tg0no","id":"intl-phone-input__id_tg0no","ie":"intl-phone-input__ie_tg0no","il":"intl-phone-input__il_tg0no","im":"intl-phone-input__im_tg0no","in":"intl-phone-input__in_tg0no","io":"intl-phone-input__io_tg0no","iq":"intl-phone-input__iq_tg0no","ir":"intl-phone-input__ir_tg0no","is":"intl-phone-input__is_tg0no","it":"intl-phone-input__it_tg0no","je":"intl-phone-input__je_tg0no","jm":"intl-phone-input__jm_tg0no","jo":"intl-phone-input__jo_tg0no","jp":"intl-phone-input__jp_tg0no","ke":"intl-phone-input__ke_tg0no","kg":"intl-phone-input__kg_tg0no","kh":"intl-phone-input__kh_tg0no","ki":"intl-phone-input__ki_tg0no","km":"intl-phone-input__km_tg0no","kn":"intl-phone-input__kn_tg0no","kp":"intl-phone-input__kp_tg0no","kr":"intl-phone-input__kr_tg0no","kw":"intl-phone-input__kw_tg0no","ky":"intl-phone-input__ky_tg0no","kz":"intl-phone-input__kz_tg0no","la":"intl-phone-input__la_tg0no","lb":"intl-phone-input__lb_tg0no","lc":"intl-phone-input__lc_tg0no","li":"intl-phone-input__li_tg0no","lk":"intl-phone-input__lk_tg0no","lr":"intl-phone-input__lr_tg0no","ls":"intl-phone-input__ls_tg0no","lt":"intl-phone-input__lt_tg0no","lu":"intl-phone-input__lu_tg0no","lv":"intl-phone-input__lv_tg0no","ly":"intl-phone-input__ly_tg0no","ma":"intl-phone-input__ma_tg0no","mc":"intl-phone-input__mc_tg0no","md":"intl-phone-input__md_tg0no","me":"intl-phone-input__me_tg0no","mf":"intl-phone-input__mf_tg0no","mg":"intl-phone-input__mg_tg0no","mh":"intl-phone-input__mh_tg0no","mk":"intl-phone-input__mk_tg0no","ml":"intl-phone-input__ml_tg0no","mm":"intl-phone-input__mm_tg0no","mn":"intl-phone-input__mn_tg0no","mo":"intl-phone-input__mo_tg0no","mp":"intl-phone-input__mp_tg0no","mq":"intl-phone-input__mq_tg0no","mr":"intl-phone-input__mr_tg0no","ms":"intl-phone-input__ms_tg0no","mt":"intl-phone-input__mt_tg0no","mu":"intl-phone-input__mu_tg0no","mv":"intl-phone-input__mv_tg0no","mw":"intl-phone-input__mw_tg0no","mx":"intl-phone-input__mx_tg0no","my":"intl-phone-input__my_tg0no","mz":"intl-phone-input__mz_tg0no","na":"intl-phone-input__na_tg0no","nc":"intl-phone-input__nc_tg0no","ne":"intl-phone-input__ne_tg0no","nf":"intl-phone-input__nf_tg0no","ng":"intl-phone-input__ng_tg0no","ni":"intl-phone-input__ni_tg0no","nl":"intl-phone-input__nl_tg0no","no":"intl-phone-input__no_tg0no","np":"intl-phone-input__np_tg0no","nr":"intl-phone-input__nr_tg0no","nu":"intl-phone-input__nu_tg0no","nz":"intl-phone-input__nz_tg0no","om":"intl-phone-input__om_tg0no","pa":"intl-phone-input__pa_tg0no","pe":"intl-phone-input__pe_tg0no","pf":"intl-phone-input__pf_tg0no","pg":"intl-phone-input__pg_tg0no","ph":"intl-phone-input__ph_tg0no","pk":"intl-phone-input__pk_tg0no","pl":"intl-phone-input__pl_tg0no","pm":"intl-phone-input__pm_tg0no","pn":"intl-phone-input__pn_tg0no","pr":"intl-phone-input__pr_tg0no","ps":"intl-phone-input__ps_tg0no","pt":"intl-phone-input__pt_tg0no","pw":"intl-phone-input__pw_tg0no","py":"intl-phone-input__py_tg0no","qa":"intl-phone-input__qa_tg0no","re":"intl-phone-input__re_tg0no","ro":"intl-phone-input__ro_tg0no","rs":"intl-phone-input__rs_tg0no","ru":"intl-phone-input__ru_tg0no","rw":"intl-phone-input__rw_tg0no","sa":"intl-phone-input__sa_tg0no","sb":"intl-phone-input__sb_tg0no","sc":"intl-phone-input__sc_tg0no","sd":"intl-phone-input__sd_tg0no","se":"intl-phone-input__se_tg0no","sg":"intl-phone-input__sg_tg0no","sh":"intl-phone-input__sh_tg0no","si":"intl-phone-input__si_tg0no","sj":"intl-phone-input__sj_tg0no","sk":"intl-phone-input__sk_tg0no","sl":"intl-phone-input__sl_tg0no","sm":"intl-phone-input__sm_tg0no","sn":"intl-phone-input__sn_tg0no","so":"intl-phone-input__so_tg0no","sr":"intl-phone-input__sr_tg0no","ss":"intl-phone-input__ss_tg0no","st":"intl-phone-input__st_tg0no","sv":"intl-phone-input__sv_tg0no","sx":"intl-phone-input__sx_tg0no","sy":"intl-phone-input__sy_tg0no","sz":"intl-phone-input__sz_tg0no","ta":"intl-phone-input__ta_tg0no","tc":"intl-phone-input__tc_tg0no","td":"intl-phone-input__td_tg0no","tf":"intl-phone-input__tf_tg0no","tg":"intl-phone-input__tg_tg0no","th":"intl-phone-input__th_tg0no","tj":"intl-phone-input__tj_tg0no","tk":"intl-phone-input__tk_tg0no","tl":"intl-phone-input__tl_tg0no","tm":"intl-phone-input__tm_tg0no","tn":"intl-phone-input__tn_tg0no","to":"intl-phone-input__to_tg0no","tr":"intl-phone-input__tr_tg0no","tt":"intl-phone-input__tt_tg0no","tv":"intl-phone-input__tv_tg0no","tw":"intl-phone-input__tw_tg0no","tz":"intl-phone-input__tz_tg0no","ua":"intl-phone-input__ua_tg0no","ug":"intl-phone-input__ug_tg0no","um":"intl-phone-input__um_tg0no","un":"intl-phone-input__un_tg0no","us":"intl-phone-input__us_tg0no","uy":"intl-phone-input__uy_tg0no","uz":"intl-phone-input__uz_tg0no","va":"intl-phone-input__va_tg0no","vc":"intl-phone-input__vc_tg0no","ve":"intl-phone-input__ve_tg0no","vg":"intl-phone-input__vg_tg0no","vi":"intl-phone-input__vi_tg0no","vn":"intl-phone-input__vn_tg0no","vu":"intl-phone-input__vu_tg0no","wf":"intl-phone-input__wf_tg0no","ws":"intl-phone-input__ws_tg0no","xk":"intl-phone-input__xk_tg0no","ye":"intl-phone-input__ye_tg0no","yt":"intl-phone-input__yt_tg0no","za":"intl-phone-input__za_tg0no","zm":"intl-phone-input__zm_tg0no","zw":"intl-phone-input__zw_tg0no"};
 require('./index.css');
 
 /**