@salutejs/plasma-new-hope 0.246.1-canary.1712.12898760233.0 → 0.246.1-dev.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;}
 
@@ -821,8 +821,8 @@
 
 .Button_styles_bj69th_sfplb1t__569490a7{--plasma-button-color:var(--plasma-attach-button-color);--plasma-button-value-color:var(--plasma-attach-button-value-color);--plasma-button-background-color:var(--plasma-attach-button-background-color);--plasma-button-color-hover:var(--plasma-attach-button-color-hover);--plasma-button-background-color-hover:var(--plasma-attach-button-background-color-hover);--plasma-button-color-active:var(--plasma-attach-button-color-active);--plasma-button-background-color-active:var(--plasma-attach-button-background-color-active);--plasma-button-loading-background-color:var(--plasma-attach-button-loading-background-color);--plasma-button-scale-hover:var(--plasma-attach-button-scale-hover);---plasma-button-scale-active:var(---plasma-attach-button-scale-active);--plasma-button-height:var(--plasma-attach-button-height);--plasma-button-width:var(--plasma-attach-button-width);--plasma-button-padding:var(--plasma-attach-button-padding);--plasma-button-radius:var(--plasma-attach-button-radius);--plasma-button-radius-circle:var(--plasma-attach-button-radius-circle);--plasma-button-font-family:var(--plasma-attach-button-font-family);--plasma-button-font-size:var(--plasma-attach-button-font-size);--plasma-button-font-style:var(--plasma-attach-button-font-style);--plasma-button-font-weight:var(--plasma-attach-button-font-weight);--plasma-button-letter-spacing:var(--plasma-attach-button-letter-spacing);--plasma-button-line-height:var(--plasma-attach-button-line-height);--plasma-button-left-content-margin:var(--plasma-attach-button-left-content-margin);--plasma-button-left-content-align-self:var(--plasma-attach-button-left-content-align-self);--plasma-button-right-content-margin:var(--plasma-attach-button-right-content-margin);--plasma-button-right-content-align-self:var(--plasma-attach-button-right-content-align-self);--plasma-button-value-margin:var(--plasma-attach-button-value-margin);--plasma-button-disabled-opacity:var(--plasma-attach-button-disabled-opacity);--plasma-button-focus-color:var(--plasma-attach-button-focus-color);--plasma-button-spinner-color:var(--plasma-attach-button-spinner-color);--plasma-button-spinner-size:var(--plasma-attach-button-spinner-size);}
 
