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

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

@@ -1,9 +1,10 @@
 /* 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-1500: #121213;
+    --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
     --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 */
+    --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 */
 } :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,24 +19,63 @@
 } :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;
-    overflow: hidden;
-} .pass-code__dot_ar2ke {
+    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 {
     margin: 0 6px;
-    width: 12px;
-    height: 12px;
+    width: var(--pass-code-dot-width);
+    height: var(--pass-code-dot-height);
     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
-} .pass-code__dot_ar2ke.pass-code__error_ar2ke {
+    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 {
         background: var(--color-light-status-negative);
-        transition: none;
-    } .pass-code__filled_ar2ke {
-    background: var(--color-light-neutral-1500);
-}
+    } .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);
+    }

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

@@ -3,3 +3,4 @@ import 'react';
 import 'react-transition-group';
 import 'classnames';
 import '../../../../shared/modern';
+import './useInputProgress.js';

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

@@ -0,0 +1,5 @@
+declare const useInputProgress: (success?: boolean) => {
+    rawSuccess: boolean;
+    resetSuccessAnimation: () => void;
+};
+export { useInputProgress };

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

@@ -0,0 +1,18 @@
+import { useState, useCallback } from 'react';
+
+const useInputProgress = (success) => {
+    const [rawSuccess, setRawSuccess] = useState(false);
+    // костыль для корректной работы анимации исчезновения точек
+    const resetSuccessAnimation = useCallback(() => {
+        // компонент использует CSSTransition и нативную анимацию это приводит к конфликтам transition и animation
+        if (success) {
+            setRawSuccess(true);
+            setTimeout(() => {
+                setRawSuccess(false);
+            }, 1000);
+        }
+    }, [success]);
+    return { rawSuccess, resetSuccessAnimation };
+};
+
+export { useInputProgress };

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

@@ -12,34 +12,24 @@
     /* Hard up */
 } :root {
 } :root {
-    --gap-s: 12px;
-    --gap-m: 16px;
-    --gap-xl: 24px;
-    --gap-2xl: 32px;
+    --gap-2s: 14px;
+    --gap-3xl: 40px;
 } :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, 1fr);
+    grid-template-columns: repeat(3, var(--size-l-height));
     grid-template-rows: repeat(4, 1fr);
-    grid-column-gap: var(--gap-xl);
-    grid-row-gap: var(--gap-s);
-    margin: 0 auto
+    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)
 } .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/modern/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, className, view, buttonClassName, dataTestId, }: KeyPadButtonProps<T>): React.JSX.Element;
+declare function KeyPadButton<T extends ReactNode>({ children, onClick, view, buttonClassName, dataTestId, }: KeyPadButtonProps<T>): React.JSX.Element;
 export { KeyPadButtonProps, KeyPadButton };

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

@@ -2,12 +2,11 @@ import React from 'react';
 import cn from 'classnames';
 import { ButtonMobile } from '../../../../button/modern/mobile';
 
-const styles = {"component":"pass-code__component_dpc73","button":"pass-code__button_dpc73","secondary":"pass-code__secondary_dpc73","ghost":"pass-code__ghost_dpc73"};
+const styles = {"button":"pass-code__button_dpc73","secondary":"pass-code__secondary_dpc73"};
 require('./index.css');
 
-function KeyPadButton({ children, onClick, className, view = 'secondary', buttonClassName, dataTestId, }) {
-    return (React.createElement("div", { className: cn(styles.component, className) },
-        React.createElement(ButtonMobile, { className: cn(styles.button, styles[view], buttonClassName), view: view, onClick: () => onClick?.(children), dataTestId: dataTestId }, children)));
+function KeyPadButton({ children, onClick, view = 'secondary', buttonClassName, dataTestId, }) {
+    return (React.createElement(ButtonMobile, { className: cn(styles.button, styles[view], buttonClassName), view: view, onClick: () => onClick?.(children), dataTestId: dataTestId }, children));
 }
 
 export { KeyPadButton };

package/pass-code/modern/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/modern/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/modern/desktop/PassCodeDesktop.js

@@ -0,0 +1,19 @@
+import React, { forwardRef } from 'react';
+import { PassCode } from '../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 styles = {};
+require('./desktop.css');
+
+const PassCodeDesktop = forwardRef((restProps, ref) => (React.createElement(PassCode, { ...restProps, ref: ref, styles: styles })));
+
+export { PassCodeDesktop };

package/pass-code/modern/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/modern/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/modern/index.d.ts

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

package/pass-code/modern/index.js

@@ -1,11 +1,16 @@
-export { PassCode } from './Component.js';
+export { PassCode } from './Component.responsive.js';
 export { KeyPadButton } from './components/KeyPadButton/Component.js';
 import 'react';
+import '../../mq/modern';
+import './desktop/PassCodeDesktop.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 './mobile/PassCodeMobile.js';
 import '../../button/modern/mobile';

package/pass-code/modern/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/modern/mobile/PassCodeMobile.js

@@ -0,0 +1,19 @@
+import React, { forwardRef } from 'react';
+import { PassCode } from '../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 styles = {"component":"pass-code__component_fxiqr"};
+require('./mobile.css');
+
+const PassCodeMobile = forwardRef((restProps, ref) => (React.createElement(PassCode, { ...restProps, ref: ref, styles: styles })));
+
+export { PassCodeMobile };

package/pass-code/modern/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/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/modern/typings.js

@@ -0,0 +1 @@
+

package/pass-code/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/typings.js

@@ -0,0 +1 @@
+

package/pass-code-v1/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 };