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

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;

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

@@ -1,7 +1,5 @@
 :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 {
@@ -14,30 +12,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;
+} .component {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    min-height: var(--pattern-lock-min-height);
+    padding: var(--gap-m) 0
 } .component canvas {
         display: block;
         margin: 0 auto;
-    } .hidden {
-    visibility: hidden;
-} .message {
-    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);
-} .error {
-    color: var(--color-light-text-negative);
+    } .withForgotBtn {
+    min-height: var(--pattern-lock-with-forgot-btn-min-height);
 } .forgotBtn {
     display: block;
     min-height: var(--size-xs-height);

package/pattern-lock/cssm/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/desktop/desktop.module.css

@@ -11,15 +11,14 @@
     /* Hard up */
 } :root {
 } :root {
-    --gap-xs: 8px;
     --gap-xl: 24px;
 } :root {
 } :root {
 } :root {
-    --pattern-lock-desktop-max-width: 240px;
+    --pattern-lock-min-width: 304px;
 } .component {
-    max-width: var(--pattern-lock-desktop-max-width);
-    margin: var(--gap-xs) 0 var(--gap-xl) 0;
+    margin: 0 auto;
+    min-width: var(--pattern-lock-min-width);
 } .forgotBtn {
     margin: var(--gap-xl) auto 0;
 } .hiddenBtn {

package/pattern-lock/cssm/mobile/mobile.module.css

@@ -11,37 +11,14 @@
     /* Hard up */
 } :root {
 } :root {
-    --gap-xs: 8px;
-    --gap-s: 12px;
-    --gap-l: 20px;
     --gap-xl: 24px;
-    --gap-2xl: 32px;
 } :root {
 } :root {
-    --size-s-height: 48px;
-    --size-m-height: 56px;
 } :root {
-    --pattern-lock-max-width: 500px;
+    --pattern-lock-min-width: 304px;
 } .component {
-    max-width: var(--pattern-lock-max-width);
-    margin: var(--gap-xs) 0 var(--gap-xl) 0;
+    margin: 0 auto;
+    min-width: var(--pattern-lock-min-width);
 } .forgotBtn {
     margin: var(--gap-xl) auto 0;
-} @media screen and (min-width: 360px) {
-    .forgotBtn {
-        margin-top: var(--gap-2xl);
-        min-height: var(--size-s-height);
-    }
-
-    .component {
-        margin-bottom: var(--gap-s);
-    }
-} @media screen and (min-width: 390px) {
-    .forgotBtn {
-        min-height: var(--size-m-height);
-    }
-
-    .component {
-        margin-bottom: var(--gap-l);
-    }
 }

package/pattern-lock/cssm/typings.d.ts

