@alfalab/core-components 48.22.1-beta.2 → 48.22.1-beta.3

package/icon-view/moderncssm/components/base-shape/component.js

@@ -47,7 +47,7 @@ const BaseShape = forwardRef(({ size = 64, border = false, backgroundColor, imag
                         }
                         : undefined, d: borderDPath }))),
             text && React.createElement("div", { className: styles.text }, text),
-            children && (React.createElement("div", { className: cn(styles.children, { [styles[`childrenSize_${mainSize}`]]: mainSize }, iconContainerClassName) }, children))),
+            children && (React.createElement("div", { className: cn(styles.children, styles[`childrenSize_${mainSize}`], iconContainerClassName) }, children))),
         hasTopAddons && (React.createElement("div", { className: cn(styles.addons, styles.topAddons) }, topAddons)),
         hasBottomAddons && (React.createElement("div", { className: cn(styles.addons, styles.bottomAddons) }, bottomAddons)),
         hasIndicator && !hasTopAddons && (React.createElement("div", { className: cn(styles.addons, styles.indicator) }, indicator))));

package/international-phone-input/Component.responsive.d.ts

@@ -8,6 +8,7 @@ declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
     clearableCountryCode?: boolean | "preserve" | undefined;
     countrySelectProps?: import("./components/country-select/index").SharedCountrySelectProps | undefined;
     clear?: boolean | undefined;
+    size?: "s" | "m" | "l" | "xl" | 48 | 56 | 64 | 72 | undefined;
     filterFn?: ((value: string | undefined, option: import("./typings-d515b24c").OptionShape) => boolean) | undefined;
     onCountryChange?: ((country?: import("./index-464d40a4").Country | undefined) => void) | undefined;
     onChange?: ((phone: string) => void) | undefined;
@@ -29,6 +30,7 @@ declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
     clearableCountryCode?: boolean | "preserve" | undefined;
     countrySelectProps?: import("./components/country-select/index").SharedCountrySelectProps | undefined;
     clear?: boolean | undefined;
+    size?: "s" | "m" | "l" | "xl" | 48 | 56 | 64 | 72 | undefined;
     filterFn?: ((value: string | undefined, option: import("./typings-d515b24c").OptionShape) => boolean) | undefined;
     onCountryChange?: ((country?: import("./index-464d40a4").Country | undefined) => void) | undefined;
     onChange?: ((phone: string) => void) | undefined;

package/international-phone-input/components/base-international-phone-input/Component.d.ts

