@alfalab/core-components 45.9.0-beta.0 → 45.9.0-beta.2

package/tag/cssm/desktop/Component.desktop.js

@@ -1,19 +1,23 @@
-import React, { forwardRef } from 'react';
-import { BaseTag } from '../components/base-tag/Component.js';
-import defaultColors from './default.desktop.module.css';
-import styles from './desktop.module.css';
-import invertedColors from './inverted.desktop.module.css';
-import 'react-merge-refs';
-import 'classnames';
-import '@alfalab/hooks';
-import '../components/base-tag/default.module.css';
-import '../components/base-tag/index.module.css';
-import '../components/base-tag/inverted.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const colorStyles = {
-    default: defaultColors,
-    inverted: invertedColors,
+var tslib = require('tslib');
+var React = require('react');
+var components_baseTag_Component = require('../components/base-tag/Component.js');
+var defaultColors = require('./default.desktop.module.css');
+var styles = require('./desktop.module.css');
+var invertedColors = require('./inverted.desktop.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var defaultColors__default = /*#__PURE__*/_interopDefaultCompat(defaultColors);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+var invertedColors__default = /*#__PURE__*/_interopDefaultCompat(invertedColors);
+
+var colorStyles = {
+    default: defaultColors__default.default,
+    inverted: invertedColors__default.default,
 };
-const TagDesktop = forwardRef((restProps, ref) => (React.createElement(BaseTag, { ...restProps, colorStylesMap: colorStyles, ref: ref, styles: styles })));
+var TagDesktop = React.forwardRef(function (restProps, ref) { return (React__default.default.createElement(components_baseTag_Component.BaseTag, tslib.__assign({}, restProps, { colorStylesMap: colorStyles, ref: ref, styles: styles__default.default }))); });
 
-export { TagDesktop };
+exports.TagDesktop = TagDesktop;

package/tag/cssm/desktop/index.js

@@ -1,12 +1,7 @@
-export { TagDesktop } from './Component.desktop.js';
-import 'react';
-import '../components/base-tag/Component.js';
-import 'react-merge-refs';
-import 'classnames';
-import '@alfalab/hooks';
-import '../components/base-tag/default.module.css';
-import '../components/base-tag/index.module.css';
-import '../components/base-tag/inverted.module.css';
-import './default.desktop.module.css';
-import './desktop.module.css';
-import './inverted.desktop.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var desktop_Component_desktop = require('./Component.desktop.js');
+
+
+
+exports.TagDesktop = desktop_Component_desktop.TagDesktop;

package/tag/cssm/index.js

@@ -1,18 +1,7 @@
-export { Tag } from './Component.responsive.js';
-import 'react';
-import '../../mq/cssm';
-import './desktop/Component.desktop.js';
-import './components/base-tag/Component.js';
-import 'react-merge-refs';
-import 'classnames';
-import '@alfalab/hooks';
-import './components/base-tag/default.module.css';
-import './components/base-tag/index.module.css';
-import './components/base-tag/inverted.module.css';
-import './desktop/default.desktop.module.css';
-import './desktop/desktop.module.css';
-import './desktop/inverted.desktop.module.css';
-import './mobile/Component.mobile.js';
-import './mobile/default.mobile.module.css';
-import './mobile/inverted.mobile.module.css';
-import './mobile/mobile.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component_responsive = require('./Component.responsive.js');
+
+
+
+exports.Tag = Component_responsive.Tag;

package/tag/cssm/mobile/Component.mobile.js

@@ -1,19 +1,23 @@
-import React, { forwardRef } from 'react';
-import { BaseTag } from '../components/base-tag/Component.js';
-import defaultColors from './default.mobile.module.css';
-import invertedColors from './inverted.mobile.module.css';
-import styles from './mobile.module.css';
-import 'react-merge-refs';
-import 'classnames';
-import '@alfalab/hooks';
-import '../components/base-tag/default.module.css';
-import '../components/base-tag/index.module.css';
-import '../components/base-tag/inverted.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const colorStyles = {
-    default: defaultColors,
-    inverted: invertedColors,
+var tslib = require('tslib');
+var React = require('react');
+var components_baseTag_Component = require('../components/base-tag/Component.js');
+var defaultColors = require('./default.mobile.module.css');
+var invertedColors = require('./inverted.mobile.module.css');
+var styles = require('./mobile.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var defaultColors__default = /*#__PURE__*/_interopDefaultCompat(defaultColors);
+var invertedColors__default = /*#__PURE__*/_interopDefaultCompat(invertedColors);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var colorStyles = {
+    default: defaultColors__default.default,
+    inverted: invertedColors__default.default,
 };
-const TagMobile = forwardRef((restProps, ref) => (React.createElement(BaseTag, { ...restProps, colorStylesMap: colorStyles, ref: ref, styles: styles })));
+var TagMobile = React.forwardRef(function (restProps, ref) { return (React__default.default.createElement(components_baseTag_Component.BaseTag, tslib.__assign({}, restProps, { colorStylesMap: colorStyles, ref: ref, styles: styles__default.default }))); });
 
-export { TagMobile };
+exports.TagMobile = TagMobile;

package/tag/cssm/mobile/index.js

@@ -1,12 +1,7 @@
-export { TagMobile } from './Component.mobile.js';
-import 'react';
-import '../components/base-tag/Component.js';
-import 'react-merge-refs';
-import 'classnames';
-import '@alfalab/hooks';
-import '../components/base-tag/default.module.css';
-import '../components/base-tag/index.module.css';
-import '../components/base-tag/inverted.module.css';
-import './default.mobile.module.css';
-import './inverted.mobile.module.css';
-import './mobile.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var mobile_Component_mobile = require('./Component.mobile.js');
+
+
+
+exports.TagMobile = mobile_Component_mobile.TagMobile;

package/tag/esm/Component.responsive.js

@@ -1,6 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React, { forwardRef } from 'react';
 import { useMatchMedia } from '../../mq/esm';
+import { getComponentBreakpoint } from '../../shared/esm';
 import { TagDesktop } from './desktop/Component.desktop.js';
 import { TagMobile } from './mobile/Component.mobile.js';
 import './components/base-tag/Component.js';
@@ -9,7 +10,7 @@ import 'classnames';
 import '@alfalab/hooks';
 
 var Tag = forwardRef(function (_a, ref) {
-    var children = _a.children, _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = __rest(_a, ["children", "breakpoint"]);
+    var children = _a.children, _b = _a.breakpoint, breakpoint = _b === void 0 ? getComponentBreakpoint() : _b, restProps = __rest(_a, ["children", "breakpoint"]);
     var query = "(min-width: ".concat(breakpoint, "px)");
     var isDesktop = useMatchMedia(query)[0];
     var Component = isDesktop ? TagDesktop : TagMobile;

package/tag/esm/components/base-tag/Component.d.ts

@@ -94,7 +94,7 @@ declare const BaseTag: React.ForwardRefExoticComponent<Omit<NativeProps, "onClic
      * Размер компонента
      * @description xxs, xs, s, m, l, xl deprecated, используйте вместо них 32, 40, 48, 56, 64, 72 соответственно
      */
-    size?: "s" | "xxs" | "xs" | "m" | "l" | "xl" | 32 | 40 | 48 | 56 | 64 | 72 | undefined;
+    size?: "s" | "xs" | "m" | "l" | "xl" | "xxs" | 32 | 40 | 48 | 56 | 64 | 72 | undefined;
     /**
      * Дочерние элементы.
      */

package/tag/esm/index.js

@@ -2,6 +2,7 @@ export { Tag } from './Component.responsive.js';
 import 'tslib';
 import 'react';
 import '../../mq/esm';
+import '../../shared/esm';
 import './desktop/Component.desktop.js';
 import './components/base-tag/Component.js';
 import 'react-merge-refs';

package/tag/modern/Component.responsive.js

@@ -1,5 +1,6 @@
 import React, { forwardRef } from 'react';
 import { useMatchMedia } from '../../mq/modern';
+import { getComponentBreakpoint } from '../../shared/modern';
 import { TagDesktop } from './desktop/Component.desktop.js';
 import { TagMobile } from './mobile/Component.mobile.js';
 import './components/base-tag/Component.js';
@@ -7,7 +8,7 @@ import 'react-merge-refs';
 import 'classnames';
 import '@alfalab/hooks';
 
-const Tag = forwardRef(({ children, breakpoint = 1024, ...restProps }, ref) => {
+const Tag = forwardRef(({ children, breakpoint = getComponentBreakpoint(), ...restProps }, ref) => {
     const query = `(min-width: ${breakpoint}px)`;
     const [isDesktop] = useMatchMedia(query);
     const Component = isDesktop ? TagDesktop : TagMobile;

package/tag/modern/components/base-tag/Component.d.ts

@@ -94,7 +94,7 @@ declare const BaseTag: React.ForwardRefExoticComponent<Omit<NativeProps, "onClic
      * Размер компонента
      * @description xxs, xs, s, m, l, xl deprecated, используйте вместо них 32, 40, 48, 56, 64, 72 соответственно
      */
-    size?: "s" | "xxs" | "xs" | "m" | "l" | "xl" | 32 | 40 | 48 | 56 | 64 | 72 | undefined;
+    size?: "s" | "xs" | "m" | "l" | "xl" | "xxs" | 32 | 40 | 48 | 56 | 64 | 72 | undefined;
     /**
      * Дочерние элементы.
      */

package/tag/modern/index.js

@@ -1,6 +1,7 @@
 export { Tag } from './Component.responsive.js';
 import 'react';
 import '../../mq/modern';
+import '../../shared/modern';
 import './desktop/Component.desktop.js';
 import './components/base-tag/Component.js';
 import 'react-merge-refs';

package/text/cssm/Component.js

@@ -1,13 +1,24 @@
-import React from 'react';
-import cn from 'classnames';
-import styles from './index.module.css';
-import mixin from './mixin.module.css';
-
-const Text = ({ tag: Component = 'span', align = 'left', rowLimit, view = 'paragraph-primary-medium', color, textBackgroundColor, className, children, dataTestId, }) => (React.createElement(Component, { className: cn(styles.component, styles[align], mixin[view], {
-        [styles[`row-limit-${rowLimit}`]]: rowLimit,
-    }, className), style: {
-        ...(color && { color }),
-        ...(textBackgroundColor && { backgroundColor: textBackgroundColor }),
-    }, "data-test-id": dataTestId }, children));
-
-export { Text };
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var cn = require('classnames');
+var styles = require('./index.module.css');
+var mixin = require('./mixin.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+var mixin__default = /*#__PURE__*/_interopDefaultCompat(mixin);
+
+var Text = function (_a) {
+    var _b;
+    var _c = _a.tag, Component = _c === void 0 ? 'span' : _c, _d = _a.align, align = _d === void 0 ? 'left' : _d, rowLimit = _a.rowLimit, _e = _a.view, view = _e === void 0 ? 'paragraph-primary-medium' : _e, color = _a.color, textBackgroundColor = _a.textBackgroundColor, className = _a.className, children = _a.children, dataTestId = _a.dataTestId;
+    return (React__default.default.createElement(Component, { className: cn__default.default(styles__default.default.component, styles__default.default[align], mixin__default.default[view], (_b = {},
+            _b[styles__default.default["row-limit-".concat(rowLimit)]] = rowLimit,
+            _b), className), style: tslib.__assign(tslib.__assign({}, (color && { color: color })), (textBackgroundColor && { backgroundColor: textBackgroundColor })), "data-test-id": dataTestId }, children));
+};
+
+exports.Text = Text;

package/text/cssm/index.js

@@ -1,5 +1,7 @@
-export { Text } from './Component.js';
-import 'react';
-import 'classnames';
-import './index.module.css';
-import './mixin.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component = require('./Component.js');
+
+
+
+exports.Text = Component.Text;

package/textarea/cssm/Component.js

@@ -1,66 +1,84 @@
-import React, { forwardRef, useRef, useState, useMemo, useEffect } from 'react';
-import mergeRefs from 'react-merge-refs';
-import TextareaAutosize from 'react-textarea-autosize';
-import cn from 'classnames';
-import { FormControl } from '../../form-control/cssm';
-import { getDataTestId } from '../../shared/cssm';
-import { useMedia, useFocus } from '@alfalab/hooks';
-import { PseudoTextArea } from './components/PseudoTextArea.js';
-import { SIZE_TO_CLASSNAME_MAP } from './consts.js';
-import defaultColors from './default.module.css';
-import styles from './index.module.css';
-import invertedColors from './inverted.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const colorStyles = {
-    default: defaultColors,
-    inverted: invertedColors,
+var tslib = require('tslib');
+var React = require('react');
+var mergeRefs = require('react-merge-refs');
+var TextareaAutosize = require('react-textarea-autosize');
+var cn = require('classnames');
+var coreComponentsFormControl = require('../../form-control/cssm');
+var coreComponentsShared = require('../../shared/cssm');
+var hooks = require('@alfalab/hooks');
+var components_PseudoTextArea = require('./components/PseudoTextArea.js');
+var consts = require('./consts.js');
+var defaultColors = require('./default.module.css');
+var styles = require('./index.module.css');
+var invertedColors = require('./inverted.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
+var TextareaAutosize__default = /*#__PURE__*/_interopDefaultCompat(TextareaAutosize);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var defaultColors__default = /*#__PURE__*/_interopDefaultCompat(defaultColors);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+var invertedColors__default = /*#__PURE__*/_interopDefaultCompat(invertedColors);
+
+var colorStyles = {
+    default: defaultColors__default.default,
+    inverted: invertedColors__default.default,
 };
-const getDefaultCounterText = (textLength, maxLength = 0) => `${textLength}/${maxLength} символов`;
-const Textarea = forwardRef(({ autoComplete = 'on', autosize = true, size = 48, colors = 'default', block = false, bottomAddons, fieldClassName, className, dataTestId, disabled, error, hint, textareaClassName, label, labelView = 'inner', leftAddons, onFocus, onBlur, onChange, onHeightChange, rightAddons, maxRows, minRows, maxHeight, resize = 'none', value, defaultValue, rows = autosize ? 1 : 3, showCounter = false, getCounterText = getDefaultCounterText, maxLength, allowOverflow = true, nativeScrollbar: nativeScrollbarProp, wrapperRef, breakpoint, ...restProps }, ref) => {
-    const uncontrolled = value === undefined;
-    let [nativeScrollbar] = useMedia([[true, '(max-width: 1023px)']], false);
-    nativeScrollbar = Boolean(nativeScrollbarProp ?? nativeScrollbar);
-    const textareaRef = useRef(null);
-    const pseudoTextareaRef = useRef(null);
-    const [focused, setFocused] = useState(false);
-    const [stateValue, setStateValue] = useState(defaultValue || '');
-    const [scrollPosition, setScrollPosition] = useState(0);
-    const [focusVisible] = useFocus(
+var getDefaultCounterText = function (textLength, maxLength) {
+    if (maxLength === void 0) { maxLength = 0; }
+    return "".concat(textLength, "/").concat(maxLength, " \u0441\u0438\u043C\u0432\u043E\u043B\u043E\u0432");
+};
+var Textarea = React.forwardRef(function (_a, ref) {
+    var _b, _c, _d;
+    var _e = _a.autoComplete, autoComplete = _e === void 0 ? 'on' : _e, _f = _a.autosize, autosize = _f === void 0 ? true : _f, _g = _a.size, size = _g === void 0 ? 48 : _g, _h = _a.colors, colors = _h === void 0 ? 'default' : _h, _j = _a.block, block = _j === void 0 ? false : _j, bottomAddons = _a.bottomAddons, fieldClassName = _a.fieldClassName, className = _a.className, dataTestId = _a.dataTestId, disabled = _a.disabled, error = _a.error, hint = _a.hint, textareaClassName = _a.textareaClassName, label = _a.label, _k = _a.labelView, labelView = _k === void 0 ? 'inner' : _k, leftAddons = _a.leftAddons, onFocus = _a.onFocus, onBlur = _a.onBlur, onChange = _a.onChange, onHeightChange = _a.onHeightChange, rightAddons = _a.rightAddons, maxRows = _a.maxRows, minRows = _a.minRows, maxHeight = _a.maxHeight, _l = _a.resize, resize = _l === void 0 ? 'none' : _l, value = _a.value, defaultValue = _a.defaultValue, _m = _a.rows, rows = _m === void 0 ? autosize ? 1 : 3 : _m, _o = _a.showCounter, showCounter = _o === void 0 ? false : _o, _p = _a.getCounterText, getCounterText = _p === void 0 ? getDefaultCounterText : _p, maxLength = _a.maxLength, _q = _a.allowOverflow, allowOverflow = _q === void 0 ? true : _q, nativeScrollbarProp = _a.nativeScrollbar, wrapperRef = _a.wrapperRef, breakpoint = _a.breakpoint, restProps = tslib.__rest(_a, ["autoComplete", "autosize", "size", "colors", "block", "bottomAddons", "fieldClassName", "className", "dataTestId", "disabled", "error", "hint", "textareaClassName", "label", "labelView", "leftAddons", "onFocus", "onBlur", "onChange", "onHeightChange", "rightAddons", "maxRows", "minRows", "maxHeight", "resize", "value", "defaultValue", "rows", "showCounter", "getCounterText", "maxLength", "allowOverflow", "nativeScrollbar", "wrapperRef", "breakpoint"]);
+    var uncontrolled = value === undefined;
+    var nativeScrollbar = hooks.useMedia([[true, '(max-width: 1023px)']], false)[0];
+    nativeScrollbar = Boolean(nativeScrollbarProp !== null && nativeScrollbarProp !== void 0 ? nativeScrollbarProp : nativeScrollbar);
+    var textareaRef = React.useRef(null);
+    var pseudoTextareaRef = React.useRef(null);
+    var _r = React.useState(false), focused = _r[0], setFocused = _r[1];
+    var _s = React.useState(defaultValue || ''), stateValue = _s[0], setStateValue = _s[1];
+    var _t = React.useState(0), scrollPosition = _t[0], setScrollPosition = _t[1];
+    var focusVisible = hooks.useFocus(
     /*
      * При первом рендере textareaRef.current === null, то нужно пересоздать реф для корректной работы хука
      * TODO: исправить хук useFocus, чтобы он поддерживал изменение ноды
      */
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    useMemo(() => ({ current: textareaRef.current }), [textareaRef.current]), 'keyboard');
-    const filled = Boolean(uncontrolled ? stateValue : value);
-    const hasInnerLabel = label && labelView === 'inner';
-    const hasOverflow = Boolean(maxLength && allowOverflow && (value?.slice(maxLength) || stateValue.slice(maxLength)));
-    useEffect(() => {
-        const pseudoNode = pseudoTextareaRef.current;
+    React.useMemo(function () { return ({ current: textareaRef.current }); }, [textareaRef.current]), 'keyboard')[0];
+    var filled = Boolean(uncontrolled ? stateValue : value);
+    var hasInnerLabel = label && labelView === 'inner';
+    var hasOverflow = Boolean(maxLength && allowOverflow && ((value === null || value === void 0 ? void 0 : value.slice(maxLength)) || stateValue.slice(maxLength)));
+    React.useEffect(function () {
+        var pseudoNode = pseudoTextareaRef.current;
         if (pseudoNode) {
             pseudoNode.scrollTop = scrollPosition;
         }
     }, [scrollPosition, stateValue, hasOverflow]);
     // Хак, так как react-textarea-autosize перестал поддерживать maxHeight
-    useEffect(() => {
+    React.useEffect(function () {
         if (autosize && maxHeight && textareaRef.current && textareaRef.current.style) {
-            textareaRef.current.style.maxHeight = `${maxHeight}px`;
+            textareaRef.current.style.maxHeight = "".concat(maxHeight, "px");
         }
     }, [autosize, maxHeight]);
-    const handleTextareaFocus = (event) => {
+    var handleTextareaFocus = function (event) {
         setFocused(true);
         if (onFocus) {
             onFocus(event);
         }
     };
-    const handleTextareaBlur = (event) => {
+    var handleTextareaBlur = function (event) {
         setFocused(false);
         if (onBlur) {
             onBlur(event);
         }
     };
-    const handleTextareaChange = (event) => {
-        const { target: { value: newValue }, } = event;
+    var handleTextareaChange = function (event) {
+        var newValue = event.target.value;
         if (onChange) {
             onChange(event, { value: newValue });
         }
@@ -68,58 +86,46 @@ const Textarea = forwardRef(({ autoComplete = 'on', autosize = true, size = 48,
             setStateValue(newValue);
         }
     };
-    const handleTeaxtareaScroll = (event) => {
+    var handleTeaxtareaScroll = function (event) {
         if (maxLength) {
-            const val = event.target.scrollTop;
+            var val = event.target.scrollTop;
             setScrollPosition(val);
         }
     };
-    const getValueLength = () => {
+    var getValueLength = function () {
         if (uncontrolled) {
             return stateValue.length;
         }
         return value.length;
     };
-    const textareaClassNameCalc = cn(styles.textarea, colorStyles[colors].textarea, styles[SIZE_TO_CLASSNAME_MAP[size]], {
-        [styles.overflowHidden]: autosize && !maxRows,
-        [styles.customScrollbar]: !nativeScrollbar,
-        [styles.hasInnerLabel]: hasInnerLabel,
-        [colorStyles[colors].hasInnerLabel]: hasInnerLabel,
-        [styles.filled]: filled,
-    }, textareaClassName);
-    const textareaProps = {
-        ...restProps,
-        className: textareaClassNameCalc,
-        autoComplete,
-        disabled,
-        maxLength: allowOverflow ? undefined : maxLength,
-        onBlur: handleTextareaBlur,
-        onFocus: handleTextareaFocus,
-        onChange: handleTextareaChange,
-        value: uncontrolled ? stateValue : value,
-        rows,
-        ref: mergeRefs([ref, textareaRef]),
-        'data-test-id': dataTestId,
-        onScroll: handleTeaxtareaScroll,
-    };
-    const getBottomAddons = () => {
-        const counterIsVisible = Boolean(maxLength && showCounter);
-        return (React.createElement(React.Fragment, null,
-            counterIsVisible && (React.createElement("span", { className: cn(styles.sub, {
-                    [colorStyles[colors].error]: hasOverflow,
-                    [colorStyles[colors].hint]: !hasOverflow,
-                }) }, getCounterText(getValueLength(), maxLength))),
+    var textareaClassNameCalc = cn__default.default(styles__default.default.textarea, colorStyles[colors].textarea, styles__default.default[consts.SIZE_TO_CLASSNAME_MAP[size]], (_b = {},
+        _b[styles__default.default.overflowHidden] = autosize && !maxRows,
+        _b[styles__default.default.customScrollbar] = !nativeScrollbar,
+        _b[styles__default.default.hasInnerLabel] = hasInnerLabel,
+        _b[colorStyles[colors].hasInnerLabel] = hasInnerLabel,
+        _b[styles__default.default.filled] = filled,
+        _b), textareaClassName);
+    var textareaProps = tslib.__assign(tslib.__assign({}, restProps), { className: textareaClassNameCalc, autoComplete: autoComplete, disabled: disabled, maxLength: allowOverflow ? undefined : maxLength, onBlur: handleTextareaBlur, onFocus: handleTextareaFocus, onChange: handleTextareaChange, value: uncontrolled ? stateValue : value, rows: rows, ref: mergeRefs__default.default([ref, textareaRef]), 'data-test-id': dataTestId, onScroll: handleTeaxtareaScroll });
+    var getBottomAddons = function () {
+        var _a;
+        var counterIsVisible = Boolean(maxLength && showCounter);
+        return (React__default.default.createElement(React__default.default.Fragment, null,
+            counterIsVisible && (React__default.default.createElement("span", { className: cn__default.default(styles__default.default.sub, (_a = {},
+                    _a[colorStyles[colors].error] = hasOverflow,
+                    _a[colorStyles[colors].hint] = !hasOverflow,
+                    _a)) }, getCounterText(getValueLength(), maxLength))),
             bottomAddons));
     };
-    return (React.createElement(FormControl, { ref: wrapperRef, className: cn(className), fieldClassName: cn(fieldClassName, {
-            [styles.focusVisible]: focusVisible,
-        }), inputWrapperClassName: cn(styles.wrapper, styles[SIZE_TO_CLASSNAME_MAP[size]], {
-            [styles.hasInnerLabel]: hasInnerLabel,
-            [styles.resizeVertical]: resize === 'vertical',
-        }), size: size, colors: colors, block: block, disabled: disabled, filled: filled || focused, focused: focused, error: error, label: label, labelView: labelView, hint: hint, leftAddons: leftAddons, rightAddons: rightAddons, bottomAddons: getBottomAddons(), breakpoint: breakpoint, dataTestId: getDataTestId(dataTestId, 'form-control') },
-        React.createElement(React.Fragment, null,
-            hasOverflow && (React.createElement(PseudoTextArea, { value: value ?? stateValue, size: size, maxLength: maxLength, pseudoTextareaClassName: textareaClassNameCalc, ref: pseudoTextareaRef })),
-            autosize ? (React.createElement(TextareaAutosize, { ...textareaProps, maxRows: maxRows, minRows: minRows, onHeightChange: onHeightChange })) : (React.createElement("textarea", { ...textareaProps, style: { maxHeight } })))));
+    return (React__default.default.createElement(coreComponentsFormControl.FormControl, { ref: wrapperRef, className: cn__default.default(className), fieldClassName: cn__default.default(fieldClassName, (_c = {},
+            _c[styles__default.default.focusVisible] = focusVisible,
+            _c)), inputWrapperClassName: cn__default.default(styles__default.default.wrapper, styles__default.default[consts.SIZE_TO_CLASSNAME_MAP[size]], (_d = {},
+            _d[styles__default.default.hasInnerLabel] = hasInnerLabel,
+            _d[styles__default.default.resizeVertical] = resize === 'vertical',
+            _d)), size: size, colors: colors, block: block, disabled: disabled, filled: filled || focused, focused: focused, error: error, label: label, labelView: labelView, hint: hint, leftAddons: leftAddons, rightAddons: rightAddons, bottomAddons: getBottomAddons(), breakpoint: breakpoint, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'form-control') },
+        React__default.default.createElement(React__default.default.Fragment, null,
+            hasOverflow && (React__default.default.createElement(components_PseudoTextArea.PseudoTextArea, { value: value !== null && value !== void 0 ? value : stateValue, size: size, maxLength: maxLength, pseudoTextareaClassName: textareaClassNameCalc, ref: pseudoTextareaRef })),
+            autosize ? (React__default.default.createElement(TextareaAutosize__default.default, tslib.__assign({}, textareaProps, { maxRows: maxRows, minRows: minRows, onHeightChange: onHeightChange }))) : (React__default.default.createElement("textarea", tslib.__assign({}, textareaProps, { style: { maxHeight: maxHeight } }))))));
 });
 
-export { Textarea, getDefaultCounterText };
+exports.Textarea = Textarea;
+exports.getDefaultCounterText = getDefaultCounterText;

package/textarea/cssm/components/PseudoTextArea.js

@@ -1,11 +1,22 @@
-import React, { forwardRef } from 'react';
-import cn from 'classnames';
-import { SIZE_TO_CLASSNAME_MAP } from '../consts.js';
-import styles from '../index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const PseudoTextArea = forwardRef(({ size = 48, pseudoTextareaClassName, maxLength, value }, ref) => (React.createElement("div", { className: cn(styles.pseudoTextarea, styles[SIZE_TO_CLASSNAME_MAP[size]], pseudoTextareaClassName), ref: ref, hidden: true },
-    React.createElement("span", null, value.slice(0, maxLength)),
-    React.createElement("span", { className: cn(styles.overflow) }, value.slice(maxLength)),
-    React.createElement("br", null))));
+var React = require('react');
+var cn = require('classnames');
+var consts = require('../consts.js');
+var styles = require('../index.module.css');
 
-export { PseudoTextArea };
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var PseudoTextArea = React.forwardRef(function (_a, ref) {
+    var _b = _a.size, size = _b === void 0 ? 48 : _b, pseudoTextareaClassName = _a.pseudoTextareaClassName, maxLength = _a.maxLength, value = _a.value;
+    return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.pseudoTextarea, styles__default.default[consts.SIZE_TO_CLASSNAME_MAP[size]], pseudoTextareaClassName), ref: ref, hidden: true },
+        React__default.default.createElement("span", null, value.slice(0, maxLength)),
+        React__default.default.createElement("span", { className: cn__default.default(styles__default.default.overflow) }, value.slice(maxLength)),
+        React__default.default.createElement("br", null)));
+});
+
+exports.PseudoTextArea = PseudoTextArea;

package/textarea/cssm/components/index.js

@@ -1,5 +1,7 @@
-export { PseudoTextArea } from './PseudoTextArea.js';
-import 'react';
-import 'classnames';
-import '../consts.js';
-import '../index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_PseudoTextArea = require('./PseudoTextArea.js');
+
+
+
+exports.PseudoTextArea = components_PseudoTextArea.PseudoTextArea;

package/textarea/cssm/consts.js

@@ -1,4 +1,6 @@
-const SIZE_TO_CLASSNAME_MAP = {
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var SIZE_TO_CLASSNAME_MAP = {
     s: 'size-48',
     m: 'size-56',
     l: 'size-64',
@@ -9,4 +11,4 @@ const SIZE_TO_CLASSNAME_MAP = {
     72: 'size-72',
 };
 
-export { SIZE_TO_CLASSNAME_MAP };
+exports.SIZE_TO_CLASSNAME_MAP = SIZE_TO_CLASSNAME_MAP;

package/textarea/cssm/index.js

@@ -1,13 +1,8 @@
-export { Textarea, getDefaultCounterText } from './Component.js';
-import 'react';
-import 'react-merge-refs';
-import 'react-textarea-autosize';
-import 'classnames';
-import '../../form-control/cssm';
-import '../../shared/cssm';
-import '@alfalab/hooks';
-import './components/PseudoTextArea.js';
-import './consts.js';
-import './index.module.css';
-import './default.module.css';
-import './inverted.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component = require('./Component.js');
+
+
+
+exports.Textarea = Component.Textarea;
+exports.getDefaultCounterText = Component.getDefaultCounterText;

package/textarea/cssm/shared/index.js

@@ -1,2 +1,7 @@
-export { getTextareaTestIds } from '../utils.js';
-import '../../../shared/cssm';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utils = require('../utils.js');
+
+
+
+exports.getTextareaTestIds = utils.getTextareaTestIds;

package/textarea/cssm/utils.js

@@ -1,15 +1,17 @@
-import { getDataTestId } from '../../shared/cssm';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var coreComponentsShared = require('../../shared/cssm');
 
 function getTextareaTestIds(dataTestId) {
     return {
         textarea: dataTestId,
-        inputWrapper: getDataTestId(dataTestId, 'form-control'),
-        inputWrapperInner: getDataTestId(dataTestId, 'form-control-inner'),
-        leftAddons: getDataTestId(dataTestId, 'form-control-left-addons'),
-        rightAddons: getDataTestId(dataTestId, 'form-control-right-addons'),
-        error: getDataTestId(dataTestId, 'form-control-error-message'),
-        hint: getDataTestId(dataTestId, 'form-control-hint'),
+        inputWrapper: coreComponentsShared.getDataTestId(dataTestId, 'form-control'),
+        inputWrapperInner: coreComponentsShared.getDataTestId(dataTestId, 'form-control-inner'),
+        leftAddons: coreComponentsShared.getDataTestId(dataTestId, 'form-control-left-addons'),
+        rightAddons: coreComponentsShared.getDataTestId(dataTestId, 'form-control-right-addons'),
+        error: coreComponentsShared.getDataTestId(dataTestId, 'form-control-error-message'),
+        hint: coreComponentsShared.getDataTestId(dataTestId, 'form-control-hint'),
     };
 }
 
-export { getTextareaTestIds };
+exports.getTextareaTestIds = getTextareaTestIds;