@salutejs/plasma-new-hope 0.156.0-canary.1392.11055092483.0 → 0.156.0-canary.1459.11057629608.0

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

@@ -8,11 +8,34 @@ import styled from 'styled-components';
 import { textAreaConfig } from '../../../../components/TextArea';
 import { mergeConfig } from '../../../../engines';
 import { WithTheme, argTypesFromConfig } from '../../../_helpers';
+import type { PopoverPlacement } from '../Popover/Popover';
 
 import { config } from './TextArea.config';
 import { TextArea } from './TextArea';
 
 const labelPlacements = ['inner', 'outer'];
+const hintViews = ['default', 'onDark', 'onLight'];
+const hintSizes = ['m', 's'];
+const hintTriggers = ['hover', 'click'];
+const placements: Array<PopoverPlacement> = [
+    'top',
+    'top-start',
+    'top-end',
+
+    'bottom',
+    'bottom-start',
+    'bottom-end',
+
+    'left',
+    'left-start',
+    'left-end',
+
+    'right',
+    'right-start',
+    'right-end',
+
+    'auto',
+];
 
 type StoryTextAreaPropsCustom = {
     enableContentRight?: boolean;
@@ -60,12 +83,50 @@ const meta: Meta<StoryTextAreaProps> = {
                 type: 'select',
             },
         },
+        hintView: {
+            options: hintViews,
+            control: {
+                type: 'select',
+            },
+            if: { arg: 'hasHint', truthy: true },
+        },
+        hintSize: {
+            options: hintSizes,
+            control: {
+                type: 'select',
+            },
+            if: { arg: 'hasHint', truthy: true },
+        },
+        hintTrigger: {
+            options: hintTriggers,
+            control: {
+                type: 'inline-radio',
+            },
+            if: { arg: 'hasHint', truthy: true },
+        },
+        hintText: {
+            control: { type: 'text' },
+            if: { arg: 'hasHint', truthy: true },
+        },
+        hintPlacement: {
+            options: placements,
+            control: {
+                type: 'select',
+            },
+            if: { arg: 'hasHint', truthy: true },
+            mappers: placements,
+        },
+        hintHasArrow: {
+            control: { type: 'boolean' },
+            if: { arg: 'hasHint', truthy: true },
+        },
     },
     args: {
         id: 'example-textarea',
         enableContentRight: true,
         label: 'Подсказка',
         placeholder: 'Заполните многострочное поле',
+        titleCaption: 'Подпись к полю',
         leftHelper: 'Подсказка к полю слева',
         rightHelper: 'Подсказка к полю справа',
         disabled: false,
@@ -76,6 +137,13 @@ const meta: Meta<StoryTextAreaProps> = {
         optional: false,
         required: false,
         requiredPlacement: 'right',
+        hasHint: false,
+        hintTrigger: 'hover',
+        hintText: 'Текст подсказки',
+        hintView: 'default',
+        hintSize: 'm',
+        hintPlacement: 'auto',
+        hintHasArrow: true,
     },
 };
 
@@ -105,6 +173,7 @@ const StoryDefault = (props: StoryTextAreaProps) => {
             }}
             onFocus={onFocus}
             onBlur={onBlur}
+            style={{ width: '70%', margin: '0 auto' }}
             {...props}
         />
     );

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

