@salutejs/plasma-new-hope 0.184.0-canary.1538.11686719130.0 → 0.184.0-canary.1539.11687316067.0

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

@@ -7,14 +7,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.switchRoot = exports.switchConfig = void 0;
 var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
 var _base = /*#__PURE__*/require("../Switch/_size/base");
-var _base2 = /*#__PURE__*/require("../Switch/_view/base");
-var _base3 = /*#__PURE__*/require("../Switch/_focused/base");
-var _base4 = /*#__PURE__*/require("../Switch/_disabled/base");
+var _base2 = /*#__PURE__*/require("../Switch/_toggleSize/base");
+var _base3 = /*#__PURE__*/require("../Switch/_view/base");
+var _base4 = /*#__PURE__*/require("../Switch/_focused/base");
+var _base5 = /*#__PURE__*/require("../Switch/_disabled/base");
 var _utils = /*#__PURE__*/require("../../utils");
 var _Switch = /*#__PURE__*/require("./Switch.styles");
 var _Switch2 = /*#__PURE__*/require("./Switch.tokens");
 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 _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 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); }
@@ -23,12 +24,14 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var switchRoot = exports.switchRoot = function switchRoot(Root) {
   return /*#__PURE__*/(0, _react.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,
@@ -40,12 +43,15 @@ var switchRoot = exports.switchRoot = function switchRoot(Root) {
     return /*#__PURE__*/_react["default"].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: (0, _utils.cx)(className, _Switch2.classes["".concat(labelPosition, "SwitchLabelPosition")])
+      className: (0, _utils.cx)(className)
+    }, /*#__PURE__*/_react["default"].createElement(_Switch.StyledContent, {
+      className: (0, _utils.cx)(_Switch2.classes["".concat(labelPosition, "SwitchLabelPosition")])
     }, /*#__PURE__*/_react["default"].createElement(_Switch.StyledInput, _extends({}, rest, {
       ref: ref,
       role: "switch",
@@ -58,7 +64,7 @@ var switchRoot = exports.switchRoot = function switchRoot(Root) {
       tabIndex: -1
     }, label), _StyledTrigger || (_StyledTrigger = /*#__PURE__*/_react["default"].createElement(_Switch.StyledTrigger, {
       "aria-hidden": true
-    })));
+    }))), description && /*#__PURE__*/_react["default"].createElement(_Switch.StyledDescription, null, description));
   });
 };
 var switchConfig = exports.switchConfig = {
@@ -71,14 +77,17 @@ var switchConfig = exports.switchConfig = {
       css: _base.base
     },
     view: {
+      css: _base3.base
+    },
+    toggleSize: {
       css: _base2.base
     },
     disabled: {
-      css: _base4.base,
+      css: _base5.base,
       attrs: true
     },
     focused: {
-      css: _base3.base
+      css: _base4.base
     }
   },
   defaults: {

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

@@ -4,19 +4,25 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.base = exports.StyledTrigger = exports.StyledLabel = exports.StyledInput = void 0;
+exports.base = exports.StyledTrigger = exports.StyledLabel = exports.StyledInput = exports.StyledDescription = exports.StyledContent = void 0;
 var _styledComponents = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("styled-components"));
 var _mixins = /*#__PURE__*/require("../../mixins");
 var _Switch = /*#__PURE__*/require("./Switch.tokens");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.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(", ");}"], _Switch.classes.beforeSwitchLabelPosition, _Switch.tokens.labelOffsetPrivate, _Switch.tokens.labelOffset, _Switch.classes.afterSwitchLabelPosition, _Switch.tokens.labelOffsetPrivate, _Switch.tokens.labelOffset);
