@alfalab/core-components 47.0.0-beta.0 → 47.0.0-beta.1

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

@@ -1,9 +1,10 @@
 /* hash: wirbi */
 :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 */
+    --color-light-text-primary: rgba(3, 3, 6, 0.88);
+    --color-light-transparent-default: rgba(255, 255, 255, 0);
+    --color-light-transparent-default-hover: rgba(38, 55, 88, 0.06);
+    --color-light-transparent-default-press: rgba(30, 43, 68, 0.08); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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 {
@@ -18,14 +19,11 @@
 } :root {
 } :root {
 } :root {
+    --size-l-height: 64px;
 } :root {
-    --button-bg-color: var(--color-light-neutral-translucent-200);
-    --button-bg-color-active: var(--color-light-neutral-translucent-200-press);
-} .pass-code__component_dpc73 {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 0;
+    --pass-code-button-width: var(--size-l-height);
+    --pass-code-button-min-width: var(--size-l-height);
+    --pass-code-button-height: var(--size-l-height);
 } .pass-code__button_dpc73.pass-code__button_dpc73 {
     font-size: 14px;
     line-height: 18px;
@@ -33,37 +31,21 @@
 
     border-radius: var(--border-radius-circle);
     padding: 0;
-    min-width: 64px;
-    width: 64px;
-    height: 64px;
+    min-width: var(--pass-code-button-min-width);
+    width: var(--pass-code-button-width);
+    height: var(--pass-code-button-height);
+
     text-align: center
 } .pass-code__button_dpc73.pass-code__button_dpc73 > span {
         vertical-align: middle
     } .pass-code__button_dpc73.pass-code__button_dpc73 > span > * {
             vertical-align: middle;
-        } .pass-code__secondary_dpc73.pass-code__secondary_dpc73 {
+        } .pass-code__secondary_dpc73.pass-code__secondary_dpc73,
+.pass-code__button_dpc73.pass-code__button_dpc73 {
     color: var(--color-light-text-primary);
-    background: var(--button-bg-color)
-} .pass-code__secondary_dpc73.pass-code__secondary_dpc73:hover {
-        color: var(--color-light-text-primary);
-    } .pass-code__secondary_dpc73.pass-code__secondary_dpc73:active {
-        background: var(--button-bg-color-active);
-    } .pass-code__ghost_dpc73.pass-code__ghost_dpc73 {
-    color: var(--color-light-text-primary)
-} .pass-code__ghost_dpc73.pass-code__ghost_dpc73:hover {
-        color: var(--color-light-text-primary);
-    } .pass-code__ghost_dpc73.pass-code__ghost_dpc73:active {
-        background: var(--button-bg-color-active);
-    } @media screen and (min-width: 360px) {
-    .pass-code__button_dpc73.pass-code__button_dpc73 {
-        min-width: 76px;
-        height: 76px;
-        width: 76px;
-    }
-} @media screen and (min-width: 390px) {
-    .pass-code__button_dpc73.pass-code__button_dpc73 {
-        min-width: 86px;
-        width: 86px;
-        height: 86px;
+    background-color: var(--color-light-transparent-default)
+} .pass-code__secondary_dpc73.pass-code__secondary_dpc73:hover, .pass-code__button_dpc73.pass-code__button_dpc73:hover {
+        background-color: var(--color-light-transparent-default-hover);
+    } .pass-code__secondary_dpc73.pass-code__secondary_dpc73:active, .pass-code__button_dpc73.pass-code__button_dpc73:active {
+        background-color: var(--color-light-transparent-default-press);
     }
-}

package/pass-code/esm/desktop/PassCodeDesktop.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { PassCodeProps } from "../typings";
+declare const PassCodeDesktop: React.ForwardRefExoticComponent<PassCodeProps & React.RefAttributes<HTMLDivElement>>;
+export { PassCodeDesktop };

package/pass-code/esm/desktop/PassCodeDesktop.js

@@ -0,0 +1,20 @@
+import { __assign } from 'tslib';
+import React, { forwardRef } from 'react';
+import { PassCode } from '../Component.js';
+import 'classnames';
+import '../../../gap/esm';
+import '../../../shared/esm';
+import '../components/InputProgress/Component.js';
+import 'react-transition-group';
+import '../components/InputProgress/useInputProgress.js';
+import '../components/KeyPad/Component.js';
+import '@alfalab/icons-glyph/BackspaceXxlIcon';
+import '../components/KeyPadButton/Component.js';
+import '../../../button/esm/mobile';
+
+var styles = {};
+require('./desktop.css');
+
+var PassCodeDesktop = forwardRef(function (restProps, ref) { return (React.createElement(PassCode, __assign({}, restProps, { ref: ref, styles: styles }))); });
+
+export { PassCodeDesktop };

package/pass-code/esm/desktop/desktop.css