-.IconButton_styles_1q2jfs2_s15ptif0__7aea03a6{--plasma-icon-button-color:var(--plasma-attach-icon-button-color);--plasma-icon-button-background-color:var(--plasma-attach-icon-button-background-color);--plasma-icon-button-loading-background-color:var(--plasma-attach-icon-button-loading-background-color);--plasma-icon-button-color-hover:var(--plasma-attach-icon-button-color-hover);--plasma-icon-button-background-color-hover:var(--plasma-attach-icon-button-background-color-hover);--plasma-icon-button-color-active:var(--plasma-attach-icon-button-color-active);--plasma-icon-button-background-color-active:var(--plasma-attach-icon-button-background-color-active);--plasma-icon-button-scale-hover:var(--plasma-attach-icon-button-scale-hover);---plasma-icon-button-scale-active:var(---plasma-attach-icon-button-scale-active);--plasma-icon-button-height:var(--plasma-attach-icon-button-height);--plasma-icon-button-width:var(--plasma-attach-icon-button-width);--plasma-icon-button-padding:var(--plasma-attach-icon-button-padding);--plasma-icon-button-radius:var(--plasma-attach-icon-button-radius);--plasma-icon-button-radius-circle:var(--plasma-attach-icon-button-radius-circle);--plasma-icon-button-font-family:var(--plasma-attach-icon-button-font-family);--plasma-icon-button-font-size:var(--plasma-attach-icon-button-font-size);--plasma-icon-button-font-style:var(--plasma-attach-icon-button-font-style);--plasma-icon-button-font-weight:var(--plasma-attach-icon-button-font-weight);--plasma-icon-button-letter-spacing:var(--plasma-attach-icon-button-letter-spacing);--plasma-icon-button-line-height:var(--plasma-attach-icon-button-line-height);--plasma-icon-button-disabled-opacity:var(--plasma-attach-icon-button-disabled-opacity);--plasma-icon-button-focus-color:var(--plasma-attach-icon-button-focus-color);--plasma-icon-button-spinner-color:var(--plasma-attach-icon-button-spinner-color);--plasma-icon-button-spinner-size:var(--plasma-attach-icon-button-spinner-size);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}
-.IconButton_styles_1q2jfs2_shuaj1a__7aea03a6{--plasma-icon-button-color:var(--plasma-attach-icon-button-cancel-color);--plasma-icon-button-background-color:var(--plasma-attach-icon-button-cancel-background-color);--plasma-icon-button-loading-background-color:var(--plasma-attach-icon-button-cancel-loading-background-color);--plasma-icon-button-color-hover:var(--plasma-attach-icon-button-cancel-color-hover);--plasma-icon-button-background-color-hover:var(--plasma-attach-icon-button-cancel-background-color-hover);--plasma-icon-button-color-active:var(--plasma-attach-icon-button-cancel-color-active);--plasma-icon-button-background-color-active:var(--plasma-attach-icon-button-cancel-background-color-active);--plasma-icon-button-scale-hover:var(--plasma-attach-icon-button-cancel-scale-hover);---plasma-icon-button-scale-active:var(---plasma-attach-icon-button-cancel-scale-active);--plasma-icon-button-height:var(--plasma-attach-icon-button-cancel-height);--plasma-icon-button-width:var(--plasma-attach-icon-button-cancel-width);--plasma-icon-button-padding:var(--plasma-attach-icon-button-cancel-padding);--plasma-icon-button-radius:var(--plasma-attach-icon-button-cancel-radius);--plasma-icon-button-radius-circle:var(--plasma-attach-icon-button-cancel-radius-circle);--plasma-icon-button-font-family:var(--plasma-attach-icon-button-cancel-font-family);--plasma-icon-button-font-size:var(--plasma-attach-icon-button-cancel-font-size);--plasma-icon-button-font-style:var(--plasma-attach-icon-button-cancel-font-style);--plasma-icon-button-font-weight:var(--plasma-attach-icon-button-cancel-font-weight);--plasma-icon-button-letter-spacing:var(--plasma-attach-icon-button-cancel-letter-spacing);--plasma-icon-button-line-height:var(--plasma-attach-icon-button-cancel-line-height);--plasma-icon-button-disabled-opacity:var(--plasma-attach-icon-button-cancel-disabled-opacity);--plasma-icon-button-focus-color:var(--plasma-attach-icon-button-cancel-focus-color);--plasma-icon-button-spinner-color:var(--plasma-attach-icon-button-cancel-spinner-color);--plasma-icon-button-spinner-size:var(--plasma-attach-icon-button-cancel-spinner-size);}
+.IconButton_styles_7clf9d_s1uu1svj__424ea6e4{--plasma-icon-button-color:var(--plasma-attach-icon-button-color);--plasma-icon-button-background-color:var(--plasma-attach-icon-button-background-color);--plasma-icon-button-loading-background-color:var(--plasma-attach-icon-button-loading-background-color);--plasma-icon-button-color-hover:var(--plasma-attach-icon-button-color-hover);--plasma-icon-button-background-color-hover:var(--plasma-attach-icon-button-background-color-hover);--plasma-icon-button-color-active:var(--plasma-attach-icon-button-color-active);--plasma-icon-button-background-color-active:var(--plasma-attach-icon-button-background-color-active);--plasma-icon-button-scale-hover:var(--plasma-attach-icon-button-scale-hover);---plasma-icon-button-scale-active:var(---plasma-attach-icon-button-scale-active);--plasma-icon-button-height:var(--plasma-attach-icon-button-height);--plasma-icon-button-width:var(--plasma-attach-icon-button-width);--plasma-icon-button-padding:var(--plasma-attach-icon-button-padding);--plasma-icon-button-radius:var(--plasma-attach-icon-button-radius);--plasma-icon-button-radius-circle:var(--plasma-attach-icon-button-radius-circle);--plasma-icon-button-font-family:var(--plasma-attach-icon-button-font-family);--plasma-icon-button-font-size:var(--plasma-attach-icon-button-font-size);--plasma-icon-button-font-style:var(--plasma-attach-icon-button-font-style);--plasma-icon-button-font-weight:var(--plasma-attach-icon-button-font-weight);--plasma-icon-button-letter-spacing:var(--plasma-attach-icon-button-letter-spacing);--plasma-icon-button-line-height:var(--plasma-attach-icon-button-line-height);--plasma-icon-button-disabled-opacity:var(--plasma-attach-icon-button-disabled-opacity);--plasma-icon-button-focus-color:var(--plasma-attach-icon-button-focus-color);--plasma-icon-button-spinner-color:var(--plasma-attach-icon-button-spinner-color);--plasma-icon-button-spinner-size:var(--plasma-attach-icon-button-spinner-size);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}
+.IconButton_styles_7clf9d_s17hmg85__424ea6e4{--plasma-icon-button-color:var(--plasma-attach-icon-button-cancel-color);--plasma-icon-button-background-color:var(--plasma-attach-icon-button-cancel-background-color);--plasma-icon-button-loading-background-color:var(--plasma-attach-icon-button-cancel-loading-background-color);--plasma-icon-button-color-hover:var(--plasma-attach-icon-button-cancel-color-hover);--plasma-icon-button-background-color-hover:var(--plasma-attach-icon-button-cancel-background-color-hover);--plasma-icon-button-color-active:var(--plasma-attach-icon-button-cancel-color-active);--plasma-icon-button-background-color-active:var(--plasma-attach-icon-button-cancel-background-color-active);--plasma-icon-button-scale-hover:var(--plasma-attach-icon-button-cancel-scale-hover);---plasma-icon-button-scale-active:var(---plasma-attach-icon-button-cancel-scale-active);--plasma-icon-button-height:var(--plasma-attach-icon-button-cancel-height);--plasma-icon-button-width:var(--plasma-attach-icon-button-cancel-width);--plasma-icon-button-padding:var(--plasma-attach-icon-button-cancel-padding);--plasma-icon-button-radius:var(--plasma-attach-icon-button-cancel-radius);--plasma-icon-button-radius-circle:var(--plasma-attach-icon-button-cancel-radius-circle);--plasma-icon-button-font-family:var(--plasma-attach-icon-button-cancel-font-family);--plasma-icon-button-font-size:var(--plasma-attach-icon-button-cancel-font-size);--plasma-icon-button-font-style:var(--plasma-attach-icon-button-cancel-font-style);--plasma-icon-button-font-weight:var(--plasma-attach-icon-button-cancel-font-weight);--plasma-icon-button-letter-spacing:var(--plasma-attach-icon-button-cancel-letter-spacing);--plasma-icon-button-line-height:var(--plasma-attach-icon-button-cancel-line-height);--plasma-icon-button-disabled-opacity:var(--plasma-attach-icon-button-cancel-disabled-opacity);--plasma-icon-button-focus-color:var(--plasma-attach-icon-button-cancel-focus-color);--plasma-icon-button-spinner-color:var(--plasma-attach-icon-button-cancel-spinner-color);--plasma-icon-button-spinner-size:var(--plasma-attach-icon-button-cancel-spinner-size);}
 
 .ViewContainer_yiqfcb_bemjbnt__5b2a6776{position:relative;}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/plasma-new-hope",
