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

package/pass-code/cssm/Component.js

@@ -1,40 +1,41 @@
-import React, { forwardRef } from 'react';
-import cn from 'classnames';
-import { Gap } from '../../gap/cssm';
-import { getDataTestId } from '../../shared/cssm';
-import { InputProgress } from './components/InputProgress/Component.js';
-import { KeyPad } from './components/KeyPad/Component.js';
-import styles from './index.module.css';
-import 'react-transition-group';
-import './components/InputProgress/index.module.css';
-import './components/InputProgress/transitions.module.css';
-import '@alfalab/icons-glyph/BackspaceXxlIcon';
-import './components/KeyPadButton/Component.js';
-import '../../button/cssm/mobile';
-import './components/KeyPadButton/index.module.css';
-import './components/KeyPad/index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const PassCode = forwardRef(({ value = '', dataTestId, className, leftAddons, rightAddons, error, message, onChange, maxCodeLength = 10, codeLength, }, ref) => {
-    const passwordLen = codeLength || maxCodeLength;
-    const handleChange = (digit) => {
-        const newValue = value.concat(digit.toString());
+var React = require('react');
+var cn = require('classnames');
+var coreComponentsGap = require('../../gap/cssm');
+var coreComponentsShared = require('../../shared/cssm');
+var components_InputProgress_Component = require('./components/InputProgress/Component.js');
+var components_KeyPad_Component = require('./components/KeyPad/Component.js');
+var styles = require('./index.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var PassCode = React.forwardRef(function (_a, ref) {
+    var _b = _a.value, value = _b === void 0 ? '' : _b, dataTestId = _a.dataTestId, className = _a.className, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, error = _a.error, message = _a.message, onChange = _a.onChange, _c = _a.maxCodeLength, maxCodeLength = _c === void 0 ? 10 : _c, codeLength = _a.codeLength;
+    var passwordLen = codeLength || maxCodeLength;
+    var handleChange = function (digit) {
+        var newValue = value.concat(digit.toString());
         if (newValue.length <= passwordLen) {
-            onChange?.(newValue);
+            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
         }
     };
-    const handleClear = () => {
+    var handleClear = function () {
         if (value.length > 0) {
-            onChange?.(value?.slice(0, -1));
+            onChange === null || onChange === void 0 ? void 0 : onChange(value === null || value === void 0 ? void 0 : value.slice(0, -1));
         }
     };
-    const renderError = () => (React.createElement("div", { className: cn(styles.message, styles.error), "data-test-id": getDataTestId(dataTestId, 'error') }, error));
-    const renderMessage = () => (React.createElement("div", { className: styles.message, "data-test-id": getDataTestId(dataTestId, 'message') }, message));
-    return (React.createElement("div", { className: cn(styles.component, className), ref: ref, "data-test-id": getDataTestId(dataTestId, 'wrapper') },
+    var renderError = function () { return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.message, styles__default.default.error), "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'error') }, error)); };
+    var renderMessage = function () { return (React__default.default.createElement("div", { className: styles__default.default.message, "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'message') }, message)); };
+    return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, className), ref: ref, "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'wrapper') },
         error ? renderError() : renderMessage(),
-        React.createElement(Gap, { size: 'm' }),
-        React.createElement(InputProgress, { dataTestId: dataTestId, value: value, maxCodeLength: maxCodeLength, codeLength: codeLength, error: Boolean(error) }),
-        React.createElement(Gap, { size: '4xl' }),
-        React.createElement(KeyPad, { dataTestId: dataTestId, leftAddons: leftAddons, rightAddons: rightAddons, onClick: handleChange, onClear: handleClear, showClear: Boolean(value) })));
+        React__default.default.createElement(coreComponentsGap.Gap, { size: 'm' }),
+        React__default.default.createElement(components_InputProgress_Component.InputProgress, { dataTestId: dataTestId, value: value, maxCodeLength: maxCodeLength, codeLength: codeLength, error: Boolean(error) }),
+        React__default.default.createElement(coreComponentsGap.Gap, { size: '4xl' }),
+        React__default.default.createElement(components_KeyPad_Component.KeyPad, { dataTestId: dataTestId, leftAddons: leftAddons, rightAddons: rightAddons, onClick: handleChange, onClear: handleClear, showClear: Boolean(value) })));
 });
 
-export { PassCode };
+exports.PassCode = PassCode;

package/pass-code/cssm/components/InputProgress/Component.js

@@ -1,21 +1,38 @@
-import React from 'react';
-import { CSSTransition } from 'react-transition-group';
-import cn from 'classnames';
-import { getDataTestId } from '../../../../shared/cssm';
-import styles from './index.module.css';
-import transitions from './transitions.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var reactTransitionGroup = require('react-transition-group');
+var cn = require('classnames');
+var coreComponentsShared = require('../../../../shared/cssm');
+var styles = require('./index.module.css');
+var transitions = require('./transitions.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 transitions__default = /*#__PURE__*/_interopDefaultCompat(transitions);
 
 /* eslint-disable react/no-array-index-key */
-const TRANSITION_DURATION = 150;
-const InputProgress = ({ value = '', maxCodeLength, codeLength, error, dataTestId, }) => (React.createElement("div", { className: cn(styles.component, { [transitions.shake]: error }), "data-test-id": getDataTestId(dataTestId, 'input-progress') }, codeLength
-    ? new Array(codeLength).fill(null).map((_, i) => {
-        const filled = Boolean(value[i]);
-        return (React.createElement("div", { key: i, className: cn(styles.dot, {
-                [styles.error]: filled && error,
-                [styles.filled]: filled,
-            }) }));
-    })
-    : new Array(maxCodeLength).fill(null).map((_, i) => (React.createElement(CSSTransition, { key: i, in: Boolean(value[i]), timeout: TRANSITION_DURATION, classNames: transitions, unmountOnExit: true },
-        React.createElement("div", { className: cn(styles.dot, styles.filled, { [styles.error]: error }) }))))));
+var TRANSITION_DURATION = 150;
+var InputProgress = function (_a) {
+    var _b;
+    var _c = _a.value, value = _c === void 0 ? '' : _c, maxCodeLength = _a.maxCodeLength, codeLength = _a.codeLength, error = _a.error, dataTestId = _a.dataTestId;
+    return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, (_b = {}, _b[transitions__default.default.shake] = error, _b)), "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'input-progress') }, codeLength
+        ? new Array(codeLength).fill(null).map(function (_, i) {
+            var _a;
+            var filled = Boolean(value[i]);
+            return (React__default.default.createElement("div", { key: i, className: cn__default.default(styles__default.default.dot, (_a = {},
+                    _a[styles__default.default.error] = filled && error,
+                    _a[styles__default.default.filled] = filled,
+                    _a)) }));
+        })
+        : new Array(maxCodeLength).fill(null).map(function (_, i) {
+            var _a;
+            return (React__default.default.createElement(reactTransitionGroup.CSSTransition, { key: i, in: Boolean(value[i]), timeout: TRANSITION_DURATION, classNames: transitions__default.default, unmountOnExit: true },
+                React__default.default.createElement("div", { className: cn__default.default(styles__default.default.dot, styles__default.default.filled, (_a = {}, _a[styles__default.default.error] = error, _a)) })));
+        })));
+};
 
