@alfalab/core-components-confirmation 12.1.4 → 12.2.1

package/modern/components/screens/initial/component.js

@@ -5,12 +5,14 @@ import '../../../utils.js';
 import { ConfirmationContext } from '../../../context.js';
 import { CodeInput } from '@alfalab/core-components-code-input/modern';
 import { Link } from '@alfalab/core-components-link/modern';
-import { s as styles, C as CountdownSection } from '../../../countdown-section-d8a9a733.js';
+import { Typography } from '@alfalab/core-components-typography/modern';
+import { Button } from '@alfalab/core-components-button/modern';
+import { Header } from '../../header/component.js';
 import '@alfalab/core-components-loader/modern';
-import '@alfalab/core-components-button/modern';
+import { s as styles, C as CountdownSection } from '../../../countdown-section-f68f4069.js';
 
 const CODE_SEND_HINT_VISIBLE_DURATION = 2000;
-const Initial = () => {
+const Initial = ({ mobile }) => {
     const { state, alignContent, texts, requiredCharAmount, timeLeft, phone, onChangeState, onInputFinished, onChangeScreen, onSmsRetryClick, } = useContext(ConfirmationContext);
     const prevState = usePrevious(state);
     const inputRef = useRef(null);
@@ -73,14 +75,13 @@ const Initial = () => {
     const processing = ['CODE_CHECKING', 'CODE_SENDING'].includes(state);
     const 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 },
+        React.createElement(Header, { mobile: mobile }, texts.title),
+        React.createElement(Typography.Text, { view: 'primary-medium', color: 'primary', className: cn(styles.phone, { [styles.typographyTheme]: !mobile }) },
             "\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)));
+        React.createElement(CodeInput, { disabled: processing, error: getCodeInputError(), ref: inputRef, fields: requiredCharAmount, className: cn(styles.containerInput, styles.codeInput), onComplete: handleInputComplete, onChange: handleInputChange }),
+        React.createElement(CountdownSection, { processing: processing, timePassed: timePassed, codeSendHintVisible: codeSendHintVisible, handleSmsRetryClick: handleSmsRetryClick, mobile: mobile }),
+        mobile ? (React.createElement(Button, { onClick: handleSmsHintLinkClick, view: 'link', size: 'xs' }, texts.linkToHint)) : (React.createElement(Link, { onClick: handleSmsHintLinkClick, className: styles.smsComeLink, view: mobile ? 'primary' : 'secondary', pseudo: true }, texts.linkToHint))));
 };
 
 export { Initial };

package/modern/components/screens/initial/countdown-section.js

@@ -2,6 +2,7 @@ import 'react';
 import 'classnames';
 import '../../../utils.js';
 import '../../../context.js';
-export { C as CountdownSection } from '../../../countdown-section-d8a9a733.js';
-import '@alfalab/core-components-loader/modern';
+import '@alfalab/core-components-typography/modern';
 import '@alfalab/core-components-button/modern';
+import '@alfalab/core-components-loader/modern';
+export { C as CountdownSection } from '../../../countdown-section-f68f4069.js';

package/modern/components/screens/initial/index.css

@@ -1,6 +1,7 @@
-/* hash: 1ktvw */
+/* hash: 1s91r */
 :root {
     --color-light-text-primary: #0b1f35;
+    --color-light-text-secondary: rgba(11, 31, 53, 0.7);
 }
 :root {
 
@@ -12,7 +13,9 @@
 }
 :root {
     --gap-2xs: 4px;
+    --gap-s: 12px;
     --gap-m: 16px;
+    --gap-l: 20px;
     --gap-xl: 24px;
     --gap-2xl: 32px;
     --gap-2xs-neg: -4px;
@@ -22,80 +25,80 @@
         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 */
 
-    /* text */
+    /* mobile */
 
-    /* error */
+    /* 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-primary)
 
-    /* input */
+    /* header */
 }
