@alfalab/core-components-intl-phone-input 9.2.10 → 9.2.12

package/component.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var components_selectField_component = require('./component-71b0e713.js');
+var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
 var coreComponentsInputAutocomplete = require('@alfalab/core-components-input-autocomplete');
@@ -16,6 +16,7 @@ var components_select_component = require('./components/select/component.js');
 var useCaretAvoidCountryCode = require('./useCaretAvoidCountryCode.js');
 require('./components/flag-icon/flagSprite.js');
 require('@alfalab/core-components-select');
+require('./components/select-field/component.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -23,7 +24,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var WorldMagnifierMIcon__default = /*#__PURE__*/_interopDefaultCompat(WorldMagnifierMIcon);
 
-var styles = {"addons":"intl-phone-input__addons_1ji8e","l":"intl-phone-input__l_1ji8e","xl":"intl-phone-input__xl_1ji8e","flagIconWrapper":"intl-phone-input__flagIconWrapper_1ji8e","emptyCountryIcon":"intl-phone-input__emptyCountryIcon_1ji8e"};
+var styles = {"addons":"intl-phone-input__addons_18iw6","l":"intl-phone-input__l_18iw6","xl":"intl-phone-input__xl_18iw6","flagIconWrapper":"intl-phone-input__flagIconWrapper_18iw6","emptyCountryIcon":"intl-phone-input__emptyCountryIcon_18iw6"};
 require('./index.css')
 
 var countriesHash = utils.getCountriesHash();
@@ -32,7 +33,7 @@ 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.hideCountrySelect, hideCountrySelect = _d === void 0 ? false : _d, _e = _a.canBeEmptyCountry, canBeEmptyCountry = _e === void 0 ? false : _e, _f = _a.ruNumberPriority, ruNumberPriority = _f === void 0 ? false : _f, _g = _a.clear, clear = _g === void 0 ? false : _g, _h = _a.size, size = _h === void 0 ? 'm' : _h, _j = _a.colors, colors = _j === void 0 ? 'default' : _j, _k = _a.options, options = _k === void 0 ? [] : _k, _l = _a.countries, countries = _l === void 0 ? utils.getCountries() : _l, _m = _a.clearableCountryCode, clearableCountryCode = _m === void 0 ? true : _m, className = _a.className, value = _a.value, onChange = _a.onChange, onCountryChange = _a.onCountryChange, _o = _a.defaultCountryIso2, defaultCountryIso2 = _o === void 0 ? 'ru' : _o, preventFlip = _a.preventFlip, inputProps = _a.inputProps, _p = _a.maxPhoneLen, maxPhoneLen = _p === void 0 ? DEFAULT_MAX_PHONE_LEN_BY_COUNTRY : _p, restProps = components_selectField_component.__rest(_a, ["disabled", "readOnly", "hideCountrySelect", "canBeEmptyCountry", "ruNumberPriority", "clear", "size", "colors", "options", "countries", "clearableCountryCode", "className", "value", "onChange", "onCountryChange", "defaultCountryIso2", "preventFlip", "inputProps", "maxPhoneLen"]);
+    var _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.readOnly, readOnly = _c === void 0 ? false : _c, _d = _a.hideCountrySelect, hideCountrySelect = _d === void 0 ? false : _d, _e = _a.canBeEmptyCountry, canBeEmptyCountry = _e === void 0 ? false : _e, _f = _a.ruNumberPriority, ruNumberPriority = _f === void 0 ? false : _f, _g = _a.clear, clear = _g === void 0 ? false : _g, _h = _a.size, size = _h === void 0 ? 'm' : _h, _j = _a.colors, colors = _j === void 0 ? 'default' : _j, _k = _a.options, options = _k === void 0 ? [] : _k, _l = _a.countries, countries = _l === void 0 ? utils.getCountries() : _l, _m = _a.clearableCountryCode, clearableCountryCode = _m === void 0 ? true : _m, className = _a.className, value = _a.value, onChange = _a.onChange, onCountryChange = _a.onCountryChange, _o = _a.defaultCountryIso2, defaultCountryIso2 = _o === void 0 ? 'ru' : _o, preventFlip = _a.preventFlip, inputProps = _a.inputProps, _p = _a.maxPhoneLen, maxPhoneLen = _p === void 0 ? DEFAULT_MAX_PHONE_LEN_BY_COUNTRY : _p, restProps = tslib.__rest(_a, ["disabled", "readOnly", "hideCountrySelect", "canBeEmptyCountry", "ruNumberPriority", "clear", "size", "colors", "options", "countries", "clearableCountryCode", "className", "value", "onChange", "onCountryChange", "defaultCountryIso2", "preventFlip", "inputProps", "maxPhoneLen"]);
     var _q = React.useState(defaultCountryIso2.toLowerCase()), countryIso2 = _q[0], setCountryIso2 = _q[1];
     var inputRef = React.useRef(null);
     var _r = React.useState(null), inputWrapperRef = _r[0], setInputWrapperRef = _r[1];
@@ -275,7 +276,7 @@ var IntlPhoneInput = React.forwardRef(function (_a, ref) {
         if (phoneLibUtils.current)
             return;
         Promise.resolve().then(function () { return require(
-        /* webpackChunkName: "libphonenumber" */ './libphonenumber-js.min-18e8de8a.js'); })
+        /* webpackChunkName: "libphonenumber" */ './libphonenumber-js.min-09550128.js'); })
             .then(function (utils) {
             phoneLibUtils.current = utils.AsYouType;
             if (canBeEmptyCountry) {
@@ -306,7 +307,7 @@ var IntlPhoneInput = React.forwardRef(function (_a, ref) {
         /* eslint-disable-next-line react-hooks/exhaustive-deps */
     }, [value, canBeEmptyCountry, countryIso2, defaultCountryIso2]);
     useCaretAvoidCountryCode.useCaretAvoidCountryCode({ 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({ clear: clear && !isEmptyValue, onClear: handleClear }, inputProps), { ref: inputRef, wrapperRef: setInputWrapperRef, type: 'tel', colors: colors, className: cn__default.default(className, styles[size]), addonsClassName: styles.addons, onKeyDown: handleKeyDown, onPaste: handlePaste, leftAddons: hideCountrySelect ? (React__default.default.createElement("span", { className: styles.flagIconWrapper }, countryIso2 ? (React__default.default.createElement(components_flagIcon_component.FlagIcon, { country: countryIso2 })) : (React__default.default.createElement(WorldMagnifierMIcon__default.default, { className: styles.emptyCountryIcon })))) : (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, tslib.__assign({}, restProps, { ref: ref, inputProps: tslib.__assign(tslib.__assign({ clear: clear && !isEmptyValue, onClear: handleClear }, inputProps), { ref: inputRef, wrapperRef: setInputWrapperRef, type: 'tel', colors: colors, className: cn__default.default(className, styles[size]), addonsClassName: styles.addons, onKeyDown: handleKeyDown, onPaste: handlePaste, leftAddons: hideCountrySelect ? (React__default.default.createElement("span", { className: styles.flagIconWrapper }, countryIso2 ? (React__default.default.createElement(components_flagIcon_component.FlagIcon, { country: countryIso2 })) : (React__default.default.createElement(WorldMagnifierMIcon__default.default, { className: styles.emptyCountryIcon })))) : (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 })));
 });
 
 exports.IntlPhoneInput = IntlPhoneInput;

package/components/flag-icon/component.js

@@ -9,7 +9,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"flagIcon":"intl-phone-input__flagIcon_1sqo4","flagPlaceholder":"intl-phone-input__flagPlaceholder_1sqo4"};
+var styles = {"flagIcon":"intl-phone-input__flagIcon_4owau","flagPlaceholder":"intl-phone-input__flagPlaceholder_4owau"};
 require('./index.css')
 
 /**

package/components/flag-icon/index.css

@@ -1,4 +1,4 @@
-/* hash: mzzu2 */
+/* hash: 1alzi */
 :root {
 } /* deprecated */ :root {
     --color-light-specialbg-tertiary-transparent: rgba(11, 31, 53, 0.1);
@@ -17,10 +17,10 @@
     --gap-3xs: 2px;
 } :root {
 } :root {
-} .intl-phone-input__flagIcon_1sqo4 {
+} .intl-phone-input__flagIcon_4owau {
     max-width: 24px;
     max-height: 24px;
-} .intl-phone-input__flagPlaceholder_1sqo4 {
+} .intl-phone-input__flagPlaceholder_4owau {
     width: 24px;
     height: 16px;
     max-height: 16px;

package/components/index.js

@@ -1,8 +1,9 @@
 'use strict';
 
-var components_selectField_component = require('../component-71b0e713.js');
+var components_selectField_component = require('./select-field/component.js');
 var components_flagIcon_component = require('./flag-icon/component.js');
 var components_select_component = require('./select/component.js');
+require('tslib');
 require('react');
 require('react-merge-refs');
 require('classnames');

package/components/select/component.js

@@ -1,20 +1,21 @@
 'use strict';
 
-var components_selectField_component = require('../../component-71b0e713.js');
+var tslib = require('tslib');
 var React = require('react');
 var coreComponentsSelect = require('@alfalab/core-components-select');
 var components_flagIcon_component = require('../flag-icon/component.js');
-require('react-merge-refs');
+var components_selectField_component = require('../select-field/component.js');
 require('classnames');
+require('../flag-icon/flagSprite.js');
+require('react-merge-refs');
 require('@alfalab/hooks');
 require('@alfalab/icons-glyph/WorldMagnifierMIcon');
-require('../flag-icon/flagSprite.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var styles = {"component":"intl-phone-input__component_1xqhb","option":"intl-phone-input__option_1xqhb","flag":"intl-phone-input__flag_1xqhb","countryName":"intl-phone-input__countryName_1xqhb","dialCode":"intl-phone-input__dialCode_1xqhb"};
+var styles = {"component":"intl-phone-input__component_9ophn","option":"intl-phone-input__option_9ophn","flag":"intl-phone-input__flag_9ophn","countryName":"intl-phone-input__countryName_9ophn","dialCode":"intl-phone-input__dialCode_9ophn"};
 require('./index.css')
 
 var CountriesSelect = function (_a) {
@@ -36,7 +37,7 @@ var CountriesSelect = function (_a) {
         });
     }, [countries]);
     var renderOptionsList = React.useCallback(function (props) { return (React__default.default.createElement("div", { style: { width: fieldWidth || 0 } },
-        React__default.default.createElement(coreComponentsSelect.VirtualOptionsList, components_selectField_component.__assign({}, props)))); }, [fieldWidth]);
+        React__default.default.createElement(coreComponentsSelect.VirtualOptionsList, tslib.__assign({}, props)))); }, [fieldWidth]);
     return (React__default.default.createElement("div", { className: styles.component, onClick: function (event) { return event.stopPropagation(); } },
         React__default.default.createElement(coreComponentsSelect.Select, { dataTestId: dataTestId, disabled: disabled, size: size, options: options, selected: selected || components_selectField_component.EMPTY_COUNTRY_SELECT_FIELD, onChange: onChange, Field: components_selectField_component.SelectField, OptionsList: renderOptionsList, preventFlip: preventFlip })));
 };

