@salutejs/plasma-new-hope 0.345.0-canary.2416.20569157442.0 → 0.345.0-canary.2423.20958341938.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/cjs/examples/components/_beta/Tooltip/Tooltip.config.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "config", {
+    enumerable: true,
+    get: function() {
+        return config;
+    }
+});
+var _styledcomponents = require("styled-components");
+var _Tooltip = require("../../../../components/_beta/Tooltip");
+var config = {
+    defaults: {
+        view: 'default',
+        size: 'm'
+    },
+    variations: {
+        view: {
+            default: (0, _styledcomponents.css)([
+                "",
+                ":var(--surface-solid-card);",
+                ":var(--shadow-down-soft-m);",
+                ":var(--text-primary);"
+            ], _Tooltip._beta_tooltipTokens.backgroundColor, _Tooltip._beta_tooltipTokens.boxShadow, _Tooltip._beta_tooltipTokens.color),
+            accent: (0, _styledcomponents.css)([
+                "",
+                ":var(--surface-accent);",
+                ":var(--shadow-down-soft-m);",
+                ":var(--on-dark-text-primary);"
+            ], _Tooltip._beta_tooltipTokens.backgroundColor, _Tooltip._beta_tooltipTokens.boxShadow, _Tooltip._beta_tooltipTokens.color)
+        },
+        size: {
+            m: (0, _styledcomponents.css)([
+                "",
+                ":0.625rem;",
+                ":0.625rem 0.875rem;",
+                ":0.375rem;",
+                ":var(--plasma-typo-body-s-font-family);",
+                ":var(--plasma-typo-body-s-font-size);",
+                ":var(--plasma-typo-body-s-font-style);",
+                ":var(--plasma-typo-body-s-font-weight);",
+                ":var(--plasma-typo-body-s-letter-spacing);",
+                ":var(--plasma-typo-body-s-line-height);"
+            ], _Tooltip._beta_tooltipTokens.borderRadius, _Tooltip._beta_tooltipTokens.padding, _Tooltip._beta_tooltipTokens.gap, _Tooltip._beta_tooltipTokens.fontFamily, _Tooltip._beta_tooltipTokens.fontSize, _Tooltip._beta_tooltipTokens.fontStyle, _Tooltip._beta_tooltipTokens.fontWeight, _Tooltip._beta_tooltipTokens.letterSpacing, _Tooltip._beta_tooltipTokens.lineHeight),
+            s: (0, _styledcomponents.css)([
+                "",
+                ":0.5rem;",
+                ":0.5rem 0.75rem;",
+                ":0.25rem;",
+                ":var(--plasma-typo-body-xs-font-family);",
+                ":var(--plasma-typo-body-xs-font-size);",
+                ":var(--plasma-typo-body-xs-font-style);",
+                ":var(--plasma-typo-body-xs-font-weight);",
+                ":var(--plasma-typo-body-xs-letter-spacing);",
+                ":var(--plasma-typo-body-xs-line-height);"
+            ], _Tooltip._beta_tooltipTokens.borderRadius, _Tooltip._beta_tooltipTokens.padding, _Tooltip._beta_tooltipTokens.gap, _Tooltip._beta_tooltipTokens.fontFamily, _Tooltip._beta_tooltipTokens.fontSize, _Tooltip._beta_tooltipTokens.fontStyle, _Tooltip._beta_tooltipTokens.fontWeight, _Tooltip._beta_tooltipTokens.letterSpacing, _Tooltip._beta_tooltipTokens.lineHeight)
+        }
+    }
+};

package/dist/styled-components/cjs/examples/components/_beta/Tooltip/Tooltip.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Tooltip", {
+    enumerable: true,
+    get: function() {
+        return Tooltip;
+    }
+});
+var _Tooltip = require("../../../../components/_beta/Tooltip");
+var _engines = require("../../../../engines");
+var _Tooltipconfig = require("./Tooltip.config");
+var mergedConfig = (0, _engines.mergeConfig)(_Tooltip._beta_tooltipConfig, _Tooltipconfig.config);
+var Tooltip = (0, _engines.component)(mergedConfig);

package/dist/styled-components/cjs/index.js

@@ -91,6 +91,7 @@ _export_star(require("./components/TimePicker"), exports);
 _export_star(require("./components/DateTimePicker"), exports);
 _export_star(require("./components/Loader"), exports);
 _export_star(require("./components/_beta/Popover"), exports);
+_export_star(require("./components/_beta/Tooltip"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

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;
@@ -440,10 +447,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-9b9ba25-0"
 })([
     ""
 ]);
 export var OuterLabelWrapper = styled.div.withConfig({
     displayName: "TextArea.styles__OuterLabelWrapper",
-    componentId: "sc-621ad7e5-1"
+    componentId: "sc-9b9ba25-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-9b9ba25-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-9b9ba25-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-9b9ba25-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-9b9ba25-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-9b9ba25-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-9b9ba25-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-9b9ba25-8"
 })([
     ""
 ]);
 export var StyledTextAreaWrapper = styled.div.withConfig({
     displayName: "TextArea.styles__StyledTextAreaWrapper",
-    componentId: "sc-621ad7e5-9"
+    componentId: "sc-9b9ba25-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-9b9ba25-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-9b9ba25-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-9b9ba25-12"
 })([
     "display:flex;flex-direction:column;"
 ]);
 export var DividerWrapper = styled.div.withConfig({
     displayName: "TextArea.styles__DividerWrapper",
-    componentId: "sc-621ad7e5-13"
+    componentId: "sc-9b9ba25-13"
 })([
     "background:var(",
     ");"
 ], tokens.backgroundColor);
 export var Divider = styled.div.withConfig({
     displayName: "TextArea.styles__Divider",
-    componentId: "sc-621ad7e5-14"
+    componentId: "sc-9b9ba25-14"
 })([
     "height:0.0625rem;background:var(",
     ");"
 ], tokens.dividerColor);
 export var StyledContainer = styled.div.withConfig({
     displayName: "TextArea.styles__StyledContainer",
-    componentId: "sc-621ad7e5-15"
+    componentId: "sc-9b9ba25-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-9b9ba25-16"
 })([
     "display:block;box-sizing:border-box;outline:none;border:none;-webkit-appearance:none;background-color:transparent;color:var(",
     ");caret-color:var(",
@@ -256,7 +257,7 @@ 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-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:",
@@ -274,7 +275,7 @@ export var StyledHiddenTextArea = styled.textarea.withConfig({
 }, 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-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(",
@@ -287,14 +288,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-9b9ba25-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-9b9ba25-20"
 })([
     "",
     ";display:block;font-family:var(",
@@ -306,18 +307,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-9b9ba25-21"
 })([
     "color:var(",
     ");margin-left:auto;"
 ], tokens.rightHelperColor);
 export var StyledPlaceholder = styled.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(",
@@ -336,7 +338,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-9b9ba25-23"
 })([
     "position:absolute;border-radius:50%;background-color:var(",
     ");&.",