@salutejs/plasma-new-hope 0.326.0-canary.1973.15428061748.0 → 0.326.0-canary.1973.15523989355.0

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

@@ -82,7 +82,6 @@ var codeInputRoot = exports.codeInputRoot = function codeInputRoot(Root) {
     var fieldPattern = (0, _utils2.getFieldPattern)(allowedSymbols);
     var placeholderValue = (0, _utils2.getPlaceholderValue)(codeLength, placeholder);
     var parts = codeLength === 6 ? 2 : 1;
-    var viewClass = (0, _utils2.getCodeInputViewClass)(view || 'default');
     var widthValue = width ? (0, _utils.getSizeValueFromProp)(width, 'rem') : undefined;
     var getLastActiveIndex = function getLastActiveIndex() {
       if (code.length && code.length < codeLength) {
@@ -102,7 +101,7 @@ var codeInputRoot = exports.codeInputRoot = function codeInputRoot(Root) {
         inputRefs.current[lastActiveIndex].focus();
       }
     };
-    var handleOnKeyDown = function handleOnKeyDown(event, index) {
+    var handleOnKeyDown = function handleOnKeyDown(event, index, type) {
       if (disabled) {
         return;
       }
@@ -117,6 +116,11 @@ var codeInputRoot = exports.codeInputRoot = function codeInputRoot(Root) {
           (_inputRefs$current = inputRefs.current[index - 1]) === null || _inputRefs$current === void 0 || _inputRefs$current.focus();
         }
       }
+      if (type === 'circle') {
+        var _inputRefs$current$in;
+        handleAddSymbol(key, index);
+        (_inputRefs$current$in = inputRefs.current[index]) === null || _inputRefs$current$in === void 0 || _inputRefs$current$in.focus();
+      }
     };
     var codeSetter = function codeSetter(newCode) {
       setCode(newCode);
@@ -126,14 +130,17 @@ var codeInputRoot = exports.codeInputRoot = function codeInputRoot(Root) {
       }
     };
     var handleChange = function handleChange(event, index) {
-      var _inputRefs$current$in;
       if (disabled) {
         return;
       }
       var rawSymbol = event.currentTarget.value;
       var symbol = rawSymbol.charAt(rawSymbol.length - 1);
+      handleAddSymbol(symbol, index);
+    };
+    var handleAddSymbol = function handleAddSymbol(symbol, index) {
+      var _inputRefs$current$in2;
       var newCode = _toConsumableArray(code);
-      (_inputRefs$current$in = inputRefs.current[index]) === null || _inputRefs$current$in === void 0 || _inputRefs$current$in.classList.remove(_CodeInput.classes.itemError);
+      (_inputRefs$current$in2 = inputRefs.current[index]) === null || _inputRefs$current$in2 === void 0 || _inputRefs$current$in2.classList.remove(_CodeInput.classes.itemError);
       if (isError) {
         var _captionRef$current;
         (_captionRef$current = captionRef.current) === null || _captionRef$current === void 0 || _captionRef$current.classList.remove(_CodeInput.classes.captionError);
@@ -174,6 +181,7 @@ var codeInputRoot = exports.codeInputRoot = function codeInputRoot(Root) {
           index: index,
           newCode: newCode,
           inputRefs: inputRefs,
+          inputContainerRef: inputContainerRef,
           setCode: setCode,
           codeSetter: codeSetter
         });
@@ -181,6 +189,7 @@ var codeInputRoot = exports.codeInputRoot = function codeInputRoot(Root) {
     };
     var handlePaste = function handlePaste(event) {
       var _inputRefs$current$ac;
+      var newCode = _toConsumableArray(code);
       if (disabled) {
         return;
       }
@@ -190,9 +199,12 @@ var codeInputRoot = exports.codeInputRoot = function codeInputRoot(Root) {
         var _symb$match;
         return ((_symb$match = symb.match(fieldPattern)) === null || _symb$match === void 0 ? void 0 : _symb$match[0]) || '';
       }).filter(Boolean) || [] : rawData.split('')).slice(0, codeLength);
+      pastedData.forEach(function (element, index) {
+        newCode[index] = element;
+      });
       var activeIndex = Math.min(pastedData.length, codeLength - 1);
       (_inputRefs$current$ac = inputRefs.current[activeIndex]) === null || _inputRefs$current$ac === void 0 || _inputRefs$current$ac.focus();
-      codeSetter(pastedData);
+      codeSetter(newCode);
     };
     var handleFullCodeEnter = (0, _react.useCallback)(function (fullCode) {
       if (onFullCodeEnter) {
@@ -235,7 +247,7 @@ var codeInputRoot = exports.codeInputRoot = function codeInputRoot(Root) {
       disabled: disabled,
       screen: screen,
       onClick: handleClick,
-      className: (0, _classnames["default"])(className, viewClass, _defineProperty({}, _CodeInput.classes.captionAlignLeft, captionAlign === 'left'))
+      className: (0, _classnames["default"])(className, _defineProperty({}, _CodeInput.classes.captionAlignLeft, captionAlign === 'left'))
     }, rest), /*#__PURE__*/_react["default"].createElement(_CodeInput2.CodeWrapper, {
       ref: inputContainerRef
     }, _toConsumableArray(Array(parts)).map(function (_, partIndex) {
@@ -247,13 +259,21 @@ var codeInputRoot = exports.codeInputRoot = function codeInputRoot(Root) {
         var inputCorrectIndex = i + codeLength / parts * partIndex;
         return /*#__PURE__*/_react["default"].createElement(_CodeInput2.ItemWrapper, {
           key: partIndex + i + partIndex * i
-        }, /*#__PURE__*/_react["default"].createElement(_CodeInput2.ItemInput, _extends({
+        }, (!code[inputCorrectIndex] || !!code[inputCorrectIndex] && hidden) && /*#__PURE__*/_react["default"].createElement(_CodeInput2.ItemCircle, {
+          role: "tab",
+          tabIndex: originalValue.length === inputCorrectIndex ? 0 : -1,
+          onKeyDown: function onKeyDown(e) {
+            handleOnKeyDown(e, inputCorrectIndex, 'circle');
+          },
+          className: (0, _classnames["default"])([!!code[inputCorrectIndex] && hidden ? _CodeInput.classes.itemCirlceFilled : '', "".concat(_CodeInput.classes.itemCircle, "-").concat(inputCorrectIndex)])
+        }), /*#__PURE__*/_react["default"].createElement(_CodeInput2.ItemInput, _extends({
           ref: function ref(element) {
             inputRefs.current[inputCorrectIndex] = element;
           },
           className: (0, _classnames["default"])(_defineProperty({}, _CodeInput.classes.hoverEnabled, inputCorrectIndex >= originalValue.length)),
           hide: hidden,
           value: code[inputCorrectIndex] || '',
+          tabIndex: originalValue.length === inputCorrectIndex ? 0 : -1,
           autoComplete: autoComplete,
           onChange: function onChange(e) {
             handleChange(e, inputCorrectIndex);
@@ -261,13 +281,10 @@ var codeInputRoot = exports.codeInputRoot = function codeInputRoot(Root) {
           onKeyDown: function onKeyDown(e) {
             handleOnKeyDown(e, inputCorrectIndex);
           },
-          onPaste: handlePaste,
-          tabIndex: originalValue.length === inputCorrectIndex ? 0 : -1
+          onPaste: handlePaste
         }, placeholderValue && {
           placeholder: placeholderValue[inputCorrectIndex]
-        })), (!code[inputCorrectIndex] || !!code[inputCorrectIndex] && hidden) && /*#__PURE__*/_react["default"].createElement(_CodeInput2.ItemCircle, {
-          className: !!code[inputCorrectIndex] && hidden ? _CodeInput.classes.itemCirlceFilled : ''
-        }));
+        })));
       })), partIndex !== parts - 1 && (_Separator || (_Separator = /*#__PURE__*/_react["default"].createElement(_CodeInput2.Separator, null))));
     })), caption && /*#__PURE__*/_react["default"].createElement(_CodeInput2.CaptionWrapper, {
       ref: captionRef,

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

@@ -32,7 +32,7 @@ var ItemWrapper = exports.ItemWrapper = /*#__PURE__*/_styledComponents["default"
 })(["position:relative;"]);
 var ItemCircle = exports.ItemCircle = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-1lsnhbl-5"
-})(["position:absolute;top:calc(50% - calc(var(", ") / 2));left:calc(50% - calc(var(", ") / 2));width:var(", ");height:var(", ");box-sizing:border-box;border:var(", ") solid var(", ");border-radius:100%;background-color:'transparent';&.", "{background-color:var(", ");}"], _CodeInput.tokens.codeItemCircleSize, _CodeInput.tokens.codeItemCircleSize, _CodeInput.tokens.codeItemCircleSize, _CodeInput.tokens.codeItemCircleSize, _CodeInput.tokens.codeItemCircleBorderWidth, _CodeInput.tokens.codeColor, _CodeInput.classes.itemCirlceFilled, _CodeInput.tokens.codeColor);
+})(["position:absolute;top:calc(50% - calc(var(", ") / 2));left:calc(50% - calc(var(", ") / 2));width:var(", ");height:var(", ");box-sizing:border-box;border-radius:100%;background-color:'transparent';"], _CodeInput.tokens.codeItemCircleSize, _CodeInput.tokens.codeItemCircleSize, _CodeInput.tokens.codeItemCircleSize, _CodeInput.tokens.codeItemCircleSize);
 var CaptionWrapper = exports.CaptionWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-1lsnhbl-6"
 })(["text-align:", ";align-self:", ";width:", ";white-space:pre-line;"], function (_ref2) {

package/styled-components/cjs/components/CodeInput/CodeInput.tokens.js

@@ -8,7 +8,10 @@ var classes = exports.classes = {
   itemError: 'codeinput-item-error',
   itemErrorAnimation: 'codeinput-item-error-animation',
   itemErrorFade: 'codeinput-item-error-fade',
+  itemCircle: 'codeinput-item-circle',
   itemCirlceFilled: 'codeinput-item-circle-filled',
+  itemCircleError: 'codeinput-item-circle-error',
+  itemCircleErrorAnimation: 'codeinput-item-circle-error-animation',
   captionError: 'codeinput-caption-error',
   codeError: 'codeinput-code-error',
   codeErrorAnimation: 'codeinput-code-error-animation',
@@ -17,11 +20,6 @@ var classes = exports.classes = {
   hoverEnabled: 'codeinput-item-hover-enabled',
   segmented: 'codeinput-shape-segmented',
   "default": 'codeinput-shape-default',
-  largeMScreen: 'codeinput-large-m-screen',
-  largeSScreen: 'codeinput-large-s-screen',
-  mediumMScreen: 'codeinput-medium-m-screen',
-  mediumSScreen: 'codeinput-medium-s-screen',
-  smallMScreen: 'codeinput-small-m-screen',
   disabled: 'codeinput-disabled'
 };
 var privateTokens = exports.privateTokens = {
@@ -33,38 +31,25 @@ var privateTokens = exports.privateTokens = {
 var tokens = exports.tokens = {
   captionGap: '--plasma-codeinput-caption-gap',
   codeItemsGap: '--plasma-codeinput-code-item-gap',
-  smallMMinWidth: '--plasma-codeinput-smallM-min-width',
-  mediumSMinWidth: '--plasma-codeinput-mediumS-min-width',
-  mediumMMinWidth: '--plasma-codeinput-mediumM-min-width',
-  largeSMinWidth: '--plasma-codeinput-largeS-min-width',
-  largeMMinWidth: '--plasma-codeinput-largeM-min-width',
   separatorWidth: '--plasma-codeinput-separator-width',
-  largeMCodeItemWidth: '--plasma-codeinput-item-large-m-width',
-  largeMCodeItemHeight: '--plasma-codeinput-item-large-m-height',
-  largeSCodeItemWidth: '--plasma-codeinput-item-large-s-width',
-  largeSCodeItemHeight: '--plasma-codeinput-item-large-s-height',
-  mediumMCodeItemWidth: '--plasma-codeinput-item-medium-m-width',
-  mediumMCodeItemHeight: '--plasma-codeinput-item-medium-m-height',
-  mediumSCodeItemWidth: '--plasma-codeinput-item-medium-s-width',
-  mediumSCodeItemHeight: '--plasma-codeinput-item-medium-s-height',
-  smallMCodeItemWidth: '--plasma-codeinput-item-small-m-width',
-  smallMCodeItemHeight: '--plasma-codeinput-item-small-m-height',
+  largeCodeItemWidth: '--plasma-codeinput-item-large-width',
+  largeCodeItemHeight: '--plasma-codeinput-item-large-height',
+  mediumCodeItemWidth: '--plasma-codeinput-item-medium-width',
+  mediumCodeItemHeight: '--plasma-codeinput-item-medium-height',
+  smallCodeItemWidth: '--plasma-codeinput-item-small-width',
+  smallCodeItemHeight: '--plasma-codeinput-item-small-height',
   codeItemCircleSize: '--plasma-codeinput-item-circle-size',
   codeItemCircleBorderWidth: '--plasma-codeinput-item-circle-border-width',
   fontStyle: '--plasma-codeinput-font-style',
   fontFamily: '--plasma-codeinput-font-family',
   fontWeight: '--plasma-codeinput-font-weight',
   letterSpacing: '--plasma-codeinput-letter-spacing',
-  largeMFontSize: '--plasma-codeinput-large-m-font-size',
-  largeMLineHeight: '--plasma-codeinput-large-m-line-height',
-  largeSFontSize: '--plasma-codeinput-large-s-font-size',
-  largeSLineHeight: '--plasma-codeinput-large-s-line-height',
-  mediumMFontSize: '--plasma-codeinput-medium-m-font-size',
-  mediumMLineHeight: '--plasma-codeinput-medium-m-line-height',
-  mediumSFontSize: '--plasma-codeinput-medium-s-font-size',
-  mediumSLineHeight: '--plasma-codeinput-medium-s-line-height',
-  smallMFontSize: '--plasma-codeinput-small-m-font-size',
-  smallMLineHeight: '--plasma-codeinput-small-m-line-height',
+  largeFontSize: '--plasma-codeinput-large-font-size',
+  largeLineHeight: '--plasma-codeinput-large-line-height',
+  mediumFontSize: '--plasma-codeinput-medium-font-size',
+  mediumLineHeight: '--plasma-codeinput-medium-line-height',
+  smallFontSize: '--plasma-codeinput-small-font-size',
+  smallLineHeight: '--plasma-codeinput-small-line-height',
   captionFontFamily: '--plasma-codeinput-caption-font-family',
   captionFontSize: '--plasma-codeinput-caption-font-style',
   captionFontStyle: '--plasma-codeinput-caption-font-size',

package/styled-components/cjs/components/CodeInput/index.js

@@ -27,12 +27,5 @@ Object.defineProperty(exports, "codeInputTokens", {
     return _CodeInput2.tokens;
   }
 });
-Object.defineProperty(exports, "getCodeInputView", {
-  enumerable: true,
-  get: function get() {
-    return _utils.getCodeInputView;
-  }
-});
 var _CodeInput = /*#__PURE__*/require("./CodeInput");
-var _CodeInput2 = /*#__PURE__*/require("./CodeInput.tokens");
-var _utils = /*#__PURE__*/require("./utils");
+var _CodeInput2 = /*#__PURE__*/require("./CodeInput.tokens");

package/styled-components/cjs/components/CodeInput/utils/constants.js

@@ -7,6 +7,6 @@ exports.ONLY_DIGITS_PATTERN = exports.ONLY_DIGITS_AND_CHARS_PATTERN = exports.ON
 var ONLY_DIGITS_PATTERN = exports.ONLY_DIGITS_PATTERN = '^\\d+$';
 var ONLY_CHARS_PATTERN = exports.ONLY_CHARS_PATTERN = '^[a-zA-Z]+$';
 var ONLY_DIGITS_AND_CHARS_PATTERN = exports.ONLY_DIGITS_AND_CHARS_PATTERN = '^[a-zA-Z0-9]+$';
-var FORBIDDEN_KEYS = exports.FORBIDDEN_KEYS = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Delete'];
+var FORBIDDEN_KEYS = exports.FORBIDDEN_KEYS = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Delete', 'Tab'];
 var BACKSPACE_KEY = exports.BACKSPACE_KEY = 'Backspace';
 var ANIMATION_TIMEOUT = exports.ANIMATION_TIMEOUT = 300;

package/styled-components/cjs/components/CodeInput/utils/handleItemError.js

@@ -13,21 +13,28 @@ function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Sym
 function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 var handleItemError = exports.handleItemError = function handleItemError(_ref) {
-  var _inputRefs$current$in, _inputRefs$current$in4;
+  var _inputContainerRef$cu, _inputRefs$current$in, _inputRefs$current$in4;
   var currentSymbol = _ref.currentSymbol,
     itemErrorBehavior = _ref.itemErrorBehavior,
     index = _ref.index,
     newCode = _ref.newCode,
     inputRefs = _ref.inputRefs,
+    inputContainerRef = _ref.inputContainerRef,
     setCode = _ref.setCode,
     codeSetter = _ref.codeSetter;
   if (!inputRefs.current[index] || currentSymbol === ' ') {
     return;
   }
+  var circleElement = (_inputContainerRef$cu = inputContainerRef.current) === null || _inputContainerRef$cu === void 0 ? void 0 : _inputContainerRef$cu.querySelector(".".concat(_CodeInput.classes.itemCircle, "-").concat(index));
   switch (itemErrorBehavior) {
     case 'keep':
       setCode(newCode);
       (_inputRefs$current$in = inputRefs.current[index]) === null || _inputRefs$current$in === void 0 || _inputRefs$current$in.classList.add(_CodeInput.classes.itemError, _CodeInput.classes.itemErrorAnimation);
+      if (circleElement) {
+        setTimeout(function () {
+          circleElement.classList.add(_CodeInput.classes.itemCircleError, _CodeInput.classes.itemCircleErrorAnimation);
+        }, 0);
+      }
       setTimeout(function () {
         var _inputRefs$current$in2;
         (_inputRefs$current$in2 = inputRefs.current[index]) === null || _inputRefs$current$in2 === void 0 || _inputRefs$current$in2.classList.remove(_CodeInput.classes.itemErrorAnimation);
@@ -45,12 +52,22 @@ var handleItemError = exports.handleItemError = function handleItemError(_ref) {
     default:
       setCode(newCode);
       (_inputRefs$current$in4 = inputRefs.current[index]) === null || _inputRefs$current$in4 === void 0 || _inputRefs$current$in4.classList.add(_CodeInput.classes.itemError, _CodeInput.classes.itemErrorFade, _CodeInput.classes.itemErrorAnimation);
+      if (circleElement) {
+        setTimeout(function () {
+          circleElement.classList.add(_CodeInput.classes.itemCircleError, _CodeInput.classes.itemCircleErrorAnimation);
+        }, 0);
+      }
       setTimeout(function () {
         var _inputRefs$current$in5;
         var updatedCode = _toConsumableArray(newCode);
         updatedCode[index] = '';
         codeSetter(updatedCode);
         (_inputRefs$current$in5 = inputRefs.current[index]) === null || _inputRefs$current$in5 === void 0 || _inputRefs$current$in5.classList.remove(_CodeInput.classes.itemError, _CodeInput.classes.itemErrorFade, _CodeInput.classes.itemErrorAnimation);
+        if (circleElement) {
+          setTimeout(function () {
+            circleElement.classList.remove(_CodeInput.classes.itemCircleError, _CodeInput.classes.itemCircleErrorAnimation);
+          }, 0);
+        }
       }, _constants.ANIMATION_TIMEOUT);
   }
 };

package/styled-components/cjs/components/CodeInput/utils/index.js

@@ -3,35 +3,28 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {
-  getFieldPattern: true,
-  getPlaceholderValue: true,
-  getCodeValue: true,
-  handleItemError: true,
-  handleCodeError: true
-};
 Object.defineProperty(exports, "getCodeValue", {
   enumerable: true,
   get: function get() {
-    return _initialValuesHelper.getCodeValue;
+    return _utils.getCodeValue;
   }
 });
 Object.defineProperty(exports, "getFieldPattern", {
   enumerable: true,
   get: function get() {
-    return _initialValuesHelper.getFieldPattern;
+    return _utils.getFieldPattern;
   }
 });
 Object.defineProperty(exports, "getPlaceholderValue", {
   enumerable: true,
   get: function get() {
-    return _initialValuesHelper.getPlaceholderValue;
+    return _utils.getPlaceholderValue;
   }
 });
 Object.defineProperty(exports, "handleCodeError", {
   enumerable: true,
   get: function get() {
-    return _handleCodeError.handleCodeError;
+    return _utils.handleCodeError;
   }
 });
 Object.defineProperty(exports, "handleItemError", {
@@ -40,18 +33,5 @@ Object.defineProperty(exports, "handleItemError", {
     return _handleItemError.handleItemError;
   }
 });
-var _initialValuesHelper = /*#__PURE__*/require("./initialValuesHelper");
-var _handleItemError = /*#__PURE__*/require("./handleItemError");
-var _handleCodeError = /*#__PURE__*/require("./handleCodeError");
-var _generateMediaQuery = /*#__PURE__*/require("./generateMediaQuery");
-Object.keys(_generateMediaQuery).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _generateMediaQuery[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _generateMediaQuery[key];
-    }
-  });
-});
+var _utils = /*#__PURE__*/require("../../CodeField/utils");
+var _handleItemError = /*#__PURE__*/require("./handleItemError");

package/styled-components/cjs/components/CodeInput/variations/_size/base.js

@@ -7,4 +7,19 @@ exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _CodeInput = /*#__PURE__*/require("../../CodeInput.styles");
 var _CodeInput2 = /*#__PURE__*/require("../../CodeInput.tokens");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["gap:var(", ");", ",", "{gap:var(", ");}", "{font-size:var(", ");font-family:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");width:var(", ");height:var(", ");}", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}"], _CodeInput2.tokens.captionGap, _CodeInput.CodeWrapper, _CodeInput.CodeGroup, _CodeInput2.tokens.codeItemsGap, _CodeInput.ItemInput, _CodeInput2.privateTokens.fontSize, _CodeInput2.tokens.fontFamily, _CodeInput2.tokens.fontStyle, _CodeInput2.tokens.fontWeight, _CodeInput2.tokens.letterSpacing, _CodeInput2.privateTokens.lineHeight, _CodeInput2.privateTokens.itemWidth, _CodeInput2.privateTokens.itemHeight, _CodeInput.CaptionWrapper, _CodeInput2.tokens.captionFontFamily, _CodeInput2.tokens.captionFontSize, _CodeInput2.tokens.captionFontStyle, _CodeInput2.tokens.captionFontWeight, _CodeInput2.tokens.captionLetterSpacing, _CodeInput2.tokens.captionLineHeight);
+var _constants = /*#__PURE__*/require("../../../../utils/constants");
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var getIconMediaQueries = function getIconMediaQueries() {
+  return Object.entries(_constants.screenGroupBreakpoints).map(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      name = _ref2[0],
+      minWidth = _ref2[1];
+    return "\n                @media (min-width: ".concat(minWidth, ") {\n                    ").concat(_CodeInput2.privateTokens.fontSize, ": var(").concat(_CodeInput2.tokens["".concat(name, "FontSize")], ");\n                    ").concat(_CodeInput2.privateTokens.lineHeight, ": var(").concat(_CodeInput2.tokens["".concat(name, "CodeItemHeight")], ");\n                    ").concat(_CodeInput2.privateTokens.itemWidth, ": var(").concat(_CodeInput2.tokens["".concat(name, "CodeItemWidth")], ");\n                    ").concat(_CodeInput2.privateTokens.itemHeight, ": var(").concat(_CodeInput2.tokens["".concat(name, "LineHeight")], ");\n                }\n            ");
+  }).join('\n');
+};
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["", " gap:var(", ");", ",", "{gap:var(", ");}", "{font-size:var(", ");font-family:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");width:var(", ");height:var(", ");}", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}"], /*#__PURE__*/getIconMediaQueries(), _CodeInput2.tokens.captionGap, _CodeInput.CodeWrapper, _CodeInput.CodeGroup, _CodeInput2.tokens.codeItemsGap, _CodeInput.ItemInput, _CodeInput2.privateTokens.fontSize, _CodeInput2.tokens.fontFamily, _CodeInput2.tokens.fontStyle, _CodeInput2.tokens.fontWeight, _CodeInput2.tokens.letterSpacing, _CodeInput2.privateTokens.lineHeight, _CodeInput2.privateTokens.itemWidth, _CodeInput2.privateTokens.itemHeight, _CodeInput.CaptionWrapper, _CodeInput2.tokens.captionFontFamily, _CodeInput2.tokens.captionFontSize, _CodeInput2.tokens.captionFontStyle, _CodeInput2.tokens.captionFontWeight, _CodeInput2.tokens.captionLetterSpacing, _CodeInput2.tokens.captionLineHeight);

