@salutejs/plasma-new-hope 0.78.0-dev.0 → 0.79.0-canary.1195.9053577477.0

package/es/components/IconButton/IconButton.tokens.js

@@ -0,0 +1,28 @@
+var tokens = {
+  iconButtonColor: '--plasma-icon-button-color',
+  iconButtonBackgroundColor: '--plasma-icon-button-background-color',
+  iconButtonColorHover: '--plasma-icon-button-color-hover',
+  iconButtonBackgroundColorHover: '--plasma-icon-button-background-color-hover',
+  iconButtonColorActive: '--plasma-icon-button-color-active',
+  iconButtonBackgroundColorActive: '--plasma-icon-button-background-color-active',
+  iconButtonScaleHover: '--plasma-icon-button-scale-hover',
+  iconButtonScaleActive: '---plasma-icon-button-scale-active',
+  iconButtonHeight: '--plasma-icon-button-height',
+  iconButtonWidth: '--plasma-icon-button-width',
+  iconButtonPadding: '--plasma-icon-button-padding',
+  iconButtonRadius: '--plasma-icon-button-radius',
+  iconButtonRadiusCircle: '--plasma-icon-button-radius-circle',
+  iconButtonFontFamily: '--plasma-icon-button-font-family',
+  iconButtonFontSize: '--plasma-icon-button-font-size',
+  iconButtonFontStyle: '--plasma-icon-button-font-style',
+  iconButtonFontWeight: '--plasma-icon-button-font-weight',
+  iconButtonLetterSpacing: '--plasma-icon-button-letter-spacing',
+  iconButtonLineHeight: '--plasma-icon-button-line-height',
+  iconButtonDisabledOpacity: '--plasma-icon-button-disabled-opacity',
+  iconButtonFocusColor: '--plasma-icon-button-focus-color',
+  iconButtonSpinnerColor: '--plasma-icon-button-spinner-color',
+  iconButtonSpinnerSize: '--plasma-icon-button-spinner-size'
+};
+
+export { tokens };
+//# sourceMappingURL=IconButton.tokens.js.map

package/es/components/IconButton/IconButton.tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.tokens.js","sources":["../../../src/components/IconButton/IconButton.tokens.ts"],"sourcesContent":["export const tokens = {\n    iconButtonColor: '--plasma-icon-button-color',\n    iconButtonBackgroundColor: '--plasma-icon-button-background-color',\n    iconButtonColorHover: '--plasma-icon-button-color-hover',\n    iconButtonBackgroundColorHover: '--plasma-icon-button-background-color-hover',\n    iconButtonColorActive: '--plasma-icon-button-color-active',\n    iconButtonBackgroundColorActive: '--plasma-icon-button-background-color-active',\n\n    iconButtonScaleHover: '--plasma-icon-button-scale-hover',\n    iconButtonScaleActive: '---plasma-icon-button-scale-active',\n    iconButtonHeight: '--plasma-icon-button-height',\n    iconButtonWidth: '--plasma-icon-button-width',\n    iconButtonPadding: '--plasma-icon-button-padding',\n    iconButtonRadius: '--plasma-icon-button-radius',\n    iconButtonRadiusCircle: '--plasma-icon-button-radius-circle',\n\n    iconButtonFontFamily: '--plasma-icon-button-font-family',\n    iconButtonFontSize: '--plasma-icon-button-font-size',\n    iconButtonFontStyle: '--plasma-icon-button-font-style',\n    iconButtonFontWeight: '--plasma-icon-button-font-weight',\n    iconButtonLetterSpacing: '--plasma-icon-button-letter-spacing',\n    iconButtonLineHeight: '--plasma-icon-button-line-height',\n\n    iconButtonDisabledOpacity: '--plasma-icon-button-disabled-opacity',\n    iconButtonFocusColor: '--plasma-icon-button-focus-color',\n\n    iconButtonSpinnerColor: '--plasma-icon-button-spinner-color',\n    iconButtonSpinnerSize: '--plasma-icon-button-spinner-size',\n};\n"],"names":["tokens","iconButtonColor","iconButtonBackgroundColor","iconButtonColorHover","iconButtonBackgroundColorHover","iconButtonColorActive","iconButtonBackgroundColorActive","iconButtonScaleHover","iconButtonScaleActive","iconButtonHeight","iconButtonWidth","iconButtonPadding","iconButtonRadius","iconButtonRadiusCircle","iconButtonFontFamily","iconButtonFontSize","iconButtonFontStyle","iconButtonFontWeight","iconButtonLetterSpacing","iconButtonLineHeight","iconButtonDisabledOpacity","iconButtonFocusColor","iconButtonSpinnerColor","iconButtonSpinnerSize"],"mappings":"AAAO,IAAMA,MAAM,GAAG;AAClBC,EAAAA,eAAe,EAAE,4BAA4B;AAC7CC,EAAAA,yBAAyB,EAAE,uCAAuC;AAClEC,EAAAA,oBAAoB,EAAE,kCAAkC;AACxDC,EAAAA,8BAA8B,EAAE,6CAA6C;AAC7EC,EAAAA,qBAAqB,EAAE,mCAAmC;AAC1DC,EAAAA,+BAA+B,EAAE,8CAA8C;AAE/EC,EAAAA,oBAAoB,EAAE,kCAAkC;AACxDC,EAAAA,qBAAqB,EAAE,oCAAoC;AAC3DC,EAAAA,gBAAgB,EAAE,6BAA6B;AAC/CC,EAAAA,eAAe,EAAE,4BAA4B;AAC7CC,EAAAA,iBAAiB,EAAE,8BAA8B;AACjDC,EAAAA,gBAAgB,EAAE,6BAA6B;AAC/CC,EAAAA,sBAAsB,EAAE,oCAAoC;AAE5DC,EAAAA,oBAAoB,EAAE,kCAAkC;AACxDC,EAAAA,kBAAkB,EAAE,gCAAgC;AACpDC,EAAAA,mBAAmB,EAAE,iCAAiC;AACtDC,EAAAA,oBAAoB,EAAE,kCAAkC;AACxDC,EAAAA,uBAAuB,EAAE,qCAAqC;AAC9DC,EAAAA,oBAAoB,EAAE,kCAAkC;AAExDC,EAAAA,yBAAyB,EAAE,uCAAuC;AAClEC,EAAAA,oBAAoB,EAAE,kCAAkC;AAExDC,EAAAA,sBAAsB,EAAE,oCAAoC;AAC5DC,EAAAA,qBAAqB,EAAE,mCAAA;AAC3B;;;;"}

