@salutejs/plasma-new-hope 0.326.0-canary.1973.15492799823.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);
@@ -133,25 +137,6 @@ var codeInputRoot = exports.codeInputRoot = function codeInputRoot(Root) {
       var symbol = rawSymbol.charAt(rawSymbol.length - 1);
       handleAddSymbol(symbol, index);
     };
-    var handleOnKeyDownCircle = function handleOnKeyDownCircle(event, index) {
-      var _inputRefs$current$in;
-      if (disabled) {
-        return;
-      }
-      var key = event.key;
-      if (_constants.FORBIDDEN_KEYS.includes(key)) {
-        event.preventDefault();
-        return;
-      }
-      if (key === _constants.BACKSPACE_KEY) {
-        if (index > 0 && code[index] === '') {
-          var _inputRefs$current2;
-          (_inputRefs$current2 = inputRefs.current[index - 1]) === null || _inputRefs$current2 === void 0 || _inputRefs$current2.focus();
-        }
-      }
-      handleAddSymbol(key, index);
-      (_inputRefs$current$in = inputRefs.current[index]) === null || _inputRefs$current$in === void 0 || _inputRefs$current$in.focus();
-    };
     var handleAddSymbol = function handleAddSymbol(symbol, index) {
       var _inputRefs$current$in2;
       var newCode = _toConsumableArray(code);
@@ -171,8 +156,8 @@ var codeInputRoot = exports.codeInputRoot = function codeInputRoot(Root) {
         newCode[index] = symbol;
         codeSetter(newCode);
         if (symbol && index < codeLength - 1) {
-          var _inputRefs$current3;
-          (_inputRefs$current3 = inputRefs.current[index + 1]) === null || _inputRefs$current3 === void 0 || _inputRefs$current3.focus();
+          var _inputRefs$current2;
+          (_inputRefs$current2 = inputRefs.current[index + 1]) === null || _inputRefs$current2 === void 0 || _inputRefs$current2.focus();
         }
         return;
       }
@@ -185,8 +170,8 @@ var codeInputRoot = exports.codeInputRoot = function codeInputRoot(Root) {
         newCode[index] = symbol.charAt(symbol.length - 1);
         codeSetter(newCode);
         if (index < codeLength - 1) {
-          var _inputRefs$current4;
-          (_inputRefs$current4 = inputRefs.current[index + 1]) === null || _inputRefs$current4 === void 0 || _inputRefs$current4.focus();
+          var _inputRefs$current3;
+          (_inputRefs$current3 = inputRefs.current[index + 1]) === null || _inputRefs$current3 === void 0 || _inputRefs$current3.focus();
         }
       } else {
         newCode[index] = symbol.charAt(symbol.length - 1);
@@ -262,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) {
@@ -278,7 +263,7 @@ var codeInputRoot = exports.codeInputRoot = function codeInputRoot(Root) {
           role: "tab",
           tabIndex: originalValue.length === inputCorrectIndex ? 0 : -1,
           onKeyDown: function onKeyDown(e) {
-            handleOnKeyDownCircle(e, inputCorrectIndex);
+            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({

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

@@ -20,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 = {
@@ -36,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/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/examples/plasma_b2c/components/CodeInput/CodeInput.config.js

@@ -6,10 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.config = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _CodeInput = /*#__PURE__*/require("../../../../components/CodeInput");
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 var config = exports.config = {
   defaults: {
     view: 'default',
@@ -17,12 +13,12 @@ var config = exports.config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--text-negative);", ":var(--text-primary);", ":var(--text-negative);", ":var(--outline-accent);", ";"], _CodeInput.codeInputTokens.captionColor, _CodeInput.codeInputTokens.captionColorError, _CodeInput.codeInputTokens.codeColor, _CodeInput.codeInputTokens.codeColorError, _CodeInput.codeInputTokens.borderColorFocus, /*#__PURE__*/(0, _CodeInput.getCodeInputView)(/*#__PURE__*/_defineProperty(/*#__PURE__*/_defineProperty(/*#__PURE__*/_defineProperty(/*#__PURE__*/_defineProperty(/*#__PURE__*/_defineProperty({}, _CodeInput.codeInputTokens.smallMMinWidth, 0), _CodeInput.codeInputTokens.mediumSMinWidth, '35rem'), _CodeInput.codeInputTokens.mediumMMinWidth, '49.125rem'), _CodeInput.codeInputTokens.largeSMinWidth, '60rem'), _CodeInput.codeInputTokens.largeMMinWidth, '75rem'), 'default'))
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--text-negative);", ":var(--text-primary);", ":var(--text-negative);", ":var(--outline-accent);"], _CodeInput.codeInputTokens.captionColor, _CodeInput.codeInputTokens.captionColorError, _CodeInput.codeInputTokens.codeColor, _CodeInput.codeInputTokens.codeColorError, _CodeInput.codeInputTokens.borderColorFocus)
     },
     size: {
-      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":0.75rem;", ":0.75rem;", ":var(--plasma-typo-dspl-l-font-family);", ":var(--plasma-typo-dspl-l-font-style);", ":var(--plasma-typo-dspl-l-bold-font-weight);", ":var(--plasma-typo-dspl-l-letter-spacing);", ":8rem;", ":8rem;", ":8rem;", ":8rem;", ":7rem;", ":7rem;", ":7rem;", ":7rem;", ":5.5rem;", ":5.75rem;", ":var(--plasma-typo-h3-font-family);", ":var(--plasma-typo-h3-font-size);", ":var(--plasma-typo-h3-font-style);", ":var(--plasma-typo-h3-font-weight);", ":var(--plasma-typo-h3-letter-spacing);", ":var(--plasma-typo-h3-line-height);", ":5rem;", ":8rem;", ":5rem;", ":8rem;", ":4.5rem;", ":7rem;", ":4.5rem;", ":7rem;", ":3.5rem;", ":5.75rem;", ":0.125rem;", ":1.5rem;"], _CodeInput.codeInputTokens.captionGap, _CodeInput.codeInputTokens.codeItemsGap, _CodeInput.codeInputTokens.separatorWidth, _CodeInput.codeInputTokens.fontFamily, _CodeInput.codeInputTokens.fontStyle, _CodeInput.codeInputTokens.fontWeight, _CodeInput.codeInputTokens.letterSpacing, _CodeInput.codeInputTokens.largeSFontSize, _CodeInput.codeInputTokens.largeSLineHeight, _CodeInput.codeInputTokens.largeMFontSize, _CodeInput.codeInputTokens.largeMLineHeight, _CodeInput.codeInputTokens.mediumSFontSize, _CodeInput.codeInputTokens.mediumSLineHeight, _CodeInput.codeInputTokens.mediumMFontSize, _CodeInput.codeInputTokens.mediumMLineHeight, _CodeInput.codeInputTokens.smallMFontSize, _CodeInput.codeInputTokens.smallMLineHeight, _CodeInput.codeInputTokens.captionFontFamily, _CodeInput.codeInputTokens.captionFontSize, _CodeInput.codeInputTokens.captionFontStyle, _CodeInput.codeInputTokens.captionFontWeight, _CodeInput.codeInputTokens.captionLetterSpacing, _CodeInput.codeInputTokens.captionLineHeight, _CodeInput.codeInputTokens.largeMCodeItemWidth, _CodeInput.codeInputTokens.largeMCodeItemHeight, _CodeInput.codeInputTokens.largeSCodeItemWidth, _CodeInput.codeInputTokens.largeSCodeItemHeight, _CodeInput.codeInputTokens.mediumMCodeItemWidth, _CodeInput.codeInputTokens.mediumMCodeItemHeight, _CodeInput.codeInputTokens.mediumSCodeItemWidth, _CodeInput.codeInputTokens.mediumSCodeItemHeight, _CodeInput.codeInputTokens.smallMCodeItemWidth, _CodeInput.codeInputTokens.smallMCodeItemHeight, _CodeInput.codeInputTokens.codeItemCircleBorderWidth, _CodeInput.codeInputTokens.codeItemCircleSize),
-      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.75rem;", ":0.5rem;", ":0.75rem;", ":var(--plasma-typo-dspl-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":5.5rem;", ":5.75rem;", ":5.5rem;", ":5.75rem;", ":4.5rem;", ":4.75rem;", ":4.5rem;", ":4.75rem;", ":3.5rem;", ":3.75rem;", ":var(--plasma-typo-h4-font-family);", ":var(--plasma-typo-h4-font-size);", ":var(--plasma-typo-h4-font-style);", ":var(--plasma-typo-h4-font-weight);", ":var(--plasma-typo-h4-letter-spacing);", ":var(--plasma-typo-h4-line-height);", ":3.5rem;", ":5.75rem;", ":3.5rem;", ":5.75rem;", ":3rem;", ":4.75rem;", ":3rem;", ":4.75rem;", ":2.25rem;", ":3.75rem;", ":0.094rem;", ":1rem;"], _CodeInput.codeInputTokens.captionGap, _CodeInput.codeInputTokens.codeItemsGap, _CodeInput.codeInputTokens.separatorWidth, _CodeInput.codeInputTokens.fontFamily, _CodeInput.codeInputTokens.fontStyle, _CodeInput.codeInputTokens.fontWeight, _CodeInput.codeInputTokens.letterSpacing, _CodeInput.codeInputTokens.largeMFontSize, _CodeInput.codeInputTokens.largeMLineHeight, _CodeInput.codeInputTokens.largeSFontSize, _CodeInput.codeInputTokens.largeSLineHeight, _CodeInput.codeInputTokens.mediumSFontSize, _CodeInput.codeInputTokens.mediumSLineHeight, _CodeInput.codeInputTokens.mediumMFontSize, _CodeInput.codeInputTokens.mediumMLineHeight, _CodeInput.codeInputTokens.smallMFontSize, _CodeInput.codeInputTokens.smallMLineHeight, _CodeInput.codeInputTokens.captionFontFamily, _CodeInput.codeInputTokens.captionFontSize, _CodeInput.codeInputTokens.captionFontStyle, _CodeInput.codeInputTokens.captionFontWeight, _CodeInput.codeInputTokens.captionLetterSpacing, _CodeInput.codeInputTokens.captionLineHeight, _CodeInput.codeInputTokens.largeMCodeItemWidth, _CodeInput.codeInputTokens.largeMCodeItemHeight, _CodeInput.codeInputTokens.largeSCodeItemWidth, _CodeInput.codeInputTokens.largeSCodeItemHeight, _CodeInput.codeInputTokens.mediumMCodeItemWidth, _CodeInput.codeInputTokens.mediumMCodeItemHeight, _CodeInput.codeInputTokens.mediumSCodeItemWidth, _CodeInput.codeInputTokens.mediumSCodeItemHeight, _CodeInput.codeInputTokens.smallMCodeItemWidth, _CodeInput.codeInputTokens.smallMCodeItemHeight, _CodeInput.codeInputTokens.codeItemCircleBorderWidth, _CodeInput.codeInputTokens.codeItemCircleSize),
-      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":0.25rem;", ":0.5rem;", ":var(--plasma-typo-dspl-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":4rem;", ":4.25rem;", ":4rem;", ":4.25rem;", ":3rem;", ":3.25rem;", ":3rem;", ":3.25rem;", ":2.5rem;", ":2.75rem;", ":var(--plasma-typo-h5-font-family);", ":var(--plasma-typo-h5-font-size);", ":var(--plasma-typo-h5-font-style);", ":var(--plasma-typo-h5-font-weight);", ":var(--plasma-typo-h5-letter-spacing);", ":var(--plasma-typo-h5-line-height);", ":2.5rem;", ":4.25rem;", ":2.5rem;", ":4.25rem;", ":2rem;", ":3.25rem;", ":2rem;", ":3.25rem;", ":1.625rem;", ":2.75rem;", ":0.063rem;", ":0.75rem;"], _CodeInput.codeInputTokens.captionGap, _CodeInput.codeInputTokens.codeItemsGap, _CodeInput.codeInputTokens.separatorWidth, _CodeInput.codeInputTokens.fontFamily, _CodeInput.codeInputTokens.fontStyle, _CodeInput.codeInputTokens.fontWeight, _CodeInput.codeInputTokens.letterSpacing, _CodeInput.codeInputTokens.largeMFontSize, _CodeInput.codeInputTokens.largeMLineHeight, _CodeInput.codeInputTokens.largeSFontSize, _CodeInput.codeInputTokens.largeSLineHeight, _CodeInput.codeInputTokens.mediumMFontSize, _CodeInput.codeInputTokens.mediumMLineHeight, _CodeInput.codeInputTokens.mediumSFontSize, _CodeInput.codeInputTokens.mediumSLineHeight, _CodeInput.codeInputTokens.smallMFontSize, _CodeInput.codeInputTokens.smallMLineHeight, _CodeInput.codeInputTokens.captionFontFamily, _CodeInput.codeInputTokens.captionFontSize, _CodeInput.codeInputTokens.captionFontStyle, _CodeInput.codeInputTokens.captionFontWeight, _CodeInput.codeInputTokens.captionLetterSpacing, _CodeInput.codeInputTokens.captionLineHeight, _CodeInput.codeInputTokens.largeMCodeItemWidth, _CodeInput.codeInputTokens.largeMCodeItemHeight, _CodeInput.codeInputTokens.largeSCodeItemWidth, _CodeInput.codeInputTokens.largeSCodeItemHeight, _CodeInput.codeInputTokens.mediumMCodeItemWidth, _CodeInput.codeInputTokens.mediumMCodeItemHeight, _CodeInput.codeInputTokens.mediumSCodeItemWidth, _CodeInput.codeInputTokens.mediumSCodeItemHeight, _CodeInput.codeInputTokens.smallMCodeItemWidth, _CodeInput.codeInputTokens.smallMCodeItemHeight, _CodeInput.codeInputTokens.codeItemCircleBorderWidth, _CodeInput.codeInputTokens.codeItemCircleSize)
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":0.75rem;", ":0.75rem;", ":var(--plasma-typo-dspl-l-font-family);", ":var(--plasma-typo-dspl-l-font-style);", ":var(--plasma-typo-dspl-l-bold-font-weight);", ":var(--plasma-typo-dspl-l-letter-spacing);", ":8rem;", ":8rem;", ":7rem;", ":7rem;", ":5.5rem;", ":5.75rem;", ":var(--plasma-typo-h3-font-family);", ":var(--plasma-typo-h3-font-size);", ":var(--plasma-typo-h3-font-style);", ":var(--plasma-typo-h3-font-weight);", ":var(--plasma-typo-h3-letter-spacing);", ":var(--plasma-typo-h3-line-height);", ":5rem;", ":8rem;", ":4.5rem;", ":7rem;", ":3.5rem;", ":5.75rem;", ":0.125rem;", ":1.5rem;"], _CodeInput.codeInputTokens.captionGap, _CodeInput.codeInputTokens.codeItemsGap, _CodeInput.codeInputTokens.separatorWidth, _CodeInput.codeInputTokens.fontFamily, _CodeInput.codeInputTokens.fontStyle, _CodeInput.codeInputTokens.fontWeight, _CodeInput.codeInputTokens.letterSpacing, _CodeInput.codeInputTokens.largeFontSize, _CodeInput.codeInputTokens.largeLineHeight, _CodeInput.codeInputTokens.mediumFontSize, _CodeInput.codeInputTokens.mediumLineHeight, _CodeInput.codeInputTokens.smallFontSize, _CodeInput.codeInputTokens.smallLineHeight, _CodeInput.codeInputTokens.captionFontFamily, _CodeInput.codeInputTokens.captionFontSize, _CodeInput.codeInputTokens.captionFontStyle, _CodeInput.codeInputTokens.captionFontWeight, _CodeInput.codeInputTokens.captionLetterSpacing, _CodeInput.codeInputTokens.captionLineHeight, _CodeInput.codeInputTokens.largeCodeItemWidth, _CodeInput.codeInputTokens.largeCodeItemHeight, _CodeInput.codeInputTokens.mediumCodeItemWidth, _CodeInput.codeInputTokens.mediumCodeItemHeight, _CodeInput.codeInputTokens.smallCodeItemWidth, _CodeInput.codeInputTokens.smallCodeItemHeight, _CodeInput.codeInputTokens.codeItemCircleBorderWidth, _CodeInput.codeInputTokens.codeItemCircleSize),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.75rem;", ":0.5rem;", ":0.75rem;", ":var(--plasma-typo-dspl-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":5.5rem;", ":5.75rem;", ":4.5rem;", ":4.75rem;", ":3.5rem;", ":3.75rem;", ":var(--plasma-typo-h4-font-family);", ":var(--plasma-typo-h4-font-size);", ":var(--plasma-typo-h4-font-style);", ":var(--plasma-typo-h4-font-weight);", ":var(--plasma-typo-h4-letter-spacing);", ":var(--plasma-typo-h4-line-height);", ":3.5rem;", ":5.75rem;", ":3rem;", ":4.75rem;", ":2.25rem;", ":3.75rem;", ":0.094rem;", ":1rem;"], _CodeInput.codeInputTokens.captionGap, _CodeInput.codeInputTokens.codeItemsGap, _CodeInput.codeInputTokens.separatorWidth, _CodeInput.codeInputTokens.fontFamily, _CodeInput.codeInputTokens.fontStyle, _CodeInput.codeInputTokens.fontWeight, _CodeInput.codeInputTokens.letterSpacing, _CodeInput.codeInputTokens.largeFontSize, _CodeInput.codeInputTokens.largeLineHeight, _CodeInput.codeInputTokens.mediumFontSize, _CodeInput.codeInputTokens.mediumLineHeight, _CodeInput.codeInputTokens.smallFontSize, _CodeInput.codeInputTokens.smallLineHeight, _CodeInput.codeInputTokens.captionFontFamily, _CodeInput.codeInputTokens.captionFontSize, _CodeInput.codeInputTokens.captionFontStyle, _CodeInput.codeInputTokens.captionFontWeight, _CodeInput.codeInputTokens.captionLetterSpacing, _CodeInput.codeInputTokens.captionLineHeight, _CodeInput.codeInputTokens.largeCodeItemWidth, _CodeInput.codeInputTokens.largeCodeItemHeight, _CodeInput.codeInputTokens.mediumCodeItemWidth, _CodeInput.codeInputTokens.mediumCodeItemHeight, _CodeInput.codeInputTokens.smallCodeItemWidth, _CodeInput.codeInputTokens.smallCodeItemHeight, _CodeInput.codeInputTokens.codeItemCircleBorderWidth, _CodeInput.codeInputTokens.codeItemCircleSize),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":0.25rem;", ":0.5rem;", ":var(--plasma-typo-dspl-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":4rem;", ":4.25rem;", ":3rem;", ":3.25rem;", ":2.5rem;", ":2.75rem;", ":var(--plasma-typo-h5-font-family);", ":var(--plasma-typo-h5-font-size);", ":var(--plasma-typo-h5-font-style);", ":var(--plasma-typo-h5-font-weight);", ":var(--plasma-typo-h5-letter-spacing);", ":var(--plasma-typo-h5-line-height);", ":2.5rem;", ":4.25rem;", ":2rem;", ":3.25rem;", ":1.625rem;", ":2.75rem;", ":0.063rem;", ":0.75rem;"], _CodeInput.codeInputTokens.captionGap, _CodeInput.codeInputTokens.codeItemsGap, _CodeInput.codeInputTokens.separatorWidth, _CodeInput.codeInputTokens.fontFamily, _CodeInput.codeInputTokens.fontStyle, _CodeInput.codeInputTokens.fontWeight, _CodeInput.codeInputTokens.letterSpacing, _CodeInput.codeInputTokens.largeFontSize, _CodeInput.codeInputTokens.largeLineHeight, _CodeInput.codeInputTokens.mediumFontSize, _CodeInput.codeInputTokens.mediumLineHeight, _CodeInput.codeInputTokens.smallFontSize, _CodeInput.codeInputTokens.smallLineHeight, _CodeInput.codeInputTokens.captionFontFamily, _CodeInput.codeInputTokens.captionFontSize, _CodeInput.codeInputTokens.captionFontStyle, _CodeInput.codeInputTokens.captionFontWeight, _CodeInput.codeInputTokens.captionLetterSpacing, _CodeInput.codeInputTokens.captionLineHeight, _CodeInput.codeInputTokens.largeCodeItemWidth, _CodeInput.codeInputTokens.largeCodeItemHeight, _CodeInput.codeInputTokens.mediumCodeItemWidth, _CodeInput.codeInputTokens.mediumCodeItemHeight, _CodeInput.codeInputTokens.smallCodeItemWidth, _CodeInput.codeInputTokens.smallCodeItemHeight, _CodeInput.codeInputTokens.codeItemCircleBorderWidth, _CodeInput.codeInputTokens.codeItemCircleSize)
     },
     disabled: {
       "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _CodeInput.codeInputTokens.disabledOpacity)

package/styled-components/cjs/examples/plasma_web/components/CodeInput/CodeInput.config.js

@@ -6,10 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.config = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _CodeInput = /*#__PURE__*/require("../../../../components/CodeInput");
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 var config = exports.config = {
   defaults: {
     view: 'default',
@@ -17,12 +13,12 @@ var config = exports.config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--text-negative);", ":var(--text-primary);", ":var(--text-negative);", ":var(--outline-accent);", ";"], _CodeInput.codeInputTokens.captionColor, _CodeInput.codeInputTokens.captionColorError, _CodeInput.codeInputTokens.codeColor, _CodeInput.codeInputTokens.codeColorError, _CodeInput.codeInputTokens.borderColorFocus, /*#__PURE__*/(0, _CodeInput.getCodeInputView)(/*#__PURE__*/_defineProperty(/*#__PURE__*/_defineProperty(/*#__PURE__*/_defineProperty(/*#__PURE__*/_defineProperty(/*#__PURE__*/_defineProperty({}, _CodeInput.codeInputTokens.smallMMinWidth, 0), _CodeInput.codeInputTokens.mediumSMinWidth, '35rem'), _CodeInput.codeInputTokens.mediumMMinWidth, '49.125rem'), _CodeInput.codeInputTokens.largeSMinWidth, '60rem'), _CodeInput.codeInputTokens.largeMMinWidth, '75rem'), 'default'))
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--text-negative);", ":var(--text-primary);", ":var(--text-negative);", ":var(--outline-accent);"], _CodeInput.codeInputTokens.captionColor, _CodeInput.codeInputTokens.captionColorError, _CodeInput.codeInputTokens.codeColor, _CodeInput.codeInputTokens.codeColorError, _CodeInput.codeInputTokens.borderColorFocus)
     },
     size: {
-      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":0.75rem;", ":0.75rem;", ":var(--plasma-typo-dspl-l-font-family);", ":var(--plasma-typo-dspl-l-font-style);", ":var(--plasma-typo-dspl-l-bold-font-weight);", ":var(--plasma-typo-dspl-l-letter-spacing);", ":8rem;", ":8rem;", ":8rem;", ":8rem;", ":7rem;", ":7rem;", ":7rem;", ":7rem;", ":5.5rem;", ":5.75rem;", ":var(--plasma-typo-h3-font-family);", ":var(--plasma-typo-h3-font-size);", ":var(--plasma-typo-h3-font-style);", ":var(--plasma-typo-h3-font-weight);", ":var(--plasma-typo-h3-letter-spacing);", ":var(--plasma-typo-h3-line-height);", ":5rem;", ":8rem;", ":5rem;", ":8rem;", ":4.5rem;", ":7rem;", ":4.5rem;", ":7rem;", ":3.5rem;", ":5.75rem;", ":0.125rem;", ":1.5rem;"], _CodeInput.codeInputTokens.captionGap, _CodeInput.codeInputTokens.codeItemsGap, _CodeInput.codeInputTokens.separatorWidth, _CodeInput.codeInputTokens.fontFamily, _CodeInput.codeInputTokens.fontStyle, _CodeInput.codeInputTokens.fontWeight, _CodeInput.codeInputTokens.letterSpacing, _CodeInput.codeInputTokens.largeSFontSize, _CodeInput.codeInputTokens.largeSLineHeight, _CodeInput.codeInputTokens.largeMFontSize, _CodeInput.codeInputTokens.largeMLineHeight, _CodeInput.codeInputTokens.mediumSFontSize, _CodeInput.codeInputTokens.mediumSLineHeight, _CodeInput.codeInputTokens.mediumMFontSize, _CodeInput.codeInputTokens.mediumMLineHeight, _CodeInput.codeInputTokens.smallMFontSize, _CodeInput.codeInputTokens.smallMLineHeight, _CodeInput.codeInputTokens.captionFontFamily, _CodeInput.codeInputTokens.captionFontSize, _CodeInput.codeInputTokens.captionFontStyle, _CodeInput.codeInputTokens.captionFontWeight, _CodeInput.codeInputTokens.captionLetterSpacing, _CodeInput.codeInputTokens.captionLineHeight, _CodeInput.codeInputTokens.largeMCodeItemWidth, _CodeInput.codeInputTokens.largeMCodeItemHeight, _CodeInput.codeInputTokens.largeSCodeItemWidth, _CodeInput.codeInputTokens.largeSCodeItemHeight, _CodeInput.codeInputTokens.mediumMCodeItemWidth, _CodeInput.codeInputTokens.mediumMCodeItemHeight, _CodeInput.codeInputTokens.mediumSCodeItemWidth, _CodeInput.codeInputTokens.mediumSCodeItemHeight, _CodeInput.codeInputTokens.smallMCodeItemWidth, _CodeInput.codeInputTokens.smallMCodeItemHeight, _CodeInput.codeInputTokens.codeItemCircleBorderWidth, _CodeInput.codeInputTokens.codeItemCircleSize),
-      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.75rem;", ":0.5rem;", ":0.75rem;", ":var(--plasma-typo-dspl-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":5.5rem;", ":5.75rem;", ":5.5rem;", ":5.75rem;", ":4.5rem;", ":4.75rem;", ":4.5rem;", ":4.75rem;", ":3.5rem;", ":3.75rem;", ":var(--plasma-typo-h4-font-family);", ":var(--plasma-typo-h4-font-size);", ":var(--plasma-typo-h4-font-style);", ":var(--plasma-typo-h4-font-weight);", ":var(--plasma-typo-h4-letter-spacing);", ":var(--plasma-typo-h4-line-height);", ":3.5rem;", ":5.75rem;", ":3.5rem;", ":5.75rem;", ":3rem;", ":4.75rem;", ":3rem;", ":4.75rem;", ":2.25rem;", ":3.75rem;", ":0.094rem;", ":1rem;"], _CodeInput.codeInputTokens.captionGap, _CodeInput.codeInputTokens.codeItemsGap, _CodeInput.codeInputTokens.separatorWidth, _CodeInput.codeInputTokens.fontFamily, _CodeInput.codeInputTokens.fontStyle, _CodeInput.codeInputTokens.fontWeight, _CodeInput.codeInputTokens.letterSpacing, _CodeInput.codeInputTokens.largeMFontSize, _CodeInput.codeInputTokens.largeMLineHeight, _CodeInput.codeInputTokens.largeSFontSize, _CodeInput.codeInputTokens.largeSLineHeight, _CodeInput.codeInputTokens.mediumSFontSize, _CodeInput.codeInputTokens.mediumSLineHeight, _CodeInput.codeInputTokens.mediumMFontSize, _CodeInput.codeInputTokens.mediumMLineHeight, _CodeInput.codeInputTokens.smallMFontSize, _CodeInput.codeInputTokens.smallMLineHeight, _CodeInput.codeInputTokens.captionFontFamily, _CodeInput.codeInputTokens.captionFontSize, _CodeInput.codeInputTokens.captionFontStyle, _CodeInput.codeInputTokens.captionFontWeight, _CodeInput.codeInputTokens.captionLetterSpacing, _CodeInput.codeInputTokens.captionLineHeight, _CodeInput.codeInputTokens.largeMCodeItemWidth, _CodeInput.codeInputTokens.largeMCodeItemHeight, _CodeInput.codeInputTokens.largeSCodeItemWidth, _CodeInput.codeInputTokens.largeSCodeItemHeight, _CodeInput.codeInputTokens.mediumMCodeItemWidth, _CodeInput.codeInputTokens.mediumMCodeItemHeight, _CodeInput.codeInputTokens.mediumSCodeItemWidth, _CodeInput.codeInputTokens.mediumSCodeItemHeight, _CodeInput.codeInputTokens.smallMCodeItemWidth, _CodeInput.codeInputTokens.smallMCodeItemHeight, _CodeInput.codeInputTokens.codeItemCircleBorderWidth, _CodeInput.codeInputTokens.codeItemCircleSize),
-      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":0.25rem;", ":0.5rem;", ":var(--plasma-typo-dspl-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":4rem;", ":4.25rem;", ":4rem;", ":4.25rem;", ":3rem;", ":3.25rem;", ":3rem;", ":3.25rem;", ":2.5rem;", ":2.75rem;", ":var(--plasma-typo-h5-font-family);", ":var(--plasma-typo-h5-font-size);", ":var(--plasma-typo-h5-font-style);", ":var(--plasma-typo-h5-font-weight);", ":var(--plasma-typo-h5-letter-spacing);", ":var(--plasma-typo-h5-line-height);", ":2.5rem;", ":4.25rem;", ":2.5rem;", ":4.25rem;", ":2rem;", ":3.25rem;", ":2rem;", ":3.25rem;", ":1.625rem;", ":2.75rem;", ":0.063rem;", ":0.75rem;"], _CodeInput.codeInputTokens.captionGap, _CodeInput.codeInputTokens.codeItemsGap, _CodeInput.codeInputTokens.separatorWidth, _CodeInput.codeInputTokens.fontFamily, _CodeInput.codeInputTokens.fontStyle, _CodeInput.codeInputTokens.fontWeight, _CodeInput.codeInputTokens.letterSpacing, _CodeInput.codeInputTokens.largeMFontSize, _CodeInput.codeInputTokens.largeMLineHeight, _CodeInput.codeInputTokens.largeSFontSize, _CodeInput.codeInputTokens.largeSLineHeight, _CodeInput.codeInputTokens.mediumMFontSize, _CodeInput.codeInputTokens.mediumMLineHeight, _CodeInput.codeInputTokens.mediumSFontSize, _CodeInput.codeInputTokens.mediumSLineHeight, _CodeInput.codeInputTokens.smallMFontSize, _CodeInput.codeInputTokens.smallMLineHeight, _CodeInput.codeInputTokens.captionFontFamily, _CodeInput.codeInputTokens.captionFontSize, _CodeInput.codeInputTokens.captionFontStyle, _CodeInput.codeInputTokens.captionFontWeight, _CodeInput.codeInputTokens.captionLetterSpacing, _CodeInput.codeInputTokens.captionLineHeight, _CodeInput.codeInputTokens.largeMCodeItemWidth, _CodeInput.codeInputTokens.largeMCodeItemHeight, _CodeInput.codeInputTokens.largeSCodeItemWidth, _CodeInput.codeInputTokens.largeSCodeItemHeight, _CodeInput.codeInputTokens.mediumMCodeItemWidth, _CodeInput.codeInputTokens.mediumMCodeItemHeight, _CodeInput.codeInputTokens.mediumSCodeItemWidth, _CodeInput.codeInputTokens.mediumSCodeItemHeight, _CodeInput.codeInputTokens.smallMCodeItemWidth, _CodeInput.codeInputTokens.smallMCodeItemHeight, _CodeInput.codeInputTokens.codeItemCircleBorderWidth, _CodeInput.codeInputTokens.codeItemCircleSize)
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":0.75rem;", ":0.75rem;", ":var(--plasma-typo-dspl-l-font-family);", ":var(--plasma-typo-dspl-l-font-style);", ":var(--plasma-typo-dspl-l-bold-font-weight);", ":var(--plasma-typo-dspl-l-letter-spacing);", ":8rem;", ":8rem;", ":7rem;", ":7rem;", ":5.5rem;", ":5.75rem;", ":var(--plasma-typo-h3-font-family);", ":var(--plasma-typo-h3-font-size);", ":var(--plasma-typo-h3-font-style);", ":var(--plasma-typo-h3-font-weight);", ":var(--plasma-typo-h3-letter-spacing);", ":var(--plasma-typo-h3-line-height);", ":5rem;", ":8rem;", ":4.5rem;", ":7rem;", ":3.5rem;", ":5.75rem;", ":0.125rem;", ":1.5rem;"], _CodeInput.codeInputTokens.captionGap, _CodeInput.codeInputTokens.codeItemsGap, _CodeInput.codeInputTokens.separatorWidth, _CodeInput.codeInputTokens.fontFamily, _CodeInput.codeInputTokens.fontStyle, _CodeInput.codeInputTokens.fontWeight, _CodeInput.codeInputTokens.letterSpacing, _CodeInput.codeInputTokens.largeFontSize, _CodeInput.codeInputTokens.largeLineHeight, _CodeInput.codeInputTokens.mediumFontSize, _CodeInput.codeInputTokens.mediumLineHeight, _CodeInput.codeInputTokens.smallFontSize, _CodeInput.codeInputTokens.smallLineHeight, _CodeInput.codeInputTokens.captionFontFamily, _CodeInput.codeInputTokens.captionFontSize, _CodeInput.codeInputTokens.captionFontStyle, _CodeInput.codeInputTokens.captionFontWeight, _CodeInput.codeInputTokens.captionLetterSpacing, _CodeInput.codeInputTokens.captionLineHeight, _CodeInput.codeInputTokens.largeCodeItemWidth, _CodeInput.codeInputTokens.largeCodeItemHeight, _CodeInput.codeInputTokens.mediumCodeItemWidth, _CodeInput.codeInputTokens.mediumCodeItemHeight, _CodeInput.codeInputTokens.smallCodeItemWidth, _CodeInput.codeInputTokens.smallCodeItemHeight, _CodeInput.codeInputTokens.codeItemCircleBorderWidth, _CodeInput.codeInputTokens.codeItemCircleSize),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.75rem;", ":0.5rem;", ":0.75rem;", ":var(--plasma-typo-dspl-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":5.5rem;", ":5.75rem;", ":4.5rem;", ":4.75rem;", ":3.5rem;", ":3.75rem;", ":var(--plasma-typo-h4-font-family);", ":var(--plasma-typo-h4-font-size);", ":var(--plasma-typo-h4-font-style);", ":var(--plasma-typo-h4-font-weight);", ":var(--plasma-typo-h4-letter-spacing);", ":var(--plasma-typo-h4-line-height);", ":3.5rem;", ":5.75rem;", ":3rem;", ":4.75rem;", ":2.25rem;", ":3.75rem;", ":0.094rem;", ":1rem;"], _CodeInput.codeInputTokens.captionGap, _CodeInput.codeInputTokens.codeItemsGap, _CodeInput.codeInputTokens.separatorWidth, _CodeInput.codeInputTokens.fontFamily, _CodeInput.codeInputTokens.fontStyle, _CodeInput.codeInputTokens.fontWeight, _CodeInput.codeInputTokens.letterSpacing, _CodeInput.codeInputTokens.largeFontSize, _CodeInput.codeInputTokens.largeLineHeight, _CodeInput.codeInputTokens.mediumFontSize, _CodeInput.codeInputTokens.mediumLineHeight, _CodeInput.codeInputTokens.smallFontSize, _CodeInput.codeInputTokens.smallLineHeight, _CodeInput.codeInputTokens.captionFontFamily, _CodeInput.codeInputTokens.captionFontSize, _CodeInput.codeInputTokens.captionFontStyle, _CodeInput.codeInputTokens.captionFontWeight, _CodeInput.codeInputTokens.captionLetterSpacing, _CodeInput.codeInputTokens.captionLineHeight, _CodeInput.codeInputTokens.largeCodeItemWidth, _CodeInput.codeInputTokens.largeCodeItemHeight, _CodeInput.codeInputTokens.mediumCodeItemWidth, _CodeInput.codeInputTokens.mediumCodeItemHeight, _CodeInput.codeInputTokens.smallCodeItemWidth, _CodeInput.codeInputTokens.smallCodeItemHeight, _CodeInput.codeInputTokens.codeItemCircleBorderWidth, _CodeInput.codeInputTokens.codeItemCircleSize),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":0.25rem;", ":0.5rem;", ":var(--plasma-typo-dspl-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":4rem;", ":4.25rem;", ":3rem;", ":3.25rem;", ":2.5rem;", ":2.75rem;", ":var(--plasma-typo-h5-font-family);", ":var(--plasma-typo-h5-font-size);", ":var(--plasma-typo-h5-font-style);", ":var(--plasma-typo-h5-font-weight);", ":var(--plasma-typo-h5-letter-spacing);", ":var(--plasma-typo-h5-line-height);", ":2.5rem;", ":4.25rem;", ":2rem;", ":3.25rem;", ":1.625rem;", ":2.75rem;", ":0.063rem;", ":0.75rem;"], _CodeInput.codeInputTokens.captionGap, _CodeInput.codeInputTokens.codeItemsGap, _CodeInput.codeInputTokens.separatorWidth, _CodeInput.codeInputTokens.fontFamily, _CodeInput.codeInputTokens.fontStyle, _CodeInput.codeInputTokens.fontWeight, _CodeInput.codeInputTokens.letterSpacing, _CodeInput.codeInputTokens.largeFontSize, _CodeInput.codeInputTokens.largeLineHeight, _CodeInput.codeInputTokens.mediumFontSize, _CodeInput.codeInputTokens.mediumLineHeight, _CodeInput.codeInputTokens.smallFontSize, _CodeInput.codeInputTokens.smallLineHeight, _CodeInput.codeInputTokens.captionFontFamily, _CodeInput.codeInputTokens.captionFontSize, _CodeInput.codeInputTokens.captionFontStyle, _CodeInput.codeInputTokens.captionFontWeight, _CodeInput.codeInputTokens.captionLetterSpacing, _CodeInput.codeInputTokens.captionLineHeight, _CodeInput.codeInputTokens.largeCodeItemWidth, _CodeInput.codeInputTokens.largeCodeItemHeight, _CodeInput.codeInputTokens.mediumCodeItemWidth, _CodeInput.codeInputTokens.mediumCodeItemHeight, _CodeInput.codeInputTokens.smallCodeItemWidth, _CodeInput.codeInputTokens.smallCodeItemHeight, _CodeInput.codeInputTokens.codeItemCircleBorderWidth, _CodeInput.codeInputTokens.codeItemCircleSize)
     },
     disabled: {
       "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _CodeInput.codeInputTokens.disabledOpacity)

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

@@ -22,7 +22,7 @@ import cls from 'classnames';
 import { useDidMountEffect } from "../../hooks";
 import { getSizeValueFromProp } from "../../utils";
 import { BACKSPACE_KEY, FORBIDDEN_KEYS, ONLY_DIGITS_PATTERN } from "./utils/constants";
-import { getCodeInputViewClass, getCodeValue, getFieldPattern, getPlaceholderValue, handleCodeError, handleItemError } from "./utils";
+import { getCodeValue, getFieldPattern, getPlaceholderValue, handleCodeError, handleItemError } from "./utils";
 import { classes } from "./CodeInput.tokens";
 import { base, CaptionWrapper, CodeGroup, CodeWrapper, ItemInput, Separator, ItemWrapper, ItemCircle } from "./CodeInput.styles";
 import { base as viewCSS } from "./variations/_view/base";
@@ -73,7 +73,6 @@ export var codeInputRoot = function codeInputRoot(Root) {
     var fieldPattern = getFieldPattern(allowedSymbols);
     var placeholderValue = getPlaceholderValue(codeLength, placeholder);
     var parts = codeLength === 6 ? 2 : 1;
-    var viewClass = getCodeInputViewClass(view || 'default');
     var widthValue = width ? getSizeValueFromProp(width, 'rem') : undefined;
     var getLastActiveIndex = function getLastActiveIndex() {
       if (code.length && code.length < codeLength) {
@@ -93,7 +92,7 @@ export var codeInputRoot = function codeInputRoot(Root) {
         inputRefs.current[lastActiveIndex].focus();
       }
     };
-    var handleOnKeyDown = function handleOnKeyDown(event, index) {
+    var handleOnKeyDown = function handleOnKeyDown(event, index, type) {
       if (disabled) {
         return;
       }
@@ -108,6 +107,11 @@ export var 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);
@@ -124,25 +128,6 @@ export var codeInputRoot = function codeInputRoot(Root) {
       var symbol = rawSymbol.charAt(rawSymbol.length - 1);
       handleAddSymbol(symbol, index);
     };
-    var handleOnKeyDownCircle = function handleOnKeyDownCircle(event, index) {
-      var _inputRefs$current$in;
-      if (disabled) {
-        return;
-      }
-      var key = event.key;
-      if (FORBIDDEN_KEYS.includes(key)) {
-        event.preventDefault();
-        return;
-      }
-      if (key === BACKSPACE_KEY) {
-        if (index > 0 && code[index] === '') {
-          var _inputRefs$current2;
-          (_inputRefs$current2 = inputRefs.current[index - 1]) === null || _inputRefs$current2 === void 0 || _inputRefs$current2.focus();
-        }
-      }
-      handleAddSymbol(key, index);
-      (_inputRefs$current$in = inputRefs.current[index]) === null || _inputRefs$current$in === void 0 || _inputRefs$current$in.focus();
-    };
     var handleAddSymbol = function handleAddSymbol(symbol, index) {
       var _inputRefs$current$in2;
       var newCode = _toConsumableArray(code);
@@ -162,8 +147,8 @@ export var codeInputRoot = function codeInputRoot(Root) {
         newCode[index] = symbol;
         codeSetter(newCode);
         if (symbol && index < codeLength - 1) {
-          var _inputRefs$current3;
-          (_inputRefs$current3 = inputRefs.current[index + 1]) === null || _inputRefs$current3 === void 0 || _inputRefs$current3.focus();
+          var _inputRefs$current2;
+          (_inputRefs$current2 = inputRefs.current[index + 1]) === null || _inputRefs$current2 === void 0 || _inputRefs$current2.focus();
         }
         return;
       }
@@ -176,8 +161,8 @@ export var codeInputRoot = function codeInputRoot(Root) {
         newCode[index] = symbol.charAt(symbol.length - 1);
         codeSetter(newCode);
         if (index < codeLength - 1) {
-          var _inputRefs$current4;
-          (_inputRefs$current4 = inputRefs.current[index + 1]) === null || _inputRefs$current4 === void 0 || _inputRefs$current4.focus();
+          var _inputRefs$current3;
+          (_inputRefs$current3 = inputRefs.current[index + 1]) === null || _inputRefs$current3 === void 0 || _inputRefs$current3.focus();
         }
       } else {
         newCode[index] = symbol.charAt(symbol.length - 1);
@@ -253,7 +238,7 @@ export var codeInputRoot = function codeInputRoot(Root) {
       disabled: disabled,
       screen: screen,
       onClick: handleClick,
-      className: cls(className, viewClass, _defineProperty({}, classes.captionAlignLeft, captionAlign === 'left'))
+      className: cls(className, _defineProperty({}, classes.captionAlignLeft, captionAlign === 'left'))
     }, rest), /*#__PURE__*/React.createElement(CodeWrapper, {
       ref: inputContainerRef
     }, _toConsumableArray(Array(parts)).map(function (_, partIndex) {
@@ -269,7 +254,7 @@ export var codeInputRoot = function codeInputRoot(Root) {
           role: "tab",
           tabIndex: originalValue.length === inputCorrectIndex ? 0 : -1,
           onKeyDown: function onKeyDown(e) {
-            handleOnKeyDownCircle(e, inputCorrectIndex);
+            handleOnKeyDown(e, inputCorrectIndex, 'circle');
           },
           className: cls([!!code[inputCorrectIndex] && hidden ? classes.itemCirlceFilled : '', "".concat(classes.itemCircle, "-").concat(inputCorrectIndex)])
         }), /*#__PURE__*/React.createElement(ItemInput, _extends({

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

@@ -14,11 +14,6 @@ export var 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'
 };
 export var privateTokens = {
@@ -30,38 +25,25 @@ export var privateTokens = {
 export var 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/es/components/CodeInput/index.js

@@ -1,3 +1,2 @@
 export { codeInputRoot, codeInputConfig } from "./CodeInput";
-export { tokens as codeInputTokens, classes as codeInputClasses } from "./CodeInput.tokens";
-export { getCodeInputView } from "./utils";
+export { tokens as codeInputTokens, classes as codeInputClasses } from "./CodeInput.tokens";

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

@@ -1,4 +1,3 @@
-export { getFieldPattern, getPlaceholderValue, getCodeValue } from "./initialValuesHelper";
+export { getFieldPattern, getPlaceholderValue, getCodeValue } from "../../CodeField/utils";
 export { handleItemError } from "./handleItemError";
-export { handleCodeError } from "./handleCodeError";
-export * from "./generateMediaQuery";
+export { handleCodeError } from "../../CodeField/utils";

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

@@ -1,4 +1,19 @@
+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; }
 import { css } from 'styled-components';
 import { CaptionWrapper, CodeGroup, CodeWrapper, ItemInput } from "../../CodeInput.styles";
 import { tokens, privateTokens } from "../../CodeInput.tokens";
-export var base = /*#__PURE__*/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(", ");}"], tokens.captionGap, CodeWrapper, CodeGroup, tokens.codeItemsGap, ItemInput, privateTokens.fontSize, tokens.fontFamily, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, privateTokens.lineHeight, privateTokens.itemWidth, privateTokens.itemHeight, CaptionWrapper, tokens.captionFontFamily, tokens.captionFontSize, tokens.captionFontStyle, tokens.captionFontWeight, tokens.captionLetterSpacing, tokens.captionLineHeight);
+import { screenGroupBreakpoints } from "../../../../utils/constants";
+var getIconMediaQueries = function getIconMediaQueries() {
+  return Object.entries(screenGroupBreakpoints).map(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      name = _ref2[0],
+      minWidth = _ref2[1];
+    return "\n                @media (min-width: ".concat(minWidth, ") {\n                    ").concat(privateTokens.fontSize, ": var(").concat(tokens["".concat(name, "FontSize")], ");\n                    ").concat(privateTokens.lineHeight, ": var(").concat(tokens["".concat(name, "CodeItemHeight")], ");\n                    ").concat(privateTokens.itemWidth, ": var(").concat(tokens["".concat(name, "CodeItemWidth")], ");\n                    ").concat(privateTokens.itemHeight, ": var(").concat(tokens["".concat(name, "LineHeight")], ");\n                }\n            ");
+  }).join('\n');
+};
+export var base = /*#__PURE__*/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(), tokens.captionGap, CodeWrapper, CodeGroup, tokens.codeItemsGap, ItemInput, privateTokens.fontSize, tokens.fontFamily, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, privateTokens.lineHeight, privateTokens.itemWidth, privateTokens.itemHeight, CaptionWrapper, tokens.captionFontFamily, tokens.captionFontSize, tokens.captionFontStyle, tokens.captionFontWeight, tokens.captionLetterSpacing, tokens.captionLineHeight);