package/components/select/index.css

@@ -1,4 +1,4 @@
-/* hash: fo4h0 */
+/* hash: 1hcm4 */
 :root {
 } /* deprecated */ :root {
     --color-light-text-secondary: rgba(11, 31, 53, 0.7);
@@ -17,19 +17,19 @@
 } :root {
 } :root {
     --text-secondary-color: var(--color-light-text-secondary);
-} .intl-phone-input__component_1xqhb {
+} .intl-phone-input__component_9ophn {
     position: static;
     display: flex;
     min-width: initial;
     height: 100%;
-} .intl-phone-input__option_1xqhb {
+} .intl-phone-input__option_9ophn {
     display: flex;
     align-items: flex-start;
-} .intl-phone-input__flag_1xqhb {
+} .intl-phone-input__flag_9ophn {
     flex-shrink: 0;
     margin-right: var(--gap-xs);
-} .intl-phone-input__countryName_1xqhb {
+} .intl-phone-input__countryName_9ophn {
     margin-right: var(--gap-xs);
-} .intl-phone-input__dialCode_1xqhb {
+} .intl-phone-input__dialCode_9ophn {
     color: var(--text-secondary-color);
 }

package/components/select/index.js

@@ -1,15 +1,16 @@
 'use strict';
 
 var components_select_component = require('./component.js');