package/styled-components/cjs/components/CodeInput/variations/_view/base.js

@@ -7,4 +7,10 @@ exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _CodeInput = /*#__PURE__*/require("../../CodeInput.styles");
 var _CodeInput2 = /*#__PURE__*/require("../../CodeInput.tokens");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["", "{color:var(", ");&.", "{color:var(", ");}}", "{color:var(", ");background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}&:hover{.", "{background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}}&:focus-within{", ":focus-within{background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}}&& .", "{animation:shakingError 0.3s forwards;}&& .", "{", "{color:var(", ");background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}", "{border:var(", ") solid var(", ");&.", "{background-color:var(", ");}}&:focus-within{", "{background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}}&.", "{", "{animation:fadeError 0.3s forwards;}}}&& .", "{animation:shakingError 0.3s forwards;}&& .", ",&& .", ":focus-within{color:var(", ");background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");&.", "{animation:shakingError 0.3s forwards fadeError 0.3s forwards;}}@keyframes shakingError{14%{transform:translateX(-0.125rem);}28%{transform:translateX(0.125rem);}42%{transform:translateX(-0.125rem);}57%{transform:translateX(0.125rem);}71%{transform:translateX(-0.125rem);}85%{transform:translateX(0.125rem);}100%{transform:translateX(-0.125rem);}}@keyframes fadeError{50%{color:var(", ");}100%{color:transparent;}}"], _CodeInput.CaptionWrapper, _CodeInput2.tokens.captionColor, _CodeInput2.classes.captionError, _CodeInput2.tokens.captionColorError, _CodeInput.ItemInput, _CodeInput2.tokens.codeColor, _CodeInput2.tokens.backgroundColor, _CodeInput2.tokens.borderWidth, _CodeInput2.tokens.borderColor, _CodeInput2.classes.hoverEnabled, _CodeInput2.tokens.backgroundColorHover, _CodeInput2.tokens.borderWidth, _CodeInput2.tokens.borderColorHover, _CodeInput.ItemInput, _CodeInput2.tokens.backgroundColorFocus, _CodeInput2.tokens.borderWidth, _CodeInput2.tokens.borderColorFocus, _CodeInput2.classes.codeErrorAnimation, _CodeInput2.classes.codeError, _CodeInput.ItemInput, _CodeInput2.tokens.codeColorError, _CodeInput2.tokens.backgroundErrorColor, _CodeInput2.tokens.borderWidth, _CodeInput2.tokens.borderErrorColor, _CodeInput.ItemCircle, _CodeInput2.tokens.codeItemCircleBorderWidth, _CodeInput2.tokens.codeColorError, _CodeInput2.classes.itemCirlceFilled, _CodeInput2.tokens.codeColorError, _CodeInput.ItemInput, _CodeInput2.tokens.backgroundErrorColor, _CodeInput2.tokens.borderWidth, _CodeInput2.tokens.borderErrorColor, _CodeInput2.classes.codeErrorFade, _CodeInput.ItemInput, _CodeInput2.classes.itemErrorAnimation, _CodeInput2.classes.itemError, _CodeInput2.classes.itemError, _CodeInput2.tokens.codeColorError, _CodeInput2.tokens.backgroundErrorColor, _CodeInput2.tokens.borderWidth, _CodeInput2.tokens.borderErrorColor, _CodeInput2.classes.codeErrorFade, _CodeInput2.tokens.codeColorError);
