@cloud-ru/uikit-product-fields-predefined 0.15.3 → 0.16.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.16.0 (2026-01-20)
+
+
+### Features
+
+* **AINFR-4337:** alert for secure password field ([b44c4dc](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/b44c4dc95160f4758070c33380581a1103c530a5))
+
+
+
+
+
 ## 0.15.3 (2025-12-24)
 
 ### Only dependencies have been changed

package/README.md

@@ -106,6 +106,7 @@
 | resizable | `boolean` | - | Может ли ли пользователь изменять размеры поля (если св-во не включено, поле автоматически меняет свой размер) |
 | secure | `boolean \| "password"` | - | Режим ввода sensitive данных (пароля, API ключей, токенов, etc) |
 | onResetContextClick | `() => void` | - | Действие при клике по кнопке сброса контекста |
+| onCancelSecure | `() => void` | - | Действие для отмены секьюрности поля |
 | ref | `LegacyRef<HTMLInputElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} |
 | key | `Key` | - |  |
 ## FieldChat

package/dist/cjs/components/FieldAi/FieldAi.d.ts

@@ -7,6 +7,8 @@ export type FieldAiProps = WithLayoutType<Omit<FieldTextAreaProps, 'placeholder'
     onSubmit(value: string): void;
     /** Действие при клике по кнопке сброса контекста */
     onResetContextClick?(): void;
+    /** Действие для отмены секьюрности поля */
+    onCancelSecure?(): void;
 }>;
 export declare const FieldAi: import("react").ForwardRefExoticComponent<Omit<FieldTextAreaProps, "size" | "label" | "required" | "placeholder" | "spellCheck" | "labelTooltip" | "footer"> & {
     /** Режим ввода sensitive данных (пароля, API ключей, токенов, etc) */
@@ -15,6 +17,8 @@ export declare const FieldAi: import("react").ForwardRefExoticComponent<Omit<Fie
     onSubmit(value: string): void;
     /** Действие при клике по кнопке сброса контекста */
     onResetContextClick?(): void;
+    /** Действие для отмены секьюрности поля */
+    onCancelSecure?(): void;
 } & {
     layoutType: import("@cloud-ru/uikit-product-utils/.").LayoutType;
 } & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/cjs/components/FieldAi/FieldAi.js

@@ -22,17 +22,20 @@ const uikit_product_icons_1 = require("@cloud-ru/uikit-product-icons");
 const uikit_product_locale_1 = require("@cloud-ru/uikit-product-locale");
 const uikit_product_mobile_fields_1 = require("@cloud-ru/uikit-product-mobile-fields");
 const button_1 = require("@snack-uikit/button");
+const figma_tokens_1 = require("@snack-uikit/figma-tokens");
 const tooltip_1 = require("@snack-uikit/tooltip");
+const typography_1 = require("@snack-uikit/typography");
 const FieldSubmitButton_1 = require("../../helperComponents/FieldSubmitButton");
 const TextAreaActionsFooter_1 = require("../../helperComponents/TextAreaActionsFooter");
 const helpers_1 = require("../../helpers");
 const AIDisclaimer_1 = require("../AIDisclaimer/AIDisclaimer");
+const AlertButton_1 = require("./components/AlertButton");
 const MobileFieldAi_1 = require("./components/MobileFieldAi");
 const WithPasswordValidation_1 = require("./components/WithPasswordValidation");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 const utils_1 = require("./utils");
 exports.FieldAi = (0, react_1.forwardRef)((_a, ref) => {
-    var { secure = false, onSubmit: handleSubmitProp, value, onResetContextClick, disabled, className } = _a, props = __rest(_a, ["secure", "onSubmit", "value", "onResetContextClick", "disabled", "className"]);
+    var { secure = false, onSubmit: handleSubmitProp, value, onResetContextClick, onCancelSecure, disabled, className } = _a, props = __rest(_a, ["secure", "onSubmit", "value", "onResetContextClick", "onCancelSecure", "disabled", "className"]);
     const { layoutType, validationState } = props;
     const { t } = (0, uikit_product_locale_1.useLocale)('FieldsPredefined');
     const isTouchDevice = (0, helpers_1.isTouchDevice)(layoutType);
@@ -44,6 +47,7 @@ exports.FieldAi = (0, react_1.forwardRef)((_a, ref) => {
     const passwordValidation = (0, react_1.useMemo)(() => (0, utils_1.getValidationPassword)(value), [value]);
     const isPasswordValid = isPasswordMode ? Object.values(passwordValidation).every(Boolean) : true;
     const showPasswordError = !isPasswordValid && secure && value;
+    const showPasswordAlert = Boolean(onCancelSecure) && secure === 'password';
     (0, react_1.useEffect)(() => () => {
         if (timerRef.current) {
             clearTimeout(timerRef.current);
@@ -84,5 +88,5 @@ exports.FieldAi = (0, react_1.forwardRef)((_a, ref) => {
     if (isTouchDevice && !secure) {
         return ((0, jsx_runtime_1.jsx)(MobileFieldAi_1.MobileFieldAi, Object.assign({}, props, (0, uikit_product_mobile_fields_1.getAdaptiveFieldProps)(props), { onSubmit: handleSubmit, submitEnabled: isValueValid && !disabled, ref: ref, value: value })));
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className), children: [(0, jsx_runtime_1.jsx)(WithPasswordValidation_1.WithPasswordValidation, { showValidation: isPasswordMode, passwordValidation: passwordValidation, layoutType: layoutType, animatedKey: animatedValidationKey, children: (0, jsx_runtime_1.jsx)(uikit_product_mobile_fields_1.AdaptiveFieldTextArea, Object.assign({}, props, { ref: ref, value: value, size: 'm', minRows: secure ? 1 : 2, maxRows: secure ? 1 : 4, placeholder: secure ? t('FieldAi.secret.placeholder') : t('FieldAi.regular.placeholder'), className: (0, classnames_1.default)(styles_module_scss_1.default.textarea, secure && isValueHidden ? styles_module_scss_1.default.secured : undefined), onKeyDown: handleKeyDown, spellCheck: !secure, validationState: showPasswordError ? 'error' : validationState, footer: (0, jsx_runtime_1.jsx)(TextAreaActionsFooter_1.TextAreaActionsFooter, { left: secure && ((0, jsx_runtime_1.jsx)(button_1.ButtonFunction, { size: 'xs', icon: isValueHidden ? (0, jsx_runtime_1.jsx)(uikit_product_icons_1.EyeSVG, {}) : (0, jsx_runtime_1.jsx)(uikit_product_icons_1.EyeClosedSVG, {}), onClick: () => setIsValueHidden(prev => !prev) })), right: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [secure && onResetContextClick && ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { tip: t('FieldAi.resetContext.tooltip'), hoverDelayOpen: 600, children: (0, jsx_runtime_1.jsx)(button_1.ButtonOutline, { size: 'xs', label: t('FieldAi.resetContext.label'), onClick: onResetContextClick, appearance: 'destructive' }) })), (0, jsx_runtime_1.jsx)(FieldSubmitButton_1.FieldSubmitButton, { showTooltip: !isTouchDevice, className: (0, classnames_1.default)(styles_module_scss_1.default.submitButton, isTouchDevice ? styles_module_scss_1.default.mobileSubmitButton : undefined), active: isValueValid && !disabled && isPasswordValid, handleClick: handleSubmit, size: isTouchDevice ? 's' : 'xs' })] }) }) })) }), !isPasswordMode && (0, jsx_runtime_1.jsx)(AIDisclaimer_1.AIDisclaimer, { layoutType: layoutType })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, isPasswordMode && styles_module_scss_1.default.passwordWrapper, className), children: [showPasswordAlert && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.alert, children: [(0, jsx_runtime_1.jsx)(uikit_product_icons_1.PasswordLockSVG, { size: 16, color: figma_tokens_1.themeVars.sys.neutral.textSupport }), (0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyS, { className: styles_module_scss_1.default.alertText, children: t('FieldAi.secret.alert.text') }), (0, jsx_runtime_1.jsx)(AlertButton_1.AlertButton, { label: t('FieldAi.secret.alert.button'), onClick: onCancelSecure })] })), (0, jsx_runtime_1.jsx)(WithPasswordValidation_1.WithPasswordValidation, { showValidation: isPasswordMode, passwordValidation: passwordValidation, layoutType: layoutType, animatedKey: animatedValidationKey, children: (0, jsx_runtime_1.jsx)(uikit_product_mobile_fields_1.AdaptiveFieldTextArea, Object.assign({}, props, { ref: ref, value: value, size: 'm', minRows: secure ? 1 : 2, maxRows: secure ? 1 : 4, placeholder: secure ? t('FieldAi.secret.placeholder') : t('FieldAi.regular.placeholder'), className: (0, classnames_1.default)(styles_module_scss_1.default.textarea, secure && isValueHidden ? styles_module_scss_1.default.secured : undefined), onKeyDown: handleKeyDown, spellCheck: !secure, validationState: showPasswordError ? 'error' : validationState, footer: (0, jsx_runtime_1.jsx)(TextAreaActionsFooter_1.TextAreaActionsFooter, { left: secure && ((0, jsx_runtime_1.jsx)(button_1.ButtonFunction, { size: 'xs', icon: isValueHidden ? (0, jsx_runtime_1.jsx)(uikit_product_icons_1.EyeSVG, {}) : (0, jsx_runtime_1.jsx)(uikit_product_icons_1.EyeClosedSVG, {}), onClick: () => setIsValueHidden(prev => !prev) })), right: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [secure && onResetContextClick && ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { tip: t('FieldAi.resetContext.tooltip'), hoverDelayOpen: 600, children: (0, jsx_runtime_1.jsx)(button_1.ButtonOutline, { size: 'xs', label: t('FieldAi.resetContext.label'), onClick: onResetContextClick, appearance: 'destructive' }) })), (0, jsx_runtime_1.jsx)(FieldSubmitButton_1.FieldSubmitButton, { showTooltip: !isTouchDevice, className: (0, classnames_1.default)(styles_module_scss_1.default.submitButton, isTouchDevice ? styles_module_scss_1.default.mobileSubmitButton : undefined), active: isValueValid && !disabled && isPasswordValid, handleClick: handleSubmit, size: isTouchDevice ? 's' : 'xs' })] }) }) })) }), !isPasswordMode && (0, jsx_runtime_1.jsx)(AIDisclaimer_1.AIDisclaimer, { layoutType: layoutType })] }));
 });

package/dist/cjs/components/FieldAi/components/AlertButton/AlertButton.d.ts

@@ -0,0 +1,5 @@
+export type AlertButtonProps = {
+    label: string;
+    onClick?(): void;
+};
+export declare function AlertButton({ label, onClick }: AlertButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/FieldAi/components/AlertButton/AlertButton.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertButton = AlertButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const typography_1 = require("@snack-uikit/typography");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function AlertButton({ label, onClick }) {
+    return ((0, jsx_runtime_1.jsx)("button", { onClick: onClick, className: styles_module_scss_1.default.button, children: (0, jsx_runtime_1.jsx)(typography_1.Typography.SansLabelM, { className: styles_module_scss_1.default.label, children: label }) }));
+}

package/dist/cjs/components/FieldAi/components/AlertButton/index.d.ts

@@ -0,0 +1 @@
+export * from './AlertButton';

package/dist/cjs/components/FieldAi/components/AlertButton/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./AlertButton"), exports);

package/dist/cjs/components/FieldAi/components/AlertButton/styles.module.css

@@ -0,0 +1,17 @@
+.button{
+  outline:none;
+  border:none;
+  background-color:transparent;
+  cursor:pointer;
+  height:16px;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}
+
+.label{
+  color:var(--sys-blue-text-support, #4877b0);
+}
+.label:hover{
+  color:var(--sys-neutral-text-main, #41424e);
+}

package/dist/cjs/components/FieldAi/styles.module.css

@@ -2,6 +2,33 @@
   display:flex;
   flex-direction:column;
   gap:var(--dimension-050m, 4px);
+  position:relative;
+}
+
+.passwordWrapper{
+  gap:0;
+}
+
+.alert{
+  display:flex;
+  gap:8px;
+  padding:4px 8px;
+  border-radius:8px 8px 0 0;
+  border:1px solid var(--sys-blue-decor-activated, #aac4ea);
+  background-color:var(--sys-blue-decor-default, #d6e2f4);
+  box-sizing:border-box;
+  height:38px;
+  position:absolute;
+  left:0;
+  top:-26px;
+  width:100%;
+  color:var(--sys-neutral-text-main, #41424e);
+}
+
+.alertText{
+  flex:1;
+  min-width:0;
+  color:var(--sys-neutral-text-main, #41424e);
 }
 
 .secured textarea{
@@ -25,10 +52,10 @@
 }
 
 .submitButton:not([data-disabled]){
-  background:radial-gradient(92.53% 92.53% at 65.87% 21.69%, #7CB5F2 15%, #5FD7C2 45%, #26D07C 65%);
+  background:radial-gradient(92.53% 92.53% at 65.87% 21.69%, #7cb5f2 15%, #5fd7c2 45%, #26d07c 65%);
 }
 
 .textarea > :first-child[data-validation=default]:not([data-readonly]):not([data-disable-focus]):focus-within:not([data-disabled]){
   border-color:transparent;
-  background:linear-gradient(var(--sys-neutral-background2-level), var(--sys-neutral-background2-level) 0) padding-box, radial-gradient(92.53% 92.53% at 65.87% 21.69%, #7CB5F2 8%, #78B9EC 17%, #70C6DD 28%, #64D8C7 38%, #5FD7C2 44%, #54D5B3 51%, #40D39C 58%, #26D07C 66%) border-box;
+  background:linear-gradient(var(--sys-neutral-background2-level), var(--sys-neutral-background2-level) 0) padding-box, radial-gradient(92.53% 92.53% at 65.87% 21.69%, #7cb5f2 8%, #78b9ec 17%, #70c6dd 28%, #64d8c7 38%, #5fd7c2 44%, #54d5b3 51%, #40d39c 58%, #26d07c 66%) border-box;
 }

package/dist/cjs/components/FieldPhone/FieldPhone.d.ts

@@ -11,7 +11,7 @@ export type FieldPhoneProps = WithLayoutType<Omit<FieldTextProps, 'prefix' | 'pr
     /** options — объект конфигурации для изменения стандартного списка стран */
     options?: CountrySettings;
 }>;
-export declare const FieldPhone: import("react").ForwardRefExoticComponent<Omit<FieldTextProps, "onKeyDown" | "maxLength" | "placeholder" | "inputMode" | "prefix" | "prefixIcon" | "postfix" | "autocomplete" | "decoratorRef" | "allowMoreThanMaxLength" | "button"> & {
+export declare const FieldPhone: import("react").ForwardRefExoticComponent<Omit<FieldTextProps, "onKeyDown" | "maxLength" | "placeholder" | "button" | "inputMode" | "prefix" | "prefixIcon" | "postfix" | "autocomplete" | "decoratorRef" | "allowMoreThanMaxLength"> & {
     /** Включить скролл для основной части списка стран */
     scrollList?: boolean;
     onChange?(value: string): void;

package/dist/esm/components/FieldAi/FieldAi.d.ts

@@ -7,6 +7,8 @@ export type FieldAiProps = WithLayoutType<Omit<FieldTextAreaProps, 'placeholder'
     onSubmit(value: string): void;
     /** Действие при клике по кнопке сброса контекста */
     onResetContextClick?(): void;
+    /** Действие для отмены секьюрности поля */
+    onCancelSecure?(): void;
 }>;
 export declare const FieldAi: import("react").ForwardRefExoticComponent<Omit<FieldTextAreaProps, "size" | "label" | "required" | "placeholder" | "spellCheck" | "labelTooltip" | "footer"> & {
     /** Режим ввода sensitive данных (пароля, API ключей, токенов, etc) */
@@ -15,6 +17,8 @@ export declare const FieldAi: import("react").ForwardRefExoticComponent<Omit<Fie
     onSubmit(value: string): void;
     /** Действие при клике по кнопке сброса контекста */
     onResetContextClick?(): void;
+    /** Действие для отмены секьюрности поля */
+    onCancelSecure?(): void;
 } & {
     layoutType: import("@cloud-ru/uikit-product-utils/.").LayoutType;
 } & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/esm/components/FieldAi/FieldAi.js

@@ -9,24 +9,27 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import cn from 'classnames';
 import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
-import { EyeClosedSVG, EyeSVG } from '@cloud-ru/uikit-product-icons';
+import { EyeClosedSVG, EyeSVG, PasswordLockSVG } from '@cloud-ru/uikit-product-icons';
 import { useLocale } from '@cloud-ru/uikit-product-locale';
 import { AdaptiveFieldTextArea, getAdaptiveFieldProps, } from '@cloud-ru/uikit-product-mobile-fields';
 import { ButtonFunction, ButtonOutline } from '@snack-uikit/button';
+import { themeVars } from '@snack-uikit/figma-tokens';
 import { Tooltip } from '@snack-uikit/tooltip';
+import { Typography } from '@snack-uikit/typography';
 import { FieldSubmitButton } from '../../helperComponents/FieldSubmitButton';
 import { TextAreaActionsFooter } from '../../helperComponents/TextAreaActionsFooter';
 import { isTouchDevice as isTouchDeviceHelper } from '../../helpers';
 import { AIDisclaimer } from '../AIDisclaimer/AIDisclaimer';
+import { AlertButton } from './components/AlertButton';
 import { MobileFieldAi } from './components/MobileFieldAi';
 import { WithPasswordValidation } from './components/WithPasswordValidation';
 import styles from './styles.module.css';
 import { getValidationPassword } from './utils';
 export const FieldAi = forwardRef((_a, ref) => {
-    var { secure = false, onSubmit: handleSubmitProp, value, onResetContextClick, disabled, className } = _a, props = __rest(_a, ["secure", "onSubmit", "value", "onResetContextClick", "disabled", "className"]);
+    var { secure = false, onSubmit: handleSubmitProp, value, onResetContextClick, onCancelSecure, disabled, className } = _a, props = __rest(_a, ["secure", "onSubmit", "value", "onResetContextClick", "onCancelSecure", "disabled", "className"]);
     const { layoutType, validationState } = props;
     const { t } = useLocale('FieldsPredefined');
     const isTouchDevice = isTouchDeviceHelper(layoutType);
@@ -38,6 +41,7 @@ export const FieldAi = forwardRef((_a, ref) => {
     const passwordValidation = useMemo(() => getValidationPassword(value), [value]);
     const isPasswordValid = isPasswordMode ? Object.values(passwordValidation).every(Boolean) : true;
     const showPasswordError = !isPasswordValid && secure && value;
+    const showPasswordAlert = Boolean(onCancelSecure) && secure === 'password';
     useEffect(() => () => {
         if (timerRef.current) {
             clearTimeout(timerRef.current);
@@ -78,5 +82,5 @@ export const FieldAi = forwardRef((_a, ref) => {
     if (isTouchDevice && !secure) {
         return (_jsx(MobileFieldAi, Object.assign({}, props, getAdaptiveFieldProps(props), { onSubmit: handleSubmit, submitEnabled: isValueValid && !disabled, ref: ref, value: value })));
     }
-    return (_jsxs("div", { className: cn(styles.wrapper, className), children: [_jsx(WithPasswordValidation, { showValidation: isPasswordMode, passwordValidation: passwordValidation, layoutType: layoutType, animatedKey: animatedValidationKey, children: _jsx(AdaptiveFieldTextArea, Object.assign({}, props, { ref: ref, value: value, size: 'm', minRows: secure ? 1 : 2, maxRows: secure ? 1 : 4, placeholder: secure ? t('FieldAi.secret.placeholder') : t('FieldAi.regular.placeholder'), className: cn(styles.textarea, secure && isValueHidden ? styles.secured : undefined), onKeyDown: handleKeyDown, spellCheck: !secure, validationState: showPasswordError ? 'error' : validationState, footer: _jsx(TextAreaActionsFooter, { left: secure && (_jsx(ButtonFunction, { size: 'xs', icon: isValueHidden ? _jsx(EyeSVG, {}) : _jsx(EyeClosedSVG, {}), onClick: () => setIsValueHidden(prev => !prev) })), right: _jsxs(_Fragment, { children: [secure && onResetContextClick && (_jsx(Tooltip, { tip: t('FieldAi.resetContext.tooltip'), hoverDelayOpen: 600, children: _jsx(ButtonOutline, { size: 'xs', label: t('FieldAi.resetContext.label'), onClick: onResetContextClick, appearance: 'destructive' }) })), _jsx(FieldSubmitButton, { showTooltip: !isTouchDevice, className: cn(styles.submitButton, isTouchDevice ? styles.mobileSubmitButton : undefined), active: isValueValid && !disabled && isPasswordValid, handleClick: handleSubmit, size: isTouchDevice ? 's' : 'xs' })] }) }) })) }), !isPasswordMode && _jsx(AIDisclaimer, { layoutType: layoutType })] }));
+    return (_jsxs("div", { className: cn(styles.wrapper, isPasswordMode && styles.passwordWrapper, className), children: [showPasswordAlert && (_jsxs("div", { className: styles.alert, children: [_jsx(PasswordLockSVG, { size: 16, color: themeVars.sys.neutral.textSupport }), _jsx(Typography.SansBodyS, { className: styles.alertText, children: t('FieldAi.secret.alert.text') }), _jsx(AlertButton, { label: t('FieldAi.secret.alert.button'), onClick: onCancelSecure })] })), _jsx(WithPasswordValidation, { showValidation: isPasswordMode, passwordValidation: passwordValidation, layoutType: layoutType, animatedKey: animatedValidationKey, children: _jsx(AdaptiveFieldTextArea, Object.assign({}, props, { ref: ref, value: value, size: 'm', minRows: secure ? 1 : 2, maxRows: secure ? 1 : 4, placeholder: secure ? t('FieldAi.secret.placeholder') : t('FieldAi.regular.placeholder'), className: cn(styles.textarea, secure && isValueHidden ? styles.secured : undefined), onKeyDown: handleKeyDown, spellCheck: !secure, validationState: showPasswordError ? 'error' : validationState, footer: _jsx(TextAreaActionsFooter, { left: secure && (_jsx(ButtonFunction, { size: 'xs', icon: isValueHidden ? _jsx(EyeSVG, {}) : _jsx(EyeClosedSVG, {}), onClick: () => setIsValueHidden(prev => !prev) })), right: _jsxs(_Fragment, { children: [secure && onResetContextClick && (_jsx(Tooltip, { tip: t('FieldAi.resetContext.tooltip'), hoverDelayOpen: 600, children: _jsx(ButtonOutline, { size: 'xs', label: t('FieldAi.resetContext.label'), onClick: onResetContextClick, appearance: 'destructive' }) })), _jsx(FieldSubmitButton, { showTooltip: !isTouchDevice, className: cn(styles.submitButton, isTouchDevice ? styles.mobileSubmitButton : undefined), active: isValueValid && !disabled && isPasswordValid, handleClick: handleSubmit, size: isTouchDevice ? 's' : 'xs' })] }) }) })) }), !isPasswordMode && _jsx(AIDisclaimer, { layoutType: layoutType })] }));
 });

package/dist/esm/components/FieldAi/components/AlertButton/AlertButton.d.ts

@@ -0,0 +1,5 @@
+export type AlertButtonProps = {
+    label: string;
+    onClick?(): void;
+};
+export declare function AlertButton({ label, onClick }: AlertButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/FieldAi/components/AlertButton/AlertButton.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Typography } from '@snack-uikit/typography';
+import styles from './styles.module.css';
+export function AlertButton({ label, onClick }) {
+    return (_jsx("button", { onClick: onClick, className: styles.button, children: _jsx(Typography.SansLabelM, { className: styles.label, children: label }) }));
+}

package/dist/esm/components/FieldAi/components/AlertButton/index.d.ts

@@ -0,0 +1 @@
+export * from './AlertButton';

package/dist/esm/components/FieldAi/components/AlertButton/index.js

@@ -0,0 +1 @@
+export * from './AlertButton';

package/dist/esm/components/FieldAi/components/AlertButton/styles.module.css

@@ -0,0 +1,17 @@
+.button{
+  outline:none;
+  border:none;
+  background-color:transparent;
+  cursor:pointer;
+  height:16px;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}
+
+.label{
+  color:var(--sys-blue-text-support, #4877b0);
+}
+.label:hover{
+  color:var(--sys-neutral-text-main, #41424e);
+}

package/dist/esm/components/FieldAi/styles.module.css

@@ -2,6 +2,33 @@
   display:flex;
   flex-direction:column;
   gap:var(--dimension-050m, 4px);
+  position:relative;
+}
+
+.passwordWrapper{
+  gap:0;
+}
+
+.alert{
+  display:flex;
+  gap:8px;
+  padding:4px 8px;
+  border-radius:8px 8px 0 0;
+  border:1px solid var(--sys-blue-decor-activated, #aac4ea);
+  background-color:var(--sys-blue-decor-default, #d6e2f4);
+  box-sizing:border-box;
+  height:38px;
+  position:absolute;
+  left:0;
+  top:-26px;
+  width:100%;
+  color:var(--sys-neutral-text-main, #41424e);
+}
+
+.alertText{
+  flex:1;
+  min-width:0;
+  color:var(--sys-neutral-text-main, #41424e);
 }
 
 .secured textarea{
@@ -25,10 +52,10 @@
 }
 
 .submitButton:not([data-disabled]){
-  background:radial-gradient(92.53% 92.53% at 65.87% 21.69%, #7CB5F2 15%, #5FD7C2 45%, #26D07C 65%);
+  background:radial-gradient(92.53% 92.53% at 65.87% 21.69%, #7cb5f2 15%, #5fd7c2 45%, #26d07c 65%);
 }
 
 .textarea > :first-child[data-validation=default]:not([data-readonly]):not([data-disable-focus]):focus-within:not([data-disabled]){
   border-color:transparent;
-  background:linear-gradient(var(--sys-neutral-background2-level), var(--sys-neutral-background2-level) 0) padding-box, radial-gradient(92.53% 92.53% at 65.87% 21.69%, #7CB5F2 8%, #78B9EC 17%, #70C6DD 28%, #64D8C7 38%, #5FD7C2 44%, #54D5B3 51%, #40D39C 58%, #26D07C 66%) border-box;
+  background:linear-gradient(var(--sys-neutral-background2-level), var(--sys-neutral-background2-level) 0) padding-box, radial-gradient(92.53% 92.53% at 65.87% 21.69%, #7cb5f2 8%, #78b9ec 17%, #70c6dd 28%, #64d8c7 38%, #5fd7c2 44%, #54d5b3 51%, #40d39c 58%, #26d07c 66%) border-box;
 }

package/dist/esm/components/FieldPhone/FieldPhone.d.ts

@@ -11,7 +11,7 @@ export type FieldPhoneProps = WithLayoutType<Omit<FieldTextProps, 'prefix' | 'pr
     /** options — объект конфигурации для изменения стандартного списка стран */
     options?: CountrySettings;
 }>;
-export declare const FieldPhone: import("react").ForwardRefExoticComponent<Omit<FieldTextProps, "onKeyDown" | "maxLength" | "placeholder" | "inputMode" | "prefix" | "prefixIcon" | "postfix" | "autocomplete" | "decoratorRef" | "allowMoreThanMaxLength" | "button"> & {
+export declare const FieldPhone: import("react").ForwardRefExoticComponent<Omit<FieldTextProps, "onKeyDown" | "maxLength" | "placeholder" | "button" | "inputMode" | "prefix" | "prefixIcon" | "postfix" | "autocomplete" | "decoratorRef" | "allowMoreThanMaxLength"> & {
     /** Включить скролл для основной части списка стран */
     scrollList?: boolean;
     onChange?(value: string): void;