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

package/circular-progress-bar/cssm/Component.js

@@ -1,77 +1,84 @@
-import React, { useMemo } from 'react';
-import cn from 'classnames';
-import { Typography } from '../../typography/cssm';
-import { STROKE, SIZES, TYPOGRAPHY_COLOR, SIZE_TO_CLASSNAME_MAP, VIEW_TITLE, VIEW_TEXT } from './consts.js';
-import styles from './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var cn = require('classnames');
+var coreComponentsTypography = require('../../typography/cssm');
+var consts = require('./consts.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);
 
 /**
  * Компонент круглого прогресс бара.
  */
-const CircularProgressBar = ({ value, view = 'positive', size = 64, className, dataTestId, title = value ? value.toString() : '0', titleComplete, subtitle, contentColor = 'secondary', subtitleComplete, stroke = true, fillComplete, icon: Icon, iconComplete: IconComplete, completeTextColor, completeIconColor = 'tertiary', direction = 'clockwise', height, children, progressStrokeColor, circleColor, strokeColor, }) => {
-    const memorized = useMemo(() => {
-        const strokeWidth = STROKE[size];
-        const maxProgress = 100;
-        const minProgress = 0;
-        const widthSVG = SIZES[size];
-        const heightSVG = SIZES[size];
-        const center = widthSVG / 2;
-        const radius = center - strokeWidth / 2;
-        const circumference = Math.PI * radius * 2;
-        const progress = Math.min(Math.max(value, minProgress), maxProgress);
-        const strokeDasharray = circumference.toFixed(3);
-        const strokeDashoffset = (((100 - progress) / 100) * circumference).toFixed(3);
+var CircularProgressBar = function (_a) {
+    var _b, _c, _d;
+    var value = _a.value, _e = _a.view, view = _e === void 0 ? 'positive' : _e, _f = _a.size, size = _f === void 0 ? 64 : _f, className = _a.className, dataTestId = _a.dataTestId, _g = _a.title, title = _g === void 0 ? value ? value.toString() : '0' : _g, titleComplete = _a.titleComplete, subtitle = _a.subtitle, _h = _a.contentColor, contentColor = _h === void 0 ? 'secondary' : _h, subtitleComplete = _a.subtitleComplete, _j = _a.stroke, stroke = _j === void 0 ? true : _j, fillComplete = _a.fillComplete, Icon = _a.icon, IconComplete = _a.iconComplete, completeTextColor = _a.completeTextColor, _k = _a.completeIconColor, completeIconColor = _k === void 0 ? 'tertiary' : _k, _l = _a.direction, direction = _l === void 0 ? 'clockwise' : _l, height = _a.height, children = _a.children, progressStrokeColor = _a.progressStrokeColor, circleColor = _a.circleColor, strokeColor = _a.strokeColor;
+    var memorized = React.useMemo(function () {
+        var strokeWidth = consts.STROKE[size];
+        var maxProgress = 100;
+        var minProgress = 0;
+        var widthSVG = consts.SIZES[size];
+        var heightSVG = consts.SIZES[size];
+        var center = widthSVG / 2;
+        var radius = center - strokeWidth / 2;
+        var circumference = Math.PI * radius * 2;
+        var progress = Math.min(Math.max(value, minProgress), maxProgress);
+        var strokeDasharray = circumference.toFixed(3);
+        var strokeDashoffset = (((100 - progress) / 100) * circumference).toFixed(3);
         return {
-            widthSVG,
-            heightSVG,
-            center,
-            radius,
-            strokeDasharray,
-            strokeDashoffset,
+            widthSVG: widthSVG,
+            heightSVG: heightSVG,
+            center: center,
+            radius: radius,
+            strokeDasharray: strokeDasharray,
+            strokeDashoffset: strokeDashoffset,
         };
     }, [value, size]);
-    const isComplete = value === 100;
-    const isCompleteTextColor = isComplete && completeTextColor;
-    const titleContent = titleComplete && isComplete ? titleComplete : title;
-    const subtitleContent = subtitleComplete && isComplete ? subtitleComplete : subtitle;
-    const IconComponent = IconComplete && isComplete ? IconComplete : Icon;
-    const typographyContentColor = TYPOGRAPHY_COLOR.includes(contentColor)
+    var isComplete = value === 100;
+    var isCompleteTextColor = isComplete && completeTextColor;
+    var titleContent = titleComplete && isComplete ? titleComplete : title;
+    var subtitleContent = subtitleComplete && isComplete ? subtitleComplete : subtitle;
+    var IconComponent = IconComplete && isComplete ? IconComplete : Icon;
+    var typographyContentColor = consts.TYPOGRAPHY_COLOR.includes(contentColor)
         ? contentColor
         : undefined;
-    const renderTitleString = () => SIZES[size] > 64 ? (React.createElement(Typography.TitleMobile, { className: cn(styles.typography, styles.title), color: isCompleteTextColor ? completeTextColor : typographyContentColor, tag: 'div', font: 'system', view: VIEW_TITLE[size], style: {
-            ...(!typographyContentColor && { color: contentColor }),
-        } }, titleContent)) : (React.createElement(Typography.Text, { className: styles.title, color: isCompleteTextColor ? completeTextColor : typographyContentColor, tag: 'div', weight: 'bold', view: VIEW_TEXT[size], style: {
-            ...(!typographyContentColor && { color: contentColor }),
-        } }, titleContent));
-    const renderTitle = () => (typeof title === 'string' ? renderTitleString() : titleContent);
-    const renderSubTitle = () => typeof subtitle === 'string' ? (React.createElement(Typography.Text, { tag: 'div', className: styles.subtitle, color: isCompleteTextColor ? completeTextColor : typographyContentColor, view: 'primary-small', style: {
-            ...(!typographyContentColor && { color: contentColor }),
-        } }, subtitleContent)) : (subtitleContent);
-    const renderIcon = () => (React.createElement("span", { className: cn(styles.iconWrapper, styles[SIZE_TO_CLASSNAME_MAP[size]], styles.tertiary, styles[`icon-${contentColor}`], {
-            [styles[`icon-${completeIconColor}`]]: completeIconColor,
-        }) }, IconComponent && React.createElement(IconComponent, { className: styles.icon })));
-    const renderContent = () => Icon || (IconComplete && isComplete) ? (renderIcon()) : (React.createElement(React.Fragment, null,
-        SIZES[size] > 24 && renderTitle(),
-        SIZES[size] > 64 && renderSubTitle()));
-    return (React.createElement("div", { className: cn(styles.component, styles[SIZE_TO_CLASSNAME_MAP[size]], className, {
-            [styles[`bg-${view}`]]: fillComplete && isComplete,
-        }), style: {
-            ...(height && { height, width: height }),
-            ...(circleColor && { backgroundColor: circleColor }),
-        }, "data-test-id": dataTestId },
-        React.createElement("svg", { viewBox: `0 0 ${memorized.widthSVG} ${memorized.heightSVG}`, className: styles.svg, xmlns: 'http://www.w3.org/2000/svg' },
-            React.createElement("circle", { className: cn(styles.backgroundCircle, styles[SIZE_TO_CLASSNAME_MAP[size]], {
-                    [styles.stroke]: !stroke,
-                }), style: {
-                    ...(strokeColor && stroke && { stroke: strokeColor }),
-                }, cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: STROKE[size] }),
-            React.createElement("circle", { className: cn(styles.progressCircle, styles[view], styles[SIZE_TO_CLASSNAME_MAP[size]]), style: {
-                    ...(progressStrokeColor && { stroke: progressStrokeColor }),
-                }, cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: STROKE[size], strokeDasharray: memorized.strokeDasharray, strokeDashoffset: direction === 'counter-clockwise'
+    var renderTitleString = function () {
+        return consts.SIZES[size] > 64 ? (React__default.default.createElement(coreComponentsTypography.Typography.TitleMobile, { className: cn__default.default(styles__default.default.typography, styles__default.default.title), color: isCompleteTextColor ? completeTextColor : typographyContentColor, tag: 'div', font: 'system', view: consts.VIEW_TITLE[size], style: tslib.__assign({}, (!typographyContentColor && { color: contentColor })) }, titleContent)) : (React__default.default.createElement(coreComponentsTypography.Typography.Text, { className: styles__default.default.title, color: isCompleteTextColor ? completeTextColor : typographyContentColor, tag: 'div', weight: 'bold', view: consts.VIEW_TEXT[size], style: tslib.__assign({}, (!typographyContentColor && { color: contentColor })) }, titleContent));
+    };
+    var renderTitle = function () { return (typeof title === 'string' ? renderTitleString() : titleContent); };
+    var renderSubTitle = function () {
+        return typeof subtitle === 'string' ? (React__default.default.createElement(coreComponentsTypography.Typography.Text, { tag: 'div', className: styles__default.default.subtitle, color: isCompleteTextColor ? completeTextColor : typographyContentColor, view: 'primary-small', style: tslib.__assign({}, (!typographyContentColor && { color: contentColor })) }, subtitleContent)) : (subtitleContent);
+    };
+    var renderIcon = function () {
+        var _a;
+        return (React__default.default.createElement("span", { className: cn__default.default(styles__default.default.iconWrapper, styles__default.default[consts.SIZE_TO_CLASSNAME_MAP[size]], styles__default.default.tertiary, styles__default.default["icon-".concat(contentColor)], (_a = {},
+                _a[styles__default.default["icon-".concat(completeIconColor)]] = completeIconColor,
+                _a)) }, IconComponent && React__default.default.createElement(IconComponent, { className: styles__default.default.icon })));
+    };
+    var renderContent = function () {
+        return Icon || (IconComplete && isComplete) ? (renderIcon()) : (React__default.default.createElement(React__default.default.Fragment, null,
+            consts.SIZES[size] > 24 && renderTitle(),
+            consts.SIZES[size] > 64 && renderSubTitle()));
+    };
+    return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, styles__default.default[consts.SIZE_TO_CLASSNAME_MAP[size]], className, (_b = {},
+            _b[styles__default.default["bg-".concat(view)]] = fillComplete && isComplete,
+            _b)), style: tslib.__assign(tslib.__assign({}, (height && { height: height, width: height })), (circleColor && { backgroundColor: circleColor })), "data-test-id": dataTestId },
+        React__default.default.createElement("svg", { viewBox: "0 0 ".concat(memorized.widthSVG, " ").concat(memorized.heightSVG), className: styles__default.default.svg, xmlns: 'http://www.w3.org/2000/svg' },
+            React__default.default.createElement("circle", { className: cn__default.default(styles__default.default.backgroundCircle, styles__default.default[consts.SIZE_TO_CLASSNAME_MAP[size]], (_c = {},
+                    _c[styles__default.default.stroke] = !stroke,
+                    _c)), style: tslib.__assign({}, (strokeColor && stroke && { stroke: strokeColor })), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: consts.STROKE[size] }),
+            React__default.default.createElement("circle", { className: cn__default.default(styles__default.default.progressCircle, styles__default.default[view], styles__default.default[consts.SIZE_TO_CLASSNAME_MAP[size]]), style: tslib.__assign({}, (progressStrokeColor && { stroke: progressStrokeColor })), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: consts.STROKE[size], strokeDasharray: memorized.strokeDasharray, strokeDashoffset: direction === 'counter-clockwise'
                     ? -memorized.strokeDashoffset
-                    : memorized.strokeDashoffset, transform: `rotate(${-90} ${memorized.center} ${memorized.center})` })),
-        React.createElement("div", { className: cn(styles.labelWrapper, {
-                [styles.label]: Icon || IconComplete,
-            }) }, children || renderContent())));
+                    : memorized.strokeDashoffset, transform: "rotate(".concat(-90, " ").concat(memorized.center, " ").concat(memorized.center, ")") })),
+        React__default.default.createElement("div", { className: cn__default.default(styles__default.default.labelWrapper, (_d = {},
+                _d[styles__default.default.label] = Icon || IconComplete,
+                _d)) }, children || renderContent())));
 };
 