-require('../../component-71b0e713.js');
+require('tslib');
 require('react');
-require('react-merge-refs');
+require('@alfalab/core-components-select');
+require('../flag-icon/component.js');
 require('classnames');
+require('../flag-icon/flagSprite.js');
+require('../select-field/component.js');
+require('react-merge-refs');
 require('@alfalab/hooks');
 require('@alfalab/icons-glyph/WorldMagnifierMIcon');
-require('../flag-icon/component.js');
-require('../flag-icon/flagSprite.js');
-require('@alfalab/core-components-select');
 
 
 

package/components/select-field/component.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { FieldProps } from "@alfalab/core-components-select";
+declare const EMPTY_COUNTRY_SELECT_FIELD: {
+    value: string;
+    key: string;
+};
+declare const SelectField: FC<FieldProps>;
+export { EMPTY_COUNTRY_SELECT_FIELD, SelectField };

package/components/select-field/component.js

@@ -1,15 +1,42 @@
 'use strict';
 
-var components_selectField_component = require('../../component-71b0e713.js');
-require('react');
-require('react-merge-refs');
-require('classnames');
-require('@alfalab/hooks');
-require('@alfalab/icons-glyph/WorldMagnifierMIcon');
-require('../flag-icon/component.js');
+var tslib = require('tslib');
+var React = require('react');
+var mergeRefs = require('react-merge-refs');
+var cn = require('classnames');
+var hooks = require('@alfalab/hooks');
+var WorldMagnifierMIcon = require('@alfalab/icons-glyph/WorldMagnifierMIcon');
+var components_flagIcon_component = require('../flag-icon/component.js');
 require('../flag-icon/flagSprite.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var WorldMagnifierMIcon__default = /*#__PURE__*/_interopDefaultCompat(WorldMagnifierMIcon);
 
-exports.EMPTY_COUNTRY_SELECT_FIELD = components_selectField_component.EMPTY_COUNTRY_SELECT_FIELD;
-exports.SelectField = components_selectField_component.SelectField;
+var styles = {"component":"intl-phone-input__component_16hsp","flagIconContainer":"intl-phone-input__flagIconContainer_16hsp","emptyCountryIcon":"intl-phone-input__emptyCountryIcon_16hsp","disabled":"intl-phone-input__disabled_16hsp","inner":"intl-phone-input__inner_16hsp","l":"intl-phone-input__l_16hsp","xl":"intl-phone-input__xl_16hsp","focusVisible":"intl-phone-input__focusVisible_16hsp"};
+require('./index.css')
+
+var EMPTY_COUNTRY_SELECT_FIELD = {
+    value: 'EMPTY_COUNTRY_SELECT_VALUE',
+    key: 'EMPTY_COUNTRY_SELECT_KEY',
+};
+var SelectField = function (_a) {
+    var _b;
+    var selected = _a.selected, Arrow = _a.Arrow, size = _a.size, disabled = _a.disabled, _c = _a.innerProps, innerProps = _c === void 0 ? {} : _c;
+    var wrapperRef = React.useRef(null);
+    var focusVisible = hooks.useFocus(wrapperRef, 'keyboard')[0];
+    var ref = innerProps.ref ? mergeRefs__default.default([innerProps.ref, wrapperRef]) : wrapperRef;
+    return (React__default.default.createElement("div", { ref: ref, className: cn__default.default(styles.component, size && styles[size], (_b = {},
+            _b[styles.focusVisible] = focusVisible,
+            _b[styles.disabled] = disabled,
+            _b)) },
+        React__default.default.createElement("div", tslib.__assign({}, innerProps, { className: styles.inner }),
+            React__default.default.createElement("span", { className: styles.flagIconContainer }, !selected || selected === EMPTY_COUNTRY_SELECT_FIELD ? (React__default.default.createElement(WorldMagnifierMIcon__default.default, { className: styles.emptyCountryIcon })) : (React__default.default.createElement(components_flagIcon_component.FlagIcon, { country: selected.value }))),
+            Arrow)));
+};
+
+exports.EMPTY_COUNTRY_SELECT_FIELD = EMPTY_COUNTRY_SELECT_FIELD;
+exports.SelectField = SelectField;

package/components/select-field/index.css

@@ -1,4 +1,4 @@
-/* hash: 1xpig */
+/* hash: 1cw55 */
 :root {
 } /* deprecated */ :root {
     --color-light-border-link: #007aff;
@@ -21,33 +21,33 @@
 } :root {
     --focus-color: var(--color-light-border-link);
     --disabled-cursor: not-allowed;
-} .intl-phone-input__component_1hh4x {
+} .intl-phone-input__component_16hsp {
     height: 100%;
     cursor: pointer;
     outline: none;
     position: relative;
-} .intl-phone-input__flagIconContainer_1hh4x {
+} .intl-phone-input__flagIconContainer_16hsp {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 24px;
     height: 24px;
     margin-right: var(--gap-2xs);
-} .intl-phone-input__emptyCountryIcon_1hh4x {
+} .intl-phone-input__emptyCountryIcon_16hsp {
     color: var(--color-light-graphic-secondary);
-} .intl-phone-input__disabled_1hh4x {
+} .intl-phone-input__disabled_16hsp {
     cursor: var(--disabled-cursor);
-} .intl-phone-input__inner_1hh4x {
+} .intl-phone-input__inner_16hsp {
     position: relative;
     display: flex;
     align-items: center;
     height: 100%;
     padding-left: var(--gap-s);
     outline: none;
-} .intl-phone-input__l_1hh4x .intl-phone-input__inner_1hh4x,
-.intl-phone-input__xl_1hh4x .intl-phone-input__inner_1hh4x {
+} .intl-phone-input__l_16hsp .intl-phone-input__inner_16hsp,
+.intl-phone-input__xl_16hsp .intl-phone-input__inner_16hsp {
     padding-left: var(--gap-m);
-} .intl-phone-input__focusVisible_1hh4x {
+} .intl-phone-input__focusVisible_16hsp {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/components/select-field/index.d.ts

@@ -1 +1 @@
-export * from "../../component-71b0e713";
+export * from "./component";

package/components/select-field/index.js

@@ -1,6 +1,7 @@
 'use strict';
 
-var components_selectField_component = require('../../component-71b0e713.js');
+var components_selectField_component = require('./component.js');
+require('tslib');
 require('react');
 require('react-merge-refs');
 require('classnames');

package/cssm/component.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var components_selectField_component = require('./component-01884de0.js');
+var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
 var coreComponentsInputAutocomplete = require('@alfalab/core-components-input-autocomplete/cssm');
@@ -19,6 +19,7 @@ var styles = require('./index.module.css');
 require('./components/flag-icon/flagSprite.js');
 require('./components/flag-icon/index.module.css');
 require('@alfalab/core-components-select/cssm');
+require('./components/select-field/component.js');
 require('./components/select/index.module.css');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -34,7 +35,7 @@ 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.hideCountrySelect, hideCountrySelect = _d === void 0 ? false : _d, _e = _a.canBeEmptyCountry, canBeEmptyCountry = _e === void 0 ? false : _e, _f = _a.ruNumberPriority, ruNumberPriority = _f === void 0 ? false : _f, _g = _a.clear, clear = _g === void 0 ? false : _g, _h = _a.size, size = _h === void 0 ? 'm' : _h, _j = _a.colors, colors = _j === void 0 ? 'default' : _j, _k = _a.options, options = _k === void 0 ? [] : _k, _l = _a.countries, countries = _l === void 0 ? utils.getCountries() : _l, _m = _a.clearableCountryCode, clearableCountryCode = _m === void 0 ? true : _m, className = _a.className, value = _a.value, onChange = _a.onChange, onCountryChange = _a.onCountryChange, _o = _a.defaultCountryIso2, defaultCountryIso2 = _o === void 0 ? 'ru' : _o, preventFlip = _a.preventFlip, inputProps = _a.inputProps, _p = _a.maxPhoneLen, maxPhoneLen = _p === void 0 ? DEFAULT_MAX_PHONE_LEN_BY_COUNTRY : _p, restProps = components_selectField_component.__rest(_a, ["disabled", "readOnly", "hideCountrySelect", "canBeEmptyCountry", "ruNumberPriority", "clear", "size", "colors", "options", "countries", "clearableCountryCode", "className", "value", "onChange", "onCountryChange", "defaultCountryIso2", "preventFlip", "inputProps", "maxPhoneLen"]);
+    var _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.readOnly, readOnly = _c === void 0 ? false : _c, _d = _a.hideCountrySelect, hideCountrySelect = _d === void 0 ? false : _d, _e = _a.canBeEmptyCountry, canBeEmptyCountry = _e === void 0 ? false : _e, _f = _a.ruNumberPriority, ruNumberPriority = _f === void 0 ? false : _f, _g = _a.clear, clear = _g === void 0 ? false : _g, _h = _a.size, size = _h === void 0 ? 'm' : _h, _j = _a.colors, colors = _j === void 0 ? 'default' : _j, _k = _a.options, options = _k === void 0 ? [] : _k, _l = _a.countries, countries = _l === void 0 ? utils.getCountries() : _l, _m = _a.clearableCountryCode, clearableCountryCode = _m === void 0 ? true : _m, className = _a.className, value = _a.value, onChange = _a.onChange, onCountryChange = _a.onCountryChange, _o = _a.defaultCountryIso2, defaultCountryIso2 = _o === void 0 ? 'ru' : _o, preventFlip = _a.preventFlip, inputProps = _a.inputProps, _p = _a.maxPhoneLen, maxPhoneLen = _p === void 0 ? DEFAULT_MAX_PHONE_LEN_BY_COUNTRY : _p, restProps = tslib.__rest(_a, ["disabled", "readOnly", "hideCountrySelect", "canBeEmptyCountry", "ruNumberPriority", "clear", "size", "colors", "options", "countries", "clearableCountryCode", "className", "value", "onChange", "onCountryChange", "defaultCountryIso2", "preventFlip", "inputProps", "maxPhoneLen"]);
     var _q = React.useState(defaultCountryIso2.toLowerCase()), countryIso2 = _q[0], setCountryIso2 = _q[1];
     var inputRef = React.useRef(null);
     var _r = React.useState(null), inputWrapperRef = _r[0], setInputWrapperRef = _r[1];
@@ -308,7 +309,7 @@ var IntlPhoneInput = React.forwardRef(function (_a, ref) {
         /* eslint-disable-next-line react-hooks/exhaustive-deps */
     }, [value, canBeEmptyCountry, countryIso2, defaultCountryIso2]);
     useCaretAvoidCountryCode.useCaretAvoidCountryCode({ 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({ clear: clear && !isEmptyValue, onClear: handleClear }, inputProps), { ref: inputRef, wrapperRef: setInputWrapperRef, type: 'tel', colors: colors, className: cn__default.default(className, styles__default.default[size]), addonsClassName: styles__default.default.addons, onKeyDown: handleKeyDown, onPaste: handlePaste, leftAddons: hideCountrySelect ? (React__default.default.createElement("span", { className: styles__default.default.flagIconWrapper }, countryIso2 ? (React__default.default.createElement(components_flagIcon_component.FlagIcon, { country: countryIso2 })) : (React__default.default.createElement(WorldMagnifierMIcon__default.default, { className: styles__default.default.emptyCountryIcon })))) : (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, tslib.__assign({}, restProps, { ref: ref, inputProps: tslib.__assign(tslib.__assign({ clear: clear && !isEmptyValue, onClear: handleClear }, inputProps), { ref: inputRef, wrapperRef: setInputWrapperRef, type: 'tel', colors: colors, className: cn__default.default(className, styles__default.default[size]), addonsClassName: styles__default.default.addons, onKeyDown: handleKeyDown, onPaste: handlePaste, leftAddons: hideCountrySelect ? (React__default.default.createElement("span", { className: styles__default.default.flagIconWrapper }, countryIso2 ? (React__default.default.createElement(components_flagIcon_component.FlagIcon, { country: countryIso2 })) : (React__default.default.createElement(WorldMagnifierMIcon__default.default, { className: styles__default.default.emptyCountryIcon })))) : (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 })));
 });
 
 exports.IntlPhoneInput = IntlPhoneInput;

package/cssm/components/index.js

@@ -1,8 +1,9 @@
 'use strict';
 
-var components_selectField_component = require('../component-01884de0.js');
+var components_selectField_component = require('./select-field/component.js');
 var components_flagIcon_component = require('./flag-icon/component.js');
 var components_select_component = require('./select/component.js');
+require('tslib');
 require('react');
 require('react-merge-refs');
 require('classnames');

package/cssm/components/select/component.js

@@ -1,17 +1,18 @@
 'use strict';
 
-var components_selectField_component = require('../../component-01884de0.js');
+var tslib = require('tslib');
 var React = require('react');
 var coreComponentsSelect = require('@alfalab/core-components-select/cssm');
 var components_flagIcon_component = require('../flag-icon/component.js');
+var components_selectField_component = require('../select-field/component.js');
 var styles = require('./index.module.css');
-require('react-merge-refs');
 require('classnames');
+require('../flag-icon/flagSprite.js');
+require('../flag-icon/index.module.css');
+require('react-merge-refs');
 require('@alfalab/hooks');
 require('@alfalab/icons-glyph/WorldMagnifierMIcon');
 require('../select-field/index.module.css');
-require('../flag-icon/flagSprite.js');
-require('../flag-icon/index.module.css');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -37,7 +38,7 @@ var CountriesSelect = function (_a) {
         });
     }, [countries]);
     var renderOptionsList = React.useCallback(function (props) { return (React__default.default.createElement("div", { style: { width: fieldWidth || 0 } },
-        React__default.default.createElement(coreComponentsSelect.VirtualOptionsList, components_selectField_component.__assign({}, props)))); }, [fieldWidth]);
+        React__default.default.createElement(coreComponentsSelect.VirtualOptionsList, tslib.__assign({}, props)))); }, [fieldWidth]);
     return (React__default.default.createElement("div", { className: styles__default.default.component, onClick: function (event) { return event.stopPropagation(); } },
         React__default.default.createElement(coreComponentsSelect.Select, { dataTestId: dataTestId, disabled: disabled, size: size, options: options, selected: selected || components_selectField_component.EMPTY_COUNTRY_SELECT_FIELD, onChange: onChange, Field: components_selectField_component.SelectField, OptionsList: renderOptionsList, preventFlip: preventFlip })));
 };

