@moysklad/uikit 28.1.0 → 31.20.0

package/dist/components/InputUnit/SelectUnit/SelectUnit_module.css

@@ -1,73 +1,65 @@
 .selectContainer-c1sZBO {
   align-items: center;
-  padding: 0 4px;
+  padding: 0 5px 0 6px;
   display: flex;
   overflow: hidden;
 }
 
-.selectContainer-c1sZBO .select-jGqAE0 {
+.select-jGqAE0 {
+  --select-unit-arrow-color: var(--elements-normal, #5f6d79);
   cursor: pointer;
   box-sizing: border-box;
+  width: 100%;
+  height: 20px;
+  color: var(--text-secondary, #5f6d79);
   border: 1px solid #0000;
+  border-radius: 4px;
   outline: none;
-  justify-content: space-between;
   align-items: center;
-  width: 100%;
-  height: 24px;
-  padding: 0 8px;
+  gap: 6px;
+  padding: 0 5px;
   display: flex;
 }
 
-.selectContainer-c1sZBO .select-jGqAE0:hover {
-  background-color: var(--light-grey-100);
-  border-radius: 4px;
+.select-jGqAE0:hover {
+  --select-unit-arrow-color: var(--elements-hover, #091739);
+  background-color: var(--elements-chips-regular-hover, #d3d8ddb3);
+  color: var(--text-primary, #091739);
 }
 
-.selectContainer-c1sZBO .select-jGqAE0:hover p {
-  color: var(--dark-grey-dark-900);
+.select-jGqAE0.focused-HYSAXe {
+  --select-unit-arrow-color: var(--elements-hover, #091739);
+  border: var(--elements-hover, #091739) solid 1px;
+  background-color: var(--elements-chips-regular-hover, #d3d8ddb3);
+  color: var(--text-primary, #091739);
 }
 
-.selectContainer-c1sZBO .select-jGqAE0:hover div svg path {
-  stroke: var(--dark-grey-dark-900);
-}
-
-.selectContainer-c1sZBO .select-jGqAE0:hover.focused-HYSAXe {
+.select-jGqAE0.focused-HYSAXe:hover {
   border: 1px solid #0000;
 }
 
-.selectContainer-c1sZBO .select-jGqAE0.focused-HYSAXe {
-  border: var(--dark-grey-dark-900) solid 1px;
-  background-color: var(--light-grey-100);
-  border-radius: 4px;
+.select-jGqAE0:active, .select-jGqAE0.open-Wwk6BC {
+  --select-unit-arrow-color: var(--elements-hover, #091739);
+  background-color: var(--elements-chips-regular-pressed, #55607359);
+  color: var(--text-primary, #091739);
 }
 
-.selectContainer-c1sZBO .select-jGqAE0 .selectArrow-uYpbBJ {
+.selectArrow-uYpbBJ {
   height: 16px;
-  padding: 0 0 0 6px;
-}
-
-.selectContainer-c1sZBO .select-jGqAE0 .selectArrow-uYpbBJ svg path {
-  stroke: #797979;
-}
-
-.selectContainer-c1sZBO .select-jGqAE0 .selectArrow-uYpbBJ:disabled {
-  cursor: default;
-}
-
-.selectContainer-c1sZBO .select-jGqAE0 .selectArrow-uYpbBJ:disabled svg path {
-  stroke: #797979;
+  color: var(--select-unit-arrow-color);
 }
 
-.selectContainer-c1sZBO .disabled-TH3t_6 {
+.disabled-TH3t_6 {
   cursor: default;
 }
 
 .unitValueContainer-VVSJeN {
-  padding: 0 12px;
+  color: var(--text-secondary, #5f6d79);
+  padding: 0 11px 0 12px;
 }
 
 .divider-VbjuvN {
-  background-color: var(--light-grey-400);
+  background-color: var(--border-normal, #d1d6df);
   width: 1px;
   height: 16px;
 }

package/dist/components/InputUnit/SelectUnit/type.d.ts

@@ -3,6 +3,7 @@ import type { IHasTabIndex, IHasTestId } from '../../../common';
 import type { ISelectOption } from '../../Select/Select';
 export interface SelectUnitProps extends IHasTestId, IHasTabIndex {
     disabled?: boolean;
+    isOpen?: boolean;
     onToggle?: () => void;
     defaultUnit?: string;
     selectedUnitOption?: ISelectOption;

package/dist/components/InputUnit/Unit/Unit.js

@@ -1,12 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../../../common/css/cn.js";
-import { Text, TextColor } from "../../Text/Text.js";
+import { Text } from "../../Text/Text.js";
 import Unit_module from "./Unit.module.js";
 const Unit = ({ value, className })=>/*#__PURE__*/ jsx("div", {
         className: cn(className, Unit_module.unitValueContainer),
         children: /*#__PURE__*/ jsx(Text.Body, {
             className: Unit_module.unitValue,
-            colorToken: TextColor.secondary,
             children: value
         })
     });

package/dist/components/InputUnit/Unit/Unit_module.css

@@ -7,6 +7,7 @@
 }
 
 .unitValue-O7t91Y {
+  color: inherit;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;

package/dist/components/Label/Label.d.ts

@@ -6,6 +6,7 @@ interface LabelProps extends IHasTestId {
     htmlFor?: HTMLLabelElement['htmlFor'];
     onMouseDown?: MouseEventHandler<HTMLElement>;
 }
+/** @deprecated Используйте FieldLabel */
 export declare const Label: {
     ({ label, required, testId, htmlFor, onMouseDown, }: LabelProps): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;

package/dist/components/LabelValue/LabelValue.d.ts

@@ -1,14 +1,7 @@
-import { type ComponentPropsWithoutRef, type CSSProperties, type FocusEventHandler, type HTMLAttributes, type KeyboardEventHandler, type ReactNode, type Ref } from 'react';
+import { type ComponentPropsWithoutRef, type CSSProperties, type HTMLAttributes, type KeyboardEventHandler, type ReactNode, type Ref } from 'react';
+import { type ValueOf } from '../../common';
 import { Help } from '../Help/Help';
-export interface ValueBlockContentArgs {
-    valueNode: ReactNode;
-    isLabelOverflow: boolean;
-    valueBlockRef?: Ref<HTMLDivElement> | null;
-    onFocus: FocusEventHandler<HTMLDivElement>;
-    onBlur: FocusEventHandler<HTMLDivElement>;
-    onKeyDown: KeyboardEventHandler<HTMLDivElement>;
-    onKeyUp: KeyboardEventHandler<HTMLDivElement>;
-}
+import type { ValueBlockContentArgs, ValueBlockProps } from './types';
 export interface SharedLabelValueProps extends HTMLAttributes<HTMLDivElement> {
     label: string;
     className?: string;
@@ -19,9 +12,15 @@ export interface SharedLabelValueProps extends HTMLAttributes<HTMLDivElement> {
     helpPopupContent?: ComponentPropsWithoutRef<typeof Help>['popup'];
     dropdownClassName?: string;
     dropdownStyles?: CSSProperties;
+    labelRef?: Ref<HTMLElement>;
     valueBlockContent?: (args: ValueBlockContentArgs) => ReactNode;
     onDropdownClose?: () => void;
 }
+export declare const LabelValueVariant: {
+    readonly DEFAULT: "default";
+    readonly LINK: "link";
+};
+export type LabelValueVariantType = ValueOf<typeof LabelValueVariant>;
 export interface LabelValueProps extends SharedLabelValueProps {
     renderIcon?: (params: {
         stroke?: string;
@@ -31,12 +30,17 @@ export interface LabelValueProps extends SharedLabelValueProps {
     valueBlockRef?: Ref<HTMLDivElement>;
     customDropdown?: boolean;
     isCustomDropdownOpen?: boolean;
+    valueVariant?: LabelValueVariantType;
     dropdownContent?: (args: {
         closeHandler: () => void;
         closeByKeyboardHandler: (event: KeyboardEvent | FocusEvent) => void;
     }) => ReactNode;
     customDropdownTrigger?: ReactNode;
     onValueKeyUp?: KeyboardEventHandler;
+    renderCustomValueBlock?: (props: ValueBlockProps & {
+        ref?: Ref<HTMLDivElement>;
+    }) => ReactNode;
+    iconFollowsValueHover?: boolean;
     onDropdownClose?: () => void;
     onDropdownOpen?: () => void;
 }

package/dist/components/LabelValue/LabelValue.js

@@ -1,22 +1,29 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useRef, useState } from "react";
+import { forwardRef, useRef, useState } from "react";
 import { cn } from "../../common/index.js";
 import { mergeRefs } from "../../common/react/mergeRefs.js";
+import { FieldLabel } from "../_shared/FieldLabel/FieldLabel.js";
 import { Dropdown, useDropdown } from "../Dropdown/Dropdown.js";
-import { Hint } from "../Hint/Hint.js";
-import { Text } from "../Text/Text.js";
-import { useTooltip } from "./hooks/useTooltip.js";
+import { HelpSize } from "../Help/Help.js";
+import { TextColor, TextVariant } from "../Text/Text.js";
+import { useIsElementOverflowing } from "../../hooks/index.js";
+import { ValueBlock } from "./ValueBlock/ValueBlock.js";
 import { OPEN_BUTTONS } from "./consts.js";
-import { HelpButton } from "./HelpButton/index.js";
-import { ValueBlock } from "./ValueBlock/index.js";
 import LabelValue_module from "./LabelValue.module.js";
-const LabelValue = /*#__PURE__*/ forwardRef(({ isEmpty, renderIcon, label, value, disabled, error, className, required = false, testId, helpPopupContent, valueBlockRef = null, customDropdown, isCustomDropdownOpen = false, customDropdownTrigger, valueBlockContent, dropdownContent, onFocus, onBlur, onValueKeyUp, onDropdownClose, onDropdownOpen, ...props }, forwardedRef)=>{
+const LabelValueVariant = {
+    DEFAULT: 'default',
+    LINK: 'link'
+};
+const variantClassNameMap = {
+    [LabelValueVariant.LINK]: LabelValue_module.containerLink
+};
+const LabelValue = /*#__PURE__*/ forwardRef(({ isEmpty, renderIcon, label, value, disabled, error, className, required = false, testId, helpPopupContent, valueBlockRef = null, customDropdown, isCustomDropdownOpen = false, customDropdownTrigger, labelRef, valueBlockContent, dropdownContent, onFocus, onBlur, onValueKeyUp, onDropdownClose, renderCustomValueBlock, iconFollowsValueHover = true, valueVariant = LabelValueVariant.DEFAULT, onDropdownOpen, ...props }, forwardedRef)=>{
     const valueBlockInnerRef = useRef(null);
-    const labelTooltip = useTooltip({
-        targetText: label
-    });
     const labelValueDropdown = useDropdown();
-    const [isLabelHintVisible, setIsLabelHintVisible] = useState(false);
+    const labelOverflowing = useIsElementOverflowing([
+        label
+    ]);
+    const [isLabelOverflowing, setIsLabelOverflowing] = useState(false);
     const isDropdownOpen = customDropdown ? isCustomDropdownOpen : labelValueDropdown.open;
     const openDropdown = ()=>{
         if (!disabled) {
@@ -48,16 +55,33 @@ const LabelValue = /*#__PURE__*/ forwardRef(({ isEmpty, renderIcon, label, value
         props.onClick?.(event);
         openDropdown();
     };
-    useEffect(()=>{
-        if (isDropdownOpen) setIsLabelHintVisible(false);
-    }, [
-        isDropdownOpen
+    const valueBlockMergedRef = mergeRefs([
+        valueBlockRef,
+        valueBlockInnerRef
     ]);
+    const valueBlockProps = {
+        ref: valueBlockMergedRef,
+        testId,
+        value,
+        label,
+        disabled,
+        error,
+        isEmpty,
+        needShowLabelTooltip: isLabelOverflowing,
+        forceHideTooltip: isDropdownOpen,
+        onBlur,
+        onFocus,
+        onValueKeyDown: handleValueKeyDown,
+        onValueKeyUp: handleValueKeyUp,
+        renderIcon,
+        valueBlockContent,
+        isNeedShowLabelTooltip: labelOverflowing.getIsOverflowing
+    };
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsxs("div", {
                 ...props,
-                className: cn(LabelValue_module.container, className, isEmpty && LabelValue_module.empty, error && LabelValue_module.error, disabled && LabelValue_module.disabled),
+                className: cn(LabelValue_module.container, variantClassNameMap[valueVariant], iconFollowsValueHover && LabelValue_module.iconFollowsValueHover, className, isEmpty && LabelValue_module.empty, error && LabelValue_module.error, disabled && LabelValue_module.disabled),
                 ref: mergeRefs([
                     labelValueDropdown.triggerRef,
                     forwardedRef
@@ -69,63 +93,26 @@ const LabelValue = /*#__PURE__*/ forwardRef(({ isEmpty, renderIcon, label, value
                     /*#__PURE__*/ jsxs("div", {
                         className: LabelValue_module.labelValueBlock,
                         children: [
-                            /*#__PURE__*/ jsxs("div", {
-                                className: LabelValue_module.labelBlock,
-                                children: [
-                                    /*#__PURE__*/ jsxs("div", {
-                                        className: LabelValue_module.textWithRequiredMark,
-                                        children: [
-                                            /*#__PURE__*/ jsx(Hint, {
-                                                visible: isLabelHintVisible,
-                                                onVisibleChange: setIsLabelHintVisible,
-                                                overlay: /*#__PURE__*/ jsx(Text.Body, {
-                                                    testId: testId ? `${testId}-label-hint-text` : void 0,
-                                                    colorToken: "invert",
-                                                    className: LabelValue_module.hintText,
-                                                    children: label
-                                                }),
-                                                trigger: labelTooltip.needShowTooltip ? 'hover' : [],
-                                                overlayClassName: LabelValue_module.hint,
-                                                children: /*#__PURE__*/ jsx(Text.Caption, {
-                                                    ref: labelTooltip.targetRef,
-                                                    className: cn(LabelValue_module.overflowText, LabelValue_module.labelText),
-                                                    testId: testId ? `${testId}-label` : void 0,
-                                                    colorToken: "secondary",
-                                                    children: label
-                                                })
-                                            }),
-                                            required && /*#__PURE__*/ jsx(Text.Caption, {
-                                                testId: testId ? `${testId}-required-mark` : void 0,
-                                                colorToken: "critical",
-                                                children: "*"
-                                            })
-                                        ]
-                                    }),
-                                    !!helpPopupContent && /*#__PURE__*/ jsx(HelpButton, {
-                                        helpPopupContent: helpPopupContent,
-                                        className: LabelValue_module.helpButtonContainer
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ jsx(ValueBlock, {
-                                ref: mergeRefs([
-                                    valueBlockRef,
-                                    valueBlockInnerRef
+                            /*#__PURE__*/ jsx(FieldLabel, {
+                                label: label,
+                                labelRef: mergeRefs([
+                                    labelOverflowing.ref,
+                                    labelRef
                                 ]),
+                                required: required && !disabled,
                                 testId: testId,
-                                value: value,
-                                label: label,
-                                disabled: disabled,
-                                error: error,
-                                isEmpty: isEmpty,
-                                needShowLabelTooltip: labelTooltip.needShowTooltip,
-                                forceHideTooltip: isDropdownOpen,
-                                onBlur: onBlur,
-                                onFocus: onFocus,
-                                onValueKeyDown: handleValueKeyDown,
-                                onValueKeyUp: handleValueKeyUp,
-                                renderIcon: renderIcon,
-                                valueBlockContent: valueBlockContent
+                                variant: TextVariant.caption,
+                                colorToken: TextColor.secondary,
+                                onOverflowChange: setIsLabelOverflowing,
+                                helpProps: helpPopupContent ? {
+                                    popup: helpPopupContent
+                                } : void 0,
+                                className: LabelValue_module.fieldLabel,
+                                helpButtonClassName: LabelValue_module.helpButtonContainer,
+                                helpSize: HelpSize.S
+                            }),
+                            renderCustomValueBlock ? renderCustomValueBlock(valueBlockProps) : /*#__PURE__*/ jsx(ValueBlock, {
+                                ...valueBlockProps
                             })
                         ]
                     })
@@ -158,4 +145,4 @@ const LabelValue = /*#__PURE__*/ forwardRef(({ isEmpty, renderIcon, label, value
     });
 });
 LabelValue.displayName = 'LabelValue';
-export { LabelValue };
+export { LabelValue, LabelValueVariant };

package/dist/components/LabelValue/LabelValue.module.js

@@ -1,21 +1,24 @@
 import "./LabelValue_module.css";
 const LabelValue_module = {
     container: "container-JJ318U",
+    valueBlock: "valueBlock-UgP3Nr",
     disabled: "disabled-OM6bi0",
+    containerLink: "containerLink-AscQ6D",
     error: "error-3roRLg",
-    valueBlock: "valueBlock-UgP3Nr",
     valueText: "valueText-JIWgmB",
-    iconContainer: "iconContainer-ZsK9qp",
     helpButtonContainer: "helpButtonContainer-C1lSsU",
+    iconContainer: "iconContainer-ZsK9qp",
+    fieldLabel: "fieldLabel-lu3Dux",
+    iconFollowsValueHover: "iconFollowsValueHover-mUM_uO",
     labelValueBlock: "labelValueBlock-pbU3kQ",
     empty: "empty-VyYkn0",
     labelBlock: "labelBlock-p9nrQ3",
     textWithRequiredMark: "textWithRequiredMark-j_8oxd",
     labelText: "labelText-g0yIDb",
     overflowText: "overflowText-NCe0S_",
-    hint: "hint-qf0pZB",
-    hintText: "hintText-kzd4VM",
     hintTextWrapper: "hintTextWrapper-Hna0Tg",
+    hintText: "hintText-kzd4VM",
+    hint: "hint-qf0pZB",
     dropdown: "dropdown-vNmAaD",
     dropdownContent: "dropdownContent-To8e0l"
 };

package/dist/components/LabelValue/LabelValue_module.css

@@ -1,15 +1,7 @@
-.container-JJ318U:not(.disabled-OM6bi0, .error-3roRLg, :active) .valueBlock-UgP3Nr:hover .valueText-JIWgmB, .container-JJ318U:not(.disabled-OM6bi0, .error-3roRLg, :active) .valueBlock-UgP3Nr:hover .iconContainer-ZsK9qp {
-  color: var(--button-primary-hover, #0b7cff);
-}
-
 .container-JJ318U:active .valueBlock-UgP3Nr:focus {
   outline: none;
 }
 
-.container-JJ318U:active:not(.disabled-OM6bi0, .error-3roRLg, :has(.helpButtonContainer-C1lSsU:active)) .valueBlock-UgP3Nr .valueText-JIWgmB, .container-JJ318U:active:not(.disabled-OM6bi0, .error-3roRLg, :has(.helpButtonContainer-C1lSsU:active)) .valueBlock-UgP3Nr .iconContainer-ZsK9qp {
-  color: var(--button-primary-pressed, #005dc9);
-}
-
 .container-JJ318U.disabled-OM6bi0 {
   cursor: default;
 }
@@ -19,6 +11,26 @@
   box-shadow: none;
 }
 
+.container-JJ318U:not(.containerLink-AscQ6D):not(.disabled-OM6bi0, .error-3roRLg, :active) .valueBlock-UgP3Nr:hover .valueText-JIWgmB {
+  color: var(--button-primary-hover, #0b7cff);
+}
+
+.container-JJ318U:not(.containerLink-AscQ6D):active:not(.disabled-OM6bi0, .error-3roRLg, :has(.helpButtonContainer-C1lSsU:active)) .valueBlock-UgP3Nr .valueText-JIWgmB, .container-JJ318U:not(.containerLink-AscQ6D):active:not(.disabled-OM6bi0, .error-3roRLg, :has(.helpButtonContainer-C1lSsU:active)) .valueBlock-UgP3Nr .iconContainer-ZsK9qp {
+  color: var(--button-primary-pressed, #005dc9);
+}
+
+.container-JJ318U.containerLink-AscQ6D:not(.disabled-OM6bi0, .error-3roRLg, :active) .valueText-JIWgmB:hover {
+  color: var(--button-primary-hover, #0b7cff);
+}
+
+.container-JJ318U.containerLink-AscQ6D:not(.disabled-OM6bi0, .error-3roRLg) .valueText-JIWgmB:active, .container-JJ318U.containerLink-AscQ6D .fieldLabel-lu3Dux:active .valueText-JIWgmB, .container-JJ318U.containerLink-AscQ6D:not(.disabled-OM6bi0, .error-3roRLg):has(.fieldLabel-lu3Dux:active) .valueText-JIWgmB {
+  color: var(--button-primary-pressed, #005dc9);
+}
+
+.container-JJ318U.iconFollowsValueHover-mUM_uO:not(.disabled-OM6bi0, .error-3roRLg, :active) .valueBlock-UgP3Nr:hover .iconContainer-ZsK9qp {
+  color: var(--button-primary-hover, #0b7cff);
+}
+
 .labelValueBlock-pbU3kQ {
   flex-direction: column;
   gap: 2px;
@@ -29,9 +41,10 @@
   color: var(--button-primary-normal, #036ce5);
 }
 
-.valueBlock-UgP3Nr:focus {
+.valueBlock-UgP3Nr:focus-visible {
   outline: 1px solid var(--elements-hover, #091739);
-  border-radius: 1px;
+  outline-offset: -1px;
+  border-radius: 2px;
 }
 
 .valueText-JIWgmB {
@@ -48,6 +61,10 @@
   line-height: 20px;
 }
 
+.valueText-JIWgmB:focus-visible {
+  outline: 1px solid var(--elements-hover, #091739);
+}
+
 .labelBlock-p9nrQ3 {
   justify-content: flex-start;
   align-items: center;
@@ -94,25 +111,25 @@
   display: block;
 }
 
-.iconContainer-ZsK9qp {
-  justify-content: center;
-  align-items: center;
+.hintTextWrapper-Hna0Tg {
+  flex-direction: column;
   gap: 4px;
   display: flex;
 }
 
-.hint-qf0pZB {
-  box-sizing: border-box;
+.hintText-kzd4VM {
   overflow-wrap: break-word;
-  max-width: 300px;
 }
 
-.hintText-kzd4VM {
+.hint-qf0pZB {
+  box-sizing: border-box;
   overflow-wrap: break-word;
+  max-width: 300px;
 }
 
-.hintTextWrapper-Hna0Tg {
-  flex-direction: column;
+.iconContainer-ZsK9qp {
+  justify-content: center;
+  align-items: center;
   gap: 4px;
   display: flex;
 }

package/dist/components/LabelValue/ValueBlock/ValueBlock.d.ts

@@ -0,0 +1,2 @@
+import type { ValueBlockProps } from '../types';
+export declare const ValueBlock: import("react").ForwardRefExoticComponent<ValueBlockProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/LabelValue/ValueBlock/ValueBlock.js

@@ -0,0 +1,82 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { getOptionalTestId } from "../../../common/index.js";
+import { mergeRefs } from "../../../common/react/mergeRefs.js";
+import { useValueBlock } from "../hooks/useValueBlock.js";
+import { ValueBlockWrapper } from "../ValueBlockWrapper.js";
+import { ValueIcon } from "../ValueIcon.js";
+import { ValueText } from "../ValueText.js";
+import { ValueTextWithHint } from "../ValueTextWithHint.js";
+const getValueTextVariant = (args)=>{
+    if (args.error) return 'critical';
+    if (args.isEmpty && !args.disabled) return 'buttonPrimary';
+    return 'primary';
+};
+const ValueBlock = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    const { isValueHintForceDisplayed, valueBlockInnerRef, valueTooltip, handleBlur, handleFocus, onHintVisibilityChange, icon, isHintVisible } = useValueBlock({
+        value: props.value,
+        forceHideTooltip: props.forceHideTooltip,
+        onBlur: props.onBlur,
+        onFocus: props.onFocus,
+        error: props.error,
+        isCustomValueBlock: !!props.valueBlockContent,
+        renderIcon: props.renderIcon,
+        disabled: props.disabled
+    });
+    const valueIcon = /*#__PURE__*/ jsx(ValueIcon, {
+        children: icon ?? null
+    });
+    const valueText = /*#__PURE__*/ jsx(ValueText, {
+        as: "span",
+        ref: valueTooltip.ref,
+        colorVariant: getValueTextVariant({
+            disabled: props.disabled,
+            error: props.error,
+            isEmpty: props.isEmpty
+        }),
+        testId: props.testId,
+        value: props.value
+    });
+    const isShowLabelTooltip = ()=>(props.isNeedShowLabelTooltip?.() && isValueHintForceDisplayed) ?? false;
+    if (props.valueBlockContent) return props.valueBlockContent({
+        valueNode: /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                valueText,
+                valueIcon
+            ]
+        }),
+        isLabelOverflow: props.needShowLabelTooltip ?? false,
+        valueBlockRef: forwardedRef,
+        onBlur: handleBlur,
+        onFocus: handleFocus,
+        onKeyDown: (event)=>props.onValueKeyDown?.(event),
+        onKeyUp: (event)=>props.onValueKeyUp?.(event),
+        getIsLabelOverflow: isShowLabelTooltip
+    });
+    return /*#__PURE__*/ jsxs(ValueBlockWrapper, {
+        testId: getOptionalTestId(props.testId, 'value-block'),
+        ref: mergeRefs([
+            forwardedRef,
+            valueBlockInnerRef
+        ]),
+        tabIndex: props.disabled ? void 0 : 0,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onKeyUp: props.onValueKeyUp,
+        onKeyDown: props.onValueKeyDown,
+        children: [
+            /*#__PURE__*/ jsx(ValueTextWithHint, {
+                isHintVisible: isHintVisible,
+                label: props.label,
+                value: props.value,
+                onHintVisibilityChange: onHintVisibilityChange,
+                testId: props.testId,
+                isShowLabelTooltip: isShowLabelTooltip,
+                children: valueText
+            }),
+            valueIcon
+        ]
+    });
+});
+ValueBlock.displayName = 'ValueBlock';
+export { ValueBlock };

package/dist/components/LabelValue/ValueBlockWrapper.d.ts

@@ -0,0 +1,5 @@
+import { type HTMLAttributes } from 'react';
+import { type IHasTestId } from '../../common';
+export declare const ValueBlockWrapper: import("react").ForwardRefExoticComponent<IHasTestId & HTMLAttributes<HTMLDivElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/LabelValue/ValueBlockWrapper.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../common/index.js";
+import LabelValue_module from "./LabelValue.module.js";
+const ValueBlockWrapper = /*#__PURE__*/ forwardRef(({ children, testId, className, ...rest }, ref)=>/*#__PURE__*/ jsx("div", {
+        ...rest,
+        ref: ref,
+        "data-test-id": testId,
+        className: cn(LabelValue_module.valueBlock, className),
+        children: children
+    }));
+ValueBlockWrapper.displayName = 'ValueBlockWrapper';
+export { ValueBlockWrapper };

package/dist/components/LabelValue/ValueIcon.d.ts

@@ -0,0 +1,4 @@
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+type Props = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+export declare const ValueIcon: ({ children, className, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/LabelValue/ValueIcon.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../common/index.js";
+import LabelValue_module from "./LabelValue.module.js";
+const ValueIcon = ({ children, className, ...rest })=>/*#__PURE__*/ jsx("div", {
+        ...rest,
+        className: cn(LabelValue_module.iconContainer, className),
+        children: children
+    });
+export { ValueIcon };

package/dist/components/LabelValue/ValueText.d.ts

@@ -0,0 +1,10 @@
+import { type ComponentPropsWithoutRef, type ElementType } from 'react';
+import { type ColorVariant } from '../Typography/utils';
+type Props<T extends ElementType = ElementType> = {
+    value: string | number;
+    testId?: string;
+    colorVariant?: ColorVariant;
+    as?: T;
+} & ComponentPropsWithoutRef<T>;
+export declare const ValueText: import("react").ForwardRefExoticComponent<Omit<Props<ElementType>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+export {};

package/dist/components/LabelValue/ValueText.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../common/index.js";
+import { getTypographyStyle } from "../Typography/utils.js";
+import LabelValue_module from "./LabelValue.module.js";
+const ValueText = /*#__PURE__*/ forwardRef(({ value, testId, colorVariant, as: Component = 'span', className, style, ...restProps }, ref)=>{
+    const ComponentTag = Component;
+    return /*#__PURE__*/ jsx(ComponentTag, {
+        ref: ref,
+        className: cn(LabelValue_module.valueText, LabelValue_module.overflowText, className),
+        style: {
+            ...getTypographyStyle({
+                colorVariableName: '--value-text-color',
+                colorVariant
+            }),
+            ...style
+        },
+        "data-test-id": testId ? `${testId}-value` : void 0,
+        ...restProps,
+        children: value
+    });
+});
+ValueText.displayName = 'ValueText';
+export { ValueText };