@salutejs/plasma-new-hope 0.241.0-dev.0 → 0.241.1-canary.1668.12830115017.0

package/es/index.css

@@ -8,14 +8,14 @@
 
 .base_hy8dc_bdz31nb__bd4ad37e.base_hy8dc_buttonStretchingFixed__bd4ad37e{width:var(--plasma-button-width);}.base_hy8dc_bdz31nb__bd4ad37e.base_hy8dc_buttonStretchingFilled__bd4ad37e{width:100%;}.base_hy8dc_bdz31nb__bd4ad37e.base_hy8dc_buttonStretchingAuto__bd4ad37e{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}
 
-.Button_styles_1sopr3d_bzw1898__8219590b{min-width:4ch;-webkit-flex-shrink:2;-ms-flex-negative:2;flex-shrink:2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.Button_styles_1sopr3d_bzw1898__8219590b.Button_styles_1sopr3d_buttonContentRelaxed__8219590b{text-align:start;-webkit-box-flex:2;-webkit-flex-grow:2;-ms-flex-positive:2;flex-grow:2;}
-.Button_styles_1sopr3d_bdfuqwe__8219590b{color:var(--plasma-button-value-color);margin:var(--plasma-button-value-margin);min-width:4ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
-.Button_styles_1sopr3d_l9ypozh__8219590b{opacity:var(--l9ypozh-0);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:inherit;-webkit-box-align:inherit;-ms-flex-align:inherit;align-items:inherit;-webkit-box-pack:var(--l9ypozh-1);-webkit-justify-content:var(--l9ypozh-1);-ms-flex-pack:var(--l9ypozh-1);justify-content:var(--l9ypozh-1);height:100%;width:100%;}
-.Button_styles_1sopr3d_l4dfhbg__8219590b{position:absolute;}
-.Button_styles_1sopr3d_srdlazt__8219590b{--plasma-spinner-size:var(--plasma-button-spinner-size);--plasma-spinner-color:var(--plasma-button-spinner-color);}
-.Button_styles_1sopr3d_s7rggv0__8219590b{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:var(--plasma-button-left-content-margin);-webkit-align-self:var(--plasma-button-left-content-align-self);-ms-flex-item-align:var(--plasma-button-left-content-align);align-self:var(--plasma-button-left-content-align-self);}
-.Button_styles_1sopr3d_s1rjh7ra__8219590b{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:var(--plasma-button-right-content-margin);-webkit-align-self:var(--plasma-button-right-content-align-self);-ms-flex-item-align:var(--plasma-button-right-content-align);align-self:var(--plasma-button-right-content-align-self);}
-.Button_styles_1sopr3d_b9ga1dj__8219590b{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);--plasma_private-btn-br:var(--plasma_computed-btn-br);border-radius:var(--plasma_private-btn-br);}a.Button_styles_1sopr3d_b9ga1dj__8219590b{-webkit-text-decoration:none;text-decoration:none;}.Button_styles_1sopr3d_b9ga1dj__8219590b.Button_styles_1sopr3d_b9ga1dj__8219590b.Button_styles_1sopr3d_buttonSquare__8219590b{width:var(--plasma-button-height);padding:0;}
+.Button_styles_8cvmld_bzw1898__4694a0fa{min-width:4ch;-webkit-flex-shrink:2;-ms-flex-negative:2;flex-shrink:2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.Button_styles_8cvmld_bzw1898__4694a0fa.Button_styles_8cvmld_buttonContentRelaxed__4694a0fa{text-align:start;-webkit-box-flex:2;-webkit-flex-grow:2;-ms-flex-positive:2;flex-grow:2;}
+.Button_styles_8cvmld_bdfuqwe__4694a0fa{color:var(--plasma-button-value-color);margin:var(--plasma-button-value-margin);min-width:4ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.Button_styles_8cvmld_l9ypozh__4694a0fa{opacity:var(--l9ypozh-0);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:inherit;-webkit-box-align:inherit;-ms-flex-align:inherit;align-items:inherit;-webkit-box-pack:var(--l9ypozh-1);-webkit-justify-content:var(--l9ypozh-1);-ms-flex-pack:var(--l9ypozh-1);justify-content:var(--l9ypozh-1);height:100%;width:100%;}
+.Button_styles_8cvmld_l4dfhbg__4694a0fa{position:absolute;}
+.Button_styles_8cvmld_srdlazt__4694a0fa{--plasma-spinner-size:var(--plasma-button-spinner-size);--plasma-spinner-color:var(--plasma-button-spinner-color);}
+.Button_styles_8cvmld_s7rggv0__4694a0fa{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-self:var(--plasma-button-left-content-align-self);-ms-flex-item-align:var(--plasma-button-left-content-align);align-self:var(--plasma-button-left-content-align-self);margin:var(--s7rggv0-0);}
+.Button_styles_8cvmld_s1rjh7ra__4694a0fa{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-self:var(--plasma-button-right-content-align-self);-ms-flex-item-align:var(--plasma-button-right-content-align);align-self:var(--plasma-button-right-content-align-self);margin:var(--s1rjh7ra-0);}
+.Button_styles_8cvmld_b9ga1dj__4694a0fa{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);--plasma_private-btn-br:var(--plasma_computed-btn-br);border-radius:var(--plasma_private-btn-br);}a.Button_styles_8cvmld_b9ga1dj__4694a0fa{-webkit-text-decoration:none;text-decoration:none;}.Button_styles_8cvmld_b9ga1dj__4694a0fa.Button_styles_8cvmld_b9ga1dj__4694a0fa.Button_styles_8cvmld_buttonSquare__4694a0fa{width:var(--plasma-button-height);padding:0;}
 
 .IconButton_styles_403on7_b1ua728l__d34a8ea7{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);--plasma_private-btn-br:var(--plasma_computed-btn-br);border-radius:var(--plasma_private-btn-br);color:var(--plasma-button-color);background:var(--plasma-button-background-color);height:var(--plasma-button-height);width:var(--plasma-button-width);padding:0 var(--plasma-button-padding,calc(var(--plasma-button-height) * 1.618 / 4));font-family:var(--plasma-button-font-family);font-size:var(--plasma-button-font-size);font-style:var(--plasma-button-font-style);font-weight:var(--plasma-button-font-weight);-webkit-letter-spacing:var(--plasma-button-letter-spacing);-moz-letter-spacing:var(--plasma-button-letter-spacing);-ms-letter-spacing:var(--plasma-button-letter-spacing);letter-spacing:var(--plasma-button-letter-spacing);line-height:var(--plasma-button-line-height);--plasma_private-btn-outline-size:var(--plasma-button-outline-size,0.0625rem);position:relative;--plasma-button-padding:0;--plasma-button-color:var(--plasma-icon-button-color);--plasma-button-background-color:var(--plasma-icon-button-background-color);--plasma-button-color-hover:var(--plasma-icon-button-color-hover);--plasma-button-background-color-hover:var(--plasma-icon-button-background-color-hover);--plasma-button-color-active:var(--plasma-icon-button-color-active);--plasma-button-background-color-active:var(--plasma-icon-button-background-color-active);--plasma-button-loading-background-color:var(--plasma-icon-button-loading-background-color);--plasma-button-font-family:var(--plasma-icon-button-font-family);--plasma-button-font-size:var(--plasma-icon-button-font-size);--plasma-button-font-style:var(--plasma-icon-button-font-style);--plasma-button-font-weight:var(--plasma-icon-button-font-weight);--plasma-button-letter-spacing:var(--plasma-icon-button-letter-spacing);--plasma-button-line-height:var(--plasma-icon-button-line-height);--plasma-button-width:var(--plasma-icon-button-width);--plasma-button-height:var(--plasma-icon-button-height);--plasma-button-radius:var(--plasma-icon-button-radius);--plasma-button-disabled-opacity:var(--plasma-icon-button-disabled-opacity);--plasma-button-focus-color:var(--plasma-icon-button-focus-color);--plasma-button-spinner-size:var(--plasma-icon-button-spinner-size);--plasma-button-spinner-color:var(--plasma-icon-button-spinner-color);}a.IconButton_styles_403on7_b1ua728l__d34a8ea7{-webkit-text-decoration:none;text-decoration:none;}.IconButton_styles_403on7_b1ua728l__d34a8ea7.IconButton_styles_403on7_b1ua728l__d34a8ea7.IconButton_styles_403on7_buttonSquare__d34a8ea7{width:var(--plasma-button-height);padding:0;}.IconButton_styles_403on7_b1ua728l__d34a8ea7:hover{color:var(--plasma-button-color-hover,var(--plasma-button-color));background:var(--plasma-button-background-color-hover,var(--plasma-button-background-color));scale:var(--plasma-button-scale-hover);}.IconButton_styles_403on7_b1ua728l__d34a8ea7:active{color:var(--plasma-button-color-active,var(--plasma-button-color));background:var(--plasma-button-background-color-active,var(--plasma-button-background-color));scale:var(---plasma-button-scale-active);}.IconButton_styles_403on7_b1ua728l__d34a8ea7:focus{outline:none;}.IconButton_styles_403on7_b1ua728l__d34a8ea7::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:var(--plasma_private-btn-outline-size) solid transparent;border-radius:calc(0.125rem + var(--plasma_private-btn-br));-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.IconButton_styles_403on7_b1ua728l__d34a8ea7.IconButton_styles_403on7_focusVisible__d34a8ea7:focus::before,.IconButton_styles_403on7_b1ua728l__d34a8ea7[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 var(--plasma_private-btn-outline-size) var(--plasma-button-focus-color);}.IconButton_styles_403on7_b1ua728l__d34a8ea7[disabled]{opacity:var(--plasma-button-disabled-opacity);cursor:not-allowed;}.IconButton_styles_403on7_b1ua728l__d34a8ea7[disabled]:hover,.IconButton_styles_403on7_b1ua728l__d34a8ea7[disabled]:active{scale:none;color:var(--plasma-button-color);background:var(--plasma-button-background-color);}.IconButton_styles_403on7_b1ua728l__d34a8ea7.IconButton_styles_403on7_buttonStretchingFixed__d34a8ea7{width:var(--plasma-button-width);}.IconButton_styles_403on7_b1ua728l__d34a8ea7.IconButton_styles_403on7_buttonStretchingFilled__d34a8ea7{width:100%;}.IconButton_styles_403on7_b1ua728l__d34a8ea7.IconButton_styles_403on7_buttonStretchingAuto__d34a8ea7{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/plasma-new-hope",
-  "version": "0.241.0-dev.0",
+  "version": "0.241.1-canary.1668.12830115017.0",
   "description": "Salute Design System blueprint",
   "main": "cjs/index.js",
   "module": "es/index.js",
@@ -80,7 +80,7 @@
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.4",
     "@rollup/plugin-node-resolve": "^15.1.0",
-    "@salutejs/plasma-sb-utils": "0.190.0-dev.0",
+    "@salutejs/plasma-sb-utils": "0.190.1-canary.1668.12830115017.0",
     "@salutejs/plasma-themes": "0.28.0",
     "@storybook/addon-docs": "^7.6.17",
     "@storybook/addon-essentials": "^7.6.17",
@@ -131,5 +131,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "4cf77737e0764a42f4df5eac4bbd7a9847539a2d"
+  "gitHead": "bd160178f442bffe1e197cfb7a35d4e6884c8655"
 }

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

@@ -54,6 +54,8 @@ var buttonRoot = exports.buttonRoot = function buttonRoot(Root) {
       stretching = _props$stretching === void 0 ? 'auto' : _props$stretching,
       rest = _objectWithoutProperties(props, _excluded);
     var txt = typeof children === 'string' ? children : text;
+    var hasRightContentMargin = Boolean(txt || value || contentRight);
+    var hasLeftContentMargin = Boolean(contentLeft ? contentLeft && (txt || value) : txt || value);
     var stretchingClass = stretch ? _Button2.classes.filledStretching : _Button2.classes["".concat(stretching, "Stretching")];
     var contentRelaxedClass = contentPlacing === 'relaxed' ? _Button2.classes.contentRelaxed : undefined;
     var squareClass = square ? _Button2.classes.buttonSquare : undefined;
@@ -81,9 +83,13 @@ var buttonRoot = exports.buttonRoot = function buttonRoot(Root) {
     }, rest), /*#__PURE__*/_react["default"].createElement(_Button.LoadWrap, {
       contentPlacing: contentPlacementValue,
       isLoading: isLoading
-    }, contentLeft && /*#__PURE__*/_react["default"].createElement(_Button.StyledContentLeft, null, contentLeft), txt ? /*#__PURE__*/_react["default"].createElement(_Button.ButtonText, {
+    }, contentLeft && /*#__PURE__*/_react["default"].createElement(_Button.StyledContentLeft, {
+      hasContentMargin: hasRightContentMargin
+    }, contentLeft), txt ? /*#__PURE__*/_react["default"].createElement(_Button.ButtonText, {
       className: contentRelaxedClass
-    }, txt) : children, value && /*#__PURE__*/_react["default"].createElement(_Button.ButtonValue, null, value), contentRight && /*#__PURE__*/_react["default"].createElement(_Button.StyledContentRight, null, contentRight)), isLoading && /*#__PURE__*/_react["default"].createElement(_Button.Loader, null, loader || _StyledSpinner || (_StyledSpinner = /*#__PURE__*/_react["default"].createElement(_Button.StyledSpinner, null))));
+    }, txt) : children, value && /*#__PURE__*/_react["default"].createElement(_Button.ButtonValue, null, value), contentRight && /*#__PURE__*/_react["default"].createElement(_Button.StyledContentRight, {
+      hasContentMargin: hasLeftContentMargin
+    }, contentRight)), isLoading && /*#__PURE__*/_react["default"].createElement(_Button.Loader, null, loader || _StyledSpinner || (_StyledSpinner = /*#__PURE__*/_react["default"].createElement(_Button.StyledSpinner, null))));
   });
 };
 var buttonConfig = exports.buttonConfig = {

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

@@ -42,10 +42,16 @@ var StyledSpinner = exports.StyledSpinner = /*#__PURE__*/(0, _styledComponents["
 })(["", ":var(", ");", ":var(", ");"], _Spinner.spinnerTokens.size, _Button.tokens.buttonSpinnerSize, _Spinner.spinnerTokens.color, _Button.tokens.buttonSpinnerColor);
 var StyledContentLeft = exports.StyledContentLeft = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-9d9bqj-5"
-})(["display:flex;margin:var(", ");align-self:var(", ");"], _Button.tokens.buttonLeftContentMargin, _Button.tokens.buttonLeftContentAlignSelf);
+})(["display:flex;align-self:var(", ");margin:", ";"], _Button.tokens.buttonLeftContentAlignSelf, function (_ref3) {
+  var hasContentMargin = _ref3.hasContentMargin;
+  return hasContentMargin ? "var(".concat(_Button.tokens.buttonLeftContentMargin, ")") : 0;
+});
 var StyledContentRight = exports.StyledContentRight = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-9d9bqj-6"