package/es/index.css

@@ -14,6 +14,8 @@
 .Button_styles_uqvh6u_l4dfhbg__b7cda4d5{position:absolute;}
 .Button_styles_uqvh6u_srdlazt__b7cda4d5{--plasma-spinner-size:var(--plasma-button-spinner-size);--plasma-spinner-color:var(--plasma-button-spinner-color);}
 
+.IconButton_styles_1hknr37_b1ua728l__f14249fc{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-color: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-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_1hknr37_b1ua728l__f14249fc{-webkit-text-decoration:none;text-decoration:none;}.IconButton_styles_1hknr37_b1ua728l__f14249fc.IconButton_styles_1hknr37_b1ua728l__f14249fc.IconButton_styles_1hknr37_buttonSquare__f14249fc{width:var(--plasma-button-height);padding:0;}.IconButton_styles_1hknr37_b1ua728l__f14249fc:hover{color:var(--plasma-button-color-hover,var(--plasma-button-color));background-color:var(--plasma-button-background-color-hover,var(--plasma-button-background-color));scale:var(--plasma-button-scale-hover);}.IconButton_styles_1hknr37_b1ua728l__f14249fc:active{color:var(--plasma-button-color-active,var(--plasma-button-color));background-color:var(--plasma-button-background-color-active,var(--plasma-button-background-color));scale:var(---plasma-button-scale-active);}.IconButton_styles_1hknr37_b1ua728l__f14249fc:focus{outline:none;}.IconButton_styles_1hknr37_b1ua728l__f14249fc::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_1hknr37_b1ua728l__f14249fc.IconButton_styles_1hknr37_focusVisible__f14249fc:focus::before,.IconButton_styles_1hknr37_b1ua728l__f14249fc[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_1hknr37_b1ua728l__f14249fc[disabled]{opacity:var(--plasma-button-disabled-opacity);cursor:not-allowed;}.IconButton_styles_1hknr37_b1ua728l__f14249fc[disabled]:hover,.IconButton_styles_1hknr37_b1ua728l__f14249fc[disabled]:active{scale:none;color:var(--plasma-button-color);background-color:var(--plasma-button-background-color);}.IconButton_styles_1hknr37_b1ua728l__f14249fc.IconButton_styles_1hknr37_buttonStretchingFixed__f14249fc{width:var(--plasma-button-width);}.IconButton_styles_1hknr37_b1ua728l__f14249fc.IconButton_styles_1hknr37_buttonStretchingFilled__f14249fc{width:100%;}.IconButton_styles_1hknr37_b1ua728l__f14249fc.IconButton_styles_1hknr37_buttonStretchingAuto__f14249fc{width:auto;}
+
 .base_6k3uip_b7jdqtc__e6616a37.base_6k3uip_buttonGroupOverrideStyles__e6616a37 .base_6k3uip_buttonItem__e6616a37{--plasma-button-color:var(--plasma-button-group-item-color);--plasma-button-background-color:var(--plasma-button-group-item-background-color);--plasma-button-color-hover:var(--plasma-button-group-item-color-hover);--plasma-button-background-color-hover:var(--plasma-button-group-item-background-color-hover);--plasma-button-color-active:var(--plasma-button-group-item-color-active);--plasma-button-background-color-active:var(--plasma-button-group-item-background-color-active);}
 
 .base_xxxewc_bc0nfse__e70323a1.base_xxxewc_buttonGroupOverrideStyles__e70323a1 .base_xxxewc_buttonItem__e70323a1{--plasma-button-height:var(--plasma-button-group-item-height);--plasma-button-padding:var(--plasma-button-group-item-padding);---plasma-button-scale-active:var(--plasma-button-group-item-scale-active);--plasma-button-scale-hover:var(--plasma-button-group-item-scale-hover);--plasma-button-font-family:var(--plasma-button-group-item-font-family);--plasma-button-font-size:var(--plasma-button-group-item-font-size);--plasma-button-font-style:var(--plasma-button-group-item-font-style);--plasma-button-font-weight:var(--plasma-button-group-item-font-weight);--plasma-button-letter-spacing:var(--plasma-button-group-item-letter-spacing);--plasma-button-line-height:var(--plasma-button-group-item-line-height);}

package/es/index.js

@@ -16,6 +16,8 @@ export { useDidMountEffect } from './hooks/useDidMountEffect.js';
 export { composableStyle, cx } from './utils/index.js';
 export { buttonConfig, buttonRoot } from './components/Button/Button.js';
 export { classes as buttonClasses, tokens as buttonTokens } from './components/Button/Button.tokens.js';
+export { iconButtonConfig, iconButtonRoot } from './components/IconButton/IconButton.js';
+export { tokens as iconButtonTokens } from './components/IconButton/IconButton.tokens.js';
 export { buttonGroupConfig, buttonGroupRoot } from './components/ButtonGroup/ButtonGroup.js';
 export { classes as buttonGroupClasses, tokens as buttonGroupTokens } from './components/ButtonGroup/ButtonGroup.tokens.js';
 export { chipConfig, chipRoot } from './components/Chip/Chip.js';

package/es/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/plasma-new-hope",
-  "version": "0.78.0-dev.0",
+  "version": "0.79.0-canary.1195.9053577477.0",
   "description": "Salute Design System blueprint",
   "main": "cjs/index.js",
   "module": "es/index.js",
@@ -102,5 +102,5 @@
     "react-popper": "2.3.0",
     "storeon": "3.1.5"
   },
-  "gitHead": "68f84c256b9cac1c45817d0d74e5745b5bd0c82e"
+  "gitHead": "0eaf3c7ba7715444159a726fc234c8352c410bf7"
 }

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

