@salutejs/plasma-new-hope 0.343.0-canary.2365.19818549048.0 → 0.343.0-canary.2368.19872331595.0

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

@@ -54,7 +54,7 @@ var mergedButtonGroupConfig = (0, _engines.mergeConfig)(_ButtonGroup.buttonGroup
 var ButtonGroup = (0, _engines.component)(mergedButtonGroupConfig);
 var PaginationRoot = _styledcomponents.default.div.withConfig({
     displayName: "Pagination.styles__PaginationRoot",
-    componentId: "sc-1be87a14-0"
+    componentId: "sc-ec0762a3-0"
 })([
     "display:flex;color:var(",
     ");&.",
@@ -63,29 +63,30 @@ var PaginationRoot = _styledcomponents.default.div.withConfig({
 ], _Paginationtokens.tokens.paginationColor, _Paginationtokens.classes.compactType, _Paginationtokens.classes.defaultType);
 var PaginationPages = _styledcomponents.default.div.withConfig({
     displayName: "Pagination.styles__PaginationPages",
-    componentId: "sc-1be87a14-1"
+    componentId: "sc-ec0762a3-1"
 })([
     "display:flex;align-items:center;gap:0.25rem;flex-shrink:0;"
 ]);
 var PaginationActions = _styledcomponents.default.div.withConfig({
     displayName: "Pagination.styles__PaginationActions",
-    componentId: "sc-1be87a14-2"
+    componentId: "sc-ec0762a3-2"
 })([
     "display:flex;justify-content:space-between;flex-grow:1;align-items:center;gap:var(",
-    ");flex-shrink:1;flex-direction:row;&.",
-    "{width:100%;flex-wrap:wrap;&.",
+    ");flex-shrink:1;&.",
+    "{flex-direction:row;width:100%;flex-wrap:wrap;}&.",
+    "{flex-direction:row;}&.",
     "{flex-direction:row-reverse;}&.",
-    "{flex-direction:row;}}"
-], _Paginationtokens.tokens.paginationHelperTextGap, _Paginationtokens.classes.compactType, _Paginationtokens.classes.withHasPerPageSelect, _Paginationtokens.classes.withHasQuickJump);
+    "{flex-direction:row;}"
+], _Paginationtokens.tokens.paginationHelperTextGap, _Paginationtokens.classes.compactType, _Paginationtokens.classes.defaultType, _Paginationtokens.classes.withHasPerPageSelect, _Paginationtokens.classes.withHasQuickJump);
 var PaginationSection = _styledcomponents.default.div.withConfig({
     displayName: "Pagination.styles__PaginationSection",
-    componentId: "sc-1be87a14-3"
+    componentId: "sc-ec0762a3-3"
 })([
     "display:flex;gap:0.125rem;"
 ]);
 var PaginationButtonGroup = (0, _styledcomponents.default)(ButtonGroup).withConfig({
     displayName: "Pagination.styles__PaginationButtonGroup",
-    componentId: "sc-1be87a14-4"
+    componentId: "sc-ec0762a3-4"
 })([
     "",
     ":var(",
@@ -127,7 +128,7 @@ var PaginationButtonGroup = (0, _styledcomponents.default)(ButtonGroup).withConf
 ], _ButtonGroup.buttonGroupTokens.buttonColor, _Paginationtokens.tokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _Paginationtokens.tokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _Paginationtokens.tokens.buttonHoverColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _Paginationtokens.tokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _Paginationtokens.tokens.buttonActiveColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive, _Paginationtokens.tokens.buttonBackgroundColorActive, _ButtonGroup.buttonGroupTokens.buttonFontFamily, _Paginationtokens.tokens.paginationFontFamily, _ButtonGroup.buttonGroupTokens.buttonFontSize, _Paginationtokens.tokens.paginationFontSize, _ButtonGroup.buttonGroupTokens.buttonFontStyle, _Paginationtokens.tokens.paginationFontStyle, _ButtonGroup.buttonGroupTokens.buttonFontWeight, _Paginationtokens.tokens.paginationFontWeight, _ButtonGroup.buttonGroupTokens.buttonLetterSpacing, _Paginationtokens.tokens.paginationLetterSpacing, _ButtonGroup.buttonGroupTokens.buttonLineHeight, _Paginationtokens.tokens.paginationLineHeight, _ButtonGroup.buttonGroupTokens.buttonWidth, _Paginationtokens.tokens.buttonWidth, _ButtonGroup.buttonGroupTokens.buttonHeight, _Paginationtokens.tokens.buttonHeight, _ButtonGroup.buttonGroupTokens.buttonDefaultRadius, _Paginationtokens.tokens.buttonRadius, _ButtonGroup.buttonGroupTokens.buttonSideRadius, _Paginationtokens.tokens.buttonRadius, _ButtonGroup.buttonGroupTokens.buttonSegmentedRadius, _Paginationtokens.tokens.buttonRadius, _ButtonGroup.buttonGroupTokens.buttonRadiusCircle, _Paginationtokens.tokens.buttonRadius);
 var PaginationButton = (0, _styledcomponents.default)(Button).withConfig({
     displayName: "Pagination.styles__PaginationButton",
-    componentId: "sc-1be87a14-5"
+    componentId: "sc-ec0762a3-5"
 })([
     "",
     ":var(",
@@ -193,7 +194,7 @@ var PaginationButton = (0, _styledcomponents.default)(Button).withConfig({
 }));
 var PaginationShorter = (0, _styledcomponents.default)(PaginationButton).withConfig({
     displayName: "Pagination.styles__PaginationShorter",
-    componentId: "sc-1be87a14-6"
+    componentId: "sc-ec0762a3-6"
 })([
     "",
     ":var(",
@@ -202,7 +203,7 @@ var PaginationShorter = (0, _styledcomponents.default)(PaginationButton).withCon
 ], _Button.buttonTokens.buttonWidth, _Paginationtokens.tokens.buttonWidthShorter, _Button.buttonTokens.buttonPadding);
 var PaginationActionsLeft = _styledcomponents.default.div.withConfig({
     displayName: "Pagination.styles__PaginationActionsLeft",
-    componentId: "sc-1be87a14-7"
+    componentId: "sc-ec0762a3-7"
 })([
     "display:flex;align-items:center;flex-wrap:wrap;gap:var(",
     ");.",
@@ -210,7 +211,7 @@ var PaginationActionsLeft = _styledcomponents.default.div.withConfig({
 ], _Paginationtokens.tokens.paginationHelperTextGap, _Paginationtokens.classes.defaultType);
 var PaginationHelperText = _styledcomponents.default.div.withConfig({
     displayName: "Pagination.styles__PaginationHelperText",
-    componentId: "sc-1be87a14-8"
+    componentId: "sc-ec0762a3-8"
 })([
     "color:var(",
     ");&.",

package/styled-components/cjs/components/Tree/Tree.js

@@ -260,21 +260,14 @@ var treeRoot = function(Root) {
                 var dropPosition = props.dropPosition, dropLevelOffset = props.dropLevelOffset, indent = props.indent;
                 var left = -dropLevelOffset * indent + offset;
                 var style = {};
-                switch(dropPosition){
-                    case -1:
-                        style.top = 0;
-                        break;
-                    case 1:
-                        style.bottom = 0;
-                        break;
-                    default:
-                        style.bottom = 0;
-                        style.left = indent + offset;
-                        break;
+                if (dropPosition === 0) {
+                    style.left = indent + offset;
                 }
                 return /*#__PURE__*/ _react.default.createElement(_Treestyles.Line, {
                     style: style,
-                    left: left
+                    left: left,
+                    dropPosition: dropPosition,
+                    variant: variant
                 });
             }
         })));

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

@@ -80,7 +80,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 var IconArrowWrapper = _styledcomponents.default.div.withConfig({
     displayName: "Tree.styles__IconArrowWrapper",
-    componentId: "sc-42c76870-0"
+    componentId: "sc-eac39373-0"
 })([
     "line-height:0;color:var(",
     ");&:hover{color:var(",
@@ -89,19 +89,19 @@ var IconArrowWrapper = _styledcomponents.default.div.withConfig({
 ], _Treetokens.treeTokens.arrowColor, _Treetokens.treeTokens.arrowColorHover, _Treetokens.treeTokens.arrowColorActive);
 var StyledArrow = (0, _styledcomponents.default)(_Icon.IconDisclosureRightCentered).withConfig({
     displayName: "Tree.styles__StyledArrow",
-    componentId: "sc-42c76870-1"
+    componentId: "sc-eac39373-1"
 })([
     "transition:color 0.3s ease-in,transform 0.15s ease-in;pointer-events:none;user-select:none;"
 ]);
 var StyledFolder = (0, _styledcomponents.default)(_Icon.IconFolder).withConfig({
     displayName: "Tree.styles__StyledFolder",
-    componentId: "sc-42c76870-2"
+    componentId: "sc-eac39373-2"
 })([
     ""
 ]);
 var TitleWrapper = _styledcomponents.default.div.withConfig({
     displayName: "Tree.styles__TitleWrapper",
-    componentId: "sc-42c76870-3"
+    componentId: "sc-eac39373-3"
 })([
     "display:flex;align-items:center;justify-content:space-between;margin:",
     ";overflow:",
@@ -115,7 +115,7 @@ var TitleWrapper = _styledcomponents.default.div.withConfig({
 });
 var Title = _styledcomponents.default.span.withConfig({
     displayName: "Tree.styles__Title",
-    componentId: "sc-42c76870-4"
+    componentId: "sc-eac39373-4"
 })([
     "margin:var(",
     ");overflow:",
@@ -134,25 +134,39 @@ var Title = _styledcomponents.default.span.withConfig({
 });
 var ContentRight = _styledcomponents.default.div.withConfig({
     displayName: "Tree.styles__ContentRight",
-    componentId: "sc-42c76870-5"
+    componentId: "sc-eac39373-5"
 })([
     "line-height:0;"
 ]);
 var Line = _styledcomponents.default.div.withConfig({
     displayName: "Tree.styles__Line",
-    componentId: "sc-42c76870-6"
+    componentId: "sc-eac39373-6"
 })([
-    "left:",
-    "px;right:0;position:absolute;z-index:1;height:0.125rem;background-color:var(",
+    "top:",
+    ";left:",
+    "px;bottom:",
+    ";right:0;position:absolute;z-index:1;height:0.125rem;background-color:var(",
     ");border-radius:1px;pointer-events:none;"
 ], function(param) {
+    var dropPosition = param.dropPosition, variant = param.variant;
+    return dropPosition === -1 ? "calc(var(".concat(variant === 'normal' ? _Treetokens.treeTokens.itemPaddingTop : _Treetokens.treeTokens.itemPaddingTightTop, ") * -1)") : 'auto';
+}, function(param) {
     var left = param.left;
     return left;
+}, function(param) {
+    var dropPosition = param.dropPosition, variant = param.variant;
+    return dropPosition !== -1 ? "calc(var(".concat(variant === 'normal' ? _Treetokens.treeTokens.itemPaddingBottom : _Treetokens.treeTokens.itemPaddingTightBottom, ") * -1)") : 'auto';
 }, _Treetokens.treeTokens.itemDraggableLineColor);
 var base = (0, _styledcomponents.css)([
-    ".rc-tree{margin:0;border:1px solid transparent;}.rc-tree-focused:not(.rc-tree-active-focused){border-color:cyan;}.rc-tree .rc-tree-treenode{display:flex;align-items:center;box-sizing:border-box;margin:0;padding:var(",
+    ".rc-tree{margin:0;border:1px solid transparent;}.rc-tree-focused:not(.rc-tree-active-focused){border-color:cyan;}.rc-tree .rc-tree-treenode{display:flex;align-items:center;box-sizing:border-box;margin:0;padding-top:var(",
+    ");padding-right:var(",
+    ");padding-bottom:var(",
+    ");padding-left:var(",
     ");position:relative;z-index:0;width:100%;line-height:24px;white-space:nowrap;list-style:none;outline:0;}.rc-tree.",
-    " .rc-tree-treenode{padding:var(",
+    " .rc-tree-treenode{padding-top:var(",
+    ");padding-right:var(",
+    ");padding-bottom:var(",
+    ");padding-left:var(",
     ");}.rc-tree .rc-tree-treenode .draggable{color:#333;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;user-select:none;}.rc-tree .rc-tree-treenode.dragging{opacity:0.28;}.rc-tree .rc-tree-treenode.drop-container::before,.rc-tree:not(:has(.drop-container)) .rc-tree-treenode.drop-target.",
     "::before,.rc-tree:not(:has(.drop-container)) .rc-tree-treenode.drop-target.drag-over::before{box-shadow:inset 0 0 0 1px var(",
     ");}.rc-tree .rc-tree-treenode.filter-node > .rc-tree-node-content-wrapper{color:#a60000 !important;font-weight:bold !important;}.rc-tree .rc-tree-treenode ul{margin:0;padding:0 0 0 18px;}.rc-tree .rc-tree-treenode .rc-tree-node-content-wrapper{position:relative;margin:0;padding:0;text-decoration:none;vertical-align:top;cursor:pointer;color:var(",
@@ -212,4 +226,4 @@ var base = (0, _styledcomponents.css)([
     ");}.rc-tree .rc-tree-treenode.rc-tree-treenode-disabled .rc-tree-icon__customize{color:var(",
     ");}.rc-tree-indent-unit{width:var(",
     ");}"
-], _Treetokens.treeTokens.itemPadding, _Treetokens.classes.treeTightVariant, _Treetokens.treeTokens.itemPaddingTight, _Treetokens.classes.treeLeafNode, _Treetokens.treeTokens.itemDraggableBorderColor, _Treetokens.treeTokens.color, _Treetokens.classes.treeRadioMode, _Treetokens.classes.treeInverted, _Treetokens.treeTokens.iconFolderColor, _Treetokens.treeTokens.iconFolderMargin, _Treetokens.treeTokens.itemTop, _Treetokens.treeTokens.itemBottom, _Treetokens.treeTokens.switcherSize, _Treetokens.treeTokens.itemBackgroundExtraOffset, _Treetokens.treeTokens.itemBorderRadius, _Treetokens.treeTokens.itemDisabledOpacity, _Treetokens.classes.treeItemFilled, _Treetokens.classes.treeItemHasSelectedChildren, _Treetokens.treeTokens.colorSelected, _Treetokens.classes.treeItemHasSelectedChildren, _Treetokens.treeTokens.colorSelected, _Treetokens.classes.treeItemPrimaryBackground, _Treetokens.treeTokens.itemBackgroundColorPrimary, _Treetokens.treeTokens.itemBackgroundColorSelected, _Treetokens.classes.treeRadioMode, _Treetokens.treeTokens.itemBackgroundColorHover, _Treetokens.classes.treeRadioMode, _Treetokens.treeTokens.itemBackgroundColorActive, _Treetokens.treeTokens.switcherSize, _Treetokens.treeTokens.switcherSize, _Treetokens.treeTokens.switcherMargin, _Treetokens.classes.treeInverted, _Treetokens.treeTokens.switcherMarginInverted, _Treetokens.classes.treeInverted, _Treetokens.classes.treeInverted, _Treetokens.treeTokens.checkboxSize, _Treetokens.treeTokens.checkboxSize, _Treetokens.treeTokens.checkboxMargin, _Treetokens.treeTokens.checkboxInnerSize, _Treetokens.treeTokens.checkboxInnerSize, _Treetokens.treeTokens.checkboxBorderColor, _Treetokens.treeTokens.checkboxBorderRadius, _Treetokens.treeTokens.itemDisabledBorderColor, _Treetokens.treeTokens.checkboxBackgroundColor, _Treetokens.treeTokens.checkboxBackgroundColor, _Treetokens.treeTokens.checkboxBackgroundColor, _Treetokens.treeTokens.checkboxBackgroundColor, _Treetokens.treeTokens.color, _Treetokens.treeTokens.fontFamily, _Treetokens.treeTokens.fontSize, _Treetokens.treeTokens.fontStyle, _Treetokens.treeTokens.fontWeight, _Treetokens.treeTokens.letterSpacing, _Treetokens.treeTokens.lineHeight, _Treetokens.classes.treeInverted, _Treetokens.classes.treeInverted, _Treetokens.treeTokens.colorSelected, _Treetokens.treeTokens.itemDisabledColor, _Treetokens.treeTokens.colorSelected, _Treetokens.treeTokens.itemDisabledColor, _Treetokens.treeTokens.itemIndent);
+], _Treetokens.treeTokens.itemPaddingTop, _Treetokens.treeTokens.itemPaddingRight, _Treetokens.treeTokens.itemPaddingBottom, _Treetokens.treeTokens.itemPaddingLeft, _Treetokens.classes.treeTightVariant, _Treetokens.treeTokens.itemPaddingTightTop, _Treetokens.treeTokens.itemPaddingTightRight, _Treetokens.treeTokens.itemPaddingTightBottom, _Treetokens.treeTokens.itemPaddingTightLeft, _Treetokens.classes.treeLeafNode, _Treetokens.treeTokens.itemDraggableBorderColor, _Treetokens.treeTokens.color, _Treetokens.classes.treeRadioMode, _Treetokens.classes.treeInverted, _Treetokens.treeTokens.iconFolderColor, _Treetokens.treeTokens.iconFolderMargin, _Treetokens.treeTokens.itemTop, _Treetokens.treeTokens.itemBottom, _Treetokens.treeTokens.switcherSize, _Treetokens.treeTokens.itemBackgroundExtraOffset, _Treetokens.treeTokens.itemBorderRadius, _Treetokens.treeTokens.itemDisabledOpacity, _Treetokens.classes.treeItemFilled, _Treetokens.classes.treeItemHasSelectedChildren, _Treetokens.treeTokens.colorSelected, _Treetokens.classes.treeItemHasSelectedChildren, _Treetokens.treeTokens.colorSelected, _Treetokens.classes.treeItemPrimaryBackground, _Treetokens.treeTokens.itemBackgroundColorPrimary, _Treetokens.treeTokens.itemBackgroundColorSelected, _Treetokens.classes.treeRadioMode, _Treetokens.treeTokens.itemBackgroundColorHover, _Treetokens.classes.treeRadioMode, _Treetokens.treeTokens.itemBackgroundColorActive, _Treetokens.treeTokens.switcherSize, _Treetokens.treeTokens.switcherSize, _Treetokens.treeTokens.switcherMargin, _Treetokens.classes.treeInverted, _Treetokens.treeTokens.switcherMarginInverted, _Treetokens.classes.treeInverted, _Treetokens.classes.treeInverted, _Treetokens.treeTokens.checkboxSize, _Treetokens.treeTokens.checkboxSize, _Treetokens.treeTokens.checkboxMargin, _Treetokens.treeTokens.checkboxInnerSize, _Treetokens.treeTokens.checkboxInnerSize, _Treetokens.treeTokens.checkboxBorderColor, _Treetokens.treeTokens.checkboxBorderRadius, _Treetokens.treeTokens.itemDisabledBorderColor, _Treetokens.treeTokens.checkboxBackgroundColor, _Treetokens.treeTokens.checkboxBackgroundColor, _Treetokens.treeTokens.checkboxBackgroundColor, _Treetokens.treeTokens.checkboxBackgroundColor, _Treetokens.treeTokens.color, _Treetokens.treeTokens.fontFamily, _Treetokens.treeTokens.fontSize, _Treetokens.treeTokens.fontStyle, _Treetokens.treeTokens.fontWeight, _Treetokens.treeTokens.letterSpacing, _Treetokens.treeTokens.lineHeight, _Treetokens.classes.treeInverted, _Treetokens.classes.treeInverted, _Treetokens.treeTokens.colorSelected, _Treetokens.treeTokens.itemDisabledColor, _Treetokens.treeTokens.colorSelected, _Treetokens.treeTokens.itemDisabledColor, _Treetokens.treeTokens.itemIndent);

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

@@ -40,8 +40,14 @@ var treeTokens = {
     itemHeight: '--plasma-tree-item-height',
     itemTop: '--plasma-tree-item-top',
     itemBottom: '--plasma-tree-item-bottom',
-    itemPadding: '--plasma-tree-item-padding',
-    itemPaddingTight: '--plasma-tree-item-padding-tight',
+    itemPaddingTop: '--plasma-tree-item-padding-top',
+    itemPaddingRight: '--plasma-tree-item-padding-right',
+    itemPaddingBottom: '--plasma-tree-item-padding-bottom',
+    itemPaddingLeft: '--plasma-tree-item-padding-left',
+    itemPaddingTightTop: '--plasma-tree-item-padding-tight-top',
+    itemPaddingTightRight: '--plasma-tree-item-padding-tight-right',
+    itemPaddingTightBottom: '--plasma-tree-item-padding-tight-bottom',
+    itemPaddingTightLeft: '--plasma-tree-item-padding-tight-left',
     itemIndent: '--plasma-tree-item-indent',
     itemBorderRadius: '--plasma-tree-item-border-radius',
     iconFolderMargin: '--plasma-tree-icon-folder-margin',

package/styled-components/cjs/examples/components/Combobox/Combobox.js

@@ -1 +1,16 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Combobox", {
+    enumerable: true,
+    get: function() {
+        return Combobox;
+    }
+});
+var _engines = require("../../../engines");
+var _ = require("../../..");
+var _Comboboxconfig = require("./Combobox.config");
+var mergedConfig = (0, _engines.mergeConfig)(_.comboboxNewConfig, _Comboboxconfig.config);
+var ComboboxComponent = (0, _engines.component)(mergedConfig);
+var Combobox = ComboboxComponent;

package/styled-components/cjs/examples/components/Tree/Tree.config.js

@@ -46,7 +46,13 @@ var config = {
                 ":3.5rem;",
                 ":1rem;",
                 ":1rem;",
-                ":0.75rem 1rem;",
+                ":1rem;",
+                ":1rem;",
+                ":1rem;",
+                ":0.75rem;",
+                ":1rem;",
+                ":0.75rem;",
+                ":1rem;",
                 ":2rem;",
                 ":0.75rem;",
                 ":0.25rem;",
@@ -65,13 +71,19 @@ var config = {
                 ":var(--plasma-typo-body-l-font-weight);",
                 ":var(--plasma-typo-body-l-letter-spacing);",
                 ":var(--plasma-typo-body-l-line-height);"
-            ], _Treetokens.treeTokens.itemHeight, _Treetokens.treeTokens.itemBackgroundExtraOffset, _Treetokens.treeTokens.itemPadding, _Treetokens.treeTokens.itemPaddingTight, _Treetokens.treeTokens.itemIndent, _Treetokens.treeTokens.itemBorderRadius, _Treetokens.treeTokens.itemTop, _Treetokens.treeTokens.itemBottom, _Treetokens.treeTokens.iconFolderMargin, _Treetokens.treeTokens.switcherMargin, _Treetokens.treeTokens.switcherMarginInverted, _Treetokens.treeTokens.switcherSize, _Treetokens.treeTokens.checkboxMargin, _Treetokens.treeTokens.checkboxSize, _Treetokens.treeTokens.checkboxInnerSize, _Treetokens.treeTokens.checkboxBorderRadius, _Treetokens.treeTokens.fontFamily, _Treetokens.treeTokens.fontSize, _Treetokens.treeTokens.fontStyle, _Treetokens.treeTokens.fontWeight, _Treetokens.treeTokens.letterSpacing, _Treetokens.treeTokens.lineHeight),
+            ], _Treetokens.treeTokens.itemHeight, _Treetokens.treeTokens.itemBackgroundExtraOffset, _Treetokens.treeTokens.itemPaddingTop, _Treetokens.treeTokens.itemPaddingRight, _Treetokens.treeTokens.itemPaddingBottom, _Treetokens.treeTokens.itemPaddingLeft, _Treetokens.treeTokens.itemPaddingTightTop, _Treetokens.treeTokens.itemPaddingTightRight, _Treetokens.treeTokens.itemPaddingTightBottom, _Treetokens.treeTokens.itemPaddingTightLeft, _Treetokens.treeTokens.itemIndent, _Treetokens.treeTokens.itemBorderRadius, _Treetokens.treeTokens.itemTop, _Treetokens.treeTokens.itemBottom, _Treetokens.treeTokens.iconFolderMargin, _Treetokens.treeTokens.switcherMargin, _Treetokens.treeTokens.switcherMarginInverted, _Treetokens.treeTokens.switcherSize, _Treetokens.treeTokens.checkboxMargin, _Treetokens.treeTokens.checkboxSize, _Treetokens.treeTokens.checkboxInnerSize, _Treetokens.treeTokens.checkboxBorderRadius, _Treetokens.treeTokens.fontFamily, _Treetokens.treeTokens.fontSize, _Treetokens.treeTokens.fontStyle, _Treetokens.treeTokens.fontWeight, _Treetokens.treeTokens.letterSpacing, _Treetokens.treeTokens.lineHeight),
             m: (0, _styledcomponents.css)([
                 "",
                 ":3rem;",
                 ":0.875rem;",
-                ":0.75rem 0.875rem;",
-                ":0.5rem 0.875rem;",
+                ":0.75rem;",
+                ":0.875rem;",
+                ":0.75rem;",
+                ":0.875rem;",
+                ":0.5rem;",
+                ":0.875rem;",
+                ":0.5rem;",
+                ":0.875rem;",
                 ":2rem;",
                 ":0.625rem;",
                 ":0.25rem;",
@@ -90,13 +102,19 @@ var config = {
                 ":var(--plasma-typo-body-m-font-weight);",
                 ":var(--plasma-typo-body-m-letter-spacing);",
                 ":var(--plasma-typo-body-m-line-height);"
-            ], _Treetokens.treeTokens.itemHeight, _Treetokens.treeTokens.itemBackgroundExtraOffset, _Treetokens.treeTokens.itemPadding, _Treetokens.treeTokens.itemPaddingTight, _Treetokens.treeTokens.itemIndent, _Treetokens.treeTokens.itemBorderRadius, _Treetokens.treeTokens.itemTop, _Treetokens.treeTokens.itemBottom, _Treetokens.treeTokens.iconFolderMargin, _Treetokens.treeTokens.switcherMargin, _Treetokens.treeTokens.switcherMarginInverted, _Treetokens.treeTokens.switcherSize, _Treetokens.treeTokens.checkboxMargin, _Treetokens.treeTokens.checkboxSize, _Treetokens.treeTokens.checkboxInnerSize, _Treetokens.treeTokens.checkboxBorderRadius, _Treetokens.treeTokens.fontFamily, _Treetokens.treeTokens.fontSize, _Treetokens.treeTokens.fontStyle, _Treetokens.treeTokens.fontWeight, _Treetokens.treeTokens.letterSpacing, _Treetokens.treeTokens.lineHeight),
+            ], _Treetokens.treeTokens.itemHeight, _Treetokens.treeTokens.itemBackgroundExtraOffset, _Treetokens.treeTokens.itemPaddingTop, _Treetokens.treeTokens.itemPaddingRight, _Treetokens.treeTokens.itemPaddingBottom, _Treetokens.treeTokens.itemPaddingLeft, _Treetokens.treeTokens.itemPaddingTightTop, _Treetokens.treeTokens.itemPaddingTightRight, _Treetokens.treeTokens.itemPaddingTightBottom, _Treetokens.treeTokens.itemPaddingTightLeft, _Treetokens.treeTokens.itemIndent, _Treetokens.treeTokens.itemBorderRadius, _Treetokens.treeTokens.itemTop, _Treetokens.treeTokens.itemBottom, _Treetokens.treeTokens.iconFolderMargin, _Treetokens.treeTokens.switcherMargin, _Treetokens.treeTokens.switcherMarginInverted, _Treetokens.treeTokens.switcherSize, _Treetokens.treeTokens.checkboxMargin, _Treetokens.treeTokens.checkboxSize, _Treetokens.treeTokens.checkboxInnerSize, _Treetokens.treeTokens.checkboxBorderRadius, _Treetokens.treeTokens.fontFamily, _Treetokens.treeTokens.fontSize, _Treetokens.treeTokens.fontStyle, _Treetokens.treeTokens.fontWeight, _Treetokens.treeTokens.letterSpacing, _Treetokens.treeTokens.lineHeight),
             s: (0, _styledcomponents.css)([
                 "",
                 ":2.5rem;",
                 ":0.75rem;",
-                ":0.5rem 0.75rem;",
-                ":0.4375rem 0.5rem;",
+                ":0.5rem;",
+                ":0.75rem;",
+                ":0.5rem;",
+                ":0.75rem;",
+                ":0.4375rem;",
+                ":0.5rem;",
+                ":0.4375rem;",
+                ":0.5rem;",
                 ":1.875rem;",
                 ":0.5rem;",
                 ":0.25rem;",
@@ -115,13 +133,19 @@ var config = {
                 ":var(--plasma-typo-body-s-font-weight);",
                 ":var(--plasma-typo-body-s-letter-spacing);",
                 ":var(--plasma-typo-body-s-line-height);"
-            ], _Treetokens.treeTokens.itemHeight, _Treetokens.treeTokens.itemBackgroundExtraOffset, _Treetokens.treeTokens.itemPadding, _Treetokens.treeTokens.itemPaddingTight, _Treetokens.treeTokens.itemIndent, _Treetokens.treeTokens.itemBorderRadius, _Treetokens.treeTokens.itemTop, _Treetokens.treeTokens.itemBottom, _Treetokens.treeTokens.iconFolderMargin, _Treetokens.treeTokens.switcherMargin, _Treetokens.treeTokens.switcherMarginInverted, _Treetokens.treeTokens.switcherSize, _Treetokens.treeTokens.checkboxMargin, _Treetokens.treeTokens.checkboxSize, _Treetokens.treeTokens.checkboxInnerSize, _Treetokens.treeTokens.checkboxBorderRadius, _Treetokens.treeTokens.fontFamily, _Treetokens.treeTokens.fontSize, _Treetokens.treeTokens.fontStyle, _Treetokens.treeTokens.fontWeight, _Treetokens.treeTokens.letterSpacing, _Treetokens.treeTokens.lineHeight),
+            ], _Treetokens.treeTokens.itemHeight, _Treetokens.treeTokens.itemBackgroundExtraOffset, _Treetokens.treeTokens.itemPaddingTop, _Treetokens.treeTokens.itemPaddingRight, _Treetokens.treeTokens.itemPaddingBottom, _Treetokens.treeTokens.itemPaddingLeft, _Treetokens.treeTokens.itemPaddingTightTop, _Treetokens.treeTokens.itemPaddingTightRight, _Treetokens.treeTokens.itemPaddingTightBottom, _Treetokens.treeTokens.itemPaddingTightLeft, _Treetokens.treeTokens.itemIndent, _Treetokens.treeTokens.itemBorderRadius, _Treetokens.treeTokens.itemTop, _Treetokens.treeTokens.itemBottom, _Treetokens.treeTokens.iconFolderMargin, _Treetokens.treeTokens.switcherMargin, _Treetokens.treeTokens.switcherMarginInverted, _Treetokens.treeTokens.switcherSize, _Treetokens.treeTokens.checkboxMargin, _Treetokens.treeTokens.checkboxSize, _Treetokens.treeTokens.checkboxInnerSize, _Treetokens.treeTokens.checkboxBorderRadius, _Treetokens.treeTokens.fontFamily, _Treetokens.treeTokens.fontSize, _Treetokens.treeTokens.fontStyle, _Treetokens.treeTokens.fontWeight, _Treetokens.treeTokens.letterSpacing, _Treetokens.treeTokens.lineHeight),
             xs: (0, _styledcomponents.css)([
                 "",
                 ":2rem;",
                 ":0.5rem;",
                 ":0.5rem;",
-                ":0.25rem 0.5rem;",
+                ":0.5rem;",
+                ":0.5rem;",
+                ":0.5rem;",
+                ":0.25rem;",
+                ":0.5rem;",
+                ":0.25rem;",
+                ":0.5rem;",
                 ":1.25rem;",
                 ":0.375rem;",
                 ":0.25rem;",
@@ -140,7 +164,7 @@ var config = {
                 ":var(--plasma-typo-body-xs-font-weight);",
                 ":var(--plasma-typo-body-xs-letter-spacing);",
                 ":var(--plasma-typo-body-xs-line-height);"
-            ], _Treetokens.treeTokens.itemHeight, _Treetokens.treeTokens.itemBackgroundExtraOffset, _Treetokens.treeTokens.itemPadding, _Treetokens.treeTokens.itemPaddingTight, _Treetokens.treeTokens.itemIndent, _Treetokens.treeTokens.itemBorderRadius, _Treetokens.treeTokens.itemTop, _Treetokens.treeTokens.itemBottom, _Treetokens.treeTokens.iconFolderMargin, _Treetokens.treeTokens.switcherMargin, _Treetokens.treeTokens.switcherMarginInverted, _Treetokens.treeTokens.switcherSize, _Treetokens.treeTokens.checkboxMargin, _Treetokens.treeTokens.checkboxSize, _Treetokens.treeTokens.checkboxInnerSize, _Treetokens.treeTokens.checkboxBorderRadius, _Treetokens.treeTokens.fontFamily, _Treetokens.treeTokens.fontSize, _Treetokens.treeTokens.fontStyle, _Treetokens.treeTokens.fontWeight, _Treetokens.treeTokens.letterSpacing, _Treetokens.treeTokens.lineHeight)
+            ], _Treetokens.treeTokens.itemHeight, _Treetokens.treeTokens.itemBackgroundExtraOffset, _Treetokens.treeTokens.itemPaddingTop, _Treetokens.treeTokens.itemPaddingRight, _Treetokens.treeTokens.itemPaddingBottom, _Treetokens.treeTokens.itemPaddingLeft, _Treetokens.treeTokens.itemPaddingTightTop, _Treetokens.treeTokens.itemPaddingTightRight, _Treetokens.treeTokens.itemPaddingTightBottom, _Treetokens.treeTokens.itemPaddingTightLeft, _Treetokens.treeTokens.itemIndent, _Treetokens.treeTokens.itemBorderRadius, _Treetokens.treeTokens.itemTop, _Treetokens.treeTokens.itemBottom, _Treetokens.treeTokens.iconFolderMargin, _Treetokens.treeTokens.switcherMargin, _Treetokens.treeTokens.switcherMarginInverted, _Treetokens.treeTokens.switcherSize, _Treetokens.treeTokens.checkboxMargin, _Treetokens.treeTokens.checkboxSize, _Treetokens.treeTokens.checkboxInnerSize, _Treetokens.treeTokens.checkboxBorderRadius, _Treetokens.treeTokens.fontFamily, _Treetokens.treeTokens.fontSize, _Treetokens.treeTokens.fontStyle, _Treetokens.treeTokens.fontWeight, _Treetokens.treeTokens.letterSpacing, _Treetokens.treeTokens.lineHeight)
         }
     }
 };

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

