@moysklad/uikit 28.1.0 → 31.20.0

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;

package/dist/components/Textfield/components/ActionButton/ActionButton_module.css

@@ -0,0 +1,54 @@
+.button-crrsl4 {
+  color: var(--elements-normal);
+  cursor: pointer;
+  background-color: #0000;
+  border: none;
+  border-radius: 4px;
+  outline: none;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  display: flex;
+}
+
+.button-crrsl4:disabled {
+  color: var(--text-tertiary);
+  cursor: not-allowed;
+}
+
+.m-yAtFJ1 {
+  width: 20px;
+  height: 20px;
+}
+
+.l-uexXPu {
+  width: 28px;
+  height: 28px;
+}
+
+.primary-ByhgOy:hover:not(:disabled), .primary-ByhgOy:active:not(:disabled) {
+  color: var(--elements-hover);
+}
+
+.primary-ByhgOy:focus-visible:not(:disabled) {
+  color: var(--elements-hover);
+  outline: 1px solid var(--border-focused);
+}
+
+.filled-VBblHB:hover:not(:disabled) {
+  color: var(--elements-hover);
+  background-color: var(--elements-chips-regular-hover);
+}
+
+.filled-VBblHB:active:not(:disabled) {
+  color: var(--elements-hover);
+  background-color: var(--elements-chips-regular-pressed);
+}
+
+.filled-VBblHB:focus-visible:not(:disabled) {
+  color: var(--elements-hover);
+  outline: 1px solid var(--border-focused);
+  background-color: var(--elements-chips-regular-hover);
+}
+

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

@@ -0,0 +1 @@
+export { ActionButton, type ActionButtonProps } from './ActionButton';

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

@@ -0,0 +1 @@
+export { ActionButton } from "./ActionButton.js";

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

@@ -1,10 +1,12 @@
 import { type FC, type HTMLAttributes } from 'react';
 import { type IHasTestId } from '../../../../common/types';
+import { type HelpProps } from '../../../Help/Help';
 import { type InfoProps } from '../Info/Info';
 interface Props extends HTMLAttributes<HTMLDivElement>, IHasTestId, InfoProps {
     label?: string;
     textfieldId: string;
     required?: boolean;
+    helpProps?: Omit<HelpProps, 'testId'>;
 }
 export declare const Container: FC<Props>;
 export {};

package/dist/components/Textfield/components/Container/Container.js

@@ -1,22 +1,35 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { memo } from "react";
 import { cn } from "../../../../common/css/cn.js";
+import { FieldLabel } from "../../../_shared/FieldLabel/FieldLabel.js";
+import { TextVariant } from "../../../Text/Text.js";
+import { Placement } from "../../../Help/Help.js";
+import { TextfieldSize } from "../../types/index.js";
+import { isSizeM } from "../../utils/index.js";
 import { Info } from "../Info/Info.js";
-import { Label } from "../Label/Label.js";
 import Container_module from "./Container.module.js";