package/cssm/components/select/index.js

@@ -1,17 +1,18 @@
 'use strict';
 
 var components_select_component = require('./component.js');
-require('../../component-01884de0.js');
+require('tslib');
 require('react');
-require('react-merge-refs');
-require('classnames');
-require('@alfalab/hooks');
-require('@alfalab/icons-glyph/WorldMagnifierMIcon');
+require('@alfalab/core-components-select/cssm');
 require('../flag-icon/component.js');
+require('classnames');
 require('../flag-icon/flagSprite.js');
 require('../flag-icon/index.module.css');
+require('../select-field/component.js');
+require('react-merge-refs');
+require('@alfalab/hooks');
+require('@alfalab/icons-glyph/WorldMagnifierMIcon');
 require('../select-field/index.module.css');
-require('@alfalab/core-components-select/cssm');
 require('./index.module.css');
 
 

package/cssm/components/select-field/component.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { FieldProps } from "@alfalab/core-components-select";
+declare const EMPTY_COUNTRY_SELECT_FIELD: {
+    value: string;
+    key: string;
+};
+declare const SelectField: FC<FieldProps>;
+export { EMPTY_COUNTRY_SELECT_FIELD, SelectField };

package/cssm/components/select-field/component.js

@@ -1,17 +1,42 @@
 'use strict';
 