@@ -149,7 +149,7 @@ import { Context } from "./Combobox.context";
  */ export var comboboxRoot = function(Root) {
     return /*#__PURE__*/ forwardRef(function(props, ref) {
         var _getItemByFocused;
-        var name = props.name, multiple = props.multiple, outerValue = props.value, outerOnChange = props.onChange, defaultValue = props.defaultValue, isTargetAmount = props.isTargetAmount, targetAmount = props.targetAmount, items = props.items, _props_treeView = props.treeView, treeView = _props_treeView === void 0 ? false : _props_treeView, _props_arrowPlacement = props.arrowPlacement, arrowPlacement = _props_arrowPlacement === void 0 ? 'left' : _props_arrowPlacement, _props_placement = props.placement, placement = _props_placement === void 0 ? 'bottom-start' : _props_placement, label = props.label, placeholder = props.placeholder, helperText = props.helperText, contentLeft = props.contentLeft, textBefore = props.textBefore, textAfter = props.textAfter, _props_variant = props.variant, variant = _props_variant === void 0 ? 'normal' : _props_variant, listOverflow = props.listOverflow, listHeight = props.listHeight, listMaxHeight = props.listMaxHeight, listWidth = props.listWidth, portal = props.portal, renderItem = props.renderItem, view = props.view, size = props.size, labelPlacement = props.labelPlacement, keepPlaceholder = props.keepPlaceholder, _props_readOnly = props.readOnly, readOnly = _props_readOnly === void 0 ? false : _props_readOnly, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, _props_alwaysOpened = props.alwaysOpened, alwaysOpened = _props_alwaysOpened === void 0 ? false : _props_alwaysOpened, filter = props.filter, outerCloseAfterSelect = props.closeAfterSelect, renderValue = props.renderValue, zIndex = props.zIndex, beforeList = props.beforeList, afterList = props.afterList, _props_virtual = props.virtual, virtual = _props_virtual === void 0 ? false : _props_virtual, hintView = props.hintView, hintSize = props.hintSize, emptyStateDescription = props.emptyStateDescription, onChangeValue = props.onChangeValue, onScroll = props.onScroll, onToggle = props.onToggle, _props_mode = props.mode, mode = _props_mode === void 0 ? 'default' : _props_mode, _props_chipClickArea = props.chipClickArea, chipClickArea = _props_chipClickArea === void 0 ? 'full' : _props_chipClickArea, // @ts-ignore
+        var name = props.name, multiple = props.multiple, outerValue = props.value, outerOnChange = props.onChange, defaultValue = props.defaultValue, isTargetAmount = props.isTargetAmount, targetAmount = props.targetAmount, items = props.items, _props_treeView = props.treeView, treeView = _props_treeView === void 0 ? false : _props_treeView, _props_arrowPlacement = props.arrowPlacement, arrowPlacement = _props_arrowPlacement === void 0 ? 'left' : _props_arrowPlacement, _props_placement = props.placement, placement = _props_placement === void 0 ? 'bottom-start' : _props_placement, label = props.label, placeholder = props.placeholder, helperText = props.helperText, contentLeft = props.contentLeft, textBefore = props.textBefore, textAfter = props.textAfter, _props_variant = props.variant, variant = _props_variant === void 0 ? 'normal' : _props_variant, listOverflow = props.listOverflow, listHeight = props.listHeight, listMaxHeight = props.listMaxHeight, listWidth = props.listWidth, portal = props.portal, renderItem = props.renderItem, view = props.view, size = props.size, labelPlacement = props.labelPlacement, keepPlaceholder = props.keepPlaceholder, _props_readOnly = props.readOnly, readOnly = _props_readOnly === void 0 ? false : _props_readOnly, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, _props_alwaysOpened = props.alwaysOpened, alwaysOpened = _props_alwaysOpened === void 0 ? false : _props_alwaysOpened, filter = props.filter, outerCloseAfterSelect = props.closeAfterSelect, renderValue = props.renderValue, zIndex = props.zIndex, beforeList = props.beforeList, afterList = props.afterList, _props_virtual = props.virtual, virtual = _props_virtual === void 0 ? false : _props_virtual, hintView = props.hintView, hintSize = props.hintSize, emptyStateDescription = props.emptyStateDescription, onChangeValue = props.onChangeValue, filterValue = props.filterValue, onScroll = props.onScroll, onToggle = props.onToggle, _props_mode = props.mode, mode = _props_mode === void 0 ? 'default' : _props_mode, _props_chipClickArea = props.chipClickArea, chipClickArea = _props_chipClickArea === void 0 ? 'full' : _props_chipClickArea, // @ts-ignore
         _offset = props._offset, rest = _object_without_properties(props, [
             "name",
             "multiple",
@@ -193,6 +193,7 @@ import { Context } from "./Combobox.context";
             "hintSize",
             "emptyStateDescription",
             "onChangeValue",
+            "filterValue",
             "onScroll",
             "onToggle",
             "mode",
@@ -289,16 +290,15 @@ import { Context } from "./Combobox.context";
         };
         // Обработчик изменения значения в инпуте
         var handleTextValueChange = function(e) {
-            setTextValue(e.target.value);
+            if (!filterValue || filterValue(e.target.value)) {
+                setTextValue(e.target.value);
+            }
             dispatchPath({
                 type: 'opened_first_level'
             });
             dispatchFocusedPath({
                 type: 'reset'
             });
-            if (onChangeValue) {
-                onChangeValue(e.target.value);
-            }
         };
         // Обработчик чипов
         var handleChipClick = function(chip) {
@@ -655,6 +655,7 @@ import { Context } from "./Combobox.context";
                     contentLeft: contentLeft,
                     contentRight: /*#__PURE__*/ React.createElement(IconArrowWrapper, {
                         disabled: disabled,
+                        readOnly: readOnly,
                         onClick: handleClickArrow,
                         className: classes.comboboxTargetArrow
                     }, /*#__PURE__*/ React.createElement(StyledArrow, {
@@ -695,11 +696,7 @@ import { Context } from "./Combobox.context";
             disabled: disabled,
             readOnly: readOnly,
             name: name
-        }, isEmpty(filteredItems) ? /*#__PURE__*/ React.createElement(StyledEmptyState, {
-            className: classes.emptyStateWrapper,
-            size: size,
-            description: emptyStateDescription || 'Ничего не найдено'
-        }) : /*#__PURE__*/ React.createElement(React.Fragment, null, treeView ? /*#__PURE__*/ React.createElement(TreeList, {
+        }, treeView ? /*#__PURE__*/ React.createElement(TreeList, {
             items: filteredItems,
             listMaxHeight: listMaxHeight || listHeight,
             onScroll: virtual ? undefined : onScroll,
@@ -720,7 +717,11 @@ import { Context } from "./Combobox.context";
         /*#__PURE__*/ React.createElement(SelectAll, {
             selectAllOptions: props.selectAllOptions,
             variant: variant
-        }), virtual ? /*#__PURE__*/ React.createElement(VirtualList, {
+        }), isEmpty(filteredItems) ? /*#__PURE__*/ React.createElement(StyledEmptyState, {
+            className: classes.emptyStateWrapper,
+            size: size,
+            description: emptyStateDescription || 'Ничего не найдено'
+        }) : /*#__PURE__*/ React.createElement(React.Fragment, null, virtual ? /*#__PURE__*/ React.createElement(VirtualList, {
             items: filteredItems,
             listMaxHeight: listMaxHeight || listHeight,
             onScroll: onScroll
@@ -735,7 +736,7 @@ import { Context } from "./Combobox.context";
                 listWidth: listWidth,
                 portal: listWrapperRef
             });
-        }), afterList))))))));
+        })), afterList)))))));
     });
 };
 export var comboboxConfig = {

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

@@ -8,7 +8,7 @@ var mergedConfig = mergeConfig(emptyStateConfig);
 var EmptyState = component(mergedConfig);
 export var ListWrapper = styled.div.withConfig({
     displayName: "Combobox.styles__ListWrapper",
-    componentId: "sc-21c5f0bf-0"
+    componentId: "sc-48cd29fe-0"
 })([
     "width:",
     ";padding:calc(var(",
@@ -25,7 +25,7 @@ export var ListWrapper = styled.div.withConfig({
 }, tokens.padding, tokens.dropdownBorderWidth, tokens.borderRadius, constants.background, constants.boxShadow, tokens.dropdownBorderWidth, tokens.dropdownBorderColor);
 export var Ul = styled.ul.withConfig({
     displayName: "Combobox.styles__Ul",
-    componentId: "sc-21c5f0bf-1"
+    componentId: "sc-48cd29fe-1"
 })([
     "max-height:",
     ";overflow-x:hidden;overflow-y:",
@@ -42,7 +42,7 @@ export var Ul = styled.ul.withConfig({
 }, tokens.borderRadius, tokens.dropdownBorderWidth, classes.emptyStateWrapper);
 export var IconArrowWrapper = styled.div.withConfig({
     displayName: "Combobox.styles__IconArrowWrapper",
-    componentId: "sc-21c5f0bf-2"
+    componentId: "sc-48cd29fe-2"
 })([
     "line-height:0;color:var(",
     ");cursor:",
@@ -50,11 +50,11 @@ export var IconArrowWrapper = styled.div.withConfig({
     "{transform:rotate(-180deg);}&:hover,&:active{color:",
     ";}"
 ], tokens.disclosureIconColor, function(param) {
-    var disabled = param.disabled;
-    return disabled ? 'inherit' : 'pointer';
+    var disabled = param.disabled, readOnly = param.readOnly;
+    return disabled || readOnly ? 'inherit' : 'pointer';
 }, classes.arrowInverse, function(param) {
-    var disabled = param.disabled;
-    return disabled ? "var(".concat(tokens.disclosureIconColor, ")") : "var(".concat(tokens.disclosureIconColorHover, ")");
+    var disabled = param.disabled, readOnly = param.readOnly;
+    return disabled || readOnly ? "var(".concat(tokens.disclosureIconColor, ")") : "var(".concat(tokens.disclosureIconColorHover, ")");
 });
 // TODO: Удалить после поддержки JS переменных в конфиге компонент
 export var sizeMap = {
@@ -63,7 +63,7 @@ export var sizeMap = {
 };
 export var StyledArrow = styled(IconDisclosureDownCentered).withConfig({
     displayName: "Combobox.styles__StyledArrow",
-    componentId: "sc-21c5f0bf-3"
+    componentId: "sc-48cd29fe-3"
 })([
     "width:",
     ";height:",
@@ -80,7 +80,7 @@ export var base = css([
 ]);
 export var StyledEmptyState = styled(EmptyState).withConfig({
     displayName: "Combobox.styles__StyledEmptyState",
-    componentId: "sc-21c5f0bf-4"
+    componentId: "sc-48cd29fe-4"
 })([
     "",
     ":var(",
@@ -102,7 +102,7 @@ export var StyledEmptyState = styled(EmptyState).withConfig({
 ], emptyStateTokens.borderRadius, tokens.textFieldBorderRadius, emptyStateTokens.padding, tokens.emptyStatePadding, emptyStateTokens.fontFamily, tokens.textFieldFontFamily, emptyStateTokens.fontSize, tokens.textFieldFontSize, emptyStateTokens.fontStyle, tokens.textFieldFontStyle, emptyStateTokens.fontWeight, tokens.textFieldFontWeight, emptyStateTokens.fontLetterSpacing, tokens.textFieldLetterSpacing, emptyStateTokens.fontLineHeight, tokens.textFieldLineHeight);
 export var StyledLeftHelper = styled.span.withConfig({
     displayName: "Combobox.styles__StyledLeftHelper",
-    componentId: "sc-21c5f0bf-5"
+    componentId: "sc-48cd29fe-5"
 })([
     "margin:0;padding:0;"
 ]);

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

@@ -54,15 +54,11 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 import React, { forwardRef } from "react";
-import { component } from "../../engines";
-import { Overlay } from "../Overlay";
-import { popupConfig } from "../Popup";
 import { DEFAULT_Z_INDEX } from "../Popup/utils";
 import { base as viewCSS } from "./variations/_view/base";
 import { base as sizeCSS } from "./variations/_size/base";
-import { base, StyledProgressBarCircular, StyledSpinner } from "./Loader.styles";
+import { base, LoaderContentWrapper, LoaderWrapper, StyledOverlay, StyledProgressBarCircular, StyledSpinner } from "./Loader.styles";
 import { classes, tokens } from "./Loader.tokens";
-var Popup = component(popupConfig);
 export var loaderRoot = function(Root) {
     return /*#__PURE__*/ forwardRef(function(props, ref) {
         var _props_type = props.type, type = _props_type === void 0 ? 'spinner' : _props_type, _props_hasOverlay = props.hasOverlay, hasOverlay = _props_hasOverlay === void 0 ? false : _props_hasOverlay, _props_withBlur = props.withBlur, withBlur = _props_withBlur === void 0 ? false : _props_withBlur, _props_value = props.value, value = _props_value === void 0 ? 0 : _props_value, overlayColor = props.overlayColor, _props_maxValue = props.maxValue, maxValue = _props_maxValue === void 0 ? 100 : _props_maxValue, size = props.size, view = props.view, children = props.children, className = props.className, strokeSize = props.strokeSize, hasTrack = props.hasTrack, style = props.style, _props_zIndex = props.zIndex, zIndex = _props_zIndex === void 0 ? DEFAULT_Z_INDEX : _props_zIndex, onOverlayClick = props.onOverlayClick, rest = _object_without_properties(props, [
@@ -103,20 +99,14 @@ export var loaderRoot = function(Root) {
             return loaderContent;
         }
         var overlayBackgroundToken = overlayColor || "var(".concat(tokens.overlayColor, ")");
-        var overlayNode = /*#__PURE__*/ React.createElement(Overlay, {
+        return /*#__PURE__*/ React.createElement(LoaderWrapper, {
+            zIndex: zIndex
+        }, /*#__PURE__*/ React.createElement(StyledOverlay, {
             className: classes.loaderOverlay,
-            zIndex: zIndex || DEFAULT_Z_INDEX,
-            backgroundColorProperty: overlayBackgroundToken,
+            backgroundColorToken: overlayBackgroundToken,
             withBlur: withBlur,
-            isClickable: Boolean(onOverlayClick),
-            onOverlayClick: onOverlayClick
-        });
-        return /*#__PURE__*/ React.createElement(Popup, {
-            opened: true,
-            placement: "center",
-            zIndex: zIndex,
-            overlay: overlayNode
-        }, loaderContent);
+            onClick: onOverlayClick
+        }), /*#__PURE__*/ React.createElement(LoaderContentWrapper, null, loaderContent));
     });
 };
 export var loaderConfig = {

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

@@ -15,7 +15,7 @@ export var base = css([
 ], tokens.width, tokens.height);
 export var StyledSpinner = styled(Spinner).withConfig({
     displayName: "Loader.styles__StyledSpinner",
-    componentId: "sc-beb70c73-0"
+    componentId: "sc-a9704424-0"
 })([
     "",
     ":var(",
@@ -25,7 +25,7 @@ export var StyledSpinner = styled(Spinner).withConfig({
 ], spinnerTokens.size, tokens.spinnerSize, spinnerTokens.color, tokens.spinnerColor);
 export var StyledProgressBarCircular = styled(ProgressBarCircular).withConfig({
     displayName: "Loader.styles__StyledProgressBarCircular",
-    componentId: "sc-beb70c73-1"
+    componentId: "sc-a9704424-1"
 })([
     "",
     ":var(",
@@ -57,3 +57,37 @@ export var StyledProgressBarCircular = styled(ProgressBarCircular).withConfig({
     ":var(",
     ");"
 ], progressBarCircularTokens.size, tokens.progressBarCircularSize, progressBarCircularTokens.width, tokens.progressBarCircularWidth, progressBarCircularTokens.height, tokens.progressBarCircularHeight, progressBarCircularTokens.strokeWidth, tokens.progressBarCircularStrokeWidth, progressBarCircularTokens.strokeSize, tokens.progressBarCircularStrokeSize, progressBarCircularTokens.backgroundStroke, tokens.progressBarCircularBackgroundStroke, progressBarCircularTokens.progressStroke, tokens.progressBarCircularStroke, progressBarCircularTokens.contentColor, tokens.progressBarCircularContentColor, progressBarCircularTokens.contentFontFamily, tokens.progressBarCircularContentFontFamily, progressBarCircularTokens.contentFontSize, tokens.progressBarCircularContentFontSize, progressBarCircularTokens.contentFontStyle, tokens.progressBarCircularContentFontStyle, progressBarCircularTokens.contentFontWeight, tokens.progressBarCircularContentFontWeight, progressBarCircularTokens.contentLetterSpacing, tokens.progressBarCircularContentLetterSpacing, progressBarCircularTokens.contentLineHeight, tokens.progressBarCircularContentLineHeight);
+export var LoaderWrapper = styled.div.withConfig({
+    displayName: "Loader.styles__LoaderWrapper",
+    componentId: "sc-a9704424-2"
+})([
+    "position:fixed;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;z-index:",
+    ";"
+], function(param) {
+    var zIndex = param.zIndex;
+    return zIndex || 9000;
+});
+export var StyledOverlay = styled.div.withConfig({
+    displayName: "Loader.styles__StyledOverlay",
+    componentId: "sc-a9704424-3"
+})([
+    "position:absolute;inset:0;background:var(--plasma_private-overlay-background-color);backdrop-filter:",
+    ";cursor:",
+    ";--plasma_private-overlay-background-color:",
+    ";"
+], function(param) {
+    var withBlur = param.withBlur;
+    return withBlur ? 'blur(1rem)' : 'none';
+}, function(param) {
+    var onClick = param.onClick;
+    return onClick ? 'pointer' : 'default';
+}, function(param) {
+    var backgroundColorToken = param.backgroundColorToken;
+    return backgroundColorToken;
+});
+export var LoaderContentWrapper = styled.div.withConfig({
+    displayName: "Loader.styles__LoaderContentWrapper",
+    componentId: "sc-a9704424-4"
+})([
+    "position:relative;z-index:1;"
+]);