@@ -14,26 +14,35 @@ var config = exports.config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-secondary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.backgroundColorFocus, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.textBeforeColor, _TextField.textFieldTokens.textAfterColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.contentSlotColor, _TextField.textFieldTokens.contentSlotColorHover, _TextField.textFieldTokens.contentSlotColorActive, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor, _TextField.textFieldTokens.indicatorColor, _TextField.textFieldTokens.optionalColor),
-      positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.backgroundColorFocus, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.textBeforeColor, _TextField.textFieldTokens.textAfterColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.contentSlotColor, _TextField.textFieldTokens.contentSlotColorHover, _TextField.textFieldTokens.contentSlotColorActive, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor, _TextField.textFieldTokens.indicatorColor, _TextField.textFieldTokens.optionalColor),
-      warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-warning);", ":var(--surface-transparent-warning-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-warning);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.backgroundColorFocus, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.textBeforeColor, _TextField.textFieldTokens.textAfterColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.contentSlotColor, _TextField.textFieldTokens.contentSlotColorHover, _TextField.textFieldTokens.contentSlotColorActive, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor, _TextField.textFieldTokens.indicatorColor, _TextField.textFieldTokens.optionalColor),
-      negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.backgroundColorFocus, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.textBeforeColor, _TextField.textFieldTokens.textAfterColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.contentSlotColor, _TextField.textFieldTokens.contentSlotColorHover, _TextField.textFieldTokens.contentSlotColorActive, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor, _TextField.textFieldTokens.indicatorColor, _TextField.textFieldTokens.optionalColor)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-secondary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.backgroundColorFocus, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.textBeforeColor, _TextField.textFieldTokens.textAfterColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.titleCaptionColor, _TextField.textFieldTokens.hintIconColor, _TextField.textFieldTokens.contentSlotColor, _TextField.textFieldTokens.contentSlotColorHover, _TextField.textFieldTokens.contentSlotColorActive, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor, _TextField.textFieldTokens.indicatorColor, _TextField.textFieldTokens.optionalColor),
+      positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.backgroundColorFocus, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.textBeforeColor, _TextField.textFieldTokens.textAfterColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.titleCaptionColor, _TextField.textFieldTokens.hintIconColor, _TextField.textFieldTokens.contentSlotColor, _TextField.textFieldTokens.contentSlotColorHover, _TextField.textFieldTokens.contentSlotColorActive, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor, _TextField.textFieldTokens.indicatorColor, _TextField.textFieldTokens.optionalColor),
+      warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-warning);", ":var(--surface-transparent-warning-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-warning);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.backgroundColorFocus, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.textBeforeColor, _TextField.textFieldTokens.textAfterColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.titleCaptionColor, _TextField.textFieldTokens.hintIconColor, _TextField.textFieldTokens.contentSlotColor, _TextField.textFieldTokens.contentSlotColorHover, _TextField.textFieldTokens.contentSlotColorActive, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor, _TextField.textFieldTokens.indicatorColor, _TextField.textFieldTokens.optionalColor),
+      negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.backgroundColorFocus, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.textBeforeColor, _TextField.textFieldTokens.textAfterColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.titleCaptionColor, _TextField.textFieldTokens.hintIconColor, _TextField.textFieldTokens.contentSlotColor, _TextField.textFieldTokens.contentSlotColorHover, _TextField.textFieldTokens.contentSlotColorActive, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor, _TextField.textFieldTokens.indicatorColor, _TextField.textFieldTokens.optionalColor)
     },
     size: {
-      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":3.5rem;", ":1.0625rem 1.125rem 1.0625rem 1.125rem;", ":0.375rem;", ":0.875rem;", ":0.0625rem;", ":-0.0625rem 0.5rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.5625rem 0 0.125rem 0;", ":1.5625rem 0 0.5625rem 0;", ":0.25rem;", ":0.5rem;", ":auto;", ":2.75rem;", ":0.75rem;", ":1rem;", ":0.625rem;", ":0rem;", ":1.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.5rem;", ":0.375rem;", ":0 0 0 0;", ":0.5rem auto auto -0.75rem;", ":0 0 auto auto;", ":0.25rem -0.625rem auto auto;"], _TextField.textFieldTokens.height, _TextField.textFieldTokens.padding, _TextField.textFieldTokens.paddingWithChips, _TextField.textFieldTokens.borderRadius, _TextField.textFieldTokens.borderWidth, _TextField.textFieldTokens.leftContentMargin, _TextField.textFieldTokens.rightContentMargin, _TextField.textFieldTokens.fontFamily, _TextField.textFieldTokens.fontSize, _TextField.textFieldTokens.fontStyle, _TextField.textFieldTokens.fontWeight, _TextField.textFieldTokens.letterSpacing, _TextField.textFieldTokens.lineHeight, _TextField.textFieldTokens.labelOffset, _TextField.textFieldTokens.labelFontFamily, _TextField.textFieldTokens.labelFontSize, _TextField.textFieldTokens.labelFontStyle, _TextField.textFieldTokens.labelFontWeight, _TextField.textFieldTokens.labelLetterSpacing, _TextField.textFieldTokens.labelLineHeight, _TextField.textFieldTokens.leftHelperOffset, _TextField.textFieldTokens.leftHelperFontFamily, _TextField.textFieldTokens.leftHelperFontSize, _TextField.textFieldTokens.leftHelperFontStyle, _TextField.textFieldTokens.leftHelperFontWeight, _TextField.textFieldTokens.leftHelperLetterSpacing, _TextField.textFieldTokens.leftHelperLineHeight, _TextField.textFieldTokens.labelInnerPadding, _TextField.textFieldTokens.contentLabelInnerPadding, _TextField.textFieldTokens.chipGap, _TextField.textFieldTokens.chipBorderRadius, _TextField.textFieldTokens.chipWidth, _TextField.textFieldTokens.chipHeight, _TextField.textFieldTokens.chipPaddingRight, _TextField.textFieldTokens.chipPaddingLeft, _TextField.textFieldTokens.chipClearContentMarginLeft, _TextField.textFieldTokens.chipClearContentMarginRight, _TextField.textFieldTokens.chipCloseIconSize, _TextField.textFieldTokens.chipFontFamily, _TextField.textFieldTokens.chipFontSize, _TextField.textFieldTokens.chipFontStyle, _TextField.textFieldTokens.chipFontWeight, _TextField.textFieldTokens.chipLetterSpacing, _TextField.textFieldTokens.chipLineHeight, _TextField.textFieldTokens.indicatorSizeInner, _TextField.textFieldTokens.indicatorSizeOuter, _TextField.textFieldTokens.indicatorLabelPlacementInner, _TextField.textFieldTokens.indicatorLabelPlacementOuter, _TextField.textFieldTokens.indicatorLabelPlacementInnerRight, _TextField.textFieldTokens.indicatorLabelPlacementOuterRight),
-      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":3rem;", ":0.875rem 1rem 0.875rem 1rem;", ":0.375rem;", ":0.75rem;", ":0.0625rem;", ":-0.125rem 0.375rem -0.125rem -0.125rem;", ":-0.125rem -0.125rem -0.125rem 0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.625rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.375rem 0 0.125rem 0;", ":1.375rem 0 0.375rem 0;", ":0.25rem;", ":0.375rem;", ":auto;", ":2.25rem;", ":0.625rem;", ":0.875rem;", ":0.5rem;", ":0rem;", ":1.25rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.5rem;", ":0.375rem;", ":0 0 0 0;", ":0.375rem auto auto -0.75rem;", ":0 0 auto auto;", ":0.25rem -0.6875rem auto auto;"], _TextField.textFieldTokens.height, _TextField.textFieldTokens.padding, _TextField.textFieldTokens.paddingWithChips, _TextField.textFieldTokens.borderRadius, _TextField.textFieldTokens.borderWidth, _TextField.textFieldTokens.leftContentMargin, _TextField.textFieldTokens.rightContentMargin, _TextField.textFieldTokens.fontFamily, _TextField.textFieldTokens.fontSize, _TextField.textFieldTokens.fontStyle, _TextField.textFieldTokens.fontWeight, _TextField.textFieldTokens.letterSpacing, _TextField.textFieldTokens.lineHeight, _TextField.textFieldTokens.labelOffset, _TextField.textFieldTokens.labelFontFamily, _TextField.textFieldTokens.labelFontSize, _TextField.textFieldTokens.labelFontStyle, _TextField.textFieldTokens.labelFontWeight, _TextField.textFieldTokens.labelLetterSpacing, _TextField.textFieldTokens.labelLineHeight, _TextField.textFieldTokens.leftHelperOffset, _TextField.textFieldTokens.leftHelperFontFamily, _TextField.textFieldTokens.leftHelperFontSize, _TextField.textFieldTokens.leftHelperFontStyle, _TextField.textFieldTokens.leftHelperFontWeight, _TextField.textFieldTokens.leftHelperLetterSpacing, _TextField.textFieldTokens.leftHelperLineHeight, _TextField.textFieldTokens.labelInnerPadding, _TextField.textFieldTokens.contentLabelInnerPadding, _TextField.textFieldTokens.chipGap, _TextField.textFieldTokens.chipBorderRadius, _TextField.textFieldTokens.chipWidth, _TextField.textFieldTokens.chipHeight, _TextField.textFieldTokens.chipPaddingRight, _TextField.textFieldTokens.chipPaddingLeft, _TextField.textFieldTokens.chipClearContentMarginLeft, _TextField.textFieldTokens.chipClearContentMarginRight, _TextField.textFieldTokens.chipCloseIconSize, _TextField.textFieldTokens.chipFontFamily, _TextField.textFieldTokens.chipFontSize, _TextField.textFieldTokens.chipFontStyle, _TextField.textFieldTokens.chipFontWeight, _TextField.textFieldTokens.chipLetterSpacing, _TextField.textFieldTokens.chipLineHeight, _TextField.textFieldTokens.indicatorSizeInner, _TextField.textFieldTokens.indicatorSizeOuter, _TextField.textFieldTokens.indicatorLabelPlacementInner, _TextField.textFieldTokens.indicatorLabelPlacementOuter, _TextField.textFieldTokens.indicatorLabelPlacementInnerRight, _TextField.textFieldTokens.indicatorLabelPlacementOuterRight),
-      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":0.6875rem 0.875rem 0.6875rem 0.875rem;", ":0.375rem;", ":0.625rem;", ":0.0625rem;", ":-0.1875rem 0.25rem -0.1875rem -0.125rem;", ":-0.1875rem -0.125rem -0.1875rem 0.75rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.3125rem 0 0 0;", ":1.0625rem 0 0.3125rem 0;", ":0.25rem;", ":0.25rem;", ":auto;", ":1.75rem;", ":0.5rem;", ":0.75rem;", ":0.375rem;", ":0rem;", ":1rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.375rem;", ":0.375rem;", ":0 0 0 0;", ":0.3125rem auto auto -0.6875rem;", ":0 0 auto auto;", ":0.25rem -0.625rem auto auto;"], _TextField.textFieldTokens.height, _TextField.textFieldTokens.padding, _TextField.textFieldTokens.paddingWithChips, _TextField.textFieldTokens.borderRadius, _TextField.textFieldTokens.borderWidth, _TextField.textFieldTokens.leftContentMargin, _TextField.textFieldTokens.rightContentMargin, _TextField.textFieldTokens.fontFamily, _TextField.textFieldTokens.fontSize, _TextField.textFieldTokens.fontStyle, _TextField.textFieldTokens.fontWeight, _TextField.textFieldTokens.letterSpacing, _TextField.textFieldTokens.lineHeight, _TextField.textFieldTokens.labelOffset, _TextField.textFieldTokens.labelFontFamily, _TextField.textFieldTokens.labelFontSize, _TextField.textFieldTokens.labelFontStyle, _TextField.textFieldTokens.labelFontWeight, _TextField.textFieldTokens.labelLetterSpacing, _TextField.textFieldTokens.labelLineHeight, _TextField.textFieldTokens.leftHelperOffset, _TextField.textFieldTokens.leftHelperFontFamily, _TextField.textFieldTokens.leftHelperFontSize, _TextField.textFieldTokens.leftHelperFontStyle, _TextField.textFieldTokens.leftHelperFontWeight, _TextField.textFieldTokens.leftHelperLetterSpacing, _TextField.textFieldTokens.leftHelperLineHeight, _TextField.textFieldTokens.labelInnerPadding, _TextField.textFieldTokens.contentLabelInnerPadding, _TextField.textFieldTokens.chipGap, _TextField.textFieldTokens.chipBorderRadius, _TextField.textFieldTokens.chipWidth, _TextField.textFieldTokens.chipHeight, _TextField.textFieldTokens.chipPaddingRight, _TextField.textFieldTokens.chipPaddingLeft, _TextField.textFieldTokens.chipClearContentMarginLeft, _TextField.textFieldTokens.chipClearContentMarginRight, _TextField.textFieldTokens.chipCloseIconSize, _TextField.textFieldTokens.chipFontFamily, _TextField.textFieldTokens.chipFontSize, _TextField.textFieldTokens.chipFontStyle, _TextField.textFieldTokens.chipFontWeight, _TextField.textFieldTokens.chipLetterSpacing, _TextField.textFieldTokens.chipLineHeight, _TextField.textFieldTokens.indicatorSizeInner, _TextField.textFieldTokens.indicatorSizeOuter, _TextField.textFieldTokens.indicatorLabelPlacementInner, _TextField.textFieldTokens.indicatorLabelPlacementOuter, _TextField.textFieldTokens.indicatorLabelPlacementInnerRight, _TextField.textFieldTokens.indicatorLabelPlacementOuterRight),
-      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":0.5625rem 0.625rem 0.5625rem 0.625rem;", ":0.375rem;", ":0.5rem;", ":0.0625rem;", ":-0.0625rem 0.25rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.3125rem 0 0 0;", ":1.0625rem 0 0.3125rem 0;", ":0.25rem;", ":0.125rem;", ":auto;", ":1.25rem;", ":0.375rem;", ":0.625rem;", ":0.25rem;", ":0rem;", ":0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.375rem;", ":0.375rem;", ":0 0 0 0;", ":0.25rem auto auto -0.625rem;", ":0 0 auto auto;", ":0.125rem -0.6875rem auto auto;"], _TextField.textFieldTokens.height, _TextField.textFieldTokens.padding, _TextField.textFieldTokens.paddingWithChips, _TextField.textFieldTokens.borderRadius, _TextField.textFieldTokens.borderWidth, _TextField.textFieldTokens.leftContentMargin, _TextField.textFieldTokens.rightContentMargin, _TextField.textFieldTokens.fontFamily, _TextField.textFieldTokens.fontSize, _TextField.textFieldTokens.fontStyle, _TextField.textFieldTokens.fontWeight, _TextField.textFieldTokens.letterSpacing, _TextField.textFieldTokens.lineHeight, _TextField.textFieldTokens.labelOffset, _TextField.textFieldTokens.labelFontFamily, _TextField.textFieldTokens.labelFontSize, _TextField.textFieldTokens.labelFontStyle, _TextField.textFieldTokens.labelFontWeight, _TextField.textFieldTokens.labelLetterSpacing, _TextField.textFieldTokens.labelLineHeight, _TextField.textFieldTokens.leftHelperOffset, _TextField.textFieldTokens.leftHelperFontFamily, _TextField.textFieldTokens.leftHelperFontSize, _TextField.textFieldTokens.leftHelperFontStyle, _TextField.textFieldTokens.leftHelperFontWeight, _TextField.textFieldTokens.leftHelperLetterSpacing, _TextField.textFieldTokens.leftHelperLineHeight, _TextField.textFieldTokens.labelInnerPadding, _TextField.textFieldTokens.contentLabelInnerPadding, _TextField.textFieldTokens.chipGap, _TextField.textFieldTokens.chipBorderRadius, _TextField.textFieldTokens.chipWidth, _TextField.textFieldTokens.chipHeight, _TextField.textFieldTokens.chipPaddingRight, _TextField.textFieldTokens.chipPaddingLeft, _TextField.textFieldTokens.chipClearContentMarginLeft, _TextField.textFieldTokens.chipClearContentMarginRight, _TextField.textFieldTokens.chipCloseIconSize, _TextField.textFieldTokens.chipFontFamily, _TextField.textFieldTokens.chipFontSize, _TextField.textFieldTokens.chipFontStyle, _TextField.textFieldTokens.chipFontWeight, _TextField.textFieldTokens.chipLetterSpacing, _TextField.textFieldTokens.chipLineHeight, _TextField.textFieldTokens.indicatorSizeInner, _TextField.textFieldTokens.indicatorSizeOuter, _TextField.textFieldTokens.indicatorLabelPlacementInner, _TextField.textFieldTokens.indicatorLabelPlacementOuter, _TextField.textFieldTokens.indicatorLabelPlacementInnerRight, _TextField.textFieldTokens.indicatorLabelPlacementOuterRight)
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":3.5rem;", ":1.0625rem 1.125rem 1.0625rem 1.125rem;", ":0.375rem;", ":0.875rem;", ":0.0625rem;", ":-0.0625rem 0.5rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0 0.25rem;", ":-1.375rem;", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.5625rem 0 0.125rem 0;", ":1.5625rem 0 0.5625rem 0;", ":0.25rem;", ":0.5rem;", ":auto;", ":2.75rem;", ":0.75rem;", ":1rem;", ":0.625rem;", ":0rem;", ":1.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.5rem;", ":0.375rem;", ":0 0 0 0;", ":0.5rem auto auto -0.75rem;", ":0 0 auto auto;", ":0.25rem -0.625rem auto auto;"], _TextField.textFieldTokens.height, _TextField.textFieldTokens.padding, _TextField.textFieldTokens.paddingWithChips, _TextField.textFieldTokens.borderRadius, _TextField.textFieldTokens.borderWidth, _TextField.textFieldTokens.leftContentMargin, _TextField.textFieldTokens.rightContentMargin, _TextField.textFieldTokens.fontFamily, _TextField.textFieldTokens.fontSize, _TextField.textFieldTokens.fontStyle, _TextField.textFieldTokens.fontWeight, _TextField.textFieldTokens.letterSpacing, _TextField.textFieldTokens.lineHeight, _TextField.textFieldTokens.labelOffset, _TextField.textFieldTokens.labelFontFamily, _TextField.textFieldTokens.labelFontSize, _TextField.textFieldTokens.labelFontStyle, _TextField.textFieldTokens.labelFontWeight, _TextField.textFieldTokens.labelLetterSpacing, _TextField.textFieldTokens.labelLineHeight, _TextField.textFieldTokens.hintMargin, _TextField.textFieldTokens.hintInnerLabelPlacementOffset, _TextField.textFieldTokens.titleCaptionInnerLabelOffset, _TextField.textFieldTokens.titleCaptionFontFamily, _TextField.textFieldTokens.titleCaptionFontSize, _TextField.textFieldTokens.titleCaptionFontStyle, _TextField.textFieldTokens.titleCaptionFontWeight, _TextField.textFieldTokens.titleCaptionLetterSpacing, _TextField.textFieldTokens.titleCaptionLineHeight, _TextField.textFieldTokens.leftHelperOffset, _TextField.textFieldTokens.leftHelperFontFamily, _TextField.textFieldTokens.leftHelperFontSize, _TextField.textFieldTokens.leftHelperFontStyle, _TextField.textFieldTokens.leftHelperFontWeight, _TextField.textFieldTokens.leftHelperLetterSpacing, _TextField.textFieldTokens.leftHelperLineHeight, _TextField.textFieldTokens.labelInnerPadding, _TextField.textFieldTokens.contentLabelInnerPadding, _TextField.textFieldTokens.chipGap, _TextField.textFieldTokens.chipBorderRadius, _TextField.textFieldTokens.chipWidth, _TextField.textFieldTokens.chipHeight, _TextField.textFieldTokens.chipPaddingRight, _TextField.textFieldTokens.chipPaddingLeft, _TextField.textFieldTokens.chipClearContentMarginLeft, _TextField.textFieldTokens.chipClearContentMarginRight, _TextField.textFieldTokens.chipCloseIconSize, _TextField.textFieldTokens.chipFontFamily, _TextField.textFieldTokens.chipFontSize, _TextField.textFieldTokens.chipFontStyle, _TextField.textFieldTokens.chipFontWeight, _TextField.textFieldTokens.chipLetterSpacing, _TextField.textFieldTokens.chipLineHeight, _TextField.textFieldTokens.indicatorSizeInner, _TextField.textFieldTokens.indicatorSizeOuter, _TextField.textFieldTokens.indicatorLabelPlacementInner, _TextField.textFieldTokens.indicatorLabelPlacementOuter, _TextField.textFieldTokens.indicatorLabelPlacementInnerRight, _TextField.textFieldTokens.indicatorLabelPlacementOuterRight),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":3rem;", ":0.875rem 1rem 0.875rem 1rem;", ":0.375rem;", ":0.75rem;", ":0.0625rem;", ":-0.125rem 0.375rem -0.125rem -0.125rem;", ":-0.125rem -0.125rem -0.125rem 0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.625rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0 0.25rem;", ":-1.375rem;", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.375rem 0 0.125rem 0;", ":1.375rem 0 0.375rem 0;", ":0.25rem;", ":0.375rem;", ":auto;", ":2.25rem;", ":0.625rem;", ":0.875rem;", ":0.5rem;", ":0rem;", ":1.25rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.5rem;", ":0.375rem;", ":0 0 0 0;", ":0.375rem auto auto -0.75rem;", ":0 0 auto auto;", ":0.25rem -0.6875rem auto auto;"], _TextField.textFieldTokens.height, _TextField.textFieldTokens.padding, _TextField.textFieldTokens.paddingWithChips, _TextField.textFieldTokens.borderRadius, _TextField.textFieldTokens.borderWidth, _TextField.textFieldTokens.leftContentMargin, _TextField.textFieldTokens.rightContentMargin, _TextField.textFieldTokens.fontFamily, _TextField.textFieldTokens.fontSize, _TextField.textFieldTokens.fontStyle, _TextField.textFieldTokens.fontWeight, _TextField.textFieldTokens.letterSpacing, _TextField.textFieldTokens.lineHeight, _TextField.textFieldTokens.labelOffset, _TextField.textFieldTokens.labelFontFamily, _TextField.textFieldTokens.labelFontSize, _TextField.textFieldTokens.labelFontStyle, _TextField.textFieldTokens.labelFontWeight, _TextField.textFieldTokens.labelLetterSpacing, _TextField.textFieldTokens.labelLineHeight, _TextField.textFieldTokens.hintMargin, _TextField.textFieldTokens.hintInnerLabelPlacementOffset, _TextField.textFieldTokens.titleCaptionInnerLabelOffset, _TextField.textFieldTokens.titleCaptionFontFamily, _TextField.textFieldTokens.titleCaptionFontSize, _TextField.textFieldTokens.titleCaptionFontStyle, _TextField.textFieldTokens.titleCaptionFontWeight, _TextField.textFieldTokens.titleCaptionLetterSpacing, _TextField.textFieldTokens.titleCaptionLineHeight, _TextField.textFieldTokens.leftHelperOffset, _TextField.textFieldTokens.leftHelperFontFamily, _TextField.textFieldTokens.leftHelperFontSize, _TextField.textFieldTokens.leftHelperFontStyle, _TextField.textFieldTokens.leftHelperFontWeight, _TextField.textFieldTokens.leftHelperLetterSpacing, _TextField.textFieldTokens.leftHelperLineHeight, _TextField.textFieldTokens.labelInnerPadding, _TextField.textFieldTokens.contentLabelInnerPadding, _TextField.textFieldTokens.chipGap, _TextField.textFieldTokens.chipBorderRadius, _TextField.textFieldTokens.chipWidth, _TextField.textFieldTokens.chipHeight, _TextField.textFieldTokens.chipPaddingRight, _TextField.textFieldTokens.chipPaddingLeft, _TextField.textFieldTokens.chipClearContentMarginLeft, _TextField.textFieldTokens.chipClearContentMarginRight, _TextField.textFieldTokens.chipCloseIconSize, _TextField.textFieldTokens.chipFontFamily, _TextField.textFieldTokens.chipFontSize, _TextField.textFieldTokens.chipFontStyle, _TextField.textFieldTokens.chipFontWeight, _TextField.textFieldTokens.chipLetterSpacing, _TextField.textFieldTokens.chipLineHeight, _TextField.textFieldTokens.indicatorSizeInner, _TextField.textFieldTokens.indicatorSizeOuter, _TextField.textFieldTokens.indicatorLabelPlacementInner, _TextField.textFieldTokens.indicatorLabelPlacementOuter, _TextField.textFieldTokens.indicatorLabelPlacementInnerRight, _TextField.textFieldTokens.indicatorLabelPlacementOuterRight),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":0.6875rem 0.875rem 0.6875rem 0.875rem;", ":0.375rem;", ":0.625rem;", ":0.0625rem;", ":-0.1875rem 0.25rem -0.1875rem -0.125rem;", ":-0.1875rem -0.125rem -0.1875rem 0.75rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0 0.25rem;", ":-1.375rem;", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.3125rem 0 0 0;", ":1.0625rem 0 0.3125rem 0;", ":0.25rem;", ":0.25rem;", ":auto;", ":1.75rem;", ":0.5rem;", ":0.75rem;", ":0.375rem;", ":0rem;", ":1rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.375rem;", ":0.375rem;", ":0 0 0 0;", ":0.3125rem auto auto -0.6875rem;", ":0 0 auto auto;", ":0.25rem -0.625rem auto auto;"], _TextField.textFieldTokens.height, _TextField.textFieldTokens.padding, _TextField.textFieldTokens.paddingWithChips, _TextField.textFieldTokens.borderRadius, _TextField.textFieldTokens.borderWidth, _TextField.textFieldTokens.leftContentMargin, _TextField.textFieldTokens.rightContentMargin, _TextField.textFieldTokens.fontFamily, _TextField.textFieldTokens.fontSize, _TextField.textFieldTokens.fontStyle, _TextField.textFieldTokens.fontWeight, _TextField.textFieldTokens.letterSpacing, _TextField.textFieldTokens.lineHeight, _TextField.textFieldTokens.labelOffset, _TextField.textFieldTokens.labelFontFamily, _TextField.textFieldTokens.labelFontSize, _TextField.textFieldTokens.labelFontStyle, _TextField.textFieldTokens.labelFontWeight, _TextField.textFieldTokens.labelLetterSpacing, _TextField.textFieldTokens.labelLineHeight, _TextField.textFieldTokens.hintMargin, _TextField.textFieldTokens.hintInnerLabelPlacementOffset, _TextField.textFieldTokens.titleCaptionInnerLabelOffset, _TextField.textFieldTokens.titleCaptionFontFamily, _TextField.textFieldTokens.titleCaptionFontSize, _TextField.textFieldTokens.titleCaptionFontStyle, _TextField.textFieldTokens.titleCaptionFontWeight, _TextField.textFieldTokens.titleCaptionLetterSpacing, _TextField.textFieldTokens.titleCaptionLineHeight, _TextField.textFieldTokens.leftHelperOffset, _TextField.textFieldTokens.leftHelperFontFamily, _TextField.textFieldTokens.leftHelperFontSize, _TextField.textFieldTokens.leftHelperFontStyle, _TextField.textFieldTokens.leftHelperFontWeight, _TextField.textFieldTokens.leftHelperLetterSpacing, _TextField.textFieldTokens.leftHelperLineHeight, _TextField.textFieldTokens.labelInnerPadding, _TextField.textFieldTokens.contentLabelInnerPadding, _TextField.textFieldTokens.chipGap, _TextField.textFieldTokens.chipBorderRadius, _TextField.textFieldTokens.chipWidth, _TextField.textFieldTokens.chipHeight, _TextField.textFieldTokens.chipPaddingRight, _TextField.textFieldTokens.chipPaddingLeft, _TextField.textFieldTokens.chipClearContentMarginLeft, _TextField.textFieldTokens.chipClearContentMarginRight, _TextField.textFieldTokens.chipCloseIconSize, _TextField.textFieldTokens.chipFontFamily, _TextField.textFieldTokens.chipFontSize, _TextField.textFieldTokens.chipFontStyle, _TextField.textFieldTokens.chipFontWeight, _TextField.textFieldTokens.chipLetterSpacing, _TextField.textFieldTokens.chipLineHeight, _TextField.textFieldTokens.indicatorSizeInner, _TextField.textFieldTokens.indicatorSizeOuter, _TextField.textFieldTokens.indicatorLabelPlacementInner, _TextField.textFieldTokens.indicatorLabelPlacementOuter, _TextField.textFieldTokens.indicatorLabelPlacementInnerRight, _TextField.textFieldTokens.indicatorLabelPlacementOuterRight),
+      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":0.5625rem 0.625rem 0.5625rem 0.625rem;", ":0.375rem;", ":0.5rem;", ":0.0625rem;", ":-0.0625rem 0.25rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0 0.25rem;", ":-1.25rem;", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.3125rem 0 0 0;", ":1.0625rem 0 0.3125rem 0;", ":0.25rem;", ":0.125rem;", ":auto;", ":1.25rem;", ":0.375rem;", ":0.625rem;", ":0.25rem;", ":0rem;", ":0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.375rem;", ":0.375rem;", ":0 0 0 0;", ":0.25rem auto auto -0.625rem;", ":0 0 auto auto;", ":0.125rem -0.6875rem auto auto;"], _TextField.textFieldTokens.height, _TextField.textFieldTokens.padding, _TextField.textFieldTokens.paddingWithChips, _TextField.textFieldTokens.borderRadius, _TextField.textFieldTokens.borderWidth, _TextField.textFieldTokens.leftContentMargin, _TextField.textFieldTokens.rightContentMargin, _TextField.textFieldTokens.fontFamily, _TextField.textFieldTokens.fontSize, _TextField.textFieldTokens.fontStyle, _TextField.textFieldTokens.fontWeight, _TextField.textFieldTokens.letterSpacing, _TextField.textFieldTokens.lineHeight, _TextField.textFieldTokens.labelOffset, _TextField.textFieldTokens.labelFontFamily, _TextField.textFieldTokens.labelFontSize, _TextField.textFieldTokens.labelFontStyle, _TextField.textFieldTokens.labelFontWeight, _TextField.textFieldTokens.labelLetterSpacing, _TextField.textFieldTokens.labelLineHeight, _TextField.textFieldTokens.hintMargin, _TextField.textFieldTokens.hintInnerLabelPlacementOffset, _TextField.textFieldTokens.titleCaptionInnerLabelOffset, _TextField.textFieldTokens.titleCaptionFontFamily, _TextField.textFieldTokens.titleCaptionFontSize, _TextField.textFieldTokens.titleCaptionFontStyle, _TextField.textFieldTokens.titleCaptionFontWeight, _TextField.textFieldTokens.titleCaptionLetterSpacing, _TextField.textFieldTokens.titleCaptionLineHeight, _TextField.textFieldTokens.leftHelperOffset, _TextField.textFieldTokens.leftHelperFontFamily, _TextField.textFieldTokens.leftHelperFontSize, _TextField.textFieldTokens.leftHelperFontStyle, _TextField.textFieldTokens.leftHelperFontWeight, _TextField.textFieldTokens.leftHelperLetterSpacing, _TextField.textFieldTokens.leftHelperLineHeight, _TextField.textFieldTokens.labelInnerPadding, _TextField.textFieldTokens.contentLabelInnerPadding, _TextField.textFieldTokens.chipGap, _TextField.textFieldTokens.chipBorderRadius, _TextField.textFieldTokens.chipWidth, _TextField.textFieldTokens.chipHeight, _TextField.textFieldTokens.chipPaddingRight, _TextField.textFieldTokens.chipPaddingLeft, _TextField.textFieldTokens.chipClearContentMarginLeft, _TextField.textFieldTokens.chipClearContentMarginRight, _TextField.textFieldTokens.chipCloseIconSize, _TextField.textFieldTokens.chipFontFamily, _TextField.textFieldTokens.chipFontSize, _TextField.textFieldTokens.chipFontStyle, _TextField.textFieldTokens.chipFontWeight, _TextField.textFieldTokens.chipLetterSpacing, _TextField.textFieldTokens.chipLineHeight, _TextField.textFieldTokens.indicatorSizeInner, _TextField.textFieldTokens.indicatorSizeOuter, _TextField.textFieldTokens.indicatorLabelPlacementInner, _TextField.textFieldTokens.indicatorLabelPlacementOuter, _TextField.textFieldTokens.indicatorLabelPlacementInnerRight, _TextField.textFieldTokens.indicatorLabelPlacementOuterRight)
     },
     labelPlacement: {
       inner: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-input-label-color,var(--plasma-input-placeholder-color,var(--text-secondary)));", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.labelInnerFontFamily, _TextField.textFieldTokens.labelInnerFontSize, _TextField.textFieldTokens.labelInnerFontStyle, _TextField.textFieldTokens.labelInnerFontWeight, _TextField.textFieldTokens.labelInnerLetterSpacing, _TextField.textFieldTokens.labelInnerLineHeight),
       outer: /*#__PURE__*/(0, _styledComponents.css)([""])
     },
