@alfalab/core-components 46.0.0-beta.3 → 46.0.0-beta.6

package/pass-code-v1/components/InputProgress/transitions.css

@@ -0,0 +1,52 @@
+/* hash: 3wgc7 */
+.pass-code-v1__enter_u4cx5 {
+    opacity: 0;
+    width: 0;
+    height: 0;
+    margin: 0;
+}
+
+.pass-code-v1__enterActive_u4cx5 {
+    opacity: 1;
+    width: 12px;
+    height: 12px;
+    margin: 0 6px;
+    transition: all 0.15s ease-in;
+}
+
+.pass-code-v1__exit_u4cx5 {
+    opacity: 1;
+    width: 12px;
+    height: 12px;
+    margin: 0 6px;
+}
+
+.pass-code-v1__exitActive_u4cx5 {
+    opacity: 0;
+    width: 0;
+    height: 0;
+    margin: 0;
+    transition: all 0.15s ease-in;
+}
+
+@keyframes pass-code-v1__shake_u4cx5 {
+    0% {
+        transform: translateX(0);
+    }
+
+    25% {
+        transform: translateX(-2px);
+    }
+
+    75% {
+        transform: translateX(2px);
+    }
+
+    100% {
+        transform: translateX(0);
+    }
+}
+
+.pass-code-v1__shake_u4cx5 {
+    animation: pass-code-v1__shake_u4cx5 0.15s linear 25ms 3;
+}

package/pass-code-v1/components/KeyPad/Component.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import React from 'react';
+import { ReactNode } from "react";
+type KeyPadProps = {
+    /**
+     * Показать кнопку "очистить".
+     */
+    showClear: boolean;
+    /**
+     * Слот слева.
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Слот справа.
+     */
+    rightAddons?: ReactNode;
+    /**
+     * Идентификатор для автоматизированного тестирования.
+     */
+    dataTestId?: string;
+    /**
+     * Коллбэк нажатия на кнопку.
+     */
+    onClick: (digit: number) => void;
+    /**
+     * Коллбэк очистки кода.
+     */
+    onClear: () => void;
+};
+declare const KeyPad: React.FC<KeyPadProps>;
+export { KeyPadProps, KeyPad };

package/pass-code-v1/components/KeyPad/Component.js

@@ -0,0 +1,42 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var coreComponentsShared = require('../../../shared');
+var BackspaceXxlIcon = require('@alfalab/icons-glyph/BackspaceXxlIcon');
+var components_KeyPadButton_Component = require('../KeyPadButton/Component.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var styles = {"component":"pass-code-v1__component_1ltyz","digit":"pass-code-v1__digit_1ltyz"};
+require('./index.css');
+
+var CELL_COUNT = 12;
+var CELLS = new Array(CELL_COUNT).fill(null).map(function (_, i) {
+    if (i === 10)
+        return 0;
+    return i + 1;
+});
+var KeyPad = function (_a) {
+    var leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, onClick = _a.onClick, onClear = _a.onClear, showClear = _a.showClear, dataTestId = _a.dataTestId;
+    return (React__default.default.createElement("div", { className: styles.component, "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'keypad') }, CELLS.map(function (digit, i) {
+        if (i === 9) {
+            if (leftAddons)
+                return leftAddons;
+            return React__default.default.createElement("div", { key: 'left-addons-empty' });
+        }
+        if (i === 11) {
+            if (showClear) {
+                return (React__default.default.createElement(components_KeyPadButton_Component.KeyPadButton, { key: 'clear-btn', onClick: onClear, view: 'text', dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'backspace-button') },
+                    React__default.default.createElement(BackspaceXxlIcon.BackspaceXxlIcon, null)));
+            }
+            if (rightAddons)
+                return rightAddons;
+            return React__default.default.createElement("div", { key: 'right-addon-empty' });
+        }
+        return (React__default.default.createElement(components_KeyPadButton_Component.KeyPadButton, { key: digit, onClick: onClick, view: 'secondary', buttonClassName: styles.digit, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'keypad-button') }, digit));
+    })));
+};
+
+exports.KeyPad = KeyPad;

