@salutejs/plasma-new-hope 0.191.2-canary.1517.11801064973.0 → 0.192.0-canary.1539.11802074105.0

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

@@ -1,8 +1,6 @@
 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); }
 var _excluded = ["view", "size", "orientation", "contentAlign", "hasLine", "hasContent", "hasLoader", "items", "onChange", "current", "status"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 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); }
@@ -14,7 +12,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React, { forwardRef, useState, useEffect, useMemo } from 'react';
+import React, { forwardRef, useState, useEffect } from 'react';
 import cls from 'classnames';
 import { classes } from './Steps.tokens';
 import { StepItem } from './ui';
@@ -46,33 +44,19 @@ export var stepsRoot = function stepsRoot(Root) {
       _useState2 = _slicedToArray(_useState, 2),
       prevIndex = _useState2[0],
       setPrevIndex = _useState2[1];
+    var isUncontrolled = current !== undefined;
     var hasIndicator = items.some(function (item) {
       return item.indicator != null;
     });
     var isSimple = items.every(function (item) {
       return !item.title && !item.content;
     });
-    var innerItems = useMemo(function () {
-      var isUncontrolled = current !== undefined;
-      return items.map(function (item, index) {
-        var itemStatus = getItemStatus({
-          isUncontrolled: isUncontrolled,
-          current: current,
-          status: status,
-          index: index,
-          item: item
-        });
-        return _objectSpread(_objectSpread({}, item), {}, {
-          status: itemStatus
-        });
-      });
-    }, [status, current, items]);
     useEffect(function () {
       var calcPrevIndex = function calcPrevIndex() {
         if (current !== undefined) {
           setPrevIndex(current);
         } else {
-          var index = innerItems.findIndex(function (item) {
+          var index = items.findIndex(function (item) {
             return item.status === 'active';
           });
           setPrevIndex(index !== -1 ? index : undefined);
@@ -82,14 +66,21 @@ export var stepsRoot = function stepsRoot(Root) {
       return function () {
         calcPrevIndex();
       };
-    }, [current, innerItems]);
+    }, [current, items]);
     return /*#__PURE__*/React.createElement(Root, _extends({
       size: size,
       view: view,
       ref: outerRef,
       className: cls(_defineProperty(_defineProperty(_defineProperty({}, classes.verticalOrientation, orientation === 'vertical'), classes.simple, isSimple), classes.hasIndicator, hasIndicator))
-    }, rest), innerItems.map(function (item, index) {
-      var isActive = item.status === 'active';
+    }, rest), items.map(function (item, index) {
+      var itemStatus = getItemStatus({
+        isUncontrolled: isUncontrolled,
+        current: current,
+        status: status,
+        index: index,
+        item: item
+      });
+      var isActive = itemStatus === 'active';
       var itemContent = hasContent === 'active' && !isActive || hasContent === 'none' ? '' : item.content;
       var itemContentAlign = orientation === 'horizontal' ? contentAlign : 'left';
       var onClick = onChange ? function () {
@@ -101,14 +92,14 @@ export var stepsRoot = function stepsRoot(Root) {
         title: item.title,
         content: itemContent,
         indicator: item.indicator,
-        status: item.status,
+        status: itemStatus,
         size: size,
         orientation: orientation,
         contentAlign: itemContentAlign,
         hasLine: hasLine,
         hasLoader: hasLoader && isActive,
         onClick: onClick,
-        items: innerItems
+        items: items
       });
     }));
   });

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

@@ -1,3 +1,3 @@
 import { css } from 'styled-components';
 import { classes, tokens } from './Steps.tokens';
-export var base = /*#__PURE__*/css(["display:flex;flex-direction:row;&.", "{align-items:center;&:not(&.", "){&.", "{height:var(", ");}&:not(.", "){height:var(", ");}}&.", "{&.", "{width:var(", ");}&:not(.", "){width:var(", ");}}}&.", "{display:flex;flex-direction:column;justify-content:center;height:100%;}"], classes.simple, classes.verticalOrientation, classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.verticalOrientation, classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.verticalOrientation);
+export var base = /*#__PURE__*/css(["display:flex;flex-direction:row;&.", "{align-items:center;&:not(&.", "){&.", "{height:var(", ");}&:not(.", "){height:var(", ");}}&.", "{&.", "{width:var(", ");}&:not(.", "){width:var(", ");}}}&.", "{display:flex;flex-direction:column;justify-content:center;height:100%;&.", "{display:inline-flex;}}"], classes.simple, classes.verticalOrientation, classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.verticalOrientation, classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.verticalOrientation, classes.simple);

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

@@ -56,7 +56,6 @@ export var tokens = {
   inactiveTitleColor: '--plasma-step-item-inactive-title-color',
   inactiveTitleColorHover: '--plasma-step-item-inactive-title-color-hover',
   contentColor: '--plasma-step-item-content-color',
-  focusColor: '--plasma-step-item-focus-color',
   activeIndicatorBorder: '--plasma-step-item-active-indicator-border',
   activeIndicatorBorderHover: '--plasma-step-item-active-indicator-border-hover',
   activeIndicatorColor: '--plasma-step-item-active-indicator-color',

package/styled-components/es/components/Steps/ui/StepItem/StepItem.js

@@ -43,7 +43,6 @@ export var StepItem = function StepItem(_ref) {
   var prevItem = items[index - 1];
   var nextItem = items[index + 1];
   var isActive = status === 'active';
-  var isNextActive = (nextItem === null || nextItem === void 0 ? void 0 : nextItem.status) === 'active';
   var isInactive = status === 'inactive';
   var isPrevInactive = prevItem && !(prevItem !== null && prevItem !== void 0 && prevItem.status) || (prevItem === null || prevItem === void 0 ? void 0 : prevItem.status) === 'inactive';
   var isNextInactive = !(nextItem !== null && nextItem !== void 0 && nextItem.status) || (nextItem === null || nextItem === void 0 ? void 0 : nextItem.status) === 'inactive';
@@ -81,32 +80,8 @@ export var StepItem = function StepItem(_ref) {
       setIsHovered(false);
     }
   }, [isDisabled]);
-  if (isSimple) {
-    var _cls;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StepItemStyled, {
-      className: cls((_cls = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_cls, classes.simple, isSimple), classes.active, isActive), classes.hovered, isHovered && !isActive), classes.inactive, isInactive), classes.centered, isCentered), classes.disabled, isDisabled), classes.clickable, clickable && !isActive), classes.hasIndicator, hasIndicator), classes.transparentDivider, !hasLine), classes.verticalOrientation, isVertical), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_cls, "isFirst", isFirst), "isLast", isLast), "isPrevInactive", isPrevInactive), "isNextInactive", isNextInactive)))
-    }, /*#__PURE__*/React.createElement(BulletIndicatorWrapper, {
-      className: cls(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, classes.verticalOrientation, isVertical), classes.centered, isCentered), classes.simple, isSimple), classes.hasIndicator, hasIndicator)),
-      onClick: onClickHandler,
-      onFocus: onMouseOver,
-      onBlur: onMouseOut,
-      onMouseOver: onMouseOver,
-      onMouseOut: onMouseOut
-    }, hasLoader && /*#__PURE__*/React.createElement(SpinnerStyled, {
-      hasIndicator: hasIndicator
-    }), !hasLoader && /*#__PURE__*/React.createElement(BulletNode, {
-      className: cls(_defineProperty(_defineProperty({}, classes.active, isActive), classes.inactive, isInactive)),
-      disabled: isDisabled
-    }, typeof indicator === 'function' && indicator({
-      status: status,
-      item: item,
-      size: size
-    }), typeof indicator !== 'function' && indicator))), !isLast && /*#__PURE__*/React.createElement(StepItemDivider, {
-      className: cls(classes.simple, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, classes.verticalOrientation, isVertical), classes.transparentDivider, !hasLine), classes.active, isActive), classes.inactive, isInactive || isNextInactive), classes.disabled, isDisabled))
-    }));
-  }
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StepItemStyled, {
-    className: cls(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, classes.simple, isSimple), classes.active, isActive), classes.hovered, isHovered && !isActive), classes.inactive, isInactive), classes.centered, isCentered), classes.disabled, isDisabled), classes.clickable, clickable && !isActive), classes.hasIndicator, hasIndicator), classes.verticalOrientation, isVertical), "isNextActive", isNextActive))
+    className: cls(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, classes.simple, isSimple), classes.active, isActive), classes.hovered, isHovered && !isActive), classes.inactive, isInactive), classes.centered, isCentered), classes.disabled, isDisabled), classes.clickable, clickable && !isActive), classes.hasIndicator, hasIndicator), classes.verticalOrientation, isVertical))
   }, /*#__PURE__*/React.createElement(BulletIndicatorWrapper, {
     className: cls(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, classes.verticalOrientation, isVertical), classes.centered, isCentered), classes.simple, isSimple), classes.hasIndicator, hasIndicator)),
     onClick: onClickHandler,