-export { CircularProgressBar };
+exports.CircularProgressBar = CircularProgressBar;

package/circular-progress-bar/cssm/consts.js

@@ -1,4 +1,6 @@
-const SIZES = {
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var SIZES = {
     xs: 24,
     s: 48,
     m: 64,
@@ -12,7 +14,7 @@ const SIZES = {
     128: 128,
     144: 144,
 };
-const STROKE = {
+var STROKE = {
     xs: 4,
     s: 4,
     m: 6,
@@ -26,7 +28,7 @@ const STROKE = {
     128: 10,
     144: 12,
 };
-const VIEW_TITLE = {
+var VIEW_TITLE = {
     xs: 'small',
     s: 'small',
     m: 'small',
@@ -40,7 +42,7 @@ const VIEW_TITLE = {
     128: 'medium',
     144: 'medium',
 };
-const VIEW_TEXT = {
+var VIEW_TEXT = {
     xs: 'secondary-small',
     s: 'secondary-small',
     m: 'secondary-large',
@@ -54,8 +56,8 @@ const VIEW_TEXT = {
     128: 'secondary-large',
     144: 'secondary-large',
 };
-const TYPOGRAPHY_COLOR = ['primary', 'secondary', 'tertiary', 'positive', 'negative'];
-const SIZE_TO_CLASSNAME_MAP = {
+var TYPOGRAPHY_COLOR = ['primary', 'secondary', 'tertiary', 'positive', 'negative'];
+var SIZE_TO_CLASSNAME_MAP = {
     xs: 'size-24',
     s: 'size-48',
     m: 'size-64',
@@ -70,4 +72,9 @@ const SIZE_TO_CLASSNAME_MAP = {
     144: 'size-144',
 };
 
-export { SIZES, SIZE_TO_CLASSNAME_MAP, STROKE, TYPOGRAPHY_COLOR, VIEW_TEXT, VIEW_TITLE };
+exports.SIZES = SIZES;
+exports.SIZE_TO_CLASSNAME_MAP = SIZE_TO_CLASSNAME_MAP;
+exports.STROKE = STROKE;
+exports.TYPOGRAPHY_COLOR = TYPOGRAPHY_COLOR;
+exports.VIEW_TEXT = VIEW_TEXT;
+exports.VIEW_TITLE = VIEW_TITLE;

package/circular-progress-bar/cssm/index.js

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

package/code-input/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 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/cssm/Component.responsive.js

@@ -1,20 +1,22 @@
-import React, { forwardRef } from 'react';
-import { useMatchMedia } from '../../mq/cssm';
-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';
-import './components/input/index.module.css';
-import './components/base-code-input/index.module.css';
-import './desktop/desktop.module.css';
-import './mobile/mobile.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const CodeInput = forwardRef(({ breakpoint = 1024, ...restProps }, ref) => {
-    const query = `(min-width: ${breakpoint}px)`;
-    const [isDesktop] = useMatchMedia(query);
-    const Component = isDesktop ? CodeInputDesktop : CodeInputMobile;
-    return React.createElement(Component, { ref: ref, ...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 CodeInput = React.forwardRef(function (_a, ref) {
+    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;
+    return React__default.default.createElement(Component, tslib.__assign({ ref: ref }, restProps));
 });
 
-export { CodeInput };
+exports.CodeInput = CodeInput;

package/code-input/cssm/components/base-code-input/component.js

@@ -1,43 +1,56 @@
-import React, { forwardRef, useMemo, createRef, useState, useRef, useImperativeHandle, useEffect } from 'react';
-import cn from 'classnames';
-import { Input } from '../input/component.js';
-import styles from './index.module.css';
-import '../input/index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var cn = require('classnames');
+var components_input_component = require('../input/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);
 
 /** После истечения этого времени код очищается */
-const CODE_ERROR_HINT_VISIBLE_DURATION = 1300;
-const BaseCodeInput = forwardRef(({ className, disabled, error, fields = 4, initialValues = '', dataTestId, clearCodeOnError = true, errorVisibleDuration = CODE_ERROR_HINT_VISIBLE_DURATION, onErrorAnimationEnd, onChange, onComplete, stylesInput = {}, }, ref) => {
-    const inputRefs = useMemo(() => Array(fields)
-        .fill({})
-        .map(() => createRef()), [fields]);
-    const [values, setValues] = useState(initialValues.split(''));
-    const clearErrorTimerId = useRef();
-    const focusOnInput = (inputRef) => {
+var CODE_ERROR_HINT_VISIBLE_DURATION = 1300;
+var BaseCodeInput = React.forwardRef(function (_a, ref) {
+    var _b;
+    var className = _a.className, disabled = _a.disabled, error = _a.error, _c = _a.fields, fields = _c === void 0 ? 4 : _c, _d = _a.initialValues, initialValues = _d === void 0 ? '' : _d, dataTestId = _a.dataTestId, _e = _a.clearCodeOnError, clearCodeOnError = _e === void 0 ? true : _e, _f = _a.errorVisibleDuration, errorVisibleDuration = _f === void 0 ? CODE_ERROR_HINT_VISIBLE_DURATION : _f, onErrorAnimationEnd = _a.onErrorAnimationEnd, onChange = _a.onChange, onComplete = _a.onComplete, _g = _a.stylesInput, stylesInput = _g === void 0 ? {} : _g;
+    var inputRefs = React.useMemo(function () {
+        return Array(fields)
+            .fill({})
+            .map(function () { return React.createRef(); });
+    }, [fields]);
+    var _h = React.useState(initialValues.split('')), values = _h[0], setValues = _h[1];
+    var clearErrorTimerId = React.useRef();
+    var focusOnInput = function (inputRef) {
         if (inputRef.current) {
             inputRef.current.focus();
         }
     };
-    const focus = (index = 0) => {
+    var focus = function (index) {
+        if (index === void 0) { index = 0; }
         focusOnInput(inputRefs[index]);
     };
-    const blur = () => {
-        const input = document.activeElement;
-        if (input?.tagName === 'INPUT') {
+    var blur = function () {
+        var input = document.activeElement;
+        if ((input === null || input === void 0 ? void 0 : input.tagName) === 'INPUT') {
             input.blur();
         }
     };
-    const unselect = () => {
-        const input = document.activeElement;
-        if (input?.tagName === 'INPUT') {
+    var unselect = function () {
+        var input = document.activeElement;
+        if ((input === null || input === void 0 ? void 0 : input.tagName) === 'INPUT') {
             input.setSelectionRange(0, 0);
         }
     };
-    const reset = () => {
+    var reset = function () {
         setValues([]);
     };
-    useImperativeHandle(ref, () => ({ focus, blur, reset, unselect }));
-    const triggerChange = (argumentValues) => {
-        const newValue = (argumentValues || values).join('');
+    React.useImperativeHandle(ref, function () { return ({ focus: focus, blur: blur, reset: reset, unselect: unselect }); });
+    var triggerChange = function (argumentValues) {
+        var newValue = (argumentValues || values).join('');
         if (onChange) {
             onChange(newValue);
         }
@@ -45,21 +58,21 @@ const BaseCodeInput = forwardRef(({ className, disabled, error, fields = 4, init
             onComplete(newValue);
         }
     };
-    const handleChange = (value, index, valid) => {
-        const newValue = value.replace(/\D/g, '');
+    var handleChange = function (value, index, valid) {
+        var newValue = value.replace(/\D/g, '');
         if (newValue === '' || !valid) {
             return;
         }
-        let nextRef;
-        const newValues = [...values];
+        var nextRef;
+        var newValues = tslib.__spreadArray([], values, true);
         if (newValue.length > 1) {
-            let nextIndex = newValue.length + index - 1;
+            var nextIndex = newValue.length + index - 1;
             if (nextIndex >= fields) {
                 nextIndex = fields - 1;
             }
             nextRef = inputRefs[nextIndex];
-            newValue.split('').forEach((item, i) => {
-                const cursor = index + i;
+            newValue.split('').forEach(function (item, i) {
+                var cursor = index + i;
                 if (cursor < fields) {
                     newValues[cursor] = item;
                 }
@@ -76,17 +89,19 @@ const BaseCodeInput = forwardRef(({ className, disabled, error, fields = 4, init
         }
         triggerChange(newValues);
     };
-    const handleChangeFromEvent = (event, { index }) => {
-        const { target: { value, validity: { valid }, }, } = event;
+    var handleChangeFromEvent = function (event, _a) {
+        var index = _a.index;
+        var _b = event.target, value = _b.value, valid = _b.validity.valid;
         handleChange(value, index, valid);
     };
-    const handleKeyDown = (event, { index }) => {
-        const prevIndex = index - 1;
-        const nextIndex = index + 1;
-        const prevRef = inputRefs[prevIndex];
-        const nextRef = inputRefs[nextIndex];
-        const curtRef = inputRefs[index];
-        const newValues = [...values];
+    var handleKeyDown = function (event, _a) {
+        var index = _a.index;
+        var prevIndex = index - 1;
+        var nextIndex = index + 1;
+        var prevRef = inputRefs[prevIndex];
+        var nextRef = inputRefs[nextIndex];
+        var curtRef = inputRefs[index];
+        var newValues = tslib.__spreadArray([], values, true);
         switch (event.key) {
             case 'Backspace':
                 event.preventDefault();
@@ -130,63 +145,64 @@ const BaseCodeInput = forwardRef(({ className, disabled, error, fields = 4, init
                 break;
         }
     };
-    const handleFocus = (event) => {
+    var handleFocus = function (event) {
         event.persist();
-        const target = event.target;
+        var target = event.target;
         /**
          * В сафари выделение корректно работает только с асинхронным вызовом
          */
-        requestAnimationFrame(() => {
-            target?.select();
+        requestAnimationFrame(function () {
+            target === null || target === void 0 ? void 0 : target.select();
         });
     };
-    const handleErrorAnimationEnd = () => {
-        clearErrorTimerId.current = setTimeout(() => {
+    var handleErrorAnimationEnd = function () {
+        clearErrorTimerId.current = setTimeout(function () {
             if (clearCodeOnError) {
                 focus();
                 /** Очищаем только в случае, если код не изменился */
-                setValues((prevState) => (values === prevState ? [] : prevState));
+                setValues(function (prevState) { return (values === prevState ? [] : prevState); });
             }
-            onErrorAnimationEnd?.();
+            onErrorAnimationEnd === null || onErrorAnimationEnd === void 0 ? void 0 : onErrorAnimationEnd();
         }, errorVisibleDuration);
     };
-    useEffect(() => () => {
+    React.useEffect(function () { return function () {
         if (clearErrorTimerId.current) {
             clearTimeout(clearErrorTimerId.current);
             clearErrorTimerId.current = undefined;
         }
-    }, [error]);
-    useEffect(() => {
-        let ac = null;
-        const unMountReason = 'component unMount';
-        if ('OTPCredential' in window && navigator?.credentials?.get) {
+    }; }, [error]);
+    React.useEffect(function () {
+        var _a;
+        var ac = null;
+        var unMountReason = 'component unMount';
+        if ('OTPCredential' in window && ((_a = navigator === null || navigator === void 0 ? void 0 : navigator.credentials) === null || _a === void 0 ? void 0 : _a.get)) {
             ac = new AbortController();
-            const options = {
+            var options = {
                 otp: { transport: ['sms'] },
                 signal: ac.signal,
             };
             navigator.credentials
                 .get(options)
-                .then((res) => {
-                if (res?.code)
+                .then(function (res) {
+                if (res === null || res === void 0 ? void 0 : res.code)
                     handleChange(res.code, 0, true);
             })
-                .catch((err) => {
+                .catch(function (err) {
                 if (err !== unMountReason) {
                     // eslint-disable-next-line no-console
                     console.error(err);
                 }
             });
         }
-        return () => {
+        return function () {
             if (ac)
                 ac.abort(unMountReason);
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    return (React.createElement("div", { className: cn(styles.component, className), "data-test-id": dataTestId, onAnimationEnd: handleErrorAnimationEnd },
-        React.createElement("div", { className: cn({ [styles.shake]: Boolean(error) }) }, new Array(fields).fill('').map((_, index) => (React.createElement(Input, { ref: inputRefs[index], key: index.toString(), index: index, value: values[index], disabled: disabled, error: !!error, onChange: handleChangeFromEvent, onFocus: handleFocus, onKeyDown: handleKeyDown, stylesInput: stylesInput, compact: fields > 6 })))),
-        error && (React.createElement("div", { className: styles.error, role: 'alert' }, error))));
+    return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, className), "data-test-id": dataTestId, onAnimationEnd: handleErrorAnimationEnd },
+        React__default.default.createElement("div", { className: cn__default.default((_b = {}, _b[styles__default.default.shake] = Boolean(error), _b)) }, new Array(fields).fill('').map(function (_, index) { return (React__default.default.createElement(components_input_component.Input, { ref: inputRefs[index], key: index.toString(), index: index, value: values[index], disabled: disabled, error: !!error, onChange: handleChangeFromEvent, onFocus: handleFocus, onKeyDown: handleKeyDown, stylesInput: stylesInput, compact: fields > 6 })); })),
+        error && (React__default.default.createElement("div", { className: styles__default.default.error, role: 'alert' }, error))));
 });
 
-export { BaseCodeInput };
+exports.BaseCodeInput = BaseCodeInput;

package/code-input/cssm/components/base-code-input/index.js

@@ -1,6 +1,7 @@
-export { BaseCodeInput } from './component.js';
-import 'react';
-import 'classnames';
-import '../input/component.js';
-import '../input/index.module.css';
-import './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_baseCodeInput_component = require('./component.js');
+
+
+
+exports.BaseCodeInput = components_baseCodeInput_component.BaseCodeInput;

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

@@ -1,4 +1,7 @@
-export { Input } from './input/component.js';
-import 'react';
-import 'classnames';
-import './input/index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_input_component = require('./input/component.js');
+
+
+
+exports.Input = components_input_component.Input;

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

@@ -1,30 +1,40 @@
-import React, { forwardRef } from 'react';
-import cn from 'classnames';
-import styles from './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const Input = forwardRef(({ index, error, disabled, value = '', compact = false, onChange, onKeyDown, onFocus, stylesInput = {}, }, ref) => {
-    const handleChange = (event) => {
-        onChange(event, { index });
+var React = require('react');
+var cn = require('classnames');
+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 Input = React.forwardRef(function (_a, ref) {
+    var _b;
+    var index = _a.index, error = _a.error, disabled = _a.disabled, _c = _a.value, value = _c === void 0 ? '' : _c, _d = _a.compact, compact = _d === void 0 ? false : _d, onChange = _a.onChange, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, _e = _a.stylesInput, stylesInput = _e === void 0 ? {} : _e;
+    var handleChange = function (event) {
+        onChange(event, { index: index });
     };
-    const handleKeyDown = (event) => {
-        onKeyDown(event, { index });
+    var handleKeyDown = function (event) {
+        onKeyDown(event, { index: index });
     };
-    const handleClick = (event) => {
+    var handleClick = function (event) {
         event.persist();
-        const target = event.target;
+        var target = event.target;
         /**
          * В сафари выделение корректно работает только с асинхронным вызовом
          */
-        requestAnimationFrame(() => {
-            target?.select();
+        requestAnimationFrame(function () {
+            target === null || target === void 0 ? void 0 : target.select();
         });
     };
-    return (React.createElement("input", { ref: ref, className: cn(styles.input, stylesInput.component, {
-            [styles.hasError]: error,
-            [styles.disabled]: disabled,
-            [styles.compact]: compact,
-            [stylesInput.compact]: Boolean(stylesInput.compact) && compact,
-        }), disabled: disabled, value: value, autoComplete: index === 0 ? 'one-time-code' : '', inputMode: 'numeric', pattern: '[0-9]*', onChange: handleChange, onKeyDown: handleKeyDown, onFocus: onFocus, onClick: handleClick }));
+    return (React__default.default.createElement("input", { ref: ref, className: cn__default.default(styles__default.default.input, stylesInput.component, (_b = {},
+            _b[styles__default.default.hasError] = error,
+            _b[styles__default.default.disabled] = disabled,
+            _b[styles__default.default.compact] = compact,
+            _b[stylesInput.compact] = Boolean(stylesInput.compact) && compact,
+            _b)), disabled: disabled, value: value, autoComplete: index === 0 ? 'one-time-code' : '', inputMode: 'numeric', pattern: '[0-9]*', onChange: handleChange, onKeyDown: handleKeyDown, onFocus: onFocus, onClick: handleClick }));
 });
 
-export { Input };
+exports.Input = Input;

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

@@ -1,4 +1,7 @@
-export { Input } from './component.js';
-import 'react';
-import 'classnames';
-import './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_input_component = require('./component.js');
+
+
+
+exports.Input = components_input_component.Input;