-var StyledInput = exports.StyledInput = /*#__PURE__*/_styledComponents["default"].input.withConfig({
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.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;}"], _Switch.tokens.verticalGap);
+var StyledContent = exports.StyledContent = /*#__PURE__*/_styledComponents["default"].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(", ");}"], _Switch.classes.beforeSwitchLabelPosition, _Switch.tokens.labelOffsetPrivate, _Switch.tokens.labelOffset, _Switch.classes.afterSwitchLabelPosition, _Switch.tokens.labelOffsetPrivate, _Switch.tokens.labelOffset);
+var StyledDescription = exports.StyledDescription = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-i4fgom-1"
+})(["position:relative;"]);
+var StyledInput = exports.StyledInput = /*#__PURE__*/_styledComponents["default"].input.withConfig({
+  componentId: "plasma-new-hope__sc-i4fgom-2"
 })(["position:absolute;right:0;margin:0;opacity:0;&:focus{outline:0 none;}"]);
 var StyledLabel = exports.StyledLabel = /*#__PURE__*/_styledComponents["default"].span.withConfig({
-  componentId: "plasma-new-hope__sc-i4fgom-1"
+  componentId: "plasma-new-hope__sc-i4fgom-3"
 })(["user-select:none;", ""], /*#__PURE__*/(0, _mixins.applyEllipsis)());
 var StyledTrigger = exports.StyledTrigger = /*#__PURE__*/_styledComponents["default"].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/cjs/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/cjs/components/Switch/Switch.tokens.js

@@ -11,11 +11,22 @@ var tokens = exports.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/cjs/components/Switch/_size/base.js

@@ -7,4 +7,4 @@ exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _Switch = /*#__PURE__*/require("../Switch.tokens");
 var _Switch2 = /*#__PURE__*/require("../Switch.styles");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.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));}"], _Switch.tokens.fontFamily, _Switch.tokens.fontStyle, _Switch.tokens.fontWeight, _Switch.tokens.letterSpacing, _Switch.tokens.lineHeight, _Switch.tokens.fontSize, _Switch2.StyledTrigger, _Switch.tokens.trackWidth, _Switch.tokens.trackWidth, _Switch.tokens.trackHeight, _Switch.tokens.trackBorderRadius, _Switch.tokens.thumbSize, _Switch.tokens.thumbSize, _Switch.tokens.thumbBorderRadius, _Switch.tokens.thumbOffset, _Switch2.StyledLabel, _Switch.tokens.labelOffsetPrivate, _Switch2.StyledTrigger, _Switch.tokens.thumbSize, _Switch.tokens.thumbPressScale);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.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);}"], _Switch2.StyledContent, _Switch.tokens.fontFamily, _Switch.tokens.fontStyle, _Switch.tokens.fontWeight, _Switch.tokens.letterSpacing, _Switch.tokens.lineHeight, _Switch.tokens.fontSize, _Switch2.StyledDescription, _Switch.tokens.descriptionFontFamily, _Switch.tokens.descriptionFontStyle, _Switch.tokens.descriptionFontWeight, _Switch.tokens.descriptionLetterSpacing, _Switch.tokens.descriptionLineHeight, _Switch.tokens.descriptionFontSize, _Switch2.StyledLabel, _Switch.tokens.labelOffsetPrivate);

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

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.base = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _Switch = /*#__PURE__*/require("../Switch.tokens");
+var _Switch2 = /*#__PURE__*/require("../Switch.styles");
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.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));}"], _Switch2.StyledTrigger, _Switch.tokens.trackWidth, _Switch.tokens.trackWidth, _Switch.tokens.trackHeight, _Switch.tokens.trackBorderRadius, _Switch.tokens.thumbSize, _Switch.tokens.thumbSize, _Switch.tokens.thumbBorderRadius, _Switch.tokens.thumbOffset, _Switch2.StyledTrigger, _Switch.tokens.thumbSize, _Switch.tokens.thumbPressScale);

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

@@ -7,4 +7,4 @@ exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _Switch = /*#__PURE__*/require("../Switch.tokens");
 var _Switch2 = /*#__PURE__*/require("../Switch.styles");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.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(", "));}"], _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOff, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOffHover, _Switch.tokens.trackBackgroundColorOff, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOn, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOnHover, _Switch.tokens.trackBackgroundColorOn, _Switch2.StyledTrigger, _Switch.tokens.thumbBackgroundColor, _Switch.tokens.thumbBoxShadow, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.thumbBoxShadowOn, _Switch.tokens.thumbBoxShadow);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.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(", ");}"], _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOff, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOffHover, _Switch.tokens.trackBackgroundColorOff, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOn, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOnHover, _Switch.tokens.trackBackgroundColorOn, _Switch2.StyledTrigger, _Switch.tokens.thumbBackgroundColor, _Switch.tokens.thumbBoxShadow, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.thumbBoxShadowOn, _Switch.tokens.thumbBoxShadow, _Switch2.StyledLabel, _Switch.tokens.labelColor, _Switch2.StyledDescription, _Switch.tokens.descriptionColor);

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

