@salutejs/plasma-new-hope 0.336.0-canary.2220.17673344609.0 → 0.336.0-canary.2222.17762952669.0

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

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

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

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

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

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

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

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

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

@@ -111,19 +111,20 @@ function _unsupported_iterable_to_array(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
 }
-import React, { forwardRef, Fragment, useCallback, useRef, useState } from "react";
+import React, { forwardRef, Fragment, useCallback, useEffect, useRef, useState } from "react";
 import cls from "classnames";
 import { useDidMountEffect } from "../../hooks";
 import { getSizeValueFromProp } from "../../utils";
 import { useCodeHook } from "../../hooks";
 import { BACKSPACE_KEY, FORBIDDEN_KEYS, ONLY_DIGITS_PATTERN } from "./utils/constants";
-import { getCodeValue, getFieldPattern, getPlaceholderValue, handleCodeError, handleItemError } from "./utils";
+import { getCodeValue, getFieldPattern, getPlaceholderValue, handleCodeError, handleItemError, isWebOTPSupported } from "./utils";
 import { classes } from "./CodeField.tokens";
-import { base, CaptionWrapper, CodeGroup, CodeWrapper, ItemInput, Separator } from "./CodeField.styles";
+import { base, CaptionWrapper, CodeGroup, CodeWrapper, HiddenInput, ItemInput, Separator } from "./CodeField.styles";
 import { base as viewCSS } from "./variations/_view/base";
 import { base as sizeCSS } from "./variations/_size/base";
 import { base as shapeCSS } from "./variations/_shape/base";
 import { base as disabledCSS } from "./variations/_disabled/base";
