@sima-land/ui-nucleons 45.0.0-alpha.2 → 45.0.0-alpha.21

package/pagination/pagination.module.scss

@@ -1,76 +0,0 @@
-@use '../colors';
-
-.page-select-form {
-  font-size: 12px;
-  .page-input-wrapper {
-    margin-left: 8px;
-    width: 64px;
-    .page-input {
-      text-align: center;
-      font-size: 16px;
-    }
-  }
-  .submit-button {
-    margin-left: 8px;
-  }
-  .cancel-button {
-    margin-left: 32px;
-  }
-}
-
-.page-button {
-  display: inline-block;
-  width: 38px;
-  height: 38px;
-  background: #fff;
-  border: 1px solid colors.$basic-gray12;
-  font-size: 14px;
-  outline: 0;
-  box-sizing: border-box;
-  padding: 0;
-  vertical-align: top;
-  user-select: none;
-  &.rounds-all {
-    border-radius: 4px;
-  }
-  &.rounds-left {
-    border-radius: 4px 0 0 4px;
-  }
-  &.rounds-right {
-    border-radius: 0 4px 4px 0;
-    &:not(.rounds-all) {
-      margin-right: 0;
-    }
-  }
-  &:disabled {
-    color: colors.$basic-gray24;
-  }
-  &:not(.rounds-all) {
-    margin-right: -1px;
-  }
-  &:not(.selected):not(:disabled):hover {
-    background: #f5f5f5;
-    cursor: pointer;
-  }
-  &.selected {
-    position: relative;
-    background: colors.$basic-gray87;
-    border-color: colors.$basic-gray87;
-    color: #fff;
-    cursor: default;
-    &::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      box-shadow: inherit;
-      border-radius: inherit;
-    }
-  }
-}
-
-.icon {
-  vertical-align: middle;
-}

package/phone-input/presets.d.ts

@@ -1,25 +0,0 @@
-export interface Country {
-    readonly id: string;
-    readonly name: string;
-    readonly code: string;
-    readonly codeChars: string;
-    readonly mask: string;
-    readonly imageSrc: string;
-}
-export declare const IDS: {
-    readonly russia: "russia";
-    readonly kazakhstan: "kazakhstan";
-    readonly armenia: "armenia";
-    readonly belarus: "belarus";
-    readonly kyrgyzstan: "kyrgyzstan";
-    readonly azerbaijan: "azerbaijan";
-    readonly georgia: "georgia";
-    readonly moldova: "moldova";
-    readonly tajikistan: "tajikistan";
-    readonly turkmenistan: "turkmenistan";
-    readonly uzbekistan: "uzbekistan";
-    readonly ukraine: "ukraine";
-    readonly other: "other";
-};
-export declare const countriesList: ReadonlyArray<Country>;
-export declare const countries: Readonly<Record<string, Country>>;

package/phone-input/presets.js

