@snack-uikit/fields 0.22.2 → 0.23.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.23.0 (2024-07-02)
+
+
+### Features
+
+* **PDS-153:** add caption, invert hidden button icon behavior, set width=auto for droplist in field-date, up tokens ([606716c](https://github.com/cloud-ru-tech/snack-uikit/commit/606716cc2b877d8a452a89dc23d3e38265ff5848))
+
+
+
+
+
 ## 0.22.2 (2024-06-27)
 
 ### Only dependencies have been changed

package/README.md

@@ -195,6 +195,7 @@ FieldStepper в основном предназначен для работы с
 | readonly | `boolean` | - | Является ли поле доступным только на чтение Доступно ли поле только на чтение |
 | error | `string` | - |  |
 | label | `string` | - | Лейбл |
+| caption | `string` | - | Подпись справа от лейбла |
 | labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
 | labelFor | `string` | - | Аттрибут for |
 | required | `boolean` | - | Является ли поле обязательным |
@@ -225,6 +226,7 @@ FieldStepper в основном предназначен для работы с
 | error | `string` | - |  |
 | className | `string` | - | CSS-класс |
 | label | `string` | - | Лейбл |
+| caption | `string` | - | Подпись справа от лейбла |
 | labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
 | required | `boolean` | - | Является ли поле обязательным |
 | size | enum Size: `"s"`, `"m"`, `"l"` | SIZE.S | Размер |
@@ -257,6 +259,7 @@ FieldStepper в основном предназначен для работы с
 | error | `string` | - |  |
 | className | `string` | - | CSS-класс |
 | label | `string` | - | Лейбл |
+| caption | `string` | - | Подпись справа от лейбла |
 | labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
 | required | `boolean` | - | Является ли поле обязательным |
 | size | enum Size: `"s"`, `"m"`, `"l"` | SIZE.S | Размер |
@@ -289,6 +292,7 @@ FieldStepper в основном предназначен для работы с
 | error | `string` | - |  |
 | className | `string` | - | CSS-класс |
 | label | `string` | - | Лейбл |
+| caption | `string` | - | Подпись справа от лейбла |
 | labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
 | required | `boolean` | - | Является ли поле обязательным |
 | size | enum Size: `"s"`, `"m"`, `"l"` | SIZE.S | Размер |
@@ -323,6 +327,7 @@ FieldStepper в основном предназначен для работы с
 | error | `string` | - |  |
 | className | `string` | - | CSS-класс |
 | label | `string` | - | Лейбл |
+| caption | `string` | - | Подпись справа от лейбла |
 | labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
 | required | `boolean` | - | Является ли поле обязательным |
 | size | enum Size: `"s"`, `"m"`, `"l"` | SIZE.S | Размер |
@@ -348,6 +353,7 @@ FieldStepper в основном предназначен для работы с
 | error | `string` | - |  |
 | className | `string` | - | CSS-класс |
 | label | `string` | - | Лейбл |
+| caption | `string` | - | Подпись справа от лейбла |
 | labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
 | required | `boolean` | - | Является ли поле обязательным |
 | size | enum Size: `"s"`, `"m"`, `"l"` | - | Размер |
@@ -401,6 +407,7 @@ FieldStepper в основном предназначен для работы с
 | error | `string` | - |  |
 | className | `string` | - | CSS-класс |
 | label | `string` | - | Лейбл |
+| caption | `string` | - | Подпись справа от лейбла |
 | labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
 | required | `boolean` | - | Является ли поле обязательным |
 | size | enum Size: `"s"`, `"m"`, `"l"` | SIZE.S | Размер |
@@ -433,6 +440,7 @@ FieldStepper в основном предназначен для работы с
 | marks | `Record<string \| number, ReactNode \| MarkObj>` | - |  |
 | className | `string` | - | CSS-класс |
 | label | `string` | - | Лейбл |
+| caption | `string` | - | Подпись справа от лейбла |
 | labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
 | required | `boolean` | - | Является ли поле обязательным |
 | size | enum Size: `"s"`, `"m"`, `"l"` | SIZE.S | Размер |

package/dist/components/FieldDate/FieldDate.d.ts

@@ -4,7 +4,7 @@ import { InputPrivateProps } from '@snack-uikit/input-private';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { FieldDecoratorProps } from '../FieldDecorator';
 type InputProps = Pick<InputPrivateProps, 'id' | 'name' | 'value' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur'>;
-type WrapperProps = Pick<FieldDecoratorProps, 'className' | 'label' | 'labelTooltip' | 'required' | 'hint' | 'showHintIcon' | 'size' | 'validationState' | 'labelTooltipPlacement' | 'error'>;
+type WrapperProps = Pick<FieldDecoratorProps, 'className' | 'label' | 'labelTooltip' | 'required' | 'caption' | 'hint' | 'showHintIcon' | 'size' | 'validationState' | 'labelTooltipPlacement' | 'error'>;
 type FieldDateOwnProps = {
     /** Открыт date-picker */
     open?: boolean;

package/dist/components/FieldDate/FieldDate.js

@@ -35,7 +35,7 @@ const CALENDAR_SIZE_MAP = {
     [SIZE.L]: 'm',
 };
 export const FieldDate = forwardRef((_a, ref) => {
-    var { id, name, value: valueProp, disabled = false, readonly = false, showCopyButton: showCopyButtonProp = true, showClearButton: showClearButtonProp = true, open, onOpenChange, onChange, onFocus, onBlur: onBlurProp, className, label, labelTooltip, labelTooltipPlacement, required = false, hint, showHintIcon, size = SIZE.S, validationState = VALIDATION_STATE.Default, locale = DEFAULT_LOCALE, buildCellProps, error } = _a, rest = __rest(_a, ["id", "name", "value", "disabled", "readonly", "showCopyButton", "showClearButton", "open", "onOpenChange", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "hint", "showHintIcon", "size", "validationState", "locale", "buildCellProps", "error"]);
+    var { id, name, value: valueProp, disabled = false, readonly = false, showCopyButton: showCopyButtonProp = true, showClearButton: showClearButtonProp = true, open, onOpenChange, onChange, onFocus, onBlur: onBlurProp, className, label, labelTooltip, labelTooltipPlacement, required = false, caption, hint, showHintIcon, size = SIZE.S, validationState = VALIDATION_STATE.Default, locale = DEFAULT_LOCALE, buildCellProps, error } = _a, rest = __rest(_a, ["id", "name", "value", "disabled", "readonly", "showCopyButton", "showClearButton", "open", "onOpenChange", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "locale", "buildCellProps", "error"]);
     const [isOpen, setIsOpen] = useUncontrolledProp(open, false, onOpenChange);
     const [pickerAutofocus, setPickerAutofocus] = useState(false);
     const localRef = useRef(null);
@@ -135,7 +135,7 @@ export const FieldDate = forwardRef((_a, ref) => {
             e.stopPropagation();
         }
     }, [dateInputClickHandler, isOpen]);
-    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, error: error, validationState: fieldValidationState }, extractSupportProps(rest), { children: _jsx(Dropdown, Object.assign({ trigger: 'click', triggerClassName: styles.triggerClassName, widthStrategy: 'gte' }, (readonly || disabled
+    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, caption: caption, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, error: error, validationState: fieldValidationState }, extractSupportProps(rest), { children: _jsx(Dropdown, Object.assign({ trigger: 'click', triggerClassName: styles.triggerClassName, widthStrategy: 'auto' }, (readonly || disabled
             ? { open: false }
             : {
                 open: showDropList,

package/dist/components/FieldDecorator/FieldDecorator.d.ts

@@ -12,4 +12,4 @@ export type FieldDecoratorProps = WithSupportProps<{
     readonly?: boolean;
     error?: string;
 } & HeaderProps & FooterProps>;
-export declare function FieldDecorator({ children, className, label, labelTooltip, required, labelFor, length, hint, disabled, readonly, showHintIcon, labelTooltipPlacement, size, error, validationState, ...rest }: FieldDecoratorProps): import("react/jsx-runtime").JSX.Element;
+export declare function FieldDecorator({ children, className, label, labelTooltip, required, labelFor, caption, length, hint, disabled, readonly, showHintIcon, labelTooltipPlacement, size, error, validationState, ...rest }: FieldDecoratorProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/FieldDecorator/FieldDecorator.js

@@ -19,8 +19,8 @@ import { Footer } from './Footer';
 import { Header } from './Header';
 import styles from './styles.module.css';
 export function FieldDecorator(_a) {
-    var { children, className, label, labelTooltip, required, labelFor, length, hint, disabled, readonly, showHintIcon, labelTooltipPlacement, size = SIZE.S, error, validationState = VALIDATION_STATE.Default } = _a, rest = __rest(_a, ["children", "className", "label", "labelTooltip", "required", "labelFor", "length", "hint", "disabled", "readonly", "showHintIcon", "labelTooltipPlacement", "size", "error", "validationState"]);
+    var { children, className, label, labelTooltip, required, labelFor, caption, length, hint, disabled, readonly, showHintIcon, labelTooltipPlacement, size = SIZE.S, error, validationState = VALIDATION_STATE.Default } = _a, rest = __rest(_a, ["children", "className", "label", "labelTooltip", "required", "labelFor", "caption", "length", "hint", "disabled", "readonly", "showHintIcon", "labelTooltipPlacement", "size", "error", "validationState"]);
     const isFieldActive = !disabled && !readonly;
     const fieldValidationState = getValidationState({ validationState, error });
-    return (_jsxs("div", Object.assign({ className: cn(styles.decorator, className) }, extractSupportProps(rest), { "data-size": size, children: [label && (_jsx(Header, { labelTooltipPlacement: labelTooltipPlacement, required: required, label: label, labelTooltip: labelTooltip, labelFor: labelFor, size: size })), children, _jsx(Footer, { length: isFieldActive ? length : undefined, hint: error || hint, showHintIcon: showHintIcon, size: size, validationState: isFieldActive ? fieldValidationState : VALIDATION_STATE.Default })] })));
+    return (_jsxs("div", Object.assign({ className: cn(styles.decorator, className) }, extractSupportProps(rest), { "data-size": size, children: [label && (_jsx(Header, { labelTooltipPlacement: labelTooltipPlacement, required: required, label: label, labelTooltip: labelTooltip, labelFor: labelFor, caption: caption, size: size })), children, _jsx(Footer, { length: isFieldActive ? length : undefined, hint: error || hint, showHintIcon: showHintIcon, size: size, validationState: isFieldActive ? fieldValidationState : VALIDATION_STATE.Default })] })));
 }

package/dist/components/FieldDecorator/Header.d.ts

@@ -4,6 +4,8 @@ import { TooltipProps } from '@snack-uikit/tooltip';
 export type HeaderProps = {
     /** Лейбл */
     label?: string;
+    /** Подпись справа от лейбла */
+    caption?: string;
     /** Всплывающая подсказка лейбла */
     labelTooltip?: ReactNode;
     /** Аттрибут for */
@@ -18,4 +20,4 @@ export type HeaderProps = {
      */
     labelTooltipPlacement?: TooltipProps['placement'];
 };
-export declare function Header({ label, labelTooltip, labelFor, size, required, labelTooltipPlacement, }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function Header({ label, labelTooltip, caption, labelFor, size, required, labelTooltipPlacement, }: HeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/FieldDecorator/Header.js

@@ -3,6 +3,6 @@ import { QuestionSVG } from '@snack-uikit/icons';
 import { Tooltip } from '@snack-uikit/tooltip';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import styles from './styles.module.css';
-export function Header({ label = '', labelTooltip, labelFor, size, required = false, labelTooltipPlacement = 'top', }) {
-    return (_jsx("span", { className: styles.header, "data-size": size, children: label && (_jsxs("span", { className: styles.labelLayout, children: [_jsx("label", { className: styles.label, htmlFor: labelFor, "data-test-id": 'field-decorator__label', children: _jsx(TruncateString, { text: label }) }), required && _jsx("span", { "data-test-id": 'field-decorator__required-sign', children: "*" }), labelTooltip && (_jsx(Tooltip, { tip: labelTooltip, placement: labelTooltipPlacement, "data-test-id": 'field-decorator__label-tooltip', triggerClassName: styles.labelTooltipTrigger, children: _jsx(QuestionSVG, { size: 16, className: styles.icon, "data-test-id": 'field-decorator__label-tooltip-trigger' }) }))] })) }));
+export function Header({ label = '', labelTooltip, caption, labelFor, size, required = false, labelTooltipPlacement = 'top', }) {
+    return (_jsxs("span", { className: styles.header, "data-size": size, children: [label && (_jsxs("span", { className: styles.labelLayout, children: [_jsx("label", { className: styles.label, htmlFor: labelFor, "data-test-id": 'field-decorator__label', children: _jsx(TruncateString, { text: label }) }), required && (_jsx("span", { className: styles.required, "data-test-id": 'field-decorator__required-sign', children: "*" })), labelTooltip && (_jsx(Tooltip, { tip: labelTooltip, placement: labelTooltipPlacement, "data-test-id": 'field-decorator__label-tooltip', triggerClassName: styles.labelTooltipTrigger, children: _jsx(QuestionSVG, { size: 16, className: styles.icon, "data-test-id": 'field-decorator__label-tooltip-trigger' }) }))] })), caption && _jsx("span", { className: styles.caption, children: caption })] }));
 }

package/dist/components/FieldDecorator/styles.module.css

@@ -17,6 +17,7 @@
 
 .header{
   display:flex;
+  gap:var(--dimension-050m, 4px);
   box-sizing:border-box;
   color:var(--sys-neutral-text-support, #656771);
 }
@@ -28,6 +29,16 @@
   letter-spacing:var(--sans-label-m-letter-spacing, -0.1px);
   paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
 }
+.header[data-size=s] .caption{
+  font-family:var(--sans-body-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-s-font-weight, Regular);
+  line-height:var(--sans-body-s-line-height, 16px);
+  font-size:var(--sans-body-s-font-size, 12px);
+  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
+  margin-left:auto;
+  color:var(--sys-neutral-text-light, #868892);
+}
 .header[data-size=m]{
   font-family:var(--sans-label-l-font-family, SB Sans Interface);
   font-weight:var(--sans-label-l-font-weight, Semibold);
@@ -36,6 +47,16 @@
   letter-spacing:var(--sans-label-l-letter-spacing, -0.1px);
   paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
 }
+.header[data-size=m] .caption{
+  font-family:var(--sans-body-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-m-font-weight, Regular);
+  line-height:var(--sans-body-m-line-height, 20px);
+  font-size:var(--sans-body-m-font-size, 14px);
+  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
+  margin-left:auto;
+  color:var(--sys-neutral-text-light, #868892);
+}
 .header[data-size=l]{
   font-family:var(--sans-label-l-font-family, SB Sans Interface);
   font-weight:var(--sans-label-l-font-weight, Semibold);
@@ -44,19 +65,35 @@
   letter-spacing:var(--sans-label-l-letter-spacing, -0.1px);
   paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
 }
+.header[data-size=l] .caption{
+  font-family:var(--sans-body-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-m-font-weight, Regular);
+  line-height:var(--sans-body-m-line-height, 20px);
+  font-size:var(--sans-body-m-font-size, 14px);
+  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
+  margin-left:auto;
+  color:var(--sys-neutral-text-light, #868892);
+}
 
 .labelLayout{
   gap:var(--space-fields-label-gap, 2px);
   display:inline-flex;
   align-items:center;
+  color:var(--sys-neutral-text-light, #868892);
 }
 
 .label{
   display:grid;
+  color:var(--sys-neutral-text-support, #656771);
+}
+
+.required{
+  color:var(--sys-neutral-text-support, #656771);
 }
 
 .footer{
-  gap:var(--space-fields-hint-container-gap, 4px);
+  gap:var(--space-fields-hint-container-gap, 16px);
   display:flex;
   justify-content:space-between;
   box-sizing:border-box;
@@ -143,7 +180,7 @@
   box-sizing:content-box;
 }
 .hintIcon[data-validation=default]{
-  color:var(--sys-neutral-text-light, #868892);
+  color:var(--sys-neutral-accent-default, #6f717c);
 }
 .hintIcon[data-validation=error]{
   color:var(--sys-red-accent-default, #cd3c3c);

package/dist/components/FieldDecorator/utils.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { FieldDecoratorProps } from './FieldDecorator';
-export declare function extractFieldDecoratorProps<T extends Partial<FieldDecoratorProps>>({ error, required, readonly, label, labelTooltip, labelTooltipPlacement, labelFor, hint, disabled, showHintIcon, size, validationState, className, }: T): {
+export declare function extractFieldDecoratorProps<T extends Partial<FieldDecoratorProps>>({ error, required, readonly, label, labelTooltip, labelTooltipPlacement, labelFor, caption, hint, disabled, showHintIcon, size, validationState, className, }: T): {
     error: string | undefined;
     required: boolean | undefined;
     readonly: boolean | undefined;
@@ -8,6 +8,7 @@ export declare function extractFieldDecoratorProps<T extends Partial<FieldDecora
     labelTooltip: import("react").ReactNode;
     labelTooltipPlacement: import("@snack-uikit/popover-private/dist/types").Placement | undefined;
     labelFor: string | undefined;
+    caption: string | undefined;
     hint: string | undefined;
     disabled: boolean | undefined;
     showHintIcon: boolean | undefined;

package/dist/components/FieldDecorator/utils.js

@@ -1,4 +1,4 @@
-export function extractFieldDecoratorProps({ error, required, readonly, label, labelTooltip, labelTooltipPlacement, labelFor, hint, disabled, showHintIcon, size, validationState, className, }) {
+export function extractFieldDecoratorProps({ error, required, readonly, label, labelTooltip, labelTooltipPlacement, labelFor, caption, hint, disabled, showHintIcon, size, validationState, className, }) {
     return {
         error,
         required,
@@ -7,6 +7,7 @@ export function extractFieldDecoratorProps({ error, required, readonly, label, l
         labelTooltip,
         labelTooltipPlacement,
         labelFor,
+        caption,
         hint,
         disabled,
         showHintIcon,

package/dist/components/FieldSecure/FieldSecure.d.ts

@@ -3,7 +3,7 @@ import { InputPrivateProps } from '@snack-uikit/input-private';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { FieldDecoratorProps } from '../FieldDecorator';
 type InputProps = Pick<Partial<InputPrivateProps>, 'value' | 'onChange'> & Pick<InputPrivateProps, 'id' | 'name' | 'placeholder' | 'maxLength' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur'>;
-type WrapperProps = Pick<FieldDecoratorProps, 'className' | 'label' | 'labelTooltip' | 'required' | 'hint' | 'size' | 'validationState' | 'showHintIcon' | 'labelTooltipPlacement' | 'error'>;
+type WrapperProps = Pick<FieldDecoratorProps, 'className' | 'label' | 'labelTooltip' | 'required' | 'caption' | 'hint' | 'size' | 'validationState' | 'showHintIcon' | 'labelTooltipPlacement' | 'error'>;
 type FieldSecureOwnProps = {
     /** Замаскированно ли значение поля */
     hidden?: boolean;

package/dist/components/FieldSecure/FieldSecure.js

@@ -30,7 +30,7 @@ import { useCopyButton, useHideButton, useValueControl } from '../../hooks';
 import { getValidationState } from '../../utils/getValidationState';
 import { FieldDecorator } from '../FieldDecorator';
 export const FieldSecure = forwardRef((_a, ref) => {
-    var { id, name, value: valueProp, placeholder, maxLength, disabled = false, readonly = false, showCopyButton: showCopyButtonProp = true, allowMoreThanMaxLength = false, hidden: hiddenProp, onHiddenChange, showHintIcon, onChange: onChangeProp, onFocus, onBlur, className, label, labelTooltip, labelTooltipPlacement, required = false, hint, size = SIZE.S, validationState = VALIDATION_STATE.Default, prefixIcon, error, asyncValueGetter } = _a, rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "disabled", "readonly", "showCopyButton", "allowMoreThanMaxLength", "hidden", "onHiddenChange", "showHintIcon", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "hint", "size", "validationState", "prefixIcon", "error", "asyncValueGetter"]);
+    var { id, name, value: valueProp, placeholder, maxLength, disabled = false, readonly = false, showCopyButton: showCopyButtonProp = true, allowMoreThanMaxLength = false, hidden: hiddenProp, onHiddenChange, showHintIcon, onChange: onChangeProp, onFocus, onBlur, className, label, labelTooltip, labelTooltipPlacement, required = false, caption, hint, size = SIZE.S, validationState = VALIDATION_STATE.Default, prefixIcon, error, asyncValueGetter } = _a, rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "disabled", "readonly", "showCopyButton", "allowMoreThanMaxLength", "hidden", "onHiddenChange", "showHintIcon", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "size", "validationState", "prefixIcon", "error", "asyncValueGetter"]);
     const localRef = useRef(null);
     const copyButtonRef = useRef(null);
     const hideButtonRef = useRef(null);
@@ -110,5 +110,5 @@ export const FieldSecure = forwardRef((_a, ref) => {
         readonly,
         submitKeys: ['Enter', 'Space', 'Tab'],
     });
-    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, length: maxLength ? { max: maxLength, current: value.length } : undefined, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, error: error, validationState: fieldValidationState }, extractSupportProps(rest), { children: _jsx(FieldContainerPrivate, { size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, inputRef: localRef, prefix: prefixIcon, postfix: buttons, children: _jsx(WithSkeleton, { skeleton: _jsx(Skeleton, { width: '100%', borderRadius: 2 }), loading: isLoading, children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), "data-size": size, value: value, onChange: onChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onInputKeyDown, tabIndex: inputTabIndex, placeholder: placeholder, disabled: disabled, readonly: readonly, type: hidden ? 'password' : 'text', maxLength: allowMoreThanMaxLength ? undefined : maxLength || undefined, id: id, name: name, "data-test-id": 'field-secure__input' }) }) }) })));
+    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, caption: caption, length: maxLength ? { max: maxLength, current: value.length } : undefined, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, error: error, validationState: fieldValidationState }, extractSupportProps(rest), { children: _jsx(FieldContainerPrivate, { size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, inputRef: localRef, prefix: prefixIcon, postfix: buttons, children: _jsx(WithSkeleton, { skeleton: _jsx(Skeleton, { width: '100%', borderRadius: 2 }), loading: isLoading, children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), "data-size": size, value: value, onChange: onChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onInputKeyDown, tabIndex: inputTabIndex, placeholder: placeholder, disabled: disabled, readonly: readonly, type: hidden ? 'password' : 'text', maxLength: allowMoreThanMaxLength ? undefined : maxLength || undefined, id: id, name: name, "data-test-id": 'field-secure__input' }) }) }) })));
 });

package/dist/components/FieldSelect/types.d.ts

@@ -20,7 +20,7 @@ export type NestListOptionProps = Pick<NextListItemProps, 'type' | 'onSublistOpe
     options: OptionProps[];
 };
 export type InputProps = Pick<InputPrivateProps, 'id' | 'name' | 'placeholder' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur' | 'onKeyDown'>;
-export type WrapperProps = Pick<FieldDecoratorProps, 'className' | 'label' | 'labelTooltip' | 'required' | 'hint' | 'showHintIcon' | 'size' | 'validationState' | 'labelTooltipPlacement' | 'error'>;
+export type WrapperProps = Pick<FieldDecoratorProps, 'className' | 'label' | 'labelTooltip' | 'required' | 'caption' | 'hint' | 'showHintIcon' | 'size' | 'validationState' | 'labelTooltipPlacement' | 'error'>;
 export type ItemWithId = (BaseItemProps | AccordionItemProps | NextListItemProps) & {
     placeholder?: boolean;
     appearance?: TagProps['appearance'];

package/dist/components/FieldSlider/FieldSlider.d.ts

@@ -5,7 +5,7 @@ import { WithSupportProps } from '@snack-uikit/utils';
 import { FieldDecoratorProps } from '../FieldDecorator';
 import { TextInputFormatter } from './types';
 type SliderProps = Pick<InputPrivateProps, 'id' | 'name' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur'> & Pick<SliderComponentProps, 'range' | 'value' | 'onChange' | 'tipFormatter'> & Required<Pick<SliderComponentProps, 'min' | 'max' | 'step' | 'marks'>>;
-type WrapperProps = Pick<FieldDecoratorProps, 'className' | 'label' | 'labelTooltip' | 'required' | 'hint' | 'showHintIcon' | 'size' | 'labelTooltipPlacement'>;
+type WrapperProps = Pick<FieldDecoratorProps, 'className' | 'label' | 'labelTooltip' | 'required' | 'caption' | 'hint' | 'showHintIcon' | 'size' | 'labelTooltipPlacement'>;
 type FieldSliderOwnProps = {
     /** Иконка-постфикс для поля */
     postfixIcon?: ReactElement;

package/dist/components/FieldSlider/FieldSlider.js

@@ -31,7 +31,7 @@ const getDefaultValue = (range, min, max, value) => {
     return value !== null && value !== void 0 ? value : min;
 };
 export const FieldSlider = forwardRef((_a, ref) => {
-    var { id, name, min, max, step, marks, showScaleBar = true, value: valueProp, range = false, disabled = false, readonly = false, onChange: onChangeProp, onFocus, onBlur, className, label, labelTooltip, labelTooltipPlacement, required, hint, showHintIcon, size = SIZE.S, postfixIcon, textInputFormatter } = _a, rest = __rest(_a, ["id", "name", "min", "max", "step", "marks", "showScaleBar", "value", "range", "disabled", "readonly", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "hint", "showHintIcon", "size", "postfixIcon", "textInputFormatter"]);
+    var { id, name, min, max, step, marks, showScaleBar = true, value: valueProp, range = false, disabled = false, readonly = false, onChange: onChangeProp, onFocus, onBlur, className, label, labelTooltip, labelTooltipPlacement, required, caption, hint, showHintIcon, size = SIZE.S, postfixIcon, textInputFormatter } = _a, rest = __rest(_a, ["id", "name", "min", "max", "step", "marks", "showScaleBar", "value", "range", "disabled", "readonly", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "postfixIcon", "textInputFormatter"]);
     const getMarkValue = useCallback((key) => {
         const mark = marks[key];
         if (isMarkObject(mark)) {
@@ -145,5 +145,5 @@ export const FieldSlider = forwardRef((_a, ref) => {
         // update value only when marks, min or max are changed
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [marks, min, max]);
-    return (_jsxs(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, disabled: disabled, required: required, hint: hint, showHintIcon: showHintIcon, readonly: readonly, size: size }, extractSupportProps(rest), { children: [_jsx(FieldContainerPrivate, { className: styles.fieldContainer, size: size, validationState: VALIDATION_STATE.Default, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, inputRef: localRef, postfix: postfixIcon, children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), "data-size": size, value: textFieldInputValue, onChange: range ? undefined : onTextFieldChange, onFocus: onFocus, onBlur: range ? onBlur : onTextFieldBlur, onKeyDown: handleTextFieldKeyChange, disabled: disabled, readonly: range ? true : readonly, type: 'text', id: id, name: name, "data-test-id": 'field-slider__input' }) }), _jsx("div", { className: styles.sliderWrapper, children: _jsx("div", { className: styles.slider, "data-size": size, children: _jsx(Slider, { range: range, min: min, max: max, step: step, value: value, onChange: onChange, marks: showScaleBar ? marks : undefined, disabled: readonly || disabled, "data-test-id": 'field-slider__slider' }) }) })] })));
+    return (_jsxs(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, disabled: disabled, required: required, caption: caption, hint: hint, showHintIcon: showHintIcon, readonly: readonly, size: size }, extractSupportProps(rest), { children: [_jsx(FieldContainerPrivate, { className: styles.fieldContainer, size: size, validationState: VALIDATION_STATE.Default, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, inputRef: localRef, postfix: postfixIcon, children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), "data-size": size, value: textFieldInputValue, onChange: range ? undefined : onTextFieldChange, onFocus: onFocus, onBlur: range ? onBlur : onTextFieldBlur, onKeyDown: handleTextFieldKeyChange, disabled: disabled, readonly: range ? true : readonly, type: 'text', id: id, name: name, "data-test-id": 'field-slider__input' }) }), _jsx("div", { className: styles.sliderWrapper, children: _jsx("div", { className: styles.slider, "data-size": size, children: _jsx(Slider, { range: range, min: min, max: max, step: step, value: value, onChange: onChange, marks: showScaleBar ? marks : undefined, disabled: readonly || disabled, "data-test-id": 'field-slider__slider' }) }) })] })));
 });

package/dist/components/FieldStepper/FieldStepper.d.ts

@@ -3,7 +3,7 @@ import { InputPrivateProps } from '@snack-uikit/input-private';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { FieldDecoratorProps } from '../FieldDecorator';
 type InputProps = Pick<InputPrivateProps, 'id' | 'name' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur' | 'min' | 'max'>;
-type WrapperProps = Pick<FieldDecoratorProps, 'className' | 'label' | 'labelTooltip' | 'required' | 'hint' | 'showHintIcon' | 'size' | 'validationState' | 'labelTooltipPlacement' | 'error'>;
+type WrapperProps = Pick<FieldDecoratorProps, 'className' | 'label' | 'labelTooltip' | 'required' | 'caption' | 'hint' | 'showHintIcon' | 'size' | 'validationState' | 'labelTooltipPlacement' | 'error'>;
 type FieldStepperOwnProps = {
     /** Значение поля */
     value?: number;

package/dist/components/FieldStepper/FieldStepper.js

@@ -35,7 +35,7 @@ const getDefaultValue = (min, max) => {
     return 0;
 };
 export const FieldStepper = forwardRef((_a, ref) => {
-    var { id, name, value: valueProp, min = Number.NEGATIVE_INFINITY, max = Number.POSITIVE_INFINITY, step = 1, disabled = false, readonly = false, allowMoreThanLimits = true, onChange: onChangeProp, onFocus, onBlur, className, label, labelTooltip, labelTooltipPlacement, required = false, hint, showHintIcon, size = SIZE.S, validationState = VALIDATION_STATE.Default, error } = _a, rest = __rest(_a, ["id", "name", "value", "min", "max", "step", "disabled", "readonly", "allowMoreThanLimits", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "hint", "showHintIcon", "size", "validationState", "error"]);
+    var { id, name, value: valueProp, min = Number.NEGATIVE_INFINITY, max = Number.POSITIVE_INFINITY, step = 1, disabled = false, readonly = false, allowMoreThanLimits = true, onChange: onChangeProp, onFocus, onBlur, className, label, labelTooltip, labelTooltipPlacement, required = false, caption, hint, showHintIcon, size = SIZE.S, validationState = VALIDATION_STATE.Default, error } = _a, rest = __rest(_a, ["id", "name", "value", "min", "max", "step", "disabled", "readonly", "allowMoreThanLimits", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "error"]);
     const { t } = useLocale('Fields');
     const [value = 0, setValue] = useValueControl({
         value: valueProp,
@@ -124,5 +124,5 @@ export const FieldStepper = forwardRef((_a, ref) => {
             (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
     };
-    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, validationState: fieldValidationState, error: error }, extractSupportProps(rest), { children: _jsx(Tooltip, { tip: tooltip, open: allowMoreThanLimits ? false : tooltipOpen, "data-test-id": 'field-stepper__limit-tooltip', children: _jsx(FieldContainerPrivate, { size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, inputRef: inputRef, prefix: _jsx(ButtonFunction, { tabIndex: -1, ref: minusButtonRef, size: 'xs', className: styles.button, icon: _jsx(MinusSVG, {}), onClick: handleMinusButtonClick, onKeyDown: handleMinusButtonKeyDown, disabled: isMinusButtonDisabled, "data-test-id": 'field-stepper__minus-button' }), postfix: _jsx(ButtonFunction, { ref: plusButtonRef, tabIndex: -1, size: 'xs', className: styles.button, icon: _jsx(PlusSVG, {}), onClick: handlePlusButtonClick, onKeyDown: handlePlusButtonKeyDown, disabled: isPlusButtonDisabled, "data-test-id": 'field-stepper__plus-button' }), children: _jsx(InputPrivate, { ref: mergeRefs(ref, inputRef), className: styles.stepper, "data-size": size, value: String(value), tabIndex: 0, onKeyDown: handleInputKeyDown, onChange: handleInputChange, onBlur: handleInputBlur, onFocus: handleInputFocus, disabled: disabled, readonly: readonly, type: 'number', id: id, name: name, min: min, max: max, "data-test-id": 'field-stepper__input' }) }) }) })));
+    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, caption: caption, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, validationState: fieldValidationState, error: error }, extractSupportProps(rest), { children: _jsx(Tooltip, { tip: tooltip, open: allowMoreThanLimits ? false : tooltipOpen, "data-test-id": 'field-stepper__limit-tooltip', children: _jsx(FieldContainerPrivate, { size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, inputRef: inputRef, prefix: _jsx(ButtonFunction, { tabIndex: -1, ref: minusButtonRef, size: 'xs', className: styles.button, icon: _jsx(MinusSVG, {}), onClick: handleMinusButtonClick, onKeyDown: handleMinusButtonKeyDown, disabled: isMinusButtonDisabled, "data-test-id": 'field-stepper__minus-button' }), postfix: _jsx(ButtonFunction, { ref: plusButtonRef, tabIndex: -1, size: 'xs', className: styles.button, icon: _jsx(PlusSVG, {}), onClick: handlePlusButtonClick, onKeyDown: handlePlusButtonKeyDown, disabled: isPlusButtonDisabled, "data-test-id": 'field-stepper__plus-button' }), children: _jsx(InputPrivate, { ref: mergeRefs(ref, inputRef), className: styles.stepper, "data-size": size, value: String(value), tabIndex: 0, onKeyDown: handleInputKeyDown, onChange: handleInputChange, onBlur: handleInputBlur, onFocus: handleInputFocus, disabled: disabled, readonly: readonly, type: 'number', id: id, name: name, min: min, max: max, "data-test-id": 'field-stepper__input' }) }) }) })));
 });

package/dist/components/FieldText/FieldText.d.ts

@@ -3,7 +3,7 @@ import { InputPrivateProps } from '@snack-uikit/input-private';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { FieldDecoratorProps } from '../FieldDecorator';
 type InputProps = Pick<Partial<InputPrivateProps>, 'value' | 'onChange'> & Pick<InputPrivateProps, 'id' | 'name' | 'placeholder' | 'maxLength' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur'>;
-type WrapperProps = Pick<FieldDecoratorProps, 'className' | 'label' | 'labelTooltip' | 'required' | 'hint' | 'showHintIcon' | 'size' | 'validationState' | 'labelTooltipPlacement' | 'error'>;
+type WrapperProps = Pick<FieldDecoratorProps, 'className' | 'label' | 'labelTooltip' | 'required' | 'caption' | 'hint' | 'showHintIcon' | 'size' | 'validationState' | 'labelTooltipPlacement' | 'error'>;
 type FieldTextOwnProps = {
     /** Отображение кнопки Копировать для поля (актуально только для `readonly = true`) */
     showCopyButton?: boolean;

package/dist/components/FieldText/FieldText.js

@@ -20,7 +20,7 @@ import { useCopyButton, useValueControl } from '../../hooks';
 import { getValidationState } from '../../utils/getValidationState';
 import { FieldDecorator } from '../FieldDecorator';
 export const FieldText = forwardRef((_a, ref) => {
-    var { id, name, value: valueProp, placeholder, maxLength, disabled = false, readonly = false, showCopyButton: showCopyButtonProp = true, showClearButton: showClearButtonProp = true, allowMoreThanMaxLength = false, onChange: onChangeProp, onFocus, onBlur, className, label, labelTooltip, labelTooltipPlacement, required = false, hint, showHintIcon, size = SIZE.S, validationState = VALIDATION_STATE.Default, prefixIcon, error } = _a, rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "disabled", "readonly", "showCopyButton", "showClearButton", "allowMoreThanMaxLength", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "hint", "showHintIcon", "size", "validationState", "prefixIcon", "error"]);
+    var { id, name, value: valueProp, placeholder, maxLength, disabled = false, readonly = false, showCopyButton: showCopyButtonProp = true, showClearButton: showClearButtonProp = true, allowMoreThanMaxLength = false, onChange: onChangeProp, onFocus, onBlur, className, label, labelTooltip, labelTooltipPlacement, required = false, caption, hint, showHintIcon, size = SIZE.S, validationState = VALIDATION_STATE.Default, prefixIcon, error } = _a, rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "disabled", "readonly", "showCopyButton", "showClearButton", "allowMoreThanMaxLength", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "prefixIcon", "error"]);
     const [value = '', onChange] = useValueControl({
         value: valueProp,
         defaultValue: '',
@@ -48,5 +48,5 @@ export const FieldText = forwardRef((_a, ref) => {
         readonly,
         submitKeys: ['Enter', 'Space', 'Tab'],
     });
-    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, length: maxLength ? { max: maxLength, current: value.length } : undefined, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, validationState: fieldValidationState, error: error }, extractSupportProps(rest), { children: _jsx(FieldContainerPrivate, { size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, inputRef: localRef, prefix: prefixIcon, postfix: buttons, children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), "data-size": size, value: value, onChange: onChange, onFocus: onFocus, onBlur: onBlur, tabIndex: inputTabIndex, onKeyDown: onInputKeyDown, placeholder: placeholder, disabled: disabled, readonly: readonly, type: 'text', maxLength: allowMoreThanMaxLength ? undefined : maxLength || undefined, id: id, name: name, "data-test-id": 'field-text__input' }) }) })));
+    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, caption: caption, length: maxLength ? { max: maxLength, current: value.length } : undefined, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, validationState: fieldValidationState, error: error }, extractSupportProps(rest), { children: _jsx(FieldContainerPrivate, { size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, inputRef: localRef, prefix: prefixIcon, postfix: buttons, children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), "data-size": size, value: value, onChange: onChange, onFocus: onFocus, onBlur: onBlur, tabIndex: inputTabIndex, onKeyDown: onInputKeyDown, placeholder: placeholder, disabled: disabled, readonly: readonly, type: 'text', maxLength: allowMoreThanMaxLength ? undefined : maxLength || undefined, id: id, name: name, "data-test-id": 'field-text__input' }) }) })));
 });

