@salutejs/plasma-new-hope 0.336.0-canary.2228.17672900057.0 → 0.336.0-canary.2231.17732581275.0

package/styled-components/cjs/components/TextField/ui/TextFieldChipNew/TextFieldChipNew.styles.js

@@ -0,0 +1,114 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get StyledChip () {
+        return StyledChip;
+    },
+    get TextChip () {
+        return TextChip;
+    }
+});
+var _styledcomponents = /*#__PURE__*/ _interop_require_default(require("styled-components"));
+var _engines = require("../../../../engines");
+var _mixins = require("../../../../mixins");
+var _Chip = require("../../../Chip");
+var _TextFieldtokens = require("../../TextField.tokens");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+// issue #823
+var mergedConfig = (0, _engines.mergeConfig)(_Chip.chipConfig);
+var Chip = (0, _engines.component)(mergedConfig);
+var StyledChip = (0, _styledcomponents.default)(Chip).withConfig({
+    displayName: "TextFieldChipNew.styles__StyledChip",
+    componentId: "sc-ffa02158-0"
+})([
+    "",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":0.4;",
+    " &[readonly]{opacity:var(",
+    ");}"
+], _Chip.chipTokens.color, _TextFieldtokens.tokens.chipColor, _Chip.chipTokens.background, _TextFieldtokens.tokens.chipBackground, _Chip.chipTokens.colorHover, _TextFieldtokens.tokens.chipColorHover, _Chip.chipTokens.backgroundHover, _TextFieldtokens.tokens.chipBackgroundHover, _Chip.chipTokens.colorActive, _TextFieldtokens.tokens.chipColorActive, _Chip.chipTokens.backgroundActive, _TextFieldtokens.tokens.chipBackgroundActive, _Chip.chipTokens.backgroundReadOnly, _TextFieldtokens.tokens.chipBackgroundReadOnly, _Chip.chipTokens.colorReadOnly, _TextFieldtokens.tokens.chipColorReadOnly, _Chip.chipTokens.backgroundReadOnlyHover, _TextFieldtokens.tokens.chipBackgroundReadOnlyHover, _Chip.chipTokens.colorReadOnlyHover, _TextFieldtokens.tokens.chipColorReadOnlyHover, _Chip.chipTokens.borderRadius, _TextFieldtokens.tokens.chipBorderRadius, _Chip.chipTokens.width, _TextFieldtokens.tokens.chipWidth, _Chip.chipTokens.height, _TextFieldtokens.tokens.chipHeight, _Chip.chipTokens.padding, _TextFieldtokens.tokens.chipPadding, _Chip.chipTokens.fontFamily, _TextFieldtokens.tokens.chipFontFamily, _Chip.chipTokens.fontSize, _TextFieldtokens.tokens.chipFontSize, _Chip.chipTokens.fontStyle, _TextFieldtokens.tokens.chipFontStyle, _Chip.chipTokens.fontWeight, _TextFieldtokens.tokens.chipFontWeight, _Chip.chipTokens.letterSpacing, _TextFieldtokens.tokens.chipLetterSpacing, _Chip.chipTokens.lineHeight, _TextFieldtokens.tokens.chipLineHeight, _Chip.chipTokens.clearContentMarginLeft, _TextFieldtokens.tokens.chipClearContentMarginLeft, _Chip.chipTokens.clearContentMarginRight, _TextFieldtokens.tokens.chipClearContentMarginRight, _Chip.chipTokens.closeIconSize, _TextFieldtokens.tokens.chipCloseIconSize, _Chip.chipTokens.closeIconColor, _TextFieldtokens.tokens.chipCloseIconColor, _Chip.chipTokens.focusColor, _TextFieldtokens.tokens.focusColor, _Chip.chipTokens.disabledOpacity, (0, _mixins.addFocus)({
+    outlineOffset: '0.0625rem',
+    outlineSize: '0.0625rem',
+    outlineRadius: "calc(var(".concat(_TextFieldtokens.tokens.chipBorderRadius, ") - 0.1rem)"),
+    outlineColor: "var(".concat(_TextFieldtokens.tokens.focusColor, ")")
+}), _TextFieldtokens.tokens.chipOpacityReadonly);
+var TextChip = _styledcomponents.default.button.withConfig({
+    displayName: "TextFieldChipNew.styles__TextChip",
+    componentId: "sc-ffa02158-1"
+})([
+    "display:block;flex:none;background:none;border:none;outline:none;padding:0;white-space:nowrap;cursor:pointer;font-family:var(",
+    ");font-size:var(",
+    ");font-style:var(",
+    ");font-weight:var(",
+    ");letter-spacing:var(",
+    ");line-height:var(",
+    ");color:var(",
+    ");",
+    " &:after{content:',';}&:last-child{&:after{content:'';}}"
+], _TextFieldtokens.tokens.fontFamily, _TextFieldtokens.tokens.fontSize, _TextFieldtokens.tokens.fontStyle, _TextFieldtokens.tokens.fontWeight, _TextFieldtokens.tokens.letterSpacing, _TextFieldtokens.tokens.lineHeight, _TextFieldtokens.tokens.color, (0, _mixins.addFocus)({
+    outlineOffset: '0.0625rem',
+    outlineSize: '0.0625rem',
+    outlineRadius: "calc(var(".concat(_TextFieldtokens.tokens.chipBorderRadius, ") - 0.1rem)"),
+    outlineColor: "var(".concat(_TextFieldtokens.tokens.focusColor, ")")
+}));

package/styled-components/cjs/components/TextField/ui/index.js

@@ -2,10 +2,19 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "TextFieldChip", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get TextFieldChip () {
         return _TextFieldChip.TextFieldChip;
+    },
+    get TextFieldChipNew () {
+        return _TextFieldChipNew.TextFieldChipNew;
     }
 });
 var _TextFieldChip = require("./TextFieldChip/TextFieldChip");
+var _TextFieldChipNew = require("./TextFieldChipNew/TextFieldChipNew");

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

