@alfalab/core-components-pattern-lock-v1 2.0.0 → 2.1.0-snapshot-92b8690

package/dynamic-mixins/typings.d.ts

@@ -0,0 +1,91 @@
+import { MouseEvent, ReactNode } from 'react';
+import { ReactPatternLockProps } from 'react-canvas-pattern-lock';
+declare type ConditionalProps = {
+    /**
+     * Показать кнопку "забыли код"
+     * @default "Забыли код?"
+     */
+    showForgotCodeBtn: true;
+    /**
+     * Текст кнопки "забыли код"
+     * @default "Забыли код?"
+     */
+    forgotCodeBtnText?: string;
+    /**
+     * Коллбэк, вызываемый при клике на кнопку "Забыли код"
+     */
+    onForgotBtnClick: (event: MouseEvent<HTMLButtonElement>) => void;
+} | {
+    showForgotCodeBtn?: false;
+    onForgotBtnClick?: never;
+    forgotCodeBtnText?: never;
+};
+export declare type CommonPatternLockProps = {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Сообщение об ошибке
+     */
+    error?: ReactNode;
+    /**
+     * Сообщение над графическим ключом
+     */
+    message?: ReactNode;
+    /**
+     * Идентификатор для систем автоматизированного тестирования.
+     * Для сообщения используется модификатор -message, ошибки -error,
+     * кнопки "забыли код" -forgot-code-btn
+     */
+    dataTestId?: string;
+    /**
+     * Следить ли за изменениями значений цветовых токенов
+     * @default false
+     */
+    observeTokens?: boolean;
+    /**
+     * Параметры MutationObserver для наблюдения за изменениями режима(css custom properties)
+     */
+    observerParams?: {
+        getTarget?: () => Node;
+        options?: MutationObserverInit;
+    };
+    /**
+     * Дополнительный класс для message/errorMessage
+     */
+    messageClassName?: string;
+} & Omit<ReactPatternLockProps, 'theme' | 'width' | 'height' | 'rows' | 'cols' | 'hover'> & ConditionalProps;
+export declare type PrivatePatternLockProps = {
+    /**
+     * Включает ховер-эффект
+     */
+    hover?: boolean;
+    /**
+     * Стили компонента
+     */
+    styles: {
+        [key: string]: string;
+    };
+};
+export declare type PatternLockProps = CommonPatternLockProps & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
+export declare type ObservableTokens = {
+    ACCENT_INITIAL: string;
+    ACCENT_SUCCESS: string;
+    ACCENT_FAILURE: string;
+    RING_BG_INITIAL: string;
+    SELECTED_RING_BG_INITIAL: string;
+    SELECTED_RING_BG_SUCCESS: string;
+    SELECTED_RING_BG_FAILURE: string;
+    PRIMARY: string;
+    BG: string;
+    HOVER_INNER: string;
+    HOVER_OUTER: string;
+};
+export {};

package/dynamic-mixins/typings.js

@@ -0,0 +1,3 @@
+'use strict';
+
+//# sourceMappingURL=typings.js.map

package/dynamic-mixins/typings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typings.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dynamic-mixins/utils.d.ts

@@ -0,0 +1,15 @@
+import { Theme, ThemeParams } from 'react-canvas-pattern-lock';
+export declare function getDefaultObserveTarget(): HTMLHeadElement;
+export declare function getColorByToken(token: string): string;
+export declare const getSizes: () => {
+    elementSizes: ThemeParams['dimens'];
+    width: number;
+    height: number;
+};
+export declare function getTheme(dimens: ThemeParams['dimens']): Theme;
+export declare function getPatternLockTestIds(dataTestId: string): {
+    patternLock: string;
+    forgotCodeBtn: string;
+    error: string;
+    message: string;
+};

package/dynamic-mixins/utils.js

