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

package/{Component-c241b310.d.ts → Component-61e2321e.d.ts}

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import React from "react";
 import { FC } from "react";
-import { CommonButtonProps, PrivateButtonProps } from "./typings-c241b310";
+import { CommonButtonProps, PrivateButtonProps } from "./typings-61e2321e";
 type SpinnerProps = {
     /**
      * Управление видимостью компонента
@@ -9,8 +9,9 @@ type SpinnerProps = {
     visible?: boolean;
     /**
      * Размер компонента
+     * @description xs, s, m deprecated, используйте вместо них 16, 24, 48 соответственно
      */
-    size?: "xs" | "s" | "m";
+    size?: "xs" | "s" | "m" | 16 | 24 | 48;
     /**
      * Дополнительный класс
      */
@@ -28,6 +29,14 @@ type SpinnerProps = {
      */
     colors?: "default" | "inverted";
 };
+declare const SIZE_TO_CLASSNAME_MAP: {
+    xs: string;
+    s: string;
+    m: string;
+    16: string;
+    24: string;
+    48: string;
+};
 declare const Spinner: FC<SpinnerProps>;
 /**
  * Минимальное время отображения лоадера - 500мс,
@@ -35,4 +44,4 @@ declare const Spinner: FC<SpinnerProps>;
  */
 declare const LOADER_MIN_DISPLAY_INTERVAL = 500;
 declare const BaseButton: React.ForwardRefExoticComponent<(CommonButtonProps & PrivateButtonProps) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
-export { SpinnerProps, Spinner, LOADER_MIN_DISPLAY_INTERVAL, BaseButton };
+export { SpinnerProps, SIZE_TO_CLASSNAME_MAP, Spinner, LOADER_MIN_DISPLAY_INTERVAL, BaseButton };

package/{cssm/Component-c29389e5.d.ts → Component-70284312.d.ts}

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import React from 'react';
-import { OptgroupProps } from "./typings-c29389e5";
+import { OptgroupProps } from "./typings-70284312";
 declare const Optgroup: ({ children, className, label, size }: OptgroupProps) => React.JSX.Element;
 export { Optgroup };

package/Component-bdb4c6b9.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import React from 'react';
-import { View } from "./typings-8a2a8ad1";
+import { View } from "./typings-88b743b5";
 declare const Modal: React.ForwardRefExoticComponent<import("./index-bdb4c6b9").BaseModalProps & {
-    size?: "s" | "m" | "l" | "xl" | "fullscreen" | undefined;
+    size?: "s" | "m" | "l" | "xl" | 500 | "fullscreen" | 600 | 800 | 1140 | undefined;
     fullscreen?: boolean | undefined;
     fixedPosition?: boolean | undefined;
     hasCloser?: boolean | undefined;

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

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

package/Component.responsive.d.ts

@@ -7,11 +7,9 @@ declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
     clearableCountryCode?: boolean | undefined;
     countrySelectProps?: import("./components/country-select/index").SharedCountrySelectProps | undefined;
     clear?: boolean | undefined;
-    filterFn?: ((value: string | undefined, option: import("./typings-c29389e5").OptionShape) => boolean) | undefined;
+    filterFn?: ((value: string | undefined, option: import("./typings-70284312").OptionShape) => boolean) | undefined;
     onCountryChange?: ((country?: import("./types").Country | undefined) => void) | undefined;
-    onChange?: ((e: React.ChangeEvent<HTMLInputElement> | null, { value }: {
-        value: string;
-    }) => 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;
 } & {
@@ -28,17 +26,15 @@ declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
     clearableCountryCode?: boolean | undefined;
     countrySelectProps?: import("./components/country-select/index").SharedCountrySelectProps | undefined;
     clear?: boolean | undefined;
-    filterFn?: ((value: string | undefined, option: import("./typings-c29389e5").OptionShape) => boolean) | undefined;
+    filterFn?: ((value: string | undefined, option: import("./typings-70284312").OptionShape) => boolean) | undefined;
     onCountryChange?: ((country?: import("./types").Country | undefined) => void) | undefined;
-    onChange?: ((e: React.ChangeEvent<HTMLInputElement> | null, { value }: {
-        value: string;
-    }) => 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;
 } & {
-    options: (import("./typings-c29389e5").OptionShape | import("./typings-c29389e5").GroupShape)[];
+    options: (import("./typings-70284312").OptionShape | import("./typings-70284312").GroupShape)[];
 } & Omit<import("@alfalab/core-components-input-autocomplete/types").InputAutocompleteCommonProps, "onChange" | "onInput"> & {
-    options: (import("./typings-c29389e5").OptionShape | import("./typings-c29389e5").GroupShape)[];
+    options: (import("./typings-70284312").OptionShape | import("./typings-70284312").GroupShape)[];
 } & Omit<import("@alfalab/core-components-input-autocomplete/types").InputAutocompleteMobileProps, "onChange" | "onInput"> & {
     breakpoint?: number | undefined;
     defaultMatchMediaValue?: boolean | (() => boolean) | undefined;

package/{esm/ResponsiveContext-8a2a8ad1.d.ts → ResponsiveContext-88b743b5.d.ts}

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import React from 'react';
-import { TResponsiveModalContext } from "./typings-8a2a8ad1";
+import { TResponsiveModalContext } from "./typings-88b743b5";
 declare const ResponsiveContext: React.Context<TResponsiveModalContext>;
 export { ResponsiveContext };

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

@@ -9,11 +9,9 @@ declare const BaseInternationalPhoneInput: React.ForwardRefExoticComponent<{
     clearableCountryCode?: boolean | undefined;
     countrySelectProps?: import("../country-select/index").SharedCountrySelectProps | undefined;
     clear?: boolean | undefined;
-    filterFn?: ((value: string | undefined, option: import("../../typings-c29389e5").OptionShape) => boolean) | undefined;
+    filterFn?: ((value: string | undefined, option: import("../../typings-70284312").OptionShape) => boolean) | undefined;
     onCountryChange?: ((country?: Country | undefined) => void) | undefined;
-    onChange?: ((e: React.ChangeEvent<HTMLInputElement> | null, { value }: {
-        value: string;
-    }) => 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/components/base-international-phone-input/Component.js

@@ -16,11 +16,11 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 
-var styles = {"component":"international-phone-input__component_pnml1","addons":"international-phone-input__addons_pnml1"};
+var styles = {"component":"international-phone-input__component_kl7oa","addons":"international-phone-input__addons_kl7oa"};
 require('./index.css')
 
 var BaseInternationalPhoneInput = React.forwardRef(function (_a, ref) {
-    var clearableCountryCode = _a.clearableCountryCode, value = _a.value, countryProp = _a.country, filterFn = _a.filterFn, onChange = _a.onChange, onCountryChange = _a.onCountryChange, countrySelectProps = _a.countrySelectProps, countries = _a.countries, defaultIso2 = _a.defaultIso2, disabled = _a.disabled, options = _a.options, _b = _a.size, size = _b === void 0 ? 'm' : _b, Input = _a.Input, InputAutocomplete = _a.InputAutocomplete, SelectComponent = _a.SelectComponent, view = _a.view, clearProp = _a.clear, restProps = tslib.__rest(_a, ["clearableCountryCode", "value", "country", "filterFn", "onChange", "onCountryChange", "countrySelectProps", "countries", "defaultIso2", "disabled", "options", "size", "Input", "InputAutocomplete", "SelectComponent", "view", "clear"]);
+    var clearableCountryCode = _a.clearableCountryCode, value = _a.value, countryProp = _a.country, filterFn = _a.filterFn, onChange = _a.onChange, onCountryChange = _a.onCountryChange, countrySelectProps = _a.countrySelectProps, countries = _a.countries, defaultIso2 = _a.defaultIso2, disabled = _a.disabled, options = _a.options, _b = _a.size, size = _b === void 0 ? 56 : _b, Input = _a.Input, InputAutocomplete = _a.InputAutocomplete, SelectComponent = _a.SelectComponent, view = _a.view, clearProp = _a.clear, restProps = tslib.__rest(_a, ["clearableCountryCode", "value", "country", "filterFn", "onChange", "onCountryChange", "countrySelectProps", "countries", "defaultIso2", "disabled", "options", "size", "Input", "InputAutocomplete", "SelectComponent", "view", "clear"]);
     var countriesData = React.useMemo(function () { return utils_index.initCountries(countries); }, [countries]);
     var inputRef = React.useRef(null);
     var inputWrapperRef = React.useRef(null);
@@ -36,43 +36,49 @@ var BaseInternationalPhoneInput = React.forwardRef(function (_a, ref) {
     };
     var maskOptions = React.useMemo(function () { return utils_index.createMaskOptions(country, clearableCountryCode); }, [country, clearableCountryCode]);
     var maskRef = react.useMaskito({ options: maskOptions });
-    var changeNumber = function (e, phone) {
-        onChange === null || onChange === void 0 ? void 0 : onChange(e, { value: phone });
+    var changeNumber = function (phone) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(phone);
     };
-    var updatePhoneData = function (phone, e) {
+    var updatePhoneData = function (phone) {
         var _a = utils_index.getPhoneData(phone, countriesData, defaultIso2), nextCountry = _a.nextCountry, nextPhone = _a.nextPhone;
         if (nextCountry !== country) {
             handleCountryChange === null || handleCountryChange === void 0 ? void 0 : handleCountryChange(nextCountry);
         }
-        changeNumber(e, nextPhone);
+        changeNumber(nextPhone);
     };
     var handleSelectCountry = function (_a) {
         var selected = _a.selected;
         var nextCountry = selected === null || selected === void 0 ? void 0 : selected.value;
         handleCountryChange === null || handleCountryChange === void 0 ? void 0 : handleCountryChange(nextCountry);
         if (nextCountry) {
-            changeNumber(null, "+".concat(nextCountry.dialCode));
+            changeNumber("+".concat(nextCountry.dialCode));
         }
         requestAnimationFrame(function () { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
     };
     var handleOptionSelect = function (payload) {
         var _a;
-        updatePhoneData(core.maskitoTransform(typeof payload === 'string' ? payload : ((_a = payload.selected) === null || _a === void 0 ? void 0 : _a.key) || '', maskOptions), null);
+        updatePhoneData(core.maskitoTransform(typeof payload === 'string' ? payload : ((_a = payload.selected) === null || _a === void 0 ? void 0 : _a.key) || '', maskOptions));
     };
     var handleInput = function (e) {
-        updatePhoneData(e.target.value, e);
+        updatePhoneData(e.target.value);
     };
     var handleClear = function (event) {
         var _a, _b;
         (_b = (_a = restProps.inputProps) === null || _a === void 0 ? void 0 : _a.onClear) === null || _b === void 0 ? void 0 : _b.call(_a, event);
-        var countryCode = (country === null || country === void 0 ? void 0 : country.countryCode) || '';
-        changeNumber(null, clearableCountryCode ? '' : "+".concat(countryCode));
+        if (clearableCountryCode) {
+            var nextCountry = utils_index.findCountry(countriesData, '', defaultIso2, countryProp);
+            changeNumber('');
+            handleCountryChange(nextCountry);
+        }
+        else {
+            changeNumber("+".concat(country === null || country === void 0 ? void 0 : country.countryCode) || '');
+        }
     };
     React.useEffect(function () {
         if (value) {
             var newValue = core.maskitoTransform(value, maskOptions);
             if (value !== newValue) {
-                updatePhoneData(newValue, null);
+                updatePhoneData(newValue);
             }
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -83,10 +89,7 @@ var BaseInternationalPhoneInput = React.forwardRef(function (_a, ref) {
         return (React__default.default.createElement(components_countrySelect_Component.CountrySelect, tslib.__assign({ dataTestId: restProps === null || restProps === void 0 ? void 0 : restProps.dataTestId }, countrySelectProps, { view: view, SelectComponent: SelectComponent, disabled: disabled || (countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.disabled), onChange: handleSelectCountry, country: country, countries: compact ? [] : countriesData, fieldWidth: (_a = inputWrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width })));
     };
     var inputProps = tslib.__assign({ className: styles.component, ref: mergeRefs__default.default([maskRef, ref, inputRef]), wrapperRef: inputWrapperRef, addonsClassName: styles.addons, type: 'tel', clear: utils_index.getClear(clearProp, clearableCountryCode, value, country === null || country === void 0 ? void 0 : country.countryCode) }, restProps.inputProps);
-    return Array.isArray(options) ? (React__default.default.createElement(InputAutocomplete, tslib.__assign({ closeOnSelect: true, Option: shared.BaseOption, size: size }, restProps, { disabled: disabled, options: filteredOptions, value: value, onChange: handleOptionSelect, onInput: function (event, _a) {
-            var phone = _a.value;
-            return updatePhoneData(phone, event);
-        }, inputProps: tslib.__assign(tslib.__assign({}, inputProps), { onClear: handleClear, onInput: handleInput, leftAddons: renderCountrySelect(view === 'mobile') }), fieldProps: tslib.__assign(tslib.__assign(tslib.__assign({}, restProps.fieldProps), { className: inputProps.className, addonsClassName: inputProps.addonsClassName }), (view === 'mobile' ? { leftAddons: renderCountrySelect() } : null)) }))) : (React__default.default.createElement(Input, tslib.__assign({}, restProps, inputProps, { onClear: inputProps.clear ? handleClear : undefined, leftAddons: renderCountrySelect(), size: size, onInput: handleInput, value: value, disabled: disabled })));
+    return Array.isArray(options) ? (React__default.default.createElement(InputAutocomplete, tslib.__assign({ closeOnSelect: true, Option: shared.BaseOption, size: size }, restProps, { disabled: disabled, options: filteredOptions, value: value, onChange: handleOptionSelect, onInput: function (phone) { return updatePhoneData(phone); }, inputProps: tslib.__assign(tslib.__assign({}, inputProps), { onClear: handleClear, onInput: handleInput, leftAddons: renderCountrySelect(view === 'mobile') }), fieldProps: tslib.__assign(tslib.__assign(tslib.__assign({}, restProps.fieldProps), { className: inputProps.className, addonsClassName: inputProps.addonsClassName }), (view === 'mobile' ? { leftAddons: renderCountrySelect() } : null)) }))) : (React__default.default.createElement(Input, tslib.__assign({}, restProps, inputProps, { onClear: inputProps.clear ? handleClear : undefined, leftAddons: renderCountrySelect(), size: size, onInput: handleInput, value: value, disabled: disabled })));
 });
 
 exports.BaseInternationalPhoneInput = BaseInternationalPhoneInput;

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

@@ -1,5 +1,5 @@
-/* hash: 1nmzk */
+/* hash: to7zh */
 
-    .international-phone-input__component_pnml1 .international-phone-input__addons_pnml1 {
+    .international-phone-input__component_kl7oa .international-phone-input__addons_kl7oa {
         padding-left: 0;
     }

package/components/country-select/Component.js

@@ -14,7 +14,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var styles = {"component":"international-phone-input__component_1u0p1","option":"international-phone-input__option_1u0p1","flag":"international-phone-input__flag_1u0p1","countryName":"international-phone-input__countryName_1u0p1","dialCode":"international-phone-input__dialCode_1u0p1","flagIconWrapper":"international-phone-input__flagIconWrapper_1u0p1","emptyCountryIcon":"international-phone-input__emptyCountryIcon_1u0p1"};
+var styles = {"component":"international-phone-input__component_1i24x","option":"international-phone-input__option_1i24x","flag":"international-phone-input__flag_1i24x","countryName":"international-phone-input__countryName_1i24x","dialCode":"international-phone-input__dialCode_1i24x","flagIconWrapper":"international-phone-input__flagIconWrapper_1i24x","emptyCountryIcon":"international-phone-input__emptyCountryIcon_1i24x"};
 require('./index.css')
 
 var CountrySelect = function (_a) {

package/components/country-select/index.css

@@ -1,5 +1,5 @@
-/* hash: 1t4ag */
-:root {
+/* hash: kxpn0 */
+: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);
     --color-light-text-secondary: rgba(4, 4, 19, 0.55); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -18,29 +18,29 @@
     --gap-s: 12px;
 } :root {
 } :root {
-} .international-phone-input__component_1u0p1 {
+} .international-phone-input__component_1i24x {
     position: static;
     display: flex;
     min-width: initial;
     height: 100%;
-} .international-phone-input__option_1u0p1 {
+} .international-phone-input__option_1i24x {
     display: flex;
     align-items: flex-start;
     padding: var(--gap-s);
-} .international-phone-input__flag_1u0p1 {
+} .international-phone-input__flag_1i24x {
     flex-shrink: 0;
     margin-right: var(--gap-xs);
-} .international-phone-input__countryName_1u0p1 {
+} .international-phone-input__countryName_1i24x {
     margin-right: var(--gap-xs);
-} .international-phone-input__dialCode_1u0p1 {
+} .international-phone-input__dialCode_1i24x {
     color: var(--color-light-text-secondary);
-} .international-phone-input__flagIconWrapper_1u0p1 {
+} .international-phone-input__flagIconWrapper_1i24x {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 24px;
     height: 24px;
     margin-left: var(--gap-s);
-} .international-phone-input__emptyCountryIcon_1u0p1 {
+} .international-phone-input__emptyCountryIcon_1i24x {
     color: var(--color-light-neutral-translucent-700);
 }

package/components/flag-icon/component.js

@@ -11,7 +11,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"flagIcon":"international-phone-input__flagIcon_b3x27","flagPlaceholder":"international-phone-input__flagPlaceholder_b3x27"};
+var styles = {"flagIcon":"international-phone-input__flagIcon_n2h6p","flagPlaceholder":"international-phone-input__flagPlaceholder_n2h6p"};
 require('./index.css')
 
 /**

package/components/flag-icon/index.css

@@ -1,5 +1,5 @@
-/* hash: 18hrh */
-:root {
+/* hash: hn891 */
+: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 */
 } :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 */
@@ -17,10 +17,10 @@
     --gap-3xs: 2px;
 } :root {
 } :root {
-} .international-phone-input__flagIcon_b3x27 {
+} .international-phone-input__flagIcon_n2h6p {
     max-width: 24px;
     max-height: 24px;
-} .international-phone-input__flagPlaceholder_b3x27 {
+} .international-phone-input__flagPlaceholder_n2h6p {
     width: 24px;
     height: 16px;
     max-height: 16px;

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

@@ -4,5 +4,8 @@ declare const EMPTY_COUNTRY_SELECT_FIELD: {
     value: string;
     key: string;
 };
-declare const SelectField: FC<FieldProps>;
+type SelectFieldProps = FieldProps & {
+    size?: 's' | 'm' | 'l' | 'xl' | 48 | 56 | 64 | 72;
+};
+declare const SelectField: FC<SelectFieldProps>;
 export { EMPTY_COUNTRY_SELECT_FIELD, SelectField };

package/components/select-field/component.js

@@ -16,20 +16,30 @@ 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_in79c","flagIconContainer":"international-phone-input__flagIconContainer_in79c","emptyCountryIcon":"international-phone-input__emptyCountryIcon_in79c","disabled":"international-phone-input__disabled_in79c","inner":"international-phone-input__inner_in79c","l":"international-phone-input__l_in79c","xl":"international-phone-input__xl_in79c","focusVisible":"international-phone-input__focusVisible_in79c"};
+var styles = {"component":"international-phone-input__component_1ak6w","flagIconContainer":"international-phone-input__flagIconContainer_1ak6w","emptyCountryIcon":"international-phone-input__emptyCountryIcon_1ak6w","disabled":"international-phone-input__disabled_1ak6w","inner":"international-phone-input__inner_1ak6w","size-64":"international-phone-input__size-64_1ak6w","size-72":"international-phone-input__size-72_1ak6w","focusVisible":"international-phone-input__focusVisible_1ak6w"};
 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], (_b = {},
+    return (React__default.default.createElement("div", { ref: ref, className: cn__default.default(styles.component, size && styles[SIZE_TO_CLASSNAME_MAP[size]], (_b = {},
             _b[styles.focusVisible] = focusVisible,
             _b[styles.disabled] = disabled,
             _b)) },

package/components/select-field/index.css

@@ -1,5 +1,5 @@
-/* hash: kydnd */
-:root {
+/* hash: zu3yr */
+: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-border-link: #2288fa;
     --color-light-neutral-translucent-700: rgba(4, 4, 21, 0.47); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -21,33 +21,33 @@
 } :root {
     --focus-color: var(--color-light-border-link);
     --disabled-cursor: not-allowed;
-} .international-phone-input__component_in79c {
+} .international-phone-input__component_1ak6w {
     height: 100%;
     cursor: pointer;
     outline: none;
     position: relative;
-} .international-phone-input__flagIconContainer_in79c {
+} .international-phone-input__flagIconContainer_1ak6w {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 24px;
     height: 24px;
     margin-right: var(--gap-2xs);
-} .international-phone-input__emptyCountryIcon_in79c {
+} .international-phone-input__emptyCountryIcon_1ak6w {
     color: var(--color-light-neutral-translucent-700);
-} .international-phone-input__disabled_in79c {
+} .international-phone-input__disabled_1ak6w {
     cursor: var(--disabled-cursor);
-} .international-phone-input__inner_in79c {
+} .international-phone-input__inner_1ak6w {
     position: relative;
     display: flex;
     align-items: center;
     height: 100%;
     padding-left: var(--gap-s);
     outline: none;
-} .international-phone-input__l_in79c .international-phone-input__inner_in79c,
-.international-phone-input__xl_in79c .international-phone-input__inner_in79c {
+} .international-phone-input__size-64_1ak6w .international-phone-input__inner_1ak6w,
+.international-phone-input__size-72_1ak6w .international-phone-input__inner_1ak6w {
     padding-left: var(--gap-m);
-} .international-phone-input__focusVisible_in79c {
+} .international-phone-input__focusVisible_1ak6w {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/consts-6c9aad46.d.ts

@@ -0,0 +1,12 @@
+declare const SIZE_TO_CLASSNAME_MAP: {
+    s: string;
+    m: string;
+    l: string;
+    xl: string;
+    fullscreen: string;
+    500: string;
+    600: string;
+    800: string;
+    1140: string;
+};
+export { SIZE_TO_CLASSNAME_MAP };

package/consts-ef43bf1b.d.ts

@@ -0,0 +1,12 @@
+declare const DEFAULT_VISIBLE_OPTIONS = 5;
+declare const SIZE_TO_CLASSNAME_MAP: {
+    s: string;
+    m: string;
+    l: string;
+    xl: string;
+    48: string;
+    56: string;
+    64: string;
+    72: string;
+};
+export { DEFAULT_VISIBLE_OPTIONS, SIZE_TO_CLASSNAME_MAP };

package/cssm/{Component-c241b310.d.ts → Component-61e2321e.d.ts}

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import React from "react";
 import { FC } from "react";
-import { CommonButtonProps, PrivateButtonProps } from "./typings-c241b310";
+import { CommonButtonProps, PrivateButtonProps } from "./typings-61e2321e";
 type SpinnerProps = {
     /**
      * Управление видимостью компонента
@@ -9,8 +9,9 @@ type SpinnerProps = {
     visible?: boolean;
     /**
      * Размер компонента
+     * @description xs, s, m deprecated, используйте вместо них 16, 24, 48 соответственно
      */
-    size?: "xs" | "s" | "m";
+    size?: "xs" | "s" | "m" | 16 | 24 | 48;
     /**
      * Дополнительный класс
      */
@@ -28,6 +29,14 @@ type SpinnerProps = {
      */
     colors?: "default" | "inverted";
 };
+declare const SIZE_TO_CLASSNAME_MAP: {
+    xs: string;
+    s: string;
+    m: string;
+    16: string;
+    24: string;
+    48: string;
+};
 declare const Spinner: FC<SpinnerProps>;
 /**
  * Минимальное время отображения лоадера - 500мс,
@@ -35,4 +44,4 @@ declare const Spinner: FC<SpinnerProps>;
  */
 declare const LOADER_MIN_DISPLAY_INTERVAL = 500;
 declare const BaseButton: React.ForwardRefExoticComponent<(CommonButtonProps & PrivateButtonProps) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
-export { SpinnerProps, Spinner, LOADER_MIN_DISPLAY_INTERVAL, BaseButton };
+export { SpinnerProps, SIZE_TO_CLASSNAME_MAP, Spinner, LOADER_MIN_DISPLAY_INTERVAL, BaseButton };

package/{Component-c29389e5.d.ts → cssm/Component-70284312.d.ts}

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import React from 'react';
-import { OptgroupProps } from "./typings-c29389e5";
+import { OptgroupProps } from "./typings-70284312";
 declare const Optgroup: ({ children, className, label, size }: OptgroupProps) => React.JSX.Element;
 export { Optgroup };

package/cssm/Component-bdb4c6b9.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import React from 'react';
-import { View } from "./typings-8a2a8ad1";
+import { View } from "./typings-88b743b5";
 declare const Modal: React.ForwardRefExoticComponent<import("./index-bdb4c6b9").BaseModalProps & {
-    size?: "s" | "m" | "l" | "xl" | "fullscreen" | undefined;
+    size?: "s" | "m" | "l" | "xl" | 500 | "fullscreen" | 600 | 800 | 1140 | undefined;
     fullscreen?: boolean | undefined;
     fixedPosition?: boolean | undefined;
     hasCloser?: boolean | undefined;

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

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

package/cssm/Component.responsive.d.ts

@@ -7,11 +7,9 @@ declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
     clearableCountryCode?: boolean | undefined;
     countrySelectProps?: import("./components/country-select/index").SharedCountrySelectProps | undefined;
     clear?: boolean | undefined;
-    filterFn?: ((value: string | undefined, option: import("./typings-c29389e5").OptionShape) => boolean) | undefined;
+    filterFn?: ((value: string | undefined, option: import("./typings-70284312").OptionShape) => boolean) | undefined;
     onCountryChange?: ((country?: import("./types").Country | undefined) => void) | undefined;
-    onChange?: ((e: React.ChangeEvent<HTMLInputElement> | null, { value }: {
-        value: string;
-    }) => 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;
 } & {
@@ -28,17 +26,15 @@ declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
     clearableCountryCode?: boolean | undefined;
     countrySelectProps?: import("./components/country-select/index").SharedCountrySelectProps | undefined;
     clear?: boolean | undefined;
-    filterFn?: ((value: string | undefined, option: import("./typings-c29389e5").OptionShape) => boolean) | undefined;
+    filterFn?: ((value: string | undefined, option: import("./typings-70284312").OptionShape) => boolean) | undefined;
     onCountryChange?: ((country?: import("./types").Country | undefined) => void) | undefined;
-    onChange?: ((e: React.ChangeEvent<HTMLInputElement> | null, { value }: {
-        value: string;
-    }) => 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;
 } & {
-    options: (import("./typings-c29389e5").OptionShape | import("./typings-c29389e5").GroupShape)[];
+    options: (import("./typings-70284312").OptionShape | import("./typings-70284312").GroupShape)[];
 } & Omit<import("@alfalab/core-components-input-autocomplete/types").InputAutocompleteCommonProps, "onChange" | "onInput"> & {
-    options: (import("./typings-c29389e5").OptionShape | import("./typings-c29389e5").GroupShape)[];
+    options: (import("./typings-70284312").OptionShape | import("./typings-70284312").GroupShape)[];
 } & Omit<import("@alfalab/core-components-input-autocomplete/types").InputAutocompleteMobileProps, "onChange" | "onInput"> & {
     breakpoint?: number | undefined;
     defaultMatchMediaValue?: boolean | (() => boolean) | undefined;

package/{modern/ResponsiveContext-8a2a8ad1.d.ts → cssm/ResponsiveContext-88b743b5.d.ts}

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import React from 'react';
-import { TResponsiveModalContext } from "./typings-8a2a8ad1";
+import { TResponsiveModalContext } from "./typings-88b743b5";
 declare const ResponsiveContext: React.Context<TResponsiveModalContext>;
 export { ResponsiveContext };

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

@@ -9,11 +9,9 @@ declare const BaseInternationalPhoneInput: React.ForwardRefExoticComponent<{
     clearableCountryCode?: boolean | undefined;
     countrySelectProps?: import("../country-select/index").SharedCountrySelectProps | undefined;
     clear?: boolean | undefined;
-    filterFn?: ((value: string | undefined, option: import("../../typings-c29389e5").OptionShape) => boolean) | undefined;
+    filterFn?: ((value: string | undefined, option: import("../../typings-70284312").OptionShape) => boolean) | undefined;
     onCountryChange?: ((country?: Country | undefined) => void) | undefined;
-    onChange?: ((e: React.ChangeEvent<HTMLInputElement> | null, { value }: {
-        value: string;
-    }) => 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;
 } & {