package/pass-code-v1/components/KeyPad/index.css

@@ -0,0 +1,45 @@
+/* hash: 10jfq */
+:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-s: 12px;
+    --gap-m: 16px;
+    --gap-xl: 24px;
+    --gap-2xl: 32px;
+} :root {
+} :root {
+} .pass-code-v1__component_1ltyz {
+    width: 240px;
+    height: 292px;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(4, 1fr);
+    grid-column-gap: var(--gap-xl);
+    grid-row-gap: var(--gap-s);
+    margin: 0 auto
+} .pass-code-v1__component_1ltyz .pass-code-v1__digit_1ltyz.pass-code-v1__digit_1ltyz {
+        font-size: 36px;
+        line-height: 1;
+    } @media screen and (min-width: 360px) {
+    .pass-code-v1__component_1ltyz {
+        width: 292px;
+        height: 352px;
+        grid-column-gap: var(--gap-2xl);
+        grid-row-gap: var(--gap-m);
+    }
+} @media screen and (min-width: 390px) {
+    .pass-code-v1__component_1ltyz {
+        width: 322px;
+        height: 392px;
+    }
+}

package/pass-code-v1/components/KeyPad/index.d.ts

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

package/pass-code-v1/components/KeyPad/index.js

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_KeyPad_Component = require('./Component.js');
+
+
+
+exports.KeyPad = components_KeyPad_Component.KeyPad;

package/pass-code-v1/components/KeyPadButton/Component.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import React from 'react';
+import { ReactNode } from "react";
+import { ButtonMobileProps } from "../../../button/mobile";
+type KeyPadButtonProps<T> = {
+    /**
+     * Вид кнопки.
+     */
+    view: ButtonMobileProps['view'];
+    /**
+     * Значение.
+     */
+    children: T;
+    /**
+     * Дополнительный класс.
+     */
+    className?: string;
+    /**
+     * Дополнительный класс кнопки.
+     */
+    buttonClassName?: string;
+    /**
+     * Коллбэк нажатия на кнопку.
+     */
+    onClick?: (payload: T) => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования.
+     */
+    dataTestId?: string;
+};
+declare function KeyPadButton<T extends ReactNode>({ children, onClick, className, view, buttonClassName, dataTestId, }: KeyPadButtonProps<T>): React.JSX.Element;
+export { KeyPadButtonProps, KeyPadButton };

package/pass-code-v1/components/KeyPadButton/Component.js

@@ -0,0 +1,21 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+var mobile = require('../../../button/mobile');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+
+var styles = {"component":"pass-code-v1__component_tnkyi","button":"pass-code-v1__button_tnkyi","secondary":"pass-code-v1__secondary_tnkyi","ghost":"pass-code-v1__ghost_tnkyi"};
+require('./index.css');
+
+function KeyPadButton(_a) {
+    var children = _a.children, onClick = _a.onClick, className = _a.className, _b = _a.view, view = _b === void 0 ? 'secondary' : _b, buttonClassName = _a.buttonClassName, dataTestId = _a.dataTestId;
+    return (React__default.default.createElement("div", { className: cn__default.default(styles.component, className) },
+        React__default.default.createElement(mobile.ButtonMobile, { className: cn__default.default(styles.button, styles[view], buttonClassName), view: view, onClick: function () { return onClick === null || onClick === void 0 ? void 0 : onClick(children); }, dataTestId: dataTestId }, children)));
+}
+
+exports.KeyPadButton = KeyPadButton;

package/pass-code-v1/components/KeyPadButton/index.css

