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

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

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

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

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

package/pattern-lock/modern/utils.js

@@ -18,34 +18,11 @@ const getSizes = (() => {
         if (cachedSize) {
             return cachedSize;
         }
-        if (window.matchMedia('(min-width: 600px)').matches) {
-            cachedSize = {
-                elementSizes: { ...COMMON_SIZES, nodeRadius: 32 },
-                width: 240,
-                height: 240,
-            };
-        }
-        else 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,
-            };
-        }
+        cachedSize = {
+            elementSizes: { ...COMMON_SIZES, nodeRadius: 32 },
+            width: 240,
+            height: 240,
+        };
         return cachedSize;
     };
 })();
@@ -90,8 +67,6 @@ function getPatternLockTestIds(dataTestId) {
     return {
         patternLock: dataTestId,
         forgotCodeBtn: getDataTestId(dataTestId, 'forgot-code-btn'),
-        error: getDataTestId(dataTestId, 'error'),
-        message: getDataTestId(dataTestId, 'message'),
     };
 }
 

package/pattern-lock/typings.d.ts

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

package/pattern-lock/utils.d.ts

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

package/pattern-lock/utils.js

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

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import React from 'react';
+import { TPatternLockInstance } from 'react-canvas-pattern-lock';
+import { PatternLockProps } from "./typings";
+/**
+ * @deprecated
+ * Использует PatternLock
+ */
+declare const PatternLockV1: React.ForwardRefExoticComponent<PatternLockProps & React.RefAttributes<TPatternLockInstance>>;
+export { PatternLockV1 };

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

