@moysklad/uikit 28.1.0 → 31.20.0

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,14 @@
+import { type InfoSizeValue } from '../../_shared/Info/types';
+type InfoBlockProps = {
+    info?: string;
+    error?: boolean;
+    disabled?: boolean;
+    isInfoEllipsis?: boolean;
+    testId?: string;
+    showCounterLimit?: boolean;
+    maxLength?: number;
+    value?: string;
+    size?: InfoSizeValue;
+};
+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

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+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, size = InfoSize.M })=>{
+    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,
+                    size: size
+                })
+            }),
+            showCounterLimit && maxLength && /*#__PURE__*/ jsx(Counter, {
+                testId: testId,
+                value: value,
+                hasHelp: false,
+                limit: maxLength,
+                size: size
+            })
+        ]
+    });
+};
+export { InfoBlock };

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

@@ -1,22 +1,23 @@
 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 { 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),