@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.base = exports.StyledSpinner = exports.Loader = exports.LoadWrap = exports.ButtonText = void 0;
+exports.baseContent = exports.base = exports.StyledSpinner = exports.Loader = exports.LoadWrap = exports.ButtonText = void 0;
 var _styledComponents = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("styled-components"));
 var _mixins = /*#__PURE__*/require("../../mixins");
 var _engines = /*#__PURE__*/require("../../engines");
@@ -38,4 +38,12 @@ var Loader = exports.Loader = /*#__PURE__*/_styledComponents["default"].div.with
 })(["position:absolute;"]);
 var StyledSpinner = exports.StyledSpinner = /*#__PURE__*/(0, _styledComponents["default"])(Spinner).withConfig({
   componentId: "plasma-new-hope__sc-9d9bqj-3"
-})(["", ":var(", ");", ":var(", ");"], _Spinner.spinnerTokens.size, _Button.tokens.buttonSpinnerSize, _Spinner.spinnerTokens.color, _Button.tokens.buttonSpinnerColor);
+})(["", ":var(", ");", ":var(", ");"], _Spinner.spinnerTokens.size, _Button.tokens.buttonSpinnerSize, _Spinner.spinnerTokens.color, _Button.tokens.buttonSpinnerColor);
+
+// INFO: Для возможности переиспользования стилей в других компонентах
+var baseContent = exports.baseContent = /*#__PURE__*/"\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    box-sizing: border-box;\n    justify-content: center;\n\n    appearance: none;\n    border: none;\n    cursor: pointer;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n    a& {\n        text-decoration: none;\n    }\n\n    /* NOTE: \n        --plasma_computed-btn-br-radius is defined in Button.tsx\n    */\n    --plasma_private-btn-br: var(--plasma_computed-btn-br);\n    border-radius: var(--plasma_private-btn-br);\n\n    &&.".concat(String(_Button.classes.buttonSquare), " {\n        width: var(").concat(_Button.tokens.buttonHeight, ");\n        padding: 0;\n    }\n\n    color: var(").concat(_Button.tokens.buttonColor, ");\n    background-color: var(").concat(_Button.tokens.buttonBackgroundColor, ");\n\n    :hover {\n        color: var(").concat(_Button.tokens.buttonColorHover, ", var(").concat(_Button.tokens.buttonColor, "));\n        background-color: var(").concat(_Button.tokens.buttonBackgroundColorHover, ", var(").concat(_Button.tokens.buttonBackgroundColor, "));\n\n        scale: var(").concat(_Button.tokens.buttonScaleHover, ");\n    }\n\n    :active {\n        color: var(").concat(_Button.tokens.buttonColorActive, ", var(").concat(_Button.tokens.buttonColor, "));\n        background-color: var(").concat(_Button.tokens.buttonBackgroundColorActive, ", var(").concat(_Button.tokens.buttonBackgroundColor, "));\n\n        scale: var(").concat(_Button.tokens.buttonScaleActive, ");\n    }\n\n    height: var(").concat(_Button.tokens.buttonHeight, ");\n    width: var(").concat(_Button.tokens.buttonWidth, ");\n\n    /* TODO: #714 move these calc's to plasma-mapping | ds-generator and add Math.round() */\n    padding: 0 var(").concat(_Button.tokens.buttonPadding, ", calc(var(").concat(_Button.tokens.buttonHeight, ") * 1.618 / 4));\n\n    font-family: var(").concat(_Button.tokens.buttonFontFamily, ");\n    font-size: var(").concat(_Button.tokens.buttonFontSize, ");\n    font-style: var(").concat(_Button.tokens.buttonFontStyle, ");\n    font-weight: var(").concat(_Button.tokens.buttonFontWeight, ");\n    letter-spacing: var(").concat(_Button.tokens.buttonLetterSpacing, ");\n    line-height: var(").concat(_Button.tokens.buttonLineHeight, ");\n\n    /* TODO: #710 make it token API ? */\n    --plasma_private-btn-outline-size: var(--plasma-button-outline-size, 0.0625rem);\n\n    :focus {\n        outline: none;\n    }\n\n    ").concat((0, _mixins.addFocus)({
+  outlineOffset: '-0.125rem',
+  outlineSize: 'var(--plasma_private-btn-outline-size)',
+  outlineRadius: 'calc(0.125rem + var(--plasma_private-btn-br))',
+  outlineColor: "var(".concat(_Button.tokens.buttonFocusColor, ")")
+}), "\n\n    &[disabled] {\n        opacity: var(").concat(_Button.tokens.buttonDisabledOpacity, ");\n        cursor: not-allowed;\n\n        :hover,\n        :active {\n            scale: none;\n\n            color: var(").concat(_Button.tokens.buttonColor, ");\n            background-color: var(").concat(_Button.tokens.buttonBackgroundColor, ");\n        }\n    }\n\n    &.").concat(_Button.classes.fixedStretching, " {\n        width: var(").concat(_Button.tokens.buttonWidth, ");\n    }\n    &.").concat(_Button.classes.filledStretching, " {\n        width: 100%;\n    }\n    &.").concat(_Button.classes.autoStretching, " {\n        width: auto;\n    }\n");

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

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.iconButtonRoot = exports.iconButtonConfig = void 0;
+var _Button = /*#__PURE__*/require("../Button");
+var _base = /*#__PURE__*/require("../Button/variations/_view/base");
+var _base2 = /*#__PURE__*/require("../Button/variations/_size/base");
+var _base3 = /*#__PURE__*/require("../Button/variations/_disabled/base");
+var _base4 = /*#__PURE__*/require("../Button/variations/_focused/base");
+var _base5 = /*#__PURE__*/require("../Button/variations/_blurred/base");
+var _base6 = /*#__PURE__*/require("../Button/variations/_stretching/base");
+var _IconButton = /*#__PURE__*/require("./IconButton.styles");
+var iconButtonRoot = exports.iconButtonRoot = _Button.buttonRoot;
+var iconButtonConfig = exports.iconButtonConfig = {
+  name: 'IconButton',
+  tag: 'button',
+  layout: iconButtonRoot,
+  base: _IconButton.base,
+  variations: {
+    view: {
+      css: _base.base
+    },
+    size: {
+      css: _base2.base
+    },
+    disabled: {
+      css: _base3.base,
+      attrs: true
+    },
+    focused: {
+      css: _base4.base
+    },
+    blurred: {
+      css: _base5.base
+    },
+    stretching: {
+      css: _base6.base
+    }
+  },
+  defaults: {
+    view: 'secondary',
+    size: 'm',
+    stretching: 'fixed'
+  }
+};

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mappingOverride = exports.base = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _Button = /*#__PURE__*/require("../Button");
+var _Button2 = /*#__PURE__*/require("../Button/Button.styles");
+var _IconButton = /*#__PURE__*/require("./IconButton.tokens");
+// Переопределние токенов из Button
+var mappingOverride = exports.mappingOverride = /*#__PURE__*/"\n    ".concat(_Button.buttonTokens.buttonPadding, ": 0;\n\n    ").concat(_Button.buttonTokens.buttonColor, ": var(").concat(_IconButton.tokens.iconButtonColor, ");\n    ").concat(_Button.buttonTokens.buttonBackgroundColor, ": var(").concat(_IconButton.tokens.iconButtonBackgroundColor, ");\n\n    ").concat(_Button.buttonTokens.buttonColorHover, ": var(").concat(_IconButton.tokens.iconButtonColorHover, ");\n    ").concat(_Button.buttonTokens.buttonBackgroundColorHover, ": var(").concat(_IconButton.tokens.iconButtonBackgroundColorHover, ");\n\n    ").concat(_Button.buttonTokens.buttonColorActive, ": var(").concat(_IconButton.tokens.iconButtonColorActive, ");\n    ").concat(_Button.buttonTokens.buttonBackgroundColorActive, ": var(").concat(_IconButton.tokens.iconButtonBackgroundColorActive, ");\n\n\n    ").concat(_Button.buttonTokens.buttonFontFamily, ": var(").concat(_IconButton.tokens.iconButtonFontFamily, ");\n    ").concat(_Button.buttonTokens.buttonFontSize, ": var(").concat(_IconButton.tokens.iconButtonFontSize, ");\n    ").concat(_Button.buttonTokens.buttonFontStyle, ": var(").concat(_IconButton.tokens.iconButtonFontStyle, ");\n    ").concat(_Button.buttonTokens.buttonFontWeight, ":var(").concat(_IconButton.tokens.iconButtonFontWeight, ");\n    ").concat(_Button.buttonTokens.buttonLetterSpacing, ": var(").concat(_IconButton.tokens.iconButtonLetterSpacing, ");\n    ").concat(_Button.buttonTokens.buttonLineHeight, ": var(").concat(_IconButton.tokens.iconButtonLineHeight, ");\n\n    ").concat(_Button.buttonTokens.buttonWidth, ": var(").concat(_IconButton.tokens.iconButtonWidth, ");\n    ").concat(_Button.buttonTokens.buttonHeight, ": var(").concat(_IconButton.tokens.iconButtonHeight, ");\n    ").concat(_Button.buttonTokens.buttonRadius, ": var(").concat(_IconButton.tokens.iconButtonRadius, ");\n\n    ").concat(_Button.buttonTokens.buttonDisabledOpacity, ": var(").concat(_IconButton.tokens.iconButtonDisabledOpacity, ");\n    ").concat(_Button.buttonTokens.buttonFocusColor, ": var(").concat(_IconButton.tokens.iconButtonFocusColor, ");\n\n    ").concat(_Button.buttonTokens.buttonSpinnerSize, ": var(").concat(_IconButton.tokens.iconButtonSpinnerSize, ");\n    ").concat(_Button.buttonTokens.buttonSpinnerColor, ": var(").concat(_IconButton.tokens.iconButtonSpinnerColor, ");\n");
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["", ";", ";"], _Button2.baseContent, mappingOverride);

