@alfalab/core-components-pattern-lock 1.0.2 → 1.1.0

package/Component.d.ts

@@ -1,14 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
 import { TPatternLockInstance } from 'react-canvas-pattern-lock';
-declare const PatternLock: React.ForwardRefExoticComponent<{
-    className?: string | undefined;
-    error?: React.ReactNode;
-    dataTestId?: string | undefined;
-    observeTokens?: boolean | undefined;
-    observerParams?: {
-        getTarget?: (() => Node) | undefined;
-        options?: MutationObserverInit | undefined;
-    } | undefined;
-} & Omit<import("react-canvas-pattern-lock").ReactPatternLockProps, "theme" | "width" | "height" | "rows" | "cols"> & React.RefAttributes<TPatternLockInstance>>;
+import { PatternLockProps } from "./typings";
+declare const PatternLock: React.ForwardRefExoticComponent<PatternLockProps & React.RefAttributes<TPatternLockInstance>>;
 export { PatternLock };

package/Component.js

@@ -1,24 +1,31 @@
 'use strict';
 
-var utils = require('./utils-a2a5e3e1.js');
+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 coreComponentsGap = require('@alfalab/core-components-gap');
 var consts = require('./consts.js');
+var utils = require('./utils.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"pattern-lock__component_188cp","hidden":"pattern-lock__hidden_188cp","error":"pattern-lock__error_188cp"};
+var getDataTestId = function (dataTestId, element) {
+    var elementPart = element ? "-".concat(element.toLowerCase()) : '';
+    return dataTestId ? "".concat(dataTestId).concat(elementPart) : undefined;
+};
+
+var styles = {"component":"pattern-lock__component_1dmbz","hidden":"pattern-lock__hidden_1dmbz","error":"pattern-lock__error_1dmbz","forgotBtn":"pattern-lock__forgotBtn_1dmbz"};
 require('./index.css')
 
 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, restProps = utils.__rest(_a, ["observeTokens", "observerParams", "justifyNodes", "className", "error", "dataTestId"]);
-    var _f = React.useState(), params = _f[0], setParams = _f[1];
+    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, restProps = tslib.__rest(_a, ["observeTokens", "observerParams", "justifyNodes", "className", "error", "dataTestId", "forgotCodeBtnText", "showForgotCodeBtn", "onForgotBtnClick"]);
+    var _h = React.useState(), params = _h[0], setParams = _h[1];
     React.useEffect(function () {
         var _a = utils.getSizes(), elementSizes = _a.elementSizes, width = _a.width, height = _a.height;
         setParams({
@@ -40,7 +47,7 @@ var PatternLock = React.forwardRef(function (_a, ref) {
                     var prevBgColor = prevState.theme[consts.THEME_STATE.INITIAL].colors.bg;
                     var themeChanged = prevBgColor !== utils.getColorByToken(consts.OBSERVABLE_TOKENS.BG);
                     if (themeChanged)
-                        return utils.__assign(utils.__assign({}, prevState), { theme: utils.getTheme(elementSizes) });
+                        return tslib.__assign(tslib.__assign({}, prevState), { theme: utils.getTheme(elementSizes) });
                     return prevState;
                 });
             });
@@ -50,11 +57,11 @@ var PatternLock = React.forwardRef(function (_a, ref) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [observeTokens]);
     return (React__default.default.createElement("div", { className: cn__default.default(styles.component, className, (_b = {}, _b[styles.hidden] = !params, _b)), "data-test-id": dataTestId },
-        React__default.default.createElement(coreComponentsGap.Gap, { size: 'm' }),
-        React__default.default.createElement(coreComponentsGap.Gap, { size: 's' }),
+        React__default.default.createElement(coreComponentsGap.Gap, { size: 'xs' }),
         React__default.default.createElement("div", { className: styles.error }, error),
-        React__default.default.createElement(coreComponentsGap.Gap, { size: 'xl' }),
-        React__default.default.createElement(reactCanvasPatternLock.ReactCanvasPatternLock, utils.__assign({}, restProps, params, { ref: ref, rows: 3, cols: 3, justifyNodes: justifyNodes }))));
+        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 })),
+        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 }))));
 });
 
 exports.PatternLock = PatternLock;