-var components_selectField_component = require('../../component-01884de0.js');
-require('react');
-require('react-merge-refs');
-require('classnames');
-require('@alfalab/hooks');
-require('@alfalab/icons-glyph/WorldMagnifierMIcon');
-require('../flag-icon/component.js');
-require('./index.module.css');
+var tslib = require('tslib');
+var React = require('react');
+var mergeRefs = require('react-merge-refs');
+var cn = require('classnames');
+var hooks = require('@alfalab/hooks');
+var WorldMagnifierMIcon = require('@alfalab/icons-glyph/WorldMagnifierMIcon');
+var components_flagIcon_component = require('../flag-icon/component.js');
+var styles = require('./index.module.css');
 require('../flag-icon/flagSprite.js');
 require('../flag-icon/index.module.css');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var WorldMagnifierMIcon__default = /*#__PURE__*/_interopDefaultCompat(WorldMagnifierMIcon);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
-exports.EMPTY_COUNTRY_SELECT_FIELD = components_selectField_component.EMPTY_COUNTRY_SELECT_FIELD;
-exports.SelectField = components_selectField_component.SelectField;
+var EMPTY_COUNTRY_SELECT_FIELD = {
+    value: 'EMPTY_COUNTRY_SELECT_VALUE',
+    key: 'EMPTY_COUNTRY_SELECT_KEY',
+};
+var SelectField = function (_a) {
+    var _b;
+    var selected = _a.selected, Arrow = _a.Arrow, size = _a.size, disabled = _a.disabled, _c = _a.innerProps, innerProps = _c === void 0 ? {} : _c;
+    var wrapperRef = React.useRef(null);
+    var focusVisible = hooks.useFocus(wrapperRef, 'keyboard')[0];
+    var ref = innerProps.ref ? mergeRefs__default.default([innerProps.ref, wrapperRef]) : wrapperRef;
+    return (React__default.default.createElement("div", { ref: ref, className: cn__default.default(styles__default.default.component, size && styles__default.default[size], (_b = {},
+            _b[styles__default.default.focusVisible] = focusVisible,
+            _b[styles__default.default.disabled] = disabled,
+            _b)) },
+        React__default.default.createElement("div", tslib.__assign({}, innerProps, { className: styles__default.default.inner }),
+            React__default.default.createElement("span", { className: styles__default.default.flagIconContainer }, !selected || selected === EMPTY_COUNTRY_SELECT_FIELD ? (React__default.default.createElement(WorldMagnifierMIcon__default.default, { className: styles__default.default.emptyCountryIcon })) : (React__default.default.createElement(components_flagIcon_component.FlagIcon, { country: selected.value }))),
+            Arrow)));
+};
+
+exports.EMPTY_COUNTRY_SELECT_FIELD = EMPTY_COUNTRY_SELECT_FIELD;
+exports.SelectField = SelectField;

