@alfalab/core-components-pattern-lock 2.0.1 → 2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (78) hide show
  1. package/Component.responsive.d.ts +1 -1
  2. package/Component.responsive.js +2 -2
  3. package/components/base-pattern-lock/Component.d.ts +1 -1
  4. package/components/base-pattern-lock/Component.js +7 -5
  5. package/components/base-pattern-lock/index.css +21 -9
  6. package/consts.d.ts +1 -1
  7. package/consts.js +0 -1
  8. package/cssm/Component.responsive.d.ts +1 -1
  9. package/cssm/Component.responsive.js +2 -2
  10. package/cssm/components/base-pattern-lock/Component.d.ts +1 -1
  11. package/cssm/components/base-pattern-lock/Component.js +6 -4
  12. package/cssm/components/base-pattern-lock/index.module.css +17 -5
  13. package/cssm/consts.d.ts +1 -1
  14. package/cssm/consts.js +0 -1
  15. package/cssm/desktop/Component.desktop.d.ts +1 -1
  16. package/cssm/desktop/desktop.module.css +5 -3
  17. package/cssm/hooks/use-pattern-lock-cleanup.d.ts +1 -1
  18. package/cssm/mobile/Component.mobile.d.ts +1 -1
  19. package/cssm/mobile/mobile.module.css +5 -3
  20. package/cssm/typings.d.ts +5 -2
  21. package/cssm/utils.d.ts +1 -1
  22. package/cssm/utils.js +1 -1
  23. package/desktop/Component.desktop.d.ts +1 -1
  24. package/desktop/Component.desktop.js +1 -1
  25. package/desktop/desktop.css +9 -7
  26. package/esm/Component.responsive.d.ts +1 -1
  27. package/esm/Component.responsive.js +2 -2
  28. package/esm/components/base-pattern-lock/Component.d.ts +1 -1
  29. package/esm/components/base-pattern-lock/Component.js +7 -5
  30. package/esm/components/base-pattern-lock/index.css +21 -9
  31. package/esm/consts.d.ts +1 -1
  32. package/esm/consts.js +0 -1
  33. package/esm/desktop/Component.desktop.d.ts +1 -1
  34. package/esm/desktop/Component.desktop.js +1 -1
  35. package/esm/desktop/desktop.css +9 -7
  36. package/esm/hooks/use-pattern-lock-cleanup.d.ts +1 -1
  37. package/esm/mobile/Component.mobile.d.ts +1 -1
  38. package/esm/mobile/Component.mobile.js +1 -1
  39. package/esm/mobile/mobile.css +8 -6
  40. package/esm/typings.d.ts +5 -2
  41. package/esm/utils.d.ts +1 -1
  42. package/esm/utils.js +1 -1
  43. package/hooks/use-pattern-lock-cleanup.d.ts +1 -1
  44. package/mobile/Component.mobile.d.ts +1 -1
  45. package/mobile/Component.mobile.js +1 -1
  46. package/mobile/mobile.css +8 -6
  47. package/modern/Component.responsive.d.ts +1 -1
  48. package/modern/Component.responsive.js +2 -2
  49. package/modern/components/base-pattern-lock/Component.d.ts +1 -1
  50. package/modern/components/base-pattern-lock/Component.js +7 -5
  51. package/modern/components/base-pattern-lock/index.css +21 -9
  52. package/modern/consts.d.ts +1 -1
  53. package/modern/consts.js +0 -1
  54. package/modern/desktop/Component.desktop.d.ts +1 -1
  55. package/modern/desktop/Component.desktop.js +1 -1
  56. package/modern/desktop/desktop.css +9 -7
  57. package/modern/hooks/use-pattern-lock-cleanup.d.ts +1 -1
  58. package/modern/mobile/Component.mobile.d.ts +1 -1
  59. package/modern/mobile/Component.mobile.js +1 -1
  60. package/modern/mobile/mobile.css +8 -6
  61. package/modern/typings.d.ts +5 -2
  62. package/modern/utils.d.ts +1 -1
  63. package/modern/utils.js +1 -1
  64. package/package.json +7 -5
  65. package/src/Component.responsive.tsx +3 -3
  66. package/src/components/base-pattern-lock/Component.tsx +19 -15
  67. package/src/components/base-pattern-lock/index.module.css +14 -1
  68. package/src/consts.ts +1 -2
  69. package/src/desktop/Component.desktop.tsx +2 -1
  70. package/src/desktop/desktop.module.css +1 -1
  71. package/src/hooks/use-pattern-lock-cleanup.tsx +2 -1
  72. package/src/mobile/Component.mobile.tsx +2 -1
  73. package/src/mobile/mobile.module.css +1 -1
  74. package/src/typings.ts +7 -2
  75. package/src/utils.ts +2 -3
  76. package/typings.d.ts +5 -2
  77. package/utils.d.ts +1 -1
  78. package/utils.js +1 -1
package/Component.responsive.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { TPatternLockInstance } from 'react-canvas-pattern-lock';
3
+ import { TPatternLockInstance } from '@alfalab/react-canvas-pattern-lock';
4
4
  import { PatternLockProps } from "./typings";
5
5
  declare const PatternLock: React.ForwardRefExoticComponent<PatternLockProps & React.RefAttributes<TPatternLockInstance>>;
6
6
  export { PatternLock };
package/Component.responsive.js CHANGED
@@ -13,9 +13,9 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
13
13
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
14
14
 
15
15
  var PatternLock = React.forwardRef(function (_a, ref) {
16
- var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
16
+ var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = tslib.__rest(_a, ["breakpoint", "defaultMatchMediaValue"]);
17
17
  var query = "(min-width: ".concat(breakpoint, "px)");
18
- var isDesktop = coreComponentsMq.useMatchMedia(query)[0];
18
+ var isDesktop = coreComponentsMq.useMatchMedia(query, defaultMatchMediaValue)[0];
19
19
  var Component = isDesktop ? desktop_Component_desktop.PatternLockDesktop : mobile_Component_mobile.PatternLockMobile;
20
20
  return React__default.default.createElement(Component, tslib.__assign({ ref: ref }, restProps));
21
21
  });
package/components/base-pattern-lock/Component.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { TPatternLockInstance } from 'react-canvas-pattern-lock';
3
+ import { TPatternLockInstance } from '@alfalab/react-canvas-pattern-lock';
4
4
  import { CommonPatternLockProps, PrivatePatternLockProps } from "../../typings";
5
5
  declare const BasePatternLock: React.ForwardRefExoticComponent<(CommonPatternLockProps & PrivatePatternLockProps) & React.RefAttributes<TPatternLockInstance>>;
6
6
  export { BasePatternLock };
package/components/base-pattern-lock/Component.js CHANGED
@@ -4,10 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var tslib = require('tslib');
6
6
  var React = require('react');
7
- var reactCanvasPatternLock = require('react-canvas-pattern-lock');
8
7
  var cn = require('classnames');
9
8
  var mobile = require('@alfalab/core-components-button/mobile');
10
9
  var coreComponentsShared = require('@alfalab/core-components-shared');
10
+ var reactCanvasPatternLock = require('@alfalab/react-canvas-pattern-lock');
11
11
  var consts = require('../../consts.js');
12
12
  var utils = require('../../utils.js');
13
13
 
@@ -16,7 +16,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
16
16
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
17
17
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
18
18
 
19
- var commonStyles = {"component":"pattern-lock__component_25j35","withForgotBtn":"pattern-lock__withForgotBtn_25j35","forgotBtn":"pattern-lock__forgotBtn_25j35"};
19
+ var commonStyles = {"component":"pattern-lock__component_1625k","canvasContainer":"pattern-lock__canvasContainer_1625k","canvasInner":"pattern-lock__canvasInner_1625k","withForgotBtn":"pattern-lock__withForgotBtn_1625k","forgotBtn":"pattern-lock__forgotBtn_1625k"};
20
20
  require('./index.css')
21
21
 
22
22
  var BasePatternLock = React.forwardRef(function (_a, ref) {
@@ -41,8 +41,8 @@ var BasePatternLock = React.forwardRef(function (_a, ref) {
41
41
  if (!prevState) {
42
42
  return { theme: utils.getTheme(elementSizes), width: width, height: height };
43
43
  }
44
- var prevBgColor = prevState.theme[consts.THEME_STATE.INITIAL].colors.bg;
45
- var themeChanged = prevBgColor !== utils.getColorByToken(consts.OBSERVABLE_TOKENS.BG);
44
+ var prevBgColor = prevState.theme[consts.THEME_STATE.INITIAL].colors.primary;
45
+ var themeChanged = prevBgColor !== utils.getColorByToken(consts.OBSERVABLE_TOKENS.PRIMARY);
46
46
  if (themeChanged)
47
47
  return tslib.__assign(tslib.__assign({}, prevState), { theme: utils.getTheme(elementSizes) });
48
48
  return prevState;
@@ -57,7 +57,9 @@ var BasePatternLock = React.forwardRef(function (_a, ref) {
57
57
  _b[commonStyles.hidden] = !params,
58
58
  _b[commonStyles.withForgotBtn] = showForgotCodeBtn,
59
59
  _b)), "data-test-id": dataTestId },
60
- React__default.default.createElement(reactCanvasPatternLock.ReactCanvasPatternLock, tslib.__assign({}, restProps, params, { ref: ref, rows: 3, cols: 3, justifyNodes: 'space-between', extraBounds: extraBounds, hover: hover })),
60
+ React__default.default.createElement("div", { className: commonStyles.canvasContainer },
61
+ React__default.default.createElement("div", { className: commonStyles.canvasInner },
62
+ React__default.default.createElement(reactCanvasPatternLock.ReactCanvasPatternLock, tslib.__assign({}, restProps, params, { ref: ref, rows: 3, cols: 3, justifyNodes: 'space-between', extraBounds: extraBounds, hover: hover })))),
61
63
  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))));
62
64
  });
63
65
  BasePatternLock.displayName = 'BasePatternLock';
package/components/base-pattern-lock/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 5wfrr */
1
+ /* hash: 12f3g */
2
2
  :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 */
3
3
  } /* 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 */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
4
  } :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 */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -11,26 +11,38 @@
11
11
 
12
12
  /* Hard up */
13
13
  } :root {
14
- } :root {
15
- --gap-m: 16px;
14
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
15
+ --gap-m: 16px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
16
+
17
+ /* новые значения, используйте их */
16
18
  } :root {
17
19
  } :root {
18
20
  --size-xs-height: 40px;
19
21
  } :root {
22
+ --pattern-lock-min-width: 304px;
20
23
  --pattern-lock-min-height: 272px;
21
24
  --pattern-lock-with-forgot-btn-min-height: 336px;
22
- } .pattern-lock__component_25j35 {
25
+ } .pattern-lock__component_1625k {
23
26
  display: flex;
24
27
  flex-direction: column;
28
+ align-items: center;
25
29
  box-sizing: border-box;
26
- min-height: var(--pattern-lock-min-height);
27
- padding: var(--gap-m) 0
28
- } .pattern-lock__component_25j35 canvas {
30
+ min-height: var(--pattern-lock-min-height)
31
+ } .pattern-lock__component_1625k canvas {
29
32
  display: block;
30
33
  margin: 0 auto;
31
- } .pattern-lock__withForgotBtn_25j35 {
34
+ } .pattern-lock__component_1625k .pattern-lock__canvasContainer_1625k {
35
+ box-sizing: border-box;
36
+ padding: var(--gap-m) var(--gap-m);
37
+ min-width: var(--pattern-lock-min-width);
38
+ min-height: var(--pattern-lock-min-height)
39
+ } .pattern-lock__component_1625k .pattern-lock__canvasContainer_1625k .pattern-lock__canvasInner_1625k {
40
+ box-sizing: border-box;
41
+ padding: 0 var(--gap-m);
42
+ min-width: var(--pattern-lock-min-height);
43
+ } .pattern-lock__withForgotBtn_1625k {
32
44
  min-height: var(--pattern-lock-with-forgot-btn-min-height);
33
- } .pattern-lock__forgotBtn_25j35 {
45
+ } .pattern-lock__forgotBtn_1625k {
34
46
  display: block;
35
47
  min-height: var(--size-xs-height);
36
48
  }
package/consts.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { ReactPatternLockProps } from 'react-canvas-pattern-lock';
1
+ import { ReactPatternLockProps } from '@alfalab/react-canvas-pattern-lock';
2
2
  import { ObservableTokens } from "./typings";
3
3
  declare const OBSERVE_OPTIONS: MutationObserverInit;
4
4
  declare const DEFAULT_EXTRA_BOUNDS: ReactPatternLockProps['extraBounds'];
package/consts.js CHANGED
@@ -14,7 +14,6 @@ var OBSERVABLE_TOKENS = {
14
14
  ACCENT_SUCCESS: '--color-light-status-positive',
15
15
  ACCENT_FAILURE: '--color-light-status-negative',
16
16
  PRIMARY: '--color-light-neutral-500',
17
- BG: '--color-light-base-bg-primary',
18
17
  RING_BG_INITIAL: '--color-light-neutral-translucent-200',
19
18
  SELECTED_RING_BG_INITIAL: '--color-light-neutral-translucent-200-hover',
20
19
  SELECTED_RING_BG_SUCCESS: '--color-light-status-muted-positive',
package/cssm/Component.responsive.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { TPatternLockInstance } from 'react-canvas-pattern-lock';
3
+ import { TPatternLockInstance } from '@alfalab/react-canvas-pattern-lock';
4
4
  import { PatternLockProps } from "./typings";
5
5
  declare const PatternLock: React.ForwardRefExoticComponent<PatternLockProps & React.RefAttributes<TPatternLockInstance>>;
6
6
  export { PatternLock };
package/cssm/Component.responsive.js CHANGED
@@ -13,9 +13,9 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
13
13
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
14
14
 
15
15
  var PatternLock = React.forwardRef(function (_a, ref) {
16
- var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
16
+ var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = tslib.__rest(_a, ["breakpoint", "defaultMatchMediaValue"]);
17
17
  var query = "(min-width: ".concat(breakpoint, "px)");
18
- var isDesktop = coreComponentsMq.useMatchMedia(query)[0];
18
+ var isDesktop = coreComponentsMq.useMatchMedia(query, defaultMatchMediaValue)[0];
19
19
  var Component = isDesktop ? desktop_Component_desktop.PatternLockDesktop : mobile_Component_mobile.PatternLockMobile;
20
20
  return React__default.default.createElement(Component, tslib.__assign({ ref: ref }, restProps));
21
21
  });
package/cssm/components/base-pattern-lock/Component.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { TPatternLockInstance } from 'react-canvas-pattern-lock';
3
+ import { TPatternLockInstance } from '@alfalab/react-canvas-pattern-lock';
4
4
  import { CommonPatternLockProps, PrivatePatternLockProps } from "../../typings";
5
5
  declare const BasePatternLock: React.ForwardRefExoticComponent<(CommonPatternLockProps & PrivatePatternLockProps) & React.RefAttributes<TPatternLockInstance>>;
6
6
  export { BasePatternLock };
package/cssm/components/base-pattern-lock/Component.js CHANGED
@@ -4,10 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var tslib = require('tslib');
6
6
  var React = require('react');
7
- var reactCanvasPatternLock = require('react-canvas-pattern-lock');
8
7
  var cn = require('classnames');
9
8
  var mobile = require('@alfalab/core-components-button/cssm/mobile');
10
9
  var coreComponentsShared = require('@alfalab/core-components-shared/cssm');
10
+ var reactCanvasPatternLock = require('@alfalab/react-canvas-pattern-lock');
11
11
  var consts = require('../../consts.js');
12
12
  var utils = require('../../utils.js');
13
13
  var commonStyles = require('./index.module.css');
@@ -40,8 +40,8 @@ var BasePatternLock = React.forwardRef(function (_a, ref) {
40
40
  if (!prevState) {
41
41
  return { theme: utils.getTheme(elementSizes), width: width, height: height };
42
42
  }
43
- var prevBgColor = prevState.theme[consts.THEME_STATE.INITIAL].colors.bg;
44
- var themeChanged = prevBgColor !== utils.getColorByToken(consts.OBSERVABLE_TOKENS.BG);
43
+ var prevBgColor = prevState.theme[consts.THEME_STATE.INITIAL].colors.primary;
44
+ var themeChanged = prevBgColor !== utils.getColorByToken(consts.OBSERVABLE_TOKENS.PRIMARY);
45
45
  if (themeChanged)
46
46
  return tslib.__assign(tslib.__assign({}, prevState), { theme: utils.getTheme(elementSizes) });
47
47
  return prevState;
@@ -56,7 +56,9 @@ var BasePatternLock = React.forwardRef(function (_a, ref) {
56
56
  _b[commonStyles__default.default.hidden] = !params,
57
57
  _b[commonStyles__default.default.withForgotBtn] = showForgotCodeBtn,
58
58
  _b)), "data-test-id": dataTestId },
59
- React__default.default.createElement(reactCanvasPatternLock.ReactCanvasPatternLock, tslib.__assign({}, restProps, params, { ref: ref, rows: 3, cols: 3, justifyNodes: 'space-between', extraBounds: extraBounds, hover: hover })),
59
+ React__default.default.createElement("div", { className: commonStyles__default.default.canvasContainer },
60
+ React__default.default.createElement("div", { className: commonStyles__default.default.canvasInner },
61
+ React__default.default.createElement(reactCanvasPatternLock.ReactCanvasPatternLock, tslib.__assign({}, restProps, params, { ref: ref, rows: 3, cols: 3, justifyNodes: 'space-between', extraBounds: extraBounds, hover: hover })))),
60
62
  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))));
61
63
  });
62
64
  BasePatternLock.displayName = 'BasePatternLock';
package/cssm/components/base-pattern-lock/index.module.css CHANGED
@@ -10,24 +10,36 @@
10
10
 
11
11
  /* Hard up */
12
12
  } :root {
13
- } :root {
14
- --gap-m: 16px;
13
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
14
+ --gap-m: 16px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
15
+
16
+ /* новые значения, используйте их */
15
17
  } :root {
16
18
  } :root {
17
19
  --size-xs-height: 40px;
18
20
  } :root {
21
+ --pattern-lock-min-width: 304px;
19
22
  --pattern-lock-min-height: 272px;
20
23
  --pattern-lock-with-forgot-btn-min-height: 336px;
21
24
  } .component {
22
25
  display: flex;
23
26
  flex-direction: column;
27
+ align-items: center;
24
28
  box-sizing: border-box;
25
- min-height: var(--pattern-lock-min-height);
26
- padding: var(--gap-m) 0
29
+ min-height: var(--pattern-lock-min-height)
27
30
  } .component canvas {
28
31
  display: block;
29
32
  margin: 0 auto;
30
- } .withForgotBtn {
33
+ } .component .canvasContainer {
34
+ box-sizing: border-box;
35
+ padding: var(--gap-m) var(--gap-m);
36
+ min-width: var(--pattern-lock-min-width);
37
+ min-height: var(--pattern-lock-min-height)
38
+ } .component .canvasContainer .canvasInner {
39
+ box-sizing: border-box;
40
+ padding: 0 var(--gap-m);
41
+ min-width: var(--pattern-lock-min-height);
42
+ } .withForgotBtn {
31
43
  min-height: var(--pattern-lock-with-forgot-btn-min-height);
32
44
  } .forgotBtn {
33
45
  display: block;
package/cssm/consts.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { ReactPatternLockProps } from 'react-canvas-pattern-lock';
1
+ import { ReactPatternLockProps } from '@alfalab/react-canvas-pattern-lock';
2
2
  import { ObservableTokens } from "./typings";
3
3
  declare const OBSERVE_OPTIONS: MutationObserverInit;
4
4
  declare const DEFAULT_EXTRA_BOUNDS: ReactPatternLockProps['extraBounds'];
package/cssm/consts.js CHANGED
@@ -14,7 +14,6 @@ var OBSERVABLE_TOKENS = {
14
14
  ACCENT_SUCCESS: '--color-light-status-positive',
15
15
  ACCENT_FAILURE: '--color-light-status-negative',
16
16
  PRIMARY: '--color-light-neutral-500',
17
- BG: '--color-light-base-bg-primary',
18
17
  RING_BG_INITIAL: '--color-light-neutral-translucent-200',
19
18
  SELECTED_RING_BG_INITIAL: '--color-light-neutral-translucent-200-hover',
20
19
  SELECTED_RING_BG_SUCCESS: '--color-light-status-muted-positive',
package/cssm/desktop/Component.desktop.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { TPatternLockInstance } from 'react-canvas-pattern-lock';
3
+ import { TPatternLockInstance } from '@alfalab/react-canvas-pattern-lock';
4
4
  import { CommonPatternLockProps } from "../typings";
5
5
  declare const PatternLockDesktop: React.ForwardRefExoticComponent<CommonPatternLockProps & React.RefAttributes<TPatternLockInstance>>;
6
6
  export { PatternLockDesktop };
package/cssm/desktop/desktop.module.css CHANGED
@@ -10,8 +10,10 @@
10
10
 
11
11
  /* Hard up */
12
12
  } :root {
13
- } :root {
14
- --gap-xl: 24px;
13
+ } :root { /* deprecated */ /* deprecated */
14
+ --gap-xs: 8px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
15
+
16
+ /* новые значения, используйте их */
15
17
  } :root {
16
18
  } :root {
17
19
  } :root {
@@ -20,7 +22,7 @@
20
22
  margin: 0 auto;
21
23
  min-width: var(--pattern-lock-min-width);
22
24
  } .forgotBtn {
23
- margin: var(--gap-xl) auto 0;
25
+ margin: var(--gap-xs) auto 0;
24
26
  } .hiddenBtn {
25
27
  display: none;
26
28
  }
package/cssm/hooks/use-pattern-lock-cleanup.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
- import { TPatternLockInstance } from 'react-canvas-pattern-lock';
2
+ import { TPatternLockInstance } from '@alfalab/react-canvas-pattern-lock';
3
3
  declare const usePatternLockCleanup: (patternLockRef: React.MutableRefObject<TPatternLockInstance | null>) => {
4
4
  clear: void;
5
5
  };
package/cssm/mobile/Component.mobile.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { TPatternLockInstance } from 'react-canvas-pattern-lock';
3
+ import { TPatternLockInstance } from '@alfalab/react-canvas-pattern-lock';
4
4
  import { CommonPatternLockProps } from "../typings";
5
5
  declare const PatternLockMobile: React.ForwardRefExoticComponent<CommonPatternLockProps & React.RefAttributes<TPatternLockInstance>>;
6
6
  export { PatternLockMobile };
package/cssm/mobile/mobile.module.css CHANGED
@@ -10,8 +10,10 @@
10
10
 
11
11
  /* Hard up */
12
12
  } :root {
13
- } :root {
14
- --gap-xl: 24px;
13
+ } :root { /* deprecated */ /* deprecated */
14
+ --gap-xs: 8px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
15
+
16
+ /* новые значения, используйте их */
15
17
  } :root {
16
18
  } :root {
17
19
  } :root {
@@ -20,5 +22,5 @@
20
22
  margin: 0 auto;
21
23
  min-width: var(--pattern-lock-min-width);
22
24
  } .forgotBtn {
23
- margin: var(--gap-xl) auto 0;
25
+ margin: var(--gap-xs) auto 0;
24
26
  }
package/cssm/typings.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { MouseEvent } from 'react';
2
- import { ReactPatternLockProps } from 'react-canvas-pattern-lock';
2
+ import { ReactPatternLockProps } from '@alfalab/react-canvas-pattern-lock';
3
3
  type ConditionalProps = {
4
4
  /**
5
5
  * Показать кнопку "забыли код"
@@ -66,6 +66,10 @@ type PatternLockProps = CommonPatternLockProps & {
66
66
  * @default 1024
67
67
  */
68
68
  breakpoint?: number;
69
+ /**
70
+ * Значение по-умолчанию для хука useMatchMedia
71
+ */
72
+ defaultMatchMediaValue?: boolean | (() => boolean);
69
73
  };
70
74
  type ObservableTokens = {
71
75
  ACCENT_INITIAL: string;
@@ -76,7 +80,6 @@ type ObservableTokens = {
76
80
  SELECTED_RING_BG_SUCCESS: string;
77
81
  SELECTED_RING_BG_FAILURE: string;
78
82
  PRIMARY: string;
79
- BG: string;
80
83
  HOVER_INNER: string;
81
84
  HOVER_OUTER: string;
82
85
  };
package/cssm/utils.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { Theme, ThemeParams } from 'react-canvas-pattern-lock';
1
+ import { Theme, ThemeParams } from '@alfalab/react-canvas-pattern-lock';
2
2
  declare function getDefaultObserveTarget(): HTMLHeadElement;
3
3
  declare function getColorByToken(token: string): string;
4
4
  declare const getSizes: () => {
package/cssm/utils.js CHANGED
@@ -35,7 +35,7 @@ function getTheme(dimens) {
35
35
  var _a;
36
36
  var baseColors = {
37
37
  primary: getColorByToken(consts.OBSERVABLE_TOKENS.PRIMARY),
38
- bg: getColorByToken(consts.OBSERVABLE_TOKENS.BG),
38
+ bg: 'transparent',
39
39
  ringBg: getColorByToken(consts.OBSERVABLE_TOKENS.RING_BG_INITIAL),
40
40
  hover: {
41
41
  inner: getColorByToken(consts.OBSERVABLE_TOKENS.HOVER_INNER),
package/desktop/Component.desktop.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { TPatternLockInstance } from 'react-canvas-pattern-lock';
3
+ import { TPatternLockInstance } from '@alfalab/react-canvas-pattern-lock';
4
4
  import { CommonPatternLockProps } from "../typings";
5
5
  declare const PatternLockDesktop: React.ForwardRefExoticComponent<CommonPatternLockProps & React.RefAttributes<TPatternLockInstance>>;
6
6
  export { PatternLockDesktop };
package/desktop/Component.desktop.js CHANGED
@@ -10,7 +10,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
10
10
 
11
11
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
12
12
 
13
- var styles = {"component":"pattern-lock__component_9i9m4","forgotBtn":"pattern-lock__forgotBtn_9i9m4","hiddenBtn":"pattern-lock__hiddenBtn_9i9m4"};
13
+ var styles = {"component":"pattern-lock__component_owwdt","forgotBtn":"pattern-lock__forgotBtn_owwdt","hiddenBtn":"pattern-lock__hiddenBtn_owwdt"};
14
14
  require('./desktop.css')
15
15
 
16
16
  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 })); });
package/desktop/desktop.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1kb1q */
1
+ /* hash: 1r7fn */
2
2
  :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 */
3
3
  } /* 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 */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
4
  } :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 */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -11,17 +11,19 @@
11
11
 
12
12
  /* Hard up */
13
13
  } :root {
14
- } :root {
15
- --gap-xl: 24px;
14
+ } :root { /* deprecated */ /* deprecated */
15
+ --gap-xs: 8px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
16
+
17
+ /* новые значения, используйте их */
16
18
  } :root {
17
19
  } :root {
18
20
  } :root {
19
21
  --pattern-lock-min-width: 304px;
20
- } .pattern-lock__component_9i9m4 {
22
+ } .pattern-lock__component_owwdt {
21
23
  margin: 0 auto;
22
24
  min-width: var(--pattern-lock-min-width);
23
- } .pattern-lock__forgotBtn_9i9m4 {
24
- margin: var(--gap-xl) auto 0;
25
- } .pattern-lock__hiddenBtn_9i9m4 {
25
+ } .pattern-lock__forgotBtn_owwdt {
26
+ margin: var(--gap-xs) auto 0;
27
+ } .pattern-lock__hiddenBtn_owwdt {
26
28
  display: none;
27
29
  }
package/esm/Component.responsive.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { TPatternLockInstance } from 'react-canvas-pattern-lock';
3
+ import { TPatternLockInstance } from '@alfalab/react-canvas-pattern-lock';
4
4
  import { PatternLockProps } from "./typings";
5
5
  declare const PatternLock: React.ForwardRefExoticComponent<PatternLockProps & React.RefAttributes<TPatternLockInstance>>;
6
6
  export { PatternLock };
package/esm/Component.responsive.js CHANGED
@@ -5,9 +5,9 @@ import { PatternLockDesktop } from './desktop/Component.desktop.js';
5
5
  import { PatternLockMobile } from './mobile/Component.mobile.js';
6
6
 
7
7
  var PatternLock = forwardRef(function (_a, ref) {
8
- var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = __rest(_a, ["breakpoint"]);
8
+ var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = __rest(_a, ["breakpoint", "defaultMatchMediaValue"]);
9
9
  var query = "(min-width: ".concat(breakpoint, "px)");
10
- var isDesktop = useMatchMedia(query)[0];
10
+ var isDesktop = useMatchMedia(query, defaultMatchMediaValue)[0];
11
11
  var Component = isDesktop ? PatternLockDesktop : PatternLockMobile;
12
12
  return React.createElement(Component, __assign({ ref: ref }, restProps));
13
13
  });