@@ -0,0 +1,97 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var dynamicMixins = require('@alfalab/core-components-shared/dynamic-mixins');
+var consts = require('./consts.js');
+
+function getDefaultObserveTarget() {
+    return document.head;
+}
+function getColorByToken(token) {
+    return getComputedStyle(document.documentElement).getPropertyValue(token);
+}
+var getSizes = (function () {
+    var COMMON_SIZES = {
+        lineWidth: 6,
+        nodeRing: 0,
+        nodeCore: 12,
+    };
+    var cachedSize;
+    return function () {
+        if (cachedSize) {
+            return cachedSize;
+        }
+        if (window.matchMedia('(min-width: 600px)').matches) {
+            cachedSize = {
+                elementSizes: tslib.__assign(tslib.__assign({}, COMMON_SIZES), { nodeRadius: 32 }),
+                width: 240,
+                height: 240,
+            };
+        }
+        else if (window.matchMedia('(min-width: 390px)').matches) {
+            cachedSize = {
+                elementSizes: tslib.__assign(tslib.__assign({}, COMMON_SIZES), { nodeRadius: 43 }),
+                width: 322,
+                height: 322,
+            };
+        }
+        else if (window.matchMedia('(min-width: 360px)').matches) {
+            cachedSize = {
+                elementSizes: tslib.__assign(tslib.__assign({}, COMMON_SIZES), { nodeRadius: 38 }),
+                width: 292,
+                height: 292,
+            };
+        }
+        else {
+            cachedSize = {
+                elementSizes: tslib.__assign(tslib.__assign({}, COMMON_SIZES), { nodeRadius: 32 }),
+                width: 240,
+                height: 240,
+            };
+        }
+        return cachedSize;
+    };
+})();
+function getTheme(dimens) {
+    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(consts.OBSERVABLE_TOKENS.HOVER_INNER),
+            outer: getColorByToken(consts.OBSERVABLE_TOKENS.HOVER_OUTER),
+        },
+    };
+    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,
+        },
+        _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,
+        },
+        _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: dynamicMixins.getDataTestId(dataTestId, 'forgot-code-btn'),
+        error: dynamicMixins.getDataTestId(dataTestId, 'error'),
+        message: dynamicMixins.getDataTestId(dataTestId, 'message'),
+    };
+}
+
+exports.getColorByToken = getColorByToken;
+exports.getDefaultObserveTarget = getDefaultObserveTarget;
+exports.getPatternLockTestIds = getPatternLockTestIds;
+exports.getSizes = getSizes;
+exports.getTheme = getTheme;
+//# sourceMappingURL=utils.js.map

package/dynamic-mixins/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../src/utils.ts"],"sourcesContent":["import { Theme, ThemeParams } from 'react-canvas-pattern-lock';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport { OBSERVABLE_TOKENS, THEME_STATE } from './consts';\n\nexport function getDefaultObserveTarget() {\n    return document.head;\n}\n\nexport function getColorByToken(token: string) {\n    return getComputedStyle(document.documentElement).getPropertyValue(token);\n}\n\nexport const getSizes = (() => {\n    const COMMON_SIZES = {\n        lineWidth: 6,\n        nodeRing: 0,\n        nodeCore: 12,\n    };\n\n    let cachedSize: { elementSizes: ThemeParams['dimens']; width: number; height: number };\n\n    return () => {\n        if (cachedSize) {\n            return cachedSize;\n        }\n\n        if (window.matchMedia('(min-width: 600px)').matches) {\n            cachedSize = {\n                elementSizes: { ...COMMON_SIZES, nodeRadius: 32 },\n                width: 240,\n                height: 240,\n            };\n        } else if (window.matchMedia('(min-width: 390px)').matches) {\n            cachedSize = {\n                elementSizes: { ...COMMON_SIZES, nodeRadius: 43 },\n                width: 322,\n                height: 322,\n            };\n        } else if (window.matchMedia('(min-width: 360px)').matches) {\n            cachedSize = {\n                elementSizes: { ...COMMON_SIZES, nodeRadius: 38 },\n                width: 292,\n                height: 292,\n            };\n        } else {\n            cachedSize = {\n                elementSizes: { ...COMMON_SIZES, nodeRadius: 32 },\n                width: 240,\n                height: 240,\n            };\n        }\n\n        return cachedSize;\n    };\n})();\n\nexport function getTheme(dimens: ThemeParams['dimens']): Theme {\n    const baseColors = {\n        primary: getColorByToken(OBSERVABLE_TOKENS.PRIMARY),\n        bg: getColorByToken(OBSERVABLE_TOKENS.BG),\n        ringBg: getColorByToken(OBSERVABLE_TOKENS.RING_BG_INITIAL),\n        hover: {\n            inner: getColorByToken(OBSERVABLE_TOKENS.HOVER_INNER),\n            outer: getColorByToken(OBSERVABLE_TOKENS.HOVER_OUTER),\n        },\n    };\n\n    return {\n        [THEME_STATE.INITIAL]: {\n            colors: {\n                ...baseColors,\n                accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_INITIAL),\n                selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_INITIAL),\n            },\n            dimens,\n        },\n        [THEME_STATE.SUCCESS]: {\n            colors: {\n                ...baseColors,\n                accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_SUCCESS),\n                selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_SUCCESS),\n            },\n            dimens,\n        },\n        [THEME_STATE.FAILURE]: {\n            colors: {\n                ...baseColors,\n                accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_FAILURE),\n                selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_FAILURE),\n            },\n            dimens,\n        },\n    };\n}\n\nexport function getPatternLockTestIds(dataTestId: string) {\n    return {\n        patternLock: dataTestId,\n        forgotCodeBtn: getDataTestId(dataTestId, 'forgot-code-btn'),\n        error: getDataTestId(dataTestId, 'error'),\n        message: getDataTestId(dataTestId, 'message'),\n    };\n}\n"],"names":["OBSERVABLE_TOKENS","THEME_STATE","__assign","getDataTestId"],"mappings":"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"}

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