package/styled-components/cjs/components/IconButton/IconButton.tokens.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tokens = void 0;
+var tokens = exports.tokens = {
+  iconButtonColor: '--plasma-icon-button-color',
+  iconButtonBackgroundColor: '--plasma-icon-button-background-color',
+  iconButtonColorHover: '--plasma-icon-button-color-hover',
+  iconButtonBackgroundColorHover: '--plasma-icon-button-background-color-hover',
+  iconButtonColorActive: '--plasma-icon-button-color-active',
+  iconButtonBackgroundColorActive: '--plasma-icon-button-background-color-active',
+  iconButtonScaleHover: '--plasma-icon-button-scale-hover',
+  iconButtonScaleActive: '---plasma-icon-button-scale-active',
+  iconButtonHeight: '--plasma-icon-button-height',
+  iconButtonWidth: '--plasma-icon-button-width',
+  iconButtonPadding: '--plasma-icon-button-padding',
+  iconButtonRadius: '--plasma-icon-button-radius',
+  iconButtonRadiusCircle: '--plasma-icon-button-radius-circle',
+  iconButtonFontFamily: '--plasma-icon-button-font-family',
+  iconButtonFontSize: '--plasma-icon-button-font-size',
+  iconButtonFontStyle: '--plasma-icon-button-font-style',
+  iconButtonFontWeight: '--plasma-icon-button-font-weight',
+  iconButtonLetterSpacing: '--plasma-icon-button-letter-spacing',
+  iconButtonLineHeight: '--plasma-icon-button-line-height',
+  iconButtonDisabledOpacity: '--plasma-icon-button-disabled-opacity',
+  iconButtonFocusColor: '--plasma-icon-button-focus-color',
+  iconButtonSpinnerColor: '--plasma-icon-button-spinner-color',
+  iconButtonSpinnerSize: '--plasma-icon-button-spinner-size'
+};