package/cssm/components/select-field/index.d.ts

@@ -1 +1 @@
-export * from "../../component-01884de0";
+export * from "./component";

package/cssm/components/select-field/index.js

@@ -1,6 +1,7 @@
 'use strict';
 
-var components_selectField_component = require('../../component-01884de0.js');
+var components_selectField_component = require('./component.js');
+require('tslib');
 require('react');
 require('react-merge-refs');
 require('classnames');

package/cssm/index.js

@@ -1,23 +1,24 @@
 'use strict';
 
 var component = require('./component.js');
-require('./component-01884de0.js');
+require('tslib');
 require('react');
-require('react-merge-refs');
 require('classnames');
-require('@alfalab/hooks');
-require('@alfalab/icons-glyph/WorldMagnifierMIcon');
-require('./components/flag-icon/component.js');
-require('./components/flag-icon/flagSprite.js');
-require('./components/flag-icon/index.module.css');
-require('./components/select-field/index.module.css');
 require('@alfalab/core-components-input-autocomplete/cssm');
+require('@alfalab/icons-glyph/WorldMagnifierMIcon');
 require('@alfalab/utils');
 require('./utils/calculateCaretPos.js');
 require('./utils/format-phone-with-unclearable-country-code.js');
 require('./utils/preparePasteData.js');
