@alfalab/core-components-pattern-lock 1.5.1 → 1.6.0

package/Component.responsive.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var coreComponentsMq = require('@alfalab/core-components-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);
+
+var PatternLock = 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.PatternLockDesktop : mobile_Component_mobile.PatternLockMobile;
+    return React__default.default.createElement(Component, tslib.__assign({ ref: ref }, restProps));
+});
+
+exports.PatternLock = PatternLock;

package/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/{Component.js → components/base-pattern-lock/Component.js}

@@ -7,23 +7,22 @@ var React = require('react');
 var reactCanvasPatternLock = require('react-canvas-pattern-lock');
 var cn = require('classnames');
 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');
+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_1c1da","hidden":"pattern-lock__hidden_1c1da","message":"pattern-lock__message_1c1da","error":"pattern-lock__error_1c1da","forgotBtn":"pattern-lock__forgotBtn_1c1da"};
+var commonStyles = {"component":"pattern-lock__component_8m1ld","hidden":"pattern-lock__hidden_8m1ld","message":"pattern-lock__message_8m1ld","error":"pattern-lock__error_8m1ld","forgotBtn":"pattern-lock__forgotBtn_8m1ld"};
 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, _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, message = _a.message, restProps = tslib.__rest(_a, ["observeTokens", "observerParams", "justifyNodes", "className", "error", "dataTestId", "forgotCodeBtnText", "showForgotCodeBtn", "onForgotBtnClick", "extraBounds", "message"]);
-    var _j = React.useState(), params = _j[0], setParams = _j[1];
+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({
@@ -54,14 +53,16 @@ var PatternLock = React.forwardRef(function (_a, ref) {
         return function () { return styleObserver === null || styleObserver === void 0 ? void 0 : styleObserver.disconnect(); };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [observeTokens]);
-    var renderMessage = function () { return (React__default.default.createElement("div", { className: styles.message, "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'message') }, message)); };
-    var renderError = function () { return (React__default.default.createElement("div", { className: cn__default.default(styles.message, styles.error), "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'error') }, error)); };
-    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: 'xs' }),
+    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(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(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 }))));
+        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: 'link', 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.PatternLock = PatternLock;
+exports.BasePatternLock = BasePatternLock;

package/{esm → components/base-pattern-lock}/index.css

@@ -1,4 +1,4 @@
-/* hash: dybik */
+/* hash: us3cg */
 :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: #ec2e14;
@@ -14,60 +14,32 @@
     /* Hard up */
 } :root {
 } :root {
-    --gap-xs: 8px;
-    --gap-s: 12px;
     --gap-m: 16px;
-    --gap-l: 20px;
-    --gap-xl: 24px;
-    --gap-2xl: 32px;
+    --gap-3xl: 40px;
 } :root {
 } :root {
     --size-xs-height: 40px;
-    --size-s-height: 48px;
-    --size-m-height: 56px;
 } :root {
-    --pattern-lock-max-width: 500px;
-} .pattern-lock__component_1c1da {
-    max-width: var(--pattern-lock-max-width);
-    margin: var(--gap-xs) 0 var(--gap-xl) 0
-} .pattern-lock__component_1c1da canvas {
+} .pattern-lock__component_8m1ld canvas {
         display: block;
         margin: 0 auto;
-    } .pattern-lock__hidden_1c1da {
+    } .pattern-lock__hidden_8m1ld {
     visibility: hidden;
-} .pattern-lock__message_1c1da {
+} .pattern-lock__message_8m1ld {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
 
     text-align: center;
-    padding: 0 var(--gap-m);
+    padding: 0 var(--gap-m) var(--gap-3xl);
     min-height: 24px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     color: var(--color-light-text-primary);
-} .pattern-lock__error_1c1da {
+} .pattern-lock__error_8m1ld {
     color: var(--color-light-text-negative);
-} .pattern-lock__forgotBtn_1c1da {
+} .pattern-lock__forgotBtn_8m1ld {
     display: block;
     min-height: var(--size-xs-height);
-    margin: var(--gap-xl) auto 0;
-} @media screen and (min-width: 360px) {
-    .pattern-lock__forgotBtn_1c1da {
-        margin-top: var(--gap-2xl);
-        min-height: var(--size-s-height);
-    }
-
-    .pattern-lock__component_1c1da {
-        margin-bottom: var(--gap-s);
-    }
-} @media screen and (min-width: 390px) {
-    .pattern-lock__forgotBtn_1c1da {
-        min-height: var(--size-m-height);
-    }
-
-    .pattern-lock__component_1c1da {
-        margin-bottom: var(--gap-l);
-    }
 }

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

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

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

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

package/consts.js

@@ -19,6 +19,8 @@ var OBSERVABLE_TOKENS = {
     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',
+    HOVER_INNER: '--color-light-neutral-500-hover',
+    HOVER_OUTER: '--color-light-neutral-translucent-200-hover',
 };
 var THEME_STATE = {
     INITIAL: 'initial',

package/cssm/Component.responsive.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var coreComponentsMq = require('@alfalab/core-components-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);
+
+var PatternLock = 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.PatternLockDesktop : mobile_Component_mobile.PatternLockMobile;
+    return React__default.default.createElement(Component, tslib.__assign({ ref: ref }, restProps));
+});
+
+exports.PatternLock = PatternLock;

package/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/cssm/{Component.js → components/base-pattern-lock/Component.js}

@@ -7,22 +7,21 @@ var React = require('react');
 var reactCanvasPatternLock = require('react-canvas-pattern-lock');
 var cn = require('classnames');
 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');
+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 styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+var commonStyles__default = /*#__PURE__*/_interopDefaultCompat(commonStyles);
 
-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, message = _a.message, restProps = tslib.__rest(_a, ["observeTokens", "observerParams", "justifyNodes", "className", "error", "dataTestId", "forgotCodeBtnText", "showForgotCodeBtn", "onForgotBtnClick", "extraBounds", "message"]);
-    var _j = React.useState(), params = _j[0], setParams = _j[1];
+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({
@@ -53,14 +52,16 @@ var PatternLock = React.forwardRef(function (_a, ref) {
         return function () { return styleObserver === null || styleObserver === void 0 ? void 0 : styleObserver.disconnect(); };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [observeTokens]);
-    var renderMessage = function () { return (React__default.default.createElement("div", { className: styles__default.default.message, "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'message') }, message)); };
-    var renderError = function () { return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.message, styles__default.default.error), "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'error') }, error)); };
-    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: 'xs' }),
+    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(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(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 }))));
+        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: 'link', 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.PatternLock = PatternLock;
+exports.BasePatternLock = BasePatternLock;

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

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

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

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

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

@@ -13,22 +13,12 @@
     /* Hard up */
 } :root {
 } :root {
-    --gap-xs: 8px;
-    --gap-s: 12px;
     --gap-m: 16px;
-    --gap-l: 20px;
-    --gap-xl: 24px;
-    --gap-2xl: 32px;
+    --gap-3xl: 40px;
 } :root {
 } :root {
     --size-xs-height: 40px;
-    --size-s-height: 48px;
-    --size-m-height: 56px;
 } :root {
-    --pattern-lock-max-width: 500px;
-} .component {
-    max-width: var(--pattern-lock-max-width);
-    margin: var(--gap-xs) 0 var(--gap-xl) 0
 } .component canvas {
         display: block;
         margin: 0 auto;
@@ -40,7 +30,7 @@
     font-weight: 400;
 
     text-align: center;
-    padding: 0 var(--gap-m);
+    padding: 0 var(--gap-m) var(--gap-3xl);
     min-height: 24px;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -51,22 +41,4 @@
 } .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/consts.js

@@ -19,6 +19,8 @@ var OBSERVABLE_TOKENS = {
     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',
+    HOVER_INNER: '--color-light-neutral-500-hover',
+    HOVER_OUTER: '--color-light-neutral-translucent-200-hover',
 };
 var THEME_STATE = {
     INITIAL: 'initial',

package/cssm/desktop/Component.desktop.d.ts

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

package/cssm/desktop/Component.desktop.js

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var components_basePatternLock_Component = require('../components/base-pattern-lock/Component.js');
+var styles = require('./desktop.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var PatternLockDesktop = React.forwardRef(function (restProps, ref) { return React__default.default.createElement(components_basePatternLock_Component.BasePatternLock, tslib.__assign({}, restProps, { hover: true, ref: ref, styles: styles__default.default })); });
+
+exports.PatternLockDesktop = PatternLockDesktop;

package/cssm/desktop/desktop.module.css

@@ -0,0 +1,27 @@
+: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 { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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-xs: 8px;
+    --gap-xl: 24px;
+} :root {
+} :root {
+} :root {
+    --pattern-lock-desktop-max-width: 240px;
+} .component {
+    max-width: var(--pattern-lock-desktop-max-width);
+    margin: var(--gap-xs) 0 var(--gap-xl) 0;
+} .forgotBtn {
+    margin: var(--gap-xl) auto 0;
+} .hiddenBtn {
+    display: none;
+}

package/cssm/desktop/index.d.ts

@@ -0,0 +1,2 @@
+export { PatternLockDesktop } from "./Component.desktop";
+export type { CommonPatternLockProps as PatternLockDesktopProps } from "../typings";

package/cssm/desktop/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var desktop_Component_desktop = require('./Component.desktop.js');
+
+
+
+exports.PatternLockDesktop = desktop_Component_desktop.PatternLockDesktop;

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

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

package/cssm/hooks/use-pattern-lock-cleanup.js

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+var usePatternLockCleanup = function (patternLockRef) {
+    var clear = React.useMemo(function () {
+        if (patternLockRef.current) {
+            patternLockRef.current.setInitialState();
+        }
+    }, [patternLockRef]);
+    return {
+        clear: clear,
+    };
+};
+
+exports.usePatternLockCleanup = usePatternLockCleanup;

package/cssm/index.d.ts

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

package/cssm/index.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Component = require('./Component.js');
+var Component_responsive = require('./Component.responsive.js');
 var consts = require('./consts.js');
 
 
 
-exports.PatternLock = Component.PatternLock;
+exports.PatternLock = Component_responsive.PatternLock;
 exports.THEME_STATE = consts.THEME_STATE;

package/cssm/mobile/Component.mobile.d.ts

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

package/cssm/mobile/Component.mobile.js

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var components_basePatternLock_Component = require('../components/base-pattern-lock/Component.js');
+var styles = require('./mobile.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var PatternLockMobile = React.forwardRef(function (restProps, ref) { return React__default.default.createElement(components_basePatternLock_Component.BasePatternLock, tslib.__assign({}, restProps, { ref: ref, styles: styles__default.default })); });
+
+exports.PatternLockMobile = PatternLockMobile;

package/cssm/mobile/index.d.ts

@@ -0,0 +1,2 @@
+export { PatternLockMobile } from "./Component.mobile";
+export type { CommonPatternLockProps as PatternLockMobileProps } from "../typings";

package/cssm/mobile/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var mobile_Component_mobile = require('./Component.mobile.js');
+
+
+
+exports.PatternLockMobile = mobile_Component_mobile.PatternLockMobile;

package/cssm/mobile/mobile.module.css

@@ -0,0 +1,47 @@
+: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 { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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-xs: 8px;
+    --gap-s: 12px;
+    --gap-l: 20px;
+    --gap-xl: 24px;
+    --gap-2xl: 32px;
+} :root {
+} :root {
+    --size-s-height: 48px;
+    --size-m-height: 56px;
+} :root {
+    --pattern-lock-max-width: 500px;
+} .component {
+    max-width: var(--pattern-lock-max-width);
+    margin: var(--gap-xs) 0 var(--gap-xl) 0;
+} .forgotBtn {
+    margin: var(--gap-xl) auto 0;
+} @media screen and (min-width: 360px) {
+    .forgotBtn {
+        margin-top: var(--gap-2xl);
+        min-height: var(--size-s-height);
+    }
+
+    .component {
+        margin-bottom: var(--gap-s);
+    }
+} @media screen and (min-width: 390px) {
+    .forgotBtn {
+        min-height: var(--size-m-height);
+    }
+
+    .component {
+        margin-bottom: var(--gap-l);
+    }
+}

package/cssm/shared/index.d.ts

@@ -1 +1,2 @@
 export { getPatternLockTestIds } from "../utils";
+export { usePatternLockCleanup } from "../hooks/use-pattern-lock-cleanup";

package/cssm/shared/index.js

@@ -3,7 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var utils = require('../utils.js');
+var hooks_usePatternLockCleanup = require('../hooks/use-pattern-lock-cleanup.js');
 
 
 
 exports.getPatternLockTestIds = utils.getPatternLockTestIds;
+exports.usePatternLockCleanup = hooks_usePatternLockCleanup.usePatternLockCleanup;