@alfalab/core-components-confirmation 9.0.7 → 10.0.0

package/dist/cssm/components/screens/hint/component.js

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+require('../../../utils.js');
+var context = require('../../../context.js');
+var coreComponentsLink = require('@alfalab/core-components-link/dist/cssm');
+var coreComponentsButton = require('@alfalab/core-components-button/dist/cssm');
+var styles = require('./index.module.css');
+
+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__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+
+var Hint = function () {
+    var _a = React.useContext(context.ConfirmationContext), alignContent = _a.alignContent, texts = _a.texts, onChangeScreen = _a.onChangeScreen, onChangeState = _a.onChangeState;
+    var handleReturnButtonClick = function () {
+        onChangeScreen('INITIAL');
+        onChangeState('INITIAL');
+    };
+    return (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].component, styles__default['default'][alignContent]) },
+        React__default['default'].createElement("div", { className: styles__default['default'].hintWrap },
+            React__default['default'].createElement("h3", { className: styles__default['default'].title }, "\u041D\u0435\u00A0\u043F\u0440\u0438\u0445\u043E\u0434\u0438\u0442 \u0441\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0435?"),
+            React__default['default'].createElement("span", { className: styles__default['default'].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__default['default'].createElement("div", { className: styles__default['default'].phonesWrap },
+                React__default['default'].createElement("div", { className: styles__default['default'].phoneWrap },
+                    React__default['default'].createElement(coreComponentsLink.Link, { href: 'tel:+78002000000', className: styles__default['default'].phoneLink }, "8 800 200-00-00"),
+                    React__default['default'].createElement("span", { className: styles__default['default'].phoneDescription },
+                        ' ',
+                        "\u2014\u00A0\u0434\u043B\u044F \u0437\u0432\u043E\u043D\u043A\u043E\u0432 \u043F\u043E\u00A0\u0420\u043E\u0441\u0441\u0438\u0438")),
+                React__default['default'].createElement("div", { className: styles__default['default'].phoneWrap },
+                    React__default['default'].createElement(coreComponentsLink.Link, { href: 'tel:+74957888878', className: styles__default['default'].phoneLink }, "+7 495 78-888-78"),
+                    React__default['default'].createElement("span", { className: styles__default['default'].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__default['default'].createElement("span", { className: styles__default['default'].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__default['default'].createElement(coreComponentsButton.Button, { size: 's', view: 'secondary', onClick: handleReturnButtonClick, className: styles__default['default'].hintButton }, texts.hintButton))));
+};
+
+exports.Hint = Hint;

package/dist/cssm/components/screens/hint/index.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react');
+require('classnames');
+require('../../../utils.js');
+require('../../../context.js');
+require('@alfalab/core-components-link/dist/cssm');
+require('@alfalab/core-components-button/dist/cssm');
+require('./index.module.css');
+var components_screens_hint_component = require('./component.js');
+
+
+
+exports.Hint = components_screens_hint_component.Hint;

package/dist/cssm/components/screens/hint/index.module.css

@@ -0,0 +1,102 @@
+: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 */
+}
+.center .phoneHintWrap {
+        align-items: center;
+    }
+.center .hintWrap {
+        align-items: center;
+    }
+.hintWrap {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+.title {
+    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);
+}
+.text {
+    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);
+}
+.phonesWrap {
+    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);
+}
+.phoneWrap {
+    margin-bottom: var(--gap-xs)
+}
+.phoneWrap:last-child {
+        margin-bottom: 0;
+    }
+.phoneLink {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 500
+}
+.phoneLink > span {
+        border-bottom: none;
+    }
+.phoneDescription {
+    color: var(--confirmation-text-color);
+}
+.hintButton {
+    margin-top: var(--gap-2xl);
+}

package/dist/cssm/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/dist/cssm/components/screens/index.js

@@ -0,0 +1,31 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react');
+require('classnames');
+require('@alfalab/hooks');
+require('../../utils.js');
+require('../../context.js');
+require('@alfalab/core-components-code-input/dist/cssm');
+require('@alfalab/core-components-link/dist/cssm');
+require('./initial/index.module.css');
+require('@alfalab/core-components-loader/dist/cssm');
+require('@alfalab/core-components-button/dist/cssm');
+require('./initial/countdown-section.js');
+var components_screens_initial_component = require('./initial/component.js');
+require('./hint/index.module.css');
+var components_screens_hint_component = require('./hint/component.js');
+require('./fatal-error/index.module.css');
+var components_screens_fatalError_component = require('./fatal-error/component.js');
+require('../countdown-loader/index.module.css');
+require('../countdown-loader/component.js');
+require('./temp-block/index.module.css');
+var components_screens_tempBlock_component = require('./temp-block/component.js');
+
+
+
+exports.Initial = components_screens_initial_component.Initial;
+exports.Hint = components_screens_hint_component.Hint;
+exports.FatalError = components_screens_fatalError_component.FatalError;
+exports.TempBlock = components_screens_tempBlock_component.TempBlock;

package/dist/cssm/components/screens/initial/component.d.ts

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

package/dist/cssm/components/screens/initial/component.js

@@ -0,0 +1,97 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+var hooks = require('@alfalab/hooks');
+require('../../../utils.js');
+var context = require('../../../context.js');
+var coreComponentsCodeInput = require('@alfalab/core-components-code-input/dist/cssm');
+var coreComponentsLink = require('@alfalab/core-components-link/dist/cssm');
+var styles = require('./index.module.css');
+require('@alfalab/core-components-loader/dist/cssm');
+require('@alfalab/core-components-button/dist/cssm');
+var components_screens_initial_countdownSection = require('./countdown-section.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__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+
+var CODE_SEND_HINT_VISIBLE_DURATION = 2000;
+var Initial = function () {
+    var _a = React.useContext(context.ConfirmationContext), state = _a.state, alignContent = _a.alignContent, texts = _a.texts, requiredCharAmount = _a.requiredCharAmount, timeLeft = _a.timeLeft, phone = _a.phone, onChangeState = _a.onChangeState, onInputFinished = _a.onInputFinished, onChangeScreen = _a.onChangeScreen, onSmsRetryClick = _a.onSmsRetryClick;
+    var prevState = hooks.usePrevious(state);
+    var inputRef = React.useRef(null);
+    var _b = React.useState(false), codeSendHintVisible = _b[0], setCodeSendHintVisible = _b[1];
+    var timerId = React.useRef(0);
+    var handleInputComplete = function (code) {
+        onInputFinished(code);
+    };
+    var handleSmsHintLinkClick = function () {
+        onChangeScreen('HINT');
+    };
+    var handleInputChange = function () {
+        if (state === 'CODE_ERROR') {
+            onChangeState('INITIAL');
+        }
+    };
+    var handleSmsRetryClick = function () {
+        if (inputRef.current) {
+            inputRef.current.reset();
+        }
+        onSmsRetryClick();
+    };
+    var clearTimer = React.useCallback(function () {
+        window.clearTimeout(timerId.current);
+    }, []);
+    React.useEffect(function () {
+        if (inputRef.current) {
+            inputRef.current.focus();
+        }
+        return function () {
+            clearTimer();
+        };
+    }, [clearTimer]);
+    React.useEffect(function () {
+        if (!inputRef.current) {
+            return;
+        }
+        if (state === 'CODE_ERROR' && prevState !== 'CODE_ERROR') {
+            inputRef.current.focus(requiredCharAmount - 1);
+        }
+        if (prevState === 'CODE_SENDING' && state !== 'CODE_SENDING') {
+            inputRef.current.focus();
+        }
+    }, [prevState, state, requiredCharAmount]);
+    React.useLayoutEffect(function () {
+        if (prevState === 'CODE_SENDING' && state !== 'CODE_SENDING') {
+            setCodeSendHintVisible(true);
+            clearTimer();
+            timerId.current = window.setTimeout(function () {
+                setCodeSendHintVisible(false);
+            }, CODE_SEND_HINT_VISIBLE_DURATION);
+        }
+    }, [prevState, state, clearTimer]);
+    var getCodeInputError = function () {
+        if (state === 'CODE_ERROR') {
+            return texts.codeError || true;
+        }
+        return false;
+    };
+    var processing = ['CODE_CHECKING', 'CODE_SENDING'].includes(state);
+    var timePassed = timeLeft === 0;
+    return (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].component, styles__default['default'][alignContent]) },
+        React__default['default'].createElement("h3", { className: styles__default['default'].header }, texts.title),
+        phone && React__default['default'].createElement("div", { className: styles__default['default'].phone },
+            "\u041A\u043E\u0434 \u043E\u0442\u043F\u0440\u0430\u0432\u043B\u0435\u043D \u043D\u0430 ",
+            phone),
+        React__default['default'].createElement("div", { className: styles__default['default'].inputContainer },
+            React__default['default'].createElement(coreComponentsCodeInput.CodeInput, { disabled: processing, error: getCodeInputError(), ref: inputRef, fields: requiredCharAmount, className: styles__default['default'].codeInput, onComplete: handleInputComplete, onChange: handleInputChange })),
+        React__default['default'].createElement(components_screens_initial_countdownSection.CountdownSection, { processing: processing, timePassed: timePassed, codeSendHintVisible: codeSendHintVisible, handleSmsRetryClick: handleSmsRetryClick }),
+        React__default['default'].createElement(coreComponentsLink.Link, { onClick: handleSmsHintLinkClick, className: styles__default['default'].smsComeLink, view: 'secondary', pseudo: true }, texts.linkToHint)));
+};
+
+exports.Initial = Initial;