@@ -9,12 +9,12 @@
     --gap-40: var(--gap-3xl);
 } :root {
     --size-xs-height: 40px;
-} .pattern-lock-v1__component_zt2rf canvas {
+} .pattern-lock-v1__component_8x5er canvas {
         display: block;
         margin: var(--gap-0) auto;
-    } .pattern-lock-v1__hidden_zt2rf {
+    } .pattern-lock-v1__hidden_8x5er {
     visibility: hidden;
-} .pattern-lock-v1__message_zt2rf {
+} .pattern-lock-v1__message_8x5er {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
@@ -26,9 +26,9 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     color: var(--color-light-text-primary);
-} .pattern-lock-v1__error_zt2rf {
+} .pattern-lock-v1__error_8x5er {
     color: var(--color-light-text-negative);
-} .pattern-lock-v1__forgotBtn_zt2rf {
+} .pattern-lock-v1__forgotBtn_8x5er {
     display: block;
     min-height: var(--size-xs-height);
 }

package/esm/components/base-pattern-lock/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-var commonStyles = {"component":"pattern-lock-v1__component_zt2rf","hidden":"pattern-lock-v1__hidden_zt2rf","message":"pattern-lock-v1__message_zt2rf","error":"pattern-lock-v1__error_zt2rf","forgotBtn":"pattern-lock-v1__forgotBtn_zt2rf"};
+var commonStyles = {"component":"pattern-lock-v1__component_8x5er","hidden":"pattern-lock-v1__hidden_8x5er","message":"pattern-lock-v1__message_8x5er","error":"pattern-lock-v1__error_8x5er","forgotBtn":"pattern-lock-v1__forgotBtn_8x5er"};
 
 export { commonStyles as default };
 //# sourceMappingURL=index.module.css.js.map

package/esm/components/base-pattern-lock/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../../src/components/base-pattern-lock/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../../vars.css';\n\n.component {\n    & canvas {\n        display: block;\n        margin: var(--gap-0) auto;\n    }\n}\n\n.hidden {\n    visibility: hidden;\n}\n\n.message {\n    @mixin paragraph_primary_medium;\n\n    text-align: center;\n    padding: var(--gap-0) var(--gap-16) var(--gap-40);\n    min-height: 24px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    color: var(--color-light-text-primary);\n}\n\n.error {\n    color: var(--color-light-text-negative);\n}\n\n.forgotBtn {\n    display: block;\n    min-height: var(--size-xs-height);\n}\n"],"names":[],"mappings":";;AAEgB,mBAAe,CAAC,WAAW,CAAC,kCAAkC,CAAC,QAAQ,CAAC,+BAA+B,CAAC,SAAS,CAAC,gCAAgC,CAAC,OAAO,CAAC,8BAA8B,CAAC,WAAW,CAAC,kCAAkC,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../../src/components/base-pattern-lock/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n@import '../../vars.css';\n\n.component {\n    & canvas {\n        display: block;\n        margin: var(--gap-0) auto;\n    }\n}\n\n.hidden {\n    visibility: hidden;\n}\n\n.message {\n    @mixin paragraph_primary_medium;\n\n    text-align: center;\n    padding: var(--gap-0) var(--gap-16) var(--gap-40);\n    min-height: 24px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    color: var(--color-light-text-primary);\n}\n\n.error {\n    color: var(--color-light-text-negative);\n}\n\n.forgotBtn {\n    display: block;\n    min-height: var(--size-xs-height);\n}\n"],"names":[],"mappings":";;AAEgB,mBAAe,CAAC,WAAW,CAAC,kCAAkC,CAAC,QAAQ,CAAC,+BAA+B,CAAC,SAAS,CAAC,gCAAgC,CAAC,OAAO,CAAC,8BAA8B,CAAC,WAAW,CAAC,kCAAkC,CAAC;;;;"}

package/esm/desktop/desktop.css

