@salutejs/plasma-new-hope 0.326.0-canary.1973.15344107057.0 → 0.326.0-canary.1973.15492799823.0

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

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

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

@@ -61,6 +61,13 @@ var tokens = exports.tokens = {
   checkboxTriggerBorderWidth: '--plasma-select-checkbox-trigger-border-width',
   indicatorSize: '--plasma-select-indicator-size',
   targetHeight: '--plasma-select-target-height',
+  dividerMarginTop: '--plasma-select-divider-margin-top',
+  dividerMarginTopTight: '--plasma-select-divider-margin-top-tight',
+  dividerMarginRight: '--plasma-select-divider-margin-right',
+  dividerMarginBottom: '--plasma-select-divider-margin-bottom',
+  dividerMarginBottomTight: '--plasma-select-divider-margin-bottom-tight',
+  dividerMarginLeft: '--plasma-select-divider-margin-left',
+  dividerColor: '--plasma-select-divider-color',
   // Токены для Button
   buttonColor: '--plasma-select-button-color',
   buttonColorHover: '--plasma-select-button-color-hover',
@@ -234,7 +241,7 @@ var constants = exports.constants = {
   focusSize: '0.0625rem',
   background: '--surface-solid-card',
   boxShadow: '0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04)',
-  itemBackground: '--plasma-colors-transparent',
+  itemBackground: '--surface-clear',
   textfieldTargetColor: '--text-primary',
   textfieldOuterLabelColor: '--text-primary',
   textfieldInnerLabelColor: '--text-secondary',
@@ -247,5 +254,5 @@ var constants = exports.constants = {
   fontLetterSpacing: '--plasma-typo-body-xs-letter-spacing',
   fontLineHeight: '--plasma-typo-body-xs-line-height',
   cellTitleColor: '--text-primary',
-  cellBackgroundColor: '--plasma-colors-transparent'
+  cellBackgroundColor: '--surface-clear'
 };

package/styled-components/cjs/components/Select/hooks/useKeyboardNavigation.js

@@ -148,7 +148,7 @@ var useKeyNavigation = exports.useKeyNavigation = function useKeyNavigation(_ref
             });
             break;
           }
-          if (!_currentItem || _currentItem !== null && _currentItem !== void 0 && _currentItem.disabled) {
+          if (!_currentItem || _currentItem !== null && _currentItem !== void 0 && _currentItem.disabled || _currentItem !== null && _currentItem !== void 0 && _currentItem.isDisabled) {
             break;
           }
           handlePressDown(_currentItem);
@@ -158,7 +158,7 @@ var useKeyNavigation = exports.useKeyNavigation = function useKeyNavigation(_ref
         {
           event.preventDefault();
           var _currentItem2 = getItemByFocused(focusedPath, focusedToValueMap);
-          if (_currentItem2 !== null && _currentItem2 !== void 0 && _currentItem2.disabled) {
+          if (_currentItem2 !== null && _currentItem2 !== void 0 && _currentItem2.disabled || _currentItem2 !== null && _currentItem2 !== void 0 && _currentItem2.isDisabled) {
             break;
           }
           if (!path[0]) {

package/styled-components/cjs/components/Select/ui/Inner/Inner.js

@@ -42,7 +42,6 @@ var Inner = exports.Inner = function Inner(_ref) {
       placement: (item === null || item === void 0 ? void 0 : item.placement) || 'right',
       opened: isCurrentListOpen,
       onToggle: handleToggle,
-      offset: 2,
       target: /*#__PURE__*/_react["default"].createElement(_Item.Item, {
         item: item,
         path: path,
@@ -52,12 +51,13 @@ var Inner = exports.Inner = function Inner(_ref) {
         ariaExpanded: isCurrentListOpen,
         ariaLevel: nextLevel,
         ariaLabel: item.label
-      })
+      }),
+      isInner: true
+    }, /*#__PURE__*/_react["default"].createElement(_Select.ListWrapper, {
+      listWidth: listWidth
     }, /*#__PURE__*/_react["default"].createElement(_Select.Ul, {
       role: "group",
       id: listId,
-      isInnerUl: true,
-      listWidth: listWidth,
       virtual: false
     }, (_item$items = item.items) === null || _item$items === void 0 ? void 0 : _item$items.map(function (innerItem, innerIndex) {
       return /*#__PURE__*/_react["default"].createElement(Inner, {
@@ -69,7 +69,7 @@ var Inner = exports.Inner = function Inner(_ref) {
         index: innerIndex,
         listWidth: listWidth
       });
-    })));
+    }))));
   }
   return /*#__PURE__*/_react["default"].createElement(_Item.Item, {
     item: item,

package/styled-components/cjs/components/Select/ui/Inner/ui/Item/Item.styles.js

@@ -79,16 +79,16 @@ var StyledText = exports.StyledText = /*#__PURE__*/_styledComponents["default"].
 })(["", ";flex:1;"], /*#__PURE__*/(0, _mixins.applyEllipsis)());
 var Wrapper = exports.Wrapper = /*#__PURE__*/_styledComponents["default"].li.withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-9"
