@salutejs/sdds-serv 0.352.0-next-sbcom.0 → 0.352.0

package/dist/emotion/cjs/components/Steps/StepItem.config.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "config", {
+    enumerable: true,
+    get: function() {
+        return config;
+    }
+});
+const _emotion = require("@salutejs/plasma-new-hope/emotion");
+const config = {
+    defaults: {
+        view: 'default'
+    },
+    variations: {
+        view: {
+            default: (0, _emotion.css)`
+                ${_emotion.stepsTokens.completedIndicatorColor}: var(--inverse-text-primary);
+                ${_emotion.stepsTokens.completedIndicatorColorHover}: var(--inverse-text-primary);
+                ${_emotion.stepsTokens.completedIndicatorBackground}: var(--surface-solid-default);
+                ${_emotion.stepsTokens.completedIndicatorBackgroundHover}: var(--surface-solid-default-hover);
+                ${_emotion.stepsTokens.completedTitleColor}: var(--text-primary);
+                ${_emotion.stepsTokens.completedTitleColorHover}: var(--text-primary-hover);
+
+                ${_emotion.stepsTokens.dividerColor}: var(--surface-solid-default);
+            `,
+            accent: (0, _emotion.css)`
+                ${_emotion.stepsTokens.completedIndicatorColor}: var(--on-dark-text-primary);
+                ${_emotion.stepsTokens.completedIndicatorColorHover}: var(--on-dark-text-primary-hover);
+                ${_emotion.stepsTokens.completedIndicatorBackground}: var(--surface-accent);
+                ${_emotion.stepsTokens.completedIndicatorBackgroundHover}: var(--surface-accent-hover);
+                ${_emotion.stepsTokens.completedTitleColor}: var(--text-primary);
+                ${_emotion.stepsTokens.completedTitleColorHover}: var(--text-primary-hover);
+
+                ${_emotion.stepsTokens.dividerColor}: var(--surface-accent);
+            `,
+            negative: (0, _emotion.css)`
+                ${_emotion.stepsTokens.completedIndicatorColor}: var(--on-dark-text-primary);
+                ${_emotion.stepsTokens.completedIndicatorColorHover}: var(--on-dark-text-primary-hover);
+                ${_emotion.stepsTokens.completedIndicatorBackground}: var(--surface-negative);
+                ${_emotion.stepsTokens.completedIndicatorBackgroundHover}: var(--surface-negative-hover);
+                ${_emotion.stepsTokens.completedTitleColor}: var(--text-negative);
+                ${_emotion.stepsTokens.completedTitleColorHover}: var(--text-negative-hover);
+
+                ${_emotion.stepsTokens.dividerColor}: var(--surface-negative);
+            `,
+            warning: (0, _emotion.css)`
+                ${_emotion.stepsTokens.completedIndicatorColor}: var(--on-dark-text-primary);
+                ${_emotion.stepsTokens.completedIndicatorColorHover}: var(--on-dark-text-primary-hover);
+                ${_emotion.stepsTokens.completedIndicatorBackground}: var(--surface-warning);
+                ${_emotion.stepsTokens.completedIndicatorBackgroundHover}: var(--surface-warning-hover);
+                ${_emotion.stepsTokens.completedTitleColor}: var(--text-warning);
+                ${_emotion.stepsTokens.completedTitleColorHover}: var(--text-warning-hover);
+
+                ${_emotion.stepsTokens.dividerColor}: var(--surface-warning);
+            `,
+            positive: (0, _emotion.css)`
+                ${_emotion.stepsTokens.completedIndicatorColor}: var(--on-dark-text-primary);
+                ${_emotion.stepsTokens.completedIndicatorColorHover}: var(--on-dark-text-primary-hover);
+                ${_emotion.stepsTokens.completedIndicatorBackground}: var(--surface-positive);
+                ${_emotion.stepsTokens.completedIndicatorBackgroundHover}: var(--surface-positive-hover);
+                ${_emotion.stepsTokens.completedTitleColor}: var(--text-positive);
+                ${_emotion.stepsTokens.completedTitleColorHover}: var(--text-positive-hover);
+
+                ${_emotion.stepsTokens.dividerColor}: var(--surface-positive);
+            `
+        }
+    }
+};

