@alfalab/core-components-international-phone-input 1.0.0

package/modern/Component.mobile-4cd3936b.d.ts

@@ -0,0 +1,98 @@
+/// <reference types="react" />
+import React from 'react';
+import { ChangeEvent, ElementType } from "react";
+import { ButtonMobileProps } from "./mobile-755fbaa3";
+import { AdditionalMobileProps, BaseSelectChangePayload, BaseSelectProps } from "./shared-4cd3936b";
+type InputAutocompleteMobileProps = Omit<BaseSelectProps, 'OptionsList' | 'Checkmark' | 'onScroll' | 'nativeSelect' | 'autocomplete' | 'valueRenderer'> & {
+    /**
+     * Обработчик выбора
+     */
+    onChange: (payload: string | BaseSelectChangePayload) => void;
+    /**
+     * Обработчик ввода фильтра.
+     */
+    onFilter: (event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Значение поля ввода
+     */
+    value?: string;
+    /**
+     * Значение фильтра.
+     */
+    filter?: string;
+    /**
+     * Обработчик нажатия на кнопку "Отмена".
+     */
+    onCancel?: () => void;
+    /**
+     * Обработчик нажатия на крестик в инпуте фильтра.
+     */
+    onClearFilter?: () => void;
+    /**
+     * Дополнительные пропсы компонента BottomSheet
+     */
+    bottomSheetProps?: AdditionalMobileProps['bottomSheetProps'];
+    /**
+     * Дополнительные пропсы на слот под заголовком компонента BottomSheet
+     */
+    bottomSheetHeaderAddonsProps?: Record<string, unknown>;
+    /**
+     * Дополнительные пропсы на кнопку "продолжить"
+     */
+    continueButtonProps?: ButtonMobileProps;
+    /**
+     * Дополнительные пропсы на кнопку "отмена"
+     */
+    cancelButtonProps?: ButtonMobileProps;
+    /**
+     * Кастомный инпут
+     */
+    Input?: ElementType;
+};
+declare const InputAutocompleteMobile: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "onScroll" | "valueRenderer" | "autocomplete" | "nativeSelect" | "OptionsList" | "Checkmark"> & {
+    /**
+     * Обработчик выбора
+     */
+    onChange: (payload: string | BaseSelectChangePayload) => void;
+    /**
+     * Обработчик ввода фильтра.
+     */
+    onFilter: (event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Значение поля ввода
+     */
+    value?: string | undefined;
+    /**
+     * Значение фильтра.
+     */
+    filter?: string | undefined;
+    /**
+     * Обработчик нажатия на кнопку "Отмена".
+     */
+    onCancel?: (() => void) | undefined;
+    /**
+     * Обработчик нажатия на крестик в инпуте фильтра.
+     */
+    onClearFilter?: (() => void) | undefined;
+    /**
+     * Дополнительные пропсы компонента BottomSheet
+     */
+    bottomSheetProps?: AdditionalMobileProps['bottomSheetProps'];
+    /**
+     * Дополнительные пропсы на слот под заголовком компонента BottomSheet
+     */
+    bottomSheetHeaderAddonsProps?: Record<string, unknown> | undefined;
+    /**
+     * Дополнительные пропсы на кнопку "продолжить"
+     */
+    continueButtonProps?: ButtonMobileProps | undefined;
+    /**
+     * Дополнительные пропсы на кнопку "отмена"
+     */
+    cancelButtonProps?: ButtonMobileProps | undefined;
+    /**
+     * Кастомный инпут
+     */
+    Input?: React.ElementType<any> | undefined;
+} & React.RefAttributes<unknown>>;
+export { InputAutocompleteMobileProps, InputAutocompleteMobile };

package/modern/Component.mobile-755fbaa3.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { AnchorButtonProps, NativeButtonProps } from "./typings-9211a437";
+type ButtonMobileProps = Partial<AnchorButtonProps | NativeButtonProps>;
+declare const ButtonMobile: React.ForwardRefExoticComponent<ButtonMobileProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export { ButtonMobileProps, ButtonMobile };

package/modern/Component.mobile-ade26e99.d.ts

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+import React from 'react';
+import { ReactNode } from "react";
+import { BottomSheetProps } from "./index-f12ee135";
+import { UseSelectWithApplyProps } from "./hook-8abfea97";
+import { BaseSelectProps } from "./typings-dd8ca091";
+type AdditionalMobileProps = {
+    /**
+     * Футер
+     * @deprecated Используйте bottomSheetProps.actionButton
+     */
+    footer?: ReactNode;
+    /**
+     * Будет ли свайпаться шторка
+     * @deprecated Используйте bottomSheetProps.swipeable
+     */
+    swipeable?: boolean;
+    /**
+     * Дополнительные пропсы шторки
+     */
+    bottomSheetProps?: Partial<BottomSheetProps>;
+    /**
+     * Показывать кнопку очистки
+     */
+    showClear?: UseSelectWithApplyProps['showClear'];
+    /**
+     * Показывать пункт "Выбрать все"
+     */
+    showSelectAll?: UseSelectWithApplyProps['showSelectAll'];
+    /**
+     * Показывать пункт "Выбрать все" в заголовке списка
+     */
+    showHeaderWithSelectAll?: UseSelectWithApplyProps['showHeaderWithSelectAll'];
+    /**
+     * Использовать ли хук useSelectWithApply
+     */
+    useWithApplyHook?: boolean;
+};
+type SelectMobileProps = Omit<BaseSelectProps, 'Checkmark' | 'onScroll'> & AdditionalMobileProps;
+declare const SelectMobile: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "onScroll" | "Checkmark"> & AdditionalMobileProps & React.RefAttributes<unknown>>;
+export { AdditionalMobileProps, SelectMobileProps, SelectMobile };

package/modern/Component.mobile-d7e9f69d.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseFormControlProps } from "./index-ebda875c";
+type FormControlMobileProps = Omit<BaseFormControlProps, 'styles' | 'colorStyles'>;
+declare const FormControlMobile: React.ForwardRefExoticComponent<FormControlMobileProps & React.RefAttributes<HTMLDivElement>>;
+export { FormControlMobileProps, FormControlMobile };

package/modern/Component.mobile-ebda875c.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseInputProps } from "./index-ebda875c";
+type InputMobileProps = Omit<BaseInputProps, 'FormControlComponent' | 'colorStyles'>;
+declare const InputMobile: React.ForwardRefExoticComponent<InputMobileProps & React.RefAttributes<HTMLInputElement>>;
+export { InputMobileProps, InputMobile };