package/styled-components/cjs/components/IconButton/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "iconButtonConfig", {
+  enumerable: true,
+  get: function get() {
+    return _IconButton.iconButtonConfig;
+  }
+});
+Object.defineProperty(exports, "iconButtonRoot", {
+  enumerable: true,
+  get: function get() {
+    return _IconButton.iconButtonRoot;
+  }
+});
+Object.defineProperty(exports, "iconButtonTokens", {
+  enumerable: true,
+  get: function get() {
+    return _IconButton2.tokens;
+  }
+});
+var _IconButton = /*#__PURE__*/require("./IconButton");
+var _IconButton2 = /*#__PURE__*/require("./IconButton.tokens");

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

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _IconButton = /*#__PURE__*/require("../../../../components/IconButton");
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    focused: 'true',
+    size: 'm'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
+      accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
+      secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
+      clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
+      success: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
+      warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
+      critical: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
+      dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-active);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
+      black: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-active);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
+      white: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-active);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive)
+    },
+    size: {
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":3.5rem;", ":3.5rem;", ":1.5rem;", ":0.875rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonPadding, _IconButton.iconButtonTokens.iconButtonRadius, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
+      lr: /*#__PURE__*/(0, _styledComponents.css)(["", ":3.5rem;", ":3.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":3rem;", ":3rem;", ":1.25rem;", ":0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonPadding, _IconButton.iconButtonTokens.iconButtonRadius, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
+      mr: /*#__PURE__*/(0, _styledComponents.css)(["", ":3rem;", ":3rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":2.5rem;", ":1rem;", ":0.625rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonPadding, _IconButton.iconButtonTokens.iconButtonRadius, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
+      sr: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":2.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
+      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":2rem;", ":0.75rem;", ":0.5rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonPadding, _IconButton.iconButtonTokens.iconButtonRadius, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
+      xsr: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":2rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor)
+    },
+    disabled: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _IconButton.iconButtonTokens.iconButtonDisabledOpacity)
+    },
+    focused: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-accent);"], _IconButton.iconButtonTokens.iconButtonFocusColor)
+    }
+  }
+};

