@moysklad/uikit 28.1.0 → 30.4.0

package/dist/components/InputClear/InputClear.d.ts

@@ -1,11 +1,14 @@
 import type React from 'react';
 import { type IHasTestId } from '../../common/types';
 interface InputClearProps extends IHasTestId {
-    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onMouseDown?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    tabIndex?: number;
     className?: string;
+    size?: 'L' | 'M';
 }
 export declare const InputClear: {
-    ({ onClick, className, testId }: InputClearProps): import("react/jsx-runtime").JSX.Element;
+    ({ testId, tabIndex, className, onClick, onMouseDown, size, }: InputClearProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/dist/components/InputClear/InputClear.js

@@ -1,12 +1,18 @@
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../../common/css/cn.js";
-import { RemoveClose12Icon } from "../../icon/index.js";
+import { RemoveClose12Icon, RemoveCloseIcon16Icon } from "../../icon/index.js";
 import InputClear_module from "./InputClear.module.js";
-const InputClear = ({ onClick, className, testId })=>/*#__PURE__*/ jsx("div", {
-        className: cn(InputClear_module.main, className),
+const InputClear = ({ testId, tabIndex, className, onClick, onMouseDown, size = 'M' })=>/*#__PURE__*/ jsx("button", {
+        type: "button",
+        className: cn(InputClear_module.main, 'L' === size && InputClear_module.large, className),
         onClick: onClick,
+        onMouseDown: onMouseDown,
+        tabIndex: tabIndex,
         "data-test-id": testId ? `${testId}-input-clear` : 'input-clear',
-        children: /*#__PURE__*/ jsx(RemoveClose12Icon, {})
+        children: /*#__PURE__*/ jsx("span", {
+            className: InputClear_module.icon,
+            children: 'L' === size ? /*#__PURE__*/ jsx(RemoveCloseIcon16Icon, {}) : /*#__PURE__*/ jsx(RemoveClose12Icon, {})
+        })
     });
 InputClear.displayName = 'InputClear';
 export { InputClear };

package/dist/components/InputClear/InputClear.module.js

@@ -1,5 +1,7 @@
 import "./InputClear_module.css";
 const InputClear_module = {
-    main: "main-hfNd9I"
+    main: "main-hfNd9I",
+    icon: "icon-PByNsE",
+    large: "large-tv6rtf"
 };
 export default InputClear_module;

package/dist/components/InputClear/InputClear_module.css

@@ -1,21 +1,34 @@
 .main-hfNd9I {
+  all: unset;
+  box-sizing: border-box;
   cursor: pointer;
-  background-color: inherit;
-  border: none;
+  width: 20px;
+  height: 20px;
+  color: var(--elements-normal, #5f6d79);
+  flex-shrink: 0;
   justify-content: center;
   align-items: center;
-  width: 26px;
-  min-width: 26px;
-  height: 32px;
-  padding: 0;
   display: flex;
 }
 
-.main-hfNd9I svg path {
-  stroke: var(--dark-grey-grey-800);
+.icon-PByNsE {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.large-tv6rtf {
+  width: 28px;
+  height: 28px;
+}
+
+.main-hfNd9I:hover, .main-hfNd9I:active {
+  color: var(--elements-hover, #091739);
 }
 
-.main-hfNd9I:hover svg path {
-  stroke: var(--dark-grey-dark-900);
+.main-hfNd9I:focus-visible {
+  color: var(--elements-hover, #091739);
+  border: 1px solid var(--border-focused, #091739);
+  border-radius: 4px;
 }
 

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

@@ -1,5 +1,6 @@
 import React, { type InputHTMLAttributes, type ReactNode } from 'react';
 import type { IHasTabIndex, IHasTestId } from '../../common/types';
+import type { HelpProps } from '../Help/Help';
 import type { ISelectOption } from '../Select/types';
 export interface InputUnitProps extends InputHTMLAttributes<HTMLInputElement>, IHasTestId, IHasTabIndex {
     value?: number;
@@ -27,6 +28,8 @@ export interface InputUnitProps extends InputHTMLAttributes<HTMLInputElement>, I
     onClear?: () => void;
     onChangeValue?: (value?: number) => void;
     onUnitChange?: (option: ISelectOption) => void;
+    helpProps?: Omit<HelpProps, 'testId'>;
+    /** @deprecated Используйте `helpProps` */
     helpComponent?: ReactNode;
 }
 export declare const InputUnit: React.ForwardRefExoticComponent<InputUnitProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/InputUnit/InputUnit.js

@@ -5,18 +5,19 @@ 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 { Label } from "../Label/Label.js";
 import { OptionsList } from "../Select/OptionsList/OptionsList.js";
+import { TextColor } from "../Text/Text.js";
 import { useId } from "../../hooks/useId/index.js";
 import { useIsElementOverflowing } from "../../hooks/useIsElementOverflowing/index.js";
 import { isValidNumber } from "../../utils/format/isValidNumber.js";
 import { handleFloatKeyDown } from "../../utils/keyDown/handleFloatKeyDown.js";
 import { SelectUnit } from "./SelectUnit/SelectUnit.js";
 import InputUnit_module from "./InputUnit.module.js";
-const InputUnit = /*#__PURE__*/ forwardRef(({ testId, value: valueProp, tabIndex = 0, className, fieldRowClassName, label, info, required, error, warning, disabled, clearable, dropdownZIndex, step = 1, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER, lengthIntegerPart = Number.MAX_SAFE_INTEGER, lengthFractionalPart = 0, autoCompleteText, autoCompleteValue, defaultUnit, selectedUnitOption, unitOptions, onClear, onUnitChange, onChangeValue, helpComponent, onKeyDown = handleFloatKeyDown, ...inputProps }, ref)=>{
+const InputUnit = /*#__PURE__*/ forwardRef(({ testId, value: valueProp, tabIndex = 0, className, fieldRowClassName, label, info, required, error, warning, disabled, clearable, dropdownZIndex, step = 1, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER, lengthIntegerPart = Number.MAX_SAFE_INTEGER, lengthFractionalPart = 0, autoCompleteText, autoCompleteValue, defaultUnit, selectedUnitOption, unitOptions, onClear, onUnitChange, onChangeValue, helpProps, helpComponent, onKeyDown = handleFloatKeyDown, ...inputProps }, ref)=>{
     const [value, setValue] = useState(void 0 === valueProp ? '' : String(valueProp));
     const [isFocused, setIsFocused] = useState(false);
     const [cursor, setCursor] = useState(null);
@@ -33,8 +34,9 @@ const InputUnit = /*#__PURE__*/ forwardRef(({ testId, value: valueProp, tabIndex
         valueProp
     ]);
     const inputId = useId(inputProps.id);
-    const showClearButton = clearable && value && !disabled;
+    const showClearButton = Boolean(clearable && value && !disabled);
     const showAutoCompleteButton = void 0 !== autoCompleteValue && !clearable && !disabled;
+    const showUnitSelector = Boolean(defaultUnit || selectedUnitOption);
     const { ref: inputRef, isOverflowing: isOverflowingInput } = useIsElementOverflowing([
         value,
         clearable
@@ -75,7 +77,7 @@ const InputUnit = /*#__PURE__*/ forwardRef(({ testId, value: valueProp, tabIndex
     const handleClear = ()=>{
         handleChangeValue?.('');
         onClear?.();
-        if (isFocused) inputRef.current?.focus();
+        inputRef.current?.focus();
     };
     const handleAutoCompleteClick = ()=>{
         handleChangeValue(String(autoCompleteValue || 0));
@@ -116,10 +118,9 @@ const InputUnit = /*#__PURE__*/ forwardRef(({ testId, value: valueProp, tabIndex
         setIsFocused(true);
         inputProps.onFocus?.(event);
     };
-    const handleMouseDown = (event)=>{
+    const handleClearMouseDown = (event)=>{
         event.stopPropagation();
         event.preventDefault();
-        handleClear();
     };
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
@@ -127,16 +128,19 @@ const InputUnit = /*#__PURE__*/ forwardRef(({ testId, value: valueProp, tabIndex
                 "data-test-id": testId,
                 className: cn(InputUnit_module.wrapper, className),
                 children: [
-                    /*#__PURE__*/ jsx(Label, {
+                    /*#__PURE__*/ jsx(FieldLabel, {
                         label: label,
                         required: required,
-                        htmlFor: inputId
+                        htmlFor: inputId,
+                        testId: testId,
+                        className: InputUnit_module.label,
+                        helpProps: helpProps
                     }),
                     /*#__PURE__*/ jsx(FieldRow, {
                         className: fieldRowClassName,
                         helpComponent: helpComponent,
                         children: /*#__PURE__*/ jsxs("div", {
-                            className: cn(InputUnit_module.inputWrapper, disabled && InputUnit_module.disabled, error && !disabled && InputUnit_module.error, warning && !disabled && InputUnit_module.warning, isFocused && InputUnit_module.focused),
+                            className: cn(InputUnit_module.inputWrapper, disabled && InputUnit_module.disabled, error && !disabled && InputUnit_module.error, warning && !disabled && !error && InputUnit_module.warning, isFocused && InputUnit_module.focused),
                             children: [
                                 /*#__PURE__*/ jsx("input", {
                                     autoComplete: "off",
@@ -148,39 +152,42 @@ const InputUnit = /*#__PURE__*/ forwardRef(({ testId, value: valueProp, tabIndex
                                     ref: inputRef,
                                     disabled: disabled,
                                     "data-test-id": testId ? `${testId}-input` : null,
-                                    className: cn(InputUnit_module.input, clearable && InputUnit_module.clearable, error && InputUnit_module.error),
+                                    className: cn(InputUnit_module.input, showClearButton && InputUnit_module.clearable),
                                     onFocus: handleFocus,
                                     onBlur: ()=>setIsFocused(false),
                                     type: "text",
                                     onKeyDown: handleKeyDown,
                                     onChange: handleChange
                                 }),
-                                showClearButton && /*#__PURE__*/ jsx(InputClear, {
-                                    onClick: handleMouseDown,
-                                    testId: testId
+                                showClearButton && /*#__PURE__*/ jsx("span", {
+                                    className: cn(showUnitSelector ? InputUnit_module.clearButtonUnitOffset : InputUnit_module.clearButtonOffset),
+                                    children: /*#__PURE__*/ jsx(InputClear, {
+                                        onClick: handleClear,
+                                        onMouseDown: handleClearMouseDown,
+                                        tabIndex: tabIndex,
+                                        testId: testId
+                                    })
                                 }),
-                                showAutoCompleteButton && /*#__PURE__*/ jsxs(Chip, {
-                                    isActive: true,
-                                    onClick: handleAutoCompleteClick,
-                                    className: cn(InputUnit_module.autoComplete),
-                                    isTextEllipsis: true,
-                                    tabIndex: -1,
+                                showAutoCompleteButton && /*#__PURE__*/ jsx(Chip, {
+                                    selected: true,
+                                    onPress: handleAutoCompleteClick,
+                                    label: `${autoCompleteText} ${autoCompleteValue}`,
+                                    labelColorToken: TextColor.accent,
+                                    size: "compact",
+                                    className: InputUnit_module.autoComplete,
                                     testId: testId ? `${testId}-auto-complete` : 'auto-complete',
                                     disabled: '' !== value && Number(value) === autoCompleteValue,
-                                    children: [
-                                        autoCompleteText,
-                                        " ",
-                                        autoCompleteValue
-                                    ]
+                                    tabIndex: tabIndex
                                 }),
-                                /*#__PURE__*/ jsx("div", {
+                                showUnitSelector && /*#__PURE__*/ jsx("div", {
                                     className: cn(InputUnit_module.selectWrapper),
                                     ref: triggerRef,
                                     children: /*#__PURE__*/ jsx(SelectUnit, {
                                         testId: testId,
-                                        tabIndex: tabIndex <= 0 ? tabIndex : tabIndex + 1,
+                                        tabIndex: tabIndex,
                                         disabled: disabled,
                                         onToggle: handleToggle,
+                                        isOpen: open,
                                         triggerAriaProps: listboxTriggerAriaProps,
                                         defaultUnit: defaultUnit,
                                         selectedUnitOption: selectedUnitOption
@@ -189,12 +196,15 @@ const InputUnit = /*#__PURE__*/ forwardRef(({ testId, value: valueProp, tabIndex
                             ]
                         })
                     }),
-                    /*#__PURE__*/ jsx(Info, {
-                        info: info,
-                        error: error,
-                        warning: warning,
-                        disabled: disabled
-                    })
+                    info ? /*#__PURE__*/ jsx("div", {
+                        className: InputUnit_module.info,
+                        children: /*#__PURE__*/ jsx(Info, {
+                            info: info,
+                            error: error,
+                            warning: warning,
+                            disabled: disabled
+                        })
+                    }) : null
                 ]
             }),
             unitOptions && /*#__PURE__*/ jsx(Dropdown, {

package/dist/components/InputUnit/InputUnit.module.js

@@ -1,6 +1,7 @@
 import "./InputUnit_module.css";
 const InputUnit_module = {
     wrapper: "wrapper-e72fYe",
+    label: "label-sBTy3L",
     inputWrapper: "inputWrapper-LO6lHr",
     focused: "focused-m1zbMv",
     disabled: "disabled-AwnC6Y",
@@ -8,8 +9,12 @@ const InputUnit_module = {
     warning: "warning-EDcjvN",
     help: "help-QeCuV2",
     autoComplete: "autoComplete-_5ZaLO",
+    clearButtonOffset: "clearButtonOffset-rEaz5m",
+    clearButtonUnitOffset: "clearButtonUnitOffset-IuYmYc",
     selectWrapper: "selectWrapper-cs9PHJ",
     divider: "divider-tZBLhU",
-    input: "input-m950Ev"
+    info: "info-ZBtD4m",
+    input: "input-m950Ev",
+    clearable: "clearable-fQkwFf"
 };
 export default InputUnit_module;

package/dist/components/InputUnit/InputUnit_module.css

@@ -7,6 +7,10 @@
   display: inline-flex;
 }
 
+.wrapper-e72fYe .label-sBTy3L {
+  width: 100%;
+}
+
 .wrapper-e72fYe .inputWrapper-LO6lHr {
   color: var(--text-primary, #091739);
   border: 1px solid var(--border-normal, #d1d6df);
@@ -25,13 +29,11 @@
 }
 
 .wrapper-e72fYe .inputWrapper-LO6lHr: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-e72fYe .inputWrapper-LO6lHr {
-  box-sizing: content-box;
+  box-sizing: border-box;
   align-items: center;
   width: 100%;
   height: 32px;
@@ -41,9 +43,7 @@
 }
 
 .wrapper-e72fYe .inputWrapper-LO6lHr.focused-m1zbMv {
-  --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-e72fYe .inputWrapper-LO6lHr.disabled-AwnC6Y {
@@ -56,16 +56,16 @@
 }
 
 .wrapper-e72fYe .inputWrapper-LO6lHr.error-Z0Tri0, .wrapper-e72fYe .inputWrapper-LO6lHr.error-Z0Tri0:hover, .wrapper-e72fYe .inputWrapper-LO6lHr.error-Z0Tri0:focus {
-  border: 1px solid var(--colorful-red-600);
+  border: 1px solid var(--elements-critical, #e50347);
 }
 
 .wrapper-e72fYe .inputWrapper-LO6lHr.warning-EDcjvN, .wrapper-e72fYe .inputWrapper-LO6lHr.warning-EDcjvN:hover {
-  border: 1px solid var(--colorful-orange-600);
+  border: 1px solid var(--elements-attention, #db5202);
 }
 
 .wrapper-e72fYe .inputWrapper-LO6lHr.warning-EDcjvN:focus, .wrapper-e72fYe .inputWrapper-LO6lHr.warning-EDcjvN:focus-visible, .wrapper-e72fYe .inputWrapper-LO6lHr.warning-EDcjvN.focused-m1zbMv {
-  --input-shadow: var(--colorful-orange-600);
-  border-color: var(--colorful-orange-600);
+  --input-shadow: var(--elements-attention, #db5202);
+  border-color: var(--elements-attention, #db5202);
 }
 
 .wrapper-e72fYe .inputWrapper-LO6lHr input[type="number"] {
@@ -87,31 +87,20 @@
 }
 
 .wrapper-e72fYe .autoComplete-_5ZaLO {
-  border-radius: 4px;
-  height: 20px;
   margin-right: 8px;
-  padding: 4px 8px;
+  padding-left: 6px;
+  padding-right: 6px;
 }
 
-.wrapper-e72fYe .autoComplete-_5ZaLO > p {
-  color: var(--product-blue-700);
-  font-size: 12px;
+.wrapper-e72fYe .clearButtonOffset-rEaz5m {
+  margin-right: 7px;
 }
 
-.wrapper-e72fYe .autoComplete-_5ZaLO:focus {
-  box-shadow: none;
-}
-
-.wrapper-e72fYe .autoComplete-_5ZaLO:not(:disabled):hover {
-  background-color: #daeaf8;
-}
-
-.wrapper-e72fYe .autoComplete-_5ZaLO:not(:disabled):hover p {
-  color: var(--product-blue-600);
+.wrapper-e72fYe .clearButtonUnitOffset-IuYmYc {
+  margin-right: 4px;
 }
 
 .wrapper-e72fYe .selectWrapper-cs9PHJ {
-  border: 1px solid #0000;
   align-items: center;
   max-width: 35%;
   height: 32px;
@@ -129,11 +118,16 @@
 }
 
 .wrapper-e72fYe .divider-tZBLhU {
-  background-color: var(--light-grey-400);
+  background-color: var(--border-normal, #d1d6df);
   width: 1px;
   height: 16px;
 }
 
+.wrapper-e72fYe .info-ZBtD4m {
+  overflow-wrap: anywhere;
+  display: flex;
+}
+
 .input-m950Ev {
   all: unset;
   box-sizing: border-box;
@@ -153,3 +147,7 @@
   color: var(--text-tertiary, #9fa7af);
 }
 
+.clearable-fQkwFf {
+  padding-right: 4px;
+}
+

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

@@ -1,2 +1,2 @@
 import type { SelectUnitProps } from './type';
-export declare const SelectUnit: (props: SelectUnitProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const SelectUnit: (props: SelectUnitProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/InputUnit/SelectUnit/SelectUnit.js

@@ -1,9 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { SelectUnitVisible } from "./SelectUnitVisible.js";
 import SelectUnit_module from "./SelectUnit.module.js";
-const SelectUnit = (props)=>{
-    if (!props.defaultUnit && !props.selectedUnitOption) return null;
-    return /*#__PURE__*/ jsxs(Fragment, {
+const SelectUnit = (props)=>/*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx("span", {
                 className: SelectUnit_module.divider
@@ -13,5 +11,4 @@ const SelectUnit = (props)=>{
             })
         ]
     });
-};
 export { SelectUnit };

package/dist/components/InputUnit/SelectUnit/SelectUnit.module.js

@@ -3,6 +3,7 @@ const SelectUnit_module = {
     selectContainer: "selectContainer-c1sZBO",
     select: "select-jGqAE0",
     focused: "focused-HYSAXe",
+    open: "open-Wwk6BC",
     selectArrow: "selectArrow-uYpbBJ",
     disabled: "disabled-TH3t_6",
     unitValueContainer: "unitValueContainer-VVSJeN",

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

@@ -1,2 +1,2 @@
 import type { SelectUnitProps } from './type';
-export declare const SelectUnitVisible: ({ testId, tabIndex, disabled, onToggle, defaultUnit, selectedUnitOption, triggerAriaProps, }: SelectUnitProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectUnitVisible: ({ testId, tabIndex, disabled, isOpen, onToggle, defaultUnit, selectedUnitOption, triggerAriaProps, }: SelectUnitProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/InputUnit/SelectUnit/SelectUnitVisible.js

@@ -4,11 +4,15 @@ import { cn } from "../../../common/css/cn.js";
 import { Down12Icon } from "../../../icon/index.js";
 import { Unit } from "../Unit/Unit.js";
 import SelectUnit_module from "./SelectUnit.module.js";
-const SelectUnitVisible = ({ testId, tabIndex, disabled, onToggle, defaultUnit, selectedUnitOption, triggerAriaProps })=>{
+const SelectUnitVisible = ({ testId, tabIndex, disabled, isOpen, onToggle, defaultUnit, selectedUnitOption, triggerAriaProps })=>{
     const [isFocused, setIsFocused] = useState(false);
     const selectedUnitLabel = useMemo(()=>selectedUnitOption ? selectedUnitOption.label : '', [
         selectedUnitOption
     ]);
+    const handleInputKeyDown = (e)=>{
+        if (!isOpen || 'ArrowUp' !== e.key && 'ArrowDown' !== e.key) return;
+        e.preventDefault();
+    };
     const handleInputKeyUp = (e)=>{
         if ('Enter' === e.key) {
             if (isFocused) {
@@ -26,9 +30,10 @@ const SelectUnitVisible = ({ testId, tabIndex, disabled, onToggle, defaultUnit,
         className: SelectUnit_module.selectContainer,
         children: /*#__PURE__*/ jsxs("div", {
             ...triggerAriaProps,
-            className: cn(SelectUnit_module.select, disabled && SelectUnit_module.disabled, isFocused && SelectUnit_module.focused),
+            className: cn(SelectUnit_module.select, disabled && SelectUnit_module.disabled, isFocused && SelectUnit_module.focused, isOpen && SelectUnit_module.open),
             role: "combobox",
             "aria-disabled": disabled,
+            onKeyDown: handleInputKeyDown,
             onKeyUp: handleInputKeyUp,
             onFocus: ()=>setIsFocused(true),
             onBlur: ()=>setIsFocused(false),

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;