@salutejs/plasma-new-hope 0.330.0-canary.1655.16168891603.0 → 0.330.0-canary.1655.16198986399.0

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

@@ -9,6 +9,12 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    get Divider () {
+        return Divider;
+    },
+    get DividerWrapper () {
+        return DividerWrapper;
+    },
     get Hint () {
         return Hint;
     },
@@ -27,6 +33,12 @@ _export(exports, {
     get StyledContent () {
         return StyledContent;
     },
+    get StyledContentWrapper () {
+        return StyledContentWrapper;
+    },
+    get StyledHeaderSlot () {
+        return StyledHeaderSlot;
+    },
     get StyledHelpers () {
         return StyledHelpers;
     },
@@ -84,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-2ff414ff-0"
+    componentId: "sc-5fcd62a1-0"
 })([
     ""
 ]);
 var OuterLabelWrapper = _styledcomponents.default.div.withConfig({
     displayName: "TextArea.styles__OuterLabelWrapper",
-    componentId: "sc-2ff414ff-1"
+    componentId: "sc-5fcd62a1-1"
 })([
     "display:flex;align-items:center;max-width:",
     ";margin-bottom:",
@@ -104,7 +116,7 @@ var OuterLabelWrapper = _styledcomponents.default.div.withConfig({
 });
 var StyledLabel = _styledcomponents.default.div.withConfig({
     displayName: "TextArea.styles__StyledLabel",
-    componentId: "sc-2ff414ff-2"
+    componentId: "sc-5fcd62a1-2"
 })([
     "position:relative;display:inline-flex;color:var(",
     ",var(",
@@ -124,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-2ff414ff-3"
+    componentId: "sc-5fcd62a1-3"
 })([
     "display:inline-block;margin-left:auto;font-family:var(",
     ");font-size:var(",
@@ -136,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-2ff414ff-4"
+    componentId: "sc-5fcd62a1-4"
 })([
     "position:relative;display:inline-flex;align-items:center;"
 ]);
 var StyledOptionalText = _styledcomponents.default.span.withConfig({
     displayName: "TextArea.styles__StyledOptionalText",
-    componentId: "sc-2ff414ff-5"
+    componentId: "sc-5fcd62a1-5"
 })([
     "color:var(",
     ");font-family:",
@@ -173,7 +185,7 @@ var StyledOptionalText = _styledcomponents.default.span.withConfig({
 });
 var StyledHintWrapper = _styledcomponents.default.div.withConfig({
     displayName: "TextArea.styles__StyledHintWrapper",
-    componentId: "sc-2ff414ff-6"
+    componentId: "sc-5fcd62a1-6"
 })([
     "display:inline-flex;line-height:0;margin:var(",
     ");&.",
@@ -182,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-2ff414ff-7"
+    componentId: "sc-5fcd62a1-7"
 })([
     "color:var(",
     ");width:var(",
@@ -191,40 +203,76 @@ 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-2ff414ff-8"
+    componentId: "sc-5fcd62a1-8"
 })([
     ""
 ]);
 var StyledTextAreaWrapper = _styledcomponents.default.div.withConfig({
     displayName: "TextArea.styles__StyledTextAreaWrapper",
-    componentId: "sc-2ff414ff-9"
+    componentId: "sc-5fcd62a1-9"
 })([
-    "background-color:var(",
-    ");padding-top:var(",
-    ");padding-bottom:",
+    "display:flex;flex-direction:column;background-color:var(",
+    ");padding-top:",
+    ";padding-bottom:",
     ";border-radius:",
     ";"
-], _TextAreatokens.tokens.inputBackgroundColor, _TextAreatokens.tokens.inputPaddingTop, function(param) {
+], _TextAreatokens.tokens.inputBackgroundColor, function(param) {
+    var hasHeader = param.hasHeader;
+    return hasHeader ? 'unset' : "var(".concat(_TextAreatokens.tokens.inputPaddingTop, ")");
+}, function(param) {
     var hasHelper = param.hasHelper;
     return hasHelper ? "var(".concat(_TextAreatokens.tokens.inputPaddingBottomWithHelpers, ")") : "var(".concat(_TextAreatokens.tokens.inputPaddingBottom, ")");
 }, function(param) {
     var hasHelper = param.hasHelper;
     return hasHelper ? "var(".concat(_TextAreatokens.tokens.borderRadiusWithHelpers, ")") : "var(".concat(_TextAreatokens.tokens.borderRadius, ")");
 });
+var StyledContentWrapper = _styledcomponents.default.div.withConfig({
+    displayName: "TextArea.styles__StyledContentWrapper",
+    componentId: "sc-5fcd62a1-10"
+})([
+    "position:relative;width:100%;height:0;padding-top:",
+    ";"
+], function(param) {
+    var hasHeader = param.hasHeader;
+    return hasHeader ? "var(".concat(_TextAreatokens.tokens.inputPaddingTop, ")") : 'unset';
+});
 var StyledContent = _styledcomponents.default.div.withConfig({
     displayName: "TextArea.styles__StyledContent",
-    componentId: "sc-2ff414ff-10"
+    componentId: "sc-5fcd62a1-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(",
     ");"
-], _TextAreatokens.tokens.rightContentColor, _TextAreatokens.tokens.inputColor, _TextAreatokens.tokens.rightContentTop, _TextAreatokens.tokens.rightContentRight, _TextAreatokens.tokens.rightContentHeight);
+], _TextAreatokens.tokens.rightContentColor, _TextAreatokens.tokens.inputColor, function(param) {
+    var hasHeader = param.hasHeader;
+    return hasHeader ? "var(".concat(_TextAreatokens.tokens.inputPaddingTop, ")") : "var(".concat(_TextAreatokens.tokens.rightContentTop, ")");
+}, _TextAreatokens.tokens.rightContentRight, _TextAreatokens.tokens.rightContentHeight);
+var StyledHeaderSlot = _styledcomponents.default.div.withConfig({
+    displayName: "TextArea.styles__StyledHeaderSlot",
+    componentId: "sc-5fcd62a1-12"
+})([
+    "display:flex;flex-direction:column;"
+]);
+var DividerWrapper = _styledcomponents.default.div.withConfig({
+    displayName: "TextArea.styles__DividerWrapper",
+    componentId: "sc-5fcd62a1-13"
+})([
+    "background:var(",
+    ");"
+], _TextAreatokens.tokens.backgroundColor);
+var Divider = _styledcomponents.default.div.withConfig({
+    displayName: "TextArea.styles__Divider",
+    componentId: "sc-5fcd62a1-14"
+})([
+    "height:0.0625rem;background:var(",
+    ");"
+], _TextAreatokens.tokens.dividerColor);
 var StyledContainer = _styledcomponents.default.div.withConfig({
     displayName: "TextArea.styles__StyledContainer",
-    componentId: "sc-2ff414ff-11"
+    componentId: "sc-5fcd62a1-15"
 })([
     "display:inline-flex;flex-direction:column;width:",
     ";position:relative;"
@@ -234,7 +282,7 @@ var StyledContainer = _styledcomponents.default.div.withConfig({
 });
 var StyledTextArea = _styledcomponents.default.textarea.withConfig({
     displayName: "TextArea.styles__StyledTextArea",
-    componentId: "sc-2ff414ff-12"
+    componentId: "sc-5fcd62a1-16"
 })([
     "display:block;box-sizing:border-box;outline:none;border:none;-webkit-appearance:none;background-color:transparent;color:var(",
     ");caret-color:var(",
@@ -297,7 +345,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-2ff414ff-13"
+    componentId: "sc-5fcd62a1-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:",
@@ -315,7 +363,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-2ff414ff-14"
+    componentId: "sc-5fcd62a1-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(",
@@ -328,14 +376,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-2ff414ff-15"
+    componentId: "sc-5fcd62a1-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-2ff414ff-16"
+    componentId: "sc-5fcd62a1-20"
 })([
     "",
     ";display:block;font-family:var(",
@@ -349,14 +397,14 @@ var StyledLeftHelper = _styledcomponents.default.span.withConfig({
 ], (0, _mixins.applyEllipsis)(), _TextAreatokens.tokens.helpersFontFamily, _TextAreatokens.tokens.helpersFontSize, _TextAreatokens.tokens.helpersFontStyle, _TextAreatokens.tokens.helpersFontWeight, _TextAreatokens.tokens.helpersLetterSpacing, _TextAreatokens.tokens.helpersLineHeight, _TextAreatokens.tokens.leftHelperColor);
 var StyledRightHelper = (0, _styledcomponents.default)(StyledLeftHelper).withConfig({
     displayName: "TextArea.styles__StyledRightHelper",
-    componentId: "sc-2ff414ff-17"
+    componentId: "sc-5fcd62a1-21"
 })([
     "color:var(",
     ");margin-left:auto;"
 ], _TextAreatokens.tokens.rightHelperColor);
 var StyledPlaceholder = _styledcomponents.default.label.withConfig({
     displayName: "TextArea.styles__StyledPlaceholder",
-    componentId: "sc-2ff414ff-18"
+    componentId: "sc-5fcd62a1-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(",
@@ -375,7 +423,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-2ff414ff-19"
+    componentId: "sc-5fcd62a1-23"
 })([
     "position:absolute;border-radius:50%;background-color:var(",
     ");&.",

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

@@ -32,7 +32,9 @@ 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'
 };
 var tokens = {
     /** Цвет фона для всего компонента */ backgroundColor: '--plasma-textarea-background-color',

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

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

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

@@ -70,7 +70,7 @@ import { useDrawer } from "./hooks";
 // issue #823
 export var drawerRoot = function(Root) {
     return /*#__PURE__*/ forwardRef(function(_param, outerRef) {
-        var id = _param.id, zIndex = _param.zIndex, popupInfo = _param.popupInfo, withBlur = _param.withBlur, children = _param.children, view = _param.view, size = _param.size, width = _param.width, height = _param.height, isOpen = _param.isOpen, opened = _param.opened, initialFocusRef = _param.initialFocusRef, focusAfterRef = _param.focusAfterRef, className = _param.className, customBackgroundColor = _param.customBackgroundColor, customContentBackgroundColor = _param.customContentBackgroundColor, onClose = _param.onClose, onOverlayClick = _param.onOverlayClick, onEscKeyDown = _param.onEscKeyDown, offset = _param.offset, frame = _param.frame, _param_borderRadius = _param.borderRadius, borderRadius = _param_borderRadius === void 0 ? 'none' : _param_borderRadius, _param_placement = _param.placement, placement = _param_placement === void 0 ? 'right' : _param_placement, _param_closeOnEsc = _param.closeOnEsc, closeOnEsc = _param_closeOnEsc === void 0 ? true : _param_closeOnEsc, _param_closeOnOverlayClick = _param.closeOnOverlayClick, closeOnOverlayClick = _param_closeOnOverlayClick === void 0 ? true : _param_closeOnOverlayClick, _param_asModal = _param.asModal, asModal = _param_asModal === void 0 ? true : _param_asModal, rest = _object_without_properties(_param, [
+        var id = _param.id, zIndex = _param.zIndex, popupInfo = _param.popupInfo, withBlur = _param.withBlur, children = _param.children, view = _param.view, size = _param.size, width = _param.width, height = _param.height, isOpen = _param.isOpen, opened = _param.opened, initialFocusRef = _param.initialFocusRef, focusAfterRef = _param.focusAfterRef, className = _param.className, customBackgroundColor = _param.customBackgroundColor, customContentBackgroundColor = _param.customContentBackgroundColor, onClose = _param.onClose, onOverlayClick = _param.onOverlayClick, onEscKeyDown = _param.onEscKeyDown, offset = _param.offset, frame = _param.frame, _param_borderRadius = _param.borderRadius, borderRadius = _param_borderRadius === void 0 ? 'none' : _param_borderRadius, _param_placement = _param.placement, placement = _param_placement === void 0 ? 'right' : _param_placement, _param_closeOnEsc = _param.closeOnEsc, closeOnEsc = _param_closeOnEsc === void 0 ? true : _param_closeOnEsc, _param_closeOnOverlayClick = _param.closeOnOverlayClick, closeOnOverlayClick = _param_closeOnOverlayClick === void 0 ? true : _param_closeOnOverlayClick, _param_asModal = _param.asModal, asModal = _param_asModal === void 0 ? true : _param_asModal, draggable = _param.draggable, rest = _object_without_properties(_param, [
             "id",
             "zIndex",
             "popupInfo",
@@ -96,7 +96,8 @@ export var drawerRoot = function(Root) {
             "placement",
             "closeOnEsc",
             "closeOnOverlayClick",
-            "asModal"
+            "asModal",
+            "draggable"
         ]);
         var innerIsOpen = Boolean(isOpen || opened);
         var trapRef = useFocusTrap(true, initialFocusRef, focusAfterRef);

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

@@ -205,11 +205,12 @@ export var handlePosition = function(placement, offset) {
         }), isVisible = _usePopup.isVisible, animationInfo = _usePopup.animationInfo, setVisible = _usePopup.setVisible, rootId = _usePopup.rootId;
         var portalRef = useRef(null);
         var contentRef = useRef(null);
+        var resizableContainer = useRef(null);
         var innerRef = useForkRef(contentRef, outerRootRef);
-        var cls = cx(className, (animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.endAnimation) ? classes.endAnimation : '', (animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.endTransition) ? classes.endTransition : '');
         if (!isVisible && !innerIsOpen) {
             return null;
         }
+        var cls = cx(className, (animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.endAnimation) ? classes.endAnimation : '', (animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.endTransition) ? classes.endTransition : '');
         var rootNode = /*#__PURE__*/ React.createElement(Root, {
             className: cls
         }, overlay, /*#__PURE__*/ React.createElement(PopupRoot, _object_spread({
@@ -226,6 +227,7 @@ export var handlePosition = function(placement, offset) {
             disabled: !draggable,
             cancel: ".".concat(classes.resizableHandleWrapper)
         }, /*#__PURE__*/ React.createElement(Resizable, {
+            ref: resizableContainer,
             enable: resizable && !resizable.disabled ? getResizeDirections(resizable.directions) : false,
             resizeRatio: getRatioBasedOnPlacement(placement),
             defaultSize: resizable === null || resizable === void 0 ? void 0 : resizable.defaultSize,
@@ -233,6 +235,16 @@ export var handlePosition = function(placement, offset) {
             minHeight: resizable === null || resizable === void 0 ? void 0 : resizable.minHeight,
             maxWidth: resizable === null || resizable === void 0 ? void 0 : resizable.maxWidth,
             maxHeight: resizable === null || resizable === void 0 ? void 0 : resizable.maxHeight,
+            onResizeStart: function() {
+                if ((resizableContainer === null || resizableContainer === void 0 ? void 0 : resizableContainer.current) && resizableContainer.current.resizable) {
+                    resizableContainer.current.resizable.classList.toggle(classes.resizableContainerNoSelect);
+                }
+            },
+            onResizeStop: function() {
+                if ((resizableContainer === null || resizableContainer === void 0 ? void 0 : resizableContainer.current) && resizableContainer.current.resizable) {
+                    resizableContainer.current.resizable.classList.toggle(classes.resizableContainerNoSelect);
+                }
+            },
             handleComponent: {
                 topRight: (resizable === null || resizable === void 0 ? void 0 : (_resizable_hiddenIcons = resizable.hiddenIcons) === null || _resizable_hiddenIcons === void 0 ? void 0 : _resizable_hiddenIcons.includes('top-right')) ? undefined : /*#__PURE__*/ React.createElement(IconResizeDiagonalStyled, {
                     className: classes.resizableTopRightIcon,

package/styled-components/es/components/Popup/Popup.styles.js

@@ -6,29 +6,30 @@ import { DEFAULT_Z_INDEX } from "./utils";
 export var base = css([
     ".",
     "{cursor:grab;}.",
-    "{cursor:grabbing;}"
-], classes.draggablePopupWrapper, classes.draggingPopupWrapper);
+    "{cursor:grabbing;}.",
+    "{user-select:none;-webkit-user-select:none;}"
+], classes.draggablePopupWrapper, classes.draggingPopupWrapper, classes.resizableContainerNoSelect);
 export var StyledPortal = styled.div.withConfig({
     displayName: "Popup.styles__StyledPortal",
-    componentId: "sc-17a0b623-0"
+    componentId: "sc-e8036c4-0"
 })([
     ""
 ]);
 export var StyledPortalContainer = styled.div.withConfig({
     displayName: "Popup.styles__StyledPortalContainer",
-    componentId: "sc-17a0b623-1"
+    componentId: "sc-e8036c4-1"
 })([
     "width:0;"
 ]);
 export var PopupView = styled.div.withConfig({
     displayName: "Popup.styles__PopupView",
-    componentId: "sc-17a0b623-2"
+    componentId: "sc-e8036c4-2"
 })([
     "position:relative;max-width:100%;pointer-events:all;"
 ]);
 export var PopupRootContainer = styled.div.withConfig({
     displayName: "Popup.styles__PopupRootContainer",
-    componentId: "sc-17a0b623-3"
+    componentId: "sc-e8036c4-3"
 })([
     "position:",
     ";z-index:",
@@ -62,7 +63,7 @@ export var PopupRootContainer = styled.div.withConfig({
 });
 export var IconResizeDiagonalStyled = styled(IconResizeDiagonal).withConfig({
     displayName: "Popup.styles__IconResizeDiagonalStyled",
-    componentId: "sc-17a0b623-4"
+    componentId: "sc-e8036c4-4"
 })([
     "color:var(--text-secondary);&:hover{color:var(--text-secondary-hover);}&:active{color:var(--text-secondary-active);}&.",
     "{transform:rotate(-90deg);}&.",

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

@@ -10,6 +10,7 @@ export var classes = {
     resizableBottomLeftIcon: 'resizable-bottom-left-icon',
     resizableTopLeftIcon: 'resizable-top-left-icon',
     resizableHandleWrapper: 'resizable-handle-wrapper',
+    resizableContainerNoSelect: 'resizable-container-no-select',
     draggablePopupWrapper: 'draggable-popup-wrapper',
     draggingPopupWrapper: 'dragging-popup-wrapper'
 };

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 } 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,11 @@ 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, 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",
             "rightHelper",
             "leftHelper",
             "leftHelperPlacement",
@@ -229,6 +230,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 +367,20 @@ 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, null, headerSlot), contentRight && !hasHeader && /*#__PURE__*/ React.createElement(StyledContent, null, contentRight), hasHeader && /*#__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 +412,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