@@ -116,21 +91,20 @@ export var StepItem = function StepItem(_ref) {
     onMouseOut: onMouseOut
   }, contentAlign === 'center' && !isSimple && /*#__PURE__*/React.createElement(StepItemDivider, {
     className: cls(_defineProperty(_defineProperty(_defineProperty({}, classes.simple, isSimple), classes.transparentDivider, !hasLine || isFirst), classes.inactive, isInactive || isPrevInactive))
-  }), isVertical && /*#__PURE__*/React.createElement(StepItemDivider, {
+  }), isVertical && (isSimple ? !isFirst : true) && /*#__PURE__*/React.createElement(StepItemDivider, {
     className: cls(classes.indentDivider, _defineProperty(_defineProperty(_defineProperty({}, classes.simple, isSimple), classes.transparentDivider, !hasLine || isFirst), classes.inactive, isInactive || isPrevInactive)),
     indentToken: indentToken
   }), hasLoader && /*#__PURE__*/React.createElement(SpinnerStyled, {
     hasIndicator: hasIndicator
   }), !hasLoader && /*#__PURE__*/React.createElement(BulletNode, {
-    className: cls(_defineProperty(_defineProperty({}, classes.active, isActive), classes.inactive, isInactive)),
-    disabled: isDisabled
+    className: cls(_defineProperty(_defineProperty({}, classes.active, isActive), classes.inactive, isInactive))
   }, typeof indicator === 'function' && indicator({
     status: status,
     item: item,
     size: size
-  }), typeof indicator !== 'function' && indicator), /*#__PURE__*/React.createElement(StepItemDivider, {
+  }), typeof indicator !== 'function' && indicator), !isSimple && /*#__PURE__*/React.createElement(StepItemDivider, {
     className: cls(_defineProperty(_defineProperty(_defineProperty({}, classes.simple, isSimple), classes.transparentDivider, !hasLine || isLast), classes.inactive, isInactive || isNextInactive))
-  })), /*#__PURE__*/React.createElement(StepItemContentWrapper, {
+  })), !isSimple && /*#__PURE__*/React.createElement(StepItemContentWrapper, {
     className: cls(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, classes.verticalOrientation, isVertical), classes.centered, isCentered), classes.active, isActive), classes.hasIndicator, hasIndicator))
   }, /*#__PURE__*/React.createElement(StepItemTitle, {
     onClick: onClickHandler,
@@ -138,5 +112,7 @@ export var StepItem = function StepItem(_ref) {
     onBlur: onMouseOut,
     onMouseOver: onMouseOver,
     onMouseOut: onMouseOut
-  }, title), content && /*#__PURE__*/React.createElement(StepItemContent, null, typeof content === 'function' ? content(status, index, items) : content))));
+  }, title), content && /*#__PURE__*/React.createElement(StepItemContent, null, typeof content === 'function' ? content(status, index, items) : content))), isSimple && !isLast && /*#__PURE__*/React.createElement(StepItemDivider, {
+    className: cls(classes.simple, _defineProperty(_defineProperty(_defineProperty({}, classes.verticalOrientation, isVertical), classes.transparentDivider, !hasLine), classes.inactive, isInactive || isNextInactive))
+  }));
 };

package/styled-components/es/components/Steps/ui/StepItem/StepItem.styles.js

@@ -2,7 +2,6 @@ import styled from 'styled-components';
 import { classes, tokens } from '../../Steps.tokens';
 import { component, mergeConfig } from '../../../../engines';
 import { spinnerConfig, spinnerTokens } from '../../../Spinner';