-  "version": "0.246.1-canary.1712.12898760233.0",
+  "version": "0.246.1-dev.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-dev.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": "11e14cd9770c17de0f57e54ed317f2f28294f00b"
+  "gitHead": "26e2812be1ecbb8648f4b1fc0606283cdda2dc78"
 }

package/styled-components/cjs/components/Attach/ui/IconButton/IconButton.styles.js

@@ -12,8 +12,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_IconButton.iconButtonConfig);
 var IconButton = /*#__PURE__*/(0, _engines.component)(mergedConfig);
 var StyledIconButton = exports.StyledIconButton = /*#__PURE__*/(0, _styledComponents["default"])(IconButton).withConfig({
-  componentId: "plasma-new-hope__sc-1d69ffq-0"
+  componentId: "plasma-new-hope__sc-5koxke-0"
 })(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");flex-shrink:0;"], _IconButton.iconButtonTokens.iconButtonColor, _Attach.tokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _Attach.tokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonLoadingBackgroundColor, _Attach.tokens.iconButtonLoadingBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _Attach.tokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _Attach.tokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _Attach.tokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive, _Attach.tokens.iconButtonBackgroundColorActive, _IconButton.iconButtonTokens.iconButtonScaleHover, _Attach.tokens.iconButtonScaleHover, _IconButton.iconButtonTokens.iconButtonScaleActive, _Attach.tokens.iconButtonScaleActive, _IconButton.iconButtonTokens.iconButtonHeight, _Attach.tokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _Attach.tokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonPadding, _Attach.tokens.iconButtonPadding, _IconButton.iconButtonTokens.iconButtonRadius, _Attach.tokens.iconButtonRadius, _IconButton.iconButtonTokens.iconButtonRadiusCircle, _Attach.tokens.iconButtonRadiusCircle, _IconButton.iconButtonTokens.iconButtonFontFamily, _Attach.tokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _Attach.tokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _Attach.tokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _Attach.tokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _Attach.tokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _Attach.tokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonDisabledOpacity, _Attach.tokens.iconButtonDisabledOpacity, _IconButton.iconButtonTokens.iconButtonFocusColor, _Attach.tokens.iconButtonFocusColor, _IconButton.iconButtonTokens.iconButtonSpinnerColor, _Attach.tokens.iconButtonSpinnerColor, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _Attach.tokens.iconButtonSpinnerSize);
 var StyledIconButtonCancel = exports.StyledIconButtonCancel = /*#__PURE__*/(0, _styledComponents["default"])(IconButton).withConfig({
-  componentId: "plasma-new-hope__sc-1d69ffq-1"
+  componentId: "plasma-new-hope__sc-5koxke-1"
 })(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], _IconButton.iconButtonTokens.iconButtonColor, _Attach.tokens.iconButtonCancelColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _Attach.tokens.iconButtonCancelBackgroundColor, _IconButton.iconButtonTokens.iconButtonLoadingBackgroundColor, _Attach.tokens.iconButtonCancelLoadingBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _Attach.tokens.iconButtonCancelColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _Attach.tokens.iconButtonCancelBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _Attach.tokens.iconButtonCancelColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive, _Attach.tokens.iconButtonCancelBackgroundColorActive, _IconButton.iconButtonTokens.iconButtonScaleHover, _Attach.tokens.iconButtonCancelScaleHover, _IconButton.iconButtonTokens.iconButtonScaleActive, _Attach.tokens.iconButtonCancelScaleActive, _IconButton.iconButtonTokens.iconButtonHeight, _Attach.tokens.iconButtonCancelHeight, _IconButton.iconButtonTokens.iconButtonWidth, _Attach.tokens.iconButtonCancelWidth, _IconButton.iconButtonTokens.iconButtonPadding, _Attach.tokens.iconButtonCancelPadding, _IconButton.iconButtonTokens.iconButtonRadius, _Attach.tokens.iconButtonCancelRadius, _IconButton.iconButtonTokens.iconButtonRadiusCircle, _Attach.tokens.iconButtonCancelRadiusCircle, _IconButton.iconButtonTokens.iconButtonFontFamily, _Attach.tokens.iconButtonCancelFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _Attach.tokens.iconButtonCancelFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _Attach.tokens.iconButtonCancelFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _Attach.tokens.iconButtonCancelFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _Attach.tokens.iconButtonCancelLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _Attach.tokens.iconButtonCancelLineHeight, _IconButton.iconButtonTokens.iconButtonDisabledOpacity, _Attach.tokens.iconButtonCancelDisabledOpacity, _IconButton.iconButtonTokens.iconButtonFocusColor, _Attach.tokens.iconButtonCancelFocusColor, _IconButton.iconButtonTokens.iconButtonSpinnerColor, _Attach.tokens.iconButtonCancelSpinnerColor, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _Attach.tokens.iconButtonCancelSpinnerSize);

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,20 +33,13 @@ export function App() {
         <div>
             <Button text="Текст" />
 
-            <Button text="Текст" contentLeft={<IconDownload />} />
+            <Button text="Текст" contentLeft={<IconDownload color="inherit" />} />
 
-            <Button text="Текст" contentRight={<IconDownload />} />
-
-            <Button contentLeft={<IconDownload />} />
+            <Button text="Текст" contentRight={<IconDownload color="inherit" />} />
 
             <Button text="Текст" isLoading />
 
             <Button text="Текст" isLoading loader={<div>Loader...</div>} />
-
-            <Button>
-                <IconDownload />
-                <span>Текст</span>
-            </Button>
         </div>
     );
 }
