@alfalab/core-components 48.21.0-beta.6 → 48.21.0-beta.7

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

@@ -13,9 +13,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/desktop/index.js

@@ -14,9 +14,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/index.js

@@ -16,9 +16,9 @@ import '../../shared/esm';
 import './utils/index.js';
 import './consts.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/mobile/Component.mobile.js

@@ -13,9 +13,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/mobile/index.js

@@ -14,9 +14,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/typings-d515b24c.d.ts

@@ -5,8 +5,8 @@ import { HTMLAttributes, ReactElement, ReactNode, RefObject, ButtonHTMLAttribute
 import { HandledEvents } from "react-swipeable/es/types";
 import { TransitionProps } from "react-transition-group/Transition";
 import { BaseModalProps, BaseModalContext } from "./index-11f20b2e";
-import { IconButtonProps, BaseFormControlProps, BackdropProps } from "./index-ebda875c";
 import { BackgroundColorType } from "./index-464d40a4";
+import { BaseFormControlProps, BackdropProps } from "./index-ebda875c";
 import { ContentProps } from "./typings-4b7234ef";
 import { ModalResponsiveProps as ModalProps } from "./typings-4b7234ef";
 import { CSSTransitionProps } from "react-transition-group/CSSTransition";
@@ -60,10 +60,6 @@ interface CloserProps extends ButtonHTMLAttributes<HTMLButtonElement> {
      * Иконка
      */
     icon?: ElementType;
-    /**
-     * Набор цветов для компонента
-     */
-    colors?: IconButtonProps["colors"];
     /**
      * Идентификатор для систем автоматизированного тестирования
      */

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

@@ -15,9 +15,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/modern/components/base-international-phone-input/Component.js

@@ -8,9 +8,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';
@@ -105,7 +105,7 @@ const BaseInternationalPhoneInput = forwardRef(({ clearableCountryCode: clearabl
     };
     const showPhoneSelect = Boolean(open || openProps);
     const showCountrySelect = Boolean(openCountry || countrySelectProps?.open);
-    const renderCountrySelect = (compact = false) => (React.createElement(CountrySelect, { dataTestId: restProps?.dataTestId, ...countrySelectProps, view: view, SelectComponent: SelectComponent, disabled: disabled || countrySelectProps?.disabled, onChange: handleSelectCountry, country: country, countries: compact ? [] : countriesData, fieldWidth: inputWrapperRef.current?.getBoundingClientRect().width, onOpen: handleCountrySelectOpen, open: showCountrySelect }));
+    const renderCountrySelect = (compact = false) => (React.createElement(CountrySelect, { dataTestId: restProps?.dataTestId, ...countrySelectProps, view: view, SelectComponent: SelectComponent, disabled: disabled || countrySelectProps?.disabled, onChange: handleSelectCountry, country: country, countries: compact ? [] : countriesData, fieldWidth: inputWrapperRef.current?.getBoundingClientRect().width, onOpen: handleCountrySelectOpen, open: showCountrySelect, size: size }));
     const inputProps = {
         className: styles.component,
         ref: mergeRefs([maskRef, ref, inputRef]),

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

@@ -9,9 +9,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/modern/components/country-select/Component.js

@@ -1,24 +1,28 @@
 import React, { useMemo, useCallback } from 'react';
+import cn from 'classnames';
 import { VirtualOptionsList, BaseOption } from '../../../../select/modern/shared';
 import { getDataTestId } from '../../../../shared/modern';
 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';
 
-const styles = {"component":"international-phone-input__component_rcew7","option":"international-phone-input__option_rcew7","flag":"international-phone-input__flag_rcew7","countryName":"international-phone-input__countryName_rcew7","dialCode":"international-phone-input__dialCode_rcew7","flagIconWrapper":"international-phone-input__flagIconWrapper_rcew7","emptyCountryIcon":"international-phone-input__emptyCountryIcon_rcew7"};
+const styles = {"component":"international-phone-input__component_rcew7","option":"international-phone-input__option_rcew7","size-72":"international-phone-input__size-72_rcew7","flag":"international-phone-input__flag_rcew7","countryName":"international-phone-input__countryName_rcew7","dialCode":"international-phone-input__dialCode_rcew7","flagIconWrapper":"international-phone-input__flagIconWrapper_rcew7","emptyCountryIcon":"international-phone-input__emptyCountryIcon_rcew7"};
 require('./index.css');
 
-const CountrySelect = ({ hideCountrySelect, countries, country, dataTestId, fieldWidth, onChange, view = 'desktop', SelectComponent, ...restProps }) => {
+const CountrySelect = ({ hideCountrySelect, countries, country, dataTestId, fieldWidth, onChange, view = 'desktop', SelectComponent, size, ...restProps }) => {
     const options = useMemo(() => countries?.map((areas) => {
         const { iso2, dialCode, name } = areas[0];
         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]],
+                ]) },
                 React.createElement(FlagIcon, { country: iso2, className: styles.flag }),
                 React.createElement("span", { className: styles.optionTextWrap },
                     React.createElement("span", { className: styles.countryName }, name),
@@ -26,7 +30,7 @@ const CountrySelect = ({ hideCountrySelect, countries, country, dataTestId, fiel
                         "+",
                         dialCode)))),
         };
-    }) || [], [countries]);
+    }) || [], [countries, size]);
     const renderOptionsList = useCallback((props) => (React.createElement("div", { style: { width: fieldWidth || 0 } },
         React.createElement(VirtualOptionsList, { ...props, optionsListWidth: 'field' }))), [fieldWidth]);
     const renderFlagIcon = () => (React.createElement("span", { className: styles.flagIconWrapper }, country?.iso2 ? (React.createElement(FlagIcon, { country: country.iso2 })) : (React.createElement(WorldMagnifierMIcon, { className: styles.emptyCountryIcon }))));