package/styled-components/cjs/examples/plasma_b2c/components/IconButton/IconButton.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconButton = void 0;
+var _IconButton = /*#__PURE__*/require("../../../../components/IconButton");
+var _engines = /*#__PURE__*/require("../../../../engines");
+var _IconButton2 = /*#__PURE__*/require("./IconButton.config");
+var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_IconButton.iconButtonConfig, _IconButton2.config);
+var IconButton = exports.IconButton = /*#__PURE__*/(0, _engines.component)(mergedConfig);

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

@@ -0,0 +1,71 @@
+import React, { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { disableProps } from '@salutejs/plasma-sb-utils';
+
+import { iconButtonConfig } from '../../../../components/IconButton';
+import { mergeConfig } from '../../../../engines';
+import { WithTheme, argTypesFromConfig } from '../../../_helpers';
+import { IconChevronLeft } from '../../../../components/_Icon';
+
+import { config } from './IconButton.config';
+import { IconButton } from './IconButton';
+
+const meta: Meta<typeof IconButton> = {
+    title: 'plasma_b2c/IconButton',
+    decorators: [WithTheme],
+    component: IconButton,
+    argTypes: {
+        ...argTypesFromConfig(mergeConfig(iconButtonConfig, config)),
+        pin: {
+            options: [
+                'square-square',
+                'square-clear',
+                'clear-square',
+                'clear-clear',
+                'clear-circle',
+                'circle-clear',
+                'circle-circle',
+                '',
+            ],
+            control: {
+                type: 'select',
+            },
+            table: { defaultValue: { summary: 'bottom' } },
+        },
+    },
+};
+
+export default meta;
+
+const getSizeForIcon = (size) => {
+    const map = {
+        mr: 's',
+        lr: 's',
+        m: 's',
+        l: 's',
+        sr: 's',
+        xsr: 'xs',
+    };
+    if (map[size]) {
+        return map[size];
+    }
+
+    return size;
+};
+
+export const Default: StoryObj<ComponentProps<typeof IconButton>> = {
+    args: {
+        children: <IconChevronLeft />,
+        view: 'default',
+        size: 'm',
+        disabled: false,
+        focused: true,
+        isLoading: false,
+    },
+    argTypes: { ...disableProps(['children']) },
+    render: (args) => (
+        <IconButton {...args}>
+            <IconChevronLeft size={getSizeForIcon(args.size)} />
+        </IconButton>
+    ),
+};

package/styled-components/cjs/examples/plasma_web/components/IconButton/IconButton.config.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _IconButton = /*#__PURE__*/require("../../../../components/IconButton");
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    focused: 'true',
+    size: 'm'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
+      accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
+      secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
+      clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
+      success: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
+      warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
+      critical: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
+      dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-active);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
+      black: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-active);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
+      white: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-active);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive)
+    },
+    size: {
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":3.5rem;", ":3.5rem;", ":1.5rem;", ":0.875rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonPadding, _IconButton.iconButtonTokens.iconButtonRadius, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
+      lr: /*#__PURE__*/(0, _styledComponents.css)(["", ":3.5rem;", ":3.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":3rem;", ":3rem;", ":1.25rem;", ":0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonPadding, _IconButton.iconButtonTokens.iconButtonRadius, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
+      mr: /*#__PURE__*/(0, _styledComponents.css)(["", ":3rem;", ":3rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":2.5rem;", ":1rem;", ":0.625rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonPadding, _IconButton.iconButtonTokens.iconButtonRadius, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
+      sr: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":2.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
+      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":2rem;", ":0.75rem;", ":0.5rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonPadding, _IconButton.iconButtonTokens.iconButtonRadius, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
+      xsr: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":2rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor)
+    },
+    disabled: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _IconButton.iconButtonTokens.iconButtonDisabledOpacity)
+    },
+    focused: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-accent);"], _IconButton.iconButtonTokens.iconButtonFocusColor)
+    }
+  }
+};

