@salutejs/plasma-b2c 1.623.0-next-sbcom.0 → 1.623.0

package/dist/styled-components/cjs/components/Accordion/Accordion.config.js

@@ -67,7 +67,7 @@ const config = {
                 ${_styledcomponents.accordionTokens.accordionItemTextColor}: var(--text-primary);
                 ${_styledcomponents.accordionTokens.accordionItemIconColor}: var(--text-primary);
                 ${_styledcomponents.accordionTokens.accordionItemFocus}: var(--surface-accent);
-                ${_styledcomponents.accordionTokens.accordionItemBorderRadius}: 0rem !important;
+                ${_styledcomponents.accordionTokens.accordionItemViewBorderRadius}: 0rem;
                 ${_styledcomponents.accordionTokens.accordionBackground}: var(--surface-clear);
                 ${_styledcomponents.accordionTokens.accordionItemBorder}: none;
                 ${_styledcomponents.accordionTokens.accordionItemBorderBottom}: 0.063rem solid var(--surface-solid-tertiary);

package/dist/styled-components/cjs/components/Autocomplete/Autocomplete.config.js

@@ -223,7 +223,7 @@ const config = {
                 ${_styledcomponents.autocompleteTokens.textFieldHintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto;
                 ${_styledcomponents.autocompleteTokens.textFieldClearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto;
 
-                ${_styledcomponents.autocompleteTokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.autocompleteTokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.autocompleteTokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.autocompleteTokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.autocompleteTokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -298,7 +298,7 @@ const config = {
                 ${_styledcomponents.autocompleteTokens.textFieldHintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto;
                 ${_styledcomponents.autocompleteTokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto;
 
-                ${_styledcomponents.autocompleteTokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.autocompleteTokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.autocompleteTokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.autocompleteTokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.autocompleteTokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -373,7 +373,7 @@ const config = {
                 ${_styledcomponents.autocompleteTokens.textFieldHintInnerLabelPlacementOffset}: 0.062rem -2.688rem auto auto;
                 ${_styledcomponents.autocompleteTokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto;
 
-                ${_styledcomponents.autocompleteTokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.autocompleteTokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.autocompleteTokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.autocompleteTokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.autocompleteTokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -448,7 +448,7 @@ const config = {
                 ${_styledcomponents.autocompleteTokens.textFieldHintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto;
                 ${_styledcomponents.autocompleteTokens.textFieldClearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto;
 
-                ${_styledcomponents.autocompleteTokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.autocompleteTokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.autocompleteTokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.autocompleteTokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.autocompleteTokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);

package/dist/styled-components/cjs/components/Badge/Badge.clear.config.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "config", {
+    enumerable: true,
+    get: function() {
+        return config;
+    }
+});
+const _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
+const _Badgeconfigcommon = require("./Badge.config.common");
+const config = {
+    defaults: {
+        view: 'default',
+        size: 'm'
+    },
+    variations: {
+        view: {
+            default: (0, _styledcomponents.css)`
+                ${_styledcomponents.badgeTokens.color}: var(--text-primary);
+            `,
+            accent: (0, _styledcomponents.css)`
+                ${_styledcomponents.badgeTokens.color}: var(--text-accent);
+            `,
+            positive: (0, _styledcomponents.css)`
+                ${_styledcomponents.badgeTokens.color}: var(--text-positive);
+            `,
+            warning: (0, _styledcomponents.css)`
+                ${_styledcomponents.badgeTokens.color}: var(--text-warning);
+            `,
+            negative: (0, _styledcomponents.css)`
+                ${_styledcomponents.badgeTokens.color}: var(--text-negative);
+            `,
+            dark: (0, _styledcomponents.css)`
+                ${_styledcomponents.badgeTokens.color}: var(--on-light-text-primary);
+            `,
+            light: (0, _styledcomponents.css)`
+                ${_styledcomponents.badgeTokens.color}: var(--on-dark-text-primary);
+            `
+        },
+        size: {
+            l: (0, _styledcomponents.css)`
+                ${_Badgeconfigcommon.sizeL}
+            `,
+            m: (0, _styledcomponents.css)`
+                ${_Badgeconfigcommon.sizeM}
+            `,
+            s: (0, _styledcomponents.css)`
+                ${_Badgeconfigcommon.sizeS}
+            `,
+            xs: (0, _styledcomponents.css)`
+                ${_Badgeconfigcommon.sizeXS}
+            `
+        },
+        pilled: {
+            true: (0, _styledcomponents.css)`
+                ${_Badgeconfigcommon.pilled}
+            `
+        },
+        truncate: {
+            true: (0, _styledcomponents.css)``
+        }
+    }
+};

package/dist/styled-components/cjs/components/Badge/Badge.config.common.js

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get pilled () {
+        return pilled;
+    },
+    get sizeL () {
+        return sizeL;
+    },
+    get sizeM () {
+        return sizeM;
+    },
+    get sizeS () {
+        return sizeS;
+    },
+    get sizeXS () {
+        return sizeXS;
+    }
+});
+const _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
+const sizeL = `
+    ${_styledcomponents.badgeTokens.borderRadius}: 0.5rem;
+    ${_styledcomponents.badgeTokens.height}: 1.75rem;
+    ${_styledcomponents.badgeTokens.padding}: 0 0.6875rem;
+    ${_styledcomponents.badgeTokens.paddingIconOnly}: 0 0.375rem;
+
+    ${_styledcomponents.badgeTokens.fontFamily}: var(--plasma-typo-body-s-font-family);
+    ${_styledcomponents.badgeTokens.fontSize}: var(--plasma-typo-body-s-font-size);
+    ${_styledcomponents.badgeTokens.fontStyle}: var(--plasma-typo-body-s-font-style);
+    ${_styledcomponents.badgeTokens.fontWeight}: var(--plasma-typo-body-s-font-weight);
+    ${_styledcomponents.badgeTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing);
+    ${_styledcomponents.badgeTokens.lineHeight}: var(--plasma-typo-body-s-line-height);
+
+    ${_styledcomponents.badgeTokens.leftContentMarginLeft}: -0.0625rem;
+    ${_styledcomponents.badgeTokens.leftContentMarginRight}: 0.25rem;
+
+    ${_styledcomponents.badgeTokens.rightContentMarginLeft}: 0.25rem;
+    ${_styledcomponents.badgeTokens.rightContentMarginRight}: -0.0625rem;
+`;
+const sizeM = `
+    ${_styledcomponents.badgeTokens.borderRadius}: 0.375rem;
+    ${_styledcomponents.badgeTokens.height}: 1.5rem;
+    ${_styledcomponents.badgeTokens.padding}: 0 0.5625rem;
+    ${_styledcomponents.badgeTokens.paddingIconOnly}: 0 0.375rem;
+
+    ${_styledcomponents.badgeTokens.fontFamily}: var(--plasma-typo-body-xs-font-family);
+    ${_styledcomponents.badgeTokens.fontSize}: var(--plasma-typo-body-xs-font-size);
+    ${_styledcomponents.badgeTokens.fontStyle}: var(--plasma-typo-body-xs-font-style);
+    ${_styledcomponents.badgeTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight);
+    ${_styledcomponents.badgeTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+    ${_styledcomponents.badgeTokens.lineHeight}: var(--plasma-typo-body-xs-line-height);
+
+    ${_styledcomponents.badgeTokens.leftContentMarginLeft}: -0.0625rem;
+    ${_styledcomponents.badgeTokens.leftContentMarginRight}: 0.1875rem;
+
+    ${_styledcomponents.badgeTokens.rightContentMarginLeft}: 0.1875rem;
+    ${_styledcomponents.badgeTokens.rightContentMarginRight}: -0.0625rem;
+`;
+const sizeS = `
+    ${_styledcomponents.badgeTokens.borderRadius}: 0.375rem;
+    ${_styledcomponents.badgeTokens.height}: 1.25rem;
+    ${_styledcomponents.badgeTokens.padding}: 0 0.4375rem;
+    ${_styledcomponents.badgeTokens.paddingIconOnly}: 0 0.25rem;
+
+    ${_styledcomponents.badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family);
+    ${_styledcomponents.badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size);
+    ${_styledcomponents.badgeTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style);
+    ${_styledcomponents.badgeTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight);
+    ${_styledcomponents.badgeTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);
+    ${_styledcomponents.badgeTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height);
+
+    ${_styledcomponents.badgeTokens.leftContentMarginLeft}: -0.0625rem;
+    ${_styledcomponents.badgeTokens.leftContentMarginRight}: 0.125rem;
+
+    ${_styledcomponents.badgeTokens.rightContentMarginLeft}: 0.125rem;
+    ${_styledcomponents.badgeTokens.rightContentMarginRight}: -0.0625rem;
+`;
+const sizeXS = `
+    ${_styledcomponents.badgeTokens.borderRadius}: 0.25rem;
+    ${_styledcomponents.badgeTokens.height}: 1rem;
+    ${_styledcomponents.badgeTokens.padding}: 0 0.25rem;
+    ${_styledcomponents.badgeTokens.paddingIconOnly}: 0 0.188rem;
+
+    ${_styledcomponents.badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family);
+    ${_styledcomponents.badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size);
+    ${_styledcomponents.badgeTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style);
+    ${_styledcomponents.badgeTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight);
+    ${_styledcomponents.badgeTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);
+    ${_styledcomponents.badgeTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height);
+
+    ${_styledcomponents.badgeTokens.leftContentMarginLeft}: -0.0625rem;
+    ${_styledcomponents.badgeTokens.leftContentMarginRight}: 0.125rem;
+
+    ${_styledcomponents.badgeTokens.rightContentMarginLeft}: 0.125rem;
+    ${_styledcomponents.badgeTokens.rightContentMarginRight}: -0.0625rem;
+`;
+const pilled = `
+    ${_styledcomponents.badgeTokens.pilledBorderRadius}: 1000px;
+`;

package/dist/styled-components/cjs/components/Badge/Badge.config.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "config", {
     }
 });
 const _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
+const _Badgeconfigcommon = require("./Badge.config.common");
 const config = {
     defaults: {
         view: 'default',
@@ -82,85 +83,21 @@ const config = {
         },
         size: {
             l: (0, _styledcomponents.css)`
-                ${_styledcomponents.badgeTokens.borderRadius}: 0.5rem;
-                ${_styledcomponents.badgeTokens.height}: 1.75rem;
-                ${_styledcomponents.badgeTokens.padding}: 0 0.6875rem;
-                ${_styledcomponents.badgeTokens.paddingIconOnly}: 0 0.375rem;
-
-                ${_styledcomponents.badgeTokens.fontFamily}: var(--plasma-typo-body-s-font-family);
-                ${_styledcomponents.badgeTokens.fontSize}: var(--plasma-typo-body-s-font-size);
-                ${_styledcomponents.badgeTokens.fontStyle}: var(--plasma-typo-body-s-font-style);
-                ${_styledcomponents.badgeTokens.fontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${_styledcomponents.badgeTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${_styledcomponents.badgeTokens.lineHeight}: var(--plasma-typo-body-s-line-height);
-
-                ${_styledcomponents.badgeTokens.leftContentMarginLeft}: -0.0625rem;
-                ${_styledcomponents.badgeTokens.leftContentMarginRight}: 0.25rem;
-
-                ${_styledcomponents.badgeTokens.rightContentMarginLeft}: 0.25rem;
-                ${_styledcomponents.badgeTokens.rightContentMarginRight}: -0.0625rem;
+                ${_Badgeconfigcommon.sizeL}
             `,
             m: (0, _styledcomponents.css)`
-                ${_styledcomponents.badgeTokens.borderRadius}: 0.375rem;
-                ${_styledcomponents.badgeTokens.height}: 1.5rem;
-                ${_styledcomponents.badgeTokens.padding}: 0 0.5625rem;
-                ${_styledcomponents.badgeTokens.paddingIconOnly}: 0 0.375rem;
-
-                ${_styledcomponents.badgeTokens.fontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${_styledcomponents.badgeTokens.fontSize}: var(--plasma-typo-body-xs-font-size);
-                ${_styledcomponents.badgeTokens.fontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${_styledcomponents.badgeTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${_styledcomponents.badgeTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${_styledcomponents.badgeTokens.lineHeight}: var(--plasma-typo-body-xs-line-height);
-
-                ${_styledcomponents.badgeTokens.leftContentMarginLeft}: -0.0625rem;
-                ${_styledcomponents.badgeTokens.leftContentMarginRight}: 0.1875rem;
-
-                ${_styledcomponents.badgeTokens.rightContentMarginLeft}: 0.1875rem;
-                ${_styledcomponents.badgeTokens.rightContentMarginRight}: -0.0625rem;
+                ${_Badgeconfigcommon.sizeM}
             `,
             s: (0, _styledcomponents.css)`
-                ${_styledcomponents.badgeTokens.borderRadius}: 0.375rem;
-                ${_styledcomponents.badgeTokens.height}: 1.25rem;
-                ${_styledcomponents.badgeTokens.padding}: 0 0.4375rem;
-                ${_styledcomponents.badgeTokens.paddingIconOnly}: 0 0.25rem;
-
-                ${_styledcomponents.badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family);
-                ${_styledcomponents.badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size);
-                ${_styledcomponents.badgeTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style);
-                ${_styledcomponents.badgeTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight);
-                ${_styledcomponents.badgeTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);
-                ${_styledcomponents.badgeTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height);
-
-                ${_styledcomponents.badgeTokens.leftContentMarginLeft}: -0.0625rem;
-                ${_styledcomponents.badgeTokens.leftContentMarginRight}: 0.125rem;
-
-                ${_styledcomponents.badgeTokens.rightContentMarginLeft}: 0.125rem;
-                ${_styledcomponents.badgeTokens.rightContentMarginRight}: -0.0625rem;
+                ${_Badgeconfigcommon.sizeS}
             `,
             xs: (0, _styledcomponents.css)`
-                ${_styledcomponents.badgeTokens.borderRadius}: 0.25rem;
-                ${_styledcomponents.badgeTokens.height}: 1rem;
-                ${_styledcomponents.badgeTokens.padding}: 0 0.25rem;
-                ${_styledcomponents.badgeTokens.paddingIconOnly}: 0 0.188rem;
-
-                ${_styledcomponents.badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family);
-                ${_styledcomponents.badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size);
-                ${_styledcomponents.badgeTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style);
-                ${_styledcomponents.badgeTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight);
-                ${_styledcomponents.badgeTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);
-                ${_styledcomponents.badgeTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height);
-
-                ${_styledcomponents.badgeTokens.leftContentMarginLeft}: -0.0625rem;
-                ${_styledcomponents.badgeTokens.leftContentMarginRight}: 0.125rem;
-
-                ${_styledcomponents.badgeTokens.rightContentMarginLeft}: 0.125rem;
-                ${_styledcomponents.badgeTokens.rightContentMarginRight}: -0.0625rem;
+                ${_Badgeconfigcommon.sizeXS}
             `
         },
         pilled: {
             true: (0, _styledcomponents.css)`
-                ${_styledcomponents.badgeTokens.pilledBorderRadius}: 1.25rem;
+                ${_Badgeconfigcommon.pilled}
             `
         },
         transparent: {

package/dist/styled-components/cjs/components/Badge/Badge.js

@@ -2,13 +2,38 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "Badge", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get Badge () {
         return Badge;
+    },
+    get BadgeClear () {
+        return BadgeClear;
+    },
+    get BadgeDefault () {
+        return BadgeDefault;
+    },
+    get BadgeTransparent () {
+        return BadgeTransparent;
     }
 });
 const _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
 const _Badgeconfig = require("./Badge.config");
+const _Badgeclearconfig = require("./Badge.clear.config");
+const _Badgetransparentconfig = require("./Badge.transparent.config");
 const mergedConfig = (0, _styledcomponents.mergeConfig)(_styledcomponents.badgeConfig, _Badgeconfig.config);
-const Badge = (0, _styledcomponents.component)(mergedConfig);
+const BadgeDefault = (0, _styledcomponents.component)(mergedConfig);
+const mergedConfigClear = (0, _styledcomponents.mergeConfig)(_styledcomponents.badgeConfig, _Badgeclearconfig.config);
+const BadgeClear = (0, _styledcomponents.component)(mergedConfigClear);
+const mergedConfigTransparent = (0, _styledcomponents.mergeConfig)(_styledcomponents.badgeConfig, _Badgetransparentconfig.config);
+const BadgeTransparent = (0, _styledcomponents.component)(mergedConfigTransparent);
+const Badge = (0, _styledcomponents.createConditionalComponent)({
+    default: BadgeDefault,
+    clear: BadgeClear,
+    transparent: BadgeTransparent
+});

package/dist/styled-components/cjs/components/Badge/Badge.transparent.config.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "config", {
+    enumerable: true,
+    get: function() {
+        return config;
+    }
+});
+const _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
+const _Badgeconfigcommon = require("./Badge.config.common");
+const config = {
+    defaults: {
+        view: 'default',
+        size: 'm'
+    },
+    variations: {
+        view: {
+            default: (0, _styledcomponents.css)`
+                ${_styledcomponents.badgeTokens.color}: var(--text-primary);
+                ${_styledcomponents.badgeTokens.background}: var(--surface-transparent-secondary);
+            `,
+            accent: (0, _styledcomponents.css)`
+                ${_styledcomponents.badgeTokens.color}: var(--text-accent);
+                ${_styledcomponents.badgeTokens.background}: var(--surface-transparent-accent);
+            `,
+            positive: (0, _styledcomponents.css)`
+                ${_styledcomponents.badgeTokens.color}: var(--text-positive);
+                ${_styledcomponents.badgeTokens.background}: var(--surface-transparent-positive);
+            `,
+            warning: (0, _styledcomponents.css)`
+                ${_styledcomponents.badgeTokens.color}: var(--text-warning);
+                ${_styledcomponents.badgeTokens.background}: var(--surface-transparent-warning);
+            `,
+            negative: (0, _styledcomponents.css)`
+                ${_styledcomponents.badgeTokens.color}: var(--text-negative);
+                ${_styledcomponents.badgeTokens.background}: var(--surface-transparent-negative);
+            `,
+            dark: (0, _styledcomponents.css)`
+                ${_styledcomponents.badgeTokens.color}: var(--on-dark-text-primary);
+                ${_styledcomponents.badgeTokens.background}: var(--on-light-surface-transparent-deep);
+            `,
+            light: (0, _styledcomponents.css)`
+                ${_styledcomponents.badgeTokens.color}: var(--on-dark-text-primary);
+                ${_styledcomponents.badgeTokens.background}: var(--on-dark-surface-transparent-card);
+            `
+        },
+        size: {
+            l: (0, _styledcomponents.css)`
+                ${_Badgeconfigcommon.sizeL}
+            `,
+            m: (0, _styledcomponents.css)`
+                ${_Badgeconfigcommon.sizeM}
+            `,
+            s: (0, _styledcomponents.css)`
+                ${_Badgeconfigcommon.sizeS}
+            `,
+            xs: (0, _styledcomponents.css)`
+                ${_Badgeconfigcommon.sizeXS}
+            `
+        },
+        pilled: {
+            true: (0, _styledcomponents.css)`
+                ${_Badgeconfigcommon.pilled}
+            `
+        },
+        transparent: {
+            true: (0, _styledcomponents.css)``
+        },
+        truncate: {
+            true: (0, _styledcomponents.css)``
+        }
+    }
+};

package/dist/styled-components/cjs/components/Combobox/Combobox.config.js

@@ -275,7 +275,7 @@ const config = {
                 ${_styledcomponents.comboboxTokens.textFieldHintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto;
                 ${_styledcomponents.comboboxTokens.textFieldClearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto;
 
-                ${_styledcomponents.comboboxTokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.comboboxTokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.comboboxTokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.comboboxTokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.comboboxTokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -396,7 +396,7 @@ const config = {
                 ${_styledcomponents.comboboxTokens.textFieldHintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto;
                 ${_styledcomponents.comboboxTokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto;
 
-                ${_styledcomponents.comboboxTokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.comboboxTokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.comboboxTokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.comboboxTokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.comboboxTokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -517,7 +517,7 @@ const config = {
                 ${_styledcomponents.comboboxTokens.textFieldHintInnerLabelPlacementOffset}: 0.062rem -2.688rem auto auto;
                 ${_styledcomponents.comboboxTokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto;
 
-                ${_styledcomponents.comboboxTokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.comboboxTokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.comboboxTokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.comboboxTokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.comboboxTokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -638,7 +638,7 @@ const config = {
                 ${_styledcomponents.comboboxTokens.textFieldHintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto;
                 ${_styledcomponents.comboboxTokens.textFieldClearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto;
 
-                ${_styledcomponents.comboboxTokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.comboboxTokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.comboboxTokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.comboboxTokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.comboboxTokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);

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

@@ -17,78 +17,71 @@ const config = {
     variations: {
         view: {
             default: (0, _styledcomponents.css)`
-                ${_styledcomponents.linkButtonTokens.linkButtonColor}: var(--text-primary);
                 ${_styledcomponents.linkButtonTokens.linkButtonIconColor}: var(--text-primary);
                 ${_styledcomponents.linkButtonTokens.linkButtonTextColor}: var(--text-primary);
                 ${_styledcomponents.linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear);
-                ${_styledcomponents.linkButtonTokens.linkButtonColorHover}: var(--text-primary-hover);
-                ${_styledcomponents.linkButtonTokens.linkButtonColorActive}: var(--text-primary-active);
+                ${_styledcomponents.linkButtonTokens.linkButtonIconColorHover}: var(--text-primary-hover);
+                ${_styledcomponents.linkButtonTokens.linkButtonIconColorActive}: var(--text-primary-active);
                 ${_styledcomponents.linkButtonTokens.linkButtonFocusColor}: var(--surface-accent);
                 ${_styledcomponents.linkButtonTokens.linkButtonTextColorHover}: var(--text-primary-hover);
                 ${_styledcomponents.linkButtonTokens.linkButtonTextColorActive}: var(--text-primary-active);
             `,
             accent: (0, _styledcomponents.css)`
-                ${_styledcomponents.linkButtonTokens.linkButtonColor}: var(--text-accent);
                 ${_styledcomponents.linkButtonTokens.linkButtonIconColor}: var(--text-accent);
                 ${_styledcomponents.linkButtonTokens.linkButtonTextColor}: var(--text-accent);
                 ${_styledcomponents.linkButtonTokens.linkButtonBackgroundColor}: var(---surface-transparent-clear);
-                ${_styledcomponents.linkButtonTokens.linkButtonColorHover}: var(--text-accent-hover);
-                ${_styledcomponents.linkButtonTokens.linkButtonColorActive}: var(--text-accent-active);
+                ${_styledcomponents.linkButtonTokens.linkButtonIconColorHover}: var(--text-accent-hover);
+                ${_styledcomponents.linkButtonTokens.linkButtonIconColorActive}: var(--text-accent-active);
                 ${_styledcomponents.linkButtonTokens.linkButtonFocusColor}: var(--surface-accent);
                 ${_styledcomponents.linkButtonTokens.linkButtonTextColorHover}: var(--text-accent-hover);
                 ${_styledcomponents.linkButtonTokens.linkButtonTextColorActive}: var(--text-accent-active);
             `,
             secondary: (0, _styledcomponents.css)`
-                ${_styledcomponents.linkButtonTokens.linkButtonColor}: var(--text-secondary);
                 ${_styledcomponents.linkButtonTokens.linkButtonIconColor}: var(--text-secondary);
                 ${_styledcomponents.linkButtonTokens.linkButtonTextColor}: var(--text-secondary);
                 ${_styledcomponents.linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear);
-                ${_styledcomponents.linkButtonTokens.linkButtonColorHover}: var(--text-secondary-hover);
-                ${_styledcomponents.linkButtonTokens.linkButtonColorActive}: var(--text-secondary-active);
+                ${_styledcomponents.linkButtonTokens.linkButtonIconColorHover}: var(--text-secondary-hover);
+                ${_styledcomponents.linkButtonTokens.linkButtonIconColorActive}: var(--text-secondary-active);
                 ${_styledcomponents.linkButtonTokens.linkButtonFocusColor}: var(--surface-accent);
                 ${_styledcomponents.linkButtonTokens.linkButtonTextColorHover}: var(--text-secondary-hover);
                 ${_styledcomponents.linkButtonTokens.linkButtonTextColorActive}: var(--text-secondary-active);
             `,
             positive: (0, _styledcomponents.css)`
-                ${_styledcomponents.linkButtonTokens.linkButtonColor}: var(--text-positive);
                 ${_styledcomponents.linkButtonTokens.linkButtonIconColor}: var(--text-positive);
                 ${_styledcomponents.linkButtonTokens.linkButtonTextColor}: var(--text-positive);
                 ${_styledcomponents.linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear);
-                ${_styledcomponents.linkButtonTokens.linkButtonColorHover}: var(--text-positive-hover);
-                ${_styledcomponents.linkButtonTokens.linkButtonColorActive}: var(--text-positive-active);
+                ${_styledcomponents.linkButtonTokens.linkButtonIconColorHover}: var(--text-positive-hover);
+                ${_styledcomponents.linkButtonTokens.linkButtonIconColorActive}: var(--text-positive-active);
                 ${_styledcomponents.linkButtonTokens.linkButtonFocusColor}: var(--surface-accent);
                 ${_styledcomponents.linkButtonTokens.linkButtonTextColorHover}: var(--text-positive-hover);
                 ${_styledcomponents.linkButtonTokens.linkButtonTextColorActive}: var(--text-positive-active);
             `,
             warning: (0, _styledcomponents.css)`
-                ${_styledcomponents.linkButtonTokens.linkButtonColor}: var(--text-warning);
                 ${_styledcomponents.linkButtonTokens.linkButtonIconColor}: var(--text-warning);
                 ${_styledcomponents.linkButtonTokens.linkButtonTextColor}: var(--text-warning);
                 ${_styledcomponents.linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear);
-                ${_styledcomponents.linkButtonTokens.linkButtonColorHover}: var(--text-warning-hover);
-                ${_styledcomponents.linkButtonTokens.linkButtonColorActive}: var(--text-warning-active);
+                ${_styledcomponents.linkButtonTokens.linkButtonIconColorHover}: var(--text-warning-hover);
+                ${_styledcomponents.linkButtonTokens.linkButtonIconColorActive}: var(--text-warning-active);
                 ${_styledcomponents.linkButtonTokens.linkButtonFocusColor}: var(--surface-accent);
                 ${_styledcomponents.linkButtonTokens.linkButtonTextColorHover}: var(--text-warning-hover);
                 ${_styledcomponents.linkButtonTokens.linkButtonTextColorActive}: var(--text-warning-active);
             `,
             negative: (0, _styledcomponents.css)`
-                ${_styledcomponents.linkButtonTokens.linkButtonColor}: var(--text-negative);
                 ${_styledcomponents.linkButtonTokens.linkButtonIconColor}: var(--text-negative);
                 ${_styledcomponents.linkButtonTokens.linkButtonTextColor}: var(--text-negative);
                 ${_styledcomponents.linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear);
-                ${_styledcomponents.linkButtonTokens.linkButtonColorHover}: var(--text-negative-hover);
-                ${_styledcomponents.linkButtonTokens.linkButtonColorActive}: var(--text-negative-active);
+                ${_styledcomponents.linkButtonTokens.linkButtonIconColorHover}: var(--text-negative-hover);
+                ${_styledcomponents.linkButtonTokens.linkButtonIconColorActive}: var(--text-negative-active);
                 ${_styledcomponents.linkButtonTokens.linkButtonFocusColor}: var(--surface-accent);
                 ${_styledcomponents.linkButtonTokens.linkButtonTextColorHover}: var(--text-negative-hover);
                 ${_styledcomponents.linkButtonTokens.linkButtonTextColorActive}: var(--text-negative-active);
             `,
             info: (0, _styledcomponents.css)`
-                ${_styledcomponents.linkButtonTokens.linkButtonColor}: var(--text-info);
                 ${_styledcomponents.linkButtonTokens.linkButtonIconColor}: var(--text-info);
                 ${_styledcomponents.linkButtonTokens.linkButtonTextColor}: var(--text-info);
                 ${_styledcomponents.linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear);
-                ${_styledcomponents.linkButtonTokens.linkButtonColorHover}: var(--text-info-hover);
-                ${_styledcomponents.linkButtonTokens.linkButtonColorActive}: var(--text-info-active);
+                ${_styledcomponents.linkButtonTokens.linkButtonIconColorHover}: var(--text-info-hover);
+                ${_styledcomponents.linkButtonTokens.linkButtonIconColorActive}: var(--text-info-active);
                 ${_styledcomponents.linkButtonTokens.linkButtonFocusColor}: var(--surface-accent);
                 ${_styledcomponents.linkButtonTokens.linkButtonTextColorHover}: var(--text-info-hover);
                 ${_styledcomponents.linkButtonTokens.linkButtonTextColorActive}: var(--text-info-active);

package/dist/styled-components/cjs/components/Scrollbar/Scrollbar.config.js

@@ -12,7 +12,9 @@ const config = {
     view: {
         default: {
             trackColor: 'var(--surface-transparent-primary)',
-            thumbColor: 'var(--surface-transparent-tertiary)'
+            thumbColor: 'var(--surface-transparent-tertiary)',
+            thumbHoverColor: 'var(--surface-transparent-tertiary-hover)',
+            thumbActiveColor: 'var(--surface-transparent-tertiary-active)'
         }
     },
     size: {

package/dist/styled-components/cjs/components/Select/Select.config.js

@@ -402,7 +402,7 @@ const config = {
                 ${_styledcomponents.selectTokens.textFieldHintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto;
                 ${_styledcomponents.selectTokens.textFieldClearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto;
 
-                ${_styledcomponents.selectTokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.selectTokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.selectTokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.selectTokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.selectTokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -527,7 +527,7 @@ const config = {
                 ${_styledcomponents.selectTokens.textFieldHintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto;
                 ${_styledcomponents.selectTokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto;
 
-                ${_styledcomponents.selectTokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.selectTokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.selectTokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.selectTokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.selectTokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -652,7 +652,7 @@ const config = {
                 ${_styledcomponents.selectTokens.textFieldHintInnerLabelPlacementOffset}: 0.062rem -2.688rem auto auto;
                 ${_styledcomponents.selectTokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto;
 
-                ${_styledcomponents.selectTokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.selectTokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.selectTokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.selectTokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.selectTokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -777,7 +777,7 @@ const config = {
                 ${_styledcomponents.selectTokens.textFieldHintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto;
                 ${_styledcomponents.selectTokens.textFieldClearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto;
 
-                ${_styledcomponents.selectTokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.selectTokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.selectTokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.selectTokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.selectTokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);

package/dist/styled-components/cjs/components/Slider/Slider.config.js

@@ -129,7 +129,6 @@ const config = {
 
                 ${_styledcomponents.sliderTokens.railThickness}: 0.25rem;
                 ${_styledcomponents.sliderTokens.railBorderRadius}: 0.125rem;
-                ${_styledcomponents.sliderTokens.railIndent}: 0.75rem;
 
                 ${_styledcomponents.sliderTokens.textFieldWrapperGap}: 0.125rem;
 
@@ -178,7 +177,6 @@ const config = {
 
                 ${_styledcomponents.sliderTokens.railThickness}: 0.25rem;
                 ${_styledcomponents.sliderTokens.railBorderRadius}: 0.125rem;
-                ${_styledcomponents.sliderTokens.railIndent}: 0.75rem;
 
                 ${_styledcomponents.sliderTokens.textFieldWrapperGap}: 0.125rem;
 
@@ -227,7 +225,6 @@ const config = {
 
                 ${_styledcomponents.sliderTokens.railThickness}: 0.25rem;
                 ${_styledcomponents.sliderTokens.railBorderRadius}: 0.125rem;
-                ${_styledcomponents.sliderTokens.railIndent}: 0.75rem;
 
                 ${_styledcomponents.sliderTokens.textFieldWrapperGap}: 0.125rem;