@true-engineering/true-react-common-ui-kit 4.0.0-alpha0 → 4.0.0-alpha1

package/dist/components/ControlWrapper/ControlWrapper.styles.d.ts

@@ -1,6 +1,6 @@
 import { ITweakStyles } from '../../theme';
 import { IThemedPreloaderStyles } from '../ThemedPreloader';
-export declare const useStyles: import("../../theme").IUseStyles<"invalid" | "root" | "icon" | "disabled" | "loader" | "loading" | "label" | "requiredLabel" | "withValue" | "clearIcon" | "focused" | "minContent" | "activeLabel" | "disabledLabel" | "wrapper" | "controls" | "iconInner" | "customIcon" | "endIcon" | "activeIcon" | "placement-top" | "placement-bottom" | "placement-top-left" | "placement-top-right" | "placement-bottom-left" | "placement-bottom-right" | "placement-left" | "placement-right" | "placement-middle", unknown>;
+export declare const useStyles: import("../../theme").IUseStyles<"invalid" | "icon" | "disabled" | "loader" | "loading" | "label" | "requiredLabel" | "withValue" | "clearIcon" | "focused" | "wrapper" | "controlWrapper" | "minContent" | "activeLabel" | "disabledLabel" | "controls" | "iconInner" | "customIcon" | "endIcon" | "activeIcon" | "placement-top" | "placement-bottom" | "placement-top-left" | "placement-top-right" | "placement-bottom-left" | "placement-bottom-right" | "placement-left" | "placement-right" | "placement-middle", unknown>;
 export type IControlWrapperStyles = ITweakStyles<typeof useStyles, {
     tweakPreloader: IThemedPreloaderStyles;
 }>;

package/dist/components/Input/Input.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { IControlGroupProps } from '../ControlGroup';
+import { IWithMessagesProps } from '../WithMessages';
 import { IInputBaseProps } from './InputBase';
