@alfalab/core-components 45.9.0-beta.0 → 45.9.0-beta.2

package/code-input/cssm/desktop/Component.desktop.js

@@ -1,11 +1,15 @@
-import React, { forwardRef } from 'react';
-import { BaseCodeInput } from '../components/base-code-input/component.js';
-import styles from './desktop.module.css';
-import 'classnames';
-import '../components/input/component.js';
-import '../components/input/index.module.css';
-import '../components/base-code-input/index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const CodeInputDesktop = forwardRef((restProps, ref) => React.createElement(BaseCodeInput, { ...restProps, ref: ref, stylesInput: styles }));
+var tslib = require('tslib');
+var React = require('react');
+var components_baseCodeInput_component = require('../components/base-code-input/component.js');
+var styles = require('./desktop.module.css');
 
-export { CodeInputDesktop };
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var CodeInputDesktop = React.forwardRef(function (restProps, ref) { return React__default.default.createElement(components_baseCodeInput_component.BaseCodeInput, tslib.__assign({}, restProps, { ref: ref, stylesInput: styles__default.default })); });
+
+exports.CodeInputDesktop = CodeInputDesktop;

package/code-input/cssm/desktop/index.js

@@ -1,8 +1,7 @@
-export { CodeInputDesktop } from './Component.desktop.js';
-import 'react';
-import '../components/base-code-input/component.js';
-import 'classnames';
-import '../components/input/component.js';
-import '../components/input/index.module.css';
-import '../components/base-code-input/index.module.css';
-import './desktop.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var desktop_Component_desktop = require('./Component.desktop.js');
+
+
+
+exports.CodeInputDesktop = desktop_Component_desktop.CodeInputDesktop;

package/code-input/cssm/index.js

@@ -1,12 +1,7 @@
-export { CodeInput } from './Component.responsive.js';
-import 'react';
-import '../../mq/cssm';
-import './desktop/Component.desktop.js';
-import './components/base-code-input/component.js';
-import 'classnames';
-import './components/input/component.js';
-import './components/input/index.module.css';
-import './components/base-code-input/index.module.css';
-import './desktop/desktop.module.css';
-import './mobile/Component.mobile.js';
-import './mobile/mobile.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component_responsive = require('./Component.responsive.js');
+
+
+
+exports.CodeInput = Component_responsive.CodeInput;

package/code-input/cssm/mobile/Component.mobile.js

@@ -1,11 +1,15 @@
-import React, { forwardRef } from 'react';
-import { BaseCodeInput } from '../components/base-code-input/component.js';
-import styles from './mobile.module.css';
-import 'classnames';
-import '../components/input/component.js';
-import '../components/input/index.module.css';
-import '../components/base-code-input/index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const CodeInputMobile = forwardRef((restProps, ref) => React.createElement(BaseCodeInput, { ...restProps, ref: ref, stylesInput: styles }));
+var tslib = require('tslib');
+var React = require('react');
+var components_baseCodeInput_component = require('../components/base-code-input/component.js');
+var styles = require('./mobile.module.css');
 
-export { CodeInputMobile };
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var CodeInputMobile = React.forwardRef(function (restProps, ref) { return React__default.default.createElement(components_baseCodeInput_component.BaseCodeInput, tslib.__assign({}, restProps, { ref: ref, stylesInput: styles__default.default })); });
+
+exports.CodeInputMobile = CodeInputMobile;

package/code-input/cssm/mobile/index.js

@@ -1,8 +1,7 @@
-export { CodeInputMobile } from './Component.mobile.js';
-import 'react';
-import '../components/base-code-input/component.js';
-import 'classnames';
-import '../components/input/component.js';
-import '../components/input/index.module.css';
-import '../components/base-code-input/index.module.css';
-import './mobile.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var mobile_Component_mobile = require('./Component.mobile.js');
+
+
+
+exports.CodeInputMobile = mobile_Component_mobile.CodeInputMobile;

package/code-input/esm/Component.responsive.js

@@ -1,6 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React, { forwardRef } from 'react';
 import { useMatchMedia } from '../../mq/esm';
