@alfalab/core-components 47.4.0-beta.1 → 47.5.0

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

@@ -13,8 +13,10 @@
 
     /* Hard up */
 } :root {
-} :root {
-    --gap-xs: 8px;
+} :root { /* deprecated */ /* deprecated */
+    --gap-xs: 8px; /* deprecated */ /* deprecated */ /* deprecated */ /* 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 {
 } :root {

package/pass-code-v1/index.css

@@ -13,8 +13,10 @@
 
     /* Hard up */
 } :root {
-} :root {
-    --gap-xs: 8px;
+} :root { /* deprecated */ /* deprecated */
+    --gap-xs: 8px; /* deprecated */ /* deprecated */ /* deprecated */ /* 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 {
 } :root {

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

@@ -15,7 +15,9 @@
     /* Hard up */
 } :root {
     --border-radius-circle: 50%;
-} :root {
+} :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 {
 } .pass-code-v1__component_1ckq6 {

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

@@ -11,11 +11,13 @@
 
     /* Hard up */
 } :root {
-} :root {
-    --gap-s: 12px;
-    --gap-m: 16px;
-    --gap-xl: 24px;
-    --gap-2xl: 32px;
+} :root { /* deprecated */ /* deprecated */ /* deprecated */
+    --gap-s: 12px; /* deprecated */ /* deprecated */
+    --gap-m: 16px; /* deprecated */ /* deprecated */
+    --gap-xl: 24px; /* deprecated */
+    --gap-2xl: 32px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+
+    /* новые значения, используйте их */
 } :root {
 } :root {
 } .pass-code-v1__component_9zzw1 {

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

@@ -15,7 +15,9 @@
     /* Hard up */
 } :root {
     --border-radius-circle: 50%;
-} :root {
+} :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 {
 } :root {

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

@@ -13,8 +13,10 @@
 
     /* Hard up */
 } :root {
-} :root {
-    --gap-xs: 8px;
+} :root { /* deprecated */ /* deprecated */
+    --gap-xs: 8px; /* deprecated */ /* deprecated */ /* deprecated */ /* 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 {
 } :root {

package/password-input/cssm/index.module.css

@@ -10,9 +10,11 @@
 
     /* Hard up */
 } :root {
-} :root {
-    --gap-2xs: 4px;
-    --gap-m-neg: -16px;
+} :root { /* deprecated */
+    --gap-2xs: 4px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+    --gap-m-neg: -16px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+
+    /* новые значения, используйте их */
 } :root {
 } :root {
 } .eye:last-child {

package/password-input/esm/index.css

@@ -11,9 +11,11 @@
 
     /* Hard up */
 } :root {
-} :root {
-    --gap-2xs: 4px;
-    --gap-m-neg: -16px;
+} :root { /* deprecated */
+    --gap-2xs: 4px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+    --gap-m-neg: -16px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+
+    /* новые значения, используйте их */
 } :root {
 } :root {
 } .password-input__eye_10ij7:last-child {

package/password-input/index.css

@@ -11,9 +11,11 @@
 
     /* Hard up */
 } :root {
-} :root {
-    --gap-2xs: 4px;
-    --gap-m-neg: -16px;
+} :root { /* deprecated */
+    --gap-2xs: 4px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+    --gap-m-neg: -16px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+
+    /* новые значения, используйте их */
 } :root {
 } :root {
 } .password-input__eye_10ij7:last-child {

package/password-input/modern/index.css

@@ -11,9 +11,11 @@
 
     /* Hard up */
 } :root {
-} :root {
-    --gap-2xs: 4px;
-    --gap-m-neg: -16px;
+} :root { /* deprecated */
+    --gap-2xs: 4px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+    --gap-m-neg: -16px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+
+    /* новые значения, используйте их */
 } :root {
 } :root {
 } .password-input__eye_10ij7:last-child {

package/pattern-lock/Component.responsive.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
-import { TPatternLockInstance } from 'react-canvas-pattern-lock';
+import { TPatternLockInstance } from '@alfalab/react-canvas-pattern-lock';
 import { PatternLockProps } from "./typings";
 declare const PatternLock: React.ForwardRefExoticComponent<PatternLockProps & React.RefAttributes<TPatternLockInstance>>;
 export { PatternLock };

package/pattern-lock/components/base-pattern-lock/Component.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
-import { TPatternLockInstance } from 'react-canvas-pattern-lock';
+import { TPatternLockInstance } from '@alfalab/react-canvas-pattern-lock';
 import { CommonPatternLockProps, PrivatePatternLockProps } from "../../typings";
 declare const BasePatternLock: React.ForwardRefExoticComponent<(CommonPatternLockProps & PrivatePatternLockProps) & React.RefAttributes<TPatternLockInstance>>;
 export { BasePatternLock };

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

@@ -2,10 +2,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
-var reactCanvasPatternLock = require('react-canvas-pattern-lock');
 var cn = require('classnames');
 var mobile = require('../../../button/mobile');
 var coreComponentsShared = require('../../../shared');
+var reactCanvasPatternLock = require('@alfalab/react-canvas-pattern-lock');
 var consts = require('../../consts.js');
 var utils = require('../../utils.js');
 
@@ -14,7 +14,7 @@ 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_1625k","withForgotBtn":"pattern-lock__withForgotBtn_1625k","forgotBtn":"pattern-lock__forgotBtn_1625k"};
+var commonStyles = {"component":"pattern-lock__component_1625k","canvasContainer":"pattern-lock__canvasContainer_1625k","canvasInner":"pattern-lock__canvasInner_1625k","withForgotBtn":"pattern-lock__withForgotBtn_1625k","forgotBtn":"pattern-lock__forgotBtn_1625k"};
 require('./index.css');
 
 var BasePatternLock = React.forwardRef(function (_a, ref) {
@@ -39,8 +39,8 @@ var BasePatternLock = React.forwardRef(function (_a, ref) {
                     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);
+                    var prevBgColor = prevState.theme[consts.THEME_STATE.INITIAL].colors.primary;
+                    var themeChanged = prevBgColor !== utils.getColorByToken(consts.OBSERVABLE_TOKENS.PRIMARY);
                     if (themeChanged)
                         return tslib.__assign(tslib.__assign({}, prevState), { theme: utils.getTheme(elementSizes) });
                     return prevState;
@@ -55,7 +55,9 @@ var BasePatternLock = React.forwardRef(function (_a, ref) {
             _b[commonStyles.hidden] = !params,
             _b[commonStyles.withForgotBtn] = showForgotCodeBtn,
             _b)), "data-test-id": dataTestId },
-        React__default.default.createElement(reactCanvasPatternLock.ReactCanvasPatternLock, tslib.__assign({}, restProps, params, { ref: ref, rows: 3, cols: 3, justifyNodes: 'space-between', extraBounds: extraBounds, hover: hover })),
+        React__default.default.createElement("div", { className: commonStyles.canvasContainer },
+            React__default.default.createElement("div", { className: commonStyles.canvasInner },
+                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))));
 });
 BasePatternLock.displayName = 'BasePatternLock';

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