-import { addFocus } from '../../../../mixins';
 var mergedConfig = /*#__PURE__*/mergeConfig(spinnerConfig);
 var Spinner = /*#__PURE__*/component(mergedConfig);
 export var SpinnerStyled = /*#__PURE__*/styled(Spinner).withConfig({
@@ -19,26 +18,16 @@ export var StepItemContent = /*#__PURE__*/styled.div.withConfig({
 })(["padding-top:var(", ");padding-right:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");word-break:break-word;color:var(", ");"], tokens.contentPaddingTop, tokens.contentSidePadding, tokens.contentFontFamily, tokens.contentFontSize, tokens.contentFontStyle, tokens.contentFontWeight, tokens.contentLetterSpacing, tokens.contentLineHeight, tokens.contentColor);
 export var BulletIndicatorWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-bjma6z-3"
-})(["display:flex;align-items:center;&:not(.", "){flex:0;&.", "{width:100%;min-height:var(", ");}&:not(.", "){width:100%;min-height:var(", ");}&.", "{padding-right:var(", ");}}&.", "{flex:0;justify-content:center;&.", "{width:var(", ");}&:not(.", "){width:var(", ");}}&.", "{flex-direction:column;align-items:center;justify-content:center;&.", "{min-width:var(", ");}&:not(.", "){min-width:var(", ");}}&.", "{justify-content:center;}"], classes.simple, classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.verticalOrientation, tokens.verticalContentPaddingLeft, classes.simple, classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.verticalOrientation, classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.centered);
-export var BulletIndicator = /*#__PURE__*/styled.button.withConfig({
+})(["display:flex;align-items:center;&:not(.", "){flex:0;&.", "{width:100%;min-height:var(", ");}&:not(.", "){width:100%;min-height:var(", ");}&.", "{padding-right:var(", ");}}&.", "{flex-direction:column;align-items:center;justify-content:center;min-height:100%;&.", "{min-width:var(", ");}&:not(.", "){min-width:var(", ");}}&.", "{justify-content:center;}"], classes.simple, classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.verticalOrientation, tokens.verticalContentPaddingLeft, classes.verticalOrientation, classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.centered);
+export var BulletIndicator = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-bjma6z-4"
-})(["display:flex;align-items:center;justify-content:center;width:var(", ");height:var(", ");border-radius:50%;box-sizing:border-box;position:relative;outline:none;padding:0;margin:0;border:none;color:var(", ");background-color:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");", " &.", "{width:var(", ");height:var(", ");border:var(", ") var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");color:var(", ");background:var(", ");", "}&.", "{color:var(", ");background:var(", ");&.", "{&:before,&:after{background:var(", ");}}}"], tokens.indicatorSize, tokens.indicatorSize, tokens.completedIndicatorColor, tokens.completedIndicatorBackground, tokens.indicatorFontFamily, tokens.indicatorFontSize, tokens.indicatorFontStyle, tokens.indicatorFontWeight, tokens.indicatorLetterSpacing, tokens.indicatorLineHeight, /*#__PURE__*/addFocus({
-  outlineOffset: '-0.0625rem',
-  outlineSize: '0.0625rem',
-  outlineRadius: '50%',
-  outlineColor: /*#__PURE__*/"var(".concat(tokens.focusColor, ")")
-}), classes.active, tokens.activeIndicatorSize, tokens.activeIndicatorSize, tokens.dividerThickness, tokens.activeIndicatorBorder, tokens.activeIndicatorFontFamily, tokens.activeIndicatorFontSize, tokens.activeIndicatorFontStyle, tokens.activeIndicatorFontWeight, tokens.activeIndicatorLetterSpacing, tokens.activeIndicatorLineHeight, tokens.activeIndicatorColor, tokens.activeIndicatorBackground, /*#__PURE__*/addFocus({
-  outlineOffset: '-0.1875rem',
-  outlineSize: '0.0625rem',
-  outlineRadius: '50%',
-  outlineColor: /*#__PURE__*/"var(".concat(tokens.focusColor, ")")
-}), classes.inactive, tokens.inactiveIndicatorColor, tokens.inactiveIndicatorBackground, classes.simple, tokens.inactiveIndicatorBackground);
+})(["display:flex;align-items:center;justify-content:center;width:var(", ");height:var(", ");border-radius:50%;box-sizing:border-box;position:relative;color:var(", ");background-color:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");&.", "{width:var(", ");height:var(", ");border:var(", ") var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");color:var(", ");background:var(", ");}&.", "{color:var(", ");background:var(", ");&:before,&:after{background:var(", ");}}"], tokens.indicatorSize, tokens.indicatorSize, tokens.completedIndicatorColor, tokens.completedIndicatorBackground, tokens.indicatorFontFamily, tokens.indicatorFontSize, tokens.indicatorFontStyle, tokens.indicatorFontWeight, tokens.indicatorLetterSpacing, tokens.indicatorLineHeight, classes.active, tokens.activeIndicatorSize, tokens.activeIndicatorSize, tokens.dividerThickness, tokens.activeIndicatorBorder, tokens.activeIndicatorFontFamily, tokens.activeIndicatorFontSize, tokens.activeIndicatorFontStyle, tokens.activeIndicatorFontWeight, tokens.activeIndicatorLetterSpacing, tokens.activeIndicatorLineHeight, tokens.activeIndicatorColor, tokens.activeIndicatorBackground, classes.inactive, tokens.inactiveIndicatorColor, tokens.inactiveIndicatorBackground, tokens.inactiveIndicatorBackground);
 export var Bullet = /*#__PURE__*/styled(BulletIndicator).withConfig({
   componentId: "plasma-new-hope__sc-bjma6z-5"
-})(["width:var(", ");height:var(", ");&.", "{width:var(", ");height:var(", ");border:var(", ") var(", ");background:var(", ");}"], tokens.bulletSize, tokens.bulletSize, classes.active, tokens.activeBulletSize, tokens.activeBulletSize, tokens.dividerThickness, tokens.activeIndicatorBorder, tokens.activeIndicatorBackground);
+})(["width:var(", ");height:var(", ");&.", "{width:var(", ");height:var(", ");border:var(", ") var(", ");background-color:var(", ");}"], tokens.bulletSize, tokens.bulletSize, classes.active, tokens.activeBulletSize, tokens.activeBulletSize, tokens.dividerThickness, tokens.activeIndicatorBorder, tokens.activeIndicatorBackground);
 export var StepItemDivider = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-bjma6z-6"
