@alfalab/core-components 42.0.0-beta.1 → 42.0.0-beta.2

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

@@ -18,7 +18,7 @@
     --gap-2xl: 32px;
 } :root {
 } :root {
-} .pass-code__component_14thv {
+} .pass-code__component_fqbu7 {
     width: 240px;
     height: 292px;
     display: grid;
@@ -27,18 +27,18 @@
     grid-column-gap: var(--gap-xl);
     grid-row-gap: var(--gap-s);
     margin: 0 auto
-} .pass-code__component_14thv .pass-code__digit_14thv.pass-code__digit_14thv {
+} .pass-code__component_fqbu7 .pass-code__digit_fqbu7.pass-code__digit_fqbu7 {
         font-size: 36px;
         line-height: 1;
     } @media screen and (min-width: 360px) {
-    .pass-code__component_14thv {
+    .pass-code__component_fqbu7 {
         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_14thv {
+    .pass-code__component_fqbu7 {
         width: 322px;
         height: 392px;
     }

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

@@ -4,4 +4,4 @@ import '../../../../shared/modern';
 import '@alfalab/icons-glyph/BackspaceXxlIcon';
 import '../KeyPadButton/Component.js';
 import 'classnames';
-import '../../../../button/modern';
+import '../../../../button/modern/mobile';

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

@@ -1,11 +1,100 @@
 /// <reference types="react" />
-import { ReactNode } from 'react';
-import { ButtonProps } from "../../../../button";
+import { ReactNode, AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType } from 'react';
+type StyleColors = {
+    default: {
+        [key: string]: string;
+    };
+    inverted: {
+        [key: string]: string;
+    };
+};
+type ComponentProps = {
+    /**
+     * Тип кнопки
+     * @default secondary
+     */
+    view?: "accent" | "primary" | "secondary" | "tertiary" | "outlined" // deprecated
+     | "filled" // deprecated
+     | "transparent" // deprecated
+     | "link" | "ghost";
+    /**
+     * Слот слева
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: ReactNode;
+    /**
+     * Размер компонента
+     * @default m
+     */
+    size?: "xxs" | "xs" | "s" | "m" | "l" | "xl";
+    /**
+     * Растягивает компонент на ширину контейнера
+     * @default false
+     */
+    block?: boolean;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для спиннера
+     */
+    spinnerClassName?: string;
+    /**
+     * Выводит ссылку в виде кнопки
+     */
+    href?: string;
+    /**
+     * Позволяет использовать кастомный компонент для кнопки (например Link из роутера)
+     */
+    Component?: ElementType;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Показать лоадер
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Не переносить текст кнопки на новую строку
+     * @default false
+     */
+    nowrap?: boolean;
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: "default" | "inverted";
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
+    /**
+     * Основные стили компонента.
+     */
+    styles: {
+        [key: string]: string;
+    };
+    /**
+     * Стили компонента для default и inverted режима.
+     */
+    colorStylesMap: StyleColors;
+};
+type AnchorBaseButtonProps = ComponentProps & AnchorHTMLAttributes<HTMLAnchorElement>;
+type NativeBaseButtonProps = ComponentProps & ButtonHTMLAttributes<HTMLButtonElement>;
+type BaseButtonProps = Partial<AnchorBaseButtonProps | NativeBaseButtonProps>;
+type AnchorButtonProps = Omit<BaseButtonProps, "styles" | "colorStylesMap"> & AnchorHTMLAttributes<HTMLAnchorElement>;
+type NativeButtonProps = Omit<BaseButtonProps, "styles" | "colorStylesMap"> & ButtonHTMLAttributes<HTMLButtonElement>;
+type ButtonMobileProps = Partial<AnchorButtonProps | NativeButtonProps>;
 type KeyPadButtonProps<T> = {
     /**
      * Вид кнопки.
      */
-    view: ButtonProps['view'];
+    view: ButtonMobileProps['view'];
     /**
      * Значение.
      */

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

@@ -1,13 +1,13 @@
 import React from 'react';
 import cn from 'classnames';
-import { Button } from '../../../../button/modern';
+import { ButtonMobile } from '../../../../button/modern/mobile';
 
-const styles = {"component":"pass-code__component_thn4u","button":"pass-code__button_thn4u","secondary":"pass-code__secondary_thn4u","ghost":"pass-code__ghost_thn4u"};
+const styles = {"component":"pass-code__component_1ikt6","button":"pass-code__button_1ikt6","secondary":"pass-code__secondary_1ikt6","ghost":"pass-code__ghost_1ikt6"};
 require('./index.css');
 
 function KeyPadButton({ children, onClick, className, view = 'secondary', buttonClassName, }) {
     return (React.createElement("div", { className: cn(styles.component, className) },
-        React.createElement(Button, { className: cn(styles.button, styles[view], buttonClassName), view: view, onClick: () => onClick?.(children) }, children)));
+        React.createElement(ButtonMobile, { className: cn(styles.button, styles[view], buttonClassName), view: view, onClick: () => onClick?.(children) }, children)));
 }
 
 export { KeyPadButton };

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

@@ -21,12 +21,12 @@
 } :root {
     --button-bg-color: var(--color-light-specialbg-secondary-transparent);
     --button-bg-color-active: var(--color-light-specialbg-tertiary-transparent);
-} .pass-code__component_thn4u {
+} .pass-code__component_1ikt6 {
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 0;
-} .pass-code__button_thn4u.pass-code__button_thn4u {
+} .pass-code__button_1ikt6.pass-code__button_1ikt6 {
     font-size: 14px;
     line-height: 18px;
     font-weight: 500;
@@ -37,31 +37,31 @@
     width: 64px;
     height: 64px;
     text-align: center
-} .pass-code__button_thn4u.pass-code__button_thn4u > span {
+} .pass-code__button_1ikt6.pass-code__button_1ikt6 > span {
         vertical-align: middle
-    } .pass-code__button_thn4u.pass-code__button_thn4u > span > * {
+    } .pass-code__button_1ikt6.pass-code__button_1ikt6 > span > * {
             vertical-align: middle;
-        } .pass-code__secondary_thn4u.pass-code__secondary_thn4u {
+        } .pass-code__secondary_1ikt6.pass-code__secondary_1ikt6 {
     color: var(--color-light-text-primary);
     background: var(--button-bg-color)
-} .pass-code__secondary_thn4u.pass-code__secondary_thn4u:hover {
+} .pass-code__secondary_1ikt6.pass-code__secondary_1ikt6:hover {
         color: var(--color-light-text-primary);
-    } .pass-code__secondary_thn4u.pass-code__secondary_thn4u:active {
+    } .pass-code__secondary_1ikt6.pass-code__secondary_1ikt6:active {
         background: var(--button-bg-color-active);
-    } .pass-code__ghost_thn4u.pass-code__ghost_thn4u {
+    } .pass-code__ghost_1ikt6.pass-code__ghost_1ikt6 {
     color: var(--color-light-text-primary)
-} .pass-code__ghost_thn4u.pass-code__ghost_thn4u:hover {
+} .pass-code__ghost_1ikt6.pass-code__ghost_1ikt6:hover {
         color: var(--color-light-text-primary);
-    } .pass-code__ghost_thn4u.pass-code__ghost_thn4u:active {
+    } .pass-code__ghost_1ikt6.pass-code__ghost_1ikt6:active {
         background: var(--button-bg-color-active);
     } @media screen and (min-width: 360px) {
-    .pass-code__button_thn4u.pass-code__button_thn4u {
+    .pass-code__button_1ikt6.pass-code__button_1ikt6 {
         min-width: 76px;
         height: 76px;
         width: 76px;
     }
 } @media screen and (min-width: 390px) {
-    .pass-code__button_thn4u.pass-code__button_thn4u {
+    .pass-code__button_1ikt6.pass-code__button_1ikt6 {
         min-width: 86px;
         width: 86px;
         height: 86px;

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

@@ -1,4 +1,4 @@
 export { KeyPadButton } from './Component.js';
 import 'react';
 import 'classnames';
-import '../../../../button/modern';
+import '../../../../button/modern/mobile';

package/pass-code/modern/index.css

@@ -18,10 +18,10 @@
 } :root {
 } :root {
     --pass-code-max-width: 500px;
-} .pass-code__component_19pnx {
+} .pass-code__component_1ysty {
     max-width: var(--pass-code-max-width);
     margin: var(--gap-xs) 0;
-} .pass-code__error_19pnx {
+} .pass-code__error_1ysty {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;

package/pass-code/modern/index.js

@@ -8,4 +8,4 @@ import './components/InputProgress/Component.js';
 import 'react-transition-group';
 import './components/KeyPad/Component.js';
 import '@alfalab/icons-glyph/BackspaceXxlIcon';
-import '../../button/modern';
+import '../../button/modern/mobile';

package/password-input/component.d.ts

@@ -11,38 +11,9 @@ type PasswordInputProps = InputProps & {
      */
     onPasswordVisibleChange?: (visible: boolean) => void;
 };
-declare const PasswordInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type" | "defaultValue" | "onChange" | "onClick" | "onMouseDown" | "value" | "enterKeyHint"> & {
-    value?: string | undefined;
-    defaultValue?: string | undefined;
-    block?: boolean | undefined;
-    clear?: boolean | undefined;
-    size?: "s" | "m" | "l" | "xl" | undefined;
-    colors?: "default" | "inverted" | undefined;
-    error?: React.ReactNode;
-    success?: boolean | undefined;
-    hint?: React.ReactNode;
-    label?: React.ReactNode;
-    labelView?: "inner" | "outer" | undefined;
-    type?: "number" | "text" | "tel" | "email" | "password" | "card" | "money" | undefined;
-    wrapperRef?: React.Ref<HTMLDivElement> | undefined;
-    leftAddons?: React.ReactNode;
-    rightAddons?: React.ReactNode;
-    bottomAddons?: React.ReactNode;
-    className?: string | undefined;
-    fieldClassName?: string | undefined;
-    inputClassName?: string | undefined;
-    labelClassName?: string | undefined;
-    addonsClassName?: string | undefined;
-    focusedClassName?: string | undefined;
-    filledClassName?: string | undefined;
-    onChange?: ((event: React.ChangeEvent<HTMLInputElement>, payload: {
-        value: string;
-    }) => void) | undefined;
-    onClear?: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void) | undefined;
-    onClick?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-    onMouseDown?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-    onMouseUp?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-    dataTestId?: string | undefined;
+declare const PasswordInput: React.ForwardRefExoticComponent<Omit<import("packages/input/src/components/base-input").BaseInputProps, "FormControlComponent" | "colorStyles"> & {
+    breakpoint?: number | undefined;
+    defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
 } & {
     /**
      * Управление видимостью пароля (controlled)

package/password-input/component.js

@@ -13,7 +13,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"eye":"password-input__eye_mwt1p","xl":"password-input__xl_mwt1p","input":"password-input__input_mwt1p"};
+var styles = {"eye":"password-input__eye_sz3fg","xl":"password-input__xl_sz3fg","input":"password-input__input_sz3fg","addons":"password-input__addons_sz3fg"};
 require('./index.css');
 
 var PasswordInput = React.forwardRef(function (_a, ref) {

package/password-input/cssm/component.d.ts

@@ -11,38 +11,9 @@ type PasswordInputProps = InputProps & {
      */
     onPasswordVisibleChange?: (visible: boolean) => void;
 };
-declare const PasswordInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type" | "defaultValue" | "onChange" | "onClick" | "onMouseDown" | "value" | "enterKeyHint"> & {
-    value?: string | undefined;
-    defaultValue?: string | undefined;
-    block?: boolean | undefined;
-    clear?: boolean | undefined;
-    size?: "s" | "m" | "l" | "xl" | undefined;
-    colors?: "default" | "inverted" | undefined;
-    error?: React.ReactNode;
-    success?: boolean | undefined;
-    hint?: React.ReactNode;
-    label?: React.ReactNode;
-    labelView?: "inner" | "outer" | undefined;
-    type?: "number" | "text" | "tel" | "email" | "password" | "card" | "money" | undefined;
-    wrapperRef?: React.Ref<HTMLDivElement> | undefined;
-    leftAddons?: React.ReactNode;
-    rightAddons?: React.ReactNode;
-    bottomAddons?: React.ReactNode;
-    className?: string | undefined;
-    fieldClassName?: string | undefined;
-    inputClassName?: string | undefined;
-    labelClassName?: string | undefined;
-    addonsClassName?: string | undefined;
-    focusedClassName?: string | undefined;
-    filledClassName?: string | undefined;
-    onChange?: ((event: React.ChangeEvent<HTMLInputElement>, payload: {
-        value: string;
-    }) => void) | undefined;
-    onClear?: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void) | undefined;
-    onClick?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-    onMouseDown?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-    onMouseUp?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-    dataTestId?: string | undefined;
+declare const PasswordInput: React.ForwardRefExoticComponent<Omit<import("packages/input/src/components/base-input").BaseInputProps, "FormControlComponent" | "colorStyles"> & {
+    breakpoint?: number | undefined;
+    defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
 } & {
     /**
      * Управление видимостью пароля (controlled)

package/password-input/cssm/index.module.css

@@ -12,12 +12,10 @@
 } :root {
 } :root {
     --gap-2xs: 4px;
-    --gap-s-neg: -12px;
     --gap-m-neg: -16px;
 } :root {
 } :root {
 } .eye:last-child {
-    margin-right: var(--gap-s-neg);
     height: 100%;
 } .xl .eye:last-child {
         margin-right: var(--gap-m-neg);
@@ -25,4 +23,6 @@
         margin-left: var(--gap-2xs);
     } .input::-ms-reveal {
     display: none;
+} .addons {
+    padding-right: 0;
 }

package/password-input/esm/component.d.ts

@@ -11,38 +11,9 @@ type PasswordInputProps = InputProps & {
      */
     onPasswordVisibleChange?: (visible: boolean) => void;
 };
-declare const PasswordInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type" | "defaultValue" | "onChange" | "onClick" | "onMouseDown" | "value" | "enterKeyHint"> & {
-    value?: string | undefined;
-    defaultValue?: string | undefined;
-    block?: boolean | undefined;
-    clear?: boolean | undefined;
-    size?: "s" | "m" | "l" | "xl" | undefined;
-    colors?: "default" | "inverted" | undefined;
-    error?: React.ReactNode;
-    success?: boolean | undefined;
-    hint?: React.ReactNode;
-    label?: React.ReactNode;
-    labelView?: "inner" | "outer" | undefined;
-    type?: "number" | "text" | "tel" | "email" | "password" | "card" | "money" | undefined;
-    wrapperRef?: React.Ref<HTMLDivElement> | undefined;
-    leftAddons?: React.ReactNode;
-    rightAddons?: React.ReactNode;
-    bottomAddons?: React.ReactNode;
-    className?: string | undefined;
-    fieldClassName?: string | undefined;
-    inputClassName?: string | undefined;
-    labelClassName?: string | undefined;
-    addonsClassName?: string | undefined;
-    focusedClassName?: string | undefined;
-    filledClassName?: string | undefined;
-    onChange?: ((event: React.ChangeEvent<HTMLInputElement>, payload: {
-        value: string;
-    }) => void) | undefined;
-    onClear?: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void) | undefined;
-    onClick?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-    onMouseDown?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-    onMouseUp?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-    dataTestId?: string | undefined;
+declare const PasswordInput: React.ForwardRefExoticComponent<Omit<import("packages/input/src/components/base-input").BaseInputProps, "FormControlComponent" | "colorStyles"> & {
+    breakpoint?: number | undefined;
+    defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
 } & {
     /**
      * Управление видимостью пароля (controlled)

package/password-input/esm/component.js

@@ -6,7 +6,7 @@ import { Input } from '../../input/esm';
 import { EyeMIcon } from '@alfalab/icons-glyph/EyeMIcon';
 import { EyeOffMIcon } from '@alfalab/icons-glyph/EyeOffMIcon';
 
-var styles = {"eye":"password-input__eye_mwt1p","xl":"password-input__xl_mwt1p","input":"password-input__input_mwt1p"};
+var styles = {"eye":"password-input__eye_sz3fg","xl":"password-input__xl_sz3fg","input":"password-input__input_sz3fg","addons":"password-input__addons_sz3fg"};
 require('./index.css');
 
 var PasswordInput = forwardRef(function (_a, ref) {

package/password-input/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 1fr77 */
+/* hash: p7a8k */
 :root {
 } /* 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 */
@@ -13,17 +13,17 @@
 } :root {
 } :root {
     --gap-2xs: 4px;
-    --gap-s-neg: -12px;
     --gap-m-neg: -16px;
 } :root {
 } :root {
-} .password-input__eye_mwt1p:last-child {
-    margin-right: var(--gap-s-neg);
+} .password-input__eye_sz3fg:last-child {
     height: 100%;
-} .password-input__xl_mwt1p .password-input__eye_mwt1p:last-child {
+} .password-input__xl_sz3fg .password-input__eye_sz3fg:last-child {
         margin-right: var(--gap-m-neg);
-    } .password-input__xl_mwt1p .password-input__eye_mwt1p {
+    } .password-input__xl_sz3fg .password-input__eye_sz3fg {
         margin-left: var(--gap-2xs);
-    } .password-input__input_mwt1p::-ms-reveal {
+    } .password-input__input_sz3fg::-ms-reveal {
     display: none;
+} .password-input__addons_sz3fg {
+    padding-right: 0;
 }

package/password-input/index.css

@@ -1,4 +1,4 @@
-/* hash: 1fr77 */
+/* hash: p7a8k */
 :root {
 } /* 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 */
@@ -13,17 +13,17 @@
 } :root {
 } :root {
     --gap-2xs: 4px;
-    --gap-s-neg: -12px;
     --gap-m-neg: -16px;
 } :root {
 } :root {
-} .password-input__eye_mwt1p:last-child {
-    margin-right: var(--gap-s-neg);
+} .password-input__eye_sz3fg:last-child {
     height: 100%;
-} .password-input__xl_mwt1p .password-input__eye_mwt1p:last-child {
+} .password-input__xl_sz3fg .password-input__eye_sz3fg:last-child {
         margin-right: var(--gap-m-neg);
-    } .password-input__xl_mwt1p .password-input__eye_mwt1p {
+    } .password-input__xl_sz3fg .password-input__eye_sz3fg {
         margin-left: var(--gap-2xs);
-    } .password-input__input_mwt1p::-ms-reveal {
+    } .password-input__input_sz3fg::-ms-reveal {
     display: none;
+} .password-input__addons_sz3fg {
+    padding-right: 0;
 }

package/password-input/modern/component.d.ts

@@ -11,38 +11,9 @@ type PasswordInputProps = InputProps & {
      */
     onPasswordVisibleChange?: (visible: boolean) => void;
 };
-declare const PasswordInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type" | "defaultValue" | "onChange" | "onClick" | "onMouseDown" | "value" | "enterKeyHint"> & {
-    value?: string | undefined;
-    defaultValue?: string | undefined;
-    block?: boolean | undefined;
-    clear?: boolean | undefined;
-    size?: "s" | "m" | "l" | "xl" | undefined;
-    colors?: "default" | "inverted" | undefined;
-    error?: React.ReactNode;
-    success?: boolean | undefined;
-    hint?: React.ReactNode;
-    label?: React.ReactNode;
-    labelView?: "inner" | "outer" | undefined;
-    type?: "number" | "text" | "tel" | "email" | "password" | "card" | "money" | undefined;
-    wrapperRef?: React.Ref<HTMLDivElement> | undefined;
-    leftAddons?: React.ReactNode;
-    rightAddons?: React.ReactNode;
-    bottomAddons?: React.ReactNode;
-    className?: string | undefined;
-    fieldClassName?: string | undefined;
-    inputClassName?: string | undefined;
-    labelClassName?: string | undefined;
-    addonsClassName?: string | undefined;
-    focusedClassName?: string | undefined;
-    filledClassName?: string | undefined;
-    onChange?: ((event: React.ChangeEvent<HTMLInputElement>, payload: {
-        value: string;
-    }) => void) | undefined;
-    onClear?: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void) | undefined;
-    onClick?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-    onMouseDown?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-    onMouseUp?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-    dataTestId?: string | undefined;
+declare const PasswordInput: React.ForwardRefExoticComponent<Omit<import("packages/input/src/components/base-input").BaseInputProps, "FormControlComponent" | "colorStyles"> & {
+    breakpoint?: number | undefined;
+    defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
 } & {
     /**
      * Управление видимостью пароля (controlled)

package/password-input/modern/component.js

@@ -5,7 +5,7 @@ import { Input } from '../../input/modern';
 import { EyeMIcon } from '@alfalab/icons-glyph/EyeMIcon';
 import { EyeOffMIcon } from '@alfalab/icons-glyph/EyeOffMIcon';
 
-const styles = {"eye":"password-input__eye_mwt1p","xl":"password-input__xl_mwt1p","input":"password-input__input_mwt1p"};
+const styles = {"eye":"password-input__eye_sz3fg","xl":"password-input__xl_sz3fg","input":"password-input__input_sz3fg","addons":"password-input__addons_sz3fg"};
 require('./index.css');
 
 const PasswordInput = forwardRef(({ onPasswordVisibleChange, passwordVisible, disabled, colors, rightAddons, size = 's', className, ...restProps }, ref) => {

package/password-input/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 1fr77 */
+/* hash: p7a8k */
 :root {
 } /* 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 */
@@ -13,17 +13,17 @@
 } :root {
 } :root {
     --gap-2xs: 4px;
-    --gap-s-neg: -12px;
     --gap-m-neg: -16px;
 } :root {
 } :root {
-} .password-input__eye_mwt1p:last-child {
-    margin-right: var(--gap-s-neg);
+} .password-input__eye_sz3fg:last-child {
     height: 100%;
-} .password-input__xl_mwt1p .password-input__eye_mwt1p:last-child {
+} .password-input__xl_sz3fg .password-input__eye_sz3fg:last-child {
         margin-right: var(--gap-m-neg);
-    } .password-input__xl_mwt1p .password-input__eye_mwt1p {
+    } .password-input__xl_sz3fg .password-input__eye_sz3fg {
         margin-left: var(--gap-2xs);
-    } .password-input__input_mwt1p::-ms-reveal {
+    } .password-input__input_sz3fg::-ms-reveal {
     display: none;
+} .password-input__addons_sz3fg {
+    padding-right: 0;
 }

package/pattern-lock/Component.js

@@ -4,7 +4,7 @@ var tslib = require('tslib');
 var React = require('react');
 var reactCanvasPatternLock = require('react-canvas-pattern-lock');
 var cn = require('classnames');
-var coreComponentsButton = require('../button');
+var mobile = require('../button/mobile');
 var coreComponentsGap = require('../gap');
 var coreComponentsShared = require('../shared');
 var consts = require('./consts.js');
@@ -15,7 +15,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"pattern-lock__component_1qp9w","hidden":"pattern-lock__hidden_1qp9w","error":"pattern-lock__error_1qp9w","forgotBtn":"pattern-lock__forgotBtn_1qp9w"};
+var styles = {"component":"pattern-lock__component_1n0zo","hidden":"pattern-lock__hidden_1n0zo","error":"pattern-lock__error_1n0zo","forgotBtn":"pattern-lock__forgotBtn_1n0zo"};
 require('./index.css');
 
 var PatternLock = React.forwardRef(function (_a, ref) {
@@ -57,7 +57,7 @@ var PatternLock = React.forwardRef(function (_a, ref) {
         React__default.default.createElement("div", { className: styles.error }, error),
         React__default.default.createElement(coreComponentsGap.Gap, { size: '3xl' }),
         React__default.default.createElement(reactCanvasPatternLock.ReactCanvasPatternLock, tslib.__assign({}, restProps, params, { ref: ref, rows: 3, cols: 3, justifyNodes: justifyNodes, extraBounds: extraBounds })),
-        showForgotCodeBtn ? (React__default.default.createElement(coreComponentsButton.Button, { view: 'link', className: styles.forgotBtn, onClick: onForgotBtnClick, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'forgot-code-btn') }, forgotCodeBtnText)) : (React__default.default.createElement("div", { className: styles.forgotBtn }))));
+        showForgotCodeBtn ? (React__default.default.createElement(mobile.ButtonMobile, { view: 'link', className: styles.forgotBtn, onClick: onForgotBtnClick, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'forgot-code-btn') }, forgotCodeBtnText)) : (React__default.default.createElement("div", { className: styles.forgotBtn }))));
 });
 
 exports.PatternLock = PatternLock;

