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

package/code-input/cssm/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/cssm');
+var coreComponentsShared = require('../../shared/cssm');
 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 CodeInput = React.forwardRef(function (_a, ref) {
-    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 query = "(min-width: ".concat(breakpoint, "px)");
     var isDesktop = coreComponentsMq.useMatchMedia(query)[0];
     var Component = isDesktop ? desktop_Component_desktop.CodeInputDesktop : 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/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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 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');
 
@@ -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/cssm/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/cssm');
 var hooks = require('@alfalab/hooks');
 var context = require('../../context.js');
 var types = require('../../types.js');
@@ -26,7 +27,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/esm/component.responsive.js

@@ -1,6 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
 import { useMatchMedia } from '../../mq/esm';
+import { getComponentBreakpoint } from '../../shared/esm';
 import { ConfirmationDesktop } from './desktop/component.desktop.js';
 import { ConfirmationMobile } from './mobile/component.mobile.js';
 import './components/base-confirmation/component.js';
@@ -25,7 +26,7 @@ import './components/screens/temp-block/component.js';
 import './components/countdown-loader/component.js';
 
 var ConfirmationResponsive = function (_a) {
-    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 isDesktop = useMatchMedia("(min-width: ".concat(breakpoint, "px)"), true)[0];
     return isDesktop ? (React.createElement(ConfirmationDesktop, __assign({}, restProps))) : (React.createElement(ConfirmationMobile, __assign({ breakpoint: breakpoint }, restProps)));
 };

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

@@ -1,6 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React, { useEffect, useMemo } from 'react';
 import cn from 'classnames';
+import { getComponentBreakpoint } from '../../../../shared/esm';
 import { usePrevious } from '@alfalab/hooks';
 import { ConfirmationContext } from '../../context.js';
 import { defaultTexts } from '../../types.js';
@@ -30,7 +31,7 @@ var confirmationScreens = {
     TEMP_BLOCK: 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 ? ONE_MINUTE : _d, _e = _a.tempBlockDuration, tempBlockDuration = _e === void 0 ? 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 = __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 ? ONE_MINUTE : _d, _e = _a.tempBlockDuration, tempBlockDuration = _e === void 0 ? 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 ? getComponentBreakpoint() : _h, initialScreenHintSlot = _a.initialScreenHintSlot, errorVisibleDuration = _a.errorVisibleDuration, restProps = __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 = useCountdown(countdownDuration), timeLeft = _j[0], startTimer = _j[1], stopTimer = _j[2];
     var prevState = usePrevious(state);
     useEffect(function () {

package/confirmation/esm/components/base-confirmation/index.js

@@ -2,6 +2,7 @@ export { BaseConfirmation } from './component.js';
 import 'tslib';
 import 'react';
 import 'classnames';
+import '../../../../shared/esm';
 import '@alfalab/hooks';
 import '../../context.js';
 import '../../utils.js';

package/confirmation/esm/desktop/component.desktop.js

@@ -2,6 +2,7 @@ import { __assign } from 'tslib';
 import React from 'react';
 import { BaseConfirmation } from '../components/base-confirmation/component.js';
 import 'classnames';
+import '../../../shared/esm';
 import '@alfalab/hooks';
 import '../context.js';
 import '../utils.js';

package/confirmation/esm/desktop/index.js

@@ -4,6 +4,7 @@ import 'tslib';
 import 'react';
 import '../components/base-confirmation/component.js';
 import 'classnames';
+import '../../../shared/esm';
 import '@alfalab/hooks';
 import '../context.js';
 import '../types.js';

package/confirmation/esm/index.js

@@ -3,6 +3,7 @@ export { useConfirmation, useCountdown } from './utils.js';
 import 'tslib';
 import 'react';
 import '../../mq/esm';
+import '../../shared/esm';
 import './desktop/component.desktop.js';
 import './components/base-confirmation/component.js';
 import 'classnames';

package/confirmation/esm/mobile/component.mobile.js

@@ -2,6 +2,7 @@ import { __rest, __assign } from 'tslib';
 import React from 'react';
 import cn from 'classnames';
 import { BaseConfirmation } from '../components/base-confirmation/component.js';
+import '../../../shared/esm';
 import '@alfalab/hooks';
 import '../context.js';
 import '../utils.js';

package/confirmation/esm/mobile/index.js

@@ -4,6 +4,7 @@ import 'tslib';
 import 'react';
 import 'classnames';
 import '../components/base-confirmation/component.js';
+import '../../../shared/esm';
 import '@alfalab/hooks';
 import '../context.js';
 import '../types.js';

package/confirmation/modern/component.responsive.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useMatchMedia } from '../../mq/modern';
+import { getComponentBreakpoint } from '../../shared/modern';
 import { ConfirmationDesktop } from './desktop/component.desktop.js';
 import { ConfirmationMobile } from './mobile/component.mobile.js';
 import './components/base-confirmation/component.js';
@@ -23,7 +24,7 @@ import './components/screens/fatal-error/component.js';
 import './components/screens/temp-block/component.js';
 import './components/countdown-loader/component.js';
 
-const ConfirmationResponsive = ({ breakpoint = 1024, ...restProps }) => {
+const ConfirmationResponsive = ({ breakpoint = getComponentBreakpoint(), ...restProps }) => {
     const [isDesktop] = useMatchMedia(`(min-width: ${breakpoint}px)`, true);
     return isDesktop ? (React.createElement(ConfirmationDesktop, { ...restProps })) : (React.createElement(ConfirmationMobile, { breakpoint: breakpoint, ...restProps }));
 };

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

@@ -1,5 +1,6 @@
 import React, { useEffect, useMemo } from 'react';
 import cn from 'classnames';
+import { getComponentBreakpoint } from '../../../../shared/modern';
 import { usePrevious } from '@alfalab/hooks';
 import { ConfirmationContext } from '../../context.js';
 import { defaultTexts } from '../../types.js';
@@ -28,7 +29,7 @@ const confirmationScreens = {
     FATAL_ERROR: FatalError,
     TEMP_BLOCK: 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 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 = getComponentBreakpoint(), initialScreenHintSlot, errorVisibleDuration, ...restProps }) => {
     const [timeLeft, startTimer, stopTimer] = useCountdown(countdownDuration);
     const prevState = usePrevious(state);
     useEffect(() => {

package/confirmation/modern/components/base-confirmation/index.js

@@ -1,6 +1,7 @@
 export { BaseConfirmation } from './component.js';
 import 'react';
 import 'classnames';
+import '../../../../shared/modern';
 import '@alfalab/hooks';
 import '../../context.js';
 import '../../utils.js';

package/confirmation/modern/desktop/component.desktop.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { BaseConfirmation } from '../components/base-confirmation/component.js';
 import 'classnames';
+import '../../../shared/modern';
 import '@alfalab/hooks';
 import '../context.js';
 import '../utils.js';

package/confirmation/modern/desktop/index.js

@@ -3,6 +3,7 @@ export { useConfirmation, useCountdown } from '../utils.js';
 import 'react';
 import '../components/base-confirmation/component.js';
 import 'classnames';
+import '../../../shared/modern';
 import '@alfalab/hooks';
 import '../context.js';
 import '../types.js';

package/confirmation/modern/index.js

@@ -2,6 +2,7 @@ export { ConfirmationResponsive as Confirmation } from './component.responsive.j
 export { useConfirmation, useCountdown } from './utils.js';
 import 'react';
 import '../../mq/modern';
+import '../../shared/modern';
 import './desktop/component.desktop.js';
 import './components/base-confirmation/component.js';
 import 'classnames';

package/confirmation/modern/mobile/component.mobile.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 import { BaseConfirmation } from '../components/base-confirmation/component.js';
+import '../../../shared/modern';
 import '@alfalab/hooks';
 import '../context.js';
 import '../utils.js';

package/confirmation/modern/mobile/index.js

@@ -3,6 +3,7 @@ export { useConfirmation, useCountdown } from '../utils.js';
 import 'react';
 import 'classnames';
 import '../components/base-confirmation/component.js';
+import '../../../shared/modern';
 import '@alfalab/hooks';
 import '../context.js';
 import '../types.js';

package/custom-picker-button/Component.responsive.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import React from 'react';
-import { CustomButtonProps } from "../custom-button";
 import { AdditionalMobileProps, BottomSheetSelectMobileProps } from "../select/shared";
 import { CustomPickerButtonDesktopProps } from "./desktop/index";
 type CustomPickerButtonResponsiveProps = CustomPickerButtonDesktopProps & AdditionalMobileProps & BottomSheetSelectMobileProps & {
@@ -10,7 +9,7 @@ type CustomPickerButtonResponsiveProps = CustomPickerButtonDesktopProps & Additi
      */
     breakpoint?: number;
 };
-declare const CustomPickerButtonResponsive: React.ForwardRefExoticComponent<Omit<import("../picker-button/desktop").PickerButtonDesktopProps, "view" | "colors"> & Pick<CustomButtonProps, "backgroundColor" | "contentColor" | "stateType"> & AdditionalMobileProps & BottomSheetSelectMobileProps & {
+declare const CustomPickerButtonResponsive: React.ForwardRefExoticComponent<Omit<import("../picker-button/src/desktop").PickerButtonDesktopProps, "view" | "colors"> & Pick<import("packages/custom-button").CustomButtonProps, "backgroundColor" | "contentColor" | "stateType"> & AdditionalMobileProps & BottomSheetSelectMobileProps & {
     /**
      * Контрольная точка, с нее начинается desktop версия
      * @default 1024

package/custom-picker-button/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 CustomPickerButtonResponsive = React.forwardRef(function (_a, ref) {
-    var OptionsList = _a.OptionsList, onScroll = _a.onScroll, footer = _a.footer, swipeable = _a.swipeable, bottomSheetProps = _a.bottomSheetProps, _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = tslib.__rest(_a, ["OptionsList", "onScroll", "footer", "swipeable", "bottomSheetProps", "breakpoint"]);
+    var OptionsList = _a.OptionsList, onScroll = _a.onScroll, footer = _a.footer, swipeable = _a.swipeable, bottomSheetProps = _a.bottomSheetProps, _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, restProps = tslib.__rest(_a, ["OptionsList", "onScroll", "footer", "swipeable", "bottomSheetProps", "breakpoint"]);
     var query = "(min-width: ".concat(breakpoint, "px)");
     var isDesktop = coreComponentsMq.useMatchMedia(query)[0];
     return isDesktop ? (React__default.default.createElement(desktop_Component_desktop.CustomPickerButtonDesktop, tslib.__assign({ ref: ref, OptionsList: OptionsList, onScroll: onScroll }, restProps))) : (React__default.default.createElement(mobile_Component_mobile.CustomPickerButtonMobile, tslib.__assign({ ref: ref, footer: footer, swipeable: swipeable, bottomSheetProps: bottomSheetProps }, restProps)));

package/custom-picker-button/cssm/Component.responsive.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import React from 'react';
-import { CustomButtonProps } from "../../custom-button";
 import { AdditionalMobileProps, BottomSheetSelectMobileProps } from "../../select/shared";
 import { CustomPickerButtonDesktopProps } from "./desktop/index";
 type CustomPickerButtonResponsiveProps = CustomPickerButtonDesktopProps & AdditionalMobileProps & BottomSheetSelectMobileProps & {
@@ -10,7 +9,7 @@ type CustomPickerButtonResponsiveProps = CustomPickerButtonDesktopProps & Additi
      */
     breakpoint?: number;
 };
-declare const CustomPickerButtonResponsive: React.ForwardRefExoticComponent<Omit<import("../../picker-button/desktop").PickerButtonDesktopProps, "view" | "colors"> & Pick<CustomButtonProps, "backgroundColor" | "contentColor" | "stateType"> & AdditionalMobileProps & BottomSheetSelectMobileProps & {
+declare const CustomPickerButtonResponsive: React.ForwardRefExoticComponent<Omit<import("../../picker-button/src/desktop").PickerButtonDesktopProps, "view" | "colors"> & Pick<import("packages/custom-button").CustomButtonProps, "backgroundColor" | "contentColor" | "stateType"> & AdditionalMobileProps & BottomSheetSelectMobileProps & {
     /**
      * Контрольная точка, с нее начинается desktop версия
      * @default 1024

package/custom-picker-button/cssm/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/cssm');
+var coreComponentsShared = require('../../shared/cssm');
 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 CustomPickerButtonResponsive = React.forwardRef(function (_a, ref) {
-    var OptionsList = _a.OptionsList, onScroll = _a.onScroll, footer = _a.footer, swipeable = _a.swipeable, bottomSheetProps = _a.bottomSheetProps, _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = tslib.__rest(_a, ["OptionsList", "onScroll", "footer", "swipeable", "bottomSheetProps", "breakpoint"]);
+    var OptionsList = _a.OptionsList, onScroll = _a.onScroll, footer = _a.footer, swipeable = _a.swipeable, bottomSheetProps = _a.bottomSheetProps, _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, restProps = tslib.__rest(_a, ["OptionsList", "onScroll", "footer", "swipeable", "bottomSheetProps", "breakpoint"]);
     var query = "(min-width: ".concat(breakpoint, "px)");
     var isDesktop = coreComponentsMq.useMatchMedia(query)[0];
     return isDesktop ? (React__default.default.createElement(desktop_Component_desktop.CustomPickerButtonDesktop, tslib.__assign({ ref: ref, OptionsList: OptionsList, onScroll: onScroll }, restProps))) : (React__default.default.createElement(mobile_Component_mobile.CustomPickerButtonMobile, tslib.__assign({ ref: ref, footer: footer, swipeable: swipeable, bottomSheetProps: bottomSheetProps }, restProps)));

package/custom-picker-button/esm/Component.responsive.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import React from 'react';
-import { CustomButtonProps } from "../../custom-button";
 import { AdditionalMobileProps, BottomSheetSelectMobileProps } from "../../select/shared";
 import { CustomPickerButtonDesktopProps } from "./desktop/index";
 type CustomPickerButtonResponsiveProps = CustomPickerButtonDesktopProps & AdditionalMobileProps & BottomSheetSelectMobileProps & {
@@ -10,7 +9,7 @@ type CustomPickerButtonResponsiveProps = CustomPickerButtonDesktopProps & Additi
      */
     breakpoint?: number;
 };
-declare const CustomPickerButtonResponsive: React.ForwardRefExoticComponent<Omit<import("../../picker-button/desktop").PickerButtonDesktopProps, "view" | "colors"> & Pick<CustomButtonProps, "backgroundColor" | "contentColor" | "stateType"> & AdditionalMobileProps & BottomSheetSelectMobileProps & {
+declare const CustomPickerButtonResponsive: React.ForwardRefExoticComponent<Omit<import("../../picker-button/src/desktop").PickerButtonDesktopProps, "view" | "colors"> & Pick<import("packages/custom-button").CustomButtonProps, "backgroundColor" | "contentColor" | "stateType"> & AdditionalMobileProps & BottomSheetSelectMobileProps & {
     /**
      * Контрольная точка, с нее начинается desktop версия
      * @default 1024

package/custom-picker-button/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 { CustomPickerButtonDesktop } from './desktop/Component.desktop.js';
 import { CustomPickerButtonMobile } from './mobile/Component.mobile.js';
 import '../../picker-button/esm/desktop';
@@ -11,7 +12,7 @@ import '../../picker-button/esm/shared';
 import '../../picker-button/esm/mobile';
 
 var CustomPickerButtonResponsive = forwardRef(function (_a, ref) {
-    var OptionsList = _a.OptionsList, onScroll = _a.onScroll, footer = _a.footer, swipeable = _a.swipeable, bottomSheetProps = _a.bottomSheetProps, _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = __rest(_a, ["OptionsList", "onScroll", "footer", "swipeable", "bottomSheetProps", "breakpoint"]);
+    var OptionsList = _a.OptionsList, onScroll = _a.onScroll, footer = _a.footer, swipeable = _a.swipeable, bottomSheetProps = _a.bottomSheetProps, _b = _a.breakpoint, breakpoint = _b === void 0 ? getComponentBreakpoint() : _b, restProps = __rest(_a, ["OptionsList", "onScroll", "footer", "swipeable", "bottomSheetProps", "breakpoint"]);
     var query = "(min-width: ".concat(breakpoint, "px)");
     var isDesktop = useMatchMedia(query)[0];
     return isDesktop ? (React.createElement(CustomPickerButtonDesktop, __assign({ ref: ref, OptionsList: OptionsList, onScroll: onScroll }, restProps))) : (React.createElement(CustomPickerButtonMobile, __assign({ ref: ref, footer: footer, swipeable: swipeable, bottomSheetProps: bottomSheetProps }, restProps)));

package/custom-picker-button/esm/index.js

@@ -2,6 +2,7 @@ export { CustomPickerButtonResponsive as CustomPickerButton } from './Component.
 import 'tslib';
 import 'react';
 import '../../mq/esm';
+import '../../shared/esm';
 import './desktop/Component.desktop.js';
 import '../../picker-button/esm/desktop';
 import './field/Component.js';

package/custom-picker-button/modern/Component.responsive.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import React from 'react';
-import { CustomButtonProps } from "../../custom-button";
 import { AdditionalMobileProps, BottomSheetSelectMobileProps } from "../../select/shared";
 import { CustomPickerButtonDesktopProps } from "./desktop/index";
 type CustomPickerButtonResponsiveProps = CustomPickerButtonDesktopProps & AdditionalMobileProps & BottomSheetSelectMobileProps & {
@@ -10,7 +9,7 @@ type CustomPickerButtonResponsiveProps = CustomPickerButtonDesktopProps & Additi
      */
     breakpoint?: number;
 };
-declare const CustomPickerButtonResponsive: React.ForwardRefExoticComponent<Omit<import("../../picker-button/desktop").PickerButtonDesktopProps, "view" | "colors"> & Pick<CustomButtonProps, "backgroundColor" | "contentColor" | "stateType"> & AdditionalMobileProps & BottomSheetSelectMobileProps & {
+declare const CustomPickerButtonResponsive: React.ForwardRefExoticComponent<Omit<import("../../picker-button/src/desktop").PickerButtonDesktopProps, "view" | "colors"> & Pick<import("packages/custom-button").CustomButtonProps, "backgroundColor" | "contentColor" | "stateType"> & AdditionalMobileProps & BottomSheetSelectMobileProps & {
     /**
      * Контрольная точка, с нее начинается desktop версия
      * @default 1024

package/custom-picker-button/modern/Component.responsive.js

@@ -1,5 +1,6 @@
 import React, { forwardRef } from 'react';
 import { useMatchMedia } from '../../mq/modern';
+import { getComponentBreakpoint } from '../../shared/modern';
 import { CustomPickerButtonDesktop } from './desktop/Component.desktop.js';
 import { CustomPickerButtonMobile } from './mobile/Component.mobile.js';
 import '../../picker-button/modern/desktop';
@@ -9,7 +10,7 @@ import '../../custom-button/modern';
 import '../../picker-button/modern/shared';
 import '../../picker-button/modern/mobile';
 
-const CustomPickerButtonResponsive = forwardRef(({ OptionsList, onScroll, footer, swipeable, bottomSheetProps, breakpoint = 1024, ...restProps }, ref) => {
+const CustomPickerButtonResponsive = forwardRef(({ OptionsList, onScroll, footer, swipeable, bottomSheetProps, breakpoint = getComponentBreakpoint(), ...restProps }, ref) => {
     const query = `(min-width: ${breakpoint}px)`;
     const [isDesktop] = useMatchMedia(query);
     return isDesktop ? (React.createElement(CustomPickerButtonDesktop, { ref: ref, OptionsList: OptionsList, onScroll: onScroll, ...restProps })) : (React.createElement(CustomPickerButtonMobile, { ref: ref, footer: footer, swipeable: swipeable, bottomSheetProps: bottomSheetProps, ...restProps }));

package/custom-picker-button/modern/index.js

@@ -1,6 +1,7 @@
 export { CustomPickerButtonResponsive as CustomPickerButton } from './Component.responsive.js';
 import 'react';
 import '../../mq/modern';
+import '../../shared/modern';
 import './desktop/Component.desktop.js';
 import '../../picker-button/modern/desktop';
 import './field/Component.js';

package/date-range-input/Component.responsive.js

@@ -2,6 +2,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
+var coreComponentsShared = require('../shared');
 var hooks = require('@alfalab/hooks');
 var desktop_Component_desktop = require('./desktop/Component.desktop.js');
 var mobile_Component_mobile = require('./mobile/Component.mobile.js');
@@ -15,7 +16,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
  * use UniversalDateInput instead
  */
 var DateRangeInputResponsive = React.forwardRef(function (_a, ref) {
-    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 view = hooks.useMedia([
         ['mobile', "(max-width: ".concat(breakpoint - 1, "px)")],
         ['desktop', "(min-width: ".concat(breakpoint, "px)")],

package/date-range-input/cssm/Component.responsive.js

@@ -2,6 +2,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
+var coreComponentsShared = require('../../shared/cssm');
 var hooks = require('@alfalab/hooks');
 var desktop_Component_desktop = require('./desktop/Component.desktop.js');
 var mobile_Component_mobile = require('./mobile/Component.mobile.js');
@@ -15,7 +16,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
  * use UniversalDateInput instead
  */
 var DateRangeInputResponsive = React.forwardRef(function (_a, ref) {
-    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 view = hooks.useMedia([
         ['mobile', "(max-width: ".concat(breakpoint - 1, "px)")],
         ['desktop', "(min-width: ".concat(breakpoint, "px)")],

package/date-range-input/esm/Component.responsive.js

@@ -1,5 +1,6 @@
 import { __rest, __assign } from 'tslib';
 import React, { forwardRef } from 'react';
+import { getComponentBreakpoint } from '../../shared/esm';
 import { useMedia } from '@alfalab/hooks';
 import { DateRangeInputDesktop } from './desktop/Component.desktop.js';
 import { DateRangeInputMobile } from './mobile/Component.mobile.js';
@@ -24,7 +25,7 @@ import '../../input/esm/mobile';
  * use UniversalDateInput instead
  */
 var DateRangeInputResponsive = 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 view = useMedia([
         ['mobile', "(max-width: ".concat(breakpoint - 1, "px)")],
         ['desktop', "(min-width: ".concat(breakpoint, "px)")],

package/date-range-input/esm/index.js

@@ -1,6 +1,7 @@
 export { DateRangeInputResponsive as DateRangeInput } from './Component.responsive.js';
 import 'tslib';
 import 'react';
+import '../../shared/esm';
 import '@alfalab/hooks';
 import './desktop/Component.desktop.js';
 import '../../calendar/esm/desktop';

package/date-range-input/modern/Component.responsive.js

@@ -1,4 +1,5 @@
 import React, { forwardRef } from 'react';
+import { getComponentBreakpoint } from '../../shared/modern';
 import { useMedia } from '@alfalab/hooks';
 import { DateRangeInputDesktop } from './desktop/Component.desktop.js';
 import { DateRangeInputMobile } from './mobile/Component.mobile.js';
@@ -22,7 +23,7 @@ import '../../input/modern/mobile';
  * @deprecated
  * use UniversalDateInput instead
  */
-const DateRangeInputResponsive = forwardRef(({ breakpoint = 1024, ...restProps }, ref) => {
+const DateRangeInputResponsive = forwardRef(({ breakpoint = getComponentBreakpoint(), ...restProps }, ref) => {
     const [view] = useMedia([
         ['mobile', `(max-width: ${breakpoint - 1}px)`],
         ['desktop', `(min-width: ${breakpoint}px)`],

package/date-range-input/modern/index.js

@@ -1,5 +1,6 @@
 export { DateRangeInputResponsive as DateRangeInput } from './Component.responsive.js';
 import 'react';
+import '../../shared/modern';
 import '@alfalab/hooks';
 import './desktop/Component.desktop.js';
 import '../../calendar/modern/desktop';

package/date-time-input/Component.responsive.js

@@ -2,6 +2,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
+var coreComponentsShared = require('../shared');
 var hooks = require('@alfalab/hooks');
 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 DateTimeInputResponsive = React.forwardRef(function (_a, ref) {
-    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 view = hooks.useMedia([
         ['mobile', "(max-width: ".concat(breakpoint - 1, "px)")],
         ['desktop', "(min-width: ".concat(breakpoint, "px)")],