package/dist/components/FieldTextArea/FieldTextArea.d.ts

@@ -3,7 +3,7 @@ import { WithSupportProps } from '@snack-uikit/utils';
 import { TextAreaProps } from '../../helperComponents';
 import { FieldDecoratorProps } from '../FieldDecorator';
 type InputProps = Pick<Partial<TextAreaProps>, 'value'> & Pick<TextAreaProps, 'id' | 'name' | 'placeholder' | 'maxLength' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur'>;
-type WrapperProps = Pick<FieldDecoratorProps, 'className' | 'label' | 'labelTooltip' | 'required' | 'hint' | 'size' | 'validationState' | 'showHintIcon' | 'labelTooltipPlacement' | 'error'>;
+type WrapperProps = Pick<FieldDecoratorProps, 'className' | 'label' | 'labelTooltip' | 'required' | 'caption' | 'hint' | 'size' | 'validationState' | 'showHintIcon' | 'labelTooltipPlacement' | 'error'>;
 type FieldTextAreaOwnProps = {
     /** Минимальное кол-во строк, до которого размер поля может быть увеличен @default 3*/
     minRows?: number;

package/dist/components/FieldTextArea/FieldTextArea.js

@@ -22,7 +22,7 @@ import { getValidationState } from '../../utils/getValidationState';
 import { FieldDecorator } from '../FieldDecorator';
 import styles from './styles.module.css';
 export const FieldTextArea = forwardRef((_a, ref) => {
-    var { id, name, value: valueProp, placeholder, maxLength, minRows = 3, maxRows = 1000, disabled = false, resizable = false, readonly = false, showCopyButton: showCopyButtonProp = true, showClearButton: showClearButtonProp = true, allowMoreThanMaxLength = true, showHintIcon, onChange: onChangeProp, onFocus, onBlur, className, label, labelTooltip, labelTooltipPlacement, required = false, hint, error, size = SIZE.S, validationState = VALIDATION_STATE.Default } = _a, rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "minRows", "maxRows", "disabled", "resizable", "readonly", "showCopyButton", "showClearButton", "allowMoreThanMaxLength", "showHintIcon", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "hint", "error", "size", "validationState"]);
+    var { id, name, value: valueProp, placeholder, maxLength, minRows = 3, maxRows = 1000, disabled = false, resizable = false, readonly = false, showCopyButton: showCopyButtonProp = true, showClearButton: showClearButtonProp = true, allowMoreThanMaxLength = true, showHintIcon, onChange: onChangeProp, onFocus, onBlur, className, label, labelTooltip, labelTooltipPlacement, required = false, caption, hint, error, size = SIZE.S, validationState = VALIDATION_STATE.Default } = _a, rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "minRows", "maxRows", "disabled", "resizable", "readonly", "showCopyButton", "showClearButton", "allowMoreThanMaxLength", "showHintIcon", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "error", "size", "validationState"]);
     const localRef = useRef(null);
     const clearButtonRef = useRef(null);
     const copyButtonRef = useRef(null);
