@alfalab/core-components 1.18.0 → 2.0.0-beta.3

package/confirmation/cssm/utils.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { ConfirmationProps } from "./types";
+/**
+ * Форматирование миллисекунд в hh:mm:ss.
+ *
+ * @param {Number} ms миллисекунды
+ * @returns {String} время в формате mm:ss
+ */
+declare function formatMsAsMinutes(ms: number): string;
+type UseCountdown = (countdownDuration: number, tick?: number) => [number, () => void, () => void];
+/**
+ * Возвращает время, которое осталось до истечения таймера в ms
+ */
+declare const useCountdown: UseCountdown;
+declare const ONE_DAY: number;
+declare const ONE_MINUTE: number;
+type UseConfirmationParams = {
+    state?: ConfirmationProps['state'];
+    screen?: ConfirmationProps['screen'];
+    blockSmsRetry?: ConfirmationProps['blockSmsRetry'];
+};
+declare const useConfirmation: ({ state, screen, blockSmsRetry }?: UseConfirmationParams) => {
+    confirmationState: string;
+    confirmationScreen: string;
+    confirmationBlockSmsRetry: boolean;
+    setConfirmationState: import("react").Dispatch<import("react").SetStateAction<string>>;
+    setConfirmationScreen: import("react").Dispatch<import("react").SetStateAction<string>>;
+    setConfirmationBlockSmsRetry: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+};
+export { formatMsAsMinutes, useCountdown, ONE_DAY, ONE_MINUTE, useConfirmation };

package/confirmation/cssm/utils.js

@@ -0,0 +1,82 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+/**
+ * Форматирование миллисекунд в hh:mm:ss.
+ *
+ * @param {Number} ms миллисекунды
+ * @returns {String} время в формате mm:ss
+ */
+function formatMsAsMinutes(ms) {
+    var totalSeconds = Math.ceil(ms / 1000);
+    var totalMinutes = Math.floor(totalSeconds / 60);
+    var totalHours = Math.floor(totalMinutes / 60);
+    var seconds = totalSeconds % 60;
+    var paddedSeconds = ("00" + seconds).slice(-2);
+    if (totalHours > 0) {
+        var minutes = totalMinutes % 60;
+        var paddedMinutes_1 = ("00" + minutes).slice(-2);
+        var paddedHours = ("00" + totalHours).slice(-2);
+        return paddedHours + ":" + paddedMinutes_1 + ":" + paddedSeconds;
+    }
+    var paddedMinutes = ("00" + totalMinutes).slice(-2);
+    return paddedMinutes + ":" + paddedSeconds;
+}
+/**
+ * Возвращает время, которое осталось до истечения таймера в ms
+ */
+var useCountdown = function (countdownDuration, tick) {
+    if (tick === void 0) { tick = 1000; }
+    var timerId = React.useRef(0);
+    var start = React.useRef(0);
+    var _a = React.useState(0), timePassed = _a[0], setTimePassed = _a[1];
+    var stopTimer = React.useCallback(function () {
+        window.clearInterval(timerId.current);
+    }, []);
+    var updateProgress = React.useCallback(function () {
+        var passed = Date.now() - start.current;
+        if (passed >= countdownDuration) {
+            stopTimer();
+            setTimePassed(countdownDuration);
+        }
+        else {
+            setTimePassed(passed);
+        }
+    }, [countdownDuration, stopTimer]);
+    var startTimer = React.useCallback(function () {
+        stopTimer();
+        start.current = Date.now();
+        updateProgress();
+        timerId.current = window.setInterval(updateProgress, tick);
+    }, [stopTimer, updateProgress, tick]);
+    var timeLeft = countdownDuration - timePassed;
+    React.useEffect(function () {
+        return function () {
+            stopTimer();
+        };
+    }, [stopTimer]);
+    return [timeLeft, startTimer, stopTimer];
+};
+var ONE_DAY = 24 * 60 * 60 * 1000;
+var ONE_MINUTE = 60 * 1000;
+var useConfirmation = function (_a) {
+    var _b = _a === void 0 ? {} : _a, state = _b.state, screen = _b.screen, blockSmsRetry = _b.blockSmsRetry;
+    var _c = React.useState(state !== null && state !== void 0 ? state : 'INITIAL'), confirmationState = _c[0], setConfirmationState = _c[1];
+    var _d = React.useState(screen !== null && screen !== void 0 ? screen : 'INITIAL'), confirmationScreen = _d[0], setConfirmationScreen = _d[1];
+    var _e = React.useState(blockSmsRetry !== null && blockSmsRetry !== void 0 ? blockSmsRetry : false), confirmationBlockSmsRetry = _e[0], setConfirmationBlockSmsRetry = _e[1];
+    return {
+        confirmationState: confirmationState,
+        confirmationScreen: confirmationScreen,
+        confirmationBlockSmsRetry: confirmationBlockSmsRetry,
+        setConfirmationState: setConfirmationState,
+        setConfirmationScreen: setConfirmationScreen,
+        setConfirmationBlockSmsRetry: setConfirmationBlockSmsRetry,
+    };
+};
+
+exports.ONE_DAY = ONE_DAY;
+exports.ONE_MINUTE = ONE_MINUTE;
+exports.formatMsAsMinutes = formatMsAsMinutes;
+exports.useConfirmation = useConfirmation;
+exports.useCountdown = useCountdown;