+require('react-merge-refs');
+require('@alfalab/hooks');
+require('./components/flag-icon/component.js');
+require('./components/flag-icon/flagSprite.js');
+require('./components/flag-icon/index.module.css');
+require('./components/select-field/index.module.css');
 require('./components/select/component.js');
 require('@alfalab/core-components-select/cssm');
+require('./components/select-field/component.js');
 require('./components/select/index.module.css');
 require('./useCaretAvoidCountryCode.js');
 require('./index.module.css');

package/esm/component.js

@@ -1,4 +1,4 @@
-import { _ as __rest, a as __assign } from './component-6caeb1fa.js';
+import { __rest, __assign } from 'tslib';
 import React, { forwardRef, useState, useRef, useEffect } from 'react';
 import cn from 'classnames';
 import { InputAutocomplete } from '@alfalab/core-components-input-autocomplete/esm';
@@ -14,8 +14,9 @@ import { CountriesSelect } from './components/select/component.js';
 import { useCaretAvoidCountryCode } from './useCaretAvoidCountryCode.js';
 import './components/flag-icon/flagSprite.js';
 import '@alfalab/core-components-select/esm';
+import './components/select-field/component.js';
 
-var styles = {"addons":"intl-phone-input__addons_1ji8e","l":"intl-phone-input__l_1ji8e","xl":"intl-phone-input__xl_1ji8e","flagIconWrapper":"intl-phone-input__flagIconWrapper_1ji8e","emptyCountryIcon":"intl-phone-input__emptyCountryIcon_1ji8e"};
+var styles = {"addons":"intl-phone-input__addons_18iw6","l":"intl-phone-input__l_18iw6","xl":"intl-phone-input__xl_18iw6","flagIconWrapper":"intl-phone-input__flagIconWrapper_18iw6","emptyCountryIcon":"intl-phone-input__emptyCountryIcon_18iw6"};
 require('./index.css')
 
 var countriesHash = getCountriesHash();