package/styled-components/cjs/examples/plasma_web/components/IconButton/IconButton.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconButton = void 0;
+var _IconButton = /*#__PURE__*/require("../../../../components/IconButton");
+var _engines = /*#__PURE__*/require("../../../../engines");
+var _IconButton2 = /*#__PURE__*/require("./IconButton.config");
+var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_IconButton.iconButtonConfig, _IconButton2.config);
+var IconButton = exports.IconButton = /*#__PURE__*/(0, _engines.component)(mergedConfig);

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

@@ -0,0 +1,71 @@
+import React, { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { disableProps } from '@salutejs/plasma-sb-utils';
+
+import { iconButtonConfig } from '../../../../components/IconButton';
+import { mergeConfig } from '../../../../engines';
+import { WithTheme, argTypesFromConfig } from '../../../_helpers';
+import { IconChevronLeft } from '../../../../components/_Icon';
+
+import { config } from './IconButton.config';
+import { IconButton } from './IconButton';
+
+const meta: Meta<typeof IconButton> = {
+    title: 'plasma_web/IconButton',
+    decorators: [WithTheme],
+    component: IconButton,
+    argTypes: {
+        ...argTypesFromConfig(mergeConfig(iconButtonConfig, config)),
+        pin: {
+            options: [
+                'square-square',
+                'square-clear',
+                'clear-square',
+                'clear-clear',
+                'clear-circle',
+                'circle-clear',
+                'circle-circle',
+                '',
+            ],
+            control: {
+                type: 'select',
+            },
+            table: { defaultValue: { summary: 'bottom' } },
+        },
+    },
+};
+
+export default meta;
+
+const getSizeForIcon = (size) => {
+    const map = {
+        mr: 's',
+        lr: 's',
+        m: 's',
+        l: 's',
+        sr: 's',
+        xsr: 'xs',
+    };
+    if (map[size]) {
+        return map[size];
+    }
+
+    return size;
+};
+
+export const Default: StoryObj<ComponentProps<typeof IconButton>> = {
+    args: {
+        children: <IconChevronLeft />,
+        view: 'default',
+        size: 'm',
+        disabled: false,
+        focused: true,
+        isLoading: false,
+    },
+    argTypes: { ...disableProps(['children']) },
+    render: (args) => (
+        <IconButton {...args}>
+            <IconChevronLeft size={getSizeForIcon(args.size)} />
+        </IconButton>
+    ),
+};

package/styled-components/cjs/index.js

@@ -58,6 +58,17 @@ Object.keys(_Button).forEach(function (key) {
     }
   });
 });
+var _IconButton = /*#__PURE__*/require("./components/IconButton");
+Object.keys(_IconButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _IconButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _IconButton[key];
+    }
+  });
+});
 var _ButtonGroup = /*#__PURE__*/require("./components/ButtonGroup");
 Object.keys(_ButtonGroup).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

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

