@alfalab/core-components 32.1.2 → 32.2.0-beta.0

package/code-input/index.css

@@ -13,11 +13,11 @@
 :root {
     --gap-xs: 8px;
 }
-.code-input__component_n1af6 {
+.code-input__component_17aab {
     display: flex;
     flex-direction: column;
 }
-.code-input__error_n1af6 {
+.code-input__error_17aab {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
@@ -25,7 +25,7 @@
     margin-top: var(--gap-xs);
     color: var(--color-light-text-negative);
 }
-@keyframes code-input__shake_n1af6 {
+@keyframes code-input__shake_17aab {
     0% {
         transform: translateX(0);
     }
@@ -42,6 +42,6 @@
         transform: translateX(0);
     }
 }
-.code-input__shake_n1af6 {
-    animation: code-input__shake_n1af6 0.15s linear 0s 3;
+.code-input__shake_17aab {
+    animation: code-input__shake_17aab 0.15s linear 0s 3;
 }

package/code-input/modern/component.js

@@ -2,7 +2,7 @@ import React, { forwardRef, createRef, useState, useImperativeHandle, useEffect
 import cn from 'classnames';
 import { Input } from './components/input/component.js';
 
-var styles = {"component":"code-input__component_n1af6","error":"code-input__error_n1af6","shake":"code-input__shake_n1af6"};
+var styles = {"component":"code-input__component_17aab","error":"code-input__error_17aab","shake":"code-input__shake_17aab"};
 require('./index.css');
 
 const CodeInput = forwardRef(({ className, disabled, error, fields = 4, initialValues = '', dataTestId, onChange, onComplete, }, ref) => {

package/code-input/modern/components/input/component.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import cn from 'classnames';
 
-var styles = {"component":"code-input__component_lyesi","input":"code-input__input_lyesi","hasError":"code-input__hasError_lyesi","disabled":"code-input__disabled_lyesi","compact":"code-input__compact_lyesi"};
+var styles = {"component":"code-input__component_1vzz3","input":"code-input__input_1vzz3","hasError":"code-input__hasError_1vzz3","disabled":"code-input__disabled_1vzz3","compact":"code-input__compact_1vzz3"};
 require('./index.css');
 
 const Input = forwardRef(({ index, error, disabled, value = '', compact = false, onChange, onKeyDown, onFocus }, ref) => {

package/code-input/modern/components/input/index.css

@@ -33,10 +33,10 @@
     --code-input-bg-color: var(--color-light-bg-secondary);
     --code-input-error-bg-color: var(--color-light-bg-negative-muted);
 }
-.code-input__component_lyesi {
+.code-input__component_1vzz3 {
     display: flex;
 }
-.code-input__input_lyesi {
+.code-input__input_1vzz3 {
     flex-shrink: 0;
     width: 36px;
     height: 48px;
@@ -53,30 +53,30 @@
     font-weight: var(--code-input-font-weight);
     font-family: var(--code-input-font-family)
 }
-.code-input__input_lyesi:last-child {
+.code-input__input_1vzz3:last-child {
         margin-right: 0;
     }
-.code-input__input_lyesi.code-input__hasError_lyesi {
+.code-input__input_1vzz3.code-input__hasError_1vzz3 {
         color: var(--color-light-text-negative);
         caret-color: var(--code-input-text-color);
         background-color: var(--code-input-error-bg-color);
     }
-.code-input__input_lyesi.code-input__disabled_lyesi {
+.code-input__input_1vzz3.code-input__disabled_1vzz3 {
         color: var(--color-light-text-tertiary);
         opacity: 1;
     }
-.code-input__input_lyesi:-webkit-autofill {
+.code-input__input_1vzz3:-webkit-autofill {
         -webkit-text-fill-color: var(--code-input-text-color);
     }
-.code-input__input_lyesi:-webkit-autofill,
-    .code-input__input_lyesi:-webkit-autofill:hover,
-    .code-input__input_lyesi:-webkit-autofill:focus,
-    .code-input__input_lyesi:-webkit-autofill:active {
+.code-input__input_1vzz3:-webkit-autofill,
+    .code-input__input_1vzz3:-webkit-autofill:hover,
+    .code-input__input_1vzz3:-webkit-autofill:focus,
+    .code-input__input_1vzz3:-webkit-autofill:active {
         /* Hack from http://stackoverflow.com/a/29350537 */
         -webkit-transition: background-color 999999s ease-in-out 0s;
         transition: background-color 999999s ease-in-out 0s;
     }
-.code-input__compact_lyesi {
+.code-input__compact_1vzz3 {
     width: 32px;
     height: 48px;
     margin-right: var(--gap-2xs);

package/code-input/modern/index.css

@@ -13,11 +13,11 @@
 :root {
     --gap-xs: 8px;
 }
-.code-input__component_n1af6 {
+.code-input__component_17aab {
     display: flex;
     flex-direction: column;
 }
-.code-input__error_n1af6 {
+.code-input__error_17aab {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
@@ -25,7 +25,7 @@
     margin-top: var(--gap-xs);
     color: var(--color-light-text-negative);
 }
-@keyframes code-input__shake_n1af6 {
+@keyframes code-input__shake_17aab {
     0% {
         transform: translateX(0);
     }
@@ -42,6 +42,6 @@
         transform: translateX(0);
     }
 }
-.code-input__shake_n1af6 {
-    animation: code-input__shake_n1af6 0.15s linear 0s 3;
+.code-input__shake_17aab {
+    animation: code-input__shake_17aab 0.15s linear 0s 3;
 }

package/collapse/Component.js

@@ -14,7 +14,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 
-var styles = {"collapse":"collapse__collapse_1801c","content":"collapse__content_1801c","expandedContent":"collapse__expandedContent_1801c","expandedLabel":"collapse__expandedLabel_1801c"};
+var styles = {"collapse":"collapse__collapse_19qjy","content":"collapse__content_19qjy","expandedContent":"collapse__expandedContent_19qjy","expandedLabel":"collapse__expandedLabel_19qjy"};
 require('./index.css');
 
 var Collapse = React.forwardRef(function (_a, ref) {
@@ -65,11 +65,18 @@ var Collapse = React.forwardRef(function (_a, ref) {
         };
     }, [recalculate]);
     React.useEffect(function () { return recalculate(); }, [isExpanded, recalculate]);
+    var contentStyles = React.useMemo(function () {
+        var _a;
+        var contentHeight = (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight;
+        return {
+            height: isExpanded && !contentHeight ? '0px' : contentHeight + "px",
+        };
+    }, [isExpanded]);
     var ToggledIcon = isExpanded ? ArrowUpMBlackIcon.ArrowUpMBlackIcon : ArrowDownMBlackIcon.ArrowDownMBlackIcon;
     return (React__default['default'].createElement("div", { ref: ref, className: cn__default['default'](className, styles.collapse), id: id, "data-test-id": dataTestId },
         React__default['default'].createElement("div", { ref: contentRef, className: cn__default['default'](styles.content, (_b = {},
                 _b[styles.expandedContent] = isExpanded,
-                _b)), onTransitionEnd: handleTransitionEnd },
+                _b)), style: contentStyles, onTransitionEnd: handleTransitionEnd },
             React__default['default'].createElement("div", { ref: contentCaseRef }, children)),
         (expandedLabel || collapsedLabel) && (React__default['default'].createElement(coreComponentsLink.Link, { className: cn__default['default']((_c = {}, _c[styles.expandedLabel] = isExpanded, _c)), pseudo: true, onClick: handleExpandedChange, rightAddons: React__default['default'].createElement(ToggledIcon, null) }, isExpanded ? expandedLabel : collapsedLabel))));
 });

package/collapse/cssm/Component.js

@@ -64,11 +64,18 @@ var Collapse = React.forwardRef(function (_a, ref) {
         };
     }, [recalculate]);
     React.useEffect(function () { return recalculate(); }, [isExpanded, recalculate]);
+    var contentStyles = React.useMemo(function () {
+        var _a;
+        var contentHeight = (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight;
+        return {
+            height: isExpanded && !contentHeight ? '0px' : contentHeight + "px",
+        };
+    }, [isExpanded]);
     var ToggledIcon = isExpanded ? ArrowUpMBlackIcon.ArrowUpMBlackIcon : ArrowDownMBlackIcon.ArrowDownMBlackIcon;
     return (React__default['default'].createElement("div", { ref: ref, className: cn__default['default'](className, styles__default['default'].collapse), id: id, "data-test-id": dataTestId },
         React__default['default'].createElement("div", { ref: contentRef, className: cn__default['default'](styles__default['default'].content, (_b = {},
                 _b[styles__default['default'].expandedContent] = isExpanded,
-                _b)), onTransitionEnd: handleTransitionEnd },
+                _b)), style: contentStyles, onTransitionEnd: handleTransitionEnd },
             React__default['default'].createElement("div", { ref: contentCaseRef }, children)),
         (expandedLabel || collapsedLabel) && (React__default['default'].createElement(coreComponentsLink.Link, { className: cn__default['default']((_c = {}, _c[styles__default['default'].expandedLabel] = isExpanded, _c)), pseudo: true, onClick: handleExpandedChange, rightAddons: React__default['default'].createElement(ToggledIcon, null) }, isExpanded ? expandedLabel : collapsedLabel))));
 });

package/collapse/esm/Component.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useRef, useState, useCallback, useEffect } from 'react';
+import React, { forwardRef, useRef, useState, useCallback, useEffect, useMemo } from 'react';
 import cn from 'classnames';
 import { ResizeObserver } from '@juggle/resize-observer';
 import { ArrowDownMBlackIcon } from '@alfalab/icons-classic/ArrowDownMBlackIcon';
@@ -6,7 +6,7 @@ import { ArrowUpMBlackIcon } from '@alfalab/icons-classic/ArrowUpMBlackIcon';
 import { Link } from '../../link/esm';
 import debounce from 'lodash.debounce';
 
-var styles = {"collapse":"collapse__collapse_1801c","content":"collapse__content_1801c","expandedContent":"collapse__expandedContent_1801c","expandedLabel":"collapse__expandedLabel_1801c"};
+var styles = {"collapse":"collapse__collapse_19qjy","content":"collapse__content_19qjy","expandedContent":"collapse__expandedContent_19qjy","expandedLabel":"collapse__expandedLabel_19qjy"};
 require('./index.css');
 
 var Collapse = forwardRef(function (_a, ref) {
@@ -57,11 +57,18 @@ var Collapse = forwardRef(function (_a, ref) {
         };
     }, [recalculate]);
     useEffect(function () { return recalculate(); }, [isExpanded, recalculate]);
+    var contentStyles = useMemo(function () {
+        var _a;
+        var contentHeight = (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight;
+        return {
+            height: isExpanded && !contentHeight ? '0px' : contentHeight + "px",
+        };
+    }, [isExpanded]);
     var ToggledIcon = isExpanded ? ArrowUpMBlackIcon : ArrowDownMBlackIcon;
     return (React.createElement("div", { ref: ref, className: cn(className, styles.collapse), id: id, "data-test-id": dataTestId },
         React.createElement("div", { ref: contentRef, className: cn(styles.content, (_b = {},
                 _b[styles.expandedContent] = isExpanded,
-                _b)), onTransitionEnd: handleTransitionEnd },
+                _b)), style: contentStyles, onTransitionEnd: handleTransitionEnd },
             React.createElement("div", { ref: contentCaseRef }, children)),
         (expandedLabel || collapsedLabel) && (React.createElement(Link, { className: cn((_c = {}, _c[styles.expandedLabel] = isExpanded, _c)), pseudo: true, onClick: handleExpandedChange, rightAddons: React.createElement(ToggledIcon, null) }, isExpanded ? expandedLabel : collapsedLabel))));
 });

package/collapse/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 1ccri */
+/* hash: llswp */
 :root {
 
     /* Hard */
@@ -11,25 +11,25 @@
     --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
         sans-serif;
 }
-.collapse__collapse_1801c {
+.collapse__collapse_19qjy {
     font-family: var(--font-family);
 }
-.collapse__collapse_1801c *,
-.collapse__collapse_1801c:before,
-.collapse__collapse_1801c:after {
+.collapse__collapse_19qjy *,
+.collapse__collapse_19qjy:before,
+.collapse__collapse_19qjy:after {
     box-sizing: border-box;
 }
-.collapse__content_1801c {
+.collapse__content_19qjy {
     position: relative;
     overflow: hidden;
     visibility: hidden;
     height: 0;
     transition: height 0.2s;
 }
-.collapse__expandedContent_1801c {
+.collapse__expandedContent_19qjy {
     visibility: visible;
     height: auto;
 }
-.collapse__expandedLabel_1801c {
+.collapse__expandedLabel_19qjy {
     margin-top: 15px;
 }

package/collapse/index.css

@@ -1,4 +1,4 @@
-/* hash: 1ccri */
+/* hash: llswp */
 :root {
 
     /* Hard */
@@ -11,25 +11,25 @@
     --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
         sans-serif;
 }
-.collapse__collapse_1801c {
+.collapse__collapse_19qjy {
     font-family: var(--font-family);
 }
-.collapse__collapse_1801c *,
-.collapse__collapse_1801c:before,
-.collapse__collapse_1801c:after {
+.collapse__collapse_19qjy *,
+.collapse__collapse_19qjy:before,
+.collapse__collapse_19qjy:after {
     box-sizing: border-box;
 }
-.collapse__content_1801c {
+.collapse__content_19qjy {
     position: relative;
     overflow: hidden;
     visibility: hidden;
     height: 0;
     transition: height 0.2s;
 }
-.collapse__expandedContent_1801c {
+.collapse__expandedContent_19qjy {
     visibility: visible;
     height: auto;
 }
-.collapse__expandedLabel_1801c {
+.collapse__expandedLabel_19qjy {
     margin-top: 15px;
 }

package/collapse/modern/Component.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useRef, useState, useCallback, useEffect } from 'react';
+import React, { forwardRef, useRef, useState, useCallback, useEffect, useMemo } from 'react';
 import cn from 'classnames';
 import { ResizeObserver } from '@juggle/resize-observer';
 import { ArrowDownMBlackIcon } from '@alfalab/icons-classic/ArrowDownMBlackIcon';
@@ -6,7 +6,7 @@ import { ArrowUpMBlackIcon } from '@alfalab/icons-classic/ArrowUpMBlackIcon';
 import debounce from 'lodash.debounce';
 import { Link } from '../../link/modern';
 
-var styles = {"collapse":"collapse__collapse_1801c","content":"collapse__content_1801c","expandedContent":"collapse__expandedContent_1801c","expandedLabel":"collapse__expandedLabel_1801c"};
+var styles = {"collapse":"collapse__collapse_19qjy","content":"collapse__content_19qjy","expandedContent":"collapse__expandedContent_19qjy","expandedLabel":"collapse__expandedLabel_19qjy"};
 require('./index.css');
 
 const Collapse = forwardRef(({ expanded, collapsedLabel, expandedLabel, children, className, id, onTransitionEnd, onExpandedChange, dataTestId, }, ref) => {
@@ -55,11 +55,17 @@ const Collapse = forwardRef(({ expanded, collapsedLabel, expandedLabel, children
         };
     }, [recalculate]);
     useEffect(() => recalculate(), [isExpanded, recalculate]);
+    const contentStyles = useMemo(() => {
+        const contentHeight = contentRef.current?.offsetHeight;
+        return {
+            height: isExpanded && !contentHeight ? '0px' : `${contentHeight}px`,
+        };
+    }, [isExpanded]);
     const ToggledIcon = isExpanded ? ArrowUpMBlackIcon : ArrowDownMBlackIcon;
     return (React.createElement("div", { ref: ref, className: cn(className, styles.collapse), id: id, "data-test-id": dataTestId },
         React.createElement("div", { ref: contentRef, className: cn(styles.content, {
                 [styles.expandedContent]: isExpanded,
-            }), onTransitionEnd: handleTransitionEnd },
+            }), style: contentStyles, onTransitionEnd: handleTransitionEnd },
             React.createElement("div", { ref: contentCaseRef }, children)),
         (expandedLabel || collapsedLabel) && (React.createElement(Link, { className: cn({ [styles.expandedLabel]: isExpanded }), pseudo: true, onClick: handleExpandedChange, rightAddons: React.createElement(ToggledIcon, null) }, isExpanded ? expandedLabel : collapsedLabel))));
 });

package/collapse/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 1ccri */
+/* hash: llswp */
 :root {
 
     /* Hard */
@@ -11,25 +11,25 @@
     --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
         sans-serif;
 }
-.collapse__collapse_1801c {
+.collapse__collapse_19qjy {
     font-family: var(--font-family);
 }
-.collapse__collapse_1801c *,
-.collapse__collapse_1801c:before,
-.collapse__collapse_1801c:after {
+.collapse__collapse_19qjy *,
+.collapse__collapse_19qjy:before,
+.collapse__collapse_19qjy:after {
     box-sizing: border-box;
 }
-.collapse__content_1801c {
+.collapse__content_19qjy {
     position: relative;
     overflow: hidden;
     visibility: hidden;
     height: 0;
     transition: height 0.2s;
 }
-.collapse__expandedContent_1801c {
+.collapse__expandedContent_19qjy {
     visibility: visible;
     height: auto;
 }
-.collapse__expandedLabel_1801c {
+.collapse__expandedLabel_19qjy {
     margin-top: 15px;
 }

package/comment/Component.js

@@ -9,7 +9,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"component":"comment__component_lqher","text":"comment__text_lqher"};
+var styles = {"component":"comment__component_qs6s6","text":"comment__text_qs6s6"};
 require('./index.css');
 
 var Comment = function (_a) {

package/comment/esm/Component.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import { Typography } from '../../typography/esm';
 
-var styles = {"component":"comment__component_lqher","text":"comment__text_lqher"};
+var styles = {"component":"comment__component_qs6s6","text":"comment__text_qs6s6"};
 require('./index.css');
 
 var Comment = function (_a) {

package/comment/esm/index.css

@@ -17,7 +17,7 @@
     --border-radius-s: 4px;
     --border-radius-xxl: 20px;
 }
-.comment__component_lqher {
+.comment__component_qs6s6 {
     width: -moz-fit-content;
     width: fit-content;
     padding: 10px var(--gap-m);
@@ -25,7 +25,7 @@
     border-radius: var(--border-radius-s) var(--border-radius-xxl) var(--border-radius-xxl)
         var(--border-radius-xxl);
 }
-.comment__text_lqher {
+.comment__text_qs6s6 {
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;

package/comment/index.css

@@ -17,7 +17,7 @@
     --border-radius-s: 4px;
     --border-radius-xxl: 20px;
 }
-.comment__component_lqher {
+.comment__component_qs6s6 {
     width: -moz-fit-content;
     width: fit-content;
     padding: 10px var(--gap-m);
@@ -25,7 +25,7 @@
     border-radius: var(--border-radius-s) var(--border-radius-xxl) var(--border-radius-xxl)
         var(--border-radius-xxl);
 }
-.comment__text_lqher {
+.comment__text_qs6s6 {
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;

package/comment/modern/Component.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import { Typography } from '../../typography/modern';
 
-var styles = {"component":"comment__component_lqher","text":"comment__text_lqher"};
+var styles = {"component":"comment__component_qs6s6","text":"comment__text_qs6s6"};
 require('./index.css');
 
 const Comment = ({ className, dataTestId, children }) => (React.createElement("div", { className: cn(styles.component, className), "data-test-id": dataTestId },

package/comment/modern/index.css

@@ -17,7 +17,7 @@
     --border-radius-s: 4px;
     --border-radius-xxl: 20px;
 }
-.comment__component_lqher {
+.comment__component_qs6s6 {
     width: -moz-fit-content;
     width: fit-content;
     padding: 10px var(--gap-m);
@@ -25,7 +25,7 @@
     border-radius: var(--border-radius-s) var(--border-radius-xxl) var(--border-radius-xxl)
         var(--border-radius-xxl);
 }
-.comment__text_lqher {
+.comment__text_qs6s6 {
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;

package/confirmation/component-9e76b0fb.d.ts

@@ -0,0 +1,35 @@
+import { FC } from 'react';
+import { ConfirmationProps } from "./types";
+declare function __extends(d: any, b: any): void;
+declare function __rest(s: any, e: any): {};
+declare function __decorate(decorators: any, target: any, key: any, desc: any, ...args: any[]): any;
+declare function __param(paramIndex: any, decorator: any): (target: any, key: any) => void;
+declare function __metadata(metadataKey: any, metadataValue: any): any;
+declare function __awaiter(thisArg: any, _arguments: any, P: any, generator: any): any;
+declare function __generator(thisArg: any, body: any): {
+    next: (v: any) => any;
+    throw: (v: any) => any;
+    return: (v: any) => any;
+};
+declare function __exportStar(m: any, o: any): void;
+declare function __values(o: any): any;
+declare function __read(o: any, n: any): any;
+declare function __spread(...args: any[]): any[];
+declare function __spreadArrays(...args: any[]): any[];
+declare function __await(v: any): any;
+declare class __await {
+    constructor(v: any);
+    v: any;
+}
+declare function __asyncGenerator(thisArg: any, _arguments: any, generator: any): {};
+declare function __asyncDelegator(o: any): {};
+declare function __asyncValues(o: any): any;
+declare function __makeTemplateObject(cooked: any, raw: any): any;
+declare function __importStar(mod: any): any;
+declare function __importDefault(mod: any): any;
+declare function __classPrivateFieldGet(receiver: any, privateMap: any): any;
+declare function __classPrivateFieldSet(receiver: any, privateMap: any, value: any): any;
+declare function __assign(...args: any[]): any;
+declare function __createBinding(o: any, m: any, k: any, k2: any): void;
+declare const BaseConfirmation: FC<ConfirmationProps>;
+export { __extends, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __spreadArrays, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault, __classPrivateFieldGet, __classPrivateFieldSet, __assign, __createBinding, BaseConfirmation };

package/confirmation/{component.js → component-9e76b0fb.js}

@@ -1,20 +1,12 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var cn = require('classnames');
 var hooks = require('@alfalab/hooks');
 var utils = require('./utils.js');
 var context = require('./context.js');
 var types = require('./types.js');
-require('../code-input');
-require('../link');
-require('./countdown-section-c2901a7e.js');
-require('../loader');
-require('../button');
 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');
-require('./components/countdown-loader/component.js');
 var components_screens_tempBlock_component = require('./components/screens/temp-block/component.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -36,8 +28,8 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-var __assign = function () {
-    __assign = Object.assign || function __assign(t) {
+exports.__assign = function () {
+    exports.__assign = Object.assign || function __assign(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
             s = arguments[i];
             for (var p in s)
@@ -46,7 +38,7 @@ var __assign = function () {
         }
         return t;
     };
-    return __assign.apply(this, arguments);
+    return exports.__assign.apply(this, arguments);
 };
 function __rest(s, e) {
     var t = {};
@@ -61,8 +53,8 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"confirmation__component_y48zz","center":"confirmation__center_y48zz"};
-require('./index.css');
+var styles = {"component":"confirmation__component_1hl87","center":"confirmation__center_1hl87"};
+require('./components/base-confirmation/index.css');
 
 var confirmationScreens = {
     INITIAL: components_screens_initial_component.Initial,
@@ -70,8 +62,8 @@ var confirmationScreens = {
     FATAL_ERROR: components_screens_fatalError_component.FatalError,
     TEMP_BLOCK: components_screens_tempBlock_component.TempBlock,
 };
-var Confirmation = function (_a) {
-    var state = _a.state, screen = _a.screen, _b = _a.alignContent, alignContent = _b === void 0 ? 'left' : _b, children = _a.children, _c = _a.requiredCharAmount, requiredCharAmount = _c === void 0 ? 5 : _c, _d = _a.countdownDuration, countdownDuration = _d === void 0 ? utils.ONE_MINUTE : _d, _e = _a.tempBlockDuration, tempBlockDuration = _e === void 0 ? utils.ONE_DAY : _e, phone = _a.phone, blockSmsRetry = _a.blockSmsRetry, dataTestId = _a.dataTestId, className = _a.className, getScreensMap = _a.getScreensMap, onInputFinished = _a.onInputFinished, onChangeState = _a.onChangeState, onSmsRetryClick = _a.onSmsRetryClick, onChangeScreen = _a.onChangeScreen, onFatalErrorOkButtonClick = _a.onFatalErrorOkButtonClick, onTempBlockFinished = _a.onTempBlockFinished, restProps = __rest(_a, ["state", "screen", "alignContent", "children", "requiredCharAmount", "countdownDuration", "tempBlockDuration", "phone", "blockSmsRetry", "dataTestId", "className", "getScreensMap", "onInputFinished", "onChangeState", "onSmsRetryClick", "onChangeScreen", "onFatalErrorOkButtonClick", "onTempBlockFinished"]);
+var BaseConfirmation = function (_a) {
+    var state = _a.state, screen = _a.screen, _b = _a.alignContent, alignContent = _b === void 0 ? 'left' : _b, children = _a.children, _c = _a.requiredCharAmount, requiredCharAmount = _c === void 0 ? 5 : _c, _d = _a.countdownDuration, countdownDuration = _d === void 0 ? utils.ONE_MINUTE : _d, _e = _a.tempBlockDuration, tempBlockDuration = _e === void 0 ? utils.ONE_DAY : _e, phone = _a.phone, blockSmsRetry = _a.blockSmsRetry, dataTestId = _a.dataTestId, className = _a.className, getScreensMap = _a.getScreensMap, onInputFinished = _a.onInputFinished, onChangeState = _a.onChangeState, onSmsRetryClick = _a.onSmsRetryClick, onChangeScreen = _a.onChangeScreen, onFatalErrorOkButtonClick = _a.onFatalErrorOkButtonClick, onTempBlockFinished = _a.onTempBlockFinished, mobile = _a.mobile, restProps = __rest(_a, ["state", "screen", "alignContent", "children", "requiredCharAmount", "countdownDuration", "tempBlockDuration", "phone", "blockSmsRetry", "dataTestId", "className", "getScreensMap", "onInputFinished", "onChangeState", "onSmsRetryClick", "onChangeScreen", "onFatalErrorOkButtonClick", "onTempBlockFinished", "mobile"]);
     var _f = utils.useCountdown(countdownDuration), timeLeft = _f[0], startTimer = _f[1], stopTimer = _f[2];
     var prevState = hooks.usePrevious(state);
     React.useEffect(function () {
@@ -108,7 +100,7 @@ var Confirmation = function (_a) {
     };
     var contextValue = {
         alignContent: alignContent,
-        texts: __assign(__assign({}, types.defaultTexts), restProps.texts),
+        texts: exports.__assign(exports.__assign({}, types.defaultTexts), restProps.texts),
         state: state,
         screen: screen,
         requiredCharAmount: requiredCharAmount,
@@ -127,7 +119,8 @@ var Confirmation = function (_a) {
     var screensMap = getScreensMap ? getScreensMap(confirmationScreens) : confirmationScreens;
     var CurrentScreen = screensMap[screen];
     return (React__default['default'].createElement(context.ConfirmationContext.Provider, { value: contextValue },
-        React__default['default'].createElement("div", { className: cn__default['default'](styles.component, styles[alignContent], className), "data-test-id": dataTestId }, CurrentScreen && React__default['default'].createElement(CurrentScreen, null))));
+        React__default['default'].createElement("div", { className: cn__default['default'](styles.component, styles[alignContent], className), "data-test-id": dataTestId }, CurrentScreen && React__default['default'].createElement(CurrentScreen, { mobile: mobile }))));
 };
 
-exports.Confirmation = Confirmation;
+exports.BaseConfirmation = BaseConfirmation;
+exports.__rest = __rest;

package/confirmation/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/confirmation/component.desktop.js

@@ -0,0 +1,29 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_baseConfirmation_component = require('./component-9e76b0fb.js');
+var React = require('react');
+require('classnames');
+require('@alfalab/hooks');
+require('./utils.js');
+require('./context.js');
+require('./types.js');
+require('../code-input');
+require('../link');
+require('../typography');
+require('../button');
+require('./components/header/component.js');
+require('../loader');
+require('./countdown-section-6f3b9bf2.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');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var ConfirmationDesktop = function (props) { return (React__default['default'].createElement(components_baseConfirmation_component.BaseConfirmation, components_baseConfirmation_component.__assign({}, props))); };
+
+exports.ConfirmationDesktop = ConfirmationDesktop;

package/confirmation/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 };