@alfalab/core-components-confirmation 12.1.4 → 12.2.1

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

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

package/esm/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/esm/components/screens/temp-block/component.js

@@ -1,14 +1,19 @@
 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/esm';
+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')
 
-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];
+var TempBlock = function (_a) {
+    var _b, _c;
+    var mobile = _a.mobile;
+    var _d = useContext(ConfirmationContext), texts = _d.texts, tempBlockDuration = _d.tempBlockDuration, onChangeScreen = _d.onChangeScreen, onTempBlockFinished = _d.onTempBlockFinished;
+    var _e = useCountdown(tempBlockDuration), timeLeft = _e[0], startTimer = _e[1];
     useEffect(function () {
         startTimer();
     }, [startTimer]);
@@ -18,9 +23,9 @@ var TempBlock = function () {
         }
     }, [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, (_b = {}, _b[styles.typographyTheme] = !mobile, _b)) }, texts.tempBlockDescription),
+        React.createElement("div", { className: cn(styles.countdownWrap, (_c = {}, _c[styles.typographyTheme] = !mobile, _c)) },
             React.createElement(CountdownLoader, { progress: 1 - timeLeft / tempBlockDuration, className: styles.loader }),
             formatMsAsMinutes(timeLeft))));
 };

package/esm/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/esm/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/esm';
+import '../../header/component.js';
 import '../../countdown-loader/component.js';
 export { TempBlock } from './component.js';

package/{modern/countdown-section-d8a9a733.d.ts → esm/countdown-section-9777131a.d.ts}

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

package/esm/countdown-section-9777131a.js

@@ -0,0 +1,48 @@
+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/esm';
+import { Button } from '@alfalab/core-components-button/esm';
+import { Loader } from '@alfalab/core-components-loader/esm';
+
+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')
+
+var CountdownSection = function (_a) {
+    var _b, _c, _d, _e, _f;
+    var codeSendHintVisible = _a.codeSendHintVisible, timePassed = _a.timePassed, processing = _a.processing, mobile = _a.mobile, handleSmsRetryClick = _a.handleSmsRetryClick;
+    var _g = useContext(ConfirmationContext), state = _g.state, texts = _g.texts, timeLeft = _g.timeLeft, blockSmsRetry = _g.blockSmsRetry;
+    if (codeSendHintVisible) {
+        return (React.createElement(Typography.Text, { className: cn(styles.countdownContainer, (_b = {},
+                _b[styles.countdownMobile] = mobile,
+                _b[styles.typographyTheme] = !mobile,
+                _b)), view: mobile ? 'primary-small' : 'primary-medium', tag: 'div' }, texts.codeSended));
+    }
+    if (processing) {
+        return (React.createElement("div", { className: cn(styles.loaderWrap, styles.countdownContainer, (_c = {},
+                _c[styles.countdownLoaderMobile] = mobile,
+                _c[styles.typographyTheme] = !mobile,
+                _c)) },
+            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, (_d = {},
+                _d[styles.countdownMobile] = mobile,
+                _d[styles.typographyTheme] = !mobile,
+                _d)), 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, (_e = {}, _e[styles.getCodeButtonMobile] = mobile, _e)) }, texts.buttonRetry));
+    }
+    return (React.createElement(Typography.Text, { className: cn(styles.countdown, styles.countdownContainer, (_f = {},
+            _f[styles.countdownMobile] = mobile,
+            _f[styles.typographyTheme] = !mobile,
+            _f)), view: mobile ? 'primary-small' : 'primary-medium', tag: 'div' },
+        texts.countdown,
+        " ",
+        formatMsAsMinutes(timeLeft)));
+};
+
+export { CountdownSection as C, styles as s };

package/esm/desktop.d.ts

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

package/esm/desktop.js

@@ -0,0 +1,20 @@
+import './component-417f2884.js';
+import 'react';
+import 'classnames';
+import '@alfalab/hooks';
+import './utils.js';
+import './context.js';
+import './types.js';
+import '@alfalab/core-components-code-input/esm';
+import '@alfalab/core-components-link/esm';
+import '@alfalab/core-components-typography/esm';
+import '@alfalab/core-components-button/esm';
+import './components/header/component.js';
+import '@alfalab/core-components-loader/esm';
+import './countdown-section-9777131a.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';
+export { ConfirmationDesktop } from './component.desktop.js';

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

@@ -1,4 +1,4 @@
-export { Confirmation } from './component.js';
+import './component-417f2884.js';
 import 'react';
 import 'classnames';
 import '@alfalab/hooks';
@@ -7,11 +7,16 @@ export { ConfirmationContext } from './context.js';
 export { defaultTexts } from './types.js';
 import '@alfalab/core-components-code-input/esm';
 import '@alfalab/core-components-link/esm';
-import './countdown-section-694d1c59.js';
-import '@alfalab/core-components-loader/esm';
+import '@alfalab/core-components-typography/esm';
 import '@alfalab/core-components-button/esm';