@@ -1,118 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.countries = exports.countriesList = exports.IDS = void 0;
-const russia_png_1 = __importDefault(require("./images/russia.png"));
-const kazakhstan_png_1 = __importDefault(require("./images/kazakhstan.png"));
-const armenia_png_1 = __importDefault(require("./images/armenia.png"));
-const belarus_png_1 = __importDefault(require("./images/belarus.png"));
-const kyrgyzstan_png_1 = __importDefault(require("./images/kyrgyzstan.png"));
-const azerbaijan_png_1 = __importDefault(require("./images/azerbaijan.png"));
-const georgia_png_1 = __importDefault(require("./images/georgia.png"));
-const moldova_png_1 = __importDefault(require("./images/moldova.png"));
-const tajikistan_png_1 = __importDefault(require("./images/tajikistan.png"));
-const turkmenistan_png_1 = __importDefault(require("./images/turkmenistan.png"));
-const uzbekistan_png_1 = __importDefault(require("./images/uzbekistan.png"));
-const ukraine_png_1 = __importDefault(require("./images/ukraine.png"));
-const other_png_1 = __importDefault(require("./images/other.png"));
-exports.IDS = {
-    russia: 'russia',
-    kazakhstan: 'kazakhstan',
-    armenia: 'armenia',
-    belarus: 'belarus',
-    kyrgyzstan: 'kyrgyzstan',
-    azerbaijan: 'azerbaijan',
-    georgia: 'georgia',
-    moldova: 'moldova',
-    tajikistan: 'tajikistan',
-    turkmenistan: 'turkmenistan',
-    uzbekistan: 'uzbekistan',
-    ukraine: 'ukraine',
-    other: 'other',
-};
-const NAMES = {
-    [exports.IDS.russia]: 'Россия',
-    [exports.IDS.kazakhstan]: 'Казахстан',
-    [exports.IDS.armenia]: 'Армения',
-    [exports.IDS.belarus]: 'Беларусь',
-    [exports.IDS.kyrgyzstan]: 'Кыргызстан',
-    [exports.IDS.azerbaijan]: 'Азербайджан',
-    [exports.IDS.georgia]: 'Грузия',
-    [exports.IDS.moldova]: 'Молдова',
-    [exports.IDS.tajikistan]: 'Таджикистан',
-    [exports.IDS.turkmenistan]: 'Туркмения',
-    [exports.IDS.uzbekistan]: 'Узбекистан',
-    [exports.IDS.ukraine]: 'Украина',
-    [exports.IDS.other]: 'Другое',
-};
-const MASKS = {
-    [exports.IDS.russia]: '+7 (___) ___-__-__',
-    [exports.IDS.kazakhstan]: '+7 (___) ___-__-__',
-    [exports.IDS.armenia]: '+374-__-___-___',
-    [exports.IDS.belarus]: '+375 (__) ___-__-__',
-    [exports.IDS.kyrgyzstan]: '+996 (___) ___-___',
-    [exports.IDS.azerbaijan]: '+994-__-___-__-__',
-    [exports.IDS.georgia]: '+995 (___) ___-___',
-    [exports.IDS.moldova]: '+373-____-____',
-    [exports.IDS.tajikistan]: '+992-__-___-____',
-    [exports.IDS.turkmenistan]: '+993-_-___-____',
-    [exports.IDS.uzbekistan]: '+998-__-___-____',
-    [exports.IDS.ukraine]: '+380 (__) ___-__-__',
-    [exports.IDS.other]: '_______________',
-};
-const IMAGES = {
-    [exports.IDS.russia]: russia_png_1.default,
-    [exports.IDS.kazakhstan]: kazakhstan_png_1.default,
-    [exports.IDS.armenia]: armenia_png_1.default,
-    [exports.IDS.belarus]: belarus_png_1.default,
-    [exports.IDS.kyrgyzstan]: kyrgyzstan_png_1.default,
-    [exports.IDS.azerbaijan]: azerbaijan_png_1.default,
-    [exports.IDS.georgia]: georgia_png_1.default,
-    [exports.IDS.moldova]: moldova_png_1.default,
-    [exports.IDS.tajikistan]: tajikistan_png_1.default,
-    [exports.IDS.turkmenistan]: turkmenistan_png_1.default,
-    [exports.IDS.uzbekistan]: uzbekistan_png_1.default,
-    [exports.IDS.ukraine]: ukraine_png_1.default,
-    [exports.IDS.other]: other_png_1.default,
-};
-const CODES = {
-    [exports.IDS.russia]: '+7',
-    [exports.IDS.kazakhstan]: '+7',
-    [exports.IDS.armenia]: '+374',
-    [exports.IDS.belarus]: '+375',
-    [exports.IDS.kyrgyzstan]: '+996',
-    [exports.IDS.azerbaijan]: '+994',
-    [exports.IDS.georgia]: '+995',
-    [exports.IDS.moldova]: '+373',
-    [exports.IDS.tajikistan]: '+992',
-    [exports.IDS.turkmenistan]: '+993',
-    [exports.IDS.uzbekistan]: '+998',
-    [exports.IDS.ukraine]: '+380',
-    [exports.IDS.other]: '',
-};
-const ORDER = [
-    exports.IDS.russia,
-    exports.IDS.kazakhstan,
-    exports.IDS.armenia,
-    exports.IDS.belarus,
-    exports.IDS.kyrgyzstan,
-    exports.IDS.azerbaijan,
-    exports.IDS.georgia,
-    exports.IDS.moldova,
-    exports.IDS.tajikistan,
-    exports.IDS.turkmenistan,
-    exports.IDS.uzbekistan,
-    exports.IDS.ukraine,
-    exports.IDS.other,
-];
-exports.countriesList = ORDER.map(id => ({
-    id,
-    name: NAMES[id],
-    code: CODES[id],
-    codeChars: CODES[id].replace(/\D/g, ''),
-    mask: MASKS[id],
-    imageSrc: IMAGES[id],
-}));
-exports.countries = exports.countriesList.reduce((acc, item) => (Object.assign(Object.assign({}, acc), { [item.id]: item })), {});