@@ -0,0 +1,69 @@
+/* hash: 8ydd7 */
+:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} /* deprecated */ :root {
+    --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
+    --color-light-neutral-translucent-200-press: rgba(5, 12, 41, 0.14);
+    --color-light-text-primary: rgba(3, 3, 6, 0.88); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+    --border-radius-circle: 50%;
+} :root {
+} :root {
+} :root {
+} :root {
+    --button-bg-color: var(--color-light-neutral-translucent-200);
+    --button-bg-color-active: var(--color-light-neutral-translucent-200-press);
+} .pass-code-v1__component_tnkyi {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+} .pass-code-v1__button_tnkyi.pass-code-v1__button_tnkyi {
+    font-size: 14px;
+    line-height: 18px;
+    font-weight: 500;
+
+    border-radius: var(--border-radius-circle);
+    padding: 0;
+    min-width: 64px;
+    width: 64px;
+    height: 64px;
+    text-align: center
+} .pass-code-v1__button_tnkyi.pass-code-v1__button_tnkyi > span {
+        vertical-align: middle
+    } .pass-code-v1__button_tnkyi.pass-code-v1__button_tnkyi > span > * {
+            vertical-align: middle;
+        } .pass-code-v1__secondary_tnkyi.pass-code-v1__secondary_tnkyi {
+    color: var(--color-light-text-primary);
+    background: var(--button-bg-color)
+} .pass-code-v1__secondary_tnkyi.pass-code-v1__secondary_tnkyi:hover {
+        color: var(--color-light-text-primary);
+    } .pass-code-v1__secondary_tnkyi.pass-code-v1__secondary_tnkyi:active {
+        background: var(--button-bg-color-active);
+    } .pass-code-v1__ghost_tnkyi.pass-code-v1__ghost_tnkyi {
+    color: var(--color-light-text-primary)
+} .pass-code-v1__ghost_tnkyi.pass-code-v1__ghost_tnkyi:hover {
+        color: var(--color-light-text-primary);
+    } .pass-code-v1__ghost_tnkyi.pass-code-v1__ghost_tnkyi:active {
+        background: var(--button-bg-color-active);
+    } @media screen and (min-width: 360px) {
+    .pass-code-v1__button_tnkyi.pass-code-v1__button_tnkyi {
+        min-width: 76px;
+        height: 76px;
+        width: 76px;
+    }
+} @media screen and (min-width: 390px) {
+    .pass-code-v1__button_tnkyi.pass-code-v1__button_tnkyi {
+        min-width: 86px;
+        width: 86px;
+        height: 86px;
+    }
+}

package/pass-code-v1/components/KeyPadButton/index.d.ts

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

package/pass-code-v1/components/KeyPadButton/index.js

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_KeyPadButton_Component = require('./Component.js');
+
+
+
+exports.KeyPadButton = components_KeyPadButton_Component.KeyPadButton;

package/pass-code-v1/cssm/Component.d.ts

@@ -0,0 +1,62 @@
+/// <reference types="react" />
+import React from 'react';
+import { ReactNode } from "react";
+type BasePassCodeProps = {
+    /**
+     * Код
+     */
+    value: string;
+    /**
+     * Обработчик изменения кода
+     */
+    onChange: (code: string) => void;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Отображение ошибки
+     */
+    error?: ReactNode;
+    /**
+     *  Сообщение над клавиатурой
+     */
+    message?: ReactNode;
+    /**
+     * Слот слева.
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: ReactNode;
+    /**
+     * Идентификатор для систем автоматизированного тестирования.
+     * Для враппера используется модификатор -wrapper, ошибки -error,
+     * сообщения над клавиатурой -message, блока с кодом -input-progress,
+     * блока с цифрами -keypad
+     */
+    dataTestId?: string;
+};
+type PropsWithUnknownLen = {
+    codeLength?: never;
+    /**
+     * Максимально возможная длина кода
+     * @default 10
+     */
+    maxCodeLength?: number;
+};
+type PropsWithLen = {
+    maxCodeLength?: never;
+    /**
+     * Длина кода
+     */
+    codeLength?: number;
+};
+type PassCodeProps = BasePassCodeProps & (PropsWithLen | PropsWithUnknownLen);
+/**
+ * @deprecated
+ * Используйте PassCode
+ */
+declare const PassCodeV1: React.ForwardRefExoticComponent<PassCodeProps & React.RefAttributes<HTMLDivElement>>;
+export { BasePassCodeProps, PassCodeV1 };

