npm - @salutejs/sdds-serv - Versions diffs - 0.352.0-next-sbcom.0 → 0.352.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (192) hide show

package/dist/styled-components/es/components/Select/Select.config.js CHANGED Viewed

@@ -392,13 +392,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;
@@ -517,13 +517,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;
@@ -642,13 +642,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;
@@ -767,13 +767,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;

package/dist/styled-components/es/components/Slider/Slider.config.js CHANGED Viewed

@@ -2,7 +2,8 @@ import { css, sliderTokens } from '@salutejs/plasma-new-hope/styled-components';
 export const config = {
     defaults: {
         view: 'default',
-        size: 'm'
+        size: 'm',
+        pointerSize: 'small'
     },
     variations: {
         view: {
@@ -112,10 +113,6 @@ export const config = {
                 ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
                 ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-m-line-height);
-                ${sliderTokens.thumbSize}: 1rem;
-                ${sliderTokens.thumbSizeLarge}: 1.25rem;
-                ${sliderTokens.thumbBorder}: 0.0625rem solid;
                 ${sliderTokens.tickSize}: 0.5rem;
                 ${sliderTokens.currentValueTopOffset}: 1.625rem;
@@ -165,10 +162,6 @@ export const config = {
                 ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
                 ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-s-line-height);
-                ${sliderTokens.thumbSize}: 1rem;
-                ${sliderTokens.thumbSizeLarge}: 1.25rem;
-                ${sliderTokens.thumbBorder}: 0.0625rem solid;
                 ${sliderTokens.tickSize}: 0.5rem;
                 ${sliderTokens.currentValueTopOffset}: 1.75rem;
@@ -218,10 +211,6 @@ export const config = {
                 ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-xs-line-height);
-                ${sliderTokens.thumbSize}: 1rem;
-                ${sliderTokens.thumbSizeLarge}: 1.25rem;
-                ${sliderTokens.thumbBorder}: 0.0625rem solid;
                 ${sliderTokens.tickSize}: 0.5rem;
                 ${sliderTokens.currentValueTopOffset}: 1.25rem;
@@ -243,6 +232,21 @@ export const config = {
                 ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height);
             `
         },
+        pointerSize: {
+            small: css`
+                ${sliderTokens.thumbSize}: 1rem;
+                ${sliderTokens.thumbBorderStyle}: solid;
+                ${sliderTokens.thumbBorderWidth}: 0.0625rem;
+            `,
+            large: css`
+                ${sliderTokens.thumbSize}: 1.25rem;
+                ${sliderTokens.thumbBorderStyle}: solid;
+                ${sliderTokens.thumbBorderWidth}: 0.0625rem;
+            `,
+            none: css`
+                ${sliderTokens.thumbSize}: 0rem;
+            `
+        },
         disabled: {
             true: css`
                 ${sliderTokens.disabledOpacity}: 0.4;

package/dist/styled-components/es/components/Steps/StepItem.config.js ADDED Viewed

@@ -0,0 +1,60 @@
+import { css, stepsTokens as tokens } from '@salutejs/plasma-new-hope/styled-components';
+export const config = {
+    defaults: {
+        view: 'default'
+    },
+    variations: {
+        view: {
+            default: css`
+                ${tokens.completedIndicatorColor}: var(--inverse-text-primary);
+                ${tokens.completedIndicatorColorHover}: var(--inverse-text-primary);
+                ${tokens.completedIndicatorBackground}: var(--surface-solid-default);
+                ${tokens.completedIndicatorBackgroundHover}: var(--surface-solid-default-hover);
+                ${tokens.completedTitleColor}: var(--text-primary);
+                ${tokens.completedTitleColorHover}: var(--text-primary-hover);
+                ${tokens.dividerColor}: var(--surface-solid-default);
+            `,
+            accent: css`
+                ${tokens.completedIndicatorColor}: var(--on-dark-text-primary);
+                ${tokens.completedIndicatorColorHover}: var(--on-dark-text-primary-hover);
+                ${tokens.completedIndicatorBackground}: var(--surface-accent);
+                ${tokens.completedIndicatorBackgroundHover}: var(--surface-accent-hover);
+                ${tokens.completedTitleColor}: var(--text-primary);
+                ${tokens.completedTitleColorHover}: var(--text-primary-hover);
+                ${tokens.dividerColor}: var(--surface-accent);
+            `,
+            negative: css`
+                ${tokens.completedIndicatorColor}: var(--on-dark-text-primary);
+                ${tokens.completedIndicatorColorHover}: var(--on-dark-text-primary-hover);
+                ${tokens.completedIndicatorBackground}: var(--surface-negative);
+                ${tokens.completedIndicatorBackgroundHover}: var(--surface-negative-hover);
+                ${tokens.completedTitleColor}: var(--text-negative);
+                ${tokens.completedTitleColorHover}: var(--text-negative-hover);
+                ${tokens.dividerColor}: var(--surface-negative);
+            `,
+            warning: css`
+                ${tokens.completedIndicatorColor}: var(--on-dark-text-primary);
+                ${tokens.completedIndicatorColorHover}: var(--on-dark-text-primary-hover);
+                ${tokens.completedIndicatorBackground}: var(--surface-warning);
+                ${tokens.completedIndicatorBackgroundHover}: var(--surface-warning-hover);
+                ${tokens.completedTitleColor}: var(--text-warning);
+                ${tokens.completedTitleColorHover}: var(--text-warning-hover);
+                ${tokens.dividerColor}: var(--surface-warning);
+            `,
+            positive: css`
+                ${tokens.completedIndicatorColor}: var(--on-dark-text-primary);
+                ${tokens.completedIndicatorColorHover}: var(--on-dark-text-primary-hover);
+                ${tokens.completedIndicatorBackground}: var(--surface-positive);
+                ${tokens.completedIndicatorBackgroundHover}: var(--surface-positive-hover);
+                ${tokens.completedTitleColor}: var(--text-positive);
+                ${tokens.completedTitleColorHover}: var(--text-positive-hover);
+                ${tokens.dividerColor}: var(--surface-positive);
+            `
+        }
+    }
+};

package/dist/styled-components/es/components/Steps/Steps.config.js CHANGED Viewed

@@ -92,11 +92,6 @@ export const config = {
                 ${tokens.contentVerticalPadding}: 1.0625rem;
                 ${tokens.verticalContentPaddingLeft}: 0.75rem;
-                ${tokens.smallIndicatorIndentHeight}: 1rem;
-                ${tokens.largeIndicatorIndentHeight}: 0.625rem;
-                ${tokens.smallBulletIndentHeight}: 1.5rem;
-                ${tokens.largeBulletIndentHeight}: 1.25rem;
                 ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -139,11 +134,6 @@ export const config = {
                 ${tokens.contentVerticalPadding}: 0.875rem;
                 ${tokens.verticalContentPaddingLeft}: 0.75rem;
-                ${tokens.smallIndicatorIndentHeight}: 0.75rem;
-                ${tokens.largeIndicatorIndentHeight}: 0.4375rem;
-                ${tokens.smallBulletIndentHeight}: 1.25rem;
-                ${tokens.largeBulletIndentHeight}: 1.125rem;
                 ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -186,11 +176,6 @@ export const config = {
                 ${tokens.contentVerticalPadding}: 0.6875rem;
                 ${tokens.verticalContentPaddingLeft}: 0.75rem;
-                ${tokens.smallIndicatorIndentHeight}: 0.5rem;
-                ${tokens.largeIndicatorIndentHeight}: 0.5rem;
-                ${tokens.smallBulletIndentHeight}: 1rem;
-                ${tokens.largeBulletIndentHeight}: 0.75rem;
                 ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -233,11 +218,6 @@ export const config = {
                 ${tokens.contentVerticalPadding}: 0.5625rem;
                 ${tokens.verticalContentPaddingLeft}: 0.75rem;
-                ${tokens.smallIndicatorIndentHeight}: 0.25rem;
-                ${tokens.largeIndicatorIndentHeight}: 0.25rem;
-                ${tokens.smallBulletIndentHeight}: 0.75rem;
-                ${tokens.largeBulletIndentHeight}: 0.5rem;
                 ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style);

package/dist/styled-components/es/components/Steps/Steps.js CHANGED Viewed

@@ -1,5 +1,9 @@
-import { stepsConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components';
+import { stepsConfig as rawStepsConfig, stepItemConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components';
+import { config as itemConfig } from './StepItem.config';
 import { config } from './Steps.config';
+const mergedItemConfig = mergeConfig(stepItemConfig, itemConfig);
+const StepItem = component(mergedItemConfig);
+const stepsConfig = rawStepsConfig(StepItem);
 const mergedConfig = mergeConfig(stepsConfig, config);
 const StepsComponent = component(mergedConfig);
 export const Steps = StepsComponent;

package/dist/styled-components/es/components/TextField/TextField.clear.config.js CHANGED Viewed

@@ -21,7 +21,6 @@ export const config = {
                 ${tokens.textAfterColor}: var(--text-tertiary);
                 ${tokens.labelColor}: var(--text-primary);
                 ${tokens.leftHelperColor}: var(--text-secondary);
-                ${tokens.rightHelperColor}: var(--text-secondary);
                 ${tokens.titleCaptionColor}: var(--text-secondary);
                 ${tokens.hintIconColor}: var(--text-secondary);
@@ -51,7 +50,6 @@ export const config = {
                 ${tokens.textAfterColor}: var(--text-tertiary);
                 ${tokens.labelColor}: var(--text-primary);
                 ${tokens.leftHelperColor}: var(--text-positive);
-                ${tokens.rightHelperColor}: var(--text-secondary);
                 ${tokens.titleCaptionColor}: var(--text-secondary);
                 ${tokens.hintIconColor}: var(--text-secondary);
@@ -85,7 +83,6 @@ export const config = {
                 ${tokens.textAfterColor}: var(--text-tertiary);
                 ${tokens.labelColor}: var(--text-primary);
                 ${tokens.leftHelperColor}: var(--text-warning);
-                ${tokens.rightHelperColor}: var(--text-secondary);
                 ${tokens.titleCaptionColor}: var(--text-secondary);
                 ${tokens.hintIconColor}: var(--text-secondary);
@@ -119,7 +116,6 @@ export const config = {
                 ${tokens.textAfterColor}: var(--text-tertiary);
                 ${tokens.labelColor}: var(--text-primary);
                 ${tokens.leftHelperColor}: var(--text-negative);
-                ${tokens.rightHelperColor}: var(--text-secondary);
                 ${tokens.titleCaptionColor}: var(--text-secondary);
                 ${tokens.hintIconColor}: var(--text-secondary);
@@ -181,13 +177,13 @@ export const config = {
                 ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
-                ${tokens.helpersPadding}: 0.25rem 0 0 0;
-                ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.leftHelperOffset}: 0.25rem;
+                ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height);
                 ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0;
                 ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0;
@@ -265,13 +261,13 @@ export const config = {
                 ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
-                ${tokens.helpersPadding}: 0.25rem 0 0 0;
-                ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.leftHelperOffset}: 0.25rem;
+                ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height);
                 ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0;
                 ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0;
@@ -341,13 +337,13 @@ export const config = {
                 ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
-                ${tokens.helpersPadding}: 0.25rem 0 0 0;
-                ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.leftHelperOffset}: 0.25rem;
+                ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height);
                 ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0;
                 ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0;
@@ -417,13 +413,13 @@ export const config = {
                 ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
-                ${tokens.helpersPadding}: 0.25rem 0 0 0;
-                ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.leftHelperOffset}: 0.25rem;
+                ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height);
                 ${tokens.labelInnerPadding}: 0.3125rem 0 0 0;
                 ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0;
@@ -493,13 +489,13 @@ export const config = {
                 ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
-                ${tokens.helpersPadding}: 0.25rem 0 0 0;
-                ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.leftHelperOffset}: 0.25rem;
+                ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height);
                 ${tokens.labelInnerPadding}: 0.3125rem 0 0 0;
                 ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0;
@@ -716,7 +712,6 @@ export const config = {
                 ${tokens.backgroundColorReadOnly}: transparent;
                 ${tokens.placeholderColorReadOnly}: var(--text-secondary);
                 ${tokens.leftHelperColorReadOnly}: var(--text-secondary);
-                ${tokens.rightHelperColorReadOnly}: var(--text-secondary);
                 ${tokens.titleCaptionColorReadOnly}: var(--text-secondary);
                 ${tokens.labelColorReadOnly}: var(--text-primary);
                 ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary);

package/dist/styled-components/es/components/TextField/TextField.config.js CHANGED Viewed

@@ -21,7 +21,6 @@ export const config = {
                 ${tokens.textAfterColor}: var(--text-tertiary);
                 ${tokens.labelColor}: var(--text-primary);
                 ${tokens.leftHelperColor}: var(--text-secondary);
-                ${tokens.rightHelperColor}: var(--text-secondary);
                 ${tokens.titleCaptionColor}: var(--text-secondary);
                 ${tokens.hintIconColor}: var(--text-secondary);
@@ -51,7 +50,6 @@ export const config = {
                 ${tokens.textAfterColor}: var(--text-tertiary);
                 ${tokens.labelColor}: var(--text-primary);
                 ${tokens.leftHelperColor}: var(--text-positive);
-                ${tokens.rightHelperColor}: var(--text-secondary);
                 ${tokens.titleCaptionColor}: var(--text-secondary);
                 ${tokens.hintIconColor}: var(--text-secondary);
@@ -81,7 +79,6 @@ export const config = {
                 ${tokens.textAfterColor}: var(--text-tertiary);
                 ${tokens.labelColor}: var(--text-primary);
                 ${tokens.leftHelperColor}: var(--text-warning);
-                ${tokens.rightHelperColor}: var(--text-secondary);
                 ${tokens.titleCaptionColor}: var(--text-secondary);
                 ${tokens.hintIconColor}: var(--text-secondary);
@@ -111,7 +108,6 @@ export const config = {
                 ${tokens.textAfterColor}: var(--text-tertiary);
                 ${tokens.labelColor}: var(--text-primary);
                 ${tokens.leftHelperColor}: var(--text-negative);
-                ${tokens.rightHelperColor}: var(--text-secondary);
                 ${tokens.titleCaptionColor}: var(--text-secondary);
                 ${tokens.hintIconColor}: var(--text-secondary);
@@ -165,13 +161,13 @@ export const config = {
                 ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
-                ${tokens.helpersPadding}: 0.25rem 0 0 0;
-                ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.leftHelperOffset}: 0.25rem;
+                ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height);
                 ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0;
                 ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0;
@@ -250,13 +246,13 @@ export const config = {
                 ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
-                ${tokens.helpersPadding}: 0.25rem 0 0 0;
-                ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.leftHelperOffset}: 0.25rem;
+                ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height);
                 ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0;
                 ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0;
@@ -328,13 +324,13 @@ export const config = {
                 ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
-                ${tokens.helpersPadding}: 0.25rem 0 0 0;
-                ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.leftHelperOffset}: 0.25rem;
+                ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height);
                 ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0;
                 ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0;
@@ -406,13 +402,13 @@ export const config = {
                 ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
-                ${tokens.helpersPadding}: 0.25rem 0 0 0;
-                ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.leftHelperOffset}: 0.25rem;
+                ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height);
                 ${tokens.labelInnerPadding}: 0.3125rem 0 0 0;
                 ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0;
@@ -484,13 +480,13 @@ export const config = {
                 ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
-                ${tokens.helpersPadding}: 0.25rem 0 0 0;
-                ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.leftHelperOffset}: 0.25rem;
+                ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height);
                 ${tokens.labelInnerPadding}: 0.3125rem 0 0 0;
                 ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0;
@@ -707,7 +703,6 @@ export const config = {
                 ${tokens.backgroundColorReadOnly}: var(--surface-transparent-primary);
                 ${tokens.placeholderColorReadOnly}: var(--text-secondary);
                 ${tokens.leftHelperColorReadOnly}: var(--text-secondary);
-                ${tokens.rightHelperColorReadOnly}: var(--text-secondary);
                 ${tokens.titleCaptionColorReadOnly}: var(--text-secondary);
                 ${tokens.labelColorReadOnly}: var(--text-primary);
                 ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary);