@alfalab/core-components 46.0.0-beta.3 → 46.0.0-beta.6

package/pass-code-v1/modern/components/KeyPad/Component.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import React from 'react';
+import { ReactNode } from "react";
+type KeyPadProps = {
+    /**
+     * Показать кнопку "очистить".
+     */
+    showClear: boolean;
+    /**
+     * Слот слева.
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Слот справа.
+     */
+    rightAddons?: ReactNode;
+    /**
+     * Идентификатор для автоматизированного тестирования.
+     */
+    dataTestId?: string;
+    /**
+     * Коллбэк нажатия на кнопку.
+     */
+    onClick: (digit: number) => void;
+    /**
+     * Коллбэк очистки кода.
+     */
+    onClear: () => void;
+};
+declare const KeyPad: React.FC<KeyPadProps>;
+export { KeyPadProps, KeyPad };

package/pass-code-v1/modern/components/KeyPad/Component.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { getDataTestId } from '../../../../shared/modern';
+import { BackspaceXxlIcon } from '@alfalab/icons-glyph/BackspaceXxlIcon';
+import { KeyPadButton } from '../KeyPadButton/Component.js';
+import 'classnames';
+import '../../../../button/modern/mobile';
+
+const styles = {"component":"pass-code-v1__component_1ltyz","digit":"pass-code-v1__digit_1ltyz"};
+require('./index.css');
+
+const CELL_COUNT = 12;
+const CELLS = new Array(CELL_COUNT).fill(null).map((_, 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)));
+        }
+        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));
+})));
+
+export { KeyPad };

package/pass-code-v1/modern/components/KeyPad/index.css

@@ -0,0 +1,45 @@
+/* hash: 10jfq */
+:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-s: 12px;
+    --gap-m: 16px;
+    --gap-xl: 24px;
+    --gap-2xl: 32px;
+} :root {
+} :root {
+} .pass-code-v1__component_1ltyz {
+    width: 240px;
+    height: 292px;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(4, 1fr);
+    grid-column-gap: var(--gap-xl);
+    grid-row-gap: var(--gap-s);
+    margin: 0 auto
+} .pass-code-v1__component_1ltyz .pass-code-v1__digit_1ltyz.pass-code-v1__digit_1ltyz {
+        font-size: 36px;
+        line-height: 1;
+    } @media screen and (min-width: 360px) {
+    .pass-code-v1__component_1ltyz {
+        width: 292px;
+        height: 352px;
+        grid-column-gap: var(--gap-2xl);
+        grid-row-gap: var(--gap-m);
+    }
+} @media screen and (min-width: 390px) {
+    .pass-code-v1__component_1ltyz {
+        width: 322px;
+        height: 392px;
+    }
+}

package/pass-code-v1/modern/components/KeyPad/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/pass-code-v1/modern/components/KeyPad/index.js

@@ -0,0 +1,7 @@
+export { KeyPad } from './Component.js';
+import 'react';
+import '../../../../shared/modern';
+import '@alfalab/icons-glyph/BackspaceXxlIcon';
+import '../KeyPadButton/Component.js';
+import 'classnames';
+import '../../../../button/modern/mobile';

package/pass-code-v1/modern/components/KeyPadButton/Component.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import React from 'react';
+import { ReactNode } from "react";
+import { ButtonMobileProps } from "../../../../button/mobile";
+type KeyPadButtonProps<T> = {
+    /**
+     * Вид кнопки.
+     */
+    view: ButtonMobileProps['view'];
+    /**
+     * Значение.
+     */
+    children: T;
+    /**
+     * Дополнительный класс.
+     */
+    className?: string;
+    /**
+     * Дополнительный класс кнопки.
+     */
+    buttonClassName?: string;
+    /**
+     * Коллбэк нажатия на кнопку.
+     */
+    onClick?: (payload: T) => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования.
+     */
+    dataTestId?: string;
+};
+declare function KeyPadButton<T extends ReactNode>({ children, onClick, className, view, buttonClassName, dataTestId, }: KeyPadButtonProps<T>): React.JSX.Element;
+export { KeyPadButtonProps, KeyPadButton };

package/pass-code-v1/modern/components/KeyPadButton/Component.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import cn from 'classnames';
+import { ButtonMobile } from '../../../../button/modern/mobile';
+
+const styles = {"component":"pass-code-v1__component_tnkyi","button":"pass-code-v1__button_tnkyi","secondary":"pass-code-v1__secondary_tnkyi","ghost":"pass-code-v1__ghost_tnkyi"};
+require('./index.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)));
+}
+
+export { KeyPadButton };

package/pass-code-v1/modern/components/KeyPadButton/index.css

@@ -0,0 +1,69 @@
+/* hash: 8ydd7 */
+:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} /* deprecated */ :root {
+    --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
+    --color-light-neutral-translucent-200-press: rgba(5, 12, 41, 0.14);
+    --color-light-text-primary: rgba(3, 3, 6, 0.88); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+    --border-radius-circle: 50%;
+} :root {
+} :root {
+} :root {
+} :root {
+    --button-bg-color: var(--color-light-neutral-translucent-200);
+    --button-bg-color-active: var(--color-light-neutral-translucent-200-press);
+} .pass-code-v1__component_tnkyi {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+} .pass-code-v1__button_tnkyi.pass-code-v1__button_tnkyi {
+    font-size: 14px;
+    line-height: 18px;
+    font-weight: 500;
+
+    border-radius: var(--border-radius-circle);
+    padding: 0;
+    min-width: 64px;
+    width: 64px;
+    height: 64px;
+    text-align: center
+} .pass-code-v1__button_tnkyi.pass-code-v1__button_tnkyi > span {
+        vertical-align: middle
+    } .pass-code-v1__button_tnkyi.pass-code-v1__button_tnkyi > span > * {
+            vertical-align: middle;
+        } .pass-code-v1__secondary_tnkyi.pass-code-v1__secondary_tnkyi {
+    color: var(--color-light-text-primary);
+    background: var(--button-bg-color)
+} .pass-code-v1__secondary_tnkyi.pass-code-v1__secondary_tnkyi:hover {
+        color: var(--color-light-text-primary);
+    } .pass-code-v1__secondary_tnkyi.pass-code-v1__secondary_tnkyi:active {
+        background: var(--button-bg-color-active);
+    } .pass-code-v1__ghost_tnkyi.pass-code-v1__ghost_tnkyi {
+    color: var(--color-light-text-primary)
+} .pass-code-v1__ghost_tnkyi.pass-code-v1__ghost_tnkyi:hover {
+        color: var(--color-light-text-primary);
+    } .pass-code-v1__ghost_tnkyi.pass-code-v1__ghost_tnkyi:active {
+        background: var(--button-bg-color-active);
+    } @media screen and (min-width: 360px) {
+    .pass-code-v1__button_tnkyi.pass-code-v1__button_tnkyi {
+        min-width: 76px;
+        height: 76px;
+        width: 76px;
+    }
+} @media screen and (min-width: 390px) {
+    .pass-code-v1__button_tnkyi.pass-code-v1__button_tnkyi {
+        min-width: 86px;
+        width: 86px;
+        height: 86px;
+    }
+}

package/pass-code-v1/modern/components/KeyPadButton/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/pass-code-v1/modern/components/KeyPadButton/index.js

@@ -0,0 +1,4 @@
+export { KeyPadButton } from './Component.js';
+import 'react';
+import 'classnames';
+import '../../../../button/modern/mobile';

package/pass-code-v1/modern/index.css

@@ -0,0 +1,38 @@
+/* hash: 1e1al */
+:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} /* deprecated */ :root {
+    --color-light-text-negative: #ec2d20;
+    --color-light-text-primary: rgba(3, 3, 6, 0.88); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-xs: 8px;
+} :root {
+} :root {
+} :root {
+    --pass-code-max-width: 500px;
+} .pass-code-v1__component_lyu8o {
+    max-width: var(--pass-code-max-width);
+    margin: var(--gap-xs) 0;
+} .pass-code-v1__message_lyu8o {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+
+    min-height: 24px;
+    text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--color-light-text-primary);
+} .pass-code-v1__error_lyu8o {
+    color: var(--color-light-text-negative);
+}

package/pass-code-v1/modern/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component";
+export * from "./components/KeyPadButton/index";

package/pass-code-v1/modern/index.js

@@ -0,0 +1,11 @@
+export { PassCodeV1 } from './Component.js';
+export { KeyPadButton } from './components/KeyPadButton/Component.js';
+import 'react';
+import 'classnames';
+import '../../gap/modern';
+import '../../shared/modern';
+import './components/InputProgress/Component.js';
+import 'react-transition-group';
+import './components/KeyPad/Component.js';
+import '@alfalab/icons-glyph/BackspaceXxlIcon';
+import '../../button/modern/mobile';

package/pass-code-v1/modern/shared/index.d.ts

@@ -0,0 +1 @@
+export { getPassCodeTestIds } from "../utils";

package/pass-code-v1/modern/shared/index.js

@@ -0,0 +1,2 @@
+export { getPassCodeTestIds } from '../utils.js';
+import '../../../shared/modern';

package/pass-code-v1/modern/utils.d.ts

@@ -0,0 +1,10 @@
+declare function getPassCodeTestIds(dataTestId: string): {
+    passCode: string;
+    inputProgress: string;
+    keypad: string;
+    keypadButton: string;
+    backspaceButton: string;
+    error: string;
+    message: string;
+};
+export { getPassCodeTestIds };

package/pass-code-v1/modern/utils.js

@@ -0,0 +1,15 @@
+import { getDataTestId } from '../../shared/modern';
+
+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'),
+    };
+}
+
+export { getPassCodeTestIds };

package/pass-code-v1/package.json

@@ -0,0 +1,3 @@
+{
+    "module": "./esm/index.js"
+}

package/pass-code-v1/shared/index.d.ts

@@ -0,0 +1 @@
+export { getPassCodeTestIds } from "../utils";

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

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utils = require('../utils.js');
+
+
+
+exports.getPassCodeTestIds = utils.getPassCodeTestIds;

package/pass-code-v1/shared/package.json

@@ -0,0 +1,3 @@
+{
+    "module": "../esm/shared/index.js"
+}

package/pass-code-v1/utils.d.ts

@@ -0,0 +1,10 @@
+declare function getPassCodeTestIds(dataTestId: string): {
+    passCode: string;
+    inputProgress: string;
+    keypad: string;
+    keypadButton: string;
+    backspaceButton: string;
+    error: string;
+    message: string;
+};
+export { getPassCodeTestIds };

package/pass-code-v1/utils.js

@@ -0,0 +1,17 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var coreComponentsShared = require('../shared');
+
+function getPassCodeTestIds(dataTestId) {
+    return {
+        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'),
+    };
+}
+
+exports.getPassCodeTestIds = getPassCodeTestIds;

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

@@ -14,13 +14,13 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var commonStyles = {"component":"pattern-lock__component_byils","hidden":"pattern-lock__hidden_byils","message":"pattern-lock__message_byils","error":"pattern-lock__error_byils","forgotBtn":"pattern-lock__forgotBtn_byils"};
+var commonStyles = {"component":"pattern-lock__component_byils","withForgotBtn":"pattern-lock__withForgotBtn_byils","forgotBtn":"pattern-lock__forgotBtn_byils"};
 require('./index.css');
 
 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];