package/confirmation/cssm/vars.css

@@ -0,0 +1,17 @@
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    /* title */
+
+    /* text */
+
+    /* error */
+
+    /* input */
+}

package/confirmation/esm/component.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { ConfirmationProps } from "./types";
+declare const Confirmation: FC<ConfirmationProps>;
+export { Confirmation };

package/confirmation/esm/component.js

@@ -0,0 +1,126 @@
+import React, { useEffect } from 'react';
+import cn from 'classnames';
+import { usePrevious } from '@alfalab/hooks';
+import { useCountdown, ONE_MINUTE, ONE_DAY } from './utils.js';
+import { ConfirmationContext } from './context.js';
+import { defaultTexts } from './types.js';
+import '../../code-input/esm';
+import '../../link/esm';
+import '../../loader/esm';
+import '../../button/esm';
+import './countdown-section-3c22c661.js';
+import { Initial } from './components/screens/initial/component.js';
+import { Hint } from './components/screens/hint/component.js';
+import { FatalError } from './components/screens/fatal-error/component.js';
+import './components/countdown-loader/component.js';
+import { TempBlock } from './components/screens/temp-block/component.js';
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+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) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s)
+                if (Object.prototype.hasOwnProperty.call(s, p))
+                    t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+function __rest(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 styles = {"component":"confirmation__component_1jacd","center":"confirmation__center_1jacd"};
+require('./index.css');
+
+var confirmationScreens = {
+    INITIAL: Initial,
+    HINT: Hint,
+    FATAL_ERROR: FatalError,
+    TEMP_BLOCK: 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 ? ONE_MINUTE : _d, _e = _a.tempBlockDuration, tempBlockDuration = _e === void 0 ? 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 _f = useCountdown(countdownDuration), timeLeft = _f[0], startTimer = _f[1], stopTimer = _f[2];
+    var prevState = usePrevious(state);
+    useEffect(function () {
+        startTimer();
+    }, [startTimer]);
+    useEffect(function () {
+        /**
+         * Перезапускаем таймер после повторного запроса кода
+         */
+        if (state === 'INITIAL' && prevState === 'CODE_SENDING') {
+            startTimer();
+        }
+    }, [state, prevState, startTimer]);
+    useEffect(function () {
+        /**
+         * Останавливаем таймер, если новый экран/состояние не содержит таймер
+         */
+        if (!['INITIAL', 'HINT'].includes(screen) || blockSmsRetry) {
+            stopTimer();
+        }
+    }, [state, screen, blockSmsRetry, stopTimer]);
+    var handleSmsRetry = function () {
+        onChangeState('CODE_SENDING');
+        onSmsRetryClick();
+    };
+    var handleInputFinished = function (code) {
+        onChangeState('CODE_CHECKING');
+        onInputFinished(code);
+    };
+    var handleFatalErrorOkButtonClick = function () {
+        if (onFatalErrorOkButtonClick) {
+            onFatalErrorOkButtonClick();
+        }
+    };
+    var contextValue = {
+        alignContent: alignContent,
+        texts: __assign(__assign({}, defaultTexts), restProps.texts),
+        state: state,
+        screen: screen,
+        requiredCharAmount: requiredCharAmount,
+        countdownDuration: countdownDuration,
+        timeLeft: timeLeft,
+        tempBlockDuration: tempBlockDuration,
+        phone: phone,
+        blockSmsRetry: blockSmsRetry,
+        onTempBlockFinished: onTempBlockFinished,
+        onChangeState: onChangeState,
+        onChangeScreen: onChangeScreen,
+        onInputFinished: handleInputFinished,
+        onSmsRetryClick: handleSmsRetry,
+        onFatalErrorOkButtonClick: handleFatalErrorOkButtonClick,
+    };
+    var screensMap = getScreensMap ? getScreensMap(confirmationScreens) : confirmationScreens;
+    var CurrentScreen = screensMap[screen];
+    return (React.createElement(ConfirmationContext.Provider, { value: contextValue },
+        React.createElement("div", { className: cn(styles.component, styles[alignContent], className), "data-test-id": dataTestId }, CurrentScreen && React.createElement(CurrentScreen, null))));
+};
+
+export { Confirmation };

package/confirmation/esm/components/countdown-loader/component.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+type Props = {
+    progress: number;
+    className?: string;
+};
+declare const CountdownLoader: FC<Props>;
+export { CountdownLoader };

package/confirmation/esm/components/countdown-loader/component.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+var styles = {"circle":"confirmation__circle_x5kvi"};
+require('./index.css');
+
+var SIZE = 16;
+var STROKE_WIDTH = 2;
+var CENTER = SIZE / 2;
+var RADIUS = CENTER - STROKE_WIDTH / 2;
+/** Длина окружности */
+var CIRCUMFERENCE = Math.PI * RADIUS * 2;
+var CountdownLoader = function (_a) {
+    var progress = _a.progress, className = _a.className;
+    var value = Math.min(progress, 1);
+    var strokeDasharray = CIRCUMFERENCE.toFixed(2);
+    var strokeDashoffset = (value * CIRCUMFERENCE).toFixed(2);
+    return (React.createElement("svg", { width: SIZE, height: SIZE, viewBox: "0 0 " + SIZE + " " + SIZE, className: className },
+        React.createElement("circle", { cx: CENTER, cy: CENTER, r: RADIUS, strokeDasharray: strokeDasharray, strokeDashoffset: strokeDashoffset, transform: "rotate(-90 " + CENTER + " " + CENTER + ")", className: styles.circle })));
+};
+
+export { CountdownLoader };

package/confirmation/esm/components/countdown-loader/index.css

@@ -0,0 +1,26 @@
+/* hash: 166sx */
+:root {
+    --color-light-graphic-tertiary: #b6bcc3;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    /* title */
+
+    /* text */
+
+    /* error */
+
+    /* input */
+}
+.confirmation__circle_x5kvi {
+    fill: transparent;
+    stroke: var(--color-light-graphic-tertiary);
+    stroke-width: 2px;
+}

package/confirmation/esm/components/countdown-loader/index.d.ts

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

package/confirmation/esm/components/countdown-loader/index.js

@@ -0,0 +1,2 @@
+import 'react';
+export { CountdownLoader } from './component.js';

package/confirmation/esm/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./screens/index";
+export * from "./countdown-loader/index";

package/confirmation/esm/components/index.js

@@ -0,0 +1,15 @@
+import 'react';
+import 'classnames';
+import '@alfalab/hooks';
+import '../utils.js';
+import '../context.js';
+import '../../../code-input/esm';
+import '../../../link/esm';
+import '../../../loader/esm';
+import '../../../button/esm';
+import '../countdown-section-3c22c661.js';
+export { Initial } from './screens/initial/component.js';
+export { Hint } from './screens/hint/component.js';
+export { FatalError } from './screens/fatal-error/component.js';
+export { CountdownLoader } from './countdown-loader/component.js';
+export { TempBlock } from './screens/temp-block/component.js';

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const FatalError: () => JSX.Element;
+export { FatalError };

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

@@ -0,0 +1,17 @@
+import React, { useContext, Fragment } from 'react';
+import '../../../utils.js';
+import { ConfirmationContext } from '../../../context.js';
+import { Button } from '../../../../../button/esm';
+
+var styles = {"header":"confirmation__header_15ask","description":"confirmation__description_15ask"};
+require('./index.css');
+
+var FatalError = function () {
+    var _a = useContext(ConfirmationContext), texts = _a.texts, onFatalErrorOkButtonClick = _a.onFatalErrorOkButtonClick;
+    return (React.createElement(Fragment, null,
+        React.createElement("h3", { className: styles.header }, texts.fatalErrorTitle),
+        React.createElement("div", { className: styles.description }, texts.fatalErrorDescription),
+        React.createElement(Button, { size: 'xs', view: 'secondary', onClick: onFatalErrorOkButtonClick }, texts.fatalErrorButton)));
+};
+
+export { FatalError };

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

@@ -0,0 +1,61 @@
+/* hash: ireze */
+:root {
+    --color-light-text-primary: #0b1f35;
+    --color-light-text-secondary: #546272;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-xl: 24px;
+    --gap-2xl: 32px;
+}
+:root {
+    --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
+        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;
+
+    /* 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 */
+
+    /* input */
+}
+.confirmation__header_15ask {
+    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_15ask {
+    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);
+}

package/confirmation/esm/components/screens/fatal-error/index.d.ts

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

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

@@ -0,0 +1,5 @@
+import 'react';
+import '../../../utils.js';
+import '../../../context.js';
+import '../../../../../button/esm';
+export { FatalError } from './component.js';

package/confirmation/esm/components/screens/hint/component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const Hint: () => JSX.Element;
+export { Hint };

package/confirmation/esm/components/screens/hint/component.js

@@ -0,0 +1,36 @@
+import React, { useContext } from 'react';
+import cn from 'classnames';
+import '../../../utils.js';
+import { ConfirmationContext } from '../../../context.js';
+import { Link } from '../../../../../link/esm';
+import { Button } from '../../../../../button/esm';
+
+var styles = {"center":"confirmation__center_18hzu","phoneHintWrap":"confirmation__phoneHintWrap_18hzu","hintWrap":"confirmation__hintWrap_18hzu","title":"confirmation__title_18hzu","text":"confirmation__text_18hzu","phonesWrap":"confirmation__phonesWrap_18hzu","phoneWrap":"confirmation__phoneWrap_18hzu","phoneLink":"confirmation__phoneLink_18hzu","phoneDescription":"confirmation__phoneDescription_18hzu","hintButton":"confirmation__hintButton_18hzu"};
+require('./index.css');
+
+var Hint = function () {
+    var _a = useContext(ConfirmationContext), alignContent = _a.alignContent, texts = _a.texts, onChangeScreen = _a.onChangeScreen, onChangeState = _a.onChangeState;
+    var handleReturnButtonClick = function () {
+        onChangeScreen('INITIAL');
+        onChangeState('INITIAL');
+    };
+    return (React.createElement("div", { className: cn(styles.component, styles[alignContent]) },
+        React.createElement("div", { className: styles.hintWrap },
+            React.createElement("h3", { className: styles.title }, "\u041D\u0435\u00A0\u043F\u0440\u0438\u0445\u043E\u0434\u0438\u0442 \u0441\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0435?"),
+            React.createElement("span", { className: styles.text }, "\u0415\u0441\u043B\u0438 \u0443\u00A0\u0432\u0430\u0441 \u0438\u0437\u043C\u0435\u043D\u0438\u043B\u0441\u044F \u043D\u043E\u043C\u0435\u0440 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430, \u043F\u043E\u0437\u0432\u043E\u043D\u0438\u0442\u0435 \u043D\u0430\u043C \u0438\u043B\u0438 \u043E\u0431\u0440\u0430\u0442\u0438\u0442\u0435\u0441\u044C \u0432\u00A0\u043B\u044E\u0431\u043E\u0435 \u043E\u0442\u0434\u0435\u043B\u0435\u043D\u0438\u0435 \u0431\u0430\u043D\u043A\u0430."),
+            React.createElement("div", { className: styles.phonesWrap },
+                React.createElement("div", { className: styles.phoneWrap },
+                    React.createElement(Link, { href: 'tel:+78002000000', className: styles.phoneLink }, "8 800 200-00-00"),
+                    React.createElement("span", { className: styles.phoneDescription },
+                        ' ',
+                        "\u2014\u00A0\u0434\u043B\u044F \u0437\u0432\u043E\u043D\u043A\u043E\u0432 \u043F\u043E\u00A0\u0420\u043E\u0441\u0441\u0438\u0438")),
+                React.createElement("div", { className: styles.phoneWrap },
+                    React.createElement(Link, { href: 'tel:+74957888878', className: styles.phoneLink }, "+7 495 78-888-78"),
+                    React.createElement("span", { className: styles.phoneDescription },
+                        ' ',
+                        "\u2014\u00A0\u0432\u00A0\u041C\u043E\u0441\u043A\u0432\u0435 \u0438\u00A0\u0437\u0430\u00A0\u0433\u0440\u0430\u043D\u0438\u0446\u0435\u0439"))),
+            React.createElement("span", { className: styles.text }, "\u0415\u0441\u043B\u0438 \u043D\u043E\u043C\u0435\u0440 \u043D\u0435\u00A0\u043C\u0435\u043D\u044F\u043B\u0441\u044F, \u0432\u043E\u0437\u043C\u043E\u0436\u043D\u043E, \u043F\u0435\u0440\u0435\u0433\u0440\u0443\u0436\u0435\u043D \u0441\u0435\u0440\u0432\u0438\u0441 \u043E\u0442\u043F\u0440\u0430\u0432\u043A\u0438 \u0441\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0439. \u041F\u043E\u043F\u0440\u043E\u0431\u0443\u0439\u0442\u0435 \u043F\u043E\u0432\u0442\u043E\u0440\u0438\u0442\u044C \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 \u043D\u0435\u0441\u043A\u043E\u043B\u044C\u043A\u043E \u043C\u0438\u043D\u0443\u0442."),
+            React.createElement(Button, { size: 's', view: 'secondary', onClick: handleReturnButtonClick, className: styles.hintButton }, texts.hintButton))));
+};
+
+export { Hint };

package/confirmation/esm/components/screens/hint/index.css

@@ -0,0 +1,103 @@
+/* hash: 12hcu */
+:root {
+    --color-light-text-primary: #0b1f35;
+    --color-light-text-secondary: #546272;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-xs: 8px;
+    --gap-xl: 24px;
+    --gap-2xl: 32px;
+}
+:root {
+    --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
+        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;
+
+    /* 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 */
+
+    /* input */
+}
+.confirmation__center_18hzu .confirmation__phoneHintWrap_18hzu {
+        align-items: center;
+    }
+.confirmation__center_18hzu .confirmation__hintWrap_18hzu {
+        align-items: center;
+    }
+.confirmation__hintWrap_18hzu {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+.confirmation__title_18hzu {
+    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__text_18hzu {
+    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-xl);
+}
+.confirmation__phonesWrap_18hzu {
+    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);
+
+    display: flex;
+    flex-direction: column;
+    margin-bottom: var(--gap-xl);
+}
+.confirmation__phoneWrap_18hzu {
+    margin-bottom: var(--gap-xs)
+}
+.confirmation__phoneWrap_18hzu:last-child {
+        margin-bottom: 0;
+    }
+.confirmation__phoneLink_18hzu {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 500
+}
+.confirmation__phoneLink_18hzu > span {
+        border-bottom: none;
+    }
+.confirmation__phoneDescription_18hzu {
+    color: var(--confirmation-text-color);
+}
+.confirmation__hintButton_18hzu {
+    margin-top: var(--gap-2xl);
+}

package/confirmation/esm/components/screens/hint/index.d.ts

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

package/confirmation/esm/components/screens/hint/index.js

@@ -0,0 +1,7 @@
+import 'react';
+import 'classnames';
+import '../../../utils.js';
+import '../../../context.js';
+import '../../../../../link/esm';
+import '../../../../../button/esm';
+export { Hint } from './component.js';

package/confirmation/esm/components/screens/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./initial/index";
+export * from "./hint/index";
+export * from "./fatal-error/index";
+export * from "./temp-block/index";

package/confirmation/esm/components/screens/index.js

@@ -0,0 +1,15 @@
+import 'react';
+import 'classnames';
+import '@alfalab/hooks';
+import '../../utils.js';
+import '../../context.js';
+import '../../../../code-input/esm';
+import '../../../../link/esm';
+import '../../../../loader/esm';
+import '../../../../button/esm';
+import '../../countdown-section-3c22c661.js';
+export { Initial } from './initial/component.js';
+export { Hint } from './hint/component.js';
+export { FatalError } from './fatal-error/component.js';
+import '../countdown-loader/component.js';
+export { TempBlock } from './temp-block/component.js';

package/confirmation/esm/components/screens/initial/component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const Initial: () => JSX.Element;
+export { Initial };