+import './components/header/component.js';
+import '@alfalab/core-components-loader/esm';
+import './countdown-section-9777131a.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 { ConfirmationDesktop as Confirmation } from './component.desktop.js';
+import './component.mobile.js';
+export { ConfirmationResponsive } from './component.responsive.js';

package/esm/mobile.css

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

package/esm/mobile.d.ts

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

package/esm/mobile.js

@@ -0,0 +1,20 @@
+import './component-417f2884.js';
+import 'react';
+import 'classnames';
+import '@alfalab/hooks';
+import './utils.js';
+import './context.js';
+import './types.js';
+import '@alfalab/core-components-code-input/esm';
+import '@alfalab/core-components-link/esm';
+import '@alfalab/core-components-typography/esm';
+import '@alfalab/core-components-button/esm';
+import './components/header/component.js';
+import '@alfalab/core-components-loader/esm';
+import './countdown-section-9777131a.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';
+export { ConfirmationMobile } from './component.mobile.js';

package/esm/responsive.d.ts

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

package/esm/responsive.js

@@ -0,0 +1,22 @@
+import './component-417f2884.js';
+import 'react';
+import 'classnames';
+import '@alfalab/hooks';
+import './utils.js';
+import './context.js';
+import './types.js';
+import '@alfalab/core-components-code-input/esm';
+import '@alfalab/core-components-link/esm';
+import '@alfalab/core-components-typography/esm';
+import '@alfalab/core-components-button/esm';
+import './components/header/component.js';
+import '@alfalab/core-components-loader/esm';
+import './countdown-section-9777131a.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 './component.desktop.js';
+import './component.mobile.js';
+export { ConfirmationResponsive } from './component.responsive.js';

package/esm/types.d.ts

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

package/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/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var component = require('./component.js');
+require('./component-8a46eb16.js');
 require('react');
 require('classnames');
 require('@alfalab/hooks');
@@ -11,18 +11,22 @@ var context = require('./context.js');
 var types = require('./types.js');
 require('@alfalab/core-components-code-input');
 require('@alfalab/core-components-link');
-require('./countdown-section-c2901a7e.js');
-require('@alfalab/core-components-loader');
+require('@alfalab/core-components-typography');
 require('@alfalab/core-components-button');
+require('./components/header/component.js');
+require('@alfalab/core-components-loader');
+require('./countdown-section-d2ec5a14.js');
 var components_screens_initial_component = require('./components/screens/initial/component.js');
 var components_screens_hint_component = require('./components/screens/hint/component.js');
 var components_screens_fatalError_component = require('./components/screens/fatal-error/component.js');
 var components_countdownLoader_component = require('./components/countdown-loader/component.js');
 var components_screens_tempBlock_component = require('./components/screens/temp-block/component.js');
+var component_desktop = require('./component.desktop.js');
+require('./component.mobile.js');
+var component_responsive = require('./component.responsive.js');
 
 
 
-exports.Confirmation = component.Confirmation;
 exports.ONE_DAY = utils.ONE_DAY;
 exports.ONE_MINUTE = utils.ONE_MINUTE;
 exports.formatMsAsMinutes = utils.formatMsAsMinutes;
@@ -35,3 +39,5 @@ exports.Hint = components_screens_hint_component.Hint;
 exports.FatalError = components_screens_fatalError_component.FatalError;
 exports.CountdownLoader = components_countdownLoader_component.CountdownLoader;
 exports.TempBlock = components_screens_tempBlock_component.TempBlock;
+exports.Confirmation = component_desktop.ConfirmationDesktop;
+exports.ConfirmationResponsive = component_responsive.ConfirmationResponsive;

package/mobile.css

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

package/mobile.d.ts

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

package/mobile.js

@@ -0,0 +1,28 @@
+'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');
+var component_mobile = require('./component.mobile.js');
+
+
+
+exports.ConfirmationMobile = component_mobile.ConfirmationMobile;

package/modern/component.desktop.d.ts

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

package/modern/component.desktop.js

@@ -0,0 +1,23 @@
+import React from '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 { BaseConfirmation } from './components/base-confirmation/component.js';
+
+const ConfirmationDesktop = props => (React.createElement(BaseConfirmation, Object.assign({}, props)));
+
+export { ConfirmationDesktop };

package/modern/component.mobile.d.ts

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

package/modern/component.mobile.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import cn from '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 { BaseConfirmation } from './components/base-confirmation/component.js';
+
+var styles = {"container":"confirmation__container_b0nsc"};
+require('./mobile.css')
+
+const ConfirmationMobile = ({ className, ...resProps }) => (React.createElement(BaseConfirmation, Object.assign({ mobile: true, className: cn(className, styles.container) }, resProps)));
+
+export { ConfirmationMobile };

package/modern/component.responsive.d.ts

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