@salutejs/plasma-new-hope 0.82.1-canary.1210.9126725322.0 → 0.83.0-canary.1213.9159050781.0

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

@@ -32,9 +32,7 @@ export function App() {
 ```
 
 ### Инициалы вместо фотографии
-Инициалы можно задать с помощью свойства `name`.
-Желательный формат строки - "Имя Фамилия".
-Также не должно быть свойства url.
+Инициалы можно задать с помощью свойства `name`. Желательный формат строки - "Имя Фамилия". Также не должно быть свойства url.
 
 ```tsx live
 import React from 'react';

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

@@ -11,7 +11,7 @@ import { PropsTable, Description } from '@site/src/components';
 
 ## Примеры
 
-### Размер badge
+### Размер бейджа
 Размер задается с помощью свойства `size`.
 
 Возможные значения свойства: `"l"`, `"m"`, `"s"`.
@@ -31,7 +31,7 @@ export function App() {
 }
 ```
 
-### Скругленность badge
+### Скругленность бейджа
 Скругленность задается с помощью свойства `pilled`:
 
 ```tsx live 
@@ -49,16 +49,16 @@ export function App() {
 }
 ```
 
-### Вид badge
-Вид `badge` задается с помощью свойства `view`. Возможные значения свойства `view`:
+### Вид бейджа
+Вид бейджа задается с помощью свойства `view`. Возможные значения свойства `view`:
 
-+ `"primary"` – основной badge;
++ `"primary"` – основной бейдж;
 + `"accent"` – бейдж акцентного цвета;
 + `"positive"` – успешное завершение;
 + `"warning"` – предупреждение;
 + `"negative"` – ошибка;
-+ `"dark"` – темный badge;
-+ `"light"` – светлый badge.
++ `"dark"` – темный бэйдж;
++ `"light"` – светлый бэйдж.
 
 ```tsx live 
 import React from 'react';
@@ -79,7 +79,7 @@ export function App() {
 }
 ```
 
-Так же на вид badge влияет свойство `transparent`:
+так же на вид бейджа влияет свойство `transparent`:
 
 ```tsx live 
 import React from 'react';
@@ -101,7 +101,7 @@ export function App() {
 ```
 
 ### Иконка слева / справа
-В левой и/или правой части badge можно отобразить иконку:
+В левой и/или правой части бейджа можно отобразить иконку:
 
 ```tsx live
 import React from 'react';

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

@@ -1,6 +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 _StyledSpinner;
-var _excluded = ["children", "view", "size", "text", "contentLeft", "contentRight", "isLoading", "loader", "stretch", "square", "pin", "disabled", "focused", "outlined", "className", "blur", "style", "stretching"];
+var _excluded = ["children", "view", "size", "text", "value", "contentLeft", "contentRight", "contentPlacing", "isLoading", "loader", "stretch", "square", "pin", "disabled", "focused", "outlined", "className", "blur", "style", "stretching"];
 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; }
@@ -18,7 +18,7 @@ import { base as disabledCSS } from './variations/_disabled/base';
 import { base as focusedCSS } from './variations/_focused/base';
 import { base as stretchingCSS } from './variations/_stretching/base';
 import { base as blurredCSS } from './variations/_blurred/base';
-import { base, ButtonText, Loader, LoadWrap, StyledSpinner } from './Button.styles';
+import { base, ButtonText, ButtonValue, Loader, LoadWrap, StyledContentLeft, StyledContentRight, StyledSpinner } from './Button.styles';
 import { classes, tokens } from './Button.tokens';
 export var buttonRoot = function buttonRoot(Root) {
   return /*#__PURE__*/forwardRef(function (props, ref) {
@@ -26,8 +26,11 @@ export var buttonRoot = function buttonRoot(Root) {
       view = props.view,
       size = props.size,
       text = props.text,
+      value = props.value,
       contentLeft = props.contentLeft,
       contentRight = props.contentRight,
+      _props$contentPlacing = props.contentPlacing,
+      contentPlacing = _props$contentPlacing === void 0 ? 'default' : _props$contentPlacing,
       isLoading = props.isLoading,
       loader = props.loader,
       stretch = props.stretch,
@@ -44,23 +47,34 @@ export var buttonRoot = function buttonRoot(Root) {
       rest = _objectWithoutProperties(props, _excluded);
     var txt = typeof children === 'string' ? children : text;
     var stretchingClass = stretch ? classes.filledStretching : classes["".concat(stretching, "Stretching")];
+    var contentRelaxedClass = contentPlacing === 'relaxed' ? classes.contentRelaxed : undefined;
     var squareClass = square ? classes.buttonSquare : undefined;
     var buttonBorderRadius = pin ? convertRoundnessMatrix(pin, "var(".concat(tokens.buttonRadius, ")"), "var(".concat(tokens.buttonHeight, ")")) : "var(".concat(tokens.buttonRadius, ", calc(var(").concat(tokens.buttonHeight, ") / 4))");
+    var contentPlacingMapper = {
+      "default": 'center',
+      relaxed: 'space-between'
+    };
+    var contentPlacementValue = contentPlacing ? contentPlacingMapper[contentPlacing] : 'center';
     return /*#__PURE__*/React.createElement(Root, _extends({
       type: "button",
       ref: ref,
       view: view,
       size: size,
+      value: value,
       disabled: disabled,
       focused: focused || outlined,
+      contentPlacing: contentPlacing,
       className: cx(squareClass, stretchingClass, classes.buttonItem, className),
       style: _objectSpread(_objectSpread({}, style), {}, {
         '--plasma_computed-btn-br': buttonBorderRadius,
         '--plasma_private-blur': blur
       })
     }, rest), /*#__PURE__*/React.createElement(LoadWrap, {
+      contentPlacing: contentPlacementValue,
       isLoading: isLoading
-    }, contentLeft, txt ? /*#__PURE__*/React.createElement(ButtonText, null, txt) : children, contentRight), isLoading && /*#__PURE__*/React.createElement(Loader, null, loader || _StyledSpinner || (_StyledSpinner = /*#__PURE__*/React.createElement(StyledSpinner, null))));
+    }, contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), txt ? /*#__PURE__*/React.createElement(ButtonText, {
+      className: contentRelaxedClass
+    }, txt) : children, value && /*#__PURE__*/React.createElement(ButtonValue, null, value), contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight)), isLoading && /*#__PURE__*/React.createElement(Loader, null, loader || _StyledSpinner || (_StyledSpinner = /*#__PURE__*/React.createElement(StyledSpinner, null))));
   });
 };
 export var buttonConfig = {

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

@@ -10,28 +10,36 @@ import { classes, tokens } from './Button.tokens';
 // issue #823
 var mergedConfig = /*#__PURE__*/mergeConfig(spinnerConfig);
 var Spinner = /*#__PURE__*/component(mergedConfig);
-export var base = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    box-sizing: border-box;\n    justify-content: center;\n\n    appearance: none;\n    border: none;\n    cursor: pointer;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n    a& {\n        text-decoration: none;\n    }\n\n    /* NOTE: \n        --plasma_computed-btn-br-radius is defined in Button.tsx\n    */\n    --plasma_private-btn-br: var(--plasma_computed-btn-br);\n    border-radius: var(--plasma_private-btn-br);\n\n    &&.", " {\n        width: var(", ");\n        padding: 0;\n    }\n"])), /*#__PURE__*/String(classes.buttonSquare), tokens.buttonHeight);
-
-// TODO: PLASMA-2164
-// WHY do we need applyEllipsis ??
-// Если внутри кнопки тескт и на нее решили повесить square пропс
 export var ButtonText = /*#__PURE__*/styled.span.withConfig({
   componentId: "plasma-new-hope__sc-9d9bqj-0"
-})([":not(:last-child){margin-right:0.375rem;}:not(:first-child){margin-left:0.375rem;}", ""], /*#__PURE__*/applyEllipsis());
+})(["min-width:4ch;flex-shrink:2;", " &.", "{text-align:start;flex-grow:2;}"], /*#__PURE__*/applyEllipsis(), /*#__PURE__*/String(classes.contentRelaxed));
+export var ButtonValue = /*#__PURE__*/styled.span.withConfig({
+  componentId: "plasma-new-hope__sc-9d9bqj-1"
+})(["color:var(", ");margin:var(", ");min-width:4ch;", ""], tokens.buttonValueColor, tokens.buttonValueMargin, /*#__PURE__*/applyEllipsis());
 
 // TODO: #720
 export var LoadWrap = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-9d9bqj-1"