+    hintView: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-solid-card);", ":var(--shadow-down-hard-m);", ":var(--text-primary);"], _TextField.textFieldTokens.tooltipBackgroundColor, _TextField.textFieldTokens.tooltipBoxShadow, _TextField.textFieldTokens.tooltipColor),
+      onDark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-surface-solid-card);", ":var(--shadow-down-hard-m);", ":var(--on-dark-text-primary);"], _TextField.textFieldTokens.tooltipBackgroundColor, _TextField.textFieldTokens.tooltipBoxShadow, _TextField.textFieldTokens.tooltipColor),
+      onLight: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-surface-solid-card);", ":var(--shadow-down-hard-m);", ":var(--on-light-text-primary);"], _TextField.textFieldTokens.tooltipBackgroundColor, _TextField.textFieldTokens.tooltipBoxShadow, _TextField.textFieldTokens.tooltipColor)
+    },
+    hintSize: {
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.6875rem;", ":0.875rem;", ":0.6875rem;", ":0.875rem;", ":2.5rem;", ":0.625rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.375rem;", ":1.25rem;", ":1.25rem;", ":url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg==\");", ":0.5rem;", ":0.625rem;", ":var(--surface-solid-card);"], _TextField.textFieldTokens.tooltipPaddingTop, _TextField.textFieldTokens.tooltipPaddingRight, _TextField.textFieldTokens.tooltipPaddingBottom, _TextField.textFieldTokens.tooltipPaddingLeft, _TextField.textFieldTokens.tooltipMinHeight, _TextField.textFieldTokens.tooltipBorderRadius, _TextField.textFieldTokens.tooltipTextFontFamily, _TextField.textFieldTokens.tooltipTextFontSize, _TextField.textFieldTokens.tooltipTextFontStyle, _TextField.textFieldTokens.tooltipTextFontWeight, _TextField.textFieldTokens.tooltipTextFontLetterSpacing, _TextField.textFieldTokens.tooltipTextFontLineHeight, _TextField.textFieldTokens.tooltipContentLeftMargin, _TextField.textFieldTokens.tooltipArrowMaskWidth, _TextField.textFieldTokens.tooltipArrowMaskHeight, _TextField.textFieldTokens.tooltipArrowMaskImage, _TextField.textFieldTokens.tooltipArrowHeight, _TextField.textFieldTokens.tooltipArrowEdgeMargin, _TextField.textFieldTokens.tooltipArrowBackground),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":0.75rem;", ":0.5rem;", ":0.75rem;", ":2rem;", ":0.5rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.25rem;", ":1rem;", ":1rem;", ":url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+\");", ":0.375rem;", ":0.5625rem;", ":var(--surface-solid-card);"], _TextField.textFieldTokens.tooltipPaddingTop, _TextField.textFieldTokens.tooltipPaddingRight, _TextField.textFieldTokens.tooltipPaddingBottom, _TextField.textFieldTokens.tooltipPaddingLeft, _TextField.textFieldTokens.tooltipMinHeight, _TextField.textFieldTokens.tooltipBorderRadius, _TextField.textFieldTokens.tooltipTextFontFamily, _TextField.textFieldTokens.tooltipTextFontSize, _TextField.textFieldTokens.tooltipTextFontStyle, _TextField.textFieldTokens.tooltipTextFontWeight, _TextField.textFieldTokens.tooltipTextFontLetterSpacing, _TextField.textFieldTokens.tooltipTextFontLineHeight, _TextField.textFieldTokens.tooltipContentLeftMargin, _TextField.textFieldTokens.tooltipArrowMaskWidth, _TextField.textFieldTokens.tooltipArrowMaskHeight, _TextField.textFieldTokens.tooltipArrowMaskImage, _TextField.textFieldTokens.tooltipArrowHeight, _TextField.textFieldTokens.tooltipArrowEdgeMargin, _TextField.textFieldTokens.tooltipArrowBackground)
+    },
     disabled: {
       "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _TextField.textFieldTokens.disabledOpacity)
     },
     readOnly: {
-      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);"], _TextField.textFieldTokens.colorReadOnly, _TextField.textFieldTokens.backgroundColorReadOnly, _TextField.textFieldTokens.placeholderColorReadOnly, _TextField.textFieldTokens.leftHelperColorReadOnly, _TextField.textFieldTokens.labelColorReadOnly)
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);"], _TextField.textFieldTokens.colorReadOnly, _TextField.textFieldTokens.backgroundColorReadOnly, _TextField.textFieldTokens.placeholderColorReadOnly, _TextField.textFieldTokens.leftHelperColorReadOnly, _TextField.textFieldTokens.titleCaptionColorReadOnly, _TextField.textFieldTokens.labelColorReadOnly)
     }
   }
 };

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

