@true-engineering/true-react-common-ui-kit 4.0.0-alpha20 → 4.0.0-alpha22

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

@@ -1,9 +1,7 @@
 import { ITweakStyles } from '../../theme';
 import { IInputStyles } from '../Input';
-export declare const BUTTONS_WIDTH = 36;
-export declare const BUTTONS_GAP = 2;
-export declare const useStyles: import("../../theme").IUseStyles<"root" | "button" | "buttons" | "disabledButton" | "errorButton", unknown>;
 export declare const inputStyles: IInputStyles;
+export declare const useStyles: import("../../theme").IUseStyles<"button" | "icon" | "buttons" | "disabledButton" | "errorButton", unknown>;
 export type IIncrementInputStyles = ITweakStyles<typeof useStyles, {
     tweakInput: IInputStyles;
 }>;

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

@@ -4,7 +4,7 @@ import { ICommonProps } from '../../types';
 import { IControlWrapperProps } from '../ControlWrapper';
 import { IChangeInputEvent } from './types';
 import { IInputStyles } from './Input.styles';
-export interface IInputBaseProps extends ICommonProps<IInputStyles>, Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size'>, Pick<IControlWrapperProps, 'label' | 'icon' | 'groupPlacement' | 'isInvalid' | 'isRequired' | 'isLoading' | 'isDisabled' | 'onIconClick' | 'size'>, Pick<Partial<ReactInputMaskBaseProps>, 'mask' | 'maskPlaceholder' | 'alwaysShowMask' | 'beforeMaskedStateChange'> {
+export interface IInputBaseProps extends ICommonProps<IInputStyles>, Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size'>, Pick<IControlWrapperProps, 'label' | 'icon' | 'size' | 'groupPlacement' | 'isInvalid' | 'isRequired' | 'isLoading' | 'isDisabled' | 'onIconClick'>, Pick<Partial<ReactInputMaskBaseProps>, 'mask' | 'maskPlaceholder' | 'alwaysShowMask' | 'beforeMaskedStateChange'> {
     value?: string;
     units?: ReactNode;
     /** @default false */

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

@@ -2,10 +2,12 @@ import { FormEvent, TextareaHTMLAttributes } from 'react';
 import { ICommonProps } from '../../types';
 import { IControlWrapperProps } from '../ControlWrapper';
 import { IWithMessagesProps } from '../WithMessages';
+import { ITextAreaCounterPosition } from './types';
 import { ITextAreaStyles } from './TextArea.styles';
 export interface ITextAreaProps extends ICommonProps<ITextAreaStyles>, Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'>, Pick<IControlWrapperProps, 'label' | 'isInvalid' | 'isRequired' | 'isDisabled' | 'size' | 'groupPlacement'>, Pick<IWithMessagesProps, 'infoMessage' | 'errorMessage'> {
     value?: string;
     placeholder?: string;