package/phone-input-deprecated/index.d.ts

@@ -1,29 +0,0 @@
-import React from 'react';
-import { TextFieldProps } from '../text-field';
-import { MaskState } from '../masked-field';
-import { Country } from '../phone-input/presets';
-interface PhoneInputStyle extends React.CSSProperties {
-    '--phone-input-width'?: number | string;
-}
-export interface PhoneInputProps extends Omit<TextFieldProps, 'onChange' | 'onBlur' | 'value' | 'ref' | 'style' | 'multiline'> {
-    /** Сработает при "blur". */
-    onBlur?: (e: React.FocusEvent<HTMLInputElement>, s: MaskState & {
-        ready?: boolean;
-    }) => void;
-    /** Сработает при изменении поля "Другое". Не рекомендуется использовать. */
-    onChange?: React.ChangeEventHandler<HTMLInputElement>;
-    /** Срабатывает при изменении страны. */
-    onCountrySelect?: (c: Country) => void;
-    /** Значение. */
-    value?: string;
-    /** Стили. */
-    style?: PhoneInputStyle;
-}
-/**
- * Компонент поля ввода номера телефона.
- * @param props Параметры компонента.
- * @deprecated Нужно использовать новую реализацию "@sima-land/ui-nucleons/phone-input".
- * @return Элемент.
- */
-export declare const PhoneInput: ({ "data-testid": testId, className, label, onBlur, onCountrySelect, style, value, onChange, ...restProps }: PhoneInputProps) => JSX.Element;
-export {};

package/phone-input-deprecated/index.js