-})(["width:100%;height:var(", ");flex:1;background:var(", ");&.", "{background:var(", ");}&.", "{opacity:var(", ");}&.", "{background:transparent;}&.", "{width:var(", ");height:100%;}&.", "{height:", ";min-height:", ";max-height:", ";&.", "{height:auto;max-height:none;}}"], tokens.dividerThickness, tokens.activeIndicatorColor, classes.inactive, tokens.inactiveIndicatorBackground, classes.disabled, tokens.disabledOpacity, classes.transparentDivider, classes.verticalOrientation, tokens.dividerThickness, classes.indentDivider, function (_ref2) {
+})(["width:100%;height:var(", ");flex:1;background-color:var(", ");&.", "{background-color:var(", ");}&.", "{background-color:transparent;}&.", "{width:var(", ");height:100%;}&.", "{height:", ";min-height:", ";max-height:", ";&.", "{height:auto;max-height:none;}}"], tokens.dividerThickness, tokens.activeIndicatorColor, classes.inactive, tokens.inactiveIndicatorBackground, classes.transparentDivider, classes.verticalOrientation, tokens.dividerThickness, classes.indentDivider, function (_ref2) {
   var indentToken = _ref2.indentToken;
   return indentToken || '';
 }, function (_ref3) {
@@ -53,4 +42,4 @@ export var StepItemContentWrapper = /*#__PURE__*/styled.div.withConfig({
 })(["&.", "{", "{padding-top:var(", ");padding-right:0;}", "{padding-top:var(", ");padding-bottom:var(", ");padding-right:0;}}"], classes.verticalOrientation, StepItemTitle, tokens.contentVerticalPadding, StepItemContent, tokens.contentVerticalPadding, tokens.contentVerticalPadding);
 export var StepItemStyled = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-bjma6z-8"
-})(["position:relative;display:flex;flex-direction:column;align-items:flex-start;flex:1;color:var(", ");&.", "{flex-direction:row;align-items:stretch;", "{width:var(", ");height:100%;}}&.", "{", "{color:var(", ");}}&.", "{color:var(", ");", "{color:var(", ");}}&.", "{flex:0;align-items:center;justify-content:center;flex-direction:row;height:100%;&.", "{min-width:var(", ");min-height:var(", ");}&:not(.", "){width:var(", ");min-height:var(", ");}&.", ",&:not(.", "){&:before,&:after{content:'';display:block;width:calc((var(", ") - var(", ")) / 2);height:var(", ");background:var(", ");}&:not(.", "){&:before,&:after{width:calc((var(", ") - var(", ")) / 2);}}&.", "{flex-direction:column;&:before,&:after{width:var(", ");height:calc((var(", ") - var(", ")) / 2);margin:0 auto;align-self:auto;}&:not(.", "){&:before,&:after{height:calc((var(", ") - var(", ")) / 2);}}&:after{margin:0 auto;}}&.isFirst{&:before{background:transparent;}}&.isLast{&:after{background:transparent;}}}&.", "{&:after,&:before{background:var(", ");}}&.isPrevInactive{&:before{background:var(", ");}}&.isNextInactive{&:after{background:var(", ");}}&.", "{&:before,&:after{background:var(", ");opacity:1;}}&.", "{&:before,&:after{background:transparent;}}}&:not(.", "):not(.", "){&.isNextActive{", "{width:calc(100% - (var(", ") - var(", ")) / 2);}}&.", "{", "{margin-left:calc((var(", ") - var(", ")) / -2);width:calc(100% + (var(", ") - var(", ")) / 2);}}}&.", "{&:not(.", "){", "{cursor:pointer;color:var(", ");}", ",", "{color:var(", ");background:var(", ");}}&.", "{", "{color:var(", ");}", ",", "{color:var(", ");background:var(", ");}}", "{cursor:pointer;}}&.", "{align-items:center;", "{display:flex;flex-direction:column;align-items:center;padding-left:calc(var(", ") / 2);padding-right:calc(var(", ") / 2);", "{width:100%;}", ",", "{padding-right:0;text-align:center;}}}&.", "{opacity:var(", ");}"], tokens.activeIndicatorColor, classes.verticalOrientation, StepItemDivider, tokens.dividerThickness, classes.active, StepItemTitle, tokens.activeTitleColor, classes.inactive, tokens.inactiveIndicatorColor, StepItemTitle, tokens.inactiveTitleColor, classes.simple, classes.hasIndicator, tokens.activeIndicatorSize, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, tokens.activeBulletSize, classes.inactive, classes.active, tokens.activeIndicatorSize, tokens.indicatorSize, tokens.dividerThickness, tokens.activeIndicatorColor, classes.hasIndicator, tokens.activeBulletSize, tokens.bulletSize, classes.verticalOrientation, tokens.dividerThickness, tokens.activeIndicatorSize, tokens.indicatorSize, classes.hasIndicator, tokens.activeBulletSize, tokens.bulletSize, classes.inactive, tokens.inactiveIndicatorBackground, tokens.inactiveIndicatorBackground, tokens.inactiveIndicatorBackground, classes.disabled, tokens.inactiveIndicatorBackground, classes.transparentDivider, classes.simple, classes.verticalOrientation, BulletIndicatorWrapper, tokens.activeIndicatorSize, tokens.indicatorSize, classes.active, BulletIndicatorWrapper, tokens.activeIndicatorSize, tokens.indicatorSize, tokens.activeIndicatorSize, tokens.indicatorSize, classes.hovered, classes.active, StepItemTitle, tokens.activeTitleColorHover, BulletIndicator, Bullet, tokens.completedIndicatorColorHover, tokens.completedIndicatorBackgroundHover, classes.inactive, StepItemTitle, tokens.inactiveTitleColorHover, BulletIndicator, Bullet, tokens.inactiveIndicatorColorHover, tokens.inactiveIndicatorBackgroundHover, BulletIndicatorWrapper, classes.centered, StepItemContentWrapper, tokens.contentSidePadding, tokens.contentSidePadding, StepItemTitle, StepItemTitle, StepItemContent, classes.disabled, tokens.disabledOpacity);
+})(["display:flex;flex-direction:column;align-items:flex-start;flex:1;&.", "{flex-direction:row;align-items:stretch;", "{width:var(", ");height:100%;}}&.", "{", "{color:var(", ");}}&.", "{", "{color:var(", ");}}&.", "{&:not(.", "){", "{cursor:pointer;color:var(", ");}", ",", "{color:var(", ");background:var(", ");}}&.", "{", "{color:var(", ");}", ",", "{color:var(", ");background:var(", ");}}", "{cursor:pointer;}}&.", "{align-items:center;", "{display:flex;flex-direction:column;align-items:center;padding-left:calc(var(", ") / 2);padding-right:calc(var(", ") / 2);", "{width:100%;}", ",", "{padding-right:0;text-align:center;}}}&.", "{flex:0;}&.", "{opacity:var(", ");}"], classes.verticalOrientation, StepItemDivider, tokens.dividerThickness, classes.active, StepItemTitle, tokens.activeTitleColor, classes.inactive, StepItemTitle, tokens.inactiveTitleColor, classes.hovered, classes.active, StepItemTitle, tokens.activeTitleColorHover, BulletIndicator, Bullet, tokens.completedIndicatorColorHover, tokens.completedIndicatorBackgroundHover, classes.inactive, StepItemTitle, tokens.inactiveTitleColorHover, BulletIndicator, Bullet, tokens.inactiveIndicatorColorHover, tokens.inactiveIndicatorBackgroundHover, BulletIndicatorWrapper, classes.centered, StepItemContentWrapper, tokens.contentSidePadding, tokens.contentSidePadding, StepItemTitle, StepItemTitle, StepItemContent, classes.simple, classes.disabled, tokens.disabledOpacity);

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

@@ -1,25 +1,28 @@
 var _StyledTrigger;