package/dist/cssm/components/screens/initial/countdown-section.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+type CountdownSectionProps = {
+    codeSendHintVisible: boolean;
+    timePassed: boolean;
+    processing: boolean;
+    handleSmsRetryClick: () => void;
+};
+declare const CountdownSection: FC<CountdownSectionProps>;
+export { CountdownSection };

package/dist/cssm/components/screens/initial/countdown-section.js

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+var utils = require('../../../utils.js');
+var context = require('../../../context.js');
+var styles = require('./index.module.css');
+var coreComponentsLoader = require('@alfalab/core-components-loader/dist/cssm');
+var coreComponentsButton = require('@alfalab/core-components-button/dist/cssm');
+
+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__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+
+var CountdownSection = function (_a) {
+    var codeSendHintVisible = _a.codeSendHintVisible, timePassed = _a.timePassed, processing = _a.processing, handleSmsRetryClick = _a.handleSmsRetryClick;
+    var _b = React.useContext(context.ConfirmationContext), state = _b.state, texts = _b.texts, timeLeft = _b.timeLeft, blockSmsRetry = _b.blockSmsRetry;
+    if (codeSendHintVisible) {
+        return React__default['default'].createElement("div", { className: styles__default['default'].countdownContainer }, texts.codeSended);
+    }
+    if (processing) {
+        return (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].loaderWrap, styles__default['default'].countdownContainer) },
+            React__default['default'].createElement(coreComponentsLoader.Loader, null),
+            React__default['default'].createElement("span", { className: styles__default['default'].loaderText }, state === 'CODE_CHECKING' ? texts.codeChecking : texts.codeSending)));
+    }
+    if (blockSmsRetry) {
+        return React__default['default'].createElement("div", { className: styles__default['default'].countdownContainer }, texts.noAttemptsLeft);
+    }
+    if (timePassed) {
+        return (React__default['default'].createElement(coreComponentsButton.Button, { size: 'xxs', view: 'secondary', onClick: handleSmsRetryClick, className: styles__default['default'].getCodeButton }, texts.buttonRetry));
+    }
+    return (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].countdown, styles__default['default'].countdownContainer) },
+        texts.countdown,
+        React__default['default'].createElement("div", { className: styles__default['default'].countdownTimer }, utils.formatMsAsMinutes(timeLeft))));
+};
+
+exports.CountdownSection = CountdownSection;

