@alfalab/core-components 45.9.0-beta.0 → 45.9.0-beta.2

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

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

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

@@ -1,9 +1,7 @@
-export { BasePatternLock } from './Component.js';
-import 'react';
-import 'react-canvas-pattern-lock';
-import 'classnames';
-import '../../../../button/cssm/mobile';
-import '../../../../shared/cssm';
-import '../../consts.js';
-import '../../utils.js';
-import './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_basePatternLock_Component = require('./Component.js');
+
+
+
+exports.BasePatternLock = components_basePatternLock_Component.BasePatternLock;

package/pattern-lock/cssm/consts.js

@@ -1,11 +1,13 @@
-const OBSERVE_OPTIONS = {
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var OBSERVE_OPTIONS = {
     childList: true,
     attributes: false,
     characterData: false,
     subtree: true,
 };
-const DEFAULT_EXTRA_BOUNDS = [75, 50, 75, 50];
-const OBSERVABLE_TOKENS = {
+var DEFAULT_EXTRA_BOUNDS = [75, 50, 75, 50];
+var OBSERVABLE_TOKENS = {
     ACCENT_INITIAL: '--color-light-graphic-primary',
     ACCENT_SUCCESS: '--color-light-graphic-positive',
     ACCENT_FAILURE: '--color-light-graphic-negative',
@@ -18,10 +20,13 @@ const OBSERVABLE_TOKENS = {
     HOVER_INNER: '--color-light-neutral-500-hover',
     HOVER_OUTER: '--color-light-neutral-translucent-200-hover',
 };
-const THEME_STATE = {
+var THEME_STATE = {
     INITIAL: 'initial',
     SUCCESS: 'success',
     FAILURE: 'failure',
 };
 
-export { DEFAULT_EXTRA_BOUNDS, OBSERVABLE_TOKENS, OBSERVE_OPTIONS, THEME_STATE };
+exports.DEFAULT_EXTRA_BOUNDS = DEFAULT_EXTRA_BOUNDS;
+exports.OBSERVABLE_TOKENS = OBSERVABLE_TOKENS;
+exports.OBSERVE_OPTIONS = OBSERVE_OPTIONS;
+exports.THEME_STATE = THEME_STATE;

package/pattern-lock/cssm/desktop/Component.desktop.js

@@ -1,14 +1,15 @@
-import React, { forwardRef } from 'react';
-import { BasePatternLock } from '../components/base-pattern-lock/Component.js';
-import styles from './desktop.module.css';
-import 'react-canvas-pattern-lock';
-import 'classnames';
-import '../../../button/cssm/mobile';
-import '../../../shared/cssm';
-import '../consts.js';
-import '../utils.js';
-import '../components/base-pattern-lock/index.module.css';
-
-const PatternLockDesktop = forwardRef((restProps, ref) => React.createElement(BasePatternLock, { ...restProps, hover: true, ref: ref, styles: styles }));
-
-export { PatternLockDesktop };
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var components_basePatternLock_Component = require('../components/base-pattern-lock/Component.js');
+var styles = require('./desktop.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var PatternLockDesktop = React.forwardRef(function (restProps, ref) { return React__default.default.createElement(components_basePatternLock_Component.BasePatternLock, tslib.__assign({}, restProps, { hover: true, ref: ref, styles: styles__default.default })); });
+
+exports.PatternLockDesktop = PatternLockDesktop;

package/pattern-lock/cssm/desktop/index.js

@@ -1,11 +1,7 @@
-export { PatternLockDesktop } from './Component.desktop.js';
-import 'react';
-import '../components/base-pattern-lock/Component.js';
-import 'react-canvas-pattern-lock';
-import 'classnames';
-import '../../../button/cssm/mobile';
-import '../../../shared/cssm';
-import '../consts.js';
-import '../utils.js';
-import '../components/base-pattern-lock/index.module.css';
-import './desktop.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var desktop_Component_desktop = require('./Component.desktop.js');
+
+
+
+exports.PatternLockDesktop = desktop_Component_desktop.PatternLockDesktop;

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

@@ -1,14 +1,16 @@
-import { useMemo } from 'react';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const usePatternLockCleanup = (patternLockRef) => {
-    const clear = useMemo(() => {
+var React = require('react');
+
+var usePatternLockCleanup = function (patternLockRef) {
+    var clear = React.useMemo(function () {
         if (patternLockRef.current) {
             patternLockRef.current.setInitialState();
         }
     }, [patternLockRef]);
     return {
-        clear,
+        clear: clear,
     };
 };
 
-export { usePatternLockCleanup };
+exports.usePatternLockCleanup = usePatternLockCleanup;

package/pattern-lock/cssm/index.js

@@ -1,15 +1,9 @@
-export { PatternLock } from './Component.responsive.js';
-export { THEME_STATE } from './consts.js';
-import 'react';
-import '../../mq/cssm';
-import './desktop/Component.desktop.js';
-import './components/base-pattern-lock/Component.js';
-import 'react-canvas-pattern-lock';
-import 'classnames';
-import '../../button/cssm/mobile';
-import '../../shared/cssm';
-import './utils.js';
-import './components/base-pattern-lock/index.module.css';
-import './desktop/desktop.module.css';
-import './mobile/Component.mobile.js';
-import './mobile/mobile.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component_responsive = require('./Component.responsive.js');
+var consts = require('./consts.js');
+
+
+
+exports.PatternLock = Component_responsive.PatternLock;
+exports.THEME_STATE = consts.THEME_STATE;

package/pattern-lock/cssm/mobile/Component.mobile.js

@@ -1,14 +1,15 @@
-import React, { forwardRef } from 'react';
-import { BasePatternLock } from '../components/base-pattern-lock/Component.js';
-import styles from './mobile.module.css';
-import 'react-canvas-pattern-lock';
-import 'classnames';
-import '../../../button/cssm/mobile';
-import '../../../shared/cssm';
-import '../consts.js';
-import '../utils.js';
-import '../components/base-pattern-lock/index.module.css';
-
-const PatternLockMobile = forwardRef((restProps, ref) => React.createElement(BasePatternLock, { ...restProps, ref: ref, styles: styles }));
-
-export { PatternLockMobile };
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var components_basePatternLock_Component = require('../components/base-pattern-lock/Component.js');
+var styles = require('./mobile.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var PatternLockMobile = React.forwardRef(function (restProps, ref) { return React__default.default.createElement(components_basePatternLock_Component.BasePatternLock, tslib.__assign({}, restProps, { ref: ref, styles: styles__default.default })); });
+
+exports.PatternLockMobile = PatternLockMobile;

package/pattern-lock/cssm/mobile/index.js

@@ -1,11 +1,7 @@
-export { PatternLockMobile } from './Component.mobile.js';
-import 'react';
-import '../components/base-pattern-lock/Component.js';
-import 'react-canvas-pattern-lock';
-import 'classnames';
-import '../../../button/cssm/mobile';
-import '../../../shared/cssm';
-import '../consts.js';
-import '../utils.js';
-import '../components/base-pattern-lock/index.module.css';
-import './mobile.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var mobile_Component_mobile = require('./Component.mobile.js');
+
+
+
+exports.PatternLockMobile = mobile_Component_mobile.PatternLockMobile;

package/pattern-lock/cssm/shared/index.js

@@ -1,5 +1,9 @@
-export { getPatternLockTestIds } from '../utils.js';
-export { usePatternLockCleanup } from '../hooks/use-pattern-lock-cleanup.js';
-import '../../../shared/cssm';
-import '../consts.js';
-import 'react';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utils = require('../utils.js');
+var hooks_usePatternLockCleanup = require('../hooks/use-pattern-lock-cleanup.js');
+
+
+
+exports.getPatternLockTestIds = utils.getPatternLockTestIds;
+exports.usePatternLockCleanup = hooks_usePatternLockCleanup.usePatternLockCleanup;

package/pattern-lock/cssm/utils.js

@@ -1,5 +1,8 @@
-import { getDataTestId } from '../../shared/cssm';
-import { OBSERVABLE_TOKENS, THEME_STATE } from './consts.js';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var coreComponentsShared = require('../../shared/cssm');
+var consts = require('./consts.js');
 
 function getDefaultObserveTarget() {
     return document.head;
@@ -7,41 +10,41 @@ function getDefaultObserveTarget() {
 function getColorByToken(token) {
     return getComputedStyle(document.documentElement).getPropertyValue(token);
 }
-const getSizes = (() => {
-    const COMMON_SIZES = {
+var getSizes = (function () {
+    var COMMON_SIZES = {
         lineWidth: 6,
         nodeRing: 0,
         nodeCore: 12,
     };
-    let cachedSize;
-    return () => {
+    var cachedSize;
+    return function () {
         if (cachedSize) {
             return cachedSize;
         }
         if (window.matchMedia('(min-width: 600px)').matches) {
             cachedSize = {
-                elementSizes: { ...COMMON_SIZES, nodeRadius: 32 },
+                elementSizes: tslib.__assign(tslib.__assign({}, COMMON_SIZES), { nodeRadius: 32 }),
                 width: 240,
                 height: 240,
             };
         }
         else if (window.matchMedia('(min-width: 390px)').matches) {
             cachedSize = {
-                elementSizes: { ...COMMON_SIZES, nodeRadius: 43 },
+                elementSizes: tslib.__assign(tslib.__assign({}, COMMON_SIZES), { nodeRadius: 43 }),
                 width: 322,
                 height: 322,
             };
         }
         else if (window.matchMedia('(min-width: 360px)').matches) {
             cachedSize = {
-                elementSizes: { ...COMMON_SIZES, nodeRadius: 38 },
+                elementSizes: tslib.__assign(tslib.__assign({}, COMMON_SIZES), { nodeRadius: 38 }),
                 width: 292,
                 height: 292,
             };
         }
         else {
             cachedSize = {
-                elementSizes: { ...COMMON_SIZES, nodeRadius: 32 },
+                elementSizes: tslib.__assign(tslib.__assign({}, COMMON_SIZES), { nodeRadius: 32 }),
                 width: 240,
                 height: 240,
             };
@@ -50,49 +53,42 @@ const getSizes = (() => {
     };
 })();
 function getTheme(dimens) {
-    const baseColors = {
-        primary: getColorByToken(OBSERVABLE_TOKENS.PRIMARY),
-        bg: getColorByToken(OBSERVABLE_TOKENS.BG),
-        ringBg: getColorByToken(OBSERVABLE_TOKENS.RING_BG_INITIAL),
+    var _a;
+    var baseColors = {
+        primary: getColorByToken(consts.OBSERVABLE_TOKENS.PRIMARY),
+        bg: getColorByToken(consts.OBSERVABLE_TOKENS.BG),
+        ringBg: getColorByToken(consts.OBSERVABLE_TOKENS.RING_BG_INITIAL),
         hover: {
-            inner: getColorByToken(OBSERVABLE_TOKENS.HOVER_INNER),
-            outer: getColorByToken(OBSERVABLE_TOKENS.HOVER_OUTER),
+            inner: getColorByToken(consts.OBSERVABLE_TOKENS.HOVER_INNER),
+            outer: getColorByToken(consts.OBSERVABLE_TOKENS.HOVER_OUTER),
         },
     };
-    return {
-        [THEME_STATE.INITIAL]: {
-            colors: {
-                ...baseColors,
-                accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_INITIAL),
-                selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_INITIAL),
-            },
-            dimens,
+    return _a = {},
+        _a[consts.THEME_STATE.INITIAL] = {
+            colors: tslib.__assign(tslib.__assign({}, baseColors), { accent: getColorByToken(consts.OBSERVABLE_TOKENS.ACCENT_INITIAL), selectedRingBg: getColorByToken(consts.OBSERVABLE_TOKENS.SELECTED_RING_BG_INITIAL) }),
+            dimens: dimens,
         },
-        [THEME_STATE.SUCCESS]: {
-            colors: {
-                ...baseColors,
-                accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_SUCCESS),
-                selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_SUCCESS),
-            },
-            dimens,
+        _a[consts.THEME_STATE.SUCCESS] = {
+            colors: tslib.__assign(tslib.__assign({}, baseColors), { accent: getColorByToken(consts.OBSERVABLE_TOKENS.ACCENT_SUCCESS), selectedRingBg: getColorByToken(consts.OBSERVABLE_TOKENS.SELECTED_RING_BG_SUCCESS) }),
+            dimens: dimens,
         },
-        [THEME_STATE.FAILURE]: {
-            colors: {
-                ...baseColors,
-                accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_FAILURE),
-                selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_FAILURE),
-            },
-            dimens,
+        _a[consts.THEME_STATE.FAILURE] = {
+            colors: tslib.__assign(tslib.__assign({}, baseColors), { accent: getColorByToken(consts.OBSERVABLE_TOKENS.ACCENT_FAILURE), selectedRingBg: getColorByToken(consts.OBSERVABLE_TOKENS.SELECTED_RING_BG_FAILURE) }),
+            dimens: dimens,
         },
-    };
+        _a;
 }
 function getPatternLockTestIds(dataTestId) {
     return {
         patternLock: dataTestId,
-        forgotCodeBtn: getDataTestId(dataTestId, 'forgot-code-btn'),
-        error: getDataTestId(dataTestId, 'error'),
-        message: getDataTestId(dataTestId, 'message'),
+        forgotCodeBtn: coreComponentsShared.getDataTestId(dataTestId, 'forgot-code-btn'),
+        error: coreComponentsShared.getDataTestId(dataTestId, 'error'),
+        message: coreComponentsShared.getDataTestId(dataTestId, 'message'),
     };
 }
 
-export { getColorByToken, getDefaultObserveTarget, getPatternLockTestIds, getSizes, getTheme };
+exports.getColorByToken = getColorByToken;
+exports.getDefaultObserveTarget = getDefaultObserveTarget;
+exports.getPatternLockTestIds = getPatternLockTestIds;
+exports.getSizes = getSizes;
+exports.getTheme = getTheme;

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

@@ -1,18 +1,18 @@
 import { __rest, __assign } from 'tslib';
 import React, { forwardRef } from 'react';
 import { useMatchMedia } from '../../mq/esm';
+import { getComponentBreakpoint } from '../../shared/esm';
 import { PatternLockDesktop } from './desktop/Component.desktop.js';
 import { PatternLockMobile } from './mobile/Component.mobile.js';
 import './components/base-pattern-lock/Component.js';
 import 'react-canvas-pattern-lock';
 import 'classnames';
 import '../../button/esm/mobile';
-import '../../shared/esm';
 import './consts.js';
 import './utils.js';
 
 var PatternLock = forwardRef(function (_a, ref) {
-    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = __rest(_a, ["breakpoint"]);
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? getComponentBreakpoint() : _b, restProps = __rest(_a, ["breakpoint"]);
     var query = "(min-width: ".concat(breakpoint, "px)");
     var isDesktop = useMatchMedia(query)[0];
     var Component = isDesktop ? PatternLockDesktop : PatternLockMobile;

package/pattern-lock/esm/index.js

@@ -3,11 +3,11 @@ export { THEME_STATE } from './consts.js';
 import 'tslib';
 import 'react';
 import '../../mq/esm';
+import '../../shared/esm';
 import './desktop/Component.desktop.js';
 import './components/base-pattern-lock/Component.js';
 import 'react-canvas-pattern-lock';
 import 'classnames';
 import '../../button/esm/mobile';
-import '../../shared/esm';
 import './utils.js';
 import './mobile/Component.mobile.js';

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

@@ -1,16 +1,16 @@
 import React, { forwardRef } from 'react';
 import { useMatchMedia } from '../../mq/modern';
+import { getComponentBreakpoint } from '../../shared/modern';
 import { PatternLockDesktop } from './desktop/Component.desktop.js';
 import { PatternLockMobile } from './mobile/Component.mobile.js';
 import './components/base-pattern-lock/Component.js';
 import 'react-canvas-pattern-lock';
 import 'classnames';
 import '../../button/modern/mobile';
-import '../../shared/modern';
 import './consts.js';
 import './utils.js';
 
-const PatternLock = forwardRef(({ breakpoint = 1024, ...restProps }, ref) => {
+const PatternLock = forwardRef(({ breakpoint = getComponentBreakpoint(), ...restProps }, ref) => {
     const query = `(min-width: ${breakpoint}px)`;
     const [isDesktop] = useMatchMedia(query);
     const Component = isDesktop ? PatternLockDesktop : PatternLockMobile;

package/pattern-lock/modern/index.js

@@ -2,11 +2,11 @@ export { PatternLock } from './Component.responsive.js';
 export { THEME_STATE } from './consts.js';
 import 'react';
 import '../../mq/modern';
+import '../../shared/modern';
 import './desktop/Component.desktop.js';
 import './components/base-pattern-lock/Component.js';
 import 'react-canvas-pattern-lock';
 import 'classnames';
 import '../../button/modern/mobile';
-import '../../shared/modern';
 import './utils.js';
 import './mobile/Component.mobile.js';