-export { InputProgress };
+exports.InputProgress = InputProgress;

package/pass-code/cssm/components/InputProgress/index.js

@@ -1,7 +1,7 @@
-export { InputProgress } from './Component.js';
-import 'react';
-import 'react-transition-group';
-import 'classnames';
-import '../../../../shared/cssm';
-import './index.module.css';
-import './transitions.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_InputProgress_Component = require('./Component.js');
+
+
+
+exports.InputProgress = components_InputProgress_Component.InputProgress;

package/pass-code/cssm/components/KeyPad/Component.js

@@ -1,34 +1,41 @@
-import React from 'react';
-import { getDataTestId } from '../../../../shared/cssm';
-import { BackspaceXxlIcon } from '@alfalab/icons-glyph/BackspaceXxlIcon';
-import { KeyPadButton } from '../KeyPadButton/Component.js';
-import styles from './index.module.css';
-import 'classnames';
-import '../../../../button/cssm/mobile';
-import '../KeyPadButton/index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const CELL_COUNT = 12;
-const CELLS = new Array(CELL_COUNT).fill(null).map((_, i) => {
+var React = require('react');
+var coreComponentsShared = require('../../../../shared/cssm');
+var BackspaceXxlIcon = require('@alfalab/icons-glyph/BackspaceXxlIcon');
+var components_KeyPadButton_Component = require('../KeyPadButton/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 styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var CELL_COUNT = 12;
+var CELLS = new Array(CELL_COUNT).fill(null).map(function (_, i) {
     if (i === 10)
         return 0;
     return i + 1;
 });
-const KeyPad = ({ leftAddons, rightAddons, onClick, onClear, showClear, dataTestId, }) => (React.createElement("div", { className: styles.component, "data-test-id": getDataTestId(dataTestId, 'keypad') }, CELLS.map((digit, i) => {
-    if (i === 9) {
-        if (leftAddons)
-            return leftAddons;
-        return React.createElement("div", { key: 'left-addons-empty' });
-    }
-    if (i === 11) {
-        if (showClear) {
-            return (React.createElement(KeyPadButton, { key: 'clear-btn', onClick: onClear, view: 'text', dataTestId: getDataTestId(dataTestId, 'backspace-button') },
-                React.createElement(BackspaceXxlIcon, null)));
+var KeyPad = function (_a) {
+    var leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, onClick = _a.onClick, onClear = _a.onClear, showClear = _a.showClear, dataTestId = _a.dataTestId;
+    return (React__default.default.createElement("div", { className: styles__default.default.component, "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'keypad') }, CELLS.map(function (digit, i) {
+        if (i === 9) {
+            if (leftAddons)
+                return leftAddons;
+            return React__default.default.createElement("div", { key: 'left-addons-empty' });
+        }
+        if (i === 11) {
+            if (showClear) {
+                return (React__default.default.createElement(components_KeyPadButton_Component.KeyPadButton, { key: 'clear-btn', onClick: onClear, view: 'text', dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'backspace-button') },
+                    React__default.default.createElement(BackspaceXxlIcon.BackspaceXxlIcon, null)));
+            }
+            if (rightAddons)
+                return rightAddons;
+            return React__default.default.createElement("div", { key: 'right-addon-empty' });
         }
-        if (rightAddons)
-            return rightAddons;
-        return React.createElement("div", { key: 'right-addon-empty' });
-    }
-    return (React.createElement(KeyPadButton, { key: digit, onClick: onClick, view: 'secondary', buttonClassName: styles.digit, dataTestId: getDataTestId(dataTestId, 'keypad-button') }, digit));
-})));
+        return (React__default.default.createElement(components_KeyPadButton_Component.KeyPadButton, { key: digit, onClick: onClick, view: 'secondary', buttonClassName: styles__default.default.digit, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'keypad-button') }, digit));
+    })));
+};
 
-export { KeyPad };
+exports.KeyPad = KeyPad;

package/pass-code/cssm/components/KeyPad/index.js

@@ -1,9 +1,7 @@
-export { KeyPad } from './Component.js';
-import 'react';
-import '../../../../shared/cssm';
-import '@alfalab/icons-glyph/BackspaceXxlIcon';
-import '../KeyPadButton/Component.js';
-import 'classnames';
-import '../../../../button/cssm/mobile';
-import '../KeyPadButton/index.module.css';
-import './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_KeyPad_Component = require('./Component.js');
+
+
+
+exports.KeyPad = components_KeyPad_Component.KeyPad;

package/pass-code/cssm/components/KeyPadButton/Component.js

@@ -1,11 +1,20 @@
-import React from 'react';
-import cn from 'classnames';
-import { ButtonMobile } from '../../../../button/cssm/mobile';
-import styles from './index.module.css';
-
-function KeyPadButton({ children, onClick, className, view = 'secondary', buttonClassName, dataTestId, }) {
-    return (React.createElement("div", { className: cn(styles.component, className) },
-        React.createElement(ButtonMobile, { className: cn(styles.button, styles[view], buttonClassName), view: view, onClick: () => onClick?.(children), dataTestId: dataTestId }, children)));
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+var mobile = require('../../../../button/cssm/mobile');
+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);
+
+function KeyPadButton(_a) {
+    var children = _a.children, onClick = _a.onClick, className = _a.className, _b = _a.view, view = _b === void 0 ? 'secondary' : _b, buttonClassName = _a.buttonClassName, dataTestId = _a.dataTestId;
+    return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, className) },
+        React__default.default.createElement(mobile.ButtonMobile, { className: cn__default.default(styles__default.default.button, styles__default.default[view], buttonClassName), view: view, onClick: function () { return onClick === null || onClick === void 0 ? void 0 : onClick(children); }, dataTestId: dataTestId }, children)));
 }
 
