@alfalab/core-components-international-phone-input 2.7.0 → 2.7.2

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

@@ -1,15 +1,17 @@
-import React, { forwardRef, useMemo, useRef, useState, useEffect } from 'react';
+import React, { forwardRef, useRef, useMemo, useState, useEffect } from 'react';
 import mergeRefs from 'react-merge-refs';
 import { maskitoTransform } from '@maskito/core';
 import { useMaskito } from '@maskito/react';
 import { BaseOption } from '@alfalab/core-components-select/modern/shared';
+import { isNullable } from '@alfalab/core-components-shared/modern';
 import { initCountries, findCountry, filterPhones, createMaskOptions, getClear, getPhoneData, getInitialValueFromCountry } from '../../utils/index.js';
 import { CountrySelect } from '../country-select/Component.js';
 
-const styles = {"component":"international-phone-input__component_1lzcp","addons":"international-phone-input__addons_1lzcp"};
+const styles = {"component":"international-phone-input__component_1ym8l","addons":"international-phone-input__addons_1ym8l"};
 require('./index.css')
 
 const BaseInternationalPhoneInput = forwardRef(({ clearableCountryCode: clearableCountryCodeFromProps = true, value, country: countryProp, filterFn, onChange, onCountryChange, countrySelectProps, countries, defaultIso2, disabled, options, size = 56, Input, InputAutocomplete, SelectComponent, view, clear: clearProp, open: openProps, defaultOpen, customCountriesList, ...restProps }, ref) => {
+    const lastCountryRef = useRef(null);
     const countriesData = useMemo(() => initCountries(countries, customCountriesList), [countries, customCountriesList]);
     const inputRef = useRef(null);
     const inputWrapperRef = useRef(null);
@@ -25,7 +27,7 @@ const BaseInternationalPhoneInput = forwardRef(({ clearableCountryCode: clearabl
     };
     const preserveCountryCode = clearableCountryCodeFromProps === 'preserve';
     const clearableCountryCode = preserveCountryCode || clearableCountryCodeFromProps;
-    const maskOptions = useMemo(() => createMaskOptions(country, clearableCountryCode, preserveCountryCode), [country, clearableCountryCode, preserveCountryCode]);
+    const maskOptions = useMemo(() => createMaskOptions(country, clearableCountryCode, preserveCountryCode, lastCountryRef), [country, clearableCountryCode, preserveCountryCode]);
     const maskRef = useMaskito({ options: maskOptions });
     const changeNumber = (phone) => {
         onChange?.(phone);
@@ -105,6 +107,12 @@ const BaseInternationalPhoneInput = forwardRef(({ clearableCountryCode: clearabl
         clear: getClear(clearProp, clearableCountryCode, value, country?.countryCode),
         ...restProps.inputProps,
     };
+    useEffect(() => {
+        if (!preserveCountryCode || isNullable(country)) {
+            return;
+        }
+        lastCountryRef.current = country;
+    }, [country, preserveCountryCode]);
     return Array.isArray(options) ? (React.createElement(InputAutocomplete, { closeOnSelect: true, Option: BaseOption, size: size, ...restProps, disabled: disabled, options: filteredOptions, value: value, open: showPhoneSelect, onOpen: handlePhoneSelectOpen, onChange: handleOptionSelect, onInput: (phone) => updatePhoneData(phone), inputProps: {
             ...inputProps,
             onClear: handleClear,

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

@@ -1,4 +1,4 @@
-/* hash: e77ll */
+/* hash: 1d659 */
 :root { /* 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 */ /* 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 */ :root { /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */
 } :root { /* 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 */ /* 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 */ /* 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 */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -16,9 +16,12 @@
 } :root { /* 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 */
 
     /* новые значения, используйте их */
-    --gap-0: 0;
+
+    /* no-unit может приводить к проблемам в calc (#1559) */
+    /* stylelint-disable-next-line length-zero-no-unit */
+    --gap-0: 0px;
 } :root {
 } :root {
-} /* сбрасывает синюю подсветку при нажатии */ .international-phone-input__component_1lzcp .international-phone-input__addons_1lzcp {
+} /* сбрасывает синюю подсветку при нажатии */ .international-phone-input__component_1ym8l .international-phone-input__addons_1ym8l {
         padding-left: var(--gap-0);
     }

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

@@ -5,7 +5,7 @@ import { WorldMagnifierMIcon } from '@alfalab/icons-glyph/WorldMagnifierMIcon';
 import { FlagIcon } from '../flag-icon/component.js';
 import { EMPTY_COUNTRY_SELECT_FIELD, SelectField } from '../select-field/component.js';
 
-const styles = {"component":"international-phone-input__component_9b812","option":"international-phone-input__option_9b812","flag":"international-phone-input__flag_9b812","countryName":"international-phone-input__countryName_9b812","dialCode":"international-phone-input__dialCode_9b812","flagIconWrapper":"international-phone-input__flagIconWrapper_9b812","emptyCountryIcon":"international-phone-input__emptyCountryIcon_9b812"};
+const styles = {"component":"international-phone-input__component_4sw1e","option":"international-phone-input__option_4sw1e","flag":"international-phone-input__flag_4sw1e","countryName":"international-phone-input__countryName_4sw1e","dialCode":"international-phone-input__dialCode_4sw1e","flagIconWrapper":"international-phone-input__flagIconWrapper_4sw1e","emptyCountryIcon":"international-phone-input__emptyCountryIcon_4sw1e"};
 require('./index.css')
 
 const CountrySelect = ({ hideCountrySelect, countries, country, dataTestId, fieldWidth, onChange, view = 'desktop', SelectComponent, ...restProps }) => {

package/modern/components/country-select/index.css

@@ -1,4 +1,4 @@
-/* hash: 1ugmp */
+/* hash: no31x */
 :root { /* 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 */ /* 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 */ :root {
     --color-light-neutral-translucent-700: rgba(4, 4, 21, 0.47);
@@ -20,33 +20,36 @@
     --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 */
 
     /* новые значения, используйте их */
+
+    /* no-unit может приводить к проблемам в calc (#1559) */
+    /* stylelint-disable-next-line length-zero-no-unit */
     --gap-8: var(--gap-xs);
     --gap-12: var(--gap-s);
 } :root {
 } :root {
-} /* сбрасывает синюю подсветку при нажатии */ .international-phone-input__component_9b812 {
+} /* сбрасывает синюю подсветку при нажатии */ .international-phone-input__component_4sw1e {
     position: static;
     display: flex;
     min-width: initial;
     height: 100%;
-} .international-phone-input__option_9b812 {
+} .international-phone-input__option_4sw1e {
     display: flex;
     align-items: flex-start;
     padding: var(--gap-12);
-} .international-phone-input__flag_9b812 {
+} .international-phone-input__flag_4sw1e {
     flex-shrink: 0;
     margin-right: var(--gap-8);
-} .international-phone-input__countryName_9b812 {
+} .international-phone-input__countryName_4sw1e {
     margin-right: var(--gap-8);
-} .international-phone-input__dialCode_9b812 {
+} .international-phone-input__dialCode_4sw1e {
     color: var(--color-light-text-secondary);
-} .international-phone-input__flagIconWrapper_9b812 {
+} .international-phone-input__flagIconWrapper_4sw1e {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 24px;
     height: 24px;
     margin-left: var(--gap-12);
-} .international-phone-input__emptyCountryIcon_9b812 {
+} .international-phone-input__emptyCountryIcon_4sw1e {
     color: var(--color-light-neutral-translucent-700);
 }

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

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import { flagSprite } from './flagSprite.js';
 
-const styles = {"flagIcon":"international-phone-input__flagIcon_3wu9f","flagPlaceholder":"international-phone-input__flagPlaceholder_3wu9f"};
+const styles = {"flagIcon":"international-phone-input__flagIcon_8f693","flagPlaceholder":"international-phone-input__flagPlaceholder_8f693"};
 require('./index.css')
 
 /**

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

@@ -1,4 +1,4 @@
-/* hash: 175f8 */
+/* hash: ewuu4 */
 :root { /* 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 */ /* 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 */ :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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */
@@ -20,13 +20,16 @@
     --gap-3xs: 2px; /* 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 */
 
     /* новые значения, используйте их */
+
+    /* no-unit может приводить к проблемам в calc (#1559) */
+    /* stylelint-disable-next-line length-zero-no-unit */
     --gap-2: var(--gap-3xs);
 } :root {
 } :root {
-} /* сбрасывает синюю подсветку при нажатии */ .international-phone-input__flagIcon_3wu9f {
+} /* сбрасывает синюю подсветку при нажатии */ .international-phone-input__flagIcon_8f693 {
     max-width: 24px;
     max-height: 24px;
-} .international-phone-input__flagPlaceholder_3wu9f {
+} .international-phone-input__flagPlaceholder_8f693 {
     width: 24px;
     height: 16px;
     max-height: 16px;

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

@@ -5,7 +5,7 @@ import { useFocus } from '@alfalab/hooks';
 import { WorldMagnifierMIcon } from '@alfalab/icons-glyph/WorldMagnifierMIcon';
 import { FlagIcon } from '../flag-icon/component.js';
 
-const styles = {"component":"international-phone-input__component_itnzc","flagIconContainer":"international-phone-input__flagIconContainer_itnzc","emptyCountryIcon":"international-phone-input__emptyCountryIcon_itnzc","disabled":"international-phone-input__disabled_itnzc","inner":"international-phone-input__inner_itnzc","size-64":"international-phone-input__size-64_itnzc","size-72":"international-phone-input__size-72_itnzc","focusVisible":"international-phone-input__focusVisible_itnzc"};
+const styles = {"component":"international-phone-input__component_66s35","flagIconContainer":"international-phone-input__flagIconContainer_66s35","emptyCountryIcon":"international-phone-input__emptyCountryIcon_66s35","disabled":"international-phone-input__disabled_66s35","inner":"international-phone-input__inner_66s35","size-64":"international-phone-input__size-64_66s35","size-72":"international-phone-input__size-72_66s35","focusVisible":"international-phone-input__focusVisible_66s35"};
 require('./index.css')
 
 const EMPTY_COUNTRY_SELECT_FIELD = {

package/modern/components/select-field/index.css

@@ -1,4 +1,4 @@
-/* hash: 1fb4c */
+/* hash: gc6oa */
 :root { /* 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 */ /* 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 */ :root {
     --color-light-neutral-translucent-700: rgba(4, 4, 21, 0.47);
@@ -21,6 +21,9 @@
     --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 */
 
     /* новые значения, используйте их */
+
+    /* no-unit может приводить к проблемам в calc (#1559) */
+    /* stylelint-disable-next-line length-zero-no-unit */
     --gap-4: var(--gap-2xs);
     --gap-12: var(--gap-s);
     --gap-16: var(--gap-m);
@@ -28,33 +31,33 @@
 } :root {
     --focus-color: var(--color-light-status-info);
     --disabled-cursor: not-allowed;
-} /* сбрасывает синюю подсветку при нажатии */ .international-phone-input__component_itnzc {
+} /* сбрасывает синюю подсветку при нажатии */ .international-phone-input__component_66s35 {
     height: 100%;
     cursor: pointer;
     outline: none;
     position: relative;
-} .international-phone-input__flagIconContainer_itnzc {
+} .international-phone-input__flagIconContainer_66s35 {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 24px;
     height: 24px;
     margin-right: var(--gap-4);
-} .international-phone-input__emptyCountryIcon_itnzc {
+} .international-phone-input__emptyCountryIcon_66s35 {
     color: var(--color-light-neutral-translucent-700);
-} .international-phone-input__disabled_itnzc {
+} .international-phone-input__disabled_66s35 {
     cursor: var(--disabled-cursor);
-} .international-phone-input__inner_itnzc {
+} .international-phone-input__inner_66s35 {
     position: relative;
     display: flex;
     align-items: center;
     height: 100%;
     padding-left: var(--gap-12);
     outline: none;
-} .international-phone-input__size-64_itnzc .international-phone-input__inner_itnzc,
-.international-phone-input__size-72_itnzc .international-phone-input__inner_itnzc {
+} .international-phone-input__size-64_66s35 .international-phone-input__inner_66s35,
+.international-phone-input__size-72_66s35 .international-phone-input__inner_66s35 {
     padding-left: var(--gap-16);
-} .international-phone-input__focusVisible_itnzc {
+} .international-phone-input__focusVisible_66s35 {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/modern/index-464d40a4.d.ts

@@ -0,0 +1,23 @@
+type BackgroundColorType = 'accent' | 'info' | 'attention-muted' | 'positive-muted' | 'negative-muted' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'quaternary' | 'quaternary-inverted' | 'specialbg-component' | 'specialbg-component-inverted' | 'specialbg-primary-grouped' | 'specialbg-secondary-grouped' | 'specialbg-tertiary-grouped' | 'specialbg-secondary-transparent' | 'specialbg-secondary-transparent-inverted' | 'specialbg-tertiary-transparent' | 'specialbg-tertiary-transparent-inverted';
+type BorderColorType = 'accent' | 'key' | 'key-inverted' | 'link' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'underline' | 'underline-inverted' | 'graphic-attention' | 'graphic-link' | 'graphic-negative' | 'graphic-positive' | 'specialbg-secondary-transparent' | 'specialbg-secondary-transparent-inverted' | 'specialbg-tertiary-transparent' | 'specialbg-tertiary-transparent-inverted';
+type GraphicColorType = 'accent' | 'link' | 'attention' | 'positive' | 'negative' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'quaternary' | 'quaternary-inverted' | 'static-light' | 'static-accent' | 'static-dark';
+type ShadowType = 'shadow-xs' | 'shadow-s' | 'shadow-m' | 'shadow-l' | 'shadow-xl' | 'shadow-xs-hard' | 'shadow-s-hard' | 'shadow-m-hard' | 'shadow-l-hard' | 'shadow-xl-hard' | 'shadow-xs-up' | 'shadow-s-up' | 'shadow-m-up' | 'shadow-l-up' | 'shadow-xl-up' | 'shadow-xs-hard-up' | 'shadow-s-hard-up' | 'shadow-m-hard-up' | 'shadow-l-hard-up' | 'shadow-xl-hard-up';
+type GapType = '3xs' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl';
+type PaddingType = number | string | {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+};
+type TypographyType = 'accent-caps' | 'accent-component-primary' | 'accent-component-secondary' | 'accent-primary-large' | 'accent-primary-medium' | 'accent-primary-small' | 'accent-secondary-large' | 'accent-secondary-medium' | 'accent-secondary-small' | 'action-caps' | 'action-component-primary' | 'action-component-secondary' | 'action-primary-large' | 'action-primary-medium' | 'action-primary-small' | 'action-secondary-large' | 'action-secondary-medium' | 'action-secondary-small' | 'headline-mobile-large' | 'headline-mobile-medium' | 'headline-mobile-small' | 'headline-mobile-xlarge' | 'headline-mobile-xsmall' | 'headline-system-mobile-large' | 'headline-system-mobile-medium' | 'headline-system-mobile-small' | 'headline-system-mobile-xlarge' | 'headline-system-mobile-xsmall' | 'headline-system-large' | 'headline-system-medium' | 'headline-system-small' | 'headline-system-xlarge' | 'headline-system-xsmall' | 'headline-large' | 'headline-medium' | 'headline-small' | 'headline-xlarge' | 'headline-xsmall' | 'key-large' | 'key-medium' | 'key-small' | 'key-xlarge' | 'key-xsmall' | 'paragraph-caps' | 'paragraph-component-primary' | 'paragraph-component-secondary' | 'paragraph-primary-large' | 'paragraph-primary-medium' | 'paragraph-primary-small' | 'paragraph-secondary-large' | 'paragraph-secondary-medium' | 'paragraph-secondary-small' | 'promo-mobile-large' | 'promo-mobile-medium' | 'promo-mobile-small' | 'promo-mobile-xlarge' | 'promo-mobile-xsmall' | 'promo-system-mobile-large' | 'promo-system-mobile-medium' | 'promo-system-mobile-small' | 'promo-system-mobile-xlarge' | 'promo-system-mobile-xsmall' | 'promo-system-large' | 'promo-system-medium' | 'promo-system-small' | 'promo-system-xlarge' | 'promo-system-xsmall' | 'promo-large' | 'promo-medium' | 'promo-small' | 'promo-xlarge' | 'promo-xsmall' | 'accent-component' | 'action-component' | 'paragraph-component';
+type Country = {
+    name: string;
+    regions?: string[];
+    iso2: string;
+    countryCode: string;
+    dialCode: string;
+    format?: string;
+    priority: number;
+    mainCode?: boolean;
+};
+export { BackgroundColorType, BorderColorType, GraphicColorType, ShadowType, GapType, PaddingType, TypographyType, Country };

package/modern/types.d.ts

@@ -6,18 +6,9 @@ import { InputAutocompleteProps } from "@alfalab/core-components-input-autocompl
 import { InputAutocompleteDesktopProps } from "@alfalab/core-components-input-autocomplete/desktop";
 import { InputAutocompleteMobileProps } from "@alfalab/core-components-input-autocomplete/mobile";
 import { OptionShape } from "./typings-d515b24c";
+import { Country } from "./index-464d40a4";
 import { SharedCountrySelectProps } from "./components/country-select/index";
 import { CountriesData } from "./data/country-data";
-type Country = {
-    name: string;
-    regions?: string[];
-    iso2: string;
-    countryCode: string;
-    dialCode: string;
-    format?: string;
-    priority: number;
-    mainCode?: boolean;
-};
 type AreaItem = Country & {
     isAreaCode: boolean;
     areaCodeLength: number;

package/modern/typings-d515b24c.d.ts

@@ -5,6 +5,7 @@ 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 { BackgroundColorType } from "./index-464d40a4";
 import { BaseFormControlProps, BackdropProps } from "./index-ebda875c";
 import { ContentProps } from "./typings-4b7234ef";
 import { ModalResponsiveProps as ModalProps } from "./typings-4b7234ef";
@@ -175,7 +176,6 @@ type NavigationBarPrivateProps = {
     scrollableParentRef?: React.RefObject<HTMLDivElement>;
 };
 type NavigationBarProps = NavigationBarPrivateProps;
-type BackgroundColorType = "accent" | "info" | "attention-muted" | "positive-muted" | "negative-muted" | "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "tertiary" | "tertiary-inverted" | "quaternary" | "quaternary-inverted" | "specialbg-component" | "specialbg-component-inverted" | "specialbg-primary-grouped" | "specialbg-secondary-grouped" | "specialbg-tertiary-grouped" | "specialbg-secondary-transparent" | "specialbg-secondary-transparent-inverted" | "specialbg-tertiary-transparent" | "specialbg-tertiary-transparent-inverted";
 type BottomSheetTitleAlign = "center" | "left";
 type BottomSheetProps = {
     /**

package/modern/use-skeleton-1328ead9.d.ts

@@ -2,6 +2,7 @@
 import React from "react";
 import { ReactNode } from "react";
 import { TextSkeletonProps } from "./types-1328ead9";
+type BorderRadiusSize = 0 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 36 | 64 | "pill";
 type SkeletonProps = {
     /**
      * Флаг, явно задающий состояние, при котором контент закрывается прелоадером
@@ -36,6 +37,11 @@ type SkeletonProps = {
      * @default default
      */
     colors?: "default" | "inverted";
+    /**
+     * Скругление углов
+     * @default 8
+     */
+    borderRadius?: BorderRadiusSize;
 };
 declare const Skeleton: React.FC<SkeletonProps>;
 type SkeletonProps$0 = {
@@ -46,4 +52,4 @@ declare function useSkeleton(showSkeleton?: boolean, skeletonProps?: TextSkeleto
     renderSkeleton: (props: SkeletonProps$0) => React.JSX.Element | null;
     textRef: React.RefObject<HTMLElement>;
 };
-export { SkeletonProps, Skeleton, useSkeleton };
+export { BorderRadiusSize, SkeletonProps, Skeleton, useSkeleton };

package/modern/utils/index.d.ts

@@ -1,14 +1,15 @@
+import { RefObject } from 'react';
 import { MaskitoOptions } from '@maskito/core';
 import { InputAutocompleteDesktopProps } from "@alfalab/core-components-input-autocomplete/desktop";
 import { GroupShape, OptionShape } from "@alfalab/core-components-select/shared";
 import { CountriesData } from "../data/country-data";
 import { Country } from "../types";
 declare function initCountries(iso2s?: string[], customCountriesList?: CountriesData[]): Country[][];
-declare function findCountry(countries: Country[][], value?: string, iso2?: string, country?: Country): Country | undefined;
+declare function findCountry(countries: Country[][], value: string | undefined, iso2: string | undefined, country?: Country): Country | undefined;
 declare function guessCountry(inputNumber: string, data: Country[][]): Country | undefined;
 declare function clearMask(value: string): string;
 declare function createPhoneMaskExpression(country: Country | undefined, clearableCountryCode: boolean): Array<RegExp | string>;
-declare function createMaskOptions(country: Country | undefined, clearableCountryCode: boolean, preserveCountryCode: boolean): MaskitoOptions;
+declare function createMaskOptions(country: Country | undefined, clearableCountryCode: boolean, preserveCountryCode: boolean, lastCountryRef: RefObject<Country | null>): MaskitoOptions;
 declare function defaultFilterFn(value: string | undefined, option: OptionShape): boolean;
 declare const filterPhones: (value?: string, options?: InputAutocompleteDesktopProps['options'], filterFn?: typeof defaultFilterFn) => (OptionShape | GroupShape)[];
 declare function getPhoneData(phone: string, countries: Country[][], defaultIso2?: string): {

package/modern/utils/index.js

@@ -115,17 +115,21 @@ function createPhoneMaskExpression(country, clearableCountryCode) {
         ...format.split('').map(itemToMask),
     ];
 }
-function createMaskOptions(country, clearableCountryCode, preserveCountryCode) {
+function createMaskOptions(country, clearableCountryCode, preserveCountryCode, lastCountryRef) {
     const countryCode = country?.countryCode;
     const prefix = countryCode ? getInitialValueFromCountry(countryCode) : '';
     const prefixLen = !clearableCountryCode && prefix ? prefix.length : 0;
     const mask = createPhoneMaskExpression(country, clearableCountryCode);
+    const preprocessors = [
+        maskUtils.insertionPhonePreprocessor(mask, countryCode, clearableCountryCode),
+    ];
+    if (preserveCountryCode) {
+        const createMask = (lastCountry) => createPhoneMaskExpression(lastCountry, clearableCountryCode);
+        preprocessors.push(maskUtils.preserveCountryCodePreprocessor(lastCountryRef, createMask));
+    }
     return {
         mask,
-        preprocessors: [
-            maskUtils.insertionPhonePreprocessor(mask, countryCode, clearableCountryCode),
-            maskUtils.preserveCountryCodePreprocessor(countryCode, preserveCountryCode),
-        ],
+        preprocessors,
         postprocessors: [maskUtils.prefixPostprocessor(prefixLen > 0 ? prefix : '')],
         plugins: [
             maskUtils.caretGuard((value, [from, to]) => [

package/moderncssm/Component.responsive.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import React from 'react';
 declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
-    country?: import("./types").Country | undefined;
+    country?: import("./index-464d40a4").Country | undefined;
     countries?: string[] | undefined;
     defaultIso2?: string | undefined;
     customCountriesList?: import("./index").CountriesData[] | undefined;
@@ -9,7 +9,7 @@ declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
     countrySelectProps?: import("./components/country-select/index").SharedCountrySelectProps | undefined;
     clear?: boolean | undefined;
     filterFn?: ((value: string | undefined, option: import("./typings-d515b24c").OptionShape) => boolean) | undefined;
-    onCountryChange?: ((country?: import("./types").Country | undefined) => void) | undefined;
+    onCountryChange?: ((country?: import("./index-464d40a4").Country | undefined) => void) | undefined;
     onChange?: ((phone: string) => void) | undefined;
     onBlur?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
     onFocus?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
@@ -22,7 +22,7 @@ declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
     client?: "desktop" | "mobile" | undefined;
     defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
 }) | ({
-    country?: import("./types").Country | undefined;
+    country?: import("./index-464d40a4").Country | undefined;
     countries?: string[] | undefined;
     defaultIso2?: string | undefined;
     customCountriesList?: import("./index").CountriesData[] | undefined;
@@ -30,7 +30,7 @@ declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
     countrySelectProps?: import("./components/country-select/index").SharedCountrySelectProps | undefined;
     clear?: boolean | undefined;
     filterFn?: ((value: string | undefined, option: import("./typings-d515b24c").OptionShape) => boolean) | undefined;
-    onCountryChange?: ((country?: import("./types").Country | undefined) => void) | undefined;
+    onCountryChange?: ((country?: import("./index-464d40a4").Country | undefined) => void) | undefined;
     onChange?: ((phone: string) => void) | undefined;
     onBlur?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
     onFocus?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;

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

@@ -1,13 +1,15 @@
-import React, { forwardRef, useMemo, useRef, useState, useEffect } from 'react';
+import React, { forwardRef, useRef, useMemo, useState, useEffect } from 'react';
 import mergeRefs from 'react-merge-refs';
 import { maskitoTransform } from '@maskito/core';
 import { useMaskito } from '@maskito/react';
 import { BaseOption } from '@alfalab/core-components-select/moderncssm/shared';
+import { isNullable } from '@alfalab/core-components-shared/moderncssm';
 import { initCountries, findCountry, filterPhones, createMaskOptions, getClear, getPhoneData, getInitialValueFromCountry } from '../../utils/index.js';
 import { CountrySelect } from '../country-select/Component.js';
 import styles from './index.module.css';
 
 const BaseInternationalPhoneInput = forwardRef(({ clearableCountryCode: clearableCountryCodeFromProps = true, value, country: countryProp, filterFn, onChange, onCountryChange, countrySelectProps, countries, defaultIso2, disabled, options, size = 56, Input, InputAutocomplete, SelectComponent, view, clear: clearProp, open: openProps, defaultOpen, customCountriesList, ...restProps }, ref) => {
+    const lastCountryRef = useRef(null);
     const countriesData = useMemo(() => initCountries(countries, customCountriesList), [countries, customCountriesList]);
     const inputRef = useRef(null);
     const inputWrapperRef = useRef(null);
@@ -23,7 +25,7 @@ const BaseInternationalPhoneInput = forwardRef(({ clearableCountryCode: clearabl
     };
     const preserveCountryCode = clearableCountryCodeFromProps === 'preserve';
     const clearableCountryCode = preserveCountryCode || clearableCountryCodeFromProps;
-    const maskOptions = useMemo(() => createMaskOptions(country, clearableCountryCode, preserveCountryCode), [country, clearableCountryCode, preserveCountryCode]);
+    const maskOptions = useMemo(() => createMaskOptions(country, clearableCountryCode, preserveCountryCode, lastCountryRef), [country, clearableCountryCode, preserveCountryCode]);
     const maskRef = useMaskito({ options: maskOptions });
     const changeNumber = (phone) => {
         onChange?.(phone);
@@ -103,6 +105,12 @@ const BaseInternationalPhoneInput = forwardRef(({ clearableCountryCode: clearabl
         clear: getClear(clearProp, clearableCountryCode, value, country?.countryCode),
         ...restProps.inputProps,
     };
+    useEffect(() => {
+        if (!preserveCountryCode || isNullable(country)) {
+            return;
+        }
+        lastCountryRef.current = country;
+    }, [country, preserveCountryCode]);
     return Array.isArray(options) ? (React.createElement(InputAutocomplete, { closeOnSelect: true, Option: BaseOption, size: size, ...restProps, disabled: disabled, options: filteredOptions, value: value, open: showPhoneSelect, onOpen: handlePhoneSelectOpen, onChange: handleOptionSelect, onInput: (phone) => updatePhoneData(phone), inputProps: {
             ...inputProps,
             onClear: handleClear,

package/moderncssm/index-464d40a4.d.ts

@@ -0,0 +1,23 @@
+type BackgroundColorType = 'accent' | 'info' | 'attention-muted' | 'positive-muted' | 'negative-muted' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'quaternary' | 'quaternary-inverted' | 'specialbg-component' | 'specialbg-component-inverted' | 'specialbg-primary-grouped' | 'specialbg-secondary-grouped' | 'specialbg-tertiary-grouped' | 'specialbg-secondary-transparent' | 'specialbg-secondary-transparent-inverted' | 'specialbg-tertiary-transparent' | 'specialbg-tertiary-transparent-inverted';
+type BorderColorType = 'accent' | 'key' | 'key-inverted' | 'link' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'underline' | 'underline-inverted' | 'graphic-attention' | 'graphic-link' | 'graphic-negative' | 'graphic-positive' | 'specialbg-secondary-transparent' | 'specialbg-secondary-transparent-inverted' | 'specialbg-tertiary-transparent' | 'specialbg-tertiary-transparent-inverted';
+type GraphicColorType = 'accent' | 'link' | 'attention' | 'positive' | 'negative' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'quaternary' | 'quaternary-inverted' | 'static-light' | 'static-accent' | 'static-dark';
+type ShadowType = 'shadow-xs' | 'shadow-s' | 'shadow-m' | 'shadow-l' | 'shadow-xl' | 'shadow-xs-hard' | 'shadow-s-hard' | 'shadow-m-hard' | 'shadow-l-hard' | 'shadow-xl-hard' | 'shadow-xs-up' | 'shadow-s-up' | 'shadow-m-up' | 'shadow-l-up' | 'shadow-xl-up' | 'shadow-xs-hard-up' | 'shadow-s-hard-up' | 'shadow-m-hard-up' | 'shadow-l-hard-up' | 'shadow-xl-hard-up';
+type GapType = '3xs' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl';
+type PaddingType = number | string | {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+};
+type TypographyType = 'accent-caps' | 'accent-component-primary' | 'accent-component-secondary' | 'accent-primary-large' | 'accent-primary-medium' | 'accent-primary-small' | 'accent-secondary-large' | 'accent-secondary-medium' | 'accent-secondary-small' | 'action-caps' | 'action-component-primary' | 'action-component-secondary' | 'action-primary-large' | 'action-primary-medium' | 'action-primary-small' | 'action-secondary-large' | 'action-secondary-medium' | 'action-secondary-small' | 'headline-mobile-large' | 'headline-mobile-medium' | 'headline-mobile-small' | 'headline-mobile-xlarge' | 'headline-mobile-xsmall' | 'headline-system-mobile-large' | 'headline-system-mobile-medium' | 'headline-system-mobile-small' | 'headline-system-mobile-xlarge' | 'headline-system-mobile-xsmall' | 'headline-system-large' | 'headline-system-medium' | 'headline-system-small' | 'headline-system-xlarge' | 'headline-system-xsmall' | 'headline-large' | 'headline-medium' | 'headline-small' | 'headline-xlarge' | 'headline-xsmall' | 'key-large' | 'key-medium' | 'key-small' | 'key-xlarge' | 'key-xsmall' | 'paragraph-caps' | 'paragraph-component-primary' | 'paragraph-component-secondary' | 'paragraph-primary-large' | 'paragraph-primary-medium' | 'paragraph-primary-small' | 'paragraph-secondary-large' | 'paragraph-secondary-medium' | 'paragraph-secondary-small' | 'promo-mobile-large' | 'promo-mobile-medium' | 'promo-mobile-small' | 'promo-mobile-xlarge' | 'promo-mobile-xsmall' | 'promo-system-mobile-large' | 'promo-system-mobile-medium' | 'promo-system-mobile-small' | 'promo-system-mobile-xlarge' | 'promo-system-mobile-xsmall' | 'promo-system-large' | 'promo-system-medium' | 'promo-system-small' | 'promo-system-xlarge' | 'promo-system-xsmall' | 'promo-large' | 'promo-medium' | 'promo-small' | 'promo-xlarge' | 'promo-xsmall' | 'accent-component' | 'action-component' | 'paragraph-component';
+type Country = {
+    name: string;
+    regions?: string[];
+    iso2: string;
+    countryCode: string;
+    dialCode: string;
+    format?: string;
+    priority: number;
+    mainCode?: boolean;
+};
+export { BackgroundColorType, BorderColorType, GraphicColorType, ShadowType, GapType, PaddingType, TypographyType, Country };

package/moderncssm/types.d.ts

@@ -6,18 +6,9 @@ import { InputAutocompleteProps } from "@alfalab/core-components-input-autocompl
 import { InputAutocompleteDesktopProps } from "@alfalab/core-components-input-autocomplete/desktop";
 import { InputAutocompleteMobileProps } from "@alfalab/core-components-input-autocomplete/mobile";
 import { OptionShape } from "./typings-d515b24c";
+import { Country } from "./index-464d40a4";
 import { SharedCountrySelectProps } from "./components/country-select/index";
 import { CountriesData } from "./data/country-data";
-type Country = {
-    name: string;
-    regions?: string[];
-    iso2: string;
-    countryCode: string;
-    dialCode: string;
-    format?: string;
-    priority: number;
-    mainCode?: boolean;
-};
 type AreaItem = Country & {
     isAreaCode: boolean;
     areaCodeLength: number;

package/moderncssm/typings-d515b24c.d.ts

@@ -5,6 +5,7 @@ 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 { BackgroundColorType } from "./index-464d40a4";
 import { BaseFormControlProps, BackdropProps } from "./index-ebda875c";
 import { ContentProps } from "./typings-4b7234ef";
 import { ModalResponsiveProps as ModalProps } from "./typings-4b7234ef";
@@ -175,7 +176,6 @@ type NavigationBarPrivateProps = {
     scrollableParentRef?: React.RefObject<HTMLDivElement>;
 };
 type NavigationBarProps = NavigationBarPrivateProps;
-type BackgroundColorType = "accent" | "info" | "attention-muted" | "positive-muted" | "negative-muted" | "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "tertiary" | "tertiary-inverted" | "quaternary" | "quaternary-inverted" | "specialbg-component" | "specialbg-component-inverted" | "specialbg-primary-grouped" | "specialbg-secondary-grouped" | "specialbg-tertiary-grouped" | "specialbg-secondary-transparent" | "specialbg-secondary-transparent-inverted" | "specialbg-tertiary-transparent" | "specialbg-tertiary-transparent-inverted";
 type BottomSheetTitleAlign = "center" | "left";
 type BottomSheetProps = {
     /**