@alfalab/core-components-international-phone-input 1.3.2 → 1.4.0

package/{Component-202ae1dc.d.ts → Component-c241b310.d.ts}

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import React from "react";
 import { FC } from "react";
-import { CommonButtonProps, PrivateButtonProps } from "./typings-202ae1dc";
+import { CommonButtonProps, PrivateButtonProps } from "./typings-c241b310";
 type SpinnerProps = {
     /**
      * Управление видимостью компонента

package/Component.responsive-8566963f.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import React from "react";
-import { CommonButtonProps, ButtonProps } from "./typings-202ae1dc";
+import { CommonButtonProps, ButtonProps } from "./typings-c241b310";
 declare const ButtonMobile: React.ForwardRefExoticComponent<CommonButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 export { ButtonMobile, Button };
-export type { CommonButtonProps as ButtonMobileProps } from "./typings-202ae1dc";
+export type { CommonButtonProps as ButtonMobileProps } from "./typings-c241b310";

package/Component.responsive.js

@@ -7,28 +7,6 @@ var React = require('react');
 var coreComponentsMq = require('@alfalab/core-components-mq');
 var desktop_Component_desktop = require('./desktop/Component.desktop.js');
 var mobile_Component_mobile = require('./mobile/Component.mobile.js');
-require('@alfalab/core-components-input/desktop');
-require('@alfalab/core-components-input-autocomplete/desktop');
-require('@alfalab/core-components-select/desktop');
-require('./components/base-international-phone-input/Component.js');
-require('react-merge-refs');
-require('@maskito/core');
-require('@maskito/react');
-require('@alfalab/core-components-select/shared');
-require('./utils/index.js');
-require('@alfalab/core-components-shared');
-require('./consts.js');
-require('./data/country-data.js');
-require('./components/country-select/Component.js');
-require('@alfalab/icons-glyph/WorldMagnifierMIcon');
-require('./components/flag-icon/component.js');
-require('classnames');
-require('./components/flag-icon/flagSprite.js');
-require('./components/select-field/component.js');
-require('@alfalab/hooks');
-require('@alfalab/core-components-input/mobile');
-require('@alfalab/core-components-input-autocomplete/mobile');
-require('@alfalab/core-components-select/mobile');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/components/base-international-phone-input/Component.js

@@ -10,22 +10,13 @@ var react = require('@maskito/react');
 var shared = require('@alfalab/core-components-select/shared');
 var utils_index = require('../../utils/index.js');
 var components_countrySelect_Component = require('../country-select/Component.js');
-require('@alfalab/core-components-shared');
-require('../../consts.js');
-require('../../data/country-data.js');
-require('@alfalab/icons-glyph/WorldMagnifierMIcon');
-require('../flag-icon/component.js');
-require('classnames');
-require('../flag-icon/flagSprite.js');
-require('../select-field/component.js');
-require('@alfalab/hooks');
 
 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 styles = {"component":"international-phone-input__component_qs477","addons":"international-phone-input__addons_qs477"};
+var styles = {"component":"international-phone-input__component_pnml1","addons":"international-phone-input__addons_pnml1"};
 require('./index.css')
 
 var BaseInternationalPhoneInput = React.forwardRef(function (_a, ref) {
@@ -71,13 +62,11 @@ var BaseInternationalPhoneInput = React.forwardRef(function (_a, ref) {
     var handleInput = function (e) {
         updatePhoneData(e.target.value, e);
     };
-    var handleClear = function () {
-        if (clearableCountryCode) {
-            changeNumber(null, '');
-        }
-        else {
-            changeNumber(null, "+".concat(country === null || country === void 0 ? void 0 : country.countryCode) || '');
-        }
+    var handleClear = function (event) {
+        var _a, _b;
+        (_b = (_a = restProps.inputProps) === null || _a === void 0 ? void 0 : _a.onClear) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+        var countryCode = (country === null || country === void 0 ? void 0 : country.countryCode) || '';
+        changeNumber(null, clearableCountryCode ? '' : "+".concat(countryCode));
     };
     React.useEffect(function () {
         if (value) {
@@ -91,20 +80,13 @@ var BaseInternationalPhoneInput = React.forwardRef(function (_a, ref) {
     var renderCountrySelect = function (compact) {
         var _a;
         if (compact === void 0) { compact = false; }
-        return (React__default.default.createElement(components_countrySelect_Component.CountrySelect, tslib.__assign({}, countrySelectProps, { view: view, SelectComponent: SelectComponent, disabled: disabled || (countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.disabled), onChange: handleSelectCountry, country: country, countries: compact ? [] : countriesData, fieldWidth: (_a = inputWrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width })));
-    };
-    var inputProps = {
-        className: styles.component,
-        ref: mergeRefs__default.default([maskRef, ref, inputRef]),
-        wrapperRef: inputWrapperRef,
-        addonsClassName: styles.addons,
-        type: 'tel',
-        clear: utils_index.getClear(clearProp, clearableCountryCode, value, country === null || country === void 0 ? void 0 : country.countryCode),
+        return (React__default.default.createElement(components_countrySelect_Component.CountrySelect, tslib.__assign({ dataTestId: restProps === null || restProps === void 0 ? void 0 : restProps.dataTestId }, countrySelectProps, { view: view, SelectComponent: SelectComponent, disabled: disabled || (countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.disabled), onChange: handleSelectCountry, country: country, countries: compact ? [] : countriesData, fieldWidth: (_a = inputWrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width })));
     };
+    var inputProps = tslib.__assign({ className: styles.component, ref: mergeRefs__default.default([maskRef, ref, inputRef]), wrapperRef: inputWrapperRef, addonsClassName: styles.addons, type: 'tel', clear: utils_index.getClear(clearProp, clearableCountryCode, value, country === null || country === void 0 ? void 0 : country.countryCode) }, restProps.inputProps);
     return Array.isArray(options) ? (React__default.default.createElement(InputAutocomplete, tslib.__assign({ closeOnSelect: true, Option: shared.BaseOption, size: size }, restProps, { disabled: disabled, options: filteredOptions, value: value, onChange: handleOptionSelect, onInput: function (event, _a) {
             var phone = _a.value;
             return updatePhoneData(phone, event);
-        }, inputProps: tslib.__assign(tslib.__assign({}, inputProps), { onClear: handleClear, onInput: handleInput, leftAddons: renderCountrySelect(view === 'mobile') }), fieldProps: tslib.__assign({ className: inputProps.className, addonsClassName: inputProps.addonsClassName }, (view === 'mobile' ? { leftAddons: renderCountrySelect() } : null)) }))) : (React__default.default.createElement(Input, tslib.__assign({}, restProps, inputProps, { onClear: inputProps.clear ? handleClear : undefined, leftAddons: renderCountrySelect(), size: size, onInput: handleInput, value: value, disabled: disabled })));
+        }, inputProps: tslib.__assign(tslib.__assign({}, inputProps), { onClear: handleClear, onInput: handleInput, leftAddons: renderCountrySelect(view === 'mobile') }), fieldProps: tslib.__assign(tslib.__assign(tslib.__assign({}, restProps.fieldProps), { className: inputProps.className, addonsClassName: inputProps.addonsClassName }), (view === 'mobile' ? { leftAddons: renderCountrySelect() } : null)) }))) : (React__default.default.createElement(Input, tslib.__assign({}, restProps, inputProps, { onClear: inputProps.clear ? handleClear : undefined, leftAddons: renderCountrySelect(), size: size, onInput: handleInput, value: value, disabled: disabled })));
 });
 
 exports.BaseInternationalPhoneInput = BaseInternationalPhoneInput;

package/components/base-international-phone-input/index.css

@@ -1,5 +1,5 @@
-/* hash: 11st0 */
+/* hash: 1nmzk */
 
-    .international-phone-input__component_qs477 .international-phone-input__addons_qs477 {
+    .international-phone-input__component_pnml1 .international-phone-input__addons_pnml1 {
         padding-left: 0;
     }

package/components/base-international-phone-input/index.js

@@ -3,23 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var components_baseInternationalPhoneInput_Component = require('./Component.js');
-require('tslib');
-require('react');
-require('react-merge-refs');
-require('@maskito/core');
-require('@maskito/react');
-require('@alfalab/core-components-select/shared');
-require('../../utils/index.js');
-require('@alfalab/core-components-shared');
-require('../../consts.js');
-require('../../data/country-data.js');
-require('../country-select/Component.js');
-require('@alfalab/icons-glyph/WorldMagnifierMIcon');
-require('../flag-icon/component.js');
-require('classnames');
-require('../flag-icon/flagSprite.js');
-require('../select-field/component.js');
-require('@alfalab/hooks');
 
 
 

package/components/country-select/Component.js

@@ -9,16 +9,12 @@ var coreComponentsShared = require('@alfalab/core-components-shared');
 var WorldMagnifierMIcon = require('@alfalab/icons-glyph/WorldMagnifierMIcon');
 var components_flagIcon_component = require('../flag-icon/component.js');
 var components_selectField_component = require('../select-field/component.js');
-require('classnames');
-require('../flag-icon/flagSprite.js');
-require('react-merge-refs');
-require('@alfalab/hooks');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var styles = {"component":"international-phone-input__component_o5szj","option":"international-phone-input__option_o5szj","flag":"international-phone-input__flag_o5szj","countryName":"international-phone-input__countryName_o5szj","dialCode":"international-phone-input__dialCode_o5szj","flagIconWrapper":"international-phone-input__flagIconWrapper_o5szj","emptyCountryIcon":"international-phone-input__emptyCountryIcon_o5szj"};
+var styles = {"component":"international-phone-input__component_1u0p1","option":"international-phone-input__option_1u0p1","flag":"international-phone-input__flag_1u0p1","countryName":"international-phone-input__countryName_1u0p1","dialCode":"international-phone-input__dialCode_1u0p1","flagIconWrapper":"international-phone-input__flagIconWrapper_1u0p1","emptyCountryIcon":"international-phone-input__emptyCountryIcon_1u0p1"};
 require('./index.css')
 
 var CountrySelect = function (_a) {

package/components/country-select/index.css

@@ -1,4 +1,4 @@
-/* hash: 1buos */
+/* hash: 1t4ag */
 :root {
 } /* deprecated */ :root {
     --color-light-neutral-translucent-700: rgba(4, 4, 21, 0.47);
@@ -18,29 +18,29 @@
     --gap-s: 12px;
 } :root {
 } :root {
-} .international-phone-input__component_o5szj {
+} .international-phone-input__component_1u0p1 {
     position: static;
     display: flex;
     min-width: initial;
     height: 100%;
-} .international-phone-input__option_o5szj {
+} .international-phone-input__option_1u0p1 {
     display: flex;
     align-items: flex-start;
     padding: var(--gap-s);
-} .international-phone-input__flag_o5szj {
+} .international-phone-input__flag_1u0p1 {
     flex-shrink: 0;
     margin-right: var(--gap-xs);
-} .international-phone-input__countryName_o5szj {
+} .international-phone-input__countryName_1u0p1 {
     margin-right: var(--gap-xs);
-} .international-phone-input__dialCode_o5szj {
+} .international-phone-input__dialCode_1u0p1 {
     color: var(--color-light-text-secondary);
-} .international-phone-input__flagIconWrapper_o5szj {
+} .international-phone-input__flagIconWrapper_1u0p1 {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 24px;
     height: 24px;
     margin-left: var(--gap-s);
-} .international-phone-input__emptyCountryIcon_o5szj {
+} .international-phone-input__emptyCountryIcon_1u0p1 {
     color: var(--color-light-neutral-translucent-700);
 }

package/components/country-select/index.js

@@ -3,17 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var components_countrySelect_Component = require('./Component.js');
-require('tslib');
-require('react');
-require('@alfalab/core-components-select/shared');
-require('@alfalab/core-components-shared');
-require('@alfalab/icons-glyph/WorldMagnifierMIcon');
-require('../flag-icon/component.js');
-require('classnames');
-require('../flag-icon/flagSprite.js');
-require('../select-field/component.js');
-require('react-merge-refs');
-require('@alfalab/hooks');
 
 
 

package/components/flag-icon/component.js

@@ -11,7 +11,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":"international-phone-input__flagIcon_1gyt4","flagPlaceholder":"international-phone-input__flagPlaceholder_1gyt4"};
+var styles = {"flagIcon":"international-phone-input__flagIcon_b3x27","flagPlaceholder":"international-phone-input__flagPlaceholder_b3x27"};
 require('./index.css')
 
 /**

package/components/flag-icon/index.css

@@ -1,4 +1,4 @@
-/* hash: 1prd5 */
+/* hash: 18hrh */
 :root {
 } /* deprecated */ :root {
     --color-light-neutral-translucent-100: rgba(38, 55, 88, 0.06); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -17,10 +17,10 @@
     --gap-3xs: 2px;
 } :root {
 } :root {
-} .international-phone-input__flagIcon_1gyt4 {
+} .international-phone-input__flagIcon_b3x27 {
     max-width: 24px;
     max-height: 24px;
-} .international-phone-input__flagPlaceholder_1gyt4 {
+} .international-phone-input__flagPlaceholder_b3x27 {
     width: 24px;
     height: 16px;
     max-height: 16px;

package/components/flag-icon/index.js

@@ -3,9 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var components_flagIcon_component = require('./component.js');
-require('react');
-require('classnames');
-require('./flagSprite.js');
 
 
 

package/components/select-field/component.js

@@ -9,7 +9,6 @@ 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 }; }
 
@@ -17,7 +16,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"international-phone-input__component_1uemg","flagIconContainer":"international-phone-input__flagIconContainer_1uemg","emptyCountryIcon":"international-phone-input__emptyCountryIcon_1uemg","disabled":"international-phone-input__disabled_1uemg","inner":"international-phone-input__inner_1uemg","l":"international-phone-input__l_1uemg","xl":"international-phone-input__xl_1uemg","focusVisible":"international-phone-input__focusVisible_1uemg"};
+var styles = {"component":"international-phone-input__component_in79c","flagIconContainer":"international-phone-input__flagIconContainer_in79c","emptyCountryIcon":"international-phone-input__emptyCountryIcon_in79c","disabled":"international-phone-input__disabled_in79c","inner":"international-phone-input__inner_in79c","l":"international-phone-input__l_in79c","xl":"international-phone-input__xl_in79c","focusVisible":"international-phone-input__focusVisible_in79c"};
 require('./index.css')
 
 var EMPTY_COUNTRY_SELECT_FIELD = {

package/components/select-field/index.css

@@ -1,4 +1,4 @@
-/* hash: 16sk6 */
+/* hash: kydnd */
 :root {
 } /* deprecated */ :root {
     --color-light-border-link: #2288fa;
@@ -21,33 +21,33 @@
 } :root {
     --focus-color: var(--color-light-border-link);
     --disabled-cursor: not-allowed;
-} .international-phone-input__component_1uemg {
+} .international-phone-input__component_in79c {
     height: 100%;
     cursor: pointer;
     outline: none;
     position: relative;
-} .international-phone-input__flagIconContainer_1uemg {
+} .international-phone-input__flagIconContainer_in79c {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 24px;
     height: 24px;
     margin-right: var(--gap-2xs);
-} .international-phone-input__emptyCountryIcon_1uemg {
+} .international-phone-input__emptyCountryIcon_in79c {
     color: var(--color-light-neutral-translucent-700);
-} .international-phone-input__disabled_1uemg {
+} .international-phone-input__disabled_in79c {
     cursor: var(--disabled-cursor);
-} .international-phone-input__inner_1uemg {
+} .international-phone-input__inner_in79c {
     position: relative;
     display: flex;
     align-items: center;
     height: 100%;
     padding-left: var(--gap-s);
     outline: none;
-} .international-phone-input__l_1uemg .international-phone-input__inner_1uemg,
-.international-phone-input__xl_1uemg .international-phone-input__inner_1uemg {
+} .international-phone-input__l_in79c .international-phone-input__inner_in79c,
+.international-phone-input__xl_in79c .international-phone-input__inner_in79c {
     padding-left: var(--gap-m);
-} .international-phone-input__focusVisible_1uemg {
+} .international-phone-input__focusVisible_in79c {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/components/select-field/index.js

@@ -3,14 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var components_selectField_component = require('./component.js');
-require('tslib');
-require('react');
-require('react-merge-refs');
-require('classnames');
-require('@alfalab/hooks');
-require('@alfalab/icons-glyph/WorldMagnifierMIcon');
-require('../flag-icon/component.js');
-require('../flag-icon/flagSprite.js');
 
 
 

package/cssm/{Component-202ae1dc.d.ts → Component-c241b310.d.ts}

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import React from "react";
 import { FC } from "react";
-import { CommonButtonProps, PrivateButtonProps } from "./typings-202ae1dc";
+import { CommonButtonProps, PrivateButtonProps } from "./typings-c241b310";
 type SpinnerProps = {
     /**
      * Управление видимостью компонента

package/cssm/Component.responsive-8566963f.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import React from "react";
-import { CommonButtonProps, ButtonProps } from "./typings-202ae1dc";
+import { CommonButtonProps, ButtonProps } from "./typings-c241b310";
 declare const ButtonMobile: React.ForwardRefExoticComponent<CommonButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 export { ButtonMobile, Button };
-export type { CommonButtonProps as ButtonMobileProps } from "./typings-202ae1dc";
+export type { CommonButtonProps as ButtonMobileProps } from "./typings-c241b310";

package/cssm/Component.responsive.js

@@ -7,32 +7,6 @@ var React = require('react');
 var coreComponentsMq = require('@alfalab/core-components-mq/cssm');
 var desktop_Component_desktop = require('./desktop/Component.desktop.js');
 var mobile_Component_mobile = require('./mobile/Component.mobile.js');
-require('@alfalab/core-components-input/cssm/desktop');
-require('@alfalab/core-components-input-autocomplete/cssm/desktop');
-require('@alfalab/core-components-select/cssm/desktop');
-require('./components/base-international-phone-input/Component.js');
-require('react-merge-refs');
-require('@maskito/core');
-require('@maskito/react');
-require('@alfalab/core-components-select/cssm/shared');
-require('./utils/index.js');
-require('@alfalab/core-components-shared/cssm');
-require('./consts.js');
-require('./data/country-data.js');
-require('./components/country-select/Component.js');
-require('@alfalab/icons-glyph/WorldMagnifierMIcon');
-require('./components/flag-icon/component.js');
-require('classnames');
-require('./components/flag-icon/flagSprite.js');
-require('./components/flag-icon/index.module.css');
-require('./components/select-field/component.js');
-require('@alfalab/hooks');
-require('./components/select-field/index.module.css');
-require('./components/country-select/index.module.css');
-require('./components/base-international-phone-input/index.module.css');
-require('@alfalab/core-components-input/cssm/mobile');
-require('@alfalab/core-components-input-autocomplete/cssm/mobile');
-require('@alfalab/core-components-select/cssm/mobile');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/cssm/components/base-international-phone-input/Component.js

@@ -11,18 +11,6 @@ var shared = require('@alfalab/core-components-select/cssm/shared');
 var utils_index = require('../../utils/index.js');
 var components_countrySelect_Component = require('../country-select/Component.js');
 var styles = require('./index.module.css');
-require('@alfalab/core-components-shared/cssm');
-require('../../consts.js');
-require('../../data/country-data.js');
-require('@alfalab/icons-glyph/WorldMagnifierMIcon');
-require('../flag-icon/component.js');
-require('classnames');
-require('../flag-icon/flagSprite.js');
-require('../flag-icon/index.module.css');
-require('../select-field/component.js');
-require('@alfalab/hooks');
-require('../select-field/index.module.css');
-require('../country-select/index.module.css');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -73,13 +61,11 @@ var BaseInternationalPhoneInput = React.forwardRef(function (_a, ref) {
     var handleInput = function (e) {
         updatePhoneData(e.target.value, e);
     };
-    var handleClear = function () {
-        if (clearableCountryCode) {
-            changeNumber(null, '');
-        }
-        else {
-            changeNumber(null, "+".concat(country === null || country === void 0 ? void 0 : country.countryCode) || '');
-        }
+    var handleClear = function (event) {
+        var _a, _b;
+        (_b = (_a = restProps.inputProps) === null || _a === void 0 ? void 0 : _a.onClear) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+        var countryCode = (country === null || country === void 0 ? void 0 : country.countryCode) || '';
+        changeNumber(null, clearableCountryCode ? '' : "+".concat(countryCode));
     };
     React.useEffect(function () {
         if (value) {
@@ -93,20 +79,13 @@ var BaseInternationalPhoneInput = React.forwardRef(function (_a, ref) {
     var renderCountrySelect = function (compact) {
         var _a;
         if (compact === void 0) { compact = false; }
-        return (React__default.default.createElement(components_countrySelect_Component.CountrySelect, tslib.__assign({}, countrySelectProps, { view: view, SelectComponent: SelectComponent, disabled: disabled || (countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.disabled), onChange: handleSelectCountry, country: country, countries: compact ? [] : countriesData, fieldWidth: (_a = inputWrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width })));
-    };
-    var inputProps = {
-        className: styles__default.default.component,
-        ref: mergeRefs__default.default([maskRef, ref, inputRef]),
-        wrapperRef: inputWrapperRef,
-        addonsClassName: styles__default.default.addons,
-        type: 'tel',
-        clear: utils_index.getClear(clearProp, clearableCountryCode, value, country === null || country === void 0 ? void 0 : country.countryCode),
+        return (React__default.default.createElement(components_countrySelect_Component.CountrySelect, tslib.__assign({ dataTestId: restProps === null || restProps === void 0 ? void 0 : restProps.dataTestId }, countrySelectProps, { view: view, SelectComponent: SelectComponent, disabled: disabled || (countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.disabled), onChange: handleSelectCountry, country: country, countries: compact ? [] : countriesData, fieldWidth: (_a = inputWrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width })));
     };
+    var inputProps = tslib.__assign({ className: styles__default.default.component, ref: mergeRefs__default.default([maskRef, ref, inputRef]), wrapperRef: inputWrapperRef, addonsClassName: styles__default.default.addons, type: 'tel', clear: utils_index.getClear(clearProp, clearableCountryCode, value, country === null || country === void 0 ? void 0 : country.countryCode) }, restProps.inputProps);
     return Array.isArray(options) ? (React__default.default.createElement(InputAutocomplete, tslib.__assign({ closeOnSelect: true, Option: shared.BaseOption, size: size }, restProps, { disabled: disabled, options: filteredOptions, value: value, onChange: handleOptionSelect, onInput: function (event, _a) {
             var phone = _a.value;
             return updatePhoneData(phone, event);
-        }, inputProps: tslib.__assign(tslib.__assign({}, inputProps), { onClear: handleClear, onInput: handleInput, leftAddons: renderCountrySelect(view === 'mobile') }), fieldProps: tslib.__assign({ className: inputProps.className, addonsClassName: inputProps.addonsClassName }, (view === 'mobile' ? { leftAddons: renderCountrySelect() } : null)) }))) : (React__default.default.createElement(Input, tslib.__assign({}, restProps, inputProps, { onClear: inputProps.clear ? handleClear : undefined, leftAddons: renderCountrySelect(), size: size, onInput: handleInput, value: value, disabled: disabled })));
+        }, inputProps: tslib.__assign(tslib.__assign({}, inputProps), { onClear: handleClear, onInput: handleInput, leftAddons: renderCountrySelect(view === 'mobile') }), fieldProps: tslib.__assign(tslib.__assign(tslib.__assign({}, restProps.fieldProps), { className: inputProps.className, addonsClassName: inputProps.addonsClassName }), (view === 'mobile' ? { leftAddons: renderCountrySelect() } : null)) }))) : (React__default.default.createElement(Input, tslib.__assign({}, restProps, inputProps, { onClear: inputProps.clear ? handleClear : undefined, leftAddons: renderCountrySelect(), size: size, onInput: handleInput, value: value, disabled: disabled })));
 });
 
 exports.BaseInternationalPhoneInput = BaseInternationalPhoneInput;

package/cssm/components/base-international-phone-input/index.js

@@ -3,27 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var components_baseInternationalPhoneInput_Component = require('./Component.js');
-require('tslib');
-require('react');
-require('react-merge-refs');
-require('@maskito/core');
-require('@maskito/react');
-require('@alfalab/core-components-select/cssm/shared');
-require('../../utils/index.js');
-require('@alfalab/core-components-shared/cssm');
-require('../../consts.js');
-require('../../data/country-data.js');
-require('../country-select/Component.js');
-require('@alfalab/icons-glyph/WorldMagnifierMIcon');
-require('../flag-icon/component.js');
-require('classnames');
-require('../flag-icon/flagSprite.js');
-require('../flag-icon/index.module.css');
-require('../select-field/component.js');
-require('@alfalab/hooks');
-require('../select-field/index.module.css');
-require('../country-select/index.module.css');
-require('./index.module.css');
 
 
 

package/cssm/components/country-select/Component.js

@@ -10,12 +10,6 @@ var WorldMagnifierMIcon = require('@alfalab/icons-glyph/WorldMagnifierMIcon');
 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('classnames');
-require('../flag-icon/flagSprite.js');
-require('../flag-icon/index.module.css');
-require('react-merge-refs');
-require('@alfalab/hooks');
-require('../select-field/index.module.css');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

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

@@ -3,20 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var components_countrySelect_Component = require('./Component.js');
-require('tslib');
-require('react');
-require('@alfalab/core-components-select/cssm/shared');
-require('@alfalab/core-components-shared/cssm');
-require('@alfalab/icons-glyph/WorldMagnifierMIcon');
-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('../select-field/index.module.css');
-require('./index.module.css');
 
 
 

package/cssm/components/flag-icon/index.js

@@ -3,10 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var components_flagIcon_component = require('./component.js');
-require('react');
-require('classnames');
-require('./flagSprite.js');
-require('./index.module.css');
 
 
 

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

@@ -10,8 +10,6 @@ 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 }; }
 

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

@@ -3,16 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var components_selectField_component = require('./component.js');
-require('tslib');
-require('react');
-require('react-merge-refs');
-require('classnames');
-require('@alfalab/hooks');
-require('@alfalab/icons-glyph/WorldMagnifierMIcon');
-require('../flag-icon/component.js');
-require('../flag-icon/flagSprite.js');
-require('../flag-icon/index.module.css');
-require('./index.module.css');
 
 
 

package/cssm/desktop/Component.desktop.js

@@ -8,25 +8,6 @@ var desktop$1 = require('@alfalab/core-components-input/cssm/desktop');
 var desktop$2 = require('@alfalab/core-components-input-autocomplete/cssm/desktop');
 var desktop = require('@alfalab/core-components-select/cssm/desktop');
 var components_baseInternationalPhoneInput_Component = require('../components/base-international-phone-input/Component.js');
-require('react-merge-refs');
-require('@maskito/core');
-require('@maskito/react');
-require('@alfalab/core-components-select/cssm/shared');
-require('../utils/index.js');
-require('@alfalab/core-components-shared/cssm');
-require('../consts.js');
-require('../data/country-data.js');
-require('../components/country-select/Component.js');
-require('@alfalab/icons-glyph/WorldMagnifierMIcon');
-require('../components/flag-icon/component.js');
-require('classnames');
-require('../components/flag-icon/flagSprite.js');
-require('../components/flag-icon/index.module.css');
-require('../components/select-field/component.js');
-require('@alfalab/hooks');
-require('../components/select-field/index.module.css');
-require('../components/country-select/index.module.css');
-require('../components/base-international-phone-input/index.module.css');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }