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

package/modern/consts.d.ts

@@ -1,4 +1,4 @@
-import { ReactPatternLockProps } from 'react-canvas-pattern-lock';
+import { ReactPatternLockProps } from '@alfalab/react-canvas-pattern-lock';
 import { ObservableTokens } from "./typings";
 declare const OBSERVE_OPTIONS: MutationObserverInit;
 declare const DEFAULT_EXTRA_BOUNDS: ReactPatternLockProps['extraBounds'];

package/modern/consts.js

@@ -10,7 +10,6 @@ const OBSERVABLE_TOKENS = {
     ACCENT_SUCCESS: '--color-light-status-positive',
     ACCENT_FAILURE: '--color-light-status-negative',
     PRIMARY: '--color-light-neutral-500',
-    BG: '--color-light-base-bg-primary',
     RING_BG_INITIAL: '--color-light-neutral-translucent-200',
     SELECTED_RING_BG_INITIAL: '--color-light-neutral-translucent-200-hover',
     SELECTED_RING_BG_SUCCESS: '--color-light-status-muted-positive',

package/modern/desktop/Component.desktop.d.ts

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

package/modern/desktop/Component.desktop.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import { BasePatternLock } from '../components/base-pattern-lock/Component.js';
 
-const styles = {"component":"pattern-lock__component_9i9m4","forgotBtn":"pattern-lock__forgotBtn_9i9m4","hiddenBtn":"pattern-lock__hiddenBtn_9i9m4"};
+const styles = {"component":"pattern-lock__component_owwdt","forgotBtn":"pattern-lock__forgotBtn_owwdt","hiddenBtn":"pattern-lock__hiddenBtn_owwdt"};
 require('./desktop.css')
 
 const PatternLockDesktop = forwardRef((restProps, ref) => React.createElement(BasePatternLock, { ...restProps, hover: true, ref: ref, styles: styles }));

package/modern/desktop/desktop.css

@@ -1,4 +1,4 @@
-/* hash: 1kb1q */
+/* hash: 1r7fn */
 :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 */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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 */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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 @@
 
     /* Hard up */
 } :root {
-} :root {
-    --gap-xl: 24px;
+} :root { /* deprecated */ /* deprecated */
+    --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 */
+
+    /* новые значения, используйте их */
 } :root {
 } :root {
 } :root {
     --pattern-lock-min-width: 304px;
-} .pattern-lock__component_9i9m4 {
+} .pattern-lock__component_owwdt {
     margin: 0 auto;
     min-width: var(--pattern-lock-min-width);
-} .pattern-lock__forgotBtn_9i9m4 {
-    margin: var(--gap-xl) auto 0;
-} .pattern-lock__hiddenBtn_9i9m4 {
+} .pattern-lock__forgotBtn_owwdt {
+    margin: var(--gap-xs) auto 0;
+} .pattern-lock__hiddenBtn_owwdt {
     display: none;
 }

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

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

package/modern/mobile/Component.mobile.d.ts

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

package/modern/mobile/Component.mobile.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import { BasePatternLock } from '../components/base-pattern-lock/Component.js';
 
-const styles = {"component":"pattern-lock__component_s3yo2","forgotBtn":"pattern-lock__forgotBtn_s3yo2"};
+const styles = {"component":"pattern-lock__component_wgxgy","forgotBtn":"pattern-lock__forgotBtn_wgxgy"};
 require('./mobile.css')
 
 const PatternLockMobile = forwardRef((restProps, ref) => React.createElement(BasePatternLock, { ...restProps, ref: ref, styles: styles }));

package/modern/mobile/mobile.css

@@ -1,4 +1,4 @@
-/* hash: 17luw */
+/* hash: 1ceom */
 :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 */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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 */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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,15 +11,17 @@
 
     /* Hard up */
 } :root {
-} :root {
-    --gap-xl: 24px;
+} :root { /* deprecated */ /* deprecated */
+    --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 */
+
+    /* новые значения, используйте их */
 } :root {
 } :root {
 } :root {
     --pattern-lock-min-width: 304px;
-} .pattern-lock__component_s3yo2 {
+} .pattern-lock__component_wgxgy {
     margin: 0 auto;
     min-width: var(--pattern-lock-min-width);
-} .pattern-lock__forgotBtn_s3yo2 {
-    margin: var(--gap-xl) auto 0;
+} .pattern-lock__forgotBtn_wgxgy {
+    margin: var(--gap-xs) auto 0;
 }

package/modern/typings.d.ts

@@ -1,5 +1,5 @@
 import { MouseEvent } from 'react';
-import { ReactPatternLockProps } from 'react-canvas-pattern-lock';
+import { ReactPatternLockProps } from '@alfalab/react-canvas-pattern-lock';
 type ConditionalProps = {
     /**
      * Показать кнопку "забыли код"
@@ -66,6 +66,10 @@ type PatternLockProps = CommonPatternLockProps & {
      * @default 1024
      */
     breakpoint?: number;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
 };
 type ObservableTokens = {
     ACCENT_INITIAL: string;
@@ -76,7 +80,6 @@ type ObservableTokens = {
     SELECTED_RING_BG_SUCCESS: string;
     SELECTED_RING_BG_FAILURE: string;
     PRIMARY: string;
-    BG: string;
     HOVER_INNER: string;
     HOVER_OUTER: string;
 };

package/modern/utils.d.ts

@@ -1,4 +1,4 @@
-import { Theme, ThemeParams } from 'react-canvas-pattern-lock';
+import { Theme, ThemeParams } from '@alfalab/react-canvas-pattern-lock';
 declare function getDefaultObserveTarget(): HTMLHeadElement;
 declare function getColorByToken(token: string): string;
 declare const getSizes: () => {

package/modern/utils.js

@@ -29,7 +29,7 @@ const getSizes = (() => {
 function getTheme(dimens) {
     const baseColors = {
         primary: getColorByToken(OBSERVABLE_TOKENS.PRIMARY),
-        bg: getColorByToken(OBSERVABLE_TOKENS.BG),
+        bg: 'transparent',
         ringBg: getColorByToken(OBSERVABLE_TOKENS.RING_BG_INITIAL),
         hover: {
             inner: getColorByToken(OBSERVABLE_TOKENS.HOVER_INNER),

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-pattern-lock",
-    "version": "2.0.1",
+    "version": "2.2.0",
     "description": "Pattern lock",
     "keywords": [],
     "license": "MIT",
@@ -15,11 +15,13 @@
         "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-button": "^11.5.2",
+        "@alfalab/core-components-button": "^11.5.3",
         "@alfalab/core-components-shared": "^0.11.0",
-        "@alfalab/core-components-mq": "^4.2.0",
-        "react-canvas-pattern-lock": "^2.0.6",
+        "@alfalab/core-components-mq": "^4.3.0",
+        "@alfalab/react-canvas-pattern-lock": "^2.0.7",
         "classnames": "^2.3.1",
         "tslib": "^2.4.0"
-    }
+    },
+    "themesVersion": "13.0.1",
+    "varsVersion": "9.10.0"
 }

package/src/Component.responsive.tsx

@@ -1,17 +1,17 @@
 import React, { forwardRef } from 'react';
-import type { TPatternLockInstance } from 'react-canvas-pattern-lock';
 
 import { useMatchMedia } from '@alfalab/core-components-mq';
+import type { TPatternLockInstance } from '@alfalab/react-canvas-pattern-lock';
 
 import { PatternLockDesktop } from './desktop';
 import { PatternLockMobile } from './mobile';
 import { PatternLockProps } from './typings';
 
 export const PatternLock = forwardRef<TPatternLockInstance, PatternLockProps>(
-    ({ breakpoint = 1024, ...restProps }, ref) => {
+    ({ breakpoint = 1024, defaultMatchMediaValue, ...restProps }, ref) => {
         const query = `(min-width: ${breakpoint}px)`;
 
-        const [isDesktop] = useMatchMedia(query);
+        const [isDesktop] = useMatchMedia(query, defaultMatchMediaValue);
 
         const Component = isDesktop ? PatternLockDesktop : PatternLockMobile;
 

package/src/components/base-pattern-lock/Component.tsx

@@ -1,10 +1,10 @@
 import React, { forwardRef, useEffect, useState } from 'react';
-import type { Theme, TPatternLockInstance } from 'react-canvas-pattern-lock';
-import { ReactCanvasPatternLock } from 'react-canvas-pattern-lock';
 import cn from 'classnames';
 
 import { ButtonMobile } from '@alfalab/core-components-button/mobile';
 import { getDataTestId } from '@alfalab/core-components-shared';
+import type { Theme, TPatternLockInstance } from '@alfalab/react-canvas-pattern-lock';
+import { ReactCanvasPatternLock } from '@alfalab/react-canvas-pattern-lock';
 
 import {
     DEFAULT_EXTRA_BOUNDS,
@@ -67,8 +67,9 @@ export const BasePatternLock = forwardRef<
                             return { theme: getTheme(elementSizes), width, height };
                         }
 
-                        const prevBgColor = prevState.theme[THEME_STATE.INITIAL].colors.bg;
-                        const themeChanged = prevBgColor !== getColorByToken(OBSERVABLE_TOKENS.BG);
+                        const prevBgColor = prevState.theme[THEME_STATE.INITIAL].colors.primary;
+                        const themeChanged =
+                            prevBgColor !== getColorByToken(OBSERVABLE_TOKENS.PRIMARY);
 
                         if (themeChanged) return { ...prevState, theme: getTheme(elementSizes) };
 
@@ -91,17 +92,20 @@ export const BasePatternLock = forwardRef<
                 })}
                 data-test-id={dataTestId}
             >
-                <ReactCanvasPatternLock
-                    {...restProps}
-                    {...params}
-                    ref={ref}
-                    rows={3}
-                    cols={3}
-                    justifyNodes='space-between'
-                    extraBounds={extraBounds}
-                    hover={hover}
-                />
-
+                <div className={commonStyles.canvasContainer}>
+                    <div className={commonStyles.canvasInner}>
+                        <ReactCanvasPatternLock
+                            {...restProps}
+                            {...params}
+                            ref={ref}
+                            rows={3}
+                            cols={3}
+                            justifyNodes='space-between'
+                            extraBounds={extraBounds}
+                            hover={hover}
+                        />
+                    </div>
+                </div>
                 {showForgotCodeBtn && (
                     <ButtonMobile
                         view='transparent'

package/src/components/base-pattern-lock/index.module.css

@@ -4,14 +4,27 @@
 .component {
     display: flex;
     flex-direction: column;
+    align-items: center;
     box-sizing: border-box;
     min-height: var(--pattern-lock-min-height);
-    padding: var(--gap-m) 0;
 
     & canvas {
         display: block;
         margin: 0 auto;
     }
+
+    & .canvasContainer {
+        box-sizing: border-box;
+        padding: var(--gap-m) var(--gap-m);
+        min-width: var(--pattern-lock-min-width);
+        min-height: var(--pattern-lock-min-height);
+
+        & .canvasInner {
+            box-sizing: border-box;
+            padding: 0 var(--gap-m);
+            min-width: var(--pattern-lock-min-height);
+        }
+    }
 }
 
 .withForgotBtn {

package/src/consts.ts

@@ -1,4 +1,4 @@
-import type { ReactPatternLockProps } from 'react-canvas-pattern-lock';
+import type { ReactPatternLockProps } from '@alfalab/react-canvas-pattern-lock';
 
 import type { ObservableTokens } from './typings';
 
@@ -16,7 +16,6 @@ export const OBSERVABLE_TOKENS: ObservableTokens = {
     ACCENT_SUCCESS: '--color-light-status-positive',
     ACCENT_FAILURE: '--color-light-status-negative',
     PRIMARY: '--color-light-neutral-500',
-    BG: '--color-light-base-bg-primary',
     RING_BG_INITIAL: '--color-light-neutral-translucent-200',
     SELECTED_RING_BG_INITIAL: '--color-light-neutral-translucent-200-hover',
     SELECTED_RING_BG_SUCCESS: '--color-light-status-muted-positive',

package/src/desktop/Component.desktop.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef } from 'react';
-import type { TPatternLockInstance } from 'react-canvas-pattern-lock';
+
+import type { TPatternLockInstance } from '@alfalab/react-canvas-pattern-lock';
 
 import { BasePatternLock } from '../components/base-pattern-lock';
 import { CommonPatternLockProps } from '../typings';

package/src/desktop/desktop.module.css

@@ -7,7 +7,7 @@
 }
 
 .forgotBtn {
-    margin: var(--gap-xl) auto 0;
+    margin: var(--gap-xs) auto 0;
 }
 
 .hiddenBtn {

package/src/hooks/use-pattern-lock-cleanup.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
-import type { TPatternLockInstance } from 'react-canvas-pattern-lock';
+
+import type { TPatternLockInstance } from '@alfalab/react-canvas-pattern-lock';
 
 export const usePatternLockCleanup = (
     patternLockRef: React.MutableRefObject<TPatternLockInstance | null>,

package/src/mobile/Component.mobile.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef } from 'react';
-import type { TPatternLockInstance } from 'react-canvas-pattern-lock';
+
+import type { TPatternLockInstance } from '@alfalab/react-canvas-pattern-lock';
 
 import { BasePatternLock } from '../components/base-pattern-lock';
 import { CommonPatternLockProps } from '../typings';

package/src/mobile/mobile.module.css

@@ -7,5 +7,5 @@
 }
 
 .forgotBtn {
-    margin: var(--gap-xl) auto 0;
+    margin: var(--gap-xs) auto 0;
 }

package/src/typings.ts

@@ -1,5 +1,6 @@
 import { MouseEvent } from 'react';
-import { ReactPatternLockProps } from 'react-canvas-pattern-lock';
+
+import { ReactPatternLockProps } from '@alfalab/react-canvas-pattern-lock';
 
 type ConditionalProps =
     | {
@@ -80,6 +81,11 @@ export type PatternLockProps = CommonPatternLockProps & {
      * @default 1024
      */
     breakpoint?: number;
+
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
 };
 export type ObservableTokens = {
     ACCENT_INITIAL: string;
@@ -90,7 +96,6 @@ export type ObservableTokens = {
     SELECTED_RING_BG_SUCCESS: string;
     SELECTED_RING_BG_FAILURE: string;
     PRIMARY: string;
-    BG: string;
     HOVER_INNER: string;
     HOVER_OUTER: string;
 };

package/src/utils.ts

@@ -1,6 +1,5 @@
-import { Theme, ThemeParams } from 'react-canvas-pattern-lock';
-
 import { getDataTestId } from '@alfalab/core-components-shared';
+import { Theme, ThemeParams } from '@alfalab/react-canvas-pattern-lock';
 
 import { OBSERVABLE_TOKENS, THEME_STATE } from './consts';
 
@@ -39,7 +38,7 @@ export const getSizes = (() => {
 export function getTheme(dimens: ThemeParams['dimens']): Theme {
     const baseColors = {
         primary: getColorByToken(OBSERVABLE_TOKENS.PRIMARY),
-        bg: getColorByToken(OBSERVABLE_TOKENS.BG),
+        bg: 'transparent',
         ringBg: getColorByToken(OBSERVABLE_TOKENS.RING_BG_INITIAL),
         hover: {
             inner: getColorByToken(OBSERVABLE_TOKENS.HOVER_INNER),

package/typings.d.ts

@@ -1,5 +1,5 @@
 import { MouseEvent } from 'react';
-import { ReactPatternLockProps } from 'react-canvas-pattern-lock';
+import { ReactPatternLockProps } from '@alfalab/react-canvas-pattern-lock';
 type ConditionalProps = {
     /**
      * Показать кнопку "забыли код"
@@ -66,6 +66,10 @@ type PatternLockProps = CommonPatternLockProps & {
      * @default 1024
      */
     breakpoint?: number;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
 };
 type ObservableTokens = {
     ACCENT_INITIAL: string;
@@ -76,7 +80,6 @@ type ObservableTokens = {
     SELECTED_RING_BG_SUCCESS: string;
     SELECTED_RING_BG_FAILURE: string;
     PRIMARY: string;
-    BG: string;
     HOVER_INNER: string;
     HOVER_OUTER: string;
 };

package/utils.d.ts

@@ -1,4 +1,4 @@
-import { Theme, ThemeParams } from 'react-canvas-pattern-lock';
+import { Theme, ThemeParams } from '@alfalab/react-canvas-pattern-lock';
 declare function getDefaultObserveTarget(): HTMLHeadElement;
 declare function getColorByToken(token: string): string;
 declare const getSizes: () => {

package/utils.js

@@ -35,7 +35,7 @@ function getTheme(dimens) {
     var _a;
     var baseColors = {
         primary: getColorByToken(consts.OBSERVABLE_TOKENS.PRIMARY),
-        bg: getColorByToken(consts.OBSERVABLE_TOKENS.BG),
+        bg: 'transparent',
         ringBg: getColorByToken(consts.OBSERVABLE_TOKENS.RING_BG_INITIAL),
         hover: {
             inner: getColorByToken(consts.OBSERVABLE_TOKENS.HOVER_INNER),