package/dist/emotion/cjs/components/Steps/Steps.config.js

@@ -102,11 +102,6 @@ const config = {
                 ${_emotion.stepsTokens.contentVerticalPadding}: 1.0625rem;
                 ${_emotion.stepsTokens.verticalContentPaddingLeft}: 0.75rem;
 
-                ${_emotion.stepsTokens.smallIndicatorIndentHeight}: 1rem;
-                ${_emotion.stepsTokens.largeIndicatorIndentHeight}: 0.625rem;
-                ${_emotion.stepsTokens.smallBulletIndentHeight}: 1.5rem;
-                ${_emotion.stepsTokens.largeBulletIndentHeight}: 1.25rem;
-
                 ${_emotion.stepsTokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_emotion.stepsTokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_emotion.stepsTokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -149,11 +144,6 @@ const config = {
                 ${_emotion.stepsTokens.contentVerticalPadding}: 0.875rem;
                 ${_emotion.stepsTokens.verticalContentPaddingLeft}: 0.75rem;
 
-                ${_emotion.stepsTokens.smallIndicatorIndentHeight}: 0.75rem;
-                ${_emotion.stepsTokens.largeIndicatorIndentHeight}: 0.4375rem;
-                ${_emotion.stepsTokens.smallBulletIndentHeight}: 1.25rem;
-                ${_emotion.stepsTokens.largeBulletIndentHeight}: 1.125rem;
-
                 ${_emotion.stepsTokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_emotion.stepsTokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_emotion.stepsTokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -196,11 +186,6 @@ const config = {
                 ${_emotion.stepsTokens.contentVerticalPadding}: 0.6875rem;
                 ${_emotion.stepsTokens.verticalContentPaddingLeft}: 0.75rem;
 
-                ${_emotion.stepsTokens.smallIndicatorIndentHeight}: 0.5rem;
-                ${_emotion.stepsTokens.largeIndicatorIndentHeight}: 0.5rem;
-                ${_emotion.stepsTokens.smallBulletIndentHeight}: 1rem;
-                ${_emotion.stepsTokens.largeBulletIndentHeight}: 0.75rem;
-
                 ${_emotion.stepsTokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_emotion.stepsTokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_emotion.stepsTokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -243,11 +228,6 @@ const config = {
                 ${_emotion.stepsTokens.contentVerticalPadding}: 0.5625rem;
                 ${_emotion.stepsTokens.verticalContentPaddingLeft}: 0.75rem;
 
-                ${_emotion.stepsTokens.smallIndicatorIndentHeight}: 0.25rem;
-                ${_emotion.stepsTokens.largeIndicatorIndentHeight}: 0.25rem;
-                ${_emotion.stepsTokens.smallBulletIndentHeight}: 0.75rem;
-                ${_emotion.stepsTokens.largeBulletIndentHeight}: 0.5rem;
-
                 ${_emotion.stepsTokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_emotion.stepsTokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_emotion.stepsTokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style);

package/dist/emotion/cjs/components/Steps/Steps.js

@@ -9,7 +9,11 @@ Object.defineProperty(exports, "Steps", {
     }
 });
 const _emotion = require("@salutejs/plasma-new-hope/emotion");
+const _StepItemconfig = require("./StepItem.config");
 const _Stepsconfig = require("./Steps.config");
-const mergedConfig = (0, _emotion.mergeConfig)(_emotion.stepsConfig, _Stepsconfig.config);
+const mergedItemConfig = (0, _emotion.mergeConfig)(_emotion.stepItemConfig, _StepItemconfig.config);
+const StepItem = (0, _emotion.component)(mergedItemConfig);
+const stepsConfig = (0, _emotion.stepsConfig)(StepItem);
+const mergedConfig = (0, _emotion.mergeConfig)(stepsConfig, _Stepsconfig.config);
 const StepsComponent = (0, _emotion.component)(mergedConfig);
 const Steps = StepsComponent;

package/dist/emotion/cjs/components/TextField/TextField.clear.config.js

@@ -31,7 +31,6 @@ const config = {
                 ${_emotion.textFieldTokens.textAfterColor}: var(--text-tertiary);
                 ${_emotion.textFieldTokens.labelColor}: var(--text-primary);
                 ${_emotion.textFieldTokens.leftHelperColor}: var(--text-secondary);
-                ${_emotion.textFieldTokens.rightHelperColor}: var(--text-secondary);
                 ${_emotion.textFieldTokens.titleCaptionColor}: var(--text-secondary);
                 ${_emotion.textFieldTokens.hintIconColor}: var(--text-secondary);
 
@@ -61,7 +60,6 @@ const config = {
                 ${_emotion.textFieldTokens.textAfterColor}: var(--text-tertiary);
                 ${_emotion.textFieldTokens.labelColor}: var(--text-primary);
                 ${_emotion.textFieldTokens.leftHelperColor}: var(--text-positive);
-                ${_emotion.textFieldTokens.rightHelperColor}: var(--text-secondary);
                 ${_emotion.textFieldTokens.titleCaptionColor}: var(--text-secondary);
                 ${_emotion.textFieldTokens.hintIconColor}: var(--text-secondary);
 
@@ -95,7 +93,6 @@ const config = {
                 ${_emotion.textFieldTokens.textAfterColor}: var(--text-tertiary);
                 ${_emotion.textFieldTokens.labelColor}: var(--text-primary);
                 ${_emotion.textFieldTokens.leftHelperColor}: var(--text-warning);
-                ${_emotion.textFieldTokens.rightHelperColor}: var(--text-secondary);
                 ${_emotion.textFieldTokens.titleCaptionColor}: var(--text-secondary);
                 ${_emotion.textFieldTokens.hintIconColor}: var(--text-secondary);
 
@@ -129,7 +126,6 @@ const config = {
                 ${_emotion.textFieldTokens.textAfterColor}: var(--text-tertiary);
                 ${_emotion.textFieldTokens.labelColor}: var(--text-primary);
                 ${_emotion.textFieldTokens.leftHelperColor}: var(--text-negative);
-                ${_emotion.textFieldTokens.rightHelperColor}: var(--text-secondary);
                 ${_emotion.textFieldTokens.titleCaptionColor}: var(--text-secondary);
                 ${_emotion.textFieldTokens.hintIconColor}: var(--text-secondary);
 
@@ -191,13 +187,13 @@ const config = {
                 ${_emotion.textFieldTokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${_emotion.textFieldTokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
 
-                ${_emotion.textFieldTokens.helpersPadding}: 0.25rem 0 0 0;
-                ${_emotion.textFieldTokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${_emotion.textFieldTokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${_emotion.textFieldTokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${_emotion.textFieldTokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${_emotion.textFieldTokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${_emotion.textFieldTokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${_emotion.textFieldTokens.leftHelperOffset}: 0.25rem;
+                ${_emotion.textFieldTokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${_emotion.textFieldTokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${_emotion.textFieldTokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${_emotion.textFieldTokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${_emotion.textFieldTokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${_emotion.textFieldTokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${_emotion.textFieldTokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0;
                 ${_emotion.textFieldTokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0;
@@ -275,13 +271,13 @@ const config = {
                 ${_emotion.textFieldTokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${_emotion.textFieldTokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
 
-                ${_emotion.textFieldTokens.helpersPadding}: 0.25rem 0 0 0;
-                ${_emotion.textFieldTokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${_emotion.textFieldTokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${_emotion.textFieldTokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${_emotion.textFieldTokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${_emotion.textFieldTokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${_emotion.textFieldTokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${_emotion.textFieldTokens.leftHelperOffset}: 0.25rem;
+                ${_emotion.textFieldTokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${_emotion.textFieldTokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${_emotion.textFieldTokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${_emotion.textFieldTokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${_emotion.textFieldTokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${_emotion.textFieldTokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${_emotion.textFieldTokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0;
                 ${_emotion.textFieldTokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0;
@@ -351,13 +347,13 @@ const config = {
                 ${_emotion.textFieldTokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${_emotion.textFieldTokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
 
-                ${_emotion.textFieldTokens.helpersPadding}: 0.25rem 0 0 0;
-                ${_emotion.textFieldTokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${_emotion.textFieldTokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${_emotion.textFieldTokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${_emotion.textFieldTokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${_emotion.textFieldTokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${_emotion.textFieldTokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${_emotion.textFieldTokens.leftHelperOffset}: 0.25rem;
+                ${_emotion.textFieldTokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${_emotion.textFieldTokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${_emotion.textFieldTokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${_emotion.textFieldTokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${_emotion.textFieldTokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${_emotion.textFieldTokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${_emotion.textFieldTokens.labelInnerPadding}: 0.375rem 0 0.125rem 0;
                 ${_emotion.textFieldTokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0;
@@ -427,13 +423,13 @@ const config = {
                 ${_emotion.textFieldTokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${_emotion.textFieldTokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
 
-                ${_emotion.textFieldTokens.helpersPadding}: 0.25rem 0 0 0;
-                ${_emotion.textFieldTokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${_emotion.textFieldTokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${_emotion.textFieldTokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${_emotion.textFieldTokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${_emotion.textFieldTokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${_emotion.textFieldTokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${_emotion.textFieldTokens.leftHelperOffset}: 0.25rem;
+                ${_emotion.textFieldTokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${_emotion.textFieldTokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${_emotion.textFieldTokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${_emotion.textFieldTokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${_emotion.textFieldTokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${_emotion.textFieldTokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${_emotion.textFieldTokens.labelInnerPadding}: 0.3125rem 0 0 0;
                 ${_emotion.textFieldTokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0;
@@ -503,13 +499,13 @@ const config = {
                 ${_emotion.textFieldTokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${_emotion.textFieldTokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
 
-                ${_emotion.textFieldTokens.helpersPadding}: 0.25rem 0 0 0;
-                ${_emotion.textFieldTokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${_emotion.textFieldTokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${_emotion.textFieldTokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${_emotion.textFieldTokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${_emotion.textFieldTokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${_emotion.textFieldTokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${_emotion.textFieldTokens.leftHelperOffset}: 0.25rem;
+                ${_emotion.textFieldTokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${_emotion.textFieldTokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${_emotion.textFieldTokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${_emotion.textFieldTokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${_emotion.textFieldTokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${_emotion.textFieldTokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${_emotion.textFieldTokens.labelInnerPadding}: 0.3125rem 0 0 0;
                 ${_emotion.textFieldTokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0;
@@ -726,7 +722,6 @@ const config = {
                 ${_emotion.textFieldTokens.backgroundColorReadOnly}: transparent;
                 ${_emotion.textFieldTokens.placeholderColorReadOnly}: var(--text-secondary);
                 ${_emotion.textFieldTokens.leftHelperColorReadOnly}: var(--text-secondary);
-                ${_emotion.textFieldTokens.rightHelperColorReadOnly}: var(--text-secondary);
                 ${_emotion.textFieldTokens.titleCaptionColorReadOnly}: var(--text-secondary);
                 ${_emotion.textFieldTokens.labelColorReadOnly}: var(--text-primary);
                 ${_emotion.textFieldTokens.dividerColorReadOnly}: var(--surface-transparent-primary);

package/dist/emotion/cjs/components/TextField/TextField.config.js

@@ -31,7 +31,6 @@ const config = {
                 ${_emotion.textFieldTokens.textAfterColor}: var(--text-tertiary);
                 ${_emotion.textFieldTokens.labelColor}: var(--text-primary);
                 ${_emotion.textFieldTokens.leftHelperColor}: var(--text-secondary);
-                ${_emotion.textFieldTokens.rightHelperColor}: var(--text-secondary);
                 ${_emotion.textFieldTokens.titleCaptionColor}: var(--text-secondary);
                 ${_emotion.textFieldTokens.hintIconColor}: var(--text-secondary);
 
@@ -61,7 +60,6 @@ const config = {
                 ${_emotion.textFieldTokens.textAfterColor}: var(--text-tertiary);
                 ${_emotion.textFieldTokens.labelColor}: var(--text-primary);
                 ${_emotion.textFieldTokens.leftHelperColor}: var(--text-positive);
-                ${_emotion.textFieldTokens.rightHelperColor}: var(--text-secondary);
                 ${_emotion.textFieldTokens.titleCaptionColor}: var(--text-secondary);
                 ${_emotion.textFieldTokens.hintIconColor}: var(--text-secondary);
 
@@ -91,7 +89,6 @@ const config = {
                 ${_emotion.textFieldTokens.textAfterColor}: var(--text-tertiary);
                 ${_emotion.textFieldTokens.labelColor}: var(--text-primary);
                 ${_emotion.textFieldTokens.leftHelperColor}: var(--text-warning);
-                ${_emotion.textFieldTokens.rightHelperColor}: var(--text-secondary);
                 ${_emotion.textFieldTokens.titleCaptionColor}: var(--text-secondary);
                 ${_emotion.textFieldTokens.hintIconColor}: var(--text-secondary);
 
@@ -121,7 +118,6 @@ const config = {
                 ${_emotion.textFieldTokens.textAfterColor}: var(--text-tertiary);
                 ${_emotion.textFieldTokens.labelColor}: var(--text-primary);
                 ${_emotion.textFieldTokens.leftHelperColor}: var(--text-negative);
-                ${_emotion.textFieldTokens.rightHelperColor}: var(--text-secondary);
                 ${_emotion.textFieldTokens.titleCaptionColor}: var(--text-secondary);
                 ${_emotion.textFieldTokens.hintIconColor}: var(--text-secondary);
 
@@ -175,13 +171,13 @@ const config = {
                 ${_emotion.textFieldTokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${_emotion.textFieldTokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
 
-                ${_emotion.textFieldTokens.helpersPadding}: 0.25rem 0 0 0;
-                ${_emotion.textFieldTokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${_emotion.textFieldTokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${_emotion.textFieldTokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${_emotion.textFieldTokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${_emotion.textFieldTokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${_emotion.textFieldTokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${_emotion.textFieldTokens.leftHelperOffset}: 0.25rem;
+                ${_emotion.textFieldTokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${_emotion.textFieldTokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${_emotion.textFieldTokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${_emotion.textFieldTokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${_emotion.textFieldTokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${_emotion.textFieldTokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${_emotion.textFieldTokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0;
                 ${_emotion.textFieldTokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0;
@@ -260,13 +256,13 @@ const config = {
                 ${_emotion.textFieldTokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${_emotion.textFieldTokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
 
-                ${_emotion.textFieldTokens.helpersPadding}: 0.25rem 0 0 0;
-                ${_emotion.textFieldTokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${_emotion.textFieldTokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${_emotion.textFieldTokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${_emotion.textFieldTokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${_emotion.textFieldTokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${_emotion.textFieldTokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${_emotion.textFieldTokens.leftHelperOffset}: 0.25rem;
+                ${_emotion.textFieldTokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${_emotion.textFieldTokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${_emotion.textFieldTokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${_emotion.textFieldTokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${_emotion.textFieldTokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${_emotion.textFieldTokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${_emotion.textFieldTokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0;
                 ${_emotion.textFieldTokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0;
@@ -338,13 +334,13 @@ const config = {
                 ${_emotion.textFieldTokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${_emotion.textFieldTokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
 
-                ${_emotion.textFieldTokens.helpersPadding}: 0.25rem 0 0 0;
-                ${_emotion.textFieldTokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${_emotion.textFieldTokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${_emotion.textFieldTokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${_emotion.textFieldTokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${_emotion.textFieldTokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${_emotion.textFieldTokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${_emotion.textFieldTokens.leftHelperOffset}: 0.25rem;
+                ${_emotion.textFieldTokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${_emotion.textFieldTokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${_emotion.textFieldTokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${_emotion.textFieldTokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${_emotion.textFieldTokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${_emotion.textFieldTokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${_emotion.textFieldTokens.labelInnerPadding}: 0.375rem 0 0.125rem 0;
                 ${_emotion.textFieldTokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0;
@@ -416,13 +412,13 @@ const config = {
                 ${_emotion.textFieldTokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${_emotion.textFieldTokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
 
-                ${_emotion.textFieldTokens.helpersPadding}: 0.25rem 0 0 0;
-                ${_emotion.textFieldTokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${_emotion.textFieldTokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${_emotion.textFieldTokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${_emotion.textFieldTokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${_emotion.textFieldTokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${_emotion.textFieldTokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${_emotion.textFieldTokens.leftHelperOffset}: 0.25rem;
+                ${_emotion.textFieldTokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${_emotion.textFieldTokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${_emotion.textFieldTokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${_emotion.textFieldTokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${_emotion.textFieldTokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${_emotion.textFieldTokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${_emotion.textFieldTokens.labelInnerPadding}: 0.3125rem 0 0 0;
                 ${_emotion.textFieldTokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0;
@@ -494,13 +490,13 @@ const config = {
                 ${_emotion.textFieldTokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${_emotion.textFieldTokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
 
-                ${_emotion.textFieldTokens.helpersPadding}: 0.25rem 0 0 0;
-                ${_emotion.textFieldTokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${_emotion.textFieldTokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${_emotion.textFieldTokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${_emotion.textFieldTokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${_emotion.textFieldTokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${_emotion.textFieldTokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${_emotion.textFieldTokens.leftHelperOffset}: 0.25rem;
+                ${_emotion.textFieldTokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${_emotion.textFieldTokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${_emotion.textFieldTokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${_emotion.textFieldTokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${_emotion.textFieldTokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${_emotion.textFieldTokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${_emotion.textFieldTokens.labelInnerPadding}: 0.3125rem 0 0 0;
                 ${_emotion.textFieldTokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0;
@@ -717,7 +713,6 @@ const config = {
                 ${_emotion.textFieldTokens.backgroundColorReadOnly}: var(--surface-transparent-primary);
                 ${_emotion.textFieldTokens.placeholderColorReadOnly}: var(--text-secondary);
                 ${_emotion.textFieldTokens.leftHelperColorReadOnly}: var(--text-secondary);
-                ${_emotion.textFieldTokens.rightHelperColorReadOnly}: var(--text-secondary);
                 ${_emotion.textFieldTokens.titleCaptionColorReadOnly}: var(--text-secondary);
                 ${_emotion.textFieldTokens.labelColorReadOnly}: var(--text-primary);
                 ${_emotion.textFieldTokens.dividerColorReadOnly}: var(--surface-transparent-primary);

package/dist/emotion/cjs/components/TextFieldGroup/TextFieldGroup.config.js

@@ -45,13 +45,13 @@ const config = {
                 ${_emotion.textFieldGroupTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
                 ${_emotion.textFieldGroupTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height);
 
-                ${_emotion.textFieldGroupTokens.helpersPadding}: 0.25rem 0 0 0;
-                ${_emotion.textFieldGroupTokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${_emotion.textFieldGroupTokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${_emotion.textFieldGroupTokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${_emotion.textFieldGroupTokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${_emotion.textFieldGroupTokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${_emotion.textFieldGroupTokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${_emotion.textFieldGroupTokens.leftHelperOffset}: 0.25rem;
+                ${_emotion.textFieldGroupTokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${_emotion.textFieldGroupTokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${_emotion.textFieldGroupTokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${_emotion.textFieldGroupTokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${_emotion.textFieldGroupTokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${_emotion.textFieldGroupTokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${_emotion.textFieldGroupTokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0;
                 ${_emotion.textFieldGroupTokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0;
@@ -101,13 +101,13 @@ const config = {
                 ${_emotion.textFieldGroupTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
                 ${_emotion.textFieldGroupTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height);
 
-                ${_emotion.textFieldGroupTokens.helpersPadding}: 0.25rem 0 0 0;
-                ${_emotion.textFieldGroupTokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${_emotion.textFieldGroupTokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${_emotion.textFieldGroupTokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${_emotion.textFieldGroupTokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${_emotion.textFieldGroupTokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${_emotion.textFieldGroupTokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${_emotion.textFieldGroupTokens.leftHelperOffset}: 0.25rem;
+                ${_emotion.textFieldGroupTokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${_emotion.textFieldGroupTokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${_emotion.textFieldGroupTokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${_emotion.textFieldGroupTokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${_emotion.textFieldGroupTokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${_emotion.textFieldGroupTokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${_emotion.textFieldGroupTokens.labelInnerPadding}: 0.375rem 0 0.125rem 0;
                 ${_emotion.textFieldGroupTokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0;
@@ -157,13 +157,13 @@ const config = {
                 ${_emotion.textFieldGroupTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
                 ${_emotion.textFieldGroupTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height);
 
-                ${_emotion.textFieldGroupTokens.helpersPadding}: 0.25rem 0 0 0;
-                ${_emotion.textFieldGroupTokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${_emotion.textFieldGroupTokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${_emotion.textFieldGroupTokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${_emotion.textFieldGroupTokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${_emotion.textFieldGroupTokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${_emotion.textFieldGroupTokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${_emotion.textFieldGroupTokens.leftHelperOffset}: 0.25rem;
+                ${_emotion.textFieldGroupTokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${_emotion.textFieldGroupTokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${_emotion.textFieldGroupTokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${_emotion.textFieldGroupTokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${_emotion.textFieldGroupTokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${_emotion.textFieldGroupTokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${_emotion.textFieldGroupTokens.labelInnerPadding}: 0.3125rem 0 0 0;
                 ${_emotion.textFieldGroupTokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0;
@@ -213,13 +213,13 @@ const config = {
                 ${_emotion.textFieldGroupTokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${_emotion.textFieldGroupTokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height);
 
-                ${_emotion.textFieldGroupTokens.helpersPadding}: 0.25rem 0 0 0;
-                ${_emotion.textFieldGroupTokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${_emotion.textFieldGroupTokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${_emotion.textFieldGroupTokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${_emotion.textFieldGroupTokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${_emotion.textFieldGroupTokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${_emotion.textFieldGroupTokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${_emotion.textFieldGroupTokens.leftHelperOffset}: 0.25rem;
+                ${_emotion.textFieldGroupTokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${_emotion.textFieldGroupTokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${_emotion.textFieldGroupTokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${_emotion.textFieldGroupTokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${_emotion.textFieldGroupTokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${_emotion.textFieldGroupTokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${_emotion.textFieldGroupTokens.labelInnerPadding}: 0.3125rem 0 0 0;
                 ${_emotion.textFieldGroupTokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0;

package/dist/emotion/es/components/Autocomplete/Autocomplete.config.js

@@ -213,13 +213,13 @@ export const config = {
                 ${tokens.textFieldHintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto;
                 ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto;
 
-                ${tokens.textFieldHelpersPadding}: 0.25rem 0 0 0;
-                ${tokens.textFieldHelpersFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.textFieldHelpersFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.textFieldHelpersFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.textFieldHelpersFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.textFieldHelpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.textFieldHelpersLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.textFieldLeftHelperOffset}: 0.25rem;
+                ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${tokens.textFieldLabelInnerPadding}: 0.5625rem 0 0.125rem 0;
                 ${tokens.textFieldContentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0;
@@ -288,13 +288,13 @@ export const config = {
                 ${tokens.textFieldHintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto;
                 ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto;
 
-                ${tokens.textFieldHelpersPadding}: 0.25rem 0 0 0;
-                ${tokens.textFieldHelpersFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.textFieldHelpersFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.textFieldHelpersFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.textFieldHelpersFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.textFieldHelpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.textFieldHelpersLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.textFieldLeftHelperOffset}: 0.25rem;
+                ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0;
                 ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0;
@@ -363,13 +363,13 @@ export const config = {
                 ${tokens.textFieldHintInnerLabelPlacementOffset}: 0.062rem -2.688rem auto auto;
                 ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto;
 
-                ${tokens.textFieldHelpersPadding}: 0.25rem 0 0 0;
-                ${tokens.textFieldHelpersFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.textFieldHelpersFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.textFieldHelpersFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.textFieldHelpersFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.textFieldHelpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.textFieldHelpersLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.textFieldLeftHelperOffset}: 0.25rem;
+                ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0;
                 ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0;
@@ -438,13 +438,13 @@ export const config = {
                 ${tokens.textFieldHintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto;
                 ${tokens.textFieldClearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto;
 
-                ${tokens.textFieldHelpersPadding}: 0.25rem 0 0 0;
-                ${tokens.textFieldHelpersFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.textFieldHelpersFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.textFieldHelpersFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.textFieldHelpersFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.textFieldHelpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.textFieldHelpersLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.textFieldLeftHelperOffset}: 0.25rem;
+                ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0;
                 ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0;