package/dist/cssm/components/screens/initial/index.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react');
+require('classnames');
+require('@alfalab/hooks');
+require('../../../utils.js');
+require('../../../context.js');
+require('@alfalab/core-components-code-input/dist/cssm');
+require('@alfalab/core-components-link/dist/cssm');
+require('./index.module.css');
+require('@alfalab/core-components-loader/dist/cssm');
+require('@alfalab/core-components-button/dist/cssm');
+require('./countdown-section.js');
+var components_screens_initial_component = require('./component.js');
+
+
+
+exports.Initial = components_screens_initial_component.Initial;

package/dist/cssm/components/{sign-confirmation → screens/initial}/index.module.css

@@ -1,7 +1,5 @@
 :root {
-    --color-light-text-negative: #d91d0b;
     --color-light-text-primary: #0b1f35;
-    --color-light-text-secondary: #546272;
 }
 :root {
 
@@ -12,10 +10,11 @@
     /* Hard up */
 }
 :root {
-    --gap-xs: 8px;
-    --gap-s: 12px;
-    --gap-l: 20px;
-    --gap-3xl: 40px;
+    --gap-2xs: 4px;
+    --gap-m: 16px;
+    --gap-xl: 24px;
+    --gap-2xl: 32px;
+    --gap-2xs-neg: -4px;
 }
 :root {
     --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
@@ -31,14 +30,8 @@
     --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 */
-    --confirmation-error-color: var(--color-light-text-negative);
 
     /* input */
 }