@@ -0,0 +1,17 @@
+/* hash: 1kji9 */
+: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 {
+} :root {
+} :root {
+}

package/pass-code/esm/index.css

@@ -1,7 +1,6 @@
 /* hash: 14hwu */
 :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-text-negative: #ec2d20;
     --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 {
@@ -14,14 +13,15 @@
     /* Hard up */
 } :root {
 } :root {
-    --gap-xs: 8px;
 } :root {
 } :root {
 } :root {
-    --pass-code-max-width: 500px;
+    --pass-code-min-height: 378px;
 } .pass-code__component_13oks {
-    max-width: var(--pass-code-max-width);
-    margin: var(--gap-xs) 0;
+    min-height: var(--pass-code-min-height);
+} .pass-code__inputProgressContainer_13oks {
+    position: relative;
+    flex: 1 0 auto;
 } .pass-code__message_13oks {
     font-size: 16px;
     line-height: 24px;
@@ -33,6 +33,4 @@
     overflow: hidden;
     text-overflow: ellipsis;
     color: var(--color-light-text-primary);
-} .pass-code__error_13oks {
-    color: var(--color-light-text-negative);
 }

package/pass-code/esm/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./Component";
+export * from "./Component.responsive";
 export * from "./components/KeyPadButton/index";

package/pass-code/esm/index.js

@@ -1,11 +1,17 @@
-export { PassCode } from './Component.js';
+export { PassCode } from './Component.responsive.js';
 export { KeyPadButton } from './components/KeyPadButton/Component.js';
+import 'tslib';
 import 'react';
+import '../../mq/esm';
+import './desktop/PassCodeDesktop.js';
+import './Component.js';
 import 'classnames';
 import '../../gap/esm';
 import '../../shared/esm';
 import './components/InputProgress/Component.js';
 import 'react-transition-group';
+import './components/InputProgress/useInputProgress.js';
 import './components/KeyPad/Component.js';
 import '@alfalab/icons-glyph/BackspaceXxlIcon';
+import './mobile/PassCodeMobile.js';
 import '../../button/esm/mobile';

package/pass-code/esm/mobile/PassCodeMobile.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { PassCodeProps } from "../typings";
+declare const PassCodeMobile: React.ForwardRefExoticComponent<PassCodeProps & React.RefAttributes<HTMLDivElement>>;
+export { PassCodeMobile };

package/pass-code/esm/mobile/PassCodeMobile.js

@@ -0,0 +1,20 @@
+import { __assign } from 'tslib';
+import React, { forwardRef } from 'react';
+import { PassCode } from '../Component.js';
+import 'classnames';
+import '../../../gap/esm';
+import '../../../shared/esm';
+import '../components/InputProgress/Component.js';
+import 'react-transition-group';
+import '../components/InputProgress/useInputProgress.js';
+import '../components/KeyPad/Component.js';
+import '@alfalab/icons-glyph/BackspaceXxlIcon';
+import '../components/KeyPadButton/Component.js';
+import '../../../button/esm/mobile';
+
+var styles = {"component":"pass-code__component_fxiqr"};
+require('./mobile.css');
+
+var PassCodeMobile = forwardRef(function (restProps, ref) { return (React.createElement(PassCode, __assign({}, restProps, { ref: ref, styles: styles }))); });
+
+export { PassCodeMobile };

package/pass-code/esm/mobile/mobile.css

@@ -0,0 +1,24 @@
+/* hash: 1hv2v */
+: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 {
+} :root {
+} :root {
+} :root {
+    --pass-code-height: 100%;
+} .pass-code__component_fxiqr {
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+    height: var(--pass-code-height);
+}

package/pass-code/esm/typings.d.ts

@@ -0,0 +1,18 @@
+import { BasePassCodeProps } from "./Component";
+type PropsWithUnknownLen = {
+    codeLength?: never;
+    /**
+     * Максимально возможная длина кода
+     * @default 10
+     */
+    maxCodeLength?: number;
+};
+type PropsWithLen = {
+    maxCodeLength?: never;
+    /**
+     * Длина кода
+     */
+    codeLength?: number;
+};
+type PassCodeProps = BasePassCodeProps & (PropsWithLen | PropsWithUnknownLen);
+export { PassCodeProps };

package/pass-code/esm/typings.js

@@ -0,0 +1 @@
+

package/pass-code/index.css

