@salutejs/plasma-new-hope 0.345.0-canary.2422.20906430475.0 → 0.345.0-canary.2423.20988873450.0

package/dist/styled-components/cjs/examples/components/TextArea/TextArea.js

@@ -2,14 +2,38 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "TextArea", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get TextArea () {
         return TextArea;
+    },
+    get TextAreaClear () {
+        return TextAreaClear;
+    },
+    get TextAreaDefault () {
+        return TextAreaDefault;
     }
 });
-var _TextArea = require("../../../components/TextArea");
+var _utils = require("../../../utils");
 var _engines = require("../../../engines");
+var _TextArea = require("../../../components/TextArea");
 var _TextAreaconfig = require("./TextArea.config");
+var _TextAreaclearconfig = require("./TextArea.clear.config");
 var mergedConfig = (0, _engines.mergeConfig)(_TextArea.textAreaConfig, _TextAreaconfig.config);
-var TextArea = (0, _engines.component)(mergedConfig);
+var TextAreaDefault = (0, _engines.component)(mergedConfig);
+var mergedConfigClear = (0, _engines.mergeConfig)(_TextArea.textAreaConfig, _TextAreaclearconfig.config);
+var TextAreaClear = (0, _engines.component)(mergedConfigClear);
+var TextArea = (0, _utils.createConditionalComponent)(TextAreaDefault, [
+    {
+        conditions: {
+            prop: 'appearance',
+            value: 'clear'
+        },
+        component: TextAreaClear
+    }
+]);

package/dist/styled-components/es/components/Combobox/ComboboxNew/Combobox.js