@@ -168,7 +168,7 @@ function _unsupported_iterable_to_array(o, minLen) {
 }
 var treeRoot = function(Root) {
     return /*#__PURE__*/ (0, _react.forwardRef)(function(param, ref) {
-        var items = param.items, _param_arrowPlacement = param.arrowPlacement, arrowPlacement = _param_arrowPlacement === void 0 ? 'left' : _param_arrowPlacement, _param_virtual = param.virtual, virtual = _param_virtual === void 0 ? true : _param_virtual, height = param.height, itemHeight = param.itemHeight, size = param.size, view = param.view, _param_fullWidthItemSelection = param.fullWidthItemSelection, fullWidthItemSelection = _param_fullWidthItemSelection === void 0 ? false : _param_fullWidthItemSelection, _param_multiple = param.multiple, multiple = _param_multiple === void 0 ? false : _param_multiple, _param_defaultExpandAll = param.defaultExpandAll, defaultExpandAll = _param_defaultExpandAll === void 0 ? false : _param_defaultExpandAll, _param_autoExpandParent = param.autoExpandParent, autoExpandParent = _param_autoExpandParent === void 0 ? false : _param_autoExpandParent, _param_checkable = param.checkable, checkable = _param_checkable === void 0 ? false : _param_checkable, outerSelectedKeys = param.selectedKeys, checkedKeys = param.checkedKeys, expandedKeys = param.expandedKeys, defaultCheckedKeys = param.defaultCheckedKeys, defaultExpandedKeys = param.defaultExpandedKeys, defaultSelectedKeys = param.defaultSelectedKeys, className = param.className, onTreeSelect = param.onTreeSelect, onTreeCheck = param.onTreeCheck, onTreeExpand = param.onTreeExpand, _param_hasIcon = param.hasIcon, hasIcon = _param_hasIcon === void 0 ? false : _param_hasIcon, icon = param.icon, renderTitle = param.renderTitle, _param_mode = param.mode, mode = _param_mode === void 0 ? 'default' : _param_mode;
+        var items = param.items, _param_arrowPlacement = param.arrowPlacement, arrowPlacement = _param_arrowPlacement === void 0 ? 'left' : _param_arrowPlacement, _param_virtual = param.virtual, virtual = _param_virtual === void 0 ? true : _param_virtual, height = param.height, itemHeight = param.itemHeight, size = param.size, view = param.view, _param_fullWidthItemSelection = param.fullWidthItemSelection, fullWidthItemSelection = _param_fullWidthItemSelection === void 0 ? false : _param_fullWidthItemSelection, _param_multiple = param.multiple, multiple = _param_multiple === void 0 ? false : _param_multiple, _param_defaultExpandAll = param.defaultExpandAll, defaultExpandAll = _param_defaultExpandAll === void 0 ? false : _param_defaultExpandAll, _param_autoExpandParent = param.autoExpandParent, autoExpandParent = _param_autoExpandParent === void 0 ? false : _param_autoExpandParent, _param_checkable = param.checkable, checkable = _param_checkable === void 0 ? false : _param_checkable, outerSelectedKeys = param.selectedKeys, checkedKeys = param.checkedKeys, expandedKeys = param.expandedKeys, defaultCheckedKeys = param.defaultCheckedKeys, defaultExpandedKeys = param.defaultExpandedKeys, defaultSelectedKeys = param.defaultSelectedKeys, className = param.className, onTreeSelect = param.onTreeSelect, onTreeCheck = param.onTreeCheck, onTreeExpand = param.onTreeExpand, _param_hasIcon = param.hasIcon, hasIcon = _param_hasIcon === void 0 ? false : _param_hasIcon, icon = param.icon, renderTitle = param.renderTitle, _param_mode = param.mode, mode = _param_mode === void 0 ? 'default' : _param_mode, _param_draggable = param.draggable, draggable = _param_draggable === void 0 ? false : _param_draggable, onDragStart = param.onDragStart, onDragEnter = param.onDragEnter, onDragOver = param.onDragOver, onDragLeave = param.onDragLeave, onDragEnd = param.onDragEnd, onDrop = param.onDrop, allowDrop = param.allowDrop;
         var _useState = _sliced_to_array((0, _react.useState)(defaultSelectedKeys || []), 2), selected = _useState[0], setSelected = _useState[1];
         var selectedKeys = outerSelectedKeys !== null && outerSelectedKeys !== void 0 ? outerSelectedKeys : selected;
         var isRadioMode = mode === 'radio' && !multiple;
@@ -241,6 +241,36 @@ var treeRoot = function(Root) {
                     fullWidthItemSelection: fullWidthItemSelection,
                     arrowPlacement: arrowPlacement
                 }, /*#__PURE__*/ _react.default.createElement(_Treestyles.Title, null, renderTitle ? renderTitle(item) : typeof item.title === 'function' ? item.title(item) : item.title), item.contentRight && /*#__PURE__*/ _react.default.createElement(_Treestyles.ContentRight, null, item.contentRight));
+            },
+            draggable: draggable,
+            onDragStart: onDragStart,
+            onDragEnter: onDragEnter,
+            onDragOver: onDragOver,
+            onDragLeave: onDragLeave,
+            onDragEnd: onDragEnd,
+            onDrop: onDrop,
+            allowDrop: allowDrop,
+            dropIndicatorRender: function(props) {
+                var offset = 0;
+                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;
+                }
+                return /*#__PURE__*/ _react.default.createElement(_Treestyles.Line, {
+                    style: style,
+                    left: left
+                });
             }
         })));
     });

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

