@alfalab/core-components-international-phone-input 1.1.0 → 1.2.0

package/Component-0816e61d.d.ts

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

package/Component-8b2c2707.d.ts

@@ -0,0 +1,71 @@
+/// <reference types="react" />
+import React from 'react';
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType, ReactElement } from "react";
+import { ButtonProps } from "./index-8b2c2707";
+type IconButtonProps = {
+    /**
+     * Компонент иконки
+     */
+    icon: ElementType<{
+        className?: string;
+    }> | ReactElement;
+    /**
+     * Тип кнопки
+     */
+    view?: 'primary' | 'secondary' | 'transparent' | 'tertiary' | 'negative';
+    /**
+     * Размер компонента
+     */
+    size?: 'xxs' | 'xs' | 's';
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Выравнивание иконки
+     * @default 'center'
+     */
+    alignIcon?: 'left' | 'center' | 'right';
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: 'default' | 'inverted';
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'size'> & Pick<ButtonProps, 'Component' | 'href' | 'loading' | 'breakpoint'> & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'target' | 'download'>;
+declare const IconButton: React.ForwardRefExoticComponent<{
+    /**
+     * Компонент иконки
+     */
+    icon: ElementType<{
+        className?: string;
+    }> | ReactElement;
+    /**
+     * Тип кнопки
+     */
+    view?: "primary" | "secondary" | "tertiary" | "negative" | "transparent" | undefined;
+    /**
+     * Размер компонента
+     */
+    size?: "xs" | "s" | "xxs" | undefined;
+    /**
+     * Дополнительный класс
+     */
+    className?: string | undefined;
+    /**
+     * Выравнивание иконки
+     * @default 'center'
+     */
+    alignIcon?: "center" | "right" | "left" | undefined;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string | undefined;
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: "default" | "inverted" | undefined;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "size"> & Pick<ButtonProps, "href" | "Component" | "loading" | "breakpoint"> & Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, "download" | "target"> & React.RefAttributes<HTMLButtonElement>>;
+export { IconButtonProps, IconButton };

package/Component.desktop-0aa4e915.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { CommonButtonProps } from "./typings-89f0cb07";
+declare const ButtonDesktop: React.ForwardRefExoticComponent<CommonButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export { ButtonDesktop };

package/Component.desktop.js

@@ -8,40 +8,29 @@ var Component_desktop = require('@alfalab/core-components-input/Component.deskto
 var desktop$1 = require('@alfalab/core-components-input-autocomplete/desktop');
 var desktop = require('@alfalab/core-components-select/desktop');
 var components_baseInternationalPhoneInput_Component = require('./components/base-international-phone-input/Component.js');
-var utils_index = require('./utils/index.js');
 require('react-merge-refs');
 require('@maskito/core');
 require('@maskito/react');
 require('@alfalab/core-components-select/shared');
-require('./components/country-select/Component.js');
+require('./utils/index.js');
 require('@alfalab/core-components-shared');
+require('./consts.js');
+require('./data/country-data.js');
+require('./components/country-select/Component.js');
 require('@alfalab/icons-glyph/WorldMagnifierMIcon');
 require('./components/flag-icon/component.js');
 require('classnames');
 require('./components/flag-icon/flagSprite.js');
 require('./components/select-field/component.js');
 require('@alfalab/hooks');
-require('./consts.js');
-require('./data/country-data.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var InternationalPhoneInputDesktop = React.forwardRef(function (_a, ref) {
-    var options = _a.options, countryProp = _a.country, countries = _a.countries, onCountryChange = _a.onCountryChange, value = _a.value, filterFn = _a.filterFn, defaultIso2 = _a.defaultIso2, clear = _a.clear, _b = _a.clearableCountryCode, clearableCountryCode = _b === void 0 ? true : _b, restProps = tslib.__rest(_a, ["options", "country", "countries", "onCountryChange", "value", "filterFn", "defaultIso2", "clear", "clearableCountryCode"]);
-    var countriesData = React.useMemo(function () { return utils_index.initCountries(countries); }, [countries]);
-    var _c = React.useState(function () {
-        return utils_index.findCountry(countriesData, value, defaultIso2, countryProp);
-    }), selectedCountry = _c[0], setSelectedCountry = _c[1];
-    var filteredOptions = utils_index.filterPhones(value, options, filterFn);
-    var country = countryProp !== null && countryProp !== void 0 ? countryProp : selectedCountry;
-    var handleCountryChange = function (nextCountry) {
-        if (countryProp === undefined)
-            setSelectedCountry(nextCountry);
-        onCountryChange === null || onCountryChange === void 0 ? void 0 : onCountryChange(nextCountry);
-    };
-    return (React__default.default.createElement(components_baseInternationalPhoneInput_Component.BaseInternationalPhoneInput, tslib.__assign({ countriesData: countriesData, selected: value }, restProps, { clear: utils_index.getClear(clear, clearableCountryCode, value, country === null || country === void 0 ? void 0 : country.countryCode), clearableCountryCode: clearableCountryCode, country: country, onCountryChange: handleCountryChange, defaultIso2: defaultIso2, value: value, view: 'desktop', options: filteredOptions, ref: ref, SelectComponent: desktop.SelectDesktop, Input: Component_desktop.InputDesktop, InputAutocomplete: desktop$1.InputAutocompleteDesktop })));
+    var value = _a.value, _b = _a.clearableCountryCode, clearableCountryCode = _b === void 0 ? true : _b, restProps = tslib.__rest(_a, ["value", "clearableCountryCode"]);
+    return (React__default.default.createElement(components_baseInternationalPhoneInput_Component.BaseInternationalPhoneInput, tslib.__assign({ selected: value }, restProps, { clearableCountryCode: clearableCountryCode, value: value, view: 'desktop', ref: ref, SelectComponent: desktop.SelectDesktop, Input: Component_desktop.InputDesktop, InputAutocomplete: desktop$1.InputAutocompleteDesktop })));
 });
 
 exports.InternationalPhoneInputDesktop = InternationalPhoneInputDesktop;

package/Component.mobile.js

@@ -8,75 +8,29 @@ var mobile$1 = require('@alfalab/core-components-input/mobile');
 var mobile$2 = require('@alfalab/core-components-input-autocomplete/mobile');
 var mobile = require('@alfalab/core-components-select/mobile');
 var components_baseInternationalPhoneInput_Component = require('./components/base-international-phone-input/Component.js');
-var components_countrySelect_Component = require('./components/country-select/Component.js');
-var utils_index = require('./utils/index.js');
 require('react-merge-refs');
 require('@maskito/core');
 require('@maskito/react');
 require('@alfalab/core-components-select/shared');
+require('./utils/index.js');
 require('@alfalab/core-components-shared');
+require('./consts.js');
+require('./data/country-data.js');
+require('./components/country-select/Component.js');
 require('@alfalab/icons-glyph/WorldMagnifierMIcon');
 require('./components/flag-icon/component.js');
 require('classnames');
 require('./components/flag-icon/flagSprite.js');
 require('./components/select-field/component.js');
 require('@alfalab/hooks');
-require('./consts.js');
-require('./data/country-data.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var InternationalPhoneInputMobile = React.forwardRef(function (_a, ref) {
-    var options = _a.options, countryProp = _a.country, onCountryChange = _a.onCountryChange, value = _a.value, filterFn = _a.filterFn, countries = _a.countries, defaultIso2 = _a.defaultIso2, clearProp = _a.clear, _b = _a.clearableCountryCode, clearableCountryCode = _b === void 0 ? true : _b, restProps = tslib.__rest(_a, ["options", "country", "onCountryChange", "value", "filterFn", "countries", "defaultIso2", "clear", "clearableCountryCode"]);
-    var typedRestProps = restProps;
-    var countriesData = React.useMemo(function () { return utils_index.initCountries(countries); }, [countries]);
-    var _c = React.useState(''), filter = _c[0], setFilter = _c[1];
-    var _d = React.useState(), filterCountry = _d[0], setFilterCountry = _d[1];
-    var _e = React.useState(function () {
-        return utils_index.findCountry(countriesData, value, defaultIso2, countryProp);
-    }), selectedCountry = _e[0], setSelectedCountry = _e[1];
-    var filteredOptions = utils_index.filterPhones(filter, options, filterFn);
-    var country = countryProp !== null && countryProp !== void 0 ? countryProp : selectedCountry;
-    var countryCode = country === null || country === void 0 ? void 0 : country.countryCode;
-    var handleCountryChange = function (nextCountry) {
-        if (countryProp === undefined)
-            setSelectedCountry(nextCountry);
-        onCountryChange === null || onCountryChange === void 0 ? void 0 : onCountryChange(nextCountry);
-    };
-    var handleFilter = function (event) {
-        var _a = utils_index.getPhoneData(event.target.value, countriesData, defaultIso2), nextPhone = _a.nextPhone, nextCountry = _a.nextCountry;
-        setFilter(nextPhone);
-        setFilterCountry(nextCountry);
-    };
-    var handleFilterClear = function () {
-        var withCountryCode = !clearableCountryCode && (filterCountry === null || filterCountry === void 0 ? void 0 : filterCountry.countryCode);
-        setFilter(withCountryCode ? "+".concat(filterCountry.countryCode) : '');
-    };
-    var handleEnter = function (node, isAppearing) {
-        var _a, _b, _c;
-        (_c = (_b = (_a = typedRestProps.bottomSheetProps) === null || _a === void 0 ? void 0 : _a.transitionProps) === null || _b === void 0 ? void 0 : _b.onEnter) === null || _c === void 0 ? void 0 : _c.call(_b, node, isAppearing);
-        setFilterCountry(country);
-        setFilter(countryCode ? "+".concat(country.countryCode) : '');
-    };
-    var isAutocomplete = Array.isArray(options);
-    var props = isAutocomplete
-        ? (function () {
-            var _a;
-            var clear = utils_index.getClear(clearProp, clearableCountryCode, filter, countryCode);
-            return {
-                filter: filter,
-                onFilter: handleFilter,
-                onClearFilter: clear ? handleFilterClear : undefined,
-                bottomSheetHeaderAddonsProps: tslib.__assign(tslib.__assign({}, typedRestProps.bottomSheetHeaderAddonsProps), { leftAddons: (React__default.default.createElement(components_countrySelect_Component.CountrySelect, { SelectComponent: mobile.SelectMobile, view: 'mobile', country: filterCountry })) }),
-                bottomSheetProps: tslib.__assign(tslib.__assign({}, typedRestProps.bottomSheetProps), { transitionProps: tslib.__assign(tslib.__assign({}, (_a = typedRestProps.bottomSheetProps) === null || _a === void 0 ? void 0 : _a.transitionProps), { onEnter: handleEnter }) }),
-            };
-        })()
-        : {
-            clear: utils_index.getClear(clearProp, clearableCountryCode, value, countryCode),
-        };
-    return (React__default.default.createElement(components_baseInternationalPhoneInput_Component.BaseInternationalPhoneInput, tslib.__assign({ selected: value }, restProps, props, { clearableCountryCode: clearableCountryCode, onCountryChange: handleCountryChange, country: country, defaultIso2: defaultIso2, countriesData: countriesData, value: value, options: filteredOptions, view: 'mobile', ref: ref, SelectComponent: mobile.SelectMobile, Input: mobile$1.InputMobile, InputAutocomplete: mobile$2.InputAutocompleteMobile })));
+    var value = _a.value, _b = _a.clearableCountryCode, clearableCountryCode = _b === void 0 ? true : _b, restProps = tslib.__rest(_a, ["value", "clearableCountryCode"]);
+    return (React__default.default.createElement(components_baseInternationalPhoneInput_Component.BaseInternationalPhoneInput, tslib.__assign({ selected: value }, restProps, { clearableCountryCode: clearableCountryCode, value: value, view: 'mobile', ref: ref, SelectComponent: mobile.SelectMobile, Input: mobile$1.InputMobile, InputAutocomplete: mobile$2.InputAutocompleteMobile })));
 });
 
 exports.InternationalPhoneInputMobile = InternationalPhoneInputMobile;

package/Component.responsive.d.ts

@@ -7,7 +7,7 @@ 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-0f4b9bed").OptionShape) => boolean) | undefined;
+    filterFn?: ((value: string | undefined, option: import("./typings-0816e61d").OptionShape) => boolean) | undefined;
     onCountryChange?: ((country?: import("./types").Country | undefined) => void) | undefined;
     onChange?: ((e: React.ChangeEvent<HTMLInputElement> | null, { value }: {
         value: string;
@@ -16,9 +16,9 @@ declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
     onFocus?: ((event: React.FocusEvent<HTMLInputElement | HTMLDivElement, Element>) => void) | undefined;
 } & {
     options?: undefined;
-} & Omit<import("./Component.desktop").InputDesktopProps, "onFocus" | "onBlur" | "onChange" | "clear" | "onClear"> & {
+} & Omit<import("./Component.desktop").InputDesktopProps, "onFocus" | "onBlur" | "onChange" | "onInput" | "clear" | "onClear"> & {
     options?: undefined;
-} & Omit<import("@alfalab/core-components-input/Component.mobile").InputMobileProps, "onFocus" | "onBlur" | "onChange" | "clear" | "onClear"> & {
+} & Omit<import("@alfalab/core-components-input/Component.mobile").InputMobileProps, "onFocus" | "onBlur" | "onChange" | "onInput" | "clear" | "onClear"> & {
     breakpoint?: number | undefined;
     defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
 }) | ({
@@ -28,7 +28,7 @@ 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-0f4b9bed").OptionShape) => boolean) | undefined;
+    filterFn?: ((value: string | undefined, option: import("./typings-0816e61d").OptionShape) => boolean) | undefined;
     onCountryChange?: ((country?: import("./types").Country | undefined) => void) | undefined;
     onChange?: ((e: React.ChangeEvent<HTMLInputElement> | null, { value }: {
         value: string;
@@ -36,10 +36,10 @@ declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
     onBlur?: ((event: React.FocusEvent<HTMLInputElement | HTMLDivElement, Element>) => void) | undefined;
     onFocus?: ((event: React.FocusEvent<HTMLInputElement | HTMLDivElement, Element>) => void) | undefined;
 } & {
-    options: (import("./typings-0f4b9bed").OptionShape | import("./typings-0f4b9bed").GroupShape)[];
-} & Omit<import("@alfalab/core-components-input-autocomplete/Component.desktop").InputAutocompleteDesktopProps, "onChange"> & {
-    options: (import("./typings-0f4b9bed").OptionShape | import("./typings-0f4b9bed").GroupShape)[];
-} & Omit<import("@alfalab/core-components-input-autocomplete/Component.mobile").InputAutocompleteMobileProps, "onChange" | "filter" | "onFilter" | "onClearFilter"> & {
+    options: (import("./typings-0816e61d").OptionShape | import("./typings-0816e61d").GroupShape)[];
+} & Omit<import("@alfalab/core-components-input-autocomplete/types").InputAutocompleteCommonProps, "onChange" | "onInput"> & {
+    options: (import("./typings-0816e61d").OptionShape | import("./typings-0816e61d").GroupShape)[];
+} & Omit<import("@alfalab/core-components-input-autocomplete/types").InputAutocompleteMobileProps, "onChange" | "onInput"> & {
     breakpoint?: number | undefined;
     defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
 })) & React.RefAttributes<HTMLInputElement>>;

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

@@ -9,7 +9,7 @@ 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-0f4b9bed").OptionShape) => boolean) | undefined;
+    filterFn?: ((value: string | undefined, option: import("../../typings-0816e61d").OptionShape) => boolean) | undefined;
     onCountryChange?: ((country?: Country | undefined) => void) | undefined;
     onChange?: ((e: React.ChangeEvent<HTMLInputElement> | null, { value }: {
         value: string;
@@ -21,6 +21,5 @@ declare const BaseInternationalPhoneInput: React.ForwardRefExoticComponent<{
     InputAutocomplete: React.FC<InputAutocompleteProps>;
     SelectComponent: React.ElementType<any>;
     view: "mobile" | "desktop";
-    countriesData: Country[][];
-} & Omit<import("@alfalab/core-components-input").InputProps, "onFocus" | "onBlur" | "onScroll"> & Partial<Omit<InputAutocompleteProps, "leftAddons" | "onChange" | "onScroll">> & React.RefAttributes<HTMLInputElement>>;
+} & Omit<import("@alfalab/core-components-input").InputProps, "onFocus" | "onBlur" | "onChange" | "onInput" | "onScroll"> & Partial<Omit<InputAutocompleteProps, "leftAddons" | "onChange" | "onInput" | "onScroll">> & React.RefAttributes<HTMLInputElement>>;
 export { BaseInternationalPhoneInput };

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

@@ -25,13 +25,24 @@ 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_1qt4a","addons":"international-phone-input__addons_1qt4a"};
+var styles = {"component":"international-phone-input__component_1gks9","addons":"international-phone-input__addons_1gks9"};
 require('./index.css')
 
 var BaseInternationalPhoneInput = React.forwardRef(function (_a, ref) {
-    var clearableCountryCode = _a.clearableCountryCode, value = _a.value, country = _a.country, onChange = _a.onChange, onCountryChange = _a.onCountryChange, countrySelectProps = _a.countrySelectProps; _a.countries; var 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, bottomSheetHeaderAddonsProps = _a.bottomSheetHeaderAddonsProps, countriesData = _a.countriesData, clear = _a.clear, restProps = tslib.__rest(_a, ["clearableCountryCode", "value", "country", "onChange", "onCountryChange", "countrySelectProps", "countries", "defaultIso2", "disabled", "options", "size", "Input", "InputAutocomplete", "SelectComponent", "view", "bottomSheetHeaderAddonsProps", "countriesData", "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 ? '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 countriesData = React.useMemo(function () { return utils_index.initCountries(countries); }, [countries]);
     var inputRef = React.useRef(null);
     var inputWrapperRef = React.useRef(null);
+    var _c = React.useState(function () {
+        return utils_index.findCountry(countriesData, value, defaultIso2, countryProp);
+    }), selectedCountry = _c[0], setSelectedCountry = _c[1];
+    var filteredOptions = utils_index.filterPhones(value, options, filterFn);
+    var country = countryProp !== null && countryProp !== void 0 ? countryProp : selectedCountry;
+    var handleCountryChange = function (nextCountry) {
+        if (countryProp === undefined)
+            setSelectedCountry(nextCountry);
+        onCountryChange === null || onCountryChange === void 0 ? void 0 : onCountryChange(nextCountry);
+    };
     var maskOptions = React.useMemo(function () { return utils_index.createMaskOptions(country, clearableCountryCode); }, [country, clearableCountryCode]);
     var maskRef = react.useMaskito({ options: maskOptions });
     var changeNumber = function (e, phone) {
@@ -40,14 +51,14 @@ var BaseInternationalPhoneInput = React.forwardRef(function (_a, ref) {
     var updatePhoneData = function (phone, e) {
         var _a = utils_index.getPhoneData(phone, countriesData, defaultIso2), nextCountry = _a.nextCountry, nextPhone = _a.nextPhone;
         if (nextCountry !== country) {
-            onCountryChange === null || onCountryChange === void 0 ? void 0 : onCountryChange(nextCountry);
+            handleCountryChange === null || handleCountryChange === void 0 ? void 0 : handleCountryChange(nextCountry);
         }
         changeNumber(e, nextPhone);
     };
     var handleSelectCountry = function (_a) {
         var selected = _a.selected;
         var nextCountry = selected === null || selected === void 0 ? void 0 : selected.value;
-        onCountryChange === null || onCountryChange === void 0 ? void 0 : onCountryChange(nextCountry);
+        handleCountryChange === null || handleCountryChange === void 0 ? void 0 : handleCountryChange(nextCountry);
         if (nextCountry) {
             changeNumber(null, "+".concat(nextCountry.dialCode));
         }
@@ -77,22 +88,23 @@ var BaseInternationalPhoneInput = React.forwardRef(function (_a, ref) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [value, maskOptions]);
+    var renderCountrySelect = function (compact) {
+        var _a;
+        if (compact === void 0) { compact = false; }
+        return (React__default.default.createElement(components_countrySelect_Component.CountrySelect, tslib.__assign({}, countrySelectProps, { view: view, SelectComponent: SelectComponent, disabled: disabled || (countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.disabled), onChange: handleSelectCountry, country: country, countries: compact ? [] : countriesData, fieldWidth: (_a = inputWrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width })));
+    };
     var inputProps = {
         className: styles.component,
         ref: mergeRefs__default.default([maskRef, ref, inputRef]),
         wrapperRef: inputWrapperRef,
         addonsClassName: styles.addons,
         type: 'tel',
+        clear: utils_index.getClear(clearProp, clearableCountryCode, value, country === null || country === void 0 ? void 0 : country.countryCode),
     };
-    var renderCountrySelect = function () {
-        var _a;
-        return (React__default.default.createElement(components_countrySelect_Component.CountrySelect, tslib.__assign({}, countrySelectProps, { view: view, SelectComponent: SelectComponent, disabled: disabled || (countrySelectProps === null || countrySelectProps === void 0 ? void 0 : countrySelectProps.disabled), onChange: handleSelectCountry, country: country, countries: countriesData, fieldWidth: (_a = inputWrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width })));
-    };
-    return Array.isArray(options) ? (React__default.default.createElement(InputAutocomplete, tslib.__assign({ closeOnSelect: true, Option: shared.BaseOption, size: size }, restProps, { disabled: disabled, options: options, value: value, onChange: handleOptionSelect, bottomSheetHeaderAddonsProps: tslib.__assign(tslib.__assign({}, bottomSheetHeaderAddonsProps), inputProps), inputProps: tslib.__assign(tslib.__assign({}, inputProps), { clear: clear, onClear: handleClear, leftAddons: renderCountrySelect(), onInput: handleInput }), fieldProps: {
-            className: inputProps.className,
-            addonsClassName: inputProps.addonsClassName,
-            leftAddons: renderCountrySelect(),
-        } }))) : (React__default.default.createElement(Input, tslib.__assign({}, restProps, inputProps, { onClear: clear ? handleClear : undefined, clear: clear, 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 (event, _a) {
+            var phone = _a.value;
+            return updatePhoneData(phone, event);
+        }, inputProps: tslib.__assign(tslib.__assign({}, inputProps), { onClear: handleClear, onInput: handleInput, leftAddons: renderCountrySelect(view === 'mobile') }), fieldProps: tslib.__assign({ className: inputProps.className, addonsClassName: inputProps.addonsClassName }, (view === 'mobile' ? { leftAddons: renderCountrySelect() } : null)) }))) : (React__default.default.createElement(Input, tslib.__assign({}, restProps, inputProps, { onClear: inputProps.clear ? handleClear : undefined, leftAddons: renderCountrySelect(), size: size, onInput: handleInput, value: value, disabled: disabled })));
 });
 
 exports.BaseInternationalPhoneInput = BaseInternationalPhoneInput;

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

@@ -1,5 +1,5 @@
-/* hash: 1km27 */
+/* hash: 154xi */
 
-    .international-phone-input__component_1qt4a .international-phone-input__addons_1qt4a {
+    .international-phone-input__component_1gks9 .international-phone-input__addons_1gks9 {
         padding-left: 0;
     }

package/components/country-select/Component.js

@@ -18,7 +18,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var styles = {"component":"international-phone-input__component_ot2vq","option":"international-phone-input__option_ot2vq","flag":"international-phone-input__flag_ot2vq","countryName":"international-phone-input__countryName_ot2vq","dialCode":"international-phone-input__dialCode_ot2vq","flagIconWrapper":"international-phone-input__flagIconWrapper_ot2vq","emptyCountryIcon":"international-phone-input__emptyCountryIcon_ot2vq"};
+var styles = {"component":"international-phone-input__component_u22e5","option":"international-phone-input__option_u22e5","flag":"international-phone-input__flag_u22e5","countryName":"international-phone-input__countryName_u22e5","dialCode":"international-phone-input__dialCode_u22e5","flagIconWrapper":"international-phone-input__flagIconWrapper_u22e5","emptyCountryIcon":"international-phone-input__emptyCountryIcon_u22e5"};
 require('./index.css')
 
 var CountrySelect = function (_a) {

package/components/country-select/index.css

@@ -1,8 +1,8 @@
-/* hash: y1oap */
+/* hash: 1h958 */
 :root {
 } /* deprecated */ :root {
-    --color-light-graphic-secondary: #86868a;
-    --color-light-text-secondary: rgba(60, 60, 67, 0.66); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+    --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 */
 } :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 */
 } :root {
 } :root {
@@ -18,30 +18,29 @@
     --gap-s: 12px;
 } :root {
 } :root {
-    --text-secondary-color: var(--color-light-text-secondary);
-} .international-phone-input__component_ot2vq {
+} .international-phone-input__component_u22e5 {
     position: static;
     display: flex;
     min-width: initial;
     height: 100%;
-} .international-phone-input__option_ot2vq {
+} .international-phone-input__option_u22e5 {
     display: flex;
     align-items: flex-start;
     padding: var(--gap-s);
-} .international-phone-input__flag_ot2vq {
+} .international-phone-input__flag_u22e5 {
     flex-shrink: 0;
     margin-right: var(--gap-xs);
-} .international-phone-input__countryName_ot2vq {
+} .international-phone-input__countryName_u22e5 {
     margin-right: var(--gap-xs);
-} .international-phone-input__dialCode_ot2vq {
-    color: var(--text-secondary-color);
-} .international-phone-input__flagIconWrapper_ot2vq {
+} .international-phone-input__dialCode_u22e5 {
+    color: var(--color-light-text-secondary);
+} .international-phone-input__flagIconWrapper_u22e5 {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 24px;
     height: 24px;
     margin-left: var(--gap-s);
-} .international-phone-input__emptyCountryIcon_ot2vq {
-    color: var(--color-light-graphic-secondary);
+} .international-phone-input__emptyCountryIcon_u22e5 {
+    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_17cii","flagPlaceholder":"international-phone-input__flagPlaceholder_17cii"};
+var styles = {"flagIcon":"international-phone-input__flagIcon_123iz","flagPlaceholder":"international-phone-input__flagPlaceholder_123iz"};
 require('./index.css')
 
 /**

package/components/flag-icon/index.css

@@ -1,7 +1,7 @@
-/* hash: 4j9lc */
+/* hash: 1kcwp */
 :root {
 } /* deprecated */ :root {
-    --color-light-specialbg-tertiary-transparent: rgba(11, 31, 53, 0.1); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+    --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 */
 } :root {
 } :root {
@@ -17,14 +17,14 @@
     --gap-3xs: 2px;
 } :root {
 } :root {
-} .international-phone-input__flagIcon_17cii {
+} .international-phone-input__flagIcon_123iz {
     max-width: 24px;
     max-height: 24px;
-} .international-phone-input__flagPlaceholder_17cii {
+} .international-phone-input__flagPlaceholder_123iz {
     width: 24px;
     height: 16px;
     max-height: 16px;
     border-radius: var(--border-radius-xs);
     margin-top: var(--gap-3xs);
-    background-color: var(--color-light-specialbg-tertiary-transparent);
+    background-color: var(--color-light-neutral-translucent-100);
 }

package/components/select-field/component.js

@@ -17,7 +17,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"international-phone-input__component_dzwdy","flagIconContainer":"international-phone-input__flagIconContainer_dzwdy","emptyCountryIcon":"international-phone-input__emptyCountryIcon_dzwdy","disabled":"international-phone-input__disabled_dzwdy","inner":"international-phone-input__inner_dzwdy","l":"international-phone-input__l_dzwdy","xl":"international-phone-input__xl_dzwdy","focusVisible":"international-phone-input__focusVisible_dzwdy"};
+var styles = {"component":"international-phone-input__component_o88fm","flagIconContainer":"international-phone-input__flagIconContainer_o88fm","emptyCountryIcon":"international-phone-input__emptyCountryIcon_o88fm","disabled":"international-phone-input__disabled_o88fm","inner":"international-phone-input__inner_o88fm","l":"international-phone-input__l_o88fm","xl":"international-phone-input__xl_o88fm","focusVisible":"international-phone-input__focusVisible_o88fm"};
 require('./index.css')
 
 var EMPTY_COUNTRY_SELECT_FIELD = {

package/components/select-field/index.css

@@ -1,8 +1,8 @@
-/* hash: nzb0d */
+/* hash: odefp */
 :root {
 } /* deprecated */ :root {
-    --color-light-border-link: #0072ef;
-    --color-light-graphic-secondary: #86868a; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+    --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 */
 } :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 */
 } :root {
 } :root {
@@ -21,33 +21,33 @@
 } :root {
     --focus-color: var(--color-light-border-link);
     --disabled-cursor: not-allowed;
-} .international-phone-input__component_dzwdy {
+} .international-phone-input__component_o88fm {
     height: 100%;
     cursor: pointer;
     outline: none;
     position: relative;
-} .international-phone-input__flagIconContainer_dzwdy {
+} .international-phone-input__flagIconContainer_o88fm {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 24px;
     height: 24px;
     margin-right: var(--gap-2xs);
-} .international-phone-input__emptyCountryIcon_dzwdy {
-    color: var(--color-light-graphic-secondary);
-} .international-phone-input__disabled_dzwdy {
+} .international-phone-input__emptyCountryIcon_o88fm {
+    color: var(--color-light-neutral-translucent-700);
+} .international-phone-input__disabled_o88fm {
     cursor: var(--disabled-cursor);
-} .international-phone-input__inner_dzwdy {
+} .international-phone-input__inner_o88fm {
     position: relative;
     display: flex;
     align-items: center;
     height: 100%;
     padding-left: var(--gap-s);
     outline: none;
-} .international-phone-input__l_dzwdy .international-phone-input__inner_dzwdy,
-.international-phone-input__xl_dzwdy .international-phone-input__inner_dzwdy {
+} .international-phone-input__l_o88fm .international-phone-input__inner_o88fm,
+.international-phone-input__xl_o88fm .international-phone-input__inner_o88fm {
     padding-left: var(--gap-m);
-} .international-phone-input__focusVisible_dzwdy {
+} .international-phone-input__focusVisible_o88fm {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/consts-f777ba1a.d.ts

@@ -0,0 +1,2 @@
+declare const DEFAULT_VISIBLE_OPTIONS = 5;
+export { DEFAULT_VISIBLE_OPTIONS };

package/cssm/Component-0816e61d.d.ts

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