@@ -1,4 +1,4 @@
-import { MouseEvent, ReactNode } from 'react';
+import { MouseEvent } from 'react';
 import { ReactPatternLockProps } from 'react-canvas-pattern-lock';
 type ConditionalProps = {
     /**
@@ -22,17 +22,9 @@ type ConditionalProps = {
 };
 type CommonPatternLockProps = {
     /**
-     * Дополнительный класс.
+     * Дополнительный класс
      */
     className?: string;
-    /**
-     * Сообщение об ошибке
-     */
-    error?: ReactNode;
-    /**
-     * Сообщение над графическим ключом
-     */
-    message?: ReactNode;
     /**
      * Идентификатор для систем автоматизированного тестирования.
      * Для сообщения используется модификатор -message, ошибки -error,
@@ -40,12 +32,12 @@ type CommonPatternLockProps = {
      */
     dataTestId?: string;
     /**
-     * Следить ли за изменениями значений цветовых токенов.
+     * Следить ли за изменениями значений цветовых токенов
      * @default false
      */
     observeTokens?: boolean;
     /**
-     * Параметры MutationObserver для наблюдения за изменениями режима(css custom properties).
+     * Параметры MutationObserver для наблюдения за изменениями режима(css custom properties)
      */
     observerParams?: {
         getTarget?: () => Node;
@@ -55,14 +47,14 @@ type CommonPatternLockProps = {
      * Дополнительный класс для message/errorMessage
      */
     messageClassName?: string;
-} & Omit<ReactPatternLockProps, 'theme' | 'width' | 'height' | 'rows' | 'cols' | 'hover'> & ConditionalProps;
+} & Omit<ReactPatternLockProps, 'theme' | 'width' | 'height' | 'rows' | 'cols' | 'hover' | 'justifyNodes'> & ConditionalProps;
 type PrivatePatternLockProps = {
     /**
      * Включает ховер-эффект
      */
     hover?: boolean;
     /**
-     * Стили компонента.
+     * Стили компонента
      */
     styles: {
         [key: string]: string;

package/pattern-lock/cssm/utils.d.ts

@@ -10,7 +10,5 @@ declare function getTheme(dimens: ThemeParams['dimens']): Theme;
 declare function getPatternLockTestIds(dataTestId: string): {
     patternLock: string;
     forgotCodeBtn: string;
-    error: string;
-    message: string;
 };
 export { getDefaultObserveTarget, getColorByToken, getSizes, getTheme, getPatternLockTestIds };

package/pattern-lock/cssm/utils.js

@@ -21,34 +21,11 @@ var getSizes = (function () {
         if (cachedSize) {
             return cachedSize;
         }
-        if (window.matchMedia('(min-width: 600px)').matches) {
-            cachedSize = {
-                elementSizes: tslib.__assign(tslib.__assign({}, COMMON_SIZES), { nodeRadius: 32 }),
-                width: 240,
-                height: 240,
-            };
-        }
-        else if (window.matchMedia('(min-width: 390px)').matches) {
-            cachedSize = {
-                elementSizes: tslib.__assign(tslib.__assign({}, COMMON_SIZES), { nodeRadius: 43 }),
-                width: 322,
-                height: 322,
-            };
-        }
-        else if (window.matchMedia('(min-width: 360px)').matches) {
-            cachedSize = {
-                elementSizes: tslib.__assign(tslib.__assign({}, COMMON_SIZES), { nodeRadius: 38 }),
-                width: 292,
-                height: 292,
-            };
-        }
-        else {
-            cachedSize = {
-                elementSizes: tslib.__assign(tslib.__assign({}, COMMON_SIZES), { nodeRadius: 32 }),
-                width: 240,
-                height: 240,
-            };
-        }
+        cachedSize = {
+            elementSizes: tslib.__assign(tslib.__assign({}, COMMON_SIZES), { nodeRadius: 32 }),
+            width: 240,
+            height: 240,
+        };
         return cachedSize;
     };
 })();
@@ -82,8 +59,6 @@ function getPatternLockTestIds(dataTestId) {
     return {
         patternLock: dataTestId,
         forgotCodeBtn: coreComponentsShared.getDataTestId(dataTestId, 'forgot-code-btn'),
-        error: coreComponentsShared.getDataTestId(dataTestId, 'error'),
-        message: coreComponentsShared.getDataTestId(dataTestId, 'message'),
     };
 }
 

package/pattern-lock/desktop/desktop.css

@@ -12,15 +12,14 @@
     /* Hard up */
 } :root {
 } :root {
-    --gap-xs: 8px;
     --gap-xl: 24px;
 } :root {
 } :root {
 } :root {
-    --pattern-lock-desktop-max-width: 240px;
+    --pattern-lock-min-width: 304px;
 } .pattern-lock__component_8j5d3 {
-    max-width: var(--pattern-lock-desktop-max-width);
-    margin: var(--gap-xs) 0 var(--gap-xl) 0;
+    margin: 0 auto;
+    min-width: var(--pattern-lock-min-width);
 } .pattern-lock__forgotBtn_8j5d3 {
     margin: var(--gap-xl) auto 0;
 } .pattern-lock__hiddenBtn_8j5d3 {

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

@@ -7,13 +7,13 @@ import { getDataTestId } from '../../../../shared/esm';
 import { THEME_STATE, DEFAULT_EXTRA_BOUNDS, OBSERVE_OPTIONS, OBSERVABLE_TOKENS } from '../../consts.js';
 import { getSizes, getTheme, getColorByToken, getDefaultObserveTarget } from '../../utils.js';
 
-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 = 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 ? DEFAULT_EXTRA_BOUNDS : _j, message = _a.message, messageClassName = _a.messageClassName, hover = _a.hover, _k = _a.styles, styles = _k === void 0 ? {} : _k, restProps = __rest(_a, ["observeTokens", "observerParams", "justifyNodes", "className", "error", "dataTestId", "forgotCodeBtnText", "showForgotCodeBtn", "onForgotBtnClick", "extraBounds", "message", "messageClassName", "hover", "styles"]);
-    var _l = 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 ? DEFAULT_EXTRA_BOUNDS : _g; _a.messageClassName; var hover = _a.hover, _h = _a.styles, styles = _h === void 0 ? {} : _h, restProps = __rest(_a, ["observeTokens", "observerParams", "className", "dataTestId", "forgotCodeBtnText", "showForgotCodeBtn", "onForgotBtnClick", "extraBounds", "messageClassName", "hover", "styles"]);
+    var _j = useState(), params = _j[0], setParams = _j[1];
     useEffect(function () {
         var _a = getSizes(), elementSizes = _a.elementSizes, width = _a.width, height = _a.height;
         setParams({
@@ -44,16 +44,12 @@ var BasePatternLock = 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.createElement("div", { className: cn(commonStyles.message, messageClassName), "data-test-id": getDataTestId(dataTestId, 'message') }, message)); };
-    var renderError = function () { return (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, (_b = {},
             _b[commonStyles.hidden] = !params,
+            _b[commonStyles.withForgotBtn] = showForgotCodeBtn,
             _b)), "data-test-id": dataTestId },
-        error ? renderError() : renderMessage(),
-        React.createElement(ReactCanvasPatternLock, __assign({}, 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, (_c = {},
-                _c[styles.hiddenBtn] = Boolean(styles.hiddenBtn),
-                _c)) }))));
+        React.createElement(ReactCanvasPatternLock, __assign({}, restProps, params, { ref: ref, rows: 3, cols: 3, justifyNodes: 'space-between', 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))));
 });
 
 export { BasePatternLock };

package/pattern-lock/esm/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/esm/consts.js

@@ -6,15 +6,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/esm/desktop/desktop.css

@@ -12,15 +12,14 @@
     /* Hard up */
 } :root {
 } :root {
-    --gap-xs: 8px;
     --gap-xl: 24px;
 } :root {
 } :root {
 } :root {
-    --pattern-lock-desktop-max-width: 240px;
+    --pattern-lock-min-width: 304px;
 } .pattern-lock__component_8j5d3 {
-    max-width: var(--pattern-lock-desktop-max-width);
-    margin: var(--gap-xs) 0 var(--gap-xl) 0;
+    margin: 0 auto;
+    min-width: var(--pattern-lock-min-width);
 } .pattern-lock__forgotBtn_8j5d3 {
     margin: var(--gap-xl) auto 0;
 } .pattern-lock__hiddenBtn_8j5d3 {