-export { KeyPadButton };
+exports.KeyPadButton = KeyPadButton;

package/pass-code/cssm/components/KeyPadButton/index.js

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

package/pass-code/cssm/index.js

@@ -1,16 +1,9 @@
-export { PassCode } from './Component.js';
-export { KeyPadButton } from './components/KeyPadButton/Component.js';
-import 'react';
-import 'classnames';
-import '../../gap/cssm';
-import '../../shared/cssm';
-import './components/InputProgress/Component.js';
-import 'react-transition-group';
-import './components/InputProgress/index.module.css';
-import './components/InputProgress/transitions.module.css';
-import './components/KeyPad/Component.js';
-import '@alfalab/icons-glyph/BackspaceXxlIcon';
-import './components/KeyPad/index.module.css';
-import './index.module.css';
-import '../../button/cssm/mobile';
-import './components/KeyPadButton/index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component = require('./Component.js');
+var components_KeyPadButton_Component = require('./components/KeyPadButton/Component.js');
+
+
+
+exports.PassCode = Component.PassCode;
+exports.KeyPadButton = components_KeyPadButton_Component.KeyPadButton;

package/pass-code/cssm/shared/index.js

@@ -1,2 +1,7 @@
-export { getPassCodeTestIds } from '../utils.js';
-import '../../../shared/cssm';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utils = require('../utils.js');
+
+
+
+exports.getPassCodeTestIds = utils.getPassCodeTestIds;