-})(["display:flex;align-items:center;min-height:var(", ");margin:0 calc(0.125rem + var(", ",0rem));box-sizing:content-box;padding:", ";font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");background-color:var(", ");color:var(--text-primary);border-radius:calc(var(", ") - 0.125rem - var(", ",0rem));user-select:none;background-clip:padding-box;&:hover:not(.", "){cursor:pointer;background-color:var(", ");}&.", "{background-color:var(", ");}&.", "{opacity:var(", ");color:var(", ");cursor:not-allowed;}:focus{outline:none;}", ";"], _Select.tokens.itemHeight, _Select.tokens.dropdownBorderWidth, function (_ref8) {
+})(["display:flex;align-items:center;min-height:var(", ");margin:0;box-sizing:content-box;padding:", ";font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");background-color:var(", ");color:var(--text-primary);border-radius:calc(var(", ") - 0.125rem - var(", ",0rem));user-select:none;background-clip:padding-box;&:hover:not(.", "){cursor:pointer;background-color:var(", ");}&.", "{background-color:var(", ");}&.", "{opacity:var(", ");color:var(", ");cursor:not-allowed;}:focus{outline:none;}", ";"], _Select.tokens.itemHeight, function (_ref8) {
   var variant = _ref8.variant;
   return "var(".concat(variant === 'tight' ? _Select.tokens.itemPaddingTight : _Select.tokens.itemPadding, ")");
 }, _Select.tokens.fontFamily, _Select.tokens.fontSize, _Select.tokens.fontStyle, _Select.tokens.fontWeight, _Select.tokens.fontLetterSpacing, _Select.tokens.fontLineHeight, _Select.constants.itemBackground, _Select.tokens.borderRadius, _Select.tokens.dropdownBorderWidth, _Select.classes.dropdownItemIsDisabled, _Select.tokens.itemBackgroundHover, _Select.classes.dropdownItemIsActive, _Select.tokens.itemBackgroundHover, _Select.classes.dropdownItemIsDisabled, _Select.tokens.itemDisabledOpacity, _Select.tokens.itemDisabledColor, /*#__PURE__*/(0, _mixins.addFocus)({
-  outlineSize: '0.0625rem',
+  outlineSize: '0',
   outlineOffset: '0',
   outlineColor: /*#__PURE__*/"var(".concat(_Select.constants.focusColor, ")"),
   outlineRadius: /*#__PURE__*/"calc(var(".concat(_Select.tokens.borderRadius, ") - 0.125rem - var(").concat(_Select.tokens.dropdownBorderWidth, ", 0rem))"),
   hasTransition: false,
-  customFocusRules: /*#__PURE__*/"\n            &.".concat(_Select.classes.dropdownItemIsFocused, ":before {\n                outline: none;\n                box-shadow: 0 0 0 0.0625rem var(").concat(_Select.constants.focusColor, ");\n            }\n        ")
+  customFocusRules: /*#__PURE__*/"\n            &.".concat(_Select.classes.dropdownItemIsFocused, ":before {\n                outline: none;\n                box-shadow: inset 0 0 0 0.0625rem var(").concat(_Select.constants.focusColor, ");\n            }\n        ")
 }));
 var StyledCheckboxWrapper = exports.StyledCheckboxWrapper = /*#__PURE__*/_styledComponents["default"].span.withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-10"

