@alfalab/core-components-pattern-lock 1.2.4 → 1.3.0

package/Component.js

@@ -6,8 +6,9 @@ var tslib = require('tslib');
 var React = require('react');
 var reactCanvasPatternLock = require('react-canvas-pattern-lock');
 var cn = require('classnames');
-var coreComponentsButton = require('@alfalab/core-components-button');
+var mobile = require('@alfalab/core-components-button/mobile');
 var coreComponentsGap = require('@alfalab/core-components-gap');
+var coreComponentsShared = require('@alfalab/core-components-shared');
 var consts = require('./consts.js');
 var utils = require('./utils.js');
 
@@ -16,12 +17,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var getDataTestId = function (dataTestId, element) {
-    var elementPart = element ? "-".concat(element.toLowerCase()) : '';
-    return dataTestId ? "".concat(dataTestId).concat(elementPart) : undefined;
-};
-
-var styles = {"component":"pattern-lock__component_1an4o","hidden":"pattern-lock__hidden_1an4o","error":"pattern-lock__error_1an4o","forgotBtn":"pattern-lock__forgotBtn_1an4o"};
+var styles = {"component":"pattern-lock__component_1g0p7","hidden":"pattern-lock__hidden_1g0p7","error":"pattern-lock__error_1g0p7","forgotBtn":"pattern-lock__forgotBtn_1g0p7"};
 require('./index.css')
 
 var PatternLock = React.forwardRef(function (_a, ref) {
@@ -63,7 +59,7 @@ var PatternLock = React.forwardRef(function (_a, ref) {
         React__default.default.createElement("div", { className: styles.error }, error),
         React__default.default.createElement(coreComponentsGap.Gap, { size: '3xl' }),
         React__default.default.createElement(reactCanvasPatternLock.ReactCanvasPatternLock, tslib.__assign({}, restProps, params, { ref: ref, rows: 3, cols: 3, justifyNodes: justifyNodes, extraBounds: extraBounds })),
-        showForgotCodeBtn ? (React__default.default.createElement(coreComponentsButton.Button, { view: 'link', className: styles.forgotBtn, onClick: onForgotBtnClick, dataTestId: getDataTestId(dataTestId, 'forgot-code-btn') }, forgotCodeBtnText)) : (React__default.default.createElement("div", { className: styles.forgotBtn }))));
+        showForgotCodeBtn ? (React__default.default.createElement(mobile.ButtonMobile, { view: 'link', className: styles.forgotBtn, onClick: onForgotBtnClick, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'forgot-code-btn') }, forgotCodeBtnText)) : (React__default.default.createElement("div", { className: styles.forgotBtn }))));
 });
 
 exports.PatternLock = PatternLock;

package/cssm/Component.js

@@ -6,8 +6,9 @@ var tslib = require('tslib');
 var React = require('react');
 var reactCanvasPatternLock = require('react-canvas-pattern-lock');
 var cn = require('classnames');
-var coreComponentsButton = require('@alfalab/core-components-button/cssm');
+var mobile = require('@alfalab/core-components-button/cssm/mobile');
 var coreComponentsGap = require('@alfalab/core-components-gap/cssm');
+var coreComponentsShared = require('@alfalab/core-components-shared/cssm');
 var consts = require('./consts.js');
 var utils = require('./utils.js');
 var styles = require('./index.module.css');