@@ -10,15 +10,22 @@ var config = exports.config = {
   defaults: {
     view: 'default',
     size: 'm',
+    toggleSize: 'l',
     labelPosition: 'before',
     focused: 'true'
   },
   variations: {
     size: {
-      m: /*#__PURE__*/(0, _styledComponents.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;"], _Switch.switchTokens.fontFamily, _Switch.switchTokens.fontStyle, _Switch.switchTokens.fontWeight, _Switch.switchTokens.fontWeight, _Switch.switchTokens.lineHeight, _Switch.switchTokens.fontSize, _Switch.switchTokens.letterSpacing, _Switch.switchTokens.trackWidth, _Switch.switchTokens.trackHeight, _Switch.switchTokens.trackBorderRadius, _Switch.switchTokens.trackHeight, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbBorderRadius, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbOffset, _Switch.switchTokens.thumbPressScale, _Switch.switchTokens.labelOffset)
+      s: /*#__PURE__*/(0, _styledComponents.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;"], _Switch.switchTokens.fontFamily, _Switch.switchTokens.fontStyle, _Switch.switchTokens.fontWeight, _Switch.switchTokens.lineHeight, _Switch.switchTokens.fontSize, _Switch.switchTokens.letterSpacing, _Switch.switchTokens.descriptionFontFamily, _Switch.switchTokens.descriptionFontStyle, _Switch.switchTokens.descriptionFontWeight, _Switch.switchTokens.descriptionLineHeight, _Switch.switchTokens.descriptionFontSize, _Switch.switchTokens.descriptionLetterSpacing, _Switch.switchTokens.verticalGap, _Switch.switchTokens.labelOffset),
+      m: /*#__PURE__*/(0, _styledComponents.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;"], _Switch.switchTokens.fontFamily, _Switch.switchTokens.fontStyle, _Switch.switchTokens.fontWeight, _Switch.switchTokens.lineHeight, _Switch.switchTokens.fontSize, _Switch.switchTokens.letterSpacing, _Switch.switchTokens.descriptionFontFamily, _Switch.switchTokens.descriptionFontStyle, _Switch.switchTokens.descriptionFontWeight, _Switch.switchTokens.descriptionLineHeight, _Switch.switchTokens.descriptionFontSize, _Switch.switchTokens.descriptionLetterSpacing, _Switch.switchTokens.verticalGap, _Switch.switchTokens.labelOffset),
+      l: /*#__PURE__*/(0, _styledComponents.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;"], _Switch.switchTokens.fontFamily, _Switch.switchTokens.fontStyle, _Switch.switchTokens.fontWeight, _Switch.switchTokens.lineHeight, _Switch.switchTokens.fontSize, _Switch.switchTokens.letterSpacing, _Switch.switchTokens.descriptionFontFamily, _Switch.switchTokens.descriptionFontStyle, _Switch.switchTokens.descriptionFontWeight, _Switch.switchTokens.descriptionLineHeight, _Switch.switchTokens.descriptionFontSize, _Switch.switchTokens.descriptionLetterSpacing, _Switch.switchTokens.verticalGap, _Switch.switchTokens.labelOffset)
+    },
+    toggleSize: {
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.75rem;", ":1.75rem;", ":calc(var(", ") / 2);", ":1.5rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;"], _Switch.switchTokens.trackWidth, _Switch.switchTokens.trackHeight, _Switch.switchTokens.trackBorderRadius, _Switch.switchTokens.trackHeight, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbBorderRadius, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbOffset, _Switch.switchTokens.thumbPressScale),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":1.25rem;", ":calc(var(", ") / 2);", ":1rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;"], _Switch.switchTokens.trackWidth, _Switch.switchTokens.trackHeight, _Switch.switchTokens.trackBorderRadius, _Switch.switchTokens.trackHeight, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbBorderRadius, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbOffset, _Switch.switchTokens.thumbPressScale)
     },
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.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);"], _Switch.switchTokens.trackBackgroundColorOn, _Switch.switchTokens.trackBackgroundColorOnHover, _Switch.switchTokens.trackBackgroundColorOff, _Switch.switchTokens.trackBackgroundColorOffHover, _Switch.switchTokens.thumbBackgroundColor, _Switch.switchTokens.thumbBoxShadow)
+      "default": /*#__PURE__*/(0, _styledComponents.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);"], _Switch.switchTokens.labelColor, _Switch.switchTokens.descriptionColor, _Switch.switchTokens.trackBackgroundColorOn, _Switch.switchTokens.trackBackgroundColorOnHover, _Switch.switchTokens.trackBackgroundColorOff, _Switch.switchTokens.trackBackgroundColorOffHover, _Switch.switchTokens.thumbBackgroundColor, _Switch.switchTokens.thumbBoxShadow)
     },
     disabled: {
       "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Switch.switchTokens.disabledOpacity)

package/styled-components/cjs/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/cjs/examples/plasma_web/components/Switch/Switch.config.js

@@ -10,15 +10,22 @@ var config = exports.config = {
   defaults: {
     view: 'default',
     size: 'm',
+    toggleSize: 'l',
     labelPosition: 'before',
     focused: 'true'
   },
   variations: {
     size: {
-      m: /*#__PURE__*/(0, _styledComponents.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;"], _Switch.switchTokens.fontFamily, _Switch.switchTokens.fontStyle, _Switch.switchTokens.fontWeight, _Switch.switchTokens.fontWeight, _Switch.switchTokens.lineHeight, _Switch.switchTokens.fontSize, _Switch.switchTokens.letterSpacing, _Switch.switchTokens.trackWidth, _Switch.switchTokens.trackHeight, _Switch.switchTokens.trackBorderRadius, _Switch.switchTokens.trackHeight, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbBorderRadius, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbOffset, _Switch.switchTokens.thumbPressScale, _Switch.switchTokens.labelOffset)
+      s: /*#__PURE__*/(0, _styledComponents.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;"], _Switch.switchTokens.fontFamily, _Switch.switchTokens.fontStyle, _Switch.switchTokens.fontWeight, _Switch.switchTokens.lineHeight, _Switch.switchTokens.fontSize, _Switch.switchTokens.letterSpacing, _Switch.switchTokens.descriptionFontFamily, _Switch.switchTokens.descriptionFontStyle, _Switch.switchTokens.descriptionFontWeight, _Switch.switchTokens.descriptionLineHeight, _Switch.switchTokens.descriptionFontSize, _Switch.switchTokens.descriptionLetterSpacing, _Switch.switchTokens.verticalGap, _Switch.switchTokens.labelOffset),
+      m: /*#__PURE__*/(0, _styledComponents.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;"], _Switch.switchTokens.fontFamily, _Switch.switchTokens.fontStyle, _Switch.switchTokens.fontWeight, _Switch.switchTokens.lineHeight, _Switch.switchTokens.fontSize, _Switch.switchTokens.letterSpacing, _Switch.switchTokens.descriptionFontFamily, _Switch.switchTokens.descriptionFontStyle, _Switch.switchTokens.descriptionFontWeight, _Switch.switchTokens.descriptionLineHeight, _Switch.switchTokens.descriptionFontSize, _Switch.switchTokens.descriptionLetterSpacing, _Switch.switchTokens.verticalGap, _Switch.switchTokens.labelOffset),
+      l: /*#__PURE__*/(0, _styledComponents.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;"], _Switch.switchTokens.fontFamily, _Switch.switchTokens.fontStyle, _Switch.switchTokens.fontWeight, _Switch.switchTokens.lineHeight, _Switch.switchTokens.fontSize, _Switch.switchTokens.letterSpacing, _Switch.switchTokens.descriptionFontFamily, _Switch.switchTokens.descriptionFontStyle, _Switch.switchTokens.descriptionFontWeight, _Switch.switchTokens.descriptionLineHeight, _Switch.switchTokens.descriptionFontSize, _Switch.switchTokens.descriptionLetterSpacing, _Switch.switchTokens.verticalGap, _Switch.switchTokens.labelOffset)
+    },
+    toggleSize: {
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.75rem;", ":1.75rem;", ":calc(var(", ") / 2);", ":1.5rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;"], _Switch.switchTokens.trackWidth, _Switch.switchTokens.trackHeight, _Switch.switchTokens.trackBorderRadius, _Switch.switchTokens.trackHeight, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbBorderRadius, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbOffset, _Switch.switchTokens.thumbPressScale),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":1.25rem;", ":calc(var(", ") / 2);", ":1rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;"], _Switch.switchTokens.trackWidth, _Switch.switchTokens.trackHeight, _Switch.switchTokens.trackBorderRadius, _Switch.switchTokens.trackHeight, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbBorderRadius, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbOffset, _Switch.switchTokens.thumbPressScale)
     },
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.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);"], _Switch.switchTokens.trackBackgroundColorOn, _Switch.switchTokens.trackBackgroundColorOnHover, _Switch.switchTokens.trackBackgroundColorOff, _Switch.switchTokens.trackBackgroundColorOffHover, _Switch.switchTokens.thumbBackgroundColor, _Switch.switchTokens.thumbBoxShadow)
+      "default": /*#__PURE__*/(0, _styledComponents.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);"], _Switch.switchTokens.labelColor, _Switch.switchTokens.descriptionColor, _Switch.switchTokens.trackBackgroundColorOn, _Switch.switchTokens.trackBackgroundColorOnHover, _Switch.switchTokens.trackBackgroundColorOff, _Switch.switchTokens.trackBackgroundColorOffHover, _Switch.switchTokens.thumbBackgroundColor, _Switch.switchTokens.thumbBoxShadow)
     },
     disabled: {
       "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Switch.switchTokens.disabledOpacity)

package/styled-components/cjs/examples/plasma_web/components/Switch/Switch.stories.tsx

@@ -17,9 +17,17 @@ const meta: Meta<SwitchProps> = {
     title: 'plasma_web/Switch',
     decorators: [WithTheme],
     component: Switch,
-    argTypes: argTypesFromConfig(mergeConfig(switchConfig, config), ['size', 'view', 'focused']),
+    argTypes: {
+        ...argTypesFromConfig(mergeConfig(switchConfig, config), ['view', 'focused']),
+        labelPosition: {
+            options: ['before', 'after'],
+            control: { type: 'select' },
+        },
+    },
     args: {
         label: 'Label',
+        description: 'Description',
+        labelPosition: 'before',
     },
 };
 
@@ -57,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/components/Dropdown/Dropdown.js

@@ -1,4 +1,4 @@
-var _excluded = ["items", "children", "placement", "offset", "closeOnOverlayClick", "onToggle", "size", "view", "itemRole", "className", "listWidth", "listHeight", "listOverflow", "closeOnSelect", "onHover", "onItemSelect", "onItemClick", "trigger", "variant", "hasArrow", "alwaysOpened", "portal"];
+var _excluded = ["items", "children", "placement", "offset", "closeOnOverlayClick", "onToggle", "size", "view", "itemRole", "className", "listWidth", "listHeight", "listOverflow", "closeOnSelect", "onHover", "onItemSelect", "onItemClick", "trigger", "variant", "hasArrow", "portal"];
 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -57,8 +57,6 @@ export var dropdownRoot = function dropdownRoot(Root) {
       variant = _ref$variant === void 0 ? 'normal' : _ref$variant,
       _ref$hasArrow = _ref.hasArrow,
       hasArrow = _ref$hasArrow === void 0 ? true : _ref$hasArrow,
-      _ref$alwaysOpened = _ref.alwaysOpened,
-      alwaysOpened = _ref$alwaysOpened === void 0 ? false : _ref$alwaysOpened,
       portal = _ref.portal,
       rest = _objectWithoutProperties(_ref, _excluded);
     var _useReducer = useReducer(pathReducer, []),
@@ -79,7 +77,7 @@ export var dropdownRoot = function dropdownRoot(Root) {
 
     // Логика работы при клике за пределами выпадающего списка
     var targetRef = useOutsideClick(function (event) {
-      if (!isCurrentListOpen || !closeOnOverlayClick || alwaysOpened) {
+      if (!isCurrentListOpen || !closeOnOverlayClick) {
         return;
       }
       dispatchPath({
@@ -93,7 +91,7 @@ export var dropdownRoot = function dropdownRoot(Root) {
       }
     }, floatingPopoverRef);
     var handleGlobalToggle = function handleGlobalToggle(opened, event) {
-      if (alwaysOpened || opened) {
+      if (opened) {
         dispatchPath({
           type: 'opened_first_level'
         });
@@ -122,7 +120,7 @@ export var dropdownRoot = function dropdownRoot(Root) {
         onItemClick: onItemClick
       }),
       onKeyDown = _useKeyNavigation.onKeyDown;
-    var isCurrentListOpen = alwaysOpened || Boolean(path[0]);
+    var isCurrentListOpen = Boolean(path[0]);
     return /*#__PURE__*/React.createElement(Context.Provider, {
       value: {
         focusedPath: focusedPath,

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);