package/modern/Component.mobile-f1f15074.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import React from "react";
+import { FC, ReactNode } from "react";
+import { ContentProps, ModalMobileProps } from "./typings-bdb4c6b9";
+declare const Content: FC<ContentProps>;
+type FooterProps = {
+    /**
+     * Контент футера
+     */
+    children?: ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Фиксирует футер
+     */
+    sticky?: boolean;
+    /**
+     * Выравнивание элементов футера
+     */
+    layout?: "start" | "center" | "space-between" | "column";
+    /**
+     * Отступы между элементами футера
+     */
+    gap?: 16 | 24 | 32;
+};
+declare const Footer: FC<FooterProps>;
+declare const ModalMobile: React.ForwardRefExoticComponent<ModalMobileProps & React.RefAttributes<HTMLDivElement>> & {
+    Content: React.FC<import("./typings-bdb4c6b9").ContentProps>;
+    Header: React.FC<import("./Component-c76d6398").HeaderProps>;
+    Footer: React.FC<FooterProps>;
+};
+export { Content, FooterProps, Footer, ModalMobile };

package/modern/Component.mobile.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { InternationalPhoneInputMobileProps } from "./types";
+declare const InternationalPhoneInputMobile: React.ForwardRefExoticComponent<InternationalPhoneInputMobileProps & React.RefAttributes<HTMLInputElement>>;
+export { InternationalPhoneInputMobile };

package/modern/Component.mobile.js