+import { getComponentBreakpoint } from '../../shared/esm';
 import { CodeInputDesktop } from './desktop/Component.desktop.js';
 import { CodeInputMobile } from './mobile/Component.mobile.js';
 import './components/base-code-input/component.js';
@@ -8,7 +9,7 @@ import 'classnames';
 import './components/input/component.js';
 
 var CodeInput = forwardRef(function (_a, ref) {
-    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = __rest(_a, ["breakpoint"]);
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? getComponentBreakpoint() : _b, restProps = __rest(_a, ["breakpoint"]);
     var query = "(min-width: ".concat(breakpoint, "px)");
     var isDesktop = useMatchMedia(query)[0];
     var Component = isDesktop ? CodeInputDesktop : CodeInputMobile;

package/code-input/esm/index.js

@@ -2,6 +2,7 @@ export { CodeInput } from './Component.responsive.js';
 import 'tslib';
 import 'react';
 import '../../mq/esm';
+import '../../shared/esm';
 import './desktop/Component.desktop.js';
 import './components/base-code-input/component.js';
 import 'classnames';

package/code-input/modern/Component.responsive.js

@@ -1,12 +1,13 @@
 import React, { forwardRef } from 'react';
 import { useMatchMedia } from '../../mq/modern';
+import { getComponentBreakpoint } from '../../shared/modern';
 import { CodeInputDesktop } from './desktop/Component.desktop.js';
 import { CodeInputMobile } from './mobile/Component.mobile.js';
 import './components/base-code-input/component.js';
 import 'classnames';
 import './components/input/component.js';
 
-const CodeInput = forwardRef(({ breakpoint = 1024, ...restProps }, ref) => {
+const CodeInput = forwardRef(({ breakpoint = getComponentBreakpoint(), ...restProps }, ref) => {
     const query = `(min-width: ${breakpoint}px)`;
     const [isDesktop] = useMatchMedia(query);
     const Component = isDesktop ? CodeInputDesktop : CodeInputMobile;

package/code-input/modern/index.js

@@ -1,6 +1,7 @@
 export { CodeInput } from './Component.responsive.js';
 import 'react';
 import '../../mq/modern';
+import '../../shared/modern';
 import './desktop/Component.desktop.js';
 import './components/base-code-input/component.js';
 import 'classnames';

package/collapse/cssm/Component.js

@@ -1,20 +1,31 @@
-import React, { forwardRef, useRef, useState, useCallback, useEffect } from 'react';
-import { ResizeObserver } from '@juggle/resize-observer';
-import cn from 'classnames';
-import debounce from 'lodash.debounce';
-import { Link } from '../../link/cssm';
-import { ChevronDownSIcon } from '@alfalab/icons-glyph/ChevronDownSIcon';
-import { ChevronUpSIcon } from '@alfalab/icons-glyph/ChevronUpSIcon';
-import styles from './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const Collapse = forwardRef(({ expanded, collapsedLabel, expandedLabel, children, className, expandedContentClassName, id, onTransitionEnd, onExpandedChange, defaultExpanded = false, dataTestId, }, ref) => {
-    const uncontrolled = expanded === undefined;
-    const contentRef = useRef(null);
-    const contentCaseRef = useRef(null);
-    const [expandedState, setExpandedState] = useState(uncontrolled ? defaultExpanded : expanded);
-    const isExpanded = uncontrolled ? expandedState : expanded;
-    const recalculate = useCallback(() => {
-        let contentHeight;
+var React = require('react');
+var resizeObserver = require('@juggle/resize-observer');
+var cn = require('classnames');
+var debounce = require('lodash.debounce');
+var coreComponentsLink = require('../../link/cssm');
+var ChevronDownSIcon = require('@alfalab/icons-glyph/ChevronDownSIcon');
+var ChevronUpSIcon = require('@alfalab/icons-glyph/ChevronUpSIcon');
+var styles = require('./index.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var debounce__default = /*#__PURE__*/_interopDefaultCompat(debounce);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var Collapse = React.forwardRef(function (_a, ref) {
+    var _b, _c;
+    var expanded = _a.expanded, collapsedLabel = _a.collapsedLabel, expandedLabel = _a.expandedLabel, children = _a.children, className = _a.className, expandedContentClassName = _a.expandedContentClassName, id = _a.id, onTransitionEnd = _a.onTransitionEnd, onExpandedChange = _a.onExpandedChange, _d = _a.defaultExpanded, defaultExpanded = _d === void 0 ? false : _d, dataTestId = _a.dataTestId;
+    var uncontrolled = expanded === undefined;
+    var contentRef = React.useRef(null);
+    var contentCaseRef = React.useRef(null);
+    var _e = React.useState(uncontrolled ? defaultExpanded : expanded), expandedState = _e[0], setExpandedState = _e[1];
+    var isExpanded = uncontrolled ? expandedState : expanded;
+    var recalculate = React.useCallback(function () {
+        var contentHeight;
         if (!contentCaseRef.current || !contentRef.current) {
             return;
         }
@@ -24,45 +35,45 @@ const Collapse = forwardRef(({ expanded, collapsedLabel, expandedLabel, children
         else {
             contentHeight = 0;
         }
-        contentRef.current.style.height = `${contentHeight}px`;
+        contentRef.current.style.height = "".concat(contentHeight, "px");
     }, [isExpanded]);
-    const handleTransitionEnd = useCallback(() => {
+    var handleTransitionEnd = React.useCallback(function () {
         if (onTransitionEnd)
             onTransitionEnd(isExpanded);
     }, [isExpanded, onTransitionEnd]);
-    const handleExpandedChange = useCallback(() => {
+    var handleExpandedChange = React.useCallback(function () {
         if (uncontrolled) {
             setExpandedState(!isExpanded);
         }
         if (onExpandedChange)
             onExpandedChange(!isExpanded);
     }, [isExpanded, onExpandedChange, uncontrolled]);
-    useEffect(() => {
-        const handleResize = debounce(() => recalculate(), 300);
+    React.useEffect(function () {
+        var handleResize = debounce__default.default(function () { return recalculate(); }, 300);
         window.addEventListener('resize', handleResize);
-        return () => {
+        return function () {
             window.removeEventListener('resize', handleResize);
             handleResize.cancel();
         };
     }, [recalculate]);
-    useEffect(() => {
-        const ResizeObserver$1 = window.ResizeObserver || ResizeObserver;
-        const observer = new ResizeObserver$1(recalculate);
+    React.useEffect(function () {
+        var ResizeObserver = window.ResizeObserver || resizeObserver.ResizeObserver;
+        var observer = new ResizeObserver(recalculate);
         if (contentCaseRef.current) {
             observer.observe(contentCaseRef.current);
         }
-        return () => {
+        return function () {
             observer.disconnect();
         };
     }, [recalculate]);
-    useEffect(() => recalculate(), [isExpanded, recalculate]);
-    const ToggledIcon = isExpanded ? ChevronUpSIcon : ChevronDownSIcon;
-    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, expandedContentClassName, {
-                [styles.expandedContent]: isExpanded,
-            }), 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, { className: styles.toggleIcon }) }, isExpanded ? expandedLabel : collapsedLabel))));
+    React.useEffect(function () { return recalculate(); }, [isExpanded, recalculate]);
+    var ToggledIcon = isExpanded ? ChevronUpSIcon.ChevronUpSIcon : ChevronDownSIcon.ChevronDownSIcon;
+    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, expandedContentClassName, (_b = {},
+                _b[styles__default.default.expandedContent] = isExpanded,
+                _b)), 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, { className: styles__default.default.toggleIcon }) }, isExpanded ? expandedLabel : collapsedLabel))));
 });
 
-export { Collapse };
+exports.Collapse = Collapse;

package/collapse/cssm/index.js

@@ -1,9 +1,7 @@
-export { Collapse } from './Component.js';
-import 'react';
-import '@juggle/resize-observer';
-import 'classnames';
-import 'lodash.debounce';
-import '../../link/cssm';
-import '@alfalab/icons-glyph/ChevronDownSIcon';
-import '@alfalab/icons-glyph/ChevronUpSIcon';
-import './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component = require('./Component.js');
+
+
+
+exports.Collapse = Component.Collapse;

package/comment/cssm/Component.js

@@ -1,12 +1,21 @@
-import React from 'react';
-import cn from 'classnames';
-import { Typography } from '../../typography/cssm';
-import styles from './index.module.css';
-
-const Comment = ({ className, dataTestId, children, rowLimit }) => {
-    const textClassName = rowLimit && styles[`rowLimit${rowLimit}`];
-    return (React.createElement("div", { className: cn(styles.component, className), "data-test-id": dataTestId },
-        React.createElement(Typography.Text, { tag: 'div', view: 'component-primary', className: textClassName, color: 'primary' }, children)));
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+var coreComponentsTypography = require('../../typography/cssm');
+var styles = require('./index.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var Comment = function (_a) {
+    var className = _a.className, dataTestId = _a.dataTestId, children = _a.children, rowLimit = _a.rowLimit;
+    var textClassName = rowLimit && styles__default.default["rowLimit".concat(rowLimit)];
+    return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, className), "data-test-id": dataTestId },
+        React__default.default.createElement(coreComponentsTypography.Typography.Text, { tag: 'div', view: 'component-primary', className: textClassName, color: 'primary' }, children)));
 };
 
-export { Comment };
+exports.Comment = Comment;

package/comment/cssm/index.js

@@ -1,5 +1,7 @@
-export { Comment } from './Component.js';
-import 'react';
-import 'classnames';
-import '../../typography/cssm';
-import './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component = require('./Component.js');
+
+
+
+exports.Comment = Component.Comment;

package/confirmation/component.responsive.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var coreComponentsMq = require('../mq');
+var coreComponentsShared = require('../shared');
 var desktop_component_desktop = require('./desktop/component.desktop.js');
 var mobile_component_mobile = require('./mobile/component.mobile.js');
 
@@ -11,7 +12,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var ConfirmationResponsive = function (_a) {
-    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
     var isDesktop = coreComponentsMq.useMatchMedia("(min-width: ".concat(breakpoint, "px)"), true)[0];
     return isDesktop ? (React__default.default.createElement(desktop_component_desktop.ConfirmationDesktop, tslib.__assign({}, restProps))) : (React__default.default.createElement(mobile_component_mobile.ConfirmationMobile, tslib.__assign({ breakpoint: breakpoint }, restProps)));
 };

package/confirmation/components/base-confirmation/component.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
+var coreComponentsShared = require('../../../shared');
 var hooks = require('@alfalab/hooks');
 var context = require('../../context.js');
 var types = require('../../types.js');
@@ -27,7 +28,7 @@ var confirmationScreens = {
     TEMP_BLOCK: components_screens_tempBlock_component.TempBlock,
 };
 var BaseConfirmation = function (_a) {
-    var state = _a.state, screen = _a.screen, _b = _a.alignContent, alignContent = _b === void 0 ? 'left' : _b; _a.children; var _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, _f = _a.clearCodeOnError, clearCodeOnError = _f === void 0 ? true : _f, _g = _a.hideCountdownSection, hideCountdownSection = _g === void 0 ? false : _g, _h = _a.breakpoint, breakpoint = _h === void 0 ? 1024 : _h, initialScreenHintSlot = _a.initialScreenHintSlot, errorVisibleDuration = _a.errorVisibleDuration, restProps = tslib.__rest(_a, ["state", "screen", "alignContent", "children", "requiredCharAmount", "countdownDuration", "tempBlockDuration", "phone", "blockSmsRetry", "dataTestId", "className", "getScreensMap", "onInputFinished", "onChangeState", "onSmsRetryClick", "onChangeScreen", "onFatalErrorOkButtonClick", "onTempBlockFinished", "mobile", "clearCodeOnError", "hideCountdownSection", "breakpoint", "initialScreenHintSlot", "errorVisibleDuration"]);
+    var state = _a.state, screen = _a.screen, _b = _a.alignContent, alignContent = _b === void 0 ? 'left' : _b; _a.children; var _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, _f = _a.clearCodeOnError, clearCodeOnError = _f === void 0 ? true : _f, _g = _a.hideCountdownSection, hideCountdownSection = _g === void 0 ? false : _g, _h = _a.breakpoint, breakpoint = _h === void 0 ? coreComponentsShared.getComponentBreakpoint() : _h, initialScreenHintSlot = _a.initialScreenHintSlot, errorVisibleDuration = _a.errorVisibleDuration, restProps = tslib.__rest(_a, ["state", "screen", "alignContent", "children", "requiredCharAmount", "countdownDuration", "tempBlockDuration", "phone", "blockSmsRetry", "dataTestId", "className", "getScreensMap", "onInputFinished", "onChangeState", "onSmsRetryClick", "onChangeScreen", "onFatalErrorOkButtonClick", "onTempBlockFinished", "mobile", "clearCodeOnError", "hideCountdownSection", "breakpoint", "initialScreenHintSlot", "errorVisibleDuration"]);
     var _j = utils.useCountdown(countdownDuration), timeLeft = _j[0], startTimer = _j[1], stopTimer = _j[2];
     var prevState = hooks.usePrevious(state);
     React.useEffect(function () {

package/confirmation/cssm/component.responsive.js

@@ -1,39 +1,20 @@
-import React from 'react';
-import { useMatchMedia } from '../../mq/cssm';
-import { ConfirmationDesktop } from './desktop/component.desktop.js';
-import { ConfirmationMobile } from './mobile/component.mobile.js';
-import './components/base-confirmation/component.js';
-import 'classnames';
-import '@alfalab/hooks';
-import './context.js';
-import './utils.js';
-import './types.js';
-import './components/screens/initial/component.js';
-import '../../button/cssm/mobile';
-import '../../code-input/cssm/desktop';
-import '../../code-input/cssm/mobile';
-import '../../link/cssm';
-import '../../typography/cssm';
-import './components/header/component.js';
-import './components/header/index.module.css';
-import './components/screens/initial/countdown-section.js';
-import '../../button/cssm';
-import '../../spinner/cssm';
-import './components/screens/initial/index.module.css';
-import './components/screens/hint/component.js';
-import './components/screens/hint/index.module.css';
-import './components/screens/fatal-error/component.js';
-import './components/screens/fatal-error/index.module.css';
-import './components/screens/temp-block/component.js';
-import './components/countdown-loader/component.js';
-import './components/countdown-loader/index.module.css';
-import './components/screens/temp-block/index.module.css';
-import './components/base-confirmation/index.module.css';
-import './mobile/mobile.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const ConfirmationResponsive = ({ breakpoint = 1024, ...restProps }) => {
-    const [isDesktop] = useMatchMedia(`(min-width: ${breakpoint}px)`, true);
-    return isDesktop ? (React.createElement(ConfirmationDesktop, { ...restProps })) : (React.createElement(ConfirmationMobile, { breakpoint: breakpoint, ...restProps }));
+var tslib = require('tslib');
+var React = require('react');
+var coreComponentsMq = require('../../mq/cssm');
+var coreComponentsShared = require('../../shared/cssm');
+var desktop_component_desktop = require('./desktop/component.desktop.js');
+var mobile_component_mobile = require('./mobile/component.mobile.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var ConfirmationResponsive = function (_a) {
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
+    var isDesktop = coreComponentsMq.useMatchMedia("(min-width: ".concat(breakpoint, "px)"), true)[0];
+    return isDesktop ? (React__default.default.createElement(desktop_component_desktop.ConfirmationDesktop, tslib.__assign({}, restProps))) : (React__default.default.createElement(mobile_component_mobile.ConfirmationMobile, tslib.__assign({ breakpoint: breakpoint }, restProps)));
 };
 
-export { ConfirmationResponsive };
+exports.ConfirmationResponsive = ConfirmationResponsive;

package/confirmation/cssm/components/base-confirmation/component.js

@@ -1,44 +1,39 @@
-import React, { useEffect, useMemo } from 'react';
-import cn from 'classnames';
-import { usePrevious } from '@alfalab/hooks';
-import { ConfirmationContext } from '../../context.js';
-import { defaultTexts } from '../../types.js';
-import { useCountdown, ONE_MINUTE, ONE_DAY } from '../../utils.js';
-import { Initial } from '../screens/initial/component.js';
-import { Hint } from '../screens/hint/component.js';
-import { FatalError } from '../screens/fatal-error/component.js';
-import { TempBlock } from '../screens/temp-block/component.js';
-import styles from './index.module.css';
-import '../../../../button/cssm/mobile';
-import '../../../../code-input/cssm/desktop';
-import '../../../../code-input/cssm/mobile';
-import '../../../../link/cssm';
-import '../../../../typography/cssm';
-import '../header/component.js';
-import '../header/index.module.css';
-import '../screens/initial/countdown-section.js';
-import '../../../../button/cssm';
-import '../../../../spinner/cssm';
-import '../screens/initial/index.module.css';
-import '../screens/hint/index.module.css';
-import '../screens/fatal-error/index.module.css';
-import '../countdown-loader/component.js';
-import '../countdown-loader/index.module.css';
-import '../screens/temp-block/index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const confirmationScreens = {
-    INITIAL: Initial,
-    HINT: Hint,
-    FATAL_ERROR: FatalError,
-    TEMP_BLOCK: TempBlock,
+var tslib = require('tslib');
+var React = require('react');
+var cn = require('classnames');
+var coreComponentsShared = require('../../../../shared/cssm');
+var hooks = require('@alfalab/hooks');
+var context = require('../../context.js');
+var types = require('../../types.js');
+var utils = require('../../utils.js');
+var components_screens_initial_component = require('../screens/initial/component.js');
+var components_screens_hint_component = require('../screens/hint/component.js');
+var components_screens_fatalError_component = require('../screens/fatal-error/component.js');
+var components_screens_tempBlock_component = require('../screens/temp-block/component.js');
+var styles = require('./index.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var confirmationScreens = {
+    INITIAL: components_screens_initial_component.Initial,
+    HINT: components_screens_hint_component.Hint,
+    FATAL_ERROR: components_screens_fatalError_component.FatalError,
+    TEMP_BLOCK: components_screens_tempBlock_component.TempBlock,
 };
-const BaseConfirmation = ({ state, screen, alignContent = 'left', children, requiredCharAmount = 5, countdownDuration = ONE_MINUTE, tempBlockDuration = ONE_DAY, phone, blockSmsRetry, dataTestId, className, getScreensMap, onInputFinished, onChangeState, onSmsRetryClick, onChangeScreen, onFatalErrorOkButtonClick, onTempBlockFinished, mobile, clearCodeOnError = true, hideCountdownSection = false, breakpoint = 1024, initialScreenHintSlot, errorVisibleDuration, ...restProps }) => {
-    const [timeLeft, startTimer, stopTimer] = useCountdown(countdownDuration);
-    const prevState = usePrevious(state);
-    useEffect(() => {
+var BaseConfirmation = function (_a) {
+    var state = _a.state, screen = _a.screen, _b = _a.alignContent, alignContent = _b === void 0 ? 'left' : _b; _a.children; var _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, _f = _a.clearCodeOnError, clearCodeOnError = _f === void 0 ? true : _f, _g = _a.hideCountdownSection, hideCountdownSection = _g === void 0 ? false : _g, _h = _a.breakpoint, breakpoint = _h === void 0 ? coreComponentsShared.getComponentBreakpoint() : _h, initialScreenHintSlot = _a.initialScreenHintSlot, errorVisibleDuration = _a.errorVisibleDuration, restProps = tslib.__rest(_a, ["state", "screen", "alignContent", "children", "requiredCharAmount", "countdownDuration", "tempBlockDuration", "phone", "blockSmsRetry", "dataTestId", "className", "getScreensMap", "onInputFinished", "onChangeState", "onSmsRetryClick", "onChangeScreen", "onFatalErrorOkButtonClick", "onTempBlockFinished", "mobile", "clearCodeOnError", "hideCountdownSection", "breakpoint", "initialScreenHintSlot", "errorVisibleDuration"]);
+    var _j = utils.useCountdown(countdownDuration), timeLeft = _j[0], startTimer = _j[1], stopTimer = _j[2];
+    var prevState = hooks.usePrevious(state);
+    React.useEffect(function () {
         startTimer();
     }, [startTimer]);
-    useEffect(() => {
+    React.useEffect(function () {
         /**
          * Перезапускаем таймер после повторного запроса кода
          */
@@ -46,7 +41,7 @@ const BaseConfirmation = ({ state, screen, alignContent = 'left', children, requ
             startTimer();
         }
     }, [state, prevState, startTimer]);
-    useEffect(() => {
+    React.useEffect(function () {
         /**
          * Останавливаем таймер, если новый экран/состояние не содержит таймер
          */
@@ -54,48 +49,48 @@ const BaseConfirmation = ({ state, screen, alignContent = 'left', children, requ
             stopTimer();
         }
     }, [state, screen, blockSmsRetry, stopTimer]);
-    const handleSmsRetry = () => {
+    var handleSmsRetry = function () {
         onChangeState('CODE_SENDING');
         onSmsRetryClick();
     };
-    const handleInputFinished = (code) => {
+    var handleInputFinished = function (code) {
         onChangeState('CODE_CHECKING');
         onInputFinished(code);
     };
-    const handleFatalErrorOkButtonClick = () => {
+    var handleFatalErrorOkButtonClick = function () {
         if (onFatalErrorOkButtonClick) {
             onFatalErrorOkButtonClick();
         }
     };
     // eslint-disable-next-line react/jsx-no-constructed-context-values
-    const contextValue = {
-        hideCountdownSection,
-        alignContent,
-        texts: { ...defaultTexts, ...restProps.texts },
-        state,
-        screen,
-        requiredCharAmount,
-        countdownDuration,
-        timeLeft,
-        tempBlockDuration,
-        phone,
-        blockSmsRetry,
-        breakpoint,
-        onTempBlockFinished,
-        onChangeState,
-        onChangeScreen,
-        clearCodeOnError,
-        errorVisibleDuration,
-        initialScreenHintSlot,
+    var contextValue = {
+        hideCountdownSection: hideCountdownSection,
+        alignContent: alignContent,
+        texts: tslib.__assign(tslib.__assign({}, types.defaultTexts), restProps.texts),
+        state: state,
+        screen: screen,
+        requiredCharAmount: requiredCharAmount,
+        countdownDuration: countdownDuration,
+        timeLeft: timeLeft,
+        tempBlockDuration: tempBlockDuration,
+        phone: phone,
+        blockSmsRetry: blockSmsRetry,
+        breakpoint: breakpoint,
+        onTempBlockFinished: onTempBlockFinished,
+        onChangeState: onChangeState,
+        onChangeScreen: onChangeScreen,
+        clearCodeOnError: clearCodeOnError,
+        errorVisibleDuration: errorVisibleDuration,
+        initialScreenHintSlot: initialScreenHintSlot,
         onInputFinished: handleInputFinished,
         onSmsRetryClick: handleSmsRetry,
         onFatalErrorOkButtonClick: handleFatalErrorOkButtonClick,
     };
-    const customScreen = useMemo(() => getScreensMap && getScreensMap(confirmationScreens), [getScreensMap]);
-    const screensMap = customScreen || confirmationScreens;
-    const CurrentScreen = screensMap[screen];
-    return (React.createElement(ConfirmationContext.Provider, { value: contextValue },
-        React.createElement("div", { className: cn(styles.component, className), "data-test-id": dataTestId }, CurrentScreen && React.createElement(CurrentScreen, { mobile: mobile }))));
+    var customScreen = React.useMemo(function () { return getScreensMap && getScreensMap(confirmationScreens); }, [getScreensMap]);
+    var screensMap = customScreen || 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__default.default.component, className), "data-test-id": dataTestId }, CurrentScreen && React__default.default.createElement(CurrentScreen, { mobile: mobile }))));
 };
 
-export { BaseConfirmation };
+exports.BaseConfirmation = BaseConfirmation;