@@ -1,124 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PhoneInput = void 0;
-const react_1 = __importStar(require("react"));
-const down_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Arrows/down"));
-const up_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Arrows/up"));
-const dropdown_1 = require("../dropdown");
-const dropdown_item_1 = require("../dropdown-item");
-const text_field_1 = require("../text-field");
-const masked_field_1 = require("../masked-field");
-const hooks_1 = require("../hooks");
-const presets_1 = require("../phone-input/presets");
-const utils_1 = require("../phone-input/utils");
-const bind_1 = __importDefault(require("classnames/bind"));
-const phone_input_module_scss_1 = __importDefault(require("./phone-input.module.scss"));
-const cx = bind_1.default.bind(phone_input_module_scss_1.default);
-/**
- * Удаляет из значения код переданной страны.
- * @param value Значение.
- * @param country Данные страны.
- * @return Значение без кода.
- */
-const formatValue = (value, country) => value.replace(/\D/g, '').slice(country.codeChars.length);
-/**
- * Компонент поля ввода номера телефона.
- * @param props Параметры компонента.
- * @deprecated Нужно использовать новую реализацию "@sima-land/ui-nucleons/phone-input".
- * @return Элемент.
- */
-const PhoneInput = (_a) => {
-    var { 'data-testid': testId, className, label = 'Телефон', onBlur, onCountrySelect, style, value = '', onChange } = _a, restProps = __rest(_a, ['data-testid', "className", "label", "onBlur", "onCountrySelect", "style", "value", "onChange"]);
-    // маску определяем автоматически только при старте
-    const [country, setCountry] = (0, react_1.useState)(() => (0, utils_1.defineCountry)(value));
-    const [cleanValue, setCleanValue] = (0, react_1.useState)(() => formatValue(value, country));
-    const [withMenu, toggleMenu] = (0, react_1.useState)(false);
-    const rootRef = (0, react_1.useRef)(null);
-    const openerRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        setCleanValue(formatValue(value, country));
-    }, [value]);
-    (0, hooks_1.useOutsideClick)(rootRef, () => {
-        toggleMenu(false);
-    });
-    const AdornmentSVG = withMenu ? up_1.default : down_1.default;
-    const commonFieldProps = Object.assign(Object.assign({}, restProps), { label, multiline: false, className: cx('field'), endAdornment: (react_1.default.createElement("div", { ref: openerRef, className: cx('adornment'), "data-testid": 'phone-input:dropdown-opener', onClick: () => {
-                toggleMenu(a => !a);
-            } },
-            react_1.default.createElement("img", { alt: '', width: 24, height: 24, src: country.imageSrc }),
-            react_1.default.createElement(AdornmentSVG, { className: cx('arrow') }))), onClick: event => {
-            const opener = openerRef.current;
-            if (opener instanceof Node &&
-                event.target instanceof Node &&
-                (opener === event.target || opener.contains(event.target))) {
-                event.preventDefault(); // чтобы не фокусировалось на поле
-            }
-            else {
-                toggleMenu(false);
-            }
-        } });
-    return (react_1.default.createElement("div", { ref: rootRef, "data-testid": testId, style: style, className: cx('root', className) },
-        country.id === presets_1.IDS.other ? (react_1.default.createElement(text_field_1.TextField, Object.assign({}, commonFieldProps, { value: cleanValue, onChange: (e) => {
-                const nextValue = e.target.value.replace(/\D/g, '').slice(0, 20);
-                e.target.value = nextValue;
-                setCleanValue(nextValue);
-                onChange && onChange(e);
-            }, onBlur: e => {
-                onBlur &&
-                    onBlur(e, {
-                        value: e.target.value,
-                        cleanValue: e.target.value,
-                        ready: e.target.value.length > 0,
-                    });
-            } }))) : (react_1.default.createElement(masked_field_1.MaskedField, Object.assign({}, commonFieldProps, { 
-            // убираем код страны, так как он уже зашит в маску
-            value: cleanValue, mask: country.mask, onBlur: (event, state) => {
-                onBlur &&
-                    onBlur(event, Object.assign(Object.assign({}, state), { 
-                        // вставляем код страны обратно в чистое значение
-                        cleanValue: `${country.codeChars}${state.cleanValue}` }));
-            } }))),
-        withMenu && (react_1.default.createElement(dropdown_1.Dropdown, { role: 'menu', className: cx('menu'), "data-testid": 'phone-input:dropdown' }, presets_1.countriesList.map((item, index) => item.id === country.id ? null : (react_1.default.createElement(dropdown_item_1.DropdownItem, { key: index, size: 'm', role: 'menuitem', className: cx('menu-item'), onClick: () => {
-                toggleMenu(false);
-                setCountry(item);
-                onCountrySelect && onCountrySelect(item);
-            }, startContent: react_1.default.createElement("img", { alt: '', width: 24, height: 24, src: item.imageSrc, className: cx('country-icon') }), endContent: item.code }, item.name)))))));
-};
-exports.PhoneInput = PhoneInput;

package/phone-input-deprecated/phone-input.module.scss