@@ -0,0 +1,77 @@
+import React, { forwardRef, useMemo, useState } from 'react';
+import { InputMobile } from '@alfalab/core-components-input/modern/mobile';
+import { InputAutocompleteMobile } from '@alfalab/core-components-input-autocomplete/modern/mobile';
+import { SelectMobile } from '@alfalab/core-components-select/modern/mobile';
+import { BaseInternationalPhoneInput } from './components/base-international-phone-input/Component.js';
+import { CountrySelect } from './components/country-select/Component.js';
+import { initCountries, findCountry, filterPhones, getClear, getPhoneData } from './utils/index.js';
+import 'react-merge-refs';
+import '@maskito/core';
+import '@maskito/react';
+import '@alfalab/core-components-select/modern/shared';
+import '@alfalab/core-components-shared/modern';
+import '@alfalab/icons-glyph/WorldMagnifierMIcon';
+import './components/flag-icon/component.js';
+import 'classnames';
+import './components/flag-icon/flagSprite.js';
+import './components/select-field/component.js';
+import '@alfalab/hooks';
+import './consts.js';
+import './data/country-data.js';
+
+const InternationalPhoneInputMobile = forwardRef(({ options, country: countryProp, onCountryChange, value, filterFn, countries, defaultIso2, clear: clearProp, clearableCountryCode = true, ...restProps }, ref) => {
+    const typedRestProps = restProps;
+    const countriesData = useMemo(() => initCountries(countries), [countries]);
+    const [filter, setFilter] = useState('');
+    const [filterCountry, setFilterCountry] = useState();
+    const [selectedCountry, setSelectedCountry] = useState(() => findCountry(countriesData, value, defaultIso2, countryProp));
+    const filteredOptions = filterPhones(filter, options, filterFn);
+    const country = countryProp ?? selectedCountry;
+    const countryCode = country?.countryCode;
+    const handleCountryChange = (nextCountry) => {
+        if (countryProp === undefined)
+            setSelectedCountry(nextCountry);
+        onCountryChange?.(nextCountry);
+    };
+    const handleFilter = (event) => {
+        const { nextPhone, nextCountry } = getPhoneData(event.target.value, countriesData, defaultIso2);
+        setFilter(nextPhone);
+        setFilterCountry(nextCountry);
+    };
+    const handleFilterClear = () => {
+        const withCountryCode = !clearableCountryCode && filterCountry?.countryCode;
+        setFilter(withCountryCode ? `+${filterCountry.countryCode}` : '');
+    };
+    const handleEnter = (node, isAppearing) => {
+        typedRestProps.bottomSheetProps?.transitionProps?.onEnter?.(node, isAppearing);
+        setFilterCountry(country);
+        setFilter(countryCode ? `+${country.countryCode}` : '');
+    };
+    const isAutocomplete = Array.isArray(options);
+    const props = isAutocomplete
+        ? (() => {
+            const clear = getClear(clearProp, clearableCountryCode, filter, countryCode);
+            return {
+                filter,
+                onFilter: handleFilter,
+                onClearFilter: clear ? handleFilterClear : undefined,
+                bottomSheetHeaderAddonsProps: {
+                    ...typedRestProps.bottomSheetHeaderAddonsProps,
+                    leftAddons: (React.createElement(CountrySelect, { SelectComponent: SelectMobile, view: 'mobile', country: filterCountry })),
+                },
+                bottomSheetProps: {
+                    ...typedRestProps.bottomSheetProps,
+                    transitionProps: {
+                        ...typedRestProps.bottomSheetProps?.transitionProps,
+                        onEnter: handleEnter,
+                    },
+                },
+            };
+        })()
+        : {
+            clear: getClear(clearProp, clearableCountryCode, value, countryCode),
+        };
+    return (React.createElement(BaseInternationalPhoneInput, { selected: value, ...restProps, ...props, clearableCountryCode: clearableCountryCode, onCountryChange: handleCountryChange, country: country, defaultIso2: defaultIso2, countriesData: countriesData, value: value, options: filteredOptions, view: 'mobile', ref: ref, SelectComponent: SelectMobile, Input: InputMobile, InputAutocomplete: InputAutocompleteMobile }));
+});
+
+export { InternationalPhoneInputMobile };

package/modern/Component.modal.mobile-4cd3936b.d.ts

