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

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

@@ -1,84 +1,79 @@
-Object.defineProperty(exports, '__esModule', { value: true });
+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';
 
-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 styles = {"component":"component","bg-positive":"bg-positive","bg-negative":"bg-negative","svg":"svg","title":"title","subtitle":"subtitle","labelWrapper":"labelWrapper","label":"label","typography":"typography","size-144":"size-144","size-128":"size-128","size-80":"size-80","size-64":"size-64","size-48":"size-48","size-24":"size-24","backgroundCircle":"backgroundCircle","progressCircle":"progressCircle","positive":"positive","negative":"negative","stroke":"stroke","iconWrapper":"iconWrapper","icon-tertiary":"icon-tertiary","icon-positive":"icon-positive","icon-negative":"icon-negative","icon-primary-inverted":"icon-primary-inverted","icon-primary":"icon-primary","icon-secondary":"icon-secondary","icon":"icon"};
+require('./index.css');
 
 /**
  * Компонент круглого прогресс бара.
  */
-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);
+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);
         return {
-            widthSVG: widthSVG,
-            heightSVG: heightSVG,
-            center: center,
-            radius: radius,
-            strokeDasharray: strokeDasharray,
-            strokeDashoffset: strokeDashoffset,
+            widthSVG,
+            heightSVG,
+            center,
+            radius,
+            strokeDasharray,
+            strokeDashoffset,
         };
     }, [value, size]);
-    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)
+    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)
         ? contentColor
         : undefined;
-    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'
+    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'
                     ? -memorized.strokeDashoffset
-                    : 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())));
+                    : memorized.strokeDashoffset, transform: `rotate(${-90} ${memorized.center} ${memorized.center})` })),
+        React.createElement("div", { className: cn(styles.labelWrapper, {
+                [styles.label]: Icon || IconComplete,
+            }) }, children || renderContent())));
 };
 
-exports.CircularProgressBar = CircularProgressBar;
+export { CircularProgressBar };

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

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

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

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

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

@@ -1,21 +1,16 @@
-Object.defineProperty(exports, '__esModule', { value: true });
+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';
 
-var tslib = require('tslib');
-var React = require('react');
-var coreComponentsMq = require('../../mq/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 ? 1024 : _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));
+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 });
 });
 
-exports.CodeInput = CodeInput;
+export { CodeInput };

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

@@ -1,56 +1,44 @@
-Object.defineProperty(exports, '__esModule', { value: true });
+import React, { forwardRef, useMemo, createRef, useState, useRef, useImperativeHandle, useEffect } from 'react';
+import cn from 'classnames';
+import { Input } from '../input/component.js';
 
-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 styles = {"component":"component","error":"error","shake":"shake"};
+require('./index.css');
 
 /** После истечения этого времени код очищается */
-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) {
+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) => {
         if (inputRef.current) {
             inputRef.current.focus();
         }
     };