@@ -50,5 +50,5 @@ export const FieldTextArea = forwardRef((_a, ref) => {
         readonly,
         submitKeys: ['Enter', 'Space', 'Tab'],
     });
-    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, length: maxLength ? { max: maxLength, current: value.length } : undefined, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, error: error, validationState: fieldValidationState }, extractSupportProps(rest), { children: _jsx(FieldContainerPrivate, { className: styles.container, size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, "data-resizable": isResizable || undefined, variant: CONTAINER_VARIANT.MultiLine, style: { '--max-rows': maxRows, '--min-rows': minRows }, inputRef: localRef, postfix: _jsx("span", { className: styles.postfix, children: buttons }), children: _jsx(Scroll, { className: styles.scrollContainer, size: 's', barHideStrategy: 'never', resize: isResizable ? 'vertical' : 'none', "data-test-id": 'field-textarea__scroll-area', children: _jsx(TextArea, { className: styles.textarea, "data-size": size, value: value, onChange: onChange, placeholder: placeholder, disabled: disabled, readonly: readonly, minRows: minRows, id: id, name: name, ref: mergeRefs(ref, localRef), onFocus: onFocus, onBlur: onBlur, onKeyDown: onInputKeyDown, tabIndex: inputTabIndex, maxLength: allowMoreThanMaxLength ? undefined : maxLength || undefined, "data-test-id": 'field-textarea__input' }) }) }) })));
+    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, caption: caption, length: maxLength ? { max: maxLength, current: value.length } : undefined, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, error: error, validationState: fieldValidationState }, extractSupportProps(rest), { children: _jsx(FieldContainerPrivate, { className: styles.container, size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, "data-resizable": isResizable || undefined, variant: CONTAINER_VARIANT.MultiLine, style: { '--max-rows': maxRows, '--min-rows': minRows }, inputRef: localRef, postfix: _jsx("span", { className: styles.postfix, children: buttons }), children: _jsx(Scroll, { className: styles.scrollContainer, size: 's', barHideStrategy: 'never', resize: isResizable ? 'vertical' : 'none', "data-test-id": 'field-textarea__scroll-area', children: _jsx(TextArea, { className: styles.textarea, "data-size": size, value: value, onChange: onChange, placeholder: placeholder, disabled: disabled, readonly: readonly, minRows: minRows, id: id, name: name, ref: mergeRefs(ref, localRef), onFocus: onFocus, onBlur: onBlur, onKeyDown: onInputKeyDown, tabIndex: inputTabIndex, maxLength: allowMoreThanMaxLength ? undefined : maxLength || undefined, "data-test-id": 'field-textarea__input' }) }) }) })));
 });

