@alfalab/core-components-intl-phone-input 6.4.0 → 6.5.2

package/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.5.2](https://github.com/core-ds/core-components/compare/@alfalab/core-components-intl-phone-input@6.5.1...@alfalab/core-components-intl-phone-input@6.5.2) (2022-06-30)
+
+
+### Bug Fixes
+
+* **intl-phone-input:** fixed caret jumps ([#112](https://github.com/core-ds/core-components/issues/112)) ([1d219e7](https://github.com/core-ds/core-components/commit/1d219e7663b8b19d64d3f099bbea01cf76defcd8))
+
+
+
+
+
+## [6.5.1](https://github.com/core-ds/core-components/compare/@alfalab/core-components-intl-phone-input@6.5.0...@alfalab/core-components-intl-phone-input@6.5.1) (2022-06-29)
+
+**Note:** Version bump only for package @alfalab/core-components-intl-phone-input
+
+
+
+
+
+# [6.5.0](https://github.com/core-ds/core-components/compare/@alfalab/core-components-intl-phone-input@6.4.0...@alfalab/core-components-intl-phone-input@6.5.0) (2022-06-28)
+
+
+### Bug Fixes
+
+* **intl-phone-input:** fixed caret jumps ([#107](https://github.com/core-ds/core-components/issues/107)) ([177bf56](https://github.com/core-ds/core-components/commit/177bf5659e79beb08b2ee6ed4c9257215861f904))
+
+
+### Features
+
+* circumflexus retrieval ([#57](https://github.com/core-ds/core-components/issues/57)) ([3820da8](https://github.com/core-ds/core-components/commit/3820da818bcdcbee6904c648b3e29c3c828fe202))
+
+
+
+
+
 # [6.4.0](https://github.com/core-ds/core-components/compare/@alfalab/core-components-intl-phone-input@6.3.9...@alfalab/core-components-intl-phone-input@6.4.0) (2022-06-24)
 
 

package/dist/{component-7d88f33a.js → component-fbf58e08.js}

@@ -51,7 +51,7 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"intl-phone-input__component_15ahh","flagIconContainer":"intl-phone-input__flagIconContainer_15ahh","disabled":"intl-phone-input__disabled_15ahh","inner":"intl-phone-input__inner_15ahh","l":"intl-phone-input__l_15ahh","xl":"intl-phone-input__xl_15ahh","focusVisible":"intl-phone-input__focusVisible_15ahh"};
+var styles = {"component":"intl-phone-input__component_14z08","flagIconContainer":"intl-phone-input__flagIconContainer_14z08","disabled":"intl-phone-input__disabled_14z08","inner":"intl-phone-input__inner_14z08","l":"intl-phone-input__l_14z08","xl":"intl-phone-input__xl_14z08","focusVisible":"intl-phone-input__focusVisible_14z08"};
 require('./components/select-field/index.css')
 
 var SelectField = function (_a) {

package/dist/component.d.ts

@@ -4,6 +4,7 @@ import { CountryCode } from 'libphonenumber-js';
 import { SelectProps } from "@alfalab/core-components-select";
 import { Country } from '@alfalab/utils';
 import { InputAutocompleteProps } from "@alfalab/core-components-input-autocomplete";
+type MaxPhoneLenByCountry = Record<string, number>;
 type IntlPhoneInputProps = Partial<Omit<InputAutocompleteProps, 'onChange'>> & Pick<SelectProps, 'preventFlip'> & {
     /**
      * Значение
@@ -33,6 +34,10 @@ type IntlPhoneInputProps = Partial<Omit<InputAutocompleteProps, 'onChange'>> & P
      * Возможность стереть код страны
      */
     clearableCountryCode?: boolean;
+    /**
+     * Ограничение длин вводимых номеров по странам.
+     */
+    maxPhoneLen?: MaxPhoneLenByCountry;
 };
 declare const IntlPhoneInput: React.ForwardRefExoticComponent<Partial<Pick<InputAutocompleteProps, "selected" | "valueRenderer" | "Optgroup" | "size" | "value" | "disabled" | "multiple" | "name" | "placeholder" | "readOnly" | "className" | "id" | "onFocus" | "onBlur" | "onInput" | "onScroll" | "optionsListWidth" | "options" | "visibleOptions" | "open" | "label" | "error" | "hint" | "Arrow" | "dataTestId" | "fieldClassName" | "success" | "block" | "optionGroupClassName" | "Option" | "inputProps" | "optionsListClassName" | "optionClassName" | "popperClassName" | "autocomplete" | "allowUnselect" | "closeOnSelect" | "circularNavigation" | "defaultOpen" | "popoverPosition" | "preventFlip" | "optionsSize" | "fieldProps" | "optionsListProps" | "optionProps" | "onOpen" | "OptionsList" | "updatePopover" | "zIndexPopover" | "showEmptyOptionsList" | "Input">> & Pick<SelectProps, "preventFlip"> & {
     /**
@@ -63,5 +68,9 @@ declare const IntlPhoneInput: React.ForwardRefExoticComponent<Partial<Pick<Input
      * Возможность стереть код страны
      */
     clearableCountryCode?: boolean | undefined;
+    /**
+     * Ограничение длин вводимых номеров по странам.
+     */
+    maxPhoneLen?: Record<string, number> | undefined;
 } & React.RefAttributes<HTMLInputElement>>;
 export { IntlPhoneInputProps, IntlPhoneInput };

package/dist/component.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_selectField_component = require('./component-7d88f33a.js');
+var components_selectField_component = require('./component-fbf58e08.js');
 var React = require('react');
 var cn = require('classnames');
 var utils = require('@alfalab/utils');
@@ -13,103 +13,97 @@ require('./components/flag-icon/component.js');
 require('@alfalab/core-components-select');
 var components_select_component = require('./components/select/component.js');
 var utils_formatPhoneWithUnclearableCountryCode = require('./utils/format-phone-with-unclearable-country-code.js');
+var utils_calculateCaretPos = require('./utils/calculateCaretPos.js');
 var useCaretAvoidCountryCode = require('./useCaretAvoidCountryCode.js');
-var usePreventCaretReset = require('./usePreventCaretReset.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"addons":"intl-phone-input__addons_jc47s","l":"intl-phone-input__l_jc47s","xl":"intl-phone-input__xl_jc47s"};
+var styles = {"addons":"intl-phone-input__addons_rhr68","l":"intl-phone-input__l_rhr68","xl":"intl-phone-input__xl_rhr68"};
 require('./index.css')
 
 var countriesHash = utils.getCountriesHash();
 var MAX_DIAL_CODE_LENGTH = 4;
+var MASK_SYMBOLS = [' ', '-', '(', ')'];
+var MAX_PHONE_LEN = 15;
+var DEFAULT_MAX_PHONE_LEN_BY_COUNTRY = { RU: 11 };
 var IntlPhoneInput = React.forwardRef(function (_a, ref) {
-    var _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.readOnly, readOnly = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? 'm' : _d, _e = _a.colors, colors = _e === void 0 ? 'default' : _e, _f = _a.options, options = _f === void 0 ? [] : _f, _g = _a.countries, countries = _g === void 0 ? utils.getCountries() : _g, _h = _a.clearableCountryCode, clearableCountryCode = _h === void 0 ? true : _h, className = _a.className, value = _a.value, onChange = _a.onChange, onCountryChange = _a.onCountryChange, _j = _a.defaultCountryIso2, defaultCountryIso2 = _j === void 0 ? 'ru' : _j, preventFlip = _a.preventFlip, inputProps = _a.inputProps, restProps = components_selectField_component.__rest(_a, ["disabled", "readOnly", "size", "colors", "options", "countries", "clearableCountryCode", "className", "value", "onChange", "onCountryChange", "defaultCountryIso2", "preventFlip", "inputProps"]);
-    var _k = React.useState(defaultCountryIso2.toLowerCase()), countryIso2 = _k[0], setCountryIso2 = _k[1];
+    var _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.readOnly, readOnly = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? 'm' : _d, _e = _a.colors, colors = _e === void 0 ? 'default' : _e, _f = _a.options, options = _f === void 0 ? [] : _f, _g = _a.countries, countries = _g === void 0 ? utils.getCountries() : _g, _h = _a.clearableCountryCode, clearableCountryCode = _h === void 0 ? true : _h, className = _a.className, value = _a.value, onChange = _a.onChange, onCountryChange = _a.onCountryChange, _j = _a.defaultCountryIso2, defaultCountryIso2 = _j === void 0 ? 'ru' : _j, preventFlip = _a.preventFlip, inputProps = _a.inputProps, _k = _a.maxPhoneLen, maxPhoneLen = _k === void 0 ? DEFAULT_MAX_PHONE_LEN_BY_COUNTRY : _k, restProps = components_selectField_component.__rest(_a, ["disabled", "readOnly", "size", "colors", "options", "countries", "clearableCountryCode", "className", "value", "onChange", "onCountryChange", "defaultCountryIso2", "preventFlip", "inputProps", "maxPhoneLen"]);
+    var _l = React.useState(defaultCountryIso2.toLowerCase()), countryIso2 = _l[0], setCountryIso2 = _l[1];
     var inputRef = React.useRef(null);
-    var _l = React.useState(null), inputWrapperRef = _l[0], setInputWrapperRef = _l[1];
+    var _m = React.useState(null), inputWrapperRef = _m[0], setInputWrapperRef = _m[1];
+    var _o = React.useState(), caretPos = _o[0], setCaretPos = _o[1];
     var phoneLibUtils = React.useRef();
-    var setCountryByIso2 = React.useCallback(function (iso2) {
-        var country = countriesHash[iso2];
-        var inputValue = "+" + country.dialCode;
-        onChange(inputValue);
-        setCountryIso2(country.iso2);
-        return country;
-    }, [onChange]);
-    var setValue = React.useCallback(function (inputValue) {
+    var formatPhone = function (inputValue) {
         var newValue = inputValue;
         if (phoneLibUtils.current) {
             var Utils = phoneLibUtils.current;
             var utils = new Utils(countryIso2.toUpperCase());
             newValue = utils.input(inputValue);
         }
-        onChange(newValue);
-    }, [countryIso2, onChange]);
-    var handleCountryChange = React.useCallback(function (countryCode) {
+        return newValue;
+    };
+    var setCountryByIso2 = function (iso2) {
+        var country = countriesHash[iso2];
+        var inputValue = "+" + country.dialCode;
+        onChange(inputValue);
+        setCountryIso2(country.iso2);
+        return country;
+    };
+    var handleCountryChange = function (countryCode) {
         if (onCountryChange) {
             onCountryChange(countryCode.toUpperCase());
         }
-    }, [onCountryChange]);
-    var setCountryByDialCode = React.useCallback(function (inputValue) {
+    };
+    var setCountryByDialCode = function (inputValue) {
         for (var i = 0; i < countries.length; i++) {
             var country_1 = countries[i];
             if (new RegExp("^\\+" + country_1.dialCode).test(inputValue)) {
                 // Сначала проверяем, если приоритет не указан
                 if (country_1.priority === undefined) {
-                    setValue(inputValue);
+                    onChange(formatPhone(inputValue));
                     setCountryIso2(country_1.iso2);
                     handleCountryChange(country_1.iso2);
                     break;
                 }
                 // Если страна уже была выставлена через селект, и коды совпадают
                 if (countryIso2 === country_1.iso2) {
-                    setValue(inputValue);
+                    onChange(formatPhone(inputValue));
                     setCountryIso2(country_1.iso2);
                     handleCountryChange(country_1.iso2);
                     break;
                     // Если не совпадают - выбираем по приоритету
                 }
                 else if (country_1.priority === 0) {
-                    setValue(inputValue);
+                    onChange(formatPhone(inputValue));
                     setCountryIso2(country_1.iso2);
                     handleCountryChange(country_1.iso2);
                     break;
                 }
             }
         }
-    }, [countries, countryIso2, setValue, handleCountryChange]);
-    var loadPhoneUtils = React.useCallback(function () {
-        // prettier-ignore
-        return Promise.resolve().then(function () { return require(/* webpackChunkName: "libphonenumber" */ './libphonenumber-js.min-13d3dc00.js'); })
-            .then(function (utils) {
-            phoneLibUtils.current = utils.AsYouType;
-        })
-            .catch(function (error) { return "An error occurred while loading libphonenumber-js:\n" + error; });
-    }, []);
-    var handleInputChange = React.useCallback(function (event) {
-        var targetValue = event.target.value;
+    };
+    var setCountryByDialCodeWithLengthCheck = function (inputValue) {
+        if (value.length < MAX_DIAL_CODE_LENGTH) {
+            setCountryByDialCode(inputValue);
+        }
+    };
+    var addCountryCode = function (inputValue) {
         var country = countriesHash[countryIso2];
         if (clearableCountryCode) {
-            var newValue = targetValue.length === 1 && targetValue !== '+'
-                ? "+" + targetValue
-                : targetValue;
-            setValue(newValue);
-            if (value.length < MAX_DIAL_CODE_LENGTH) {
-                setCountryByDialCode(newValue);
-            }
-            return;
-        }
-        if (!clearableCountryCode) {
-            var newValue = utils_formatPhoneWithUnclearableCountryCode.formatPhoneWithUnclearableCountryCode(targetValue, country);
-            setValue(newValue);
-            return;
+            return inputValue.length === 1 && inputValue !== '+'
+                ? "+" + inputValue
+                : inputValue;
         }
-        setValue(targetValue);
-    }, [clearableCountryCode, countryIso2, setCountryByDialCode, setValue, value.length]);
-    var handleSelectChange = React.useCallback(function (_a) {
+        return utils_formatPhoneWithUnclearableCountryCode.formatPhoneWithUnclearableCountryCode(inputValue, country);
+    };
+    var handleInputChange = function (event) {
+        setCountryByDialCodeWithLengthCheck(event.target.value);
+        onChange(formatPhone(addCountryCode(event.target.value)));
+    };
+    var handleSelectChange = function (_a) {
         var selected = _a.selected;
         if (selected) {
             var country_2 = setCountryByIso2(selected.value);
@@ -120,28 +114,103 @@ var IntlPhoneInput = React.forwardRef(function (_a, ref) {
             }
             handleCountryChange(country_2.iso2);
         }
-    }, [setCountryByIso2, handleCountryChange]);
-    var handleChange = React.useCallback(function (payload) {
+    };
+    var handleChange = function (payload) {
         var selected = payload.selected;
         if (!selected)
             return;
-        if (selected.key.length < MAX_DIAL_CODE_LENGTH) {
-            setCountryByDialCode(selected.key);
+        setCountryByDialCodeWithLengthCheck(selected.key);
+        onChange(formatPhone(selected.key));
+    };
+    var country = countriesHash[countryIso2];
+    var countryCodeLength = ("+" + country.dialCode).length;
+    var handleInputNewChar = function (event, caretPosition) {
+        var input = event.target;
+        var currentValue = input.value;
+        var maxPhoneLength = (maxPhoneLen === null || maxPhoneLen === void 0 ? void 0 : maxPhoneLen[countryIso2.toUpperCase()]) || MAX_PHONE_LEN;
+        // Если номер полностью заполнен, то перезатираем цифры, если каретка не в самом конце.
+        var shouldReplace = maxPhoneLength === currentValue.replace(/\D/g, '').length;
+        var endPhonePart = currentValue.slice(caretPosition);
+        if (shouldReplace) {
+            var cursor = 0;
+            while (MASK_SYMBOLS.includes(endPhonePart.charAt(cursor))) {
+                cursor += 1;
+            }
+            endPhonePart = endPhonePart.slice(cursor + 1);
+        }
+        var newValue = currentValue.slice(0, caretPosition) + event.key + endPhonePart;
+        // Запрещаем ввод, если номер уже заполнен.
+        if (newValue.replace(/\D/g, '').length > maxPhoneLength) {
+            newValue = newValue.slice(0, -1);
+        }
+        newValue = formatPhone(addCountryCode(newValue));
+        var phonePartWithoutMask = currentValue.slice(0, caretPosition).replace(/\D/g, '') + event.key;
+        if (shouldReplace && phonePartWithoutMask.length > maxPhoneLength) {
+            phonePartWithoutMask = phonePartWithoutMask.slice(0, -1);
+        }
+        setCaretPos(utils_calculateCaretPos.calculateCaretPos(phonePartWithoutMask, newValue));
+        setCountryByDialCodeWithLengthCheck(newValue);
+        onChange(newValue);
+    };
+    var handleDeleteChar = function (event, caretPosition) {
+        var input = event.target;
+        if (!clearableCountryCode && caretPosition <= countryCodeLength)
+            return;
+        var currentValue = input.value;
+        var isMaskSymbol = function (count) {
+            var isMask = MASK_SYMBOLS.includes(currentValue.charAt(caretPosition - count));
+            var isPossibleToRemove = clearableCountryCode
+                ? caretPosition - count > 0
+                : caretPosition - count > countryCodeLength;
+            return isMask && isPossibleToRemove;
+        };
+        var deletedCharsCount = 1;
+        // Высчитываем кол-во символов, которые нужно удалить.
+        while (isMaskSymbol(deletedCharsCount)) {
+            deletedCharsCount += 1;
+        }
+        var phonePart = currentValue.slice(0, caretPosition - deletedCharsCount);
+        var newValue = formatPhone(addCountryCode(phonePart + currentValue.slice(caretPosition)));
+        var phonePartWithoutMask = phonePart.replace(/[^0-9+]+/g, '');
+        setCaretPos(utils_calculateCaretPos.calculateCaretPos(phonePartWithoutMask, newValue));
+        setCountryByDialCodeWithLengthCheck(newValue);
+        onChange(newValue);
+    };
+    var handleKeyDown = function (event) {
+        var input = event.target;
+        var caretPosition = input.selectionStart || 0;
+        // Нажат только Backspace, не сочетание клавиш с ним.
+        if (!event.shiftKey && !event.ctrlKey && !event.metaKey && event.key === 'Backspace') {
+            if (!caretPosition)
+                return;
+            event.preventDefault();
+            handleDeleteChar(event, caretPosition);
         }
-        setValue(selected.key);
-    }, [setValue, setCountryByDialCode]);
+        if (event.key.length === 1 && /[0-9+]/.test(event.key)) {
+            event.preventDefault();
+            handleInputNewChar(event, caretPosition);
+        }
+    };
     React.useEffect(function () {
-        if (!phoneLibUtils.current) {
-            loadPhoneUtils().then(function () {
-                setCountryByDialCode(value);
-            });
+        if (inputRef.current && caretPos !== undefined) {
+            inputRef.current.setSelectionRange(caretPos, caretPos);
+            setCaretPos(undefined);
         }
-    }, [countryIso2, loadPhoneUtils, setCountryByDialCode, value]);
-    var country = countriesHash[countryIso2];
-    var countryCodeLength = ("+" + country.dialCode).length;
+    }, [caretPos]);
+    React.useEffect(function () {
+        if (phoneLibUtils.current)
+            return;
+        Promise.resolve().then(function () { return require(
+        /* webpackChunkName: "libphonenumber" */ './libphonenumber-js.min-6d8f77f6.js'); })
+            .then(function (utils) {
+            phoneLibUtils.current = utils.AsYouType;
+            setCountryByDialCode(value);
+        })
+            .catch(function (error) { return "An error occurred while loading libphonenumber-js:\n" + error; });
+        /* eslint-disable-next-line react-hooks/exhaustive-deps */
+    }, [value]);
     useCaretAvoidCountryCode.useCaretAvoidCountryCode({ inputRef: inputRef, countryCodeLength: countryCodeLength, clearableCountryCode: clearableCountryCode });
-    usePreventCaretReset.usePreventCaretReset({ inputRef: inputRef, countryCodeLength: countryCodeLength, clearableCountryCode: clearableCountryCode });
-    return (React__default['default'].createElement(coreComponentsInputAutocomplete.InputAutocomplete, components_selectField_component.__assign({}, restProps, { ref: ref, inputProps: components_selectField_component.__assign(components_selectField_component.__assign({}, inputProps), { ref: inputRef, wrapperRef: setInputWrapperRef, type: 'tel', colors: colors, className: cn__default['default'](className, styles[size]), addonsClassName: styles.addons, leftAddons: countries.length > 1 && (React__default['default'].createElement(components_select_component.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: value })));
+    return (React__default['default'].createElement(coreComponentsInputAutocomplete.InputAutocomplete, components_selectField_component.__assign({}, restProps, { ref: ref, inputProps: components_selectField_component.__assign(components_selectField_component.__assign({}, inputProps), { ref: inputRef, wrapperRef: setInputWrapperRef, type: 'tel', colors: colors, className: cn__default['default'](className, styles[size]), addonsClassName: styles.addons, onKeyDown: handleKeyDown, leftAddons: countries.length > 1 && (React__default['default'].createElement(components_select_component.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: value })));
 });
 IntlPhoneInput.defaultProps = {
     size: 'm',

package/dist/components/flag-icon/component.js

@@ -10,7 +10,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"flagIcon":"intl-phone-input__flagIcon_8ilbx","ac":"intl-phone-input__ac_8ilbx","ad":"intl-phone-input__ad_8ilbx","ae":"intl-phone-input__ae_8ilbx","af":"intl-phone-input__af_8ilbx","ag":"intl-phone-input__ag_8ilbx","ai":"intl-phone-input__ai_8ilbx","al":"intl-phone-input__al_8ilbx","am":"intl-phone-input__am_8ilbx","ao":"intl-phone-input__ao_8ilbx","aq":"intl-phone-input__aq_8ilbx","ar":"intl-phone-input__ar_8ilbx","as":"intl-phone-input__as_8ilbx","at":"intl-phone-input__at_8ilbx","au":"intl-phone-input__au_8ilbx","aw":"intl-phone-input__aw_8ilbx","ax":"intl-phone-input__ax_8ilbx","az":"intl-phone-input__az_8ilbx","ba":"intl-phone-input__ba_8ilbx","bb":"intl-phone-input__bb_8ilbx","bd":"intl-phone-input__bd_8ilbx","be":"intl-phone-input__be_8ilbx","bf":"intl-phone-input__bf_8ilbx","bg":"intl-phone-input__bg_8ilbx","bh":"intl-phone-input__bh_8ilbx","bi":"intl-phone-input__bi_8ilbx","bj":"intl-phone-input__bj_8ilbx","bl":"intl-phone-input__bl_8ilbx","bm":"intl-phone-input__bm_8ilbx","bn":"intl-phone-input__bn_8ilbx","bo":"intl-phone-input__bo_8ilbx","bq":"intl-phone-input__bq_8ilbx","br":"intl-phone-input__br_8ilbx","bs":"intl-phone-input__bs_8ilbx","bt":"intl-phone-input__bt_8ilbx","bv":"intl-phone-input__bv_8ilbx","bw":"intl-phone-input__bw_8ilbx","by":"intl-phone-input__by_8ilbx","bz":"intl-phone-input__bz_8ilbx","ca":"intl-phone-input__ca_8ilbx","cc":"intl-phone-input__cc_8ilbx","cd":"intl-phone-input__cd_8ilbx","cf":"intl-phone-input__cf_8ilbx","cg":"intl-phone-input__cg_8ilbx","ch":"intl-phone-input__ch_8ilbx","ci":"intl-phone-input__ci_8ilbx","ck":"intl-phone-input__ck_8ilbx","cl":"intl-phone-input__cl_8ilbx","cm":"intl-phone-input__cm_8ilbx","cn":"intl-phone-input__cn_8ilbx","co":"intl-phone-input__co_8ilbx","cp":"intl-phone-input__cp_8ilbx","cr":"intl-phone-input__cr_8ilbx","cu":"intl-phone-input__cu_8ilbx","cv":"intl-phone-input__cv_8ilbx","cw":"intl-phone-input__cw_8ilbx","cx":"intl-phone-input__cx_8ilbx","cy":"intl-phone-input__cy_8ilbx","cz":"intl-phone-input__cz_8ilbx","de":"intl-phone-input__de_8ilbx","dg":"intl-phone-input__dg_8ilbx","dj":"intl-phone-input__dj_8ilbx","dk":"intl-phone-input__dk_8ilbx","dm":"intl-phone-input__dm_8ilbx","do":"intl-phone-input__do_8ilbx","dz":"intl-phone-input__dz_8ilbx","ea":"intl-phone-input__ea_8ilbx","ec":"intl-phone-input__ec_8ilbx","ee":"intl-phone-input__ee_8ilbx","eg":"intl-phone-input__eg_8ilbx","eh":"intl-phone-input__eh_8ilbx","er":"intl-phone-input__er_8ilbx","es":"intl-phone-input__es_8ilbx","et":"intl-phone-input__et_8ilbx","eu":"intl-phone-input__eu_8ilbx","fi":"intl-phone-input__fi_8ilbx","fj":"intl-phone-input__fj_8ilbx","fk":"intl-phone-input__fk_8ilbx","fm":"intl-phone-input__fm_8ilbx","fo":"intl-phone-input__fo_8ilbx","fr":"intl-phone-input__fr_8ilbx","ga":"intl-phone-input__ga_8ilbx","gb":"intl-phone-input__gb_8ilbx","gd":"intl-phone-input__gd_8ilbx","ge":"intl-phone-input__ge_8ilbx","gf":"intl-phone-input__gf_8ilbx","gg":"intl-phone-input__gg_8ilbx","gh":"intl-phone-input__gh_8ilbx","gi":"intl-phone-input__gi_8ilbx","gl":"intl-phone-input__gl_8ilbx","gm":"intl-phone-input__gm_8ilbx","gn":"intl-phone-input__gn_8ilbx","gp":"intl-phone-input__gp_8ilbx","gq":"intl-phone-input__gq_8ilbx","gr":"intl-phone-input__gr_8ilbx","gs":"intl-phone-input__gs_8ilbx","gt":"intl-phone-input__gt_8ilbx","gu":"intl-phone-input__gu_8ilbx","gw":"intl-phone-input__gw_8ilbx","gy":"intl-phone-input__gy_8ilbx","hk":"intl-phone-input__hk_8ilbx","hm":"intl-phone-input__hm_8ilbx","hn":"intl-phone-input__hn_8ilbx","hr":"intl-phone-input__hr_8ilbx","ht":"intl-phone-input__ht_8ilbx","hu":"intl-phone-input__hu_8ilbx","ic":"intl-phone-input__ic_8ilbx","id":"intl-phone-input__id_8ilbx","ie":"intl-phone-input__ie_8ilbx","il":"intl-phone-input__il_8ilbx","im":"intl-phone-input__im_8ilbx","in":"intl-phone-input__in_8ilbx","io":"intl-phone-input__io_8ilbx","iq":"intl-phone-input__iq_8ilbx","ir":"intl-phone-input__ir_8ilbx","is":"intl-phone-input__is_8ilbx","it":"intl-phone-input__it_8ilbx","je":"intl-phone-input__je_8ilbx","jm":"intl-phone-input__jm_8ilbx","jo":"intl-phone-input__jo_8ilbx","jp":"intl-phone-input__jp_8ilbx","ke":"intl-phone-input__ke_8ilbx","kg":"intl-phone-input__kg_8ilbx","kh":"intl-phone-input__kh_8ilbx","ki":"intl-phone-input__ki_8ilbx","km":"intl-phone-input__km_8ilbx","kn":"intl-phone-input__kn_8ilbx","kp":"intl-phone-input__kp_8ilbx","kr":"intl-phone-input__kr_8ilbx","kw":"intl-phone-input__kw_8ilbx","ky":"intl-phone-input__ky_8ilbx","kz":"intl-phone-input__kz_8ilbx","la":"intl-phone-input__la_8ilbx","lb":"intl-phone-input__lb_8ilbx","lc":"intl-phone-input__lc_8ilbx","li":"intl-phone-input__li_8ilbx","lk":"intl-phone-input__lk_8ilbx","lr":"intl-phone-input__lr_8ilbx","ls":"intl-phone-input__ls_8ilbx","lt":"intl-phone-input__lt_8ilbx","lu":"intl-phone-input__lu_8ilbx","lv":"intl-phone-input__lv_8ilbx","ly":"intl-phone-input__ly_8ilbx","ma":"intl-phone-input__ma_8ilbx","mc":"intl-phone-input__mc_8ilbx","md":"intl-phone-input__md_8ilbx","me":"intl-phone-input__me_8ilbx","mf":"intl-phone-input__mf_8ilbx","mg":"intl-phone-input__mg_8ilbx","mh":"intl-phone-input__mh_8ilbx","mk":"intl-phone-input__mk_8ilbx","ml":"intl-phone-input__ml_8ilbx","mm":"intl-phone-input__mm_8ilbx","mn":"intl-phone-input__mn_8ilbx","mo":"intl-phone-input__mo_8ilbx","mp":"intl-phone-input__mp_8ilbx","mq":"intl-phone-input__mq_8ilbx","mr":"intl-phone-input__mr_8ilbx","ms":"intl-phone-input__ms_8ilbx","mt":"intl-phone-input__mt_8ilbx","mu":"intl-phone-input__mu_8ilbx","mv":"intl-phone-input__mv_8ilbx","mw":"intl-phone-input__mw_8ilbx","mx":"intl-phone-input__mx_8ilbx","my":"intl-phone-input__my_8ilbx","mz":"intl-phone-input__mz_8ilbx","na":"intl-phone-input__na_8ilbx","nc":"intl-phone-input__nc_8ilbx","ne":"intl-phone-input__ne_8ilbx","nf":"intl-phone-input__nf_8ilbx","ng":"intl-phone-input__ng_8ilbx","ni":"intl-phone-input__ni_8ilbx","nl":"intl-phone-input__nl_8ilbx","no":"intl-phone-input__no_8ilbx","np":"intl-phone-input__np_8ilbx","nr":"intl-phone-input__nr_8ilbx","nu":"intl-phone-input__nu_8ilbx","nz":"intl-phone-input__nz_8ilbx","om":"intl-phone-input__om_8ilbx","pa":"intl-phone-input__pa_8ilbx","pe":"intl-phone-input__pe_8ilbx","pf":"intl-phone-input__pf_8ilbx","pg":"intl-phone-input__pg_8ilbx","ph":"intl-phone-input__ph_8ilbx","pk":"intl-phone-input__pk_8ilbx","pl":"intl-phone-input__pl_8ilbx","pm":"intl-phone-input__pm_8ilbx","pn":"intl-phone-input__pn_8ilbx","pr":"intl-phone-input__pr_8ilbx","ps":"intl-phone-input__ps_8ilbx","pt":"intl-phone-input__pt_8ilbx","pw":"intl-phone-input__pw_8ilbx","py":"intl-phone-input__py_8ilbx","qa":"intl-phone-input__qa_8ilbx","re":"intl-phone-input__re_8ilbx","ro":"intl-phone-input__ro_8ilbx","rs":"intl-phone-input__rs_8ilbx","ru":"intl-phone-input__ru_8ilbx","rw":"intl-phone-input__rw_8ilbx","sa":"intl-phone-input__sa_8ilbx","sb":"intl-phone-input__sb_8ilbx","sc":"intl-phone-input__sc_8ilbx","sd":"intl-phone-input__sd_8ilbx","se":"intl-phone-input__se_8ilbx","sg":"intl-phone-input__sg_8ilbx","sh":"intl-phone-input__sh_8ilbx","si":"intl-phone-input__si_8ilbx","sj":"intl-phone-input__sj_8ilbx","sk":"intl-phone-input__sk_8ilbx","sl":"intl-phone-input__sl_8ilbx","sm":"intl-phone-input__sm_8ilbx","sn":"intl-phone-input__sn_8ilbx","so":"intl-phone-input__so_8ilbx","sr":"intl-phone-input__sr_8ilbx","ss":"intl-phone-input__ss_8ilbx","st":"intl-phone-input__st_8ilbx","sv":"intl-phone-input__sv_8ilbx","sx":"intl-phone-input__sx_8ilbx","sy":"intl-phone-input__sy_8ilbx","sz":"intl-phone-input__sz_8ilbx","ta":"intl-phone-input__ta_8ilbx","tc":"intl-phone-input__tc_8ilbx","td":"intl-phone-input__td_8ilbx","tf":"intl-phone-input__tf_8ilbx","tg":"intl-phone-input__tg_8ilbx","th":"intl-phone-input__th_8ilbx","tj":"intl-phone-input__tj_8ilbx","tk":"intl-phone-input__tk_8ilbx","tl":"intl-phone-input__tl_8ilbx","tm":"intl-phone-input__tm_8ilbx","tn":"intl-phone-input__tn_8ilbx","to":"intl-phone-input__to_8ilbx","tr":"intl-phone-input__tr_8ilbx","tt":"intl-phone-input__tt_8ilbx","tv":"intl-phone-input__tv_8ilbx","tw":"intl-phone-input__tw_8ilbx","tz":"intl-phone-input__tz_8ilbx","ua":"intl-phone-input__ua_8ilbx","ug":"intl-phone-input__ug_8ilbx","um":"intl-phone-input__um_8ilbx","un":"intl-phone-input__un_8ilbx","us":"intl-phone-input__us_8ilbx","uy":"intl-phone-input__uy_8ilbx","uz":"intl-phone-input__uz_8ilbx","va":"intl-phone-input__va_8ilbx","vc":"intl-phone-input__vc_8ilbx","ve":"intl-phone-input__ve_8ilbx","vg":"intl-phone-input__vg_8ilbx","vi":"intl-phone-input__vi_8ilbx","vn":"intl-phone-input__vn_8ilbx","vu":"intl-phone-input__vu_8ilbx","wf":"intl-phone-input__wf_8ilbx","ws":"intl-phone-input__ws_8ilbx","xk":"intl-phone-input__xk_8ilbx","ye":"intl-phone-input__ye_8ilbx","yt":"intl-phone-input__yt_8ilbx","za":"intl-phone-input__za_8ilbx","zm":"intl-phone-input__zm_8ilbx","zw":"intl-phone-input__zw_8ilbx"};
+var styles = {"flagIcon":"intl-phone-input__flagIcon_2sxng","ac":"intl-phone-input__ac_2sxng","ad":"intl-phone-input__ad_2sxng","ae":"intl-phone-input__ae_2sxng","af":"intl-phone-input__af_2sxng","ag":"intl-phone-input__ag_2sxng","ai":"intl-phone-input__ai_2sxng","al":"intl-phone-input__al_2sxng","am":"intl-phone-input__am_2sxng","ao":"intl-phone-input__ao_2sxng","aq":"intl-phone-input__aq_2sxng","ar":"intl-phone-input__ar_2sxng","as":"intl-phone-input__as_2sxng","at":"intl-phone-input__at_2sxng","au":"intl-phone-input__au_2sxng","aw":"intl-phone-input__aw_2sxng","ax":"intl-phone-input__ax_2sxng","az":"intl-phone-input__az_2sxng","ba":"intl-phone-input__ba_2sxng","bb":"intl-phone-input__bb_2sxng","bd":"intl-phone-input__bd_2sxng","be":"intl-phone-input__be_2sxng","bf":"intl-phone-input__bf_2sxng","bg":"intl-phone-input__bg_2sxng","bh":"intl-phone-input__bh_2sxng","bi":"intl-phone-input__bi_2sxng","bj":"intl-phone-input__bj_2sxng","bl":"intl-phone-input__bl_2sxng","bm":"intl-phone-input__bm_2sxng","bn":"intl-phone-input__bn_2sxng","bo":"intl-phone-input__bo_2sxng","bq":"intl-phone-input__bq_2sxng","br":"intl-phone-input__br_2sxng","bs":"intl-phone-input__bs_2sxng","bt":"intl-phone-input__bt_2sxng","bv":"intl-phone-input__bv_2sxng","bw":"intl-phone-input__bw_2sxng","by":"intl-phone-input__by_2sxng","bz":"intl-phone-input__bz_2sxng","ca":"intl-phone-input__ca_2sxng","cc":"intl-phone-input__cc_2sxng","cd":"intl-phone-input__cd_2sxng","cf":"intl-phone-input__cf_2sxng","cg":"intl-phone-input__cg_2sxng","ch":"intl-phone-input__ch_2sxng","ci":"intl-phone-input__ci_2sxng","ck":"intl-phone-input__ck_2sxng","cl":"intl-phone-input__cl_2sxng","cm":"intl-phone-input__cm_2sxng","cn":"intl-phone-input__cn_2sxng","co":"intl-phone-input__co_2sxng","cp":"intl-phone-input__cp_2sxng","cr":"intl-phone-input__cr_2sxng","cu":"intl-phone-input__cu_2sxng","cv":"intl-phone-input__cv_2sxng","cw":"intl-phone-input__cw_2sxng","cx":"intl-phone-input__cx_2sxng","cy":"intl-phone-input__cy_2sxng","cz":"intl-phone-input__cz_2sxng","de":"intl-phone-input__de_2sxng","dg":"intl-phone-input__dg_2sxng","dj":"intl-phone-input__dj_2sxng","dk":"intl-phone-input__dk_2sxng","dm":"intl-phone-input__dm_2sxng","do":"intl-phone-input__do_2sxng","dz":"intl-phone-input__dz_2sxng","ea":"intl-phone-input__ea_2sxng","ec":"intl-phone-input__ec_2sxng","ee":"intl-phone-input__ee_2sxng","eg":"intl-phone-input__eg_2sxng","eh":"intl-phone-input__eh_2sxng","er":"intl-phone-input__er_2sxng","es":"intl-phone-input__es_2sxng","et":"intl-phone-input__et_2sxng","eu":"intl-phone-input__eu_2sxng","fi":"intl-phone-input__fi_2sxng","fj":"intl-phone-input__fj_2sxng","fk":"intl-phone-input__fk_2sxng","fm":"intl-phone-input__fm_2sxng","fo":"intl-phone-input__fo_2sxng","fr":"intl-phone-input__fr_2sxng","ga":"intl-phone-input__ga_2sxng","gb":"intl-phone-input__gb_2sxng","gd":"intl-phone-input__gd_2sxng","ge":"intl-phone-input__ge_2sxng","gf":"intl-phone-input__gf_2sxng","gg":"intl-phone-input__gg_2sxng","gh":"intl-phone-input__gh_2sxng","gi":"intl-phone-input__gi_2sxng","gl":"intl-phone-input__gl_2sxng","gm":"intl-phone-input__gm_2sxng","gn":"intl-phone-input__gn_2sxng","gp":"intl-phone-input__gp_2sxng","gq":"intl-phone-input__gq_2sxng","gr":"intl-phone-input__gr_2sxng","gs":"intl-phone-input__gs_2sxng","gt":"intl-phone-input__gt_2sxng","gu":"intl-phone-input__gu_2sxng","gw":"intl-phone-input__gw_2sxng","gy":"intl-phone-input__gy_2sxng","hk":"intl-phone-input__hk_2sxng","hm":"intl-phone-input__hm_2sxng","hn":"intl-phone-input__hn_2sxng","hr":"intl-phone-input__hr_2sxng","ht":"intl-phone-input__ht_2sxng","hu":"intl-phone-input__hu_2sxng","ic":"intl-phone-input__ic_2sxng","id":"intl-phone-input__id_2sxng","ie":"intl-phone-input__ie_2sxng","il":"intl-phone-input__il_2sxng","im":"intl-phone-input__im_2sxng","in":"intl-phone-input__in_2sxng","io":"intl-phone-input__io_2sxng","iq":"intl-phone-input__iq_2sxng","ir":"intl-phone-input__ir_2sxng","is":"intl-phone-input__is_2sxng","it":"intl-phone-input__it_2sxng","je":"intl-phone-input__je_2sxng","jm":"intl-phone-input__jm_2sxng","jo":"intl-phone-input__jo_2sxng","jp":"intl-phone-input__jp_2sxng","ke":"intl-phone-input__ke_2sxng","kg":"intl-phone-input__kg_2sxng","kh":"intl-phone-input__kh_2sxng","ki":"intl-phone-input__ki_2sxng","km":"intl-phone-input__km_2sxng","kn":"intl-phone-input__kn_2sxng","kp":"intl-phone-input__kp_2sxng","kr":"intl-phone-input__kr_2sxng","kw":"intl-phone-input__kw_2sxng","ky":"intl-phone-input__ky_2sxng","kz":"intl-phone-input__kz_2sxng","la":"intl-phone-input__la_2sxng","lb":"intl-phone-input__lb_2sxng","lc":"intl-phone-input__lc_2sxng","li":"intl-phone-input__li_2sxng","lk":"intl-phone-input__lk_2sxng","lr":"intl-phone-input__lr_2sxng","ls":"intl-phone-input__ls_2sxng","lt":"intl-phone-input__lt_2sxng","lu":"intl-phone-input__lu_2sxng","lv":"intl-phone-input__lv_2sxng","ly":"intl-phone-input__ly_2sxng","ma":"intl-phone-input__ma_2sxng","mc":"intl-phone-input__mc_2sxng","md":"intl-phone-input__md_2sxng","me":"intl-phone-input__me_2sxng","mf":"intl-phone-input__mf_2sxng","mg":"intl-phone-input__mg_2sxng","mh":"intl-phone-input__mh_2sxng","mk":"intl-phone-input__mk_2sxng","ml":"intl-phone-input__ml_2sxng","mm":"intl-phone-input__mm_2sxng","mn":"intl-phone-input__mn_2sxng","mo":"intl-phone-input__mo_2sxng","mp":"intl-phone-input__mp_2sxng","mq":"intl-phone-input__mq_2sxng","mr":"intl-phone-input__mr_2sxng","ms":"intl-phone-input__ms_2sxng","mt":"intl-phone-input__mt_2sxng","mu":"intl-phone-input__mu_2sxng","mv":"intl-phone-input__mv_2sxng","mw":"intl-phone-input__mw_2sxng","mx":"intl-phone-input__mx_2sxng","my":"intl-phone-input__my_2sxng","mz":"intl-phone-input__mz_2sxng","na":"intl-phone-input__na_2sxng","nc":"intl-phone-input__nc_2sxng","ne":"intl-phone-input__ne_2sxng","nf":"intl-phone-input__nf_2sxng","ng":"intl-phone-input__ng_2sxng","ni":"intl-phone-input__ni_2sxng","nl":"intl-phone-input__nl_2sxng","no":"intl-phone-input__no_2sxng","np":"intl-phone-input__np_2sxng","nr":"intl-phone-input__nr_2sxng","nu":"intl-phone-input__nu_2sxng","nz":"intl-phone-input__nz_2sxng","om":"intl-phone-input__om_2sxng","pa":"intl-phone-input__pa_2sxng","pe":"intl-phone-input__pe_2sxng","pf":"intl-phone-input__pf_2sxng","pg":"intl-phone-input__pg_2sxng","ph":"intl-phone-input__ph_2sxng","pk":"intl-phone-input__pk_2sxng","pl":"intl-phone-input__pl_2sxng","pm":"intl-phone-input__pm_2sxng","pn":"intl-phone-input__pn_2sxng","pr":"intl-phone-input__pr_2sxng","ps":"intl-phone-input__ps_2sxng","pt":"intl-phone-input__pt_2sxng","pw":"intl-phone-input__pw_2sxng","py":"intl-phone-input__py_2sxng","qa":"intl-phone-input__qa_2sxng","re":"intl-phone-input__re_2sxng","ro":"intl-phone-input__ro_2sxng","rs":"intl-phone-input__rs_2sxng","ru":"intl-phone-input__ru_2sxng","rw":"intl-phone-input__rw_2sxng","sa":"intl-phone-input__sa_2sxng","sb":"intl-phone-input__sb_2sxng","sc":"intl-phone-input__sc_2sxng","sd":"intl-phone-input__sd_2sxng","se":"intl-phone-input__se_2sxng","sg":"intl-phone-input__sg_2sxng","sh":"intl-phone-input__sh_2sxng","si":"intl-phone-input__si_2sxng","sj":"intl-phone-input__sj_2sxng","sk":"intl-phone-input__sk_2sxng","sl":"intl-phone-input__sl_2sxng","sm":"intl-phone-input__sm_2sxng","sn":"intl-phone-input__sn_2sxng","so":"intl-phone-input__so_2sxng","sr":"intl-phone-input__sr_2sxng","ss":"intl-phone-input__ss_2sxng","st":"intl-phone-input__st_2sxng","sv":"intl-phone-input__sv_2sxng","sx":"intl-phone-input__sx_2sxng","sy":"intl-phone-input__sy_2sxng","sz":"intl-phone-input__sz_2sxng","ta":"intl-phone-input__ta_2sxng","tc":"intl-phone-input__tc_2sxng","td":"intl-phone-input__td_2sxng","tf":"intl-phone-input__tf_2sxng","tg":"intl-phone-input__tg_2sxng","th":"intl-phone-input__th_2sxng","tj":"intl-phone-input__tj_2sxng","tk":"intl-phone-input__tk_2sxng","tl":"intl-phone-input__tl_2sxng","tm":"intl-phone-input__tm_2sxng","tn":"intl-phone-input__tn_2sxng","to":"intl-phone-input__to_2sxng","tr":"intl-phone-input__tr_2sxng","tt":"intl-phone-input__tt_2sxng","tv":"intl-phone-input__tv_2sxng","tw":"intl-phone-input__tw_2sxng","tz":"intl-phone-input__tz_2sxng","ua":"intl-phone-input__ua_2sxng","ug":"intl-phone-input__ug_2sxng","um":"intl-phone-input__um_2sxng","un":"intl-phone-input__un_2sxng","us":"intl-phone-input__us_2sxng","uy":"intl-phone-input__uy_2sxng","uz":"intl-phone-input__uz_2sxng","va":"intl-phone-input__va_2sxng","vc":"intl-phone-input__vc_2sxng","ve":"intl-phone-input__ve_2sxng","vg":"intl-phone-input__vg_2sxng","vi":"intl-phone-input__vi_2sxng","vn":"intl-phone-input__vn_2sxng","vu":"intl-phone-input__vu_2sxng","wf":"intl-phone-input__wf_2sxng","ws":"intl-phone-input__ws_2sxng","xk":"intl-phone-input__xk_2sxng","ye":"intl-phone-input__ye_2sxng","yt":"intl-phone-input__yt_2sxng","za":"intl-phone-input__za_2sxng","zm":"intl-phone-input__zm_2sxng","zw":"intl-phone-input__zw_2sxng"};
 require('./index.css')
 
 /**