-var _excluded = ["size", "view", "focused", "outlined", "disabled", "labelPosition", "label", "id", "style", "className", "checked", "pressed", "defaultChecked"];
+var _excluded = ["size", "toggleSize", "view", "focused", "outlined", "disabled", "labelPosition", "label", "description", "id", "style", "className", "checked", "pressed", "defaultChecked"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { forwardRef } from 'react';
 import { base as sizeCSS } from '../Switch/_size/base';
+import { base as toggleSizeCSS } from '../Switch/_toggleSize/base';
 import { base as viewCSS } from '../Switch/_view/base';
 import { base as focusedCSS } from '../Switch/_focused/base';
 import { base as disabledCSS } from '../Switch/_disabled/base';
 import { cx } from '../../utils';
-import { StyledInput, StyledLabel, StyledTrigger, base } from './Switch.styles';
+import { StyledContent, StyledDescription, StyledInput, StyledLabel, StyledTrigger, base } from './Switch.styles';
 import { classes } from './Switch.tokens';
 export var switchRoot = function switchRoot(Root) {
   return /*#__PURE__*/forwardRef(function (props, ref) {
     var size = props.size,
+      toggleSize = props.toggleSize,
       view = props.view,
       focused = props.focused,
       outlined = props.outlined,
       disabled = props.disabled,
       labelPosition = props.labelPosition,
       label = props.label,
+      description = props.description,
       id = props.id,
       style = props.style,
       className = props.className,
@@ -31,12 +34,15 @@ export var switchRoot = function switchRoot(Root) {
     return /*#__PURE__*/React.createElement(Root, {
       view: view,
       size: size,
+      toggleSize: toggleSize,
       disabled: disabled,
       focused: focused !== null && focused !== void 0 ? focused : outlined,
       labelPosition: labelPosition,
       id: id,
       style: style,
-      className: cx(className, classes["".concat(labelPosition, "SwitchLabelPosition")])
+      className: cx(className)
+    }, /*#__PURE__*/React.createElement(StyledContent, {
+      className: cx(classes["".concat(labelPosition, "SwitchLabelPosition")])
     }, /*#__PURE__*/React.createElement(StyledInput, _extends({}, rest, {
       ref: ref,
       role: "switch",
@@ -49,7 +55,7 @@ export var switchRoot = function switchRoot(Root) {
       tabIndex: -1
     }, label), _StyledTrigger || (_StyledTrigger = /*#__PURE__*/React.createElement(StyledTrigger, {
       "aria-hidden": true
-    })));
+    }))), description && /*#__PURE__*/React.createElement(StyledDescription, null, description));
   });
 };
 export var switchConfig = {
@@ -64,6 +70,9 @@ export var switchConfig = {
     view: {
       css: viewCSS
     },
+    toggleSize: {
+      css: toggleSizeCSS
+    },
     disabled: {
       css: disabledCSS,
       attrs: true

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

@@ -2,13 +2,19 @@ import styled from 'styled-components';
 import { css } from 'styled-components';
 import { applyEllipsis } from '../../mixins';
 import { classes, tokens } from './Switch.tokens';
-export var base = /*#__PURE__*/css(["position:relative;display:flex;align-items:center;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);&:focus{outline:0 none;}&.", "{justify-content:space-between;", ":0 var(", ") 0 0;}&.", "{justify-content:start;flex-direction:row-reverse;", ":0 0 0 var(", ");}"], classes.beforeSwitchLabelPosition, tokens.labelOffsetPrivate, tokens.labelOffset, classes.afterSwitchLabelPosition, tokens.labelOffsetPrivate, tokens.labelOffset);
-export var StyledInput = /*#__PURE__*/styled.input.withConfig({
+export var base = /*#__PURE__*/css(["position:relative;display:flex;flex-direction:column;gap:var(", ");cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);&:focus{outline:0 none;}"], tokens.verticalGap);
+export var StyledContent = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-i4fgom-0"
+})(["width:100%;position:relative;display:flex;align-items:center;&.", "{justify-content:space-between;", ":0 var(", ") 0 0;}&.", "{justify-content:start;flex-direction:row-reverse;", ":0 0 0 var(", ");}"], classes.beforeSwitchLabelPosition, tokens.labelOffsetPrivate, tokens.labelOffset, classes.afterSwitchLabelPosition, tokens.labelOffsetPrivate, tokens.labelOffset);
+export var StyledDescription = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-i4fgom-1"
+})(["position:relative;"]);
+export var StyledInput = /*#__PURE__*/styled.input.withConfig({
+  componentId: "plasma-new-hope__sc-i4fgom-2"
 })(["position:absolute;right:0;margin:0;opacity:0;&:focus{outline:0 none;}"]);
 export var StyledLabel = /*#__PURE__*/styled.span.withConfig({
-  componentId: "plasma-new-hope__sc-i4fgom-1"
+  componentId: "plasma-new-hope__sc-i4fgom-3"
 })(["user-select:none;", ""], /*#__PURE__*/applyEllipsis());
 export var StyledTrigger = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-i4fgom-2"
+  componentId: "plasma-new-hope__sc-i4fgom-4"
 })(["position:relative;display:flex;align-items:center;transition:background-color 0.15s ease-in-out 0.1s;::after{content:'';position:absolute;right:auto;left:0;transition:width 0.15s ease-in-out 0s,left 0.3s ease-in-out 0s,right 0.3s ease-in-out 0s;}", ":checked ~ &::after{right:0;left:auto;}"], StyledInput);

package/styled-components/es/components/Switch/Switch.template-doc.mdx