-export type IInputProps = IInputBaseProps & Pick<IControlGroupProps, 'infoMessage' | 'errorMessage'>;
-export declare const Input: import("react").ForwardRefExoticComponent<IInputBaseProps & Pick<IControlGroupProps, "infoMessage" | "errorMessage"> & import("react").RefAttributes<HTMLInputElement>>;
+export type IInputProps = IInputBaseProps & Pick<IWithMessagesProps, 'infoMessage' | 'errorMessage'>;
+export declare const Input: import("react").ForwardRefExoticComponent<IInputBaseProps & Pick<IWithMessagesProps, "infoMessage" | "errorMessage"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/Input/Input.stories.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<import("./InputBase").IInputBaseProps & Pick<import("..").IControlGroupProps, "infoMessage" | "errorMessage"> & import("react").RefAttributes<HTMLInputElement>>;
+    component: import("react").ForwardRefExoticComponent<import("./InputBase").IInputBaseProps & Pick<import("..").IWithMessagesProps, "infoMessage" | "errorMessage"> & import("react").RefAttributes<HTMLInputElement>>;
     argTypes: {
         type: {
             control: string;
@@ -22,4 +22,4 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("./InputBase").IInputBaseProps & Pick<import("..").IControlGroupProps, "infoMessage" | "errorMessage"> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("./InputBase").IInputBaseProps & Pick<import("..").IWithMessagesProps, "infoMessage" | "errorMessage"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/Input/Input.styles.d.ts

@@ -1,8 +1,8 @@
 import { ITweakStyles } from '../../theme';
-import { IControlGroupStyles } from '../ControlGroup';
 import { IControlWrapperStyles } from '../ControlWrapper';
-export declare const useStyles: import("../../theme").IUseStyles<"input" | "inputContent" | "autoSizeWrapper" | "autoSized" | "withUnits" | "withLabel" | "fakeValue" | "units" | "focusedInput" | "disabledInput" | "invalidInput", unknown>;
+import { IWithMessagesStyles } from '../WithMessages';
+export declare const useStyles: import("../../theme").IUseStyles<"input" | "withValue" | "inputContent" | "autoSizeWrapper" | "autoSized" | "withUnits" | "withLabel" | "fakeValue" | "units" | "focusedInput" | "disabledInput" | "invalidInput", unknown>;
 export type IInputStyles = ITweakStyles<typeof useStyles, {
     tweakControlWrapper: IControlWrapperStyles;
-    tweakControlGroup: IControlGroupStyles;
+    tweakWithMessages: IWithMessagesStyles;
 }>;

package/dist/components/SearchInput/SearchInput.stories.d.ts

@@ -4,13 +4,13 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, Omit<import("..").IInputProps, "tweakStyles" | "label" | "isInvalid" | "type" | "isActive" | "errorMessage"> & import("../..").IDataAttributesProps & import("../..").ITweakStylesProps<Partial<import("jss").Styles<"root" | "icon", unknown, undefined>> & Partial<{
-    tweakInput: Partial<import("jss").Styles<"input" | "inputContent" | "autoSizeWrapper" | "autoSized" | "withUnits" | "withLabel" | "fakeValue" | "units" | "focusedInput" | "disabledInput" | "invalidInput", unknown, undefined>> & Partial<{
-        tweakControlWrapper: Partial<import("jss").Styles<"invalid" | "root" | "icon" | "disabled" | "loader" | "loading" | "label" | "requiredLabel" | "withValue" | "clearIcon" | "focused" | "minContent" | "activeLabel" | "disabledLabel" | "wrapper" | "controls" | "iconInner" | "customIcon" | "endIcon" | "activeIcon" | "placement-top" | "placement-bottom" | "placement-top-left" | "placement-top-right" | "placement-bottom-left" | "placement-bottom-right" | "placement-left" | "placement-right" | "placement-middle", unknown, undefined>> & Partial<{
+    tweakInput: Partial<import("jss").Styles<"input" | "withValue" | "inputContent" | "autoSizeWrapper" | "autoSized" | "withUnits" | "withLabel" | "fakeValue" | "units" | "focusedInput" | "disabledInput" | "invalidInput", unknown, undefined>> & Partial<{
+        tweakControlWrapper: Partial<import("jss").Styles<"invalid" | "icon" | "disabled" | "loader" | "loading" | "label" | "requiredLabel" | "withValue" | "clearIcon" | "focused" | "wrapper" | "controlWrapper" | "minContent" | "activeLabel" | "disabledLabel" | "controls" | "iconInner" | "customIcon" | "endIcon" | "activeIcon" | "placement-top" | "placement-bottom" | "placement-top-left" | "placement-top-right" | "placement-bottom-left" | "placement-bottom-right" | "placement-left" | "placement-right" | "placement-middle", unknown, undefined>> & Partial<{
             tweakPreloader: Partial<import("jss").Styles<"root" | "default" | "currentColor" | "dots" | "logo", unknown, undefined>> & Partial<{
                 tweakDotsPreloader: Partial<import("jss").Styles<"root" | "dot" | "fadedDot" | "@keyframes FadedDots", unknown, undefined>> & Partial<unknown>;
                 tweakSvgPreloader: Partial<import("jss").Styles<"root", unknown, undefined>> & Partial<unknown>;
             }>;
         }>;
-        tweakControlGroup: Partial<import("jss").Styles<"error" | "root" | "horizontal" | "vertical" | "children" | "info" | "message", unknown, undefined>> & Partial<unknown>;
+        tweakWithMessages: Partial<import("jss").Styles<"error" | "horizontal" | "vertical" | "children" | "info" | "withMessages" | "message", unknown, undefined>> & Partial<unknown>;
     }>;
 }>>>;

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

@@ -1,33 +1,33 @@
 import { type ITweakStyles } from '../../theme';
-import { IControlGroupStyles } from '../ControlGroup';
 import { type IInputStyles } from '../Input';
 import { type ISearchInputStyles } from '../SearchInput';
+import { IWithMessagesStyles } from '../WithMessages';
 import { type ISelectListStyles } from './components';
 export declare const useStyles: import("../../theme").IUseStyles<"root" | "icon" | "disabled" | "inputWrapper" | "arrow" | "listWrapper" | "withoutPopper" | "listWrapperInBody" | "activeArrow" | "counter" | "iconWrapper", unknown>;
-export declare const readonlyInputStyles: Partial<import("jss").Styles<"input" | "inputContent" | "autoSizeWrapper" | "autoSized" | "withUnits" | "withLabel" | "fakeValue" | "units" | "focusedInput" | "disabledInput" | "invalidInput", unknown, undefined>> & Partial<{
-    tweakControlWrapper: Partial<import("jss").Styles<"invalid" | "root" | "icon" | "disabled" | "loader" | "loading" | "label" | "requiredLabel" | "withValue" | "clearIcon" | "focused" | "minContent" | "activeLabel" | "disabledLabel" | "wrapper" | "controls" | "iconInner" | "customIcon" | "endIcon" | "activeIcon" | "placement-top" | "placement-bottom" | "placement-top-left" | "placement-top-right" | "placement-bottom-left" | "placement-bottom-right" | "placement-left" | "placement-right" | "placement-middle", unknown, undefined>> & Partial<{
+export declare const readonlyInputStyles: Partial<import("jss").Styles<"input" | "withValue" | "inputContent" | "autoSizeWrapper" | "autoSized" | "withUnits" | "withLabel" | "fakeValue" | "units" | "focusedInput" | "disabledInput" | "invalidInput", unknown, undefined>> & Partial<{
+    tweakControlWrapper: Partial<import("jss").Styles<"invalid" | "icon" | "disabled" | "loader" | "loading" | "label" | "requiredLabel" | "withValue" | "clearIcon" | "focused" | "wrapper" | "controlWrapper" | "minContent" | "activeLabel" | "disabledLabel" | "controls" | "iconInner" | "customIcon" | "endIcon" | "activeIcon" | "placement-top" | "placement-bottom" | "placement-top-left" | "placement-top-right" | "placement-bottom-left" | "placement-bottom-right" | "placement-left" | "placement-right" | "placement-middle", unknown, undefined>> & Partial<{
         tweakPreloader: Partial<import("jss").Styles<"root" | "default" | "currentColor" | "dots" | "logo", unknown, undefined>> & Partial<{
             tweakDotsPreloader: Partial<import("jss").Styles<"root" | "dot" | "fadedDot" | "@keyframes FadedDots", unknown, undefined>> & Partial<unknown>;
             tweakSvgPreloader: Partial<import("jss").Styles<"root", unknown, undefined>> & Partial<unknown>;
         }>;
     }>;
-    tweakControlGroup: Partial<import("jss").Styles<"error" | "root" | "horizontal" | "vertical" | "children" | "info" | "message", unknown, undefined>> & Partial<unknown>;
+    tweakWithMessages: Partial<import("jss").Styles<"error" | "horizontal" | "vertical" | "children" | "info" | "withMessages" | "message", unknown, undefined>> & Partial<unknown>;
 }>;
-export declare const readonlyMultiSelectStyles: Partial<import("jss").Styles<"input" | "inputContent" | "autoSizeWrapper" | "autoSized" | "withUnits" | "withLabel" | "fakeValue" | "units" | "focusedInput" | "disabledInput" | "invalidInput", unknown, undefined>> & Partial<{
-    tweakControlWrapper: Partial<import("jss").Styles<"invalid" | "root" | "icon" | "disabled" | "loader" | "loading" | "label" | "requiredLabel" | "withValue" | "clearIcon" | "focused" | "minContent" | "activeLabel" | "disabledLabel" | "wrapper" | "controls" | "iconInner" | "customIcon" | "endIcon" | "activeIcon" | "placement-top" | "placement-bottom" | "placement-top-left" | "placement-top-right" | "placement-bottom-left" | "placement-bottom-right" | "placement-left" | "placement-right" | "placement-middle", unknown, undefined>> & Partial<{
+export declare const readonlyMultiSelectStyles: Partial<import("jss").Styles<"input" | "withValue" | "inputContent" | "autoSizeWrapper" | "autoSized" | "withUnits" | "withLabel" | "fakeValue" | "units" | "focusedInput" | "disabledInput" | "invalidInput", unknown, undefined>> & Partial<{
+    tweakControlWrapper: Partial<import("jss").Styles<"invalid" | "icon" | "disabled" | "loader" | "loading" | "label" | "requiredLabel" | "withValue" | "clearIcon" | "focused" | "wrapper" | "controlWrapper" | "minContent" | "activeLabel" | "disabledLabel" | "controls" | "iconInner" | "customIcon" | "endIcon" | "activeIcon" | "placement-top" | "placement-bottom" | "placement-top-left" | "placement-top-right" | "placement-bottom-left" | "placement-bottom-right" | "placement-left" | "placement-right" | "placement-middle", unknown, undefined>> & Partial<{
         tweakPreloader: Partial<import("jss").Styles<"root" | "default" | "currentColor" | "dots" | "logo", unknown, undefined>> & Partial<{
             tweakDotsPreloader: Partial<import("jss").Styles<"root" | "dot" | "fadedDot" | "@keyframes FadedDots", unknown, undefined>> & Partial<unknown>;
             tweakSvgPreloader: Partial<import("jss").Styles<"root", unknown, undefined>> & Partial<unknown>;
         }>;
     }>;
-    tweakControlGroup: Partial<import("jss").Styles<"error" | "root" | "horizontal" | "vertical" | "children" | "info" | "message", unknown, undefined>> & Partial<unknown>;
+    tweakWithMessages: Partial<import("jss").Styles<"error" | "horizontal" | "vertical" | "children" | "info" | "withMessages" | "message", unknown, undefined>> & Partial<unknown>;
 }>;
 export declare const getInputStyles: ({ hasReadonlyInput, isMultiSelect, }: {
     hasReadonlyInput: boolean;
     isMultiSelect?: boolean | undefined;
 }) => IInputStyles;
 export type ISelectStyles = ITweakStyles<typeof useStyles, {
-    tweakControlGroup: IControlGroupStyles;
+    tweakWithMessages: IWithMessagesStyles;
     tweakInput: IInputStyles;
     tweakSelectList: ISelectListStyles;
     tweakSearchInput: ISearchInputStyles;

package/dist/components/TextArea/TextArea.d.ts

@@ -1,10 +1,10 @@
 import { FormEvent } from 'react';
 import { ICommonProps } from '../../types';
-import { IControlGroupProps } from '../ControlGroup';
 import { IControlWrapperProps } from '../ControlWrapper';
+import { IWithMessagesProps } from '../WithMessages';
 import { ITextAreaHTMLBaseProps } from './types';
 import { ITextAreaStyles } from './TextArea.styles';
-export interface ITextAreaProps extends ICommonProps<ITextAreaStyles>, Pick<IControlWrapperProps, 'label' | 'isInvalid' | 'isRequired' | 'isDisabled'>, Pick<IControlGroupProps, 'infoMessage' | 'errorMessage'>, Pick<ITextAreaHTMLBaseProps, 'name' | 'maxLength' | 'rows' | 'onPaste' | 'onFocus' | 'onBlur'> {
+export interface ITextAreaProps extends ICommonProps<ITextAreaStyles>, Pick<IControlWrapperProps, 'label' | 'isInvalid' | 'isRequired' | 'isDisabled'>, Pick<IWithMessagesProps, 'infoMessage' | 'errorMessage'>, Pick<ITextAreaHTMLBaseProps, 'name' | 'maxLength' | 'rows' | 'onPaste' | 'onFocus' | 'onBlur'> {
     value?: string;
     placeholder?: string;
     /** @default false */

package/dist/components/TextArea/TextArea.styles.d.ts

@@ -1,9 +1,9 @@
 import { ITweakStyles } from '../../theme';
-import { IControlGroupStyles } from '../ControlGroup';
 import { IControlWrapperStyles } from '../ControlWrapper';
-export declare const useStyles: import("../../theme").IUseStyles<"textarea" | "autoSized" | "symbolsCount" | "symbolsCountError", unknown>;
+import { IWithMessagesStyles } from '../WithMessages';
+export declare const useStyles: import("../../theme").IUseStyles<"textarea" | "autoSized" | "wrapper" | "symbolsCount" | "symbolsCountError", unknown>;
 export declare const controlWrapperStyles: IControlWrapperStyles;
 export type ITextAreaStyles = ITweakStyles<typeof useStyles, {
-    tweakControlGroup: IControlGroupStyles;
+    tweakWithMessages: IWithMessagesStyles;
     tweakControlWrapper: IControlWrapperStyles;
 }>;

package/dist/components/WithMessages/WithMessages.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { ICommonProps } from '../../types';
+import { IWithMessagesStyles } from './WithMessages.styles';
+export interface IWithMessagesProps extends ICommonProps<IWithMessagesStyles> {
+    children: ReactNode;
+    infoMessage?: ReactNode;
+    errorMessage?: ReactNode;
+    controlsDirection?: 'horizontal' | 'vertical';
+}
+export declare const WithMessages: import("react").ForwardRefExoticComponent<IWithMessagesProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/{ControlGroup/ControlGroup.stories.d.ts → WithMessages/WithMessages.stories.d.ts}

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<import("./ControlGroup").IControlGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+    component: import("react").ForwardRefExoticComponent<import("./WithMessages").IWithMessagesProps & import("react").RefAttributes<HTMLDivElement>>;
 };
 export default _default;
-export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("./ControlGroup").IControlGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("./WithMessages").IWithMessagesProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/WithMessages/WithMessages.styles.d.ts

@@ -0,0 +1,3 @@
+import { ITweakStyles } from '../../theme';
+export declare const useStyles: import("../../theme").IUseStyles<"error" | "horizontal" | "vertical" | "children" | "info" | "withMessages" | "message", unknown>;
+export type IWithMessagesStyles = ITweakStyles<typeof useStyles>;

package/dist/components/WithMessages/index.d.ts

@@ -0,0 +1,2 @@
+export * from './WithMessages';
+export type { IWithMessagesStyles } from './WithMessages.styles';

package/dist/components/index.d.ts

@@ -44,5 +44,5 @@ export * from './Tooltip';
 export * from './NewMoreMenu';
 export * from './WithPopup';
 export * from './WithTooltip';
-export * from './ControlGroup';
+export * from './WithMessages';
 export * from './ControlWrapper';

package/dist/theme/types.d.ts

@@ -1,6 +1,6 @@
 import { Styles } from 'react-jss';
 import { Classes, JssValue } from 'jss';
-import type { IAccountInfoStyles, IAddButtonStyles, IButtonStyles, ICheckboxStyles, ICloseButtonStyles, ICommonIcon, IComplexIcon, IControlGroupStyles, IControlWrapperStyles, ICssBaselineStyles, IDateInputStyles, IDatePickerHeaderStyles, IDatePickerStyles, IDescriptionStyles, IDotsPreloaderStyles, IFileInputStyles, IFileItemStyles, IFilterIntervalStyles, IFilterSelectStyles, IFiltersPaneSearchStyles, IFiltersPaneStyles, IFilterValueViewStyles, IFilterWithDatesStyles, IFilterWithPeriodStyles, IFilterWrapperStyles, IFlagStyles, IFlexibleTableCellStyles, IFlexibleTableRowStyles, IFlexibleTableStyles, IIconButtonStyles, IIconStyles, IIncrementInputStyles, IInputStyles, IListItemStyles, IListStyles, IModalStyles, IMoreMenuStyles, IMultiSelectInputStyles, IMultiSelectListStyles, IMultiSelectStyles, INewMoreMenuStyles, INotificationStyles, IPhoneInputCountryListStyles, IPhoneInputStyles, IPreloaderSvgType, IRadioButtonStyles, ISearchInputStyles, ISelectListStyles, ISelectorStyles, ISelectStyles, ISkeletonStyles, IStatusStyles, ISvgIcon, ISvgPreloaderStyles, ISwitchStyles, ITextAreaStyles, ITextButtonStyles, ITextWithInfoStyles, ITextWithTooltipStyles, IThemedPreloaderStyles, IToasterStyles, ITooltipStyles, IWithPopupStyles, IWithTooltipStyles } from '../components';
+import type { IAccountInfoStyles, IAddButtonStyles, IButtonStyles, ICheckboxStyles, ICloseButtonStyles, ICommonIcon, IComplexIcon, IWithMessagesStyles, IControlWrapperStyles, ICssBaselineStyles, IDateInputStyles, IDatePickerHeaderStyles, IDatePickerStyles, IDescriptionStyles, IDotsPreloaderStyles, IFileInputStyles, IFileItemStyles, IFilterIntervalStyles, IFilterSelectStyles, IFiltersPaneSearchStyles, IFiltersPaneStyles, IFilterValueViewStyles, IFilterWithDatesStyles, IFilterWithPeriodStyles, IFilterWrapperStyles, IFlagStyles, IFlexibleTableCellStyles, IFlexibleTableRowStyles, IFlexibleTableStyles, IIconButtonStyles, IIconStyles, IIncrementInputStyles, IInputStyles, IListItemStyles, IListStyles, IModalStyles, IMoreMenuStyles, IMultiSelectInputStyles, IMultiSelectListStyles, IMultiSelectStyles, INewMoreMenuStyles, INotificationStyles, IPhoneInputCountryListStyles, IPhoneInputStyles, IPreloaderSvgType, IRadioButtonStyles, ISearchInputStyles, ISelectListStyles, ISelectorStyles, ISelectStyles, ISkeletonStyles, IStatusStyles, ISvgIcon, ISvgPreloaderStyles, ISwitchStyles, ITextAreaStyles, ITextButtonStyles, ITextWithInfoStyles, ITextWithTooltipStyles, IThemedPreloaderStyles, IToasterStyles, ITooltipStyles, IWithPopupStyles, IWithTooltipStyles } from '../components';
 export type IStyles<C extends string, P> = Styles<C, P, Partial<Styles<C, P>>>;
 export type IUseStyles<C extends string, P = unknown> = (data?: P & {
     theme?: Partial<Styles<C, P>>;
@@ -64,7 +64,7 @@ export interface IComponentStyles {
     Toaster: IToasterStyles;
     WithPopup: IWithPopupStyles;
     NewMoreMenu: INewMoreMenuStyles;
-    ControlGroup: IControlGroupStyles;
+    WithMessages: IWithMessagesStyles;
     ControlWrapper: IControlWrapperStyles;
     WithTooltip: IWithTooltipStyles;
 }

package/dist/true-react-common-ui-kit.js

@@ -9626,11 +9626,12 @@ var CssBaseline = function(param) {
     className: classes.root
   }, addDataTestId(testId), addDataAttributes(data)));
 };
-var useStyles$J = createThemedStyles("ControlGroup", {
-  root: {
+var useStyles$J = createThemedStyles("WithMessages", {
+  withMessages: {
     display: "flex",
     flexDirection: "column",
-    width: "100%"
+    width: "100%",
+    position: "relative"
   },
   error: {
     color: "red"
@@ -9711,8 +9712,8 @@ function _object_spread_props$L(target, source) {
   }
   return target;
 }
-var ControlGroup = /* @__PURE__ */ forwardRef(function(param, ref) {
-  var children = param.children, infoMessage = param.infoMessage, errorMessage = param.errorMessage, direction = param.direction, tweakStyles = param.tweakStyles, testId = param.testId, data = param.data;
+var WithMessages = /* @__PURE__ */ forwardRef(function(param, ref) {
+  var children = param.children, infoMessage = param.infoMessage, errorMessage = param.errorMessage, controlsDirection = param.controlsDirection, tweakStyles = param.tweakStyles, testId = param.testId, data = param.data;
   var classes = useStyles$J({
     theme: tweakStyles
   });
@@ -9721,12 +9722,12 @@ var ControlGroup = /* @__PURE__ */ forwardRef(function(param, ref) {
   var _obj2;
   return /* @__PURE__ */ jsxs("div", _object_spread_props$L(_object_spread$S({
     ref,
-    className: classes.root,
+    className: classes.withMessages,
     "data-invalid": shouldShowError ? true : void 0
   }, addDataAttributes$1(data, testId)), {
     children: [
       isReactNodeNotEmpty(children) && /* @__PURE__ */ jsx("div", {
-        className: clsx(classes.children, (_obj2 = {}, _define_property$U(_obj2, classes.horizontal, direction === "horizontal"), _define_property$U(_obj2, classes.vertical, direction === "vertical"), _obj2)),
+        className: clsx(classes.children, (_obj2 = {}, _define_property$U(_obj2, classes.horizontal, controlsDirection === "horizontal"), _define_property$U(_obj2, classes.vertical, controlsDirection === "vertical"), _obj2)),
         children
       }),
       (shouldShowError || shouldShowInfo) && /* @__PURE__ */ jsxs("div", {
@@ -9749,7 +9750,7 @@ var ControlGroup = /* @__PURE__ */ forwardRef(function(param, ref) {
 });
 var CONTROL$1 = dimensions.CONTROL, Z_INDEX$2 = dimensions.Z_INDEX;
 var useStyles$I = createThemedStyles("ControlWrapper", {
-  root: {
+  controlWrapper: {
     "--control-height": "".concat(CONTROL$1.HEIGHT - 2, "px"),
     // borders
     "--control-padding": "".concat(CONTROL$1.PADDING, "px"),
@@ -9966,7 +9967,7 @@ var ControlWrapper = function(param) {
   });
   var _obj2, _obj1, _obj22;
   return /* @__PURE__ */ jsxs("div", _object_spread_props$K(_object_spread$R({
-    className: clsx(classes.root, isNotEmpty(groupPlacement) && [
+    className: clsx(classes.controlWrapper, isNotEmpty(groupPlacement) && [
       classes["placement-".concat(groupPlacement)]
     ], (_obj2 = {}, _define_property$T(_obj2, classes.invalid, isInvalid), _define_property$T(_obj2, classes.focused, isFocused), _define_property$T(_obj2, classes.withValue, hasValue), _define_property$T(_obj2, classes.disabled, isDisabled), _define_property$T(_obj2, classes.loading, isLoading), _define_property$T(_obj2, classes.minContent, !isFullWidth), _obj2))
   }, addDataAttributes$1(data, testId)), {
@@ -10074,12 +10075,14 @@ var useStyles$H = createThemedStyles("Input", {
     }
   },
   withLabel: {},
+  withValue: {},
   fakeValue: {
     extend: "inputContent",
     visibility: "hidden",
     maxWidth: "100%",
     overflow: "hidden",
-    minWidth: 8
+    minWidth: 8,
+    whiteSpace: "nowrap"
   },
   units: {
     alignSelf: "center",
@@ -10459,7 +10462,7 @@ var InputBase = /* @__PURE__ */ forwardRef(function(_param, ref) {
   ]);
   var _obj2;
   var props = _object_spread$Q({
-    className: clsx(classes.input, (_obj2 = {}, _define_property$S(_obj2, classes.withUnits, hasUnits), _define_property$S(_obj2, classes.withLabel, isReactNodeNotEmpty(label)), _define_property$S(_obj2, classes.autoSized, isAutoSized), _define_property$S(_obj2, classes.focusedInput, isFocused), _define_property$S(_obj2, classes.disabledInput, isDisabled), _define_property$S(_obj2, classes.invalidInput, isInvalid), _obj2)),
+    className: clsx(classes.input, (_obj2 = {}, _define_property$S(_obj2, classes.withUnits, hasUnits), _define_property$S(_obj2, classes.withValue, hasValue), _define_property$S(_obj2, classes.withLabel, isReactNodeNotEmpty(label)), _define_property$S(_obj2, classes.autoSized, isAutoSized), _define_property$S(_obj2, classes.focusedInput, isFocused), _define_property$S(_obj2, classes.disabledInput, isDisabled), _define_property$S(_obj2, classes.invalidInput, isInvalid), _obj2)),
     style: hasUnits && hasValue ? {
       "--units-width": "".concat(unitsWidth, "px")
     } : void 0,
@@ -10615,15 +10618,15 @@ var Input = /* @__PURE__ */ forwardRef(function(_param, ref) {
     "testId",
     "tweakStyles"
   ]);
-  var tweakControlGroupStyles = useTweakStyles({
+  var tweakWithMessagesStyles = useTweakStyles({
     tweakStyles,
-    className: "tweakControlGroup"
+    className: "tweakWithMessages"
   });
-  return /* @__PURE__ */ jsx(ControlGroup, {
+  return /* @__PURE__ */ jsx(WithMessages, {
     errorMessage,
     infoMessage,
     testId,
-    tweakStyles: tweakControlGroupStyles,
+    tweakStyles: tweakWithMessagesStyles,
     children: /* @__PURE__ */ jsx(InputBase, _object_spread_props$I(_object_spread$P({}, inputProps), {
       ref,
       testId,
@@ -10801,7 +10804,7 @@ var useStyles$F = createThemedStyles("SearchInput", {
 });
 var inputStyles$4 = {
   tweakControlWrapper: {
-    root: {
+    controlWrapper: {
       borderColor: "transparent",
       borderRadius: 18,
       paddingLeft: 0,
@@ -11573,6 +11576,11 @@ var baseInputStyles = {
   inputContent: {
     paddingRight: 32
   },
+  input: {
+    "&[readonly]": {
+      cursor: "pointer"
+    }
+  },
   tweakControlWrapper: {
     controls: {
       paddingRight: 40
@@ -11935,9 +11943,9 @@ function Select(props) {
   ]);
   var hasSearchInputInList = optionsMode !== "normal" && shouldRenderSearchInputInList;
   var hasReadonlyInput = isReadonly || optionsMode === "normal" || shouldRenderSearchInputInList;
-  var tweakControlGroupStyles = useTweakStyles({
+  var tweakWithMessagesStyles = useTweakStyles({
     tweakStyles,
-    className: "tweakControlGroup",
+    className: "tweakWithMessages",
     currentComponentName: "Select"
   });
   var tweakInputStyles = useTweakStyles({
@@ -12029,22 +12037,10 @@ function Select(props) {
     convertValueToId,
     convertValueToString
   ]);
-  var getDropdownOffset = function() {
-    var _input_current_parentElement2;
-    if (isEmpty(input.current)) {
-      return 0;
-    }
-    var _input_current_parentElement_offsetHeight;
-    return (_input_current_parentElement_offsetHeight = (_input_current_parentElement2 = input.current.parentElement) === null || _input_current_parentElement2 === void 0 ? void 0 : _input_current_parentElement2.offsetHeight) !== null && _input_current_parentElement_offsetHeight !== void 0 ? _input_current_parentElement_offsetHeight : 0;
-  };
   var closeList = useCallback(function() {
     setIsListOpen(false);
     setSearchValue("");
     setShouldShowDefaultOption(true);
-    if (!(dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.shouldUsePopper)) {
-      var _root_current;
-      (_root_current = root2.current) === null || _root_current === void 0 ? void 0 : _root_current.style.removeProperty("--dropdown-offset");
-    }
   }, [
     dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.shouldUsePopper
   ]);
@@ -12056,15 +12052,8 @@ function Select(props) {
     onBlur
   ]);
   var handleListOpen = function() {
-    if (isReadonly) {
-      return;
-    }
-    if (!isListOpen) {
+    if (!isReadonly && !isListOpen) {
       setIsListOpen(true);
-      if (!(dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.shouldUsePopper)) {
-        var _root_current;
-        (_root_current = root2.current) === null || _root_current === void 0 ? void 0 : _root_current.style.setProperty("--dropdown-offset", "".concat(getDropdownOffset(), "px"));
-      }
     }
   };
   var handleFocus = function(event) {
@@ -12360,10 +12349,10 @@ function Select(props) {
       })
     ]
   }) : void 0;
-  return /* @__PURE__ */ jsx(ControlGroup, {
+  return /* @__PURE__ */ jsx(WithMessages, {
     errorMessage,
     infoMessage,
-    tweakStyles: tweakControlGroupStyles,
+    tweakStyles: tweakWithMessagesStyles,
     children: /* @__PURE__ */ jsxs("div", {
       className: classes.root,
       onKeyDown: handleKeyDown,
@@ -12440,7 +12429,7 @@ var selectStyles$1 = {
   },
   tweakInput: {
     tweakControlWrapper: {
-      root: {
+      controlWrapper: {
         "--control-height": "35px",
         border: "none"
       }
@@ -15434,7 +15423,7 @@ var useStyles$s = createThemedStyles("MultiSelectList", {
 var searchInputStyles$2 = {
   tweakInput: {
     tweakControlWrapper: {
-      root: {
+      controlWrapper: {
         "--control-height": "40px",
         backgroundColor: "transparent",
         border: "none"
@@ -16394,7 +16383,7 @@ var useStyles$r = createThemedStyles("FilterSelect", {
 var searchInputStyles$1 = {
   tweakInput: {
     tweakControlWrapper: {
-      root: {
+      controlWrapper: {
         "--control-height": "40px",
         backgroundColor: "transparent",
         border: "none"
@@ -18981,7 +18970,7 @@ var useStyles$o = createThemedStyles("FiltersPaneSearch", {
 var searchInputStyles = {
   tweakInput: {
     tweakControlWrapper: {
-      root: {
+      controlWrapper: {
         "--control-height": "".concat(FILTER_HEIGHT - 2, "px"),
         backgroundColor: "transparent",
         border: "none",
@@ -28463,7 +28452,7 @@ var useStyles$a = createThemedStyles("PhoneInputCountryList", {
 });
 var inputStyles$1 = {
   tweakControlWrapper: {
-    root: {
+    controlWrapper: {
       border: "none",
       height: "calc(var(--control-height) - 2px)"
     }
@@ -28738,7 +28727,7 @@ var useStyles$9 = createThemedStyles("PhoneInput", {
 });
 var inputStyles = {
   tweakControlWrapper: {
-    root: {
+    controlWrapper: {
       paddingLeft: COUNTRY_SELECT_WIDTH
     },
     label: {
@@ -30389,11 +30378,14 @@ var useStyles$4 = createThemedStyles("TextArea", {
       margin: 0
     }
   }),
+  wrapper: {
+    width: "100%"
+  },
   autoSized: {
     display: "grid",
     gridTemplateRows: "minmax(0, 100%)",
     "& > $textarea, &::after": {
-      gridArea: "1 / 2"
+      gridArea: "1 / 1"
     },
     "&::after": {
       extend: "textarea",
@@ -30594,9 +30586,9 @@ var TextArea = /* @__PURE__ */ forwardRef(function(_param, ref) {
   var classes = useStyles$4({
     theme: tweakStyles
   });
-  var tweakControlGroupStyles = useTweakStyles({
+  var tweakWithMessagesStyles = useTweakStyles({
     tweakStyles,
-    className: "tweakControlGroup",
+    className: "tweakWithMessages",
     currentComponentName: "TextArea"
   });
   var tweakControlWrapperStyles = useTweakStyles({
@@ -30621,10 +30613,10 @@ var TextArea = /* @__PURE__ */ forwardRef(function(_param, ref) {
     setFocused(false);
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
   };
-  return /* @__PURE__ */ jsxs(ControlGroup, {
+  return /* @__PURE__ */ jsxs(WithMessages, {
     errorMessage,
     infoMessage,
-    tweakStyles: tweakControlGroupStyles,
+    tweakStyles: tweakWithMessagesStyles,
     children: [
       /* @__PURE__ */ jsx(ControlWrapper, _object_spread_props$5(_object_spread$5({
         label,
@@ -30635,8 +30627,9 @@ var TextArea = /* @__PURE__ */ forwardRef(function(_param, ref) {
         isFullWidth: true,
         testId
       }, controlProps), {
-        children: /* @__PURE__ */ jsx("div", _object_spread_props$5(_object_spread$5({}, isAutoSized && {
-          className: classes.autoSized,
+        children: /* @__PURE__ */ jsx("div", _object_spread_props$5(_object_spread$5({
+          className: clsx(classes.wrapper, _define_property$5({}, classes.autoSized, isAutoSized))
+        }, isAutoSized && {
           "data-value": value
         }), {
           children: /* @__PURE__ */ jsx("textarea", _object_spread$5({
@@ -31500,7 +31493,6 @@ export {
   Checkbox,
   CloseButton,
   Colors,
-  ControlGroup,
   ControlWrapper,
   CssBaseline,
   DEFAULT_PHONE_MASK,
@@ -31557,6 +31549,7 @@ export {
   ThemedPreloader,
   Toaster,
   Tooltip,
+  WithMessages,
   WithPopup,
   WithTooltip,
   addDataAttributes,