package/pass-code-v1/cssm/Component.js

@@ -0,0 +1,45 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+var coreComponentsGap = require('../../gap/cssm');
+var coreComponentsShared = require('../../shared/cssm');
+var components_InputProgress_Component = require('./components/InputProgress/Component.js');
+var components_KeyPad_Component = require('./components/KeyPad/Component.js');
+var styles = require('./index.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+/**
+ * @deprecated
+ * Используйте PassCode
+ */
+var PassCodeV1 = React.forwardRef(function (_a, ref) {
+    var _b = _a.value, value = _b === void 0 ? '' : _b, dataTestId = _a.dataTestId, className = _a.className, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, error = _a.error, message = _a.message, onChange = _a.onChange, _c = _a.maxCodeLength, maxCodeLength = _c === void 0 ? 10 : _c, codeLength = _a.codeLength;
+    var passwordLen = codeLength || maxCodeLength;
+    var handleChange = function (digit) {
+        var newValue = value.concat(digit.toString());
+        if (newValue.length <= passwordLen) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+        }
+    };
+    var handleClear = function () {
+        if (value.length > 0) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(value === null || value === void 0 ? void 0 : value.slice(0, -1));
+        }
+    };
+    var renderError = function () { return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.message, styles__default.default.error), "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'error') }, error)); };
+    var renderMessage = function () { return (React__default.default.createElement("div", { className: styles__default.default.message, "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'message') }, message)); };
+    return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, className), ref: ref, "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'wrapper') },
+        error ? renderError() : renderMessage(),
+        React__default.default.createElement(coreComponentsGap.Gap, { size: 'm' }),
+        React__default.default.createElement(components_InputProgress_Component.InputProgress, { dataTestId: dataTestId, value: value, maxCodeLength: maxCodeLength, codeLength: codeLength, error: Boolean(error) }),
+        React__default.default.createElement(coreComponentsGap.Gap, { size: '4xl' }),
+        React__default.default.createElement(components_KeyPad_Component.KeyPad, { dataTestId: dataTestId, leftAddons: leftAddons, rightAddons: rightAddons, onClick: handleChange, onClear: handleClear, showClear: Boolean(value) })));
+});
+
+exports.PassCodeV1 = PassCodeV1;

package/pass-code-v1/cssm/components/InputProgress/Component.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import React from 'react';
+type InputProgressProps = {
+    maxCodeLength: number;
+    codeLength?: number;
+    error: boolean;
+    value?: string;
+    dataTestId?: string;
+};
+declare const InputProgress: React.FC<InputProgressProps>;
+export { InputProgressProps, InputProgress };

package/pass-code-v1/cssm/components/InputProgress/Component.js