@@ -56,7 +48,7 @@ export function App() {
 ## Примеры
 
 ### Размер кнопки
-Размер кнопки задается с помощью свойства `size`. Возможные значения свойства: `"l"`, `"m"` или `"s"`:
+Размер кнопки задается с помощью свойства `size`:
 
 ```tsx live
 import React from 'react';
@@ -64,11 +56,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 +112,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 +130,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 +172,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>
@@ -66,11 +69,12 @@ export function App() {
 
 Возможные значения свойства `view`:
 + `"default"` – по умолчанию;
++ `"accent"` – акцентная;
 + `"secondary"` – вторичная;
++ `"clear"` – без цветового сопровождения.
 + `"success"` – успешное завершение;
 + `"warning"` – предупреждение;
 + `"critical"` – ошибка;
-+ `"clear"` – без цветового сопровождения;
 + `"dark"` – темная;
 + `"black"` – черная;
 + `"white"` – белая.
@@ -82,13 +86,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 +108,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 +135,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/components/Toast/ToastController.js

@@ -31,6 +31,7 @@ var ToastControllerHoc = exports.ToastControllerHoc = function ToastControllerHo
     var _useToastInner = (0, _ToastProvider.useToastInner)(),
       hideToast = _useToastInner.hideToast,
       isVisible = _useToastInner.isVisible,
+      hideTimeout = _useToastInner.hideTimeout,
       animationRunTimeout = _useToastInner.animationRunTimeout;
     var toastKey = "".concat(text).concat(position);
     var showedClass = isVisible ? _Toast.classes.toastShowed : _Toast.classes.toastHidden;
@@ -41,6 +42,9 @@ var ToastControllerHoc = exports.ToastControllerHoc = function ToastControllerHo
     }, rest);
     (0, _react.useEffect)(function () {
       return function () {
+        if (hideTimeout !== null && hideTimeout !== void 0 && hideTimeout.current) {
+          clearTimeout(hideTimeout.current);
+        }
         if (animationRunTimeout !== null && animationRunTimeout !== void 0 && animationRunTimeout.current) {
           clearTimeout(animationRunTimeout.current);
         }

package/styled-components/cjs/components/Toast/ToastProvider/ToastProvider.js

@@ -153,13 +153,13 @@ var ToastProviderHoc = exports.ToastProviderHoc = function ToastProviderHoc(Toas
     var onHide = toastInfo.onHide,
       timeout = toastInfo.timeout;
     var hideToast = (0, _react.useCallback)(function () {
+      if (!isVisible) {
+        return;
+      }
       if (hideTimeout !== null && hideTimeout !== void 0 && hideTimeout.current) {
         clearTimeout(hideTimeout.current);
         hideTimeout.current = null;
       }
-      if (!isVisible) {
-        return;
-      }
       onHide === null || onHide === void 0 || onHide();
       setIsVisible(false);
       animationRunTimeout.current = setTimeout(function () {
@@ -179,12 +179,6 @@ var ToastProviderHoc = exports.ToastProviderHoc = function ToastProviderHoc(Toas
           hideToast();
         }, timeout);
       }
-      return function () {
-        if (hideTimeout !== null && hideTimeout !== void 0 && hideTimeout.current) {
-          clearTimeout(hideTimeout.current);
-          hideTimeout.current = null;
-        }
-      };
     }, [isVisible, timeout]);
     return /*#__PURE__*/_react["default"].createElement(ToastContext.Provider, {
       value: {

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_b2c/components/IconButton/IconButton.stories.tsx

@@ -16,6 +16,7 @@ const meta: Meta<typeof IconButton> = {
     component: IconButton,
     argTypes: {
         ...argTypesFromConfig(mergeConfig(iconButtonConfig, config)),
+        ...disableProps(['focused']),
         pin: {
             options: [
                 'square-square',

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/cjs/examples/plasma_web/components/IconButton/IconButton.stories.tsx

@@ -16,6 +16,7 @@ const meta: Meta<typeof IconButton> = {
     component: IconButton,
     argTypes: {
         ...argTypesFromConfig(mergeConfig(iconButtonConfig, config)),
+        ...disableProps(['focused']),
         pin: {
             options: [
                 'square-square',

package/styled-components/es/components/Attach/ui/IconButton/IconButton.styles.js

@@ -5,8 +5,8 @@ import { tokens as attachTokens } from '../../Attach.tokens';
 var mergedConfig = /*#__PURE__*/mergeConfig(iconButtonConfig);
 var IconButton = /*#__PURE__*/component(mergedConfig);
 export var StyledIconButton = /*#__PURE__*/styled(IconButton).withConfig({
-  componentId: "plasma-new-hope__sc-1d69ffq-0"
+  componentId: "plasma-new-hope__sc-5koxke-0"
 })(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");flex-shrink:0;"], iconButtonTokens.iconButtonColor, attachTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, attachTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonLoadingBackgroundColor, attachTokens.iconButtonLoadingBackgroundColor, iconButtonTokens.iconButtonColorHover, attachTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, attachTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, attachTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive, attachTokens.iconButtonBackgroundColorActive, iconButtonTokens.iconButtonScaleHover, attachTokens.iconButtonScaleHover, iconButtonTokens.iconButtonScaleActive, attachTokens.iconButtonScaleActive, iconButtonTokens.iconButtonHeight, attachTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, attachTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, attachTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, attachTokens.iconButtonRadius, iconButtonTokens.iconButtonRadiusCircle, attachTokens.iconButtonRadiusCircle, iconButtonTokens.iconButtonFontFamily, attachTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, attachTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, attachTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, attachTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, attachTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, attachTokens.iconButtonLineHeight, iconButtonTokens.iconButtonDisabledOpacity, attachTokens.iconButtonDisabledOpacity, iconButtonTokens.iconButtonFocusColor, attachTokens.iconButtonFocusColor, iconButtonTokens.iconButtonSpinnerColor, attachTokens.iconButtonSpinnerColor, iconButtonTokens.iconButtonSpinnerSize, attachTokens.iconButtonSpinnerSize);
 export var StyledIconButtonCancel = /*#__PURE__*/styled(IconButton).withConfig({
-  componentId: "plasma-new-hope__sc-1d69ffq-1"
+  componentId: "plasma-new-hope__sc-5koxke-1"
 })(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], iconButtonTokens.iconButtonColor, attachTokens.iconButtonCancelColor, iconButtonTokens.iconButtonBackgroundColor, attachTokens.iconButtonCancelBackgroundColor, iconButtonTokens.iconButtonLoadingBackgroundColor, attachTokens.iconButtonCancelLoadingBackgroundColor, iconButtonTokens.iconButtonColorHover, attachTokens.iconButtonCancelColorHover, iconButtonTokens.iconButtonBackgroundColorHover, attachTokens.iconButtonCancelBackgroundColorHover, iconButtonTokens.iconButtonColorActive, attachTokens.iconButtonCancelColorActive, iconButtonTokens.iconButtonBackgroundColorActive, attachTokens.iconButtonCancelBackgroundColorActive, iconButtonTokens.iconButtonScaleHover, attachTokens.iconButtonCancelScaleHover, iconButtonTokens.iconButtonScaleActive, attachTokens.iconButtonCancelScaleActive, iconButtonTokens.iconButtonHeight, attachTokens.iconButtonCancelHeight, iconButtonTokens.iconButtonWidth, attachTokens.iconButtonCancelWidth, iconButtonTokens.iconButtonPadding, attachTokens.iconButtonCancelPadding, iconButtonTokens.iconButtonRadius, attachTokens.iconButtonCancelRadius, iconButtonTokens.iconButtonRadiusCircle, attachTokens.iconButtonCancelRadiusCircle, iconButtonTokens.iconButtonFontFamily, attachTokens.iconButtonCancelFontFamily, iconButtonTokens.iconButtonFontSize, attachTokens.iconButtonCancelFontSize, iconButtonTokens.iconButtonFontStyle, attachTokens.iconButtonCancelFontStyle, iconButtonTokens.iconButtonFontWeight, attachTokens.iconButtonCancelFontWeight, iconButtonTokens.iconButtonLetterSpacing, attachTokens.iconButtonCancelLetterSpacing, iconButtonTokens.iconButtonLineHeight, attachTokens.iconButtonCancelLineHeight, iconButtonTokens.iconButtonDisabledOpacity, attachTokens.iconButtonCancelDisabledOpacity, iconButtonTokens.iconButtonFocusColor, attachTokens.iconButtonCancelFocusColor, iconButtonTokens.iconButtonSpinnerColor, attachTokens.iconButtonCancelSpinnerColor, iconButtonTokens.iconButtonSpinnerSize, attachTokens.iconButtonCancelSpinnerSize);

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: Для возможности переиспользования стилей в других компонентах