package/cssm/Component.d.ts

@@ -1,14 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
 import { TPatternLockInstance } from 'react-canvas-pattern-lock';
-declare const PatternLock: React.ForwardRefExoticComponent<{
-    className?: string | undefined;
-    error?: React.ReactNode;
-    dataTestId?: string | undefined;
-    observeTokens?: boolean | undefined;
-    observerParams?: {
-        getTarget?: (() => Node) | undefined;
-        options?: MutationObserverInit | undefined;
-    } | undefined;
-} & Omit<import("react-canvas-pattern-lock").ReactPatternLockProps, "theme" | "width" | "height" | "rows" | "cols"> & React.RefAttributes<TPatternLockInstance>>;
+import { PatternLockProps } from "./typings";
+declare const PatternLock: React.ForwardRefExoticComponent<PatternLockProps & React.RefAttributes<TPatternLockInstance>>;
 export { PatternLock };

package/cssm/Component.js

@@ -1,11 +1,13 @@
 'use strict';
 
-var utils = require('./utils-5745f540.js');
+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 coreComponentsGap = require('@alfalab/core-components-gap/cssm');
 var consts = require('./consts.js');
+var utils = require('./utils.js');
 var styles = require('./index.module.css');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -14,10 +16,15 @@ 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, restProps = utils.__rest(_a, ["observeTokens", "observerParams", "justifyNodes", "className", "error", "dataTestId"]);
-    var _f = React.useState(), params = _f[0], setParams = _f[1];
+    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, restProps = tslib.__rest(_a, ["observeTokens", "observerParams", "justifyNodes", "className", "error", "dataTestId", "forgotCodeBtnText", "showForgotCodeBtn", "onForgotBtnClick"]);
+    var _h = React.useState(), params = _h[0], setParams = _h[1];
     React.useEffect(function () {
         var _a = utils.getSizes(), elementSizes = _a.elementSizes, width = _a.width, height = _a.height;
         setParams({
@@ -39,7 +46,7 @@ var PatternLock = React.forwardRef(function (_a, ref) {
                     var prevBgColor = prevState.theme[consts.THEME_STATE.INITIAL].colors.bg;
                     var themeChanged = prevBgColor !== utils.getColorByToken(consts.OBSERVABLE_TOKENS.BG);
                     if (themeChanged)
-                        return utils.__assign(utils.__assign({}, prevState), { theme: utils.getTheme(elementSizes) });
+                        return tslib.__assign(tslib.__assign({}, prevState), { theme: utils.getTheme(elementSizes) });
                     return prevState;
                 });
             });
@@ -49,11 +56,11 @@ var PatternLock = React.forwardRef(function (_a, ref) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [observeTokens]);
     return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, className, (_b = {}, _b[styles__default.default.hidden] = !params, _b)), "data-test-id": dataTestId },
-        React__default.default.createElement(coreComponentsGap.Gap, { size: 'm' }),
-        React__default.default.createElement(coreComponentsGap.Gap, { size: 's' }),
+        React__default.default.createElement(coreComponentsGap.Gap, { size: 'xs' }),
         React__default.default.createElement("div", { className: styles__default.default.error }, error),
-        React__default.default.createElement(coreComponentsGap.Gap, { size: 'xl' }),
-        React__default.default.createElement(reactCanvasPatternLock.ReactCanvasPatternLock, utils.__assign({}, restProps, params, { ref: ref, rows: 3, cols: 3, justifyNodes: justifyNodes }))));
+        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 })),
+        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 }))));
 });
 
 exports.PatternLock = PatternLock;

package/cssm/index.js

@@ -2,11 +2,13 @@
 
 var Component = require('./Component.js');
 var consts = require('./consts.js');
-require('./utils-5745f540.js');
+require('tslib');
 require('react');
 require('react-canvas-pattern-lock');
 require('classnames');
