@alfalab/core-components 19.11.1 → 20.0.0

package/modal/modern/desktop.css

@@ -1,9 +1,4 @@
 /* hash: 1obx9 */
-:root {
-
-    /* TODO: цвета добавлены руками. Обновить токены */
-    --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
-}
 :root {
 
     /* Hard */

package/modal/modern/desktop.js

@@ -11,5 +11,5 @@ import './components/content/Component.js';
 import './components/content/Component.desktop.js';
 import './components/footer/Component.js';
 import './components/footer/Component.desktop.js';
-import './transitions.module-1f138c91.js';
+import './transitions.module-1ef342f7.js';
 export { ModalDesktop } from './Component.desktop.js';

package/modal/modern/index.js

@@ -12,7 +12,7 @@ import './components/content/Component.js';
 import './components/content/Component.desktop.js';
 import './components/footer/Component.js';
 import './components/footer/Component.desktop.js';
-import './transitions.module-1f138c91.js';
+import './transitions.module-1ef342f7.js';
 import './Component.desktop.js';
 import './components/header/Component.mobile.js';
 import './components/content/Component.mobile.js';

package/modal/modern/mobile.css

@@ -1,9 +1,4 @@
 /* hash: 1g583 */
-:root {
-
-    /* TODO: цвета добавлены руками. Обновить токены */
-    --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
-}
 :root {
 
     /* Hard */

package/modal/modern/mobile.js

@@ -8,7 +8,7 @@ import './components/closer/Component.js';
 import './components/header/Component.js';
 import './components/content/Component.js';
 import './components/footer/Component.js';
-import './transitions.module-1f138c91.js';
+import './transitions.module-1ef342f7.js';
 import './components/header/Component.mobile.js';
 import './components/content/Component.mobile.js';
 import './components/footer/Component.mobile.js';

package/modal/modern/responsive.js

@@ -12,7 +12,7 @@ import './components/content/Component.js';
 import './components/content/Component.desktop.js';
 import './components/footer/Component.js';
 import './components/footer/Component.desktop.js';
-import './transitions.module-1f138c91.js';
+import './transitions.module-1ef342f7.js';
 import './Component.desktop.js';
 import './components/header/Component.mobile.js';
 import './components/content/Component.mobile.js';

package/modal/responsive.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./tslib.es6-942ff754.js');
+require('./tslib.es6-8c57e210.js');
 require('react');
 require('classnames');
 require('../base-modal');
@@ -15,7 +15,7 @@ require('./components/content/Component.desktop.js');
 require('./components/footer/Component.js');
 require('./components/footer/Component.desktop.js');
 require('./Component.desktop.js');
-require('./transitions.module-886c7414.js');
+require('./transitions.module-22352f4f.js');
 require('@alfalab/hooks');
 require('./components/header/Component.mobile.js');
 require('./components/content/Component.mobile.js');

package/notification/esm/index.css

@@ -1,9 +1,4 @@
 /* hash: q3phz */
-:root {
-
-    /* TODO: цвета добавлены руками. Обновить токены */
-    --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
-}
 :root {
 
     /* Hard */

package/notification/index.css

@@ -1,9 +1,4 @@
 /* hash: q3phz */
-:root {
-
-    /* TODO: цвета добавлены руками. Обновить токены */
-    --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
-}
 :root {
 
     /* Hard */

package/notification/modern/index.css

@@ -1,9 +1,4 @@
 /* hash: q3phz */
-:root {
-
-    /* TODO: цвета добавлены руками. Обновить токены */
-    --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
-}
 :root {
 
     /* Hard */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alfalab/core-components",
-  "version": "19.11.1",
+  "version": "20.0.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -16,7 +16,7 @@
     "start:quick": "RDTL=off yarn start",
     "build-storybook": "build-storybook -o build -s ./.storybook/public --quiet",
     "serve-storybook": "http-server build -p 9009",
-    "update-colors": "node ./tools/update-colors.js && yarn lint:css --fix",
+    "update-colors": "node ./tools/update-colors.js && stylelint ./packages/{themes,vars}/**/*.css --fix",
     "update-typography": "node ./tools/update-typography.js",
     "lint": "yarn lint:css && yarn lint:js",
     "lint:css": "stylelint ./packages/**/*.css",
@@ -59,7 +59,7 @@
     "@alfalab/stylelint-core-vars": "^1.1.0",
     "@alfalab/utils": "^1.3.0",
     "@popperjs/core": "^2.3.3",
-    "alfa-ui-primitives": "^2.213.0",
+    "alfa-ui-primitives": "^2.234.0",
     "classnames": "^2.2.6",
     "compute-scroll-into-view": "^1.0.13",
     "date-fns": "^2.16.1",

package/password-input/component.d.ts

@@ -18,7 +18,7 @@ declare const PasswordInput: React.ForwardRefExoticComponent<Pick<React.InputHTM
     clear?: boolean | undefined;
     size?: "s" | "m" | "l" | "xl" | undefined;
     colors?: "default" | "inverted" | undefined;
-    error?: string | boolean | undefined;
+    error?: React.ReactNode;
     success?: boolean | undefined;
     hint?: React.ReactNode;
     label?: React.ReactNode;

package/password-input/component.js

@@ -1,6 +1,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var cn = require('classnames');
 var coreComponentsInput = require('../input');
 var coreComponentsIconButton = require('../icon-button');
 var EyeMIcon = require('@alfalab/icons-glyph/EyeMIcon');
@@ -9,6 +10,7 @@ var EyeOffMIcon = require('@alfalab/icons-glyph/EyeOffMIcon');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 var EyeMIcon__default = /*#__PURE__*/_interopDefaultLegacy(EyeMIcon);
 var EyeOffMIcon__default = /*#__PURE__*/_interopDefaultLegacy(EyeOffMIcon);
 
@@ -51,13 +53,13 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"addons":"password-input__addons_rur2y","input":"password-input__input_rur2y"};
+var styles = {"eye":"password-input__eye_rur2y","xl":"password-input__xl_rur2y","input":"password-input__input_rur2y"};
 require('./index.css');
 
 var PasswordInput = React.forwardRef(function (_a, ref) {
-    var onPasswordVisibleChange = _a.onPasswordVisibleChange, passwordVisible = _a.passwordVisible, disabled = _a.disabled, colors = _a.colors, restProps = __rest(_a, ["onPasswordVisibleChange", "passwordVisible", "disabled", "colors"]);
+    var onPasswordVisibleChange = _a.onPasswordVisibleChange, passwordVisible = _a.passwordVisible, disabled = _a.disabled, colors = _a.colors, rightAddons = _a.rightAddons, _b = _a.size, size = _b === void 0 ? 's' : _b, className = _a.className, restProps = __rest(_a, ["onPasswordVisibleChange", "passwordVisible", "disabled", "colors", "rightAddons", "size", "className"]);
     var uncontrolled = passwordVisible === undefined;
-    var _b = React.useState(uncontrolled ? false : passwordVisible), statePasswordVisible = _b[0], setStatePasswordVisible = _b[1];
+    var _c = React.useState(uncontrolled ? false : passwordVisible), statePasswordVisible = _c[0], setStatePasswordVisible = _c[1];
     var handleButtonClick = React.useCallback(function () {
         if (onPasswordVisibleChange) {
             onPasswordVisibleChange(!passwordVisible);
@@ -67,7 +69,9 @@ var PasswordInput = React.forwardRef(function (_a, ref) {
         }
     }, [passwordVisible, uncontrolled, onPasswordVisibleChange]);
     var isPasswordVisible = uncontrolled ? statePasswordVisible : passwordVisible;
-    return (React__default['default'].createElement(coreComponentsInput.Input, __assign({}, restProps, { disabled: disabled, type: isPasswordVisible ? 'text' : 'password', ref: ref, colors: colors, rightAddons: React__default['default'].createElement(coreComponentsIconButton.IconButton, { colors: colors, view: 'secondary', size: 's', icon: isPasswordVisible ? EyeMIcon__default['default'] : EyeOffMIcon__default['default'], onClick: handleButtonClick, disabled: disabled }), addonsClassName: styles.addons, inputClassName: styles.input })));
+    return (React__default['default'].createElement(coreComponentsInput.Input, __assign({}, restProps, { disabled: disabled, type: isPasswordVisible ? 'text' : 'password', size: size, ref: ref, colors: colors, className: cn__default['default'](className, styles[size]), rightAddons: React__default['default'].createElement(React__default['default'].Fragment, null,
+            rightAddons,
+            React__default['default'].createElement(coreComponentsIconButton.IconButton, { className: styles.eye, colors: colors, view: 'secondary', size: 's', icon: isPasswordVisible ? EyeMIcon__default['default'] : EyeOffMIcon__default['default'], onClick: handleButtonClick, disabled: disabled })), addonsClassName: styles.addons, inputClassName: styles.input })));
 });
 
 exports.PasswordInput = PasswordInput;

package/password-input/esm/component.d.ts

@@ -18,7 +18,7 @@ declare const PasswordInput: React.ForwardRefExoticComponent<Pick<React.InputHTM
     clear?: boolean | undefined;
     size?: "s" | "m" | "l" | "xl" | undefined;
     colors?: "default" | "inverted" | undefined;
-    error?: string | boolean | undefined;
+    error?: React.ReactNode;
     success?: boolean | undefined;
     hint?: React.ReactNode;
     label?: React.ReactNode;

package/password-input/esm/component.js

@@ -1,4 +1,5 @@
 import React, { forwardRef, useState, useCallback } from 'react';
+import cn from 'classnames';
 import { Input } from '../../input/esm';
 import { IconButton } from '../../icon-button/esm';
 import EyeMIcon from '@alfalab/icons-glyph/EyeMIcon';
@@ -43,13 +44,13 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"addons":"password-input__addons_rur2y","input":"password-input__input_rur2y"};
+var styles = {"eye":"password-input__eye_rur2y","xl":"password-input__xl_rur2y","input":"password-input__input_rur2y"};
 require('./index.css');
 
 var PasswordInput = forwardRef(function (_a, ref) {
-    var onPasswordVisibleChange = _a.onPasswordVisibleChange, passwordVisible = _a.passwordVisible, disabled = _a.disabled, colors = _a.colors, restProps = __rest(_a, ["onPasswordVisibleChange", "passwordVisible", "disabled", "colors"]);
+    var onPasswordVisibleChange = _a.onPasswordVisibleChange, passwordVisible = _a.passwordVisible, disabled = _a.disabled, colors = _a.colors, rightAddons = _a.rightAddons, _b = _a.size, size = _b === void 0 ? 's' : _b, className = _a.className, restProps = __rest(_a, ["onPasswordVisibleChange", "passwordVisible", "disabled", "colors", "rightAddons", "size", "className"]);
     var uncontrolled = passwordVisible === undefined;
-    var _b = useState(uncontrolled ? false : passwordVisible), statePasswordVisible = _b[0], setStatePasswordVisible = _b[1];
+    var _c = useState(uncontrolled ? false : passwordVisible), statePasswordVisible = _c[0], setStatePasswordVisible = _c[1];
     var handleButtonClick = useCallback(function () {
         if (onPasswordVisibleChange) {
             onPasswordVisibleChange(!passwordVisible);
@@ -59,7 +60,9 @@ var PasswordInput = forwardRef(function (_a, ref) {
         }
     }, [passwordVisible, uncontrolled, onPasswordVisibleChange]);
     var isPasswordVisible = uncontrolled ? statePasswordVisible : passwordVisible;
-    return (React.createElement(Input, __assign({}, restProps, { disabled: disabled, type: isPasswordVisible ? 'text' : 'password', ref: ref, colors: colors, rightAddons: React.createElement(IconButton, { colors: colors, view: 'secondary', size: 's', icon: isPasswordVisible ? EyeMIcon : EyeOffMIcon, onClick: handleButtonClick, disabled: disabled }), addonsClassName: styles.addons, inputClassName: styles.input })));
+    return (React.createElement(Input, __assign({}, restProps, { disabled: disabled, type: isPasswordVisible ? 'text' : 'password', size: size, ref: ref, colors: colors, className: cn(className, styles[size]), rightAddons: React.createElement(React.Fragment, null,
+            rightAddons,
+            React.createElement(IconButton, { className: styles.eye, colors: colors, view: 'secondary', size: 's', icon: isPasswordVisible ? EyeMIcon : EyeOffMIcon, onClick: handleButtonClick, disabled: disabled })), addonsClassName: styles.addons, inputClassName: styles.input })));
 });
 
 export { PasswordInput };

package/password-input/esm/index.css

@@ -1,8 +1,16 @@
 /* hash: rur2y */
-.password-input__addons_rur2y:last-child {
-    padding: 0;
+.password-input__eye_rur2y:last-child {
+    margin-right: var(--gap-s-neg);
 }
 
+.password-input__xl_rur2y .password-input__eye_rur2y:last-child {
+        margin-right: var(--gap-m-neg);
+    }
+
+.password-input__xl_rur2y .password-input__eye_rur2y {
+        margin-left: var(--gap-2xs);
+    }
+
 .password-input__input_rur2y::-ms-reveal {
     display: none;
 }

package/password-input/esm/index.js

@@ -1,4 +1,5 @@
 import 'react';
+import 'classnames';
 import '../../input/esm';
 import '../../icon-button/esm';
 import '@alfalab/icons-glyph/EyeMIcon';

package/password-input/index.css

@@ -1,8 +1,16 @@
 /* hash: rur2y */
-.password-input__addons_rur2y:last-child {
-    padding: 0;
+.password-input__eye_rur2y:last-child {
+    margin-right: var(--gap-s-neg);
 }
 
+.password-input__xl_rur2y .password-input__eye_rur2y:last-child {
+        margin-right: var(--gap-m-neg);
+    }
+
+.password-input__xl_rur2y .password-input__eye_rur2y {
+        margin-left: var(--gap-2xs);
+    }
+
 .password-input__input_rur2y::-ms-reveal {
     display: none;
 }

package/password-input/index.js

@@ -2,6 +2,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var component = require('./component.js');
 require('react');
+require('classnames');
 require('../input');
 require('../icon-button');
 require('@alfalab/icons-glyph/EyeMIcon');

package/password-input/modern/component.d.ts

@@ -18,7 +18,7 @@ declare const PasswordInput: React.ForwardRefExoticComponent<Pick<React.InputHTM
     clear?: boolean | undefined;
     size?: "s" | "m" | "l" | "xl" | undefined;
     colors?: "default" | "inverted" | undefined;
-    error?: string | boolean | undefined;
+    error?: React.ReactNode;
     success?: boolean | undefined;
     hint?: React.ReactNode;
     label?: React.ReactNode;

package/password-input/modern/component.js

@@ -1,13 +1,14 @@
 import React, { forwardRef, useState, useCallback } from 'react';
+import cn from 'classnames';
 import EyeMIcon from '@alfalab/icons-glyph/EyeMIcon';
 import EyeOffMIcon from '@alfalab/icons-glyph/EyeOffMIcon';
 import { Input } from '../../input/modern';
 import { IconButton } from '../../icon-button/modern';
 
-var styles = {"addons":"password-input__addons_rur2y","input":"password-input__input_rur2y"};
+var styles = {"eye":"password-input__eye_rur2y","xl":"password-input__xl_rur2y","input":"password-input__input_rur2y"};
 require('./index.css');
 
-const PasswordInput = forwardRef(({ onPasswordVisibleChange, passwordVisible, disabled, colors, ...restProps }, ref) => {
+const PasswordInput = forwardRef(({ onPasswordVisibleChange, passwordVisible, disabled, colors, rightAddons, size = 's', className, ...restProps }, ref) => {
     const uncontrolled = passwordVisible === undefined;
     const [statePasswordVisible, setStatePasswordVisible] = useState(uncontrolled ? false : passwordVisible);
     const handleButtonClick = useCallback(() => {
@@ -19,7 +20,9 @@ const PasswordInput = forwardRef(({ onPasswordVisibleChange, passwordVisible, di
         }
     }, [passwordVisible, uncontrolled, onPasswordVisibleChange]);
     const isPasswordVisible = uncontrolled ? statePasswordVisible : passwordVisible;
-    return (React.createElement(Input, Object.assign({}, restProps, { disabled: disabled, type: isPasswordVisible ? 'text' : 'password', ref: ref, colors: colors, rightAddons: React.createElement(IconButton, { colors: colors, view: 'secondary', size: 's', icon: isPasswordVisible ? EyeMIcon : EyeOffMIcon, onClick: handleButtonClick, disabled: disabled }), addonsClassName: styles.addons, inputClassName: styles.input })));
+    return (React.createElement(Input, Object.assign({}, restProps, { disabled: disabled, type: isPasswordVisible ? 'text' : 'password', size: size, ref: ref, colors: colors, className: cn(className, styles[size]), rightAddons: React.createElement(React.Fragment, null,
+            rightAddons,
+            React.createElement(IconButton, { className: styles.eye, colors: colors, view: 'secondary', size: 's', icon: isPasswordVisible ? EyeMIcon : EyeOffMIcon, onClick: handleButtonClick, disabled: disabled })), addonsClassName: styles.addons, inputClassName: styles.input })));
 });
 
 export { PasswordInput };

package/password-input/modern/index.css

@@ -1,8 +1,16 @@
 /* hash: rur2y */
-.password-input__addons_rur2y:last-child {
-    padding: 0;
+.password-input__eye_rur2y:last-child {
+    margin-right: var(--gap-s-neg);
 }
 
+.password-input__xl_rur2y .password-input__eye_rur2y:last-child {
+        margin-right: var(--gap-m-neg);
+    }
+
+.password-input__xl_rur2y .password-input__eye_rur2y {
+        margin-left: var(--gap-2xs);
+    }
+
 .password-input__input_rur2y::-ms-reveal {
     display: none;
 }

package/password-input/modern/index.js

@@ -1,4 +1,5 @@
 import 'react';
+import 'classnames';
 import '@alfalab/icons-glyph/EyeMIcon';
 import '@alfalab/icons-glyph/EyeOffMIcon';
 import '../../input/modern';

package/picker-button/Component-952ada36.d.ts

@@ -0,0 +1,812 @@
+/// <reference types="react-transition-group" />
+/// <reference types="react" />
+import React from "react";
+import { ReactNode, FC, RefAttributes, AriaAttributes, FocusEvent, MouseEvent, ReactElement, CSSProperties, MutableRefObject, InputHTMLAttributes, ChangeEvent, RefObject, HTMLAttributes } from "react";
+import { CSSTransitionProps } from "react-transition-group/CSSTransition";
+import { BasePlacement, VariationPlacement } from "@popperjs/core";
+import { ButtonProps } from "../button";
+import { PickerButtonSize } from "./index";
+declare function __extends(d: any, b: any): void;
+declare function __rest(s: any, e: any): {};
+declare function __decorate(decorators: any, target: any, key: any, desc: any, ...args: any[]): any;
+declare function __param(paramIndex: any, decorator: any): (target: any, key: any) => void;
+declare function __metadata(metadataKey: any, metadataValue: any): any;
+declare function __awaiter(thisArg: any, _arguments: any, P: any, generator: any): any;
+declare function __generator(thisArg: any, body: any): {
+    next: (v: any) => any;
+    throw: (v: any) => any;
+    return: (v: any) => any;
+};
+declare function __exportStar(m: any, o: any): void;
+declare function __values(o: any): any;
+declare function __read(o: any, n: any): any;
+declare function __spread(...args: any[]): any[];
+declare function __spreadArrays(...args: any[]): any[];
+declare function __await(v: any): any;
+declare class __await {
+    constructor(v: any);
+    v: any;
+}
+declare function __asyncGenerator(thisArg: any, _arguments: any, generator: any): {};
+declare function __asyncDelegator(o: any): {};
+declare function __asyncValues(o: any): any;
+declare function __makeTemplateObject(cooked: any, raw: any): any;
+declare function __importStar(mod: any): any;
+declare function __importDefault(mod: any): any;
+declare function __classPrivateFieldGet(receiver: any, privateMap: any): any;
+declare function __classPrivateFieldSet(receiver: any, privateMap: any, value: any): any;
+declare function __assign(...args: any[]): any;
+declare function __createBinding(o: any, m: any, k: any, k2: any): void;
+type RefElement = HTMLElement | null;
+type Position = BasePlacement | VariationPlacement;
+type PopoverProps = {
+    /**
+     * Управление состоянием поповера (открыт/закрыт)
+     */
+    open: boolean;
+    /**
+     * Элемент, относительного которого появляется поповер
+     */
+    anchorElement: RefElement;
+    /**
+     * Использовать ширину родительского элемента
+     */
+    useAnchorWidth?: boolean;
+    /**
+     * Позиционирование поповера
+     */
+    position?: Position;
+    /**
+     * Запрещает поповеру менять свою позицию.
+     * Например, если места снизу недостаточно,то он все равно будет показан снизу
+     */
+    preventFlip?: boolean;
+    /**
+     * Запрещает поповеру менять свою позицию, если он не влезает в видимую область.
+     */
+    preventOverflow?: boolean;
+    /**
+     * Если `true`, будет отрисована стрелочка
+     */
+    withArrow?: boolean;
+    /**
+     * Смещение поповера.
+     * Если позиционирование top, bottom, то [x, y].
+     * Если позиционирование left, right то [y, x].
+     */
+    offset?: [number, number];
+    /**
+     * Дополнительный класс для поповера
+     */
+    popperClassName?: string;
+    /**
+     * Дополнительный класс для стрелочки
+     */
+    arrowClassName?: string;
+    /**
+     * Функция, возвращающая контейнер, в который будет рендериться поповер
+     */
+    getPortalContainer?: () => HTMLElement;
+    /**
+     * CSSTransitionProps, прокидываются в компонент CSSTransitionProps.
+     */
+    transition?: CSSTransitionProps;
+    /**
+     * Выставляет кастомное свойство transition-duration
+     */
+    transitionDuration?: CSSProperties["transitionDuration"];
+    /**
+     * Рендерит компонент, обернутый в Transition
+     */
+    withTransition?: boolean;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Хранит функцию, с помощью которой можно обновить положение компонента
+     */
+    update?: MutableRefObject<() => void>;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * z-index компонента
+     */
+    zIndex?: number;
+    /**
+     * Если поповер не помещается в переданной позиции (position), он попробует открыться в другой позиции,
+     * по очереди для каждой позиции из этого списка.
+     * Если не передавать, то поповер открывается в противоположном направлении от переданного position.
+     */
+    fallbackPlacements?: Position[];
+    /**
+     * Контент
+     */
+    children?: ReactNode;
+};
+type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type" | "value" | "defaultValue" | "onChange" | "onClick" | "onMouseDown"> & {
+    /**
+     * Значение поля ввода
+     */
+    value?: string;
+    /**
+     * Начальное значение поля
+     */
+    defaultValue?: string;
+    /**
+     * Растягивает компонент на ширину контейнера
+     */
+    block?: boolean;
+    /**
+     * Крестик для очистки поля
+     */
+    clear?: boolean;
+    /**
+     * Размер компонента
+     */
+    size?: "s" | "m" | "l" | "xl";
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: "default" | "inverted";
+    /**
+     * Отображение ошибки
+     */
+    error?: ReactNode | boolean;
+    /**
+     * Отображение иконки успеха
+     */
+    success?: boolean;
+    /**
+     * Текст подсказки
+     */
+    hint?: ReactNode;
+    /**
+     * Лейбл компонента
+     */
+    label?: React.ReactNode;
+    /**
+     * Атрибут type
+     */
+    type?: "number" | "card" | "email" | "money" | "password" | "tel" | "text";
+    /**
+     * Ref для обертки input
+     */
+    wrapperRef?: React.Ref<HTMLDivElement>;
+    /**
+     * Слот слева
+     */
+    leftAddons?: React.ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: React.ReactNode;
+    /**
+     * Слот под инпутом
+     */
+    bottomAddons?: React.ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для поля
+     */
+    fieldClassName?: string;
+    /**
+     * Дополнительный класс инпута
+     */
+    inputClassName?: string;
+    /**
+     * Дополнительный класс для лейбла
+     */
+    labelClassName?: string;
+    /**
+     * Дополнительный класс для аддонов
+     */
+    addonsClassName?: string;
+    /**
+     * Класс, который будет установлен при фокусе
+     */
+    focusedClassName?: string;
+    /**
+     * Класс, который будет установлен, если в поле есть значение
+     */
+    filledClassName?: string;
+    /**
+     * Обработчик поля ввода
+     */
+    onChange?: (event: ChangeEvent<HTMLInputElement>, payload: {
+        value: string;
+    }) => void;
+    /**
+     * Обработчик нажатия на кнопку очистки
+     */
+    onClear?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Обработчик клика по полю
+     */
+    onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Обработчик MouseDown по полю
+     */
+    onMouseDown?: (event: MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Обработчик MouseUp по полю
+     */
+    onMouseUp?: (event: MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+type OptionShape = {
+    /**
+     * Текстовое представление пункта
+     */
+    key: string;
+    /**
+     * Контент, который будет отрисован в выпадающем списке и в поле при выборе
+     */
+    content?: ReactNode;
+    /**
+     * Блокирует данный пункт для выбора
+     */
+    disabled?: boolean;
+    /**
+     * Дополнительные данные
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    value?: any;
+};
+type GroupShape = {
+    /**
+     * Заголовок группы
+     */
+    label?: string;
+    /**
+     * Дочерние элементы
+     */
+    options: OptionShape[];
+};
+type BaseSelectProps = {
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для поля
+     */
+    fieldClassName?: string;
+    /**
+     * Дополнительный класс выпадающего меню
+     */
+    optionsListClassName?: string;
+    /**
+     * Дополнительный класс для пункта меню
+     */
+    optionClassName?: string;
+    /**
+     * Список вариантов выбора
+     */
+    options: Array<OptionShape | GroupShape>;
+    /**
+     * Атрибут id
+     */
+    id?: string;
+    /**
+     * Атрибут name
+     */
+    name?: string;
+    /**
+     * Управление возможностью выбора значения
+     */
+    disabled?: boolean;
+    /**
+     * Начальное состояние селекта
+     */
+    defaultOpen?: boolean;
+    /**
+     * Возможность выбрать несколько значений
+     */
+    multiple?: boolean;
+    /**
+     * Размер компонента
+     */
+    size?: "s" | "m" | "l" | "xl";
+    /**
+     * Размер пунктов меню
+     */
+    optionsSize?: "s" | "m" | "l" | "xl";
+    /**
+     * Растягивает компонент на ширину контейнера
+     */
+    block?: boolean;
+    /**
+     * Управляет шириной выпадающего меню.
+     * Ширину определяет контент, либо ширина равна ширине поля
+     */
+    optionsListWidth?: "content" | "field";
+    /**
+     * Лейбл поля
+     */
+    label?: ReactNode;
+    /**
+     * Плейсхолдер поля
+     */
+    placeholder?: string;
+    /**
+     * Отображение ошибки
+     */
+    error?: ReactNode | boolean;
+    /**
+     * Подсказка под полем
+     */
+    hint?: ReactNode;
+    /**
+     * Возможность использовать селект как input-autocomplete
+     */
+    autocomplete?: boolean;
+    /**
+     * Позволяет снять выбранное значение
+     */
+    allowUnselect?: boolean;
+    /**
+     * Закрывать меню после выбора?
+     */
+    closeOnSelect?: boolean;
+    /**
+     * При навигации с клавиатуры переходить от последнего пункта меню к первому и наоборот.
+     */
+    circularNavigation?: boolean;
+    /**
+     * Запрещает поповеру менять свою позицию.
+     * Например, если места снизу недостаточно,то он все равно будет показан снизу
+     */
+    preventFlip?: boolean;
+    /**
+     * Список value выбранных пунктов (controlled-селект)
+     */
+    selected?: Array<string | OptionShape> | string | OptionShape | null;
+    /**
+     * Рендерит нативный селект вместо выпадающего меню. (на десктопе использовать только с multiple=false)
+     */
+    nativeSelect?: boolean;
+    /**
+     * Позиционирование выпадающего списка
+     */
+    popoverPosition?: PopoverProps["position"];
+    /**
+     * Количество видимых пунктов меню (5 = 5.5)
+     */
+    visibleOptions?: number;
+    /**
+     * Кастомный рендер выбранного пункта
+     */
+    valueRenderer?: ({ selected, selectedMultiple }: {
+        selected?: OptionShape;
+        selectedMultiple: OptionShape[];
+    }) => ReactNode;
+    /**
+     * Компонент стрелки
+     */
+    Arrow?: FC<ArrowProps> | null | false;
+    /**
+     * Компонент поля
+     */
+    Field?: FC<FieldProps>;
+    /**
+     * Пропсы, которые будут прокинуты в компонент поля
+     */
+    fieldProps?: unknown;
+    /**
+     * Пропсы, которые будут прокинуты в компонент списка
+     */
+    optionsListProps?: unknown;
+    /**
+     * Пропсы, которые будут прокинуты в компонент пункта меню
+     */
+    optionProps?: unknown;
+    /**
+     * Компонент выпадающего меню
+     */
+    OptionsList?: FC<OptionsListProps>;
+    /**
+     * Компонент группы
+     */
+    Optgroup?: FC<OptgroupProps>;
+    /**
+     * Компонент пункта меню
+     */
+    Option?: FC<OptionProps>;
+    /**
+     * Обработчик выбора
+     */
+    onChange?: (payload: {
+        selected: OptionShape | null;
+        selectedMultiple: OptionShape[];
+        name?: string;
+    }) => void;
+    /**
+     * Обработчик открытия\закрытия селекта
+     */
+    onOpen?: (payload: {
+        open?: boolean;
+        name?: string;
+    }) => void;
+    /**
+     * Обработчик фокуса поля
+     */
+    onBlur?: (event: FocusEvent<HTMLDivElement | HTMLInputElement>) => void;
+    /**
+     * Обработчик блюра поля
+     */
+    onFocus?: (event: FocusEvent<HTMLDivElement | HTMLInputElement>) => void;
+    /**
+     * Обработчик скрола
+     */
+    onScroll?: (event: MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Хранит функцию, с помощью которой можно обновить положение поповера
+     */
+    updatePopover?: PopoverProps["update"];
+    /**
+     * Показывать OptionsList, если он пустой
+     */
+    showEmptyOptionsList?: boolean;
+};
+// TODO: использовать InputProps
+type FieldProps = {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Размер компонента
+     */
+    size?: "s" | "m" | "l" | "xl";
+    /**
+     * Выбранный пункт
+     */
+    selected?: OptionShape;
+    /**
+     * Список выбранных пунктов
+     */
+    selectedMultiple?: OptionShape[];
+    /**
+     * Флаг, можно ли выбрать несколько значений
+     */
+    multiple?: boolean;
+    /**
+     * Флаг, открыто ли меню
+     */
+    open?: boolean;
+    /**
+     * Флаг, поле заблокировано
+     */
+    disabled?: boolean;
+    /**
+     * Лейбл поля
+     */
+    label?: ReactNode;
+    /**
+     * Плейсхолдер поля
+     */
+    placeholder?: string;
+    /**
+     * Отображение ошибки
+     */
+    error?: ReactNode | boolean;
+    /**
+     * Отображение иконки успеха
+     */
+    success?: boolean;
+    /**
+     * Подсказка под полем
+     */
+    hint?: ReactNode;
+    /**
+     * Компонент стрелки
+     */
+    Arrow?: ReactElement | false | null;
+    /**
+     * Кастомный рендер выбранного пункта
+     */
+    valueRenderer?: BaseSelectProps["valueRenderer"];
+    /**
+     * Внутренние свойства, которые должны быть установлены компоненту.
+     */
+    innerProps: {
+        onBlur?: (event: FocusEvent<HTMLDivElement | HTMLInputElement>) => void;
+        onFocus?: (event: FocusEvent<HTMLDivElement | HTMLInputElement>) => void;
+        onClick?: (event: MouseEvent<HTMLDivElement | HTMLInputElement>) => void;
+        tabIndex: number;
+        id: string;
+    } & RefAttributes<HTMLDivElement | HTMLInputElement> & AriaAttributes;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+type ArrowProps = {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Флаг, открыто ли меню
+     */
+    open?: boolean;
+};
+type OptionsListProps = {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Размер компонента
+     */
+    size?: "s" | "m" | "l" | "xl";
+    /**
+     * Компонент пункта меню
+     */
+    Option: (props: {
+        option: OptionShape;
+        index: number;
+    }) => JSX.Element | null;
+    /**
+     * Список вариантов выбора
+     */
+    options?: Array<OptionShape | GroupShape>;
+    /**
+     * Плоский список пунктов меню (например, нужно для виртуализации)
+     */
+    flatOptions?: OptionShape[];
+    /**
+     * Индекс выделенного пункта
+     */
+    highlightedIndex?: number;
+    /**
+     * Флаг, открыто ли меню
+     */
+    open?: boolean;
+    /**
+     * Компонент группы
+     */
+    Optgroup?: BaseSelectProps["Optgroup"];
+    /**
+     * Будет отображаться, если компонент пустой
+     */
+    emptyPlaceholder?: string;
+    /**
+     * Количество видимых пунктов меню (5 = 5.5)
+     */
+    visibleOptions?: number;
+    /**
+     * Обработчик скрола
+     */
+    onScroll?: (event: MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Дополнительные пропсы для Input'a, находящегося внутри кастомного OptionsList
+     */
+    inputProps?: InputProps;
+};
+type OptgroupProps = {
+    /**
+     * Размер компонента
+     */
+    size?: "s" | "m" | "l" | "xl";
+    /**
+     * Заголовок группы
+     */
+    label?: string;
+    /**
+     * Дочерние элементы
+     */
+    children?: ReactNode;
+};
+type OptionProps = {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Размер компонента
+     */
+    size?: "s" | "m" | "l" | "xl";
+    /**
+     * Контент пункта меню
+     */
+    children?: ReactNode;
+    /**
+     * Данные пункта меню
+     */
+    option: OptionShape;
+    /**
+     * Индект пункта
+     */
+    index: number;
+    /**
+     * Флаг, выбран ли данный пункт
+     */
+    selected?: boolean;
+    /**
+     * Флаг, подсвечен ли данный пункт
+     */
+    highlighted?: boolean;
+    /**
+     * Флаг, заблокирован ли данный пункт
+     */
+    disabled?: boolean;
+    /**
+     * Компонент пункта меню
+     */
+    Checkmark?: FC<CheckmarkProps>;
+    /**
+     * Внутренние свойства, которые должны быть установлены компоненту.
+     */
+    innerProps: {
+        id: string;
+        onClick: (event: MouseEvent<HTMLDivElement>) => void;
+        onMouseDown: (event: MouseEvent<HTMLDivElement>) => void;
+        onMouseMove: (event: MouseEvent<HTMLDivElement>) => void;
+        role: string;
+    } & RefAttributes<HTMLDivElement> & AriaAttributes;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+type CheckmarkProps = {
+    /**
+     * Флаг, данный пункт выбран
+     */
+    selected?: boolean;
+};
+/**
+ * Набор констант для z-index соответствующих классов компонентов.
+ * Значения выбраны по приоритету.
+ */
+declare const stackingOrder: {
+    FOCUSED: number;
+    DEFAULT: number;
+    POPOVER: number;
+    MODAL: number;
+    TOAST: number;
+};
+declare const StackingContext: import("react").Context<number>;
+type StackProps = {
+    /**
+     * Render prop, в который передается функция.
+     * Функция принимает аргумент со значением z-index из текущего контекста.
+     */
+    children: (value: number) => ReactNode;
+    /**
+     * Исходное значение для z-index.
+     * @default 5
+     */
+    value?: number;
+};
+declare const Stack: FC<StackProps>;
+type PortalProps = {
+    /** Контент */
+    children?: ReactNode;
+    /**
+     * Функция, возвращающая контейнер, в который будут рендериться дочерние элементы
+     */
+    getPortalContainer?: () => Element;
+};
+declare const Portal: import("react").ForwardRefExoticComponent<PortalProps & import("react").RefAttributes<Element>>;
+declare const PORTAL_CONTAINER_ATTRIBUTE = "alfa-portal-container";
+declare const getDefaultPortalContainer: () => Element;
+declare function setRef<T>(ref: RefObject<T> | ((instance: T | null) => void) | null | undefined, value: T | null): void;
+type FormControlProps = HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Растягивает компонент на ширину контейнера
+     */
+    block?: boolean;
+    /**
+     * Размер компонента
+     */
+    size?: "s" | "m" | "l" | "xl";
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: "default" | "inverted";
+    /**
+     * Заблокированное состояние
+     */
+    disabled?: boolean;
+    /**
+     * Заполненное состояние
+     */
+    filled?: boolean;
+    /**
+     * Выбранное (фокус) состояние
+     */
+    focused?: boolean;
+    /**
+     * Отображение ошибки
+     */
+    error?: ReactNode | boolean;
+    /**
+     * Текст подсказки
+     */
+    hint?: ReactNode;
+    /**
+     * Лейбл компонента
+     */
+    label?: ReactNode;
+    /**
+     * Слот слева
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: ReactNode;
+    /**
+     * Слот под полем
+     */
+    bottomAddons?: ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для поля
+     */
+    fieldClassName?: string;
+    /**
+     * Дополнительный класс для лейбла
+     */
+    labelClassName?: string;
+    /**
+     * Дополнительный класс для аддонов
+     */
+    addonsClassName?: string;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Компонент поля (инпут, textarea и пр.)
+     */
+    children?: ReactNode;
+};
+declare const FormControl: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    block?: boolean | undefined;
+    size?: "s" | "m" | "l" | "xl" | undefined;
+    colors?: "default" | "inverted" | undefined;
+    disabled?: boolean | undefined;
+    filled?: boolean | undefined;
+    focused?: boolean | undefined;
+    error?: React.ReactNode;
+    hint?: React.ReactNode;
+    label?: React.ReactNode;
+    leftAddons?: React.ReactNode;
+    rightAddons?: React.ReactNode;
+    bottomAddons?: React.ReactNode;
+    className?: string | undefined;
+    fieldClassName?: string | undefined;
+    labelClassName?: string | undefined;
+    addonsClassName?: string | undefined;
+    dataTestId?: string | undefined;
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+type BaseFieldProps = FieldProps;
+type FieldProps$0 = Omit<BaseFieldProps, 'size' | 'hint' | 'success' | 'error' | 'placeholder'> & ButtonProps & {
+    buttonSize?: PickerButtonSize;
+};
+declare const Field: ({ buttonSize, view, label, open, multiple, rightAddons, Arrow, innerProps, className, selected, selectedMultiple, valueRenderer, ...restProps }: FieldProps$0) => JSX.Element;
+export { __extends, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __spreadArrays, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault, __classPrivateFieldGet, __classPrivateFieldSet, __assign, __createBinding, OptionShape, GroupShape, BaseSelectProps, FieldProps, ArrowProps, OptionsListProps, OptgroupProps, OptionProps, CheckmarkProps, stackingOrder, StackingContext, StackProps, Stack, PortalProps, Portal, PORTAL_CONTAINER_ATTRIBUTE, getDefaultPortalContainer, setRef, FormControlProps, FormControl, Field };