+var _mixins = /*#__PURE__*/require("../../../../mixins");
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["", "{color:var(", ");&.", "{color:var(", ");}}", "{color:var(", ");background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}", "{border:var(", ") solid var(", ");background-color:'transparent';&.", "{background-color:var(", ");}&.", "{animation:shakingError 0.3s forwards;}&.", "{background-color:var(", ");border:var(", ") solid var(", ");}&:focus-visible{outline:none;}&[data-focus-visible-added]{", " border:none;position:absolute;}}&:hover{.", "{background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}}&:focus-within{", ":focus-within{box-shadow:inset 0 0 0 var(", ") var(", ");}}&& .", "{animation:shakingError 0.3s forwards;}&& .", "{", "{color:var(", ");background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}", "{border:var(", ") solid var(", ");&.", "{background-color:var(", ");}}&:focus-within{", "{background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}}&.", "{", "{animation:fadeError 0.3s forwards;}}}&& .", "{animation:shakingError 0.3s forwards;}&& .", ",&& .", ":focus-within{color:var(", ");background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");&.", "{animation:shakingError 0.3s forwards fadeError 0.3s forwards;}}@keyframes shakingError{14%{transform:translateX(-0.125rem);}28%{transform:translateX(0.125rem);}42%{transform:translateX(-0.125rem);}57%{transform:translateX(0.125rem);}71%{transform:translateX(-0.125rem);}85%{transform:translateX(0.125rem);}100%{transform:translateX(-0.125rem);}}@keyframes fadeError{50%{color:var(", ");}100%{color:transparent;}}"], _CodeInput.CaptionWrapper, _CodeInput2.tokens.captionColor, _CodeInput2.classes.captionError, _CodeInput2.tokens.captionColorError, _CodeInput.ItemInput, _CodeInput2.tokens.codeColor, _CodeInput2.tokens.backgroundColor, _CodeInput2.tokens.borderWidth, _CodeInput2.tokens.borderColor, _CodeInput.ItemCircle, _CodeInput2.tokens.codeItemCircleBorderWidth, _CodeInput2.tokens.codeColor, _CodeInput2.classes.itemCirlceFilled, _CodeInput2.tokens.codeColor, _CodeInput2.classes.itemCircleErrorAnimation, _CodeInput2.classes.itemCircleError, _CodeInput2.tokens.codeColorError, _CodeInput2.tokens.codeItemCircleBorderWidth, _CodeInput2.tokens.codeColorError, /*#__PURE__*/(0, _mixins.addFocus)({
+  outlineOffset: '-0.125rem',
+  outlineSize: '0.125rem',
+  outlineRadius: '1rem',
+  outlineColor: /*#__PURE__*/"var(".concat(_CodeInput2.tokens.borderColorFocus, ")")
+}), _CodeInput2.classes.hoverEnabled, _CodeInput2.tokens.backgroundColorHover, _CodeInput2.tokens.borderWidth, _CodeInput2.tokens.borderColorHover, _CodeInput.ItemInput, _CodeInput2.tokens.borderWidth, _CodeInput2.tokens.borderColorFocus, _CodeInput2.classes.codeErrorAnimation, _CodeInput2.classes.codeError, _CodeInput.ItemInput, _CodeInput2.tokens.codeColorError, _CodeInput2.tokens.backgroundErrorColor, _CodeInput2.tokens.borderWidth, _CodeInput2.tokens.borderErrorColor, _CodeInput.ItemCircle, _CodeInput2.tokens.codeItemCircleBorderWidth, _CodeInput2.tokens.codeColorError, _CodeInput2.classes.itemCirlceFilled, _CodeInput2.tokens.codeColorError, _CodeInput.ItemInput, _CodeInput2.tokens.backgroundErrorColor, _CodeInput2.tokens.borderWidth, _CodeInput2.tokens.borderErrorColor, _CodeInput2.classes.codeErrorFade, _CodeInput.ItemInput, _CodeInput2.classes.itemErrorAnimation, _CodeInput2.classes.itemError, _CodeInput2.classes.itemError, _CodeInput2.tokens.codeColorError, _CodeInput2.tokens.backgroundErrorColor, _CodeInput2.tokens.borderWidth, _CodeInput2.tokens.borderErrorColor, _CodeInput2.classes.codeErrorFade, _CodeInput2.tokens.codeColorError);