package/pass-code/cssm/utils.js

@@ -1,15 +1,17 @@
-import { getDataTestId } from '../../shared/cssm';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var coreComponentsShared = require('../../shared/cssm');
 
 function getPassCodeTestIds(dataTestId) {
     return {
-        passCode: getDataTestId(dataTestId, 'wrapper'),
-        inputProgress: getDataTestId(dataTestId, 'input-progress'),
-        keypad: getDataTestId(dataTestId, 'keypad'),
-        keypadButton: getDataTestId(dataTestId, 'keypad-button'),
-        backspaceButton: getDataTestId(dataTestId, 'backspace-button'),
-        error: getDataTestId(dataTestId, 'error'),
-        message: getDataTestId(dataTestId, 'message'),
+        passCode: coreComponentsShared.getDataTestId(dataTestId, 'wrapper'),
+        inputProgress: coreComponentsShared.getDataTestId(dataTestId, 'input-progress'),
+        keypad: coreComponentsShared.getDataTestId(dataTestId, 'keypad'),
+        keypadButton: coreComponentsShared.getDataTestId(dataTestId, 'keypad-button'),
+        backspaceButton: coreComponentsShared.getDataTestId(dataTestId, 'backspace-button'),
+        error: coreComponentsShared.getDataTestId(dataTestId, 'error'),
+        message: coreComponentsShared.getDataTestId(dataTestId, 'message'),
     };
 }
 