package/dist/helperComponents/ButtonHideValue/ButtonHideValue.js

@@ -11,5 +11,5 @@ export const ButtonHideValue = forwardRef(({ size, onClick, hidden, disabled, ta
         event.stopPropagation();
         onClick(event);
     };
-    return (_jsx("button", { className: styles.buttonHideValue, "data-size": size, "data-disabled": disabled || undefined, disabled: disabled, onClick: handleClick, "data-test-id": 'button-hide-value', ref: ref, onKeyDown: onKeyDown, type: 'button', tabIndex: disabled ? -1 : tabIndex, children: hidden ? (_jsxs(_Fragment, { children: [size === BUTTON_SIZE.S && _jsx(EyeClosedSVG, { size: 16 }), size === BUTTON_SIZE.M && _jsx(EyeClosedSVG, {})] })) : (_jsxs(_Fragment, { children: [size === BUTTON_SIZE.S && _jsx(EyeSVG, { size: 16 }), size === BUTTON_SIZE.M && _jsx(EyeSVG, {})] })) }));
+    return (_jsx("button", { className: styles.buttonHideValue, "data-size": size, "data-disabled": disabled || undefined, disabled: disabled, onClick: handleClick, "data-test-id": 'button-hide-value', ref: ref, onKeyDown: onKeyDown, type: 'button', tabIndex: disabled ? -1 : tabIndex, children: hidden ? (_jsxs(_Fragment, { children: [size === BUTTON_SIZE.S && _jsx(EyeSVG, { size: 16 }), size === BUTTON_SIZE.M && _jsx(EyeSVG, {})] })) : (_jsxs(_Fragment, { children: [size === BUTTON_SIZE.S && _jsx(EyeClosedSVG, { size: 16 }), size === BUTTON_SIZE.M && _jsx(EyeClosedSVG, {})] })) }));
 });

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Fields",
-  "version": "0.22.2",
+  "version": "0.23.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -59,5 +59,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "0c81fa6b2657f51768401ba7ce5015fe8d293805"
+  "gitHead": "d3b4cf017a5d6d34f1fb21b71b4e438e38c758c3"
 }

