@alfalab/core-components-input-autocomplete 10.0.0 → 10.0.2

package/esm/Component.responsive.js

@@ -14,7 +14,7 @@ import '@alfalab/core-components-input/esm';
 import '@alfalab/core-components-select/esm/mobile';
 import './autocomplete-mobile-field/Component.js';
 import '@alfalab/core-components-form-control/esm/mobile';
-import './mobile.module-ed5594fa.js';
+import './mobile.module-bb0cbc57.js';
 
 var InputAutocompleteResponsive = forwardRef(function (_a, ref) {
     var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = __rest(_a, ["breakpoint"]);

package/esm/autocomplete-field/Component.js

@@ -4,7 +4,7 @@ import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 import { InputDesktop } from '@alfalab/core-components-input/esm/desktop';
 
-var styles = {"arrow":"input-autocomplete__arrow_1d0j6","error":"input-autocomplete__error_1d0j6"};
+var styles = {"arrow":"input-autocomplete__arrow_xva07","error":"input-autocomplete__error_xva07"};
 require('./index.css')
 
 var AutocompleteField = function (_a) {

package/esm/autocomplete-field/index.css

@@ -1,4 +1,4 @@
-/* hash: h86c0 */
-.input-autocomplete__arrow_1d0j6.input-autocomplete__error_1d0j6 ~ * {
+/* hash: za9c8 */
+.input-autocomplete__arrow_xva07.input-autocomplete__error_xva07 ~ * {
     display: none;
 }

package/esm/autocomplete-mobile-field/Component.d.ts

@@ -1,8 +1,12 @@
 /// <reference types="react" />
 import React from 'react';
 import { FormControlMobileProps } from "../mobile-96988a65";
-import { InputAutocompleteProps } from "../index";
 import { FieldProps as BaseFieldProps } from "../shared-4cd3936b";
-type AutocompleteMobileFieldProps = FormControlMobileProps & Omit<BaseFieldProps, 'selected' | 'multiple' | 'success'> & Pick<InputAutocompleteProps, 'value'>;
+type AutocompleteMobileFieldProps = FormControlMobileProps & Omit<BaseFieldProps, 'selected' | 'multiple' | 'success'> & {
+    /**
+     * Значение поля ввода
+     */
+    value?: string;
+};
 declare const AutocompleteMobileField: ({ size, open, disabled, value, innerProps, dataTestId, fieldClassName, labelView, placeholder, Arrow, valueRenderer, toggleMenu, setSelectedItems, selectedMultiple, ...restProps }: AutocompleteMobileFieldProps) => React.JSX.Element;
 export { AutocompleteMobileFieldProps, AutocompleteMobileField };

package/esm/autocomplete-mobile-field/Component.js

@@ -4,7 +4,7 @@ import cn from 'classnames';
 import { FormControlMobile } from '@alfalab/core-components-form-control/esm/mobile';
 import { useFocus } from '@alfalab/hooks';
 
-var styles = {"component":"input-autocomplete__component_3dpk8","field":"input-autocomplete__field_3dpk8","disabled":"input-autocomplete__disabled_3dpk8","placeholder":"input-autocomplete__placeholder_3dpk8","contentWrapper":"input-autocomplete__contentWrapper_3dpk8","value":"input-autocomplete__value_3dpk8","focusVisible":"input-autocomplete__focusVisible_3dpk8"};
+var styles = {"component":"input-autocomplete__component_xkbli","field":"input-autocomplete__field_xkbli","disabled":"input-autocomplete__disabled_xkbli","placeholder":"input-autocomplete__placeholder_xkbli","contentWrapper":"input-autocomplete__contentWrapper_xkbli","value":"input-autocomplete__value_xkbli","focusVisible":"input-autocomplete__focusVisible_xkbli"};
 require('./index.css')
 
 var AutocompleteMobileField = function (_a) {

package/esm/autocomplete-mobile-field/index.css

@@ -1,4 +1,4 @@
-/* hash: obwmz */
+/* hash: doomx */
 :root {
 } /* deprecated */ :root {
     --color-light-border-link: #0072ef;
@@ -18,16 +18,16 @@
 } :root {
     --focus-color: var(--color-light-border-link);
     --disabled-cursor: not-allowed;
-} .input-autocomplete__component_3dpk8 {
+} .input-autocomplete__component_xkbli {
     width: 100%;
     outline: none;
-} .input-autocomplete__field_3dpk8:not(.input-autocomplete__disabled_3dpk8) {
+} .input-autocomplete__field_xkbli:not(.input-autocomplete__disabled_xkbli) {
     cursor: pointer;
-} .input-autocomplete__disabled_3dpk8 {
+} .input-autocomplete__disabled_xkbli {
     cursor: var(--disabled-cursor);
-} .input-autocomplete__placeholder_3dpk8 {
+} .input-autocomplete__placeholder_xkbli {
     color: var(--color-light-text-secondary);
-} .input-autocomplete__contentWrapper_3dpk8 {
+} .input-autocomplete__contentWrapper_xkbli {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -36,11 +36,11 @@
     text-overflow: ellipsis;
     overflow: hidden;
     width: 100%;
-} .input-autocomplete__value_3dpk8 {
+} .input-autocomplete__value_xkbli {
     overflow: hidden;
     text-overflow: ellipsis;
     text-align: left;
-} .input-autocomplete__focusVisible_3dpk8 {
+} .input-autocomplete__focusVisible_xkbli {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/{cssm/component-89a3cf4c.d.ts → esm/component-50136800.d.ts}

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import React from "react";
 import { FC, ReactNode, RefObject } from "react";
-import { NavigationBarProps } from "./index-e81c389f";
+import { NavigationBarProps } from "./index-c76d6398";
 import { SwipeableHandlers } from "react-swipeable";
 import { BackdropProps } from "./index-ebda875c";
 import { BottomSheetProps } from "./types-d9f9bbcc";

package/esm/index-50136800.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import React from "react";
+import { PaddingType } from "./index-72dda473";
+declare const isClient: () => boolean;
+declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
+declare function createPaddingStyle(padding?: PaddingType): undefined | React.CSSProperties;
+declare function easeInOutQuad(x: number): number;
+declare const easingFns: {
+    easeInOutQuad: typeof easeInOutQuad;
+};
+export { isClient, getDataTestId, createPaddingStyle, easingFns };

package/{cssm/index-425c8522.d.ts → esm/index-72dda473.d.ts}

@@ -3,4 +3,10 @@ type BorderColorType = 'accent' | 'key' | 'key-inverted' | 'link' | 'primary' |
 type GraphicColorType = 'accent' | 'link' | 'attention' | 'positive' | 'negative' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'quaternary' | 'quaternary-inverted' | 'static-light' | 'static-accent' | 'static-dark';
 type ShadowType = 'shadow-xs' | 'shadow-s' | 'shadow-m' | 'shadow-l' | 'shadow-xl' | 'shadow-xs-hard' | 'shadow-s-hard' | 'shadow-m-hard' | 'shadow-l-hard' | 'shadow-xl-hard' | 'shadow-xs-up' | 'shadow-s-up' | 'shadow-m-up' | 'shadow-l-up' | 'shadow-xl-up' | 'shadow-xs-hard-up' | 'shadow-s-hard-up' | 'shadow-m-hard-up' | 'shadow-l-hard-up' | 'shadow-xl-hard-up';
 type GapType = '3xs' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl';
-export { BackgroundColorType, BorderColorType, GraphicColorType, ShadowType, GapType };
+type PaddingType = number | string | {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+};
+export { BackgroundColorType, BorderColorType, GraphicColorType, ShadowType, GapType, PaddingType };

package/esm/index-c76d6398.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component-50136800";
+export type { NavigationBarProps } from "./types-83e2bd9e";

package/esm/index-f12ee135.d.ts

@@ -1,3 +1,3 @@
-export * from "./component-89a3cf4c";
+export * from "./component-50136800";
 export type { BottomSheetProps, BottomSheetTitleAlign } from "./types-d9f9bbcc";
 export { CLOSE_OFFSET, HEADER_OFFSET } from "./utils-49cc3c24";

package/esm/index.js

@@ -15,4 +15,4 @@ import '@alfalab/core-components-input/esm';
 import '@alfalab/core-components-select/esm/mobile';
 import './autocomplete-mobile-field/Component.js';
 import '@alfalab/core-components-form-control/esm/mobile';
-import './mobile.module-ed5594fa.js';
+import './mobile.module-bb0cbc57.js';

package/esm/mobile.css

@@ -1,4 +1,4 @@
-/* hash: ripaa */
+/* hash: 11qxi */
 :root {
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :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 */
@@ -16,11 +16,11 @@
     --gap-m: 16px;
 } :root {
 } :root {
-} .input-autocomplete__bottomAddonInput_aij30 {
+} .input-autocomplete__bottomAddonInput_10by6 {
     padding: 0 var(--gap-xs) var(--gap-xs);
     box-sizing: border-box;
-} .input-autocomplete__footer_aij30 {
+} .input-autocomplete__footer_10by6 {
     display: flex
-} .input-autocomplete__footer_aij30 > button + button {
+} .input-autocomplete__footer_10by6 > button + button {
         margin-left: var(--gap-m);
     }

package/esm/mobile.js

@@ -11,4 +11,4 @@ import '@alfalab/core-components-select/esm/mobile';
 import './autocomplete-mobile-field/Component.js';
 import '@alfalab/core-components-form-control/esm/mobile';
 import '@alfalab/hooks';
-import './mobile.module-ed5594fa.js';
+import './mobile.module-bb0cbc57.js';

package/esm/{mobile.module-ed5594fa.js → mobile.module-bb0cbc57.js}

@@ -1,4 +1,4 @@
-var styles = {"bottomAddonInput":"input-autocomplete__bottomAddonInput_aij30","footer":"input-autocomplete__footer_aij30"};
+var styles = {"bottomAddonInput":"input-autocomplete__bottomAddonInput_10by6","footer":"input-autocomplete__footer_10by6"};
 require('./mobile.css')
 
 export { styles as s };

package/esm/types-d9f9bbcc.d.ts

@@ -2,8 +2,8 @@
 import { HTMLAttributes, ReactNode, RefObject } from 'react';
 import { TransitionProps } from 'react-transition-group/Transition';
 import { BaseModalProps } from "./index-bdb4c6b9";
-import { NavigationBarProps } from "./index-e81c389f";
-import { BackgroundColorType } from "./index-425c8522";
+import { NavigationBarProps } from "./index-c76d6398";
+import { BackgroundColorType } from "./index-72dda473";
 type BottomSheetTitleAlign = 'center' | 'left';
 type BottomSheetProps = {
     /**

package/hook-9ea9e32c.d.ts

@@ -41,9 +41,9 @@ declare function useSelectWithApply({ options, selected, onChange, OptionsList,
         onClose?: (() => void) | undefined;
         selectedDraft?: OptionShape[] | undefined;
         OptionsList?: import("react").FC<import("./typings-5e1b8383").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
-        Footer?: import("react").FC<import("./Component-63dec22f").FooterProps> | undefined;
-        Header?: import("react").FC<import("./Component-aed0af6e").HeaderProps> | undefined;
-        headerProps?: import("./Component-aed0af6e").HeaderProps | undefined; /**
+        Footer?: import("react").FC<import("./Component-5e1b8383").FooterProps> | undefined;
+        Header?: import("react").FC<import("./Component-ebda875c").HeaderProps> | undefined;
+        headerProps?: import("./Component-ebda875c").HeaderProps | undefined; /**
          * Показывать кнопку очистки
          */
         showHeaderWithSelectAll?: boolean | undefined;
@@ -71,5 +71,5 @@ declare function useSelectWithApply({ options, selected, onChange, OptionsList,
     onChange: (payload: import("./typings-5e1b8383").BaseSelectChangePayload) => void;
     selected: string | OptionShape | (string | OptionShape)[] | null | undefined;
 };
-export * from "./Component-ebda875c";
+export * from "./Component-5e1b8383";
 export { UseSelectWithApplyProps, SELECT_ALL_KEY, useSelectWithApply };

package/index-50136800.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import React from "react";
+import { PaddingType } from "./index-72dda473";
+declare const isClient: () => boolean;
+declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
+declare function createPaddingStyle(padding?: PaddingType): undefined | React.CSSProperties;
+declare function easeInOutQuad(x: number): number;
+declare const easingFns: {
+    easeInOutQuad: typeof easeInOutQuad;
+};
+export { isClient, getDataTestId, createPaddingStyle, easingFns };

package/{index-425c8522.d.ts → index-72dda473.d.ts}

@@ -3,4 +3,10 @@ type BorderColorType = 'accent' | 'key' | 'key-inverted' | 'link' | 'primary' |
 type GraphicColorType = 'accent' | 'link' | 'attention' | 'positive' | 'negative' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'quaternary' | 'quaternary-inverted' | 'static-light' | 'static-accent' | 'static-dark';
 type ShadowType = 'shadow-xs' | 'shadow-s' | 'shadow-m' | 'shadow-l' | 'shadow-xl' | 'shadow-xs-hard' | 'shadow-s-hard' | 'shadow-m-hard' | 'shadow-l-hard' | 'shadow-xl-hard' | 'shadow-xs-up' | 'shadow-s-up' | 'shadow-m-up' | 'shadow-l-up' | 'shadow-xl-up' | 'shadow-xs-hard-up' | 'shadow-s-hard-up' | 'shadow-m-hard-up' | 'shadow-l-hard-up' | 'shadow-xl-hard-up';
 type GapType = '3xs' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl';
-export { BackgroundColorType, BorderColorType, GraphicColorType, ShadowType, GapType };
+type PaddingType = number | string | {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+};
+export { BackgroundColorType, BorderColorType, GraphicColorType, ShadowType, GapType, PaddingType };

package/index-bdb4c6b9.d.ts

@@ -1,172 +1,2 @@
-/// <reference types="react-transition-group" />
-/// <reference types="react" />
-/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-import React from "react";
-import { FC, KeyboardEvent, MouseEvent, MutableRefObject, ReactNode, Ref } from "react";
-import { TransitionProps } from "react-transition-group/Transition";
-import { BackdropProps, PortalProps } from "./index-ebda875c";
-type BaseModalProps = {
-    /**
-     * Контент
-     */
-    children?: ReactNode;
-    /**
-     * Компонент бэкдропа
-     */
-    Backdrop?: FC<BackdropProps>;
-    /**
-     * Свойства для Бэкдропа
-     */
-    backdropProps?: Partial<BackdropProps> & Record<string, unknown>;
-    /**
-     * Нода, компонент или функция возвращающая их
-     *
-     * Контейнер к которому будут добавляться порталы
-     */
-    container?: PortalProps["getPortalContainer"];
-    /**
-     * Отключает автоматический перевод фокуса на модалку при открытии
-     * @default false
-     */
-    disableAutoFocus?: boolean;
-    /**
-     * Отключает ловушку фокуса
-     * @default false
-     */
-    disableFocusLock?: boolean;
-    /**
-     * Отключает восстановление фокуса на предыдущем элементе после закрытия модалки
-     * @default false
-     */
-    disableRestoreFocus?: boolean;
-    /**
-     * Отключает вызов `callback` при нажатии Escape
-     * @default false
-     */
-    disableEscapeKeyDown?: boolean;
-    /**
-     * Отключает вызов `callback` при клике на бэкдроп
-     * @default false
-     */
-    disableBackdropClick?: boolean;
-    /**
-     * Отключает блокировку скролла при открытии модального окна
-     * @default false
-     */
-    disableBlockingScroll?: boolean;
-    /**
-     * Содержимое модалки всегда в DOM
-     * @default false
-     */
-    keepMounted?: boolean;
-    /**
-     * Управление видимостью модалки
-     */
-    open: boolean;
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Дополнительный класс
-     */
-    contentClassName?: string;
-    /**
-     * Дополнительный класс для обертки (Modal)
-     */
-    wrapperClassName?: string;
-    /**
-     * Обработчик скролла контента
-     */
-    scrollHandler?: "wrapper" | "content" | MutableRefObject<HTMLDivElement | null>;
-    /**
-     * Пропсы для анимации (CSSTransition)
-     */
-    transitionProps?: Partial<TransitionProps>;
-    /**
-     * Рендерить ли в контейнер через портал.
-     * @default true
-     */
-    usePortal?: boolean;
-    /**
-     * Обработчик события нажатия на бэкдроп
-     */
-    onBackdropClick?: (event: MouseEvent) => void;
-    /**
-     * Обработчик события нажатия на Escape
-     *
-     * Если `disableEscapeKeyDown` - false и модальное окно в фокусе
-     */
-    onEscapeKeyDown?: (event: KeyboardEvent) => void;
-    /**
-     * Обработчик закрытия
-     */
-    onClose?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>, reason?: "backdropClick" | "escapeKeyDown" | "closerClick") => void;
-    /**
-     * Обработчик события onEntered компонента Transition
-     */
-    onMount?: () => void;
-    /**
-     * Обработчик события onExited компонента Transition
-     */
-    onUnmount?: () => void;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-    /**
-     * z-index компонента
-     */
-    zIndex?: number;
-    /**
-     * Реф, который должен быть установлен компонентной области
-     */
-    componentRef?: MutableRefObject<HTMLDivElement | null>;
-};
-type BaseModalContext = {
-    parentRef: React.RefObject<HTMLDivElement>;
-    componentRef: React.RefObject<HTMLDivElement>;
-    hasFooter?: boolean;
-    hasHeader?: boolean;
-    hasScroll?: boolean;
-    headerHighlighted?: boolean;
-    footerHighlighted?: boolean;
-    headerOffset?: number;
-    setHeaderOffset: (offset: number) => void;
-    contentRef: Ref<HTMLElement>;
-    setHasHeader: (exists: boolean) => void;
-    setHasFooter: (exists: boolean) => void;
-    onClose: Required<BaseModalProps>["onClose"];
-};
-// eslint-disable-next-line @typescript-eslint/no-redeclare
-declare const BaseModalContext: React.Context<BaseModalContext>;
-declare const BaseModal: React.ForwardRefExoticComponent<BaseModalProps & React.RefAttributes<HTMLDivElement>>;
-declare function isScrolledToTop(target: HTMLElement): boolean;
-declare function isScrolledToBottom(target: HTMLElement): boolean;
-declare function hasScrollbar(target: HTMLElement): boolean;
-declare const getScrollbarSize: () => number;
-declare const restoreContainerStyles: (container: HTMLElement) => void;
-declare const handleContainer: (container?: HTMLElement) => void;
-type SavedStyle = {
-    value: string;
-    key: string;
-    el: HTMLElement;
-};
-type RestoreStyle = {
-    container: HTMLElement;
-    modals: number;
-    styles: SavedStyle[];
-};
-declare class ModalStore {
-    private readonly restoreStyles;
-    constructor();
-    getRestoreStyles: () => RestoreStyle[];
-}
-declare const getModalStore: () => ModalStore;
-declare class GlobalStore {
-    private readonly modalStore;
-    constructor();
-    getModalStore: () => ModalStore;
-}
-export { BaseModalProps, BaseModalContext, BaseModal, isScrolledToTop, isScrolledToBottom, hasScrollbar, getScrollbarSize, restoreContainerStyles, handleContainer, getModalStore, GlobalStore };
-export type { SavedStyle };
+export * from "./Component-ebda875c";
+export * from "./utils-1574ad8b";

package/index-c76d6398.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component-50136800";
+export type { NavigationBarProps } from "./types-83e2bd9e";

package/index-ebda875c.d.ts

@@ -1,32 +1,136 @@
 /// <reference types="react" />
 /// <reference types="react-transition-group" />
 import React from "react";
-import { ReactNode } from "react";
-type SkeletonProps = {
+import { HTMLAttributes, ReactNode } from "react";
+type StyleColors = {
+    default: {
+        [key: string]: string;
+    };
+    inverted: {
+        [key: string]: string;
+    };
+};
+type BaseFormControlProps = HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Растягивает компонент на ширину контейнера
+     */
+    block?: boolean;
+    /**
+     * Размер компонента
+     */
+    size?: "s" | "m" | "l" | "xl";
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: "default" | "inverted";
+    /**
+     * Заблокированное состояние
+     */
+    disabled?: boolean;
+    /**
+     * Cостояние только для чтения
+     */
+    readOnly?: boolean;
+    /**
+     * Заполненное состояние
+     */
+    filled?: boolean;
+    /**
+     * Выбранное (фокус) состояние
+     */
+    focused?: boolean;
+    /**
+     * Отображение ошибки
+     */
+    error?: ReactNode | boolean;
+    /**
+     * Текст подсказки
+     */
+    hint?: ReactNode;
+    /**
+     * Лейбл компонента
+     */
+    label?: ReactNode;
+    /**
+     * Вид лейбла внутри / снаружи
+     */
+    labelView?: "inner" | "outer";
     /**
-     * Флаг, явно задающий состояние, при котором контент закрывается прелоадером
+     * Слот слева
      */
-    visible?: boolean;
+    leftAddons?: ReactNode;
     /**
-     * Флаг явного включения анимации скелета
+     * Слот справа
      */
-    animate?: boolean;
+    rightAddons?: ReactNode;
+    /**
+     * Слот под полем
+     */
+    bottomAddons?: ReactNode;
     /**
      * Дополнительный класс
      */
     className?: string;
     /**
-     * Дополнительные инлайн стили
+     * Дополнительный класс для поля
+     */
+    fieldClassName?: string;
+    /**
+     * Дополнительный класс для поля
      */
-    style?: React.CSSProperties;
+    inputWrapperClassName?: string;
+    /**
+     * Дополнительный класс для лейбла
+     */
+    labelClassName?: string;
+    /**
+     * Дополнительный класс для аддонов
+     */
+    addonsClassName?: string;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
     /**
-     * Дочерние элементы.
+     * Компонент поля (инпут, textarea и пр.)
      */
     children?: ReactNode;
+    /**
+     * Основные стили компонента.
+     */
+    styles: {
+        [key: string]: string;
+    };
+    /**
+     * Стили компонента для default и inverted режима.
+     */
+    colorStyles?: StyleColors;
 };
-declare const Skeleton: React.FC<SkeletonProps>;
-export { SkeletonProps, Skeleton };
+declare const BaseFormControl: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    block?: boolean | undefined;
+    size?: "s" | "m" | "l" | "xl" | undefined;
+    colors?: "default" | "inverted" | undefined;
+    disabled?: boolean | undefined;
+    readOnly?: boolean | undefined;
+    filled?: boolean | undefined;
+    focused?: boolean | undefined;
+    error?: ReactNode | boolean;
+    hint?: ReactNode;
+    label?: ReactNode;
+    labelView?: "inner" | "outer" | undefined;
+    leftAddons?: ReactNode;
+    rightAddons?: ReactNode;
+    bottomAddons?: ReactNode;
+    className?: string | undefined;
+    fieldClassName?: string | undefined;
+    inputWrapperClassName?: string | undefined;
+    labelClassName?: string | undefined;
+    addonsClassName?: string | undefined;
+    dataTestId?: string | undefined;
+    children?: ReactNode;
+    styles: {
+        [key: string]: string;
+    };
+    colorStyles?: StyleColors | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { StyleColors, BaseFormControlProps, BaseFormControl };