@salutejs/plasma-new-hope 0.343.0-canary.2358.19815233540.0 → 0.343.0-canary.2358.19857532595.0

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

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

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

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

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

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

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

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

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

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

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

@@ -198,21 +198,14 @@ import { classes } from "./Tree.tokens";
                 var dropPosition = props.dropPosition, dropLevelOffset = props.dropLevelOffset, indent = props.indent;
                 var left = -dropLevelOffset * indent + offset;
                 var style = {};
-                switch(dropPosition){
-                    case -1:
-                        style.top = 0;
-                        break;
-                    case 1:
-                        style.bottom = 0;
-                        break;
-                    default:
-                        style.bottom = 0;
-                        style.left = indent + offset;
-                        break;
+                if (dropPosition === 0) {
+                    style.left = indent + offset;
                 }
                 return /*#__PURE__*/ React.createElement(Line, {
                     style: style,
-                    left: left
+                    left: left,
+                    dropPosition: dropPosition,
+                    variant: variant
                 });
             }
         })));

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

@@ -4,7 +4,7 @@ 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-42c76870-0"
+    componentId: "sc-eac39373-0"
 })([
     "line-height:0;color:var(",
     ");&:hover{color:var(",
@@ -13,19 +13,19 @@ export var IconArrowWrapper = styled.div.withConfig({
 ], tokens.arrowColor, tokens.arrowColorHover, tokens.arrowColorActive);
 export var StyledArrow = styled(IconDisclosureRightCentered).withConfig({
     displayName: "Tree.styles__StyledArrow",
-    componentId: "sc-42c76870-1"
+    componentId: "sc-eac39373-1"
 })([
     "transition:color 0.3s ease-in,transform 0.15s ease-in;pointer-events:none;user-select:none;"
 ]);
 export var StyledFolder = styled(IconFolder).withConfig({
     displayName: "Tree.styles__StyledFolder",
-    componentId: "sc-42c76870-2"
+    componentId: "sc-eac39373-2"
 })([
     ""
 ]);
 export var TitleWrapper = styled.div.withConfig({
     displayName: "Tree.styles__TitleWrapper",
-    componentId: "sc-42c76870-3"
+    componentId: "sc-eac39373-3"
 })([
     "display:flex;align-items:center;justify-content:space-between;margin:",
     ";overflow:",
@@ -39,7 +39,7 @@ export var TitleWrapper = styled.div.withConfig({
 });
 export var Title = styled.span.withConfig({
     displayName: "Tree.styles__Title",
-    componentId: "sc-42c76870-4"
+    componentId: "sc-eac39373-4"
 })([
     "margin:var(",
     ");overflow:",
@@ -58,25 +58,39 @@ export var Title = styled.span.withConfig({
 });
 export var ContentRight = styled.div.withConfig({
     displayName: "Tree.styles__ContentRight",
-    componentId: "sc-42c76870-5"
+    componentId: "sc-eac39373-5"
 })([
     "line-height:0;"
 ]);
 export var Line = styled.div.withConfig({
     displayName: "Tree.styles__Line",
-    componentId: "sc-42c76870-6"
+    componentId: "sc-eac39373-6"
 })([
-    "left:",
-    "px;right:0;position:absolute;z-index:1;height:0.125rem;background-color:var(",
+    "top:",
+    ";left:",
+    "px;bottom:",
+    ";right:0;position:absolute;z-index:1;height:0.125rem;background-color:var(",
     ");border-radius:1px;pointer-events:none;"
 ], function(param) {
+    var dropPosition = param.dropPosition, variant = param.variant;
+    return dropPosition === -1 ? "calc(var(".concat(variant === 'normal' ? tokens.itemPaddingTop : tokens.itemPaddingTightTop, ") * -1)") : 'auto';
+}, function(param) {
     var left = param.left;
     return left;
+}, function(param) {
+    var dropPosition = param.dropPosition, variant = param.variant;
+    return dropPosition !== -1 ? "calc(var(".concat(variant === 'normal' ? tokens.itemPaddingBottom : tokens.itemPaddingTightBottom, ") * -1)") : 'auto';
 }, 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(",
+    ".rc-tree{margin:0;border:1px solid transparent;}.rc-tree-focused:not(.rc-tree-active-focused){border-color:cyan;}.rc-tree .rc-tree-treenode{display:flex;align-items:center;box-sizing:border-box;margin:0;padding-top:var(",
+    ");padding-right:var(",
+    ");padding-bottom:var(",
+    ");padding-left:var(",
     ");position:relative;z-index:0;width:100%;line-height:24px;white-space:nowrap;list-style:none;outline:0;}.rc-tree.",
-    " .rc-tree-treenode{padding:var(",
+    " .rc-tree-treenode{padding-top:var(",
+    ");padding-right:var(",
+    ");padding-bottom:var(",
+    ");padding-left:var(",
     ");}.rc-tree .rc-tree-treenode .draggable{color:#333;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;user-select:none;}.rc-tree .rc-tree-treenode.dragging{opacity:0.28;}.rc-tree .rc-tree-treenode.drop-container::before,.rc-tree:not(:has(.drop-container)) .rc-tree-treenode.drop-target.",
     "::before,.rc-tree:not(:has(.drop-container)) .rc-tree-treenode.drop-target.drag-over::before{box-shadow:inset 0 0 0 1px var(",
     ");}.rc-tree .rc-tree-treenode.filter-node > .rc-tree-node-content-wrapper{color:#a60000 !important;font-weight:bold !important;}.rc-tree .rc-tree-treenode ul{margin:0;padding:0 0 0 18px;}.rc-tree .rc-tree-treenode .rc-tree-node-content-wrapper{position:relative;margin:0;padding:0;text-decoration:none;vertical-align:top;cursor:pointer;color:var(",
@@ -136,4 +150,4 @@ export var base = css([
     ");}.rc-tree .rc-tree-treenode.rc-tree-treenode-disabled .rc-tree-icon__customize{color:var(",
     ");}.rc-tree-indent-unit{width:var(",
     ");}"
-], tokens.itemPadding, 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);
+], tokens.itemPaddingTop, tokens.itemPaddingRight, tokens.itemPaddingBottom, tokens.itemPaddingLeft, classes.treeTightVariant, tokens.itemPaddingTightTop, tokens.itemPaddingTightRight, tokens.itemPaddingTightBottom, tokens.itemPaddingTightLeft, 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);

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

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

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

@@ -1,7 +0,0 @@
-import { component, mergeConfig } from "../../../engines";
-import { comboboxNewConfig } from "../../..";
-import { config } from "./Combobox.config";
-var mergedConfig = mergeConfig(comboboxNewConfig, config);
-var ComboboxComponent = component(mergedConfig);
-var Combobox = ComboboxComponent;
-export { Combobox };

package/styled-components/es/examples/components/TextField/TextField.clear.config.js

@@ -88,7 +88,7 @@ export var config = {
                 ":var(--text-accent);",
                 ":var(--surface-negative);",
                 ":var(--text-tertiary);"
-            ], tokens.clearColor, tokens.placeholderColor, tokens.placeholderColorFocus, tokens.backgroundColor, tokens.backgroundColorHover, tokens.backgroundColorFocus, tokens.caretColor, tokens.textBeforeColor, tokens.textAfterColor, tokens.labelColor, tokens.leftHelperColor, tokens.titleCaptionColor, tokens.hintIconColor, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotColorActive, tokens.contentSlotRightColor, tokens.contentSlotRightColorHover, tokens.contentSlotRightColorActive, tokens.dividerColor, tokens.dividerColorHover, tokens.dividerColorFocus, tokens.focusColor, tokens.indicatorColor, tokens.optionalColor),
+            ], tokens.color, tokens.placeholderColor, tokens.placeholderColorFocus, tokens.backgroundColor, tokens.backgroundColorHover, tokens.backgroundColorFocus, tokens.caretColor, tokens.textBeforeColor, tokens.textAfterColor, tokens.labelColor, tokens.leftHelperColor, tokens.titleCaptionColor, tokens.hintIconColor, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotColorActive, tokens.contentSlotRightColor, tokens.contentSlotRightColorHover, tokens.contentSlotRightColorActive, tokens.dividerColor, tokens.dividerColorHover, tokens.dividerColorFocus, tokens.focusColor, tokens.indicatorColor, tokens.optionalColor),
             negative: css([
                 "",
                 ":var(--text-negative);",

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

@@ -36,7 +36,13 @@ export var config = {
                 ":3.5rem;",
                 ":1rem;",
                 ":1rem;",
-                ":0.75rem 1rem;",
+                ":1rem;",
+                ":1rem;",
+                ":1rem;",
+                ":0.75rem;",
+                ":1rem;",
+                ":0.75rem;",
+                ":1rem;",
                 ":2rem;",
                 ":0.75rem;",
                 ":0.25rem;",
@@ -55,13 +61,19 @@ 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.itemBackgroundExtraOffset, tokens.itemPaddingTop, tokens.itemPaddingRight, tokens.itemPaddingBottom, tokens.itemPaddingLeft, tokens.itemPaddingTightTop, tokens.itemPaddingTightRight, tokens.itemPaddingTightBottom, tokens.itemPaddingTightLeft, 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.75rem;",
+                ":0.875rem;",
+                ":0.75rem;",
+                ":0.875rem;",
+                ":0.5rem;",
+                ":0.875rem;",
+                ":0.5rem;",
+                ":0.875rem;",
                 ":2rem;",
                 ":0.625rem;",
                 ":0.25rem;",
@@ -80,13 +92,19 @@ 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.itemBackgroundExtraOffset, tokens.itemPaddingTop, tokens.itemPaddingRight, tokens.itemPaddingBottom, tokens.itemPaddingLeft, tokens.itemPaddingTightTop, tokens.itemPaddingTightRight, tokens.itemPaddingTightBottom, tokens.itemPaddingTightLeft, 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.5rem;",
+                ":0.75rem;",
+                ":0.5rem;",
+                ":0.75rem;",
+                ":0.4375rem;",
+                ":0.5rem;",
+                ":0.4375rem;",
+                ":0.5rem;",
                 ":1.875rem;",
                 ":0.5rem;",
                 ":0.25rem;",
@@ -105,13 +123,19 @@ 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.itemBackgroundExtraOffset, tokens.itemPaddingTop, tokens.itemPaddingRight, tokens.itemPaddingBottom, tokens.itemPaddingLeft, tokens.itemPaddingTightTop, tokens.itemPaddingTightRight, tokens.itemPaddingTightBottom, tokens.itemPaddingTightLeft, 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.5rem;",
+                ":0.5rem;",
+                ":0.5rem;",
+                ":0.25rem;",
+                ":0.5rem;",
+                ":0.25rem;",
+                ":0.5rem;",
                 ":1.25rem;",
                 ":0.375rem;",
                 ":0.25rem;",
@@ -130,7 +154,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.itemBackgroundExtraOffset, tokens.itemPaddingTop, tokens.itemPaddingRight, tokens.itemPaddingBottom, tokens.itemPaddingLeft, tokens.itemPaddingTightTop, tokens.itemPaddingTightRight, tokens.itemPaddingTightBottom, tokens.itemPaddingTightLeft, 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)
         }
     }
 };

package/types/components/Combobox/ComboboxNew/Combobox.styles.d.ts

@@ -8,6 +8,7 @@ export declare const Ul: import("@linaria/react").StyledComponent<import("react"
 }>;
 export declare const IconArrowWrapper: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     disabled: boolean;
+    readOnly: boolean;
 }>;
 export declare const sizeMap: Record<string, string>;
 export declare const StyledArrow: import("@linaria/react").StyledMeta & import("react").FC<import("../../_Icon/IconRoot").IconProps & import("react").HTMLAttributes<HTMLDivElement>>;

package/types/components/Combobox/ComboboxNew/Combobox.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Combobox/ComboboxNew/Combobox.styles.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAMjD,eAAO,MAAM,WAAW;gBACR,aAAa,CAAC,WAAW,CAAC;EASzC,CAAC;AAEF,eAAO,MAAM,EAAE;aACF,aAAa,CAAC,SAAS,CAAC;oBACjB,aAAa,CAAC,eAAe,CAAC;EAYjD,CAAC;AAEF,eAAO,MAAM,gBAAgB;cAA0B,OAAO;EAc7D,CAAC;AAGF,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAG1C,CAAC;AAEF,eAAO,MAAM,WAAW,qJAGvB,CAAC;AAEF,eAAO,MAAM,IAAI,0CAAQ,CAAC;AAE1B,eAAO,MAAM,gBAAgB,oQAS5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,uKAG5B,CAAC"}
+{"version":3,"file":"Combobox.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Combobox/ComboboxNew/Combobox.styles.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAMjD,eAAO,MAAM,WAAW;gBACR,aAAa,CAAC,WAAW,CAAC;EASzC,CAAC;AAEF,eAAO,MAAM,EAAE;aACF,aAAa,CAAC,SAAS,CAAC;oBACjB,aAAa,CAAC,eAAe,CAAC;EAYjD,CAAC;AAEF,eAAO,MAAM,gBAAgB;cAA0B,OAAO;cAAY,OAAO;EAchF,CAAC;AAGF,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAG1C,CAAC;AAEF,eAAO,MAAM,WAAW,qJAGvB,CAAC;AAEF,eAAO,MAAM,IAAI,0CAAQ,CAAC;AAE1B,eAAO,MAAM,gBAAgB,oQAS5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,uKAG5B,CAAC"}