@@ -1,41 +0,0 @@
-@use '../colors';
-
-.root {
-  text-align: left;
-  position: relative;
-  width: var(--phone-input-width, 320px);
-}
-
-.field {
-  width: 100%;
-}
-
-.adornment {
-  display: flex;
-  align-items: center;
-  user-select: none;
-  cursor: pointer;
-}
-
-.arrow {
-  display: block;
-  fill: colors.$basic-gray38;
-  margin-left: 4px;
-  pointer-events: none; // игнорируем клики т.к. после них элемент стрелки подменяется и считается что он сработал вне элемента родителя
-}
-
-.menu {
-  position: absolute;
-  width: 100%;
-  top: 56px;
-  --dropdown-max-height: 208px;
-  z-index: 2;
-}
-
-.menu-item {
-  font-size: 16px;
-  line-height: 24px;
-  .country-icon {
-    display: block;
-  }
-}

package/rating/star.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <path d="M11.304 2.31811C11.556 1.69076 12.4441 1.69076 12.696 2.31811L15.2632 8.71108L22.1366 9.17714C22.8111 9.22287 23.0856 10.0675 22.5668 10.501L17.28 14.9181L18.9608 21.5991C19.1257 22.2547 18.4072 22.7767 17.8347 22.4173L12 18.7542L6.16538 22.4173C5.59282 22.7767 4.87433 22.2547 5.03926 21.5991L6.72002 14.9181L1.43326 10.501C0.914465 10.0675 1.1889 9.22287 1.8634 9.17714L8.7368 8.71108L11.304 2.31811Z" />
-</svg>

package/readme.md