@@ -18,11 +19,6 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
-var getDataTestId = function (dataTestId, element) {
-    var elementPart = element ? "-".concat(element.toLowerCase()) : '';
-    return dataTestId ? "".concat(dataTestId).concat(elementPart) : undefined;
-};
-
 var PatternLock = React.forwardRef(function (_a, ref) {
     var _b;
     var _c = _a.observeTokens, observeTokens = _c === void 0 ? false : _c, _d = _a.observerParams, observerParams = _d === void 0 ? {} : _d, _e = _a.justifyNodes, justifyNodes = _e === void 0 ? 'space-between' : _e, className = _a.className, error = _a.error, dataTestId = _a.dataTestId, _f = _a.forgotCodeBtnText, forgotCodeBtnText = _f === void 0 ? 'Забыли код?' : _f, _g = _a.showForgotCodeBtn, showForgotCodeBtn = _g === void 0 ? false : _g, onForgotBtnClick = _a.onForgotBtnClick, _h = _a.extraBounds, extraBounds = _h === void 0 ? consts.DEFAULT_EXTRA_BOUNDS : _h, restProps = tslib.__rest(_a, ["observeTokens", "observerParams", "justifyNodes", "className", "error", "dataTestId", "forgotCodeBtnText", "showForgotCodeBtn", "onForgotBtnClick", "extraBounds"]);
@@ -62,7 +58,7 @@ var PatternLock = React.forwardRef(function (_a, ref) {
         React__default.default.createElement("div", { className: styles__default.default.error }, error),
         React__default.default.createElement(coreComponentsGap.Gap, { size: '3xl' }),
         React__default.default.createElement(reactCanvasPatternLock.ReactCanvasPatternLock, tslib.__assign({}, restProps, params, { ref: ref, rows: 3, cols: 3, justifyNodes: justifyNodes, extraBounds: extraBounds })),
-        showForgotCodeBtn ? (React__default.default.createElement(coreComponentsButton.Button, { view: 'link', className: styles__default.default.forgotBtn, onClick: onForgotBtnClick, dataTestId: getDataTestId(dataTestId, 'forgot-code-btn') }, forgotCodeBtnText)) : (React__default.default.createElement("div", { className: styles__default.default.forgotBtn }))));
+        showForgotCodeBtn ? (React__default.default.createElement(mobile.ButtonMobile, { view: 'link', className: styles__default.default.forgotBtn, onClick: onForgotBtnClick, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'forgot-code-btn') }, forgotCodeBtnText)) : (React__default.default.createElement("div", { className: styles__default.default.forgotBtn }))));
 });
 
 exports.PatternLock = PatternLock;

package/cssm/index.js

@@ -8,8 +8,9 @@ require('tslib');
 require('react');
 require('react-canvas-pattern-lock');
 require('classnames');
-require('@alfalab/core-components-button/cssm');
+require('@alfalab/core-components-button/cssm/mobile');
 require('@alfalab/core-components-gap/cssm');
+require('@alfalab/core-components-shared/cssm');
 require('./utils.js');
 require('./index.module.css');
 

package/esm/Component.js

@@ -2,17 +2,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 { Button } from '@alfalab/core-components-button/esm';
+import { ButtonMobile } from '@alfalab/core-components-button/esm/mobile';
 import { Gap } from '@alfalab/core-components-gap/esm';
+import { getDataTestId } from '@alfalab/core-components-shared/esm';
 import { THEME_STATE, DEFAULT_EXTRA_BOUNDS, OBSERVE_OPTIONS, OBSERVABLE_TOKENS } from './consts.js';
 import { getSizes, getTheme, getColorByToken, getDefaultObserveTarget } from './utils.js';
 
-var getDataTestId = function (dataTestId, element) {
-    var elementPart = element ? "-".concat(element.toLowerCase()) : '';
-    return dataTestId ? "".concat(dataTestId).concat(elementPart) : undefined;
-};
-
-var styles = {"component":"pattern-lock__component_1an4o","hidden":"pattern-lock__hidden_1an4o","error":"pattern-lock__error_1an4o","forgotBtn":"pattern-lock__forgotBtn_1an4o"};
+var styles = {"component":"pattern-lock__component_1g0p7","hidden":"pattern-lock__hidden_1g0p7","error":"pattern-lock__error_1g0p7","forgotBtn":"pattern-lock__forgotBtn_1g0p7"};
 require('./index.css')
 
 var PatternLock = forwardRef(function (_a, ref) {
@@ -54,7 +50,7 @@ var PatternLock = forwardRef(function (_a, ref) {
         React.createElement("div", { className: styles.error }, error),
         React.createElement(Gap, { size: '3xl' }),
         React.createElement(ReactCanvasPatternLock, __assign({}, restProps, params, { ref: ref, rows: 3, cols: 3, justifyNodes: justifyNodes, extraBounds: extraBounds })),
-        showForgotCodeBtn ? (React.createElement(Button, { view: 'link', className: styles.forgotBtn, onClick: onForgotBtnClick, dataTestId: getDataTestId(dataTestId, 'forgot-code-btn') }, forgotCodeBtnText)) : (React.createElement("div", { className: styles.forgotBtn }))));
+        showForgotCodeBtn ? (React.createElement(ButtonMobile, { view: 'link', className: styles.forgotBtn, onClick: onForgotBtnClick, dataTestId: getDataTestId(dataTestId, 'forgot-code-btn') }, forgotCodeBtnText)) : (React.createElement("div", { className: styles.forgotBtn }))));
 });
 
 export { PatternLock };