@@ -1,7 +1,6 @@
 /* hash: 14hwu */
 :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-text-negative: #ec2d20;
     --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 {
@@ -14,14 +13,15 @@
     /* Hard up */
 } :root {
 } :root {
-    --gap-xs: 8px;
 } :root {
 } :root {
 } :root {
-    --pass-code-max-width: 500px;
+    --pass-code-min-height: 378px;
 } .pass-code__component_13oks {
-    max-width: var(--pass-code-max-width);
-    margin: var(--gap-xs) 0;
+    min-height: var(--pass-code-min-height);
+} .pass-code__inputProgressContainer_13oks {
+    position: relative;
+    flex: 1 0 auto;
 } .pass-code__message_13oks {
     font-size: 16px;
     line-height: 24px;
@@ -33,6 +33,4 @@
     overflow: hidden;
     text-overflow: ellipsis;
     color: var(--color-light-text-primary);
-} .pass-code__error_13oks {
-    color: var(--color-light-text-negative);
 }

package/pass-code/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./Component";
+export * from "./Component.responsive";
 export * from "./components/KeyPadButton/index";

package/pass-code/index.js

@@ -1,9 +1,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Component = require('./Component.js');
+var Component_responsive = require('./Component.responsive.js');
 var components_KeyPadButton_Component = require('./components/KeyPadButton/Component.js');
 
 
 
-exports.PassCode = Component.PassCode;
+exports.PassCode = Component_responsive.PassCode;
 exports.KeyPadButton = components_KeyPadButton_Component.KeyPadButton;

package/pass-code/mobile/PassCodeMobile.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { PassCodeProps } from "../typings";
+declare const PassCodeMobile: React.ForwardRefExoticComponent<PassCodeProps & React.RefAttributes<HTMLDivElement>>;
+export { PassCodeMobile };

package/pass-code/mobile/PassCodeMobile.js