@@ -267,7 +268,7 @@ var IntlPhoneInput = forwardRef(function (_a, ref) {
         if (phoneLibUtils.current)
             return;
         import(
-        /* webpackChunkName: "libphonenumber" */ './libphonenumber-js.min-1a024b28.js')
+        /* webpackChunkName: "libphonenumber" */ './libphonenumber-js.min-b4f6c1d5.js')
             .then(function (utils) {
             phoneLibUtils.current = utils.AsYouType;
             if (canBeEmptyCountry) {

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

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import { flagSprite } from './flagSprite.js';
 
-var styles = {"flagIcon":"intl-phone-input__flagIcon_1sqo4","flagPlaceholder":"intl-phone-input__flagPlaceholder_1sqo4"};
+var styles = {"flagIcon":"intl-phone-input__flagIcon_4owau","flagPlaceholder":"intl-phone-input__flagPlaceholder_4owau"};
 require('./index.css')
 
 /**

package/esm/components/flag-icon/index.css

@@ -1,4 +1,4 @@
-/* hash: mzzu2 */
+/* hash: 1alzi */
 :root {
 } /* deprecated */ :root {
     --color-light-specialbg-tertiary-transparent: rgba(11, 31, 53, 0.1);
@@ -17,10 +17,10 @@
     --gap-3xs: 2px;
 } :root {
 } :root {
-} .intl-phone-input__flagIcon_1sqo4 {
+} .intl-phone-input__flagIcon_4owau {
     max-width: 24px;
     max-height: 24px;
-} .intl-phone-input__flagPlaceholder_1sqo4 {
+} .intl-phone-input__flagPlaceholder_4owau {
     width: 24px;
     height: 16px;
     max-height: 16px;

package/esm/components/index.js

@@ -1,6 +1,7 @@
-export { E as EMPTY_COUNTRY_SELECT_FIELD, S as SelectField } from '../component-6caeb1fa.js';
+export { EMPTY_COUNTRY_SELECT_FIELD, SelectField } from './select-field/component.js';
 export { FlagIcon } from './flag-icon/component.js';
 export { CountriesSelect } from './select/component.js';
+import 'tslib';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';