@salutejs/plasma-new-hope 0.330.0-canary.2071.16161234000.0 → 0.330.0-canary.2072.16140940131.0

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

@@ -32,7 +32,6 @@ export var tokens = {
     itemIconSizeTight: '--plasma-combobox-item-icon-size-tight',
     itemIconMargin: '--plasma-combobox-item-icon-margin',
     itemBackgroundHover: '--plasma-combobox-item-background-hover',
-    itemIconColor: '--plasma-combobox-item-icon-color',
     cellPadding: '--plasma-combobox-cell-padding',
     cellPaddingLeftContent: '--plasma-combobox-cell-padding-left-content',
     cellPaddingContent: '--plasma-combobox-cell-padding-content',

package/styled-components/es/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.styles.js

@@ -12,7 +12,7 @@ var mergedCellConfig = mergeConfig(cellConfig);
 var Cell = component(mergedCellConfig);
 export var StyledWrapper = styled.div.withConfig({
     displayName: "Item.styles__StyledWrapper",
-    componentId: "sc-15bf1974-0"
+    componentId: "sc-85d7faec-0"
 })([
     "",
     ":var(",
@@ -46,13 +46,13 @@ export var StyledWrapper = styled.div.withConfig({
 ], cellTokens.cellTitleColor, constants.cellTitleColor, cellTokens.cellBackgroundColor, constants.cellBackgroundColor, cellTokens.cellPadding, tokens.cellPadding, cellTokens.cellPaddingLeftContent, tokens.cellPaddingLeftContent, cellTokens.cellPaddingContent, tokens.cellPaddingContent, cellTokens.cellPaddingRightContent, tokens.cellPaddingRightContent, cellTokens.cellTextboxGap, tokens.cellTextboxGap, cellTokens.cellGap, tokens.cellGap, cellTokens.cellTitleFontFamily, tokens.cellTitleFontFamily, cellTokens.cellTitleFontSize, tokens.cellTitleFontSize, cellTokens.cellTitleFontStyle, tokens.cellTitleFontStyle, cellTokens.cellTitleFontWeight, tokens.cellTitleFontWeight, cellTokens.cellTitleLetterSpacing, tokens.cellTitleLetterSpacing, cellTokens.cellTitleLineHeight, tokens.cellTitleLineHeight);
 export var StyledCell = styled(Cell).withConfig({
     displayName: "Item.styles__StyledCell",
-    componentId: "sc-15bf1974-1"
+    componentId: "sc-85d7faec-1"
 })([
     ""
 ]);
 export var StyledCheckbox = styled(Checkbox).withConfig({
     displayName: "Item.styles__StyledCheckbox",
-    componentId: "sc-15bf1974-2"
+    componentId: "sc-85d7faec-2"
 })([
     "",
     ":var(",
@@ -74,14 +74,14 @@ var mergedIndicatorConfig = mergeConfig(indicatorConfig);
 var Indicator = component(mergedIndicatorConfig);
 export var StyledIndicator = styled(Indicator).withConfig({
     displayName: "Item.styles__StyledIndicator",
-    componentId: "sc-15bf1974-3"
+    componentId: "sc-85d7faec-3"
 })([
     "",
     ":var(",
     ");",
     ":var(",
     ");"
-], indicatorTokens.size, tokens.indicatorSize, indicatorTokens.color, tokens.itemIconColor);
+], indicatorTokens.size, tokens.indicatorSize, indicatorTokens.color, tokens.checkboxFillColor);
 // TODO: Удалить после поддержки JS переменных в конфиге компонент
 export var sizeMap = {
     xs: '1rem',
@@ -89,7 +89,7 @@ export var sizeMap = {
 };
 export var StyledArrow = styled(IconDisclosureRightCentered).withConfig({
     displayName: "Item.styles__StyledArrow",
-    componentId: "sc-15bf1974-4"
+    componentId: "sc-85d7faec-4"
 })([
     "width:",
     ";height:",
@@ -103,7 +103,7 @@ export var StyledArrow = styled(IconDisclosureRightCentered).withConfig({
 });
 export var StyledIconDone = styled(IconDone).withConfig({
     displayName: "Item.styles__StyledIconDone",
-    componentId: "sc-15bf1974-5"
+    componentId: "sc-85d7faec-5"
 })([
     "width:",
     ";height:",
@@ -117,19 +117,19 @@ export var StyledIconDone = styled(IconDone).withConfig({
 });
 export var StyledContentLeft = styled.div.withConfig({
     displayName: "Item.styles__StyledContentLeft",
-    componentId: "sc-15bf1974-6"
+    componentId: "sc-85d7faec-6"
 })([
     "display:inline-flex;"
 ]);
 export var StyledContentRight = styled.div.withConfig({
     displayName: "Item.styles__StyledContentRight",
-    componentId: "sc-15bf1974-7"
+    componentId: "sc-85d7faec-7"
 })([
     "margin-left:auto;display:inline-flex;"
 ]);
 export var DisclosureIconWrapper = styled.div.withConfig({
     displayName: "Item.styles__DisclosureIconWrapper",
-    componentId: "sc-15bf1974-8"
+    componentId: "sc-85d7faec-8"
 })([
     "line-height:0;margin:var(",
     ");color:var(",
@@ -138,7 +138,7 @@ export var DisclosureIconWrapper = styled.div.withConfig({
 ], tokens.disclosureIconMargin, tokens.disclosureIconColor, tokens.disclosureIconColorHover);
 export var IconWrapper = styled.div.withConfig({
     displayName: "Item.styles__IconWrapper",
-    componentId: "sc-15bf1974-9"
+    componentId: "sc-85d7faec-9"
 })([
     "display:flex;align-items:center;justify-content:center;flex:none;width:",
     ";height:",
@@ -151,17 +151,17 @@ export var IconWrapper = styled.div.withConfig({
 }, function(param) {
     var variant = param.variant;
     return "var(".concat(variant === 'tight' ? tokens.itemIconSizeTight : tokens.itemIconSize, ")");
-}, tokens.itemIconMargin, tokens.itemIconColor);
+}, tokens.itemIconMargin, tokens.checkboxFillColor);
 export var StyledText = styled.div.withConfig({
     displayName: "Item.styles__StyledText",
-    componentId: "sc-15bf1974-10"
+    componentId: "sc-85d7faec-10"
 })([
     "",
     ";flex:1;"
 ], applyEllipsis());
 export var Wrapper = styled.li.withConfig({
     displayName: "Item.styles__Wrapper",
-    componentId: "sc-15bf1974-11"
+    componentId: "sc-85d7faec-11"
 })([
     "display:flex;align-items:center;min-height:var(",
     ");margin:0;box-sizing:content-box;padding:",
@@ -195,7 +195,7 @@ export var Wrapper = styled.li.withConfig({
 }));
 export var StyledCheckboxWrapper = styled.span.withConfig({
     displayName: "Item.styles__StyledCheckboxWrapper",
-    componentId: "sc-15bf1974-12"
+    componentId: "sc-85d7faec-12"
 })([
     ""
 ]);

package/styled-components/es/components/Select/Select.tokens.js

@@ -32,7 +32,6 @@ export var tokens = {
     itemBackgroundHover: '--plasma-select-item-background-hover',
     itemDisabledOpacity: '--plasma-select-item-disabled-opacity',
     itemDisabledColor: '--plasma-select-item-disabled-color',
-    itemIconColor: '--plasma-select-item-icon-color',
     cellPadding: '--plasma-select-cell-padding',
     cellPaddingLeftContent: '--plasma-select-cell-padding-left-content',
     cellPaddingContent: '--plasma-select-cell-padding-content',

package/styled-components/es/components/Select/ui/Inner/ui/Item/Item.styles.js

@@ -14,7 +14,7 @@ var mergedIndicatorConfig = mergeConfig(indicatorConfig);
 var Indicator = component(mergedIndicatorConfig);
 export var StyledWrapper = styled.div.withConfig({
     displayName: "Item.styles__StyledWrapper",
-    componentId: "sc-fcc0b37e-0"
+    componentId: "sc-8a3f92ff-0"
 })([
     "",
     ":",
@@ -51,13 +51,13 @@ export var StyledWrapper = styled.div.withConfig({
 }, cellTokens.cellBackgroundColor, constants.cellBackgroundColor, cellTokens.cellPadding, tokens.cellPadding, cellTokens.cellPaddingLeftContent, tokens.cellPaddingLeftContent, cellTokens.cellPaddingContent, tokens.cellPaddingContent, cellTokens.cellPaddingRightContent, tokens.cellPaddingRightContent, cellTokens.cellTextboxGap, tokens.cellTextboxGap, cellTokens.cellGap, tokens.cellGap, cellTokens.cellTitleFontFamily, tokens.cellTitleFontFamily, cellTokens.cellTitleFontSize, tokens.cellTitleFontSize, cellTokens.cellTitleFontStyle, tokens.cellTitleFontStyle, cellTokens.cellTitleFontWeight, tokens.cellTitleFontWeight, cellTokens.cellTitleLetterSpacing, tokens.cellTitleLetterSpacing, cellTokens.cellTitleLineHeight, tokens.cellTitleLineHeight);
 export var StyledCell = styled(Cell).withConfig({
     displayName: "Item.styles__StyledCell",
-    componentId: "sc-fcc0b37e-1"
+    componentId: "sc-8a3f92ff-1"
 })([
     ""
 ]);
 export var StyledCheckbox = styled(Checkbox).withConfig({
     displayName: "Item.styles__StyledCheckbox",
-    componentId: "sc-fcc0b37e-2"
+    componentId: "sc-8a3f92ff-2"
 })([
     "",
     ":var(",
@@ -77,14 +77,14 @@ export var StyledCheckbox = styled(Checkbox).withConfig({
 ], checkboxTokens.triggerSize, tokens.checkboxTriggerSize, checkboxTokens.triggerBorderRadius, tokens.checkboxTriggerBorderRadius, checkboxTokens.fillColor, tokens.checkboxFillColor, checkboxTokens.iconColor, tokens.checkboxIconColor, checkboxTokens.triggerBorderWidth, tokens.checkboxTriggerBorderWidth, checkboxTokens.triggerBorderColor, tokens.checkboxTriggerBorderColor, checkboxTokens.triggerBorderCheckedColor, tokens.checkboxTriggerBorderCheckedColor);
 export var StyledIndicator = styled(Indicator).withConfig({
     displayName: "Item.styles__StyledIndicator",
-    componentId: "sc-fcc0b37e-3"
+    componentId: "sc-8a3f92ff-3"
 })([
     "",
     ":var(",
     ");",
     ":var(",
     ");"
-], indicatorTokens.size, tokens.indicatorSize, indicatorTokens.color, tokens.itemIconColor);
+], indicatorTokens.size, tokens.indicatorSize, indicatorTokens.color, tokens.checkboxFillColor);
 // TODO: Удалить после поддержки JS переменных в конфиге компонент
 export var sizeMap = {
     xs: '1rem',
@@ -92,7 +92,7 @@ export var sizeMap = {
 };
 export var StyledArrow = styled(IconDisclosureRightCentered).withConfig({
     displayName: "Item.styles__StyledArrow",
-    componentId: "sc-fcc0b37e-4"
+    componentId: "sc-8a3f92ff-4"
 })([
     "width:",
     ";height:",
@@ -106,7 +106,7 @@ export var StyledArrow = styled(IconDisclosureRightCentered).withConfig({
 });
 export var StyledIconDone = styled(IconDone).withConfig({
     displayName: "Item.styles__StyledIconDone",
-    componentId: "sc-fcc0b37e-5"
+    componentId: "sc-8a3f92ff-5"
 })([
     "width:",
     ";height:",
@@ -120,7 +120,7 @@ export var StyledIconDone = styled(IconDone).withConfig({
 });
 export var DisclosureIconWrapper = styled.div.withConfig({
     displayName: "Item.styles__DisclosureIconWrapper",
-    componentId: "sc-fcc0b37e-6"
+    componentId: "sc-8a3f92ff-6"
 })([
     "margin:var(",
     ");line-height:0;color:var(",
@@ -129,7 +129,7 @@ export var DisclosureIconWrapper = styled.div.withConfig({
 ], tokens.disclosureIconMargin, tokens.disclosureIconColor, tokens.disclosureIconColorHover);
 export var IconWrapper = styled.div.withConfig({
     displayName: "Item.styles__IconWrapper",
-    componentId: "sc-fcc0b37e-7"
+    componentId: "sc-8a3f92ff-7"
 })([
     "display:flex;align-items:center;justify-content:center;flex:none;width:",
     ";height:",
@@ -142,17 +142,17 @@ export var IconWrapper = styled.div.withConfig({
 }, function(param) {
     var variant = param.variant;
     return "var(".concat(variant === 'tight' ? tokens.itemIconSizeTight : tokens.itemIconSize, ")");
-}, tokens.itemIconMargin, tokens.itemIconColor);
+}, tokens.itemIconMargin, tokens.checkboxFillColor);
 export var StyledText = styled.div.withConfig({
     displayName: "Item.styles__StyledText",
-    componentId: "sc-fcc0b37e-8"
+    componentId: "sc-8a3f92ff-8"
 })([
     "",
     ";flex:1;"
 ], applyEllipsis());
 export var Wrapper = styled.li.withConfig({
     displayName: "Item.styles__Wrapper",
-    componentId: "sc-fcc0b37e-9"
+    componentId: "sc-8a3f92ff-9"
 })([
     "display:flex;align-items:center;min-height:var(",
     ");margin:0;box-sizing:content-box;padding:",
@@ -187,7 +187,7 @@ export var Wrapper = styled.li.withConfig({
 }));
 export var StyledCheckboxWrapper = styled.span.withConfig({
     displayName: "Item.styles__StyledCheckboxWrapper",
-    componentId: "sc-fcc0b37e-10"
+    componentId: "sc-8a3f92ff-10"
 })([
     ""
 ]);

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

@@ -118,7 +118,7 @@ import { cx, mergeRefs } from "../../utils";
 import { useOutsideClick } from "../../hooks";
 import { applyDynamicLabel } from "./mixins";
 import { useAutoResize, ROOT_FONT_SIZE } from "./hooks";
-import { StyledContent, StyledHelpers, StyledLeftHelper, StyledRightHelper, StyledLabel, StyledPlaceholder, StyledTextArea, StyledTextAreaWrapper, StyledContainer, StyledIndicator, StyledOptionalText, OuterLabelWrapper, StyledIndicatorWrapper, StyledHintWrapper, TitleCaption, StyledOutsideHelpersWrapper, StyledHiddenTextArea } from "./TextArea.styles";
+import { StyledContent, StyledHelpers, StyledLeftHelper, StyledRightHelper, StyledLabel, StyledPlaceholder, StyledTextArea, StyledTextAreaWrapper, StyledContainer, StyledIndicator, StyledOptionalText, OuterLabelWrapper, StyledIndicatorWrapper, StyledHintWrapper, TitleCaption, StyledOutsideHelpersWrapper, StyledHiddenTextArea, StyledContentWrapper, StyledHeaderSlot, DividerWrapper, Divider } from "./TextArea.styles";
 import { classes } from "./TextArea.tokens";
 import { base as viewCSS } from "./variations/_view/base";
 import { base as sizeCSS } from "./variations/_size/base";
@@ -128,7 +128,7 @@ import { base as disabledCSS } from "./variations/_disabled/base";
 import { base as hintViewCSS } from "./variations/_hint-view/base";
 import { base as hintSizeCSS } from "./variations/_hint-size/base";
 import { HintComponent } from "./ui/Hint/Hint";
-var innerPlaceholderUp = classes.innerPlaceholderUp, focusedOuterPlaceholderColor = classes.focusedOuterPlaceholderColor, hidePlaceHolder = classes.hidePlaceHolder, styledContainer = classes.styledContainer, styledTextArea = classes.styledTextArea, styledTextAreaWrapper = classes.styledTextAreaWrapper, styledPlaceholder = classes.styledPlaceholder, styledHelpers = classes.styledHelpers;
+var innerPlaceholderUp = classes.innerPlaceholderUp, focusedOuterPlaceholderColor = classes.focusedOuterPlaceholderColor, hidePlaceHolder = classes.hidePlaceHolder, styledContainer = classes.styledContainer, styledTextArea = classes.styledTextArea, styledTextAreaWrapper = classes.styledTextAreaWrapper, styledPlaceholder = classes.styledPlaceholder, styledHelpers = classes.styledHelpers, hasHeaderSlot = classes.hasHeaderSlot, styledContentWrapper = classes.styledContentWrapper;
 var optionalText = 'optional';
 var base = css([
     "",
@@ -162,10 +162,13 @@ 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, 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 ? true : _props_hasRequiredIndicator, _props_optional = props.optional, optional = _props_optional === void 0 ? false : _props_optional, 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, onChange = props.onChange, rest = _object_without_properties(props, [
+        var helperText = props.helperText, status = props.status, resize = props.resize, headerSlot = props.headerSlot, _props_enableHeaderDivider = props.enableHeaderDivider, enableHeaderDivider = _props_enableHeaderDivider === void 0 ? true : _props_enableHeaderDivider, _props_applyHeaderDefaultPaddings = props.applyHeaderDefaultPaddings, applyHeaderDefaultPaddings = _props_applyHeaderDefaultPaddings === void 0 ? true : _props_applyHeaderDefaultPaddings, 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 ? true : _props_hasRequiredIndicator, _props_optional = props.optional, optional = _props_optional === void 0 ? false : _props_optional, 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, onChange = props.onChange, rest = _object_without_properties(props, [
             "helperText",
             "status",
             "resize",
+            "headerSlot",
+            "enableHeaderDivider",
+            "applyHeaderDefaultPaddings",
             "rightHelper",
             "leftHelper",
             "leftHelperPlacement",
@@ -229,6 +232,7 @@ 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 overriddenView = status !== undefined ? fallbackStatusMap[status] : view;
         var textareaHelperId = id ? "".concat(id, "-helper") : undefined;
         var applyCustomWidth = resize !== 'horizontal' && resize !== 'both' && !cols;
@@ -365,10 +369,22 @@ export var textAreaRoot = function(Root) {
             handleHintHide: handleHintHide,
             handleHintClick: handleHintClick,
             isInnerLabel: true
-        }))), contentRight && /*#__PURE__*/ React.createElement(StyledContent, null, contentRight), /*#__PURE__*/ React.createElement(StyledTextAreaWrapper, {
-            className: cx(styledTextAreaWrapper),
-            hasHelper: hasHelper
-        }, /*#__PURE__*/ React.createElement(StyledTextArea, _object_spread({
+        }))), /*#__PURE__*/ React.createElement(StyledTextAreaWrapper, {
+            className: cx(styledTextAreaWrapper, hasHeader && hasHeaderSlot),
+            hasHelper: hasHelper,
+            hasHeader: hasHeader
+        }, headerSlot && !clear && /*#__PURE__*/ React.createElement(StyledHeaderSlot, {
+            applyHeaderDefaultPaddings: applyHeaderDefaultPaddings
+        }, headerSlot, enableHeaderDivider && /*#__PURE__*/ React.createElement(DividerWrapper, null, /*#__PURE__*/ React.createElement(Divider, null))), contentRight && !hasHeader && /*#__PURE__*/ React.createElement(StyledContent, null, contentRight), /*#__PURE__*/ React.createElement(StyledContentWrapper, {
+            className: styledContentWrapper,
+            hasHeader: hasHeader
+        }, contentRight && /*#__PURE__*/ React.createElement(StyledContent, {
+            hasHeader: hasHeader
+        }, contentRight), headerSlot && placeholderLabel && /*#__PURE__*/ React.createElement(StyledPlaceholder, {
+            hasContentRight: Boolean(contentRight),
+            className: styledPlaceholder,
+            htmlFor: id
+        }, placeholderLabel, !hasOuterLabel && optionalTextNode)), /*#__PURE__*/ React.createElement(StyledTextArea, _object_spread({
             className: cx(styledTextArea, hasRightContentClass),
             id: id,
             hasContentRight: Boolean(contentRight),
@@ -400,7 +416,7 @@ export var textAreaRoot = function(Root) {
             id: textareaHelperId
         }, isInnerLeftHelperPlacement && (leftHelper || helperText) && /*#__PURE__*/ React.createElement(StyledLeftHelper, null, leftHelper || helperText), rightHelper && /*#__PURE__*/ React.createElement(StyledRightHelper, {
             "data-root": true
-        }, rightHelper)), placeholderLabel && /*#__PURE__*/ React.createElement(StyledPlaceholder, {
+        }, rightHelper)), !hasHeader && placeholderLabel && /*#__PURE__*/ React.createElement(StyledPlaceholder, {
             hasContentRight: Boolean(contentRight),
             className: styledPlaceholder,
             htmlFor: id

package/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-2ff414ff-0"
+    componentId: "sc-4fdf6b3d-0"
 })([
     ""
 ]);
 export var OuterLabelWrapper = styled.div.withConfig({
     displayName: "TextArea.styles__OuterLabelWrapper",
-    componentId: "sc-2ff414ff-1"
+    componentId: "sc-4fdf6b3d-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-2ff414ff-2"
+    componentId: "sc-4fdf6b3d-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-2ff414ff-3"
+    componentId: "sc-4fdf6b3d-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-2ff414ff-4"
+    componentId: "sc-4fdf6b3d-4"
 })([
     "position:relative;display:inline-flex;align-items:center;"
 ]);
 export var StyledOptionalText = styled.span.withConfig({
     displayName: "TextArea.styles__StyledOptionalText",
-    componentId: "sc-2ff414ff-5"
+    componentId: "sc-4fdf6b3d-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-2ff414ff-6"
+    componentId: "sc-4fdf6b3d-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-2ff414ff-7"
+    componentId: "sc-4fdf6b3d-7"
 })([
     "color:var(",
     ");width:var(",
@@ -114,40 +114,88 @@ export var HintTargetWrapper = styled.div.withConfig({
 ], tokens.hintIconColor, tokens.hintTargetSize, tokens.hintTargetSize);
 export var HintIconWrapper = styled.div.withConfig({
     displayName: "TextArea.styles__HintIconWrapper",
-    componentId: "sc-2ff414ff-8"
+    componentId: "sc-4fdf6b3d-8"
 })([
     ""
 ]);
 export var StyledTextAreaWrapper = styled.div.withConfig({
     displayName: "TextArea.styles__StyledTextAreaWrapper",
-    componentId: "sc-2ff414ff-9"
+    componentId: "sc-4fdf6b3d-9"
 })([
-    "background-color:var(",
-    ");padding-top:var(",
-    ");padding-bottom:",
+    "display:flex;flex-direction:column;background-color:var(",
+    ");padding-top:",
+    ";padding-bottom:",
     ";border-radius:",
     ";"
-], tokens.inputBackgroundColor, tokens.inputPaddingTop, function(param) {
+], tokens.inputBackgroundColor, function(param) {
+    var hasHeader = param.hasHeader;
+    return hasHeader ? 'unset' : "var(".concat(tokens.inputPaddingTop, ")");
+}, function(param) {
     var hasHelper = param.hasHelper;
     return hasHelper ? "var(".concat(tokens.inputPaddingBottomWithHelpers, ")") : "var(".concat(tokens.inputPaddingBottom, ")");
 }, function(param) {
     var hasHelper = param.hasHelper;
     return hasHelper ? "var(".concat(tokens.borderRadiusWithHelpers, ")") : "var(".concat(tokens.borderRadius, ")");
 });
+export var StyledContentWrapper = styled.div.withConfig({
+    displayName: "TextArea.styles__StyledContentWrapper",
+    componentId: "sc-4fdf6b3d-10"
+})([
+    "display:",
+    ";position:relative;width:100%;height:0;padding-top:",
+    ";"
+], function(param) {
+    var hasHeader = param.hasHeader;
+    return hasHeader ? 'block' : 'none';
+}, function(param) {
+    var hasHeader = param.hasHeader;
+    return hasHeader ? "var(".concat(tokens.inputPaddingTop, ")") : 'unset';
+});
 export var StyledContent = styled.div.withConfig({
     displayName: "TextArea.styles__StyledContent",
-    componentId: "sc-2ff414ff-10"
+    componentId: "sc-4fdf6b3d-11"
 })([
-    "position:absolute;display:flex;align-items:center;bottom:0;z-index:1;color:var(",
+    "position:absolute;display:flex;align-items:center;z-index:1;color:var(",
     ",var(",
-    "));top:var(",
-    ");right:var(",
+    "));top:",
+    ";right:var(",
     ");height:var(",
     ");"
-], tokens.rightContentColor, tokens.inputColor, tokens.rightContentTop, tokens.rightContentRight, tokens.rightContentHeight);
+], tokens.rightContentColor, tokens.inputColor, function(param) {
+    var hasHeader = param.hasHeader;
+    return hasHeader ? "var(".concat(tokens.inputPaddingTop, ")") : "var(".concat(tokens.rightContentTop, ")");
+}, tokens.rightContentRight, tokens.rightContentHeight);
+export var StyledHeaderSlot = styled.div.withConfig({
+    displayName: "TextArea.styles__StyledHeaderSlot",
+    componentId: "sc-4fdf6b3d-12"
+})([
+    "display:flex;flex-direction:column;margin-right:",
+    ";margin-left:",
+    ";"
+], function(param) {
+    var applyHeaderDefaultPaddings = param.applyHeaderDefaultPaddings;
+    return applyHeaderDefaultPaddings ? 'var(--plasma-textarea-helpers-padding-right)' : 'unset';
+}, function(param) {
+    var applyHeaderDefaultPaddings = param.applyHeaderDefaultPaddings;
+    return applyHeaderDefaultPaddings ? 'var(--plasma-textarea-helpers-padding-left)' : 'unset';
+});
+export var DividerWrapper = styled.div.withConfig({
+    displayName: "TextArea.styles__DividerWrapper",
+    componentId: "sc-4fdf6b3d-13"
+})([
+    "background:var(",
+    ");"
+], tokens.backgroundColor);
+export var Divider = styled.div.withConfig({
+    displayName: "TextArea.styles__Divider",
+    componentId: "sc-4fdf6b3d-14"
+})([
+    "height:0.0625rem;background:var(",
+    ");"
+], tokens.dividerColor);
 export var StyledContainer = styled.div.withConfig({
     displayName: "TextArea.styles__StyledContainer",
-    componentId: "sc-2ff414ff-11"
+    componentId: "sc-4fdf6b3d-15"
 })([
     "display:inline-flex;flex-direction:column;width:",
     ";position:relative;"
@@ -157,7 +205,7 @@ export var StyledContainer = styled.div.withConfig({
 });
 export var StyledTextArea = styled.textarea.withConfig({
     displayName: "TextArea.styles__StyledTextArea",
-    componentId: "sc-2ff414ff-12"
+    componentId: "sc-4fdf6b3d-16"
 })([
     "display:block;box-sizing:border-box;outline:none;border:none;-webkit-appearance:none;background-color:transparent;color:var(",
     ");caret-color:var(",
@@ -220,7 +268,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-2ff414ff-13"
+    componentId: "sc-4fdf6b3d-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:",
@@ -238,7 +286,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-2ff414ff-14"
+    componentId: "sc-4fdf6b3d-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(",
@@ -251,14 +299,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-2ff414ff-15"
+    componentId: "sc-4fdf6b3d-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-2ff414ff-16"
+    componentId: "sc-4fdf6b3d-20"
 })([
     "",
     ";display:block;font-family:var(",
@@ -272,14 +320,14 @@ export var StyledLeftHelper = styled.span.withConfig({
 ], applyEllipsis(), tokens.helpersFontFamily, tokens.helpersFontSize, tokens.helpersFontStyle, tokens.helpersFontWeight, tokens.helpersLetterSpacing, tokens.helpersLineHeight, tokens.leftHelperColor);
 export var StyledRightHelper = styled(StyledLeftHelper).withConfig({
     displayName: "TextArea.styles__StyledRightHelper",
-    componentId: "sc-2ff414ff-17"
+    componentId: "sc-4fdf6b3d-21"
 })([
     "color:var(",
     ");margin-left:auto;"
 ], tokens.rightHelperColor);
 export var StyledPlaceholder = styled.label.withConfig({
     displayName: "TextArea.styles__StyledPlaceholder",
-    componentId: "sc-2ff414ff-18"
+    componentId: "sc-4fdf6b3d-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(",
@@ -298,7 +346,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-2ff414ff-19"
+    componentId: "sc-4fdf6b3d-23"
 })([
     "position:absolute;border-radius:50%;background-color:var(",
     ");&.",

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

@@ -14,7 +14,9 @@ export var classes = {
     hasHint: 'textarea-has-hint',
     hasRightContent: 'textarea-has-right-content',
     hasDivider: 'textarea-has-divider',
-    requiredAlignRight: 'required-align-right'
+    requiredAlignRight: 'required-align-right',
+    hasHeaderSlot: 'textarea-has-header-slot',
+    styledContentWrapper: 'textarea-content-wrapper'
 };
 export var tokens = {
     /** Цвет фона для всего компонента */ backgroundColor: '--plasma-textarea-background-color',

package/styled-components/es/components/TextArea/mixins/applyDynamicLabel.js

@@ -1,3 +1,3 @@
 import { classes, tokens } from "../TextArea.tokens";
-var innerPlaceholderUp = classes.innerPlaceholderUp, hidePlaceHolder = classes.hidePlaceHolder, focusedOuterPlaceholderColor = classes.focusedOuterPlaceholderColor, styledTextArea = classes.styledTextArea, styledTextAreaWrapper = classes.styledTextAreaWrapper, styledPlaceholder = classes.styledPlaceholder;
-export var applyDynamicLabel = "\n    .".concat(innerPlaceholderUp, " {\n        .").concat(styledTextArea, " {\n            height: calc(var(--plasma_private-textarea-input-actual-height) - var(").concat(tokens.labelInnerTop, ") - var(").concat(tokens.labelInnerTopHelper, ", 0px));\n        }\n\n        .").concat(styledTextAreaWrapper, " {\n            padding-top: calc(calc(var(").concat(tokens.labelInnerTop, ") + var(").concat(tokens.labelInnerFontSize, ")) + var(").concat(tokens.labelInnerMarginBottom, "));\n        }\n\n        .").concat(styledPlaceholder, " {\n            font-family: var(").concat(tokens.labelInnerFontFamily, ");\n            font-size: var(").concat(tokens.labelInnerFontSize, ");\n            font-style: var(").concat(tokens.labelInnerFontStyle, ");\n            font-weight: var(").concat(tokens.labelInnerFontWeight, ");\n            letter-spacing: var(").concat(tokens.labelInnerLetterSpacing, ");\n            line-height: var(").concat(tokens.labelInnerLineHeight, ");\n            top: var(").concat(tokens.labelInnerTop, ");\n        }\n    }\n\n    .").concat(hidePlaceHolder, " .").concat(styledPlaceholder, " {\n        display: none;\n    }\n\n    .").concat(focusedOuterPlaceholderColor, " .").concat(styledPlaceholder, " {\n        color: var(").concat(tokens.placeholderColorFocus, ");\n    }\n");
+var innerPlaceholderUp = classes.innerPlaceholderUp, hidePlaceHolder = classes.hidePlaceHolder, focusedOuterPlaceholderColor = classes.focusedOuterPlaceholderColor, styledTextArea = classes.styledTextArea, styledTextAreaWrapper = classes.styledTextAreaWrapper, styledPlaceholder = classes.styledPlaceholder, hasHeaderSlot = classes.hasHeaderSlot, styledContentWrapper = classes.styledContentWrapper;
+export var applyDynamicLabel = "\n    .".concat(innerPlaceholderUp, " {\n        .").concat(styledTextArea, " {\n            height: calc(var(--plasma_private-textarea-input-actual-height) - var(").concat(tokens.labelInnerTop, ") - var(").concat(tokens.labelInnerTopHelper, ", 0px));\n        }\n\n        .").concat(styledTextAreaWrapper, " {\n            padding-top: calc(calc(var(").concat(tokens.labelInnerTop, ") + var(").concat(tokens.labelInnerFontSize, ")) + var(").concat(tokens.labelInnerMarginBottom, "));\n        }\n            \n        .").concat(hasHeaderSlot, " {\n            padding-top: unset;\n\n            .").concat(styledContentWrapper, " {\n                padding-top: calc(calc(var(").concat(tokens.labelInnerTop, ") + var(").concat(tokens.labelInnerFontSize, ")) + var(").concat(tokens.labelInnerMarginBottom, "));\n            }\n        }\n\n        .").concat(styledPlaceholder, " {\n            font-family: var(").concat(tokens.labelInnerFontFamily, ");\n            font-size: var(").concat(tokens.labelInnerFontSize, ");\n            font-style: var(").concat(tokens.labelInnerFontStyle, ");\n            font-weight: var(").concat(tokens.labelInnerFontWeight, ");\n            letter-spacing: var(").concat(tokens.labelInnerLetterSpacing, ");\n            line-height: var(").concat(tokens.labelInnerLineHeight, ");\n            top: var(").concat(tokens.labelInnerTop, ");\n        }\n    }\n\n    .").concat(hidePlaceHolder, " .").concat(styledPlaceholder, " {\n        display: none;\n    }\n\n    .").concat(focusedOuterPlaceholderColor, " .").concat(styledPlaceholder, " {\n        color: var(").concat(tokens.placeholderColorFocus, ");\n    }\n");