-    var focus = function (index) {
-        if (index === void 0) { index = 0; }
+    const focus = (index = 0) => {
         focusOnInput(inputRefs[index]);
     };
-    var blur = function () {
-        var input = document.activeElement;
-        if ((input === null || input === void 0 ? void 0 : input.tagName) === 'INPUT') {
+    const blur = () => {
+        const input = document.activeElement;
+        if (input?.tagName === 'INPUT') {
             input.blur();
         }
     };
-    var unselect = function () {
-        var input = document.activeElement;
-        if ((input === null || input === void 0 ? void 0 : input.tagName) === 'INPUT') {
+    const unselect = () => {
+        const input = document.activeElement;
+        if (input?.tagName === 'INPUT') {
             input.setSelectionRange(0, 0);
         }
     };
-    var reset = function () {
+    const reset = () => {
         setValues([]);
     };
-    React.useImperativeHandle(ref, function () { return ({ focus: focus, blur: blur, reset: reset, unselect: unselect }); });
-    var triggerChange = function (argumentValues) {
-        var newValue = (argumentValues || values).join('');
+    useImperativeHandle(ref, () => ({ focus, blur, reset, unselect }));
+    const triggerChange = (argumentValues) => {
+        const newValue = (argumentValues || values).join('');
         if (onChange) {
             onChange(newValue);
         }
@@ -58,21 +46,21 @@ var BaseCodeInput = React.forwardRef(function (_a, ref) {
             onComplete(newValue);
         }
     };
-    var handleChange = function (value, index, valid) {
-        var newValue = value.replace(/\D/g, '');
+    const handleChange = (value, index, valid) => {
+        const newValue = value.replace(/\D/g, '');
         if (newValue === '' || !valid) {
             return;
         }
-        var nextRef;
-        var newValues = tslib.__spreadArray([], values, true);
+        let nextRef;
+        const newValues = [...values];
         if (newValue.length > 1) {
-            var nextIndex = newValue.length + index - 1;
+            let nextIndex = newValue.length + index - 1;
             if (nextIndex >= fields) {
                 nextIndex = fields - 1;
             }
             nextRef = inputRefs[nextIndex];
-            newValue.split('').forEach(function (item, i) {
-                var cursor = index + i;
+            newValue.split('').forEach((item, i) => {
+                const cursor = index + i;
                 if (cursor < fields) {
                     newValues[cursor] = item;
                 }
@@ -89,19 +77,17 @@ var BaseCodeInput = React.forwardRef(function (_a, ref) {
         }
         triggerChange(newValues);
     };
-    var handleChangeFromEvent = function (event, _a) {
-        var index = _a.index;
-        var _b = event.target, value = _b.value, valid = _b.validity.valid;
+    const handleChangeFromEvent = (event, { index }) => {
+        const { target: { value, validity: { valid }, }, } = event;
         handleChange(value, index, valid);
     };
-    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);
+    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];
         switch (event.key) {
             case 'Backspace':
                 event.preventDefault();
@@ -145,64 +131,63 @@ var BaseCodeInput = React.forwardRef(function (_a, ref) {
                 break;
         }
     };
-    var handleFocus = function (event) {
+    const handleFocus = (event) => {
         event.persist();
-        var target = event.target;
+        const target = event.target;
         /**
          * В сафари выделение корректно работает только с асинхронным вызовом
          */
-        requestAnimationFrame(function () {
-            target === null || target === void 0 ? void 0 : target.select();
+        requestAnimationFrame(() => {
+            target?.select();
         });
     };
-    var handleErrorAnimationEnd = function () {
-        clearErrorTimerId.current = setTimeout(function () {
+    const handleErrorAnimationEnd = () => {
+        clearErrorTimerId.current = setTimeout(() => {
             if (clearCodeOnError) {
                 focus();
                 /** Очищаем только в случае, если код не изменился */
-                setValues(function (prevState) { return (values === prevState ? [] : prevState); });
+                setValues((prevState) => (values === prevState ? [] : prevState));
             }
-            onErrorAnimationEnd === null || onErrorAnimationEnd === void 0 ? void 0 : onErrorAnimationEnd();
+            onErrorAnimationEnd?.();
         }, errorVisibleDuration);
     };
-    React.useEffect(function () { return function () {
+    useEffect(() => () => {
         if (clearErrorTimerId.current) {
             clearTimeout(clearErrorTimerId.current);
             clearErrorTimerId.current = undefined;
         }
-    }; }, [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)) {
+    }, [error]);
+    useEffect(() => {
+        let ac = null;
+        const unMountReason = 'component unMount';
+        if ('OTPCredential' in window && navigator?.credentials?.get) {
             ac = new AbortController();
-            var options = {
+            const options = {
                 otp: { transport: ['sms'] },
                 signal: ac.signal,
             };
             navigator.credentials
                 .get(options)
-                .then(function (res) {
-                if (res === null || res === void 0 ? void 0 : res.code)
+                .then((res) => {
+                if (res?.code)
                     handleChange(res.code, 0, true);
             })
-                .catch(function (err) {
+                .catch((err) => {
                 if (err !== unMountReason) {
                     // eslint-disable-next-line no-console
                     console.error(err);
                 }
             });
         }
-        return function () {
+        return () => {
             if (ac)
                 ac.abort(unMountReason);
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    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))));
+    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))));
 });
 
-exports.BaseCodeInput = BaseCodeInput;
+export { BaseCodeInput };

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

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

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

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

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

@@ -1,40 +1,32 @@
-Object.defineProperty(exports, '__esModule', { value: true });
+import React, { forwardRef } from 'react';
+import cn from 'classnames';
 
-var React = require('react');
-var cn = require('classnames');
-var styles = require('./index.module.css');
+const styles = {"component":"component","input":"input","hasError":"hasError","disabled":"disabled","compact":"compact"};
+require('./index.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 Input = forwardRef(({ index, error, disabled, value = '', compact = false, onChange, onKeyDown, onFocus, stylesInput = {}, }, ref) => {
+    const handleChange = (event) => {
+        onChange(event, { index });
     };
-    var handleKeyDown = function (event) {
-        onKeyDown(event, { index: index });
+    const handleKeyDown = (event) => {
+        onKeyDown(event, { index });
     };
-    var handleClick = function (event) {
+    const handleClick = (event) => {
         event.persist();
-        var target = event.target;
+        const target = event.target;
         /**
          * В сафари выделение корректно работает только с асинхронным вызовом
          */
-        requestAnimationFrame(function () {
-            target === null || target === void 0 ? void 0 : target.select();
+        requestAnimationFrame(() => {
+            target?.select();
         });
     };
-    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 }));
+    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 }));
 });
 
-exports.Input = Input;
+export { Input };

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

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

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

@@ -1,15 +1,11 @@
-Object.defineProperty(exports, '__esModule', { value: true });
+import React, { forwardRef } from 'react';
+import { BaseCodeInput } from '../components/base-code-input/component.js';
+import 'classnames';
+import '../components/input/component.js';
 
-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');
+const styles = {"component":"component"};
+require('./desktop.css');
 
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+const CodeInputDesktop = forwardRef((restProps, ref) => React.createElement(BaseCodeInput, { ...restProps, ref: ref, stylesInput: styles }));
 
-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;
+export { CodeInputDesktop };