package/styled-components/cjs/components/Combobox/Combobox.template-doc.mdx

@@ -436,6 +436,64 @@ type Items = Array<{
         }
         ```
     </TabItem>
+    <TabItem value="selectAll" label="Выбрать всё">
+        Работа с кнопкой "Выбрать всё" осуществляется через свойство `selectAllOptions` только в режиме `multiple`:
+        ```tsx
+        type SelectAllProps = {
+            checked?: boolean;
+            indeterminate?: boolean;
+            label?: string;
+            onClick?: () => void;
+            sticky?: boolean;
+        };
+        ```
+        Вся логика выбора элементов и взаимодействия с компонентом лежит на стороне пользователя.
+
+        ```tsx live
+        import React, { useState } from 'react';
+        import { Select } from '@salutejs/{{ package }}';
+
+        export function App() {
+            const [checked, setChecked] = useState(false);
+
+            const items = [
+                {
+                    value: 'north_america',
+                    label: 'Северная Америка',
+                },
+                {
+                    value: 'south_america',
+                    label: 'Южная Америка',
+                    items: [
+                        {
+                            value: 'brazil',
+                            label: 'Бразилия',
+                        },
+                        {
+                            value: 'argentina',
+                            label: 'Аргентина',
+                        },
+                    ],
+                },
+            ];
+
+            return (
+                <div style={{ display: "flex", gap: "30px", height: "300px" }}>
+                    <Combobox
+                        label="Label"
+                        placeholder="Placeholder"
+                        items={items}
+                        multiple
+                        selectAllOptions={{
+                            checked,
+                            onClick: () => setChecked(prev => !prev)
+                        }}
+                    />
+                </div>
+            );
+        }
+        ```
+    </TabItem>
 </Tabs>
 
 ## Использование с React Hook Form и нативной формой

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

@@ -528,7 +528,8 @@ var comboboxRoot = exports.comboboxRoot = function comboboxRoot(Root) {
           _onEnterDisabled: true // Пропс для отключения обработчика Enter внутри Textfield
         }));
       },
-      zIndex: zIndex
+      zIndex: zIndex,
+      isInner: false
     }, /*#__PURE__*/_react["default"].createElement(Root, {
       size: size,
       view: view,
@@ -536,12 +537,13 @@ var comboboxRoot = exports.comboboxRoot = function comboboxRoot(Root) {
       disabled: disabled,
       readOnly: readOnly,
       name: name
+    }, /*#__PURE__*/_react["default"].createElement(_Combobox2.ListWrapper, {
+      listWidth: listWidth
     }, /*#__PURE__*/_react["default"].createElement(_Combobox2.Ul, {
       role: "tree",
       id: "".concat(treeId, "_tree_level_1"),
       "aria-multiselectable": Boolean(multiple),
       listMaxHeight: listMaxHeight || listHeight,
-      listWidth: listWidth,
       ref: targetRef,
       virtual: virtual,
       listOverflow: listOverflow,
@@ -550,7 +552,13 @@ var comboboxRoot = exports.comboboxRoot = function comboboxRoot(Root) {
       className: _Combobox.classes.emptyStateWrapper,
       size: size,
       description: emptyStateDescription || 'Ничего не найдено'
-    }) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, virtual ? /*#__PURE__*/_react["default"].createElement(_ui.VirtualList, {
+    }) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, props.multiple && props.selectAllOptions &&
+    /*#__PURE__*/
+    // TODO: #2004
+    _react["default"].createElement(_ui.SelectAll, {
+      selectAllOptions: props.selectAllOptions,
+      variant: variant
+    }), virtual ? /*#__PURE__*/_react["default"].createElement(_ui.VirtualList, {
       items: filteredItems,
       listMaxHeight: listMaxHeight || listHeight,
       onScroll: onScroll
@@ -564,7 +572,7 @@ var comboboxRoot = exports.comboboxRoot = function comboboxRoot(Root) {
         index: index,
         listWidth: listWidth
       });
-    })), afterList))))));
+    })), afterList)))))));
   });
 };
 var comboboxConfig = exports.comboboxConfig = {

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

@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sizeMap = exports.base = exports.Ul = exports.StyledLeftHelper = exports.StyledEmptyState = exports.StyledArrow = exports.IconArrowWrapper = void 0;
+exports.sizeMap = exports.base = exports.Ul = exports.StyledLeftHelper = exports.StyledEmptyState = exports.StyledArrow = exports.ListWrapper = exports.IconArrowWrapper = void 0;
 var _styledComponents = /*#__PURE__*/_interopRequireWildcard(/*#__PURE__*/require("styled-components"));
 var _EmptyState = /*#__PURE__*/require("../../EmptyState");
 var _Icon = /*#__PURE__*/require("../../_Icon");
@@ -14,12 +14,15 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_EmptyState.emptyStateConfig);
 var EmptyState = /*#__PURE__*/(0, _engines.component)(mergedConfig);
-var Ul = exports.Ul = /*#__PURE__*/_styledComponents["default"].ul.withConfig({
+var ListWrapper = exports.ListWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-2kddkg-0"
-})(["background:var(", ");box-shadow:", ";border-radius:var(", ");width:", ";max-height:", ";overflow-y:", ";border:var(", ") solid var(", ");margin:", ";padding:var(", ") 0;.", "{box-shadow:none;}"], _Combobox.constants.background, _Combobox.constants.boxShadow, _Combobox.tokens.borderRadius, function (_ref) {
+})(["width:", ";padding:calc(var(", ") + var(", ",0rem));border-radius:var(", ");box-sizing:border-box;background:var(", ");box-shadow:", ",inset 0 0 0 var(", ",0rem) var(", ",transparent);"], function (_ref) {
   var listWidth = _ref.listWidth;
   return listWidth || '100%';
-}, function (_ref2) {
+}, _Combobox.tokens.padding, _Combobox.tokens.dropdownBorderWidth, _Combobox.tokens.borderRadius, _Combobox.constants.background, _Combobox.constants.boxShadow, _Combobox.tokens.dropdownBorderWidth, _Combobox.tokens.dropdownBorderColor);
+var Ul = exports.Ul = /*#__PURE__*/_styledComponents["default"].ul.withConfig({
+  componentId: "plasma-new-hope__sc-2kddkg-1"
+})(["max-height:", ";overflow-y:", ";border-radius:calc(var(", ") - 0.125rem - var(", ",0rem));margin:0;padding:0;.", "{box-shadow:none;}"], function (_ref2) {
   var virtual = _ref2.virtual,
     listMaxHeight = _ref2.listMaxHeight;
   return virtual ? 'auto' : listMaxHeight || 'auto';
@@ -27,17 +30,14 @@ var Ul = exports.Ul = /*#__PURE__*/_styledComponents["default"].ul.withConfig({
   var virtual = _ref3.virtual,
     listOverflow = _ref3.listOverflow;
   return virtual ? 'visible' : listOverflow || 'visible';
-}, _Combobox.tokens.dropdownBorderWidth, _Combobox.tokens.dropdownBorderColor, function (_ref4) {
-  var isInnerUl = _ref4.isInnerUl;
-  return isInnerUl ? "calc(var(".concat(_Combobox.tokens.padding, ") * -1) 0 0 0") : "var(".concat(_Combobox.tokens.margin, ") 0 0 0");
-}, _Combobox.tokens.padding, _Combobox.classes.emptyStateWrapper);
+}, _Combobox.tokens.borderRadius, _Combobox.tokens.dropdownBorderWidth, _Combobox.classes.emptyStateWrapper);
 var IconArrowWrapper = exports.IconArrowWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  componentId: "plasma-new-hope__sc-2kddkg-1"
-})(["line-height:0;color:var(", ");cursor:", ";.", "{transform:rotate(-180deg);}&:hover,&:active{color:", ";}"], _Combobox.tokens.disclosureIconColor, function (_ref5) {
-  var disabled = _ref5.disabled;
+  componentId: "plasma-new-hope__sc-2kddkg-2"
+})(["line-height:0;color:var(", ");cursor:", ";.", "{transform:rotate(-180deg);}&:hover,&:active{color:", ";}"], _Combobox.tokens.disclosureIconColor, function (_ref4) {
+  var disabled = _ref4.disabled;
   return disabled ? 'inherit' : 'pointer';
-}, _Combobox.classes.arrowInverse, function (_ref6) {
-  var disabled = _ref6.disabled;
+}, _Combobox.classes.arrowInverse, function (_ref5) {
+  var disabled = _ref5.disabled;
   return disabled ? "var(".concat(_Combobox.tokens.disclosureIconColor, ")") : "var(".concat(_Combobox.tokens.disclosureIconColorHover, ")");
 });
 
@@ -47,20 +47,20 @@ var sizeMap = exports.sizeMap = {
   s: '1.5rem'
 };
 var StyledArrow = exports.StyledArrow = /*#__PURE__*/(0, _styledComponents["default"])(_Icon.IconDisclosureDownCentered).withConfig({
-  componentId: "plasma-new-hope__sc-2kddkg-2"
-})(["width:", ";height:", ";"], function (_ref7) {
+  componentId: "plasma-new-hope__sc-2kddkg-3"
+})(["width:", ";height:", ";"], function (_ref6) {
+  var _ref6$size = _ref6.size,
+    size = _ref6$size === void 0 ? 'xs' : _ref6$size;
+  return "var(".concat(_Combobox.tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
+}, function (_ref7) {
   var _ref7$size = _ref7.size,
     size = _ref7$size === void 0 ? 'xs' : _ref7$size;
   return "var(".concat(_Combobox.tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
-}, function (_ref8) {
-  var _ref8$size = _ref8.size,
-    size = _ref8$size === void 0 ? 'xs' : _ref8$size;
-  return "var(".concat(_Combobox.tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
 });
 var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([""]);
 var StyledEmptyState = exports.StyledEmptyState = /*#__PURE__*/(0, _styledComponents["default"])(EmptyState).withConfig({
-  componentId: "plasma-new-hope__sc-2kddkg-3"
+  componentId: "plasma-new-hope__sc-2kddkg-4"
 })(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], _EmptyState.emptyStateTokens.borderRadius, _Combobox.tokens.textFieldBorderRadius, _EmptyState.emptyStateTokens.padding, _Combobox.tokens.emptyStatePadding, _EmptyState.emptyStateTokens.fontFamily, _Combobox.tokens.textFieldFontFamily, _EmptyState.emptyStateTokens.fontSize, _Combobox.tokens.textFieldFontSize, _EmptyState.emptyStateTokens.fontStyle, _Combobox.tokens.textFieldFontStyle, _EmptyState.emptyStateTokens.fontWeight, _Combobox.tokens.textFieldFontWeight, _EmptyState.emptyStateTokens.fontLetterSpacing, _Combobox.tokens.textFieldLetterSpacing, _EmptyState.emptyStateTokens.fontLineHeight, _Combobox.tokens.textFieldLineHeight);
 var StyledLeftHelper = exports.StyledLeftHelper = /*#__PURE__*/_styledComponents["default"].span.withConfig({
-  componentId: "plasma-new-hope__sc-2kddkg-4"
+  componentId: "plasma-new-hope__sc-2kddkg-5"
 })(["margin:0;padding:0;"]);

package/styled-components/cjs/components/Combobox/ComboboxNew/Combobox.tokens.js

@@ -223,14 +223,21 @@ var tokens = exports.tokens = {
   disclosureIconColor: '--plasma-combobox-disclosure-icon-color',
   disclosureIconColorHover: '--plasma-combobox-disclosure-icon-color-hover',
   disclosureIconSize: '--plasma-select-disclosure-icon-size',
-  disclosureIconMargin: '--plasma-select-disclosure-icon-margin'
+  disclosureIconMargin: '--plasma-select-disclosure-icon-margin',
+  dividerMarginTop: '--plasma-combobox-divider-margin-top',
+  dividerMarginTopTight: '--plasma-combobox-divider-margin-top-tight',
+  dividerMarginRight: '--plasma-combobox-divider-margin-right',
+  dividerMarginBottom: '--plasma-combobox-divider-margin-bottom',
+  dividerMarginBottomTight: '--plasma-combobox-divider-margin-bottom-tight',
+  dividerMarginLeft: '--plasma-combobox-divider-margin-left',
+  dividerColor: '--plasma-combobox-divider-color'
 };
 var constants = exports.constants = {
   focusColor: '--surface-accent',
   focusSize: '0.0625rem',
   background: '--surface-solid-card',
   boxShadow: '0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04)',
-  itemBackground: '--plasma-colors-transparent',
+  itemBackground: '--surface-clear',
   textfieldTargetColor: '--text-primary',
   textfieldOuterLabelColor: '--text-primary',
   textfieldInnerLabelColor: '--text-secondary',
@@ -244,5 +251,5 @@ var constants = exports.constants = {
   fontLetterSpacing: '--plasma-typo-body-xs-letter-spacing',
   fontLineHeight: '--plasma-typo-body-xs-line-height',
   cellTitleColor: '--text-primary',
-  cellBackgroundColor: '--plasma-colors-transparent'
+  cellBackgroundColor: '--surface-clear'
 };