@salutejs/plasma-new-hope 0.337.0-canary.2253.18004015974.0 → 0.337.0-canary.2254.18036780976.0

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

@@ -98,7 +98,7 @@ function _unsupported_iterable_to_array(o, minLen) {
 }
 import React, { forwardRef, useState, useMemo } from "react";
 import Tree from "rc-tree";
-import cls from "classnames";
+import { cx } from "../../utils";
 import { IconArrowWrapper, StyledArrow, base, StyledFolder, TitleWrapper, Title, ContentRight, Line } from "./Tree.styles";
 import { sizeToIconSize, traverseTree } from "./utils";
 import { classes } from "./Tree.tokens";
@@ -106,7 +106,7 @@ import { classes } from "./Tree.tokens";
  * Многоуровневый раскрывающийся список в виде дерева.
  */ export var treeRoot = function(Root) {
     return /*#__PURE__*/ 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, variant = param.variant, _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_singleLine = param.singleLine, singleLine = _param_singleLine === void 0 ? true : _param_singleLine, _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 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(useState(defaultSelectedKeys || []), 2), selected = _useState[0], setSelected = _useState[1];
         var selectedKeys = outerSelectedKeys !== null && outerSelectedKeys !== void 0 ? outerSelectedKeys : selected;
         var isRadioMode = mode === 'radio' && !multiple;
@@ -122,7 +122,6 @@ import { classes } from "./Tree.tokens";
         var invertedClass = arrowPlacement === 'right' ? classes.treeInverted : undefined;
         var itemFilledClass = fullWidthItemSelection ? classes.treeItemFilled : undefined;
         var radioModeClass = isRadioMode ? classes.treeRadioMode : undefined;
-        var tightVariantClass = variant === 'tight' ? classes.treeTightVariant : undefined;
         // Проходимся по дереву и устанавливаем соответствующие классы для узлов дерева,
         // чтобы соблюсти иерархию вложенности в UI.
         var treeData = useMemo(function() {
@@ -134,7 +133,6 @@ import { classes } from "./Tree.tokens";
         return /*#__PURE__*/ React.createElement(Root, {
             view: view,
             size: size,
-            variant: variant,
             ref: ref,
             items: items
         }, /*#__PURE__*/ React.createElement(Tree, _object_spread_props(_object_spread({
@@ -143,7 +141,7 @@ import { classes } from "./Tree.tokens";
             virtual: virtual,
             multiple: multiple,
             checkable: checkable,
-            className: cls(className, invertedClass, itemFilledClass, radioModeClass, tightVariantClass),
+            className: cx(className, invertedClass, itemFilledClass, radioModeClass),
             defaultExpandAll: defaultExpandAll,
             autoExpandParent: autoExpandParent,
             style: {
@@ -179,11 +177,8 @@ import { classes } from "./Tree.tokens";
             titleRender: function(item) {
                 return /*#__PURE__*/ React.createElement(TitleWrapper, {
                     fullWidthItemSelection: fullWidthItemSelection,
-                    arrowPlacement: arrowPlacement,
-                    singleLine: singleLine
-                }, /*#__PURE__*/ React.createElement(Title, {
-                    singleLine: singleLine
-                }, renderTitle ? renderTitle(item) : typeof item.title === 'function' ? item.title(item) : item.title), item.contentRight && /*#__PURE__*/ React.createElement(ContentRight, null, item.contentRight));
+                    arrowPlacement: arrowPlacement
+                }, /*#__PURE__*/ React.createElement(Title, null, renderTitle ? renderTitle(item) : typeof item.title === 'function' ? item.title(item) : item.title), item.contentRight && /*#__PURE__*/ React.createElement(ContentRight, null, item.contentRight));
             },
             draggable: draggable,
             onDragStart: onDragStart,

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

@@ -1,10 +1,11 @@
 import styled from "styled-components";
 import { css } from "styled-components";
+import { applyEllipsis } from "../../mixins";
 import { IconDisclosureRightCentered, IconFolder } from "../_Icon";
 import { treeTokens as tokens, classes } from "./Tree.tokens";
 export var IconArrowWrapper = styled.div.withConfig({
     displayName: "Tree.styles__IconArrowWrapper",
-    componentId: "sc-543001e7-0"
+    componentId: "sc-8ac26406-0"
 })([
     "line-height:0;color:var(",
     ");&:hover{color:var(",
@@ -13,58 +14,44 @@ export var IconArrowWrapper = styled.div.withConfig({
 ], tokens.arrowColor, tokens.arrowColorHover, tokens.arrowColorActive);
 export var StyledArrow = styled(IconDisclosureRightCentered).withConfig({
     displayName: "Tree.styles__StyledArrow",
-    componentId: "sc-543001e7-1"
+    componentId: "sc-8ac26406-1"
 })([
     "transition:color 0.3s ease-in,transform 0.15s ease-in;pointer-events:none;user-select:none;"
 ]);
 export var StyledFolder = styled(IconFolder).withConfig({
     displayName: "Tree.styles__StyledFolder",
-    componentId: "sc-543001e7-2"
+    componentId: "sc-8ac26406-2"
 })([
     ""
 ]);
 export var TitleWrapper = styled.div.withConfig({
     displayName: "Tree.styles__TitleWrapper",
-    componentId: "sc-543001e7-3"
+    componentId: "sc-8ac26406-3"
 })([
     "display:flex;align-items:center;justify-content:space-between;margin:",
-    ";overflow:",
+    ";",
     ";"
 ], function(param) {
     var arrowPlacement = param.arrowPlacement, fullWidthItemSelection = param.fullWidthItemSelection;
     return arrowPlacement === 'left' && !fullWidthItemSelection ? "var(".concat(tokens.iconFolderMargin, ")") : 0;
-}, function(param) {
-    var singleLine = param.singleLine;
-    return singleLine ? 'hidden' : 'visible';
-});
+}, applyEllipsis());
 export var Title = styled.span.withConfig({
     displayName: "Tree.styles__Title",
-    componentId: "sc-543001e7-4"
+    componentId: "sc-8ac26406-4"
 })([
     "margin:var(",
-    ");overflow:",
-    ";text-overflow:",
-    ";white-space:",
+    ");",
     ";"
-], tokens.iconFolderMargin, function(param) {
-    var singleLine = param.singleLine;
-    return singleLine ? 'hidden' : 'visible';
-}, function(param) {
-    var singleLine = param.singleLine;
-    return singleLine ? 'ellipsis' : 'unset';
-}, function(param) {
-    var singleLine = param.singleLine;
-    return singleLine ? 'nowrap' : 'normal';
-});
+], tokens.iconFolderMargin, applyEllipsis());
 export var ContentRight = styled.div.withConfig({
     displayName: "Tree.styles__ContentRight",
-    componentId: "sc-543001e7-5"
+    componentId: "sc-8ac26406-5"
 })([
     "line-height:0;"
 ]);
 export var Line = styled.div.withConfig({
     displayName: "Tree.styles__Line",
-    componentId: "sc-543001e7-6"
+    componentId: "sc-8ac26406-6"
 })([
     "left:",
     "px;right:0;position:absolute;z-index:1;height:0.125rem;background-color:var(",
@@ -74,22 +61,23 @@ export var Line = styled.div.withConfig({
     return left;
 }, tokens.itemDraggableLineColor);
 export var base = 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(",
-    ");position:relative;z-index:0;width:100%;min-height:var(",
-    ");line-height:24px;white-space:nowrap;list-style:none;outline:0;}.rc-tree.",
-    " .rc-tree-treenode{padding: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.",
+    ".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;margin:0;padding:0;text-decoration:none;vertical-align:top;cursor:pointer;color:var(",
-    ");display:flex;align-items:center;width:100%;}.rc-tree.",
+    ");}.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(",
     ");margin:var(",
-    ");}.rc-tree-title{display:grid;width:100%;}.rc-tree-indent{display:inline-flex;height:0;vertical-align:bottom;}.rc-tree-indent-unit{display:inline-block;width:16px;}.rc-tree-draggable-icon{display:inline-flex;justify-content:center;width:16px;}.rc-tree,.rc-tree-list{border:none !important;}.rc-tree .rc-tree-list-holder{overflow:hidden auto;}.rc-tree .rc-tree-treenode::before{content:'';position:absolute;z-index:-1;top:var(",
+    ");}.rc-tree-title{display:inline-block;width:100%;}.rc-tree-indent{display:inline-flex;height:0;vertical-align:bottom;}.rc-tree-indent-unit{display:inline-block;width:16px;}.rc-tree-draggable-icon{display:inline-flex;justify-content:center;width:16px;}.rc-tree,.rc-tree-list{border:none !important;}.rc-tree .rc-tree-list-holder{overflow:hidden auto;}.rc-tree .rc-tree-treenode{position:relative;z-index:0;display:flex;align-items:center;min-height:var(",
+    ");padding:0;}.rc-tree.",
+    " .rc-tree-treenode{padding:0 var(",
+    ") !important;}.rc-tree.",
+    ":not(",
+    ") .rc-tree-treenode{padding:0 var(",
+    ");}.rc-tree .rc-tree-treenode::before{content:'';position:absolute;z-index:-1;top:var(",
     ");bottom:var(",
-    ");left:calc(var(",
-    ") + var(",
-    "));right:0;background:transparent;border-radius:var(",
+    ");left:var(",
+    ");right:0;background:transparent;border-radius:var(",
     ");}.rc-tree .rc-tree-treenode.rc-tree-treenode-disabled .rc-tree-node-content-wrapper,.rc-tree .rc-tree-treenode.rc-tree-treenode-disabled .rc-tree-switcher,.rc-tree .rc-tree-treenode.rc-tree-treenode-disabled .rc-tree-checkbox{opacity:var(",
     ");}.rc-tree.",
     " .rc-tree-treenode::before{inset:0;border-radius:0;}.rc-tree .rc-tree-treenode.",
@@ -103,7 +91,7 @@ export var base = css([
     " .rc-tree-treenode.rc-tree-treenode-selected):hover::before{background:var(",
     ");}.rc-tree .rc-tree-treenode:not(.rc-tree-treenode-disabled):not(.rc-tree.",
     " .rc-tree-treenode.rc-tree-treenode-selected):active::before{background:var(",
-    ");}.rc-tree .rc-tree-treenode span.rc-tree-switcher{width:var(",
+    ");}.rc-tree .rc-tree-treenode .rc-tree-node-content-wrapper{display:flex;align-items:center;align-self:stretch;height:auto;flex:1;min-width:max-content;}.rc-tree .rc-tree-treenode span.rc-tree-switcher{width:var(",
     ");height:var(",
     ");margin:var(",
     ");line-height:0;vertical-align:0;background:transparent;}.rc-tree.",
@@ -135,6 +123,6 @@ export var base = css([
     ");}.rc-tree .rc-tree-treenode.rc-tree-treenode-disabled .rc-tree-title{color:var(",
     ");}.rc-tree-node-selected .rc-tree-icon__customize{color:var(",
     ");}.rc-tree .rc-tree-treenode.rc-tree-treenode-disabled .rc-tree-icon__customize{color:var(",
-    ");}.rc-tree-indent-unit{width:var(",
+    ");;}.rc-tree-indent-unit{width:var(",
     ");}"
-], tokens.itemPadding, tokens.itemHeight, classes.treeTightVariant, tokens.itemPaddingTight, classes.treeLeafNode, tokens.itemDraggableBorderColor, tokens.color, classes.treeRadioMode, classes.treeInverted, tokens.iconFolderColor, tokens.iconFolderMargin, tokens.itemTop, tokens.itemBottom, tokens.switcherSize, tokens.itemBackgroundExtraOffset, tokens.itemBorderRadius, tokens.itemDisabledOpacity, classes.treeItemFilled, classes.treeItemHasSelectedChildren, tokens.colorSelected, classes.treeItemHasSelectedChildren, tokens.colorSelected, classes.treeItemPrimaryBackground, tokens.itemBackgroundColorPrimary, tokens.itemBackgroundColorSelected, classes.treeRadioMode, tokens.itemBackgroundColorHover, classes.treeRadioMode, tokens.itemBackgroundColorActive, tokens.switcherSize, tokens.switcherSize, tokens.switcherMargin, classes.treeInverted, tokens.switcherMarginInverted, classes.treeInverted, classes.treeInverted, tokens.checkboxSize, tokens.checkboxSize, tokens.checkboxMargin, tokens.checkboxInnerSize, tokens.checkboxInnerSize, tokens.checkboxBorderColor, tokens.checkboxBorderRadius, tokens.itemDisabledBorderColor, tokens.checkboxBackgroundColor, tokens.checkboxBackgroundColor, tokens.checkboxBackgroundColor, tokens.checkboxBackgroundColor, tokens.color, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, classes.treeInverted, classes.treeInverted, tokens.colorSelected, tokens.itemDisabledColor, tokens.colorSelected, tokens.itemDisabledColor, tokens.itemIndent);
+], classes.treeLeafNode, tokens.itemDraggableBorderColor, tokens.color, classes.treeRadioMode, classes.treeInverted, tokens.iconFolderColor, tokens.iconFolderMargin, tokens.itemHeight, classes.treeItemFilled, tokens.itemPadding, classes.treeInverted, classes.treeItemFilled, tokens.itemPaddingTight, tokens.itemTop, tokens.itemBottom, tokens.switcherSize, tokens.itemBorderRadius, tokens.itemDisabledOpacity, classes.treeItemFilled, classes.treeItemHasSelectedChildren, tokens.colorSelected, classes.treeItemHasSelectedChildren, tokens.colorSelected, classes.treeItemPrimaryBackground, tokens.itemBackgroundColorPrimary, tokens.itemBackgroundColorSelected, classes.treeRadioMode, tokens.itemBackgroundColorHover, classes.treeRadioMode, tokens.itemBackgroundColorActive, tokens.switcherSize, tokens.switcherSize, tokens.switcherMargin, classes.treeInverted, tokens.switcherMarginInverted, classes.treeInverted, classes.treeInverted, tokens.checkboxSize, tokens.checkboxSize, tokens.checkboxMargin, tokens.checkboxInnerSize, tokens.checkboxInnerSize, tokens.checkboxBorderColor, tokens.checkboxBorderRadius, tokens.itemDisabledBorderColor, tokens.checkboxBackgroundColor, tokens.checkboxBackgroundColor, tokens.checkboxBackgroundColor, tokens.checkboxBackgroundColor, tokens.color, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, classes.treeInverted, classes.treeInverted, tokens.colorSelected, tokens.itemDisabledColor, tokens.colorSelected, tokens.itemDisabledColor, tokens.itemIndent);

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

@@ -4,8 +4,7 @@ export var classes = {
     treeItemPrimaryBackground: 'tree-item-primary-background',
     treeItemHasSelectedChildren: 'tree-item-has-selected-children',
     treeRadioMode: 'tree-radio-mode',
-    treeLeafNode: 'tree-leaf-node',
-    treeTightVariant: 'tree-tight-variant'
+    treeLeafNode: 'tree-leaf-node'
 };
 export var treeTokens = {
     arrowColor: '--plasma-tree-arrow-color',
@@ -37,7 +36,6 @@ export var treeTokens = {
     checkboxMargin: '--plasma-tree-checkbox-margin',
     checkboxBorderColor: '--plasma-tree-checkbox-border-color',
     checkboxBackgroundColor: '--plasma-tree-checkbox-background-color',
-    itemBackgroundExtraOffset: '--plasma-tree-item-background-extra-offset',
     itemBackgroundColorSelected: '--plasma-tree-item-background-color-selected',
     itemBackgroundColorPrimary: '--plasma-tree-item-background-color-primary',
     itemBackgroundColorHover: '--plasma-tree-item-background-color-hover',

package/styled-components/es/examples/components/Scrollbar/Scrollbar.config.js

@@ -0,0 +1,35 @@
+import { css } from "styled-components";
+import { scrollbarTokens as tokens } from "../../../components/Scrollbar";
+export var config = {
+    defaults: {
+        view: 'default',
+        size: 's'
+    },
+    variations: {
+        view: {
+            default: css([
+                "",
+                ":var(--surface-transparent-primary);",
+                ":var(--surface-transparent-tertiary);",
+                ":var(--surface-transparent-tertiary);",
+                ":var(--surface-transparent-tertiary);"
+            ], tokens.trackColor, tokens.thumbColor, tokens.thumbColorHover, tokens.thumbColorActive)
+        },
+        size: {
+            m: css([
+                "",
+                ":0.25rem;",
+                ":0.25rem;",
+                ":0.25rem;",
+                ":0.25rem;"
+            ], tokens.width, tokens.trackWidth, tokens.trackBorderRadius, tokens.thumbBorderRadius),
+            s: css([
+                "",
+                ":0.125rem;",
+                ":0.125rem;",
+                ":0.125rem;",
+                ":0.125rem;"
+            ], tokens.width, tokens.trackWidth, tokens.trackBorderRadius, tokens.thumbBorderRadius)
+        }
+    }
+};

package/styled-components/es/examples/components/Scrollbar/Scrollbar.js

@@ -0,0 +1,5 @@
+import { scrollbarConfig } from "../../../components/Scrollbar";
+import { component, mergeConfig } from "../../../engines";
+import { config } from "./Scrollbar.config";
+var mergedConfig = mergeConfig(scrollbarConfig, config);
+export var Scrollbar = component(mergedConfig);

package/styled-components/es/examples/components/TimePicker/TimePicker.config.js

@@ -0,0 +1,279 @@
+import { css } from "styled-components";
+import { timePickerTokens as tokens } from "../../../components/TimePicker";
+export var config = {
+    defaults: {
+        view: 'default',
+        size: 'm'
+    },
+    variations: {
+        view: {
+            default: css([
+                "",
+                ":var(--surface-transparent-primary);",
+                ":var(--surface-transparent-negative);",
+                ":var(--surface-transparent-positive);",
+                ":var(--text-primary);",
+                ":var(--text-primary);",
+                ":var(--text-secondary);",
+                ":var(--text-accent);",
+                ":var(--surface-negative);",
+                ":var(--surface-transparent-primary);",
+                ":var(--surface-transparent-secondary);",
+                ":var(--surface-transparent-negative);",
+                ":var(--surface-transparent-negative-active);",
+                ":var(--surface-transparent-positive);",
+                ":var(--surface-transparent-positive-active);",
+                ":var(--text-tertiary);",
+                ":var(--text-tertiary);",
+                ":var(--text-tertiary);",
+                ":var(--surface-solid-card);",
+                ":var(--surface-transparent-secondary);",
+                ":var(--surface-transparent-secondary);",
+                ":var(--surface-transparent-tertiary);",
+                ":var(--surface-transparent-primary);"
+            ], tokens.background, tokens.backgroundError, tokens.backgroundSuccess, tokens.labelColor, tokens.textFieldColor, tokens.textFieldPlaceholderColor, tokens.textFieldCaretColor, tokens.indicatorColor, tokens.textFieldBackgroundColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldBackgroundErrorColor, tokens.textFieldBackgroundErrorColorFocus, tokens.textFieldBackgroundSuccessColor, tokens.textFieldBackgroundSuccessColorFocus, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.textFieldPlaceholderColorFocus, tokens.timePickerBackground, tokens.itemBackgroundHover, tokens.itemBackgroundActive, tokens.scrollbarColor, tokens.scrollbarTrackColor)
+        },
+        size: {
+            l: css([
+                "",
+                ":20rem;",
+                ":0.875rem;",
+                ":0 0 0 1rem;",
+                ":0;",
+                ":0.75rem;",
+                ":0.5625rem 0 0.125rem 0;",
+                ":1.5625rem 0 0.5625rem 0;",
+                ":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.5rem;",
+                ":0.375rem;",
+                ":0 0 0 0;",
+                ":0.5rem auto auto -0.75rem;",
+                ":0 0 auto auto;",
+                ":0.25rem -0.625rem auto auto;",
+                ":3.5rem;",
+                ":0.875rem;",
+                ":1.0625rem 1.125rem 1.0625rem 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.0625rem 0.5rem -0.0625rem -0.125rem;",
+                ":-0.0625rem -0.125rem -0.0625rem 0.75rem;",
+                ":0 0.25rem 0 0;",
+                ":0 0 0 0.25rem;",
+                ":0.875rem;",
+                ":15rem;",
+                ":0.125rem;",
+                ":36.25rem;",
+                ":var(--plasma-typo-body-l-font-family);",
+                ":var(--plasma-typo-body-l-font-size);",
+                ":var(--plasma-typo-body-l-font-style);",
+                ":var(--plasma-typo-body-l-font-weight);",
+                ":var(--plasma-typo-body-l-letter-spacing);",
+                ":var(--plasma-typo-body-l-line-height);",
+                ":3.5rem;",
+                ":0.75rem;",
+                ":0rem;",
+                ":var(--plasma-typo-body-xs-font-family);",
+                ":var(--plasma-typo-body-xs-font-size);",
+                ":var(--plasma-typo-body-xs-font-style);",
+                ":var(--plasma-typo-body-xs-font-weight);",
+                ":var(--plasma-typo-body-xs-letter-spacing);",
+                ":var(--plasma-typo-body-xs-line-height);",
+                ":0.125rem;",
+                ":0.5rem;"
+            ], tokens.width, tokens.borderRadius, tokens.leftContentMargin, tokens.rightContentMargin, tokens.labelOffset, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.labelFontFamily, tokens.labelFontStyle, tokens.labelFontSize, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.indicatorSize, tokens.indicatorSizeOuter, tokens.indicatorPlacement, tokens.indicatorOuterPlacement, tokens.indicatorPlacementRight, tokens.indicatorOuterPlacementRight, tokens.textFieldHeight, tokens.textFieldBorderRadius, tokens.textFieldPadding, tokens.textFieldFontFamily, tokens.textFieldFontStyle, tokens.textFieldFontSize, tokens.textFieldFontWeight, tokens.textFieldLetterSpacing, tokens.textFieldLineHeight, tokens.textFieldLeftContentMargin, tokens.textFieldRightContentMargin, tokens.textFieldTextBeforeMargin, tokens.textFieldTextAfterMargin, tokens.timePickerBorderRadius, tokens.timePickerWidth, tokens.timePickerPadding, tokens.columnHeight, tokens.itemFontFamily, tokens.itemFontSize, tokens.itemFontStyle, tokens.itemFontWeight, tokens.itemLetterSpacing, tokens.itemLineHeight, tokens.itemHeight, tokens.itemBorderRadius, tokens.itemPadding, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight, tokens.scrollbarWidth, tokens.scrollbarMargin),
+            m: css([
+                "",
+                ":20rem;",
+                ":0.75rem;",
+                ":0 0 0 0.875rem;",
+                ":0;",
+                ":0.625rem;",
+                ":0.375rem 0 0.125rem 0;",
+                ":1.375rem 0 0.375rem 0;",
+                ":var(--plasma-typo-body-m-font-family);",
+                ":var(--plasma-typo-body-m-font-style);",
+                ":var(--plasma-typo-body-m-font-size);",
+                ":var(--plasma-typo-body-m-font-weight);",
+                ":var(--plasma-typo-body-m-letter-spacing);",
+                ":var(--plasma-typo-body-m-line-height);",
+                ":0.5rem;",
+                ":0.375rem;",
+                ":0 0 0 0;",
+                ":0.375rem auto auto -0.75rem;",
+                ":0 0 auto auto;",
+                ":0.25rem -0.6875rem auto auto;",
+                ":3rem;",
+                ":0.75rem;",
+                ":0.875rem 1rem 0.875rem 1rem;",
+                ":var(--plasma-typo-body-m-font-family);",
+                ":var(--plasma-typo-body-m-font-style);",
+                ":var(--plasma-typo-body-m-font-size);",
+                ":var(--plasma-typo-body-m-font-weight);",
+                ":var(--plasma-typo-body-m-letter-spacing);",
+                ":var(--plasma-typo-body-m-line-height);",
+                ":-0.125rem 0.375rem -0.125rem -0.125rem;",
+                ":-0.125rem -0.125rem -0.125rem 0.75rem;",
+                ":0 0.25rem 0 0;",
+                ":0 0 0 0.25rem;",
+                ":0.75rem;",
+                ":13.75rem;",
+                ":0.125rem;",
+                ":31.25rem;",
+                ":var(--plasma-typo-body-m-font-family);",
+                ":var(--plasma-typo-body-m-font-size);",
+                ":var(--plasma-typo-body-m-font-style);",
+                ":var(--plasma-typo-body-m-font-weight);",
+                ":var(--plasma-typo-body-m-letter-spacing);",
+                ":var(--plasma-typo-body-m-line-height);",
+                ":3rem;",
+                ":0.625rem;",
+                ":0rem;",
+                ":var(--plasma-typo-body-xs-font-family);",
+                ":var(--plasma-typo-body-xs-font-size);",
+                ":var(--plasma-typo-body-xs-font-style);",
+                ":var(--plasma-typo-body-xs-font-weight);",
+                ":var(--plasma-typo-body-xs-letter-spacing);",
+                ":var(--plasma-typo-body-xs-line-height);",
+                ":0.125rem;",
+                ":0.375rem;"
+            ], tokens.width, tokens.borderRadius, tokens.leftContentMargin, tokens.rightContentMargin, tokens.labelOffset, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.labelFontFamily, tokens.labelFontStyle, tokens.labelFontSize, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.indicatorSize, tokens.indicatorSizeOuter, tokens.indicatorPlacement, tokens.indicatorOuterPlacement, tokens.indicatorPlacementRight, tokens.indicatorOuterPlacementRight, tokens.textFieldHeight, tokens.textFieldBorderRadius, tokens.textFieldPadding, tokens.textFieldFontFamily, tokens.textFieldFontStyle, tokens.textFieldFontSize, tokens.textFieldFontWeight, tokens.textFieldLetterSpacing, tokens.textFieldLineHeight, tokens.textFieldLeftContentMargin, tokens.textFieldRightContentMargin, tokens.textFieldTextBeforeMargin, tokens.textFieldTextAfterMargin, tokens.timePickerBorderRadius, tokens.timePickerWidth, tokens.timePickerPadding, tokens.columnHeight, tokens.itemFontFamily, tokens.itemFontSize, tokens.itemFontStyle, tokens.itemFontWeight, tokens.itemLetterSpacing, tokens.itemLineHeight, tokens.itemHeight, tokens.itemBorderRadius, tokens.itemPadding, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight, tokens.scrollbarWidth, tokens.scrollbarMargin),
+            s: css([
+                "",
+                ":20rem;",
+                ":0.625rem;",
+                ":0 0 0 0.75rem;",
+                ":0;",
+                ":0.5rem;",
+                ":0.3125rem 0 0 0;",
+                ":1.0625rem 0 0.3125rem 0;",
+                ":var(--plasma-typo-body-s-font-family);",
+                ":var(--plasma-typo-body-s-font-style);",
+                ":var(--plasma-typo-body-s-font-size);",
+                ":var(--plasma-typo-body-s-font-weight);",
+                ":var(--plasma-typo-body-s-letter-spacing);",
+                ":var(--plasma-typo-body-s-line-height);",
+                ":0.375rem;",
+                ":0.375rem;",
+                ":0 0 0 0;",
+                ":0.3125rem auto auto -0.6875rem;",
+                ":0 0 auto auto;",
+                ":0.25rem -0.625rem auto auto;",
+                ":2.5rem;",
+                ":0.625rem;",
+                ":0.6875rem 0.875rem 0.6875rem 0.875rem;",
+                ":var(--plasma-typo-body-s-font-family);",
+                ":var(--plasma-typo-body-s-font-style);",
+                ":var(--plasma-typo-body-s-font-size);",
+                ":var(--plasma-typo-body-s-font-weight);",
+                ":var(--plasma-typo-body-s-letter-spacing);",
+                ":var(--plasma-typo-body-s-line-height);",
+                ":-0.1875rem 0.25rem -0.1875rem -0.125rem;",
+                ":-0.1875rem -0.125rem -0.1875rem 0.75rem;",
+                ":0 0.25rem 0 0;",
+                ":0 0 0 0.25rem;",
+                ":0.625rem;",
+                ":12rem;",
+                ":0.125rem;",
+                ":26.25rem;",
+                ":var(--plasma-typo-body-s-font-family);",
+                ":var(--plasma-typo-body-s-font-size);",
+                ":var(--plasma-typo-body-s-font-style);",
+                ":var(--plasma-typo-body-s-font-weight);",
+                ":var(--plasma-typo-body-s-letter-spacing);",
+                ":var(--plasma-typo-body-s-line-height);",
+                ":2.5rem;",
+                ":0.5rem;",
+                ":0rem;",
+                ":var(--plasma-typo-body-xs-font-family);",
+                ":var(--plasma-typo-body-xs-font-size);",
+                ":var(--plasma-typo-body-xs-font-style);",
+                ":var(--plasma-typo-body-xs-font-weight);",
+                ":var(--plasma-typo-body-xs-letter-spacing);",
+                ":var(--plasma-typo-body-xs-line-height);",
+                ":0.125rem;",
+                ":0.25rem;"
+            ], tokens.width, tokens.borderRadius, tokens.leftContentMargin, tokens.rightContentMargin, tokens.labelOffset, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.labelFontFamily, tokens.labelFontStyle, tokens.labelFontSize, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.indicatorSize, tokens.indicatorSizeOuter, tokens.indicatorPlacement, tokens.indicatorOuterPlacement, tokens.indicatorPlacementRight, tokens.indicatorOuterPlacementRight, tokens.textFieldHeight, tokens.textFieldBorderRadius, tokens.textFieldPadding, tokens.textFieldFontFamily, tokens.textFieldFontStyle, tokens.textFieldFontSize, tokens.textFieldFontWeight, tokens.textFieldLetterSpacing, tokens.textFieldLineHeight, tokens.textFieldLeftContentMargin, tokens.textFieldRightContentMargin, tokens.textFieldTextBeforeMargin, tokens.textFieldTextAfterMargin, tokens.timePickerBorderRadius, tokens.timePickerWidth, tokens.timePickerPadding, tokens.columnHeight, tokens.itemFontFamily, tokens.itemFontSize, tokens.itemFontStyle, tokens.itemFontWeight, tokens.itemLetterSpacing, tokens.itemLineHeight, tokens.itemHeight, tokens.itemBorderRadius, tokens.itemPadding, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight, tokens.scrollbarWidth, tokens.scrollbarMargin),
+            xs: css([
+                "",
+                ":20rem;",
+                ":0.5rem;",
+                ":0 0 0 0.5rem;",
+                ":0;",
+                ":0.375rem;",
+                ":0.3125rem 0 0 0;",
+                ":1.0625rem 0 0.3125rem 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.375rem;",
+                ":0.375rem;",
+                ":0 0 0 0;",
+                ":0.25rem auto auto -0.625rem;",
+                ":0 0 auto auto;",
+                ":0.125rem -0.6875rem auto auto;",
+                ":2rem;",
+                ":0.5rem;",
+                ":0.5625rem 0.625rem 0.5625rem 0.625rem;",
+                ":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.25rem -0.0625rem -0.125rem;",
+                ":-0.0625rem -0.125rem -0.0625rem 0.75rem;",
+                ":0 0.25rem 0 0;",
+                ":0 0 0 0.25rem;",
+                ":0.5rem;",
+                ":10rem;",
+                ":0.125rem;",
+                ":21.25rem;",
+                ":var(--plasma-typo-body-xs-font-family);",
+                ":var(--plasma-typo-body-xs-font-size);",
+                ":var(--plasma-typo-body-xs-font-style);",
+                ":var(--plasma-typo-body-xs-font-weight);",
+                ":var(--plasma-typo-body-xs-letter-spacing);",
+                ":var(--plasma-typo-body-xs-line-height);",
+                ":2rem;",
+                ":0.375rem;",
+                ":0rem;",
+                ":var(--plasma-typo-body-xs-font-family);",
+                ":var(--plasma-typo-body-xs-font-size);",
+                ":var(--plasma-typo-body-xs-font-style);",
+                ":var(--plasma-typo-body-xs-font-weight);",
+                ":var(--plasma-typo-body-xs-letter-spacing);",
+                ":var(--plasma-typo-body-xs-line-height);",
+                ":0.125rem;",
+                ":0.25rem;"
+            ], tokens.width, tokens.borderRadius, tokens.leftContentMargin, tokens.rightContentMargin, tokens.labelOffset, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.labelFontFamily, tokens.labelFontStyle, tokens.labelFontSize, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.indicatorSize, tokens.indicatorSizeOuter, tokens.indicatorPlacement, tokens.indicatorOuterPlacement, tokens.indicatorPlacementRight, tokens.indicatorOuterPlacementRight, tokens.textFieldHeight, tokens.textFieldBorderRadius, tokens.textFieldPadding, tokens.textFieldFontFamily, tokens.textFieldFontStyle, tokens.textFieldFontSize, tokens.textFieldFontWeight, tokens.textFieldLetterSpacing, tokens.textFieldLineHeight, tokens.textFieldLeftContentMargin, tokens.textFieldRightContentMargin, tokens.textFieldTextBeforeMargin, tokens.textFieldTextAfterMargin, tokens.timePickerBorderRadius, tokens.timePickerWidth, tokens.timePickerPadding, tokens.columnHeight, tokens.itemFontFamily, tokens.itemFontSize, tokens.itemFontStyle, tokens.itemFontWeight, tokens.itemLetterSpacing, tokens.itemLineHeight, tokens.itemHeight, tokens.itemBorderRadius, tokens.itemPadding, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight, tokens.scrollbarWidth, tokens.scrollbarMargin)
+        },
+        disabled: {
+            true: css([
+                "",
+                ":0.4;"
+            ], tokens.disabledOpacity)
+        },
+        readonly: {
+            true: css([
+                "",
+                ":var(--surface-transparent-primary);",
+                ":var(--text-secondary);",
+                ":var(--text-secondary);",
+                ":var(--surface-transparent-primary);",
+                ":var(--text-secondary);"
+            ], tokens.backgroundReadOnly, tokens.labelColorReadOnly, tokens.textFieldColorReadOnly, tokens.textFieldBackgroundColorReadOnly, tokens.textFieldPlaceholderColorReadOnly)
+        }
+    }
+};

package/styled-components/es/examples/components/TimePicker/TimePicker.js

@@ -0,0 +1,5 @@
+import { component, mergeConfig } from "../../../engines";
+import { timePickerConfig } from "../../../components/TimePicker";
+import { config } from "./TimePicker.config";
+var mergedConfig = mergeConfig(timePickerConfig, config);
+export var TimePicker = component(mergedConfig);

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

@@ -35,8 +35,7 @@ export var config = {
                 "",
                 ":3.5rem;",
                 ":1rem;",
-                ":1rem;",
-                ":0.75rem 1rem;",
+                ":0.375rem;",
                 ":2rem;",
                 ":0.75rem;",
                 ":0.25rem;",
@@ -55,13 +54,12 @@ export var config = {
                 ":var(--plasma-typo-body-l-font-weight);",
                 ":var(--plasma-typo-body-l-letter-spacing);",
                 ":var(--plasma-typo-body-l-line-height);"
-            ], tokens.itemHeight, tokens.itemBackgroundExtraOffset, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemIndent, tokens.itemBorderRadius, tokens.itemTop, tokens.itemBottom, tokens.iconFolderMargin, tokens.switcherMargin, tokens.switcherMarginInverted, tokens.switcherSize, tokens.checkboxMargin, tokens.checkboxSize, tokens.checkboxInnerSize, tokens.checkboxBorderRadius, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight),
+            ], tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemIndent, tokens.itemBorderRadius, tokens.itemTop, tokens.itemBottom, tokens.iconFolderMargin, tokens.switcherMargin, tokens.switcherMarginInverted, tokens.switcherSize, tokens.checkboxMargin, tokens.checkboxSize, tokens.checkboxInnerSize, tokens.checkboxBorderRadius, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight),
             m: css([
                 "",
                 ":3rem;",
                 ":0.875rem;",
-                ":0.75rem 0.875rem;",
-                ":0.5rem 0.875rem;",
+                ":0.375rem;",
                 ":2rem;",
                 ":0.625rem;",
                 ":0.25rem;",
@@ -80,13 +78,12 @@ export var config = {
                 ":var(--plasma-typo-body-m-font-weight);",
                 ":var(--plasma-typo-body-m-letter-spacing);",
                 ":var(--plasma-typo-body-m-line-height);"
-            ], tokens.itemHeight, tokens.itemBackgroundExtraOffset, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemIndent, tokens.itemBorderRadius, tokens.itemTop, tokens.itemBottom, tokens.iconFolderMargin, tokens.switcherMargin, tokens.switcherMarginInverted, tokens.switcherSize, tokens.checkboxMargin, tokens.checkboxSize, tokens.checkboxInnerSize, tokens.checkboxBorderRadius, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight),
+            ], tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemIndent, tokens.itemBorderRadius, tokens.itemTop, tokens.itemBottom, tokens.iconFolderMargin, tokens.switcherMargin, tokens.switcherMarginInverted, tokens.switcherSize, tokens.checkboxMargin, tokens.checkboxSize, tokens.checkboxInnerSize, tokens.checkboxBorderRadius, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight),
             s: css([
                 "",
                 ":2.5rem;",
                 ":0.75rem;",
-                ":0.5rem 0.75rem;",
-                ":0.4375rem 0.5rem;",
+                ":0.25rem;",
                 ":1.875rem;",
                 ":0.5rem;",
                 ":0.25rem;",
@@ -105,13 +102,12 @@ export var config = {
                 ":var(--plasma-typo-body-s-font-weight);",
                 ":var(--plasma-typo-body-s-letter-spacing);",
                 ":var(--plasma-typo-body-s-line-height);"
-            ], tokens.itemHeight, tokens.itemBackgroundExtraOffset, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemIndent, tokens.itemBorderRadius, tokens.itemTop, tokens.itemBottom, tokens.iconFolderMargin, tokens.switcherMargin, tokens.switcherMarginInverted, tokens.switcherSize, tokens.checkboxMargin, tokens.checkboxSize, tokens.checkboxInnerSize, tokens.checkboxBorderRadius, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight),
+            ], tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemIndent, tokens.itemBorderRadius, tokens.itemTop, tokens.itemBottom, tokens.iconFolderMargin, tokens.switcherMargin, tokens.switcherMarginInverted, tokens.switcherSize, tokens.checkboxMargin, tokens.checkboxSize, tokens.checkboxInnerSize, tokens.checkboxBorderRadius, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight),
             xs: css([
                 "",
                 ":2rem;",
                 ":0.5rem;",
-                ":0.5rem;",
-                ":0.25rem 0.5rem;",
+                ":0.125rem;",
                 ":1.25rem;",
                 ":0.375rem;",
                 ":0.25rem;",
@@ -130,7 +126,7 @@ export var config = {
                 ":var(--plasma-typo-body-xs-font-weight);",
                 ":var(--plasma-typo-body-xs-letter-spacing);",
                 ":var(--plasma-typo-body-xs-line-height);"
-            ], tokens.itemHeight, tokens.itemBackgroundExtraOffset, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemIndent, tokens.itemBorderRadius, tokens.itemTop, tokens.itemBottom, tokens.iconFolderMargin, tokens.switcherMargin, tokens.switcherMarginInverted, tokens.switcherSize, tokens.checkboxMargin, tokens.checkboxSize, tokens.checkboxInnerSize, tokens.checkboxBorderRadius, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight)
+            ], tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemIndent, tokens.itemBorderRadius, tokens.itemTop, tokens.itemBottom, tokens.iconFolderMargin, tokens.switcherMargin, tokens.switcherMarginInverted, tokens.switcherSize, tokens.checkboxMargin, tokens.checkboxSize, tokens.checkboxInnerSize, tokens.checkboxBorderRadius, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight)
         }
     }
 };