@@ -2,7 +2,7 @@ var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { css } from 'styled-components';
 import styled from 'styled-components';
-import { applyEllipsis } from '../../mixins';
+import { applyEllipsis, addFocus } from '../../mixins';
 import { component, mergeConfig } from '../../engines';
 import { spinnerConfig, spinnerTokens } from '../Spinner';
 import { classes, tokens } from './Button.tokens';
@@ -31,4 +31,12 @@ export var Loader = /*#__PURE__*/styled.div.withConfig({
 })(["position:absolute;"]);
 export var StyledSpinner = /*#__PURE__*/styled(Spinner).withConfig({
   componentId: "plasma-new-hope__sc-9d9bqj-3"
-})(["", ":var(", ");", ":var(", ");"], spinnerTokens.size, tokens.buttonSpinnerSize, spinnerTokens.color, tokens.buttonSpinnerColor);
+})(["", ":var(", ");", ":var(", ");"], spinnerTokens.size, tokens.buttonSpinnerSize, spinnerTokens.color, tokens.buttonSpinnerColor);
+
+// INFO: Для возможности переиспользования стилей в других компонентах
+export var baseContent = /*#__PURE__*/"\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    box-sizing: border-box;\n    justify-content: center;\n\n    appearance: none;\n    border: none;\n    cursor: pointer;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n    a& {\n        text-decoration: none;\n    }\n\n    /* NOTE: \n        --plasma_computed-btn-br-radius is defined in Button.tsx\n    */\n    --plasma_private-btn-br: var(--plasma_computed-btn-br);\n    border-radius: var(--plasma_private-btn-br);\n\n    &&.".concat(String(classes.buttonSquare), " {\n        width: var(").concat(tokens.buttonHeight, ");\n        padding: 0;\n    }\n\n    color: var(").concat(tokens.buttonColor, ");\n    background-color: var(").concat(tokens.buttonBackgroundColor, ");\n\n    :hover {\n        color: var(").concat(tokens.buttonColorHover, ", var(").concat(tokens.buttonColor, "));\n        background-color: var(").concat(tokens.buttonBackgroundColorHover, ", var(").concat(tokens.buttonBackgroundColor, "));\n\n        scale: var(").concat(tokens.buttonScaleHover, ");\n    }\n\n    :active {\n        color: var(").concat(tokens.buttonColorActive, ", var(").concat(tokens.buttonColor, "));\n        background-color: var(").concat(tokens.buttonBackgroundColorActive, ", var(").concat(tokens.buttonBackgroundColor, "));\n\n        scale: var(").concat(tokens.buttonScaleActive, ");\n    }\n\n    height: var(").concat(tokens.buttonHeight, ");\n    width: var(").concat(tokens.buttonWidth, ");\n\n    /* TODO: #714 move these calc's to plasma-mapping | ds-generator and add Math.round() */\n    padding: 0 var(").concat(tokens.buttonPadding, ", calc(var(").concat(tokens.buttonHeight, ") * 1.618 / 4));\n\n    font-family: var(").concat(tokens.buttonFontFamily, ");\n    font-size: var(").concat(tokens.buttonFontSize, ");\n    font-style: var(").concat(tokens.buttonFontStyle, ");\n    font-weight: var(").concat(tokens.buttonFontWeight, ");\n    letter-spacing: var(").concat(tokens.buttonLetterSpacing, ");\n    line-height: var(").concat(tokens.buttonLineHeight, ");\n\n    /* TODO: #710 make it token API ? */\n    --plasma_private-btn-outline-size: var(--plasma-button-outline-size, 0.0625rem);\n\n    :focus {\n        outline: none;\n    }\n\n    ").concat(addFocus({
+  outlineOffset: '-0.125rem',
+  outlineSize: 'var(--plasma_private-btn-outline-size)',
+  outlineRadius: 'calc(0.125rem + var(--plasma_private-btn-br))',
+  outlineColor: "var(".concat(tokens.buttonFocusColor, ")")
+}), "\n\n    &[disabled] {\n        opacity: var(").concat(tokens.buttonDisabledOpacity, ");\n        cursor: not-allowed;\n\n        :hover,\n        :active {\n            scale: none;\n\n            color: var(").concat(tokens.buttonColor, ");\n            background-color: var(").concat(tokens.buttonBackgroundColor, ");\n        }\n    }\n\n    &.").concat(classes.fixedStretching, " {\n        width: var(").concat(tokens.buttonWidth, ");\n    }\n    &.").concat(classes.filledStretching, " {\n        width: 100%;\n    }\n    &.").concat(classes.autoStretching, " {\n        width: auto;\n    }\n");