-export { getPassCodeTestIds };
+exports.getPassCodeTestIds = getPassCodeTestIds;

package/password-input/cssm/component.js

@@ -1,12 +1,21 @@
-import React, { forwardRef, useState, useCallback } from 'react';
-import cn from 'classnames';
-import { IconButton } from '../../icon-button/cssm';
-import { Input } from '../../input/cssm';
-import { EyeMIcon } from '@alfalab/icons-glyph/EyeMIcon';
-import { EyeOffMIcon } from '@alfalab/icons-glyph/EyeOffMIcon';
-import styles from './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const SIZE_TO_CLASSNAME_MAP = {
+var tslib = require('tslib');
+var React = require('react');
+var cn = require('classnames');
+var coreComponentsIconButton = require('../../icon-button/cssm');
+var coreComponentsInput = require('../../input/cssm');
+var EyeMIcon = require('@alfalab/icons-glyph/EyeMIcon');
+var EyeOffMIcon = require('@alfalab/icons-glyph/EyeOffMIcon');
+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 SIZE_TO_CLASSNAME_MAP = {
     s: 'size-48',
     m: 'size-56',
     l: 'size-64',
@@ -16,21 +25,22 @@ const SIZE_TO_CLASSNAME_MAP = {
     64: 'size-64',
     72: 'size-72',
 };
-const PasswordInput = forwardRef(({ onPasswordVisibleChange, passwordVisible, disabled, colors, rightAddons, size = 48, className, ...restProps }, ref) => {
-    const uncontrolled = passwordVisible === undefined;
-    const [statePasswordVisible, setStatePasswordVisible] = useState(uncontrolled ? false : passwordVisible);
-    const handleButtonClick = useCallback(() => {
+var PasswordInput = React.forwardRef(function (_a, ref) {
+    var onPasswordVisibleChange = _a.onPasswordVisibleChange, passwordVisible = _a.passwordVisible, disabled = _a.disabled, colors = _a.colors, rightAddons = _a.rightAddons, _b = _a.size, size = _b === void 0 ? 48 : _b, className = _a.className, restProps = tslib.__rest(_a, ["onPasswordVisibleChange", "passwordVisible", "disabled", "colors", "rightAddons", "size", "className"]);
+    var uncontrolled = passwordVisible === undefined;
+    var _c = React.useState(uncontrolled ? false : passwordVisible), statePasswordVisible = _c[0], setStatePasswordVisible = _c[1];
+    var handleButtonClick = React.useCallback(function () {
         if (onPasswordVisibleChange) {
             onPasswordVisibleChange(!passwordVisible);
         }
         if (uncontrolled) {
-            setStatePasswordVisible((visible) => !visible);
+            setStatePasswordVisible(function (visible) { return !visible; });
         }
     }, [passwordVisible, uncontrolled, onPasswordVisibleChange]);
-    const isPasswordVisible = uncontrolled ? statePasswordVisible : passwordVisible;
-    return (React.createElement(Input, { ...restProps, disabled: disabled, type: isPasswordVisible ? 'text' : 'password', size: size, ref: ref, colors: colors, className: cn(className, styles[SIZE_TO_CLASSNAME_MAP[size]]), rightAddons: React.createElement(React.Fragment, null,
+    var isPasswordVisible = uncontrolled ? statePasswordVisible : passwordVisible;
+    return (React__default.default.createElement(coreComponentsInput.Input, tslib.__assign({}, restProps, { disabled: disabled, type: isPasswordVisible ? 'text' : 'password', size: size, ref: ref, colors: colors, className: cn__default.default(className, styles__default.default[SIZE_TO_CLASSNAME_MAP[size]]), rightAddons: React__default.default.createElement(React__default.default.Fragment, null,
             rightAddons,
-            React.createElement(IconButton, { className: styles.eye, colors: colors, view: 'secondary', size: 's', icon: isPasswordVisible ? EyeMIcon : EyeOffMIcon, onClick: handleButtonClick, disabled: disabled })), addonsClassName: styles.addons, inputClassName: styles.input }));
+            React__default.default.createElement(coreComponentsIconButton.IconButton, { className: styles__default.default.eye, colors: colors, view: 'secondary', size: 's', icon: isPasswordVisible ? EyeMIcon.EyeMIcon : EyeOffMIcon.EyeOffMIcon, onClick: handleButtonClick, disabled: disabled })), addonsClassName: styles__default.default.addons, inputClassName: styles__default.default.input })));
 });
 
-export { PasswordInput };
+exports.PasswordInput = PasswordInput;

package/password-input/cssm/index.js

@@ -1,8 +1,7 @@
-export { PasswordInput } from './component.js';
-import 'react';
-import 'classnames';
-import '../../icon-button/cssm';
-import '../../input/cssm';
-import '@alfalab/icons-glyph/EyeMIcon';
-import '@alfalab/icons-glyph/EyeOffMIcon';
-import './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var component = require('./component.js');
+
+
+
+exports.PasswordInput = component.PasswordInput;

package/pattern-lock/cssm/Component.responsive.js

@@ -1,23 +1,21 @@
-import React, { forwardRef } from 'react';
-import { useMatchMedia } from '../../mq/cssm';
-import { PatternLockDesktop } from './desktop/Component.desktop.js';
-import { PatternLockMobile } from './mobile/Component.mobile.js';
-import './components/base-pattern-lock/Component.js';
-import 'react-canvas-pattern-lock';
-import 'classnames';
-import '../../button/cssm/mobile';
-import '../../shared/cssm';
-import './consts.js';
-import './utils.js';
-import './components/base-pattern-lock/index.module.css';
-import './desktop/desktop.module.css';
-import './mobile/mobile.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const PatternLock = forwardRef(({ breakpoint = 1024, ...restProps }, ref) => {
-    const query = `(min-width: ${breakpoint}px)`;
-    const [isDesktop] = useMatchMedia(query);
-    const Component = isDesktop ? PatternLockDesktop : PatternLockMobile;
-    return React.createElement(Component, { ref: ref, ...restProps });
+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 PatternLock = 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.PatternLockDesktop : mobile_Component_mobile.PatternLockMobile;
+    return React__default.default.createElement(Component, tslib.__assign({ ref: ref }, restProps));
 });
 
-export { PatternLock };
+exports.PatternLock = PatternLock;

package/pattern-lock/cssm/components/base-pattern-lock/Component.js

@@ -1,52 +1,65 @@
-import React, { forwardRef, useState, useEffect } from 'react';
-import { ReactCanvasPatternLock } from 'react-canvas-pattern-lock';
-import cn from 'classnames';
-import { ButtonMobile } from '../../../../button/cssm/mobile';
-import { getDataTestId } from '../../../../shared/cssm';
-import { THEME_STATE, DEFAULT_EXTRA_BOUNDS, OBSERVE_OPTIONS, OBSERVABLE_TOKENS } from '../../consts.js';
-import { getSizes, getTheme, getColorByToken, getDefaultObserveTarget } from '../../utils.js';
-import commonStyles from './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const BasePatternLock = forwardRef(({ observeTokens = false, observerParams = {}, justifyNodes = 'space-between', className, error, dataTestId, forgotCodeBtnText = 'Забыли код?', showForgotCodeBtn = false, onForgotBtnClick, extraBounds = DEFAULT_EXTRA_BOUNDS, message, messageClassName, hover, styles = {}, ...restProps }, ref) => {
-    const [params, setParams] = useState();
-    useEffect(() => {
-        const { elementSizes, width, height } = getSizes();
+var tslib = require('tslib');
+var React = require('react');
+var reactCanvasPatternLock = require('react-canvas-pattern-lock');
+var cn = require('classnames');
+var mobile = require('../../../../button/cssm/mobile');
+var coreComponentsShared = require('../../../../shared/cssm');
+var consts = require('../../consts.js');
+var utils = require('../../utils.js');
+var commonStyles = 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 commonStyles__default = /*#__PURE__*/_interopDefaultCompat(commonStyles);
+
+var BasePatternLock = React.forwardRef(function (_a, ref) {
+    var _b, _c;
+    var _d = _a.observeTokens, observeTokens = _d === void 0 ? false : _d, _e = _a.observerParams, observerParams = _e === void 0 ? {} : _e, _f = _a.justifyNodes, justifyNodes = _f === void 0 ? 'space-between' : _f, className = _a.className, error = _a.error, dataTestId = _a.dataTestId, _g = _a.forgotCodeBtnText, forgotCodeBtnText = _g === void 0 ? 'Забыли код?' : _g, _h = _a.showForgotCodeBtn, showForgotCodeBtn = _h === void 0 ? false : _h, onForgotBtnClick = _a.onForgotBtnClick, _j = _a.extraBounds, extraBounds = _j === void 0 ? consts.DEFAULT_EXTRA_BOUNDS : _j, message = _a.message, messageClassName = _a.messageClassName, hover = _a.hover, _k = _a.styles, styles = _k === void 0 ? {} : _k, restProps = tslib.__rest(_a, ["observeTokens", "observerParams", "justifyNodes", "className", "error", "dataTestId", "forgotCodeBtnText", "showForgotCodeBtn", "onForgotBtnClick", "extraBounds", "message", "messageClassName", "hover", "styles"]);
+    var _l = React.useState(), params = _l[0], setParams = _l[1];
+    React.useEffect(function () {
+        var _a = utils.getSizes(), elementSizes = _a.elementSizes, width = _a.width, height = _a.height;
         setParams({
-            theme: getTheme(elementSizes),
-            width,
-            height,
+            theme: utils.getTheme(elementSizes),
+            width: width,
+            height: height,
         });
     }, []);
-    useEffect(() => {
-        let styleObserver = null;
+    React.useEffect(function () {
+        var styleObserver = null;
         if (observeTokens) {
-            const { options = OBSERVE_OPTIONS, getTarget = getDefaultObserveTarget } = observerParams;
-            styleObserver = new MutationObserver(() => setParams((prevState) => {
-                const { width, height, elementSizes } = getSizes();
-                if (!prevState) {
-                    return { theme: getTheme(elementSizes), width, height };
-                }
-                const prevBgColor = prevState.theme[THEME_STATE.INITIAL].colors.bg;
-                const themeChanged = prevBgColor !== getColorByToken(OBSERVABLE_TOKENS.BG);
-                if (themeChanged)
-                    return { ...prevState, theme: getTheme(elementSizes) };
-                return prevState;
-            }));
+            var _a = observerParams.options, options = _a === void 0 ? consts.OBSERVE_OPTIONS : _a, _b = observerParams.getTarget, getTarget = _b === void 0 ? utils.getDefaultObserveTarget : _b;
+            styleObserver = new MutationObserver(function () {
+                return setParams(function (prevState) {
+                    var _a = utils.getSizes(), width = _a.width, height = _a.height, elementSizes = _a.elementSizes;
+                    if (!prevState) {
+                        return { theme: utils.getTheme(elementSizes), width: width, height: height };
+                    }
+                    var prevBgColor = prevState.theme[consts.THEME_STATE.INITIAL].colors.bg;
+                    var themeChanged = prevBgColor !== utils.getColorByToken(consts.OBSERVABLE_TOKENS.BG);
+                    if (themeChanged)
+                        return tslib.__assign(tslib.__assign({}, prevState), { theme: utils.getTheme(elementSizes) });
+                    return prevState;
+                });
+            });
             styleObserver.observe(getTarget(), options);
         }
-        return () => styleObserver?.disconnect();
+        return function () { return styleObserver === null || styleObserver === void 0 ? void 0 : styleObserver.disconnect(); };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [observeTokens]);
-    const renderMessage = () => (React.createElement("div", { className: cn(commonStyles.message, messageClassName), "data-test-id": getDataTestId(dataTestId, 'message') }, message));
-    const renderError = () => (React.createElement("div", { className: cn(commonStyles.message, commonStyles.error, messageClassName), "data-test-id": getDataTestId(dataTestId, 'error') }, error));
-    return (React.createElement("div", { className: cn(commonStyles.component, styles.component, className, {
-            [commonStyles.hidden]: !params,
-        }), "data-test-id": dataTestId },
+    var renderMessage = function () { return (React__default.default.createElement("div", { className: cn__default.default(commonStyles__default.default.message, messageClassName), "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'message') }, message)); };
+    var renderError = function () { return (React__default.default.createElement("div", { className: cn__default.default(commonStyles__default.default.message, commonStyles__default.default.error, messageClassName), "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'error') }, error)); };
+    return (React__default.default.createElement("div", { className: cn__default.default(commonStyles__default.default.component, styles.component, className, (_b = {},
+            _b[commonStyles__default.default.hidden] = !params,
+            _b)), "data-test-id": dataTestId },
         error ? renderError() : renderMessage(),
-        React.createElement(ReactCanvasPatternLock, { ...restProps, ...params, ref: ref, rows: 3, cols: 3, justifyNodes: justifyNodes, extraBounds: extraBounds, hover: hover }),
-        showForgotCodeBtn ? (React.createElement(ButtonMobile, { view: 'transparent', className: cn(commonStyles.forgotBtn, styles.forgotBtn), onClick: onForgotBtnClick, dataTestId: getDataTestId(dataTestId, 'forgot-code-btn') }, forgotCodeBtnText)) : (React.createElement("div", { className: cn(commonStyles.forgotBtn, styles.forgotBtn, {
-                [styles.hiddenBtn]: Boolean(styles.hiddenBtn),
-            }) }))));
+        React__default.default.createElement(reactCanvasPatternLock.ReactCanvasPatternLock, tslib.__assign({}, restProps, params, { ref: ref, rows: 3, cols: 3, justifyNodes: justifyNodes, extraBounds: extraBounds, hover: hover })),
+        showForgotCodeBtn ? (React__default.default.createElement(mobile.ButtonMobile, { view: 'transparent', className: cn__default.default(commonStyles__default.default.forgotBtn, styles.forgotBtn), onClick: onForgotBtnClick, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'forgot-code-btn') }, forgotCodeBtnText)) : (React__default.default.createElement("div", { className: cn__default.default(commonStyles__default.default.forgotBtn, styles.forgotBtn, (_c = {},
+                _c[styles.hiddenBtn] = Boolean(styles.hiddenBtn),
+                _c)) }))));
 });
 
-export { BasePatternLock };
+exports.BasePatternLock = BasePatternLock;

package/pattern-lock/cssm/components/base-pattern-lock/index.js

@@ -1,9 +1,7 @@
-export { BasePatternLock } from './Component.js';
-import 'react';
-import 'react-canvas-pattern-lock';
-import 'classnames';
-import '../../../../button/cssm/mobile';
-import '../../../../shared/cssm';
-import '../../consts.js';
-import '../../utils.js';
-import './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_basePatternLock_Component = require('./Component.js');
+
+
+
+exports.BasePatternLock = components_basePatternLock_Component.BasePatternLock;