@moysklad/uikit 28.1.0 → 30.4.0

package/dist/components/Hint/Hint.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { cn } from "../../common/css/cn.js";
-import { ArrowIcon } from "../Tooltip/ArrowIcon.js";
+import { TooltipBodyColor } from "../Tooltip/constants/index.js";
 import { Placement, Tooltip } from "../Tooltip/Tooltip.js";
 import Hint_module from "./Hint.module.js";
 const HintVariant = {
@@ -28,13 +28,12 @@ const Hint = ({ testId = 'hint', children, placement = Placement.TOP, variant =
         },
         placement: placement,
         hideCloseButton: true,
-        overlayClassName: cn(Hint_module.overlay, variant === HintVariant.Alert ? Hint_module.alertOverlay : Hint_module.defaultOverlay, overlayClassName),
+        colorToken: TooltipBodyColor.dark,
+        overlayClassName: cn(Hint_module.overlay, variant === HintVariant.Alert && Hint_module.alertOverlay, overlayClassName),
+        arrowClassName: Hint_module.arrow,
         trigger: [
             'hover'
         ],
-        arrowContent: /*#__PURE__*/ jsx(ArrowIcon, {
-            className: Hint_module.arrow
-        }),
         offset: offset,
         ...otherProps,
         children: children

package/dist/components/Hint/Hint.module.js

@@ -1,8 +1,7 @@
 import "./Hint_module.css";
 const Hint_module = {
     overlay: "overlay-r3djAa",
-    defaultOverlay: "defaultOverlay-xUUlq1",
-    arrow: "arrow-h8Epuo",
-    alertOverlay: "alertOverlay-CnGnJX"
+    alertOverlay: "alertOverlay-CnGnJX",
+    arrow: "arrow-h8Epuo"
 };
 export default Hint_module;

package/dist/components/Hint/Hint_module.css

@@ -5,15 +5,6 @@
   padding: 8px;
 }
 
-.defaultOverlay-xUUlq1 {
-  background: var(--invert-background, #131d36f0);
-  color: var(--invert-text, #fff);
-}
-
-.defaultOverlay-xUUlq1 .arrow-h8Epuo {
-  fill: var(--invert-background, #131d36f0);
-}
-
 .alertOverlay-CnGnJX {
   background: var(--status-red-01-bg, #ffdcdc);
   color: var(--text-critical, #e50347);

package/dist/components/Info/Info.d.ts

@@ -7,7 +7,4 @@ export interface InfoProps extends IHasTestId {
     isEllipsis?: boolean;
     className?: string;
 }
-export declare const Info: {
-    ({ info, error, warning, disabled, className, testId, isEllipsis, }: InfoProps): import("react/jsx-runtime").JSX.Element | null;
-    displayName: string;
-};
+export declare const Info: import("react").ForwardRefExoticComponent<InfoProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/Info/Info.js

@@ -1,20 +1,43 @@
 import { jsx } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
 import { cn } from "../../common/css/cn.js";
+import { Hint } from "../Hint/Hint.js";
 import { Text, TextColor } from "../Text/Text.js";
+import { useIsElementOverflowing } from "../../hooks/useIsElementOverflowing/index.js";
 import Info_module from "./Info.module.js";
-const Info = ({ info, error, warning, disabled, className, testId = '', isEllipsis })=>{
+const Info = /*#__PURE__*/ forwardRef(({ info, error, warning, disabled, testId, isEllipsis, className }, ref)=>{
+    const { ref: infoRef, isOverflowing: isOverflowingInfo } = useIsElementOverflowing([
+        info
+    ], isEllipsis ? ref : null);
+    const [isHintVisible, setIsHintVisible] = useState(false);
     if (!info) return null;
     const getColor = ()=>{
         if (!disabled && error) return TextColor.critical;
         if (!disabled && warning) return TextColor.attention;
         return TextColor.secondary;
     };
-    return /*#__PURE__*/ jsx(Text.Caption, {
-        className: cn(Info_module.info, isEllipsis && Info_module.ellipsis, className),
+    const caption = /*#__PURE__*/ jsx(Text.Caption, {
+        ref: isEllipsis ? infoRef : void 0,
+        className: cn(Info_module.info, isEllipsis ? Info_module.ellipsis : Info_module.wrap, className),
         colorToken: getColor(),
         testId: `${testId}-info`,
         children: info
     });
-};
+    if (!isEllipsis) return caption;
+    return /*#__PURE__*/ jsx(Hint, {
+        visible: isHintVisible,
+        placement: "bottom",
+        onVisibleChange: setIsHintVisible,
+        overlay: /*#__PURE__*/ jsx(Text.Body, {
+            testId: `${testId}-info`,
+            colorToken: "invert",
+            className: Info_module.hintText,
+            children: info
+        }),
+        trigger: isOverflowingInfo ? 'hover' : [],
+        overlayClassName: Info_module.hint,
+        children: caption
+    });
+});
 Info.displayName = 'Info';
 export { Info };

package/dist/components/Info/Info.module.js

@@ -1,6 +1,9 @@
 import "./Info_module.css";
 const Info_module = {
     info: "info-DBaBLp",
-    ellipsis: "ellipsis-DTZwRA"
+    wrap: "wrap-RDQclO",
+    ellipsis: "ellipsis-DTZwRA",
+    hint: "hint-x4Dujm",
+    hintText: "hintText-VkgCkI"
 };
 export default Info_module;

package/dist/components/Info/Info_module.css

@@ -3,9 +3,30 @@
   position: relative;
 }
 
+.wrap-RDQclO {
+  overflow-wrap: break-word;
+}
+
 .ellipsis-DTZwRA {
   text-overflow: ellipsis;
   white-space: nowrap;
+  max-width: 100%;
+  display: block;
   overflow: hidden;
 }
 
+.ellipsis-DTZwRA:after {
+  content: "";
+  display: block;
+}
+
+.hint-x4Dujm {
+  box-sizing: border-box;
+  overflow-wrap: break-word;
+  max-width: 300px;
+}
+
+.hintText-VkgCkI {
+  overflow-wrap: break-word;
+}
+

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

@@ -1,5 +1,6 @@
 import React, { type InputHTMLAttributes, type ReactNode } from 'react';
 import { type IHasTabIndex, type IHasTestId } from '../../common/types';
+import type { HelpProps } from '../Help/Help';
 export interface InputProps extends InputHTMLAttributes<HTMLInputElement>, IHasTestId, IHasTabIndex {
     name: string;
     className?: string;
@@ -11,6 +12,15 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement>, IHasT
     disabled?: boolean;
     clearable?: boolean;
     onClear?: () => void;
+    textActionIcon?: ReactNode;
+    onTextActionClick?: () => void;
+    trailingActionIcon?: ReactNode;
+    onTrailingActionClick?: () => void;
+    helpProps?: Omit<HelpProps, 'testId'>;
+    /** @deprecated Используйте `helpProps` */
     helpComponent?: ReactNode;
+    inputSize?: 'M' | 'L';
+    showCounterLimit?: boolean;
+    isInfoEllipsis?: boolean;
 }
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Input/Input.js

@@ -2,37 +2,59 @@ 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 { Text, TextColor } from "../Text/Text.js";
+import { InfoBlock } from "./components/InfoBlock.js";
+import { InputClear } from "../InputClear/InputClear.js";
 import { useId } from "../../hooks/useId/index.js";
 import { useIsElementOverflowing } from "../../hooks/useIsElementOverflowing/index.js";
-import { RemoveClose12Icon } from "../../icon/index.js";
 import Input_module from "./Input.module.js";
-const Input = /*#__PURE__*/ forwardRef(({ testId, tabIndex, className, inputClassName, label, info, required, error, disabled, clearable, onClear, onBlur, helpComponent, ...inputProps }, ref)=>{
-    const inputId = useId(inputProps.id);
+const getActionsPaddingClass = (size, showTextAction, showClear, showTrailing)=>{
+    const isLarge = 'L' === size;
+    if (showTextAction && showClear && showTrailing) return isLarge ? Input_module.actionsPaddingFullL : Input_module.actionsPaddingFullM;
+    if (showClear && showTrailing) return isLarge ? Input_module.actionsPaddingClearTrailL : Input_module.actionsPaddingClearTrailM;
+    if (showTextAction && showClear) return isLarge ? Input_module.actionsPaddingTwoL : Input_module.actionsPaddingTwoM;
+    if (showTextAction || showClear || showTrailing) return isLarge ? Input_module.actionsPaddingOneL : Input_module.actionsPaddingOneM;
+};
+const Input = /*#__PURE__*/ forwardRef(({ testId, tabIndex, className, inputClassName, label, info, required, error, disabled, clearable, onClear, textActionIcon, onTextActionClick, trailingActionIcon, onTrailingActionClick, onBlur, helpProps, helpComponent, inputSize = 'M', showCounterLimit, isInfoEllipsis, ...inputProps }, ref)=>{
+    const { maxLength, onChange, value, ...restInputProps } = inputProps;
+    const inputId = useId(restInputProps.id);
     const ignoreBlurRef = useRef(false);
+    const largeStyle = 'L' === inputSize && Input_module.large;
+    const inputValue = String(value ?? '');
+    const handleChange = (e)=>{
+        onChange?.(e);
+    };
     const handleClear = ()=>{
-        if (inputProps.onChange) {
+        if (onChange) {
             const nativeEvent = new Event('change');
             Object.defineProperty(nativeEvent, 'target', {
                 writable: false,
                 value: ''
             });
             const event = createSyntheticEvent(nativeEvent);
-            inputProps.onChange(event);
+            onChange(event);
         }
         onClear?.();
     };
-    const handleClearMouseDown = ()=>{
+    const handleActionMouseDown = ()=>{
         ignoreBlurRef.current = true;
     };
-    const { ref: labelRef, isOverflowing: isOverflowingLabel } = useIsElementOverflowing([
-        label
-    ]);
+    const handleActionKeyDown = (e)=>{
+        if ('Enter' === e.key || ' ' === e.key) ignoreBlurRef.current = true;
+    };
     const { ref: inputRef, isOverflowing: isOverflowingInput } = useIsElementOverflowing([
-        inputProps.value,
-        clearable
+        value,
+        clearable,
+        textActionIcon,
+        trailingActionIcon
     ], ref);
+    const showClear = Boolean(clearable && value && !disabled);
+    const showTextAction = Boolean(textActionIcon && !disabled);
+    const showTrailing = Boolean(trailingActionIcon && !disabled);
+    const showActions = showTextAction || showClear || showTrailing;
+    const actionsPaddingClass = getActionsPaddingClass(inputSize, showTextAction, showClear, showTrailing);
+    const paddingClass = actionsPaddingClass ?? ('L' === inputSize ? Input_module.inputPaddingL : Input_module.inputPaddingM);
     const handleBlur = (e)=>{
         if (ignoreBlurRef.current) {
             ignoreBlurRef.current = false;
@@ -43,23 +65,13 @@ const Input = /*#__PURE__*/ forwardRef(({ testId, tabIndex, className, inputClas
         "data-test-id": testId,
         className: cn(Input_module.wrapper, className),
         children: [
-            label && /*#__PURE__*/ jsx("label", {
-                className: Input_module.labelWrapper,
+            /*#__PURE__*/ jsx(FieldLabel, {
+                label: label,
+                required: required,
                 htmlFor: inputId,
-                children: /*#__PURE__*/ jsxs(Text.Body, {
-                    ref: labelRef,
-                    title: isOverflowingLabel ? label : void 0,
-                    className: Input_module.label,
-                    as: "label",
-                    htmlFor: inputId,
-                    children: [
-                        label,
-                        required && /*#__PURE__*/ jsx("span", {
-                            className: Input_module.required,
-                            children: "*"
-                        })
-                    ]
-                })
+                testId: testId,
+                className: Input_module.label,
+                helpProps: helpProps
             }),
             /*#__PURE__*/ jsx(FieldRow, {
                 helpComponent: helpComponent,
@@ -67,35 +79,74 @@ const Input = /*#__PURE__*/ forwardRef(({ testId, tabIndex, className, inputClas
                     className: cn(Input_module.inputWrapper),
                     children: [
                         /*#__PURE__*/ jsx("input", {
-                            ...inputProps,
-                            title: isOverflowingInput ? inputProps.value?.toString() : void 0,
+                            ...restInputProps,
+                            ...void 0 === value ? {} : {
+                                value
+                            },
+                            maxLength: maxLength,
+                            onChange: handleChange,
+                            title: isOverflowingInput ? inputValue : void 0,
                             tabIndex: tabIndex,
                             id: inputId,
                             ref: inputRef,
                             "data-test-id": testId ? `${testId}-input` : null,
                             type: "text",
-                            className: cn(Input_module.input, clearable && Input_module.clearable, error && Input_module.error, inputClassName),
+                            className: cn(Input_module.input, largeStyle, paddingClass, error && Input_module.error, inputClassName),
                             disabled: disabled,
                             onBlur: handleBlur,
                             ...error ? {
                                 'data-error': true
                             } : {}
                         }),
-                        clearable && inputProps.value && !disabled && /*#__PURE__*/ jsx("span", {
-                            "data-test-id": testId ? `${testId}-input-clear` : null,
-                            className: Input_module.clearIcon,
-                            onMouseDown: handleClearMouseDown,
-                            onClick: handleClear,
-                            children: /*#__PURE__*/ jsx(RemoveClose12Icon, {})
+                        showActions && /*#__PURE__*/ jsxs("div", {
+                            className: cn(Input_module.actions, largeStyle),
+                            children: [
+                                /*#__PURE__*/ jsxs("div", {
+                                    className: cn(Input_module.textActions, largeStyle),
+                                    children: [
+                                        showTextAction && /*#__PURE__*/ jsx("button", {
+                                            type: "button",
+                                            "data-test-id": testId ? `${testId}-text-action` : null,
+                                            className: Input_module.iconActionButton,
+                                            onMouseDown: handleActionMouseDown,
+                                            onKeyDown: handleActionKeyDown,
+                                            onClick: onTextActionClick,
+                                            children: textActionIcon
+                                        }),
+                                        showClear && /*#__PURE__*/ jsx(InputClear, {
+                                            testId: testId,
+                                            onClick: handleClear,
+                                            onMouseDown: handleActionMouseDown,
+                                            size: inputSize
+                                        })
+                                    ]
+                                }),
+                                showTrailing && /*#__PURE__*/ jsx("div", {
+                                    className: cn(Input_module.divider, largeStyle)
+                                }),
+                                showTrailing && /*#__PURE__*/ jsx("button", {
+                                    type: "button",
+                                    "data-test-id": testId ? `${testId}-trailing-action` : null,
+                                    className: Input_module.trailingActionButton,
+                                    onMouseDown: handleActionMouseDown,
+                                    onKeyDown: handleActionKeyDown,
+                                    onClick: onTrailingActionClick,
+                                    children: trailingActionIcon
+                                })
+                            ]
                         })
                     ]
                 })
             }),
-            info && /*#__PURE__*/ jsx(Text.Caption, {
-                className: Input_module.info,
-                colorToken: !disabled && error ? TextColor.critical : TextColor.secondary,
-                testId: testId ? `${testId}-info` : void 0,
-                children: info
+            /*#__PURE__*/ jsx(InfoBlock, {
+                info: info,
+                isInfoEllipsis: isInfoEllipsis,
+                testId: testId,
+                value: inputValue,
+                maxLength: maxLength,
+                disabled: disabled,
+                showCounterLimit: showCounterLimit,
+                error: error
             })
         ]
     });

package/dist/components/Input/Input.module.js

@@ -6,10 +6,26 @@ const Input_module = {
     required: "required-tL_0P7",
     inputWrapper: "inputWrapper-Z2MHzj",
     input: "input-abYkhJ",
-    clearable: "clearable-RaD0Fg",
+    large: "large-byNK0a",
     error: "error-LvRHQc",
-    clearIcon: "clearIcon-IsS0xJ",
+    actions: "actions-mGn9Sv",
+    iconActionButton: "iconActionButton-G0JpZw",
+    trailingActionButton: "trailingActionButton-anvK7V",
+    textActions: "textActions-wjiHob",
+    divider: "divider-MSupsj",
     label: "label-LenERt",
-    help: "help-i_fDqu"
+    help: "help-i_fDqu",
+    helpIcon: "helpIcon-MR3GpI",
+    infoBlock: "infoBlock-KVlxEN",
+    inputPaddingM: "inputPaddingM-vHiTSa",
+    inputPaddingL: "inputPaddingL-N8VHsb",
+    actionsPaddingOneM: "actionsPaddingOneM-ZKwigm",
+    actionsPaddingTwoM: "actionsPaddingTwoM-WD5Jt3",
+    actionsPaddingClearTrailM: "actionsPaddingClearTrailM-Lp4qkT",
+    actionsPaddingFullM: "actionsPaddingFullM-nwz6aQ",
+    actionsPaddingOneL: "actionsPaddingOneL-vxw7Bt",
+    actionsPaddingTwoL: "actionsPaddingTwoL-MIUbac",
+    actionsPaddingClearTrailL: "actionsPaddingClearTrailL-vQgKWL",
+    actionsPaddingFullL: "actionsPaddingFullL-b6pU4F"
 };
 export default Input_module;

package/dist/components/Input/Input_module.css

@@ -10,6 +10,7 @@
 .wrapper-oFEm9y .info-VucqZW {
   margin: 0;
   position: relative;
+  overflow: hidden;
 }
 
 .wrapper-oFEm9y .labelWrapper-VXBpmH {
@@ -19,7 +20,7 @@
 }
 
 .wrapper-oFEm9y .required-tL_0P7 {
-  color: var(--text-critical, #e50347);
+  color: var(--elements-critical, #e50347);
 }
 
 .wrapper-oFEm9y .inputWrapper-Z2MHzj {
@@ -45,9 +46,7 @@
 }
 
 .wrapper-oFEm9y .input-abYkhJ:focus-visible {
-  --input-shadow: var(--invert-accent-normal, #7eb4ff);
-  box-shadow: 0 0 4px 0 var(--input-shadow);
-  border: 1px solid var(--border-accent, #036ce5);
+  border: 1px solid var(--border-focused, #091739);
 }
 
 .wrapper-oFEm9y .input-abYkhJ {
@@ -56,15 +55,20 @@
   outline: none;
   width: 100%;
   height: 32px;
-  padding: 4px 10px 4px 11px;
 }
 
 .wrapper-oFEm9y .input-abYkhJ + span {
   color: var(--text-primary, #091739);
 }
 
-.wrapper-oFEm9y .input-abYkhJ.clearable-RaD0Fg {
-  padding: 4px 36px 4px 11px;
+.wrapper-oFEm9y .input-abYkhJ.large-byNK0a {
+  color: var(--text-primary, #091739);
+  height: 40px;
+  font-family: ALS Hauss, sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
 }
 
 .wrapper-oFEm9y .input-abYkhJ.error-LvRHQc, .wrapper-oFEm9y .input-abYkhJ.error-LvRHQc:hover, .wrapper-oFEm9y .input-abYkhJ.error-LvRHQc:focus {
@@ -92,23 +96,101 @@
   color: var(--text-tertiary, #9fa7af);
 }
 
-.wrapper-oFEm9y .clearIcon-IsS0xJ {
-  cursor: pointer;
-  height: 12px;
-  line-height: 12px;
+.wrapper-oFEm9y .actions-mGn9Sv {
+  align-items: center;
+  gap: 8px;
+  display: flex;
   position: absolute;
   top: 50%;
-  right: 16px;
-  transform: translate(0, -50%);
+  right: 8px;
+  transform: translateY(-50%);
+}
+
+.wrapper-oFEm9y .actions-mGn9Sv.large-byNK0a {
+  gap: 12px;
+}
+
+.wrapper-oFEm9y .actions-mGn9Sv.large-byNK0a .iconActionButton-G0JpZw, .wrapper-oFEm9y .actions-mGn9Sv.large-byNK0a .trailingActionButton-anvK7V {
+  padding: 5px;
+}
+
+.wrapper-oFEm9y .textActions-wjiHob {
+  gap: 4px;
+  display: flex;
+}
+
+.wrapper-oFEm9y .textActions-wjiHob.large-byNK0a {
+  gap: 8px;
+}
+
+.wrapper-oFEm9y .iconActionButton-G0JpZw {
+  box-sizing: border-box;
+  cursor: pointer;
+  color: var(--elements-normal, #5f6d79);
+  background: none;
+  border: 1px solid #0000;
+  border-radius: 4px;
+  outline: none;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  padding: 3px;
+  line-height: 0;
+  display: flex;
+}
+
+.wrapper-oFEm9y .iconActionButton-G0JpZw:hover, .wrapper-oFEm9y .iconActionButton-G0JpZw:active {
+  color: var(--elements-hover, #091739);
+}
+
+.wrapper-oFEm9y .iconActionButton-G0JpZw:focus-visible {
+  border-color: var(--border-focused, #091739);
+  color: var(--elements-hover, #091739);
+}
+
+.wrapper-oFEm9y .trailingActionButton-anvK7V {
+  box-sizing: border-box;
+  cursor: pointer;
+  color: var(--elements-normal, #5f6d79);
+  background: none;
+  border: 1px solid #0000;
+  border-radius: 4px;
+  outline: none;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  padding: 3px;
+  line-height: 0;
+  display: flex;
+}
+
+.wrapper-oFEm9y .trailingActionButton-anvK7V:hover {
+  background-color: var(--elements-chips-regular-hover, #d3d8ddb3);
+}
+
+.wrapper-oFEm9y .trailingActionButton-anvK7V:active {
+  background-color: var(--elements-chips-regular-pressed, #55607359);
+}
+
+.wrapper-oFEm9y .trailingActionButton-anvK7V:focus-visible {
+  border-color: var(--border-focused, #091739);
+  background-color: var(--elements-chips-regular-hover, #d3d8ddb3);
+  color: var(--elements-hover, #091739);
+}
+
+.wrapper-oFEm9y .divider-MSupsj {
+  background-color: var(--light-grey-400);
+  flex-shrink: 0;
+  width: 1px;
+  height: 16px;
+}
+
+.wrapper-oFEm9y .divider-MSupsj.large-byNK0a {
+  height: 20px;
 }
 
 .wrapper-oFEm9y .label-LenERt {
-  color: var(--text-primary, #091739);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  margin-bottom: 0;
-  display: inline-block;
-  overflow: hidden;
+  width: 100%;
 }
 
 .wrapper-oFEm9y .help-i_fDqu {
@@ -117,3 +199,58 @@
   right: -1px;
 }
 
+.wrapper-oFEm9y .helpIcon-MR3GpI {
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-end;
+  margin-left: 4px;
+  display: flex;
+}
+
+.wrapper-oFEm9y .infoBlock-KVlxEN {
+  justify-content: space-between;
+  gap: 4px;
+  width: 100%;
+  display: flex;
+}
+
+.inputPaddingM-vHiTSa {
+  padding: 4px 8px 4px 12px;
+}
+
+.inputPaddingL-N8VHsb {
+  padding: 8px 8px 8px 12px;
+}
+
+.actionsPaddingOneM-ZKwigm {
+  padding: 4px 36px 4px 12px;
+}
+
+.actionsPaddingTwoM-WD5Jt3 {
+  padding: 4px 60px 4px 12px;
+}
+
+.actionsPaddingClearTrailM-Lp4qkT {
+  padding: 4px 73px 4px 12px;
+}
+
+.actionsPaddingFullM-nwz6aQ {
+  padding: 4px 97px 4px 12px;
+}
+
+.actionsPaddingOneL-vxw7Bt {
+  padding: 8px 48px 8px 12px;
+}
+
+.actionsPaddingTwoL-MIUbac {
+  padding: 8px 84px 8px 12px;
+}
+
+.actionsPaddingClearTrailL-vQgKWL {
+  padding: 8px 101px 8px 12px;
+}
+
+.actionsPaddingFullL-b6pU4F {
+  padding: 8px 137px 8px 12px;
+}
+

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

@@ -0,0 +1,12 @@
+type InfoBlockProps = {
+    info?: string;
+    error?: boolean;
+    disabled?: boolean;
+    isInfoEllipsis?: boolean;
+    testId?: string;
+    showCounterLimit?: boolean;
+    maxLength?: number;
+    value?: string;
+};
+export declare const InfoBlock: ({ info, error, disabled, isInfoEllipsis, testId, maxLength, showCounterLimit, value, }: InfoBlockProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Info } from "../../Info/Info.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 })=>{
+    if (!info && !showCounterLimit && !maxLength) return null;
+    return /*#__PURE__*/ jsxs("div", {
+        className: Input_module.infoBlock,
+        children: [
+            info && /*#__PURE__*/ jsx("div", {
+                className: Input_module.info,
+                children: /*#__PURE__*/ jsx(Info, {
+                    info: info,
+                    error: error,
+                    disabled: disabled,
+                    isEllipsis: isInfoEllipsis,
+                    testId: testId
+                })
+            }),
+            showCounterLimit && maxLength && /*#__PURE__*/ jsx(Counter, {
+                testId: testId,
+                value: value,
+                hasHelp: false,
+                limit: maxLength
+            })
+        ]
+    });
+};
+export { InfoBlock };