+import { useWebOTP } from "./hooks/useWebOTP";
 export var codeFieldRoot = function(Root) {
     return /*#__PURE__*/ forwardRef(function(_param, ref) {
         var className = _param.className, outerValue = _param.value, placeholder = _param.placeholder, autoFocus = _param.autoFocus, _param_codeLength = _param.codeLength, codeLength = _param_codeLength === void 0 ? 6 : _param_codeLength, caption = _param.caption, _param_captionAlign = _param.captionAlign, captionAlign = _param_captionAlign === void 0 ? 'left' : _param_captionAlign, width = _param.width, _param_shape = _param.shape, shape = _param_shape === void 0 ? 'default' : _param_shape, view = _param.view, size = _param.size, disabled = _param.disabled, isError = _param.isError, _param_allowedSymbols = _param.allowedSymbols, allowedSymbols = _param_allowedSymbols === void 0 ? ONLY_DIGITS_PATTERN : _param_allowedSymbols, _param_itemErrorBehavior = _param.itemErrorBehavior, itemErrorBehavior = _param_itemErrorBehavior === void 0 ? 'remove-symbol' : _param_itemErrorBehavior, _param_codeErrorBehavior = _param.codeErrorBehavior, codeErrorBehavior = _param_codeErrorBehavior === void 0 ? 'remove-code' : _param_codeErrorBehavior, _param_autoComplete = _param.autoComplete, autoComplete = _param_autoComplete === void 0 ? 'one-time-code' : _param_autoComplete, setIsError = _param.setIsError, onChange = _param.onChange, onFullCodeEnter = _param.onFullCodeEnter, rest = _object_without_properties(_param, [
@@ -148,15 +149,19 @@ export var codeFieldRoot = function(Root) {
             "onChange",
             "onFullCodeEnter"
         ]);
-        var _useState = _sliced_to_array(useState(getCodeValue(codeLength, outerValue || '')), 2), code = _useState[0], setCode = _useState[1];
+        var _autocompleteRef_current;
+        var _useState = _sliced_to_array(useState(getCodeValue(codeLength, '')), 2), innerValue = _useState[0], setInnerValue = _useState[1];
+        var code = typeof outerValue === 'string' ? getCodeValue(codeLength, outerValue) : innerValue;
         var _useState1 = _sliced_to_array(useState(code.join('')), 2), originalValue = _useState1[0], setOriginalValue = _useState1[1];
         var inputRefs = useRef([]);
         var inputContainerRef = useRef(null);
         var captionRef = useRef(null);
+        var autocompleteRef = useRef(null);
         var fieldPattern = getFieldPattern(allowedSymbols);
         var placeholderValue = getPlaceholderValue(codeLength, placeholder);
         var parts = codeLength === 6 ? 2 : 1;
         var widthValue = width ? getSizeValueFromProp(width, 'rem') : undefined;
+        var isWebOTPEnabled = autoComplete === 'one-time-code' && !disabled && isWebOTPSupported();
         var getLastActiveIndex = function() {
             if (code.length && code.length < codeLength) {
                 return code.length;
@@ -166,6 +171,22 @@ export var codeFieldRoot = function(Root) {
             });
             return lastEmptyIndex >= 0 ? lastEmptyIndex : codeLength - 1;
         };
+        var codeSetter = function(newCode) {
+            var originalCode = newCode.join('');
+            setInnerValue(getCodeValue(codeLength, originalCode));
+            setOriginalValue(originalCode);
+            if (onChange) {
+                onChange(originalCode);
+            }
+        };
+        useWebOTP({
+            codeString: originalValue,
+            enableSMSAutoRead: autoComplete === 'one-time-code',
+            disabled: Boolean(disabled),
+            codeLength: codeLength,
+            codeSetter: codeSetter,
+            onFullCodeEnter: onFullCodeEnter
+        });
         var handleClick = function() {
             if (disabled) {
                 return;
@@ -185,19 +206,24 @@ export var codeFieldRoot = function(Root) {
                 return;
             }
             if (key === BACKSPACE_KEY) {
-                if (index > 0 && code[index] === '') {
-                    var _inputRefs_current_;
-                    (_inputRefs_current_ = inputRefs.current[index - 1]) === null || _inputRefs_current_ === void 0 ? void 0 : _inputRefs_current_.focus();
+                if (index > 0) {
+                    var _inputRefs_current_index;
+                    var newCode = _to_consumable_array(code);
+                    newCode[index] = '';
+                    if (index >= codeLength - 1 && code[index]) {
+                        codeSetter(newCode);
+                        return;
+                    }
+                    if (!code[index]) {
+                        var _inputRefs_current_;
+                        newCode[index - 1] = '';
+                        (_inputRefs_current_ = inputRefs.current[index - 1]) === null || _inputRefs_current_ === void 0 ? void 0 : _inputRefs_current_.focus();
+                    }
+                    (_inputRefs_current_index = inputRefs.current[index]) === null || _inputRefs_current_index === void 0 ? void 0 : _inputRefs_current_index.classList.remove(classes.itemError);
+                    codeSetter(newCode);
                 }
             }
         };
-        var codeSetter = function(newCode) {
-            setCode(newCode);
-            setOriginalValue(newCode.join(''));
-            if (onChange) {
-                onChange(newCode.join(''));
-            }
-        };
         var handleChange = function(event, index) {
             var _inputRefs_current_index;
             if (disabled) {
@@ -218,6 +244,9 @@ export var codeFieldRoot = function(Root) {
                     setIsError(false);
                 }
             }
+            if (!symbol) {
+                return;
+            }
             if (!fieldPattern) {
                 newCode[index] = symbol;
                 codeSetter(newCode);
@@ -227,11 +256,6 @@ export var codeFieldRoot = function(Root) {
                 }
                 return;
             }
-            if (!symbol) {
-                newCode[index] = '';
-                codeSetter(newCode);
-                return;
-            }
             if (fieldPattern.test(symbol)) {
                 newCode[index] = symbol.charAt(symbol.length - 1);
                 codeSetter(newCode);
@@ -247,8 +271,9 @@ export var codeFieldRoot = function(Root) {
                     index: index,
                     newCode: newCode,
                     inputRefs: inputRefs,
-                    setCode: setCode,
-                    codeSetter: codeSetter
+                    setInnerValue: setInnerValue,
+                    codeSetter: codeSetter,
+                    onChange: onChange
                 });
             }
         };
@@ -294,14 +319,24 @@ export var codeFieldRoot = function(Root) {
                     inputRefs: inputRefs,
                     inputContainerRef: inputContainerRef,
                     captionRef: captionRef,
-                    setCode: setCode,
+                    setInnerValue: setInnerValue,
                     codeSetter: codeSetter
                 });
             }
         }, [
             isError
         ]);
-        return /*#__PURE__*/ React.createElement(Root, _object_spread({
+        useEffect(function() {
+            if (disabled || !autocompleteRef.current) {
+                return;
+            }
+            var autocompleteCode = autocompleteRef.current.value.split('');
+            codeSetter(autocompleteCode);
+        }, [
+            (_autocompleteRef_current = autocompleteRef.current) === null || _autocompleteRef_current === void 0 ? void 0 : _autocompleteRef_current.value,
+            disabled
+        ]);
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Root, _object_spread({
             ref: ref,
             view: view,
             size: size,
@@ -309,7 +344,7 @@ export var codeFieldRoot = function(Root) {
             disabled: disabled,
             onClick: handleClick,
             className: cls(className, _define_property({}, classes.captionAlignLeft, captionAlign === 'left'))
-        }, rest), /*#__PURE__*/ React.createElement(CodeWrapper, {
+        }, !isWebOTPEnabled && _object_spread({}, rest)), /*#__PURE__*/ React.createElement(CodeWrapper, {
             ref: inputContainerRef
         }, _to_consumable_array(Array(parts)).map(function(_, partIndex) {
             return /*#__PURE__*/ React.createElement(Fragment, {
@@ -326,7 +361,6 @@ export var codeFieldRoot = function(Root) {
                     },
                     className: cls((_obj = {}, _define_property(_obj, classes.segmented, shape === 'segmented'), _define_property(_obj, classes.hoverEnabled, !disabled && inputCorrectIndex >= originalValue.length), _obj)),
                     value: code[inputCorrectIndex] || '',
-                    autoComplete: autoComplete,
                     onChange: function(e) {
                         handleChange(e, inputCorrectIndex);
                     },
@@ -343,7 +377,11 @@ export var codeFieldRoot = function(Root) {
             ref: captionRef,
             captionAlign: captionAlign,
             widthValue: widthValue
-        }, caption));
+        }, caption), isWebOTPEnabled && /*#__PURE__*/ React.createElement(HiddenInput, _object_spread({
+            ref: autocompleteRef,
+            autoComplete: autoComplete,
+            tabIndex: -1
+        }, rest))));
     });
 };
 export var codeFieldConfig = {

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

@@ -7,32 +7,32 @@ export var base = css([
 ], classes.captionAlignLeft);
 export var CodeWrapper = styled.div.withConfig({
     displayName: "CodeField.styles__CodeWrapper",
-    componentId: "sc-88b863b6-0"
+    componentId: "sc-ff3d9c22-0"
 })([
     "display:flex;align-items:center;"
 ]);
 export var CodeGroup = styled.div.withConfig({
     displayName: "CodeField.styles__CodeGroup",
-    componentId: "sc-88b863b6-1"
+    componentId: "sc-ff3d9c22-1"
 })([
     "display:flex;align-items:center;"
 ]);
 export var Separator = styled.div.withConfig({
     displayName: "CodeField.styles__Separator",
-    componentId: "sc-88b863b6-2"
+    componentId: "sc-ff3d9c22-2"
 })([
     "width:var(",
     ");"
 ], tokens.separatorWidth);
 export var ItemInput = styled.input.withConfig({
     displayName: "CodeField.styles__ItemInput",
-    componentId: "sc-88b863b6-3"
+    componentId: "sc-ff3d9c22-3"
 })([
     "box-sizing:border-box;appearance:none;border:0;padding:0;outline:none;pointer-events:none;text-align:center;"
 ]);
 export var CaptionWrapper = styled.div.withConfig({
     displayName: "CodeField.styles__CaptionWrapper",
-    componentId: "sc-88b863b6-4"
+    componentId: "sc-ff3d9c22-4"
 })([
     "text-align:",
     ";align-self:",
@@ -48,3 +48,9 @@ export var CaptionWrapper = styled.div.withConfig({
     var widthValue = param.widthValue;
     return widthValue || 'auto';
 });
+export var HiddenInput = styled.input.withConfig({
+    displayName: "CodeField.styles__HiddenInput",
+    componentId: "sc-ff3d9c22-5"
+})([
+    "display:none;"
+]);