@@ -0,0 +1,38 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var reactTransitionGroup = require('react-transition-group');
+var cn = require('classnames');
+var coreComponentsShared = require('../../../../shared/cssm');
+var styles = require('./index.module.css');
+var transitions = require('./transitions.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+var transitions__default = /*#__PURE__*/_interopDefaultCompat(transitions);
+
+/* eslint-disable react/no-array-index-key */
+var TRANSITION_DURATION = 150;
+var InputProgress = function (_a) {
+    var _b;
+    var _c = _a.value, value = _c === void 0 ? '' : _c, maxCodeLength = _a.maxCodeLength, codeLength = _a.codeLength, error = _a.error, dataTestId = _a.dataTestId;
+    return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, (_b = {}, _b[transitions__default.default.shake] = error, _b)), "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'input-progress') }, codeLength
+        ? new Array(codeLength).fill(null).map(function (_, i) {
+            var _a;
+            var filled = Boolean(value[i]);
+            return (React__default.default.createElement("div", { key: i, className: cn__default.default(styles__default.default.dot, (_a = {},
+                    _a[styles__default.default.error] = filled && error,
+                    _a[styles__default.default.filled] = filled,
+                    _a)) }));
+        })
+        : new Array(maxCodeLength).fill(null).map(function (_, i) {
+            var _a;
+            return (React__default.default.createElement(reactTransitionGroup.CSSTransition, { key: i, in: Boolean(value[i]), timeout: TRANSITION_DURATION, classNames: transitions__default.default, unmountOnExit: true },
+                React__default.default.createElement("div", { className: cn__default.default(styles__default.default.dot, styles__default.default.filled, (_a = {}, _a[styles__default.default.error] = error, _a)) })));
+        })));
+};
+
+exports.InputProgress = InputProgress;

package/pass-code-v1/cssm/components/InputProgress/index.d.ts

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

package/pass-code-v1/cssm/components/InputProgress/index.js

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_InputProgress_Component = require('./Component.js');
+
+
+
+exports.InputProgress = components_InputProgress_Component.InputProgress;

package/pass-code-v1/cssm/components/InputProgress/index.module.css

@@ -0,0 +1,40 @@
+:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} /* deprecated */ :root {
+    --color-light-neutral-1500: #121213;
+    --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1);
+    --color-light-status-negative: #ff4837; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+    --border-radius-circle: 50%;
+} :root {
+} :root {
+} :root {
+} .component {
+    height: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+} .dot {
+    margin: 0 6px;
+    width: 12px;
+    height: 12px;
+    background: var(--color-light-neutral-translucent-300);
+    border-radius: var(--border-radius-circle);
+    flex-shrink: 0;
+    transition: background 75ms ease-in;
+    will-change: transform, opacity
+} .dot.error {
+        background: var(--color-light-status-negative);
+        transition: none;
+    } .filled {
+    background: var(--color-light-neutral-1500);
+}

package/pass-code-v1/cssm/components/InputProgress/transitions.module.css

@@ -0,0 +1,51 @@
+.enter {
+    opacity: 0;
+    width: 0;
+    height: 0;
+    margin: 0;
+}
+
+.enterActive {
+    opacity: 1;
+    width: 12px;
+    height: 12px;
+    margin: 0 6px;
+    transition: all 0.15s ease-in;
+}
+
+.exit {
+    opacity: 1;
+    width: 12px;
+    height: 12px;
+    margin: 0 6px;
+}
+
+.exitActive {
+    opacity: 0;
+    width: 0;
+    height: 0;
+    margin: 0;
+    transition: all 0.15s ease-in;
+}
+
+@keyframes shake {
+    0% {
+        transform: translateX(0);
+    }
+
+    25% {
+        transform: translateX(-2px);
+    }
+
+    75% {
+        transform: translateX(2px);
+    }
+
+    100% {
+        transform: translateX(0);
+    }
+}
+
+.shake {
+    animation: shake 0.15s linear 25ms 3;
+}

package/pass-code-v1/cssm/components/KeyPad/Component.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import React from 'react';
+import { ReactNode } from "react";
+type KeyPadProps = {
+    /**
+     * Показать кнопку "очистить".
+     */
+    showClear: boolean;
+    /**
+     * Слот слева.
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Слот справа.
+     */
+    rightAddons?: ReactNode;
+    /**
+     * Идентификатор для автоматизированного тестирования.
+     */
+    dataTestId?: string;
+    /**
+     * Коллбэк нажатия на кнопку.
+     */
+    onClick: (digit: number) => void;
+    /**
+     * Коллбэк очистки кода.
+     */
+    onClear: () => void;
+};
+declare const KeyPad: React.FC<KeyPadProps>;
+export { KeyPadProps, KeyPad };