package/pattern-lock/cssm/Component.js

@@ -4,7 +4,7 @@ var tslib = require('tslib');
 var React = require('react');
 var reactCanvasPatternLock = require('react-canvas-pattern-lock');
 var cn = require('classnames');
-var coreComponentsButton = require('../../button/cssm');
+var mobile = require('../../button/cssm/mobile');
 var coreComponentsGap = require('../../gap/cssm');
 var coreComponentsShared = require('../../shared/cssm');
 var consts = require('./consts.js');
@@ -56,7 +56,7 @@ var PatternLock = React.forwardRef(function (_a, ref) {
         React__default.default.createElement("div", { className: styles__default.default.error }, error),
         React__default.default.createElement(coreComponentsGap.Gap, { size: '3xl' }),
         React__default.default.createElement(reactCanvasPatternLock.ReactCanvasPatternLock, tslib.__assign({}, restProps, params, { ref: ref, rows: 3, cols: 3, justifyNodes: justifyNodes, extraBounds: extraBounds })),
-        showForgotCodeBtn ? (React__default.default.createElement(coreComponentsButton.Button, { view: 'link', className: styles__default.default.forgotBtn, onClick: onForgotBtnClick, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'forgot-code-btn') }, forgotCodeBtnText)) : (React__default.default.createElement("div", { className: styles__default.default.forgotBtn }))));
+        showForgotCodeBtn ? (React__default.default.createElement(mobile.ButtonMobile, { view: 'link', className: styles__default.default.forgotBtn, onClick: onForgotBtnClick, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'forgot-code-btn') }, forgotCodeBtnText)) : (React__default.default.createElement("div", { className: styles__default.default.forgotBtn }))));
 });
 
 exports.PatternLock = PatternLock;

package/pattern-lock/cssm/index.js

@@ -6,7 +6,7 @@ require('tslib');
 require('react');
 require('react-canvas-pattern-lock');
 require('classnames');
-require('../../button/cssm');
+require('../../button/cssm/mobile');
 require('../../gap/cssm');
 require('../../shared/cssm');
 require('./utils.js');