+require('@alfalab/core-components-button/cssm');
 require('@alfalab/core-components-gap/cssm');
+require('./utils.js');
 require('./index.module.css');
 
 

package/cssm/index.module.css

@@ -1,34 +1,39 @@
 :root {
+} /* deprecated */ :root {
     --color-light-text-negative: #d91d0b;
-}
-:root {
+} :root {
+} :root {
+} :root {
 
     /* Hard */
 
     /* Up */
 
     /* Hard up */
-}
-:root {
+} :root {
+} :root {
     --gap-xs: 8px;
+    --gap-s: 12px;
     --gap-m: 16px;
+    --gap-l: 20px;
     --gap-xl: 24px;
-}
-:root {
+    --gap-2xl: 32px;
+} :root {
+} :root {
+    --size-xs-height: 40px;
+    --size-s-height: 48px;
+    --size-m-height: 56px;
+} :root {
     --pattern-lock-max-width: 500px;
-}
-.component {
+} .component {
     max-width: var(--pattern-lock-max-width);
     margin: var(--gap-xs) 0 var(--gap-xl) 0
-}
-.component canvas {
+} .component canvas {
         display: block;
         margin: 0 auto;
-    }
-.hidden {
+    } .hidden {
     visibility: hidden;
-}
-.error {
+} .error {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
@@ -39,4 +44,25 @@
     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/cssm/typings.d.ts

@@ -1,5 +1,25 @@
-import { ReactNode } from 'react';
+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;
+};
 type PatternLockProps = {
     /**
      * Дополнительный класс.
@@ -25,7 +45,7 @@ type PatternLockProps = {
         getTarget?: () => Node;
         options?: MutationObserverInit;
     };
-} & Omit<ReactPatternLockProps, 'theme' | 'width' | 'height' | 'rows' | 'cols'>;
+} & Omit<ReactPatternLockProps, 'theme' | 'width' | 'height' | 'rows' | 'cols'> & ConditionalProps;
 type ObservableTokens = {
     ACCENT_INITIAL: string;
     ACCENT_SUCCESS: string;

package/cssm/utils.d.ts

@@ -0,0 +1,10 @@
+import { Theme, ThemeParams } from 'react-canvas-pattern-lock';
+declare function getDefaultObserveTarget(): HTMLHeadElement;
+declare function getColorByToken(token: string): string;
+declare const getSizes: () => {
+    elementSizes: ThemeParams['dimens'];
+    width: number;
+    height: number;
+};
+declare function getTheme(dimens: ThemeParams['dimens']): Theme;
+export { getDefaultObserveTarget, getColorByToken, getSizes, getTheme };

package/cssm/utils.js

@@ -1,11 +1,73 @@
 'use strict';
 
-var utils = require('./utils-5745f540.js');
-require('./consts.js');
+var tslib = require('tslib');
+var consts = require('./consts.js');
 
+function getDefaultObserveTarget() {
+    return document.head;
+}
+function getColorByToken(token) {
+    return getComputedStyle(document.documentElement).getPropertyValue(token);
+}
+var getSizes = (function () {
+    var COMMON_SIZES = {
+        lineWidth: 6,
+        nodeRing: 0,
+        nodeCore: 12,
+    };
+    var cachedSize;
+    return function () {
+        if (cachedSize) {
+            return cachedSize;
+        }
+        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,
+            };
+        }
+        return cachedSize;
+    };
+})();
+function getTheme(dimens) {
+    var _a;
+    var baseColors = {
+        primary: getColorByToken(consts.OBSERVABLE_TOKENS.PRIMARY),
+        bg: getColorByToken(consts.OBSERVABLE_TOKENS.BG),
+        ringBg: getColorByToken(consts.OBSERVABLE_TOKENS.RING_BG_INITIAL),
+    };
+    return _a = {},
+        _a[consts.THEME_STATE.INITIAL] = {
+            colors: tslib.__assign(tslib.__assign({}, baseColors), { accent: getColorByToken(consts.OBSERVABLE_TOKENS.ACCENT_INITIAL), selectedRingBg: getColorByToken(consts.OBSERVABLE_TOKENS.SELECTED_RING_BG_INITIAL) }),
+            dimens: dimens,
+        },
+        _a[consts.THEME_STATE.SUCCESS] = {
+            colors: tslib.__assign(tslib.__assign({}, baseColors), { accent: getColorByToken(consts.OBSERVABLE_TOKENS.ACCENT_SUCCESS), selectedRingBg: getColorByToken(consts.OBSERVABLE_TOKENS.SELECTED_RING_BG_SUCCESS) }),
+            dimens: dimens,
+        },
+        _a[consts.THEME_STATE.FAILURE] = {
+            colors: tslib.__assign(tslib.__assign({}, baseColors), { accent: getColorByToken(consts.OBSERVABLE_TOKENS.ACCENT_FAILURE), selectedRingBg: getColorByToken(consts.OBSERVABLE_TOKENS.SELECTED_RING_BG_FAILURE) }),
+            dimens: dimens,
+        },
+        _a;
+}
 
-
-exports.getColorByToken = utils.getColorByToken;
-exports.getDefaultObserveTarget = utils.getDefaultObserveTarget;
-exports.getSizes = utils.getSizes;
-exports.getTheme = utils.getTheme;
+exports.getColorByToken = getColorByToken;
+exports.getDefaultObserveTarget = getDefaultObserveTarget;
+exports.getSizes = getSizes;
+exports.getTheme = getTheme;

package/esm/Component.d.ts

@@ -1,14 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
 import { TPatternLockInstance } from 'react-canvas-pattern-lock';
-declare const PatternLock: React.ForwardRefExoticComponent<{
-    className?: string | undefined;
-    error?: React.ReactNode;
-    dataTestId?: string | undefined;
-    observeTokens?: boolean | undefined;
-    observerParams?: {
-        getTarget?: (() => Node) | undefined;
-        options?: MutationObserverInit | undefined;
-    } | undefined;
-} & Omit<import("react-canvas-pattern-lock").ReactPatternLockProps, "theme" | "width" | "height" | "rows" | "cols"> & React.RefAttributes<TPatternLockInstance>>;
+import { PatternLockProps } from "./typings";
+declare const PatternLock: React.ForwardRefExoticComponent<PatternLockProps & React.RefAttributes<TPatternLockInstance>>;
 export { PatternLock };

package/esm/Component.js

@@ -1,17 +1,24 @@
-import { _ as __rest, g as getSizes, a as getTheme, b as getColorByToken, c as __assign, d as getDefaultObserveTarget } from './utils-30ae747f.js';
+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 { Gap } from '@alfalab/core-components-gap/esm';
 import { THEME_STATE, OBSERVE_OPTIONS, OBSERVABLE_TOKENS } from './consts.js';
+import { getSizes, getTheme, getColorByToken, getDefaultObserveTarget } from './utils.js';
 
-var styles = {"component":"pattern-lock__component_188cp","hidden":"pattern-lock__hidden_188cp","error":"pattern-lock__error_188cp"};
+var getDataTestId = function (dataTestId, element) {
+    var elementPart = element ? "-".concat(element.toLowerCase()) : '';
+    return dataTestId ? "".concat(dataTestId).concat(elementPart) : undefined;
+};
+
+var styles = {"component":"pattern-lock__component_1dmbz","hidden":"pattern-lock__hidden_1dmbz","error":"pattern-lock__error_1dmbz","forgotBtn":"pattern-lock__forgotBtn_1dmbz"};
 require('./index.css')
 
 var PatternLock = 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, restProps = __rest(_a, ["observeTokens", "observerParams", "justifyNodes", "className", "error", "dataTestId"]);
-    var _f = useState(), params = _f[0], setParams = _f[1];
+    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, restProps = __rest(_a, ["observeTokens", "observerParams", "justifyNodes", "className", "error", "dataTestId", "forgotCodeBtnText", "showForgotCodeBtn", "onForgotBtnClick"]);
+    var _h = useState(), params = _h[0], setParams = _h[1];
     useEffect(function () {
         var _a = getSizes(), elementSizes = _a.elementSizes, width = _a.width, height = _a.height;
         setParams({
@@ -43,11 +50,11 @@ var PatternLock = forwardRef(function (_a, ref) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [observeTokens]);
     return (React.createElement("div", { className: cn(styles.component, className, (_b = {}, _b[styles.hidden] = !params, _b)), "data-test-id": dataTestId },
-        React.createElement(Gap, { size: 'm' }),
-        React.createElement(Gap, { size: 's' }),
+        React.createElement(Gap, { size: 'xs' }),
         React.createElement("div", { className: styles.error }, error),
-        React.createElement(Gap, { size: 'xl' }),
-        React.createElement(ReactCanvasPatternLock, __assign({}, restProps, params, { ref: ref, rows: 3, cols: 3, justifyNodes: justifyNodes }))));
+        React.createElement(Gap, { size: '3xl' }),
+        React.createElement(ReactCanvasPatternLock, __assign({}, restProps, params, { ref: ref, rows: 3, cols: 3, justifyNodes: justifyNodes })),
+        showForgotCodeBtn ? (React.createElement(Button, { 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,35 +1,40 @@
-/* hash: hkuo5 */
+/* hash: rkcoc */
 :root {
+} /* deprecated */ :root {
     --color-light-text-negative: #d91d0b;
-}
-:root {
+} :root {
+} :root {
+} :root {
 
     /* Hard */
 
     /* Up */
 
     /* Hard up */
-}
-:root {
+} :root {
+} :root {
     --gap-xs: 8px;
+    --gap-s: 12px;
     --gap-m: 16px;
+    --gap-l: 20px;
     --gap-xl: 24px;
-}
-:root {
+    --gap-2xl: 32px;
+} :root {
+} :root {
+    --size-xs-height: 40px;
+    --size-s-height: 48px;
+    --size-m-height: 56px;
+} :root {
     --pattern-lock-max-width: 500px;
-}
-.pattern-lock__component_188cp {
+} .pattern-lock__component_1dmbz {
     max-width: var(--pattern-lock-max-width);
     margin: var(--gap-xs) 0 var(--gap-xl) 0
-}
-.pattern-lock__component_188cp canvas {
+} .pattern-lock__component_1dmbz canvas {
         display: block;
         margin: 0 auto;
-    }
-.pattern-lock__hidden_188cp {
+    } .pattern-lock__hidden_1dmbz {
     visibility: hidden;
-}
-.pattern-lock__error_188cp {
+} .pattern-lock__error_1dmbz {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
@@ -40,4 +45,25 @@
     padding: 0 var(--gap-m);
     min-height: 24px;
     color: var(--color-light-text-negative);
+} .pattern-lock__forgotBtn_1dmbz {
+    display: block;
+    min-height: var(--size-xs-height);
+    margin: var(--gap-xl) auto 0;
+} @media screen and (min-width: 360px) {
+    .pattern-lock__forgotBtn_1dmbz {
+        margin-top: var(--gap-2xl);
+        min-height: var(--size-s-height);
+    }
+
+    .pattern-lock__component_1dmbz {
+        margin-bottom: var(--gap-s);
+    }
+} @media screen and (min-width: 390px) {
+    .pattern-lock__forgotBtn_1dmbz {
+        min-height: var(--size-m-height);
+    }
+
+    .pattern-lock__component_1dmbz {
+        margin-bottom: var(--gap-l);
+    }
 }

package/esm/index.js

@@ -1,7 +1,9 @@
 export { PatternLock } from './Component.js';
 export { THEME_STATE } from './consts.js';
-import './utils-30ae747f.js';
+import 'tslib';
 import 'react';
 import 'react-canvas-pattern-lock';
 import 'classnames';
+import '@alfalab/core-components-button/esm';
 import '@alfalab/core-components-gap/esm';
+import './utils.js';

package/esm/typings.d.ts

@@ -1,5 +1,25 @@
-import { ReactNode } from 'react';
+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;
+};
 type PatternLockProps = {
     /**
      * Дополнительный класс.
@@ -25,7 +45,7 @@ type PatternLockProps = {
         getTarget?: () => Node;
         options?: MutationObserverInit;
     };
-} & Omit<ReactPatternLockProps, 'theme' | 'width' | 'height' | 'rows' | 'cols'>;
+} & Omit<ReactPatternLockProps, 'theme' | 'width' | 'height' | 'rows' | 'cols'> & ConditionalProps;
 type ObservableTokens = {
     ACCENT_INITIAL: string;
     ACCENT_SUCCESS: string;

package/esm/utils.d.ts

@@ -0,0 +1,10 @@
+import { Theme, ThemeParams } from 'react-canvas-pattern-lock';
+declare function getDefaultObserveTarget(): HTMLHeadElement;
+declare function getColorByToken(token: string): string;
+declare const getSizes: () => {
+    elementSizes: ThemeParams['dimens'];
+    width: number;
+    height: number;
+};
+declare function getTheme(dimens: ThemeParams['dimens']): Theme;
+export { getDefaultObserveTarget, getColorByToken, getSizes, getTheme };

package/esm/utils.js

@@ -1,2 +1,68 @@
-export { b as getColorByToken, d as getDefaultObserveTarget, g as getSizes, a as getTheme } from './utils-30ae747f.js';
-import './consts.js';
+import { __assign } from 'tslib';
+import { OBSERVABLE_TOKENS, THEME_STATE } from './consts.js';
+
+function getDefaultObserveTarget() {
+    return document.head;
+}
+function getColorByToken(token) {
+    return getComputedStyle(document.documentElement).getPropertyValue(token);
+}
+var getSizes = (function () {
+    var COMMON_SIZES = {
+        lineWidth: 6,
+        nodeRing: 0,
+        nodeCore: 12,
+    };
+    var cachedSize;
+    return function () {
+        if (cachedSize) {
+            return cachedSize;
+        }
+        if (window.matchMedia('(min-width: 390px)').matches) {
+            cachedSize = {
+                elementSizes: __assign(__assign({}, COMMON_SIZES), { nodeRadius: 43 }),
+                width: 322,
+                height: 322,
+            };
+        }
+        else if (window.matchMedia('(min-width: 360px)').matches) {
+            cachedSize = {
+                elementSizes: __assign(__assign({}, COMMON_SIZES), { nodeRadius: 38 }),
+                width: 292,
+                height: 292,
+            };
+        }
+        else {
+            cachedSize = {
+                elementSizes: __assign(__assign({}, COMMON_SIZES), { nodeRadius: 32 }),
+                width: 240,
+                height: 240,
+            };
+        }
+        return cachedSize;
+    };
+})();
+function getTheme(dimens) {
+    var _a;
+    var baseColors = {
+        primary: getColorByToken(OBSERVABLE_TOKENS.PRIMARY),
+        bg: getColorByToken(OBSERVABLE_TOKENS.BG),
+        ringBg: getColorByToken(OBSERVABLE_TOKENS.RING_BG_INITIAL),
+    };
+    return _a = {},
+        _a[THEME_STATE.INITIAL] = {
+            colors: __assign(__assign({}, baseColors), { accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_INITIAL), selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_INITIAL) }),
+            dimens: dimens,
+        },
+        _a[THEME_STATE.SUCCESS] = {
+            colors: __assign(__assign({}, baseColors), { accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_SUCCESS), selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_SUCCESS) }),
+            dimens: dimens,
+        },
+        _a[THEME_STATE.FAILURE] = {
+            colors: __assign(__assign({}, baseColors), { accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_FAILURE), selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_FAILURE) }),
+            dimens: dimens,
+        },
+        _a;
+}
+
+export { getColorByToken, getDefaultObserveTarget, getSizes, getTheme };