package/src/components/FieldDate/FieldDate.tsx

@@ -47,6 +47,7 @@ type WrapperProps = Pick<
   | 'label'
   | 'labelTooltip'
   | 'required'
+  | 'caption'
   | 'hint'
   | 'showHintIcon'
   | 'size'
@@ -101,6 +102,7 @@ export const FieldDate = forwardRef<HTMLInputElement, FieldDateProps>(
       labelTooltip,
       labelTooltipPlacement,
       required = false,
+      caption,
       hint,
       showHintIcon,
       size = SIZE.S,
@@ -259,6 +261,7 @@ export const FieldDate = forwardRef<HTMLInputElement, FieldDateProps>(
         labelTooltipPlacement={labelTooltipPlacement}
         labelFor={id}
         required={required}
+        caption={caption}
         hint={hint}
         disabled={disabled}
         readonly={readonly}
@@ -271,7 +274,7 @@ export const FieldDate = forwardRef<HTMLInputElement, FieldDateProps>(
         <Dropdown
           trigger='click'
           triggerClassName={styles.triggerClassName}
-          widthStrategy='gte'
+          widthStrategy='auto'
           {...(readonly || disabled
             ? { open: false }
             : {

package/src/components/FieldDecorator/FieldDecorator.tsx

@@ -32,6 +32,7 @@ export function FieldDecorator({
   labelTooltip,
   required,
   labelFor,
+  caption,
   length,
   hint,
   disabled,
@@ -55,6 +56,7 @@ export function FieldDecorator({
           label={label}
           labelTooltip={labelTooltip}
           labelFor={labelFor}
+          caption={caption}
           size={size}
         />
       )}

package/src/components/FieldDecorator/Header.tsx

@@ -10,6 +10,8 @@ import styles from './styles.module.scss';
 export type HeaderProps = {
   /** Лейбл */
   label?: string;
+  /** Подпись справа от лейбла */
+  caption?: string;
   /** Всплывающая подсказка лейбла */
   labelTooltip?: ReactNode;
   /** Аттрибут for */
@@ -28,6 +30,7 @@ export type HeaderProps = {
 export function Header({
   label = '',
   labelTooltip,
+  caption,
   labelFor,
   size,
   required = false,
@@ -41,7 +44,11 @@ export function Header({
           <label className={styles.label} htmlFor={labelFor} data-test-id='field-decorator__label'>
             <TruncateString text={label} />
           </label>
-          {required && <span data-test-id='field-decorator__required-sign'>*</span>}
+          {required && (
+            <span className={styles.required} data-test-id='field-decorator__required-sign'>
+              *
+            </span>
+          )}
           {labelTooltip && (
             <Tooltip
               tip={labelTooltip}
@@ -54,6 +61,8 @@ export function Header({
           )}
         </span>
       )}
+
+      {caption && <span className={styles.caption}>{caption}</span>}
     </span>
   );
 }

package/src/components/FieldDecorator/styles.module.scss

@@ -17,6 +17,11 @@ $hint-icon-container: (
   'm': $fields-hint-icon-container-m,
   'l': $fields-hint-icon-container-m,
 );
+$caption-typography: (
+  's': $sans-body-s,
+  'm': $sans-body-m,
+  'l': $sans-body-m,
+);
 
 .decorator {
   display: flex;
@@ -35,12 +40,20 @@ $hint-icon-container: (
 
 .header {
   display: flex;
+  gap: $dimension-050m;
   box-sizing: border-box;
-  color: simple-var($sys-neutral-text-support);
+  color: $sys-neutral-text-support;
 
   @each $size in $sizes {
     &[data-size='#{$size}'] {
       @include composite-var($header-typography, $size);
+
+      .caption {
+        @include composite-var($caption-typography, $size);
+
+        margin-left: auto;
+        color: $sys-neutral-text-light;
+      }
     }
   }
 }
@@ -50,10 +63,16 @@ $hint-icon-container: (
 
   display: inline-flex;
   align-items: center;
+  color: $sys-neutral-text-light;
 }
 
 .label {
   display: grid;
+  color: $sys-neutral-text-support;
+}
+
+.required {
+  color: $sys-neutral-text-support;
 }
 
 .footer {
@@ -100,26 +119,26 @@ $hint-icon-container: (
   word-break: break-word;
 
   &[data-validation='default'] {
-    color: simple-var($sys-neutral-text-light);
+    color: $sys-neutral-text-light;
   }
 
   &[data-validation='error'] {
-    color: simple-var($sys-red-text-main);
+    color: $sys-red-text-main;
   }
 
   &[data-validation='warning'] {
-    color: simple-var($sys-yellow-text-main);
+    color: $sys-yellow-text-main;
   }
 
   &[data-validation='success'] {
-    color: simple-var($sys-green-text-main);
+    color: $sys-green-text-main;
   }
 }
 
 .icon {
   flex-shrink: 0;
   box-sizing: content-box;
-  color: simple-var($sys-neutral-text-light);
+  color: $sys-neutral-text-light;
 }
 
 .hintIcon {
@@ -127,39 +146,39 @@ $hint-icon-container: (
   box-sizing: content-box;
 
   &[data-validation='default'] {
-    color: simple-var($sys-neutral-text-light);
+    color: $sys-neutral-accent-default;
   }
 
   &[data-validation='error'] {
-    color: simple-var($sys-red-accent-default);
+    color: $sys-red-accent-default;
   }
 
   &[data-validation='warning'] {
-    color: simple-var($sys-yellow-accent-default);
+    color: $sys-yellow-accent-default;
   }
 
   &[data-validation='success'] {
-    color: simple-var($sys-green-accent-default);
+    color: $sys-green-accent-default;
   }
 }
 
 .counterLimit {
   > span {
     &[data-validation='default'] {
-      color: simple-var($sys-neutral-text-light);
+      color: $sys-neutral-text-light;
     }
 
     &[data-limit-exceeded],
     &[data-validation='error'] {
-      color: simple-var($sys-red-text-light);
+      color: $sys-red-text-light;
     }
 
     &[data-validation='warning'] {
-      color: simple-var($sys-yellow-text-light);
+      color: $sys-yellow-text-light;
     }
 
     &[data-validation='success'] {
-      color: simple-var($sys-green-text-light);
+      color: $sys-green-text-light;
     }
   }
 }
@@ -167,18 +186,18 @@ $hint-icon-container: (
 .counterCurrentValue {
   &[data-limit-exceeded] {
     &[data-validation='default'] {
-      color: simple-var($sys-neutral-text-main);
+      color: $sys-neutral-text-main;
     }
     &[data-validation='error'] {
-      color: simple-var($sys-red-text-main);
+      color: $sys-red-text-main;
     }
 
     &[data-validation='warning'] {
-      color: simple-var($sys-yellow-text-main);
+      color: $sys-yellow-text-main;
     }
 
     &[data-validation='success'] {
-      color: simple-var($sys-green-text-light);
+      color: $sys-green-text-light;
     }
   }
 }
@@ -188,4 +207,4 @@ $hint-icon-container: (
   display: flex;
   align-items: center;
   height: 100%;
-}
+}

package/src/components/FieldDecorator/utils.ts

@@ -8,6 +8,7 @@ export function extractFieldDecoratorProps<T extends Partial<FieldDecoratorProps
   labelTooltip,
   labelTooltipPlacement,
   labelFor,
+  caption,
   hint,
   disabled,
   showHintIcon,
@@ -23,6 +24,7 @@ export function extractFieldDecoratorProps<T extends Partial<FieldDecoratorProps
     labelTooltip,
     labelTooltipPlacement,
     labelFor,
+    caption,
     hint,
     disabled,
     showHintIcon,

package/src/components/FieldSecure/FieldSecure.tsx

@@ -28,6 +28,7 @@ type WrapperProps = Pick<
   | 'label'
   | 'labelTooltip'
   | 'required'
+  | 'caption'
   | 'hint'
   | 'size'
   | 'validationState'
@@ -76,6 +77,7 @@ export const FieldSecure = forwardRef<HTMLInputElement, FieldSecureProps>(
       labelTooltip,
       labelTooltipPlacement,
       required = false,
+      caption,
       hint,
       size = SIZE.S,
       validationState = VALIDATION_STATE.Default,
@@ -186,6 +188,7 @@ export const FieldSecure = forwardRef<HTMLInputElement, FieldSecureProps>(
         labelTooltipPlacement={labelTooltipPlacement}
         labelFor={id}
         required={required}
+        caption={caption}
         length={maxLength ? { max: maxLength, current: value.length } : undefined}
         hint={hint}
         disabled={disabled}

package/src/components/FieldSelect/types.ts

@@ -57,6 +57,7 @@ export type WrapperProps = Pick<
   | 'label'
   | 'labelTooltip'
   | 'required'
+  | 'caption'
   | 'hint'
   | 'showHintIcon'
   | 'size'

package/src/components/FieldSlider/FieldSlider.tsx

@@ -29,7 +29,15 @@ type SliderProps = Pick<InputPrivateProps, 'id' | 'name' | 'disabled' | 'readonl
 
 type WrapperProps = Pick<
   FieldDecoratorProps,
-  'className' | 'label' | 'labelTooltip' | 'required' | 'hint' | 'showHintIcon' | 'size' | 'labelTooltipPlacement'
+  | 'className'
+  | 'label'
+  | 'labelTooltip'
+  | 'required'
+  | 'caption'
+  | 'hint'
+  | 'showHintIcon'
+  | 'size'
+  | 'labelTooltipPlacement'
 >;
 
 type FieldSliderOwnProps = {
@@ -82,6 +90,7 @@ export const FieldSlider = forwardRef<HTMLInputElement, FieldSliderProps>(
       labelTooltip,
       labelTooltipPlacement,
       required,
+      caption,
       hint,
       showHintIcon,
       size = SIZE.S,
@@ -251,6 +260,7 @@ export const FieldSlider = forwardRef<HTMLInputElement, FieldSliderProps>(
         labelFor={id}
         disabled={disabled}
         required={required}
+        caption={caption}
         hint={hint}
         showHintIcon={showHintIcon}
         readonly={readonly}

package/src/components/FieldStepper/FieldStepper.tsx

@@ -35,6 +35,7 @@ type WrapperProps = Pick<
   | 'label'
   | 'labelTooltip'
   | 'required'
+  | 'caption'
   | 'hint'
   | 'showHintIcon'
   | 'size'
@@ -90,6 +91,7 @@ export const FieldStepper = forwardRef<HTMLInputElement, FieldStepperProps>(
       labelTooltip,
       labelTooltipPlacement,
       required = false,
+      caption,
       hint,
       showHintIcon,
       size = SIZE.S,
@@ -215,6 +217,7 @@ export const FieldStepper = forwardRef<HTMLInputElement, FieldStepperProps>(
         labelTooltipPlacement={labelTooltipPlacement}
         labelFor={id}
         required={required}
+        caption={caption}
         hint={hint}
         disabled={disabled}
         readonly={readonly}

package/src/components/FieldText/FieldText.tsx

@@ -19,6 +19,7 @@ type WrapperProps = Pick<
   | 'label'
   | 'labelTooltip'
   | 'required'
+  | 'caption'
   | 'hint'
   | 'showHintIcon'
   | 'size'
@@ -64,6 +65,7 @@ export const FieldText = forwardRef<HTMLInputElement, FieldTextProps>(
       labelTooltip,
       labelTooltipPlacement,
       required = false,
+      caption,
       hint,
       showHintIcon,
       size = SIZE.S,
@@ -112,6 +114,7 @@ export const FieldText = forwardRef<HTMLInputElement, FieldTextProps>(
         labelTooltipPlacement={labelTooltipPlacement}
         labelFor={id}
         required={required}
+        caption={caption}
         length={maxLength ? { max: maxLength, current: value.length } : undefined}
         hint={hint}
         disabled={disabled}

package/src/components/FieldTextArea/FieldTextArea.tsx

@@ -21,6 +21,7 @@ type WrapperProps = Pick<
   | 'label'
   | 'labelTooltip'
   | 'required'
+  | 'caption'
   | 'hint'
   | 'size'
   | 'validationState'
@@ -76,6 +77,7 @@ export const FieldTextArea = forwardRef<HTMLTextAreaElement, FieldTextAreaProps>
       labelTooltip,
       labelTooltipPlacement,
       required = false,
+      caption,
       hint,
       error,
       size = SIZE.S,
@@ -124,6 +126,7 @@ export const FieldTextArea = forwardRef<HTMLTextAreaElement, FieldTextAreaProps>
         labelTooltipPlacement={labelTooltipPlacement}
         labelFor={id}
         required={required}
+        caption={caption}
         length={maxLength ? { max: maxLength, current: value.length } : undefined}
         hint={hint}
         disabled={disabled}

package/src/helperComponents/ButtonHideValue/ButtonHideValue.tsx

@@ -40,13 +40,13 @@ export const ButtonHideValue = forwardRef<HTMLButtonElement, ButtonHideValueProp
       >
         {hidden ? (
           <>
-            {size === BUTTON_SIZE.S && <EyeClosedSVG size={16} />}
-            {size === BUTTON_SIZE.M && <EyeClosedSVG />}
+            {size === BUTTON_SIZE.S && <EyeSVG size={16} />}
+            {size === BUTTON_SIZE.M && <EyeSVG />}
           </>
         ) : (
           <>
-            {size === BUTTON_SIZE.S && <EyeSVG size={16} />}
-            {size === BUTTON_SIZE.M && <EyeSVG />}
+            {size === BUTTON_SIZE.S && <EyeClosedSVG size={16} />}
+            {size === BUTTON_SIZE.M && <EyeClosedSVG />}
           </>
         )}
       </button>