@@ -5,6 +5,7 @@ import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
 
 import { WithTheme } from '../../../_helpers';
 import { IconCross } from '../../../../components/_Icon';
+import type { PopoverPlacement } from '../Popover/Popover';
 
 import { TextField } from './TextField';
 
@@ -16,7 +17,29 @@ const onChipsChange = action('onChipsChange');
 
 const sizes = ['l', 'm', 's', 'xs'];
 const views = ['default', 'positive', 'warning', 'negative'];
+const hintViews = ['default', 'onDark', 'onLight'];
+const hintSizes = ['m', 's'];
+const hintTriggers = ['hover', 'click'];
 const labelPlacements = ['outer', 'inner'];
+const placements: Array<PopoverPlacement> = [
+    'top',
+    'top-start',
+    'top-end',
+
+    'bottom',
+    'bottom-start',
+    'bottom-end',
+
+    'left',
+    'left-start',
+    'left-end',
+
+    'right',
+    'right-start',
+    'right-end',
+
+    'auto',
+];
 
 const meta: Meta<typeof TextField> = {
     title: 'plasma_b2c/TextField',
@@ -64,6 +87,43 @@ const meta: Meta<typeof TextField> = {
                 type: 'inline-radio',
             },
         },
+        hintView: {
+            options: hintViews,
+            control: {
+                type: 'select',
+            },
+            if: { arg: 'hasHint', truthy: true },
+        },
+        hintSize: {
+            options: hintSizes,
+            control: {
+                type: 'select',
+            },
+            if: { arg: 'hasHint', truthy: true },
+        },
+        hintTrigger: {
+            options: hintTriggers,
+            control: {
+                type: 'inline-radio',
+            },
+            if: { arg: 'hasHint', truthy: true },
+        },
+        hintText: {
+            control: { type: 'text' },
+            if: { arg: 'hasHint', truthy: true },
+        },
+        hintPlacement: {
+            options: placements,
+            control: {
+                type: 'select',
+            },
+            if: { arg: 'hasHint', truthy: true },
+            mappers: placements,
+        },
+        hintHasArrow: {
+            control: { type: 'boolean' },
+            if: { arg: 'hasHint', truthy: true },
+        },
     },
 };
 