-})(["display:flex;margin:var(", ");align-self:var(", ");"], _Button.tokens.buttonRightContentMargin, _Button.tokens.buttonRightContentAlignSelf);
+})(["display:flex;align-self:var(", ");margin:", ";"], _Button.tokens.buttonRightContentAlignSelf, function (_ref4) {
+  var hasContentMargin = _ref4.hasContentMargin;
+  return hasContentMargin ? "var(".concat(_Button.tokens.buttonRightContentMargin, ")") : 0;
+});
 var base = exports.base = /*#__PURE__*/(0, _styledComponents.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(_Button.classes.buttonSquare), _Button.tokens.buttonHeight);
 
 // INFO: Для возможности переиспользования стилей в других компонентах

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

@@ -8,7 +8,6 @@ import { PropsTable, Description } from '@site/src/components';
 # Button
 Кнопки могут отображаться в нескольких размерах и цветах, могут содержать текст и/или иконку.
 
-## Button
 <Description name="Button" />
 <PropsTable name="Button" />
 
@@ -34,18 +33,18 @@ export function App() {
         <div>
             <Button text="Текст" />
 
-            <Button text="Текст" contentLeft={<IconDownload />} />
+            <Button text="Текст" contentLeft={<IconDownload color="inherit" />} />
 
-            <Button text="Текст" contentRight={<IconDownload />} />
+            <Button text="Текст" contentRight={<IconDownload color="inherit" />} />
 
-            <Button contentLeft={<IconDownload />} />
+            <Button contentLeft={<IconDownload color="inherit" />} />
 
             <Button text="Текст" isLoading />
 
             <Button text="Текст" isLoading loader={<div>Loader...</div>} />
 
             <Button>
-                <IconDownload />
+                <IconDownload color="inherit" />
                 <span>Текст</span>
             </Button>
         </div>
@@ -56,7 +55,7 @@ export function App() {
 ## Примеры
 
 ### Размер кнопки
-Размер кнопки задается с помощью свойства `size`. Возможные значения свойства: `"l"`, `"m"` или `"s"`:
+Размер кнопки задается с помощью свойства `size`:
 
 ```tsx live
 import React from 'react';
@@ -64,11 +63,13 @@ import { Button } from '@salutejs/{{ package }}';
 
 export function App() {
     return (
-       <div>
+        <div>
             <Button text="Button" size="xl" />
             <Button text="Button" size="l" />
             <Button text="Button" size="m" />
             <Button text="Button" size="s" />
+            <Button text="Button" size="xs" />
+            <Button text="Button" size="xxs" />
         </div>
     );
 }
@@ -118,13 +119,17 @@ export function App() {
 
 ### Вид кнопки
 Вид кнопки задается с помощью свойства `view`. Возможные значения свойства `view`:
++ `"default"` – по умолчанию;
++ `"accent"` – акцентная;
 + `"primary"` – основная;
 + `"secondary"` – вторичная;
++ `"clear"` – без цветового сопровождения.
 + `"success"` – успешное завершение;
 + `"warning"` – предупреждение;
 + `"critical"` – ошибка;
-+ `"checked"` – выбранное состояние;
-+ `"clear"` – без цветового сопровождения.
++ `"dark"` – темная;
++ `"black"` – черная;
++ `"white"` – белая.
 
 ```tsx live
 import React from 'react';
@@ -132,15 +137,18 @@ import { Button } from '@salutejs/{{ package }}';
 
 export function App() {
     return (
-        <div>
+        <div style=\{{ display: 'flex', flexWrap: 'wrap' }}>
+            <Button text="Кнопка" size="s" view="default" />
             <Button text="Кнопка" size="s" view="primary" />
+            <Button text="Кнопка" size="s" view="accent" />
             <Button text="Кнопка" size="s" view="secondary" />
+            <Button text="Кнопка" size="s" view="clear" />
             <Button text="Кнопка" size="s" view="success" />
             <Button text="Кнопка" size="s" view="warning" />
             <Button text="Кнопка" size="s" view="critical" />
-            <Button text="Кнопка" size="s" view="checked" />
-            <Button text="Кнопка" size="s" view="overlay" />
-            <Button text="Кнопка" size="s" view="clear" />
+            <Button text="Кнопка" size="s" view="dark" />
+            <Button text="Кнопка" size="s" view="black" />
+            <Button text="Кнопка" size="s" view="white" />
         </div>
     );
 }
@@ -171,29 +179,6 @@ export function App() {
 }
 ```
 
-### Квадратные и круглые кнопки
-Для отображения иконок и/или текста в квадратных или круглых кнопках с **равными сторонами**,
-используйте компонент `Button` и свойство `contentLeft`, в которое требуется передать нужное значение.
-
-По умолчанию границы кнопки **квадратные** (со скругленными углами) — `pin="square-square"`.
-**Круглые** границы кнопки можно сделать с помощью свойства `pin` со значением `"circle-circle"`.
-
-```tsx live
-import React from 'react';
-import { Button } from '@salutejs/{{ package }}';
-import { IconDownload } from '@salutejs/plasma-icons';
-
-export function App() {
-    return (
-        <div>
-            <Button contentLeft={<IconDownload color="inherit" />} />
-
-            <Button contentLeft={<IconDownload color="inherit" />} pin="circle-circle" />
-        </div>
-    );
-}
-```
-
 ### Гиперссылка
 Компонент поддерживает вывод в виде тега `<a>`, для этого необходимо указать свойство `as`:
 

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

@@ -44,6 +44,9 @@ import { IconClose } from '@salutejs/plasma-icons';
 export function App() {
     return (
         <div>
+            <IconButton size="xl">
+                <IconClose color="inherit" />
+            </IconButton>
             <IconButton size="l">
                 <IconClose color="inherit" />
             </IconButton>
@@ -56,6 +59,9 @@ export function App() {
             <IconButton size="xs">
                 <IconClose color="inherit" size="xs" />
             </IconButton>
+            <IconButton size="xxs">
+                <IconClose color="inherit" size="xs" />
+            </IconButton>
         </div>
     );
 }
@@ -66,11 +72,12 @@ export function App() {
 
 Возможные значения свойства `view`:
 + `"default"` – по умолчанию;
++ `"accent"` – акцентная;
 + `"secondary"` – вторичная;
++ `"clear"` – без цветового сопровождения.
 + `"success"` – успешное завершение;
 + `"warning"` – предупреждение;
 + `"critical"` – ошибка;
-+ `"clear"` – без цветового сопровождения;
 + `"dark"` – темная;
 + `"black"` – черная;
 + `"white"` – белая.
@@ -82,13 +89,19 @@ import { IconClose } from '@salutejs/plasma-icons';
 
 export function App() {
     return (
-        <div>
+        <div style=\{{ display: 'flex', flexWrap: 'wrap' }}>
             <IconButton size="s" view="default">
                 <IconClose color="inherit" />
             </IconButton>
+            <IconButton size="s" view="accent">
+                <IconClose color="inherit" />
+            </IconButton>
             <IconButton size="s" view="secondary">
                 <IconClose color="inherit" />
             </IconButton>
+            <IconButton size="s" view="clear">
+                <IconClose color="inherit" />
+            </IconButton>
             <IconButton size="s" view="success">
                 <IconClose color="inherit" />
             </IconButton>
@@ -98,9 +111,6 @@ export function App() {
             <IconButton size="s" view="critical">
                 <IconClose color="inherit" />
             </IconButton>
-            <IconButton size="s" view="clear">
-                <IconClose color="inherit" />
-            </IconButton>
             <IconButton size="s" view="dark">
                 <IconClose  color="inherit" />
             </IconButton>
@@ -128,7 +138,7 @@ import { IconClose } from '@salutejs/plasma-icons';
 
 export function App() {
     return (
-        <div>
+        <div style=\{{ display: 'flex', flexWrap: 'wrap' }}>
             <IconButton pin="square-square">
                 <IconClose color="inherit" />
             </IconButton>

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

@@ -1,15 +1,16 @@
 import * as React from 'react';
 import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
-import { disableProps } from '@salutejs/plasma-sb-utils';
+import { disableProps, getConfigVariations } from '@salutejs/plasma-sb-utils';
 
 import { IconMic } from '../../../../components/_Icon';
 import { WithTheme } from '../../../_helpers';
 
 import { Button } from './Button';
+import { config } from './Button.config';
+
+const { views, sizes } = getConfigVariations(config);
 
-const views = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'];
-const sizes = ['xl', 'l', 'm', 's', 'xs', 'xxs'];
 const stretchingValues = ['auto', 'filled', 'fixed'];
 const pinValues = [
     '',
@@ -79,7 +80,7 @@ const meta: Meta<typeof Button> = {
             },
             table: { defaultValue: { summary: 'bottom' } },
         },
-        ...disableProps(['value']),
+        ...disableProps(['value', 'focused', 'pin']),
     },
 };
 

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

@@ -79,7 +79,7 @@ const meta: Meta<typeof Button> = {
             },
             table: { defaultValue: { summary: 'bottom' } },
         },
-        ...disableProps(['value']),
+        ...disableProps(['value', 'pin', 'focused']),
     },
 };
 

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

@@ -46,6 +46,8 @@ export var buttonRoot = function buttonRoot(Root) {
       stretching = _props$stretching === void 0 ? 'auto' : _props$stretching,
       rest = _objectWithoutProperties(props, _excluded);
     var txt = typeof children === 'string' ? children : text;
+    var hasRightContentMargin = Boolean(txt || value || contentRight);
+    var hasLeftContentMargin = Boolean(contentLeft ? contentLeft && (txt || value) : txt || value);
     var stretchingClass = stretch ? classes.filledStretching : classes["".concat(stretching, "Stretching")];
     var contentRelaxedClass = contentPlacing === 'relaxed' ? classes.contentRelaxed : undefined;
     var squareClass = square ? classes.buttonSquare : undefined;
@@ -73,9 +75,13 @@ export var buttonRoot = function buttonRoot(Root) {
     }, rest), /*#__PURE__*/React.createElement(LoadWrap, {
       contentPlacing: contentPlacementValue,
       isLoading: isLoading
-    }, contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), txt ? /*#__PURE__*/React.createElement(ButtonText, {
+    }, contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, {
+      hasContentMargin: hasRightContentMargin
+    }, 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))));
+    }, txt) : children, value && /*#__PURE__*/React.createElement(ButtonValue, null, value), contentRight && /*#__PURE__*/React.createElement(StyledContentRight, {
+      hasContentMargin: hasLeftContentMargin
+    }, 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

@@ -35,10 +35,16 @@ export var StyledSpinner = /*#__PURE__*/styled(Spinner).withConfig({
 })(["", ":var(", ");", ":var(", ");"], spinnerTokens.size, tokens.buttonSpinnerSize, spinnerTokens.color, tokens.buttonSpinnerColor);
 export var StyledContentLeft = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-9d9bqj-5"
-})(["display:flex;margin:var(", ");align-self:var(", ");"], tokens.buttonLeftContentMargin, tokens.buttonLeftContentAlignSelf);
+})(["display:flex;align-self:var(", ");margin:", ";"], tokens.buttonLeftContentAlignSelf, function (_ref3) {
+  var hasContentMargin = _ref3.hasContentMargin;
+  return hasContentMargin ? "var(".concat(tokens.buttonLeftContentMargin, ")") : 0;
+});
 export var StyledContentRight = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-9d9bqj-6"
-})(["display:flex;margin:var(", ");align-self:var(", ");"], tokens.buttonRightContentMargin, tokens.buttonRightContentAlignSelf);
+})(["display:flex;align-self:var(", ");margin:", ";"], tokens.buttonRightContentAlignSelf, function (_ref4) {
+  var hasContentMargin = _ref4.hasContentMargin;
+  return hasContentMargin ? "var(".concat(tokens.buttonRightContentMargin, ")") : 0;
+});
 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: Для возможности переиспользования стилей в других компонентах

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

@@ -8,7 +8,6 @@ import { PropsTable, Description } from '@site/src/components';
 # Button
 Кнопки могут отображаться в нескольких размерах и цветах, могут содержать текст и/или иконку.
 
-## Button
 <Description name="Button" />
 <PropsTable name="Button" />
 
@@ -34,18 +33,18 @@ export function App() {
         <div>
             <Button text="Текст" />
 
-            <Button text="Текст" contentLeft={<IconDownload />} />
+            <Button text="Текст" contentLeft={<IconDownload color="inherit" />} />
 
-            <Button text="Текст" contentRight={<IconDownload />} />
+            <Button text="Текст" contentRight={<IconDownload color="inherit" />} />
 
-            <Button contentLeft={<IconDownload />} />
+            <Button contentLeft={<IconDownload color="inherit" />} />
 
             <Button text="Текст" isLoading />
 
             <Button text="Текст" isLoading loader={<div>Loader...</div>} />
 
             <Button>
-                <IconDownload />
+                <IconDownload color="inherit" />
                 <span>Текст</span>
             </Button>
         </div>
@@ -56,7 +55,7 @@ export function App() {
 ## Примеры
 
 ### Размер кнопки
-Размер кнопки задается с помощью свойства `size`. Возможные значения свойства: `"l"`, `"m"` или `"s"`:
+Размер кнопки задается с помощью свойства `size`:
 
 ```tsx live
 import React from 'react';
@@ -64,11 +63,13 @@ import { Button } from '@salutejs/{{ package }}';
 
 export function App() {
     return (
-       <div>
+        <div>
             <Button text="Button" size="xl" />
             <Button text="Button" size="l" />
             <Button text="Button" size="m" />
             <Button text="Button" size="s" />
+            <Button text="Button" size="xs" />
+            <Button text="Button" size="xxs" />
         </div>
     );
 }
@@ -118,13 +119,17 @@ export function App() {
 
 ### Вид кнопки
 Вид кнопки задается с помощью свойства `view`. Возможные значения свойства `view`:
++ `"default"` – по умолчанию;
++ `"accent"` – акцентная;
 + `"primary"` – основная;
 + `"secondary"` – вторичная;
++ `"clear"` – без цветового сопровождения.
 + `"success"` – успешное завершение;
 + `"warning"` – предупреждение;
 + `"critical"` – ошибка;
-+ `"checked"` – выбранное состояние;
-+ `"clear"` – без цветового сопровождения.
++ `"dark"` – темная;
++ `"black"` – черная;
++ `"white"` – белая.
 
 ```tsx live
 import React from 'react';
@@ -132,15 +137,18 @@ import { Button } from '@salutejs/{{ package }}';
 
 export function App() {
     return (
-        <div>
+        <div style=\{{ display: 'flex', flexWrap: 'wrap' }}>
+            <Button text="Кнопка" size="s" view="default" />
             <Button text="Кнопка" size="s" view="primary" />
+            <Button text="Кнопка" size="s" view="accent" />
             <Button text="Кнопка" size="s" view="secondary" />
+            <Button text="Кнопка" size="s" view="clear" />
             <Button text="Кнопка" size="s" view="success" />
             <Button text="Кнопка" size="s" view="warning" />
             <Button text="Кнопка" size="s" view="critical" />
-            <Button text="Кнопка" size="s" view="checked" />
-            <Button text="Кнопка" size="s" view="overlay" />
-            <Button text="Кнопка" size="s" view="clear" />
+            <Button text="Кнопка" size="s" view="dark" />
+            <Button text="Кнопка" size="s" view="black" />
+            <Button text="Кнопка" size="s" view="white" />
         </div>
     );
 }
@@ -171,29 +179,6 @@ export function App() {
 }
 ```
 
-### Квадратные и круглые кнопки
-Для отображения иконок и/или текста в квадратных или круглых кнопках с **равными сторонами**,
-используйте компонент `Button` и свойство `contentLeft`, в которое требуется передать нужное значение.
-
-По умолчанию границы кнопки **квадратные** (со скругленными углами) — `pin="square-square"`.
-**Круглые** границы кнопки можно сделать с помощью свойства `pin` со значением `"circle-circle"`.
-
-```tsx live
-import React from 'react';
-import { Button } from '@salutejs/{{ package }}';
-import { IconDownload } from '@salutejs/plasma-icons';
-
-export function App() {
-    return (
-        <div>
-            <Button contentLeft={<IconDownload color="inherit" />} />
-
-            <Button contentLeft={<IconDownload color="inherit" />} pin="circle-circle" />
-        </div>
-    );
-}
-```
-
 ### Гиперссылка
 Компонент поддерживает вывод в виде тега `<a>`, для этого необходимо указать свойство `as`:
 

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

@@ -44,6 +44,9 @@ import { IconClose } from '@salutejs/plasma-icons';
 export function App() {
     return (
         <div>
+            <IconButton size="xl">
+                <IconClose color="inherit" />
+            </IconButton>
             <IconButton size="l">
                 <IconClose color="inherit" />
             </IconButton>
@@ -56,6 +59,9 @@ export function App() {
             <IconButton size="xs">
                 <IconClose color="inherit" size="xs" />
             </IconButton>
+            <IconButton size="xxs">
+                <IconClose color="inherit" size="xs" />
+            </IconButton>
         </div>
     );
 }
@@ -66,11 +72,12 @@ export function App() {
 
 Возможные значения свойства `view`:
 + `"default"` – по умолчанию;
++ `"accent"` – акцентная;
 + `"secondary"` – вторичная;
++ `"clear"` – без цветового сопровождения.
 + `"success"` – успешное завершение;
 + `"warning"` – предупреждение;
 + `"critical"` – ошибка;
-+ `"clear"` – без цветового сопровождения;
 + `"dark"` – темная;
 + `"black"` – черная;
 + `"white"` – белая.
@@ -82,13 +89,19 @@ import { IconClose } from '@salutejs/plasma-icons';
 
 export function App() {
     return (
-        <div>
+        <div style=\{{ display: 'flex', flexWrap: 'wrap' }}>
             <IconButton size="s" view="default">
                 <IconClose color="inherit" />
             </IconButton>
+            <IconButton size="s" view="accent">
+                <IconClose color="inherit" />
+            </IconButton>
             <IconButton size="s" view="secondary">
                 <IconClose color="inherit" />
             </IconButton>
+            <IconButton size="s" view="clear">
+                <IconClose color="inherit" />
+            </IconButton>
             <IconButton size="s" view="success">
                 <IconClose color="inherit" />
             </IconButton>
@@ -98,9 +111,6 @@ export function App() {
             <IconButton size="s" view="critical">
                 <IconClose color="inherit" />
             </IconButton>
-            <IconButton size="s" view="clear">
-                <IconClose color="inherit" />
-            </IconButton>
             <IconButton size="s" view="dark">
                 <IconClose  color="inherit" />
             </IconButton>
@@ -128,7 +138,7 @@ import { IconClose } from '@salutejs/plasma-icons';
 
 export function App() {
     return (
-        <div>
+        <div style=\{{ display: 'flex', flexWrap: 'wrap' }}>
             <IconButton pin="square-square">
                 <IconClose color="inherit" />
             </IconButton>

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

@@ -1,15 +1,16 @@
 import * as React from 'react';
 import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
-import { disableProps } from '@salutejs/plasma-sb-utils';
+import { disableProps, getConfigVariations } from '@salutejs/plasma-sb-utils';
 
 import { IconMic } from '../../../../components/_Icon';
 import { WithTheme } from '../../../_helpers';
 
 import { Button } from './Button';
+import { config } from './Button.config';
+
+const { views, sizes } = getConfigVariations(config);
 
-const views = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'];
-const sizes = ['xl', 'l', 'm', 's', 'xs', 'xxs'];
 const stretchingValues = ['auto', 'filled', 'fixed'];
 const pinValues = [
     '',
@@ -79,7 +80,7 @@ const meta: Meta<typeof Button> = {
             },
             table: { defaultValue: { summary: 'bottom' } },
         },
-        ...disableProps(['value']),
+        ...disableProps(['value', 'focused', 'pin']),
     },
 };
 

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

@@ -79,7 +79,7 @@ const meta: Meta<typeof Button> = {
             },
             table: { defaultValue: { summary: 'bottom' } },
         },
-        ...disableProps(['value']),
+        ...disableProps(['value', 'pin', 'focused']),
     },
 };