package/styled-components/cjs/components/Select/ui/SelectAll/SelectAll.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectAll = void 0;
+var _react = /*#__PURE__*/_interopRequireDefault(/*#__PURE__*/require("react"));
+var _Item = /*#__PURE__*/require("../Inner/ui/Item/Item.styles");
+var _SelectAll = /*#__PURE__*/require("./SelectAll.styles");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var SelectAll = exports.SelectAll = function SelectAll(_ref) {
+  var variant = _ref.variant,
+    selectAllOptions = _ref.selectAllOptions;
+  return /*#__PURE__*/_react["default"].createElement(_SelectAll.Wrapper, {
+    variant: variant,
+    onClick: selectAllOptions === null || selectAllOptions === void 0 ? void 0 : selectAllOptions.onClick,
+    sticky: selectAllOptions === null || selectAllOptions === void 0 ? void 0 : selectAllOptions.sticky
+  }, /*#__PURE__*/_react["default"].createElement(_Item.Wrapper, {
+    variant: variant
+  }, /*#__PURE__*/_react["default"].createElement(_Item.IconWrapper, {
+    variant: variant
+  }, /*#__PURE__*/_react["default"].createElement(_Item.StyledCheckboxWrapper, {
+    onClick: function onClick(e) {
+      return e.preventDefault();
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Item.StyledCheckbox, {
+    checked: selectAllOptions === null || selectAllOptions === void 0 ? void 0 : selectAllOptions.checked,
+    indeterminate: selectAllOptions === null || selectAllOptions === void 0 ? void 0 : selectAllOptions.indeterminate,
+    appearance: "default"
+  }))), /*#__PURE__*/_react["default"].createElement(_Item.StyledWrapper, null, /*#__PURE__*/_react["default"].createElement(_Item.StyledCell
+  // TODO: #1548
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  , {
+    title: /*#__PURE__*/_react["default"].createElement("span", null, (selectAllOptions === null || selectAllOptions === void 0 ? void 0 : selectAllOptions.label) || 'Выбрать всё')
+  }))), /*#__PURE__*/_react["default"].createElement(_SelectAll.DividerWrapper, null, /*#__PURE__*/_react["default"].createElement(_SelectAll.Divider, {
+    variant: variant
+  })));
+};

package/styled-components/cjs/components/Select/ui/SelectAll/SelectAll.styles.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = exports.DividerWrapper = exports.Divider = void 0;
+var _styledComponents = /*#__PURE__*/_interopRequireDefault(/*#__PURE__*/require("styled-components"));
+var _Select = /*#__PURE__*/require("../../Select.tokens");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var Wrapper = exports.Wrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-1f7l6yo-0"
+})(["position:", ";z-index:10;top:0;display:flex;flex-direction:column;background:var(", ");margin-bottom:", ";border-top-left-radius:calc(var(", ") - 0.125rem - var(", ",0rem));border-top-right-radius:calc(var(", ") - 0.125rem - var(", ",0rem));"], function (_ref) {
+  var sticky = _ref.sticky;
+  return sticky ? 'sticky' : 'static';
+}, _Select.constants.background, function (_ref2) {
+  var variant = _ref2.variant;
+  return "var(".concat(variant === 'tight' ? _Select.tokens.dividerMarginBottomTight : _Select.tokens.dividerMarginBottom, ")");
+}, _Select.tokens.borderRadius, _Select.tokens.dropdownBorderWidth, _Select.tokens.borderRadius, _Select.tokens.dropdownBorderWidth);
+var DividerWrapper = exports.DividerWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-1f7l6yo-1"
+})(["background:var(", ");"], _Select.constants.background);
+var Divider = exports.Divider = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-1f7l6yo-2"
+})(["height:0.0625rem;margin-top:", ";margin-right:var(", ");margin-left:var(", ");background:var(", ");"], function (_ref3) {
+  var variant = _ref3.variant;
+  return "var(".concat(variant === 'tight' ? _Select.tokens.dividerMarginTopTight : _Select.tokens.dividerMarginTop, ")");
+}, _Select.tokens.dividerMarginRight, _Select.tokens.dividerMarginLeft, _Select.tokens.dividerColor);