@@ -1,183 +0,0 @@
-# Библиотека компонентов
-
-В этом проекте собраны react-компоненты, реализующие правила дизайн-системы, а также компоненты и вспомогательные функции (в том числе react-хуки) которые помогают решать распространенные задачи разработки UI.
-
-## Использование
-
-### Установка
-
-```bash
-# npm
-npm i -S @sima-land/ui-nucleons
-
-# или yarn
-yarn add @sima-land/ui-nucleons
-```
-
-### Настройка среды
-
-Компоненты библиотеки используют:
-
-- импорты изображений (jpg, png..) как url/src
-- импорты стилей
-- импорты стилей как css-модулей (каждый такой файл промаркирован в виде `%filename%.module.scss`)
-- импорты svg-файлов как react-компоненты
-
-#### Для работы с Webpack необходимо (как вариант):
-
-- добавить необходимые пакеты `@svgr/*`
-- сконфигурировать обработку svg, css, scss файлов
-
-##### Зависимости
-
-```bash
-npm install --save-dev @svgr/core @svgr/plugin-jsx @svgr/plugin-svgo @svgr/webpack
-```
-
-##### Конфигурация
-
-```js
-// webpack.config.js
-const svgrOptions = require('../../svgr.config'); // опции SVGR (скопировать из данного проекта)
-
-module.exports = {
-  module: {
-    rules: [
-      // svg
-      {
-        test: /\.svg$/,
-        use: [
-          {
-            loader: '@svgr/webpack',
-            options: svgrOptions,
-          },
-        ],
-      },
-
-      // стилей
-      {
-        test: /\.(css|scss)$/,
-        use: [
-          // ...здесь style-loader, mini-css-extract-plugin или что-то другое
-          {
-            loader: 'css-loader',
-            options: {
-              modules: {
-                auto: /\.module\.(css|scss)$/,
-                localIdentName: '[name]__[local]--[hash:hex:3]',
-              },
-            },
-          },
-          'sass-loader',
-        ],
-      },
-    ],
-  },
-};
-```
-
-#### Для работы с Jest необходимо (как вариант):
-
-- добавить необходимые пакеты `@svgr/*`
-- сконфигурировать обработку svg, css, scss файлов
-
-##### Добавить обработку SVG
-
-- добавить файл "трансформера" вида:
-
-```js
-const babel = require('@babel/core');
-const babelConfig = require('../../babel.config');
-const svgr = require('@svgr/core');
-const svgrConfig = require('../../svgr.config');
-
-module.exports = {
-  process(sourceText, sourcePath) {
-    const code = svgr.transform.sync(sourceText, svgrConfig, { filePath: sourcePath });
-
-    return babel.transformSync(code, { filename: sourcePath, ...babelConfig });
-  },
-};
-```
-
-- задействовать его в конфигурации Jest
-
-##### Добавить поддержку стилей
-
-В конфигурации Jest:
-
-```js
-module.exports = {
-  transform: {
-    // svg как react-компоненты
-    '\\.svg$': '<rootDir>/.jest/transforms/svg.js',
-
-    // обычный css
-    '(?<!(\\.module))\\.(css|scss)$': './transformer/empty.js',
-
-    // css-модули
-    '\\.module\\.(css|scss)$': 'jest-css-modules-transform',
-  },
-  transformIgnorePatterns: [
-    // в пакете содержится css-модули, поэтому игнорируем только скрипты
-    '/node_modules/.+js$',
-  ],
-  // ...
-};
-```
-
-#### Декларации типов для TypeScript
-
-в `src/custom.d.ts` необходимо указать:
-
-```ts
-// css-модули
-declare module '*.module.css' {
-  const classes: { [key: string]: string };
-  export default classes;
-}
-
-// css-модули с синтаксисом SCSS
-declare module '*.module.scss' {
-  const classes: { [key: string]: string };
-  export default classes;
-}
-
-// svg как React-компоненты
-declare module '*.svg' {
-  const content: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
-  export default content;
-}
-```
-
-## Разработка и поддержка
-
-### Принципы библиотеки
-
-- в библиотеке не должно быть HOC (компонентов высшего порядка - функций, возвращающих компонент)
-- компонент интерфейса не должен иметь внешних отступов по умолчанию
-
-### Структура библиотеки
-
-`src/` - директория со всеми компонентами библиотеки
-
-- `something/` - директория с компонентом
-  - `__stories__/`
-    - `index.stories.tsx` - описание компонента для storybook
-  - `__test__/`
-    - `index.test.tsx` - unit-тесты
-  - `index.tsx` - файл, с именованными экспортами компонента и интерфейса
-- `helpers/` - общие вспомогательные функции (для использования вне библиотеки)
-- `hooks/` - общие react-хуки (для использования вне библиотеки)
-- `_internal/` - внутренние скрипты для использования только в рамках данной библиотеки
-
-### Тестирование
-
-Локально E2E-тесты должны запускаться через docker, пример:
-
-```bash
-docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.29.2-focal /bin/bash
-npx playwright test
-```
-
-В противном случае скриншотные тесты не будут совпадать из-за разницы окружения запуска.

package/screen/index.d.ts

@@ -1,25 +0,0 @@
-import React from 'react';
-import { ScreenInnerProps } from './utils';
-import { WithPageScrollLock } from '../_internal/page-scroll-lock';
-export interface ScreenProps extends ScreenInnerProps, WithPageScrollLock {
-    /** Содержимое. */
-    children?: React.ReactNode;
-    /** Определяет область отображаемую как загружающуюся. */
-    loadingArea?: 'content' | 'full';
-    /** Идентификатор для систем автоматизированного тестирования. */
-    'data-testid'?: string;
-}
-/**
- * Экран.
- * @deprecated На адаптивных страницах стоит использовать Modal.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare const Screen: {
-    ({ children, loading, loadingArea, loadingOverlayProps, onFullScroll, fullScrollThreshold, withScrollDisable, scrollDisableOptions, "data-testid": testId, }: ScreenProps): JSX.Element;
-    Header: ({ divided, title, subtitle, buttons, onBack, onClose, ...restProps }: import("./slots").HeaderSlotProps) => JSX.Element;
-    Body: React.ForwardRefExoticComponent<{
-        children?: React.ReactNode;
-    } & React.RefAttributes<HTMLDivElement | null>>;
-    Footer: React.FC<{}>;
-};