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

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

@@ -8,7 +8,7 @@ export var base = css([
 ], tokens.verticalGap);
 export var StyledContent = styled.div.withConfig({
     displayName: "Switch.styles__StyledContent",
-    componentId: "sc-c4704e70-0"
+    componentId: "sc-6da706dd-0"
 })([
     "width:100%;position:relative;display:flex;align-items:center;&.",
     "{justify-content:space-between;",
@@ -20,7 +20,7 @@ export var StyledContent = styled.div.withConfig({
 ], classes.beforeSwitchLabelPosition, tokens.labelOffsetPrivate, tokens.labelOffset, classes.afterSwitchLabelPosition, tokens.labelOffsetPrivate, tokens.labelOffset);
 export var StyledDescription = styled.div.withConfig({
     displayName: "Switch.styles__StyledDescription",
-    componentId: "sc-c4704e70-1"
+    componentId: "sc-6da706dd-1"
 })([
     "position:relative;",
     " display:-webkit-box;line-clamp:var(",
@@ -29,20 +29,21 @@ export var StyledDescription = styled.div.withConfig({
 ], applyEllipsis(), tokens.descriptionMaxLines, tokens.descriptionMaxLines);
 export var StyledInput = styled.input.withConfig({
     displayName: "Switch.styles__StyledInput",
-    componentId: "sc-c4704e70-2"
+    componentId: "sc-6da706dd-2"
 })([
     "position:absolute;right:0;margin:0;opacity:0;&:focus{outline:0 none;}"
 ]);
 export var StyledLabel = styled.span.withConfig({
     displayName: "Switch.styles__StyledLabel",
-    componentId: "sc-c4704e70-3"
+    componentId: "sc-6da706dd-3"
 })([
-    "user-select:none;",
-    ""
-], applyEllipsis());
+    "user-select:none;&.",
+    "{",
+    "}"
+], classes.singleLine, applyEllipsis());
 export var StyledTrigger = styled.div.withConfig({
     displayName: "Switch.styles__StyledTrigger",
-    componentId: "sc-c4704e70-4"
+    componentId: "sc-6da706dd-4"
 })([
     "position:relative;display:flex;align-items:center;transition:background-color 0.15s ease-in-out 0.1s;::after{content:'';position:absolute;right:auto;left:0;transition:width 0.15s ease-in-out 0s,left 0.3s ease-in-out 0s,right 0.3s ease-in-out 0s;}",
     ":checked ~ &::after{right:0;left:auto;}"

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

@@ -46,5 +46,6 @@ export var tokens = {
 };
 export var classes = {
     beforeSwitchLabelPosition: 'switch-label-position-before',
-    afterSwitchLabelPosition: 'switch-label-position-after'
+    afterSwitchLabelPosition: 'switch-label-position-after',
+    singleLine: 'switch-single-line'
 };

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

@@ -115,7 +115,7 @@ import { base as hintSizeCSS } from "./variations/_hint-size/base";
 import { base as chipViewCSS } from "./variations/_chip-view/base";
 import { Input, InputContainer, LeftHelper, Label, InputWrapper, InputLabelWrapper, StyledContentLeft, StyledContentRight, StyledChips, StyledTextBefore, StyledTextAfter, StyledIndicator, StyledOptionalText, InputPlaceholder, OuterLabelWrapper, TitleCaption, StyledHintWrapper, StyledIndicatorWrapper, StyledContentRightWrapper } from "./TextField.styles";
 import { classes } from "./TextField.tokens";
-import { TextFieldChip } from "./ui";
+import { TextFieldChip, TextFieldChipNew } from "./ui";
 import { useKeyNavigation } from "./hooks";
 import { HintComponent } from "./ui/Hint/Hint";
 import { getInputWidth } from "./getInputWidth";
@@ -133,7 +133,9 @@ export var textFieldRoot = function(Root) {
         contentLeft = _param.contentLeft, contentRight = _param.contentRight, label = _param.label, labelPlacement = _param.labelPlacement, keepPlaceholder = _param.keepPlaceholder, textBefore = _param.textBefore, textAfter = _param.textAfter, placeholder = _param.placeholder, leftHelper = _param.leftHelper, _param_enumerationType = _param.enumerationType, enumerationType = _param_enumerationType === void 0 ? 'plain' : _param_enumerationType, _param_requiredPlacement = _param.requiredPlacement, requiredPlacement = _param_requiredPlacement === void 0 ? 'right' : _param_requiredPlacement, _param_hasRequiredIndicator = _param.hasRequiredIndicator, hasRequiredIndicator = _param_hasRequiredIndicator === void 0 ? true : _param_hasRequiredIndicator, titleCaption = _param.titleCaption, _param_chipView = _param.chipView, chipView = _param_chipView === void 0 ? 'default' : _param_chipView, chipValidator = _param.chipValidator, _param_hintTrigger = _param.// hint
         hintTrigger, hintTrigger = _param_hintTrigger === void 0 ? 'hover' : _param_hintTrigger, hintText = _param.hintText, _param_hintView = _param.hintView, hintView = _param_hintView === void 0 ? 'default' : _param_hintView, _param_hintSize = _param.hintSize, hintSize = _param_hintSize === void 0 ? 'm' : _param_hintSize, hintTargetIcon = _param.hintTargetIcon, _param_hintTargetPlacement = _param.hintTargetPlacement, hintTargetPlacement = _param_hintTargetPlacement === void 0 ? 'outer' : _param_hintTargetPlacement, _param_hintPlacement = _param.hintPlacement, hintPlacement = _param_hintPlacement === void 0 ? 'auto' : _param_hintPlacement, hintHasArrow = _param.hintHasArrow, _param_hintOffset = _param.hintOffset, hintOffset = _param_hintOffset === void 0 ? HINT_DEFAULT_OFFSET : _param_hintOffset, hintWidth = _param.hintWidth, hintContentLeft = _param.hintContentLeft, // variations
         view = _param.view, size = _param.size, _param_readOnly = _param.readOnly, readOnly = _param_readOnly === void 0 ? false : _param_readOnly, _param_disabled = _param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, _param_required = _param.required, required = _param_required === void 0 ? false : _param_required, _param_clear = _param.clear, clear = _param_clear === void 0 ? false : _param_clear, optional = _param.optional, hasDivider = _param.hasDivider, // controlled
-        outerValue = _param.value, values = _param.chips, _param_chipType = _param.chipType, chipType = _param_chipType === void 0 ? 'default' : _param_chipType, // events
+        outerValue = _param.value, values = _param.chips, _param_chipType = _param.chipType, chipType = _param_chipType === void 0 ? 'default' : _param_chipType, // @ts-ignore
+        _chips = _param._chips, // @ts-ignore
+        _onChipClick = _param._onChipClick, // events
         onChange = _param.onChange, onChangeChips = _param.onChangeChips, onSearch = _param.onSearch, onKeyDown = _param.onKeyDown, onFocus = _param.onFocus, onBlur = _param.onBlur, onPaste = _param.onPaste, // Пропсы для внутреннего использования, не отдается наружу.
         // @ts-ignore
         _onEnterDisabled = _param._onEnterDisabled, // @ts-ignore
@@ -178,6 +180,8 @@ export var textFieldRoot = function(Root) {
             "value",
             "chips",
             "chipType",
+            "_chips",
+            "_onChipClick",
             "onChange",
             "onChangeChips",
             "onSearch",
@@ -209,7 +213,7 @@ export var textFieldRoot = function(Root) {
         var helperTextId = safeUseId();
         var isDefaultView = view === 'default' || readOnly || disabled;
         var isChipEnumeration = enumerationType === 'chip';
-        var isChipsVisible = isChipEnumeration && Boolean(chips === null || chips === void 0 ? void 0 : chips.length);
+        var isChipsVisible = isChipEnumeration && Boolean((chips === null || chips === void 0 ? void 0 : chips.length) || (_chips === null || _chips === void 0 ? void 0 : _chips.length));
         var withHasChips = isChipsVisible ? classes.hasChips : undefined;
         var hasLabelValue = Boolean(label);
         var hasInnerLabel = size !== 'xs' && labelPlacement === 'inner' && !isChipsVisible && hasLabelValue;
@@ -463,8 +467,20 @@ export var textFieldRoot = function(Root) {
             tabIndex: -1,
             ref: contentRef,
             onKeyDown: handleContentKeyDown,
-            className: withHasChips
-        }, Boolean(textBefore && isChipEnumeration) && /*#__PURE__*/ React.createElement(StyledTextBefore, null, textBefore), isChipEnumeration && Boolean(chips === null || chips === void 0 ? void 0 : chips.length) && /*#__PURE__*/ React.createElement(StyledChips, {
+            className: cx(withHasChips, classes.inputScrollableWrapper)
+        }, Boolean(textBefore && isChipEnumeration) && /*#__PURE__*/ React.createElement(StyledTextBefore, null, textBefore), Boolean(_chips === null || _chips === void 0 ? void 0 : _chips.length) && /*#__PURE__*/ React.createElement(TextFieldChipNew, {
+            chips: _chips,
+            onChipClick: _onChipClick,
+            getRef: getRef,
+            handleChipKeyDown: handleChipKeyDown,
+            onChipClear: onChipClear,
+            view: chipView || view,
+            readOnly: readOnly,
+            chipType: chipType,
+            // TODO: #1547
+            // @ts-ignore
+            _forceChipManipulationWithReadonly: _forceChipManipulationWithReadonly
+        }), isChipEnumeration && Boolean(chips === null || chips === void 0 ? void 0 : chips.length) && /*#__PURE__*/ React.createElement(StyledChips, {
             className: classes.chipsWrapper
         }, chips === null || chips === void 0 ? void 0 : chips.map(function(param, index) {
             var chipId = param.id, text = param.text;

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

@@ -15,6 +15,7 @@ export var classes = {
     textFieldGroupItem: 'text-field-group-item',
     requiredAlignRight: 'required-align-right',
     inputWrapper: 'input-wrapper',
+    inputScrollableWrapper: 'input-scrollable-wrapper',
     inputTextEllipsis: 'textfield-input-text-ellipsis',
     contentRightCompensationMargin: 'textfield-content-right-compensation-margin',
     readOnlyInput: 'textfield-readonly-input'

package/styled-components/es/components/TextField/ui/TextFieldChipNew/TextFieldChipNew.js

@@ -0,0 +1,63 @@
+import React from "react";
+import { TextChip } from "../TextFieldChip/TextFieldChip.styles";
+import { StyledChips } from "../../TextField.styles";
+import { classes } from "../../TextField.tokens";
+import { StyledChip } from "./TextFieldChipNew.styles";
+export var TextFieldChipNew = function(param) {
+    var chips = param.chips, onChipClick = param.onChipClick, getRef = param.getRef, handleChipKeyDown = param.handleChipKeyDown, onChipClear = param.onChipClear, readOnly = param.readOnly, chipType = param.chipType, view = param.view, _forceChipManipulationWithReadonly = param._forceChipManipulationWithReadonly;
+    return /*#__PURE__*/ React.createElement(StyledChips, {
+        className: classes.chipsWrapper
+    }, chips.map(function(param, index) {
+        var value = param.value, label = param.label, disabled = param.disabled;
+        var chipId = "".concat(index, "_").concat(value);
+        var onKeyDownHandle = function(event) {
+            if (handleChipKeyDown) {
+                handleChipKeyDown(event, chipId, index);
+            }
+            if (event.key === 'Enter' || event.key === 'Backspace') {
+                if (onChipClick) {
+                    onChipClick({
+                        value: value,
+                        label: label,
+                        disabled: disabled
+                    });
+                }
+            }
+        };
+        var handleClick = function(event) {
+            event.stopPropagation();
+            if (onChipClick) {
+                onChipClick({
+                    value: value,
+                    label: label,
+                    disabled: disabled
+                });
+            }
+            if (onChipClear) {
+                onChipClear(chipId, index);
+            }
+        };
+        return chipType === 'default' ? /*#__PURE__*/ React.createElement(StyledChip, {
+            key: chipId,
+            ref: function(element) {
+                return getRef(element, index);
+            },
+            tabIndex: -1,
+            disabled: disabled,
+            hasClear: !disabled,
+            readOnly: readOnly,
+            onClick: handleClick,
+            onKeyDown: onKeyDownHandle,
+            text: label,
+            view: view,
+            // TODO: #1547
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            _forceChipManipulationWithReadonly: _forceChipManipulationWithReadonly
+        }) : /*#__PURE__*/ React.createElement(TextChip, {
+            tabIndex: -1,
+            onClick: handleClick,
+            onKeyDown: onKeyDownHandle
+        }, label);
+    }));
+};

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

@@ -0,0 +1,92 @@
+import styled from "styled-components";
+import { component, mergeConfig } from "../../../../engines";
+import { addFocus } from "../../../../mixins";
+import { chipConfig, chipTokens } from "../../../Chip";
+import { tokens } from "../../TextField.tokens";
+// issue #823
+var mergedConfig = mergeConfig(chipConfig);
+var Chip = component(mergedConfig);
+// NOTE: Необходимое переопределение токенов из компонента Chip т.к. используются его части
+export var StyledChip = styled(Chip).withConfig({
+    displayName: "TextFieldChipNew.styles__StyledChip",
+    componentId: "sc-ffa02158-0"
+})([
+    "",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":0.4;",
+    " &[readonly]{opacity:var(",
+    ");}"
+], chipTokens.color, tokens.chipColor, chipTokens.background, tokens.chipBackground, chipTokens.colorHover, tokens.chipColorHover, chipTokens.backgroundHover, tokens.chipBackgroundHover, chipTokens.colorActive, tokens.chipColorActive, chipTokens.backgroundActive, tokens.chipBackgroundActive, chipTokens.backgroundReadOnly, tokens.chipBackgroundReadOnly, chipTokens.colorReadOnly, tokens.chipColorReadOnly, chipTokens.backgroundReadOnlyHover, tokens.chipBackgroundReadOnlyHover, chipTokens.colorReadOnlyHover, tokens.chipColorReadOnlyHover, chipTokens.borderRadius, tokens.chipBorderRadius, chipTokens.width, tokens.chipWidth, chipTokens.height, tokens.chipHeight, chipTokens.padding, tokens.chipPadding, chipTokens.fontFamily, tokens.chipFontFamily, chipTokens.fontSize, tokens.chipFontSize, chipTokens.fontStyle, tokens.chipFontStyle, chipTokens.fontWeight, tokens.chipFontWeight, chipTokens.letterSpacing, tokens.chipLetterSpacing, chipTokens.lineHeight, tokens.chipLineHeight, chipTokens.clearContentMarginLeft, tokens.chipClearContentMarginLeft, chipTokens.clearContentMarginRight, tokens.chipClearContentMarginRight, chipTokens.closeIconSize, tokens.chipCloseIconSize, chipTokens.closeIconColor, tokens.chipCloseIconColor, chipTokens.focusColor, tokens.focusColor, chipTokens.disabledOpacity, addFocus({
+    outlineOffset: '0.0625rem',
+    outlineSize: '0.0625rem',
+    outlineRadius: "calc(var(".concat(tokens.chipBorderRadius, ") - 0.1rem)"),
+    outlineColor: "var(".concat(tokens.focusColor, ")")
+}), tokens.chipOpacityReadonly);
+export var TextChip = styled.button.withConfig({
+    displayName: "TextFieldChipNew.styles__TextChip",
+    componentId: "sc-ffa02158-1"
+})([
+    "display:block;flex:none;background:none;border:none;outline:none;padding:0;white-space:nowrap;cursor:pointer;font-family:var(",
+    ");font-size:var(",
+    ");font-style:var(",
+    ");font-weight:var(",
+    ");letter-spacing:var(",
+    ");line-height:var(",
+    ");color:var(",
+    ");",
+    " &:after{content:',';}&:last-child{&:after{content:'';}}"
+], tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.color, addFocus({
+    outlineOffset: '0.0625rem',
+    outlineSize: '0.0625rem',
+    outlineRadius: "calc(var(".concat(tokens.chipBorderRadius, ") - 0.1rem)"),
+    outlineColor: "var(".concat(tokens.focusColor, ")")
+}));

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

@@ -1 +1,2 @@
 export { TextFieldChip } from "./TextFieldChip/TextFieldChip";
+export { TextFieldChipNew } from "./TextFieldChipNew/TextFieldChipNew";

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

@@ -99,14 +99,14 @@ function _unsupported_iterable_to_array(o, minLen) {
 import React, { forwardRef, useState, useMemo } from "react";
 import Tree from "rc-tree";
 import { cx } from "../../utils";
-import { IconArrowWrapper, StyledArrow, base, StyledFolder, TitleWrapper, Title, ContentRight } from "./Tree.styles";
+import { IconArrowWrapper, StyledArrow, base, StyledFolder, TitleWrapper, Title, ContentRight, Line } from "./Tree.styles";
 import { sizeToIconSize, traverseTree } from "./utils";
 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, _param_fullWidthItemSelection = param.fullWidthItemSelection, fullWidthItemSelection = _param_fullWidthItemSelection === void 0 ? false : _param_fullWidthItemSelection, _param_multiple = param.multiple, multiple = _param_multiple === void 0 ? false : _param_multiple, _param_defaultExpandAll = param.defaultExpandAll, defaultExpandAll = _param_defaultExpandAll === void 0 ? false : _param_defaultExpandAll, _param_autoExpandParent = param.autoExpandParent, autoExpandParent = _param_autoExpandParent === void 0 ? false : _param_autoExpandParent, _param_checkable = param.checkable, checkable = _param_checkable === void 0 ? false : _param_checkable, outerSelectedKeys = param.selectedKeys, checkedKeys = param.checkedKeys, expandedKeys = param.expandedKeys, defaultCheckedKeys = param.defaultCheckedKeys, defaultExpandedKeys = param.defaultExpandedKeys, defaultSelectedKeys = param.defaultSelectedKeys, className = param.className, onTreeSelect = param.onTreeSelect, onTreeCheck = param.onTreeCheck, onTreeExpand = param.onTreeExpand, _param_hasIcon = param.hasIcon, hasIcon = _param_hasIcon === void 0 ? false : _param_hasIcon, icon = param.icon, renderTitle = param.renderTitle, _param_mode = param.mode, mode = _param_mode === void 0 ? 'default' : _param_mode;
+        var items = param.items, _param_arrowPlacement = param.arrowPlacement, arrowPlacement = _param_arrowPlacement === void 0 ? 'left' : _param_arrowPlacement, _param_virtual = param.virtual, virtual = _param_virtual === void 0 ? true : _param_virtual, height = param.height, itemHeight = param.itemHeight, size = param.size, view = param.view, _param_fullWidthItemSelection = param.fullWidthItemSelection, fullWidthItemSelection = _param_fullWidthItemSelection === void 0 ? false : _param_fullWidthItemSelection, _param_multiple = param.multiple, multiple = _param_multiple === void 0 ? false : _param_multiple, _param_defaultExpandAll = param.defaultExpandAll, defaultExpandAll = _param_defaultExpandAll === void 0 ? false : _param_defaultExpandAll, _param_autoExpandParent = param.autoExpandParent, autoExpandParent = _param_autoExpandParent === void 0 ? false : _param_autoExpandParent, _param_checkable = param.checkable, checkable = _param_checkable === void 0 ? false : _param_checkable, outerSelectedKeys = param.selectedKeys, checkedKeys = param.checkedKeys, expandedKeys = param.expandedKeys, defaultCheckedKeys = param.defaultCheckedKeys, defaultExpandedKeys = param.defaultExpandedKeys, defaultSelectedKeys = param.defaultSelectedKeys, className = param.className, onTreeSelect = param.onTreeSelect, onTreeCheck = param.onTreeCheck, onTreeExpand = param.onTreeExpand, _param_hasIcon = param.hasIcon, hasIcon = _param_hasIcon === void 0 ? false : _param_hasIcon, icon = param.icon, renderTitle = param.renderTitle, _param_mode = param.mode, mode = _param_mode === void 0 ? 'default' : _param_mode, _param_draggable = param.draggable, draggable = _param_draggable === void 0 ? false : _param_draggable, onDragStart = param.onDragStart, onDragEnter = param.onDragEnter, onDragOver = param.onDragOver, onDragLeave = param.onDragLeave, onDragEnd = param.onDragEnd, onDrop = param.onDrop, allowDrop = param.allowDrop;
         var _useState = _sliced_to_array(useState(defaultSelectedKeys || []), 2), selected = _useState[0], setSelected = _useState[1];
         var selectedKeys = outerSelectedKeys !== null && outerSelectedKeys !== void 0 ? outerSelectedKeys : selected;
         var isRadioMode = mode === 'radio' && !multiple;
@@ -179,6 +179,36 @@ import { classes } from "./Tree.tokens";
                     fullWidthItemSelection: fullWidthItemSelection,
                     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,
+            onDragEnter: onDragEnter,
+            onDragOver: onDragOver,
+            onDragLeave: onDragLeave,
+            onDragEnd: onDragEnd,
+            onDrop: onDrop,
+            allowDrop: allowDrop,
+            dropIndicatorRender: function(props) {
+                var offset = 0;
+                var dropPosition = props.dropPosition, dropLevelOffset = props.dropLevelOffset, indent = props.indent;
+                var left = -dropLevelOffset * indent + offset;
+                var style = {};
+                switch(dropPosition){
+                    case -1:
+                        style.top = 0;
+                        break;
+                    case 1:
+                        style.bottom = 0;
+                        break;
+                    default:
+                        style.bottom = 0;
+                        style.left = indent + offset;
+                        break;
+                }
+                return /*#__PURE__*/ React.createElement(Line, {
+                    style: style,
+                    left: left
+                });
             }
         })));
     });

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

@@ -5,7 +5,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-b806b1cc-0"
+    componentId: "sc-8ac26406-0"
 })([
     "line-height:0;color:var(",
     ");&:hover{color:var(",
@@ -14,19 +14,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-b806b1cc-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-b806b1cc-2"
+    componentId: "sc-8ac26406-2"
 })([
     ""
 ]);
 export var TitleWrapper = styled.div.withConfig({
     displayName: "Tree.styles__TitleWrapper",
-    componentId: "sc-b806b1cc-3"
+    componentId: "sc-8ac26406-3"
 })([
     "display:flex;align-items:center;justify-content:space-between;margin:",
     ";",
@@ -37,7 +37,7 @@ export var TitleWrapper = styled.div.withConfig({
 }, applyEllipsis());
 export var Title = styled.span.withConfig({
     displayName: "Tree.styles__Title",
-    componentId: "sc-b806b1cc-4"
+    componentId: "sc-8ac26406-4"
 })([
     "margin:var(",
     ");",
@@ -45,12 +45,25 @@ export var Title = styled.span.withConfig({
 ], tokens.iconFolderMargin, applyEllipsis());
 export var ContentRight = styled.div.withConfig({
     displayName: "Tree.styles__ContentRight",
-    componentId: "sc-b806b1cc-5"
+    componentId: "sc-8ac26406-5"
 })([
     "line-height:0;"
 ]);
+export var Line = styled.div.withConfig({
+    displayName: "Tree.styles__Line",
+    componentId: "sc-8ac26406-6"
+})([
+    "left:",
+    "px;right:0;position:absolute;z-index:1;height:0.125rem;background-color:var(",
+    ");border-radius:1px;pointer-events:none;"
+], function(param) {
+    var left = param.left;
+    return left;
+}, 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{margin:0;padding:0;line-height:24px;white-space:nowrap;list-style:none;outline:0;}.rc-tree .rc-tree-treenode .draggable{color:#333;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;user-select:none;}.rc-tree .rc-tree-treenode.dragging{background:rgba(100,100,255,0.1);}.rc-tree .rc-tree-treenode.drop-container > .draggable::after{position:absolute;top:0;right:0;bottom:0;left:0;box-shadow:inset 0 0 0 2px red;content:'';}.rc-tree .rc-tree-treenode.drop-container ~ .rc-tree-treenode{border-left:2px solid chocolate;}.rc-tree .rc-tree-treenode.drop-target{background-color:yellowgreen;}.rc-tree .rc-tree-treenode.drop-target ~ .rc-tree-treenode{border-left:none;}.rc-tree .rc-tree-treenode.filter-node > .rc-tree-node-content-wrapper{color:#a60000 !important;font-weight:bold !important;}.rc-tree .rc-tree-treenode ul{margin:0;padding:0 0 0 18px;}.rc-tree .rc-tree-treenode .rc-tree-node-content-wrapper{position:relative;display:inline-block;height:24px;margin:0;padding:0;text-decoration:none;vertical-align:top;cursor:pointer;color:var(",
+    ".rc-tree{margin:0;border:1px solid transparent;}.rc-tree-focused:not(.rc-tree-active-focused){border-color:cyan;}.rc-tree .rc-tree-treenode{margin:0;padding:0;line-height:24px;white-space:nowrap;list-style:none;outline:0;}.rc-tree .rc-tree-treenode .draggable{color:#333;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;user-select:none;}.rc-tree .rc-tree-treenode.dragging{opacity:0.28;}.rc-tree .rc-tree-treenode.drop-container::before,.rc-tree:not(:has(.drop-container)) .rc-tree-treenode.drop-target.",
+    "::before,.rc-tree:not(:has(.drop-container)) .rc-tree-treenode.drop-target.drag-over::before{box-shadow:inset 0 0 0 1px var(",
+    ");}.rc-tree .rc-tree-treenode.filter-node > .rc-tree-node-content-wrapper{color:#a60000 !important;font-weight:bold !important;}.rc-tree .rc-tree-treenode ul{margin:0;padding:0 0 0 18px;}.rc-tree .rc-tree-treenode .rc-tree-node-content-wrapper{position:relative;display:inline-block;height:24px;margin:0;padding:0;text-decoration:none;vertical-align:top;cursor:pointer;color:var(",
     ");}.rc-tree.",
     " .rc-tree-treenode.rc-tree-treenode-selected .rc-tree-node-content-wrapper{cursor:default;}.rc-tree .rc-tree-treenode.rc-tree-treenode-disabled .rc-tree-node-content-wrapper,.rc-tree .rc-tree-treenode.rc-tree-treenode-disabled span.rc-tree-switcher,.rc-tree .rc-tree-treenode.rc-tree-treenode-disabled span.rc-tree-checkbox,.rc-tree .rc-tree-treenode.rc-tree-treenode-disabled span.rc-tree-iconEle{cursor:default;}.rc-tree .rc-tree-treenode span.rc-tree-switcher,.rc-tree .rc-tree-treenode span.rc-tree-checkbox,.rc-tree .rc-tree-treenode span.rc-tree-iconEle{cursor:pointer;}.rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-icon__customize,.rc-tree .rc-tree-treenode span.rc-tree-checkbox.rc-tree-icon__customize,.rc-tree .rc-tree-treenode span.rc-tree-iconEle.rc-tree-icon__customize{background-image:none;}.rc-tree .rc-tree-treenode span.rc-tree-icon_loading{margin-right:2px;vertical-align:top;background:url('data:image/gif;base64,R0lGODlhEAAQAKIGAMLY8YSx5HOm4Mjc88/g9Ofw+v///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCgAGACwAAAAAEAAQAAADMGi6RbUwGjKIXCAA016PgRBElAVlG/RdLOO0X9nK61W39qvqiwz5Ls/rRqrggsdkAgAh+QQFCgAGACwCAAAABwAFAAADD2hqELAmiFBIYY4MAutdCQAh+QQFCgAGACwGAAAABwAFAAADD1hU1kaDOKMYCGAGEeYFCQAh+QQFCgAGACwKAAIABQAHAAADEFhUZjSkKdZqBQG0IELDQAIAIfkEBQoABgAsCgAGAAUABwAAAxBoVlRKgyjmlAIBqCDCzUoCACH5BAUKAAYALAYACgAHAAUAAAMPaGpFtYYMAgJgLogA610JACH5BAUKAAYALAIACgAHAAUAAAMPCAHWFiI4o1ghZZJB5i0JACH5BAUKAAYALAAABgAFAAcAAAMQCAFmIaEp1motpDQySMNFAgA7') no-repeat scroll 0 0 transparent;}.rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher-noop{flex:none;}.rc-tree.",
     " .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher-noop{display:none;}.rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher_open{background-position:-93px -56px;}.rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher_close{background-position:-75px -56px;}.rc-tree .rc-tree-treenode span.rc-tree-checkbox{width:13px;height:13px;margin:0 3px;background-position:0 0;}.rc-tree .rc-tree-treenode span.rc-tree-checkbox-checked{background-position:-14px 0;}.rc-tree .rc-tree-treenode span.rc-tree-checkbox-indeterminate{background-position:-14px -28px;}.rc-tree .rc-tree-treenode span.rc-tree-checkbox-disabled{background-position:0 -56px;}.rc-tree .rc-tree-treenode span.rc-tree-checkbox.rc-tree-checkbox-checked.rc-tree-checkbox-disabled{background-position:-14px -56px;}.rc-tree .rc-tree-treenode span.rc-tree-checkbox.rc-tree-checkbox-indeterminate.rc-tree-checkbox-disabled{position:relative;background:#ccc;border-radius:3px;}.rc-tree .rc-tree-treenode span.rc-tree-checkbox.rc-tree-checkbox-indeterminate.rc-tree-checkbox-disabled::after{position:absolute;top:5px;left:3px;width:5px;height:0;border:2px solid #fff;border-top:0;border-left:0;-webkit-transform:scale(1);transform:scale(1);content:' ';}.rc-tree:not(.rc-tree-show-line) .rc-tree-treenode .rc-tree-switcher-noop{background:none;}.rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child) > ul{background:url('data:image/gif;base64,R0lGODlhCQACAIAAAMzMzP///yH5BAEAAAEALAAAAAAJAAIAAAIEjI9pUAA7') 0 0 repeat-y;}.rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child) > .rc-tree-switcher-noop{background-position:-56px -18px;}.rc-tree.rc-tree-show-line .rc-tree-treenode:last-child > .rc-tree-switcher-noop{background-position:-56px -36px;}.rc-tree-child-tree{display:none;}.rc-tree-child-tree-open{display:block;}.rc-tree-treenode-disabled > span:not(.rc-tree-switcher),.rc-tree-treenode-disabled > a,.rc-tree-treenode-disabled > a span{color:#767676;cursor:not-allowed;}.rc-tree-treenode-active{background:rgba(0,0,0,0.1);}.rc-tree-node-selected{background-color:#ffe6b0;box-shadow:0 0 0 1px #ffb951;opacity:0.8;}.rc-tree-icon__open{margin-right:0;vertical-align:top;background-position:-110px -16px;}.rc-tree-icon__close{margin-right:0;vertical-align:top;background-position:-110px 0;}.rc-tree-icon__docu{margin-right:0;vertical-align:top;background-position:-110px -32px;}.rc-tree-icon__customize{display:block;line-height:0;color:var(",
@@ -112,4 +125,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.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);
+], 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

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

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

@@ -102,6 +102,9 @@ var dfs = function(node, selectedKeys, rootParentsSelected, parents) {
     })[0]) === null || _parents_filter_ === void 0 ? void 0 : _parents_filter_.key)) {
         node.className = cls(node.className, classes.treeItemPrimaryBackground);
     }
+    if (!node.children) {
+        node.className = cls(node.className, classes.treeLeafNode);
+    }
 };
 var getRootParentsSelectedChildren = function(node, selectedKeysSet) {
     var rootParentsSelected = new Set();
@@ -127,9 +130,6 @@ var getRootParentsSelectedChildren = function(node, selectedKeysSet) {
 };
 // Перебираем и клонируем элементы в дереве, а также добавляем к ним класснеймы.
 export var traverseTree = function(items, selectedKeys) {
-    if (!selectedKeys || selectedKeys.length === 0) {
-        return items;
-    }
     var selectedKeysSet = new Set(selectedKeys);
     var copyItems = deepCopy(items);
     var rootParentsSelected = getRootParentsSelectedChildren({

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

@@ -26,8 +26,9 @@ export var config = {
                 ":transparent;",
                 ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-solid-default) 85% );",
                 ":var(--text-primary);",
+                ":var(--text-secondary);",
                 ":var(--surface-accent);"
-            ], paginationTokens.buttonColor, paginationTokens.buttonColorHover, paginationTokens.buttonColorActive, paginationTokens.buttonHoverColor, paginationTokens.buttonBackgroundColor, paginationTokens.buttonBackgroundColorHover, paginationTokens.buttonBackgroundColorActive, paginationTokens.buttonActiveColor, paginationTokens.buttonArrowColor, paginationTokens.buttonArrowColorHover, paginationTokens.buttonArrowColorActive, paginationTokens.buttonDisabledOpacity, paginationTokens.inputBackgroundColor, paginationTokens.inputBorderColor, paginationTokens.selectBackgroundColor, paginationTokens.paginationColor, paginationTokens.buttonFocusColor),
+            ], paginationTokens.buttonColor, paginationTokens.buttonColorHover, paginationTokens.buttonColorActive, paginationTokens.buttonHoverColor, paginationTokens.buttonBackgroundColor, paginationTokens.buttonBackgroundColorHover, paginationTokens.buttonBackgroundColorActive, paginationTokens.buttonActiveColor, paginationTokens.buttonArrowColor, paginationTokens.buttonArrowColorHover, paginationTokens.buttonArrowColorActive, paginationTokens.buttonDisabledOpacity, paginationTokens.inputBackgroundColor, paginationTokens.inputBorderColor, paginationTokens.selectBackgroundColor, paginationTokens.paginationColor, paginationTokens.paginationHelperTextColor, paginationTokens.buttonFocusColor),
             secondary: css([
                 "",
                 ":var(--text-primary);",
@@ -46,8 +47,9 @@ export var config = {
                 ":var(--surface-solid-secondary);",
                 ":transparent;",
                 ":var(--text-primary);",
+                ":var(--text-secondary);",
                 ":var(--surface-accent);"
-            ], paginationTokens.buttonColor, paginationTokens.buttonColorHover, paginationTokens.buttonColorActive, paginationTokens.buttonBackgroundColor, paginationTokens.buttonBackgroundColorHover, paginationTokens.buttonBackgroundColorActive, paginationTokens.buttonHoverColor, paginationTokens.buttonActiveColor, paginationTokens.buttonArrowColor, paginationTokens.buttonArrowColorHover, paginationTokens.buttonArrowColorActive, paginationTokens.buttonDisabledOpacity, paginationTokens.inputBackgroundColor, paginationTokens.selectBackgroundColor, paginationTokens.inputBorderColor, paginationTokens.paginationColor, paginationTokens.buttonFocusColor),
+            ], paginationTokens.buttonColor, paginationTokens.buttonColorHover, paginationTokens.buttonColorActive, paginationTokens.buttonBackgroundColor, paginationTokens.buttonBackgroundColorHover, paginationTokens.buttonBackgroundColorActive, paginationTokens.buttonHoverColor, paginationTokens.buttonActiveColor, paginationTokens.buttonArrowColor, paginationTokens.buttonArrowColorHover, paginationTokens.buttonArrowColorActive, paginationTokens.buttonDisabledOpacity, paginationTokens.inputBackgroundColor, paginationTokens.selectBackgroundColor, paginationTokens.inputBorderColor, paginationTokens.paginationColor, paginationTokens.paginationHelperTextColor, paginationTokens.buttonFocusColor),
             clear: css([
                 "",
                 ":var(--text-primary);",
@@ -66,8 +68,9 @@ export var config = {
                 ":var(--surface-solid-card);",
                 ":transparent;",
                 ":var(--text-primary);",
+                ":var(--text-secondary);",
                 ":var(--surface-accent);"
-            ], paginationTokens.buttonColor, paginationTokens.buttonColorHover, paginationTokens.buttonColorActive, paginationTokens.buttonBackgroundColor, paginationTokens.buttonBackgroundColorHover, paginationTokens.buttonBackgroundColorActive, paginationTokens.buttonHoverColor, paginationTokens.buttonActiveColor, paginationTokens.buttonArrowColor, paginationTokens.buttonArrowColorHover, paginationTokens.buttonArrowColorActive, paginationTokens.buttonDisabledOpacity, paginationTokens.inputBackgroundColor, paginationTokens.selectBackgroundColor, paginationTokens.inputBorderColor, paginationTokens.paginationColor, paginationTokens.buttonFocusColor)
+            ], paginationTokens.buttonColor, paginationTokens.buttonColorHover, paginationTokens.buttonColorActive, paginationTokens.buttonBackgroundColor, paginationTokens.buttonBackgroundColorHover, paginationTokens.buttonBackgroundColorActive, paginationTokens.buttonHoverColor, paginationTokens.buttonActiveColor, paginationTokens.buttonArrowColor, paginationTokens.buttonArrowColorHover, paginationTokens.buttonArrowColorActive, paginationTokens.buttonDisabledOpacity, paginationTokens.inputBackgroundColor, paginationTokens.selectBackgroundColor, paginationTokens.inputBorderColor, paginationTokens.paginationColor, paginationTokens.paginationHelperTextColor, paginationTokens.buttonFocusColor)
         },
         viewCurrentPage: {
             default: css([
@@ -132,8 +135,9 @@ export var config = {
                 ":4rem;",
                 ":3.5rem;",
                 ":0 0.625rem;",
-                ":0.0625rem;"
-            ], paginationTokens.paginationFontFamily, paginationTokens.paginationFontSize, paginationTokens.paginationFontStyle, paginationTokens.paginationFontWeight, paginationTokens.paginationLetterSpacing, paginationTokens.paginationLineHeight, paginationTokens.buttonHeight, paginationTokens.buttonWidth, paginationTokens.buttonWidthShorter, paginationTokens.paginationInputWidth, paginationTokens.buttonRadius, paginationTokens.paginationIconSize, paginationTokens.paginationIconDoubleSize, paginationTokens.buttonArrowMargin, paginationTokens.selectHeight, paginationTokens.selectPaddingTop, paginationTokens.selectPaddingRight, paginationTokens.selectPaddingBottom, paginationTokens.selectPaddingLeft, paginationTokens.selectItemHeight, paginationTokens.selectItemPadding, paginationTokens.selectItemContentLeftWidth, paginationTokens.selectItemBackground, paginationTokens.selectTargetArrowRight, paginationTokens.selectTargetPadding, paginationTokens.selectTargetInnerTop, paginationTokens.selectTargetLabelInnerTop, paginationTokens.inputBorderRadius, paginationTokens.inputWidth, paginationTokens.inputHeight, paginationTokens.inputPadding, paginationTokens.inputBorderWidth),
+                ":0.0625rem;",
+                ":0.5rem 2.5rem;"
+            ], paginationTokens.paginationFontFamily, paginationTokens.paginationFontSize, paginationTokens.paginationFontStyle, paginationTokens.paginationFontWeight, paginationTokens.paginationLetterSpacing, paginationTokens.paginationLineHeight, paginationTokens.buttonHeight, paginationTokens.buttonWidth, paginationTokens.buttonWidthShorter, paginationTokens.paginationInputWidth, paginationTokens.buttonRadius, paginationTokens.paginationIconSize, paginationTokens.paginationIconDoubleSize, paginationTokens.buttonArrowMargin, paginationTokens.selectHeight, paginationTokens.selectPaddingTop, paginationTokens.selectPaddingRight, paginationTokens.selectPaddingBottom, paginationTokens.selectPaddingLeft, paginationTokens.selectItemHeight, paginationTokens.selectItemPadding, paginationTokens.selectItemContentLeftWidth, paginationTokens.selectItemBackground, paginationTokens.selectTargetArrowRight, paginationTokens.selectTargetPadding, paginationTokens.selectTargetInnerTop, paginationTokens.selectTargetLabelInnerTop, paginationTokens.inputBorderRadius, paginationTokens.inputWidth, paginationTokens.inputHeight, paginationTokens.inputPadding, paginationTokens.inputBorderWidth, paginationTokens.paginationHelperTextGap),
             m: css([
                 "",
                 ":var(--plasma-typo-body-m-font-family);",
@@ -167,8 +171,9 @@ export var config = {
                 ":3.5rem;",
                 ":3rem;",
                 ":0 0.625rem;",
-                ":0.0625rem;"
-            ], paginationTokens.paginationFontFamily, paginationTokens.paginationFontSize, paginationTokens.paginationFontStyle, paginationTokens.paginationFontWeight, paginationTokens.paginationLetterSpacing, paginationTokens.paginationLineHeight, paginationTokens.buttonHeight, paginationTokens.buttonWidth, paginationTokens.buttonWidthShorter, paginationTokens.paginationInputWidth, paginationTokens.buttonRadius, paginationTokens.paginationIconSize, paginationTokens.paginationIconDoubleSize, paginationTokens.buttonArrowMargin, paginationTokens.selectHeight, paginationTokens.selectPaddingTop, paginationTokens.selectPaddingRight, paginationTokens.selectPaddingBottom, paginationTokens.selectPaddingLeft, paginationTokens.selectItemHeight, paginationTokens.selectItemPadding, paginationTokens.selectItemContentLeftWidth, paginationTokens.selectItemBackground, paginationTokens.selectTargetArrowRight, paginationTokens.selectTargetPadding, paginationTokens.selectTargetInnerTop, paginationTokens.selectTargetLabelInnerTop, paginationTokens.inputBorderRadius, paginationTokens.inputWidth, paginationTokens.inputHeight, paginationTokens.inputPadding, paginationTokens.inputBorderWidth),
+                ":0.0625rem;",
+                ":0.5rem 2.5rem;"
+            ], paginationTokens.paginationFontFamily, paginationTokens.paginationFontSize, paginationTokens.paginationFontStyle, paginationTokens.paginationFontWeight, paginationTokens.paginationLetterSpacing, paginationTokens.paginationLineHeight, paginationTokens.buttonHeight, paginationTokens.buttonWidth, paginationTokens.buttonWidthShorter, paginationTokens.paginationInputWidth, paginationTokens.buttonRadius, paginationTokens.paginationIconSize, paginationTokens.paginationIconDoubleSize, paginationTokens.buttonArrowMargin, paginationTokens.selectHeight, paginationTokens.selectPaddingTop, paginationTokens.selectPaddingRight, paginationTokens.selectPaddingBottom, paginationTokens.selectPaddingLeft, paginationTokens.selectItemHeight, paginationTokens.selectItemPadding, paginationTokens.selectItemContentLeftWidth, paginationTokens.selectItemBackground, paginationTokens.selectTargetArrowRight, paginationTokens.selectTargetPadding, paginationTokens.selectTargetInnerTop, paginationTokens.selectTargetLabelInnerTop, paginationTokens.inputBorderRadius, paginationTokens.inputWidth, paginationTokens.inputHeight, paginationTokens.inputPadding, paginationTokens.inputBorderWidth, paginationTokens.paginationHelperTextGap),
             s: css([
                 "",
                 ":var(--plasma-typo-body-s-font-family);",
@@ -202,8 +207,9 @@ export var config = {
                 ":3rem;",
                 ":2.5rem;",
                 ":0 0.625rem;",
-                ":0.0625rem;"
-            ], paginationTokens.paginationFontFamily, paginationTokens.paginationFontSize, paginationTokens.paginationFontStyle, paginationTokens.paginationFontWeight, paginationTokens.paginationLetterSpacing, paginationTokens.paginationLineHeight, paginationTokens.buttonHeight, paginationTokens.buttonWidth, paginationTokens.buttonWidthShorter, paginationTokens.paginationInputWidth, paginationTokens.buttonRadius, paginationTokens.paginationIconSize, paginationTokens.paginationIconDoubleSize, paginationTokens.buttonArrowMargin, paginationTokens.selectHeight, paginationTokens.selectPaddingTop, paginationTokens.selectPaddingRight, paginationTokens.selectPaddingBottom, paginationTokens.selectPaddingLeft, paginationTokens.selectItemHeight, paginationTokens.selectItemPadding, paginationTokens.selectItemContentLeftWidth, paginationTokens.selectItemBackground, paginationTokens.selectTargetArrowRight, paginationTokens.selectTargetPadding, paginationTokens.selectTargetInnerTop, paginationTokens.selectTargetLabelInnerTop, paginationTokens.inputBorderRadius, paginationTokens.inputWidth, paginationTokens.inputHeight, paginationTokens.inputPadding, paginationTokens.inputBorderWidth),
+                ":0.0625rem;",
+                ":0.5rem 2.5rem;"
+            ], paginationTokens.paginationFontFamily, paginationTokens.paginationFontSize, paginationTokens.paginationFontStyle, paginationTokens.paginationFontWeight, paginationTokens.paginationLetterSpacing, paginationTokens.paginationLineHeight, paginationTokens.buttonHeight, paginationTokens.buttonWidth, paginationTokens.buttonWidthShorter, paginationTokens.paginationInputWidth, paginationTokens.buttonRadius, paginationTokens.paginationIconSize, paginationTokens.paginationIconDoubleSize, paginationTokens.buttonArrowMargin, paginationTokens.selectHeight, paginationTokens.selectPaddingTop, paginationTokens.selectPaddingRight, paginationTokens.selectPaddingBottom, paginationTokens.selectPaddingLeft, paginationTokens.selectItemHeight, paginationTokens.selectItemPadding, paginationTokens.selectItemContentLeftWidth, paginationTokens.selectItemBackground, paginationTokens.selectTargetArrowRight, paginationTokens.selectTargetPadding, paginationTokens.selectTargetInnerTop, paginationTokens.selectTargetLabelInnerTop, paginationTokens.inputBorderRadius, paginationTokens.inputWidth, paginationTokens.inputHeight, paginationTokens.inputPadding, paginationTokens.inputBorderWidth, paginationTokens.paginationHelperTextGap),
             xs: css([
                 "",
                 ":var(--plasma-typo-body-xs-font-family);",
@@ -237,8 +243,9 @@ export var config = {
                 ":2.5rem;",
                 ":2rem;",
                 ":0 0.625rem;",
-                ":0.0625rem;"
-            ], paginationTokens.paginationFontFamily, paginationTokens.paginationFontSize, paginationTokens.paginationFontStyle, paginationTokens.paginationFontWeight, paginationTokens.paginationLetterSpacing, paginationTokens.paginationLineHeight, paginationTokens.buttonHeight, paginationTokens.paginationInputWidth, paginationTokens.buttonRadius, paginationTokens.buttonWidth, paginationTokens.buttonWidthShorter, paginationTokens.paginationIconSize, paginationTokens.paginationIconDoubleSize, paginationTokens.buttonArrowMargin, paginationTokens.selectHeight, paginationTokens.selectPaddingTop, paginationTokens.selectPaddingRight, paginationTokens.selectPaddingBottom, paginationTokens.selectPaddingLeft, paginationTokens.selectItemHeight, paginationTokens.selectItemPadding, paginationTokens.selectItemContentLeftWidth, paginationTokens.selectItemBackground, paginationTokens.selectTargetArrowRight, paginationTokens.selectTargetPadding, paginationTokens.selectTargetInnerTop, paginationTokens.selectTargetLabelInnerTop, paginationTokens.inputBorderRadius, paginationTokens.inputWidth, paginationTokens.inputHeight, paginationTokens.inputPadding, paginationTokens.inputBorderWidth)
+                ":0.0625rem;",
+                ":0.5rem 2.5rem;"
+            ], paginationTokens.paginationFontFamily, paginationTokens.paginationFontSize, paginationTokens.paginationFontStyle, paginationTokens.paginationFontWeight, paginationTokens.paginationLetterSpacing, paginationTokens.paginationLineHeight, paginationTokens.buttonHeight, paginationTokens.paginationInputWidth, paginationTokens.buttonRadius, paginationTokens.buttonWidth, paginationTokens.buttonWidthShorter, paginationTokens.paginationIconSize, paginationTokens.paginationIconDoubleSize, paginationTokens.buttonArrowMargin, paginationTokens.selectHeight, paginationTokens.selectPaddingTop, paginationTokens.selectPaddingRight, paginationTokens.selectPaddingBottom, paginationTokens.selectPaddingLeft, paginationTokens.selectItemHeight, paginationTokens.selectItemPadding, paginationTokens.selectItemContentLeftWidth, paginationTokens.selectItemBackground, paginationTokens.selectTargetArrowRight, paginationTokens.selectTargetPadding, paginationTokens.selectTargetInnerTop, paginationTokens.selectTargetLabelInnerTop, paginationTokens.inputBorderRadius, paginationTokens.inputWidth, paginationTokens.inputHeight, paginationTokens.inputPadding, paginationTokens.inputBorderWidth, paginationTokens.paginationHelperTextGap)
         },
         type: {
             compact: css([