package/styled-components/cjs/components/Select/ui/index.js

@@ -35,4 +35,15 @@ Object.keys(_VirtualList).forEach(function (key) {
       return _VirtualList[key];
     }
   });
+});
+var _SelectAll = /*#__PURE__*/require("./SelectAll/SelectAll");
+Object.keys(_SelectAll).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SelectAll[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _SelectAll[key];
+    }
+  });
 });

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

@@ -14,7 +14,7 @@ var config = exports.config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-negative);", ":var(--text-primary);", ":var(--text-negative);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-primary-hover);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-negative);"], _CodeField.codeFieldTokens.caretColor, _CodeField.codeFieldTokens.captionColor, _CodeField.codeFieldTokens.captionColorError, _CodeField.codeFieldTokens.codeColor, _CodeField.codeFieldTokens.codeColorError, _CodeField.codeFieldTokens.backgroundColor, _CodeField.codeFieldTokens.backgroundColorHover, _CodeField.codeFieldTokens.backgroundColorFocus, _CodeField.codeFieldTokens.backgroundErrorColor)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-negative);", ":var(--text-primary);", ":var(--text-negative);", ":var(--outline-accent);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-primary-hover);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-negative);"], _CodeField.codeFieldTokens.caretColor, _CodeField.codeFieldTokens.captionColor, _CodeField.codeFieldTokens.captionColorError, _CodeField.codeFieldTokens.codeColor, _CodeField.codeFieldTokens.codeColorError, _CodeField.codeFieldTokens.borderColorFocus, _CodeField.codeFieldTokens.backgroundColor, _CodeField.codeFieldTokens.backgroundColorHover, _CodeField.codeFieldTokens.backgroundColorFocus, _CodeField.codeFieldTokens.backgroundErrorColor)
     },
     size: {
       l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.875rem;", ":0.125rem;", ":0.25rem;", ":2.75rem;", ":3.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.875rem;", ":0.375rem;", ":0.875rem;"], _CodeField.codeFieldTokens.captionGap, _CodeField.codeFieldTokens.codeItemsGap, _CodeField.codeFieldTokens.separatorWidth, _CodeField.codeFieldTokens.codeItemWidth, _CodeField.codeFieldTokens.codeItemHeight, _CodeField.codeFieldTokens.fontFamily, _CodeField.codeFieldTokens.fontSize, _CodeField.codeFieldTokens.fontStyle, _CodeField.codeFieldTokens.fontWeight, _CodeField.codeFieldTokens.letterSpacing, _CodeField.codeFieldTokens.lineHeight, _CodeField.codeFieldTokens.captionFontFamily, _CodeField.codeFieldTokens.captionFontSize, _CodeField.codeFieldTokens.captionFontStyle, _CodeField.codeFieldTokens.captionFontWeight, _CodeField.codeFieldTokens.captionLetterSpacing, _CodeField.codeFieldTokens.captionLineHeight, _CodeField.codeFieldTokens.borderRadius, _CodeField.codeFieldTokens.borderRadiusSegmented, _CodeField.codeFieldTokens.segmentedSideBorderRadius),

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);", ":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'))
     },
     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;", ":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)
     },
     disabled: {
       "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _CodeInput.codeInputTokens.disabledOpacity)

package/styled-components/cjs/examples/plasma_b2c/components/CodeInput/CodeInput.stories.tsx

@@ -34,12 +34,6 @@ const meta: Meta<typeof CodeInput> = {
                 type: 'inline-radio',
             },
         },
-        screen: {
-            options: ['large', 'medium', 'small'],
-            control: {
-                type: 'inline-radio',
-            },
-        },
         captionAlign: {
             options: captionAlignVariants,
             control: {
@@ -95,7 +89,6 @@ export const Default: StoryObj<StoryPropsDefault> = {
         caption: 'Caption',
         captionAlign: 'center',
         width: '',
-        screen: 'medium',
         isError: false,
         itemErrorBehavior: 'remove-symbol',
         codeErrorBehavior: 'remove-code',