@@ -18,7 +18,43 @@ import { Switch } from '@salutejs/{{ package }}';
 
 export function App() {
     return (
-        <Switch label="Переключатель" defaultChecked />
+        <Switch description="Описание переключателя" label="Переключатель" defaultChecked />
+    );
+}
+```
+
+## Примеры
+
+### Размер Switch
+Размер компонента задается с помощью свойства `size`.
+
+```tsx live
+import React from 'react';
+import { Button } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <Switch size="s" description="Описание переключателя" label="Переключатель" defaultChecked />
+            <Switch size="m" description="Описание переключателя" label="Переключатель" defaultChecked />
+            <Switch size="l" description="Описание переключателя" label="Переключатель" defaultChecked />
+        </div>
+    );
+}
+```
+
+Размер переключателя задается с помощью свойства `toggleSize`.
+
+```tsx live
+import React from 'react';
+import { Button } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div style=\{{ alignItems: "center" }}>
+            <Switch toggleSize="s" label="Переключатель" defaultChecked />
+            <Switch toggleSize="l" label="Переключатель" defaultChecked />
+        </div>
     );
 }
 ```

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

@@ -5,11 +5,22 @@ export var tokens = {
   fontWeight: '--plasma-switch-font-weight',
   letterSpacing: '--plasma-switch-letter-spacing',
   lineHeight: '--plasma-switch-line-height',
+  /* Токены description */
+  descriptionFontFamily: '--plasma-switch-description-font-family',
+  descriptionFontStyle: '--plasma-switch-description-font-style',
+  descriptionFontSize: '--plasma-switch-description-font-size',
+  descriptionFontWeight: '--plasma-switch-description-font-weight',
+  descriptionLetterSpacing: '--plasma-switch-description-letter-spacing',
+  descriptionLineHeight: '--plasma-switch-description-line-height',
   /* Цвет подписи */
   labelColor: '--plasma-switch__label-color',
   labelOffset: '--plasma-switch__label-offset',
+  /* Цвет описания */
+  descriptionColor: '--plasma-switch__description-color',
+  descriptionOffset: '--plasma-switch__description-offset',
   /** Прозрачность для всего компонента в состоянии disabled */
   disabledOpacity: '--plasma-switch-disabled-opacity',
+  verticalGap: '--plasma-switch-vertical-gap',
   trackWidth: '--plasma-switch__track-width',
   trackHeight: '--plasma-switch__track-height',
   trackBorderRadius: '--plasma-switch__track-border-radius',

package/styled-components/es/components/Switch/_size/base.js

@@ -1,4 +1,4 @@
 import { css } from 'styled-components';
 import { tokens } from '../Switch.tokens';
-import { StyledLabel, StyledTrigger } from '../Switch.styles';
-export var base = /*#__PURE__*/css(["font-family:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");font-size:var(", ");", "{flex:0 0 var(", ");width:var(", ");height:var(", ");border-radius:var(", ");&::after{width:var(", ");height:var(", ");border-radius:var(", ");margin:auto var(", ");}}", "{margin:var(", ",0);}:active:not([disabled]) ", "::after{width:calc(var(", ") * var(", ",1));}"], tokens.fontFamily, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.fontSize, StyledTrigger, tokens.trackWidth, tokens.trackWidth, tokens.trackHeight, tokens.trackBorderRadius, tokens.thumbSize, tokens.thumbSize, tokens.thumbBorderRadius, tokens.thumbOffset, StyledLabel, tokens.labelOffsetPrivate, StyledTrigger, tokens.thumbSize, tokens.thumbPressScale);
+import { StyledContent, StyledDescription, StyledLabel } from '../Switch.styles';
+export var base = /*#__PURE__*/css(["", "{font-family:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");font-size:var(", ");}", "{font-family:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");font-size:var(", ");}", "{margin:var(", ",0);}"], StyledContent, tokens.fontFamily, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.fontSize, StyledDescription, tokens.descriptionFontFamily, tokens.descriptionFontStyle, tokens.descriptionFontWeight, tokens.descriptionLetterSpacing, tokens.descriptionLineHeight, tokens.descriptionFontSize, StyledLabel, tokens.labelOffsetPrivate);

package/styled-components/es/components/Switch/_toggleSize/base.js

@@ -0,0 +1,4 @@
+import { css } from 'styled-components';
+import { tokens } from '../Switch.tokens';
+import { StyledTrigger } from '../Switch.styles';
+export var base = /*#__PURE__*/css(["", "{flex:0 0 var(", ");width:var(", ");height:var(", ");border-radius:var(", ");&::after{width:var(", ");height:var(", ");border-radius:var(", ");margin:auto var(", ");}}:active:not([disabled]) ", "::after{width:calc(var(", ") * var(", ",1));}"], StyledTrigger, tokens.trackWidth, tokens.trackWidth, tokens.trackHeight, tokens.trackBorderRadius, tokens.thumbSize, tokens.thumbSize, tokens.thumbBorderRadius, tokens.thumbOffset, StyledTrigger, tokens.thumbSize, tokens.thumbPressScale);

package/styled-components/es/components/Switch/_view/base.js

@@ -1,4 +1,4 @@
 import { css } from 'styled-components';
 import { tokens } from '../Switch.tokens';
-import { StyledTrigger, StyledInput } from '../Switch.styles';
-export var base = /*#__PURE__*/css(["", "{background-color:var(", ");}", ":not([disabled]) ~ ", ":hover{background-color:var(", ",var(", "));}", ":checked ~ ", "{background-color:var(", ");}", ":checked:not([disabled]) ~ ", ":hover{background-color:var(", ",var(", "));}", "::after{background-color:var(", ");box-shadow:var(", ");}", ":checked ~ ", "::after{box-shadow:var(", ",var(", "));}"], StyledTrigger, tokens.trackBackgroundColorOff, StyledInput, StyledTrigger, tokens.trackBackgroundColorOffHover, tokens.trackBackgroundColorOff, StyledInput, StyledTrigger, tokens.trackBackgroundColorOn, StyledInput, StyledTrigger, tokens.trackBackgroundColorOnHover, tokens.trackBackgroundColorOn, StyledTrigger, tokens.thumbBackgroundColor, tokens.thumbBoxShadow, StyledInput, StyledTrigger, tokens.thumbBoxShadowOn, tokens.thumbBoxShadow);
+import { StyledTrigger, StyledInput, StyledLabel, StyledDescription } from '../Switch.styles';
+export var base = /*#__PURE__*/css(["", "{background-color:var(", ");}", ":not([disabled]) ~ ", ":hover{background-color:var(", ",var(", "));}", ":checked ~ ", "{background-color:var(", ");}", ":checked:not([disabled]) ~ ", ":hover{background-color:var(", ",var(", "));}", "::after{background-color:var(", ");box-shadow:var(", ");}", ":checked ~ ", "::after{box-shadow:var(", ",var(", "));}", "{color:var(", ");}", "{color:var(", ");}"], StyledTrigger, tokens.trackBackgroundColorOff, StyledInput, StyledTrigger, tokens.trackBackgroundColorOffHover, tokens.trackBackgroundColorOff, StyledInput, StyledTrigger, tokens.trackBackgroundColorOn, StyledInput, StyledTrigger, tokens.trackBackgroundColorOnHover, tokens.trackBackgroundColorOn, StyledTrigger, tokens.thumbBackgroundColor, tokens.thumbBoxShadow, StyledInput, StyledTrigger, tokens.thumbBoxShadowOn, tokens.thumbBoxShadow, StyledLabel, tokens.labelColor, StyledDescription, tokens.descriptionColor);

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

@@ -7,7 +7,7 @@ export var config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-primary-hover);", ":solid var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-clear);", ":var(--inverse-text-primary);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--surface-solid-default-hover);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-secondary);", ":var(--surface-accent);", ":0.4;"], tokens.activeTitleColor, tokens.activeTitleColorHover, tokens.activeIndicatorBorder, tokens.activeIndicatorColor, tokens.activeIndicatorBackground, tokens.completedIndicatorColor, tokens.completedIndicatorColorHover, tokens.completedIndicatorBackground, tokens.completedIndicatorBackgroundHover, tokens.inactiveTitleColor, tokens.inactiveTitleColorHover, tokens.inactiveIndicatorColor, tokens.inactiveIndicatorColorHover, tokens.inactiveIndicatorBackground, tokens.inactiveIndicatorBackgroundHover, tokens.contentColor, tokens.focusColor, tokens.disabledOpacity)
+      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-primary-hover);", ":solid var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-clear);", ":var(--inverse-text-primary);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--surface-solid-default-hover);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-secondary);", ":0.4;"], tokens.activeTitleColor, tokens.activeTitleColorHover, tokens.activeIndicatorBorder, tokens.activeIndicatorColor, tokens.activeIndicatorBackground, tokens.completedIndicatorColor, tokens.completedIndicatorColorHover, tokens.completedIndicatorBackground, tokens.completedIndicatorBackgroundHover, tokens.inactiveTitleColor, tokens.inactiveTitleColorHover, tokens.inactiveIndicatorColor, tokens.inactiveIndicatorColorHover, tokens.inactiveIndicatorBackground, tokens.inactiveIndicatorBackgroundHover, tokens.contentColor, tokens.disabledOpacity)
     },
     size: {
       l: /*#__PURE__*/css(["", ":1.5rem;", ":2.25rem;", ":0.5rem;", ":1rem;", ":0.75rem;", ":0.375rem;", ":2rem;", ":1.0625rem;", ":0.75rem;", ":1rem;", ":0.625rem;", ":1.5rem;", ":1.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-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);", ":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-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.125rem;"], tokens.indicatorSize, tokens.activeIndicatorSize, tokens.bulletSize, tokens.activeBulletSize, tokens.titlePaddingTop, tokens.contentPaddingTop, tokens.contentSidePadding, tokens.contentVerticalPadding, tokens.verticalContentPaddingLeft, tokens.smallIndicatorIndentHeight, tokens.largeIndicatorIndentHeight, tokens.smallBulletIndentHeight, tokens.largeBulletIndentHeight, tokens.indicatorFontFamily, tokens.indicatorFontSize, tokens.indicatorFontStyle, tokens.indicatorFontWeight, tokens.indicatorLetterSpacing, tokens.indicatorLineHeight, tokens.activeIndicatorFontFamily, tokens.activeIndicatorFontSize, tokens.activeIndicatorFontStyle, tokens.activeIndicatorFontWeight, tokens.activeIndicatorLetterSpacing, tokens.activeIndicatorLineHeight, tokens.titleFontFamily, tokens.titleFontSize, tokens.titleFontStyle, tokens.titleFontWeight, tokens.titleLetterSpacing, tokens.titleLineHeight, tokens.contentFontFamily, tokens.contentFontSize, tokens.contentFontStyle, tokens.contentFontWeight, tokens.contentLetterSpacing, tokens.contentLineHeight, tokens.dividerThickness),

package/styled-components/es/examples/plasma_b2c/components/Steps/Steps.stories.tsx

@@ -118,7 +118,7 @@ const DefaultStory = (args) => {
     };
 
     return (
-        <div style={{ maxWidth, height: '600px' }}>
+        <div style={{ maxWidth, height: '400px' }}>
             <Steps
                 size={size}
                 items={items}

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

@@ -4,15 +4,22 @@ export var config = {
   defaults: {
     view: 'default',
     size: 'm',
+    toggleSize: 'l',
     labelPosition: 'before',
     focused: 'true'
   },
   variations: {
     size: {
-      m: /*#__PURE__*/css(["", ":var(--plasma-typo-body1-font-family);", ":var(--plasma-typo-body1-font-style);", ":var(--plasma-typo-body1-font-weight);", ":var(--plasma-typo-body1-font-weight);", ":var(--plasma-typo-body1-line-height);", ":var(--plasma-typo-body1-font-size);", ":var(--plasma-typo-body1-letter-spacing);", ":2.75rem;", ":1.75rem;", ":calc(var(", ") / 2);", ":1.5rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;", ":0.75rem;"], switchTokens.fontFamily, switchTokens.fontStyle, switchTokens.fontWeight, switchTokens.fontWeight, switchTokens.lineHeight, switchTokens.fontSize, switchTokens.letterSpacing, switchTokens.trackWidth, switchTokens.trackHeight, switchTokens.trackBorderRadius, switchTokens.trackHeight, switchTokens.thumbSize, switchTokens.thumbBorderRadius, switchTokens.thumbSize, switchTokens.thumbOffset, switchTokens.thumbPressScale, switchTokens.labelOffset)
+      s: /*#__PURE__*/css(["", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-letter-spacing);", ":0.25rem;", ":0.75rem;"], switchTokens.fontFamily, switchTokens.fontStyle, switchTokens.fontWeight, switchTokens.lineHeight, switchTokens.fontSize, switchTokens.letterSpacing, switchTokens.descriptionFontFamily, switchTokens.descriptionFontStyle, switchTokens.descriptionFontWeight, switchTokens.descriptionLineHeight, switchTokens.descriptionFontSize, switchTokens.descriptionLetterSpacing, switchTokens.verticalGap, switchTokens.labelOffset),
+      m: /*#__PURE__*/css(["", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-xs-letter-spacing);", ":0.25rem;", ":0.75rem;"], switchTokens.fontFamily, switchTokens.fontStyle, switchTokens.fontWeight, switchTokens.lineHeight, switchTokens.fontSize, switchTokens.letterSpacing, switchTokens.descriptionFontFamily, switchTokens.descriptionFontStyle, switchTokens.descriptionFontWeight, switchTokens.descriptionLineHeight, switchTokens.descriptionFontSize, switchTokens.descriptionLetterSpacing, switchTokens.verticalGap, switchTokens.labelOffset),
+      l: /*#__PURE__*/css(["", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-xs-letter-spacing);", ":0.25rem;", ":0.75rem;"], switchTokens.fontFamily, switchTokens.fontStyle, switchTokens.fontWeight, switchTokens.lineHeight, switchTokens.fontSize, switchTokens.letterSpacing, switchTokens.descriptionFontFamily, switchTokens.descriptionFontStyle, switchTokens.descriptionFontWeight, switchTokens.descriptionLineHeight, switchTokens.descriptionFontSize, switchTokens.descriptionLetterSpacing, switchTokens.verticalGap, switchTokens.labelOffset)
+    },
+    toggleSize: {
+      l: /*#__PURE__*/css(["", ":2.75rem;", ":1.75rem;", ":calc(var(", ") / 2);", ":1.5rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;"], switchTokens.trackWidth, switchTokens.trackHeight, switchTokens.trackBorderRadius, switchTokens.trackHeight, switchTokens.thumbSize, switchTokens.thumbBorderRadius, switchTokens.thumbSize, switchTokens.thumbOffset, switchTokens.thumbPressScale),
+      s: /*#__PURE__*/css(["", ":2rem;", ":1.25rem;", ":calc(var(", ") / 2);", ":1rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;"], switchTokens.trackWidth, switchTokens.trackHeight, switchTokens.trackBorderRadius, switchTokens.trackHeight, switchTokens.thumbSize, switchTokens.thumbBorderRadius, switchTokens.thumbSize, switchTokens.thumbOffset, switchTokens.thumbPressScale)
     },
     view: {
-      "default": /*#__PURE__*/css(["", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-transparent-tertiary);", ":var(--surface-transparent-tertiary-hover);", ":var(--on-dark-surface-solid-default);", ":0 1px 1px rgba(0,0,0,0.11);"], switchTokens.trackBackgroundColorOn, switchTokens.trackBackgroundColorOnHover, switchTokens.trackBackgroundColorOff, switchTokens.trackBackgroundColorOffHover, switchTokens.thumbBackgroundColor, switchTokens.thumbBoxShadow)
+      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-transparent-tertiary);", ":var(--surface-transparent-tertiary-hover);", ":var(--on-dark-surface-solid-default);", ":0 1px 1px rgba(0,0,0,0.11);"], switchTokens.labelColor, switchTokens.descriptionColor, switchTokens.trackBackgroundColorOn, switchTokens.trackBackgroundColorOnHover, switchTokens.trackBackgroundColorOff, switchTokens.trackBackgroundColorOffHover, switchTokens.thumbBackgroundColor, switchTokens.thumbBoxShadow)
     },
     disabled: {
       "true": /*#__PURE__*/css(["", ":0.4;"], switchTokens.disabledOpacity)

package/styled-components/es/examples/plasma_b2c/components/Switch/Switch.stories.tsx

@@ -18,7 +18,7 @@ const meta: Meta<SwitchProps> = {
     decorators: [WithTheme],
     component: Switch,
     argTypes: {
-        ...argTypesFromConfig(mergeConfig(switchConfig, config), ['size', 'view', 'focused']),
+        ...argTypesFromConfig(mergeConfig(switchConfig, config), ['view', 'focused']),
         labelPosition: {
             options: ['before', 'after'],
             control: { type: 'select' },
@@ -26,6 +26,7 @@ const meta: Meta<SwitchProps> = {
     },
     args: {
         label: 'Label',
+        description: 'Description',
         labelPosition: 'before',
     },
 };
@@ -64,5 +65,10 @@ const StoryDefault = (args: SwitchProps) => {
 };
 
 export const Default: StoryObj<SwitchProps> = {
+    args: {
+        size: 'm',
+        toggleSize: 'l',
+        disabled: false,
+    },
     render: (args) => <StoryDefault {...args} />,
 };

package/styled-components/es/examples/plasma_web/components/Steps/Steps.config.js

@@ -7,7 +7,7 @@ export var config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-primary-hover);", ":solid var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-clear);", ":var(--inverse-text-primary);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--surface-solid-default-hover);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-secondary);", ":var(--surface-accent);", ":0.4;"], tokens.activeTitleColor, tokens.activeTitleColorHover, tokens.activeIndicatorBorder, tokens.activeIndicatorColor, tokens.activeIndicatorBackground, tokens.completedIndicatorColor, tokens.completedIndicatorColorHover, tokens.completedIndicatorBackground, tokens.completedIndicatorBackgroundHover, tokens.inactiveTitleColor, tokens.inactiveTitleColorHover, tokens.inactiveIndicatorColor, tokens.inactiveIndicatorColorHover, tokens.inactiveIndicatorBackground, tokens.inactiveIndicatorBackgroundHover, tokens.contentColor, tokens.focusColor, tokens.disabledOpacity)
+      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-primary-hover);", ":solid var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-clear);", ":var(--inverse-text-primary);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--surface-solid-default-hover);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-secondary);", ":0.4;"], tokens.activeTitleColor, tokens.activeTitleColorHover, tokens.activeIndicatorBorder, tokens.activeIndicatorColor, tokens.activeIndicatorBackground, tokens.completedIndicatorColor, tokens.completedIndicatorColorHover, tokens.completedIndicatorBackground, tokens.completedIndicatorBackgroundHover, tokens.inactiveTitleColor, tokens.inactiveTitleColorHover, tokens.inactiveIndicatorColor, tokens.inactiveIndicatorColorHover, tokens.inactiveIndicatorBackground, tokens.inactiveIndicatorBackgroundHover, tokens.contentColor, tokens.disabledOpacity)
     },
     size: {
       l: /*#__PURE__*/css(["", ":1.5rem;", ":2.25rem;", ":0.5rem;", ":1rem;", ":0.75rem;", ":0.375rem;", ":2rem;", ":1.0625rem;", ":0.75rem;", ":1rem;", ":0.625rem;", ":1.5rem;", ":1.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-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);", ":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-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.125rem;"], tokens.indicatorSize, tokens.activeIndicatorSize, tokens.bulletSize, tokens.activeBulletSize, tokens.titlePaddingTop, tokens.contentPaddingTop, tokens.contentSidePadding, tokens.contentVerticalPadding, tokens.verticalContentPaddingLeft, tokens.smallIndicatorIndentHeight, tokens.largeIndicatorIndentHeight, tokens.smallBulletIndentHeight, tokens.largeBulletIndentHeight, tokens.indicatorFontFamily, tokens.indicatorFontSize, tokens.indicatorFontStyle, tokens.indicatorFontWeight, tokens.indicatorLetterSpacing, tokens.indicatorLineHeight, tokens.activeIndicatorFontFamily, tokens.activeIndicatorFontSize, tokens.activeIndicatorFontStyle, tokens.activeIndicatorFontWeight, tokens.activeIndicatorLetterSpacing, tokens.activeIndicatorLineHeight, tokens.titleFontFamily, tokens.titleFontSize, tokens.titleFontStyle, tokens.titleFontWeight, tokens.titleLetterSpacing, tokens.titleLineHeight, tokens.contentFontFamily, tokens.contentFontSize, tokens.contentFontStyle, tokens.contentFontWeight, tokens.contentLetterSpacing, tokens.contentLineHeight, tokens.dividerThickness),

package/styled-components/es/examples/plasma_web/components/Steps/Steps.stories.tsx

@@ -118,7 +118,7 @@ const DefaultStory = (args) => {
     };
 
     return (
-        <div style={{ maxWidth, height: '600px' }}>
+        <div style={{ maxWidth, height: '400px' }}>
             <Steps
                 size={size}
                 items={items}