@@ -46,62 +39,59 @@
     display: flex;
     flex-direction: column;
 }
-.countdown {
-    max-height: 300px;
-    overflow: hidden;
-    transition: max-height 0.15s ease;
-}
-.hidden {
-    opacity: 0;
-    max-height: 0;
-}
 .header {
+    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);
-
-    margin-bottom: var(--gap-3xl);
-    color: var(--confirmation-title-color);
+}
+.phone {
+    margin-bottom: var(--gap-2xl);
+    color: var(--color-light-text-primary);
 }
 .inputContainer {
     display: flex;
     flex-direction: column;
+    margin-bottom: var(--gap-2xl);
 }
-.smsComeLinkWrap {
-    margin-top: var(--gap-l);
-}
-.smsComeLink {
-    font-size: 14px;
-    line-height: 20px;
-    font-weight: 400;
-}
-.error {
-    font-size: 14px;
-    line-height: 20px;
-    font-weight: 400;
-
-    margin-top: var(--gap-xs);
-    color: var(--confirmation-error-color);
+.compact {
+    margin-bottom: var(--gap-xl);
 }
 .loaderWrap {
     display: flex;
     align-items: center;
-    margin: var(--gap-3xl) 0 var(--gap-xs);
-}
-.loaderText {
-    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-left: var(--gap-s);
-    color: var(--confirmation-text-color);
+}
+.center {
+    align-items: center;
+    text-align: center
 }
 .center .codeInput,
     .center .loaderWrap {
         justify-content: center;
     }
+.smsComeLink {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 400;
+}
+.countdownContainer {
+    margin-bottom: var(--gap-xl);
+}
+.getCodeButton {
+    position: relative;
+    top: var(--gap-2xs-neg);
+    margin-bottom: var(--gap-m);
+}
+.countdown {
+    display: flex;
+}
+.countdownTimer {
+    display: flex;
+    justify-content: flex-start;
+    min-width: 45px;
+    margin-left: var(--gap-2xs);
+}

package/dist/cssm/components/screens/temp-block/component.d.ts

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

package/dist/cssm/components/screens/temp-block/component.js

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var utils = require('../../../utils.js');
+var context = require('../../../context.js');
+require('../../countdown-loader/index.module.css');
+var components_countdownLoader_component = require('../../countdown-loader/component.js');
+var styles = require('./index.module.css');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+
+var TempBlock = function () {
+    var _a = React.useContext(context.ConfirmationContext), texts = _a.texts, tempBlockDuration = _a.tempBlockDuration, onChangeScreen = _a.onChangeScreen, onTempBlockFinished = _a.onTempBlockFinished;
+    var _b = utils.useCountdown(tempBlockDuration), timeLeft = _b[0], startTimer = _b[1];
+    React.useEffect(function () {
+        startTimer();
+    }, [startTimer]);
+    React.useEffect(function () {
+        if (timeLeft === 0 && onTempBlockFinished) {
+            onTempBlockFinished();
+        }
+    }, [timeLeft, onChangeScreen, onTempBlockFinished]);
+    return (React__default['default'].createElement(React.Fragment, null,
+        React__default['default'].createElement("h3", { className: styles__default['default'].header }, texts.tempBlockTitle),
+        React__default['default'].createElement("div", { className: styles__default['default'].description }, texts.tempBlockDescription),
+        React__default['default'].createElement("div", { className: styles__default['default'].countdownWrap },
+            React__default['default'].createElement(components_countdownLoader_component.CountdownLoader, { progress: 1 - timeLeft / tempBlockDuration, className: styles__default['default'].loader }),
+            utils.formatMsAsMinutes(timeLeft))));
+};
+
+exports.TempBlock = TempBlock;

package/dist/cssm/components/screens/temp-block/index.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react');
+require('../../../utils.js');
+require('../../../context.js');
+require('../../countdown-loader/index.module.css');
+require('../../countdown-loader/component.js');
+require('./index.module.css');
+var components_screens_tempBlock_component = require('./component.js');
+
+
+
+exports.TempBlock = components_screens_tempBlock_component.TempBlock;

package/dist/cssm/components/{overlimit → screens/temp-block}/index.module.css

@@ -1,6 +1,3 @@
-:root {
-    --color-static-status-red: #d91d0b;
-}
 :root {
     --color-light-text-primary: #0b1f35;
     --color-light-text-secondary: #546272;
@@ -14,11 +11,9 @@
     /* Hard up */
 }
 :root {
-    --gap-2xs: 4px;
     --gap-xs: 8px;
     --gap-xl: 24px;
     --gap-2xl: 32px;
-    --gap-3xl: 40px;
 }
 :root {
     --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
@@ -44,20 +39,15 @@
 
     /* input */
 }
-.component {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-.title {
+.header {
+    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);
-
-    margin-bottom: var(--gap-3xl);
 }
 .description {
     font-size: var(--confirmation-text-font-size);
@@ -65,25 +55,13 @@
     font-weight: var(--confirmation-text-font-weight);
     font-family: var(--confirmation-text-font-family);
     color: var(--confirmation-text-color);
+
+    margin-bottom: var(--gap-2xl);
 }
-.countdown {
+.countdownWrap {
     display: flex;
     align-items: center;
-    justify-content: center;
-    margin-top: var(--gap-2xs);
 }
 .loader {
     margin-right: var(--gap-xs);
 }
-.timePassed {
-    display: flex;
-    min-width: 3em;
-}
-.getCodeButton {
-    margin-top: var(--gap-2xl);
-}
-.alertIcon {
-    text-align: center;
-    margin-bottom: var(--gap-xl);
-    color: var(--color-static-status-red);
-}

package/dist/cssm/context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TConfirmationContext } from "./types";
+declare const ConfirmationContext: import("react").Context<TConfirmationContext>;
+export { ConfirmationContext };