package/esm/components/base-pattern-lock/Component.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { TPatternLockInstance } from 'react-canvas-pattern-lock';
3
+ import { TPatternLockInstance } from '@alfalab/react-canvas-pattern-lock';
4
4
  import { CommonPatternLockProps, PrivatePatternLockProps } from "../../typings";
5
5
  declare const BasePatternLock: React.ForwardRefExoticComponent<(CommonPatternLockProps & PrivatePatternLockProps) & React.RefAttributes<TPatternLockInstance>>;
6
6
  export { BasePatternLock };
package/esm/components/base-pattern-lock/Component.js CHANGED
@@ -1,13 +1,13 @@
1
1
  import { __rest, __assign } from 'tslib';
2
2
  import React, { forwardRef, useState, useEffect } from 'react';
3
- import { ReactCanvasPatternLock } from 'react-canvas-pattern-lock';
4
3
  import cn from 'classnames';
5
4
  import { ButtonMobile } from '@alfalab/core-components-button/esm/mobile';
6
5
  import { getDataTestId } from '@alfalab/core-components-shared/esm';
6
+ import { ReactCanvasPatternLock } from '@alfalab/react-canvas-pattern-lock';
7
7
  import { THEME_STATE, DEFAULT_EXTRA_BOUNDS, OBSERVE_OPTIONS, OBSERVABLE_TOKENS } from '../../consts.js';
8
8
  import { getSizes, getTheme, getColorByToken, getDefaultObserveTarget } from '../../utils.js';
9
9
 
10
- var commonStyles = {"component":"pattern-lock__component_25j35","withForgotBtn":"pattern-lock__withForgotBtn_25j35","forgotBtn":"pattern-lock__forgotBtn_25j35"};
10
+ var commonStyles = {"component":"pattern-lock__component_1625k","canvasContainer":"pattern-lock__canvasContainer_1625k","canvasInner":"pattern-lock__canvasInner_1625k","withForgotBtn":"pattern-lock__withForgotBtn_1625k","forgotBtn":"pattern-lock__forgotBtn_1625k"};
11
11
  require('./index.css')
12
12
 
13
13
  var BasePatternLock = forwardRef(function (_a, ref) {
@@ -32,8 +32,8 @@ var BasePatternLock = forwardRef(function (_a, ref) {
32
32
  if (!prevState) {
33
33
  return { theme: getTheme(elementSizes), width: width, height: height };
34
34
  }
35
- var prevBgColor = prevState.theme[THEME_STATE.INITIAL].colors.bg;
36
- var themeChanged = prevBgColor !== getColorByToken(OBSERVABLE_TOKENS.BG);
35
+ var prevBgColor = prevState.theme[THEME_STATE.INITIAL].colors.primary;
36
+ var themeChanged = prevBgColor !== getColorByToken(OBSERVABLE_TOKENS.PRIMARY);
37
37
  if (themeChanged)
38
38
  return __assign(__assign({}, prevState), { theme: getTheme(elementSizes) });
39
39
  return prevState;
@@ -48,7 +48,9 @@ var BasePatternLock = forwardRef(function (_a, ref) {
48
48
  _b[commonStyles.hidden] = !params,
49
49
  _b[commonStyles.withForgotBtn] = showForgotCodeBtn,
50
50
  _b)), "data-test-id": dataTestId },
51
- React.createElement(ReactCanvasPatternLock, __assign({}, restProps, params, { ref: ref, rows: 3, cols: 3, justifyNodes: 'space-between', extraBounds: extraBounds, hover: hover })),
51
+ React.createElement("div", { className: commonStyles.canvasContainer },
52
+ React.createElement("div", { className: commonStyles.canvasInner },
53
+ React.createElement(ReactCanvasPatternLock, __assign({}, restProps, params, { ref: ref, rows: 3, cols: 3, justifyNodes: 'space-between', extraBounds: extraBounds, hover: hover })))),
52
54
  showForgotCodeBtn && (React.createElement(ButtonMobile, { view: 'transparent', className: cn(commonStyles.forgotBtn, styles.forgotBtn), onClick: onForgotBtnClick, dataTestId: getDataTestId(dataTestId, 'forgot-code-btn') }, forgotCodeBtnText))));
53
55
  });
54
56
  BasePatternLock.displayName = 'BasePatternLock';