@moysklad/uikit 28.1.0 → 30.4.0

package/dist/components/Select/Select.js

@@ -1,13 +1,14 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from "react";
-import lodash_debounce from "lodash.debounce";
 import { cn } from "../../common/css/cn.js";
-import { Dropdown, DropdownDivider } from "../Dropdown/Dropdown.js";
+import { Dropdown } from "../Dropdown/Dropdown.js";
 import { getListboxTriggerA11y } from "../Dropdown/utils/getListboxTriggerA11y.js";
+import { useDebounceCallback } from "../../hooks/useDebounceCallback/useDebounceCallback.js";
 import { Add16Icon, RemoveClose12Icon } from "../../icon/index.js";
 import { ActionButton } from "./ActionButton/ActionButton.js";
 import { ArchivedInputValue } from "./ArchivedInputValue/ArchivedInputValue.js";
 import { Combobox } from "./Combobox/Combobox.js";
+import { DropdownActionsContainer } from "./DropdownActionsContainer/DropdownActionsContainer.js";
 import { DropDownWithColors } from "./DropDownWithColors/DropDownWithColors.js";
 import { EmptyState } from "./EmptyState/EmptyState.js";
 import { Loading } from "./Loading/Loading.js";
@@ -16,14 +17,14 @@ import { OptionsList } from "./OptionsList/OptionsList.js";
 import { ShortVariant } from "./ShortVariant/ShortVariant.js";
 import { DropdownActionButton } from "./DropdownActionButton/index.js";
 import { KEYBOARD_KEYS } from "./types.js";
+import { useDropdownPadding } from "./useDropdownPadding.js";
 import { SELECT_DROPDOWN_CLOSE_REASON, useSelectDropdown } from "./useSelectDropdown.js";
 import { getFilteredOptions } from "./utils.js";
 import Select_module from "./Select.module.js";
