@alfalab/core-components-confirmation 9.0.4 → 10.0.0

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

@@ -0,0 +1,103 @@
+/* hash: 36cl4 */
+: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_1td1k .confirmation__phoneHintWrap_1td1k {
+        align-items: center;
+    }
+.confirmation__center_1td1k .confirmation__hintWrap_1td1k {
+        align-items: center;
+    }
+.confirmation__hintWrap_1td1k {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+.confirmation__title_1td1k {
+    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_1td1k {
+    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_1td1k {
+    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_1td1k {
+    margin-bottom: var(--gap-xs)
+}
+.confirmation__phoneWrap_1td1k:last-child {
+        margin-bottom: 0;
+    }
+.confirmation__phoneLink_1td1k {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 500
+}
+.confirmation__phoneLink_1td1k > span {
+        border-bottom: none;
+    }
+.confirmation__phoneDescription_1td1k {
+    color: var(--confirmation-text-color);
+}
+.confirmation__hintButton_1td1k {
+    margin-top: var(--gap-2xl);
+}

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

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

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

@@ -0,0 +1,15 @@
+import 'react';
+import 'classnames';
+import '@alfalab/hooks';
+import '../../utils.js';
+import '../../context.js';
+import '@alfalab/core-components-code-input/dist/esm';
+import '@alfalab/core-components-link/dist/esm';
+import '../../countdown-section-ddb744a6.js';
+import '@alfalab/core-components-loader/dist/esm';
+import '@alfalab/core-components-button/dist/esm';
+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/dist/esm/components/screens/initial/component.d.ts

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

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

@@ -0,0 +1,86 @@
+import React, { useContext, useRef, useState, useCallback, useEffect, useLayoutEffect } from 'react';
+import cn from 'classnames';
+import { usePrevious } from '@alfalab/hooks';
+import '../../../utils.js';
+import { ConfirmationContext } from '../../../context.js';
+import { CodeInput } from '@alfalab/core-components-code-input/dist/esm';
+import { Link } from '@alfalab/core-components-link/dist/esm';
+import { s as styles, C as CountdownSection } from '../../../countdown-section-ddb744a6.js';
+import '@alfalab/core-components-loader/dist/esm';
+import '@alfalab/core-components-button/dist/esm';
+
+var CODE_SEND_HINT_VISIBLE_DURATION = 2000;
+var Initial = function () {
+    var _a = useContext(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 = usePrevious(state);
+    var inputRef = useRef(null);
+    var _b = useState(false), codeSendHintVisible = _b[0], setCodeSendHintVisible = _b[1];
+    var timerId = 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 = useCallback(function () {
+        window.clearTimeout(timerId.current);
+    }, []);
+    useEffect(function () {
+        if (inputRef.current) {
+            inputRef.current.focus();
+        }
+        return function () {
+            clearTimer();
+        };
+    }, [clearTimer]);
+    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]);
+    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.createElement("div", { className: cn(styles.component, styles[alignContent]) },
+        React.createElement("h3", { className: styles.header }, texts.title),
+        phone && React.createElement("div", { className: styles.phone },
+            "\u041A\u043E\u0434 \u043E\u0442\u043F\u0440\u0430\u0432\u043B\u0435\u043D \u043D\u0430 ",
+            phone),
+        React.createElement("div", { className: styles.inputContainer },
+            React.createElement(CodeInput, { disabled: processing, error: getCodeInputError(), ref: inputRef, fields: requiredCharAmount, className: styles.codeInput, onComplete: handleInputComplete, onChange: handleInputChange })),
+        React.createElement(CountdownSection, { processing: processing, timePassed: timePassed, codeSendHintVisible: codeSendHintVisible, handleSmsRetryClick: handleSmsRetryClick }),
+        React.createElement(Link, { onClick: handleSmsHintLinkClick, className: styles.smsComeLink, view: 'secondary', pseudo: true }, texts.linkToHint)));
+};
+
+export { Initial };

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

@@ -0,0 +1,7 @@
+import 'react';
+import 'classnames';
+import '../../../utils.js';
+import '../../../context.js';
+export { C as CountdownSection } from '../../../countdown-section-ddb744a6.js';
+import '@alfalab/core-components-loader/dist/esm';
+import '@alfalab/core-components-button/dist/esm';

package/dist/esm/components/screens/initial/index.css

@@ -0,0 +1,98 @@
+/* hash: 135il */
+:root {
+    --color-light-text-primary: #0b1f35;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --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,
+        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 */
+
+    /* error */
+
+    /* input */
+}
+.confirmation__component_ntnxq {
+    display: flex;
+    flex-direction: column;
+}
+.confirmation__header_ntnxq {
+    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__phone_ntnxq {
+    margin-bottom: var(--gap-2xl);
+    color: var(--color-light-text-primary);
+}
+.confirmation__inputContainer_ntnxq {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: var(--gap-2xl);
+}
+.confirmation__compact_ntnxq {
+    margin-bottom: var(--gap-xl);
+}
+.confirmation__loaderWrap_ntnxq {
+    display: flex;
+    align-items: center;
+}
+.confirmation__center_ntnxq {
+    align-items: center;
+    text-align: center
+}
+.confirmation__center_ntnxq .confirmation__codeInput_ntnxq,
+    .confirmation__center_ntnxq .confirmation__loaderWrap_ntnxq {
+        justify-content: center;
+    }
+.confirmation__smsComeLink_ntnxq {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 400;
+}
+.confirmation__countdownContainer_ntnxq {
+    margin-bottom: var(--gap-xl);
+}
+.confirmation__getCodeButton_ntnxq {
+    position: relative;
+    top: var(--gap-2xs-neg);
+    margin-bottom: var(--gap-m);
+}
+.confirmation__countdown_ntnxq {
+    display: flex;
+}
+.confirmation__countdownTimer_ntnxq {
+    display: flex;
+    justify-content: flex-start;
+    min-width: 45px;
+    margin-left: var(--gap-2xs);
+}

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

@@ -0,0 +1,11 @@
+import 'react';
+import 'classnames';
+import '@alfalab/hooks';
+import '../../../utils.js';
+import '../../../context.js';
+import '@alfalab/core-components-code-input/dist/esm';
+import '@alfalab/core-components-link/dist/esm';
+import '../../../countdown-section-ddb744a6.js';
+import '@alfalab/core-components-loader/dist/esm';
+import '@alfalab/core-components-button/dist/esm';
+export { Initial } from './component.js';

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

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

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

@@ -0,0 +1,28 @@
+import React, { useContext, useEffect, Fragment } from 'react';
+import { useCountdown, formatMsAsMinutes } from '../../../utils.js';
+import { ConfirmationContext } from '../../../context.js';
+import { CountdownLoader } from '../../countdown-loader/component.js';
+
+var styles = {"header":"confirmation__header_1qqfu","description":"confirmation__description_1qqfu","countdownWrap":"confirmation__countdownWrap_1qqfu","loader":"confirmation__loader_1qqfu"};
+require('./index.css')
+
+var TempBlock = function () {
+    var _a = useContext(ConfirmationContext), texts = _a.texts, tempBlockDuration = _a.tempBlockDuration, onChangeScreen = _a.onChangeScreen, onTempBlockFinished = _a.onTempBlockFinished;
+    var _b = useCountdown(tempBlockDuration), timeLeft = _b[0], startTimer = _b[1];
+    useEffect(function () {
+        startTimer();
+    }, [startTimer]);
+    useEffect(function () {
+        if (timeLeft === 0 && onTempBlockFinished) {
+            onTempBlockFinished();
+        }
+    }, [timeLeft, onChangeScreen, onTempBlockFinished]);
+    return (React.createElement(Fragment, null,
+        React.createElement("h3", { className: styles.header }, texts.tempBlockTitle),
+        React.createElement("div", { className: styles.description }, texts.tempBlockDescription),
+        React.createElement("div", { className: styles.countdownWrap },
+            React.createElement(CountdownLoader, { progress: 1 - timeLeft / tempBlockDuration, className: styles.loader }),
+            formatMsAsMinutes(timeLeft))));
+};
+
+export { TempBlock };

package/dist/{modern/components/overlimit → esm/components/screens/temp-block}/index.css

@@ -1,7 +1,4 @@
-/* hash: 17mjd */
-:root {
-    --color-static-status-red: #d91d0b;
-}
+/* hash: 1bdwf */
 :root {
     --color-light-text-primary: #0b1f35;
     --color-light-text-secondary: #546272;
@@ -15,11 +12,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,
@@ -45,46 +40,29 @@
 
     /* input */
 }
-.confirmation__component_kdbob {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-.confirmation__title_kdbob {
+.confirmation__header_1qqfu {
+    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);
 }
-.confirmation__description_kdbob {
+.confirmation__description_1qqfu {
     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);
 }
-.confirmation__countdown_kdbob {
+.confirmation__countdownWrap_1qqfu {
     display: flex;
     align-items: center;
-    justify-content: center;
-    margin-top: var(--gap-2xs);
 }
-.confirmation__loader_kdbob {
+.confirmation__loader_1qqfu {
     margin-right: var(--gap-xs);
 }
-.confirmation__timePassed_kdbob {
-    display: flex;
-    min-width: 3em;
-}
-.confirmation__getCodeButton_kdbob {
-    margin-top: var(--gap-2xl);
-}
-.confirmation__alertIcon_kdbob {
-    text-align: center;
-    margin-bottom: var(--gap-xl);
-    color: var(--color-static-status-red);
-}

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

@@ -0,0 +1,5 @@
+import 'react';
+import '../../../utils.js';
+import '../../../context.js';
+import '../../countdown-loader/component.js';
+export { TempBlock } from './component.js';

package/dist/esm/context.d.ts

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

package/dist/esm/context.js

@@ -0,0 +1,23 @@
+import { createContext } from 'react';
+import { ONE_MINUTE, ONE_DAY } from './utils.js';
+
+var mockFn = function () { return undefined; };
+var ConfirmationContext = createContext({
+    alignContent: 'left',
+    texts: {},
+    state: 'INITIAL',
+    screen: 'INITIAL',
+    requiredCharAmount: 5,
+    countdownDuration: ONE_MINUTE,
+    timeLeft: ONE_MINUTE,
+    tempBlockDuration: ONE_DAY,
+    phone: '',
+    onTempBlockFinished: mockFn,
+    onInputFinished: mockFn,
+    onChangeState: mockFn,
+    onSmsRetryClick: mockFn,
+    onChangeScreen: mockFn,
+    onFatalErrorOkButtonClick: mockFn,
+});
+
+export { ConfirmationContext };

package/dist/esm/countdown-section-ddb744a6.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/esm/countdown-section-ddb744a6.js

@@ -0,0 +1,33 @@
+import React, { useContext } from 'react';
+import cn from 'classnames';
+import { formatMsAsMinutes } from './utils.js';
+import { ConfirmationContext } from './context.js';
+import { Loader } from '@alfalab/core-components-loader/dist/esm';
+import { Button } from '@alfalab/core-components-button/dist/esm';
+
+var styles = {"component":"confirmation__component_ntnxq","header":"confirmation__header_ntnxq","phone":"confirmation__phone_ntnxq","inputContainer":"confirmation__inputContainer_ntnxq","compact":"confirmation__compact_ntnxq","loaderWrap":"confirmation__loaderWrap_ntnxq","center":"confirmation__center_ntnxq","codeInput":"confirmation__codeInput_ntnxq","smsComeLink":"confirmation__smsComeLink_ntnxq","countdownContainer":"confirmation__countdownContainer_ntnxq","getCodeButton":"confirmation__getCodeButton_ntnxq","countdown":"confirmation__countdown_ntnxq","countdownTimer":"confirmation__countdownTimer_ntnxq"};
+require('./components/screens/initial/index.css')
+
+var CountdownSection = function (_a) {
+    var codeSendHintVisible = _a.codeSendHintVisible, timePassed = _a.timePassed, processing = _a.processing, handleSmsRetryClick = _a.handleSmsRetryClick;
+    var _b = useContext(ConfirmationContext), state = _b.state, texts = _b.texts, timeLeft = _b.timeLeft, blockSmsRetry = _b.blockSmsRetry;
+    if (codeSendHintVisible) {
+        return React.createElement("div", { className: styles.countdownContainer }, texts.codeSended);
+    }
+    if (processing) {
+        return (React.createElement("div", { className: cn(styles.loaderWrap, styles.countdownContainer) },
+            React.createElement(Loader, null),
+            React.createElement("span", { className: styles.loaderText }, state === 'CODE_CHECKING' ? texts.codeChecking : texts.codeSending)));
+    }
+    if (blockSmsRetry) {
+        return React.createElement("div", { className: styles.countdownContainer }, texts.noAttemptsLeft);
+    }
+    if (timePassed) {
+        return (React.createElement(Button, { size: 'xxs', view: 'secondary', onClick: handleSmsRetryClick, className: styles.getCodeButton }, texts.buttonRetry));
+    }
+    return (React.createElement("div", { className: cn(styles.countdown, styles.countdownContainer) },
+        texts.countdown,
+        React.createElement("div", { className: styles.countdownTimer }, formatMsAsMinutes(timeLeft))));
+};
+
+export { CountdownSection as C, styles as s };

package/dist/esm/index.css

@@ -1,6 +1,5 @@
-/* hash: zgqal */
+/* hash: dh3od */
 :root {
-    --color-light-text-primary: #0b1f35;
     --color-light-text-secondary: #546272;
 }
 :root {
@@ -11,24 +10,12 @@
 
     /* Hard up */
 }
-:root {
-    --gap-xs: 8px;
-    --gap-xl: 24px;
-    --gap-2xl: 32px;
-    --gap-4xl: 48px;
-}
 :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;
@@ -41,54 +28,7 @@
 
     /* input */
 }
-.confirmation__component_1g9r1 {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    font-family: var(--confirmation-font-family);
-}
-.confirmation__error_1g9r1 {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-}
-.confirmation__errorHeader_1g9r1 {
-    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-2xl);
-    color: var(--confirmation-title-color);
-}
-.confirmation__errorText_1g9r1 {
-    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(--confirmation-text-color);
-}
-.confirmation__phoneHintWrap_1g9r1 {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-}
-.confirmation__phoneHintText_1g9r1 {
-    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);
-    color: var(--confirmation-text-color);
-}
-.confirmation__phonesWrap_1g9r1 {
+.confirmation__component_1lhb7 {
     font-size: var(--confirmation-text-font-size);
     line-height: var(--confirmation-text-line-height);
     font-weight: var(--confirmation-text-font-weight);
@@ -97,23 +37,11 @@
 
     display: flex;
     flex-direction: column;
-    margin-bottom: var(--gap-4xl);
-}
-.confirmation__phoneWrap_1g9r1 {
-    margin-bottom: var(--gap-xs)
-}
-.confirmation__phoneWrap_1g9r1:last-child {
-        margin-bottom: 0;
-    }
-.confirmation__phoneDescription_1g9r1 {
-    color: var(--confirmation-text-color);
+    width: 100%;
+    max-width: 400px;
+    margin: 0 auto;
 }
-.confirmation__component_1g9r1.confirmation__center_1g9r1 {
+.confirmation__center_1lhb7 {
+    align-items: center;
     text-align: center;
 }
-.confirmation__center_1g9r1 .confirmation__phoneHintWrap_1g9r1 {
-        align-items: center;
-    }
-.confirmation__center_1g9r1 .confirmation__error_1g9r1 {
-        align-items: center;
-    }

package/dist/esm/index.d.ts

@@ -1,2 +1,5 @@
 export * from "./component";
 export * from "./components/index";
+export * from "./context";
+export * from "./types";
+export * from "./utils";