@moysklad/uikit 30.4.0 → 31.20.0

package/dist/components/EditableDate/EditableDate.js

@@ -0,0 +1,142 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { format } from "date-fns";
+import { cn } from "../../common/css/index.js";
+import { mergeRefs } from "../../common/react/mergeRefs.js";
+import { Text } from "../Text/Text.js";
+import { Date16Icon } from "../../icon/index.js";
+import { Datepicker } from "../Datepicker/Datepicker.js";
+import { dateFormatter, parseSelectedDate } from "../Datepicker/utils/index.js";
+import { DROPDOWN_CLOSE_REASON, Dropdown, useDropdown } from "../Dropdown/Dropdown.js";
+import { DropdownContent } from "./DropdownContent/DropdownContent.js";
+import EditableDate_module from "./EditableDate.module.js";
+const omitedDatepickerProps = [
+    'isTimeRequired',
+    'required',
+    'label',
+    'helperText',
+    'error',
+    'inline',
+    'frameless',
+    'fitInput',
+    'customRender',
+    'onTimeToggleChange',
+    'blurInputOnEsc',
+    'blurInputOnEnter',
+    'setInitialDateIntoInput',
+    'nullableValueWhenTimeIncomplete',
+    'placeholder',
+    'showTime',
+    'blurAfterChange',
+    'blurAfterPick'
+];
+const EditableDate = ({ prefix = 'от', selectedDate, localeFormat, dateTimeFormatOptions, disabled, iconPosition = 'end', onDayClick, ...props })=>{
+    const buttonRef = useRef(null);
+    const inputRef = useRef(null);
+    const lastDropdownElementRef = useRef(null);
+    const dropdownContentRef = useRef(null);
+    const calendarDropdown = useDropdown();
+    const [stringValue, setStringValue] = useState(null);
+    const formatter = dateFormatter.getFormatter(localeFormat, dateTimeFormatOptions);
+    const parsedSelectedDate = useMemo(()=>'string' == typeof selectedDate ? parseSelectedDate(selectedDate, formatter) : selectedDate, [
+        selectedDate,
+        formatter
+    ]);
+    const dateToString = useCallback((date)=>format(date, formatter.dateTime.format), [
+        formatter.dateTime.format
+    ]);
+    const handleDayClick = (date)=>{
+        onDayClick?.(date);
+        calendarDropdown.handleClose();
+    };
+    const handleInputKeyDown = (event)=>{
+        props.onInputKeyDown?.(event);
+        if ('Enter' !== event.key) return;
+        calendarDropdown.handleClose?.();
+        buttonRef.current?.focus();
+    };
+    const handleButtonMouseDown = (event)=>{
+        if (calendarDropdown.open) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    };
+    useEffect(()=>{
+        const stringValue = parsedSelectedDate ? dateToString(parsedSelectedDate) : null;
+        setStringValue(stringValue);
+    }, [
+        dateToString,
+        parsedSelectedDate
+    ]);
+    return /*#__PURE__*/ jsx(Datepicker, {
+        ...props,
+        selectedDate: selectedDate,
+        localeFormat: localeFormat,
+        dateTimeFormatOptions: dateTimeFormatOptions,
+        showTime: true,
+        isTimeRequired: true,
+        inline: true,
+        frameless: true,
+        fitInput: true,
+        setInitialDateIntoInput: true,
+        nullableValueWhenTimeIncomplete: true,
+        iconPosition: iconPosition,
+        blurInputOnEsc: false,
+        blurInputOnEnter: false,
+        lastElementRef: lastDropdownElementRef,
+        inputRef: mergeRefs([
+            inputRef,
+            props.inputRef
+        ]),
+        onDayClick: handleDayClick,
+        onInputKeyDown: handleInputKeyDown,
+        customRender: ({ input, calendar })=>/*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsxs("button", {
+                        ref: buttonRef,
+                        className: cn(EditableDate_module.button, disabled && EditableDate_module.disabled),
+                        "data-test-id": props.testId,
+                        onClick: calendarDropdown.handleToggle,
+                        disabled: disabled,
+                        onMouseDown: handleButtonMouseDown,
+                        children: [
+                            /*#__PURE__*/ jsxs(Text.BodyXL, {
+                                className: EditableDate_module.title,
+                                children: [
+                                    prefix,
+                                    " ",
+                                    /*#__PURE__*/ jsx("span", {
+                                        ref: calendarDropdown.triggerRef
+                                    }),
+                                    stringValue
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx("div", {
+                                className: EditableDate_module.iconContainer,
+                                children: /*#__PURE__*/ jsx(Date16Icon, {})
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(Dropdown, {
+                        open: calendarDropdown.open,
+                        onClose: (reason)=>{
+                            calendarDropdown.handleClose();
+                            if (reason === DROPDOWN_CLOSE_REASON.ESCAPE) buttonRef.current?.focus();
+                        },
+                        triggerRef: calendarDropdown.triggerRef,
+                        offsetY: -39,
+                        shouldIgnoreOutsideInteraction: (element)=>dropdownContentRef.current?.contains(element) ?? false,
+                        children: /*#__PURE__*/ jsx(DropdownContent, {
+                            ref: dropdownContentRef,
+                            testId: props.testId,
+                            calendar: calendar,
+                            input: input,
+                            inputRef: inputRef,
+                            lastDropdownElementRef: lastDropdownElementRef
+                        })
+                    })
+                ]
+            })
+    });
+};
+export { EditableDate, omitedDatepickerProps };

package/dist/components/EditableDate/EditableDate.module.js

@@ -0,0 +1,7 @@
+import "./EditableDate_module.css";
+const EditableDate_module = {
+    button: "button-URdOeG",
+    disabled: "disabled-wlENxh",
+    iconContainer: "iconContainer-EFdoq_"
+};
+export default EditableDate_module;

package/dist/components/EditableDate/EditableDate_module.css

@@ -0,0 +1,32 @@
+.button-URdOeG {
+  all: unset;
+  cursor: pointer;
+  align-items: center;
+  gap: 8px;
+  padding-top: 2px;
+  display: flex;
+}
+
+.button-URdOeG:hover, .button-URdOeG:active {
+  text-decoration: underline;
+}
+
+.disabled-wlENxh {
+  cursor: default;
+}
+
+.disabled-wlENxh:hover, .disabled-wlENxh:active {
+  text-decoration: none;
+}
+
+.button-URdOeG:focus-visible {
+  outline: 1px solid var(--border-focused, #091739);
+  outline-offset: -1px;
+}
+
+.iconContainer-EFdoq_ {
+  align-items: center;
+  padding-bottom: 2px;
+  display: flex;
+}
+

package/dist/components/EditableTitle/EditableTitle.d.ts

@@ -1,4 +1,4 @@
-import { type FC } from 'react';
+import React from 'react';
 import { type IHasTestId } from '../../common/types';
 declare const titleComponents: {
     readonly H2: import("../Text/utils/polymorphicTextRef").TextComponent<import("../Text/components/types").TextVariantProps, "h2">;
@@ -8,6 +8,7 @@ declare const titleComponents: {
 export interface EditableTitleProps extends IHasTestId {
     onApplyValidValue?: (value: string) => void;
     onChangeWithValidation?: (value: string) => string | undefined;
+    onToggle?: (isEdit: boolean) => void;
     className?: string;
     defaultValue?: string;
     titleComponent?: keyof typeof titleComponents;
@@ -16,6 +17,10 @@ export interface EditableTitleProps extends IHasTestId {
     maxWidth?: number;
     maxLength?: number;
     overflowTextAlert?: string;
+    prefix?: string;
+    titleClassName?: string;
+    inputWrapperClassName?: string;
+    hintZIndex?: number;
 }
-export declare const EditableTitle: FC<EditableTitleProps>;
+export declare const EditableTitle: React.MemoExoticComponent<React.ForwardRefExoticComponent<EditableTitleProps & React.RefAttributes<HTMLDivElement>>>;
 export {};

package/dist/components/EditableTitle/EditableTitle.js

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { forwardRef, memo, useCallback, useEffect, useRef, useState } from "react";
 import { useLatestValue } from "@dnd-kit/utilities";
 import { cn } from "../../common/css/cn.js";
 import { HintWithSkip } from "../_shared/HintWithSkip/HintWithSkip.js";
@@ -15,7 +15,7 @@ const titleComponents = {
     H3: Text.H3,
     BodyXL: Text.BodyXL
 };
-const EditableTitle = /*#__PURE__*/ memo(({ testId, className, onApplyValidValue, onChangeWithValidation, defaultValue, hintText, titleComponent = 'H2', withoutSaveButton = false, maxWidth, maxLength, overflowTextAlert })=>{
+const EditableTitle = /*#__PURE__*/ memo(/*#__PURE__*/ forwardRef(({ testId, className, onApplyValidValue, onChangeWithValidation, onToggle, defaultValue, hintText, titleComponent = 'H2', withoutSaveButton = false, maxWidth, maxLength, overflowTextAlert, prefix, titleClassName, inputWrapperClassName, hintZIndex }, ref)=>{
     const [isEdit, setIsEdit] = useState(!defaultValue);
     const [value, setValue] = useState((defaultValue ?? '').substring(0, maxLength));
     const [alertHintText, setAlertHintText] = useState('');
@@ -25,9 +25,17 @@ const EditableTitle = /*#__PURE__*/ memo(({ testId, className, onApplyValidValue
     const timeoutIdRef = useRef();
     const isDirtyRef = useRef(false);
     const Title = titleComponents[titleComponent];
+    const changeEditMode = useCallback((isEdit)=>{
+        if (onToggle) onToggle(isEdit);
+        setIsEdit(isEdit);
+    }, [
+        onToggle
+    ]);
     const handleClickTitle = useCallback(()=>{
-        setIsEdit(true);
-    }, []);
+        changeEditMode(true);
+    }, [
+        changeEditMode
+    ]);
     const handleClearInput = useCallback(()=>{
         setValue('');
     }, []);
@@ -39,12 +47,13 @@ const EditableTitle = /*#__PURE__*/ memo(({ testId, className, onApplyValidValue
         setAlertHintText(error);
         setIsError(!!error);
         if (error) return;
-        setIsEdit(!inputValue);
+        changeEditMode(!inputValue);
         onApplyValidValue?.(inputValue);
         isDirtyRef.current = false;
         timeoutIdRef.current = void 0;
         clearTimeout(timeoutIdRef.current);
     }, [
+        changeEditMode,
         latestValue,
         onApplyValidValue,
         onChangeWithValidation
@@ -101,7 +110,15 @@ const EditableTitle = /*#__PURE__*/ memo(({ testId, className, onApplyValidValue
     useEffect(()=>()=>{
             clearTimeout(timeoutIdRef.current);
         }, []);
+    const trimmedPrefix = prefix?.trim();
+    const formattedPrefix = trimmedPrefix ? /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            trimmedPrefix,
+            "\xa0"
+        ]
+    }) : null;
     return /*#__PURE__*/ jsx("div", {
+        ref: ref,
         "data-test-id": testId,
         className: cn(EditableTitle_module.wrapper, className),
         style: {
@@ -109,28 +126,39 @@ const EditableTitle = /*#__PURE__*/ memo(({ testId, className, onApplyValidValue
         },
         children: isEdit ? /*#__PURE__*/ jsxs(Fragment, {
             children: [
-                /*#__PURE__*/ jsx(HintWithSkip, {
-                    skip: !alertHintText,
-                    variant: HintVariant.Alert,
-                    placement: Placement.BOTTOM,
-                    visible: true,
-                    overlay: /*#__PURE__*/ jsx(Text.Body, {
-                        testId: testId ? `${testId}-alert-hint` : void 0,
-                        colorToken: TextColor.critical,
-                        children: alertHintText
-                    }),
-                    children: /*#__PURE__*/ jsx(Input, {
-                        testId: testId ? `${testId}-input` : void 0,
-                        ref: inputRefCb,
-                        name: "EditableTitleInput",
-                        clearable: true,
-                        onClear: handleClearInput,
-                        value: value,
-                        onChange: handleChangeInput,
-                        error: isError,
-                        autoComplete: "off",
-                        onBlur: handleBlurInput
-                    })
+                /*#__PURE__*/ jsxs("div", {
+                    className: cn(EditableTitle_module.inputWrapper, inputWrapperClassName),
+                    children: [
+                        formattedPrefix && /*#__PURE__*/ jsx(Title, {
+                            testId: testId ? `${testId}-prefix` : void 0,
+                            tabIndex: -1,
+                            children: formattedPrefix
+                        }),
+                        /*#__PURE__*/ jsx(HintWithSkip, {
+                            skip: !alertHintText,
+                            variant: HintVariant.Alert,
+                            placement: Placement.BOTTOM,
+                            visible: true,
+                            overlay: /*#__PURE__*/ jsx(Text.Body, {
+                                testId: testId ? `${testId}-alert-hint` : void 0,
+                                colorToken: TextColor.critical,
+                                children: alertHintText
+                            }),
+                            zIndex: hintZIndex,
+                            children: /*#__PURE__*/ jsx(Input, {
+                                testId: testId ? `${testId}-input` : void 0,
+                                ref: inputRefCb,
+                                name: "EditableTitleInput",
+                                clearable: true,
+                                onClear: handleClearInput,
+                                value: value,
+                                onChange: handleChangeInput,
+                                error: isError,
+                                autoComplete: "off",
+                                onBlur: handleBlurInput
+                            })
+                        })
+                    ]
                 }),
                 !withoutSaveButton && /*#__PURE__*/ jsx(Button, {
                     testId: testId ? `${testId}-button` : void 0,
@@ -149,16 +177,20 @@ const EditableTitle = /*#__PURE__*/ memo(({ testId, className, onApplyValidValue
                 colorToken: TextColor.invert,
                 children: hintText
             }),
-            children: /*#__PURE__*/ jsx(Title, {
+            zIndex: hintZIndex,
+            children: /*#__PURE__*/ jsxs(Title, {
                 testId: testId ? `${testId}-title` : void 0,
-                className: EditableTitle_module.title,
+                className: cn(EditableTitle_module.title, titleClassName),
                 onClick: handleClickTitle,
                 tabIndex: 0,
                 onKeyDown: handleEnterDownOnTitle,
-                children: value
+                children: [
+                    formattedPrefix,
+                    value
+                ]
             })
         })
     });
-});
+}));
 EditableTitle.displayName = 'EditableTitle';
 export { EditableTitle };

package/dist/components/EditableTitle/EditableTitle.module.js

@@ -1,6 +1,7 @@
 import "./EditableTitle_module.css";
 const EditableTitle_module = {
     wrapper: "wrapper-Tgv288",
+    inputWrapper: "inputWrapper-S8Rm8A",
     title: "title-MJedXO"
 };
 export default EditableTitle_module;

package/dist/components/EditableTitle/EditableTitle_module.css

@@ -5,6 +5,12 @@
   display: flex;
 }
 
+.inputWrapper-S8Rm8A {
+  align-items: center;
+  width: 100%;
+  display: flex;
+}
+
 .title-MJedXO {
   cursor: pointer;
   text-overflow: ellipsis;

package/dist/components/EmptyState/EmptyState.d.ts

@@ -30,5 +30,5 @@ export declare namespace EmptyState {
     var displayName: string;
     var Actions: ({ className, leftButtonSlot, centralButtonSlot, rightButtonSlot, ...restProps }: import("./Actions/Actions").ActionsProps) => import("react/jsx-runtime").JSX.Element | null;
     var Image: typeof import("../_shared/Image/Image").Image;
-    var Button: import("react").ForwardRefExoticComponent<import("../Button/Button").IButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+    var Button: import("../_shared/utils/polymorphicClickableTypes").ClickableComponent<import("../Button/Button").ButtonOwnProps, "button">;
 }

package/dist/components/EmptyStateLarge/EmptyStateLarge_module.css

@@ -1,7 +1,7 @@
 .container-antwWA {
   align-items: center;
-  gap: 32px;
-  width: 1200px;
+  gap: 16px;
+  width: 1088px;
   display: flex;
 }
 

package/dist/components/Help/Help_module.css

@@ -24,7 +24,7 @@
 }
 
 .disabled-JKdTzW {
-  color: var(--elements-disabled);
+  color: var(--elements-inactive, #9fa7af);
   cursor: default;
   pointer-events: none;
 }

package/dist/components/Informer/Informer.d.ts

@@ -0,0 +1,37 @@
+import { type JSX } from 'react';
+import { type IHasTestId, type ValueOf } from '../../common/types';
+export declare const InformerVariant: {
+    readonly blue: "blue";
+    readonly green: "green";
+    readonly red: "red";
+};
+export type InformerVariantValue = ValueOf<typeof InformerVariant>;
+export type RenderTitleParams = {
+    title?: string;
+    testId?: string;
+};
+/**
+ * Встроенный неинтерактивный информационный блок для контекста экрана или объекта
+ * (состояние, ограничение, пояснение логики). Без кнопок, ссылок и закрытия.
+ *
+ * По умолчанию `variant=blue`.
+ * Расширяется по ширине родителя.
+ *
+ * Ширину можно задать через родителя или через className.
+ *
+ * Текст должен быть кратким. В коде нет проверки длины; если сообщение занимает
+ * больше 4 строк, необходимо согласовать с дизайнером другой компонент.
+ *
+ * @param title - заголовок (опционально)
+ * @param description - основной текст
+ * @param variant - цветовой вариант отображения: blue (по умолчанию), green, red
+ * @param renderTitle - кастомный рендер заголовка. Можно передать в него пропу title, можно без title
+ */
+export interface InformerProps extends IHasTestId {
+    title?: string;
+    description: string;
+    className?: string;
+    variant?: InformerVariantValue;
+    renderTitle?: (params: RenderTitleParams) => JSX.Element;
+}
+export declare const Informer: import("react").ForwardRefExoticComponent<InformerProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Informer/Informer.js

@@ -0,0 +1,36 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../common/css/cn.js";
+import { Text } from "../Text/Text.js";
+import Informer_module from "./Informer.module.js";
+const InformerVariant = {
+    blue: 'blue',
+    green: 'green',
+    red: 'red'
+};
+const defaultRenderTitle = ({ title, testId })=>title && /*#__PURE__*/ jsx(Text.BodyStrong, {
+        className: Informer_module.title,
+        testId: testId,
+        children: title
+    });
+const Informer = /*#__PURE__*/ forwardRef(({ variant = InformerVariant.blue, testId, title, renderTitle: renderTitleProp, description, className }, ref)=>{
+    const renderTitle = renderTitleProp ?? defaultRenderTitle;
+    return /*#__PURE__*/ jsxs("div", {
+        ref: ref,
+        role: "status",
+        "data-test-id": testId,
+        className: cn(Informer_module.container, Informer_module[variant], className),
+        children: [
+            renderTitle({
+                title,
+                testId: testId ? `${testId}-title` : void 0
+            }),
+            /*#__PURE__*/ jsx(Text.Body, {
+                testId: testId ? `${testId}-description` : void 0,
+                children: description
+            })
+        ]
+    });
+});
+Informer.displayName = 'Informer';
+export { Informer, InformerVariant };

package/dist/components/Informer/Informer.module.js

@@ -0,0 +1,7 @@
+import "./Informer_module.css";
+const Informer_module = {
+    container: "container-c0TyOV",
+    green: "green-Ib8KMk",
+    red: "red-N9Z4qO"
+};
+export default Informer_module;

package/dist/components/Informer/Informer_module.css

@@ -0,0 +1,24 @@
+.container-c0TyOV {
+  --informer-bg-color: var(--elements-bg-pressed);
+  --informer-border-color: var(--elements-accent);
+  box-sizing: border-box;
+  background-color: var(--informer-bg-color);
+  border-left: 2px solid var(--informer-border-color);
+  border-radius: 4px;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+  padding: 8px 12px 12px;
+  display: flex;
+}
+
+.green-Ib8KMk {
+  --informer-bg-color: var(--badge-green-bgd);
+  --informer-border-color: var(--elements-positive);
+}
+
+.red-N9Z4qO {
+  --informer-bg-color: var(--badge-red-bgd);
+  --informer-border-color: var(--elements-critical);
+}
+

package/dist/components/Input/Input.js

@@ -2,10 +2,12 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useRef } from "react";
 import { cn } from "../../common/css/cn.js";
 import { createSyntheticEvent } from "../../common/react/createSyntheticEvent.js";
-import { FieldLabel } from "../FieldLabel/FieldLabel.js";
-import { FieldRow } from "../FieldRow/FieldRow.js";
+import { FieldLabel } from "../_shared/FieldLabel/FieldLabel.js";
+import { FieldRow } from "../_shared/FieldRow/FieldRow.js";
+import { InfoSize } from "../_shared/Info/types/index.js";
+import { InputClear } from "../_shared/InputClear/InputClear.js";
 import { InfoBlock } from "./components/InfoBlock.js";
-import { InputClear } from "../InputClear/InputClear.js";
+import { TextVariant } from "../Text/Text.js";
 import { useId } from "../../hooks/useId/index.js";
 import { useIsElementOverflowing } from "../../hooks/useIsElementOverflowing/index.js";
 import Input_module from "./Input.module.js";
@@ -22,6 +24,7 @@ const Input = /*#__PURE__*/ forwardRef(({ testId, tabIndex, className, inputClas
     const ignoreBlurRef = useRef(false);
     const largeStyle = 'L' === inputSize && Input_module.large;
     const inputValue = String(value ?? '');
+    const labelVariant = 'L' === inputSize ? TextVariant.bodyL : TextVariant.body;
     const handleChange = (e)=>{
         onChange?.(e);
     };
@@ -71,7 +74,8 @@ const Input = /*#__PURE__*/ forwardRef(({ testId, tabIndex, className, inputClas
                 htmlFor: inputId,
                 testId: testId,
                 className: Input_module.label,
-                helpProps: helpProps
+                helpProps: helpProps,
+                variant: labelVariant
             }),
             /*#__PURE__*/ jsx(FieldRow, {
                 helpComponent: helpComponent,
@@ -146,7 +150,8 @@ const Input = /*#__PURE__*/ forwardRef(({ testId, tabIndex, className, inputClas
                 maxLength: maxLength,
                 disabled: disabled,
                 showCounterLimit: showCounterLimit,
-                error: error
+                error: error,
+                size: 'L' === inputSize ? InfoSize.L : InfoSize.M
             })
         ]
     });

package/dist/components/Input/components/InfoBlock.d.ts

@@ -1,3 +1,4 @@
+import { type InfoSizeValue } from '../../_shared/Info/types';
 type InfoBlockProps = {
     info?: string;
     error?: boolean;
@@ -7,6 +8,7 @@ type InfoBlockProps = {
     showCounterLimit?: boolean;
     maxLength?: number;
     value?: string;
+    size?: InfoSizeValue;
 };
-export declare const InfoBlock: ({ info, error, disabled, isInfoEllipsis, testId, maxLength, showCounterLimit, value, }: InfoBlockProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const InfoBlock: ({ info, error, disabled, isInfoEllipsis, testId, maxLength, showCounterLimit, value, size, }: InfoBlockProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/Input/components/InfoBlock.js

@@ -1,8 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Info } from "../../Info/Info.js";
+import { Info } from "../../_shared/Info/Info.js";
+import { InfoSize } from "../../_shared/Info/types/index.js";
 import { Counter } from "../../Textfield/components/Counter/Counter.js";
 import Input_module from "../Input.module.js";
-const InfoBlock = ({ info, error, disabled, isInfoEllipsis, testId, maxLength, showCounterLimit, value })=>{
+const InfoBlock = ({ info, error, disabled, isInfoEllipsis, testId, maxLength, showCounterLimit, value, size = InfoSize.M })=>{
     if (!info && !showCounterLimit && !maxLength) return null;
     return /*#__PURE__*/ jsxs("div", {
         className: Input_module.infoBlock,
@@ -14,14 +15,16 @@ const InfoBlock = ({ info, error, disabled, isInfoEllipsis, testId, maxLength, s
                     error: error,
                     disabled: disabled,
                     isEllipsis: isInfoEllipsis,
-                    testId: testId
+                    testId: testId,
+                    size: size
                 })
             }),
             showCounterLimit && maxLength && /*#__PURE__*/ jsx(Counter, {
                 testId: testId,
                 value: value,
                 hasHelp: false,
-                limit: maxLength
+                limit: maxLength,
+                size: size
             })
         ]
     });

package/dist/components/InputUnit/InputUnit.js

@@ -1,14 +1,14 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
 import { cn } from "../../common/css/cn.js";
+import { FieldLabel } from "../_shared/FieldLabel/FieldLabel.js";
+import { FieldRow } from "../_shared/FieldRow/FieldRow.js";
+import { Info } from "../_shared/Info/Info.js";
+import { InputClear } from "../_shared/InputClear/InputClear.js";
 import { Chip } from "../Chip/Chip.js";
 import { Dropdown } from "../Dropdown/Dropdown.js";
 import { useDropdown } from "../Dropdown/hooks/useDropdown.js";
 import { getListboxTriggerA11y } from "../Dropdown/utils/getListboxTriggerA11y.js";
-import { FieldLabel } from "../FieldLabel/FieldLabel.js";
-import { FieldRow } from "../FieldRow/FieldRow.js";
-import { Info } from "../Info/Info.js";
-import { InputClear } from "../InputClear/InputClear.js";
 import { OptionsList } from "../Select/OptionsList/OptionsList.js";
 import { TextColor } from "../Text/Text.js";
 import { useId } from "../../hooks/useId/index.js";