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

package/dist/emotion/es/examples/components/TextArea/TextArea.js

@@ -1,5 +1,18 @@
-import { textAreaConfig } from "../../../components/TextArea";
+import { createConditionalComponent } from "../../../utils";
 import { component, mergeConfig } from "../../../engines";
+import { textAreaConfig } from "../../../components/TextArea";
 import { config } from "./TextArea.config";
+import { config as clearConfig } from "./TextArea.clear.config";
 var mergedConfig = mergeConfig(textAreaConfig, config);
-export var TextArea = component(mergedConfig);
+export var TextAreaDefault = component(mergedConfig);
+var mergedConfigClear = mergeConfig(textAreaConfig, clearConfig);
+export var TextAreaClear = component(mergedConfigClear);
+export var TextArea = createConditionalComponent(TextAreaDefault, [
+    {
+        conditions: {
+            prop: 'appearance',
+            value: 'clear'
+        },
+        component: TextAreaClear
+    }
+]);

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

@@ -308,6 +308,9 @@ var comboboxRoot = function(Root) {
         var withArrowInverse = isCurrentListOpen ? _Comboboxtokens.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/cjs/components/TextArea/TextArea.js

@@ -30,11 +30,10 @@ var _TextAreastyles = require("./TextArea.styles");
 var _TextAreatokens = require("./TextArea.tokens");
 var _base = require("./variations/_view/base");
 var _base1 = require("./variations/_size/base");
-var _base2 = require("./variations/_clear/base");
-var _base3 = require("./variations/_read-only/base");
-var _base4 = require("./variations/_disabled/base");
-var _base5 = require("./variations/_hint-view/base");
-var _base6 = require("./variations/_hint-size/base");
+var _base2 = require("./variations/_read-only/base");
+var _base3 = require("./variations/_disabled/base");
+var _base4 = require("./variations/_hint-view/base");
+var _base5 = require("./variations/_hint-size/base");
 var _Hint = require("./ui/Hint/Hint");
 function _array_like_to_array(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
@@ -222,42 +221,29 @@ var getDynamicLabelClasses = function(props, focused) {
 };
 var textAreaRoot = function(Root) {
     return /*#__PURE__*/ (0, _react.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",
@@ -268,8 +254,29 @@ 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((0, _react.useState)(false), 2), isHintVisible = _useState[0], setIsHintVisible = _useState[1];
         var _useState1 = _sliced_to_array((0, _react.useState)(width ? "".concat(width, "rem") : '100%'), 2), helperWidth = _useState1[0], setHelperWidth = _useState1[1];
@@ -293,13 +300,13 @@ 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 ? _TextAreatokens.classes.clear : undefined;
+        var applyAutoResize = autoResize || Boolean(clear || appearance === 'clear');
+        var clearClass = clear || appearance === 'clear' ? _TextAreatokens.classes.clear : undefined;
         var hasHintClass = hintText ? _TextAreatokens.classes.hasHint : undefined;
         var hasRightContentClass = contentRight ? _TextAreatokens.classes.hasRightContent : undefined;
         var hasDividerClass = hasDivider ? _TextAreatokens.classes.hasDivider : undefined;
@@ -501,23 +508,19 @@ var textAreaConfig = {
         view: {
             css: _base.base
         },
-        clear: {
-            css: _base2.base,
-            attrs: true
-        },
         readOnly: {
-            css: _base3.base,
+            css: _base2.base,
             attrs: true
         },
         disabled: {
-            css: _base4.base,
+            css: _base3.base,
             attrs: true
         },
         hintView: {
-            css: _base5.base
+            css: _base4.base
         },
         hintSize: {
-            css: _base6.base
+            css: _base5.base
         }
     },
     defaults: {

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

@@ -96,13 +96,13 @@ var mergedConfig = (0, _engines.mergeConfig)(_Tooltip.tooltipConfig);
 var Tooltip = (0, _engines.component)(mergedConfig);
 var Hint = (0, _styledcomponents.default)(Tooltip).withConfig({
     displayName: "TextArea.styles__Hint",
-    componentId: "sc-621ad7e5-0"
+    componentId: "sc-9b9ba25-0"
 })([
     ""
 ]);
 var OuterLabelWrapper = _styledcomponents.default.div.withConfig({
     displayName: "TextArea.styles__OuterLabelWrapper",
-    componentId: "sc-621ad7e5-1"
+    componentId: "sc-9b9ba25-1"
 })([
     "display:flex;align-items:center;max-width:",
     ";margin-bottom:",
@@ -116,7 +116,7 @@ var OuterLabelWrapper = _styledcomponents.default.div.withConfig({
 });
 var StyledLabel = _styledcomponents.default.div.withConfig({
     displayName: "TextArea.styles__StyledLabel",
-    componentId: "sc-621ad7e5-2"
+    componentId: "sc-9b9ba25-2"
 })([
     "position:relative;display:inline-flex;color:var(",
     ",var(",
@@ -136,7 +136,7 @@ var StyledLabel = _styledcomponents.default.div.withConfig({
 ], _TextAreatokens.tokens.labelOuterColor, _TextAreatokens.tokens.inputColor, _TextAreatokens.tokens.labelOuterFontFamily, _TextAreatokens.tokens.inputFontFamily, _TextAreatokens.tokens.labelOuterFontSize, _TextAreatokens.tokens.inputFontSize, _TextAreatokens.tokens.labelOuterFontStyle, _TextAreatokens.tokens.inputFontStyle, _TextAreatokens.tokens.labelOuterFontWeight, _TextAreatokens.tokens.inputFontWeight, _TextAreatokens.tokens.labelOuterLetterSpacing, _TextAreatokens.tokens.inputLetterSpacing, _TextAreatokens.tokens.labelOuterLineHeight, _TextAreatokens.tokens.inputLineHeight);
 var TitleCaption = _styledcomponents.default.div.withConfig({
     displayName: "TextArea.styles__TitleCaption",
-    componentId: "sc-621ad7e5-3"
+    componentId: "sc-9b9ba25-3"
 })([
     "display:inline-block;margin-left:auto;font-family:var(",
     ");font-size:var(",
@@ -148,13 +148,13 @@ var TitleCaption = _styledcomponents.default.div.withConfig({
 ], _TextAreatokens.tokens.titleCaptionFontFamily, _TextAreatokens.tokens.titleCaptionFontSize, _TextAreatokens.tokens.titleCaptionFontStyle, _TextAreatokens.tokens.titleCaptionFontWeight, _TextAreatokens.tokens.titleCaptionLetterSpacing, _TextAreatokens.tokens.titleCaptionLineHeight);
 var StyledIndicatorWrapper = _styledcomponents.default.div.withConfig({
     displayName: "TextArea.styles__StyledIndicatorWrapper",
-    componentId: "sc-621ad7e5-4"
+    componentId: "sc-9b9ba25-4"
 })([
     "position:relative;display:inline-flex;align-items:center;"
 ]);
 var StyledOptionalText = _styledcomponents.default.span.withConfig({
     displayName: "TextArea.styles__StyledOptionalText",
-    componentId: "sc-621ad7e5-5"
+    componentId: "sc-9b9ba25-5"
 })([
     "color:var(",
     ");font-family:",
@@ -185,7 +185,7 @@ var StyledOptionalText = _styledcomponents.default.span.withConfig({
 });
 var StyledHintWrapper = _styledcomponents.default.div.withConfig({
     displayName: "TextArea.styles__StyledHintWrapper",
-    componentId: "sc-621ad7e5-6"
+    componentId: "sc-9b9ba25-6"
 })([
     "display:inline-flex;line-height:0;margin:var(",
     ");&.",
@@ -194,7 +194,7 @@ var StyledHintWrapper = _styledcomponents.default.div.withConfig({
 ], _TextAreatokens.tokens.hintMargin, _TextAreatokens.classes.innerLabelPlacement, _TextAreatokens.tokens.hintInnerLabelPlacementOffset);
 var HintTargetWrapper = _styledcomponents.default.div.withConfig({
     displayName: "TextArea.styles__HintTargetWrapper",
-    componentId: "sc-621ad7e5-7"
+    componentId: "sc-9b9ba25-7"
 })([
     "color:var(",
     ");width:var(",
@@ -203,13 +203,13 @@ var HintTargetWrapper = _styledcomponents.default.div.withConfig({
 ], _TextAreatokens.tokens.hintIconColor, _TextAreatokens.tokens.hintTargetSize, _TextAreatokens.tokens.hintTargetSize);
 var HintIconWrapper = _styledcomponents.default.div.withConfig({
     displayName: "TextArea.styles__HintIconWrapper",
-    componentId: "sc-621ad7e5-8"
+    componentId: "sc-9b9ba25-8"
 })([
     ""
 ]);
 var StyledTextAreaWrapper = _styledcomponents.default.div.withConfig({
     displayName: "TextArea.styles__StyledTextAreaWrapper",
-    componentId: "sc-621ad7e5-9"
+    componentId: "sc-9b9ba25-9"
 })([
     "display:flex;flex-direction:column;background-color:var(",
     ");padding-top:",
@@ -228,7 +228,7 @@ var StyledTextAreaWrapper = _styledcomponents.default.div.withConfig({
 });
 var StyledContentWrapper = _styledcomponents.default.div.withConfig({
     displayName: "TextArea.styles__StyledContentWrapper",
-    componentId: "sc-621ad7e5-10"
+    componentId: "sc-9b9ba25-10"
 })([
     "position:relative;width:100%;height:0;padding-top:",
     ";"
@@ -238,41 +238,42 @@ var StyledContentWrapper = _styledcomponents.default.div.withConfig({
 });
 var StyledContent = _styledcomponents.default.div.withConfig({
     displayName: "TextArea.styles__StyledContent",
-    componentId: "sc-621ad7e5-11"
+    componentId: "sc-9b9ba25-11"
 })([
     "position:absolute;display:flex;align-items:center;z-index:1;color:var(",
-    ",var(",
-    "));top:",
+    ");top:",
     ";right:var(",
     ");height:var(",
-    ");"
-], _TextAreatokens.tokens.rightContentColor, _TextAreatokens.tokens.inputColor, function(param) {
+    ");&:hover{color:var(",
+    ");}&:active{color:var(",
+    ");}"
+], _TextAreatokens.tokens.rightContentColor, function(param) {
     var hasHeader = param.hasHeader;
     return hasHeader ? "var(".concat(_TextAreatokens.tokens.inputPaddingTop, ")") : "var(".concat(_TextAreatokens.tokens.rightContentTop, ")");
-}, _TextAreatokens.tokens.rightContentRight, _TextAreatokens.tokens.rightContentHeight);
+}, _TextAreatokens.tokens.rightContentRight, _TextAreatokens.tokens.rightContentHeight, _TextAreatokens.tokens.rightContentColorHover, _TextAreatokens.tokens.rightContentColorActive);
 var StyledHeaderSlot = _styledcomponents.default.div.withConfig({
     displayName: "TextArea.styles__StyledHeaderSlot",
-    componentId: "sc-621ad7e5-12"
+    componentId: "sc-9b9ba25-12"
 })([
     "display:flex;flex-direction:column;"
 ]);
 var DividerWrapper = _styledcomponents.default.div.withConfig({
     displayName: "TextArea.styles__DividerWrapper",
-    componentId: "sc-621ad7e5-13"
+    componentId: "sc-9b9ba25-13"
 })([
     "background:var(",
     ");"
 ], _TextAreatokens.tokens.backgroundColor);
 var Divider = _styledcomponents.default.div.withConfig({
     displayName: "TextArea.styles__Divider",
-    componentId: "sc-621ad7e5-14"
+    componentId: "sc-9b9ba25-14"
 })([
     "height:0.0625rem;background:var(",
     ");"
 ], _TextAreatokens.tokens.dividerColor);
 var StyledContainer = _styledcomponents.default.div.withConfig({
     displayName: "TextArea.styles__StyledContainer",
-    componentId: "sc-621ad7e5-15"
+    componentId: "sc-9b9ba25-15"
 })([
     "display:inline-flex;flex-direction:column;width:",
     ";position:relative;"
@@ -282,7 +283,7 @@ var StyledContainer = _styledcomponents.default.div.withConfig({
 });
 var StyledTextArea = _styledcomponents.default.textarea.withConfig({
     displayName: "TextArea.styles__StyledTextArea",
-    componentId: "sc-621ad7e5-16"
+    componentId: "sc-9b9ba25-16"
 })([
     "display:block;box-sizing:border-box;outline:none;border:none;-webkit-appearance:none;background-color:transparent;color:var(",
     ");caret-color:var(",
@@ -345,7 +346,7 @@ var StyledTextArea = _styledcomponents.default.textarea.withConfig({
 }, _TextAreatokens.tokens.inputFontFamily, _TextAreatokens.tokens.inputFontSize, _TextAreatokens.tokens.inputFontStyle, _TextAreatokens.tokens.inputFontWeight, _TextAreatokens.tokens.inputLetterSpacing, _TextAreatokens.tokens.inputLineHeight, _TextAreatokens.tokens.inputColorFocus, _TextAreatokens.tokens.scrollbarWidth, _TextAreatokens.tokens.scrollbarThumbBackgroundColor, _TextAreatokens.tokens.scrollbarBorderWidth, _TextAreatokens.tokens.scrollbarTrackBackgroundColor, _TextAreatokens.tokens.scrollbarBorderWidth);
 var StyledHiddenTextArea = _styledcomponents.default.textarea.withConfig({
     displayName: "TextArea.styles__StyledHiddenTextArea",
-    componentId: "sc-621ad7e5-17"
+    componentId: "sc-9b9ba25-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:",
@@ -363,7 +364,7 @@ var StyledHiddenTextArea = _styledcomponents.default.textarea.withConfig({
 }, _TextAreatokens.tokens.inputPaddingLeft, _TextAreatokens.tokens.inputFontFamily, _TextAreatokens.tokens.inputFontSize, _TextAreatokens.tokens.inputFontStyle, _TextAreatokens.tokens.inputFontWeight, _TextAreatokens.tokens.inputLetterSpacing, _TextAreatokens.tokens.inputLineHeight);
 var StyledHelpers = _styledcomponents.default.div.withConfig({
     displayName: "TextArea.styles__StyledHelpers",
-    componentId: "sc-621ad7e5-18"
+    componentId: "sc-9b9ba25-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(",
@@ -376,14 +377,14 @@ var StyledHelpers = _styledcomponents.default.div.withConfig({
 ], _TextAreatokens.tokens.helpersBackgroundColor, _TextAreatokens.tokens.helpersPaddingTop, _TextAreatokens.tokens.helpersPaddingRight, _TextAreatokens.tokens.helpersPaddingBottom, _TextAreatokens.tokens.helpersPaddingLeft, _TextAreatokens.tokens.borderRadius, _TextAreatokens.tokens.borderRadius);
 var StyledOutsideHelpersWrapper = _styledcomponents.default.div.withConfig({
     displayName: "TextArea.styles__StyledOutsideHelpersWrapper",
-    componentId: "sc-621ad7e5-19"
+    componentId: "sc-9b9ba25-19"
 })([
     "box-sizing:border-box;display:flex;justify-content:space-between;padding-top:var(",
     ");"
 ], _TextAreatokens.tokens.clearHelpersPaddingTop);
 var StyledLeftHelper = _styledcomponents.default.span.withConfig({
     displayName: "TextArea.styles__StyledLeftHelper",
-    componentId: "sc-621ad7e5-20"
+    componentId: "sc-9b9ba25-20"
 })([
     "",
     ";display:block;font-family:var(",
@@ -395,18 +396,19 @@ var StyledLeftHelper = _styledcomponents.default.span.withConfig({
     ");color:var(",
     ");&.",
     "{color:var(",
-    ");}"
-], (0, _mixins.applyEllipsis)(), _TextAreatokens.tokens.helpersFontFamily, _TextAreatokens.tokens.helpersFontSize, _TextAreatokens.tokens.helpersFontStyle, _TextAreatokens.tokens.helpersFontWeight, _TextAreatokens.tokens.helpersLetterSpacing, _TextAreatokens.tokens.helpersLineHeight, _TextAreatokens.tokens.leftHelperColor, _TextAreatokens.classes.leftHelperFocus, _TextAreatokens.tokens.leftHelperColorFocus);
+    ",var(",
+    "));}"
+], (0, _mixins.applyEllipsis)(), _TextAreatokens.tokens.helpersFontFamily, _TextAreatokens.tokens.helpersFontSize, _TextAreatokens.tokens.helpersFontStyle, _TextAreatokens.tokens.helpersFontWeight, _TextAreatokens.tokens.helpersLetterSpacing, _TextAreatokens.tokens.helpersLineHeight, _TextAreatokens.tokens.leftHelperColor, _TextAreatokens.classes.leftHelperFocus, _TextAreatokens.tokens.leftHelperColorFocus, _TextAreatokens.tokens.leftHelperColor);
 var StyledRightHelper = (0, _styledcomponents.default)(StyledLeftHelper).withConfig({
     displayName: "TextArea.styles__StyledRightHelper",
-    componentId: "sc-621ad7e5-21"
+    componentId: "sc-9b9ba25-21"
 })([
     "color:var(",
     ");margin-left:auto;"
 ], _TextAreatokens.tokens.rightHelperColor);
 var StyledPlaceholder = _styledcomponents.default.label.withConfig({
     displayName: "TextArea.styles__StyledPlaceholder",
-    componentId: "sc-621ad7e5-22"
+    componentId: "sc-9b9ba25-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(",
@@ -425,7 +427,7 @@ var StyledPlaceholder = _styledcomponents.default.label.withConfig({
 }, _TextAreatokens.tokens.inputFontFamily, _TextAreatokens.tokens.inputFontSize, _TextAreatokens.tokens.inputFontStyle, _TextAreatokens.tokens.inputFontWeight, _TextAreatokens.tokens.inputLetterSpacing, _TextAreatokens.tokens.inputLineHeight);
 var StyledIndicator = _styledcomponents.default.div.withConfig({
     displayName: "TextArea.styles__StyledIndicator",
-    componentId: "sc-621ad7e5-23"
+    componentId: "sc-9b9ba25-23"
 })([
     "position:absolute;border-radius:50%;background-color:var(",
     ");&.",