@@ -15,6 +15,9 @@ _export(exports, {
     get IconArrowWrapper () {
         return IconArrowWrapper;
     },
+    get Line () {
+        return Line;
+    },
     get StyledArrow () {
         return StyledArrow;
     },
@@ -78,7 +81,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 var IconArrowWrapper = _styledcomponents.default.div.withConfig({
     displayName: "Tree.styles__IconArrowWrapper",
-    componentId: "sc-b806b1cc-0"
+    componentId: "sc-8ac26406-0"
 })([
     "line-height:0;color:var(",
     ");&:hover{color:var(",
@@ -87,19 +90,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-b806b1cc-1"
+    componentId: "sc-8ac26406-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-b806b1cc-2"
+    componentId: "sc-8ac26406-2"
 })([
     ""
 ]);
 var TitleWrapper = _styledcomponents.default.div.withConfig({
     displayName: "Tree.styles__TitleWrapper",
-    componentId: "sc-b806b1cc-3"
+    componentId: "sc-8ac26406-3"
 })([
     "display:flex;align-items:center;justify-content:space-between;margin:",
     ";",
@@ -110,7 +113,7 @@ var TitleWrapper = _styledcomponents.default.div.withConfig({
 }, (0, _mixins.applyEllipsis)());
 var Title = _styledcomponents.default.span.withConfig({
     displayName: "Tree.styles__Title",
-    componentId: "sc-b806b1cc-4"
+    componentId: "sc-8ac26406-4"
 })([
     "margin:var(",
     ");",
@@ -118,12 +121,25 @@ var Title = _styledcomponents.default.span.withConfig({
 ], _Treetokens.treeTokens.iconFolderMargin, (0, _mixins.applyEllipsis)());
 var ContentRight = _styledcomponents.default.div.withConfig({
     displayName: "Tree.styles__ContentRight",
-    componentId: "sc-b806b1cc-5"
+    componentId: "sc-8ac26406-5"
 })([
     "line-height:0;"
 ]);
+var Line = _styledcomponents.default.div.withConfig({
+    displayName: "Tree.styles__Line",
+    componentId: "sc-8ac26406-6"
+})([
+    "left:",
+    "px;right:0;position:absolute;z-index:1;height:0.125rem;background-color:var(",
+    ");border-radius:1px;pointer-events:none;"
+], function(param) {
+    var left = param.left;
+    return left;
+}, _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{margin:0;padding:0;line-height:24px;white-space:nowrap;list-style:none;outline:0;}.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{background:rgba(100,100,255,0.1);}.rc-tree .rc-tree-treenode.drop-container > .draggable::after{position:absolute;top:0;right:0;bottom:0;left:0;box-shadow:inset 0 0 0 2px red;content:'';}.rc-tree .rc-tree-treenode.drop-container ~ .rc-tree-treenode{border-left:2px solid chocolate;}.rc-tree .rc-tree-treenode.drop-target{background-color:yellowgreen;}.rc-tree .rc-tree-treenode.drop-target ~ .rc-tree-treenode{border-left:none;}.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;display:inline-block;height:24px;margin:0;padding:0;text-decoration:none;vertical-align:top;cursor:pointer;color: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{margin:0;padding:0;line-height:24px;white-space:nowrap;list-style:none;outline:0;}.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;display:inline-block;height:24px;margin:0;padding:0;text-decoration:none;vertical-align:top;cursor:pointer;color:var(",
     ");}.rc-tree.",
     " .rc-tree-treenode.rc-tree-treenode-selected .rc-tree-node-content-wrapper{cursor:default;}.rc-tree .rc-tree-treenode.rc-tree-treenode-disabled .rc-tree-node-content-wrapper,.rc-tree .rc-tree-treenode.rc-tree-treenode-disabled span.rc-tree-switcher,.rc-tree .rc-tree-treenode.rc-tree-treenode-disabled span.rc-tree-checkbox,.rc-tree .rc-tree-treenode.rc-tree-treenode-disabled span.rc-tree-iconEle{cursor:default;}.rc-tree .rc-tree-treenode span.rc-tree-switcher,.rc-tree .rc-tree-treenode span.rc-tree-checkbox,.rc-tree .rc-tree-treenode span.rc-tree-iconEle{cursor:pointer;}.rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-icon__customize,.rc-tree .rc-tree-treenode span.rc-tree-checkbox.rc-tree-icon__customize,.rc-tree .rc-tree-treenode span.rc-tree-iconEle.rc-tree-icon__customize{background-image:none;}.rc-tree .rc-tree-treenode span.rc-tree-icon_loading{margin-right:2px;vertical-align:top;background:url('data:image/gif;base64,R0lGODlhEAAQAKIGAMLY8YSx5HOm4Mjc88/g9Ofw+v///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCgAGACwAAAAAEAAQAAADMGi6RbUwGjKIXCAA016PgRBElAVlG/RdLOO0X9nK61W39qvqiwz5Ls/rRqrggsdkAgAh+QQFCgAGACwCAAAABwAFAAADD2hqELAmiFBIYY4MAutdCQAh+QQFCgAGACwGAAAABwAFAAADD1hU1kaDOKMYCGAGEeYFCQAh+QQFCgAGACwKAAIABQAHAAADEFhUZjSkKdZqBQG0IELDQAIAIfkEBQoABgAsCgAGAAUABwAAAxBoVlRKgyjmlAIBqCDCzUoCACH5BAUKAAYALAYACgAHAAUAAAMPaGpFtYYMAgJgLogA610JACH5BAUKAAYALAIACgAHAAUAAAMPCAHWFiI4o1ghZZJB5i0JACH5BAUKAAYALAAABgAFAAcAAAMQCAFmIaEp1motpDQySMNFAgA7') no-repeat scroll 0 0 transparent;}.rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher-noop{flex:none;}.rc-tree.",
     " .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher-noop{display:none;}.rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher_open{background-position:-93px -56px;}.rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher_close{background-position:-75px -56px;}.rc-tree .rc-tree-treenode span.rc-tree-checkbox{width:13px;height:13px;margin:0 3px;background-position:0 0;}.rc-tree .rc-tree-treenode span.rc-tree-checkbox-checked{background-position:-14px 0;}.rc-tree .rc-tree-treenode span.rc-tree-checkbox-indeterminate{background-position:-14px -28px;}.rc-tree .rc-tree-treenode span.rc-tree-checkbox-disabled{background-position:0 -56px;}.rc-tree .rc-tree-treenode span.rc-tree-checkbox.rc-tree-checkbox-checked.rc-tree-checkbox-disabled{background-position:-14px -56px;}.rc-tree .rc-tree-treenode span.rc-tree-checkbox.rc-tree-checkbox-indeterminate.rc-tree-checkbox-disabled{position:relative;background:#ccc;border-radius:3px;}.rc-tree .rc-tree-treenode span.rc-tree-checkbox.rc-tree-checkbox-indeterminate.rc-tree-checkbox-disabled::after{position:absolute;top:5px;left:3px;width:5px;height:0;border:2px solid #fff;border-top:0;border-left:0;-webkit-transform:scale(1);transform:scale(1);content:' ';}.rc-tree:not(.rc-tree-show-line) .rc-tree-treenode .rc-tree-switcher-noop{background:none;}.rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child) > ul{background:url('data:image/gif;base64,R0lGODlhCQACAIAAAMzMzP///yH5BAEAAAEALAAAAAAJAAIAAAIEjI9pUAA7') 0 0 repeat-y;}.rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child) > .rc-tree-switcher-noop{background-position:-56px -18px;}.rc-tree.rc-tree-show-line .rc-tree-treenode:last-child > .rc-tree-switcher-noop{background-position:-56px -36px;}.rc-tree-child-tree{display:none;}.rc-tree-child-tree-open{display:block;}.rc-tree-treenode-disabled > span:not(.rc-tree-switcher),.rc-tree-treenode-disabled > a,.rc-tree-treenode-disabled > a span{color:#767676;cursor:not-allowed;}.rc-tree-treenode-active{background:rgba(0,0,0,0.1);}.rc-tree-node-selected{background-color:#ffe6b0;box-shadow:0 0 0 1px #ffb951;opacity:0.8;}.rc-tree-icon__open{margin-right:0;vertical-align:top;background-position:-110px -16px;}.rc-tree-icon__close{margin-right:0;vertical-align:top;background-position:-110px 0;}.rc-tree-icon__docu{margin-right:0;vertical-align:top;background-position:-110px -32px;}.rc-tree-icon__customize{display:block;line-height:0;color:var(",
@@ -185,4 +201,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.color, _Treetokens.classes.treeRadioMode, _Treetokens.classes.treeInverted, _Treetokens.treeTokens.iconFolderColor, _Treetokens.treeTokens.iconFolderMargin, _Treetokens.treeTokens.itemHeight, _Treetokens.classes.treeItemFilled, _Treetokens.treeTokens.itemPadding, _Treetokens.classes.treeInverted, _Treetokens.classes.treeItemFilled, _Treetokens.treeTokens.itemPaddingTight, _Treetokens.treeTokens.itemTop, _Treetokens.treeTokens.itemBottom, _Treetokens.treeTokens.switcherSize, _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.classes.treeLeafNode, _Treetokens.treeTokens.itemDraggableBorderColor, _Treetokens.treeTokens.color, _Treetokens.classes.treeRadioMode, _Treetokens.classes.treeInverted, _Treetokens.treeTokens.iconFolderColor, _Treetokens.treeTokens.iconFolderMargin, _Treetokens.treeTokens.itemHeight, _Treetokens.classes.treeItemFilled, _Treetokens.treeTokens.itemPadding, _Treetokens.classes.treeInverted, _Treetokens.classes.treeItemFilled, _Treetokens.treeTokens.itemPaddingTight, _Treetokens.treeTokens.itemTop, _Treetokens.treeTokens.itemBottom, _Treetokens.treeTokens.switcherSize, _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

@@ -21,7 +21,8 @@ var classes = {
     treeItemFilled: 'tree-item-filled',
     treeItemPrimaryBackground: 'tree-item-primary-background',
     treeItemHasSelectedChildren: 'tree-item-has-selected-children',
-    treeRadioMode: 'tree-radio-mode'
+    treeRadioMode: 'tree-radio-mode',
+    treeLeafNode: 'tree-leaf-node'
 };
 var treeTokens = {
     arrowColor: '--plasma-tree-arrow-color',
@@ -59,5 +60,7 @@ var treeTokens = {
     itemBackgroundColorActive: '--plasma-tree-item-background-color-active',
     itemDisabledOpacity: '--plasma-tree-item-disabled-opacity',
     itemDisabledColor: '--plasma-tree-item-disabled-color',
-    itemDisabledBorderColor: '--plasma-tree-item-disabled-border-color'
+    itemDisabledBorderColor: '--plasma-tree-item-disabled-border-color',
+    itemDraggableBorderColor: '--plasma-tree-item-draggable-border-color',
+    itemDraggableLineColor: '--plasma-tree-item-draggable-line-color'
 };

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

@@ -117,6 +117,9 @@ var dfs = function(node, selectedKeys, rootParentsSelected, parents) {
     })[0]) === null || _parents_filter_ === void 0 ? void 0 : _parents_filter_.key)) {
         node.className = (0, _dedupe.default)(node.className, _Treetokens.classes.treeItemPrimaryBackground);
     }
+    if (!node.children) {
+        node.className = (0, _dedupe.default)(node.className, _Treetokens.classes.treeLeafNode);
+    }
 };
 var getRootParentsSelectedChildren = function(node, selectedKeysSet) {
     var rootParentsSelected = new Set();
@@ -141,9 +144,6 @@ var getRootParentsSelectedChildren = function(node, selectedKeysSet) {
     return rootParentsSelected;
 };
 var traverseTree = function(items, selectedKeys) {
-    if (!selectedKeys || selectedKeys.length === 0) {
-        return items;
-    }
     var selectedKeysSet = new Set(selectedKeys);
     var copyItems = deepCopy(items);
     var rootParentsSelected = getRootParentsSelectedChildren({

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

@@ -36,8 +36,9 @@ var config = {
                 ":transparent;",
                 ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-solid-default) 85% );",
                 ":var(--text-primary);",
+                ":var(--text-secondary);",
                 ":var(--surface-accent);"
-            ], _Pagination.paginationTokens.buttonColor, _Pagination.paginationTokens.buttonColorHover, _Pagination.paginationTokens.buttonColorActive, _Pagination.paginationTokens.buttonHoverColor, _Pagination.paginationTokens.buttonBackgroundColor, _Pagination.paginationTokens.buttonBackgroundColorHover, _Pagination.paginationTokens.buttonBackgroundColorActive, _Pagination.paginationTokens.buttonActiveColor, _Pagination.paginationTokens.buttonArrowColor, _Pagination.paginationTokens.buttonArrowColorHover, _Pagination.paginationTokens.buttonArrowColorActive, _Pagination.paginationTokens.buttonDisabledOpacity, _Pagination.paginationTokens.inputBackgroundColor, _Pagination.paginationTokens.inputBorderColor, _Pagination.paginationTokens.selectBackgroundColor, _Pagination.paginationTokens.paginationColor, _Pagination.paginationTokens.buttonFocusColor),
+            ], _Pagination.paginationTokens.buttonColor, _Pagination.paginationTokens.buttonColorHover, _Pagination.paginationTokens.buttonColorActive, _Pagination.paginationTokens.buttonHoverColor, _Pagination.paginationTokens.buttonBackgroundColor, _Pagination.paginationTokens.buttonBackgroundColorHover, _Pagination.paginationTokens.buttonBackgroundColorActive, _Pagination.paginationTokens.buttonActiveColor, _Pagination.paginationTokens.buttonArrowColor, _Pagination.paginationTokens.buttonArrowColorHover, _Pagination.paginationTokens.buttonArrowColorActive, _Pagination.paginationTokens.buttonDisabledOpacity, _Pagination.paginationTokens.inputBackgroundColor, _Pagination.paginationTokens.inputBorderColor, _Pagination.paginationTokens.selectBackgroundColor, _Pagination.paginationTokens.paginationColor, _Pagination.paginationTokens.paginationHelperTextColor, _Pagination.paginationTokens.buttonFocusColor),
             secondary: (0, _styledcomponents.css)([
                 "",
                 ":var(--text-primary);",
@@ -56,8 +57,9 @@ var config = {
                 ":var(--surface-solid-secondary);",
                 ":transparent;",
                 ":var(--text-primary);",
+                ":var(--text-secondary);",
                 ":var(--surface-accent);"
-            ], _Pagination.paginationTokens.buttonColor, _Pagination.paginationTokens.buttonColorHover, _Pagination.paginationTokens.buttonColorActive, _Pagination.paginationTokens.buttonBackgroundColor, _Pagination.paginationTokens.buttonBackgroundColorHover, _Pagination.paginationTokens.buttonBackgroundColorActive, _Pagination.paginationTokens.buttonHoverColor, _Pagination.paginationTokens.buttonActiveColor, _Pagination.paginationTokens.buttonArrowColor, _Pagination.paginationTokens.buttonArrowColorHover, _Pagination.paginationTokens.buttonArrowColorActive, _Pagination.paginationTokens.buttonDisabledOpacity, _Pagination.paginationTokens.inputBackgroundColor, _Pagination.paginationTokens.selectBackgroundColor, _Pagination.paginationTokens.inputBorderColor, _Pagination.paginationTokens.paginationColor, _Pagination.paginationTokens.buttonFocusColor),
+            ], _Pagination.paginationTokens.buttonColor, _Pagination.paginationTokens.buttonColorHover, _Pagination.paginationTokens.buttonColorActive, _Pagination.paginationTokens.buttonBackgroundColor, _Pagination.paginationTokens.buttonBackgroundColorHover, _Pagination.paginationTokens.buttonBackgroundColorActive, _Pagination.paginationTokens.buttonHoverColor, _Pagination.paginationTokens.buttonActiveColor, _Pagination.paginationTokens.buttonArrowColor, _Pagination.paginationTokens.buttonArrowColorHover, _Pagination.paginationTokens.buttonArrowColorActive, _Pagination.paginationTokens.buttonDisabledOpacity, _Pagination.paginationTokens.inputBackgroundColor, _Pagination.paginationTokens.selectBackgroundColor, _Pagination.paginationTokens.inputBorderColor, _Pagination.paginationTokens.paginationColor, _Pagination.paginationTokens.paginationHelperTextColor, _Pagination.paginationTokens.buttonFocusColor),
             clear: (0, _styledcomponents.css)([
                 "",
                 ":var(--text-primary);",
@@ -76,8 +78,9 @@ var config = {
                 ":var(--surface-solid-card);",
                 ":transparent;",
                 ":var(--text-primary);",
+                ":var(--text-secondary);",
                 ":var(--surface-accent);"
-            ], _Pagination.paginationTokens.buttonColor, _Pagination.paginationTokens.buttonColorHover, _Pagination.paginationTokens.buttonColorActive, _Pagination.paginationTokens.buttonBackgroundColor, _Pagination.paginationTokens.buttonBackgroundColorHover, _Pagination.paginationTokens.buttonBackgroundColorActive, _Pagination.paginationTokens.buttonHoverColor, _Pagination.paginationTokens.buttonActiveColor, _Pagination.paginationTokens.buttonArrowColor, _Pagination.paginationTokens.buttonArrowColorHover, _Pagination.paginationTokens.buttonArrowColorActive, _Pagination.paginationTokens.buttonDisabledOpacity, _Pagination.paginationTokens.inputBackgroundColor, _Pagination.paginationTokens.selectBackgroundColor, _Pagination.paginationTokens.inputBorderColor, _Pagination.paginationTokens.paginationColor, _Pagination.paginationTokens.buttonFocusColor)
+            ], _Pagination.paginationTokens.buttonColor, _Pagination.paginationTokens.buttonColorHover, _Pagination.paginationTokens.buttonColorActive, _Pagination.paginationTokens.buttonBackgroundColor, _Pagination.paginationTokens.buttonBackgroundColorHover, _Pagination.paginationTokens.buttonBackgroundColorActive, _Pagination.paginationTokens.buttonHoverColor, _Pagination.paginationTokens.buttonActiveColor, _Pagination.paginationTokens.buttonArrowColor, _Pagination.paginationTokens.buttonArrowColorHover, _Pagination.paginationTokens.buttonArrowColorActive, _Pagination.paginationTokens.buttonDisabledOpacity, _Pagination.paginationTokens.inputBackgroundColor, _Pagination.paginationTokens.selectBackgroundColor, _Pagination.paginationTokens.inputBorderColor, _Pagination.paginationTokens.paginationColor, _Pagination.paginationTokens.paginationHelperTextColor, _Pagination.paginationTokens.buttonFocusColor)
         },
         viewCurrentPage: {
             default: (0, _styledcomponents.css)([
@@ -142,8 +145,9 @@ var config = {
                 ":4rem;",
                 ":3.5rem;",
                 ":0 0.625rem;",
-                ":0.0625rem;"
-            ], _Pagination.paginationTokens.paginationFontFamily, _Pagination.paginationTokens.paginationFontSize, _Pagination.paginationTokens.paginationFontStyle, _Pagination.paginationTokens.paginationFontWeight, _Pagination.paginationTokens.paginationLetterSpacing, _Pagination.paginationTokens.paginationLineHeight, _Pagination.paginationTokens.buttonHeight, _Pagination.paginationTokens.buttonWidth, _Pagination.paginationTokens.buttonWidthShorter, _Pagination.paginationTokens.paginationInputWidth, _Pagination.paginationTokens.buttonRadius, _Pagination.paginationTokens.paginationIconSize, _Pagination.paginationTokens.paginationIconDoubleSize, _Pagination.paginationTokens.buttonArrowMargin, _Pagination.paginationTokens.selectHeight, _Pagination.paginationTokens.selectPaddingTop, _Pagination.paginationTokens.selectPaddingRight, _Pagination.paginationTokens.selectPaddingBottom, _Pagination.paginationTokens.selectPaddingLeft, _Pagination.paginationTokens.selectItemHeight, _Pagination.paginationTokens.selectItemPadding, _Pagination.paginationTokens.selectItemContentLeftWidth, _Pagination.paginationTokens.selectItemBackground, _Pagination.paginationTokens.selectTargetArrowRight, _Pagination.paginationTokens.selectTargetPadding, _Pagination.paginationTokens.selectTargetInnerTop, _Pagination.paginationTokens.selectTargetLabelInnerTop, _Pagination.paginationTokens.inputBorderRadius, _Pagination.paginationTokens.inputWidth, _Pagination.paginationTokens.inputHeight, _Pagination.paginationTokens.inputPadding, _Pagination.paginationTokens.inputBorderWidth),
+                ":0.0625rem;",
+                ":0.5rem 2.5rem;"
+            ], _Pagination.paginationTokens.paginationFontFamily, _Pagination.paginationTokens.paginationFontSize, _Pagination.paginationTokens.paginationFontStyle, _Pagination.paginationTokens.paginationFontWeight, _Pagination.paginationTokens.paginationLetterSpacing, _Pagination.paginationTokens.paginationLineHeight, _Pagination.paginationTokens.buttonHeight, _Pagination.paginationTokens.buttonWidth, _Pagination.paginationTokens.buttonWidthShorter, _Pagination.paginationTokens.paginationInputWidth, _Pagination.paginationTokens.buttonRadius, _Pagination.paginationTokens.paginationIconSize, _Pagination.paginationTokens.paginationIconDoubleSize, _Pagination.paginationTokens.buttonArrowMargin, _Pagination.paginationTokens.selectHeight, _Pagination.paginationTokens.selectPaddingTop, _Pagination.paginationTokens.selectPaddingRight, _Pagination.paginationTokens.selectPaddingBottom, _Pagination.paginationTokens.selectPaddingLeft, _Pagination.paginationTokens.selectItemHeight, _Pagination.paginationTokens.selectItemPadding, _Pagination.paginationTokens.selectItemContentLeftWidth, _Pagination.paginationTokens.selectItemBackground, _Pagination.paginationTokens.selectTargetArrowRight, _Pagination.paginationTokens.selectTargetPadding, _Pagination.paginationTokens.selectTargetInnerTop, _Pagination.paginationTokens.selectTargetLabelInnerTop, _Pagination.paginationTokens.inputBorderRadius, _Pagination.paginationTokens.inputWidth, _Pagination.paginationTokens.inputHeight, _Pagination.paginationTokens.inputPadding, _Pagination.paginationTokens.inputBorderWidth, _Pagination.paginationTokens.paginationHelperTextGap),
             m: (0, _styledcomponents.css)([
                 "",
                 ":var(--plasma-typo-body-m-font-family);",
@@ -177,8 +181,9 @@ var config = {
                 ":3.5rem;",
                 ":3rem;",
                 ":0 0.625rem;",
-                ":0.0625rem;"
-            ], _Pagination.paginationTokens.paginationFontFamily, _Pagination.paginationTokens.paginationFontSize, _Pagination.paginationTokens.paginationFontStyle, _Pagination.paginationTokens.paginationFontWeight, _Pagination.paginationTokens.paginationLetterSpacing, _Pagination.paginationTokens.paginationLineHeight, _Pagination.paginationTokens.buttonHeight, _Pagination.paginationTokens.buttonWidth, _Pagination.paginationTokens.buttonWidthShorter, _Pagination.paginationTokens.paginationInputWidth, _Pagination.paginationTokens.buttonRadius, _Pagination.paginationTokens.paginationIconSize, _Pagination.paginationTokens.paginationIconDoubleSize, _Pagination.paginationTokens.buttonArrowMargin, _Pagination.paginationTokens.selectHeight, _Pagination.paginationTokens.selectPaddingTop, _Pagination.paginationTokens.selectPaddingRight, _Pagination.paginationTokens.selectPaddingBottom, _Pagination.paginationTokens.selectPaddingLeft, _Pagination.paginationTokens.selectItemHeight, _Pagination.paginationTokens.selectItemPadding, _Pagination.paginationTokens.selectItemContentLeftWidth, _Pagination.paginationTokens.selectItemBackground, _Pagination.paginationTokens.selectTargetArrowRight, _Pagination.paginationTokens.selectTargetPadding, _Pagination.paginationTokens.selectTargetInnerTop, _Pagination.paginationTokens.selectTargetLabelInnerTop, _Pagination.paginationTokens.inputBorderRadius, _Pagination.paginationTokens.inputWidth, _Pagination.paginationTokens.inputHeight, _Pagination.paginationTokens.inputPadding, _Pagination.paginationTokens.inputBorderWidth),
+                ":0.0625rem;",
+                ":0.5rem 2.5rem;"
+            ], _Pagination.paginationTokens.paginationFontFamily, _Pagination.paginationTokens.paginationFontSize, _Pagination.paginationTokens.paginationFontStyle, _Pagination.paginationTokens.paginationFontWeight, _Pagination.paginationTokens.paginationLetterSpacing, _Pagination.paginationTokens.paginationLineHeight, _Pagination.paginationTokens.buttonHeight, _Pagination.paginationTokens.buttonWidth, _Pagination.paginationTokens.buttonWidthShorter, _Pagination.paginationTokens.paginationInputWidth, _Pagination.paginationTokens.buttonRadius, _Pagination.paginationTokens.paginationIconSize, _Pagination.paginationTokens.paginationIconDoubleSize, _Pagination.paginationTokens.buttonArrowMargin, _Pagination.paginationTokens.selectHeight, _Pagination.paginationTokens.selectPaddingTop, _Pagination.paginationTokens.selectPaddingRight, _Pagination.paginationTokens.selectPaddingBottom, _Pagination.paginationTokens.selectPaddingLeft, _Pagination.paginationTokens.selectItemHeight, _Pagination.paginationTokens.selectItemPadding, _Pagination.paginationTokens.selectItemContentLeftWidth, _Pagination.paginationTokens.selectItemBackground, _Pagination.paginationTokens.selectTargetArrowRight, _Pagination.paginationTokens.selectTargetPadding, _Pagination.paginationTokens.selectTargetInnerTop, _Pagination.paginationTokens.selectTargetLabelInnerTop, _Pagination.paginationTokens.inputBorderRadius, _Pagination.paginationTokens.inputWidth, _Pagination.paginationTokens.inputHeight, _Pagination.paginationTokens.inputPadding, _Pagination.paginationTokens.inputBorderWidth, _Pagination.paginationTokens.paginationHelperTextGap),
             s: (0, _styledcomponents.css)([
                 "",
                 ":var(--plasma-typo-body-s-font-family);",
@@ -212,8 +217,9 @@ var config = {
                 ":3rem;",
                 ":2.5rem;",
                 ":0 0.625rem;",
-                ":0.0625rem;"
-            ], _Pagination.paginationTokens.paginationFontFamily, _Pagination.paginationTokens.paginationFontSize, _Pagination.paginationTokens.paginationFontStyle, _Pagination.paginationTokens.paginationFontWeight, _Pagination.paginationTokens.paginationLetterSpacing, _Pagination.paginationTokens.paginationLineHeight, _Pagination.paginationTokens.buttonHeight, _Pagination.paginationTokens.buttonWidth, _Pagination.paginationTokens.buttonWidthShorter, _Pagination.paginationTokens.paginationInputWidth, _Pagination.paginationTokens.buttonRadius, _Pagination.paginationTokens.paginationIconSize, _Pagination.paginationTokens.paginationIconDoubleSize, _Pagination.paginationTokens.buttonArrowMargin, _Pagination.paginationTokens.selectHeight, _Pagination.paginationTokens.selectPaddingTop, _Pagination.paginationTokens.selectPaddingRight, _Pagination.paginationTokens.selectPaddingBottom, _Pagination.paginationTokens.selectPaddingLeft, _Pagination.paginationTokens.selectItemHeight, _Pagination.paginationTokens.selectItemPadding, _Pagination.paginationTokens.selectItemContentLeftWidth, _Pagination.paginationTokens.selectItemBackground, _Pagination.paginationTokens.selectTargetArrowRight, _Pagination.paginationTokens.selectTargetPadding, _Pagination.paginationTokens.selectTargetInnerTop, _Pagination.paginationTokens.selectTargetLabelInnerTop, _Pagination.paginationTokens.inputBorderRadius, _Pagination.paginationTokens.inputWidth, _Pagination.paginationTokens.inputHeight, _Pagination.paginationTokens.inputPadding, _Pagination.paginationTokens.inputBorderWidth),
+                ":0.0625rem;",
+                ":0.5rem 2.5rem;"
+            ], _Pagination.paginationTokens.paginationFontFamily, _Pagination.paginationTokens.paginationFontSize, _Pagination.paginationTokens.paginationFontStyle, _Pagination.paginationTokens.paginationFontWeight, _Pagination.paginationTokens.paginationLetterSpacing, _Pagination.paginationTokens.paginationLineHeight, _Pagination.paginationTokens.buttonHeight, _Pagination.paginationTokens.buttonWidth, _Pagination.paginationTokens.buttonWidthShorter, _Pagination.paginationTokens.paginationInputWidth, _Pagination.paginationTokens.buttonRadius, _Pagination.paginationTokens.paginationIconSize, _Pagination.paginationTokens.paginationIconDoubleSize, _Pagination.paginationTokens.buttonArrowMargin, _Pagination.paginationTokens.selectHeight, _Pagination.paginationTokens.selectPaddingTop, _Pagination.paginationTokens.selectPaddingRight, _Pagination.paginationTokens.selectPaddingBottom, _Pagination.paginationTokens.selectPaddingLeft, _Pagination.paginationTokens.selectItemHeight, _Pagination.paginationTokens.selectItemPadding, _Pagination.paginationTokens.selectItemContentLeftWidth, _Pagination.paginationTokens.selectItemBackground, _Pagination.paginationTokens.selectTargetArrowRight, _Pagination.paginationTokens.selectTargetPadding, _Pagination.paginationTokens.selectTargetInnerTop, _Pagination.paginationTokens.selectTargetLabelInnerTop, _Pagination.paginationTokens.inputBorderRadius, _Pagination.paginationTokens.inputWidth, _Pagination.paginationTokens.inputHeight, _Pagination.paginationTokens.inputPadding, _Pagination.paginationTokens.inputBorderWidth, _Pagination.paginationTokens.paginationHelperTextGap),
             xs: (0, _styledcomponents.css)([
                 "",
                 ":var(--plasma-typo-body-xs-font-family);",
@@ -247,8 +253,9 @@ var config = {
                 ":2.5rem;",
                 ":2rem;",
                 ":0 0.625rem;",
-                ":0.0625rem;"
-            ], _Pagination.paginationTokens.paginationFontFamily, _Pagination.paginationTokens.paginationFontSize, _Pagination.paginationTokens.paginationFontStyle, _Pagination.paginationTokens.paginationFontWeight, _Pagination.paginationTokens.paginationLetterSpacing, _Pagination.paginationTokens.paginationLineHeight, _Pagination.paginationTokens.buttonHeight, _Pagination.paginationTokens.paginationInputWidth, _Pagination.paginationTokens.buttonRadius, _Pagination.paginationTokens.buttonWidth, _Pagination.paginationTokens.buttonWidthShorter, _Pagination.paginationTokens.paginationIconSize, _Pagination.paginationTokens.paginationIconDoubleSize, _Pagination.paginationTokens.buttonArrowMargin, _Pagination.paginationTokens.selectHeight, _Pagination.paginationTokens.selectPaddingTop, _Pagination.paginationTokens.selectPaddingRight, _Pagination.paginationTokens.selectPaddingBottom, _Pagination.paginationTokens.selectPaddingLeft, _Pagination.paginationTokens.selectItemHeight, _Pagination.paginationTokens.selectItemPadding, _Pagination.paginationTokens.selectItemContentLeftWidth, _Pagination.paginationTokens.selectItemBackground, _Pagination.paginationTokens.selectTargetArrowRight, _Pagination.paginationTokens.selectTargetPadding, _Pagination.paginationTokens.selectTargetInnerTop, _Pagination.paginationTokens.selectTargetLabelInnerTop, _Pagination.paginationTokens.inputBorderRadius, _Pagination.paginationTokens.inputWidth, _Pagination.paginationTokens.inputHeight, _Pagination.paginationTokens.inputPadding, _Pagination.paginationTokens.inputBorderWidth)
+                ":0.0625rem;",
+                ":0.5rem 2.5rem;"
+            ], _Pagination.paginationTokens.paginationFontFamily, _Pagination.paginationTokens.paginationFontSize, _Pagination.paginationTokens.paginationFontStyle, _Pagination.paginationTokens.paginationFontWeight, _Pagination.paginationTokens.paginationLetterSpacing, _Pagination.paginationTokens.paginationLineHeight, _Pagination.paginationTokens.buttonHeight, _Pagination.paginationTokens.paginationInputWidth, _Pagination.paginationTokens.buttonRadius, _Pagination.paginationTokens.buttonWidth, _Pagination.paginationTokens.buttonWidthShorter, _Pagination.paginationTokens.paginationIconSize, _Pagination.paginationTokens.paginationIconDoubleSize, _Pagination.paginationTokens.buttonArrowMargin, _Pagination.paginationTokens.selectHeight, _Pagination.paginationTokens.selectPaddingTop, _Pagination.paginationTokens.selectPaddingRight, _Pagination.paginationTokens.selectPaddingBottom, _Pagination.paginationTokens.selectPaddingLeft, _Pagination.paginationTokens.selectItemHeight, _Pagination.paginationTokens.selectItemPadding, _Pagination.paginationTokens.selectItemContentLeftWidth, _Pagination.paginationTokens.selectItemBackground, _Pagination.paginationTokens.selectTargetArrowRight, _Pagination.paginationTokens.selectTargetPadding, _Pagination.paginationTokens.selectTargetInnerTop, _Pagination.paginationTokens.selectTargetLabelInnerTop, _Pagination.paginationTokens.inputBorderRadius, _Pagination.paginationTokens.inputWidth, _Pagination.paginationTokens.inputHeight, _Pagination.paginationTokens.inputPadding, _Pagination.paginationTokens.inputBorderWidth, _Pagination.paginationTokens.paginationHelperTextGap)
         },
         type: {
             compact: (0, _styledcomponents.css)([

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

@@ -46,6 +46,52 @@ var config = {
             ], _Range.rangeTokens.background, _Range.rangeTokens.backgroundError, _Range.rangeTokens.backgroundSuccess, _Range.rangeTokens.dividerColor, _Range.rangeTokens.labelColor, _Range.rangeTokens.leftHelperColor, _Range.rangeTokens.leftHelperColorError, _Range.rangeTokens.leftHelperColorSuccess, _Range.rangeTokens.textFieldColor, _Range.rangeTokens.textFieldPlaceholderColor, _Range.rangeTokens.textFieldCaretColor, _Range.rangeTokens.textFieldBackgroundColorHover, _Range.rangeTokens.textFieldBackgroundColorFocus, _Range.rangeTokens.textFieldBackgroundErrorColor, _Range.rangeTokens.textFieldBackgroundErrorColorHover, _Range.rangeTokens.textFieldBackgroundErrorColorFocus, _Range.rangeTokens.textFieldBackgroundSuccessColor, _Range.rangeTokens.textFieldBackgroundSuccessColorHover, _Range.rangeTokens.textFieldBackgroundSuccessColorFocus, _Range.rangeTokens.textFieldTextBeforeColor, _Range.rangeTokens.textFieldTextAfterColor, _Range.rangeTokens.indicatorColor, _Range.rangeTokens.focusColor, _Range.rangeTokens.textFieldPlaceholderColorFocus)
         },
         size: {
+            xl: (0, _styledcomponents.css)([
+                "",
+                ":1rem;",
+                ":0 0.375rem;",
+                ":var(--plasma-typo-body-l-font-family);",
+                ":var(--plasma-typo-body-l-font-style);",
+                ":var(--plasma-typo-body-l-font-size);",
+                ":var(--plasma-typo-body-l-font-weight);",
+                ":var(--plasma-typo-body-l-letter-spacing);",
+                ":var(--plasma-typo-body-l-line-height);",
+                ":0 0 0 1.125rem;",
+                ":0;",
+                ":0.75rem;",
+                ":var(--plasma-typo-body-l-font-family);",
+                ":var(--plasma-typo-body-l-font-style);",
+                ":var(--plasma-typo-body-l-font-size);",
+                ":var(--plasma-typo-body-l-font-weight);",
+                ":var(--plasma-typo-body-l-letter-spacing);",
+                ":var(--plasma-typo-body-l-line-height);",
+                ":4rem;",
+                ":1rem;",
+                ":1.3125rem 1.125rem;",
+                ":var(--plasma-typo-body-l-font-family);",
+                ":var(--plasma-typo-body-l-font-style);",
+                ":var(--plasma-typo-body-l-font-size);",
+                ":var(--plasma-typo-body-l-font-weight);",
+                ":var(--plasma-typo-body-l-letter-spacing);",
+                ":var(--plasma-typo-body-l-line-height);",
+                ":0.25rem 0 0 0;",
+                ":var(--plasma-typo-body-xs-font-family);",
+                ":var(--plasma-typo-body-xs-font-style);",
+                ":var(--plasma-typo-body-xs-font-size);",
+                ":var(--plasma-typo-body-xs-font-weight);",
+                ":var(--plasma-typo-body-xs-letter-spacing);",
+                ":var(--plasma-typo-body-xs-line-height);",
+                ":-0.0625rem 0.5rem -0.0625rem 0;",
+                ":-0.0625rem 0 -0.0625rem 0.75rem;",
+                ":0 0.25rem 0 0;",
+                ":0 0 0 0.25rem;",
+                ":0.5rem;",
+                ":0.375rem;",
+                ":0 0 0 0;",
+                ":0.5rem auto auto -0.75rem;",
+                ":0 0 auto auto;",
+                ":0.25rem -0.625rem auto auto;"
+            ], _Range.rangeTokens.borderRadius, _Range.rangeTokens.dividerPadding, _Range.rangeTokens.dividerFontFamily, _Range.rangeTokens.dividerFontStyle, _Range.rangeTokens.dividerFontSize, _Range.rangeTokens.dividerFontWeight, _Range.rangeTokens.dividerLetterSpacing, _Range.rangeTokens.dividerLineHeight, _Range.rangeTokens.leftContentMargin, _Range.rangeTokens.rightContentMargin, _Range.rangeTokens.labelOffset, _Range.rangeTokens.labelFontFamily, _Range.rangeTokens.labelFontStyle, _Range.rangeTokens.labelFontSize, _Range.rangeTokens.labelFontWeight, _Range.rangeTokens.labelLetterSpacing, _Range.rangeTokens.labelLineHeight, _Range.rangeTokens.textFieldHeight, _Range.rangeTokens.textFieldBorderRadius, _Range.rangeTokens.textFieldPadding, _Range.rangeTokens.textFieldFontFamily, _Range.rangeTokens.textFieldFontStyle, _Range.rangeTokens.textFieldFontSize, _Range.rangeTokens.textFieldFontWeight, _Range.rangeTokens.textFieldLetterSpacing, _Range.rangeTokens.textFieldLineHeight, _Range.rangeTokens.leftHelperOffset, _Range.rangeTokens.leftHelperFontFamily, _Range.rangeTokens.leftHelperFontStyle, _Range.rangeTokens.leftHelperFontSize, _Range.rangeTokens.leftHelperFontWeight, _Range.rangeTokens.leftHelperLetterSpacing, _Range.rangeTokens.leftHelperLineHeight, _Range.rangeTokens.textFieldLeftContentMargin, _Range.rangeTokens.textFieldRightContentMargin, _Range.rangeTokens.textFieldTextBeforeMargin, _Range.rangeTokens.textFieldTextAfterMargin, _Range.rangeTokens.indicatorSize, _Range.rangeTokens.indicatorSizeOuter, _Range.rangeTokens.indicatorPlacement, _Range.rangeTokens.indicatorOuterPlacement, _Range.rangeTokens.indicatorPlacementRight, _Range.rangeTokens.indicatorOuterPlacementRight),
             l: (0, _styledcomponents.css)([
                 "",
                 ":0.875rem;",

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

@@ -33,8 +33,12 @@ var config = {
                 ":var(--text-accent);",
                 ":0.4;",
                 ":var(--text-secondary);",
-                ":var(--text-secondary);"
-            ], _Treetokens.treeTokens.iconFolderColor, _Treetokens.treeTokens.arrowColor, _Treetokens.treeTokens.arrowColorHover, _Treetokens.treeTokens.arrowColorActive, _Treetokens.treeTokens.color, _Treetokens.treeTokens.colorSelected, _Treetokens.treeTokens.itemBackgroundColorSelected, _Treetokens.treeTokens.itemBackgroundColorPrimary, _Treetokens.treeTokens.itemBackgroundColorHover, _Treetokens.treeTokens.itemBackgroundColorActive, _Treetokens.treeTokens.checkboxBorderColor, _Treetokens.treeTokens.checkboxBackgroundColor, _Treetokens.treeTokens.itemDisabledOpacity, _Treetokens.treeTokens.itemDisabledBorderColor, _Treetokens.treeTokens.itemDisabledColor)
+                ":var(--text-secondary);",
+                ":var(--surface-positive);",
+                ":var(--surface-solid-default);",
+                ":var(--surface-positive);",
+                ":var(--surface-solid-default);"
+            ], _Treetokens.treeTokens.iconFolderColor, _Treetokens.treeTokens.arrowColor, _Treetokens.treeTokens.arrowColorHover, _Treetokens.treeTokens.arrowColorActive, _Treetokens.treeTokens.color, _Treetokens.treeTokens.colorSelected, _Treetokens.treeTokens.itemBackgroundColorSelected, _Treetokens.treeTokens.itemBackgroundColorPrimary, _Treetokens.treeTokens.itemBackgroundColorHover, _Treetokens.treeTokens.itemBackgroundColorActive, _Treetokens.treeTokens.checkboxBorderColor, _Treetokens.treeTokens.checkboxBackgroundColor, _Treetokens.treeTokens.itemDisabledOpacity, _Treetokens.treeTokens.itemDisabledBorderColor, _Treetokens.treeTokens.itemDisabledColor, _Treetokens.treeTokens.itemDraggableBorderColor, _Treetokens.treeTokens.itemDraggableLineColor, _Treetokens.treeTokens.itemDraggableBorderColor, _Treetokens.treeTokens.itemDraggableLineColor)
         },
         size: {
             l: (0, _styledcomponents.css)([