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

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tokens = exports.classes = void 0;
+exports.tokens = exports.privateTokens = exports.classes = void 0;
 var classes = exports.classes = {
   itemError: 'codeinput-item-error',
   itemErrorAnimation: 'codeinput-item-error-animation',
@@ -17,33 +17,54 @@ var classes = exports.classes = {
   hoverEnabled: 'codeinput-item-hover-enabled',
   segmented: 'codeinput-shape-segmented',
   "default": 'codeinput-shape-default',
-  largeScreen: 'codeinput-large-screen',
-  mediumScreen: 'codeinput-medium-screen',
-  smallScreen: 'codeinput-small-screen',
+  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 = {
+  itemWidth: '--private-codeinput-item-width',
+  itemHeight: '--private-codeinput-item-hieght',
+  fontSize: '--private-codeinput-font-size',
+  lineHeight: '--private-codeinput-line-height'
+};
 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',
-  codeItemLargeWidth: '--plasma-codeinput-item-large-width',
-  codeItemLargeHeight: '--plasma-codeinput-item-large-height',
-  codeItemMediumWidth: '--plasma-codeinput-item-medium-width',
-  codeItemMediumHeight: '--plasma-codeinput-item-medium-height',
-  codeItemSmallWidth: '--plasma-codeinput-item-small-width',
-  codeItemSmallHeight: '--plasma-codeinput-item-small-height',
+  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',
   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',
-  largeScreenFontSize: '--plasma-codeinput-large-screen-font-size',
-  largeScreenLineHeight: '--plasma-codeinput-large-screen-line-height',
-  mediumScreenFontSize: '--plasma-codeinput-medium-screen-font-size',
-  mediumScreenLineHeight: '--plasma-codeinput-medium-screen-line-height',
-  smallScreenFontSize: '--plasma-codeinput-small-screen-font-size',
-  smallScreenLineHeight: '--plasma-codeinput-small-screen-line-height',
+  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',
   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,5 +27,12 @@ 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 _CodeInput2 = /*#__PURE__*/require("./CodeInput.tokens");
+var _utils = /*#__PURE__*/require("./utils");

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

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.gridSizes = exports.getCodeInputViewClass = exports.getCodeInputView = void 0;
+var _CodeInput = /*#__PURE__*/require("../CodeInput.tokens");
+var getCodeInputViewClass = exports.getCodeInputViewClass = function getCodeInputViewClass(view) {
+  return "codeinput-".concat(view, "-view");
+};
+var tokenPrefix = '--plasma-codeinput-';
+var gridSizes = exports.gridSizes = ['smallXXS', 'smallXS', 'smallS', 'smallM', 'smallL', 'smallXL', 'smallXXL', 'mediumXXS', 'mediumXS', 'mediumS', 'mediumM', 'mediumL', 'mediumXL', 'mediumXXL', 'largeXXS', 'largeXS', 'largeS', 'largeM', 'largeL', 'largeXL', 'largeXXL'];
+
+/**
+ * Генерирует набор медиа-запросов под различную ширину вьюпорта
+ *
+ * @param {GridToken} cssTokens - объект view с набором токенов ширины вьюпорта
+ * @return {string} сгенерированный набор медиа-запросов
+ */
+var gridMediaQueryTemplate = function gridMediaQueryTemplate(breakpoints) {
+  return gridSizes.map(function (size) {
+    if (!String(breakpoints["".concat(tokenPrefix).concat(size, "-min-width")])) {
+      return;
+    }
+    var minWidth = breakpoints["".concat(tokenPrefix).concat(size, "-min-width")];
+    var itemWidth = _CodeInput.tokens["".concat(size, "CodeItemWidth")];
+    var itemHeight = _CodeInput.tokens["".concat(size, "CodeItemHeight")];
+    var fontSize = _CodeInput.tokens["".concat(size, "FontSize")];
+    var lineHeight = _CodeInput.tokens["".concat(size, "LineHeight")];
+    return "\n                @media (min-width: ".concat(minWidth, ") {\n                    ").concat(_CodeInput.privateTokens.fontSize, ": var(").concat(fontSize, ");\n                    ").concat(_CodeInput.privateTokens.lineHeight, ": var(").concat(lineHeight, ");\n                    ").concat(_CodeInput.privateTokens.itemWidth, ": var(").concat(itemWidth, ");\n                    ").concat(_CodeInput.privateTokens.itemHeight, ": var(").concat(itemHeight, ");\n                }\n            ");
+  }).filter(function (style) {
+    return style;
+  }).join('\n');
+};
+
+/**
+ * Генерирует строку со стилями для обертки Grid и набором медиа-запросов
+ *
+ * @param {BreakpointToken} breakponts - объект view с набором токенов ширины вьюпорта
+ * @param {string} viewName - название view из конфига
+ * @return {string} стили для обертки Grid
+ */
+var getCodeInputView = exports.getCodeInputView = function getCodeInputView(breakponts, viewName) {
+  return "\n        &.".concat(getCodeInputViewClass(viewName), " {\n            ").concat(gridMediaQueryTemplate(breakponts), "\n        }\n    ");
+};

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

@@ -3,6 +3,13 @@
 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() {
@@ -35,4 +42,16 @@ Object.defineProperty(exports, "handleItemError", {
 });
 var _initialValuesHelper = /*#__PURE__*/require("./initialValuesHelper");
 var _handleItemError = /*#__PURE__*/require("./handleItemError");
-var _handleCodeError = /*#__PURE__*/require("./handleCodeError");
+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];
+    }
+  });
+});

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -7,4 +7,4 @@ 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(", ");}&& .", "{", "{width:var(", ");height:var(", ");font-size:var(", ");line-height:var(", ");}}&& .", "{", "{width:var(", ");height:var(", ");font-size:var(", ");line-height:var(", ");}}&& .", "{", "{width:var(", ");height:var(", ");font-size:var(", ");line-height:var(", ");}}", "{font-family:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing: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, _CodeInput2.classes.largeScreen, _CodeInput.ItemInput, _CodeInput2.tokens.codeItemLargeWidth, _CodeInput2.tokens.codeItemLargeHeight, _CodeInput2.tokens.largeScreenFontSize, _CodeInput2.tokens.largeScreenLineHeight, _CodeInput2.classes.mediumScreen, _CodeInput.ItemInput, _CodeInput2.tokens.codeItemMediumWidth, _CodeInput2.tokens.codeItemMediumHeight, _CodeInput2.tokens.mediumScreenFontSize, _CodeInput2.tokens.mediumScreenLineHeight, _CodeInput2.classes.smallScreen, _CodeInput.ItemInput, _CodeInput2.tokens.codeItemSmallWidth, _CodeInput2.tokens.codeItemSmallHeight, _CodeInput2.tokens.smallScreenFontSize, _CodeInput2.tokens.smallScreenLineHeight, _CodeInput.ItemInput, _CodeInput2.tokens.fontFamily, _CodeInput2.tokens.fontStyle, _CodeInput2.tokens.fontWeight, _CodeInput2.tokens.letterSpacing, _CodeInput.CaptionWrapper, _CodeInput2.tokens.captionFontFamily, _CodeInput2.tokens.captionFontSize, _CodeInput2.tokens.captionFontStyle, _CodeInput2.tokens.captionFontWeight, _CodeInput2.tokens.captionLetterSpacing, _CodeInput2.tokens.captionLineHeight);
+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);

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