@@ -6,11 +6,11 @@
     --gap-24: var(--gap-xl);
 } :root {
     --pattern-lock-v1-desktop-max-width: 240px;
-} .pattern-lock-v1__component_eoryd {
+} .pattern-lock-v1__component_cxd4z {
     max-width: var(--pattern-lock-v1-desktop-max-width);
     margin: var(--gap-8) var(--gap-0) var(--gap-24) var(--gap-0);
-} .pattern-lock-v1__forgotBtn_eoryd {
+} .pattern-lock-v1__forgotBtn_cxd4z {
     margin: var(--gap-24) auto var(--gap-0);
-} .pattern-lock-v1__hiddenBtn_eoryd {
+} .pattern-lock-v1__hiddenBtn_cxd4z {
     display: none;
 }

package/esm/desktop/desktop.module.css.js

@@ -1,6 +1,6 @@
 import './desktop.css';
 
-var styles = {"component":"pattern-lock-v1__component_eoryd","forgotBtn":"pattern-lock-v1__forgotBtn_eoryd","hiddenBtn":"pattern-lock-v1__hiddenBtn_eoryd"};
+var styles = {"component":"pattern-lock-v1__component_cxd4z","forgotBtn":"pattern-lock-v1__forgotBtn_cxd4z","hiddenBtn":"pattern-lock-v1__hiddenBtn_cxd4z"};
 
 export { styles as default };
 //# sourceMappingURL=desktop.module.css.js.map