@@ -0,0 +1,25 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var coreComponentsMq = require('../mq');
+var desktop_Component_desktop = require('./desktop/Component.desktop.js');
+var mobile_Component_mobile = require('./mobile/Component.mobile.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+/**
+ * @deprecated
+ * Использует PatternLock
+ */
+var PatternLockV1 = React.forwardRef(function (_a, ref) {
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
+    var query = "(min-width: ".concat(breakpoint, "px)");
+    var isDesktop = coreComponentsMq.useMatchMedia(query)[0];
+    var Component = isDesktop ? desktop_Component_desktop.PatternLockDesktopV1 : mobile_Component_mobile.PatternLockMobileV1;
+    return React__default.default.createElement(Component, tslib.__assign({ ref: ref }, restProps));
+});
+
+exports.PatternLockV1 = PatternLockV1;

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

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

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

@@ -0,0 +1,66 @@
+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 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 commonStyles = {"component":"pattern-lock-v1__component_w4fbn","hidden":"pattern-lock-v1__hidden_w4fbn","message":"pattern-lock-v1__message_w4fbn","error":"pattern-lock-v1__error_w4fbn","forgotBtn":"pattern-lock-v1__forgotBtn_w4fbn"};
+require('./index.css');
+
+var BasePatternLock = React.forwardRef(function (_a, ref) {
+    var _b, _c;
+    var _d = _a.observeTokens, observeTokens = _d === void 0 ? false : _d, _e = _a.observerParams, observerParams = _e === void 0 ? {} : _e, _f = _a.justifyNodes, justifyNodes = _f === void 0 ? 'space-between' : _f, className = _a.className, error = _a.error, dataTestId = _a.dataTestId, _g = _a.forgotCodeBtnText, forgotCodeBtnText = _g === void 0 ? 'Забыли код?' : _g, _h = _a.showForgotCodeBtn, showForgotCodeBtn = _h === void 0 ? false : _h, onForgotBtnClick = _a.onForgotBtnClick, _j = _a.extraBounds, extraBounds = _j === void 0 ? consts.DEFAULT_EXTRA_BOUNDS : _j, message = _a.message, messageClassName = _a.messageClassName, hover = _a.hover, _k = _a.styles, styles = _k === void 0 ? {} : _k, restProps = tslib.__rest(_a, ["observeTokens", "observerParams", "justifyNodes", "className", "error", "dataTestId", "forgotCodeBtnText", "showForgotCodeBtn", "onForgotBtnClick", "extraBounds", "message", "messageClassName", "hover", "styles"]);
+    var _l = React.useState(), params = _l[0], setParams = _l[1];
+    React.useEffect(function () {
+        var _a = utils.getSizes(), elementSizes = _a.elementSizes, width = _a.width, height = _a.height;
+        setParams({
+            theme: utils.getTheme(elementSizes),
+            width: width,
+            height: height,
+        });
+    }, []);
+    React.useEffect(function () {
+        var styleObserver = null;
+        if (observeTokens) {
+            var _a = observerParams.options, options = _a === void 0 ? consts.OBSERVE_OPTIONS : _a, _b = observerParams.getTarget, getTarget = _b === void 0 ? utils.getDefaultObserveTarget : _b;
+            styleObserver = new MutationObserver(function () {
+                return setParams(function (prevState) {
+                    var _a = utils.getSizes(), width = _a.width, height = _a.height, elementSizes = _a.elementSizes;
+                    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);
+                    if (themeChanged)
+                        return tslib.__assign(tslib.__assign({}, prevState), { theme: utils.getTheme(elementSizes) });
+                    return prevState;
+                });
+            });
+            styleObserver.observe(getTarget(), options);
+        }
+        return function () { return styleObserver === null || styleObserver === void 0 ? void 0 : styleObserver.disconnect(); };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [observeTokens]);
+    var renderMessage = function () { return (React__default.default.createElement("div", { className: cn__default.default(commonStyles.message, messageClassName), "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'message') }, message)); };
+    var renderError = function () { return (React__default.default.createElement("div", { className: cn__default.default(commonStyles.message, commonStyles.error, messageClassName), "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'error') }, error)); };
+    return (React__default.default.createElement("div", { className: cn__default.default(commonStyles.component, styles.component, className, (_b = {},
+            _b[commonStyles.hidden] = !params,
+            _b)), "data-test-id": dataTestId },
+        error ? renderError() : renderMessage(),
+        React__default.default.createElement(reactCanvasPatternLock.ReactCanvasPatternLock, tslib.__assign({}, restProps, params, { ref: ref, rows: 3, cols: 3, justifyNodes: justifyNodes, extraBounds: extraBounds, hover: hover })),
+        showForgotCodeBtn ? (React__default.default.createElement(mobile.ButtonMobile, { view: 'transparent', className: cn__default.default(commonStyles.forgotBtn, styles.forgotBtn), onClick: onForgotBtnClick, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'forgot-code-btn') }, forgotCodeBtnText)) : (React__default.default.createElement("div", { className: cn__default.default(commonStyles.forgotBtn, styles.forgotBtn, (_c = {},
+                _c[styles.hiddenBtn] = Boolean(styles.hiddenBtn),
+                _c)) }))));
+});
+
+exports.BasePatternLock = BasePatternLock;

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

@@ -0,0 +1,45 @@
+/* hash: 1q5sm */
+:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} /* deprecated */ :root {
+    --color-light-text-negative: #ec2d20;
+    --color-light-text-primary: rgba(3, 3, 6, 0.88); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-m: 16px;
+    --gap-3xl: 40px;
+} :root {
+} :root {
+    --size-xs-height: 40px;
+} :root {
+} .pattern-lock-v1__component_w4fbn canvas {
+        display: block;
+        margin: 0 auto;
+    } .pattern-lock-v1__hidden_w4fbn {
+    visibility: hidden;
+} .pattern-lock-v1__message_w4fbn {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+
+    text-align: center;
+    padding: 0 var(--gap-m) var(--gap-3xl);
+    min-height: 24px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--color-light-text-primary);
+} .pattern-lock-v1__error_w4fbn {
+    color: var(--color-light-text-negative);
+} .pattern-lock-v1__forgotBtn_w4fbn {
+    display: block;
+    min-height: var(--size-xs-height);
+}

package/pattern-lock-v1/components/base-pattern-lock/index.d.ts

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

package/pattern-lock-v1/components/base-pattern-lock/index.js

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

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

@@ -0,0 +1,11 @@
+import { ReactPatternLockProps } from 'react-canvas-pattern-lock';
+import { ObservableTokens } from "./typings";
+declare const OBSERVE_OPTIONS: MutationObserverInit;
+declare const DEFAULT_EXTRA_BOUNDS: ReactPatternLockProps['extraBounds'];
+declare const OBSERVABLE_TOKENS: ObservableTokens;
+declare const THEME_STATE: {
+    INITIAL: string;
+    SUCCESS: string;
+    FAILURE: string;
+};
+export { OBSERVE_OPTIONS, DEFAULT_EXTRA_BOUNDS, OBSERVABLE_TOKENS, THEME_STATE };

package/pattern-lock-v1/consts.js

@@ -0,0 +1,32 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var OBSERVE_OPTIONS = {
+    childList: true,
+    attributes: false,
+    characterData: false,
+    subtree: true,
+};
+var DEFAULT_EXTRA_BOUNDS = [75, 50, 75, 50];
+var OBSERVABLE_TOKENS = {
+    ACCENT_INITIAL: '--color-light-graphic-primary',
+    ACCENT_SUCCESS: '--color-light-graphic-positive',
+    ACCENT_FAILURE: '--color-light-graphic-negative',
+    PRIMARY: '--color-light-graphic-tertiary',
+    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-status-muted-positive',
+    SELECTED_RING_BG_FAILURE: '--color-light-status-muted-negative',
+    HOVER_INNER: '--color-light-neutral-500-hover',
+    HOVER_OUTER: '--color-light-neutral-translucent-200-hover',
+};
+var THEME_STATE = {
+    INITIAL: 'initial',
+    SUCCESS: 'success',
+    FAILURE: 'failure',
+};
+
+exports.DEFAULT_EXTRA_BOUNDS = DEFAULT_EXTRA_BOUNDS;
+exports.OBSERVABLE_TOKENS = OBSERVABLE_TOKENS;
+exports.OBSERVE_OPTIONS = OBSERVE_OPTIONS;
+exports.THEME_STATE = THEME_STATE;

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import React from 'react';
+import { TPatternLockInstance } from 'react-canvas-pattern-lock';
+import { PatternLockProps } from "./typings";
+/**
+ * @deprecated
+ * Использует PatternLock
+ */
+declare const PatternLockV1: React.ForwardRefExoticComponent<PatternLockProps & React.RefAttributes<TPatternLockInstance>>;
+export { PatternLockV1 };

package/pattern-lock-v1/cssm/Component.responsive.js

@@ -0,0 +1,25 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var coreComponentsMq = require('../../mq/cssm');
+var desktop_Component_desktop = require('./desktop/Component.desktop.js');
+var mobile_Component_mobile = require('./mobile/Component.mobile.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+/**
+ * @deprecated
+ * Использует PatternLock
+ */
+var PatternLockV1 = React.forwardRef(function (_a, ref) {
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
+    var query = "(min-width: ".concat(breakpoint, "px)");
+    var isDesktop = coreComponentsMq.useMatchMedia(query)[0];
+    var Component = isDesktop ? desktop_Component_desktop.PatternLockDesktopV1 : mobile_Component_mobile.PatternLockMobileV1;
+    return React__default.default.createElement(Component, tslib.__assign({ ref: ref }, restProps));
+});
+
+exports.PatternLockV1 = PatternLockV1;

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

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

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

@@ -0,0 +1,65 @@
+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 consts = require('../../consts.js');
+var utils = require('../../utils.js');
+var commonStyles = require('./index.module.css');
+
+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 commonStyles__default = /*#__PURE__*/_interopDefaultCompat(commonStyles);
+
+var BasePatternLock = React.forwardRef(function (_a, ref) {
+    var _b, _c;
+    var _d = _a.observeTokens, observeTokens = _d === void 0 ? false : _d, _e = _a.observerParams, observerParams = _e === void 0 ? {} : _e, _f = _a.justifyNodes, justifyNodes = _f === void 0 ? 'space-between' : _f, className = _a.className, error = _a.error, dataTestId = _a.dataTestId, _g = _a.forgotCodeBtnText, forgotCodeBtnText = _g === void 0 ? 'Забыли код?' : _g, _h = _a.showForgotCodeBtn, showForgotCodeBtn = _h === void 0 ? false : _h, onForgotBtnClick = _a.onForgotBtnClick, _j = _a.extraBounds, extraBounds = _j === void 0 ? consts.DEFAULT_EXTRA_BOUNDS : _j, message = _a.message, messageClassName = _a.messageClassName, hover = _a.hover, _k = _a.styles, styles = _k === void 0 ? {} : _k, restProps = tslib.__rest(_a, ["observeTokens", "observerParams", "justifyNodes", "className", "error", "dataTestId", "forgotCodeBtnText", "showForgotCodeBtn", "onForgotBtnClick", "extraBounds", "message", "messageClassName", "hover", "styles"]);
+    var _l = React.useState(), params = _l[0], setParams = _l[1];
+    React.useEffect(function () {
+        var _a = utils.getSizes(), elementSizes = _a.elementSizes, width = _a.width, height = _a.height;
+        setParams({
+            theme: utils.getTheme(elementSizes),
+            width: width,
+            height: height,
+        });
+    }, []);
+    React.useEffect(function () {
+        var styleObserver = null;
+        if (observeTokens) {
+            var _a = observerParams.options, options = _a === void 0 ? consts.OBSERVE_OPTIONS : _a, _b = observerParams.getTarget, getTarget = _b === void 0 ? utils.getDefaultObserveTarget : _b;
+            styleObserver = new MutationObserver(function () {
+                return setParams(function (prevState) {
+                    var _a = utils.getSizes(), width = _a.width, height = _a.height, elementSizes = _a.elementSizes;
+                    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);
+                    if (themeChanged)
+                        return tslib.__assign(tslib.__assign({}, prevState), { theme: utils.getTheme(elementSizes) });
+                    return prevState;
+                });
+            });
+            styleObserver.observe(getTarget(), options);
+        }
+        return function () { return styleObserver === null || styleObserver === void 0 ? void 0 : styleObserver.disconnect(); };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [observeTokens]);
+    var renderMessage = function () { return (React__default.default.createElement("div", { className: cn__default.default(commonStyles__default.default.message, messageClassName), "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'message') }, message)); };
+    var renderError = function () { return (React__default.default.createElement("div", { className: cn__default.default(commonStyles__default.default.message, commonStyles__default.default.error, messageClassName), "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'error') }, error)); };
+    return (React__default.default.createElement("div", { className: cn__default.default(commonStyles__default.default.component, styles.component, className, (_b = {},
+            _b[commonStyles__default.default.hidden] = !params,
+            _b)), "data-test-id": dataTestId },
+        error ? renderError() : renderMessage(),
+        React__default.default.createElement(reactCanvasPatternLock.ReactCanvasPatternLock, tslib.__assign({}, restProps, params, { ref: ref, rows: 3, cols: 3, justifyNodes: justifyNodes, extraBounds: extraBounds, hover: hover })),
+        showForgotCodeBtn ? (React__default.default.createElement(mobile.ButtonMobile, { view: 'transparent', className: cn__default.default(commonStyles__default.default.forgotBtn, styles.forgotBtn), onClick: onForgotBtnClick, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'forgot-code-btn') }, forgotCodeBtnText)) : (React__default.default.createElement("div", { className: cn__default.default(commonStyles__default.default.forgotBtn, styles.forgotBtn, (_c = {},
+                _c[styles.hiddenBtn] = Boolean(styles.hiddenBtn),
+                _c)) }))));
+});
+
+exports.BasePatternLock = BasePatternLock;

package/pattern-lock-v1/cssm/components/base-pattern-lock/index.d.ts

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

package/pattern-lock-v1/cssm/components/base-pattern-lock/index.js

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

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

@@ -0,0 +1,44 @@
+:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} /* deprecated */ :root {
+    --color-light-text-negative: #ec2d20;
+    --color-light-text-primary: rgba(3, 3, 6, 0.88); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-m: 16px;
+    --gap-3xl: 40px;
+} :root {
+} :root {
+    --size-xs-height: 40px;
+} :root {
+} .component canvas {
+        display: block;
+        margin: 0 auto;
+    } .hidden {
+    visibility: hidden;
+} .message {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+
+    text-align: center;
+    padding: 0 var(--gap-m) var(--gap-3xl);
+    min-height: 24px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--color-light-text-primary);
+} .error {
+    color: var(--color-light-text-negative);
+} .forgotBtn {
+    display: block;
+    min-height: var(--size-xs-height);
+}

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

@@ -0,0 +1,11 @@
+import { ReactPatternLockProps } from 'react-canvas-pattern-lock';
+import { ObservableTokens } from "./typings";
+declare const OBSERVE_OPTIONS: MutationObserverInit;
+declare const DEFAULT_EXTRA_BOUNDS: ReactPatternLockProps['extraBounds'];
+declare const OBSERVABLE_TOKENS: ObservableTokens;
+declare const THEME_STATE: {
+    INITIAL: string;
+    SUCCESS: string;
+    FAILURE: string;
+};
+export { OBSERVE_OPTIONS, DEFAULT_EXTRA_BOUNDS, OBSERVABLE_TOKENS, THEME_STATE };