@@ -0,0 +1,16 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var Component = require('../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__component_fxiqr"};
+require('./mobile.css');
+
+var PassCodeMobile = React.forwardRef(function (restProps, ref) { return (React__default.default.createElement(Component.PassCode, tslib.__assign({}, restProps, { ref: ref, styles: styles }))); });
+
+exports.PassCodeMobile = PassCodeMobile;

package/pass-code/mobile/mobile.css

@@ -0,0 +1,24 @@
+/* hash: 1hv2v */
+: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 {
+} :root {
+} :root {
+} :root {
+    --pass-code-height: 100%;
+} .pass-code__component_fxiqr {
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+    height: var(--pass-code-height);
+}

package/pass-code/modern/Component.d.ts

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

package/pass-code/modern/Component.js

@@ -5,14 +5,15 @@ import { getDataTestId } from '../../shared/modern';
 import { InputProgress } from './components/InputProgress/Component.js';
 import { KeyPad } from './components/KeyPad/Component.js';
 import 'react-transition-group';
+import './components/InputProgress/useInputProgress.js';
 import '@alfalab/icons-glyph/BackspaceXxlIcon';
 import './components/KeyPadButton/Component.js';
 import '../../button/modern/mobile';
 
-const styles = {"component":"pass-code__component_13oks","message":"pass-code__message_13oks","error":"pass-code__error_13oks"};
+const commonStyles = {"component":"pass-code__component_13oks","inputProgressContainer":"pass-code__inputProgressContainer_13oks","message":"pass-code__message_13oks"};
 require('./index.css');
 
-const PassCode = forwardRef(({ value = '', dataTestId, className, leftAddons, rightAddons, error, message, onChange, maxCodeLength = 10, codeLength, }, ref) => {
+const PassCode = forwardRef(({ value = '', dataTestId, className, leftAddons, rightAddons, error, success, onChange, maxCodeLength = 10, codeLength, styles = {}, }, ref) => {
     const passwordLen = codeLength || maxCodeLength;
     const handleChange = (digit) => {
         const newValue = value.concat(digit.toString());
@@ -25,13 +26,11 @@ const PassCode = forwardRef(({ value = '', dataTestId, className, leftAddons, ri
             onChange?.(value?.slice(0, -1));
         }
     };
-    const renderError = () => (React.createElement("div", { className: cn(styles.message, styles.error), "data-test-id": getDataTestId(dataTestId, 'error') }, error));
-    const renderMessage = () => (React.createElement("div", { className: styles.message, "data-test-id": getDataTestId(dataTestId, 'message') }, message));
-    return (React.createElement("div", { className: cn(styles.component, className), ref: ref, "data-test-id": getDataTestId(dataTestId, 'wrapper') },
-        error ? renderError() : renderMessage(),
-        React.createElement(Gap, { size: 'm' }),
-        React.createElement(InputProgress, { dataTestId: dataTestId, value: value, maxCodeLength: maxCodeLength, codeLength: codeLength, error: Boolean(error) }),
-        React.createElement(Gap, { size: '4xl' }),
+    return (React.createElement("div", { className: cn(commonStyles.component, styles.component, className), ref: ref, "data-test-id": getDataTestId(dataTestId, 'wrapper') },
+        React.createElement("div", { className: cn(commonStyles.inputProgressContainer) },
+            React.createElement(Gap, { size: 16 }),
+            React.createElement(InputProgress, { dataTestId: dataTestId, value: value, maxCodeLength: maxCodeLength, codeLength: codeLength, error: Boolean(error), success: success }),
+            React.createElement(Gap, { size: 26 })),
         React.createElement(KeyPad, { dataTestId: dataTestId, leftAddons: leftAddons, rightAddons: rightAddons, onClick: handleChange, onClear: handleClear, showClear: Boolean(value) })));
 });
 

package/pass-code/modern/Component.responsive.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { PassCodeProps } from "./typings";
+declare const PassCode: React.ForwardRefExoticComponent<PassCodeProps & React.RefAttributes<HTMLDivElement>>;
+export { PassCode };

package/pass-code/modern/Component.responsive.js

@@ -0,0 +1,24 @@
+import React, { forwardRef } from 'react';
+import { useMatchMedia } from '../../mq/modern';
+import { PassCodeDesktop } from './desktop/PassCodeDesktop.js';
+import { PassCodeMobile } from './mobile/PassCodeMobile.js';
+import './Component.js';
+import 'classnames';
+import '../../gap/modern';
+import '../../shared/modern';
+import './components/InputProgress/Component.js';
+import 'react-transition-group';
+import './components/InputProgress/useInputProgress.js';
+import './components/KeyPad/Component.js';
+import '@alfalab/icons-glyph/BackspaceXxlIcon';
+import './components/KeyPadButton/Component.js';
+import '../../button/modern/mobile';
+
+const PassCode = forwardRef(({ breakpoint = 1024, ...restProps }, ref) => {
+    const query = `(min-width: ${breakpoint}px)`;
+    const [isDesktop] = useMatchMedia(query);
+    const Component = isDesktop ? PassCodeDesktop : PassCodeMobile;
+    return React.createElement(Component, { ref: ref, ...restProps });
+});
+
+export { PassCode };

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

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

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

@@ -2,8 +2,9 @@ import React from 'react';
 import { CSSTransition } from 'react-transition-group';
 import cn from 'classnames';
 import { getDataTestId } from '../../../../shared/modern';
+import { useInputProgress } from './useInputProgress.js';
 
-const styles = {"component":"pass-code__component_ar2ke","dot":"pass-code__dot_ar2ke","error":"pass-code__error_ar2ke","filled":"pass-code__filled_ar2ke"};
+const 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"};
 require('./index.css');
 
 const 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"};
@@ -11,15 +12,24 @@ require('./transitions.css');
 
 /* eslint-disable react/no-array-index-key */
 const TRANSITION_DURATION = 150;
-const InputProgress = ({ value = '', maxCodeLength, codeLength, error, dataTestId, }) => (React.createElement("div", { className: cn(styles.component, { [transitions.shake]: error }), "data-test-id": getDataTestId(dataTestId, 'input-progress') }, codeLength
-    ? new Array(codeLength).fill(null).map((_, i) => {
-        const filled = Boolean(value[i]);
-        return (React.createElement("div", { key: i, className: cn(styles.dot, {
-                [styles.error]: filled && error,
-                [styles.filled]: filled,
-            }) }));
-    })
-    : new Array(maxCodeLength).fill(null).map((_, i) => (React.createElement(CSSTransition, { key: i, in: Boolean(value[i]), timeout: TRANSITION_DURATION, classNames: transitions, unmountOnExit: true },
-        React.createElement("div", { className: cn(styles.dot, styles.filled, { [styles.error]: error }) }))))));
+const InputProgress = ({ value = '', maxCodeLength, codeLength, error, dataTestId, success, }) => {
+    const { rawSuccess, resetSuccessAnimation } = useInputProgress(success);
+    return (React.createElement("div", { className: cn(styles.component, { [transitions.shake]: error }), "data-test-id": getDataTestId(dataTestId, 'input-progress') }, codeLength
+        ? new Array(codeLength).fill(null).map((_, i) => {
+            const filled = Boolean(value[i]);
+            return (React.createElement("div", { className: cn(styles.dotWrapper), key: i },
+                React.createElement("div", { className: cn(styles.dot, {
+                        [styles.error]: filled && error,
+                        [styles.animatedFill]: filled,
+                        [styles.success]: success,
+                    }) })));
+        })
+        : new Array(maxCodeLength).fill(null).map((_, i) => (React.createElement(CSSTransition, { key: i, in: Boolean(value[i]), timeout: TRANSITION_DURATION, classNames: transitions, unmountOnExit: true },
+            React.createElement("div", { className: cn(styles.dot, styles.filled, {
+                    [styles.error]: error,
+                    [styles.success]: success && !rawSuccess,
+                    [styles.rawSuccess]: success && rawSuccess,
+                }), onAnimationEnd: resetSuccessAnimation }))))));
+};
 
 export { InputProgress };