@salutejs/plasma-new-hope 0.335.0-canary.2203.17433640523.0 → 0.335.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/plasma-new-hope",
-  "version": "0.335.0-canary.2203.17433640523.0",
+  "version": "0.335.0",
   "description": "Salute Design System blueprint",
   "main": "cjs/index.js",
   "module": "es/index.js",
@@ -79,7 +79,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.207.0-canary.2203.17433640523.0",
+    "@salutejs/plasma-sb-utils": "0.207.0",
     "@salutejs/plasma-themes": "0.37.0",
     "@storybook/addon-docs": "8.6.12",
     "@storybook/addon-essentials": "8.6.12",
@@ -117,7 +117,7 @@
     "@linaria/react": "5.0.3",
     "@popperjs/core": "2.11.8",
     "@salutejs/input-core": "2.1.2",
-    "@salutejs/plasma-core": "1.207.0-canary.2203.17433640523.0",
+    "@salutejs/plasma-core": "1.207.0",
     "@salutejs/react-maskinput": "3.2.6",
     "@tanstack/react-table": "8.21.2",
     "@tanstack/react-virtual": "3.13.2",
@@ -137,5 +137,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "010fc06234b2b97be10cd7d02d6f62010dace2cf"
+  "gitHead": "4e132991b5ec410595409b6a2dac89ac7d21f9e0"
 }

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

@@ -17,6 +17,7 @@ _export(exports, {
     }
 });
 var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+var _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
 var _roundness = require("../../utils/roundness");
 var _utils = require("../../utils");
 var _base = require("./variations/_view/base");