+    counterPosition?: ITextAreaCounterPosition;
     /** @default false */
     isActive?: boolean;
     /**

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

@@ -1,8 +1,10 @@
 import { ITweakStyles } from '../../theme';
+import { IWithPrefix } from '../../types';
 import { IControlWrapperStyles } from '../ControlWrapper';
 import { IWithMessagesStyles } from '../WithMessages';
-export declare const useStyles: import("../../theme").IUseStyles<"textarea" | "autoSized" | "withLabel" | "wrapper" | "symbolsCount" | "symbolsCountError", unknown>;
+import { ITextAreaCounterPositions } from './types';
+export declare const useStyles: import("../../theme").IUseStyles<"root" | "textarea" | "autoSized" | "withLabel" | "wrapper" | "symbolsCount" | "symbolsCountError" | "symbolsCountActive" | "counter-default", unknown>;
 export type ITextAreaStyles = ITweakStyles<typeof useStyles, {
     tweakWithMessages: IWithMessagesStyles;
     tweakControlWrapper: IControlWrapperStyles;
-}>;
+} & IWithPrefix<ITextAreaCounterPositions, 'counter-'>>;

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

@@ -0,0 +1,4 @@
+import { IExtendableProps } from '../../types';
+export interface ITextAreaCounterPositions extends IExtendableProps<'default'> {
+}
+export type ITextAreaCounterPosition = keyof ITextAreaCounterPositions;

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

@@ -10485,7 +10485,7 @@ function _ts_generator$5(thisArg, body) {
   }
 }
 var InputBase = /* @__PURE__ */ forwardRef(function(_param, ref) {
-  var _param_value = _param.value, value = _param_value === void 0 ? "" : _param_value, placeholder = _param.placeholder, label = _param.label, _param_type = _param.type, type = _param_type === void 0 ? "text" : _param_type, isDisabled = _param.isDisabled, autoComplete = _param.autoComplete, initialInputMode = _param.inputMode, isReadonly = _param.isReadonly, isInvalid = _param.isInvalid, isActive = _param.isActive, isClearable = _param.isClearable, isAutoSized = _param.isAutoSized, name = _param.name, tweakStyles = _param.tweakStyles, maxLength = _param.maxLength, shouldFocusOnMount = _param.shouldFocusOnMount, units = _param.units, testId = _param.testId, tabIndex = _param.tabIndex, shouldAlwaysShowPlaceholder = _param.shouldAlwaysShowPlaceholder, onChange = _param.onChange, onPaste = _param.onPaste, onFocus = _param.onFocus, onBlur = _param.onBlur, onKeyDown = _param.onKeyDown, mask = _param.mask, maskPlaceholder = _param.maskPlaceholder, alwaysShowMask = _param.alwaysShowMask, beforeMaskedStateChange = _param.beforeMaskedStateChange, data = _param.data, groupPlacement = _param.groupPlacement, icon = _param.icon, isLoading = _param.isLoading, isRequired = _param.isRequired, size2 = _param.size, onIconClick = _param.onIconClick, inputProps = _object_without_properties$i(_param, [
+  var _param_value = _param.value, value = _param_value === void 0 ? "" : _param_value, placeholder = _param.placeholder, label = _param.label, _param_type = _param.type, type = _param_type === void 0 ? "text" : _param_type, isDisabled = _param.isDisabled, autoComplete = _param.autoComplete, initialInputMode = _param.inputMode, isReadonly = _param.isReadonly, isInvalid = _param.isInvalid, isActive = _param.isActive, isClearable = _param.isClearable, isAutoSized = _param.isAutoSized, name = _param.name, tweakStyles = _param.tweakStyles, maxLength = _param.maxLength, shouldFocusOnMount = _param.shouldFocusOnMount, units = _param.units, testId = _param.testId, tabIndex = _param.tabIndex, shouldAlwaysShowPlaceholder = _param.shouldAlwaysShowPlaceholder, onChange = _param.onChange, onPaste = _param.onPaste, onFocus = _param.onFocus, onBlur = _param.onBlur, onKeyDown = _param.onKeyDown, mask = _param.mask, maskPlaceholder = _param.maskPlaceholder, alwaysShowMask = _param.alwaysShowMask, beforeMaskedStateChange = _param.beforeMaskedStateChange, data = _param.data, groupPlacement = _param.groupPlacement, icon = _param.icon, isLoading = _param.isLoading, isRequired = _param.isRequired, size2 = _param.size, onIconClick = _param.onIconClick, children = _param.children, inputProps = _object_without_properties$i(_param, [
     "value",
     "placeholder",
     "label",
@@ -10521,7 +10521,8 @@ var InputBase = /* @__PURE__ */ forwardRef(function(_param, ref) {
     "isLoading",
     "isRequired",
     "size",
-    "onIconClick"
+    "onIconClick",
+    "children"
   ]);
   var classes = useStyles$G({
     theme: tweakStyles
@@ -10636,7 +10637,7 @@ var InputBase = /* @__PURE__ */ forwardRef(function(_param, ref) {
       })
     ]
   });
-  return /* @__PURE__ */ jsx(ControlWrapper, {
+  return /* @__PURE__ */ jsxs(ControlWrapper, {
     label,
     isDisabled,
     isFocused: hasFocus,
@@ -10652,10 +10653,13 @@ var InputBase = /* @__PURE__ */ forwardRef(function(_param, ref) {
     isRequired,
     onIconClick,
     size: size2,
-    children: hasUnits || isAutoSized ? /* @__PURE__ */ jsx("div", {
-      className: classes.autoSizeWrapper,
-      children: inputContent
-    }) : inputContent
+    children: [
+      hasUnits || isAutoSized ? /* @__PURE__ */ jsx("div", {
+        className: classes.autoSizeWrapper,
+        children: inputContent
+      }) : inputContent,
+      children
+    ]
   });
 });
 function _define_property$S(obj, key, value) {
@@ -27892,71 +27896,62 @@ function FlexibleTable(_param) {
     }))
   });
 }
-var BUTTONS_WIDTH = 36;
-var BUTTONS_GAP = 2;
+var inputStyles$2 = {
+  tweakControlWrapper: {
+    controlWrapper: {
+      "--increment-buttons-width": "36px",
+      "--increment-buttons-gap": "1px",
+      "--increment-buttons-margin": "1px",
+      "--increment-button-icon-size": "16px"
+    }
+  }
+};
 var useStyles$g = createThemedStyles("IncrementInput", {
-  root: {
-    display: "flex",
-    alignItems: "center",
-    position: "relative"
-  },
   buttons: {
     display: "flex",
     flexDirection: "column",
-    width: BUTTONS_WIDTH,
-    position: "absolute",
-    right: BUTTONS_GAP,
-    top: BUTTONS_GAP,
-    bottom: BUTTONS_GAP,
+    height: "calc(100% - var(--increment-buttons-margin) * 2)",
+    margin: "var(--increment-buttons-margin)",
+    gap: "var(--increment-buttons-gap)",
+    flexShrink: 0,
+    order: 1e3,
+    // сдвигаем кнопки на самый конец
     zIndex: dimensions.Z_INDEX.CONTROL_FOCUS + 1
   },
   button: {
-    width: "100%",
-    height: (dimensions.CONTROL.HEIGHT - 5) / 2,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "var(--increment-buttons-width)",
+    flexGrow: 1,
+    cursor: "pointer",
     border: "none",
     outline: "none",
+    color: colors.FONT_MEDIUM,
     backgroundColor: colors.GREY_BACKGROUND,
     transition: animations.defaultTransition,
-    transitionProperty: "background-color",
-    color: colors.FONT_MEDIUM,
-    cursor: "pointer",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    padding: [
-      0,
-      10
-    ],
+    transitionProperty: "background-color, color",
     "&:hover, &:focus": {
       backgroundColor: colors.GREY_HOVER
     },
     "&:active": {
       backgroundColor: colors.GREY_ACTIVE
-    },
-    "&:first-child": {
-      marginBottom: 1
     }
   },
   disabledButton: {
-    backgroundColor: colors.CLASSIC_WHITE,
-    color: colors.FONT_DISABLED,
     cursor: "default",
+    color: colors.FONT_DISABLED,
+    backgroundColor: colors.CLASSIC_WHITE,
     "&:hover": {
       backgroundColor: colors.CLASSIC_WHITE
     }
   },
-  errorButton: {}
-});
-var inputStyles$2 = {
-  input: {
-    paddingRight: BUTTONS_WIDTH + BUTTONS_GAP
-  },
-  tweakControlWrapper: {
-    controls: {
-      paddingRight: BUTTONS_WIDTH + BUTTONS_GAP
-    }
+  errorButton: {},
+  icon: {
+    width: "var(--increment-button-icon-size)",
+    height: "var(--increment-button-icon-size)"
   }
-};
+});
 function _define_property$k(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
@@ -28042,15 +28037,13 @@ function _object_without_properties_loose$7(source, excluded) {
   return target;
 }
 var IncrementInput = function(_param) {
-  var value = _param.value, onChange = _param.onChange, min2 = _param.min, max2 = _param.max, _param_step = _param.step, step = _param_step === void 0 ? 1 : _param_step, intPartPrecision = _param.intPartPrecision, data = _param.data, testId = _param.testId, tweakStyles = _param.tweakStyles, isDisabled = _param.isDisabled, isReadonly = _param.isReadonly, isInvalid = _param.isInvalid, props = _object_without_properties$7(_param, [
+  var value = _param.value, onChange = _param.onChange, min2 = _param.min, max2 = _param.max, _param_step = _param.step, step = _param_step === void 0 ? 1 : _param_step, intPartPrecision = _param.intPartPrecision, tweakStyles = _param.tweakStyles, isDisabled = _param.isDisabled, isReadonly = _param.isReadonly, isInvalid = _param.isInvalid, props = _object_without_properties$7(_param, [
     "value",
     "onChange",
     "min",
     "max",
     "step",
     "intPartPrecision",
-    "data",
-    "testId",
     "tweakStyles",
     "isDisabled",
     "isReadonly",
@@ -28065,8 +28058,9 @@ var IncrementInput = function(_param) {
   var classes = useStyles$g({
     theme: tweakStyles
   });
-  var isIncreaseDisabled = isDisabled || isReadonly || intPartPrecision !== void 0 && getNumberLength((value !== null && value !== void 0 ? value : 0) + step) > intPartPrecision || max2 !== void 0 && value !== void 0 && value >= max2;
-  var isDecreaseDisabled = isDisabled || isReadonly || (min2 !== void 0 && value !== void 0 ? value <= min2 : false);
+  var isEditDisabled = isDisabled || isReadonly;
+  var isIncreaseDisabled = isEditDisabled || isNotEmpty(intPartPrecision) && getNumberLength((value !== null && value !== void 0 ? value : 0) + step) > intPartPrecision || isNotEmpty(max2) && isNotEmpty(value) && value >= max2;
+  var isDecreaseDisabled = isEditDisabled || isNotEmpty(min2) && isNotEmpty(value) && value <= min2;
   var increment = function() {
     onChange(getNumberInRange((value !== null && value !== void 0 ? value : 0) + step, min2, max2));
   };
@@ -28081,45 +28075,45 @@ var IncrementInput = function(_param) {
     step
   ]);
   var _obj2, _obj1;
-  return /* @__PURE__ */ jsxs("div", _object_spread_props$i(_object_spread$j({
-    className: classes.root
-  }, addDataTestId(testId), addDataAttributes(data)), {
-    children: [
-      /* @__PURE__ */ jsx(NumberInput, _object_spread_props$i(_object_spread$j({}, props), {
-        isInvalid,
-        isDisabled,
-        isReadonly,
-        min: min2,
-        max: max2,
-        intPartPrecision,
-        onChange,
-        value,
-        tweakStyles: tweakInputStyles
-      })),
-      /* @__PURE__ */ jsxs("div", {
-        className: classes.buttons,
-        children: [
-          /* @__PURE__ */ jsx("button", {
-            className: clsx(classes.button, (_obj2 = {}, _define_property$k(_obj2, classes.disabledButton, isIncreaseDisabled), _define_property$k(_obj2, classes.errorButton, isInvalid), _obj2)),
-            type: "button",
-            disabled: isIncreaseDisabled,
-            onClick: increment,
+  return /* @__PURE__ */ jsx(NumberInput, _object_spread_props$i(_object_spread$j({}, props), {
+    isInvalid,
+    isDisabled,
+    isReadonly,
+    min: min2,
+    max: max2,
+    intPartPrecision,
+    onChange,
+    value,
+    tweakStyles: tweakInputStyles,
+    children: /* @__PURE__ */ jsxs("div", {
+      className: classes.buttons,
+      children: [
+        /* @__PURE__ */ jsx("button", {
+          className: clsx(classes.button, (_obj2 = {}, _define_property$k(_obj2, classes.disabledButton, isIncreaseDisabled), _define_property$k(_obj2, classes.errorButton, isInvalid), _obj2)),
+          type: "button",
+          disabled: isIncreaseDisabled,
+          onClick: increment,
+          children: /* @__PURE__ */ jsx("div", {
+            className: classes.icon,
             children: /* @__PURE__ */ jsx(Icon, {
               type: "plus"
             })
-          }),
-          /* @__PURE__ */ jsx("button", {
-            className: clsx(classes.button, (_obj1 = {}, _define_property$k(_obj1, classes.disabledButton, isDecreaseDisabled), _define_property$k(_obj1, classes.errorButton, isInvalid), _obj1)),
-            type: "button",
-            disabled: isDecreaseDisabled,
-            onClick: decrement,
+          })
+        }),
+        /* @__PURE__ */ jsx("button", {
+          className: clsx(classes.button, (_obj1 = {}, _define_property$k(_obj1, classes.disabledButton, isDecreaseDisabled), _define_property$k(_obj1, classes.errorButton, isInvalid), _obj1)),
+          type: "button",
+          disabled: isDecreaseDisabled,
+          onClick: decrement,
+          children: /* @__PURE__ */ jsx("div", {
+            className: classes.icon,
             children: /* @__PURE__ */ jsx(Icon, {
               type: "minus"
             })
           })
-        ]
-      })
-    ]
+        })
+      ]
+    })
   }));
 };
 var VERTICAL_OVERLAY_PADDING = 50;
@@ -29674,7 +29668,7 @@ var PhoneInputCountryList = function(param) {
     ]
   });
 };
-var DEFAULT_VALUE$1 = {
+var DEFAULT_VALUE = {
   phoneNumber: "",
   dialCode: ""
 };
@@ -29892,7 +29886,7 @@ function _unsupported_iterable_to_array$2(o, minLen) {
     return _array_like_to_array$2(o, minLen);
 }
 var PhoneInput = function(_param) {
-  var _param_locale = _param.locale, locale = _param_locale === void 0 ? "ru" : _param_locale, _param_value = _param.value, value = _param_value === void 0 ? DEFAULT_VALUE$1 : _param_value, onChange = _param.onChange, data = _param.data, testId = _param.testId, isDisabled = _param.isDisabled, isInvalid = _param.isInvalid, isActive = _param.isActive, tweakStyles = _param.tweakStyles, _param_codeSearchPlaceholder = _param.codeSearchPlaceholder, codeSearchPlaceholder = _param_codeSearchPlaceholder === void 0 ? "Поиск" : _param_codeSearchPlaceholder, _param_noMatchesLabel = _param.noMatchesLabel, noMatchesLabel = _param_noMatchesLabel === void 0 ? "Ничего не найдено" : _param_noMatchesLabel, inputProps = _object_without_properties$5(_param, [
+  var _param_locale = _param.locale, locale = _param_locale === void 0 ? "ru" : _param_locale, _param_value = _param.value, value = _param_value === void 0 ? DEFAULT_VALUE : _param_value, onChange = _param.onChange, data = _param.data, testId = _param.testId, isDisabled = _param.isDisabled, isInvalid = _param.isInvalid, isActive = _param.isActive, tweakStyles = _param.tweakStyles, _param_codeSearchPlaceholder = _param.codeSearchPlaceholder, codeSearchPlaceholder = _param_codeSearchPlaceholder === void 0 ? "Поиск" : _param_codeSearchPlaceholder, _param_noMatchesLabel = _param.noMatchesLabel, noMatchesLabel = _param_noMatchesLabel === void 0 ? "Ничего не найдено" : _param_noMatchesLabel, inputProps = _object_without_properties$5(_param, [
     "locale",
     "value",
     "onChange",
@@ -31335,6 +31329,9 @@ function _object_spread_props$6(target, source) {
   return target;
 }
 var useStyles$4 = createThemedStyles("TextArea", {
+  root: {
+    width: "100%"
+  },
   textarea: _object_spread_props$6(_object_spread$6({}, helpers.withScrollBar), {
     width: "100%",
     height: "100%",
@@ -31394,6 +31391,8 @@ var useStyles$4 = createThemedStyles("TextArea", {
   symbolsCountError: {
     color: "red"
   },
+  symbolsCountActive: {},
+  "counter-default": {},
   withLabel: {}
 });
 function _array_like_to_array(arr, len) {
@@ -31538,12 +31537,12 @@ function _unsupported_iterable_to_array(o, minLen) {
   if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
     return _array_like_to_array(o, minLen);
 }
-var DEFAULT_VALUE = "";
 var TextArea = /* @__PURE__ */ forwardRef(function(_param, ref) {
-  var _param_value = _param.value, value = _param_value === void 0 ? DEFAULT_VALUE : _param_value, placeholder = _param.placeholder, name = _param.name, shouldFocusOnMount = _param.shouldFocusOnMount, _param_hasCounter = _param.hasCounter, hasCounter = _param_hasCounter === void 0 ? true : _param_hasCounter, shouldTrimAfterMaxLength = _param.shouldTrimAfterMaxLength, _param_isAutoSized = _param.isAutoSized, isAutoSized = _param_isAutoSized === void 0 ? true : _param_isAutoSized, shouldAlwaysShowPlaceholder = _param.shouldAlwaysShowPlaceholder, isActive = _param.isActive, maxLength = _param.maxLength, rows = _param.rows, data = _param.data, testId = _param.testId, tweakStyles = _param.tweakStyles, onChange = _param.onChange, onPaste = _param.onPaste, onFocus = _param.onFocus, onBlur = _param.onBlur, infoMessage = _param.infoMessage, errorMessage = _param.errorMessage, label = _param.label, isDisabled = _param.isDisabled, isInvalid = _param.isInvalid, isRequired = _param.isRequired, size2 = _param.size, groupPlacement = _param.groupPlacement, textAreaProps = _object_without_properties$3(_param, [
+  var _param_value = _param.value, value = _param_value === void 0 ? "" : _param_value, placeholder = _param.placeholder, name = _param.name, _param_counterPosition = _param.counterPosition, counterPosition = _param_counterPosition === void 0 ? "default" : _param_counterPosition, shouldFocusOnMount = _param.shouldFocusOnMount, _param_hasCounter = _param.hasCounter, hasCounter = _param_hasCounter === void 0 ? true : _param_hasCounter, shouldTrimAfterMaxLength = _param.shouldTrimAfterMaxLength, _param_isAutoSized = _param.isAutoSized, isAutoSized = _param_isAutoSized === void 0 ? true : _param_isAutoSized, shouldAlwaysShowPlaceholder = _param.shouldAlwaysShowPlaceholder, isActive = _param.isActive, maxLength = _param.maxLength, rows = _param.rows, data = _param.data, testId = _param.testId, tweakStyles = _param.tweakStyles, onChange = _param.onChange, onPaste = _param.onPaste, onFocus = _param.onFocus, onBlur = _param.onBlur, infoMessage = _param.infoMessage, errorMessage = _param.errorMessage, label = _param.label, isDisabled = _param.isDisabled, isInvalid = _param.isInvalid, isRequired = _param.isRequired, size2 = _param.size, groupPlacement = _param.groupPlacement, textAreaProps = _object_without_properties$3(_param, [
     "value",
     "placeholder",
     "name",
+    "counterPosition",
     "shouldFocusOnMount",
     "hasCounter",
     "shouldTrimAfterMaxLength",
@@ -31571,6 +31570,8 @@ var TextArea = /* @__PURE__ */ forwardRef(function(_param, ref) {
   var classes = useStyles$4({
     theme: tweakStyles
   });
+  var shouldShowCounter = hasCounter && isNotEmpty(maxLength);
+  var counterString = "".concat(value.length, " / ").concat(maxLength);
   var tweakWithMessagesStyles = useTweakStyles({
     tweakStyles,
     className: "tweakWithMessages",
@@ -31597,14 +31598,18 @@ var TextArea = /* @__PURE__ */ forwardRef(function(_param, ref) {
     setFocused(false);
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
   };
-  var _obj2;
-  return /* @__PURE__ */ jsxs(WithMessages, {
-    errorMessage,
-    infoMessage,
-    tweakStyles: tweakWithMessagesStyles,
-    testId: getTestId(testId, "wrapper"),
-    children: [
-      /* @__PURE__ */ jsx(ControlWrapper, {
+  var _obj2, _obj1;
+  return /* @__PURE__ */ jsx("div", {
+    className: classes.root,
+    style: {
+      "--counter-length": counterString.length
+    },
+    children: /* @__PURE__ */ jsx(WithMessages, {
+      errorMessage,
+      infoMessage,
+      tweakStyles: tweakWithMessagesStyles,
+      testId: getTestId(testId, "wrapper"),
+      children: /* @__PURE__ */ jsx(ControlWrapper, {
         label,
         tweakStyles: tweakControlWrapperStyles,
         isFocused: hasFocus,
@@ -31615,37 +31620,38 @@ var TextArea = /* @__PURE__ */ forwardRef(function(_param, ref) {
         groupPlacement,
         size: size2,
         isFullWidth: true,
-        children: /* @__PURE__ */ jsx("div", _object_spread_props$5(_object_spread$5({
-          className: clsx(classes.wrapper, (_obj2 = {}, _define_property$5(_obj2, classes.autoSized, isAutoSized), _define_property$5(_obj2, classes.withLabel, hasLabel), _obj2))
+        children: /* @__PURE__ */ jsxs("div", _object_spread_props$5(_object_spread$5({
+          className: clsx(classes.wrapper, isNotEmpty(size2) && classes[size2], (_obj2 = {}, _define_property$5(_obj2, classes.autoSized, isAutoSized), _define_property$5(_obj2, classes.withLabel, hasLabel), _obj2))
         }, isAutoSized && {
           "data-value": value
         }), {
-          children: /* @__PURE__ */ jsx("textarea", _object_spread$5({
-            ref,
-            className: classes.textarea,
-            value,
-            disabled: isDisabled,
-            placeholder: hasPlaceholder ? placeholder : void 0,
-            maxLength: shouldTrimAfterMaxLength ? maxLength : void 0,
-            name,
-            rows,
-            onPaste,
-            onFocus: handleFocus,
-            onBlur: handleBlur,
-            onChange: handleChange,
-            autoFocus: shouldFocusOnMount
-          }, addDataAttributes$1(data, testId), textAreaProps))
+          children: [
+            /* @__PURE__ */ jsx("textarea", _object_spread$5({
+              ref,
+              className: classes.textarea,
+              value,
+              disabled: isDisabled,
+              placeholder: hasPlaceholder ? placeholder : void 0,
+              maxLength: shouldTrimAfterMaxLength ? maxLength : void 0,
+              name,
+              rows,
+              onPaste,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              onChange: handleChange,
+              autoFocus: shouldFocusOnMount
+            }, addDataAttributes$1(data, testId), textAreaProps)),
+            shouldShowCounter && /* @__PURE__ */ jsx("span", _object_spread_props$5(_object_spread$5({
+              className: clsx(classes.symbolsCount, classes["counter-".concat(counterPosition)], (_obj1 = {}, _define_property$5(_obj1, classes.symbolsCountError, value.length > maxLength), _define_property$5(_obj1, classes.symbolsCountActive, hasFocus || hasValue), _obj1))
+            }, addDataAttributes$1({
+              counterPosition
+            })), {
+              children: counterString
+            }))
+          ]
         }))
-      }),
-      hasCounter && isNotEmpty(maxLength) && /* @__PURE__ */ jsxs("span", {
-        className: clsx(classes.symbolsCount, _define_property$5({}, classes.symbolsCountError, value.length > maxLength)),
-        children: [
-          value.length,
-          " / ",
-          maxLength
-        ]
       })
-    ]
+    })
   });
 });
 var useStyles$3 = createThemedStyles("TextButton", {