-const Container = /*#__PURE__*/ memo(({ children, testId, className, label, textfieldId, required = false, limit, showCounterLimit, value, disabled, error, info = '', hasHelp, ...otherProps })=>{
+const Container = /*#__PURE__*/ memo(({ children, testId, className, label, textfieldId, required = false, limit, showCounterLimit, value, disabled, error, info = '', hasHelp, size = TextfieldSize.M, helpProps, ...otherProps })=>{
     const hasInfo = info.length > 0;
-    const hasCounter = (!showCounterLimit || value.toString().length >= showCounterLimit) && limit > 0;
+    const hasCounter = (!showCounterLimit || value.toString().length >= showCounterLimit) && Boolean(limit);
+    const labelVariant = isSizeM(size) ? TextVariant.body : TextVariant.bodyL;
     return /*#__PURE__*/ jsxs("div", {
         "data-test-id": testId,
         className: cn(Container_module.wrapper, className),
         ...otherProps,
         children: [
-            label && /*#__PURE__*/ jsx(Label, {
-                testId: testId,
+            /*#__PURE__*/ jsx(FieldLabel, {
                 label: label,
                 required: required,
-                htmlFor: textfieldId
+                helpSize: size,
+                helpProps: {
+                    placement: Placement.TOP,
+                    popup: null,
+                    ...helpProps
+                },
+                testId: testId,
+                htmlFor: textfieldId,
+                className: hasHelp ? Container_module.withHelp : '',
+                variant: labelVariant
             }),
             children,
             hasInfo || hasCounter ? /*#__PURE__*/ jsx(Info, {
@@ -27,7 +40,8 @@ const Container = /*#__PURE__*/ memo(({ children, testId, className, label, text
                 error: error,
                 info: info,
                 hasHelp: hasHelp,
-                testId: testId
+                testId: testId,
+                size: size
             }) : null
         ]
     });

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

@@ -1,5 +1,6 @@
 import "./Container_module.css";
 const Container_module = {
-    wrapper: "wrapper-wNRCDh"
+    wrapper: "wrapper-wNRCDh",
+    withHelp: "withHelp-Qh12kf"
 };
 export default Container_module;

package/dist/components/Textfield/components/Container/Container_module.css

@@ -5,3 +5,7 @@
   display: flex;
 }
 
+.withHelp-Qh12kf {
+  padding-right: 32px;
+}
+

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

@@ -1,9 +1,11 @@
 import { type TextareaHTMLAttributes } from 'react';
 import { type IHasTestId } from '../../../../common/types';
+import { type TextfieldSizeValue } from '../../types';
 interface Props extends IHasTestId {
     hasHelp: boolean;
     limit?: number;
     value: TextareaHTMLAttributes<HTMLTextAreaElement>['value'];
+    size?: TextfieldSizeValue;
 }
-export declare const Counter: import("react").MemoExoticComponent<({ hasHelp, value, limit, testId }: Props) => import("react/jsx-runtime").JSX.Element | null>;
+export declare const Counter: import("react").MemoExoticComponent<({ hasHelp, value, limit, testId, size }: Props) => import("react/jsx-runtime").JSX.Element | null>;
 export {};

package/dist/components/Textfield/components/Counter/Counter.js

@@ -1,12 +1,14 @@
 import { jsxs } from "react/jsx-runtime";
 import { memo } from "react";
-import { cn } from "../../../../common/css/cn.js";
+import { cn } from "../../../../common/index.js";
 import { Text, TextColor } from "../../../Text/Text.js";
+import { TextfieldSize } from "../../types/index.js";
 import Counter_module from "./Counter.module.js";
-const Counter = /*#__PURE__*/ memo(({ hasHelp, value, limit, testId })=>{
+const Counter = /*#__PURE__*/ memo(({ hasHelp, value = '', limit, testId, size = TextfieldSize.M })=>{
     if (!limit) return null;
     const isError = limit ? value.toString().length > limit : false;
-    return /*#__PURE__*/ jsxs(Text.Caption, {
+    const TextComponent = size === TextfieldSize.M ? Text.Caption : Text.Body;
+    return /*#__PURE__*/ jsxs(TextComponent, {
         className: cn(Counter_module.counter, hasHelp && Counter_module.withHelp),
         colorToken: isError ? TextColor.critical : TextColor.secondary,
         "data-test-id": testId ? `${testId}-counter` : '',

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

@@ -1,5 +1,6 @@
 import { type TextareaHTMLAttributes } from 'react';
 import { type IHasTestId } from '../../../../common/types';
+import { type TextfieldSizeValue } from '../../types';
 export interface InfoProps extends IHasTestId {
     info?: string;
     limit?: number;
@@ -8,5 +9,6 @@ export interface InfoProps extends IHasTestId {
     error?: boolean;
     value: string;
     hasHelp?: boolean;
+    size?: TextfieldSizeValue;
 }
-export declare const Info: import("react").MemoExoticComponent<({ info, limit, showCounterLimit, disabled, error, value, hasHelp, testId, }: InfoProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const Info: import("react").MemoExoticComponent<({ info, limit, showCounterLimit, disabled, error, value, hasHelp, testId, size, }: InfoProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/components/Textfield/components/Info/Info.js

@@ -1,12 +1,15 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { memo } from "react";
 import { Text, TextColor } from "../../../Text/Text.js";
+import { TextfieldSize } from "../../types/index.js";
 import { Counter } from "../Counter/Counter.js";
 import Info_module from "./Info.module.js";
-const Info = /*#__PURE__*/ memo(({ info, limit, showCounterLimit, disabled, error, value, hasHelp, testId })=>/*#__PURE__*/ jsxs("div", {
+const Info = /*#__PURE__*/ memo(({ info, limit, showCounterLimit, disabled, error, value, hasHelp = false, testId, size = TextfieldSize.M })=>{
+    const TextComponent = size === TextfieldSize.M ? Text.Caption : Text.Body;
+    return /*#__PURE__*/ jsxs("div", {
         className: Info_module.container,
         children: [
-            info && /*#__PURE__*/ jsx(Text.Caption, {
+            info && /*#__PURE__*/ jsx(TextComponent, {
                 colorToken: !disabled && error ? TextColor.critical : TextColor.secondary,
                 "data-test-id": testId ? `${testId}-info` : '',
                 children: info
@@ -15,9 +18,11 @@ const Info = /*#__PURE__*/ memo(({ info, limit, showCounterLimit, disabled, erro
                 testId: testId,
                 limit: limit,
                 hasHelp: hasHelp,
-                value: value
+                value: value,
+                size: size
             }) : null
         ]
-    }));
+    });
+});
 Info.displayName = 'Info';
 export { Info };

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

@@ -1,10 +1,7 @@
 import { type PropsWithChildren } from 'react';
 import { type HelpProps } from '../../../Help/Help';
-import { type ClearIconProps } from '../ClearIcon/ClearIcon';
-interface Props extends HelpProps, ClearIconProps {
-    clearable?: boolean;
-    value?: string;
-    disabled?: HTMLTextAreaElement['disabled'];
+interface Props extends HelpProps {
+    withHelp?: boolean;
 }
-export declare const InnerContainer: import("react").MemoExoticComponent<({ children, testId, onClear, withHelp, value, disabled, clearable, popup, }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element>;
+export declare const InnerContainer: import("react").MemoExoticComponent<({ children, testId, withHelp, popup }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element>;
 export {};

package/dist/components/Textfield/components/InnerContainer/InnerContainer.js

@@ -1,18 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { memo } from "react";
-import { cn } from "../../../../common/css/cn.js";
+import { cn } from "../../../../common/index.js";
 import { Help } from "../../../Help/Help.js";
-import { ClearIcon } from "../ClearIcon/ClearIcon.js";
 import InnerContainer_module from "./InnerContainer.module.js";
-const InnerContainer = /*#__PURE__*/ memo(({ children, testId, onClear, withHelp, value, disabled, clearable, popup })=>/*#__PURE__*/ jsxs("div", {
+const InnerContainer = /*#__PURE__*/ memo(({ children, testId, withHelp = false, popup })=>/*#__PURE__*/ jsxs("div", {
         className: cn(InnerContainer_module.innerContainer, withHelp && InnerContainer_module.withHelp),
         children: [
             children,
-            clearable && value && !disabled && /*#__PURE__*/ jsx(ClearIcon, {
-                withHelp: withHelp,
-                testId: testId,
-                onClear: onClear
-            }),
             popup && /*#__PURE__*/ jsx(Help, {
                 testId: testId ? `${testId}-help` : void 0,
                 popup: popup,

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

@@ -1,10 +1,21 @@
 import { type PropsWithChildren, type ReactNode } from 'react';
-interface Props {
-    clearable?: boolean;
+import type { IHasTestId } from '../../../../common';
+import { type ITextfieldFileUploaderProps, type TextfieldSizeValue } from '../../types';
+interface Props extends IHasTestId {
     disabled?: boolean;
     focused?: boolean;
     error?: boolean;
     actionsBar?: ReactNode;
+    size?: TextfieldSizeValue;
+    mainBtnIcon?: ReactNode;
+    emojiBtnIcon?: ReactNode;
+    onMainBtnClick?: () => void;
+    onEmojiBtnClick?: () => void;
+    fileBtnIcon?: ReactNode;
+    isFileBtnVisible?: boolean;
+    fileUploaderProps?: ITextfieldFileUploaderProps;
+    resizeTopSlot?: ReactNode;
+    resizeBottomSlot?: ReactNode;
 }
-export declare const InputContainer: import("react").MemoExoticComponent<({ children, clearable, disabled, focused, error, actionsBar, }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element>;
+export declare const InputContainer: import("react").MemoExoticComponent<({ testId, children, disabled, focused, error, actionsBar, size, mainBtnIcon, emojiBtnIcon, fileBtnIcon, onMainBtnClick, onEmojiBtnClick, isFileBtnVisible, fileUploaderProps, resizeTopSlot, resizeBottomSlot, }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element>;
 export {};

package/dist/components/Textfield/components/InputContainer/InputContainer.js

@@ -1,16 +1,85 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { memo } from "react";
 import { cn } from "../../../../common/css/cn.js";
+import { FileUploader } from "../../../FileUploader/FileUploader.js";
+import { AddFile12Icon, AddFile16Icon, SendMessage12Icon, SendMessage16Icon, Smile12Icon, Smile16Icon } from "../../../../icon/index.js";
+import { TextfieldSize } from "../../types/index.js";
+import { isSizeM } from "../../utils/index.js";
+import { ActionButton } from "../ActionButton/index.js";
 import InputContainer_module from "./InputContainer.module.js";
-const InputContainer = /*#__PURE__*/ memo(({ children, clearable, disabled, focused, error, actionsBar })=>/*#__PURE__*/ jsxs("div", {
-        className: cn(InputContainer_module.inputContainer, clearable && InputContainer_module.clearable, disabled && InputContainer_module.disabled, focused && InputContainer_module.focused, error && InputContainer_module.error),
+const InputContainer = /*#__PURE__*/ memo(({ testId, children, disabled, focused, error, actionsBar, size = TextfieldSize.M, mainBtnIcon, emojiBtnIcon, fileBtnIcon, onMainBtnClick, onEmojiBtnClick, isFileBtnVisible = false, fileUploaderProps, resizeTopSlot, resizeBottomSlot })=>{
+    const showActions = !!onMainBtnClick || !!onEmojiBtnClick || isFileBtnVisible;
+    const showDivider = !!onEmojiBtnClick || isFileBtnVisible;
+    const hasResizeHandles = resizeTopSlot || resizeBottomSlot;
+    const isM = isSizeM(size);
+    const dndProps = fileUploaderProps?.enableDndSorting ? {
+        enableDndSorting: true,
+        onReorder: fileUploaderProps?.onReorder
+    } : {
+        enableDndSorting: false
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: cn(InputContainer_module.inputContainer, disabled && InputContainer_module.disabled, focused && InputContainer_module.focused, error && !disabled ? InputContainer_module.error : '', hasResizeHandles && InputContainer_module.hasResizeHandles),
         children: [
+            resizeTopSlot,
             children,
             actionsBar && /*#__PURE__*/ jsx("div", {
                 className: InputContainer_module.actionsBar,
                 children: actionsBar
-            })
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: InputContainer_module.files,
+                children: /*#__PURE__*/ jsx(FileUploader, {
+                    ...fileUploaderProps,
+                    ...dndProps,
+                    testId: testId ? `${testId}-file-uploader` : '',
+                    files: fileUploaderProps?.files ?? [],
+                    className: InputContainer_module.fileUploader
+                })
+            }),
+            showActions && /*#__PURE__*/ jsxs("div", {
+                className: cn(InputContainer_module.actions, !isM && InputContainer_module.actionsL),
+                children: [
+                    onEmojiBtnClick && /*#__PURE__*/ jsx(ActionButton, {
+                        onClick: onEmojiBtnClick,
+                        iconOverride: emojiBtnIcon,
+                        icon: isM ? /*#__PURE__*/ jsx(Smile12Icon, {}) : /*#__PURE__*/ jsx(Smile16Icon, {}),
+                        size: size,
+                        disabled: disabled,
+                        "data-test-id": testId ? `${testId}-emoji-btn` : ''
+                    }),
+                    isFileBtnVisible && /*#__PURE__*/ jsx(FileUploader.Trigger, {
+                        ...fileUploaderProps?.getInputProps(),
+                        children: /*#__PURE__*/ jsx(ActionButton, {
+                            onClick: fileUploaderProps?.handleOpen,
+                            iconOverride: fileBtnIcon,
+                            icon: isM ? /*#__PURE__*/ jsx(AddFile12Icon, {}) : /*#__PURE__*/ jsx(AddFile16Icon, {}),
+                            size: size,
+                            disabled: disabled,
+                            "data-test-id": testId ? `${testId}-file-btn` : ''
+                        })
+                    }),
+                    onMainBtnClick && /*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            showDivider && /*#__PURE__*/ jsx("div", {
+                                className: cn(InputContainer_module.mainBtnDivider, isM ? '' : InputContainer_module.mainBtnDividerLarge)
+                            }),
+                            /*#__PURE__*/ jsx(ActionButton, {
+                                onClick: onMainBtnClick,
+                                iconOverride: mainBtnIcon,
+                                icon: isM ? /*#__PURE__*/ jsx(SendMessage12Icon, {}) : /*#__PURE__*/ jsx(SendMessage16Icon, {}),
+                                size: size,
+                                disabled: disabled,
+                                "data-test-id": testId ? `${testId}-main-btn` : '',
+                                variant: "filled"
+                            })
+                        ]
+                    })
+                ]
+            }),
+            resizeBottomSlot
         ]
-    }));
+    });
+});
 InputContainer.displayName = 'InputContainer';
 export { InputContainer };

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

@@ -4,6 +4,12 @@ const InputContainer_module = {
     focused: "focused-ORhBSR",
     disabled: "disabled-NuqWEY",
     error: "error-BWY9xH",
-    actionsBar: "actionsBar-hEerOT"
+    actionsBar: "actionsBar-hEerOT",
+    files: "files-dNxdJy",
+    actions: "actions-U6Jj6H",
+    actionsL: "actionsL-y4vtZP",
+    mainBtnDivider: "mainBtnDivider-omXg1b",
+    mainBtnDividerLarge: "mainBtnDividerLarge-hXiU5u",
+    fileUploader: "fileUploader-AHKIZK"
 };
 export default InputContainer_module;