@@ -0,0 +1,91 @@
+/// <reference types="react" />
+import React from 'react';
+import { ChangeEvent, ElementType } from "react";
+import { ButtonMobileProps } from "./mobile-755fbaa3";
+import { SelectModalMobileProps } from "./mobile-ade26e99";
+import { BaseSelectChangePayload } from "./shared-4cd3936b";
+type InputAutocompleteModalMobileProps = Omit<SelectModalMobileProps, 'OptionsList' | 'Checkmark' | 'onScroll' | 'nativeSelect' | 'autocomplete' | 'valueRenderer'> & {
+    /**
+     * Обработчик выбора
+     */
+    onChange: (payload: string | BaseSelectChangePayload) => void;
+    /**
+     * Обработчик ввода фильтра.
+     */
+    onFilter: (event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Значение поля ввода
+     */
+    value?: string;
+    /**
+     * Значение фильтра.
+     */
+    filter?: string;
+    /**
+     * Обработчик нажатия на кнопку "Отмена".
+     */
+    onCancel?: () => void;
+    /**
+     * Обработчик нажатия на крестик в инпуте фильтра.
+     */
+    onClearFilter?: () => void;
+    /**
+     * Дополнительные пропсы на слот под заголовком
+     */
+    bottomAddonProps?: Record<string, unknown>;
+    /**
+     * Дополнительные пропсы на кнопку "продолжить"
+     */
+    continueButtonProps?: ButtonMobileProps;
+    /**
+     * Дополнительные пропсы на кнопку "отмена"
+     */
+    cancelButtonProps?: ButtonMobileProps;
+    /**
+     * Кастомный инпут
+     */
+    Input?: ElementType;
+};
+declare const InputAutocompleteModalMobile: React.ForwardRefExoticComponent<Omit<SelectModalMobileProps, "onScroll" | "valueRenderer" | "autocomplete" | "nativeSelect" | "OptionsList" | "Checkmark"> & {
+    /**
+     * Обработчик выбора
+     */
+    onChange: (payload: string | BaseSelectChangePayload) => void;
+    /**
+     * Обработчик ввода фильтра.
+     */
+    onFilter: (event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Значение поля ввода
+     */
+    value?: string | undefined;
+    /**
+     * Значение фильтра.
+     */
+    filter?: string | undefined;
+    /**
+     * Обработчик нажатия на кнопку "Отмена".
+     */
+    onCancel?: (() => void) | undefined;
+    /**
+     * Обработчик нажатия на крестик в инпуте фильтра.
+     */
+    onClearFilter?: (() => void) | undefined;
+    /**
+     * Дополнительные пропсы на слот под заголовком
+     */
+    bottomAddonProps?: Record<string, unknown> | undefined;
+    /**
+     * Дополнительные пропсы на кнопку "продолжить"
+     */
+    continueButtonProps?: ButtonMobileProps | undefined;
+    /**
+     * Дополнительные пропсы на кнопку "отмена"
+     */
+    cancelButtonProps?: ButtonMobileProps | undefined;
+    /**
+     * Кастомный инпут
+     */
+    Input?: React.ElementType<any> | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { InputAutocompleteModalMobileProps, InputAutocompleteModalMobile };

package/modern/Component.modal.mobile-dd8ca091.d.ts

@@ -0,0 +1,60 @@
+/// <reference types="react" />
+import React from 'react';
+import { ModalMobile } from "./Component.mobile-f1f15074";
+import { UseSelectWithApplyProps } from "./hook-8abfea97";
+import { BaseSelectProps } from "./typings-dd8ca091";
+type SelectModalMobileProps = Omit<BaseSelectProps, 'Checkmark' | 'onScroll'> & {
+    /**
+     * Показывать кнопку очистки
+     */
+    showClear?: UseSelectWithApplyProps['showClear'];
+    /**
+     * Показывать пункт "Выбрать все"
+     */
+    showSelectAll?: UseSelectWithApplyProps['showSelectAll'];
+    /**
+     *  Дополнительные пропсы шапки модалки
+     */
+    modalHeaderProps?: Partial<React.ComponentProps<typeof ModalMobile.Header>>;
+    /**
+     *  Дополнительные пропсы модалки
+     */
+    modalProps?: Partial<React.ComponentProps<typeof ModalMobile>>;
+    /**
+     *  Дополнительные пропсы футера модалки
+     */
+    modalFooterProps?: Partial<React.ComponentProps<typeof ModalMobile.Footer>>;
+    showHeaderWithSelectAll?: UseSelectWithApplyProps['showHeaderWithSelectAll'];
+    /**
+     * Использовать ли хук useSelectWithApply
+     */
+    useWithApplyHook?: boolean;
+};
+declare const SelectModalMobile: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "onScroll" | "Checkmark"> & {
+    /**
+     * Показывать кнопку очистки
+     */
+    showClear?: UseSelectWithApplyProps['showClear'];
+    /**
+     * Показывать пункт "Выбрать все"
+     */
+    showSelectAll?: UseSelectWithApplyProps['showSelectAll'];
+    /**
+     *  Дополнительные пропсы шапки модалки
+     */
+    modalHeaderProps?: Partial<import("./Component-c76d6398").HeaderProps> | undefined;
+    /**
+     *  Дополнительные пропсы модалки
+     */
+    modalProps?: Partial<import("./typings-bdb4c6b9").ModalMobileProps & React.RefAttributes<HTMLDivElement>> | undefined;
+    /**
+     *  Дополнительные пропсы футера модалки
+     */
+    modalFooterProps?: Partial<import("./Component.mobile-f1f15074").FooterProps> | undefined;
+    showHeaderWithSelectAll?: UseSelectWithApplyProps['showHeaderWithSelectAll'];
+    /**
+     * Использовать ли хук useSelectWithApply
+     */
+    useWithApplyHook?: boolean | undefined;
+} & React.RefAttributes<unknown>>;
+export { SelectModalMobileProps, SelectModalMobile };

package/modern/Component.responsive-785df74d.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseFormControlProps } from "./index-ebda875c";
+type FormControlProps = Omit<BaseFormControlProps, 'styles' | 'colorStyles'> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
+};
+declare const FormControl: React.ForwardRefExoticComponent<Omit<BaseFormControlProps, "styles" | "colorStyles"> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number | undefined;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { FormControlProps, FormControl };

package/modern/Component.responsive.d.ts

@@ -0,0 +1,46 @@
+/// <reference types="react" />
+import React from 'react';
+declare const InternationalPhoneInput: React.ForwardRefExoticComponent<(({
+    country?: import("./types").Country | undefined;
+    countries?: string[] | undefined;
+    defaultIso2?: string | undefined;
+    clearableCountryCode?: boolean | undefined;
+    countrySelectProps?: import("./components/country-select/index").SharedCountrySelectProps | undefined;
+    clear?: boolean | undefined;
+    filterFn?: ((value: string | undefined, option: import("./typings-dd8ca091").OptionShape) => boolean) | undefined;
+    onCountryChange?: ((country?: import("./types").Country | undefined) => void) | undefined;
+    onChange?: ((e: React.ChangeEvent<HTMLInputElement> | null, { value }: {
+        value: string;
+    }) => void) | undefined;
+    onBlur?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
+    onFocus?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
+} & {
+    options?: undefined;
+} & Omit<import("./Component.desktop-d873d97d").InputDesktopProps, "onFocus" | "onBlur" | "onChange" | "clear" | "onClear"> & {
+    options?: undefined;
+} & Omit<import("./Component.mobile-ebda875c").InputMobileProps, "onFocus" | "onBlur" | "onChange" | "clear" | "onClear"> & {
+    breakpoint?: number | undefined;
+    defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
+}) | ({
+    country?: import("./types").Country | undefined;
+    countries?: string[] | undefined;
+    defaultIso2?: string | undefined;
+    clearableCountryCode?: boolean | undefined;
+    countrySelectProps?: import("./components/country-select/index").SharedCountrySelectProps | undefined;
+    clear?: boolean | undefined;
+    filterFn?: ((value: string | undefined, option: import("./typings-dd8ca091").OptionShape) => boolean) | undefined;
+    onCountryChange?: ((country?: import("./types").Country | undefined) => void) | undefined;
+    onChange?: ((e: React.ChangeEvent<HTMLInputElement> | null, { value }: {
+        value: string;
+    }) => void) | undefined;
+    onBlur?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
+    onFocus?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
+} & {
+    options: (import("./typings-dd8ca091").OptionShape | import("./typings-dd8ca091").GroupShape)[];
+} & Omit<import("./Component.desktop-d078a845").InputAutocompleteDesktopProps, "onChange"> & {
+    options: (import("./typings-dd8ca091").OptionShape | import("./typings-dd8ca091").GroupShape)[];
+} & Omit<import("./Component.mobile-4cd3936b").InputAutocompleteMobileProps, "onChange" | "filter" | "onFilter" | "onClearFilter"> & {
+    breakpoint?: number | undefined;
+    defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
+})) & React.RefAttributes<HTMLInputElement>>;
+export { InternationalPhoneInput };

package/modern/Component.responsive.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { useMatchMedia } from '@alfalab/core-components-mq/modern';
+import { InternationalPhoneInputDesktop } from './Component.desktop.js';
+import { InternationalPhoneInputMobile } from './Component.mobile.js';
+import '@alfalab/core-components-input/modern/Component.desktop';
+import '@alfalab/core-components-input-autocomplete/modern/desktop';
+import '@alfalab/core-components-select/modern/desktop';
+import './components/base-international-phone-input/Component.js';
+import 'react-merge-refs';
+import '@maskito/core';
+import '@maskito/react';
+import '@alfalab/core-components-select/modern/shared';
+import './utils/index.js';
+import '@alfalab/core-components-shared/modern';
+import './consts.js';
+import './data/country-data.js';
+import './components/country-select/Component.js';
+import '@alfalab/icons-glyph/WorldMagnifierMIcon';
+import './components/flag-icon/component.js';
+import 'classnames';
+import './components/flag-icon/flagSprite.js';
+import './components/select-field/component.js';
+import '@alfalab/hooks';
+import '@alfalab/core-components-input/modern/mobile';
+import '@alfalab/core-components-input-autocomplete/modern/mobile';
+import '@alfalab/core-components-select/modern/mobile';
+
+const InternationalPhoneInput = React.forwardRef(({ breakpoint = 1024, defaultMatchMediaValue, ...restProps }, ref) => {
+    const [isDesktop] = useMatchMedia(`(min-width: ${breakpoint}px)`, defaultMatchMediaValue);
+    return isDesktop ? (React.createElement(InternationalPhoneInputDesktop, { ...restProps, ref: ref })) : (React.createElement(InternationalPhoneInputMobile, { ...restProps, ref: ref }));
+});
+
+export { InternationalPhoneInput };

package/modern/Context-bdb4c6b9.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { BaseModalContext } from "./index-bdb4c6b9";
+declare const ModalContext: import("react").Context<BaseModalContext>;
+export { ModalContext };

package/modern/ResponsiveContext-baf4875b.d.ts

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

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

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import React from 'react';
+import { InputAutocompleteProps } from "@alfalab/core-components-input-autocomplete";
+import { Country } from "../../types";
+declare const BaseInternationalPhoneInput: React.ForwardRefExoticComponent<{
+    country?: Country | undefined;
+    countries?: string[] | undefined;
+    defaultIso2?: string | undefined;
+    clearableCountryCode?: boolean | undefined;
+    countrySelectProps?: import("../country-select/index").SharedCountrySelectProps | undefined;
+    clear?: boolean | undefined;
+    filterFn?: ((value: string | undefined, option: import("../../typings-dd8ca091").OptionShape) => boolean) | undefined;
+    onCountryChange?: ((country?: Country | undefined) => void) | undefined;
+    onChange?: ((e: React.ChangeEvent<HTMLInputElement> | null, { value }: {
+        value: string;
+    }) => void) | undefined;
+    onBlur?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
+    onFocus?: ((event: React.FocusEvent<HTMLDivElement | HTMLInputElement, Element>) => void) | undefined;
+} & {
+    Input: React.FC<import("packages/input/src").InputProps>;
+    InputAutocomplete: React.FC<InputAutocompleteProps>;
+    SelectComponent: React.ElementType<any>;
+    view: "mobile" | "desktop";
+    countriesData: Country[][];
+} & Omit<import("packages/input/src").InputProps, "onFocus" | "onBlur" | "onScroll"> & Partial<Omit<InputAutocompleteProps, "leftAddons" | "onChange" | "onScroll">> & React.RefAttributes<HTMLInputElement>>;
+export { BaseInternationalPhoneInput };