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

package/markdown/modern/index.js

@@ -5,7 +5,7 @@ import '../../shared/modern';
 import './Component.js';
 import 'react-markdown';
 import 'classnames';
-import './use-overrides-b5b09003.js';
+import './use-overrides-7e45f101.js';
 import '../../link/modern';
 import '../../list/modern';
 import '../../typography/modern';

package/markdown/modern/mobile/index.js

@@ -3,7 +3,7 @@ import 'react';
 import '../Component.js';
 import 'react-markdown';
 import 'classnames';
-import '../use-overrides-b5b09003.js';
+import '../use-overrides-7e45f101.js';
 import '../../../link/modern';
 import '../../../list/modern';
 import '../../../typography/modern';

package/modal/components/controls/Component.js

@@ -4,7 +4,7 @@ var React = require('react');
 var cn = require('classnames');
 var coreComponentsShared = require('../../../shared');
 var ResponsiveContext = require('../../ResponsiveContext.js');
-var layout_module = require('../../layout.module-dbae8fb5.js');
+var layout_module = require('../../layout.module-9c7f42a7.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/modal/components/footer/Component.js

@@ -6,7 +6,7 @@ var coreComponentsShared = require('../../../shared');
 var consts = require('../../consts.js');
 var Context = require('../../Context.js');
 var ResponsiveContext = require('../../ResponsiveContext.js');
-var layout_module = require('../../layout.module-dbae8fb5.js');
+var layout_module = require('../../layout.module-9c7f42a7.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/modal/esm/Component.responsive.js

@@ -12,7 +12,7 @@ import './consts.js';
 import './Context.js';
 import '../../base-modal/esm';
 import './ResponsiveContext.js';
-import './layout.module-8a8d6fa8.js';
+import './layout.module-8c2ad581.js';
 import '../../navigation-bar-private/esm';
 import 'react-merge-refs';
 

package/modal/esm/components/controls/Component.js

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import cn from 'classnames';
 import { getDataTestId } from '../../../../shared/esm';
 import { ResponsiveContext } from '../../ResponsiveContext.js';
-import { l as layoutStyles } from '../../layout.module-8a8d6fa8.js';
+import { l as layoutStyles } from '../../layout.module-8c2ad581.js';
 
 var styles = {"component":"modal__component_6629a"};
 require('./index.css');

package/modal/esm/components/controls/index.js

@@ -3,4 +3,4 @@ import 'react';
 import 'classnames';
 import '../../../../shared/esm';
 import '../../ResponsiveContext.js';
-import '../../layout.module-8a8d6fa8.js';
+import '../../layout.module-8c2ad581.js';

package/modal/esm/components/footer/Component.js

@@ -4,7 +4,7 @@ import { getDataTestId } from '../../../../shared/esm';
 import { SIZE_TO_CLASSNAME_MAP } from '../../consts.js';
 import { ModalContext } from '../../Context.js';
 import { ResponsiveContext } from '../../ResponsiveContext.js';
-import { l as layoutStyles } from '../../layout.module-8a8d6fa8.js';
+import { l as layoutStyles } from '../../layout.module-8c2ad581.js';
 import '../../../../base-modal/esm';
 
 var desktopStyles = {"footer":"modal__footer_e5vdf","sticky":"modal__sticky_e5vdf","fullscreen":"modal__fullscreen_e5vdf","size-500":"modal__size-500_e5vdf","size-600":"modal__size-600_e5vdf","size-800":"modal__size-800_e5vdf","size-1140":"modal__size-1140_e5vdf"};

package/modal/esm/desktop/Component.desktop.js

@@ -12,7 +12,7 @@ import '../consts.js';
 import '../ResponsiveContext.js';
 import '../../../shared/esm';
 import '../Context.js';
-import '../layout.module-8a8d6fa8.js';
+import '../layout.module-8c2ad581.js';
 import '../../../navigation-bar-private/esm';
 
 var ModalDesktopComponent = forwardRef(function (props, ref) { return (React.createElement(Modal, __assign({}, props, { ref: ref, view: 'desktop' }))); });

package/modal/esm/desktop/index.js

@@ -11,7 +11,7 @@ import '../components/content/Component.js';
 import '../../../shared/esm';
 import '../Context.js';
 import '../components/controls/Component.js';
-import '../layout.module-8a8d6fa8.js';
+import '../layout.module-8c2ad581.js';
 import '../components/footer/Component.js';
 import '../components/header/Component.js';
 import '../../../navigation-bar-private/esm';

package/modal/esm/index.js

@@ -10,7 +10,7 @@ import './Context.js';
 import '../../base-modal/esm';
 import './ResponsiveContext.js';
 import './components/controls/Component.js';
-import './layout.module-8a8d6fa8.js';
+import './layout.module-8c2ad581.js';
 import './components/footer/Component.js';
 import './components/header/Component.js';
 import '../../navigation-bar-private/esm';

package/modal/esm/mobile/Component.mobile.js

@@ -12,7 +12,7 @@ import '../consts.js';
 import '../ResponsiveContext.js';
 import '../../../shared/esm';
 import '../Context.js';
-import '../layout.module-8a8d6fa8.js';
+import '../layout.module-8c2ad581.js';
 import '../../../navigation-bar-private/esm';
 
 var ModalMobileComponent = forwardRef(function (props, ref) { return (React.createElement(Modal, __assign({}, props, { ref: ref, view: 'mobile' }))); });

package/modal/esm/mobile/index.js

@@ -11,7 +11,7 @@ import '../components/content/Component.js';
 import '../../../shared/esm';
 import '../Context.js';
 import '../components/controls/Component.js';
-import '../layout.module-8a8d6fa8.js';
+import '../layout.module-8c2ad581.js';
 import '../components/footer/Component.js';
 import '../components/header/Component.js';
 import '../../../navigation-bar-private/esm';

package/modal/modern/Component.responsive.js

@@ -11,7 +11,7 @@ import './consts.js';
 import './Context.js';
 import '../../base-modal/modern';
 import './ResponsiveContext.js';
-import './layout.module-2a1bae54.js';
+import './layout.module-7b9f84d6.js';
 import '../../navigation-bar-private/modern';
 import 'react-merge-refs';
 

package/modal/modern/components/controls/Component.js

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import cn from 'classnames';
 import { getDataTestId } from '../../../../shared/modern';
 import { ResponsiveContext } from '../../ResponsiveContext.js';
-import { l as layoutStyles } from '../../layout.module-2a1bae54.js';
+import { l as layoutStyles } from '../../layout.module-7b9f84d6.js';
 
 const styles = {"component":"modal__component_6629a"};
 require('./index.css');

package/modal/modern/components/controls/index.js

@@ -3,4 +3,4 @@ import 'react';
 import 'classnames';
 import '../../../../shared/modern';
 import '../../ResponsiveContext.js';
-import '../../layout.module-2a1bae54.js';
+import '../../layout.module-7b9f84d6.js';

package/modal/modern/components/footer/Component.js

@@ -4,7 +4,7 @@ import { getDataTestId } from '../../../../shared/modern';
 import { SIZE_TO_CLASSNAME_MAP } from '../../consts.js';
 import { ModalContext } from '../../Context.js';
 import { ResponsiveContext } from '../../ResponsiveContext.js';
-import { l as layoutStyles } from '../../layout.module-2a1bae54.js';
+import { l as layoutStyles } from '../../layout.module-7b9f84d6.js';
 import '../../../../base-modal/modern';
 
 const desktopStyles = {"footer":"modal__footer_e5vdf","sticky":"modal__sticky_e5vdf","fullscreen":"modal__fullscreen_e5vdf","size-500":"modal__size-500_e5vdf","size-600":"modal__size-600_e5vdf","size-800":"modal__size-800_e5vdf","size-1140":"modal__size-1140_e5vdf"};

package/modal/modern/desktop/Component.desktop.js

@@ -11,7 +11,7 @@ import '../consts.js';
 import '../ResponsiveContext.js';
 import '../../../shared/modern';
 import '../Context.js';
-import '../layout.module-2a1bae54.js';
+import '../layout.module-7b9f84d6.js';
 import '../../../navigation-bar-private/modern';
 
 const ModalDesktopComponent = forwardRef((props, ref) => (React.createElement(Modal, { ...props, ref: ref, view: 'desktop' })));

package/modal/modern/desktop/index.js

@@ -10,7 +10,7 @@ import '../components/content/Component.js';
 import '../../../shared/modern';
 import '../Context.js';
 import '../components/controls/Component.js';
-import '../layout.module-2a1bae54.js';
+import '../layout.module-7b9f84d6.js';
 import '../components/footer/Component.js';
 import '../components/header/Component.js';
 import '../../../navigation-bar-private/modern';

package/modal/modern/index.js

@@ -9,7 +9,7 @@ import './Context.js';
 import '../../base-modal/modern';
 import './ResponsiveContext.js';
 import './components/controls/Component.js';
-import './layout.module-2a1bae54.js';
+import './layout.module-7b9f84d6.js';
 import './components/footer/Component.js';
 import './components/header/Component.js';
 import '../../navigation-bar-private/modern';

package/modal/modern/mobile/Component.mobile.js

@@ -11,7 +11,7 @@ import '../consts.js';
 import '../ResponsiveContext.js';
 import '../../../shared/modern';
 import '../Context.js';
-import '../layout.module-2a1bae54.js';
+import '../layout.module-7b9f84d6.js';
 import '../../../navigation-bar-private/modern';
 
 const ModalMobileComponent = forwardRef((props, ref) => (React.createElement(Modal, { ...props, ref: ref, view: 'mobile' })));

package/modal/modern/mobile/index.js

@@ -10,7 +10,7 @@ import '../components/content/Component.js';
 import '../../../shared/modern';
 import '../Context.js';
 import '../components/controls/Component.js';
-import '../layout.module-2a1bae54.js';
+import '../layout.module-7b9f84d6.js';
 import '../components/footer/Component.js';
 import '../components/header/Component.js';
 import '../../../navigation-bar-private/modern';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alfalab/core-components",
-  "version": "46.0.0-beta.6",
+  "version": "46.0.0-beta.8",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -63,11 +63,13 @@
     "@maskito/core": "^1.7.0",
     "@maskito/react": "^1.7.0",
     "@popperjs/core": "^2.11.8",
+    "@types/deep-equal": "^1.0.4",
     "@types/react-transition-group": "^4.4.5",
     "can-use-dom": "^0.1.0",
     "classnames": "^2.3.1",
     "compute-scroll-into-view": "^3.1.0",
     "date-fns": "^2.16.1",
+    "deep-equal": "^2.2.3",
     "downshift": "8.4.0",
     "element-closest": "^3.0.2",
     "intersection-observer": "^0.12.0",

package/pass-code/Component.d.ts

@@ -1,34 +1,33 @@
 /// <reference types="react" />
 import React from 'react';
 import { ReactNode } from "react";
-import { PassCodeProps } from "./typings";
 type BasePassCodeProps = {
     /**
-     * Код
+     * Код.
      */
     value: string;
     /**
-     * Обработчик изменения кода
+     * Обработчик изменения кода.
      */
     onChange: (code: string) => void;
     /**
-     * Дополнительный класс
+     * Дополнительный класс.
      */
     className?: string;
     /**
-     * Отображение ошибки ввода
+     * Отображение ошибки
      */
-    error?: boolean;
+    error?: ReactNode;
     /**
-     * Отображение успешного ввода
+     *  Сообщение над клавиатурой
      */
-    success?: boolean;
+    message?: ReactNode;
     /**
-     * Слот слева
+     * Слот слева.
      */
     leftAddons?: ReactNode;
     /**
-     * Слот справа
+     * Слот справа.
      */
     rightAddons?: ReactNode;
     /**
@@ -38,17 +37,22 @@ type BasePassCodeProps = {
      * блока с цифрами -keypad
      */
     dataTestId?: string;
+};
+type PropsWithUnknownLen = {
+    codeLength?: never;
     /**
-     * Контрольная точка, с нее начинается desktop версия
-     * @default 1024
+     * Максимально возможная длина кода.
+     * @default 10
      */
-    breakpoint?: number;
+    maxCodeLength?: number;
+};
+type PropsWithLen = {
+    maxCodeLength?: never;
     /**
-     * Стили компонента
+     * Длина кода.
      */
-    styles?: {
-        [key: string]: string;
-    };
+    codeLength?: number;
 };
+type PassCodeProps = BasePassCodeProps & (PropsWithLen | PropsWithUnknownLen);
 declare const PassCode: React.ForwardRefExoticComponent<PassCodeProps & React.RefAttributes<HTMLDivElement>>;
 export { BasePassCodeProps, PassCode };

package/pass-code/Component.js

@@ -12,11 +12,11 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var commonStyles = {"component":"pass-code__component_13oks","inputProgressContainer":"pass-code__inputProgressContainer_13oks","message":"pass-code__message_13oks"};
+var styles = {"component":"pass-code__component_13oks","message":"pass-code__message_13oks","error":"pass-code__error_13oks"};
 require('./index.css');
 
 var PassCode = 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, success = _a.success, onChange = _a.onChange, _c = _a.maxCodeLength, maxCodeLength = _c === void 0 ? 10 : _c, codeLength = _a.codeLength, _d = _a.styles, styles = _d === void 0 ? {} : _d;
+    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());
@@ -29,11 +29,13 @@ var PassCode = React.forwardRef(function (_a, ref) {
             onChange === null || onChange === void 0 ? void 0 : onChange(value === null || value === void 0 ? void 0 : value.slice(0, -1));
         }
     };
-    return (React__default.default.createElement("div", { className: cn__default.default(commonStyles.component, styles.component, className), ref: ref, "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'wrapper') },
-        React__default.default.createElement("div", { className: cn__default.default(commonStyles.inputProgressContainer) },
-            React__default.default.createElement(coreComponentsGap.Gap, { size: 16 }),
-            React__default.default.createElement(components_InputProgress_Component.InputProgress, { dataTestId: dataTestId, value: value, maxCodeLength: maxCodeLength, codeLength: codeLength, error: Boolean(error), success: success }),
-            React__default.default.createElement(coreComponentsGap.Gap, { size: 26 })),
+    var renderError = function () { return (React__default.default.createElement("div", { className: cn__default.default(styles.message, styles.error), "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'error') }, error)); };
+    var renderMessage = function () { return (React__default.default.createElement("div", { className: styles.message, "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'message') }, message)); };
+    return (React__default.default.createElement("div", { className: cn__default.default(styles.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) })));
 });
 

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

@@ -6,7 +6,6 @@ type InputProgressProps = {
     error: boolean;
     value?: string;
     dataTestId?: string;
-    success?: boolean;
 };
 declare const InputProgress: React.FC<InputProgressProps>;
 export { InputProgressProps, InputProgress };

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

@@ -4,14 +4,13 @@ var React = require('react');
 var reactTransitionGroup = require('react-transition-group');
 var cn = require('classnames');
 var coreComponentsShared = require('../../../shared');
-var components_InputProgress_useInputProgress = require('./useInputProgress.js');
 
 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__component_ar2ke","dotWrapper":"pass-code__dotWrapper_ar2ke","dot":"pass-code__dot_ar2ke","filled":"pass-code__filled_ar2ke","animatedFill":"pass-code__animatedFill_ar2ke","dotFilled":"pass-code__dotFilled_ar2ke","error":"pass-code__error_ar2ke","success":"pass-code__success_ar2ke","dotSuccessFilled":"pass-code__dotSuccessFilled_ar2ke","rawSuccess":"pass-code__rawSuccess_ar2ke"};
+var styles = {"component":"pass-code__component_ar2ke","dot":"pass-code__dot_ar2ke","error":"pass-code__error_ar2ke","filled":"pass-code__filled_ar2ke"};
 require('./index.css');
 
 var transitions = {"enter":"pass-code__enter_oif5e","enterActive":"pass-code__enterActive_oif5e","exit":"pass-code__exit_oif5e","exitActive":"pass-code__exitActive_oif5e","shake":"pass-code__shake_oif5e"};
@@ -21,27 +20,20 @@ require('./transitions.css');
 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, success = _a.success;
-    var _d = components_InputProgress_useInputProgress.useInputProgress(success), rawSuccess = _d.rawSuccess, resetSuccessAnimation = _d.resetSuccessAnimation;
+    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.component, (_b = {}, _b[transitions.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", { className: cn__default.default(styles.dotWrapper), key: i },
-                React__default.default.createElement("div", { className: cn__default.default(styles.dot, (_a = {},
-                        _a[styles.error] = filled && error,
-                        _a[styles.animatedFill] = filled,
-                        _a[styles.success] = success,
-                        _a)) })));
+            return (React__default.default.createElement("div", { key: i, className: cn__default.default(styles.dot, (_a = {},
+                    _a[styles.error] = filled && error,
+                    _a[styles.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, unmountOnExit: true },
-                React__default.default.createElement("div", { className: cn__default.default(styles.dot, styles.filled, (_a = {},
-                        _a[styles.error] = error,
-                        _a[styles.success] = success && !rawSuccess,
-                        _a[styles.rawSuccess] = success && rawSuccess,
-                        _a)), onAnimationEnd: resetSuccessAnimation })));
+                React__default.default.createElement("div", { className: cn__default.default(styles.dot, styles.filled, (_a = {}, _a[styles.error] = error, _a)) })));
         })));
 };
 

package/pass-code/components/InputProgress/index.css

@@ -1,10 +1,9 @@
 /* hash: 1jkz1 */
 :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-1300: rgba(3, 3, 6, 0.88);
+    --color-light-neutral-1500: #121213;
     --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1);
-    --color-light-status-negative: #ff4837;
-    --color-light-status-positive: #0cc44d; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+    --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 {
@@ -19,63 +18,24 @@
 } :root {
 } :root {
 } :root {
-} :root {
-    --pass-code-dot-width: 12px;
-    --pass-code-dot-height: 12px;
-    --pass-code-dot-container-width: 14px;
-    --pass-code-dot-container-height: 14px;
-    --pass-code-progress-container-min-height: 14px;
-} @keyframes pass-code__dotFilled_ar2ke {
-    50% {
-        width: var(--pass-code-dot-container-width);
-        height: var(--pass-code-dot-container-height);
-        animation-timing-function: ease-out;
-    }
-} @keyframes pass-code__dotSuccessFilled_ar2ke {
-    50% {
-        width: var(--pass-code-dot-container-width);
-        height: var(--pass-code-dot-container-height);
-        animation-timing-function: ease-out;
-    }
 } .pass-code__component_ar2ke {
+    height: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
-    min-height: var(--pass-code-progress-container-min-height);
-} .pass-code__dotWrapper_ar2ke {
-    width: var(--pass-code-dot-container-width);
-    height: var(--pass-code-dot-container-height);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: 0 5px
-} .pass-code__dotWrapper_ar2ke .pass-code__dot_ar2ke {
-        margin: unset;
-    } .pass-code__dot_ar2ke {
+    overflow: hidden;
+} .pass-code__dot_ar2ke {
     margin: 0 6px;
-    width: var(--pass-code-dot-width);
-    height: var(--pass-code-dot-height);
+    width: 12px;
+    height: 12px;
     background: var(--color-light-neutral-translucent-300);
     border-radius: var(--border-radius-circle);
-    flex-shrink: 0
-
-    /* for unknown password length */
-} .pass-code__dot_ar2ke.pass-code__filled_ar2ke {
-        background: var(--color-light-neutral-translucent-1300);
-    } .pass-code__dot_ar2ke {
-
-    /* for a known passcode length */
-} .pass-code__dot_ar2ke.pass-code__animatedFill_ar2ke {
-        background: var(--color-light-neutral-translucent-1300);
-        animation: pass-code__dotFilled_ar2ke 200ms ease-in forwards;
-    } .pass-code__dot_ar2ke.pass-code__error_ar2ke {
+    flex-shrink: 0;
+    transition: background 75ms ease-in;
+    will-change: transform, opacity
+} .pass-code__dot_ar2ke.pass-code__error_ar2ke {
         background: var(--color-light-status-negative);
-    } .pass-code__dot_ar2ke.pass-code__success_ar2ke {
-        background: var(--color-light-status-positive);
-        animation: pass-code__dotSuccessFilled_ar2ke 200ms ease-in forwards;
-    } .pass-code__dot_ar2ke {
-
-    /* without animation */
-} .pass-code__dot_ar2ke.pass-code__rawSuccess_ar2ke {
-        background: var(--color-light-status-positive);
-    }
+        transition: none;
+    } .pass-code__filled_ar2ke {
+    background: var(--color-light-neutral-1500);
+}

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

@@ -12,24 +12,34 @@
     /* Hard up */
 } :root {
 } :root {
-    --gap-2s: 14px;
-    --gap-3xl: 40px;
+    --gap-s: 12px;
+    --gap-m: 16px;
+    --gap-xl: 24px;
+    --gap-2xl: 32px;
 } :root {
 } :root {
-    --size-l-height: 64px;
-} :root {
-    --pass-code-min-width: 304px;
 } .pass-code__component_1quxu {
+    width: 240px;
+    height: 292px;
     display: grid;
-    grid-template-columns: repeat(3, var(--size-l-height));
+    grid-template-columns: repeat(3, 1fr);
     grid-template-rows: repeat(4, 1fr);
-    grid-column-gap: var(--gap-3xl);
-    grid-row-gap: var(--gap-2s);
-    justify-content: center;
-
-    margin: 0 auto;
-    min-width: var(--pass-code-min-width)
+    grid-column-gap: var(--gap-xl);
+    grid-row-gap: var(--gap-s);
+    margin: 0 auto
 } .pass-code__component_1quxu .pass-code__digit_1quxu.pass-code__digit_1quxu {
         font-size: 36px;
         line-height: 1;
+    } @media screen and (min-width: 360px) {
+    .pass-code__component_1quxu {
+        width: 292px;
+        height: 352px;
+        grid-column-gap: var(--gap-2xl);
+        grid-row-gap: var(--gap-m);
+    }
+} @media screen and (min-width: 390px) {
+    .pass-code__component_1quxu {
+        width: 322px;
+        height: 392px;
     }
+}

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

@@ -4,29 +4,29 @@ 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, view, buttonClassName, dataTestId, }: KeyPadButtonProps<T>): React.JSX.Element;
+declare function KeyPadButton<T extends ReactNode>({ children, onClick, className, view, buttonClassName, dataTestId, }: KeyPadButtonProps<T>): React.JSX.Element;
 export { KeyPadButtonProps, KeyPadButton };

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

@@ -9,12 +9,13 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"button":"pass-code__button_dpc73","secondary":"pass-code__secondary_dpc73"};
+var styles = {"component":"pass-code__component_dpc73","button":"pass-code__button_dpc73","secondary":"pass-code__secondary_dpc73","ghost":"pass-code__ghost_dpc73"};
 require('./index.css');
 
 function KeyPadButton(_a) {
-    var children = _a.children, onClick = _a.onClick, _b = _a.view, view = _b === void 0 ? 'secondary' : _b, buttonClassName = _a.buttonClassName, dataTestId = _a.dataTestId;
-    return (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));
+    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;