@@ -40,6 +41,11 @@ function _define_property(obj, key, value) {
     }
     return obj;
 }
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -149,7 +155,7 @@ function _object_without_properties_loose(source, excluded) {
 }
 var buttonRoot = function(Root) {
     return /*#__PURE__*/ (0, _react.forwardRef)(function(props, ref) {
-        var children = props.children, view = props.view, size = props.size, text = props.text, value = props.value, contentLeft = props.contentLeft, contentRight = props.contentRight, _props_contentPlacing = props.contentPlacing, contentPlacing = _props_contentPlacing === void 0 ? 'default' : _props_contentPlacing, isLoading = props.isLoading, loader = props.loader, stretch = props.stretch, square = props.square, pin = props.pin, disabled = props.disabled, focused = props.focused, outlined = props.outlined, className = props.className, blur = props.blur, style = props.style, _props_stretching = props.stretching, stretching = _props_stretching === void 0 ? 'auto' : _props_stretching, rest = _object_without_properties(props, [
+        var children = props.children, view = props.view, size = props.size, text = props.text, value = props.value, contentLeft = props.contentLeft, contentRight = props.contentRight, _props_contentPlacing = props.contentPlacing, contentPlacing = _props_contentPlacing === void 0 ? 'default' : _props_contentPlacing, isLoading = props.isLoading, loader = props.loader, stretch = props.stretch, square = props.square, pin = props.pin, disabled = props.disabled, focused = props.focused, outlined = props.outlined, className = props.className, blur = props.blur, style = props.style, _props_stretching = props.stretching, stretching = _props_stretching === void 0 ? 'auto' : _props_stretching, additionalContent = props.additionalContent, rest = _object_without_properties(props, [
             "children",
             "view",
             "size",
@@ -169,7 +175,8 @@ var buttonRoot = function(Root) {
             "className",
             "blur",
             "style",
-            "stretching"
+            "stretching",
+            "additionalContent"
         ]);
         var txt = typeof children === 'string' ? children : text;
         var hasRightContentMargin = Boolean(children || txt || value || contentRight);
@@ -203,8 +210,10 @@ var buttonRoot = function(Root) {
         }, contentLeft && /*#__PURE__*/ _react.default.createElement(_Buttonstyles.StyledContentLeft, {
             hasContentMargin: hasRightContentMargin
         }, contentLeft), txt ? /*#__PURE__*/ _react.default.createElement(_Buttonstyles.ButtonText, {
-            className: contentRelaxedClass
-        }, txt) : children, value && /*#__PURE__*/ _react.default.createElement(_Buttonstyles.ButtonValue, null, value), contentRight && /*#__PURE__*/ _react.default.createElement(_Buttonstyles.StyledContentRight, {
+            className: !additionalContent ? contentRelaxedClass : ''
+        }, txt) : children, additionalContent && /*#__PURE__*/ _react.default.createElement(_Buttonstyles.StyledAdditionalContent, {
+            className: (0, _classnames.default)(contentRelaxedClass, _define_property({}, _Buttontokens.classes.buttonHasValue, Boolean(value)))
+        }, additionalContent), value && /*#__PURE__*/ _react.default.createElement(_Buttonstyles.ButtonValue, null, value), contentRight && /*#__PURE__*/ _react.default.createElement(_Buttonstyles.StyledContentRight, {
             hasContentMargin: hasLeftContentMargin
         }, contentRight)), isLoading && /*#__PURE__*/ _react.default.createElement(_Buttonstyles.Loader, null, loader || /*#__PURE__*/ _react.default.createElement(_Buttonstyles.StyledSpinner, null)));
     });

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

@@ -21,6 +21,9 @@ _export(exports, {
     get Loader () {
         return Loader;
     },
+    get StyledAdditionalContent () {
+        return StyledAdditionalContent;
+    },
     get StyledContentLeft () {
         return StyledContentLeft;
     },
@@ -88,16 +91,26 @@ var mergedConfig = (0, _engines.mergeConfig)(_Spinner.spinnerConfig);
 var Spinner = (0, _engines.component)(mergedConfig);
 var ButtonText = _styledcomponents.default.span.withConfig({
     displayName: "Button.styles__ButtonText",
-    componentId: "sc-63bce397-0"
+    componentId: "sc-b7c1e7a-0"
 })([
-    "min-width:4ch;flex-shrink:2;color:var(",
+    "min-width:4ch;&.",
+    "{flex-grow:2;text-align:start;}color:var(",
     ");",
-    " &.",
-    "{text-align:start;flex-grow:2;}"
-], _Buttontokens.tokens.buttonTextColor, (0, _mixins.applyEllipsis)(), String(_Buttontokens.classes.contentRelaxed));
+    ""
+], String(_Buttontokens.classes.contentRelaxed), _Buttontokens.tokens.buttonTextColor, (0, _mixins.applyEllipsis)());
+var StyledAdditionalContent = _styledcomponents.default.div.withConfig({
+    displayName: "Button.styles__StyledAdditionalContent",
+    componentId: "sc-b7c1e7a-1"
+})([
+    "display:flex;align-items:center;margin:var(",
+    ");&.",
+    "{text-align:start;flex-grow:2;}&.",
+    "{margin-right:var(",
+    ");}"
+], _Buttontokens.tokens.buttonAdditionalContentMargin, String(_Buttontokens.classes.contentRelaxed), _Buttontokens.classes.buttonHasValue, _Buttontokens.tokens.buttonAdditionalContentMarginRightWidthValue);
 var ButtonValue = _styledcomponents.default.span.withConfig({
     displayName: "Button.styles__ButtonValue",
-    componentId: "sc-63bce397-1"
+    componentId: "sc-b7c1e7a-2"
 })([
     "color:var(",
     ");margin:var(",
@@ -106,7 +119,7 @@ var ButtonValue = _styledcomponents.default.span.withConfig({
 ], _Buttontokens.tokens.buttonValueColor, _Buttontokens.tokens.buttonValueMargin, (0, _mixins.applyEllipsis)());
 var LoadWrap = _styledcomponents.default.div.withConfig({
     displayName: "Button.styles__LoadWrap",
-    componentId: "sc-63bce397-2"
+    componentId: "sc-b7c1e7a-3"
 })([
     "opacity:",
     ";display:flex;align-items:inherit;justify-content:",
@@ -120,13 +133,13 @@ var LoadWrap = _styledcomponents.default.div.withConfig({
 });
 var Loader = _styledcomponents.default.div.withConfig({
     displayName: "Button.styles__Loader",
-    componentId: "sc-63bce397-3"
+    componentId: "sc-b7c1e7a-4"
 })([
     "position:absolute;"
 ]);
 var StyledSpinner = (0, _styledcomponents.default)(Spinner).withConfig({
     displayName: "Button.styles__StyledSpinner",
-    componentId: "sc-63bce397-4"
+    componentId: "sc-b7c1e7a-5"
 })([
     "",
     ":var(",
@@ -136,7 +149,7 @@ var StyledSpinner = (0, _styledcomponents.default)(Spinner).withConfig({
 ], _Spinner.spinnerTokens.size, _Buttontokens.tokens.buttonSpinnerSize, _Spinner.spinnerTokens.color, _Buttontokens.tokens.buttonSpinnerColor);
 var StyledContentLeft = _styledcomponents.default.div.withConfig({
     displayName: "Button.styles__StyledContentLeft",
-    componentId: "sc-63bce397-5"
+    componentId: "sc-b7c1e7a-6"
 })([
     "display:flex;align-self:var(",
     ");color:var(",
@@ -148,7 +161,7 @@ var StyledContentLeft = _styledcomponents.default.div.withConfig({
 });
 var StyledContentRight = _styledcomponents.default.div.withConfig({
     displayName: "Button.styles__StyledContentRight",
-    componentId: "sc-63bce397-6"
+    componentId: "sc-b7c1e7a-7"
 })([
     "display:flex;align-self:var(",
     ");color:var(",

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

@@ -24,7 +24,8 @@ var classes = {
     contentRelaxed: 'button-content-relaxed',
     buttonSquare: 'button-square',
     buttonItem: 'button-item',
-    buttonLoading: 'button-loading'
+    buttonLoading: 'button-loading',
+    buttonHasValue: 'button-has-value'
 };
 var tokens = {
     buttonColor: '--plasma-button-color',
@@ -54,7 +55,9 @@ var tokens = {
     buttonLeftContentAlignSelf: '--plasma-button-left-content-align-self',
     buttonRightContentMargin: '--plasma-button-right-content-margin',
     buttonRightContentAlignSelf: '--plasma-button-right-content-align-self',
+    buttonAdditionalContentMargin: '--plasma-button-additional-content-margin',
     buttonValueMargin: '--plasma-button-value-margin',
+    buttonAdditionalContentMarginRightWidthValue: '--plasma-button-additional-content-margin-right-width-value',
     buttonDisabledOpacity: '--plasma-button-disabled-opacity',
     buttonFocusColor: '--plasma-button-focus-color',
     buttonSpinnerColor: '--plasma-button-spinner-color',

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

@@ -119,7 +119,7 @@ function _object_without_properties_loose(source, excluded) {
 }
 var linkButtonRoot = function(Root) {
     return /*#__PURE__*/ (0, _react.forwardRef)(function(props, ref) {
-        var children = props.children, view = props.view, size = props.size, text = props.text, contentLeft = props.contentLeft, contentRight = props.contentRight, isLoading = props.isLoading, loader = props.loader, disabled = props.disabled, target = props.target, href = props.href, rel = props.rel, style = props.style, rest = _object_without_properties(props, [
+        var children = props.children, view = props.view, size = props.size, text = props.text, contentLeft = props.contentLeft, contentRight = props.contentRight, isLoading = props.isLoading, loader = props.loader, disabled = props.disabled, target = props.target, href = props.href, rel = props.rel, style = props.style, additionalContent = props.additionalContent, rest = _object_without_properties(props, [
             "children",
             "view",
             "size",
@@ -132,7 +132,8 @@ var linkButtonRoot = function(Root) {
             "target",
             "href",
             "rel",
-            "style"
+            "style",
+            "additionalContent"
         ]);
         var txt = typeof children === 'string' ? children : text;
         var loadingCustomOpacity = isLoading && size === 'xxs' && {
@@ -155,7 +156,7 @@ var linkButtonRoot = function(Root) {
         }, linkProps, rest), /*#__PURE__*/ _react.default.createElement(_LinkButtonstyles.LoadWrap, {
             isLoading: !disabled && isLoading,
             style: _object_spread({}, loadingCustomOpacity)
-        }, contentLeft && /*#__PURE__*/ _react.default.createElement(_LinkButtonstyles.StyledContentLeft, null, contentLeft), txt ? /*#__PURE__*/ _react.default.createElement(_LinkButtonstyles.LinkButtonText, null, txt) : children, contentRight && /*#__PURE__*/ _react.default.createElement(_LinkButtonstyles.StyledContentRight, null, contentRight)), !disabled && isLoading && /*#__PURE__*/ _react.default.createElement(_LinkButtonstyles.Loader, null, loader || /*#__PURE__*/ _react.default.createElement(_LinkButtonstyles.StyledSpinner, null)));
+        }, contentLeft && /*#__PURE__*/ _react.default.createElement(_LinkButtonstyles.StyledContentLeft, null, contentLeft), txt ? /*#__PURE__*/ _react.default.createElement(_LinkButtonstyles.LinkButtonText, null, txt) : children, additionalContent && /*#__PURE__*/ _react.default.createElement(_LinkButtonstyles.StyledAdditionalContent, null, additionalContent), contentRight && /*#__PURE__*/ _react.default.createElement(_LinkButtonstyles.StyledContentRight, null, contentRight)), !disabled && isLoading && /*#__PURE__*/ _react.default.createElement(_LinkButtonstyles.Loader, null, loader || /*#__PURE__*/ _react.default.createElement(_LinkButtonstyles.StyledSpinner, null)));
     });
 };
 var linkButtonConfig = {

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

@@ -18,6 +18,9 @@ _export(exports, {
     get Loader () {
         return Loader;
     },
+    get StyledAdditionalContent () {
+        return StyledAdditionalContent;
+    },
     get StyledContentLeft () {
         return StyledContentLeft;
     },
@@ -88,9 +91,16 @@ var base = (0, _styledcomponents.css)([
     outlineRadius: "calc(0.125rem + var(".concat(_LinkButtontokens.tokens.linkButtonRadius, "))"),
     outlineColor: "var(".concat(_LinkButtontokens.tokens.linkButtonFocusColor, ")")
 }));
+var StyledAdditionalContent = _styledcomponents.default.div.withConfig({
+    displayName: "LinkButton.styles__StyledAdditionalContent",
+    componentId: "sc-b0f8868c-0"
+})([
+    "display:flex;align-items:center;margin:var(",
+    ");"
+], _LinkButtontokens.tokens.linkButtonAdditionalContentMargin);
 var LoadWrap = _styledcomponents.default.div.withConfig({
     displayName: "LinkButton.styles__LoadWrap",
-    componentId: "sc-d193754d-0"
+    componentId: "sc-b0f8868c-1"
 })([
     "opacity:",
     ";display:flex;align-items:inherit;justify-content:inherit;height:100%;width:100%;"
@@ -100,13 +110,13 @@ var LoadWrap = _styledcomponents.default.div.withConfig({
 });
 var Loader = _styledcomponents.default.div.withConfig({
     displayName: "LinkButton.styles__Loader",
-    componentId: "sc-d193754d-1"
+    componentId: "sc-b0f8868c-2"
 })([
     "position:absolute;"
 ]);
 var StyledSpinner = (0, _styledcomponents.default)(Spinner).withConfig({
     displayName: "LinkButton.styles__StyledSpinner",
-    componentId: "sc-d193754d-2"
+    componentId: "sc-b0f8868c-3"
 })([
     "",
     ":var(",
@@ -116,7 +126,7 @@ var StyledSpinner = (0, _styledcomponents.default)(Spinner).withConfig({
 ], _Spinner.spinnerTokens.size, _LinkButtontokens.tokens.linkButtonSpinnerSize, _Spinner.spinnerTokens.color, _LinkButtontokens.tokens.linkButtonSpinnerColor);
 var LinkButtonText = _styledcomponents.default.span.withConfig({
     displayName: "LinkButton.styles__LinkButtonText",
-    componentId: "sc-d193754d-3"
+    componentId: "sc-b0f8868c-4"
 })([
     "padding:var(",
     ");color:var(",
@@ -125,7 +135,7 @@ var LinkButtonText = _styledcomponents.default.span.withConfig({
 ], _LinkButtontokens.tokens.linkButtonTextPadding, _LinkButtontokens.tokens.linkButtonTextColor, (0, _mixins.applyEllipsis)());
 var StyledContentLeft = _styledcomponents.default.div.withConfig({
     displayName: "LinkButton.styles__StyledContentLeft",
-    componentId: "sc-d193754d-4"
+    componentId: "sc-b0f8868c-5"
 })([
     "line-height:0;color:var(",
     ");margin:var(",
@@ -133,7 +143,7 @@ var StyledContentLeft = _styledcomponents.default.div.withConfig({
 ], _LinkButtontokens.tokens.linkButtonIconColor, _LinkButtontokens.tokens.linkButtonLeftContentMargin);
 var StyledContentRight = _styledcomponents.default.div.withConfig({
     displayName: "LinkButton.styles__StyledContentRight",
-    componentId: "sc-d193754d-5"
+    componentId: "sc-b0f8868c-6"
 })([
     "line-height:0;color:var(",
     ");margin:var(",

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

@@ -28,6 +28,7 @@ var tokens = {
     linkButtonLineHeight: '--plasma-link-button-line-height',
     linkButtonLeftContentMargin: '--plasma-link-button-left-content-margin',
     linkButtonRightContentMargin: '--plasma-link-button-right-content-margin',
+    linkButtonAdditionalContentMargin: '--plasma-link-button-additional-content-margin',
     linkButtonDisabledOpacity: '--plasma-link-button-disabled-opacity',
     linkButtonFocusColor: '--plasma-link-button-focus-color',
     linkButtonSpinnerColor: '--plasma-link-button-spinner-color',

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

@@ -156,8 +156,10 @@ var config = {
                 ":inherit;",
                 ":0 0.625rem 0 -0.125rem;",
                 ":0 -0.125rem 0 0.625rem;",
-                ":0 0 0 0.25rem;"
-            ], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor, _Button.buttonTokens.buttonLeftContentMargin, _Button.buttonTokens.buttonRightContentMargin, _Button.buttonTokens.buttonValueMargin),
+                ":0 0 0 0.25rem;",
+                ":0 0 0 0.5rem;",
+                ":0.375rem;"
+            ], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor, _Button.buttonTokens.buttonLeftContentMargin, _Button.buttonTokens.buttonRightContentMargin, _Button.buttonTokens.buttonValueMargin, _Button.buttonTokens.buttonAdditionalContentMargin, _Button.buttonTokens.buttonAdditionalContentMarginRightWidthValue),
             l: (0, _styledcomponents.css)([
                 "",
                 ":3.5rem;",
@@ -174,8 +176,10 @@ var config = {
                 ":inherit;",
                 ":0 0.5rem 0 -0.125rem;",
                 ":0 -0.125rem 0 0.5rem;",
-                ":0 0 0 0.25rem;"
-            ], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor, _Button.buttonTokens.buttonLeftContentMargin, _Button.buttonTokens.buttonRightContentMargin, _Button.buttonTokens.buttonValueMargin),
+                ":0 0 0 0.25rem;",
+                ":0 0 0 0.5rem;",
+                ":0.375rem;"
+            ], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor, _Button.buttonTokens.buttonLeftContentMargin, _Button.buttonTokens.buttonRightContentMargin, _Button.buttonTokens.buttonValueMargin, _Button.buttonTokens.buttonAdditionalContentMargin, _Button.buttonTokens.buttonAdditionalContentMarginRightWidthValue),
             m: (0, _styledcomponents.css)([
                 "",
                 ":3rem;",
@@ -192,8 +196,10 @@ var config = {
                 ":inherit;",
                 ":0 0.375rem 0 -0.125rem;",
                 ":0 -0.125rem 0 0.375rem;",
-                ":0 0 0 0.25rem;"
-            ], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor, _Button.buttonTokens.buttonLeftContentMargin, _Button.buttonTokens.buttonRightContentMargin, _Button.buttonTokens.buttonValueMargin),
+                ":0 0 0 0.25rem;",
+                ":0 0 0 0.375rem;",
+                ":0.25rem;"
+            ], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor, _Button.buttonTokens.buttonLeftContentMargin, _Button.buttonTokens.buttonRightContentMargin, _Button.buttonTokens.buttonValueMargin, _Button.buttonTokens.buttonAdditionalContentMargin, _Button.buttonTokens.buttonAdditionalContentMarginRightWidthValue),
             s: (0, _styledcomponents.css)([
                 "",
                 ":2.5rem;",
@@ -210,8 +216,10 @@ var config = {
                 ":inherit;",
                 ":0 0.25rem 0 -0.125rem;",
                 ":0 -0.125rem 0 0.25rem;",
-                ":0 0 0 0.25rem;"
-            ], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor, _Button.buttonTokens.buttonLeftContentMargin, _Button.buttonTokens.buttonRightContentMargin, _Button.buttonTokens.buttonValueMargin),
+                ":0 0 0 0.25rem;",
+                ":0 0 0 0.25rem;",
+                ":0.25rem;"
+            ], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor, _Button.buttonTokens.buttonLeftContentMargin, _Button.buttonTokens.buttonRightContentMargin, _Button.buttonTokens.buttonValueMargin, _Button.buttonTokens.buttonAdditionalContentMargin, _Button.buttonTokens.buttonAdditionalContentMarginRightWidthValue),
             xs: (0, _styledcomponents.css)([
                 "",
                 ":2rem;",
@@ -228,8 +236,10 @@ var config = {
                 ":inherit;",
                 ":0 0.25rem 0 -0.125rem;",
                 ":0 -0.125rem 0 0.25rem;",
-                ":0 0 0 0.25rem;"
-            ], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor, _Button.buttonTokens.buttonLeftContentMargin, _Button.buttonTokens.buttonRightContentMargin, _Button.buttonTokens.buttonValueMargin),
+                ":0 0 0 0.25rem;",
+                ":0 0 0 0.25rem;",
+                ":0.125rem;"
+            ], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor, _Button.buttonTokens.buttonLeftContentMargin, _Button.buttonTokens.buttonRightContentMargin, _Button.buttonTokens.buttonValueMargin, _Button.buttonTokens.buttonAdditionalContentMargin, _Button.buttonTokens.buttonAdditionalContentMarginRightWidthValue),
             xxs: (0, _styledcomponents.css)([
                 "",
                 ":1.5rem;",
@@ -246,8 +256,10 @@ var config = {
                 ":inherit;",
                 ":0 0.25rem 0 -0.125rem;",
                 ":0 -0.125rem 0 0.25rem;",
-                ":0 0 0 0.25rem;"
-            ], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor, _Button.buttonTokens.buttonLeftContentMargin, _Button.buttonTokens.buttonRightContentMargin, _Button.buttonTokens.buttonValueMargin)
+                ":0 0rem 0 0.25rem;",
+                ":0 0 0 0.25rem;",
+                ":0.125rem;"
+            ], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor, _Button.buttonTokens.buttonLeftContentMargin, _Button.buttonTokens.buttonRightContentMargin, _Button.buttonTokens.buttonAdditionalContentMargin, _Button.buttonTokens.buttonValueMargin, _Button.buttonTokens.buttonAdditionalContentMarginRightWidthValue)
         },
         disabled: {
             true: (0, _styledcomponents.css)([

package/styled-components/cjs/examples/components/LinkButton/LinkButton.config.js

@@ -94,8 +94,9 @@ var config = {
                 ":inherit;",
                 ":0.063rem 0;",
                 ":0 0.5rem 0 0;",
+                ":0 0 0 0.5rem;",
                 ":0 0 0 0.5rem;"
-            ], _LinkButton.linkButtonTokens.linkButtonHeight, _LinkButton.linkButtonTokens.linkButtonPadding, _LinkButton.linkButtonTokens.linkButtonRadius, _LinkButton.linkButtonTokens.linkButtonFontFamily, _LinkButton.linkButtonTokens.linkButtonFontSize, _LinkButton.linkButtonTokens.linkButtonFontStyle, _LinkButton.linkButtonTokens.linkButtonFontWeight, _LinkButton.linkButtonTokens.linkButtonLetterSpacing, _LinkButton.linkButtonTokens.linkButtonLineHeight, _LinkButton.linkButtonTokens.linkButtonSpinnerSize, _LinkButton.linkButtonTokens.linkButtonSpinnerColor, _LinkButton.linkButtonTokens.linkButtonTextPadding, _LinkButton.linkButtonTokens.linkButtonLeftContentMargin, _LinkButton.linkButtonTokens.linkButtonRightContentMargin),
+            ], _LinkButton.linkButtonTokens.linkButtonHeight, _LinkButton.linkButtonTokens.linkButtonPadding, _LinkButton.linkButtonTokens.linkButtonRadius, _LinkButton.linkButtonTokens.linkButtonFontFamily, _LinkButton.linkButtonTokens.linkButtonFontSize, _LinkButton.linkButtonTokens.linkButtonFontStyle, _LinkButton.linkButtonTokens.linkButtonFontWeight, _LinkButton.linkButtonTokens.linkButtonLetterSpacing, _LinkButton.linkButtonTokens.linkButtonLineHeight, _LinkButton.linkButtonTokens.linkButtonSpinnerSize, _LinkButton.linkButtonTokens.linkButtonSpinnerColor, _LinkButton.linkButtonTokens.linkButtonTextPadding, _LinkButton.linkButtonTokens.linkButtonLeftContentMargin, _LinkButton.linkButtonTokens.linkButtonRightContentMargin, _LinkButton.linkButtonTokens.linkButtonAdditionalContentMargin),
             l: (0, _styledcomponents.css)([
                 "",
                 ":3.5rem;",
@@ -111,8 +112,9 @@ var config = {
                 ":inherit;",
                 ":0.063rem 0;",
                 ":0 0.5rem 0 0;",
+                ":0 0 0 0.5rem;",
                 ":0 0 0 0.5rem;"
-            ], _LinkButton.linkButtonTokens.linkButtonHeight, _LinkButton.linkButtonTokens.linkButtonPadding, _LinkButton.linkButtonTokens.linkButtonRadius, _LinkButton.linkButtonTokens.linkButtonFontFamily, _LinkButton.linkButtonTokens.linkButtonFontSize, _LinkButton.linkButtonTokens.linkButtonFontStyle, _LinkButton.linkButtonTokens.linkButtonFontWeight, _LinkButton.linkButtonTokens.linkButtonLetterSpacing, _LinkButton.linkButtonTokens.linkButtonLineHeight, _LinkButton.linkButtonTokens.linkButtonSpinnerSize, _LinkButton.linkButtonTokens.linkButtonSpinnerColor, _LinkButton.linkButtonTokens.linkButtonTextPadding, _LinkButton.linkButtonTokens.linkButtonLeftContentMargin, _LinkButton.linkButtonTokens.linkButtonRightContentMargin),
+            ], _LinkButton.linkButtonTokens.linkButtonHeight, _LinkButton.linkButtonTokens.linkButtonPadding, _LinkButton.linkButtonTokens.linkButtonRadius, _LinkButton.linkButtonTokens.linkButtonFontFamily, _LinkButton.linkButtonTokens.linkButtonFontSize, _LinkButton.linkButtonTokens.linkButtonFontStyle, _LinkButton.linkButtonTokens.linkButtonFontWeight, _LinkButton.linkButtonTokens.linkButtonLetterSpacing, _LinkButton.linkButtonTokens.linkButtonLineHeight, _LinkButton.linkButtonTokens.linkButtonSpinnerSize, _LinkButton.linkButtonTokens.linkButtonSpinnerColor, _LinkButton.linkButtonTokens.linkButtonTextPadding, _LinkButton.linkButtonTokens.linkButtonLeftContentMargin, _LinkButton.linkButtonTokens.linkButtonRightContentMargin, _LinkButton.linkButtonTokens.linkButtonAdditionalContentMargin),
             m: (0, _styledcomponents.css)([
                 "",
                 ":3rem;",
@@ -128,8 +130,9 @@ var config = {
                 ":inherit;",
                 ":0.125rem 0;",
                 ":0 0.375rem 0 0;",
+                ":0 0 0 0.375rem;",
                 ":0 0 0 0.375rem;"
-            ], _LinkButton.linkButtonTokens.linkButtonHeight, _LinkButton.linkButtonTokens.linkButtonPadding, _LinkButton.linkButtonTokens.linkButtonRadius, _LinkButton.linkButtonTokens.linkButtonFontFamily, _LinkButton.linkButtonTokens.linkButtonFontSize, _LinkButton.linkButtonTokens.linkButtonFontStyle, _LinkButton.linkButtonTokens.linkButtonFontWeight, _LinkButton.linkButtonTokens.linkButtonLetterSpacing, _LinkButton.linkButtonTokens.linkButtonLineHeight, _LinkButton.linkButtonTokens.linkButtonSpinnerSize, _LinkButton.linkButtonTokens.linkButtonSpinnerColor, _LinkButton.linkButtonTokens.linkButtonTextPadding, _LinkButton.linkButtonTokens.linkButtonLeftContentMargin, _LinkButton.linkButtonTokens.linkButtonRightContentMargin),
+            ], _LinkButton.linkButtonTokens.linkButtonHeight, _LinkButton.linkButtonTokens.linkButtonPadding, _LinkButton.linkButtonTokens.linkButtonRadius, _LinkButton.linkButtonTokens.linkButtonFontFamily, _LinkButton.linkButtonTokens.linkButtonFontSize, _LinkButton.linkButtonTokens.linkButtonFontStyle, _LinkButton.linkButtonTokens.linkButtonFontWeight, _LinkButton.linkButtonTokens.linkButtonLetterSpacing, _LinkButton.linkButtonTokens.linkButtonLineHeight, _LinkButton.linkButtonTokens.linkButtonSpinnerSize, _LinkButton.linkButtonTokens.linkButtonSpinnerColor, _LinkButton.linkButtonTokens.linkButtonTextPadding, _LinkButton.linkButtonTokens.linkButtonLeftContentMargin, _LinkButton.linkButtonTokens.linkButtonRightContentMargin, _LinkButton.linkButtonTokens.linkButtonAdditionalContentMargin),
             s: (0, _styledcomponents.css)([
                 "",
                 ":2.5rem;",
@@ -145,8 +148,9 @@ var config = {
                 ":inherit;",
                 ":0.063rem 0;",
                 ":0 0.25rem 0 0;",
+                ":0 0 0 0.25rem;",
                 ":0 0 0 0.25rem;"
-            ], _LinkButton.linkButtonTokens.linkButtonHeight, _LinkButton.linkButtonTokens.linkButtonPadding, _LinkButton.linkButtonTokens.linkButtonRadius, _LinkButton.linkButtonTokens.linkButtonFontFamily, _LinkButton.linkButtonTokens.linkButtonFontSize, _LinkButton.linkButtonTokens.linkButtonFontStyle, _LinkButton.linkButtonTokens.linkButtonFontWeight, _LinkButton.linkButtonTokens.linkButtonLetterSpacing, _LinkButton.linkButtonTokens.linkButtonLineHeight, _LinkButton.linkButtonTokens.linkButtonSpinnerSize, _LinkButton.linkButtonTokens.linkButtonSpinnerColor, _LinkButton.linkButtonTokens.linkButtonTextPadding, _LinkButton.linkButtonTokens.linkButtonLeftContentMargin, _LinkButton.linkButtonTokens.linkButtonRightContentMargin),
+            ], _LinkButton.linkButtonTokens.linkButtonHeight, _LinkButton.linkButtonTokens.linkButtonPadding, _LinkButton.linkButtonTokens.linkButtonRadius, _LinkButton.linkButtonTokens.linkButtonFontFamily, _LinkButton.linkButtonTokens.linkButtonFontSize, _LinkButton.linkButtonTokens.linkButtonFontStyle, _LinkButton.linkButtonTokens.linkButtonFontWeight, _LinkButton.linkButtonTokens.linkButtonLetterSpacing, _LinkButton.linkButtonTokens.linkButtonLineHeight, _LinkButton.linkButtonTokens.linkButtonSpinnerSize, _LinkButton.linkButtonTokens.linkButtonSpinnerColor, _LinkButton.linkButtonTokens.linkButtonTextPadding, _LinkButton.linkButtonTokens.linkButtonLeftContentMargin, _LinkButton.linkButtonTokens.linkButtonRightContentMargin, _LinkButton.linkButtonTokens.linkButtonAdditionalContentMargin),
             xs: (0, _styledcomponents.css)([
                 "",
                 ":2rem;",
@@ -162,8 +166,9 @@ var config = {
                 ":inherit;",
                 ":0.063rem 0;",
                 ":0 0.25rem 0 0;",
+                ":0 0 0 0.25rem;",
                 ":0 0 0 0.25rem;"
-            ], _LinkButton.linkButtonTokens.linkButtonHeight, _LinkButton.linkButtonTokens.linkButtonPadding, _LinkButton.linkButtonTokens.linkButtonRadius, _LinkButton.linkButtonTokens.linkButtonFontFamily, _LinkButton.linkButtonTokens.linkButtonFontSize, _LinkButton.linkButtonTokens.linkButtonFontStyle, _LinkButton.linkButtonTokens.linkButtonFontWeight, _LinkButton.linkButtonTokens.linkButtonLetterSpacing, _LinkButton.linkButtonTokens.linkButtonLineHeight, _LinkButton.linkButtonTokens.linkButtonSpinnerSize, _LinkButton.linkButtonTokens.linkButtonSpinnerColor, _LinkButton.linkButtonTokens.linkButtonTextPadding, _LinkButton.linkButtonTokens.linkButtonLeftContentMargin, _LinkButton.linkButtonTokens.linkButtonRightContentMargin),
+            ], _LinkButton.linkButtonTokens.linkButtonHeight, _LinkButton.linkButtonTokens.linkButtonPadding, _LinkButton.linkButtonTokens.linkButtonRadius, _LinkButton.linkButtonTokens.linkButtonFontFamily, _LinkButton.linkButtonTokens.linkButtonFontSize, _LinkButton.linkButtonTokens.linkButtonFontStyle, _LinkButton.linkButtonTokens.linkButtonFontWeight, _LinkButton.linkButtonTokens.linkButtonLetterSpacing, _LinkButton.linkButtonTokens.linkButtonLineHeight, _LinkButton.linkButtonTokens.linkButtonSpinnerSize, _LinkButton.linkButtonTokens.linkButtonSpinnerColor, _LinkButton.linkButtonTokens.linkButtonTextPadding, _LinkButton.linkButtonTokens.linkButtonLeftContentMargin, _LinkButton.linkButtonTokens.linkButtonRightContentMargin, _LinkButton.linkButtonTokens.linkButtonAdditionalContentMargin),
             xxs: (0, _styledcomponents.css)([
                 "",
                 ":1.5rem;",
@@ -178,8 +183,9 @@ var config = {
                 ":0.75rem;",
                 ":inherit;",
                 ":0.063rem 0.25rem 0.063rem 0;",
-                ":0.063rem 0 0.063rem 0.25rem;"
-            ], _LinkButton.linkButtonTokens.linkButtonHeight, _LinkButton.linkButtonTokens.linkButtonPadding, _LinkButton.linkButtonTokens.linkButtonRadius, _LinkButton.linkButtonTokens.linkButtonFontFamily, _LinkButton.linkButtonTokens.linkButtonFontSize, _LinkButton.linkButtonTokens.linkButtonFontStyle, _LinkButton.linkButtonTokens.linkButtonFontWeight, _LinkButton.linkButtonTokens.linkButtonLetterSpacing, _LinkButton.linkButtonTokens.linkButtonLineHeight, _LinkButton.linkButtonTokens.linkButtonSpinnerSize, _LinkButton.linkButtonTokens.linkButtonSpinnerColor, _LinkButton.linkButtonTokens.linkButtonLeftContentMargin, _LinkButton.linkButtonTokens.linkButtonRightContentMargin)
+                ":0.063rem 0 0.063rem 0.25rem;",
+                ":0 0 0 0.25rem;"
+            ], _LinkButton.linkButtonTokens.linkButtonHeight, _LinkButton.linkButtonTokens.linkButtonPadding, _LinkButton.linkButtonTokens.linkButtonRadius, _LinkButton.linkButtonTokens.linkButtonFontFamily, _LinkButton.linkButtonTokens.linkButtonFontSize, _LinkButton.linkButtonTokens.linkButtonFontStyle, _LinkButton.linkButtonTokens.linkButtonFontWeight, _LinkButton.linkButtonTokens.linkButtonLetterSpacing, _LinkButton.linkButtonTokens.linkButtonLineHeight, _LinkButton.linkButtonTokens.linkButtonSpinnerSize, _LinkButton.linkButtonTokens.linkButtonSpinnerColor, _LinkButton.linkButtonTokens.linkButtonLeftContentMargin, _LinkButton.linkButtonTokens.linkButtonRightContentMargin, _LinkButton.linkButtonTokens.linkButtonAdditionalContentMargin)
         },
         disabled: {
             true: (0, _styledcomponents.css)([

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

@@ -78,6 +78,7 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 import React, { forwardRef } from "react";
+import cls from "classnames";
 import { convertRoundnessMatrix } from "../../utils/roundness";
 import { cx } from "../../utils";
 import { base as viewCSS } from "./variations/_view/base";
@@ -86,11 +87,11 @@ import { base as disabledCSS } from "./variations/_disabled/base";
 import { base as focusedCSS } from "./variations/_focused/base";
 import { base as stretchingCSS } from "./variations/_stretching/base";
 import { base as blurredCSS } from "./variations/_blurred/base";
-import { base, ButtonText, ButtonValue, Loader, LoadWrap, StyledContentLeft, StyledContentRight, StyledSpinner } from "./Button.styles";
+import { base, ButtonText, ButtonValue, Loader, LoadWrap, StyledAdditionalContent, StyledContentLeft, StyledContentRight, StyledSpinner } from "./Button.styles";
 import { classes, tokens } from "./Button.tokens";
 export var buttonRoot = function(Root) {
     return /*#__PURE__*/ forwardRef(function(props, ref) {
-        var children = props.children, view = props.view, size = props.size, text = props.text, value = props.value, contentLeft = props.contentLeft, contentRight = props.contentRight, _props_contentPlacing = props.contentPlacing, contentPlacing = _props_contentPlacing === void 0 ? 'default' : _props_contentPlacing, isLoading = props.isLoading, loader = props.loader, stretch = props.stretch, square = props.square, pin = props.pin, disabled = props.disabled, focused = props.focused, outlined = props.outlined, className = props.className, blur = props.blur, style = props.style, _props_stretching = props.stretching, stretching = _props_stretching === void 0 ? 'auto' : _props_stretching, rest = _object_without_properties(props, [
+        var children = props.children, view = props.view, size = props.size, text = props.text, value = props.value, contentLeft = props.contentLeft, contentRight = props.contentRight, _props_contentPlacing = props.contentPlacing, contentPlacing = _props_contentPlacing === void 0 ? 'default' : _props_contentPlacing, isLoading = props.isLoading, loader = props.loader, stretch = props.stretch, square = props.square, pin = props.pin, disabled = props.disabled, focused = props.focused, outlined = props.outlined, className = props.className, blur = props.blur, style = props.style, _props_stretching = props.stretching, stretching = _props_stretching === void 0 ? 'auto' : _props_stretching, additionalContent = props.additionalContent, rest = _object_without_properties(props, [
             "children",
             "view",
             "size",
@@ -110,7 +111,8 @@ export var buttonRoot = function(Root) {
             "className",
             "blur",
             "style",
-            "stretching"
+            "stretching",
+            "additionalContent"
         ]);
         var txt = typeof children === 'string' ? children : text;
         var hasRightContentMargin = Boolean(children || txt || value || contentRight);
@@ -144,8 +146,10 @@ export var buttonRoot = function(Root) {
         }, 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, {
+            className: !additionalContent ? contentRelaxedClass : ''
+        }, txt) : children, additionalContent && /*#__PURE__*/ React.createElement(StyledAdditionalContent, {
+            className: cls(contentRelaxedClass, _define_property({}, classes.buttonHasValue, Boolean(value)))
+        }, additionalContent), value && /*#__PURE__*/ React.createElement(ButtonValue, null, value), contentRight && /*#__PURE__*/ React.createElement(StyledContentRight, {
             hasContentMargin: hasLeftContentMargin
         }, contentRight)), isLoading && /*#__PURE__*/ React.createElement(Loader, null, loader || /*#__PURE__*/ React.createElement(StyledSpinner, null)));
     });

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

@@ -9,16 +9,26 @@ var mergedConfig = mergeConfig(spinnerConfig);
 var Spinner = component(mergedConfig);
 export var ButtonText = styled.span.withConfig({
     displayName: "Button.styles__ButtonText",
-    componentId: "sc-63bce397-0"
+    componentId: "sc-b7c1e7a-0"
 })([
-    "min-width:4ch;flex-shrink:2;color:var(",
+    "min-width:4ch;&.",
+    "{flex-grow:2;text-align:start;}color:var(",
     ");",
-    " &.",
-    "{text-align:start;flex-grow:2;}"
-], tokens.buttonTextColor, applyEllipsis(), String(classes.contentRelaxed));
+    ""
+], String(classes.contentRelaxed), tokens.buttonTextColor, applyEllipsis());
+export var StyledAdditionalContent = styled.div.withConfig({
+    displayName: "Button.styles__StyledAdditionalContent",
+    componentId: "sc-b7c1e7a-1"
+})([
+    "display:flex;align-items:center;margin:var(",
+    ");&.",
+    "{text-align:start;flex-grow:2;}&.",
+    "{margin-right:var(",
+    ");}"
+], tokens.buttonAdditionalContentMargin, String(classes.contentRelaxed), classes.buttonHasValue, tokens.buttonAdditionalContentMarginRightWidthValue);
 export var ButtonValue = styled.span.withConfig({
     displayName: "Button.styles__ButtonValue",
-    componentId: "sc-63bce397-1"
+    componentId: "sc-b7c1e7a-2"
 })([
     "color:var(",
     ");margin:var(",
@@ -28,7 +38,7 @@ export var ButtonValue = styled.span.withConfig({
 // TODO: #720
 export var LoadWrap = styled.div.withConfig({
     displayName: "Button.styles__LoadWrap",
-    componentId: "sc-63bce397-2"
+    componentId: "sc-b7c1e7a-3"
 })([
     "opacity:",
     ";display:flex;align-items:inherit;justify-content:",
@@ -42,13 +52,13 @@ export var LoadWrap = styled.div.withConfig({
 });
 export var Loader = styled.div.withConfig({
     displayName: "Button.styles__Loader",
-    componentId: "sc-63bce397-3"
+    componentId: "sc-b7c1e7a-4"
 })([
     "position:absolute;"
 ]);
 export var StyledSpinner = styled(Spinner).withConfig({
     displayName: "Button.styles__StyledSpinner",
-    componentId: "sc-63bce397-4"
+    componentId: "sc-b7c1e7a-5"
 })([
     "",
     ":var(",
@@ -58,7 +68,7 @@ export var StyledSpinner = styled(Spinner).withConfig({
 ], spinnerTokens.size, tokens.buttonSpinnerSize, spinnerTokens.color, tokens.buttonSpinnerColor);
 export var StyledContentLeft = styled.div.withConfig({
     displayName: "Button.styles__StyledContentLeft",
-    componentId: "sc-63bce397-5"
+    componentId: "sc-b7c1e7a-6"
 })([
     "display:flex;align-self:var(",
     ");color:var(",
@@ -70,7 +80,7 @@ export var StyledContentLeft = styled.div.withConfig({
 });
 export var StyledContentRight = styled.div.withConfig({
     displayName: "Button.styles__StyledContentRight",
-    componentId: "sc-63bce397-6"
+    componentId: "sc-b7c1e7a-7"
 })([
     "display:flex;align-self:var(",
     ");color:var(",

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

@@ -6,7 +6,8 @@ export var classes = {
     contentRelaxed: 'button-content-relaxed',
     buttonSquare: 'button-square',
     buttonItem: 'button-item',
-    buttonLoading: 'button-loading'
+    buttonLoading: 'button-loading',
+    buttonHasValue: 'button-has-value'
 };
 export var tokens = {
     buttonColor: '--plasma-button-color',
@@ -36,7 +37,9 @@ export var tokens = {
     buttonLeftContentAlignSelf: '--plasma-button-left-content-align-self',
     buttonRightContentMargin: '--plasma-button-right-content-margin',
     buttonRightContentAlignSelf: '--plasma-button-right-content-align-self',
+    buttonAdditionalContentMargin: '--plasma-button-additional-content-margin',
     buttonValueMargin: '--plasma-button-value-margin',
+    buttonAdditionalContentMarginRightWidthValue: '--plasma-button-additional-content-margin-right-width-value',
     buttonDisabledOpacity: '--plasma-button-disabled-opacity',
     buttonFocusColor: '--plasma-button-focus-color',
     buttonSpinnerColor: '--plasma-button-spinner-color',