-})(["opacity:", ";display:flex;width:100%;align-items:inherit;justify-content:inherit;height:100%;"], function (_ref) {
+  componentId: "plasma-new-hope__sc-9d9bqj-2"
+})(["opacity:", ";display:flex;align-items:inherit;justify-content:", ";height:100%;width:100%;"], function (_ref) {
   var isLoading = _ref.isLoading;
   return isLoading ? '0' : '1';
+}, function (_ref2) {
+  var contentPlacing = _ref2.contentPlacing;
+  return contentPlacing;
 });
 export var Loader = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-9d9bqj-2"
+  componentId: "plasma-new-hope__sc-9d9bqj-3"
 })(["position:absolute;"]);
 export var StyledSpinner = /*#__PURE__*/styled(Spinner).withConfig({
-  componentId: "plasma-new-hope__sc-9d9bqj-3"
+  componentId: "plasma-new-hope__sc-9d9bqj-4"
 })(["", ":var(", ");", ":var(", ");"], spinnerTokens.size, tokens.buttonSpinnerSize, spinnerTokens.color, tokens.buttonSpinnerColor);
+export var StyledContentLeft = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-9d9bqj-5"
+})(["margin:var(", ");"], tokens.buttonLeftContentMargin);
+export var StyledContentRight = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-9d9bqj-6"
+})(["margin:var(", ");"], tokens.buttonRightContentMargin);
+export var base = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    box-sizing: border-box;\n    justify-content: center;\n\n    appearance: none;\n    border: none;\n    cursor: pointer;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n    a& {\n        text-decoration: none;\n    }\n\n    /* NOTE: \n        --plasma_computed-btn-br-radius is defined in Button.tsx\n    */\n    --plasma_private-btn-br: var(--plasma_computed-btn-br);\n    border-radius: var(--plasma_private-btn-br);\n\n    &&.", " {\n        width: var(", ");\n        padding: 0;\n    }\n"])), /*#__PURE__*/String(classes.buttonSquare), tokens.buttonHeight);
 
 // INFO: Для возможности переиспользования стилей в других компонентах
 export var baseContent = /*#__PURE__*/"\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    box-sizing: border-box;\n    justify-content: center;\n\n    appearance: none;\n    border: none;\n    cursor: pointer;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n    a& {\n        text-decoration: none;\n    }\n\n    /* NOTE: \n        --plasma_computed-btn-br-radius is defined in Button.tsx\n    */\n    --plasma_private-btn-br: var(--plasma_computed-btn-br);\n    border-radius: var(--plasma_private-btn-br);\n\n    &&.".concat(String(classes.buttonSquare), " {\n        width: var(").concat(tokens.buttonHeight, ");\n        padding: 0;\n    }\n\n    color: var(").concat(tokens.buttonColor, ");\n    background-color: var(").concat(tokens.buttonBackgroundColor, ");\n\n    :hover {\n        color: var(").concat(tokens.buttonColorHover, ", var(").concat(tokens.buttonColor, "));\n        background-color: var(").concat(tokens.buttonBackgroundColorHover, ", var(").concat(tokens.buttonBackgroundColor, "));\n\n        scale: var(").concat(tokens.buttonScaleHover, ");\n    }\n\n    :active {\n        color: var(").concat(tokens.buttonColorActive, ", var(").concat(tokens.buttonColor, "));\n        background-color: var(").concat(tokens.buttonBackgroundColorActive, ", var(").concat(tokens.buttonBackgroundColor, "));\n\n        scale: var(").concat(tokens.buttonScaleActive, ");\n    }\n\n    height: var(").concat(tokens.buttonHeight, ");\n    width: var(").concat(tokens.buttonWidth, ");\n\n    /* TODO: #714 move these calc's to plasma-mapping | ds-generator and add Math.round() */\n    padding: 0 var(").concat(tokens.buttonPadding, ", calc(var(").concat(tokens.buttonHeight, ") * 1.618 / 4));\n\n    font-family: var(").concat(tokens.buttonFontFamily, ");\n    font-size: var(").concat(tokens.buttonFontSize, ");\n    font-style: var(").concat(tokens.buttonFontStyle, ");\n    font-weight: var(").concat(tokens.buttonFontWeight, ");\n    letter-spacing: var(").concat(tokens.buttonLetterSpacing, ");\n    line-height: var(").concat(tokens.buttonLineHeight, ");\n\n    /* TODO: #710 make it token API ? */\n    --plasma_private-btn-outline-size: var(--plasma-button-outline-size, 0.0625rem);\n\n    :focus {\n        outline: none;\n    }\n\n    ").concat(addFocus({
@@ -39,4 +47,4 @@ export var baseContent = /*#__PURE__*/"\n    position: relative;\n    display: i
   outlineSize: 'var(--plasma_private-btn-outline-size)',
   outlineRadius: 'calc(0.125rem + var(--plasma_private-btn-br))',
   outlineColor: "var(".concat(tokens.buttonFocusColor, ")")
-}), "\n\n    &[disabled] {\n        opacity: var(").concat(tokens.buttonDisabledOpacity, ");\n        cursor: not-allowed;\n\n        :hover,\n        :active {\n            scale: none;\n\n            color: var(").concat(tokens.buttonColor, ");\n            background-color: var(").concat(tokens.buttonBackgroundColor, ");\n        }\n    }\n\n    &.").concat(classes.fixedStretching, " {\n        width: var(").concat(tokens.buttonWidth, ");\n    }\n    &.").concat(classes.filledStretching, " {\n        width: 100%;\n    }\n    &.").concat(classes.autoStretching, " {\n        width: auto;\n    }\n");
+}), "\n\n    &[disabled] {\n        opacity: var(").concat(tokens.buttonDisabledOpacity, ");\n        cursor: not-allowed;\n\n        :hover,\n        :active {\n            scale: none;\n\n            color: var(").concat(tokens.buttonColor, ");\n            background-color: var(").concat(tokens.buttonBackgroundColor, ");\n        }\n    }\n\n    &.").concat(classes.fixedStretching, " {\n        width: var(").concat(tokens.buttonWidth, ");\n    }\n    &.").concat(classes.filledStretching, " {\n        width: 100%;\n    }\n    &.").concat(classes.autoStretching, " {\n        width: fit-content;\n    }\n");

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