-.confirmation__component_38eal {
+.confirmation__component_q2tga {
     display: flex;
     flex-direction: column;
 }
-.confirmation__header_38eal {
-    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_38eal {
-    margin-bottom: var(--gap-2xl);
-    color: var(--color-light-text-primary);
+.confirmation__typographyTheme_q2tga {
+    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);
 }
-.confirmation__inputContainer_38eal {
-    display: flex;
-    flex-direction: column;
+.confirmation__phone_q2tga {
+    color: var(--color-light-text-primary);
     margin-bottom: var(--gap-2xl);
 }
-.confirmation__compact_38eal {
+.confirmation__compact_q2tga {
     margin-bottom: var(--gap-xl);
 }
-.confirmation__loaderWrap_38eal {
+.confirmation__loaderWrap_q2tga {
     display: flex;
     align-items: center;
 }
-.confirmation__center_38eal {
+.confirmation__left_q2tga {
+    align-items: flex-start;
+}
+.confirmation__center_q2tga {
     align-items: center;
     text-align: center
 }
-.confirmation__center_38eal .confirmation__codeInput_38eal,
-    .confirmation__center_38eal .confirmation__loaderWrap_38eal {
+.confirmation__center_q2tga .confirmation__loaderWrap_q2tga {
         justify-content: center;
     }
-.confirmation__center_38eal input {
+.confirmation__center_q2tga input {
         margin: 0 var(--gap-2xs);
     }
-.confirmation__smsComeLink_38eal {
+.confirmation__codeInput_q2tga {
+    margin-bottom: var(--gap-s);
+}
+.confirmation__smsComeLink_q2tga {
     font-size: 14px;
     line-height: 20px;
-    font-weight: 400;
+    font-weight: 500;
 }
-.confirmation__countdownContainer_38eal {
+.confirmation__countdownContainer_q2tga {
+    color: var(--color-light-text-secondary);
     margin-bottom: var(--gap-xl);
 }
-.confirmation__getCodeButton_38eal {
+.confirmation__countdownMobile_q2tga {
+    margin-bottom: var(--gap-l);
+}
+.confirmation__countdownLoaderMobile_q2tga {
+    margin-bottom: var(--gap-m);
+}
+.confirmation__getCodeButton_q2tga {
     position: relative;
     top: var(--gap-2xs-neg);
     margin-bottom: var(--gap-m);
 }
-.confirmation__countdown_38eal {
-    display: flex;
+.confirmation__getCodeButtonMobile_q2tga {
+    margin-bottom: 0;
 }
-.confirmation__countdownTimer_38eal {
-    display: flex;
-    justify-content: flex-start;
-    min-width: 45px;
-    margin-left: var(--gap-2xs);
+.confirmation__containerInput_q2tga {
+    min-height: 80px;
 }

package/modern/components/screens/initial/index.js

@@ -5,7 +5,9 @@ import '../../../utils.js';
 import '../../../context.js';
 import '@alfalab/core-components-code-input/modern';
 import '@alfalab/core-components-link/modern';
-import '../../../countdown-section-d8a9a733.js';
-import '@alfalab/core-components-loader/modern';
+import '@alfalab/core-components-typography/modern';
 import '@alfalab/core-components-button/modern';
+import '../../header/component.js';
+import '@alfalab/core-components-loader/modern';
+import '../../../countdown-section-f68f4069.js';
 export { Initial } from './component.js';

package/modern/components/screens/temp-block/component.d.ts

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

package/modern/components/screens/temp-block/component.js

@@ -1,12 +1,15 @@
 import React, { useContext, useEffect, Fragment } from 'react';
+import cn from 'classnames';
 import { useCountdown, formatMsAsMinutes } from '../../../utils.js';
 import { ConfirmationContext } from '../../../context.js';
+import { Typography } from '@alfalab/core-components-typography/modern';
+import { Header } from '../../header/component.js';
 import { CountdownLoader } from '../../countdown-loader/component.js';
 
-var styles = {"header":"confirmation__header_1g2lg","description":"confirmation__description_1g2lg","countdownWrap":"confirmation__countdownWrap_1g2lg","loader":"confirmation__loader_1g2lg"};
+var styles = {"typographyTheme":"confirmation__typographyTheme_3vwk1","description":"confirmation__description_3vwk1","countdownWrap":"confirmation__countdownWrap_3vwk1","loader":"confirmation__loader_3vwk1"};
 require('./index.css')
 
-const TempBlock = () => {
+const TempBlock = ({ mobile }) => {
     const { texts, tempBlockDuration, onChangeScreen, onTempBlockFinished } = useContext(ConfirmationContext);
     const [timeLeft, startTimer] = useCountdown(tempBlockDuration);
     useEffect(() => {
@@ -18,9 +21,9 @@ const TempBlock = () => {
         }
     }, [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(Header, { mobile: mobile }, texts.tempBlockTitle),
+        React.createElement(Typography.Text, { view: 'primary-medium', color: 'primary', className: cn(styles.description, { [styles.typographyTheme]: !mobile }) }, texts.tempBlockDescription),
+        React.createElement("div", { className: cn(styles.countdownWrap, { [styles.typographyTheme]: !mobile }) },
             React.createElement(CountdownLoader, { progress: 1 - timeLeft / tempBlockDuration, className: styles.loader }),
             formatMsAsMinutes(timeLeft))));
 };

package/modern/components/screens/temp-block/index.css

@@ -1,7 +1,6 @@
-/* hash: 18khf */
+/* hash: 1at28 */
 :root {
     --color-light-text-primary: #0b1f35;
-    --color-light-text-secondary: #546272;
 }
 :root {
 
@@ -13,56 +12,39 @@
 }
 :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;
+    /* 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_1g2lg {
-    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);
+    /* header */
 }
-.confirmation__description_1g2lg {
+.confirmation__typographyTheme_3vwk1 {
     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__countdownWrap_1g2lg {
+.confirmation__description_3vwk1 {
+    margin-bottom: var(--gap-xs);
+}
+.confirmation__countdownWrap_3vwk1 {
     display: flex;
     align-items: center;
 }
-.confirmation__loader_1g2lg {
+.confirmation__loader_3vwk1 {
     margin-right: var(--gap-xs);
 }

package/modern/components/screens/temp-block/index.js

@@ -1,5 +1,8 @@
 import 'react';
+import 'classnames';
 import '../../../utils.js';
 import '../../../context.js';
+import '@alfalab/core-components-typography/modern';
+import '../../header/component.js';
 import '../../countdown-loader/component.js';
 export { TempBlock } from './component.js';

package/{countdown-section-c2901a7e.d.ts → modern/countdown-section-f68f4069.d.ts}

@@ -3,6 +3,7 @@ type CountdownSectionProps = {
     codeSendHintVisible: boolean;
     timePassed: boolean;
     processing: boolean;
+    mobile?: boolean;
     handleSmsRetryClick: () => void;
 };
 declare const CountdownSection: FC<CountdownSectionProps>;

package/modern/countdown-section-f68f4069.js

@@ -0,0 +1,46 @@
+import React, { useContext } from 'react';
+import cn from 'classnames';
+import { formatMsAsMinutes } from './utils.js';
+import { ConfirmationContext } from './context.js';
+import { Typography } from '@alfalab/core-components-typography/modern';
+import { Button } from '@alfalab/core-components-button/modern';
+import { Loader } from '@alfalab/core-components-loader/modern';
+
+var styles = {"component":"confirmation__component_q2tga","typographyTheme":"confirmation__typographyTheme_q2tga","phone":"confirmation__phone_q2tga","compact":"confirmation__compact_q2tga","loaderWrap":"confirmation__loaderWrap_q2tga","left":"confirmation__left_q2tga","center":"confirmation__center_q2tga","codeInput":"confirmation__codeInput_q2tga","smsComeLink":"confirmation__smsComeLink_q2tga","countdownContainer":"confirmation__countdownContainer_q2tga","countdownMobile":"confirmation__countdownMobile_q2tga","countdownLoaderMobile":"confirmation__countdownLoaderMobile_q2tga","getCodeButton":"confirmation__getCodeButton_q2tga","getCodeButtonMobile":"confirmation__getCodeButtonMobile_q2tga","containerInput":"confirmation__containerInput_q2tga"};
+require('./components/screens/initial/index.css')
+
+const CountdownSection = ({ codeSendHintVisible, timePassed, processing, mobile, handleSmsRetryClick, }) => {
+    const { state, texts, timeLeft, blockSmsRetry } = useContext(ConfirmationContext);
+    if (codeSendHintVisible) {
+        return (React.createElement(Typography.Text, { className: cn(styles.countdownContainer, {
+                [styles.countdownMobile]: mobile,
+                [styles.typographyTheme]: !mobile,
+            }), view: mobile ? 'primary-small' : 'primary-medium', tag: 'div' }, texts.codeSended));
+    }
+    if (processing) {
+        return (React.createElement("div", { className: cn(styles.loaderWrap, styles.countdownContainer, {
+                [styles.countdownLoaderMobile]: mobile,
+                [styles.typographyTheme]: !mobile,
+            }) },
+            React.createElement(Loader, null),
+            React.createElement("span", { className: styles.loaderText }, state === 'CODE_CHECKING' ? texts.codeChecking : texts.codeSending)));
+    }
+    if (blockSmsRetry) {
+        return (React.createElement(Typography.Text, { className: cn(styles.countdownContainer, {
+                [styles.countdownMobile]: mobile,
+                [styles.typographyTheme]: !mobile,
+            }), view: mobile ? 'primary-small' : 'primary-medium', tag: 'div' }, texts.noAttemptsLeft));
+    }
+    if (timePassed) {
+        return (React.createElement(Button, { size: mobile ? 'xs' : 'xxs', view: 'secondary', onClick: handleSmsRetryClick, className: cn(styles.getCodeButton, { [styles.getCodeButtonMobile]: mobile }) }, texts.buttonRetry));
+    }
+    return (React.createElement(Typography.Text, { className: cn(styles.countdown, styles.countdownContainer, {
+            [styles.countdownMobile]: mobile,
+            [styles.typographyTheme]: !mobile,
+        }), view: mobile ? 'primary-small' : 'primary-medium', tag: 'div' },
+        texts.countdown,
+        " ",
+        formatMsAsMinutes(timeLeft)));
+};
+
+export { CountdownSection as C, styles as s };

package/modern/desktop.d.ts

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

package/modern/desktop.js

@@ -0,0 +1,20 @@
+import 'react';
+import 'classnames';
+import '@alfalab/hooks';
+import './utils.js';
+import './context.js';
+import './types.js';
+import '@alfalab/core-components-code-input/modern';
+import '@alfalab/core-components-link/modern';
+import '@alfalab/core-components-typography/modern';
+import '@alfalab/core-components-button/modern';
+import './components/header/component.js';
+import '@alfalab/core-components-loader/modern';
+import './countdown-section-f68f4069.js';
+import './components/screens/initial/component.js';
+import './components/screens/hint/component.js';
+import './components/screens/fatal-error/component.js';
+import './components/countdown-loader/component.js';
+import './components/screens/temp-block/component.js';
+import './components/base-confirmation/component.js';
+export { ConfirmationDesktop } from './component.desktop.js';

package/modern/index.d.ts

@@ -1,4 +1,5 @@
-export * from "./component";
+export { ConfirmationDesktop as Confirmation, DesktopConfirmationProps as ConfirmationProps } from "./desktop";
+export * from "./responsive";
 export * from "./components/index";
 export * from "./context";
 export * from "./types";

package/modern/index.js

@@ -6,12 +6,17 @@ export { ConfirmationContext } from './context.js';
 export { defaultTexts } from './types.js';
 import '@alfalab/core-components-code-input/modern';
 import '@alfalab/core-components-link/modern';
-import './countdown-section-d8a9a733.js';
-import '@alfalab/core-components-loader/modern';
+import '@alfalab/core-components-typography/modern';
 import '@alfalab/core-components-button/modern';
+import './components/header/component.js';
+import '@alfalab/core-components-loader/modern';
+import './countdown-section-f68f4069.js';
 export { Initial } from './components/screens/initial/component.js';
 export { Hint } from './components/screens/hint/component.js';
 export { FatalError } from './components/screens/fatal-error/component.js';
 export { CountdownLoader } from './components/countdown-loader/component.js';
 export { TempBlock } from './components/screens/temp-block/component.js';
-export { Confirmation } from './component.js';
+import './components/base-confirmation/component.js';
+export { ConfirmationDesktop as Confirmation } from './component.desktop.js';
+import './component.mobile.js';
+export { ConfirmationResponsive } from './component.responsive.js';

package/modern/mobile.css

@@ -0,0 +1,4 @@
+/* hash: 1d6w3 */
+.confirmation__container_b0nsc {
+    max-width: 288px;
+}

package/modern/mobile.d.ts

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

package/modern/mobile.js

@@ -0,0 +1,20 @@
+import 'react';
+import 'classnames';
+import '@alfalab/hooks';
+import './utils.js';
+import './context.js';
+import './types.js';
+import '@alfalab/core-components-code-input/modern';
+import '@alfalab/core-components-link/modern';
+import '@alfalab/core-components-typography/modern';
+import '@alfalab/core-components-button/modern';
+import './components/header/component.js';
+import '@alfalab/core-components-loader/modern';
+import './countdown-section-f68f4069.js';
+import './components/screens/initial/component.js';
+import './components/screens/hint/component.js';
+import './components/screens/fatal-error/component.js';
+import './components/countdown-loader/component.js';
+import './components/screens/temp-block/component.js';
+import './components/base-confirmation/component.js';
+export { ConfirmationMobile } from './component.mobile.js';

package/modern/responsive.d.ts

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

package/modern/responsive.js

@@ -0,0 +1,22 @@
+import 'react';
+import 'classnames';
+import '@alfalab/hooks';
+import './utils.js';
+import './context.js';
+import './types.js';
+import '@alfalab/core-components-code-input/modern';
+import '@alfalab/core-components-link/modern';
+import '@alfalab/core-components-typography/modern';
+import '@alfalab/core-components-button/modern';
+import './components/header/component.js';
+import '@alfalab/core-components-loader/modern';
+import './countdown-section-f68f4069.js';
+import './components/screens/initial/component.js';
+import './components/screens/hint/component.js';
+import './components/screens/fatal-error/component.js';
+import './components/countdown-loader/component.js';
+import './components/screens/temp-block/component.js';
+import './components/base-confirmation/component.js';
+import './component.desktop.js';
+import './component.mobile.js';
+export { ConfirmationResponsive } from './component.responsive.js';

package/modern/types.d.ts

@@ -8,6 +8,10 @@ type ConfirmationProps = {
      * Состояние компонента
      */
     state: ConfirmationState | string;
+    /**
+     * Мобильная версия компонента для экрана
+     */
+    mobile?: boolean;
     /**
      * Позиционирование контента
      */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-confirmation",
-    "version": "12.1.4",
+    "version": "12.2.1",
     "description": "Sms confirmation component",
     "keywords": [],
     "license": "MIT",
@@ -14,12 +14,13 @@
         "directory": "dist"
     },
     "dependencies": {
-        "@alfalab/core-components-button": "^6.1.1",
+        "@alfalab/core-components-button": "^6.1.2",
         "@alfalab/core-components-code-input": "^2.1.1",
         "@alfalab/core-components-link": "^5.0.1",
         "@alfalab/core-components-loader": "^3.0.2",
+        "@alfalab/core-components-typography": "^3.0.1",
         "@alfalab/hooks": "^1.4.1",
-        "@alfalab/icons-glyph": "^2.64.0",
+        "@alfalab/icons-glyph": "^2.71.0",
         "@alfalab/utils": "^1.13.2",
         "classnames": "^2.3.1"
     },

package/responsive.d.ts

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

package/responsive.js

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('./component-8a46eb16.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('./components/header/component.js');
+require('@alfalab/core-components-loader');
+require('./countdown-section-d2ec5a14.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');
+require('./component.desktop.js');
+require('./component.mobile.js');
+var component_responsive = require('./component.responsive.js');
+
+
+
+exports.ConfirmationResponsive = component_responsive.ConfirmationResponsive;

package/types.d.ts

@@ -8,6 +8,10 @@ type ConfirmationProps = {
      * Состояние компонента
      */
     state: ConfirmationState | string;
+    /**
+     * Мобильная версия компонента для экрана
+     */
+    mobile?: boolean;
     /**
      * Позиционирование контента
      */

package/component.d.ts

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

package/countdown-section-c2901a7e.js

@@ -1,41 +0,0 @@
-'use strict';
-
-var React = require('react');
-var cn = require('classnames');
-var utils = require('./utils.js');
-var context = require('./context.js');
-var coreComponentsLoader = require('@alfalab/core-components-loader');
-var coreComponentsButton = require('@alfalab/core-components-button');
-
-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 = {"component":"confirmation__component_38eal","header":"confirmation__header_38eal","phone":"confirmation__phone_38eal","inputContainer":"confirmation__inputContainer_38eal","compact":"confirmation__compact_38eal","loaderWrap":"confirmation__loaderWrap_38eal","center":"confirmation__center_38eal","codeInput":"confirmation__codeInput_38eal","smsComeLink":"confirmation__smsComeLink_38eal","countdownContainer":"confirmation__countdownContainer_38eal","getCodeButton":"confirmation__getCodeButton_38eal","countdown":"confirmation__countdown_38eal","countdownTimer":"confirmation__countdownTimer_38eal"};
-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 = 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.countdownContainer }, texts.codeSended);
-    }
-    if (processing) {
-        return (React__default['default'].createElement("div", { className: cn__default['default'](styles.loaderWrap, styles.countdownContainer) },
-            React__default['default'].createElement(coreComponentsLoader.Loader, null),
-            React__default['default'].createElement("span", { className: styles.loaderText }, state === 'CODE_CHECKING' ? texts.codeChecking : texts.codeSending)));
-    }
-    if (blockSmsRetry) {
-        return React__default['default'].createElement("div", { className: styles.countdownContainer }, texts.noAttemptsLeft);
-    }
-    if (timePassed) {
-        return (React__default['default'].createElement(coreComponentsButton.Button, { size: 'xxs', view: 'secondary', onClick: handleSmsRetryClick, className: styles.getCodeButton }, texts.buttonRetry));
-    }
-    return (React__default['default'].createElement("div", { className: cn__default['default'](styles.countdown, styles.countdownContainer) },
-        texts.countdown,
-        React__default['default'].createElement("div", { className: styles.countdownTimer }, utils.formatMsAsMinutes(timeLeft))));
-};
-
-exports.CountdownSection = CountdownSection;
-exports.styles = styles;