@@ -35,7 +39,7 @@ const CountrySelect = ({ hideCountrySelect, countries, country, dataTestId, fiel
         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: (event) => event.stopPropagation() },
-            React.createElement(SelectComponent, { 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, { Option: BaseOption, size: size, ...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' && {
                     bottomSheetProps: {
                         title: 'Выберите страну',
                     },

package/international-phone-input/modern/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_rcew7 {
@@ -35,8 +37,10 @@
 } .international-phone-input__option_rcew7 {
     display: flex;
     align-items: flex-start;
-    padding: var(--gap-12);
-} .international-phone-input__flag_rcew7 {
+    padding: var(--gap-12)
+} .international-phone-input__option_rcew7.international-phone-input__size-72_rcew7 {
+        padding-left: var(--gap-16);
+    } .international-phone-input__flag_rcew7 {
     flex-shrink: 0;
     margin-right: var(--gap-8);
 } .international-phone-input__countryName_rcew7 {

package/international-phone-input/modern/components/country-select/index.js

@@ -1,10 +1,11 @@
 export { CountrySelect } from './Component.js';
 import 'react';
+import 'classnames';
 import '../../../../select/modern/shared';
 import '../../../../shared/modern';
 import '@alfalab/icons-glyph/WorldMagnifierMIcon';
+import '../../consts.js';
 import '../flag-icon/component.js';
-import 'classnames';
 import '../flag-icon/flagSprite.js';
 import '../select-field/component.js';
 import 'react-merge-refs';

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

@@ -3,6 +3,7 @@ import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 import { useFocus } from '@alfalab/hooks';
 import { WorldMagnifierMIcon } from '@alfalab/icons-glyph/WorldMagnifierMIcon';
+import { SIZE_TO_CLASSNAME_MAP } from '../../consts.js';
 import { FlagIcon } from '../flag-icon/component.js';
 import '../flag-icon/flagSprite.js';
 
@@ -13,16 +14,6 @@ const EMPTY_COUNTRY_SELECT_FIELD = {
     value: 'EMPTY_COUNTRY_SELECT_VALUE',
     key: 'EMPTY_COUNTRY_SELECT_KEY',
 };
-const 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',
-};
 const SelectField = ({ selected, Arrow, size, disabled, innerProps = {}, }) => {
     const wrapperRef = useRef(null);
     const [focusVisible] = useFocus(wrapperRef, 'keyboard');

package/international-phone-input/modern/components/select-field/index.js

@@ -4,5 +4,6 @@ import 'react-merge-refs';
 import 'classnames';
 import '@alfalab/hooks';
 import '@alfalab/icons-glyph/WorldMagnifierMIcon';
+import '../../consts.js';
 import '../flag-icon/component.js';
 import '../flag-icon/flagSprite.js';

package/international-phone-input/modern/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/modern/consts.js

@@ -1,3 +1,14 @@
 const DEFAULT_PHONE_FORMAT = '... ... ... ... ...';
+const 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',
+};
 
-export { DEFAULT_PHONE_FORMAT };
+export { DEFAULT_PHONE_FORMAT, SIZE_TO_CLASSNAME_MAP };

package/international-phone-input/modern/desktop/Component.desktop.js

@@ -12,9 +12,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/modern/desktop/index.js

@@ -13,9 +13,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/modern/index.js

@@ -15,9 +15,9 @@ import '../../shared/modern';
 import './utils/index.js';
 import './consts.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/modern/mobile/Component.mobile.js

@@ -12,9 +12,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/modern/mobile/index.js

@@ -13,9 +13,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/modern/typings-d515b24c.d.ts

@@ -5,8 +5,8 @@ import { HTMLAttributes, ReactElement, ReactNode, RefObject, ButtonHTMLAttribute
 import { HandledEvents } from "react-swipeable/es/types";
 import { TransitionProps } from "react-transition-group/Transition";
 import { BaseModalProps, BaseModalContext } from "./index-11f20b2e";
-import { IconButtonProps, BaseFormControlProps, BackdropProps } from "./index-ebda875c";
 import { BackgroundColorType } from "./index-464d40a4";
+import { BaseFormControlProps, BackdropProps } from "./index-ebda875c";
 import { ContentProps } from "./typings-4b7234ef";
 import { ModalResponsiveProps as ModalProps } from "./typings-4b7234ef";
 import { CSSTransitionProps } from "react-transition-group/CSSTransition";
@@ -60,10 +60,6 @@ interface CloserProps extends ButtonHTMLAttributes<HTMLButtonElement> {
      * Иконка
      */
     icon?: ElementType;
-    /**
-     * Набор цветов для компонента
-     */
-    colors?: IconButtonProps["colors"];
     /**
      * Идентификатор для систем автоматизированного тестирования
      */

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

@@ -15,9 +15,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/flag-icon/index.module.css';
 import './components/select-field/component.js';

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

@@ -9,9 +9,9 @@ import { CountrySelect } from '../country-select/Component.js';
 import styles from './index.module.css';
 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 '../flag-icon/index.module.css';
 import '../select-field/component.js';
@@ -106,7 +106,7 @@ const BaseInternationalPhoneInput = forwardRef(({ clearableCountryCode: clearabl
     };
     const showPhoneSelect = Boolean(open || openProps);
     const showCountrySelect = Boolean(openCountry || countrySelectProps?.open);
-    const renderCountrySelect = (compact = false) => (React.createElement(CountrySelect, { dataTestId: restProps?.dataTestId, ...countrySelectProps, view: view, SelectComponent: SelectComponent, disabled: disabled || countrySelectProps?.disabled, onChange: handleSelectCountry, country: country, countries: compact ? [] : countriesData, fieldWidth: inputWrapperRef.current?.getBoundingClientRect().width, onOpen: handleCountrySelectOpen, open: showCountrySelect }));
+    const renderCountrySelect = (compact = false) => (React.createElement(CountrySelect, { dataTestId: restProps?.dataTestId, ...countrySelectProps, view: view, SelectComponent: SelectComponent, disabled: disabled || countrySelectProps?.disabled, onChange: handleSelectCountry, country: country, countries: compact ? [] : countriesData, fieldWidth: inputWrapperRef.current?.getBoundingClientRect().width, onOpen: handleCountrySelectOpen, open: showCountrySelect, size: size }));
     const inputProps = {
         className: styles.component,
         ref: mergeRefs([maskRef, ref, inputRef]),

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

@@ -9,9 +9,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 '../flag-icon/index.module.css';
 import '../select-field/component.js';

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

@@ -1,24 +1,28 @@
 import React, { useMemo, useCallback } from 'react';
+import cn from 'classnames';
 import { VirtualOptionsList, BaseOption } from '../../../../select/moderncssm/shared';
 import { getDataTestId } from '../../../../shared/moderncssm';
 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 styles from './index.module.css';
-import 'classnames';
 import '../flag-icon/flagSprite.js';
 import '../flag-icon/index.module.css';
 import 'react-merge-refs';
 import '@alfalab/hooks';
 import '../select-field/index.module.css';
 
-const CountrySelect = ({ hideCountrySelect, countries, country, dataTestId, fieldWidth, onChange, view = 'desktop', SelectComponent, ...restProps }) => {
+const CountrySelect = ({ hideCountrySelect, countries, country, dataTestId, fieldWidth, onChange, view = 'desktop', SelectComponent, size, ...restProps }) => {
     const options = useMemo(() => countries?.map((areas) => {
         const { iso2, dialCode, name } = areas[0];
         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]],
+                ]) },
                 React.createElement(FlagIcon, { country: iso2, className: styles.flag }),
                 React.createElement("span", { className: styles.optionTextWrap },
                     React.createElement("span", { className: styles.countryName }, name),
@@ -26,7 +30,7 @@ const CountrySelect = ({ hideCountrySelect, countries, country, dataTestId, fiel
                         "+",
                         dialCode)))),
         };
-    }) || [], [countries]);
+    }) || [], [countries, size]);
     const renderOptionsList = useCallback((props) => (React.createElement("div", { style: { width: fieldWidth || 0 } },
         React.createElement(VirtualOptionsList, { ...props, optionsListWidth: 'field' }))), [fieldWidth]);
     const renderFlagIcon = () => (React.createElement("span", { className: styles.flagIconWrapper }, country?.iso2 ? (React.createElement(FlagIcon, { country: country.iso2 })) : (React.createElement(WorldMagnifierMIcon, { className: styles.emptyCountryIcon }))));
@@ -35,7 +39,7 @@ const CountrySelect = ({ hideCountrySelect, countries, country, dataTestId, fiel
         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: (event) => event.stopPropagation() },
-            React.createElement(SelectComponent, { 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, { Option: BaseOption, size: size, ...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' && {
                     bottomSheetProps: {
                         title: 'Выберите страну',
                     },

package/international-phone-input/moderncssm/components/country-select/index.js

@@ -1,10 +1,11 @@
 export { CountrySelect } from './Component.js';
 import 'react';
+import 'classnames';
 import '../../../../select/moderncssm/shared';
 import '../../../../shared/moderncssm';
 import '@alfalab/icons-glyph/WorldMagnifierMIcon';
+import '../../consts.js';
 import '../flag-icon/component.js';
-import 'classnames';
 import '../flag-icon/flagSprite.js';
 import '../flag-icon/index.module.css';
 import '../select-field/component.js';

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

@@ -11,9 +11,13 @@
 .option {
     display: flex;
     align-items: flex-start;
-    padding: var(--gap-12);
+    padding: var(--gap-12)
 }
 
+.option.size-72 {
+        padding-left: var(--gap-16);
+    }
+
 .flag {
     flex-shrink: 0;
     margin-right: var(--gap-8);

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

@@ -3,6 +3,7 @@ import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 import { useFocus } from '@alfalab/hooks';
 import { WorldMagnifierMIcon } from '@alfalab/icons-glyph/WorldMagnifierMIcon';
+import { SIZE_TO_CLASSNAME_MAP } from '../../consts.js';
 import { FlagIcon } from '../flag-icon/component.js';
 import styles from './index.module.css';
 import '../flag-icon/flagSprite.js';
@@ -12,16 +13,6 @@ const EMPTY_COUNTRY_SELECT_FIELD = {
     value: 'EMPTY_COUNTRY_SELECT_VALUE',
     key: 'EMPTY_COUNTRY_SELECT_KEY',
 };
-const 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',
-};
 const SelectField = ({ selected, Arrow, size, disabled, innerProps = {}, }) => {
     const wrapperRef = useRef(null);
     const [focusVisible] = useFocus(wrapperRef, 'keyboard');

package/international-phone-input/moderncssm/components/select-field/index.js

@@ -4,6 +4,7 @@ import 'react-merge-refs';
 import 'classnames';
 import '@alfalab/hooks';
 import '@alfalab/icons-glyph/WorldMagnifierMIcon';
+import '../../consts.js';
 import '../flag-icon/component.js';
 import '../flag-icon/flagSprite.js';
 import '../flag-icon/index.module.css';

package/international-phone-input/moderncssm/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/moderncssm/consts.js

@@ -1,3 +1,14 @@
 const DEFAULT_PHONE_FORMAT = '... ... ... ... ...';
+const 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',
+};
 
-export { DEFAULT_PHONE_FORMAT };
+export { DEFAULT_PHONE_FORMAT, SIZE_TO_CLASSNAME_MAP };

package/international-phone-input/moderncssm/desktop/Component.desktop.js

@@ -12,9 +12,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/flag-icon/index.module.css';
 import '../components/select-field/component.js';

package/international-phone-input/moderncssm/desktop/index.js

@@ -13,9 +13,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/flag-icon/index.module.css';
 import '../components/select-field/component.js';

package/international-phone-input/moderncssm/index.js

@@ -15,9 +15,9 @@ import '../../shared/moderncssm';
 import './utils/index.js';
 import './consts.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/flag-icon/index.module.css';
 import './components/select-field/component.js';

package/international-phone-input/moderncssm/mobile/Component.mobile.js

@@ -12,9 +12,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/flag-icon/index.module.css';
 import '../components/select-field/component.js';