-function SelectInner({ options, value, label, required, testId, disabled, placeholder, searchable = true, error, helperText = '', info = '', helpComponent, clearable = true, fullWidth, emptyText, className, dropdownClassName, dropdownOffsetX, dropdownOffsetY, isDropdownInnerScroll, optionClassName, isOptionEllipsis = true, style, dropdownStyle, dropdownZIndex, inputProps, variant = 'default', disableShortClear = false, hintZIndex = 100, isSearchDebounced = true, searchDebounceTimeout = 300, isLoading = false, loadingText = 'Загрузка...', onSearch, renderActions, renderDropdownContent, renderOption, onChange, onClear, renderValue, onDropdownToggle, renderInput, isDisableEnterSelect = false, isBlurNecessarily = false, isArchived = false, onAddButtonClick, addButtonText = '', skipSelectOnTab, scrollableOptionsList, isFocusableOptionsList, closeOnSelect = true, renderDropdownActions }, ref) {
+function SelectInner({ options, value, label, required, testId, disabled, placeholder, searchable = true, error, helperText = '', info = '', helpComponent, clearable = true, fullWidth, emptyText, className, dropdownClassName, dropdownOffsetX, dropdownOffsetY, isDropdownInnerScroll, optionClassName, isOptionEllipsis = true, style, dropdownStyle, dropdownZIndex, inputProps, variant = 'default', disableShortClear = false, hintZIndex = 100, isSearchDebounced = true, searchDebounceTimeout = 300, isLoading = false, loadingText = 'Загрузка...', skipSelectOnTab = false, shortVariantTextClassName, shortVariantContainerClassName, shortVariantIsVisibleFocusOutline, onSearch, renderActions, renderDropdownContent, renderOption, onChange, onClear, renderValue, onDropdownToggle, renderInput, isDisableEnterSelect = false, isBlurNecessarily = false, isArchived = false, onAddButtonClick, addButtonText = '', scrollableOptionsList, isFocusableOptionsList, closeOnSelect = true, renderDropdownActions, onFocus, onBlur, onKeyDown }, ref) {
     const [cursor, setCursor] = useState(null);
     const [searchText, setSearchText] = useState(value?.label ?? '');
     const [newOptions, setNewOptions] = useState([]);
-    const [dropdownActionsContainerHeight, setDropdownActionsContainerHeight] = useState(0);
     const showClearButton = clearable && (searchText.length > 0 || value);
     const valueLabel = value?.label ?? '';
     const filteredOptions = getFilteredOptions({
@@ -32,10 +33,10 @@ function SelectInner({ options, value, label, required, testId, disabled, placeh
         newOptions,
         valueLabel
     });
-    const handleDebouncedSearch = useCallback(lodash_debounce((text)=>onSearch?.(text), searchDebounceTimeout), [
-        onSearch,
-        searchDebounceTimeout
+    const handleSearchCb = useCallback((text)=>onSearch?.(text), [
+        onSearch
     ]);
+    const handleDebouncedSearch = useDebounceCallback(handleSearchCb, searchDebounceTimeout);
     const restoreInputFromValue = useCallback(()=>{
         handleDebouncedSearch.cancel?.();
         setSearchText(valueLabel);
@@ -85,13 +86,9 @@ function SelectInner({ options, value, label, required, testId, disabled, placeh
         cursor,
         hasActiveOption: open && null !== cursor && Boolean(filteredOptions[cursor])
     });
+    const { scrollPaddings, dropdownActionsContainerRefCb } = useDropdownPadding();
     const getDropdownStyle = ()=>{
         const triggerWidth = triggerRef.current?.getBoundingClientRect()?.width ?? 0;
-        const scrollPadding = 4;
-        const scrollPaddings = {
-            scrollPaddingTop: scrollPadding,
-            scrollPaddingBottom: dropdownActionsContainerHeight + scrollPadding
-        };
         if (renderDropdownContent) return {
             minWidth: triggerWidth,
             ...scrollPaddings
@@ -131,6 +128,7 @@ function SelectInner({ options, value, label, required, testId, disabled, placeh
         if (closeOnSelect) closeDropdown(SELECT_DROPDOWN_CLOSE_REASON.SELECT);
     }, [
         value,
+        closeOnSelect,
         onChange,
         closeDropdown
     ]);
@@ -155,9 +153,6 @@ function SelectInner({ options, value, label, required, testId, disabled, placeh
         if (e.key === KEYBOARD_KEYS.ESCAPE) restoreInputFromValue();
         inputProps?.onKeyUp?.(e);
     };
-    const dropdownActionsContainerRefCb = useCallback((node)=>{
-        setDropdownActionsContainerHeight(node?.clientHeight ?? 0);
-    }, []);
     const handleInputBlur = useCallback((e)=>{
         if (isBlurNecessarily) inputProps?.onBlur?.(e);
         if (filteredOptions.length && searchText.length) return;
@@ -277,7 +272,13 @@ function SelectInner({ options, value, label, required, testId, disabled, placeh
                 style: style,
                 disableClear: disableShortClear,
                 testId: testId,
-                hintZIndex: hintZIndex
+                hintZIndex: hintZIndex,
+                textClassName: shortVariantTextClassName,
+                shortVariantContainerClassName: shortVariantContainerClassName,
+                isVisibleFocusOutline: shortVariantIsVisibleFocusOutline,
+                onFocus: onFocus,
+                onBlur: onBlur,
+                onKeyDown: onKeyDown
             }),
             renderInput && renderInput({
                 triggerRef,
@@ -293,8 +294,8 @@ function SelectInner({ options, value, label, required, testId, disabled, placeh
             }),
             /*#__PURE__*/ jsxs(Dropdown, {
                 ...dropdownAriaProps,
-                className: dropdownClassName,
-                open: open,
+                className: cn(Select_module.dropdown, dropdownClassName),
+                open: disabled ? false : open,
                 triggerRef: triggerRef,
                 onClose: closeDropdown,
                 testId: testId ? `${testId}-dropdown` : '',
@@ -326,32 +327,26 @@ function SelectInner({ options, value, label, required, testId, disabled, placeh
                         value,
                         searchHandler: handleSearch,
                         inputKeyUpHandler: handleInputKeyUp,
-                        clearHandler: handleClear
+                        clearHandler: handleClear,
+                        isDropdownOpen: open
                     }) : /*#__PURE__*/ jsx(Fragment, {
                         children: isLoading ? loadingComponent : optionsList
                     }),
                     !isLoading && !renderDropdownContent && 0 === filteredOptions.length && /*#__PURE__*/ jsx(EmptyState, {
                         text: emptyText
                     }),
-                    showDropdownActions && /*#__PURE__*/ jsxs("div", {
+                    showDropdownActions && /*#__PURE__*/ jsxs(DropdownActionsContainer, {
                         ref: dropdownActionsContainerRefCb,
-                        className: Select_module.dropdownActionsContainer,
                         children: [
-                            /*#__PURE__*/ jsx(DropdownDivider, {}),
-                            /*#__PURE__*/ jsxs("div", {
-                                className: Select_module.dropdownActions,
+                            onAddButtonClick && /*#__PURE__*/ jsxs(DropdownActionButton, {
+                                onClick: onAddButtonClick,
                                 children: [
-                                    onAddButtonClick && /*#__PURE__*/ jsxs(DropdownActionButton, {
-                                        onClick: onAddButtonClick,
-                                        children: [
-                                            /*#__PURE__*/ jsx(Add16Icon, {}),
-                                            addButtonText
-                                        ]
-                                    }),
-                                    renderDropdownActions?.({
-                                        closeDropdown
-                                    })
+                                    /*#__PURE__*/ jsx(Add16Icon, {}),
+                                    addButtonText
                                 ]
+                            }),
+                            renderDropdownActions?.({
+                                closeDropdown
                             })
                         ]
                     })

package/dist/components/Select/Select.module.js

@@ -3,7 +3,6 @@ const Select_module = {
     container: "container-C2p99t",
     clearAction: "clearAction-sc7Lsp",
     actions: "actions-cQr4nG",
-    dropdownActionsContainer: "dropdownActionsContainer-NsKpjZ",
-    dropdownActions: "dropdownActions-O89Lx9"
+    dropdown: "dropdown-_J2KVk"
 };
 export default Select_module;

package/dist/components/Select/Select_module.css

@@ -15,19 +15,7 @@
   display: none;
 }
 
-.dropdownActionsContainer-NsKpjZ {
-  background-color: var(--bgd-white);
-  position: sticky;
-  bottom: 0;
-}
-
-.dropdownActions-O89Lx9 {
-  justify-content: center;
-  align-items: center;
-  padding: 0 16px 8px;
-}
-
-.dropdownActions-O89Lx9 > button {
-  width: 100%;
+.dropdown-_J2KVk:focus {
+  outline: none;
 }
 

package/dist/components/Select/ShortVariant/ShortVariant.d.ts

@@ -1,9 +1,13 @@
-import { type HTMLAttributes } from 'react';
+import { type HTMLAttributes, type KeyboardEventHandler } from 'react';
 import type { IHasTestId } from '../../../common/types';
 import type { IBaseSelectProps } from '../types';
 interface Props extends IBaseSelectProps, HTMLAttributes<HTMLDivElement>, IHasTestId {
     onClear: () => void;
     disableClear?: boolean;
+    textClassName?: string;
+    shortVariantContainerClassName?: string;
+    onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
+    isVisibleFocusOutline?: boolean;
 }
 export declare const ShortVariant: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/dist/components/Select/ShortVariant/ShortVariant.js

@@ -7,13 +7,13 @@ import { Info } from "../../Info/Info.js";
 import { Label } from "../../Label/Label.js";
 import { OverflowingHint } from "../OverflowingHint/OverflowingHint.js";
 import ShortVariant_module from "./ShortVariant.module.js";
-const ShortVariant = /*#__PURE__*/ forwardRef(({ testId, value, placeholder, label, helperText, info, error, required, className, disabled, disableClear, hintZIndex = 100, renderValue, onClear, tabIndex, ...otherProps }, ref)=>{
+const ShortVariant = /*#__PURE__*/ forwardRef(({ testId, value, placeholder, label, helperText, info, error, required, className, disabled, textClassName, disableClear, hintZIndex = 100, shortVariantContainerClassName, renderValue, onClear, tabIndex, onKeyDown, isVisibleFocusOutline = true, ...otherProps }, ref)=>{
     const handleClear = (e)=>{
         e.stopPropagation();
         onClear();
     };
     return /*#__PURE__*/ jsxs("div", {
-        className: ShortVariant_module.outerContainer,
+        className: cn(ShortVariant_module.outerContainer, shortVariantContainerClassName),
         children: [
             /*#__PURE__*/ jsx(Label, {
                 label: label,
@@ -24,9 +24,10 @@ const ShortVariant = /*#__PURE__*/ forwardRef(({ testId, value, placeholder, lab
                 role: "combobox",
                 tabIndex: disabled ? -1 : tabIndex ?? 0,
                 "aria-disabled": disabled,
-                className: cn(ShortVariant_module.container, className),
+                className: cn(ShortVariant_module.container, !isVisibleFocusOutline && ShortVariant_module.focusOutlineNone, className),
                 ref: ref,
                 "data-test-id": testId,
+                onKeyDown: onKeyDown,
                 ...otherProps,
                 children: [
                     renderValue ? renderValue({
@@ -39,7 +40,7 @@ const ShortVariant = /*#__PURE__*/ forwardRef(({ testId, value, placeholder, lab
                         zIndex: hintZIndex,
                         hintText: value ? value.label : placeholder,
                         children: (ref)=>/*#__PURE__*/ jsx(Text.Body, {
-                                className: ShortVariant_module.value,
+                                className: cn(ShortVariant_module.value, textClassName),
                                 ref: ref,
                                 children: value ? value.label : placeholder
                             })

package/dist/components/Select/ShortVariant/ShortVariant.module.js

@@ -4,6 +4,7 @@ const ShortVariant_module = {
     container: "container-sh9fLu",
     deleteButton: "deleteButton-vXaACU",
     downIcon: "downIcon-XaLwIU",
+    focusOutlineNone: "focusOutlineNone-j96au6",
     value: "value-W7MA4Q"
 };
 export default ShortVariant_module;

package/dist/components/Select/ShortVariant/ShortVariant_module.css

@@ -5,7 +5,7 @@
 .container-sh9fLu {
   cursor: pointer;
   align-items: center;
-  column-gap: 12px;
+  column-gap: 4px;
   width: fit-content;
   display: flex;
 }
@@ -28,6 +28,10 @@
   display: flex;
 }
 
+.focusOutlineNone-j96au6:focus {
+  outline: none;
+}
+
 .value-W7MA4Q {
   text-overflow: ellipsis;
   white-space: nowrap;

package/dist/components/Select/types.d.ts

@@ -50,6 +50,7 @@ export interface IRenderDropdownContentOptions<T = unknown> {
     searchHandler: (text: string) => void;
     inputKeyUpHandler: (e: KeyboardEvent<HTMLInputElement>) => void;
     clearHandler: () => void;
+    isDropdownOpen: boolean;
 }
 export interface IRenderInputOptions {
     triggerRef: MutableRefObject<HTMLDivElement | null>;

package/dist/components/Select/useDropdownPadding.d.ts

@@ -0,0 +1,5 @@
+import { type CSSProperties } from 'react';
+export declare const useDropdownPadding: () => {
+    scrollPaddings: CSSProperties;
+    dropdownActionsContainerRefCb: (node: null | HTMLDivElement) => void;
+};

package/dist/components/Select/useDropdownPadding.js

@@ -0,0 +1,22 @@
+import { useCallback, useMemo, useState } from "react";
+const useDropdownPadding = ()=>{
+    const [dropdownActionsContainerHeight, setDropdownActionsContainerHeight] = useState(0);
+    const dropdownActionsContainerRefCb = useCallback((node)=>{
+        setDropdownActionsContainerHeight(node?.clientHeight ?? 0);
+    }, []);
+    const scrollPaddings = useMemo(()=>{
+        const scrollPadding = 4;
+        const scrollPaddings = {
+            scrollPaddingTop: scrollPadding,
+            scrollPaddingBottom: dropdownActionsContainerHeight + scrollPadding
+        };
+        return scrollPaddings;
+    }, [
+        dropdownActionsContainerHeight
+    ]);
+    return {
+        scrollPaddings,
+        dropdownActionsContainerRefCb
+    };
+};
+export { useDropdownPadding };

package/dist/components/Textfield/Textfield.d.ts

@@ -1,5 +1,6 @@
 import { type CSSProperties, type ReactNode, type TextareaHTMLAttributes } from 'react';
 import type { IHasTabIndex, IHasTestId } from '../../common/types';
+import { type ITextfieldFileUploaderProps, type TextfieldSizeValue } from './types';
 export interface TextfieldProps extends TextareaHTMLAttributes<HTMLTextAreaElement>, IHasTestId, IHasTabIndex {
     name: string;
     className?: string;
@@ -9,17 +10,32 @@ export interface TextfieldProps extends TextareaHTMLAttributes<HTMLTextAreaEleme
     help?: ReactNode;
     error?: boolean;
     disabled?: boolean;
-    clearable?: boolean;
     resize?: CSSProperties['resize'];
     limit?: number;
     showCounterLimit?: number;
     autoVerticalResize?: boolean;
     minHeight?: number;
     maxHeight?: number;
-    actionsBar?: ReactNode;
     resetHeightOnClear?: boolean;
     fitContentHeightOnInit?: boolean;
     textareaClassName?: string;
+    size?: TextfieldSizeValue;
+    onMainBtnClick?: () => void;
+    onEmojiBtnClick?: () => void;
+    mainBtnIcon?: ReactNode;
+    emojiBtnIcon?: ReactNode;
+    fileBtnIcon?: ReactNode;
+    isFileBtnVisible?: boolean;
+    fileUploaderProps?: ITextfieldFileUploaderProps;
+    resizeTop?: boolean;
+    resizeBottom?: boolean;
+    /**
+     * @deprecated Используйте onMainBtnClick, onEmojiBtnClick, isFileBtnVisible вместо
+     */
+    actionsBar?: ReactNode;
+    /**
+     * @deprecated пропс более не поддерживается
+     */
     onClear?: () => void;
 }
 export declare const Textfield: import("react").ForwardRefExoticComponent<TextfieldProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/components/Textfield/Textfield.js

@@ -7,13 +7,16 @@ import { useTextField } from "../../hooks/useTextField/useTextField.js";
 import { Container } from "./components/Container/Container.js";
 import { InnerContainer } from "./components/InnerContainer/InnerContainer.js";
 import { InputContainer } from "./components/InputContainer/InputContainer.js";
+import { ResizeHandle } from "./components/ResizeHandle/ResizeHandle.js";
+import { TextfieldSize } from "./types/index.js";
+import { getMinHeight } from "./utils/index.js";
 import Textfield_module from "./Textfield.module.js";
-const Textfield = /*#__PURE__*/ forwardRef(({ testId, tabIndex, className, label, info, required, error, help, disabled, clearable, resize, style, value, limit, showCounterLimit, autoVerticalResize, minHeight = 92, maxHeight, rows, actionsBar, resetHeightOnClear = false, fitContentHeightOnInit = false, textareaClassName, onFocus, onBlur, onClear, onChange, ...textfieldProps }, forwardedRef)=>{
+const Textfield = /*#__PURE__*/ forwardRef(({ testId, tabIndex, className, label, info, required, error, help, disabled, resize, style, value, limit, showCounterLimit, autoVerticalResize, minHeight: minHeightProp, maxHeight, rows, resetHeightOnClear = false, fitContentHeightOnInit = false, textareaClassName, size = TextfieldSize.M, onFocus, onBlur, onChange, onMainBtnClick, onEmojiBtnClick, isFileBtnVisible = false, mainBtnIcon, emojiBtnIcon, fileBtnIcon, fileUploaderProps, resizeTop = false, resizeBottom = false, actionsBar, ...textfieldProps }, forwardedRef)=>{
     const textfieldId = useId(textfieldProps.id);
     const ref = useRef(null);
-    const { height, isFocused, isLimitError, setIsFocused, handleClear } = useTextField({
-        onChange,
-        onClear,
+    const minHeight = getMinHeight(minHeightProp, size);
+    const hasResizeHandles = resizeTop || resizeBottom;
+    const { height, setHeight, isFocused, isLimitError, setIsFocused } = useTextField({
         minHeight,
         maxHeight,
         ref,
@@ -21,8 +24,10 @@ const Textfield = /*#__PURE__*/ forwardRef(({ testId, tabIndex, className, label
         autoVerticalResize,
         limit,
         resetHeightOnClear,
-        fitContentHeightOnInit
+        fitContentHeightOnInit,
+        hasResizeHandles
     });
+    const effectiveHeight = autoVerticalResize || fitContentHeightOnInit || resetHeightOnClear || hasResizeHandles ? height || void 0 : void 0;
     return /*#__PURE__*/ jsx(Container, {
         textfieldId: textfieldId,
         label: label,
@@ -36,20 +41,39 @@ const Textfield = /*#__PURE__*/ forwardRef(({ testId, tabIndex, className, label
         error: error,
         info: info,
         hasHelp: !!help,
+        size: size,
         children: /*#__PURE__*/ jsx(InnerContainer, {
-            clearable: clearable,
-            value: String(value),
-            disabled: disabled,
             withHelp: !!help,
-            onClear: handleClear,
             popup: help,
             testId: testId,
             children: /*#__PURE__*/ jsx(InputContainer, {
-                clearable: clearable,
                 disabled: disabled,
                 focused: isFocused,
                 error: error || isLimitError,
                 actionsBar: actionsBar,
+                size: size,
+                mainBtnIcon: mainBtnIcon,
+                emojiBtnIcon: emojiBtnIcon,
+                fileBtnIcon: fileBtnIcon,
+                onMainBtnClick: onMainBtnClick,
+                onEmojiBtnClick: onEmojiBtnClick,
+                isFileBtnVisible: isFileBtnVisible,
+                testId: testId,
+                fileUploaderProps: fileUploaderProps,
+                resizeTopSlot: resizeTop ? /*#__PURE__*/ jsx(ResizeHandle, {
+                    direction: "top",
+                    onHeightChange: setHeight,
+                    startHeight: height || minHeight,
+                    minHeight: minHeight,
+                    maxHeight: maxHeight
+                }) : null,
+                resizeBottomSlot: resizeBottom ? /*#__PURE__*/ jsx(ResizeHandle, {
+                    direction: "bottom",
+                    onHeightChange: setHeight,
+                    startHeight: height || minHeight,
+                    minHeight: minHeight,
+                    maxHeight: maxHeight
+                }) : null,
                 children: /*#__PURE__*/ jsx("textarea", {
                     ...textfieldProps,
                     onChange: onChange,
@@ -60,11 +84,11 @@ const Textfield = /*#__PURE__*/ forwardRef(({ testId, tabIndex, className, label
                         forwardedRef
                     ]),
                     "data-test-id": testId ? `${testId}-textfield` : null,
-                    className: cn(Textfield_module.textarea, clearable && Textfield_module.clearable, textareaClassName),
+                    className: cn(Textfield_module.textarea, Textfield_module[size], textareaClassName),
                     disabled: disabled,
                     style: {
-                        resize,
-                        height: autoVerticalResize || fitContentHeightOnInit ? height : '',
+                        resize: hasResizeHandles ? 'none' : resize,
+                        height: effectiveHeight,
                         minHeight,
                         ...style
                     },

package/dist/components/Textfield/Textfield.module.js

@@ -1,7 +1,8 @@
 import "./Textfield_module.css";
 const Textfield_module = {
     textarea: "textarea-V0PDbc",
-    clearable: "clearable-c3zLgM",
+    m: "m-d5lyS7",
+    l: "l-ZsiQBg",
     input: "input-tESIWx"
 };
 export default Textfield_module;

package/dist/components/Textfield/Textfield_module.css

@@ -1,72 +1,144 @@
 .textarea-V0PDbc {
-  color: var(--text-primary, #091739);
+  scrollbar-color: var(--border-normal) #0000;
+}
+
+.textarea-V0PDbc.m-d5lyS7 {
+  letter-spacing: 0;
+  text-transform: none;
+  font-feature-settings: "tnum" on,"lnum" on;
+  -webkit-font-smoothing: antialiased;
+  color: var(--body-text-color, var(--text-primary, #091739));
   box-sizing: border-box;
   width: 100%;
   resize: inherit;
   background-color: #0000;
   border: none;
-  border-radius: 8px;
   outline: none;
-  padding: 6px 12px;
+  margin: 0;
+  padding: 8px 8px 8px 12px;
   font-family: ALS Hauss, sans-serif;
   font-size: 14px;
-  font-style: normal;
   font-weight: 400;
   line-height: 20px;
   display: block;
 }
 
-.textarea-V0PDbc.clearable-c3zLgM {
-  padding-right: 36px;
-}
-
-.textarea-V0PDbc:disabled, .textarea-V0PDbc:disabled:hover, .textarea-V0PDbc:disabled:focus {
+.textarea-V0PDbc.m-d5lyS7:disabled, .textarea-V0PDbc.m-d5lyS7:disabled:hover, .textarea-V0PDbc.m-d5lyS7:disabled:focus {
   color: var(--text-secondary, #5f6d79);
 }
 
-.textarea-V0PDbc::placeholder {
+.textarea-V0PDbc.m-d5lyS7::placeholder {
   color: var(--text-tertiary, #9fa7af);
 }
 
-.textarea-V0PDbc:focus-within, .textarea-V0PDbc:focus-visible, .textarea-V0PDbc:focus {
+.textarea-V0PDbc.m-d5lyS7:focus-within, .textarea-V0PDbc.m-d5lyS7:focus-visible, .textarea-V0PDbc.m-d5lyS7:focus {
+  outline: none;
+}
+
+.textarea-V0PDbc.l-ZsiQBg {
+  letter-spacing: 0;
+  text-transform: none;
+  font-feature-settings: "tnum" on,"lnum" on;
+  -webkit-font-smoothing: antialiased;
+  color: #091739;
+  box-sizing: border-box;
+  width: 100%;
+  resize: inherit;
+  background-color: #0000;
+  border: none;
   outline: none;
+  margin: 0;
+  padding: 8px 8px 8px 12px;
+  font-family: ALS Hauss, sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  display: block;
 }
 
-.input-tESIWx.clearable-c3zLgM textarea {
-  padding-right: 36px;
+.textarea-V0PDbc.l-ZsiQBg:disabled, .textarea-V0PDbc.l-ZsiQBg:disabled:hover, .textarea-V0PDbc.l-ZsiQBg:disabled:focus {
+  color: var(--text-secondary, #5f6d79);
+}
+
+.textarea-V0PDbc.l-ZsiQBg::placeholder {
+  color: var(--text-tertiary, #9fa7af);
+}
+
+.textarea-V0PDbc.l-ZsiQBg:focus-within, .textarea-V0PDbc.l-ZsiQBg:focus-visible, .textarea-V0PDbc.l-ZsiQBg:focus {
+  outline: none;
 }
 
-.input-tESIWx textarea {
-  color: var(--text-primary, #091739);
+.input-tESIWx.m-d5lyS7 textarea {
+  letter-spacing: 0;
+  text-transform: none;
+  font-feature-settings: "tnum" on,"lnum" on;
+  -webkit-font-smoothing: antialiased;
+  color: var(--body-text-color, var(--text-primary, #091739));
   box-sizing: border-box;
   width: 100%;
   resize: inherit;
   background-color: #0000;
   border: none;
-  border-radius: 8px;
   outline: none;
-  padding: 6px 12px;
+  margin: 0;
+  padding: 8px 8px 8px 12px;
   font-family: ALS Hauss, sans-serif;
   font-size: 14px;
-  font-style: normal;
   font-weight: 400;
   line-height: 20px;
   display: block;
 }
 
-.input-tESIWx textarea.clearable-c3zLgM {
-  padding-right: 36px;
+.input-tESIWx.m-d5lyS7 textarea:disabled, .input-tESIWx.m-d5lyS7 textarea:disabled:hover, .input-tESIWx.m-d5lyS7 textarea:disabled:focus {
+  color: var(--text-secondary, #5f6d79);
+}
+
+.input-tESIWx.m-d5lyS7 textarea::placeholder {
+  color: var(--text-tertiary, #9fa7af);
+}
+
+.input-tESIWx.m-d5lyS7 textarea:focus-within, .input-tESIWx.m-d5lyS7 textarea:focus-visible, .input-tESIWx.m-d5lyS7 textarea:focus {
+  outline: none;
+}
+
+.input-tESIWx.m-d5lyS7 textarea {
+  scrollbar-color: var(--border-normal) #0000;
+}
+
+.input-tESIWx.l-ZsiQBg textarea {
+  letter-spacing: 0;
+  text-transform: none;
+  font-feature-settings: "tnum" on,"lnum" on;
+  -webkit-font-smoothing: antialiased;
+  color: #091739;
+  box-sizing: border-box;
+  width: 100%;
+  resize: inherit;
+  background-color: #0000;
+  border: none;
+  outline: none;
+  margin: 0;
+  padding: 8px 8px 8px 12px;
+  font-family: ALS Hauss, sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  display: block;
 }
 
-.input-tESIWx textarea:disabled, .input-tESIWx textarea:disabled:hover, .input-tESIWx textarea:disabled:focus {
+.input-tESIWx.l-ZsiQBg textarea:disabled, .input-tESIWx.l-ZsiQBg textarea:disabled:hover, .input-tESIWx.l-ZsiQBg textarea:disabled:focus {
   color: var(--text-secondary, #5f6d79);
 }
 
-.input-tESIWx textarea::placeholder {
+.input-tESIWx.l-ZsiQBg textarea::placeholder {
   color: var(--text-tertiary, #9fa7af);
 }
 
-.input-tESIWx textarea:focus-within, .input-tESIWx textarea:focus-visible, .input-tESIWx textarea:focus {
+.input-tESIWx.l-ZsiQBg textarea:focus-within, .input-tESIWx.l-ZsiQBg textarea:focus-visible, .input-tESIWx.l-ZsiQBg textarea:focus {
   outline: none;
 }
 
+.input-tESIWx.l-ZsiQBg textarea {
+  scrollbar-color: var(--border-normal) #0000;
+}
+

package/dist/components/Textfield/components/ActionButton/ActionButton.d.ts

@@ -0,0 +1,9 @@
+import { type ButtonHTMLAttributes, type FC, type ReactNode } from 'react';
+import { type TextfieldSizeValue } from '../../types';
+export interface ActionButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    size?: TextfieldSizeValue;
+    iconOverride?: ReactNode;
+    icon?: ReactNode;
+    variant?: 'primary' | 'filled';
+}
+export declare const ActionButton: FC<ActionButtonProps>;

package/dist/components/Textfield/components/ActionButton/ActionButton.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { cn } from "../../../../common/index.js";
+import { TextfieldSize } from "../../types/index.js";
+import ActionButton_module from "./ActionButton.module.js";
+const ActionButton = /*#__PURE__*/ memo(({ size = TextfieldSize.M, iconOverride, icon, variant = 'primary', ...otherProps })=>/*#__PURE__*/ jsx("button", {
+        className: cn(ActionButton_module.button, ActionButton_module[size], ActionButton_module[variant]),
+        ...otherProps,
+        children: iconOverride ? iconOverride : icon
+    }));
+ActionButton.displayName = 'ActionButton';
+export { ActionButton };

package/dist/components/Textfield/components/ActionButton/ActionButton.module.js

@@ -0,0 +1,9 @@
+import "./ActionButton_module.css";
+const ActionButton_module = {
+    button: "button-crrsl4",
+    m: "m-yAtFJ1",
+    l: "l-uexXPu",
+    primary: "primary-ByhgOy",
+    filled: "filled-VBblHB"
+};
+export default ActionButton_module;