+    var _b;
+    var _c = _a.observeTokens, observeTokens = _c === void 0 ? false : _c, _d = _a.observerParams, observerParams = _d === void 0 ? {} : _d, className = _a.className, dataTestId = _a.dataTestId, _e = _a.forgotCodeBtnText, forgotCodeBtnText = _e === void 0 ? 'Забыли код?' : _e, _f = _a.showForgotCodeBtn, showForgotCodeBtn = _f === void 0 ? false : _f, onForgotBtnClick = _a.onForgotBtnClick, _g = _a.extraBounds, extraBounds = _g === void 0 ? consts.DEFAULT_EXTRA_BOUNDS : _g; _a.messageClassName; var hover = _a.hover, _h = _a.styles, styles = _h === void 0 ? {} : _h, restProps = tslib.__rest(_a, ["observeTokens", "observerParams", "className", "dataTestId", "forgotCodeBtnText", "showForgotCodeBtn", "onForgotBtnClick", "extraBounds", "messageClassName", "hover", "styles"]);
+    var _j = React.useState(), params = _j[0], setParams = _j[1];
     React.useEffect(function () {
         var _a = utils.getSizes(), elementSizes = _a.elementSizes, width = _a.width, height = _a.height;
         setParams({
@@ -51,16 +51,12 @@ var BasePatternLock = React.forwardRef(function (_a, ref) {
         return function () { return styleObserver === null || styleObserver === void 0 ? void 0 : styleObserver.disconnect(); };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [observeTokens]);
-    var renderMessage = function () { return (React__default.default.createElement("div", { className: cn__default.default(commonStyles.message, messageClassName), "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'message') }, message)); };
-    var renderError = function () { return (React__default.default.createElement("div", { className: cn__default.default(commonStyles.message, commonStyles.error, messageClassName), "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'error') }, error)); };
     return (React__default.default.createElement("div", { className: cn__default.default(commonStyles.component, styles.component, className, (_b = {},
             _b[commonStyles.hidden] = !params,
+            _b[commonStyles.withForgotBtn] = showForgotCodeBtn,
             _b)), "data-test-id": dataTestId },
-        error ? renderError() : renderMessage(),
-        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.forgotBtn, styles.forgotBtn), onClick: onForgotBtnClick, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'forgot-code-btn') }, forgotCodeBtnText)) : (React__default.default.createElement("div", { className: cn__default.default(commonStyles.forgotBtn, styles.forgotBtn, (_c = {},
-                _c[styles.hiddenBtn] = Boolean(styles.hiddenBtn),
-                _c)) }))));
+        React__default.default.createElement(reactCanvasPatternLock.ReactCanvasPatternLock, tslib.__assign({}, restProps, params, { ref: ref, rows: 3, cols: 3, justifyNodes: 'space-between', extraBounds: extraBounds, hover: hover })),
+        showForgotCodeBtn && (React__default.default.createElement(mobile.ButtonMobile, { view: 'transparent', className: cn__default.default(commonStyles.forgotBtn, styles.forgotBtn), onClick: onForgotBtnClick, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'forgot-code-btn') }, forgotCodeBtnText))));
 });
 
 exports.BasePatternLock = BasePatternLock;

package/pattern-lock/components/base-pattern-lock/index.css

@@ -1,8 +1,6 @@
 /* hash: 14wes */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
-} /* deprecated */ :root {
-    --color-light-text-negative: #ec2d20;
-    --color-light-text-primary: rgba(3, 3, 6, 0.88); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root {
 } :root {
@@ -15,30 +13,23 @@
 } :root {
 } :root {
     --gap-m: 16px;
-    --gap-3xl: 40px;
 } :root {
 } :root {
     --size-xs-height: 40px;
 } :root {
+    --pattern-lock-min-height: 272px;
+    --pattern-lock-with-forgot-btn-min-height: 336px;
+} .pattern-lock__component_byils {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    min-height: var(--pattern-lock-min-height);
+    padding: var(--gap-m) 0
 } .pattern-lock__component_byils canvas {
         display: block;
         margin: 0 auto;
-    } .pattern-lock__hidden_byils {
-    visibility: hidden;
-} .pattern-lock__message_byils {
-    font-size: 16px;
-    line-height: 24px;
-    font-weight: 400;
-
-    text-align: center;
-    padding: 0 var(--gap-m) var(--gap-3xl);
-    min-height: 24px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    color: var(--color-light-text-primary);
-} .pattern-lock__error_byils {
-    color: var(--color-light-text-negative);
+    } .pattern-lock__withForgotBtn_byils {
+    min-height: var(--pattern-lock-with-forgot-btn-min-height);
 } .pattern-lock__forgotBtn_byils {
     display: block;
     min-height: var(--size-xs-height);

package/pattern-lock/consts.js

@@ -8,15 +8,15 @@ var OBSERVE_OPTIONS = {
 };
 var DEFAULT_EXTRA_BOUNDS = [75, 50, 75, 50];
 var OBSERVABLE_TOKENS = {
-    ACCENT_INITIAL: '--color-light-graphic-primary',
-    ACCENT_SUCCESS: '--color-light-graphic-positive',
-    ACCENT_FAILURE: '--color-light-graphic-negative',
-    PRIMARY: '--color-light-graphic-tertiary',
+    ACCENT_INITIAL: '--color-light-neutral-0-inverted',
+    ACCENT_SUCCESS: '--color-light-status-positive',
+    ACCENT_FAILURE: '--color-light-status-negative',
+    PRIMARY: '--color-light-neutral-500',
     BG: '--color-light-bg-primary',
-    RING_BG_INITIAL: '--color-light-specialbg-secondary-transparent',
-    SELECTED_RING_BG_INITIAL: '--color-light-specialbg-tertiary-transparent',
-    SELECTED_RING_BG_SUCCESS: '--color-light-graphic-positive-alpha-10',
-    SELECTED_RING_BG_FAILURE: '--color-light-graphic-negative-alpha-10',
+    RING_BG_INITIAL: '--color-light-neutral-translucent-200',
+    SELECTED_RING_BG_INITIAL: '--color-light-neutral-translucent-200-hover',
+    SELECTED_RING_BG_SUCCESS: '--color-light-status-muted-positive',
+    SELECTED_RING_BG_FAILURE: '--color-light-status-muted-negative',
     HOVER_INNER: '--color-light-neutral-500-hover',
     HOVER_OUTER: '--color-light-neutral-translucent-200-hover',
 };

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

@@ -17,9 +17,9 @@ 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];
+    var _b;
+    var _c = _a.observeTokens, observeTokens = _c === void 0 ? false : _c, _d = _a.observerParams, observerParams = _d === void 0 ? {} : _d, className = _a.className, dataTestId = _a.dataTestId, _e = _a.forgotCodeBtnText, forgotCodeBtnText = _e === void 0 ? 'Забыли код?' : _e, _f = _a.showForgotCodeBtn, showForgotCodeBtn = _f === void 0 ? false : _f, onForgotBtnClick = _a.onForgotBtnClick, _g = _a.extraBounds, extraBounds = _g === void 0 ? consts.DEFAULT_EXTRA_BOUNDS : _g; _a.messageClassName; var hover = _a.hover, _h = _a.styles, styles = _h === void 0 ? {} : _h, restProps = tslib.__rest(_a, ["observeTokens", "observerParams", "className", "dataTestId", "forgotCodeBtnText", "showForgotCodeBtn", "onForgotBtnClick", "extraBounds", "messageClassName", "hover", "styles"]);
+    var _j = React.useState(), params = _j[0], setParams = _j[1];
     React.useEffect(function () {
         var _a = utils.getSizes(), elementSizes = _a.elementSizes, width = _a.width, height = _a.height;
         setParams({
@@ -50,16 +50,12 @@ var BasePatternLock = React.forwardRef(function (_a, ref) {
         return function () { return styleObserver === null || styleObserver === void 0 ? void 0 : styleObserver.disconnect(); };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [observeTokens]);
-    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[commonStyles__default.default.withForgotBtn] = showForgotCodeBtn,
             _b)), "data-test-id": dataTestId },
-        error ? renderError() : renderMessage(),
-        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)) }))));
+        React__default.default.createElement(reactCanvasPatternLock.ReactCanvasPatternLock, tslib.__assign({}, restProps, params, { ref: ref, rows: 3, cols: 3, justifyNodes: 'space-between', 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))));
 });
 
 exports.BasePatternLock = BasePatternLock;