@@ -6,6 +6,10 @@ 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',
@@ -13,12 +17,12 @@ var config = exports.config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--text-negative);", ":var(--text-primary);", ":var(--text-negative);"], _CodeInput.codeInputTokens.captionColor, _CodeInput.codeInputTokens.captionColorError, _CodeInput.codeInputTokens.codeColor, _CodeInput.codeInputTokens.codeColorError)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--text-negative);", ":var(--text-primary);", ":var(--text-negative);", ";"], _CodeInput.codeInputTokens.captionColor, _CodeInput.codeInputTokens.captionColorError, _CodeInput.codeInputTokens.codeColor, _CodeInput.codeInputTokens.codeColorError, /*#__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'))
     },
     size: {
-      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":0.75rem;", ":1rem;", ":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.largeScreenFontSize, _CodeInput.codeInputTokens.largeScreenLineHeight, _CodeInput.codeInputTokens.mediumScreenFontSize, _CodeInput.codeInputTokens.mediumScreenLineHeight, _CodeInput.codeInputTokens.smallScreenFontSize, _CodeInput.codeInputTokens.smallScreenLineHeight, _CodeInput.codeInputTokens.captionFontFamily, _CodeInput.codeInputTokens.captionFontSize, _CodeInput.codeInputTokens.captionFontStyle, _CodeInput.codeInputTokens.captionFontWeight, _CodeInput.codeInputTokens.captionLetterSpacing, _CodeInput.codeInputTokens.captionLineHeight, _CodeInput.codeInputTokens.codeItemLargeWidth, _CodeInput.codeInputTokens.codeItemLargeHeight, _CodeInput.codeInputTokens.codeItemMediumWidth, _CodeInput.codeInputTokens.codeItemMediumHeight, _CodeInput.codeInputTokens.codeItemSmallWidth, _CodeInput.codeInputTokens.codeItemSmallHeight, _CodeInput.codeInputTokens.codeItemCircleBorderWidth, _CodeInput.codeInputTokens.codeItemCircleSize),
-      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.75rem;", ":0.5rem;", ":1rem;", ":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.largeScreenFontSize, _CodeInput.codeInputTokens.largeScreenLineHeight, _CodeInput.codeInputTokens.mediumScreenFontSize, _CodeInput.codeInputTokens.mediumScreenLineHeight, _CodeInput.codeInputTokens.smallScreenFontSize, _CodeInput.codeInputTokens.smallScreenLineHeight, _CodeInput.codeInputTokens.captionFontFamily, _CodeInput.codeInputTokens.captionFontSize, _CodeInput.codeInputTokens.captionFontStyle, _CodeInput.codeInputTokens.captionFontWeight, _CodeInput.codeInputTokens.captionLetterSpacing, _CodeInput.codeInputTokens.captionLineHeight, _CodeInput.codeInputTokens.codeItemLargeWidth, _CodeInput.codeInputTokens.codeItemLargeHeight, _CodeInput.codeInputTokens.codeItemMediumWidth, _CodeInput.codeInputTokens.codeItemMediumHeight, _CodeInput.codeInputTokens.codeItemSmallWidth, _CodeInput.codeInputTokens.codeItemSmallHeight, _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.largeScreenFontSize, _CodeInput.codeInputTokens.largeScreenLineHeight, _CodeInput.codeInputTokens.mediumScreenFontSize, _CodeInput.codeInputTokens.mediumScreenLineHeight, _CodeInput.codeInputTokens.smallScreenFontSize, _CodeInput.codeInputTokens.smallScreenLineHeight, _CodeInput.codeInputTokens.captionFontFamily, _CodeInput.codeInputTokens.captionFontSize, _CodeInput.codeInputTokens.captionFontStyle, _CodeInput.codeInputTokens.captionFontWeight, _CodeInput.codeInputTokens.captionLetterSpacing, _CodeInput.codeInputTokens.captionLineHeight, _CodeInput.codeInputTokens.codeItemLargeWidth, _CodeInput.codeInputTokens.codeItemLargeHeight, _CodeInput.codeInputTokens.codeItemMediumWidth, _CodeInput.codeInputTokens.codeItemMediumHeight, _CodeInput.codeInputTokens.codeItemSmallWidth, _CodeInput.codeInputTokens.codeItemSmallHeight, _CodeInput.codeInputTokens.codeItemCircleBorderWidth, _CodeInput.codeInputTokens.codeItemCircleSize)
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":0.75rem;", ":1rem;", ":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;", ":1rem;", ":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)
     },
     disabled: {
       "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _CodeInput.codeInputTokens.disabledOpacity)

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

@@ -6,6 +6,10 @@ 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',
@@ -13,12 +17,12 @@ var config = exports.config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--text-negative);", ":var(--text-primary);", ":var(--text-negative);"], _CodeInput.codeInputTokens.captionColor, _CodeInput.codeInputTokens.captionColorError, _CodeInput.codeInputTokens.codeColor, _CodeInput.codeInputTokens.codeColorError)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--text-negative);", ":var(--text-primary);", ":var(--text-negative);", ";"], _CodeInput.codeInputTokens.captionColor, _CodeInput.codeInputTokens.captionColorError, _CodeInput.codeInputTokens.codeColor, _CodeInput.codeInputTokens.codeColorError, /*#__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'))
     },
     size: {
-      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":0.75rem;", ":1rem;", ":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.largeScreenFontSize, _CodeInput.codeInputTokens.largeScreenLineHeight, _CodeInput.codeInputTokens.mediumScreenFontSize, _CodeInput.codeInputTokens.mediumScreenLineHeight, _CodeInput.codeInputTokens.smallScreenFontSize, _CodeInput.codeInputTokens.smallScreenLineHeight, _CodeInput.codeInputTokens.captionFontFamily, _CodeInput.codeInputTokens.captionFontSize, _CodeInput.codeInputTokens.captionFontStyle, _CodeInput.codeInputTokens.captionFontWeight, _CodeInput.codeInputTokens.captionLetterSpacing, _CodeInput.codeInputTokens.captionLineHeight, _CodeInput.codeInputTokens.codeItemLargeWidth, _CodeInput.codeInputTokens.codeItemLargeHeight, _CodeInput.codeInputTokens.codeItemMediumWidth, _CodeInput.codeInputTokens.codeItemMediumHeight, _CodeInput.codeInputTokens.codeItemSmallWidth, _CodeInput.codeInputTokens.codeItemSmallHeight, _CodeInput.codeInputTokens.codeItemCircleBorderWidth, _CodeInput.codeInputTokens.codeItemCircleSize),
-      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.75rem;", ":0.5rem;", ":1rem;", ":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.09375rem;", ":1rem;"], _CodeInput.codeInputTokens.captionGap, _CodeInput.codeInputTokens.codeItemsGap, _CodeInput.codeInputTokens.separatorWidth, _CodeInput.codeInputTokens.fontFamily, _CodeInput.codeInputTokens.fontStyle, _CodeInput.codeInputTokens.fontWeight, _CodeInput.codeInputTokens.letterSpacing, _CodeInput.codeInputTokens.largeScreenFontSize, _CodeInput.codeInputTokens.largeScreenLineHeight, _CodeInput.codeInputTokens.mediumScreenFontSize, _CodeInput.codeInputTokens.mediumScreenLineHeight, _CodeInput.codeInputTokens.smallScreenFontSize, _CodeInput.codeInputTokens.smallScreenLineHeight, _CodeInput.codeInputTokens.captionFontFamily, _CodeInput.codeInputTokens.captionFontSize, _CodeInput.codeInputTokens.captionFontStyle, _CodeInput.codeInputTokens.captionFontWeight, _CodeInput.codeInputTokens.captionLetterSpacing, _CodeInput.codeInputTokens.captionLineHeight, _CodeInput.codeInputTokens.codeItemLargeWidth, _CodeInput.codeInputTokens.codeItemLargeHeight, _CodeInput.codeInputTokens.codeItemMediumWidth, _CodeInput.codeInputTokens.codeItemMediumHeight, _CodeInput.codeInputTokens.codeItemSmallWidth, _CodeInput.codeInputTokens.codeItemSmallHeight, _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.0625rem;", ":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.largeScreenFontSize, _CodeInput.codeInputTokens.largeScreenLineHeight, _CodeInput.codeInputTokens.mediumScreenFontSize, _CodeInput.codeInputTokens.mediumScreenLineHeight, _CodeInput.codeInputTokens.smallScreenFontSize, _CodeInput.codeInputTokens.smallScreenLineHeight, _CodeInput.codeInputTokens.captionFontFamily, _CodeInput.codeInputTokens.captionFontSize, _CodeInput.codeInputTokens.captionFontStyle, _CodeInput.codeInputTokens.captionFontWeight, _CodeInput.codeInputTokens.captionLetterSpacing, _CodeInput.codeInputTokens.captionLineHeight, _CodeInput.codeInputTokens.codeItemLargeWidth, _CodeInput.codeInputTokens.codeItemLargeHeight, _CodeInput.codeInputTokens.codeItemMediumWidth, _CodeInput.codeInputTokens.codeItemMediumHeight, _CodeInput.codeInputTokens.codeItemSmallWidth, _CodeInput.codeInputTokens.codeItemSmallHeight, _CodeInput.codeInputTokens.codeItemCircleBorderWidth, _CodeInput.codeInputTokens.codeItemCircleSize)
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":0.75rem;", ":1rem;", ":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;", ":1rem;", ":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)
     },
     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 { getCodeValue, getFieldPattern, getPlaceholderValue, handleCodeError, handleItemError } from "./utils";
+import { getCodeInputViewClass, 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,7 @@ export var codeInputRoot = function codeInputRoot(Root) {
     var fieldPattern = getFieldPattern(allowedSymbols);
     var placeholderValue = getPlaceholderValue(codeLength, placeholder);
     var parts = codeLength === 6 ? 2 : 1;
-    var screenClass = classes["".concat(screen, "Screen")];
+    var viewClass = getCodeInputViewClass(view || 'default');
     var widthValue = width ? getSizeValueFromProp(width, 'rem') : undefined;
     var getLastActiveIndex = function getLastActiveIndex() {
       if (code.length && code.length < codeLength) {
@@ -226,7 +226,7 @@ export var codeInputRoot = function codeInputRoot(Root) {
       disabled: disabled,
       screen: screen,
       onClick: handleClick,
-      className: cls(className, _defineProperty({}, classes.captionAlignLeft, captionAlign === 'left'))
+      className: cls(className, viewClass, _defineProperty({}, classes.captionAlignLeft, captionAlign === 'left'))
     }, rest), /*#__PURE__*/React.createElement(CodeWrapper, {
       ref: inputContainerRef
     }, _toConsumableArray(Array(parts)).map(function (_, partIndex) {
@@ -237,8 +237,7 @@ export var codeInputRoot = function codeInputRoot(Root) {
       }, _toConsumableArray(Array(codeLength / parts)).map(function (_, i) {
         var inputCorrectIndex = i + codeLength / parts * partIndex;
         return /*#__PURE__*/React.createElement(ItemWrapper, {
-          key: partIndex + i + partIndex * i,
-          className: screenClass
+          key: partIndex + i + partIndex * i
         }, /*#__PURE__*/React.createElement(ItemInput, _extends({
           ref: function ref(element) {
             inputRefs.current[inputCorrectIndex] = element;

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

@@ -11,33 +11,54 @@ export var classes = {
   hoverEnabled: 'codeinput-item-hover-enabled',
   segmented: 'codeinput-shape-segmented',
   "default": 'codeinput-shape-default',
-  largeScreen: 'codeinput-large-screen',
-  mediumScreen: 'codeinput-medium-screen',
-  smallScreen: 'codeinput-small-screen',
+  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 = {
+  itemWidth: '--private-codeinput-item-width',
+  itemHeight: '--private-codeinput-item-hieght',
+  fontSize: '--private-codeinput-font-size',
+  lineHeight: '--private-codeinput-line-height'
+};
 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',
-  codeItemLargeWidth: '--plasma-codeinput-item-large-width',
-  codeItemLargeHeight: '--plasma-codeinput-item-large-height',
-  codeItemMediumWidth: '--plasma-codeinput-item-medium-width',
-  codeItemMediumHeight: '--plasma-codeinput-item-medium-height',
-  codeItemSmallWidth: '--plasma-codeinput-item-small-width',
-  codeItemSmallHeight: '--plasma-codeinput-item-small-height',
+  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',
   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',
-  largeScreenFontSize: '--plasma-codeinput-large-screen-font-size',
-  largeScreenLineHeight: '--plasma-codeinput-large-screen-line-height',
-  mediumScreenFontSize: '--plasma-codeinput-medium-screen-font-size',
-  mediumScreenLineHeight: '--plasma-codeinput-medium-screen-line-height',
-  smallScreenFontSize: '--plasma-codeinput-small-screen-font-size',
-  smallScreenLineHeight: '--plasma-codeinput-small-screen-line-height',
+  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',
   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,2 +1,3 @@
 export { codeInputRoot, codeInputConfig } from "./CodeInput";
-export { tokens as codeInputTokens, classes as codeInputClasses } from "./CodeInput.tokens";
+export { tokens as codeInputTokens, classes as codeInputClasses } from "./CodeInput.tokens";
+export { getCodeInputView } from "./utils";

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

@@ -0,0 +1,39 @@
+import { privateTokens, tokens } from "../CodeInput.tokens";
+export var getCodeInputViewClass = function getCodeInputViewClass(view) {
+  return "codeinput-".concat(view, "-view");
+};
+var tokenPrefix = '--plasma-codeinput-';
+export var gridSizes = ['smallXXS', 'smallXS', 'smallS', 'smallM', 'smallL', 'smallXL', 'smallXXL', 'mediumXXS', 'mediumXS', 'mediumS', 'mediumM', 'mediumL', 'mediumXL', 'mediumXXL', 'largeXXS', 'largeXS', 'largeS', 'largeM', 'largeL', 'largeXL', 'largeXXL'];
+
+/**
+ * Генерирует набор медиа-запросов под различную ширину вьюпорта
+ *
+ * @param {GridToken} cssTokens - объект view с набором токенов ширины вьюпорта
+ * @return {string} сгенерированный набор медиа-запросов
+ */
+var gridMediaQueryTemplate = function gridMediaQueryTemplate(breakpoints) {
+  return gridSizes.map(function (size) {
+    if (!String(breakpoints["".concat(tokenPrefix).concat(size, "-min-width")])) {
+      return;
+    }
+    var minWidth = breakpoints["".concat(tokenPrefix).concat(size, "-min-width")];
+    var itemWidth = tokens["".concat(size, "CodeItemWidth")];
+    var itemHeight = tokens["".concat(size, "CodeItemHeight")];
+    var fontSize = tokens["".concat(size, "FontSize")];
+    var lineHeight = tokens["".concat(size, "LineHeight")];
+    return "\n                @media (min-width: ".concat(minWidth, ") {\n                    ").concat(privateTokens.fontSize, ": var(").concat(fontSize, ");\n                    ").concat(privateTokens.lineHeight, ": var(").concat(lineHeight, ");\n                    ").concat(privateTokens.itemWidth, ": var(").concat(itemWidth, ");\n                    ").concat(privateTokens.itemHeight, ": var(").concat(itemHeight, ");\n                }\n            ");
+  }).filter(function (style) {
+    return style;
+  }).join('\n');
+};
+
+/**
+ * Генерирует строку со стилями для обертки Grid и набором медиа-запросов
+ *
+ * @param {BreakpointToken} breakponts - объект view с набором токенов ширины вьюпорта
+ * @param {string} viewName - название view из конфига
+ * @return {string} стили для обертки Grid
+ */
+export var getCodeInputView = function getCodeInputView(breakponts, viewName) {
+  return "\n        &.".concat(getCodeInputViewClass(viewName), " {\n            ").concat(gridMediaQueryTemplate(breakponts), "\n        }\n    ");
+};

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

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

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

@@ -0,0 +1 @@
+export {};

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

@@ -1,4 +1,4 @@
 import { css } from 'styled-components';
 import { CaptionWrapper, CodeGroup, CodeWrapper, ItemInput } from "../../CodeInput.styles";
-import { tokens, classes } from "../../CodeInput.tokens";
-export var base = /*#__PURE__*/css(["gap:var(", ");", ",", "{gap:var(", ");}&& .", "{", "{width:var(", ");height:var(", ");font-size:var(", ");line-height:var(", ");}}&& .", "{", "{width:var(", ");height:var(", ");font-size:var(", ");line-height:var(", ");}}&& .", "{", "{width:var(", ");height:var(", ");font-size:var(", ");line-height:var(", ");}}", "{font-family:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing: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, classes.largeScreen, ItemInput, tokens.codeItemLargeWidth, tokens.codeItemLargeHeight, tokens.largeScreenFontSize, tokens.largeScreenLineHeight, classes.mediumScreen, ItemInput, tokens.codeItemMediumWidth, tokens.codeItemMediumHeight, tokens.mediumScreenFontSize, tokens.mediumScreenLineHeight, classes.smallScreen, ItemInput, tokens.codeItemSmallWidth, tokens.codeItemSmallHeight, tokens.smallScreenFontSize, tokens.smallScreenLineHeight, ItemInput, tokens.fontFamily, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, CaptionWrapper, tokens.captionFontFamily, tokens.captionFontSize, tokens.captionFontStyle, tokens.captionFontWeight, tokens.captionLetterSpacing, tokens.captionLineHeight);
+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);

package/styled-components/es/examples/plasma_b2c/components/CodeInput/CodeInput.config.js

@@ -1,5 +1,9 @@
+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); }
 import { css } from 'styled-components';
-import { codeInputTokens as tokens } from "../../../../components/CodeInput";
+import { codeInputTokens as tokens, getCodeInputView } from "../../../../components/CodeInput";
 export var config = {
   defaults: {
     view: 'default',
@@ -7,12 +11,12 @@ export var config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--text-negative);", ":var(--text-primary);", ":var(--text-negative);"], tokens.captionColor, tokens.captionColorError, tokens.codeColor, tokens.codeColorError)
+      "default": /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--text-negative);", ":var(--text-primary);", ":var(--text-negative);", ";"], tokens.captionColor, tokens.captionColorError, tokens.codeColor, tokens.codeColorError, /*#__PURE__*/getCodeInputView(/*#__PURE__*/_defineProperty(/*#__PURE__*/_defineProperty(/*#__PURE__*/_defineProperty(/*#__PURE__*/_defineProperty(/*#__PURE__*/_defineProperty({}, tokens.smallMMinWidth, 0), tokens.mediumSMinWidth, '35rem'), tokens.mediumMMinWidth, '49.125rem'), tokens.largeSMinWidth, '60rem'), tokens.largeMMinWidth, '75rem'), 'default'))
     },
     size: {
-      l: /*#__PURE__*/css(["", ":2.5rem;", ":0.75rem;", ":1rem;", ":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;"], tokens.captionGap, tokens.codeItemsGap, tokens.separatorWidth, tokens.fontFamily, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.largeScreenFontSize, tokens.largeScreenLineHeight, tokens.mediumScreenFontSize, tokens.mediumScreenLineHeight, tokens.smallScreenFontSize, tokens.smallScreenLineHeight, tokens.captionFontFamily, tokens.captionFontSize, tokens.captionFontStyle, tokens.captionFontWeight, tokens.captionLetterSpacing, tokens.captionLineHeight, tokens.codeItemLargeWidth, tokens.codeItemLargeHeight, tokens.codeItemMediumWidth, tokens.codeItemMediumHeight, tokens.codeItemSmallWidth, tokens.codeItemSmallHeight, tokens.codeItemCircleBorderWidth, tokens.codeItemCircleSize),
-      m: /*#__PURE__*/css(["", ":1.75rem;", ":0.5rem;", ":1rem;", ":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;"], tokens.captionGap, tokens.codeItemsGap, tokens.separatorWidth, tokens.fontFamily, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.largeScreenFontSize, tokens.largeScreenLineHeight, tokens.mediumScreenFontSize, tokens.mediumScreenLineHeight, tokens.smallScreenFontSize, tokens.smallScreenLineHeight, tokens.captionFontFamily, tokens.captionFontSize, tokens.captionFontStyle, tokens.captionFontWeight, tokens.captionLetterSpacing, tokens.captionLineHeight, tokens.codeItemLargeWidth, tokens.codeItemLargeHeight, tokens.codeItemMediumWidth, tokens.codeItemMediumHeight, tokens.codeItemSmallWidth, tokens.codeItemSmallHeight, tokens.codeItemCircleBorderWidth, tokens.codeItemCircleSize),
-      s: /*#__PURE__*/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;"], tokens.captionGap, tokens.codeItemsGap, tokens.separatorWidth, tokens.fontFamily, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.largeScreenFontSize, tokens.largeScreenLineHeight, tokens.mediumScreenFontSize, tokens.mediumScreenLineHeight, tokens.smallScreenFontSize, tokens.smallScreenLineHeight, tokens.captionFontFamily, tokens.captionFontSize, tokens.captionFontStyle, tokens.captionFontWeight, tokens.captionLetterSpacing, tokens.captionLineHeight, tokens.codeItemLargeWidth, tokens.codeItemLargeHeight, tokens.codeItemMediumWidth, tokens.codeItemMediumHeight, tokens.codeItemSmallWidth, tokens.codeItemSmallHeight, tokens.codeItemCircleBorderWidth, tokens.codeItemCircleSize)
+      l: /*#__PURE__*/css(["", ":2.5rem;", ":0.75rem;", ":1rem;", ":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;"], tokens.captionGap, tokens.codeItemsGap, tokens.separatorWidth, tokens.fontFamily, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.largeSFontSize, tokens.largeSLineHeight, tokens.largeMFontSize, tokens.largeMLineHeight, tokens.mediumSFontSize, tokens.mediumSLineHeight, tokens.mediumMFontSize, tokens.mediumMLineHeight, tokens.smallMFontSize, tokens.smallMLineHeight, tokens.captionFontFamily, tokens.captionFontSize, tokens.captionFontStyle, tokens.captionFontWeight, tokens.captionLetterSpacing, tokens.captionLineHeight, tokens.largeMCodeItemWidth, tokens.largeMCodeItemHeight, tokens.largeSCodeItemWidth, tokens.largeSCodeItemHeight, tokens.mediumMCodeItemWidth, tokens.mediumMCodeItemHeight, tokens.mediumSCodeItemWidth, tokens.mediumSCodeItemHeight, tokens.smallMCodeItemWidth, tokens.smallMCodeItemHeight, tokens.codeItemCircleBorderWidth, tokens.codeItemCircleSize),
+      m: /*#__PURE__*/css(["", ":1.75rem;", ":0.5rem;", ":1rem;", ":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;"], tokens.captionGap, tokens.codeItemsGap, tokens.separatorWidth, tokens.fontFamily, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.largeMFontSize, tokens.largeMLineHeight, tokens.largeSFontSize, tokens.largeSLineHeight, tokens.mediumSFontSize, tokens.mediumSLineHeight, tokens.mediumMFontSize, tokens.mediumMLineHeight, tokens.smallMFontSize, tokens.smallMLineHeight, tokens.captionFontFamily, tokens.captionFontSize, tokens.captionFontStyle, tokens.captionFontWeight, tokens.captionLetterSpacing, tokens.captionLineHeight, tokens.largeMCodeItemWidth, tokens.largeMCodeItemHeight, tokens.largeSCodeItemWidth, tokens.largeSCodeItemHeight, tokens.mediumMCodeItemWidth, tokens.mediumMCodeItemHeight, tokens.mediumSCodeItemWidth, tokens.mediumSCodeItemHeight, tokens.smallMCodeItemWidth, tokens.smallMCodeItemHeight, tokens.codeItemCircleBorderWidth, tokens.codeItemCircleSize),
+      s: /*#__PURE__*/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;"], tokens.captionGap, tokens.codeItemsGap, tokens.separatorWidth, tokens.fontFamily, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.largeMFontSize, tokens.largeMLineHeight, tokens.largeSFontSize, tokens.largeSLineHeight, tokens.mediumMFontSize, tokens.mediumMLineHeight, tokens.mediumSFontSize, tokens.mediumSLineHeight, tokens.smallMFontSize, tokens.smallMLineHeight, tokens.captionFontFamily, tokens.captionFontSize, tokens.captionFontStyle, tokens.captionFontWeight, tokens.captionLetterSpacing, tokens.captionLineHeight, tokens.largeMCodeItemWidth, tokens.largeMCodeItemHeight, tokens.largeSCodeItemWidth, tokens.largeSCodeItemHeight, tokens.mediumMCodeItemWidth, tokens.mediumMCodeItemHeight, tokens.mediumSCodeItemWidth, tokens.mediumSCodeItemHeight, tokens.smallMCodeItemWidth, tokens.smallMCodeItemHeight, tokens.codeItemCircleBorderWidth, tokens.codeItemCircleSize)
     },
     disabled: {
       "true": /*#__PURE__*/css(["", ":0.4;"], tokens.disabledOpacity)