package/esm/desktop/desktop.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"desktop.module.css.js","sources":["../src/desktop/desktop.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../vars.css';\n\n.component {\n    max-width: var(--pattern-lock-v1-desktop-max-width);\n    margin: var(--gap-8) var(--gap-0) var(--gap-24) var(--gap-0);\n}\n\n.forgotBtn {\n    margin: var(--gap-24) auto var(--gap-0);\n}\n\n.hiddenBtn {\n    display: none;\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,kCAAkC,CAAC,WAAW,CAAC,kCAAkC,CAAC,WAAW,CAAC,kCAAkC,CAAC;;;;"}
+{"version":3,"file":"desktop.module.css.js","sources":["../src/desktop/desktop.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n@import '../vars.css';\n\n.component {\n    max-width: var(--pattern-lock-v1-desktop-max-width);\n    margin: var(--gap-8) var(--gap-0) var(--gap-24) var(--gap-0);\n}\n\n.forgotBtn {\n    margin: var(--gap-24) auto var(--gap-0);\n}\n\n.hiddenBtn {\n    display: none;\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,kCAAkC,CAAC,WAAW,CAAC,kCAAkC,CAAC,WAAW,CAAC,kCAAkC,CAAC;;;;"}

package/esm/mobile/mobile.css

@@ -15,26 +15,26 @@
     --size-m-height: 56px;
 } :root {
     --pattern-lock-v1-max-width: 500px;
-} .pattern-lock-v1__component_15xlo {
+} .pattern-lock-v1__component_916tb {
     max-width: var(--pattern-lock-v1-max-width);
     margin: var(--gap-8) var(--gap-0) var(--gap-24) var(--gap-0);
-} .pattern-lock-v1__forgotBtn_15xlo {
+} .pattern-lock-v1__forgotBtn_916tb {
     margin: var(--gap-24) auto var(--gap-0);
 } @media screen and (min-width: 360px) {
-    .pattern-lock-v1__forgotBtn_15xlo {
+    .pattern-lock-v1__forgotBtn_916tb {
         margin-top: var(--gap-32);
         min-height: var(--size-s-height);
     }
 
-    .pattern-lock-v1__component_15xlo {
+    .pattern-lock-v1__component_916tb {
         margin-bottom: var(--gap-12);
     }
 } @media screen and (min-width: 390px) {
-    .pattern-lock-v1__forgotBtn_15xlo {
+    .pattern-lock-v1__forgotBtn_916tb {
         min-height: var(--size-m-height);
     }
 
-    .pattern-lock-v1__component_15xlo {
+    .pattern-lock-v1__component_916tb {
         margin-bottom: var(--gap-20);
     }
 }

package/esm/mobile/mobile.module.css.js

@@ -1,6 +1,6 @@
 import './mobile.css';
 
-var styles = {"component":"pattern-lock-v1__component_15xlo","forgotBtn":"pattern-lock-v1__forgotBtn_15xlo"};
+var styles = {"component":"pattern-lock-v1__component_916tb","forgotBtn":"pattern-lock-v1__forgotBtn_916tb"};
 
 export { styles as default };
 //# sourceMappingURL=mobile.module.css.js.map

package/esm/mobile/mobile.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"mobile.module.css.js","sources":["../src/mobile/mobile.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../vars.css';\n\n.component {\n    max-width: var(--pattern-lock-v1-max-width);\n    margin: var(--gap-8) var(--gap-0) var(--gap-24) var(--gap-0);\n}\n\n.forgotBtn {\n    margin: var(--gap-24) auto var(--gap-0);\n}\n\n@media screen and (min-width: 360px) {\n    .forgotBtn {\n        margin-top: var(--gap-32);\n        min-height: var(--size-s-height);\n    }\n\n    .component {\n        margin-bottom: var(--gap-12);\n    }\n}\n\n@media screen and (min-width: 390px) {\n    .forgotBtn {\n        min-height: var(--size-m-height);\n    }\n\n    .component {\n        margin-bottom: var(--gap-20);\n    }\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,kCAAkC,CAAC,WAAW,CAAC,kCAAkC,CAAC;;;;"}
+{"version":3,"file":"mobile.module.css.js","sources":["../src/mobile/mobile.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n@import '../vars.css';\n\n.component {\n    max-width: var(--pattern-lock-v1-max-width);\n    margin: var(--gap-8) var(--gap-0) var(--gap-24) var(--gap-0);\n}\n\n.forgotBtn {\n    margin: var(--gap-24) auto var(--gap-0);\n}\n\n@media screen and (min-width: 360px) {\n    .forgotBtn {\n        margin-top: var(--gap-32);\n        min-height: var(--size-s-height);\n    }\n\n    .component {\n        margin-bottom: var(--gap-12);\n    }\n}\n\n@media screen and (min-width: 390px) {\n    .forgotBtn {\n        min-height: var(--size-m-height);\n    }\n\n    .component {\n        margin-bottom: var(--gap-20);\n    }\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,kCAAkC,CAAC,WAAW,CAAC,kCAAkC,CAAC;;;;"}

package/mobile/mobile.css

@@ -15,26 +15,26 @@
     --size-m-height: 56px;
 } :root {
     --pattern-lock-v1-max-width: 500px;
-} .pattern-lock-v1__component_15xlo {
+} .pattern-lock-v1__component_916tb {
     max-width: var(--pattern-lock-v1-max-width);
     margin: var(--gap-8) var(--gap-0) var(--gap-24) var(--gap-0);
-} .pattern-lock-v1__forgotBtn_15xlo {
+} .pattern-lock-v1__forgotBtn_916tb {
     margin: var(--gap-24) auto var(--gap-0);
 } @media screen and (min-width: 360px) {
-    .pattern-lock-v1__forgotBtn_15xlo {
+    .pattern-lock-v1__forgotBtn_916tb {
         margin-top: var(--gap-32);
         min-height: var(--size-s-height);
     }
 
-    .pattern-lock-v1__component_15xlo {
+    .pattern-lock-v1__component_916tb {
         margin-bottom: var(--gap-12);
     }
 } @media screen and (min-width: 390px) {
-    .pattern-lock-v1__forgotBtn_15xlo {
+    .pattern-lock-v1__forgotBtn_916tb {
         min-height: var(--size-m-height);
     }
 
-    .pattern-lock-v1__component_15xlo {
+    .pattern-lock-v1__component_916tb {
         margin-bottom: var(--gap-20);
     }
 }

package/mobile/mobile.module.css.js

@@ -2,7 +2,7 @@
 
 require('./mobile.css');
 
-var styles = {"component":"pattern-lock-v1__component_15xlo","forgotBtn":"pattern-lock-v1__forgotBtn_15xlo"};
+var styles = {"component":"pattern-lock-v1__component_916tb","forgotBtn":"pattern-lock-v1__forgotBtn_916tb"};
 
 module.exports = styles;
 //# sourceMappingURL=mobile.module.css.js.map

package/mobile/mobile.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"mobile.module.css.js","sources":["../src/mobile/mobile.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../vars.css';\n\n.component {\n    max-width: var(--pattern-lock-v1-max-width);\n    margin: var(--gap-8) var(--gap-0) var(--gap-24) var(--gap-0);\n}\n\n.forgotBtn {\n    margin: var(--gap-24) auto var(--gap-0);\n}\n\n@media screen and (min-width: 360px) {\n    .forgotBtn {\n        margin-top: var(--gap-32);\n        min-height: var(--size-s-height);\n    }\n\n    .component {\n        margin-bottom: var(--gap-12);\n    }\n}\n\n@media screen and (min-width: 390px) {\n    .forgotBtn {\n        min-height: var(--size-m-height);\n    }\n\n    .component {\n        margin-bottom: var(--gap-20);\n    }\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,kCAAkC,CAAC,WAAW,CAAC,kCAAkC,CAAC;;;;"}
+{"version":3,"file":"mobile.module.css.js","sources":["../src/mobile/mobile.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n@import '../vars.css';\n\n.component {\n    max-width: var(--pattern-lock-v1-max-width);\n    margin: var(--gap-8) var(--gap-0) var(--gap-24) var(--gap-0);\n}\n\n.forgotBtn {\n    margin: var(--gap-24) auto var(--gap-0);\n}\n\n@media screen and (min-width: 360px) {\n    .forgotBtn {\n        margin-top: var(--gap-32);\n        min-height: var(--size-s-height);\n    }\n\n    .component {\n        margin-bottom: var(--gap-12);\n    }\n}\n\n@media screen and (min-width: 390px) {\n    .forgotBtn {\n        min-height: var(--size-m-height);\n    }\n\n    .component {\n        margin-bottom: var(--gap-20);\n    }\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,kCAAkC,CAAC,WAAW,CAAC,kCAAkC,CAAC;;;;"}

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

@@ -9,12 +9,12 @@
     --gap-40: var(--gap-3xl);
 } :root {
     --size-xs-height: 40px;
-} .pattern-lock-v1__component_zt2rf canvas {
+} .pattern-lock-v1__component_8x5er canvas {
         display: block;
         margin: var(--gap-0) auto;
-    } .pattern-lock-v1__hidden_zt2rf {
+    } .pattern-lock-v1__hidden_8x5er {
     visibility: hidden;
-} .pattern-lock-v1__message_zt2rf {
+} .pattern-lock-v1__message_8x5er {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
@@ -26,9 +26,9 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     color: var(--color-light-text-primary);
-} .pattern-lock-v1__error_zt2rf {
+} .pattern-lock-v1__error_8x5er {
     color: var(--color-light-text-negative);
-} .pattern-lock-v1__forgotBtn_zt2rf {
+} .pattern-lock-v1__forgotBtn_8x5er {
     display: block;
     min-height: var(--size-xs-height);
 }

package/modern/components/base-pattern-lock/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const commonStyles = {"component":"pattern-lock-v1__component_zt2rf","hidden":"pattern-lock-v1__hidden_zt2rf","message":"pattern-lock-v1__message_zt2rf","error":"pattern-lock-v1__error_zt2rf","forgotBtn":"pattern-lock-v1__forgotBtn_zt2rf"};
+const commonStyles = {"component":"pattern-lock-v1__component_8x5er","hidden":"pattern-lock-v1__hidden_8x5er","message":"pattern-lock-v1__message_8x5er","error":"pattern-lock-v1__error_8x5er","forgotBtn":"pattern-lock-v1__forgotBtn_8x5er"};
 
 export { commonStyles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/base-pattern-lock/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../../src/components/base-pattern-lock/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../../vars.css';\n\n.component {\n    & canvas {\n        display: block;\n        margin: var(--gap-0) auto;\n    }\n}\n\n.hidden {\n    visibility: hidden;\n}\n\n.message {\n    @mixin paragraph_primary_medium;\n\n    text-align: center;\n    padding: var(--gap-0) var(--gap-16) var(--gap-40);\n    min-height: 24px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    color: var(--color-light-text-primary);\n}\n\n.error {\n    color: var(--color-light-text-negative);\n}\n\n.forgotBtn {\n    display: block;\n    min-height: var(--size-xs-height);\n}\n"],"names":[],"mappings":";;AAEgB,qBAAe,CAAC,WAAW,CAAC,kCAAkC,CAAC,QAAQ,CAAC,+BAA+B,CAAC,SAAS,CAAC,gCAAgC,CAAC,OAAO,CAAC,8BAA8B,CAAC,WAAW,CAAC,kCAAkC,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../../src/components/base-pattern-lock/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n@import '../../vars.css';\n\n.component {\n    & canvas {\n        display: block;\n        margin: var(--gap-0) auto;\n    }\n}\n\n.hidden {\n    visibility: hidden;\n}\n\n.message {\n    @mixin paragraph_primary_medium;\n\n    text-align: center;\n    padding: var(--gap-0) var(--gap-16) var(--gap-40);\n    min-height: 24px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    color: var(--color-light-text-primary);\n}\n\n.error {\n    color: var(--color-light-text-negative);\n}\n\n.forgotBtn {\n    display: block;\n    min-height: var(--size-xs-height);\n}\n"],"names":[],"mappings":";;AAEgB,qBAAe,CAAC,WAAW,CAAC,kCAAkC,CAAC,QAAQ,CAAC,+BAA+B,CAAC,SAAS,CAAC,gCAAgC,CAAC,OAAO,CAAC,8BAA8B,CAAC,WAAW,CAAC,kCAAkC,CAAC;;;;"}

package/modern/desktop/desktop.css

@@ -6,11 +6,11 @@
     --gap-24: var(--gap-xl);
 } :root {
     --pattern-lock-v1-desktop-max-width: 240px;
-} .pattern-lock-v1__component_eoryd {
+} .pattern-lock-v1__component_cxd4z {
     max-width: var(--pattern-lock-v1-desktop-max-width);
     margin: var(--gap-8) var(--gap-0) var(--gap-24) var(--gap-0);
-} .pattern-lock-v1__forgotBtn_eoryd {
+} .pattern-lock-v1__forgotBtn_cxd4z {
     margin: var(--gap-24) auto var(--gap-0);
-} .pattern-lock-v1__hiddenBtn_eoryd {
+} .pattern-lock-v1__hiddenBtn_cxd4z {
     display: none;
 }

package/modern/desktop/desktop.module.css.js

@@ -1,6 +1,6 @@
 import './desktop.css';
 
-const styles = {"component":"pattern-lock-v1__component_eoryd","forgotBtn":"pattern-lock-v1__forgotBtn_eoryd","hiddenBtn":"pattern-lock-v1__hiddenBtn_eoryd"};
+const styles = {"component":"pattern-lock-v1__component_cxd4z","forgotBtn":"pattern-lock-v1__forgotBtn_cxd4z","hiddenBtn":"pattern-lock-v1__hiddenBtn_cxd4z"};
 
 export { styles as default };
 //# sourceMappingURL=desktop.module.css.js.map

package/modern/desktop/desktop.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"desktop.module.css.js","sources":["../src/desktop/desktop.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../vars.css';\n\n.component {\n    max-width: var(--pattern-lock-v1-desktop-max-width);\n    margin: var(--gap-8) var(--gap-0) var(--gap-24) var(--gap-0);\n}\n\n.forgotBtn {\n    margin: var(--gap-24) auto var(--gap-0);\n}\n\n.hiddenBtn {\n    display: none;\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,kCAAkC,CAAC,WAAW,CAAC,kCAAkC,CAAC,WAAW,CAAC,kCAAkC,CAAC;;;;"}
+{"version":3,"file":"desktop.module.css.js","sources":["../src/desktop/desktop.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n@import '../vars.css';\n\n.component {\n    max-width: var(--pattern-lock-v1-desktop-max-width);\n    margin: var(--gap-8) var(--gap-0) var(--gap-24) var(--gap-0);\n}\n\n.forgotBtn {\n    margin: var(--gap-24) auto var(--gap-0);\n}\n\n.hiddenBtn {\n    display: none;\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,kCAAkC,CAAC,WAAW,CAAC,kCAAkC,CAAC,WAAW,CAAC,kCAAkC,CAAC;;;;"}

package/modern/mobile/mobile.css

@@ -15,26 +15,26 @@
     --size-m-height: 56px;
 } :root {
     --pattern-lock-v1-max-width: 500px;
-} .pattern-lock-v1__component_15xlo {
+} .pattern-lock-v1__component_916tb {
     max-width: var(--pattern-lock-v1-max-width);
     margin: var(--gap-8) var(--gap-0) var(--gap-24) var(--gap-0);
-} .pattern-lock-v1__forgotBtn_15xlo {
+} .pattern-lock-v1__forgotBtn_916tb {
     margin: var(--gap-24) auto var(--gap-0);
 } @media screen and (min-width: 360px) {
-    .pattern-lock-v1__forgotBtn_15xlo {
+    .pattern-lock-v1__forgotBtn_916tb {
         margin-top: var(--gap-32);
         min-height: var(--size-s-height);
     }
 
-    .pattern-lock-v1__component_15xlo {
+    .pattern-lock-v1__component_916tb {
         margin-bottom: var(--gap-12);
     }
 } @media screen and (min-width: 390px) {
-    .pattern-lock-v1__forgotBtn_15xlo {
+    .pattern-lock-v1__forgotBtn_916tb {
         min-height: var(--size-m-height);
     }
 
-    .pattern-lock-v1__component_15xlo {
+    .pattern-lock-v1__component_916tb {
         margin-bottom: var(--gap-20);
     }
 }

package/modern/mobile/mobile.module.css.js

@@ -1,6 +1,6 @@
 import './mobile.css';
 
-const styles = {"component":"pattern-lock-v1__component_15xlo","forgotBtn":"pattern-lock-v1__forgotBtn_15xlo"};
+const styles = {"component":"pattern-lock-v1__component_916tb","forgotBtn":"pattern-lock-v1__forgotBtn_916tb"};
 
 export { styles as default };
 //# sourceMappingURL=mobile.module.css.js.map

package/modern/mobile/mobile.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"mobile.module.css.js","sources":["../src/mobile/mobile.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../vars.css';\n\n.component {\n    max-width: var(--pattern-lock-v1-max-width);\n    margin: var(--gap-8) var(--gap-0) var(--gap-24) var(--gap-0);\n}\n\n.forgotBtn {\n    margin: var(--gap-24) auto var(--gap-0);\n}\n\n@media screen and (min-width: 360px) {\n    .forgotBtn {\n        margin-top: var(--gap-32);\n        min-height: var(--size-s-height);\n    }\n\n    .component {\n        margin-bottom: var(--gap-12);\n    }\n}\n\n@media screen and (min-width: 390px) {\n    .forgotBtn {\n        min-height: var(--size-m-height);\n    }\n\n    .component {\n        margin-bottom: var(--gap-20);\n    }\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,kCAAkC,CAAC,WAAW,CAAC,kCAAkC,CAAC;;;;"}
+{"version":3,"file":"mobile.module.css.js","sources":["../src/mobile/mobile.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n@import '../vars.css';\n\n.component {\n    max-width: var(--pattern-lock-v1-max-width);\n    margin: var(--gap-8) var(--gap-0) var(--gap-24) var(--gap-0);\n}\n\n.forgotBtn {\n    margin: var(--gap-24) auto var(--gap-0);\n}\n\n@media screen and (min-width: 360px) {\n    .forgotBtn {\n        margin-top: var(--gap-32);\n        min-height: var(--size-s-height);\n    }\n\n    .component {\n        margin-bottom: var(--gap-12);\n    }\n}\n\n@media screen and (min-width: 390px) {\n    .forgotBtn {\n        min-height: var(--size-m-height);\n    }\n\n    .component {\n        margin-bottom: var(--gap-20);\n    }\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,kCAAkC,CAAC,WAAW,CAAC,kCAAkC,CAAC;;;;"}

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

@@ -2,9 +2,11 @@
         display: block;
         margin: var(--gap-0) auto;
     }
+
 .hidden {
     visibility: hidden;
 }
+
 .message {
     font-size: 16px;
     line-height: 24px;
@@ -18,9 +20,11 @@
     white-space: nowrap;
     color: var(--color-light-text-primary);
 }
+
 .error {
     color: var(--color-light-text-negative);
 }
+
 .forgotBtn {
     display: block;
     min-height: var(--size-xs-height);

package/moderncssm/desktop/desktop.module.css

@@ -1,13 +1,16 @@
 :root {
     --pattern-lock-v1-desktop-max-width: 240px;
 }
+
 .component {
     max-width: var(--pattern-lock-v1-desktop-max-width);
     margin: var(--gap-8) var(--gap-0) var(--gap-24) var(--gap-0);
 }
+
 .forgotBtn {
     margin: var(--gap-24) auto var(--gap-0);
 }
+
 .hiddenBtn {
     display: none;
 }

package/moderncssm/mobile/mobile.module.css

@@ -1,13 +1,16 @@
 :root {
     --pattern-lock-v1-max-width: 500px;
 }
+
 .component {
     max-width: var(--pattern-lock-v1-max-width);
     margin: var(--gap-8) var(--gap-0) var(--gap-24) var(--gap-0);
 }
+
 .forgotBtn {
     margin: var(--gap-24) auto var(--gap-0);
 }
+
 @media screen and (min-width: 360px) {
     .forgotBtn {
         margin-top: var(--gap-32);
@@ -18,6 +21,7 @@
         margin-bottom: var(--gap-12);
     }
 }
+
 @media screen and (min-width: 390px) {
     .forgotBtn {
         min-height: var(--size-m-height);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-pattern-lock-v1",
-    "version": "2.0.0",
+    "version": "2.1.0-snapshot-92b8690",
     "description": "Pattern lock v1 (deprecated)",
     "keywords": [],
     "license": "MIT",
@@ -10,9 +10,9 @@
     "main": "index.js",
     "module": "./esm/index.js",
     "dependencies": {
-        "@alfalab/core-components-button": "^12.0.0",
-        "@alfalab/core-components-mq": "^5.0.0",
-        "@alfalab/core-components-shared": "^1.0.0",
+        "@alfalab/core-components-button": "12.1.0-snapshot-92b8690",
+        "@alfalab/core-components-mq": "5.1.0-snapshot-92b8690",
+        "@alfalab/core-components-shared": "1.1.0-snapshot-92b8690",
         "classnames": "^2.5.1",
         "react-canvas-pattern-lock": "^2.0.6",
         "tslib": "^2.4.0"
@@ -25,6 +25,6 @@
         "access": "public",
         "directory": "dist"
     },
-    "themesVersion": "14.0.0",
-    "varsVersion": "10.0.0"
+    "themesVersion": "14.1.0-snapshot-92b8690",
+    "varsVersion": "10.1.0-snapshot-92b8690"
 }

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

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-vars/src/index.css';
+@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';
 @import '../../vars.css';
 
 .component {