@alfalab/core-components-confirmation 12.1.4 → 12.2.0

package/component-40c9adb0.d.ts

@@ -0,0 +1,35 @@
+import { FC } from 'react';
+import { ConfirmationProps } from "./types";
+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;
+declare const BaseConfirmation: FC<ConfirmationProps>;
+export { __extends, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __spreadArrays, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault, __classPrivateFieldGet, __classPrivateFieldSet, __assign, __createBinding, BaseConfirmation };

package/{component.js → component-40c9adb0.js}

@@ -1,22 +1,14 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var cn = require('classnames');
 var hooks = require('@alfalab/hooks');
 var utils = require('./utils.js');
 var context = require('./context.js');
 var types = require('./types.js');
-require('@alfalab/core-components-code-input');
-require('@alfalab/core-components-link');
-require('./countdown-section-c2901a7e.js');
-require('@alfalab/core-components-loader');
-require('@alfalab/core-components-button');
 var components_screens_initial_component = require('./components/screens/initial/component.js');
 var components_screens_hint_component = require('./components/screens/hint/component.js');
 var components_screens_fatalError_component = require('./components/screens/fatal-error/component.js');
-require('./components/countdown-loader/component.js');
 var components_screens_tempBlock_component = require('./components/screens/temp-block/component.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -38,8 +30,8 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-var __assign = function () {
-    __assign = Object.assign || function __assign(t) {
+exports.__assign = function () {
+    exports.__assign = Object.assign || function __assign(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
             s = arguments[i];
             for (var p in s)
@@ -48,7 +40,7 @@ var __assign = function () {
         }
         return t;
     };
-    return __assign.apply(this, arguments);
+    return exports.__assign.apply(this, arguments);
 };
 function __rest(s, e) {
     var t = {};
@@ -63,8 +55,8 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"confirmation__component_y48zz","center":"confirmation__center_y48zz"};
-require('./index.css')
+var styles = {"component":"confirmation__component_n9c29","center":"confirmation__center_n9c29"};
+require('./components/base-confirmation/index.css')
 
 var confirmationScreens = {
     INITIAL: components_screens_initial_component.Initial,
@@ -72,8 +64,8 @@ var confirmationScreens = {
     FATAL_ERROR: components_screens_fatalError_component.FatalError,
     TEMP_BLOCK: components_screens_tempBlock_component.TempBlock,
 };
-var Confirmation = function (_a) {
-    var state = _a.state, screen = _a.screen, _b = _a.alignContent, alignContent = _b === void 0 ? 'left' : _b, children = _a.children, _c = _a.requiredCharAmount, requiredCharAmount = _c === void 0 ? 5 : _c, _d = _a.countdownDuration, countdownDuration = _d === void 0 ? utils.ONE_MINUTE : _d, _e = _a.tempBlockDuration, tempBlockDuration = _e === void 0 ? utils.ONE_DAY : _e, phone = _a.phone, blockSmsRetry = _a.blockSmsRetry, dataTestId = _a.dataTestId, className = _a.className, getScreensMap = _a.getScreensMap, onInputFinished = _a.onInputFinished, onChangeState = _a.onChangeState, onSmsRetryClick = _a.onSmsRetryClick, onChangeScreen = _a.onChangeScreen, onFatalErrorOkButtonClick = _a.onFatalErrorOkButtonClick, onTempBlockFinished = _a.onTempBlockFinished, restProps = __rest(_a, ["state", "screen", "alignContent", "children", "requiredCharAmount", "countdownDuration", "tempBlockDuration", "phone", "blockSmsRetry", "dataTestId", "className", "getScreensMap", "onInputFinished", "onChangeState", "onSmsRetryClick", "onChangeScreen", "onFatalErrorOkButtonClick", "onTempBlockFinished"]);
+var BaseConfirmation = function (_a) {
+    var state = _a.state, screen = _a.screen, _b = _a.alignContent, alignContent = _b === void 0 ? 'left' : _b, children = _a.children, _c = _a.requiredCharAmount, requiredCharAmount = _c === void 0 ? 5 : _c, _d = _a.countdownDuration, countdownDuration = _d === void 0 ? utils.ONE_MINUTE : _d, _e = _a.tempBlockDuration, tempBlockDuration = _e === void 0 ? utils.ONE_DAY : _e, phone = _a.phone, blockSmsRetry = _a.blockSmsRetry, dataTestId = _a.dataTestId, className = _a.className, getScreensMap = _a.getScreensMap, onInputFinished = _a.onInputFinished, onChangeState = _a.onChangeState, onSmsRetryClick = _a.onSmsRetryClick, onChangeScreen = _a.onChangeScreen, onFatalErrorOkButtonClick = _a.onFatalErrorOkButtonClick, onTempBlockFinished = _a.onTempBlockFinished, mobile = _a.mobile, restProps = __rest(_a, ["state", "screen", "alignContent", "children", "requiredCharAmount", "countdownDuration", "tempBlockDuration", "phone", "blockSmsRetry", "dataTestId", "className", "getScreensMap", "onInputFinished", "onChangeState", "onSmsRetryClick", "onChangeScreen", "onFatalErrorOkButtonClick", "onTempBlockFinished", "mobile"]);
     var _f = utils.useCountdown(countdownDuration), timeLeft = _f[0], startTimer = _f[1], stopTimer = _f[2];
     var prevState = hooks.usePrevious(state);
     React.useEffect(function () {
@@ -110,7 +102,7 @@ var Confirmation = function (_a) {
     };
     var contextValue = {
         alignContent: alignContent,
-        texts: __assign(__assign({}, types.defaultTexts), restProps.texts),
+        texts: exports.__assign(exports.__assign({}, types.defaultTexts), restProps.texts),
         state: state,
         screen: screen,
         requiredCharAmount: requiredCharAmount,
@@ -129,7 +121,8 @@ var Confirmation = function (_a) {
     var screensMap = getScreensMap ? getScreensMap(confirmationScreens) : confirmationScreens;
     var CurrentScreen = screensMap[screen];
     return (React__default['default'].createElement(context.ConfirmationContext.Provider, { value: contextValue },
-        React__default['default'].createElement("div", { className: cn__default['default'](styles.component, styles[alignContent], className), "data-test-id": dataTestId }, CurrentScreen && React__default['default'].createElement(CurrentScreen, null))));
+        React__default['default'].createElement("div", { className: cn__default['default'](styles.component, styles[alignContent], className), "data-test-id": dataTestId }, CurrentScreen && React__default['default'].createElement(CurrentScreen, { mobile: mobile }))));
 };
 
-exports.Confirmation = Confirmation;
+exports.BaseConfirmation = BaseConfirmation;
+exports.__rest = __rest;

package/component.desktop.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { ConfirmationProps } from "./types";
+type DesktopConfirmationProps = Omit<ConfirmationProps, 'mobile'>;
+declare const ConfirmationDesktop: FC<DesktopConfirmationProps>;
+export { DesktopConfirmationProps, ConfirmationDesktop };

package/component.desktop.js

@@ -0,0 +1,31 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_baseConfirmation_component = require('./component-40c9adb0.js');
+var React = require('react');
+require('classnames');
+require('@alfalab/hooks');
+require('./utils.js');
+require('./context.js');
+require('./types.js');
+require('@alfalab/core-components-code-input');
+require('@alfalab/core-components-link');
+require('@alfalab/core-components-typography');
+require('@alfalab/core-components-button');
+require('./components/header/component.js');
+require('@alfalab/core-components-loader');
+require('./countdown-section-d04caa75.js');
+require('./components/screens/initial/component.js');
+require('./components/screens/hint/component.js');
+require('./components/screens/fatal-error/component.js');
+require('./components/countdown-loader/component.js');
+require('./components/screens/temp-block/component.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var ConfirmationDesktop = function (props) { return (React__default['default'].createElement(components_baseConfirmation_component.BaseConfirmation, components_baseConfirmation_component.__assign({}, props))); };
+
+exports.ConfirmationDesktop = ConfirmationDesktop;

package/component.mobile.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { ConfirmationProps } from "./types";
+type MobileConfirmationProps = Omit<ConfirmationProps, 'mobile'>;
+declare const ConfirmationMobile: FC<MobileConfirmationProps>;
+export { MobileConfirmationProps, ConfirmationMobile };

package/component.mobile.js

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_baseConfirmation_component = require('./component-40c9adb0.js');
+var React = require('react');
+var cn = require('classnames');
+require('@alfalab/hooks');
+require('./utils.js');
+require('./context.js');
+require('./types.js');
+require('@alfalab/core-components-code-input');
+require('@alfalab/core-components-link');
+require('@alfalab/core-components-typography');
+require('@alfalab/core-components-button');
+require('./components/header/component.js');
+require('@alfalab/core-components-loader');
+require('./countdown-section-d04caa75.js');
+require('./components/screens/initial/component.js');
+require('./components/screens/hint/component.js');
+require('./components/screens/fatal-error/component.js');
+require('./components/countdown-loader/component.js');
+require('./components/screens/temp-block/component.js');
+
+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 styles = {"container":"confirmation__container_wf4yk"};
+require('./mobile.css')
+
+var ConfirmationMobile = function (_a) {
+    var className = _a.className, resProps = components_baseConfirmation_component.__rest(_a, ["className"]);
+    return (React__default['default'].createElement(components_baseConfirmation_component.BaseConfirmation, components_baseConfirmation_component.__assign({ mobile: true, className: cn__default['default'](className, styles.container) }, resProps)));
+};
+
+exports.ConfirmationMobile = ConfirmationMobile;

package/component.responsive.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+import { ConfirmationProps } from "./types";
+type ResponsiveConfirmationProps = Omit<ConfirmationProps, 'confirmationScreens'>;
+type ConfirmationMedia = 'desktop' | 'mobile';
+declare const ConfirmationResponsive: FC<ResponsiveConfirmationProps>;
+export { ResponsiveConfirmationProps, ConfirmationMedia, ConfirmationResponsive };

package/component.responsive.js

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_baseConfirmation_component = require('./component-40c9adb0.js');
+var React = require('react');
+require('classnames');
+var hooks = require('@alfalab/hooks');
+require('./utils.js');
+require('./context.js');
+require('./types.js');
+require('@alfalab/core-components-code-input');
+require('@alfalab/core-components-link');
+require('@alfalab/core-components-typography');
+require('@alfalab/core-components-button');
+require('./components/header/component.js');
+require('@alfalab/core-components-loader');
+require('./countdown-section-d04caa75.js');
+require('./components/screens/initial/component.js');
+require('./components/screens/hint/component.js');
+require('./components/screens/fatal-error/component.js');
+require('./components/countdown-loader/component.js');
+require('./components/screens/temp-block/component.js');
+var component_desktop = require('./component.desktop.js');
+var component_mobile = require('./component.mobile.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var ConfirmationResponsive = function (props) {
+    var view = hooks.useMedia([
+        ['mobile', '(max-width: 1023px)'],
+        ['desktop', '(min-width: 1024px)'],
+    ], 'desktop')[0];
+    return view === 'desktop' ? (React__default['default'].createElement(component_desktop.ConfirmationDesktop, components_baseConfirmation_component.__assign({}, props))) : (React__default['default'].createElement(component_mobile.ConfirmationMobile, components_baseConfirmation_component.__assign({}, props)));
+};
+
+exports.ConfirmationResponsive = ConfirmationResponsive;

package/components/base-confirmation/component.js

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_baseConfirmation_component = require('../../component-40c9adb0.js');
+require('react');
+require('classnames');
+require('@alfalab/hooks');
+require('../../utils.js');
+require('../../context.js');
+require('../../types.js');
+require('@alfalab/core-components-code-input');
+require('@alfalab/core-components-link');
+require('@alfalab/core-components-typography');
+require('@alfalab/core-components-button');
+require('../header/component.js');
+require('@alfalab/core-components-loader');
+require('../../countdown-section-d04caa75.js');
+require('../screens/initial/component.js');
+require('../screens/hint/component.js');
+require('../screens/fatal-error/component.js');
+require('../countdown-loader/component.js');
+require('../screens/temp-block/component.js');
+
+
+
+exports.BaseConfirmation = components_baseConfirmation_component.BaseConfirmation;

package/components/base-confirmation/index.css

@@ -0,0 +1,24 @@
+/* hash: 1y4yr */
+:root {
+    --color-light-text-secondary: #546272;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+.confirmation__component_n9c29 {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: 388px;
+    margin: 0 auto;
+    color: var(--color-light-text-secondary);
+}
+.confirmation__center_n9c29 {
+    align-items: center;
+    text-align: center;
+}

package/components/base-confirmation/index.d.ts

@@ -0,0 +1 @@
+export * from "../../component-40c9adb0";

package/components/base-confirmation/index.js

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_baseConfirmation_component = require('../../component-40c9adb0.js');
+require('react');
+require('classnames');
+require('@alfalab/hooks');
+require('../../utils.js');
+require('../../context.js');
+require('../../types.js');
+require('@alfalab/core-components-code-input');
+require('@alfalab/core-components-link');
+require('@alfalab/core-components-typography');
+require('@alfalab/core-components-button');
+require('../header/component.js');
+require('@alfalab/core-components-loader');
+require('../../countdown-section-d04caa75.js');
+require('../screens/initial/component.js');
+require('../screens/hint/component.js');
+require('../screens/fatal-error/component.js');
+require('../countdown-loader/component.js');
+require('../screens/temp-block/component.js');
+
+
+
+exports.BaseConfirmation = components_baseConfirmation_component.BaseConfirmation;

package/components/countdown-loader/component.js

@@ -8,7 +8,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var styles = {"circle":"confirmation__circle_2jmtl"};
+var styles = {"circle":"confirmation__circle_h5jlk"};
 require('./index.css')
 
 var SIZE = 16;

package/components/countdown-loader/index.css

@@ -1,4 +1,4 @@
-/* hash: kkuqs */
+/* hash: 1xam3 */
 :root {
     --color-light-graphic-tertiary: #b6bcc3;
 }
@@ -10,16 +10,7 @@
 
     /* Hard up */
 }
-:root {
-    /* title */
-
-    /* text */
-
-    /* error */
-
-    /* input */
-}
-.confirmation__circle_2jmtl {
+.confirmation__circle_h5jlk {
     fill: transparent;
     stroke: var(--color-light-graphic-tertiary);
     stroke-width: 2px;

package/components/header/component.d.ts

@@ -0,0 +1,13 @@
+import { FC, ReactNode } from 'react';
+type HeaderProps = {
+    /**
+     * Контент шапки
+     */
+    children?: ReactNode;
+    /**
+     * Отображать в мобильной версии экран компонента
+     */
+    mobile?: boolean;
+};
+declare const Header: FC<HeaderProps>;
+export { HeaderProps, Header };

package/components/header/component.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+var coreComponentsTypography = require('@alfalab/core-components-typography');
+
+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 styles = {"header":"confirmation__header_smzfd","typography":"confirmation__typography_smzfd","typographyMobile":"confirmation__typographyMobile_smzfd"};
+require('./index.css')
+
+var Header = function (_a) {
+    var _b;
+    var mobile = _a.mobile, children = _a.children;
+    return (React__default['default'].createElement(coreComponentsTypography.Typography.Title, { className: cn__default['default'](styles.header, styles.typography, (_b = {}, _b[styles.typographyMobile] = mobile, _b)), tag: 'h3', color: 'primary' }, children));
+};
+
+exports.Header = Header;

package/components/header/index.css

@@ -0,0 +1,51 @@
+/* hash: cyuy8 */
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-xl: 24px;
+}
+:root {
+    --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
+        sans-serif;
+}
+:root {
+    /* desktop */
+    --confirmation-header-desktop-font-size: 22px;
+    --confirmation-header-desktop-line-height: 26px;
+    --confirmation-header-desktop-font-weight: bold;
+    --confirmation-header-desktop-font-family: var(--font-family-system);
+
+    /* mobile */
+    --confirmation-header-mobile-font-size: 18px;
+    --confirmation-header-mobile-line-height: 22px;
+    --confirmation-header-mobile-font-weight: bold;
+    --confirmation-header-mobile-font-family: var(--font-family-system);
+
+    /* text */
+
+    /* header */
+    --confirmation-header-font-feature-settings: normal
+}
+.confirmation__header_smzfd {
+    margin-bottom: var(--gap-xl);
+}
+.confirmation__typography_smzfd {
+    font-feature-settings: var(--confirmation-header-font-feature-settings);
+    font-size: var(--confirmation-header-desktop-font-size);
+    line-height: var(--confirmation-header-desktop-line-height);
+    font-weight: var(--confirmation-header-desktop-font-weight);
+    font-family: var(--confirmation-header-desktop-font-family);
+}
+.confirmation__typographyMobile_smzfd {
+    font-feature-settings: var(--confirmation-header-font-feature-settings);
+    font-size: var(--confirmation-header-mobile-font-size);
+    line-height: var(--confirmation-header-mobile-line-height);
+    font-weight: var(--confirmation-header-mobile-font-weight);
+    font-family: var(--confirmation-header-mobile-font-family);
+}

package/components/header/index.d.ts

@@ -0,0 +1 @@
+export * from "./component";

package/components/header/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react');
+require('classnames');
+require('@alfalab/core-components-typography');
+var components_header_component = require('./component.js');
+
+
+
+exports.Header = components_header_component.Header;

package/components/index.js

@@ -9,9 +9,11 @@ require('../utils.js');
 require('../context.js');
 require('@alfalab/core-components-code-input');
 require('@alfalab/core-components-link');
-require('../countdown-section-c2901a7e.js');
-require('@alfalab/core-components-loader');
+require('@alfalab/core-components-typography');
 require('@alfalab/core-components-button');
+require('./header/component.js');
+require('@alfalab/core-components-loader');
+require('../countdown-section-d04caa75.js');
 var components_screens_initial_component = require('./screens/initial/component.js');
 var components_screens_hint_component = require('./screens/hint/component.js');
 var components_screens_fatalError_component = require('./screens/fatal-error/component.js');

package/components/screens/fatal-error/component.d.ts

@@ -1,3 +1,9 @@
-/// <reference types="react" />
-declare const FatalError: () => JSX.Element;
-export { FatalError };
+import { FC } from 'react';
+type FatalErrorProps = {
+    /**
+     * Отображать в мобильной версии экран компонента
+     */
+    mobile?: boolean;
+};
+declare const FatalError: FC<FatalErrorProps>;
+export { FatalErrorProps, FatalError };

package/components/screens/fatal-error/component.js

@@ -3,23 +3,29 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var cn = require('classnames');
 require('../../../utils.js');
 var context = require('../../../context.js');
+var coreComponentsTypography = require('@alfalab/core-components-typography');
 var coreComponentsButton = require('@alfalab/core-components-button');
+var components_header_component = require('../../header/component.js');
 
 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 styles = {"header":"confirmation__header_aeh9b","description":"confirmation__description_aeh9b"};
+var styles = {"typographyTheme":"confirmation__typographyTheme_6vibs","left":"confirmation__left_6vibs","center":"confirmation__center_6vibs","button":"confirmation__button_6vibs"};
 require('./index.css')
 
-var FatalError = function () {
-    var _a = React.useContext(context.ConfirmationContext), texts = _a.texts, onFatalErrorOkButtonClick = _a.onFatalErrorOkButtonClick;
-    return (React__default['default'].createElement(React.Fragment, null,
-        React__default['default'].createElement("h3", { className: styles.header }, texts.fatalErrorTitle),
-        React__default['default'].createElement("div", { className: styles.description }, texts.fatalErrorDescription),
-        React__default['default'].createElement(coreComponentsButton.Button, { size: 'xs', view: 'secondary', onClick: onFatalErrorOkButtonClick }, texts.fatalErrorButton)));
+var FatalError = function (_a) {
+    var _b;
+    var mobile = _a.mobile;
+    var _c = React.useContext(context.ConfirmationContext), alignContent = _c.alignContent, texts = _c.texts, onFatalErrorOkButtonClick = _c.onFatalErrorOkButtonClick;
+    return (React__default['default'].createElement("div", { className: cn__default['default'](styles.component, styles[alignContent]) },
+        React__default['default'].createElement(components_header_component.Header, { mobile: mobile }, texts.fatalErrorTitle),
+        React__default['default'].createElement(coreComponentsTypography.Typography.Text, { view: 'primary-medium', color: 'primary', className: cn__default['default']((_b = {}, _b[styles.typographyTheme] = !mobile, _b)) }, texts.fatalErrorDescription),
+        React__default['default'].createElement(coreComponentsButton.Button, { size: mobile ? 'xs' : 's', view: 'secondary', onClick: onFatalErrorOkButtonClick, className: styles.button }, texts.fatalErrorButton)));
 };
 
 exports.FatalError = FatalError;

package/components/screens/fatal-error/index.css

@@ -1,7 +1,6 @@
-/* hash: 14dd6 */
+/* hash: ceovk */
 :root {
     --color-light-text-primary: #0b1f35;
-    --color-light-text-secondary: #546272;
 }
 :root {
 
@@ -12,7 +11,6 @@
     /* Hard up */
 }
 :root {
-    --gap-xl: 24px;
     --gap-2xl: 32px;
 }
 :root {
@@ -20,42 +18,32 @@
         sans-serif;
 }
 :root {
-    /* title */
-    --confirmation-title-font-size: 22px;
-    --confirmation-title-line-height: 26px;
-    --confirmation-title-font-weight: 700;
-    --confirmation-title-font-family: var(--font-family-system);
-    --confirmation-title-color: var(--color-light-text-primary);
-    --confirmation-title-font-feature-settings: normal;
+    /* desktop */
+
+    /* mobile */
 
     /* text */
     --confirmation-text-font-size: 16px;
     --confirmation-text-line-height: 24px;
     --confirmation-text-font-weight: 400;
     --confirmation-text-font-family: var(--font-family-system);
-    --confirmation-text-color: var(--color-light-text-secondary);
-
-    /* error */
+    --confirmation-text-color: var(--color-light-text-primary)
 
-    /* input */
-}
-.confirmation__header_aeh9b {
-    margin: 0;
-    margin-bottom: var(--gap-xl);
-    font-size: var(--confirmation-title-font-size);
-    line-height: var(--confirmation-title-line-height);
-    font-weight: var(--confirmation-title-font-weight);
-    font-family: var(--confirmation-title-font-family);
-    color: var(--confirmation-title-color);
-    font-feature-settings: var(--confirmation-title-font-feature-settings);
-}
-.confirmation__description_aeh9b {
+    /* header */
+}
+.confirmation__typographyTheme_6vibs {
     font-size: var(--confirmation-text-font-size);
     line-height: var(--confirmation-text-line-height);
     font-weight: var(--confirmation-text-font-weight);
     font-family: var(--confirmation-text-font-family);
     color: var(--confirmation-text-color);
-
-    margin-bottom: var(--gap-2xl);
-    color: var(--color-light-text-primary);
+}
+.confirmation__left_6vibs {
+    align-items: flex-start;
+}
+.confirmation__center_6vibs {
+    align-items: center;
+}
+.confirmation__button_6vibs {
+    margin-top: var(--gap-2xl);
 }

package/components/screens/fatal-error/index.js

@@ -3,9 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 require('react');
+require('classnames');
 require('../../../utils.js');
 require('../../../context.js');
+require('@alfalab/core-components-typography');
 require('@alfalab/core-components-button');
+require('../../header/component.js');
 var components_screens_fatalError_component = require('./component.js');