package/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: yvl29 */
+/* hash: 13t3a */
 :root {
 } /* deprecated */ :root {
     --color-light-text-negative: #d91d0b; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -26,15 +26,15 @@
     --size-m-height: 56px;
 } :root {
     --pattern-lock-max-width: 500px;
-} .pattern-lock__component_1an4o {
+} .pattern-lock__component_1g0p7 {
     max-width: var(--pattern-lock-max-width);
     margin: var(--gap-xs) 0 var(--gap-xl) 0
-} .pattern-lock__component_1an4o canvas {
+} .pattern-lock__component_1g0p7 canvas {
         display: block;
         margin: 0 auto;
-    } .pattern-lock__hidden_1an4o {
+    } .pattern-lock__hidden_1g0p7 {
     visibility: hidden;
-} .pattern-lock__error_1an4o {
+} .pattern-lock__error_1g0p7 {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
@@ -45,25 +45,25 @@
     padding: 0 var(--gap-m);
     min-height: 24px;
     color: var(--color-light-text-negative);
-} .pattern-lock__forgotBtn_1an4o {
+} .pattern-lock__forgotBtn_1g0p7 {
     display: block;
     min-height: var(--size-xs-height);
     margin: var(--gap-xl) auto 0;
 } @media screen and (min-width: 360px) {
-    .pattern-lock__forgotBtn_1an4o {
+    .pattern-lock__forgotBtn_1g0p7 {
         margin-top: var(--gap-2xl);
         min-height: var(--size-s-height);
     }
 
-    .pattern-lock__component_1an4o {
+    .pattern-lock__component_1g0p7 {
         margin-bottom: var(--gap-s);
     }
 } @media screen and (min-width: 390px) {
-    .pattern-lock__forgotBtn_1an4o {
+    .pattern-lock__forgotBtn_1g0p7 {
         min-height: var(--size-m-height);
     }
 
-    .pattern-lock__component_1an4o {
+    .pattern-lock__component_1g0p7 {
         margin-bottom: var(--gap-l);
     }
 }

package/esm/index.js

@@ -4,6 +4,7 @@ import 'tslib';
 import 'react';
 import 'react-canvas-pattern-lock';
 import 'classnames';
-import '@alfalab/core-components-button/esm';
+import '@alfalab/core-components-button/esm/mobile';
 import '@alfalab/core-components-gap/esm';
+import '@alfalab/core-components-shared/esm';
 import './utils.js';

package/index.css

@@ -1,4 +1,4 @@
-/* hash: yvl29 */
+/* hash: 13t3a */
 :root {
 } /* deprecated */ :root {
     --color-light-text-negative: #d91d0b; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -26,15 +26,15 @@
     --size-m-height: 56px;
 } :root {
     --pattern-lock-max-width: 500px;
-} .pattern-lock__component_1an4o {
+} .pattern-lock__component_1g0p7 {
     max-width: var(--pattern-lock-max-width);
     margin: var(--gap-xs) 0 var(--gap-xl) 0
-} .pattern-lock__component_1an4o canvas {
+} .pattern-lock__component_1g0p7 canvas {
         display: block;
         margin: 0 auto;
-    } .pattern-lock__hidden_1an4o {
+    } .pattern-lock__hidden_1g0p7 {
     visibility: hidden;
-} .pattern-lock__error_1an4o {
+} .pattern-lock__error_1g0p7 {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
@@ -45,25 +45,25 @@
     padding: 0 var(--gap-m);
     min-height: 24px;
     color: var(--color-light-text-negative);
-} .pattern-lock__forgotBtn_1an4o {
+} .pattern-lock__forgotBtn_1g0p7 {
     display: block;
     min-height: var(--size-xs-height);
     margin: var(--gap-xl) auto 0;
 } @media screen and (min-width: 360px) {
-    .pattern-lock__forgotBtn_1an4o {
+    .pattern-lock__forgotBtn_1g0p7 {
         margin-top: var(--gap-2xl);
         min-height: var(--size-s-height);
     }
 
-    .pattern-lock__component_1an4o {
+    .pattern-lock__component_1g0p7 {
         margin-bottom: var(--gap-s);
     }
 } @media screen and (min-width: 390px) {
-    .pattern-lock__forgotBtn_1an4o {
+    .pattern-lock__forgotBtn_1g0p7 {
         min-height: var(--size-m-height);
     }
 
-    .pattern-lock__component_1an4o {
+    .pattern-lock__component_1g0p7 {
         margin-bottom: var(--gap-l);
     }
 }

package/index.js

@@ -8,8 +8,9 @@ require('tslib');
 require('react');
 require('react-canvas-pattern-lock');
 require('classnames');
-require('@alfalab/core-components-button');
+require('@alfalab/core-components-button/mobile');
 require('@alfalab/core-components-gap');
+require('@alfalab/core-components-shared');
 require('./utils.js');
 
 

package/modern/Component.js

@@ -1,17 +1,13 @@
 import React, { forwardRef, useState, useEffect } from 'react';
 import { ReactCanvasPatternLock } from 'react-canvas-pattern-lock';
 import cn from 'classnames';
-import { Button } from '@alfalab/core-components-button/modern';
+import { ButtonMobile } from '@alfalab/core-components-button/modern/mobile';
 import { Gap } from '@alfalab/core-components-gap/modern';
+import { getDataTestId } from '@alfalab/core-components-shared/modern';
 import { THEME_STATE, DEFAULT_EXTRA_BOUNDS, OBSERVE_OPTIONS, OBSERVABLE_TOKENS } from './consts.js';
 import { getSizes, getTheme, getColorByToken, getDefaultObserveTarget } from './utils.js';
 
-const getDataTestId = (dataTestId, element) => {
-    const elementPart = element ? `-${element.toLowerCase()}` : '';
-    return dataTestId ? `${dataTestId}${elementPart}` : undefined;
-};
-
-const styles = {"component":"pattern-lock__component_1an4o","hidden":"pattern-lock__hidden_1an4o","error":"pattern-lock__error_1an4o","forgotBtn":"pattern-lock__forgotBtn_1an4o"};
+const styles = {"component":"pattern-lock__component_1g0p7","hidden":"pattern-lock__hidden_1g0p7","error":"pattern-lock__error_1g0p7","forgotBtn":"pattern-lock__forgotBtn_1g0p7"};
 require('./index.css')
 
 const PatternLock = forwardRef(({ observeTokens = false, observerParams = {}, justifyNodes = 'space-between', className, error, dataTestId, forgotCodeBtnText = 'Забыли код?', showForgotCodeBtn = false, onForgotBtnClick, extraBounds = DEFAULT_EXTRA_BOUNDS, ...restProps }, ref) => {
@@ -49,7 +45,7 @@ const PatternLock = forwardRef(({ observeTokens = false, observerParams = {}, ju
         React.createElement("div", { className: styles.error }, error),
         React.createElement(Gap, { size: '3xl' }),
         React.createElement(ReactCanvasPatternLock, { ...restProps, ...params, ref: ref, rows: 3, cols: 3, justifyNodes: justifyNodes, extraBounds: extraBounds }),
-        showForgotCodeBtn ? (React.createElement(Button, { view: 'link', className: styles.forgotBtn, onClick: onForgotBtnClick, dataTestId: getDataTestId(dataTestId, 'forgot-code-btn') }, forgotCodeBtnText)) : (React.createElement("div", { className: styles.forgotBtn }))));
+        showForgotCodeBtn ? (React.createElement(ButtonMobile, { view: 'link', className: styles.forgotBtn, onClick: onForgotBtnClick, dataTestId: getDataTestId(dataTestId, 'forgot-code-btn') }, forgotCodeBtnText)) : (React.createElement("div", { className: styles.forgotBtn }))));
 });
 
 export { PatternLock };

package/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: yvl29 */
+/* hash: 13t3a */
 :root {
 } /* deprecated */ :root {
     --color-light-text-negative: #d91d0b; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -26,15 +26,15 @@
     --size-m-height: 56px;
 } :root {
     --pattern-lock-max-width: 500px;
-} .pattern-lock__component_1an4o {
+} .pattern-lock__component_1g0p7 {
     max-width: var(--pattern-lock-max-width);
     margin: var(--gap-xs) 0 var(--gap-xl) 0
-} .pattern-lock__component_1an4o canvas {
+} .pattern-lock__component_1g0p7 canvas {
         display: block;
         margin: 0 auto;
-    } .pattern-lock__hidden_1an4o {
+    } .pattern-lock__hidden_1g0p7 {
     visibility: hidden;
-} .pattern-lock__error_1an4o {
+} .pattern-lock__error_1g0p7 {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
@@ -45,25 +45,25 @@
     padding: 0 var(--gap-m);
     min-height: 24px;
     color: var(--color-light-text-negative);
-} .pattern-lock__forgotBtn_1an4o {
+} .pattern-lock__forgotBtn_1g0p7 {
     display: block;
     min-height: var(--size-xs-height);
     margin: var(--gap-xl) auto 0;
 } @media screen and (min-width: 360px) {
-    .pattern-lock__forgotBtn_1an4o {
+    .pattern-lock__forgotBtn_1g0p7 {
         margin-top: var(--gap-2xl);
         min-height: var(--size-s-height);
     }
 
-    .pattern-lock__component_1an4o {
+    .pattern-lock__component_1g0p7 {
         margin-bottom: var(--gap-s);
     }
 } @media screen and (min-width: 390px) {
-    .pattern-lock__forgotBtn_1an4o {
+    .pattern-lock__forgotBtn_1g0p7 {
         min-height: var(--size-m-height);
     }
 
-    .pattern-lock__component_1an4o {
+    .pattern-lock__component_1g0p7 {
         margin-bottom: var(--gap-l);
     }
 }

package/modern/index.js

@@ -3,6 +3,7 @@ export { THEME_STATE } from './consts.js';
 import 'react';
 import 'react-canvas-pattern-lock';
 import 'classnames';
-import '@alfalab/core-components-button/modern';
+import '@alfalab/core-components-button/modern/mobile';
 import '@alfalab/core-components-gap/modern';
+import '@alfalab/core-components-shared/modern';
 import './utils.js';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-pattern-lock",
-    "version": "1.2.4",
+    "version": "1.3.0",
     "description": "Pattern lock",
     "keywords": [],
     "license": "MIT",
@@ -15,8 +15,9 @@
         "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-button": "^8.5.1",
-        "@alfalab/core-components-gap": "^1.1.3",
+        "@alfalab/core-components-button": "^9.0.0",
+        "@alfalab/core-components-gap": "^1.2.0",
+        "@alfalab/core-components-shared": "^0.1.0",
         "react-canvas-pattern-lock": "^1.1.1",
         "classnames": "^2.3.1",
         "tslib": "^2.4.0"

package/src/Component.tsx

@@ -0,0 +1,114 @@
+import React, { forwardRef, useEffect, useState } from 'react';
+import type { Theme, TPatternLockInstance } from 'react-canvas-pattern-lock';
+import { ReactCanvasPatternLock } from 'react-canvas-pattern-lock';
+import cn from 'classnames';
+
+import { ButtonMobile } from '@alfalab/core-components-button/mobile';
+import { Gap } from '@alfalab/core-components-gap';
+import { getDataTestId } from '@alfalab/core-components-shared';
+
+import { DEFAULT_EXTRA_BOUNDS, OBSERVABLE_TOKENS, OBSERVE_OPTIONS, THEME_STATE } from './consts';
+import type { PatternLockProps } from './typings';
+import { getColorByToken, getDefaultObserveTarget, getSizes, getTheme } from './utils';
+
+import styles from './index.module.css';
+
+export const PatternLock = forwardRef<TPatternLockInstance, PatternLockProps>(
+    (
+        {
+            observeTokens = false,
+            observerParams = {},
+            justifyNodes = 'space-between',
+            className,
+            error,
+            dataTestId,
+            forgotCodeBtnText = 'Забыли код?',
+            showForgotCodeBtn = false,
+            onForgotBtnClick,
+            extraBounds = DEFAULT_EXTRA_BOUNDS,
+            ...restProps
+        },
+        ref,
+    ) => {
+        const [params, setParams] = useState<
+            { theme: Theme; width: number; height: number } | undefined
+        >();
+
+        useEffect(() => {
+            const { elementSizes, width, height } = getSizes();
+
+            setParams({
+                theme: getTheme(elementSizes),
+                width,
+                height,
+            });
+        }, []);
+
+        useEffect(() => {
+            let styleObserver: MutationObserver | null = null;
+
+            if (observeTokens) {
+                const { options = OBSERVE_OPTIONS, getTarget = getDefaultObserveTarget } =
+                    observerParams;
+
+                styleObserver = new MutationObserver(() =>
+                    setParams((prevState) => {
+                        const { width, height, elementSizes } = getSizes();
+
+                        if (!prevState) {
+                            return { theme: getTheme(elementSizes), width, height };
+                        }
+
+                        const prevBgColor = prevState.theme[THEME_STATE.INITIAL].colors.bg;
+                        const themeChanged = prevBgColor !== getColorByToken(OBSERVABLE_TOKENS.BG);
+
+                        if (themeChanged) return { ...prevState, theme: getTheme(elementSizes) };
+
+                        return prevState;
+                    }),
+                );
+
+                styleObserver.observe(getTarget(), options);
+            }
+
+            return () => styleObserver?.disconnect();
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [observeTokens]);
+
+        return (
+            <div
+                className={cn(styles.component, className, { [styles.hidden]: !params })}
+                data-test-id={dataTestId}
+            >
+                <Gap size='xs' />
+
+                <div className={styles.error}>{error}</div>
+
+                <Gap size='3xl' />
+
+                <ReactCanvasPatternLock
+                    {...restProps}
+                    {...params}
+                    ref={ref}
+                    rows={3}
+                    cols={3}
+                    justifyNodes={justifyNodes}
+                    extraBounds={extraBounds}
+                />
+
+                {showForgotCodeBtn ? (
+                    <ButtonMobile
+                        view='link'
+                        className={styles.forgotBtn}
+                        onClick={onForgotBtnClick}
+                        dataTestId={getDataTestId(dataTestId, 'forgot-code-btn')}
+                    >
+                        {forgotCodeBtnText}
+                    </ButtonMobile>
+                ) : (
+                    <div className={styles.forgotBtn} />
+                )}
+            </div>
+        );
+    },
+);

package/src/consts.ts

@@ -0,0 +1,30 @@
+import type { ReactPatternLockProps } from 'react-canvas-pattern-lock';
+
+import type { ObservableTokens } from './typings';
+
+export const OBSERVE_OPTIONS: MutationObserverInit = {
+    childList: true,
+    attributes: false,
+    characterData: false,
+    subtree: true,
+};
+
+export const DEFAULT_EXTRA_BOUNDS: ReactPatternLockProps['extraBounds'] = [75, 50, 75, 50];
+
+export const OBSERVABLE_TOKENS: ObservableTokens = {
+    ACCENT_INITIAL: '--color-light-graphic-primary',
+    ACCENT_SUCCESS: '--color-light-graphic-positive',
+    ACCENT_FAILURE: '--color-light-graphic-negative',
+    PRIMARY: '--color-light-graphic-tertiary',
+    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',
+};
+
+export const THEME_STATE = {
+    INITIAL: 'initial',
+    SUCCESS: 'success',
+    FAILURE: 'failure',
+};

package/src/index.module.css

@@ -0,0 +1,54 @@
+@import '@alfalab/core-components-themes/src/default.css';
+@import './vars.css';
+
+.component {
+    max-width: var(--pattern-lock-max-width);
+    margin: var(--gap-xs) 0 var(--gap-xl) 0;
+
+    & canvas {
+        display: block;
+        margin: 0 auto;
+    }
+}
+
+.hidden {
+    visibility: hidden;
+}
+
+.error {
+    @mixin paragraph_primary_medium;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 var(--gap-m);
+    min-height: 24px;
+    color: var(--color-light-text-negative);
+}
+
+.forgotBtn {
+    display: block;
+    min-height: var(--size-xs-height);
+    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/src/index.ts

@@ -0,0 +1,3 @@
+export type { PatternLockProps } from './typings';
+export * from './Component';
+export { THEME_STATE } from './consts';

package/src/typings.ts

@@ -0,0 +1,71 @@
+import { MouseEvent, ReactNode } from 'react';
+import { ReactPatternLockProps } from 'react-canvas-pattern-lock';
+
+type ConditionalProps =
+    | {
+          /**
+           * Текст кнопки "забыли код"
+           * @default "Забыли код?"
+           */
+          showForgotCodeBtn: true;
+
+          /**
+           * Текст кнопки "забыли код"
+           * @default "Забыли код?"
+           */
+          forgotCodeBtnText?: string;
+
+          /**
+           * Коллбэк, вызываемый при клике на кнопку "Забыли код"
+           */
+          onForgotBtnClick: (event: MouseEvent<HTMLButtonElement>) => void;
+      }
+    | {
+          showForgotCodeBtn?: false;
+          onForgotBtnClick?: never;
+          forgotCodeBtnText?: never;
+      };
+
+export type PatternLockProps = {
+    /**
+     * Дополнительный класс.
+     */
+    className?: string;
+
+    /**
+     * Сообщение об ошибке
+     */
+    error?: ReactNode;
+
+    /**
+     * Идентификатор для систем автоматизированного тестирования.
+     */
+    dataTestId?: string;
+
+    /**
+     * Следить ли за изменениями значений цветовых токенов.
+     * @default false
+     */
+    observeTokens?: boolean;
+
+    /**
+     * Параметры MutationObserver для наблюдения за изменениями режима(css custom properties).
+     */
+    observerParams?: {
+        getTarget?: () => Node;
+        options?: MutationObserverInit;
+    };
+} & Omit<ReactPatternLockProps, 'theme' | 'width' | 'height' | 'rows' | 'cols'> &
+    ConditionalProps;
+
+export type ObservableTokens = {
+    ACCENT_INITIAL: string;
+    ACCENT_SUCCESS: string;
+    ACCENT_FAILURE: string;
+    RING_BG_INITIAL: string;
+    SELECTED_RING_BG_INITIAL: string;
+    SELECTED_RING_BG_SUCCESS: string;
+    SELECTED_RING_BG_FAILURE: string;
+    PRIMARY: string;
+    BG: string;
+};

package/src/utils.ts

@@ -0,0 +1,84 @@
+import { Theme, ThemeParams } from 'react-canvas-pattern-lock';
+
+import { OBSERVABLE_TOKENS, THEME_STATE } from './consts';
+
+export function getDefaultObserveTarget() {
+    return document.head;
+}
+
+export function getColorByToken(token: string) {
+    return getComputedStyle(document.documentElement).getPropertyValue(token);
+}
+
+export const getSizes = (() => {
+    const COMMON_SIZES = {
+        lineWidth: 6,
+        nodeRing: 0,
+        nodeCore: 12,
+    };
+
+    let cachedSize: { elementSizes: ThemeParams['dimens']; width: number; height: number };
+
+    return () => {
+        if (cachedSize) {
+            return cachedSize;
+        }
+
+        if (window.matchMedia('(min-width: 390px)').matches) {
+            cachedSize = {
+                elementSizes: { ...COMMON_SIZES, nodeRadius: 43 },
+                width: 322,
+                height: 322,
+            };
+        } else if (window.matchMedia('(min-width: 360px)').matches) {
+            cachedSize = {
+                elementSizes: { ...COMMON_SIZES, nodeRadius: 38 },
+                width: 292,
+                height: 292,
+            };
+        } else {
+            cachedSize = {
+                elementSizes: { ...COMMON_SIZES, nodeRadius: 32 },
+                width: 240,
+                height: 240,
+            };
+        }
+
+        return cachedSize;
+    };
+})();
+
+export function getTheme(dimens: ThemeParams['dimens']): Theme {
+    const baseColors = {
+        primary: getColorByToken(OBSERVABLE_TOKENS.PRIMARY),
+        bg: getColorByToken(OBSERVABLE_TOKENS.BG),
+        ringBg: getColorByToken(OBSERVABLE_TOKENS.RING_BG_INITIAL),
+    };
+
+    return {
+        [THEME_STATE.INITIAL]: {
+            colors: {
+                ...baseColors,
+                accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_INITIAL),
+                selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_INITIAL),
+            },
+            dimens,
+        },
+        [THEME_STATE.SUCCESS]: {
+            colors: {
+                ...baseColors,
+                accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_SUCCESS),
+                selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_SUCCESS),
+            },
+            dimens,
+        },
+        [THEME_STATE.FAILURE]: {
+            colors: {
+                ...baseColors,
+                accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_FAILURE),
+                selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_FAILURE),
+            },
+            dimens,
+        },
+    };
+}

package/src/vars.css

@@ -0,0 +1,3 @@
+:root {
+    --pattern-lock-max-width: 500px;
+}