@@ -21,7 +21,7 @@ import { PropsTable, Description } from '@site/src/components';
 
 ```tsx live
 import React from 'react';
-import { Button } from '@salutejs/{{ package }}';
+import { Button } from '@salutejs/{{package}}';
 import { IconDownload } from '@salutejs/plasma-icons';
 
 export function App() {
@@ -55,7 +55,7 @@ export function App() {
 
 ```tsx live
 import React from 'react';
-import { Button } from '@salutejs/{{ package }}';
+import { Button } from '@salutejs/{{package}}';
 
 export function App() {
     return (
@@ -68,6 +68,48 @@ export function App() {
 }
 ```
 
+### Ширина кнопки
+Ширина кнопки регулируется с помощью свойства `stretching`.
+Возможные значения свойства `contentPlacing`:
++ `auto` – ширина подстраивается под контент;
++ `filled` – кнопка растягивается на всю доступную ширину;
++ `fixed` – кнопка фиксированной ширины.
+
+```tsx live
+import React from 'react';
+import { Button } from '@salutejs/{{package}}';
+
+export function App() {
+    return (
+        <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+            <Button text="Button" stretching="fixed" />
+            <Button text="Button" stretching="auto" />
+            <Button text="Button" stretching="filled" />
+        </div>
+    );
+}
+```
+
+### Позиционирование контента внутри
+Позиционирование контента внутри кнопки регулируется с помощью свойства `contentPlacing`.
+Возможные значения свойства `contentPlacing`:
++ `default` – контент центрируется;
++ `relaxed` – контент распологается по краям.
+
+```tsx live
+import React from 'react';
+import { Button } from '@salutejs/{{package}}';
+
+export function App() {
+    return (
+        <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+            <Button text="Hello" value="Plasma" stretching="filled" contentPlacing="default" />
+            <Button text="Hello" value="Plasma" stretching="filled" contentPlacing="relaxed" />
+        </div>
+    );
+}
+```
+
 ### Вид кнопки
 Вид кнопки задается с помощью свойства `view`. Возможные значения свойства `view`:
 + `"primary"` – основная;
@@ -80,7 +122,7 @@ export function App() {
 
 ```tsx live
 import React from 'react';
-import { Button } from '@salutejs/{{ package }}';
+import { Button } from '@salutejs/{{package}}';
 
 export function App() {
     return (
@@ -106,7 +148,7 @@ export function App() {
 
 ```tsx live
 import React from 'react';
-import { Button } from '@salutejs/{{ package }}';
+import { Button } from '@salutejs/{{package}}';
 
 export function App() {
     return (
@@ -132,15 +174,15 @@ export function App() {
 
 ```tsx live
 import React from 'react';
-import { Button } from '@salutejs/{{ package }}';
+import { Button } from '@salutejs/{{package}}';
 import { IconDownload } from '@salutejs/plasma-icons';
 
 export function App() {
     return (
         <div>
-            <Button contentLeft={<IconDownload color="inherit" />} />
+            <Button contentLeft={<IconDownload />} />
 
-            <Button contentLeft={<IconDownload color="inherit" />} pin="circle-circle" />
+            <Button contentLeft={<IconDownload />} pin="circle-circle" />
         </div>
     );
 }
@@ -151,7 +193,8 @@ export function App() {
 
 ```tsx live
 import React from 'react';
-import { Button } from '@salutejs/{{ package }}';
+import { Button } from '@salutejs/{{package}}';
+import { IconDownload } from '@salutejs/plasma-icons';
 
 export function App() {
     return (

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

@@ -3,11 +3,13 @@ export var classes = {
   autoStretching: 'button-stretching-auto',
   filledStretching: 'button-stretching-filled',
   fixedStretching: 'button-stretching-fixed',
+  contentRelaxed: 'button-content-relaxed',
   buttonSquare: 'button-square',
   buttonItem: 'button-item'
 };
 export var tokens = {
   buttonColor: '--plasma-button-color',
+  buttonValueColor: '--plasma-button-value-color',
   buttonBackgroundColor: '--plasma-button-background-color',
   buttonColorHover: '--plasma-button-color-hover',
   buttonBackgroundColorHover: '--plasma-button-background-color-hover',
@@ -26,6 +28,9 @@ export var tokens = {
   buttonFontWeight: '--plasma-button-font-weight',
   buttonLetterSpacing: '--plasma-button-letter-spacing',
   buttonLineHeight: '--plasma-button-line-height',
+  buttonLeftContentMargin: '--plasma-button-left-content-margin',
+  buttonRightContentMargin: '--plasma-button-right-content-margin',
+  buttonValueMargin: '--plasma-button-value-margin',
   buttonDisabledOpacity: '--plasma-button-disabled-opacity',
   buttonFocusColor: '--plasma-button-focus-color',
   buttonSpinnerColor: '--plasma-button-spinner-color',

package/styled-components/es/components/Button/variations/_stretching/base.js

@@ -1,3 +1,3 @@
 import { css } from 'styled-components';
 import { classes, tokens } from '../../Button.tokens';
-export var base = /*#__PURE__*/css(["&.", "{width:var(", ");}&.", "{width:100%;}&.", "{width:auto;}"], classes.fixedStretching, tokens.buttonWidth, classes.filledStretching, classes.autoStretching);
+export var base = /*#__PURE__*/css(["&.", "{width:var(", ");}&.", "{width:100%;}&.", "{width:fit-content;}"], classes.fixedStretching, tokens.buttonWidth, classes.filledStretching, classes.autoStretching);

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

@@ -14,7 +14,7 @@ import { PropsTable, Description } from '@site/src/components';
 
 ```tsx live
 import React from 'react';
-import { Checkbox } from '@salutejs/{{ package }}';
+import { Checkbox } from '@salutejs/s{{package}}';
 
 export function App() {
     return (
@@ -31,7 +31,7 @@ export function App() {
 
 ```tsx live
 import React from 'react';
-import { Checkbox } from '@salutejs/{{ package }}';
+import { Checkbox } from '@salutejs/s{{package}}';
 
 export function App() {
     return (

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

@@ -72,7 +72,7 @@ export function App() {
 Вид Chip задается с помощью свойства `view`. Возможные значения свойства `view`:
 + `"default"` – основная;
 + `"secondary"` – вторичная;
-+ `"accent"` – акцентный;
++ `"accent"` – акцентый.
 
 ```tsx live
 import React from 'react';

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

@@ -22,24 +22,24 @@ import { PropsTable, Description } from '@site/src/components';
 ## Клавиатурная навигация
 
 Данный компонент может полностью управляться с помощью клавиатуры, используя следующие клавиши:
--  `Tab` - переход на target (input)
+-  `Tab` - переход на таргет (инпут)
 -  `Shift` + `tab` - выход с него (теряем фокус)
 -  `Стрелка вверх` / `стрелка вниз` - открыть выпадающий список и переместиться на первый элемент
 -  `Стрелка вверх` / `стрелка вниз` ходим по элементам с зацикливанием
--  `Enter` - выбираем элемент, закрываем выпадающий список и переходим фокусом снова на target (input)
--  Если мы ходим по select и нажимаем `Tab` - выпадающий список закрывается и теряем фокус
--  Если мы ходим по select и нажимаем `Escape` - выпадающий список закрывается и фокусом остаёмся на target
--  В multi-select то же самое кроме закрытия выпадающего списка при выборе элемента
+-  `Enter` - выбираем элемент, закрываем выпадающий список и переходим фокусом снова на таргет (инпут)
+-  Если мы ходим по селекту и нажимаем `Tab` - выпадающий список закрывается и теряем фокус
+-  Если мы ходим по селекту и нажимаем `Escape` - выпадающий список закрывается и фокусом остаёмся на таргете
+-  В мультиселекте то же самое кроме закрытия выпадающего списка при выборе элемента
 -  Когда находимся на первом чипе, нажимаем `стрелку влево` / `стрелку вправо` - переходим по чипам
--  Когда оказываемся на последнем чипе и нажимаем `стрелку вправо` - переходим на target (input)
--  Когда находимся на target (input) и нажимаем `Backspace` - удаляется последний чип
--  Когда находимся на target (input) и нажимаем `стрелку влево` - переходим на последний чип
+-  Когда оказываемся на последнем чипе и нажимаем `стрелку вправо` - переходим на таргет (инпут)  
+-  Когда находимся на таргете (инпуте) и нажимаем `Backspace` - удаляется последний чип
+-  Когда находимся на таргете (инпуте) и нажимаем `стрелку влево` - переходим на последний чип
 -  Нажимаем `Backspace` - удаляем выбранный чип и переходим на предыдущий
--  Если удалили последний чип, то фокусируемся на target
+-  Если удалили последний чип, то фокусируемся на таргете
 -  Если находимся в выборе элемента из выпадающего списка и нажимаем `стрелку влево` / `стрелку вправо` - попадаем на самый последний чип
 -  Если находимся в режиме выбора элемента и нажимаем `стрелку вниз` / `стрелку вверх` находясь на последнем / первом элементе, то перескакиваем в начало / в конец
--  Если находимся в режиме выбора элемента и нажимаем любую клавишу **кроме** `стрелки вниз` / `вверх` / `влево` / `вправо` / `Escape` / `Tab` / `Enter`, то переходим на target (input) и вводим значения
--  Ввод значение в target (input) приводит к фильтрации элементов в выпадающем списке. Если значение не соответствует ни одному элементу, то отобразится сообщение "Элементы не найдены"
+-  Если находимся в режиме выбора элемента и нажимаем любую клавишу **кроме** `стрелки вниз` / `вверх` / `влево` / `вправо` / `Escape` / `Tab` / `Enter`, то переходим на таргет (инпут) и вводим значения
+-  Ввод значение в таргет (инпут) приводит к фильтрации элементов в выпадающем списке. Если значение не соответствует ни одному элементу, то отобразится сообщение "Элементы не найдены"
 
 ### Single 
 
@@ -178,12 +178,12 @@ export function App() {
 ```
 
 ### Применение пользовательского фильтра 
-`Combobox` поддерживает возможность создавать собственные правила для фильтрации списка элементов с помощью функции callback `filterFunction`,
-которая срабатывает на каждый элемент и если возвращает `true`, то элемент rendering, иначе нет.
+`Combobox` поддерживает возможность создавать собственные правила для фильтрации списка элементов с помощью функции колбэка `filterFunction`,
+которая срабатывает на каждый элемент и если возвращает `true`, то элемент рендерится, иначе нет.
 
 ```tsx live
 import React from 'react';
-import { Combobox, ComboboxItem } from '@salutejs/{{ package }}';
+import { Combobox } from '@salutejs/{{ package }}';
 
 export function App() {
     const [value, setValue] = React.useState(['item_0']);

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

@@ -11,7 +11,7 @@ import { PropsTable, Description } from '@site/src/components';
 
 ## Примеры
 
-### Максимальное значение числового badge
+### Максимальное значение числового бейджа
 Задается с помощью свойства `maxCount`.
 
 ```tsx live 
@@ -28,7 +28,7 @@ export function App() {
 }
 ```
 
-### Размер числового badge
+### Размер числового бейджа
 Размер задается с помощью свойства `size`. Возможные значения свойства: `"xs"` или `"xxs"`.
 
 ```tsx live 
@@ -45,7 +45,7 @@ export function App() {
 }
 ```
 
-### Вид числового badge
+### Вид числового бейджа
 Вид задается с помощью свойства `view`. Возможные значения свойства `view`:
 
 + `"primary"` – основной бейдж;
@@ -53,8 +53,8 @@ export function App() {
 + `"positive"` – успешное завершение;
 + `"warning"` – предупреждение;
 + `"negative"` – ошибка;
-+ `"dark"` – темный badge;
-+ `"light"` – светлый badge.
++ `"dark"` – темный бэйдж;
++ `"light"` – светлый бэйдж.
 
 ```tsx live 
 import React from 'react';

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

@@ -35,13 +35,13 @@ Drawer можно использовать как и на всем окне, т
 а также определить отступы от точки с помощью `offset`.
  
 У компонента Drawer есть 2 режима отображения: 
-- модальный - добавляет при этом подложку(`overlay`), а также блокирует scroll и фокус;
-- немодальный - нет подложки, scroll и фокус не заблокированы.
+модальный - добавляет при этом подложку(`overlay`), а также блокирует скролл и фокус; 
+немодальный - нет подложки, скролл и фокус не заблокированы.
 
 ```tsx live
 import React, { useRef } from 'react';
 import { IconDone } from '@salutejs/plasma-icons';
-import { surfaceSolidSecondary } from '@salutejs/{{ vertical }}/tokens';
+import { surfaceSolidSecondary } from '@salutejs/{{ theme }}';
 
 import { SSRProvider, H3, Button, Drawer, DrawerHeader, DrawerContent, DrawerFooter, PopupProvider } from  '@salutejs/{{ package }}';