@@ -11,24 +11,36 @@
 
     /* Hard up */
 } :root {
-} :root {
-    --gap-m: 16px;
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+    --gap-m: 16px; /* 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 {
     --size-xs-height: 40px;
 } :root {
+    --pattern-lock-min-width: 304px;
     --pattern-lock-min-height: 272px;
     --pattern-lock-with-forgot-btn-min-height: 336px;
 } .pattern-lock__component_1625k {
     display: flex;
     flex-direction: column;
+    align-items: center;
     box-sizing: border-box;
-    min-height: var(--pattern-lock-min-height);
-    padding: var(--gap-m) 0
+    min-height: var(--pattern-lock-min-height)
 } .pattern-lock__component_1625k canvas {
         display: block;
         margin: 0 auto;
-    } .pattern-lock__withForgotBtn_1625k {
+    } .pattern-lock__component_1625k .pattern-lock__canvasContainer_1625k {
+        box-sizing: border-box;
+        padding: var(--gap-m) var(--gap-m);
+        min-width: var(--pattern-lock-min-width);
+        min-height: var(--pattern-lock-min-height)
+    } .pattern-lock__component_1625k .pattern-lock__canvasContainer_1625k .pattern-lock__canvasInner_1625k {
+            box-sizing: border-box;
+            padding: 0 var(--gap-m);
+            min-width: var(--pattern-lock-min-height);
+        } .pattern-lock__withForgotBtn_1625k {
     min-height: var(--pattern-lock-with-forgot-btn-min-height);
 } .pattern-lock__forgotBtn_1625k {
     display: block;

package/pattern-lock/consts.d.ts

@@ -1,4 +1,4 @@
-import { ReactPatternLockProps } from 'react-canvas-pattern-lock';
+import { ReactPatternLockProps } from '@alfalab/react-canvas-pattern-lock';
 import { ObservableTokens } from "./typings";
 declare const OBSERVE_OPTIONS: MutationObserverInit;
 declare const DEFAULT_EXTRA_BOUNDS: ReactPatternLockProps['extraBounds'];

package/pattern-lock/consts.js

@@ -12,7 +12,6 @@ var OBSERVABLE_TOKENS = {
     ACCENT_SUCCESS: '--color-light-status-positive',
     ACCENT_FAILURE: '--color-light-status-negative',
     PRIMARY: '--color-light-neutral-500',
-    BG: '--color-light-base-bg-primary',
     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',

package/pattern-lock/cssm/Component.responsive.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
-import { TPatternLockInstance } from 'react-canvas-pattern-lock';
+import { TPatternLockInstance } from '@alfalab/react-canvas-pattern-lock';
 import { PatternLockProps } from "./typings";
 declare const PatternLock: React.ForwardRefExoticComponent<PatternLockProps & React.RefAttributes<TPatternLockInstance>>;
 export { PatternLock };

package/pattern-lock/cssm/components/base-pattern-lock/Component.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
-import { TPatternLockInstance } from 'react-canvas-pattern-lock';
+import { TPatternLockInstance } from '@alfalab/react-canvas-pattern-lock';
 import { CommonPatternLockProps, PrivatePatternLockProps } from "../../typings";
 declare const BasePatternLock: React.ForwardRefExoticComponent<(CommonPatternLockProps & PrivatePatternLockProps) & React.RefAttributes<TPatternLockInstance>>;
 export { BasePatternLock };

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

@@ -2,10 +2,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 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 reactCanvasPatternLock = require('@alfalab/react-canvas-pattern-lock');
 var consts = require('../../consts.js');
 var utils = require('../../utils.js');
 var commonStyles = require('./index.module.css');
@@ -38,8 +38,8 @@ var BasePatternLock = React.forwardRef(function (_a, ref) {
                     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);
+                    var prevBgColor = prevState.theme[consts.THEME_STATE.INITIAL].colors.primary;
+                    var themeChanged = prevBgColor !== utils.getColorByToken(consts.OBSERVABLE_TOKENS.PRIMARY);
                     if (themeChanged)
                         return tslib.__assign(tslib.__assign({}, prevState), { theme: utils.getTheme(elementSizes) });
                     return prevState;
@@ -54,7 +54,9 @@ var BasePatternLock = React.forwardRef(function (_a, ref) {
             _b[commonStyles__default.default.hidden] = !params,
             _b[commonStyles__default.default.withForgotBtn] = showForgotCodeBtn,
             _b)), "data-test-id": dataTestId },
-        React__default.default.createElement(reactCanvasPatternLock.ReactCanvasPatternLock, tslib.__assign({}, restProps, params, { ref: ref, rows: 3, cols: 3, justifyNodes: 'space-between', extraBounds: extraBounds, hover: hover })),
+        React__default.default.createElement("div", { className: commonStyles__default.default.canvasContainer },
+            React__default.default.createElement("div", { className: commonStyles__default.default.canvasInner },
+                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))));
 });
 BasePatternLock.displayName = 'BasePatternLock';

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

@@ -10,24 +10,36 @@
 
     /* Hard up */
 } :root {
-} :root {
-    --gap-m: 16px;
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+    --gap-m: 16px; /* 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 {
     --size-xs-height: 40px;
 } :root {
+    --pattern-lock-min-width: 304px;
     --pattern-lock-min-height: 272px;
     --pattern-lock-with-forgot-btn-min-height: 336px;
 } .component {
     display: flex;
     flex-direction: column;
+    align-items: center;
     box-sizing: border-box;
-    min-height: var(--pattern-lock-min-height);
-    padding: var(--gap-m) 0
+    min-height: var(--pattern-lock-min-height)
 } .component canvas {
         display: block;
         margin: 0 auto;
-    } .withForgotBtn {
+    } .component .canvasContainer {
+        box-sizing: border-box;
+        padding: var(--gap-m) var(--gap-m);
+        min-width: var(--pattern-lock-min-width);
+        min-height: var(--pattern-lock-min-height)
+    } .component .canvasContainer .canvasInner {
+            box-sizing: border-box;
+            padding: 0 var(--gap-m);
+            min-width: var(--pattern-lock-min-height);
+        } .withForgotBtn {
     min-height: var(--pattern-lock-with-forgot-btn-min-height);
 } .forgotBtn {
     display: block;

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

@@ -1,4 +1,4 @@
-import { ReactPatternLockProps } from 'react-canvas-pattern-lock';
+import { ReactPatternLockProps } from '@alfalab/react-canvas-pattern-lock';
 import { ObservableTokens } from "./typings";
 declare const OBSERVE_OPTIONS: MutationObserverInit;
 declare const DEFAULT_EXTRA_BOUNDS: ReactPatternLockProps['extraBounds'];

package/pattern-lock/cssm/consts.js

@@ -12,7 +12,6 @@ var OBSERVABLE_TOKENS = {
     ACCENT_SUCCESS: '--color-light-status-positive',
     ACCENT_FAILURE: '--color-light-status-negative',
     PRIMARY: '--color-light-neutral-500',
-    BG: '--color-light-base-bg-primary',
     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',

package/pattern-lock/cssm/desktop/Component.desktop.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
-import { TPatternLockInstance } from 'react-canvas-pattern-lock';
+import { TPatternLockInstance } from '@alfalab/react-canvas-pattern-lock';
 import { CommonPatternLockProps } from "../typings";
 declare const PatternLockDesktop: React.ForwardRefExoticComponent<CommonPatternLockProps & React.RefAttributes<TPatternLockInstance>>;
 export { PatternLockDesktop };

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

@@ -10,8 +10,10 @@
 
     /* Hard up */
 } :root {
-} :root {
-    --gap-xl: 24px;
+} :root { /* deprecated */ /* deprecated */
+    --gap-xs: 8px; /* deprecated */ /* deprecated */ /* deprecated */ /* 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 {
 } :root {
@@ -20,7 +22,7 @@
     margin: 0 auto;
     min-width: var(--pattern-lock-min-width);
 } .forgotBtn {
-    margin: var(--gap-xl) auto 0;
+    margin: var(--gap-xs) auto 0;
 } .hiddenBtn {
     display: none;
 }

package/pattern-lock/cssm/hooks/use-pattern-lock-cleanup.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { TPatternLockInstance } from 'react-canvas-pattern-lock';
+import { TPatternLockInstance } from '@alfalab/react-canvas-pattern-lock';
 declare const usePatternLockCleanup: (patternLockRef: React.MutableRefObject<TPatternLockInstance | null>) => {
     clear: void;
 };

package/pattern-lock/cssm/mobile/Component.mobile.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
-import { TPatternLockInstance } from 'react-canvas-pattern-lock';
+import { TPatternLockInstance } from '@alfalab/react-canvas-pattern-lock';
 import { CommonPatternLockProps } from "../typings";
 declare const PatternLockMobile: React.ForwardRefExoticComponent<CommonPatternLockProps & React.RefAttributes<TPatternLockInstance>>;
 export { PatternLockMobile };

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

@@ -10,8 +10,10 @@
 
     /* Hard up */
 } :root {
-} :root {
-    --gap-xl: 24px;
+} :root { /* deprecated */ /* deprecated */
+    --gap-xs: 8px; /* deprecated */ /* deprecated */ /* deprecated */ /* 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 {
 } :root {
@@ -20,5 +22,5 @@
     margin: 0 auto;
     min-width: var(--pattern-lock-min-width);
 } .forgotBtn {
-    margin: var(--gap-xl) auto 0;
+    margin: var(--gap-xs) auto 0;
 }

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

@@ -1,5 +1,5 @@
 import { MouseEvent } from 'react';
-import { ReactPatternLockProps } from 'react-canvas-pattern-lock';
+import { ReactPatternLockProps } from '@alfalab/react-canvas-pattern-lock';
 type ConditionalProps = {
     /**
      * Показать кнопку "забыли код"
@@ -80,7 +80,6 @@ type ObservableTokens = {
     SELECTED_RING_BG_SUCCESS: string;
     SELECTED_RING_BG_FAILURE: string;
     PRIMARY: string;
-    BG: string;
     HOVER_INNER: string;
     HOVER_OUTER: string;
 };

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

@@ -1,4 +1,4 @@
-import { Theme, ThemeParams } from 'react-canvas-pattern-lock';
+import { Theme, ThemeParams } from '@alfalab/react-canvas-pattern-lock';
 declare function getDefaultObserveTarget(): HTMLHeadElement;
 declare function getColorByToken(token: string): string;
 declare const getSizes: () => {

package/pattern-lock/cssm/utils.js

@@ -33,7 +33,7 @@ function getTheme(dimens) {
     var _a;
     var baseColors = {
         primary: getColorByToken(consts.OBSERVABLE_TOKENS.PRIMARY),
-        bg: getColorByToken(consts.OBSERVABLE_TOKENS.BG),
+        bg: 'transparent',
         ringBg: getColorByToken(consts.OBSERVABLE_TOKENS.RING_BG_INITIAL),
         hover: {
             inner: getColorByToken(consts.OBSERVABLE_TOKENS.HOVER_INNER),

package/pattern-lock/desktop/Component.desktop.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
-import { TPatternLockInstance } from 'react-canvas-pattern-lock';
+import { TPatternLockInstance } from '@alfalab/react-canvas-pattern-lock';
 import { CommonPatternLockProps } from "../typings";
 declare const PatternLockDesktop: React.ForwardRefExoticComponent<CommonPatternLockProps & React.RefAttributes<TPatternLockInstance>>;
 export { PatternLockDesktop };

package/pattern-lock/desktop/desktop.css

@@ -11,8 +11,10 @@
 
     /* Hard up */
 } :root {
-} :root {
-    --gap-xl: 24px;
+} :root { /* deprecated */ /* deprecated */
+    --gap-xs: 8px; /* deprecated */ /* deprecated */ /* deprecated */ /* 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 {
 } :root {
@@ -21,7 +23,7 @@
     margin: 0 auto;
     min-width: var(--pattern-lock-min-width);
 } .pattern-lock__forgotBtn_owwdt {
-    margin: var(--gap-xl) auto 0;
+    margin: var(--gap-xs) auto 0;
 } .pattern-lock__hiddenBtn_owwdt {
     display: none;
 }

package/pattern-lock/esm/Component.responsive.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
-import { TPatternLockInstance } from 'react-canvas-pattern-lock';
+import { TPatternLockInstance } from '@alfalab/react-canvas-pattern-lock';
 import { PatternLockProps } from "./typings";
 declare const PatternLock: React.ForwardRefExoticComponent<PatternLockProps & React.RefAttributes<TPatternLockInstance>>;
 export { PatternLock };

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

@@ -4,10 +4,10 @@ import { useMatchMedia } from '../../mq/esm';
 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/esm/mobile';
 import '../../shared/esm';
+import '@alfalab/react-canvas-pattern-lock';
 import './consts.js';
 import './utils.js';
 

package/pattern-lock/esm/components/base-pattern-lock/Component.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
-import { TPatternLockInstance } from 'react-canvas-pattern-lock';
+import { TPatternLockInstance } from '@alfalab/react-canvas-pattern-lock';
 import { CommonPatternLockProps, PrivatePatternLockProps } from "../../typings";
 declare const BasePatternLock: React.ForwardRefExoticComponent<(CommonPatternLockProps & PrivatePatternLockProps) & React.RefAttributes<TPatternLockInstance>>;
 export { BasePatternLock };

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

@@ -1,13 +1,13 @@
 import { __rest, __assign } from 'tslib';
 import React, { forwardRef, useState, useEffect } from 'react';
-import { ReactCanvasPatternLock } from 'react-canvas-pattern-lock';
 import cn from 'classnames';
 import { ButtonMobile } from '../../../../button/esm/mobile';
 import { getDataTestId } from '../../../../shared/esm';
+import { ReactCanvasPatternLock } from '@alfalab/react-canvas-pattern-lock';
 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_1625k","withForgotBtn":"pattern-lock__withForgotBtn_1625k","forgotBtn":"pattern-lock__forgotBtn_1625k"};
+var commonStyles = {"component":"pattern-lock__component_1625k","canvasContainer":"pattern-lock__canvasContainer_1625k","canvasInner":"pattern-lock__canvasInner_1625k","withForgotBtn":"pattern-lock__withForgotBtn_1625k","forgotBtn":"pattern-lock__forgotBtn_1625k"};
 require('./index.css');
 
 var BasePatternLock = forwardRef(function (_a, ref) {
@@ -32,8 +32,8 @@ var BasePatternLock = forwardRef(function (_a, ref) {
                     if (!prevState) {
                         return { theme: getTheme(elementSizes), width: width, height: height };
                     }
-                    var prevBgColor = prevState.theme[THEME_STATE.INITIAL].colors.bg;
-                    var themeChanged = prevBgColor !== getColorByToken(OBSERVABLE_TOKENS.BG);
+                    var prevBgColor = prevState.theme[THEME_STATE.INITIAL].colors.primary;
+                    var themeChanged = prevBgColor !== getColorByToken(OBSERVABLE_TOKENS.PRIMARY);
                     if (themeChanged)
                         return __assign(__assign({}, prevState), { theme: getTheme(elementSizes) });
                     return prevState;
@@ -48,7 +48,9 @@ var BasePatternLock = forwardRef(function (_a, ref) {
             _b[commonStyles.hidden] = !params,
             _b[commonStyles.withForgotBtn] = showForgotCodeBtn,
             _b)), "data-test-id": dataTestId },
-        React.createElement(ReactCanvasPatternLock, __assign({}, restProps, params, { ref: ref, rows: 3, cols: 3, justifyNodes: 'space-between', extraBounds: extraBounds, hover: hover })),
+        React.createElement("div", { className: commonStyles.canvasContainer },
+            React.createElement("div", { className: commonStyles.canvasInner },
+                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))));
 });
 BasePatternLock.displayName = 'BasePatternLock';