@@ -251,6 +251,9 @@ import { Context } from "./Combobox.context";
         var withArrowInverse = isCurrentListOpen ? classes.arrowInverse : undefined;
         var closeAfterSelect = outerCloseAfterSelect !== null && outerCloseAfterSelect !== void 0 ? outerCloseAfterSelect : !multiple;
         var setTextValue = function(newTextValue) {
+            /* Если значение поля ввода не изменилось, то выходим из функции */ if (newTextValue === textValue) {
+                return;
+            }
             setTextValueState(newTextValue);
             if (onChangeValue) {
                 onChangeValue(newTextValue);

package/dist/styled-components/es/components/TextArea/TextArea.js

@@ -122,7 +122,6 @@ import { StyledContent, StyledHelpers, StyledLeftHelper, StyledRightHelper, Styl
 import { classes } from "./TextArea.tokens";
 import { base as viewCSS } from "./variations/_view/base";
 import { base as sizeCSS } from "./variations/_size/base";
-import { base as clearCSS } from "./variations/_clear/base";
 import { base as readOnlyCSS } from "./variations/_read-only/base";
 import { base as disabledCSS } from "./variations/_disabled/base";
 import { base as hintViewCSS } from "./variations/_hint-view/base";
@@ -161,42 +160,29 @@ export var getDynamicLabelClasses = function(props, focused) {
 };
 export var textAreaRoot = function(Root) {
     return /*#__PURE__*/ forwardRef(function(props, innerRef) {
-        var helperText = props.helperText, status = props.status, resize = props.resize, headerSlot = props.headerSlot, rightHelper = props.rightHelper, leftHelper = props.leftHelper, _props_leftHelperPlacement = props.leftHelperPlacement, leftHelperPlacement = _props_leftHelperPlacement === void 0 ? 'inner' : _props_leftHelperPlacement, contentRight = props.contentRight, _props_autoResize = props.autoResize, autoResize = _props_autoResize === void 0 ? false : _props_autoResize, _props_minAuto = props.minAuto, minAuto = _props_minAuto === void 0 ? 0 : _props_minAuto, maxAuto = props.maxAuto, label = props.label, _props_labelPlacement = props.labelPlacement, labelPlacement = _props_labelPlacement === void 0 ? 'inner' : _props_labelPlacement, titleCaption = props.titleCaption, placeholder = props.placeholder, defaultValue = props.defaultValue, height = props.height, width = props.width, value = props.value, disabled = props.disabled, _props_required = props.required, required = _props_required === void 0 ? false : _props_required, _props_requiredPlacement = props.requiredPlacement, requiredPlacement = _props_requiredPlacement === void 0 ? 'right' : _props_requiredPlacement, _props_hasRequiredIndicator = props.hasRequiredIndicator, hasRequiredIndicator = _props_hasRequiredIndicator === void 0 ? false : _props_hasRequiredIndicator, _props_optional = props.optional, optional = _props_optional === void 0 ? false : _props_optional, _props_optionalText = props.optionalText, optionalText = _props_optionalText === void 0 ? 'optional' : _props_optionalText, clear = props.clear, hasDivider = props.hasDivider, size = props.size, view = props.view, id = props.id, style = props.style, className = props.className, readOnly = props.readOnly, rows = props.rows, cols = props.cols, _props_hintTrigger = props.hintTrigger, hintTrigger = _props_hintTrigger === void 0 ? 'hover' : _props_hintTrigger, hintText = props.hintText, _props_hintView = props.hintView, hintView = _props_hintView === void 0 ? 'default' : _props_hintView, _props_hintSize = props.hintSize, hintSize = _props_hintSize === void 0 ? 'm' : _props_hintSize, hintTargetIcon = props.hintTargetIcon, _props_hintPlacement = props.hintPlacement, hintPlacement = _props_hintPlacement === void 0 ? 'auto' : _props_hintPlacement, hintHasArrow = props.hintHasArrow, _props_hintOffset = props.hintOffset, hintOffset = _props_hintOffset === void 0 ? HINT_DEFAULT_OFFSET : _props_hintOffset, hintWidth = props.hintWidth, hintContentLeft = props.hintContentLeft, _props_labelAriaHidden = props.labelAriaHidden, labelAriaHidden = _props_labelAriaHidden === void 0 ? false : _props_labelAriaHidden, onChange = props.onChange, rest = _object_without_properties(props, [
-            "helperText",
-            "status",
-            "resize",
-            "headerSlot",
-            "rightHelper",
-            "leftHelper",
-            "leftHelperPlacement",
-            "contentRight",
-            "autoResize",
-            "minAuto",
-            "maxAuto",
+        var id = props.id, className = props.className, style = props.style, // layout
+        label = props.label, _props_labelPlacement = props.labelPlacement, labelPlacement = _props_labelPlacement === void 0 ? 'inner' : _props_labelPlacement, titleCaption = props.titleCaption, placeholder = props.placeholder, leftHelper = props.leftHelper, _props_leftHelperPlacement = props.leftHelperPlacement, leftHelperPlacement = _props_leftHelperPlacement === void 0 ? 'inner' : _props_leftHelperPlacement, helperText = props.helperText, rightHelper = props.rightHelper, contentRight = props.contentRight, headerSlot = props.headerSlot, _props_requiredPlacement = props.requiredPlacement, requiredPlacement = _props_requiredPlacement === void 0 ? 'right' : _props_requiredPlacement, _props_hasRequiredIndicator = props.hasRequiredIndicator, hasRequiredIndicator = _props_hasRequiredIndicator === void 0 ? false : _props_hasRequiredIndicator, _props_hintTrigger = props.// hint
+        hintTrigger, hintTrigger = _props_hintTrigger === void 0 ? 'hover' : _props_hintTrigger, hintText = props.hintText, _props_hintView = props.hintView, hintView = _props_hintView === void 0 ? 'default' : _props_hintView, _props_hintSize = props.hintSize, hintSize = _props_hintSize === void 0 ? 'm' : _props_hintSize, hintTargetIcon = props.hintTargetIcon, _props_hintPlacement = props.hintPlacement, hintPlacement = _props_hintPlacement === void 0 ? 'auto' : _props_hintPlacement, hintHasArrow = props.hintHasArrow, _props_hintOffset = props.hintOffset, hintOffset = _props_hintOffset === void 0 ? HINT_DEFAULT_OFFSET : _props_hintOffset, hintWidth = props.hintWidth, hintContentLeft = props.hintContentLeft, // variations
+        appearance = props.appearance, status = props.status, view = props.view, size = props.size, readOnly = props.readOnly, disabled = props.disabled, _props_required = props.required, required = _props_required === void 0 ? false : _props_required, clear = props.clear, _props_optional = props.optional, optional = _props_optional === void 0 ? false : _props_optional, _props_optionalText = props.optionalText, optionalText = _props_optionalText === void 0 ? 'optional' : _props_optionalText, hasDivider = props.hasDivider, // controlled
+        value = props.value, defaultValue = props.defaultValue, // textarea-specific
+        resize = props.resize, _props_autoResize = props.autoResize, autoResize = _props_autoResize === void 0 ? false : _props_autoResize, _props_minAuto = props.minAuto, minAuto = _props_minAuto === void 0 ? 0 : _props_minAuto, maxAuto = props.maxAuto, height = props.height, width = props.width, rows = props.rows, cols = props.cols, // events
+        onChange = props.onChange, _props_labelAriaHidden = props.// additional
+        labelAriaHidden, labelAriaHidden = _props_labelAriaHidden === void 0 ? false : _props_labelAriaHidden, rest = _object_without_properties(props, [
+            "id",
+            "className",
+            "style",
             "label",
             "labelPlacement",
             "titleCaption",
             "placeholder",
-            "defaultValue",
-            "height",
-            "width",
-            "value",
-            "disabled",
-            "required",
+            "leftHelper",
+            "leftHelperPlacement",
+            "helperText",
+            "rightHelper",
+            "contentRight",
+            "headerSlot",
             "requiredPlacement",
             "hasRequiredIndicator",
-            "optional",
-            "optionalText",
-            "clear",
-            "hasDivider",
-            "size",
-            "view",
-            "id",
-            "style",
-            "className",
-            "readOnly",
-            "rows",
-            "cols",
             "hintTrigger",
             "hintText",
             "hintView",
@@ -207,8 +193,29 @@ export var textAreaRoot = function(Root) {
             "hintOffset",
             "hintWidth",
             "hintContentLeft",
-            "labelAriaHidden",
-            "onChange"
+            "appearance",
+            "status",
+            "view",
+            "size",
+            "readOnly",
+            "disabled",
+            "required",
+            "clear",
+            "optional",
+            "optionalText",
+            "hasDivider",
+            "value",
+            "defaultValue",
+            "resize",
+            "autoResize",
+            "minAuto",
+            "maxAuto",
+            "height",
+            "width",
+            "rows",
+            "cols",
+            "onChange",
+            "labelAriaHidden"
         ]);
         var _useState = _sliced_to_array(useState(false), 2), isHintVisible = _useState[0], setIsHintVisible = _useState[1];
         var _useState1 = _sliced_to_array(useState(width ? "".concat(width, "rem") : '100%'), 2), helperWidth = _useState1[0], setHelperWidth = _useState1[1];
@@ -232,13 +239,13 @@ export var textAreaRoot = function(Root) {
         var hasOuterLabel = Boolean(label && labelPlacement === 'outer');
         var hasInnerLabel = Boolean(label && labelPlacement === 'inner' && size !== 'xs');
         var hasPlaceholderOptional = innerOptional && !hasOuterLabel;
-        var hasHeader = Boolean(headerSlot) && !clear;
+        var hasHeader = Boolean(headerSlot) && !(clear || appearance === 'clear');
         var overriddenView = status !== undefined ? fallbackStatusMap[status] : view;
         var textareaHelperId = id ? "".concat(id, "-helper") : undefined;
         var applyCustomWidth = resize !== 'horizontal' && resize !== 'both' && !cols;
         var placeholderLabel = hasInnerLabel ? label : placeholder;
-        var applyAutoResize = autoResize || Boolean(clear);
-        var clearClass = clear ? classes.clear : undefined;
+        var applyAutoResize = autoResize || Boolean(clear || appearance === 'clear');
+        var clearClass = clear || appearance === 'clear' ? classes.clear : undefined;
         var hasHintClass = hintText ? classes.hasHint : undefined;
         var hasRightContentClass = contentRight ? classes.hasRightContent : undefined;
         var hasDividerClass = hasDivider ? classes.hasDivider : undefined;
@@ -268,9 +275,18 @@ export var textAreaRoot = function(Root) {
         }, [
             outerRef
         ]);
+        useLayoutEffect(function() {
+            if (!hiddenRef.current || !cols) {
+                return;
+            }
+            var _hiddenRef_current_getBoundingClientRect = hiddenRef.current.getBoundingClientRect(), elementWidth = _hiddenRef_current_getBoundingClientRect.width;
+            setHelperWidth("".concat(elementWidth / ROOT_FONT_SIZE, "rem"));
+        }, [
+            cols
+        ]);
         useResizeObserver(outerRef, function(currentElement) {
             var _currentElement_style = currentElement.style, inlineWidth = _currentElement_style.width;
-            if (inlineWidth || cols) {
+            if (inlineWidth) {
                 var _currentElement_getBoundingClientRect = currentElement.getBoundingClientRect(), elementWidth = _currentElement_getBoundingClientRect.width;
                 setHelperWidth("".concat(elementWidth / ROOT_FONT_SIZE, "rem"));
             }
@@ -406,12 +422,13 @@ export var textAreaRoot = function(Root) {
             defaultValue: defaultValue,
             onChange: onChangeHandler,
             "data-tour": true
-        }, rest)), applyAutoResize && /*#__PURE__*/ React.createElement(StyledHiddenTextArea, {
+        }, rest)), Boolean(applyAutoResize || cols) && /*#__PURE__*/ React.createElement(StyledHiddenTextArea, {
             "aria-hidden": true,
             ref: hiddenRef,
             hasContentRight: Boolean(contentRight),
             value: value || uncontrolledValue || ' ',
-            defaultValue: defaultValue
+            defaultValue: defaultValue,
+            cols: cols
         })), hasHelper && /*#__PURE__*/ React.createElement(StyledHelpers, {
             className: styledHelpers,
             id: textareaHelperId
@@ -440,10 +457,6 @@ export var textAreaConfig = {
         view: {
             css: viewCSS
         },
-        clear: {
-            css: clearCSS,
-            attrs: true
-        },
         readOnly: {
             css: readOnlyCSS,
             attrs: true

package/dist/styled-components/es/components/TextArea/TextArea.styles.js

@@ -7,13 +7,13 @@ var mergedConfig = mergeConfig(tooltipConfig);
 var Tooltip = component(mergedConfig);
 export var Hint = styled(Tooltip).withConfig({
     displayName: "TextArea.styles__Hint",
-    componentId: "sc-621ad7e5-0"
+    componentId: "sc-9436bd8f-0"
 })([
     ""
 ]);
 export var OuterLabelWrapper = styled.div.withConfig({
     displayName: "TextArea.styles__OuterLabelWrapper",
-    componentId: "sc-621ad7e5-1"
+    componentId: "sc-9436bd8f-1"
 })([
     "display:flex;align-items:center;max-width:",
     ";margin-bottom:",
@@ -27,7 +27,7 @@ export var OuterLabelWrapper = styled.div.withConfig({
 });
 export var StyledLabel = styled.div.withConfig({
     displayName: "TextArea.styles__StyledLabel",
-    componentId: "sc-621ad7e5-2"
+    componentId: "sc-9436bd8f-2"
 })([
     "position:relative;display:inline-flex;color:var(",
     ",var(",
@@ -47,7 +47,7 @@ export var StyledLabel = styled.div.withConfig({
 ], tokens.labelOuterColor, tokens.inputColor, tokens.labelOuterFontFamily, tokens.inputFontFamily, tokens.labelOuterFontSize, tokens.inputFontSize, tokens.labelOuterFontStyle, tokens.inputFontStyle, tokens.labelOuterFontWeight, tokens.inputFontWeight, tokens.labelOuterLetterSpacing, tokens.inputLetterSpacing, tokens.labelOuterLineHeight, tokens.inputLineHeight);
 export var TitleCaption = styled.div.withConfig({
     displayName: "TextArea.styles__TitleCaption",
-    componentId: "sc-621ad7e5-3"
+    componentId: "sc-9436bd8f-3"
 })([
     "display:inline-block;margin-left:auto;font-family:var(",
     ");font-size:var(",
@@ -59,13 +59,13 @@ export var TitleCaption = styled.div.withConfig({
 ], tokens.titleCaptionFontFamily, tokens.titleCaptionFontSize, tokens.titleCaptionFontStyle, tokens.titleCaptionFontWeight, tokens.titleCaptionLetterSpacing, tokens.titleCaptionLineHeight);
 export var StyledIndicatorWrapper = styled.div.withConfig({
     displayName: "TextArea.styles__StyledIndicatorWrapper",
-    componentId: "sc-621ad7e5-4"
+    componentId: "sc-9436bd8f-4"
 })([
     "position:relative;display:inline-flex;align-items:center;"
 ]);
 export var StyledOptionalText = styled.span.withConfig({
     displayName: "TextArea.styles__StyledOptionalText",
-    componentId: "sc-621ad7e5-5"
+    componentId: "sc-9436bd8f-5"
 })([
     "color:var(",
     ");font-family:",
@@ -96,7 +96,7 @@ export var StyledOptionalText = styled.span.withConfig({
 });
 export var StyledHintWrapper = styled.div.withConfig({
     displayName: "TextArea.styles__StyledHintWrapper",
-    componentId: "sc-621ad7e5-6"
+    componentId: "sc-9436bd8f-6"
 })([
     "display:inline-flex;line-height:0;margin:var(",
     ");&.",
@@ -105,7 +105,7 @@ export var StyledHintWrapper = styled.div.withConfig({
 ], tokens.hintMargin, classes.innerLabelPlacement, tokens.hintInnerLabelPlacementOffset);
 export var HintTargetWrapper = styled.div.withConfig({
     displayName: "TextArea.styles__HintTargetWrapper",
-    componentId: "sc-621ad7e5-7"
+    componentId: "sc-9436bd8f-7"
 })([
     "color:var(",
     ");width:var(",
@@ -114,13 +114,13 @@ export var HintTargetWrapper = styled.div.withConfig({
 ], tokens.hintIconColor, tokens.hintTargetSize, tokens.hintTargetSize);
 export var HintIconWrapper = styled.div.withConfig({
     displayName: "TextArea.styles__HintIconWrapper",
-    componentId: "sc-621ad7e5-8"
+    componentId: "sc-9436bd8f-8"
 })([
     ""
 ]);
 export var StyledTextAreaWrapper = styled.div.withConfig({
     displayName: "TextArea.styles__StyledTextAreaWrapper",
-    componentId: "sc-621ad7e5-9"
+    componentId: "sc-9436bd8f-9"
 })([
     "display:flex;flex-direction:column;background-color:var(",
     ");padding-top:",
@@ -139,7 +139,7 @@ export var StyledTextAreaWrapper = styled.div.withConfig({
 });
 export var StyledContentWrapper = styled.div.withConfig({
     displayName: "TextArea.styles__StyledContentWrapper",
-    componentId: "sc-621ad7e5-10"
+    componentId: "sc-9436bd8f-10"
 })([
     "position:relative;width:100%;height:0;padding-top:",
     ";"
@@ -149,41 +149,42 @@ export var StyledContentWrapper = styled.div.withConfig({
 });
 export var StyledContent = styled.div.withConfig({
     displayName: "TextArea.styles__StyledContent",
-    componentId: "sc-621ad7e5-11"
+    componentId: "sc-9436bd8f-11"
 })([
     "position:absolute;display:flex;align-items:center;z-index:1;color:var(",
-    ",var(",
-    "));top:",
+    ");top:",
     ";right:var(",
     ");height:var(",
-    ");"
-], tokens.rightContentColor, tokens.inputColor, function(param) {
+    ");&:hover{color:var(",
+    ");}&:active{color:var(",
+    ");}"
+], tokens.rightContentColor, function(param) {
     var hasHeader = param.hasHeader;
     return hasHeader ? "var(".concat(tokens.inputPaddingTop, ")") : "var(".concat(tokens.rightContentTop, ")");
-}, tokens.rightContentRight, tokens.rightContentHeight);
+}, tokens.rightContentRight, tokens.rightContentHeight, tokens.rightContentColorHover, tokens.rightContentColorActive);
 export var StyledHeaderSlot = styled.div.withConfig({
     displayName: "TextArea.styles__StyledHeaderSlot",
-    componentId: "sc-621ad7e5-12"
+    componentId: "sc-9436bd8f-12"
 })([
     "display:flex;flex-direction:column;"
 ]);
 export var DividerWrapper = styled.div.withConfig({
     displayName: "TextArea.styles__DividerWrapper",
-    componentId: "sc-621ad7e5-13"
+    componentId: "sc-9436bd8f-13"
 })([
     "background:var(",
     ");"
 ], tokens.backgroundColor);
 export var Divider = styled.div.withConfig({
     displayName: "TextArea.styles__Divider",
-    componentId: "sc-621ad7e5-14"
+    componentId: "sc-9436bd8f-14"
 })([
     "height:0.0625rem;background:var(",
     ");"
 ], tokens.dividerColor);
 export var StyledContainer = styled.div.withConfig({
     displayName: "TextArea.styles__StyledContainer",
-    componentId: "sc-621ad7e5-15"
+    componentId: "sc-9436bd8f-15"
 })([
     "display:inline-flex;flex-direction:column;width:",
     ";position:relative;"
@@ -193,7 +194,7 @@ export var StyledContainer = styled.div.withConfig({
 });
 export var StyledTextArea = styled.textarea.withConfig({
     displayName: "TextArea.styles__StyledTextArea",
-    componentId: "sc-621ad7e5-16"
+    componentId: "sc-9436bd8f-16"
 })([
     "display:block;box-sizing:border-box;outline:none;border:none;-webkit-appearance:none;background-color:transparent;color:var(",
     ");caret-color:var(",
@@ -256,10 +257,11 @@ export var StyledTextArea = styled.textarea.withConfig({
 }, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputFontStyle, tokens.inputFontWeight, tokens.inputLetterSpacing, tokens.inputLineHeight, tokens.inputColorFocus, tokens.scrollbarWidth, tokens.scrollbarThumbBackgroundColor, tokens.scrollbarBorderWidth, tokens.scrollbarTrackBackgroundColor, tokens.scrollbarBorderWidth);
 export var StyledHiddenTextArea = styled.textarea.withConfig({
     displayName: "TextArea.styles__StyledHiddenTextArea",
-    componentId: "sc-621ad7e5-17"
+    componentId: "sc-9436bd8f-17"
 })([
     "max-height:none !important;min-height:var(",
-    ") !important;visibility:hidden !important;overflow:hidden !important;position:absolute !important;z-index:-1000 !important;top:0 !important;left:0 !important;right:0.0625rem !important;border-width:0;padding-right:",
+    ") !important;visibility:hidden !important;overflow:hidden !important;position:absolute !important;z-index:-1000 !important;top:0 !important;left:0 !important;right:",
+    ";border-width:0;padding-right:",
     ";padding-left:var(",
     ",0);padding-top:0;padding-bottom:0;box-sizing:border-box;text-indent:0;text-rendering:auto;text-transform:none;tab-size:8;font-family:var(",
     ");font-size:var(",
@@ -269,12 +271,15 @@ export var StyledHiddenTextArea = styled.textarea.withConfig({
     ");line-height:var(",
     ");"
 ], tokens.inputMinHeight, function(param) {
+    var cols = param.cols;
+    return cols ? 'unset' : '0.0625rem !important';
+}, function(param) {
     var hasContentRight = param.hasContentRight;
     return hasContentRight ? "var(".concat(tokens.inputPaddingRightWithRightContent, ", 0)") : "var(".concat(tokens.inputPaddingRight, ", 0)");
 }, tokens.inputPaddingLeft, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputFontStyle, tokens.inputFontWeight, tokens.inputLetterSpacing, tokens.inputLineHeight);
 export var StyledHelpers = styled.div.withConfig({
     displayName: "TextArea.styles__StyledHelpers",
-    componentId: "sc-621ad7e5-18"
+    componentId: "sc-9436bd8f-18"
 })([
     "box-sizing:border-box;display:flex;justify-content:space-between;transition:background-color 0.1s ease-in-out;background-color:var(",
     ");padding-top:var(",
@@ -287,14 +292,14 @@ export var StyledHelpers = styled.div.withConfig({
 ], tokens.helpersBackgroundColor, tokens.helpersPaddingTop, tokens.helpersPaddingRight, tokens.helpersPaddingBottom, tokens.helpersPaddingLeft, tokens.borderRadius, tokens.borderRadius);
 export var StyledOutsideHelpersWrapper = styled.div.withConfig({
     displayName: "TextArea.styles__StyledOutsideHelpersWrapper",
-    componentId: "sc-621ad7e5-19"
+    componentId: "sc-9436bd8f-19"
 })([
     "box-sizing:border-box;display:flex;justify-content:space-between;padding-top:var(",
     ");"
 ], tokens.clearHelpersPaddingTop);
 export var StyledLeftHelper = styled.span.withConfig({
     displayName: "TextArea.styles__StyledLeftHelper",
-    componentId: "sc-621ad7e5-20"
+    componentId: "sc-9436bd8f-20"
 })([
     "",
     ";display:block;font-family:var(",
@@ -306,18 +311,19 @@ export var StyledLeftHelper = styled.span.withConfig({
     ");color:var(",
     ");&.",
     "{color:var(",
-    ");}"
-], applyEllipsis(), tokens.helpersFontFamily, tokens.helpersFontSize, tokens.helpersFontStyle, tokens.helpersFontWeight, tokens.helpersLetterSpacing, tokens.helpersLineHeight, tokens.leftHelperColor, classes.leftHelperFocus, tokens.leftHelperColorFocus);
+    ",var(",
+    "));}"
+], applyEllipsis(), tokens.helpersFontFamily, tokens.helpersFontSize, tokens.helpersFontStyle, tokens.helpersFontWeight, tokens.helpersLetterSpacing, tokens.helpersLineHeight, tokens.leftHelperColor, classes.leftHelperFocus, tokens.leftHelperColorFocus, tokens.leftHelperColor);
 export var StyledRightHelper = styled(StyledLeftHelper).withConfig({
     displayName: "TextArea.styles__StyledRightHelper",
-    componentId: "sc-621ad7e5-21"
+    componentId: "sc-9436bd8f-21"
 })([
     "color:var(",
     ");margin-left:auto;"
 ], tokens.rightHelperColor);
 export var StyledPlaceholder = styled.label.withConfig({
     displayName: "TextArea.styles__StyledPlaceholder",
-    componentId: "sc-621ad7e5-22"
+    componentId: "sc-9436bd8f-22"
 })([
     "box-sizing:border-box;position:absolute;pointer-events:none;display:inline-flex;align-items:center;transition:all 0.1s ease-in-out;transform-origin:top left;color:var(",
     ");width:100%;height:auto;top:var(",
@@ -336,7 +342,7 @@ export var StyledPlaceholder = styled.label.withConfig({
 }, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputFontStyle, tokens.inputFontWeight, tokens.inputLetterSpacing, tokens.inputLineHeight);
 export var StyledIndicator = styled.div.withConfig({
     displayName: "TextArea.styles__StyledIndicator",
-    componentId: "sc-621ad7e5-23"
+    componentId: "sc-9436bd8f-23"
 })([
     "position:absolute;border-radius:50%;background-color:var(",
     ");&.",