@@ -10,6 +10,7 @@ declare const BaseInternationalPhoneInput: React.ForwardRefExoticComponent<{
     clearableCountryCode?: boolean | "preserve" | undefined;
     countrySelectProps?: import("../country-select/index").SharedCountrySelectProps | undefined;
     clear?: boolean | undefined;
+    size?: "s" | "m" | "l" | "xl" | 48 | 56 | 64 | 72 | undefined;
     filterFn?: ((value: string | undefined, option: import("../../typings-d515b24c").OptionShape) => boolean) | undefined;
     onCountryChange?: ((country?: Country | undefined) => void) | undefined;
     onChange?: ((phone: string) => void) | undefined;

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

@@ -119,7 +119,7 @@ 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({ 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, onOpen: handleCountrySelectOpen, open: showCountrySelect })));
+        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, onOpen: handleCountrySelectOpen, open: showCountrySelect, size: size })));
     };
     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);
     React.useEffect(function () {

package/international-phone-input/components/country-select/Component.js

@@ -2,28 +2,36 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
+var cn = require('classnames');
 var shared = require('../../../select/shared');
 var coreComponentsShared = require('../../../shared');
 var WorldMagnifierMIcon = require('@alfalab/icons-glyph/WorldMagnifierMIcon');
+var consts = require('../../consts.js');
 var components_flagIcon_component = require('../flag-icon/component.js');
 var components_selectField_component = require('../select-field/component.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"international-phone-input__component_1grcj","option":"international-phone-input__option_1grcj","flag":"international-phone-input__flag_1grcj","countryName":"international-phone-input__countryName_1grcj","dialCode":"international-phone-input__dialCode_1grcj","flagIconWrapper":"international-phone-input__flagIconWrapper_1grcj","emptyCountryIcon":"international-phone-input__emptyCountryIcon_1grcj"};
+var styles = {"component":"international-phone-input__component_1grcj","option":"international-phone-input__option_1grcj","mobile":"international-phone-input__mobile_1grcj","size-72":"international-phone-input__size-72_1grcj","flag":"international-phone-input__flag_1grcj","countryName":"international-phone-input__countryName_1grcj","dialCode":"international-phone-input__dialCode_1grcj","flagIconWrapper":"international-phone-input__flagIconWrapper_1grcj","emptyCountryIcon":"international-phone-input__emptyCountryIcon_1grcj"};
 require('./index.css');
 
 var CountrySelect = function (_a) {
-    var hideCountrySelect = _a.hideCountrySelect, countries = _a.countries, country = _a.country, dataTestId = _a.dataTestId, fieldWidth = _a.fieldWidth, onChange = _a.onChange, _b = _a.view, view = _b === void 0 ? 'desktop' : _b, SelectComponent = _a.SelectComponent, restProps = tslib.__rest(_a, ["hideCountrySelect", "countries", "country", "dataTestId", "fieldWidth", "onChange", "view", "SelectComponent"]);
+    var hideCountrySelect = _a.hideCountrySelect, countries = _a.countries, country = _a.country, dataTestId = _a.dataTestId, fieldWidth = _a.fieldWidth, onChange = _a.onChange, _b = _a.view, view = _b === void 0 ? 'desktop' : _b, SelectComponent = _a.SelectComponent, size = _a.size, restProps = tslib.__rest(_a, ["hideCountrySelect", "countries", "country", "dataTestId", "fieldWidth", "onChange", "view", "SelectComponent", "size"]);
+    var isMobile = React.useMemo(function () { return view === 'mobile'; }, [view]);
     var options = React.useMemo(function () {
         return (countries === null || countries === void 0 ? void 0 : countries.map(function (areas) {
             var _a = areas[0], iso2 = _a.iso2, dialCode = _a.dialCode, name = _a.name;
             return {
                 key: iso2,
                 value: areas[0],
-                content: (React__default.default.createElement("span", { className: styles.option },
+                content: (React__default.default.createElement("span", { className: cn__default.default([
+                        styles.option,
+                        size && styles[consts.SIZE_TO_CLASSNAME_MAP[size]],
+                        isMobile && styles.mobile,
+                    ]) },
                     React__default.default.createElement(components_flagIcon_component.FlagIcon, { country: iso2, className: styles.flag }),
                     React__default.default.createElement("span", { className: styles.optionTextWrap },
                         React__default.default.createElement("span", { className: styles.countryName }, name),
@@ -32,7 +40,7 @@ var CountrySelect = function (_a) {
                             dialCode)))),
             };
         })) || [];
-    }, [countries]);
+    }, [countries, size, isMobile]);
     var renderOptionsList = React.useCallback(function (props) { return (React__default.default.createElement("div", { style: { width: fieldWidth || 0 } },
         React__default.default.createElement(shared.VirtualOptionsList, tslib.__assign({}, props, { optionsListWidth: 'field' })))); }, [fieldWidth]);
     var renderFlagIcon = function () { return (React__default.default.createElement("span", { className: styles.flagIconWrapper }, (country === null || country === void 0 ? void 0 : country.iso2) ? (React__default.default.createElement(components_flagIcon_component.FlagIcon, { country: country.iso2 })) : (React__default.default.createElement(WorldMagnifierMIcon.WorldMagnifierMIcon, { className: styles.emptyCountryIcon })))); };
@@ -42,7 +50,7 @@ var CountrySelect = function (_a) {
         return (
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
         React__default.default.createElement("div", { className: styles.component, onClick: function (event) { return event.stopPropagation(); } },
-            React__default.default.createElement(SelectComponent, tslib.__assign({ Option: shared.BaseOption }, restProps, { dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'country-select'), options: options, selected: selected || components_selectField_component.EMPTY_COUNTRY_SELECT_FIELD, onChange: onChange, Field: components_selectField_component.SelectField, OptionsList: view === 'mobile' ? shared.VirtualOptionsList : renderOptionsList }, (view === 'mobile' && {
+            React__default.default.createElement(SelectComponent, tslib.__assign({ Option: shared.BaseOption, size: size }, restProps, { dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'country-select'), options: options, selected: selected || components_selectField_component.EMPTY_COUNTRY_SELECT_FIELD, onChange: onChange, Field: components_selectField_component.SelectField, OptionsList: isMobile ? shared.VirtualOptionsList : renderOptionsList }, (isMobile && {
                 bottomSheetProps: {
                     title: 'Выберите страну',
                 },

package/international-phone-input/components/country-select/index.css

@@ -17,7 +17,8 @@
     /* новые значения, используйте их */
 } :root { /* deprecated */ /* deprecated */
     --gap-xs: 8px; /* deprecated */
-    --gap-s: 12px; /* 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 */
+    --gap-s: 12px; /* deprecated */ /* deprecated */
+    --gap-m: 16px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 
     /* новые значения, используйте их */
 
@@ -25,6 +26,7 @@
     /* stylelint-disable-next-line length-zero-no-unit */
     --gap-8: var(--gap-xs);
     --gap-12: var(--gap-s);
+    --gap-16: var(--gap-m);
 } :root {
 } :root {
 } /* сбрасывает синюю подсветку при нажатии */ .international-phone-input__component_1grcj {
@@ -35,8 +37,11 @@
 } .international-phone-input__option_1grcj {
     display: flex;
     align-items: flex-start;
-    padding: var(--gap-12);
-} .international-phone-input__flag_1grcj {
+    padding: var(--gap-12)
+} .international-phone-input__option_1grcj.international-phone-input__mobile_1grcj,
+    .international-phone-input__option_1grcj.international-phone-input__size-72_1grcj {
+        padding-left: var(--gap-16);
+    } .international-phone-input__flag_1grcj {
     flex-shrink: 0;
     margin-right: var(--gap-8);
 } .international-phone-input__countryName_1grcj {

package/international-phone-input/components/select-field/component.js

@@ -6,6 +6,7 @@ var mergeRefs = require('react-merge-refs');
 var cn = require('classnames');
 var hooks = require('@alfalab/hooks');
 var WorldMagnifierMIcon = require('@alfalab/icons-glyph/WorldMagnifierMIcon');
+var consts = require('../../consts.js');
 var components_flagIcon_component = require('../flag-icon/component.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -14,30 +15,20 @@ 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_4mtda","flagIconContainer":"international-phone-input__flagIconContainer_4mtda","emptyCountryIcon":"international-phone-input__emptyCountryIcon_4mtda","disabled":"international-phone-input__disabled_4mtda","inner":"international-phone-input__inner_4mtda","size-64":"international-phone-input__size-64_4mtda","size-72":"international-phone-input__size-72_4mtda","focusVisible":"international-phone-input__focusVisible_4mtda"};
+var styles = {"component":"international-phone-input__component_4mtda","flagIconContainer":"international-phone-input__flagIconContainer_4mtda","emptyCountryIcon":"international-phone-input__emptyCountryIcon_4mtda","disabled":"international-phone-input__disabled_4mtda","inner":"international-phone-input__inner_4mtda","size-72":"international-phone-input__size-72_4mtda","focusVisible":"international-phone-input__focusVisible_4mtda"};
 require('./index.css');
 
 var EMPTY_COUNTRY_SELECT_FIELD = {
     value: 'EMPTY_COUNTRY_SELECT_VALUE',
     key: 'EMPTY_COUNTRY_SELECT_KEY',
 };
-var SIZE_TO_CLASSNAME_MAP = {
-    s: 'size-48',
-    m: 'size-56',
-    l: 'size-64',
-    xl: 'size-72',
-    48: 'size-48',
-    56: 'size-56',
-    64: 'size-64',
-    72: 'size-72',
-};
 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_TO_CLASSNAME_MAP[size]], (_b = {},
+    return (React__default.default.createElement("div", { ref: ref, className: cn__default.default(styles.component, size && styles[consts.SIZE_TO_CLASSNAME_MAP[size]], (_b = {},
             _b[styles.focusVisible] = focusVisible,
             _b[styles.disabled] = disabled,
             _b)) },

package/international-phone-input/components/select-field/index.css

@@ -54,8 +54,7 @@
     height: 100%;
     padding-left: var(--gap-12);
     outline: none;
-} .international-phone-input__size-64_4mtda .international-phone-input__inner_4mtda,
-.international-phone-input__size-72_4mtda .international-phone-input__inner_4mtda {
+} .international-phone-input__size-72_4mtda .international-phone-input__inner_4mtda {
     padding-left: var(--gap-16);
 } .international-phone-input__focusVisible_4mtda {
     outline: 2px solid var(--focus-color);

package/international-phone-input/consts.d.ts

@@ -1,2 +1,13 @@
 declare const DEFAULT_PHONE_FORMAT = "... ... ... ... ...";
-export { DEFAULT_PHONE_FORMAT };
+declare const SIZE_TO_CLASSNAME_MAP: {
+    s: string;
+    m: string;
+    l: string;
+    xl: string;
+    40: string;
+    48: string;
+    56: string;
+    64: string;
+    72: string;
+};
+export { DEFAULT_PHONE_FORMAT, SIZE_TO_CLASSNAME_MAP };

package/international-phone-input/consts.js

@@ -1,5 +1,17 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var DEFAULT_PHONE_FORMAT = '... ... ... ... ...';
+var SIZE_TO_CLASSNAME_MAP = {
+    s: 'size-48',
+    m: 'size-56',
+    l: 'size-64',
+    xl: 'size-72',
+    40: 'size-40',
+    48: 'size-48',
+    56: 'size-56',
+    64: 'size-64',
+    72: 'size-72',
+};
 
 exports.DEFAULT_PHONE_FORMAT = DEFAULT_PHONE_FORMAT;
+exports.SIZE_TO_CLASSNAME_MAP = SIZE_TO_CLASSNAME_MAP;

package/international-phone-input/cssm/Component.responsive.d.ts

@@ -8,6 +8,7 @@ declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
     clearableCountryCode?: boolean | "preserve" | undefined;
     countrySelectProps?: import("./components/country-select/index").SharedCountrySelectProps | undefined;
     clear?: boolean | undefined;
+    size?: "s" | "m" | "l" | "xl" | 48 | 56 | 64 | 72 | undefined;
     filterFn?: ((value: string | undefined, option: import("./typings-d515b24c").OptionShape) => boolean) | undefined;
     onCountryChange?: ((country?: import("./index-464d40a4").Country | undefined) => void) | undefined;
     onChange?: ((phone: string) => void) | undefined;
@@ -29,6 +30,7 @@ declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
     clearableCountryCode?: boolean | "preserve" | undefined;
     countrySelectProps?: import("./components/country-select/index").SharedCountrySelectProps | undefined;
     clear?: boolean | undefined;
+    size?: "s" | "m" | "l" | "xl" | 48 | 56 | 64 | 72 | undefined;
     filterFn?: ((value: string | undefined, option: import("./typings-d515b24c").OptionShape) => boolean) | undefined;
     onCountryChange?: ((country?: import("./index-464d40a4").Country | undefined) => void) | undefined;
     onChange?: ((phone: string) => void) | undefined;

package/international-phone-input/cssm/components/base-international-phone-input/Component.d.ts

@@ -10,6 +10,7 @@ declare const BaseInternationalPhoneInput: React.ForwardRefExoticComponent<{
     clearableCountryCode?: boolean | "preserve" | undefined;
     countrySelectProps?: import("../country-select/index").SharedCountrySelectProps | undefined;
     clear?: boolean | undefined;
+    size?: "s" | "m" | "l" | "xl" | 48 | 56 | 64 | 72 | undefined;
     filterFn?: ((value: string | undefined, option: import("../../typings-d515b24c").OptionShape) => boolean) | undefined;
     onCountryChange?: ((country?: Country | undefined) => void) | undefined;
     onChange?: ((phone: string) => void) | undefined;

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

@@ -118,7 +118,7 @@ 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({ 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, onOpen: handleCountrySelectOpen, open: showCountrySelect })));
+        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, onOpen: handleCountrySelectOpen, open: showCountrySelect, size: size })));
     };
     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);
     React.useEffect(function () {

package/international-phone-input/cssm/components/country-select/Component.js

@@ -2,9 +2,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
+var cn = require('classnames');
 var shared = require('../../../../select/cssm/shared');
 var coreComponentsShared = require('../../../../shared/cssm');
 var WorldMagnifierMIcon = require('@alfalab/icons-glyph/WorldMagnifierMIcon');
+var consts = require('../../consts.js');
 var components_flagIcon_component = require('../flag-icon/component.js');
 var components_selectField_component = require('../select-field/component.js');
 var styles = require('./index.module.css');
@@ -12,17 +14,23 @@ var styles = require('./index.module.css');
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 var CountrySelect = function (_a) {
-    var hideCountrySelect = _a.hideCountrySelect, countries = _a.countries, country = _a.country, dataTestId = _a.dataTestId, fieldWidth = _a.fieldWidth, onChange = _a.onChange, _b = _a.view, view = _b === void 0 ? 'desktop' : _b, SelectComponent = _a.SelectComponent, restProps = tslib.__rest(_a, ["hideCountrySelect", "countries", "country", "dataTestId", "fieldWidth", "onChange", "view", "SelectComponent"]);
+    var hideCountrySelect = _a.hideCountrySelect, countries = _a.countries, country = _a.country, dataTestId = _a.dataTestId, fieldWidth = _a.fieldWidth, onChange = _a.onChange, _b = _a.view, view = _b === void 0 ? 'desktop' : _b, SelectComponent = _a.SelectComponent, size = _a.size, restProps = tslib.__rest(_a, ["hideCountrySelect", "countries", "country", "dataTestId", "fieldWidth", "onChange", "view", "SelectComponent", "size"]);
+    var isMobile = React.useMemo(function () { return view === 'mobile'; }, [view]);
     var options = React.useMemo(function () {
         return (countries === null || countries === void 0 ? void 0 : countries.map(function (areas) {
             var _a = areas[0], iso2 = _a.iso2, dialCode = _a.dialCode, name = _a.name;
             return {
                 key: iso2,
                 value: areas[0],
-                content: (React__default.default.createElement("span", { className: styles__default.default.option },
+                content: (React__default.default.createElement("span", { className: cn__default.default([
+                        styles__default.default.option,
+                        size && styles__default.default[consts.SIZE_TO_CLASSNAME_MAP[size]],
+                        isMobile && styles__default.default.mobile,
+                    ]) },
                     React__default.default.createElement(components_flagIcon_component.FlagIcon, { country: iso2, className: styles__default.default.flag }),
                     React__default.default.createElement("span", { className: styles__default.default.optionTextWrap },
                         React__default.default.createElement("span", { className: styles__default.default.countryName }, name),
@@ -31,7 +39,7 @@ var CountrySelect = function (_a) {
                             dialCode)))),
             };
         })) || [];
-    }, [countries]);
+    }, [countries, size, isMobile]);
     var renderOptionsList = React.useCallback(function (props) { return (React__default.default.createElement("div", { style: { width: fieldWidth || 0 } },
         React__default.default.createElement(shared.VirtualOptionsList, tslib.__assign({}, props, { optionsListWidth: 'field' })))); }, [fieldWidth]);
     var renderFlagIcon = function () { return (React__default.default.createElement("span", { className: styles__default.default.flagIconWrapper }, (country === null || country === void 0 ? void 0 : country.iso2) ? (React__default.default.createElement(components_flagIcon_component.FlagIcon, { country: country.iso2 })) : (React__default.default.createElement(WorldMagnifierMIcon.WorldMagnifierMIcon, { className: styles__default.default.emptyCountryIcon })))); };
@@ -41,7 +49,7 @@ var CountrySelect = function (_a) {
         return (
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
         React__default.default.createElement("div", { className: styles__default.default.component, onClick: function (event) { return event.stopPropagation(); } },
-            React__default.default.createElement(SelectComponent, tslib.__assign({ Option: shared.BaseOption }, restProps, { dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'country-select'), options: options, selected: selected || components_selectField_component.EMPTY_COUNTRY_SELECT_FIELD, onChange: onChange, Field: components_selectField_component.SelectField, OptionsList: view === 'mobile' ? shared.VirtualOptionsList : renderOptionsList }, (view === 'mobile' && {
+            React__default.default.createElement(SelectComponent, tslib.__assign({ Option: shared.BaseOption, size: size }, restProps, { dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'country-select'), options: options, selected: selected || components_selectField_component.EMPTY_COUNTRY_SELECT_FIELD, onChange: onChange, Field: components_selectField_component.SelectField, OptionsList: isMobile ? shared.VirtualOptionsList : renderOptionsList }, (isMobile && {
                 bottomSheetProps: {
                     title: 'Выберите страну',
                 },

package/international-phone-input/cssm/components/country-select/index.module.css

@@ -16,7 +16,8 @@
     /* новые значения, используйте их */
 } :root { /* deprecated */ /* deprecated */
     --gap-xs: 8px; /* deprecated */
-    --gap-s: 12px; /* 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 */
+    --gap-s: 12px; /* deprecated */ /* deprecated */
+    --gap-m: 16px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 
     /* новые значения, используйте их */
 
@@ -24,6 +25,7 @@
     /* stylelint-disable-next-line length-zero-no-unit */
     --gap-8: var(--gap-xs);
     --gap-12: var(--gap-s);
+    --gap-16: var(--gap-m);
 } :root {
 } :root {
 } /* сбрасывает синюю подсветку при нажатии */ .component {
@@ -35,8 +37,11 @@
 } .option {
     display: flex;
     align-items: flex-start;
-    padding: var(--gap-12);
-} .flag {
+    padding: var(--gap-12)
+} .option.mobile,
+    .option.size-72 {
+        padding-left: var(--gap-16);
+    } .flag {
     flex-shrink: 0;
     margin-right: var(--gap-8);
 } .countryName {

package/international-phone-input/cssm/components/select-field/component.js

@@ -6,6 +6,7 @@ var mergeRefs = require('react-merge-refs');
 var cn = require('classnames');
 var hooks = require('@alfalab/hooks');
 var WorldMagnifierMIcon = require('@alfalab/icons-glyph/WorldMagnifierMIcon');
+var consts = require('../../consts.js');
 var components_flagIcon_component = require('../flag-icon/component.js');
 var styles = require('./index.module.css');
 
@@ -20,23 +21,13 @@ var EMPTY_COUNTRY_SELECT_FIELD = {
     value: 'EMPTY_COUNTRY_SELECT_VALUE',
     key: 'EMPTY_COUNTRY_SELECT_KEY',
 };
-var SIZE_TO_CLASSNAME_MAP = {
-    s: 'size-48',
-    m: 'size-56',
-    l: 'size-64',
-    xl: 'size-72',
-    48: 'size-48',
-    56: 'size-56',
-    64: 'size-64',
-    72: 'size-72',
-};
 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_TO_CLASSNAME_MAP[size]], (_b = {},
+    return (React__default.default.createElement("div", { ref: ref, className: cn__default.default(styles__default.default.component, size && styles__default.default[consts.SIZE_TO_CLASSNAME_MAP[size]], (_b = {},
             _b[styles__default.default.focusVisible] = focusVisible,
             _b[styles__default.default.disabled] = disabled,
             _b)) },

package/international-phone-input/cssm/components/select-field/index.module.css

@@ -53,8 +53,7 @@
     height: 100%;
     padding-left: var(--gap-12);
     outline: none;
-} .size-64 .inner,
-.size-72 .inner {
+} .size-72 .inner {
     padding-left: var(--gap-16);
 } .focusVisible {
     outline: 2px solid var(--focus-color);

package/international-phone-input/cssm/consts.d.ts

@@ -1,2 +1,13 @@
 declare const DEFAULT_PHONE_FORMAT = "... ... ... ... ...";
-export { DEFAULT_PHONE_FORMAT };
+declare const SIZE_TO_CLASSNAME_MAP: {
+    s: string;
+    m: string;
+    l: string;
+    xl: string;
+    40: string;
+    48: string;
+    56: string;
+    64: string;
+    72: string;
+};
+export { DEFAULT_PHONE_FORMAT, SIZE_TO_CLASSNAME_MAP };

package/international-phone-input/cssm/consts.js

@@ -1,5 +1,17 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var DEFAULT_PHONE_FORMAT = '... ... ... ... ...';
+var SIZE_TO_CLASSNAME_MAP = {
+    s: 'size-48',
+    m: 'size-56',
+    l: 'size-64',
+    xl: 'size-72',
+    40: 'size-40',
+    48: 'size-48',
+    56: 'size-56',
+    64: 'size-64',
+    72: 'size-72',
+};
 
 exports.DEFAULT_PHONE_FORMAT = DEFAULT_PHONE_FORMAT;
+exports.SIZE_TO_CLASSNAME_MAP = SIZE_TO_CLASSNAME_MAP;

package/international-phone-input/cssm/types.d.ts

@@ -44,6 +44,11 @@ type CommonPhoneInputProps = {
      *Показывать крестик очистки
      */
     clear?: boolean;
+    /**
+     * Размер компонента
+     * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно
+     */
+    size?: 's' | 'm' | 'l' | 'xl' | 48 | 56 | 64 | 72;
     /**
      * Функция фильтрации номеров для автокомплита
      */

package/international-phone-input/esm/Component.responsive.d.ts

@@ -8,6 +8,7 @@ declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
     clearableCountryCode?: boolean | "preserve" | undefined;
     countrySelectProps?: import("./components/country-select/index").SharedCountrySelectProps | undefined;
     clear?: boolean | undefined;
+    size?: "s" | "m" | "l" | "xl" | 48 | 56 | 64 | 72 | undefined;
     filterFn?: ((value: string | undefined, option: import("./typings-d515b24c").OptionShape) => boolean) | undefined;
     onCountryChange?: ((country?: import("./index-464d40a4").Country | undefined) => void) | undefined;
     onChange?: ((phone: string) => void) | undefined;
@@ -29,6 +30,7 @@ declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
     clearableCountryCode?: boolean | "preserve" | undefined;
     countrySelectProps?: import("./components/country-select/index").SharedCountrySelectProps | undefined;
     clear?: boolean | undefined;
+    size?: "s" | "m" | "l" | "xl" | 48 | 56 | 64 | 72 | undefined;
     filterFn?: ((value: string | undefined, option: import("./typings-d515b24c").OptionShape) => boolean) | undefined;
     onCountryChange?: ((country?: import("./index-464d40a4").Country | undefined) => void) | undefined;
     onChange?: ((phone: string) => void) | undefined;

package/international-phone-input/esm/Component.responsive.js

@@ -16,9 +16,9 @@ import './utils/index.js';
 import './consts.js';
 import './data/country-data.js';
 import './components/country-select/Component.js';
+import 'classnames';
 import '@alfalab/icons-glyph/WorldMagnifierMIcon';
 import './components/flag-icon/component.js';
-import 'classnames';
 import './components/flag-icon/flagSprite.js';
 import './components/select-field/component.js';
 import '@alfalab/hooks';

package/international-phone-input/esm/components/base-international-phone-input/Component.d.ts

@@ -10,6 +10,7 @@ declare const BaseInternationalPhoneInput: React.ForwardRefExoticComponent<{
     clearableCountryCode?: boolean | "preserve" | undefined;
     countrySelectProps?: import("../country-select/index").SharedCountrySelectProps | undefined;
     clear?: boolean | undefined;
+    size?: "s" | "m" | "l" | "xl" | 48 | 56 | 64 | 72 | undefined;
     filterFn?: ((value: string | undefined, option: import("../../typings-d515b24c").OptionShape) => boolean) | undefined;
     onCountryChange?: ((country?: Country | undefined) => void) | undefined;
     onChange?: ((phone: string) => void) | undefined;

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

@@ -9,9 +9,9 @@ import { initCountries, findCountry, filterPhones, createMaskOptions, getClear,
 import { CountrySelect } from '../country-select/Component.js';
 import '../../consts.js';
 import '../../data/country-data.js';
+import 'classnames';
 import '@alfalab/icons-glyph/WorldMagnifierMIcon';
 import '../flag-icon/component.js';
-import 'classnames';
 import '../flag-icon/flagSprite.js';
 import '../select-field/component.js';
 import '@alfalab/hooks';
@@ -120,7 +120,7 @@ var BaseInternationalPhoneInput = forwardRef(function (_a, ref) {
     var renderCountrySelect = function (compact) {
         var _a;
         if (compact === void 0) { compact = false; }
-        return (React.createElement(CountrySelect, __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, onOpen: handleCountrySelectOpen, open: showCountrySelect })));
+        return (React.createElement(CountrySelect, __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, onOpen: handleCountrySelectOpen, open: showCountrySelect, size: size })));
     };
     var inputProps = __assign({ className: styles.component, ref: mergeRefs([maskRef, ref, inputRef]), wrapperRef: inputWrapperRef, addonsClassName: styles.addons, type: 'tel', clear: getClear(clearProp, clearableCountryCode, value, country === null || country === void 0 ? void 0 : country.countryCode) }, restProps.inputProps);
     useEffect(function () {

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

@@ -10,9 +10,9 @@ import '../../utils/index.js';
 import '../../consts.js';
 import '../../data/country-data.js';
 import '../country-select/Component.js';
+import 'classnames';
 import '@alfalab/icons-glyph/WorldMagnifierMIcon';
 import '../flag-icon/component.js';
-import 'classnames';
 import '../flag-icon/flagSprite.js';
 import '../select-field/component.js';
 import '@alfalab/hooks';

package/international-phone-input/esm/components/country-select/Component.js

@@ -1,27 +1,33 @@
 import { __rest, __assign } from 'tslib';
 import React, { useMemo, useCallback } from 'react';
+import cn from 'classnames';
 import { VirtualOptionsList, BaseOption } from '../../../../select/esm/shared';
 import { getDataTestId } from '../../../../shared/esm';
 import { WorldMagnifierMIcon } from '@alfalab/icons-glyph/WorldMagnifierMIcon';
+import { SIZE_TO_CLASSNAME_MAP } from '../../consts.js';
 import { FlagIcon } from '../flag-icon/component.js';
 import { EMPTY_COUNTRY_SELECT_FIELD, SelectField } from '../select-field/component.js';
-import 'classnames';
 import '../flag-icon/flagSprite.js';
 import 'react-merge-refs';
 import '@alfalab/hooks';
 
-var styles = {"component":"international-phone-input__component_1grcj","option":"international-phone-input__option_1grcj","flag":"international-phone-input__flag_1grcj","countryName":"international-phone-input__countryName_1grcj","dialCode":"international-phone-input__dialCode_1grcj","flagIconWrapper":"international-phone-input__flagIconWrapper_1grcj","emptyCountryIcon":"international-phone-input__emptyCountryIcon_1grcj"};
+var styles = {"component":"international-phone-input__component_1grcj","option":"international-phone-input__option_1grcj","mobile":"international-phone-input__mobile_1grcj","size-72":"international-phone-input__size-72_1grcj","flag":"international-phone-input__flag_1grcj","countryName":"international-phone-input__countryName_1grcj","dialCode":"international-phone-input__dialCode_1grcj","flagIconWrapper":"international-phone-input__flagIconWrapper_1grcj","emptyCountryIcon":"international-phone-input__emptyCountryIcon_1grcj"};
 require('./index.css');
 
 var CountrySelect = function (_a) {
-    var hideCountrySelect = _a.hideCountrySelect, countries = _a.countries, country = _a.country, dataTestId = _a.dataTestId, fieldWidth = _a.fieldWidth, onChange = _a.onChange, _b = _a.view, view = _b === void 0 ? 'desktop' : _b, SelectComponent = _a.SelectComponent, restProps = __rest(_a, ["hideCountrySelect", "countries", "country", "dataTestId", "fieldWidth", "onChange", "view", "SelectComponent"]);
+    var hideCountrySelect = _a.hideCountrySelect, countries = _a.countries, country = _a.country, dataTestId = _a.dataTestId, fieldWidth = _a.fieldWidth, onChange = _a.onChange, _b = _a.view, view = _b === void 0 ? 'desktop' : _b, SelectComponent = _a.SelectComponent, size = _a.size, restProps = __rest(_a, ["hideCountrySelect", "countries", "country", "dataTestId", "fieldWidth", "onChange", "view", "SelectComponent", "size"]);
+    var isMobile = useMemo(function () { return view === 'mobile'; }, [view]);
     var options = useMemo(function () {
         return (countries === null || countries === void 0 ? void 0 : countries.map(function (areas) {
             var _a = areas[0], iso2 = _a.iso2, dialCode = _a.dialCode, name = _a.name;
             return {
                 key: iso2,
                 value: areas[0],
-                content: (React.createElement("span", { className: styles.option },
+                content: (React.createElement("span", { className: cn([
+                        styles.option,
+                        size && styles[SIZE_TO_CLASSNAME_MAP[size]],
+                        isMobile && styles.mobile,
+                    ]) },
                     React.createElement(FlagIcon, { country: iso2, className: styles.flag }),
                     React.createElement("span", { className: styles.optionTextWrap },
                         React.createElement("span", { className: styles.countryName }, name),
@@ -30,7 +36,7 @@ var CountrySelect = function (_a) {
                             dialCode)))),
             };
         })) || [];
-    }, [countries]);
+    }, [countries, size, isMobile]);
     var renderOptionsList = useCallback(function (props) { return (React.createElement("div", { style: { width: fieldWidth || 0 } },
         React.createElement(VirtualOptionsList, __assign({}, props, { optionsListWidth: 'field' })))); }, [fieldWidth]);
     var renderFlagIcon = function () { return (React.createElement("span", { className: styles.flagIconWrapper }, (country === null || country === void 0 ? void 0 : country.iso2) ? (React.createElement(FlagIcon, { country: country.iso2 })) : (React.createElement(WorldMagnifierMIcon, { className: styles.emptyCountryIcon })))); };
@@ -40,7 +46,7 @@ var CountrySelect = function (_a) {
         return (
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
         React.createElement("div", { className: styles.component, onClick: function (event) { return event.stopPropagation(); } },
-            React.createElement(SelectComponent, __assign({ Option: BaseOption }, restProps, { dataTestId: getDataTestId(dataTestId, 'country-select'), options: options, selected: selected || EMPTY_COUNTRY_SELECT_FIELD, onChange: onChange, Field: SelectField, OptionsList: view === 'mobile' ? VirtualOptionsList : renderOptionsList }, (view === 'mobile' && {
+            React.createElement(SelectComponent, __assign({ Option: BaseOption, size: size }, restProps, { dataTestId: getDataTestId(dataTestId, 'country-select'), options: options, selected: selected || EMPTY_COUNTRY_SELECT_FIELD, onChange: onChange, Field: SelectField, OptionsList: isMobile ? VirtualOptionsList : renderOptionsList }, (isMobile && {
                 bottomSheetProps: {
                     title: 'Выберите страну',
                 },