@@ -99,7 +159,7 @@ const StoryDemo = ({ enableContentLeft, enableContentRight, view, ...rest }: Sto
     const iconSize = rest.size === 'xs' ? 'xs' : 's';
 
     return (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem', width: '70%', margin: '0 auto' }}>
             <TextField
                 {...rest}
                 enumerationType="plain"
@@ -139,6 +199,7 @@ export const Default: StoryObj<StoryPropsDefault> = {
         view: 'default',
         label: 'Лейбл',
         labelPlacement: 'outer',
+        titleCaption: 'Подпись к полю',
         textBefore: '',
         textAfter: '',
         placeholder: 'Заполните поле',
@@ -150,6 +211,13 @@ export const Default: StoryObj<StoryPropsDefault> = {
         optional: false,
         required: false,
         requiredPlacement: 'right',
+        hasHint: false,
+        hintTrigger: 'hover',
+        hintText: 'Текст подсказки',
+        hintView: 'default',
+        hintSize: 'm',
+        hintPlacement: 'auto',
+        hintHasArrow: true,
     },
     render: (args) => <StoryDemo {...args} />,
 };
@@ -196,6 +264,7 @@ const StoryChips = ({ enableContentLeft, enableContentRight, view, ...rest }: St
             onFocus={onFocus}
             onBlur={onBlur}
             onChangeChips={onChipsChange}
+            style={{ width: '70%', margin: '0 auto' }}
         />
     );
 };

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

@@ -5,7 +5,7 @@ import type { StoryObj, Meta } from '@storybook/react';
 import { WithTheme } from '../../../_helpers';
 import { Button } from '../Button/Button';
 import { PopoverPlacement } from '../Popover/Popover';
-import { IconDisclosureRightCentered } from '../../../../components/_Icon';
+import { IconDisclosureRight } from '../../../../components/_Icon';
 
 import { Tooltip } from './Tooltip';
 import type { TooltipProps } from './Tooltip';
@@ -166,7 +166,7 @@ const StoryLive = (args: TooltipProps) => {
                             aria-describedby="example-tooltip-firstname"
                         />
                     }
-                    contentLeft={<IconDisclosureRightCentered size="xs" />}
+                    contentLeft={<IconDisclosureRight size="xs" />}
                     {...args}
                     id="example-tooltip-firstname"
                     text={text}

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

@@ -3,7 +3,7 @@ import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { disableProps } from '@salutejs/plasma-sb-utils';
 
-import { IconDisclosureLeftCentered } from '../../../../components/_Icon';
+import { IconDisclosureLeft } from '../../../../components/_Icon';
 import { WithTheme } from '../../../_helpers';
 
 import { Editable, typographyVariants } from './Editable';
@@ -50,7 +50,7 @@ const StoryDefault = ({ defaultValue, componentName, iconSize, ...rest }: StoryP
     return (
         <Editable
             {...rest}
-            icon={<IconDisclosureLeftCentered size={iconSize} color="inherit" />}
+            icon={<IconDisclosureLeft size={iconSize} color="inherit" />}
             textComponent={typographyVariants[componentName]}
             value={defaultValue}
             onChange={handleChange}

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

@@ -12,7 +12,7 @@ import {
 import { WithTheme } from '../../../_helpers';
 import { PopupProvider } from '../Popup/Popup';
 import { NotificationProps } from '../../../../components/Notification';
-import { IconDisclosureRightCentered } from '../../../../components/_Icon';
+import { IconDisclosureRight } from '../../../../components/_Icon';
 
 import { Notification, NotificationsProvider } from './Notification';
 
@@ -55,7 +55,7 @@ const StoryDefault = ({ title, children, iconPlacement, size, layout, showLeftIc
     return (
         <Notification
             title={title}
-            icon={showLeftIcon ? <IconDisclosureRightCentered /> : ''}
+            icon={showLeftIcon ? <IconDisclosureRight /> : ''}
             iconPlacement={iconPlacement}
             actions={
                 <Button
@@ -116,10 +116,7 @@ type StoryLiveDemoProps = ComponentProps<typeof Notification> & {
 const StoryLiveDemo = ({ timeout, ...rest }: StoryLiveDemoProps) => {
     const count = useRef(0);
     const handleClick = useCallback(() => {
-        addNotification(
-            { icon: <IconDisclosureRightCentered />, ...rest, ...getNotificationProps(count.current) },
-            timeout,
-        );
+        addNotification({ icon: <IconDisclosureRight />, ...rest, ...getNotificationProps(count.current) }, timeout);
         count.current++;
     }, [count, rest]);