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

package/styled-components/es/examples/plasma_b2c/components/Segment/Segment.stories.tsx

@@ -1,55 +1,23 @@
 import React from 'react';
 import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
-import { disableProps } from '@salutejs/plasma-sb-utils';
 
 import { segmentGroupConfig } from '../../../../components/Segment';
 import { mergeConfig } from '../../../../engines';
 import { WithTheme, argTypesFromConfig } from '../../../_helpers';
 import { SegmentProvider } from '../../../../components/Segment/SegmentProvider';
-import { Counter } from '../Counter/Counter';
-import { IconMic } from '../../../../components/_Icon';
 
 import { config } from './SegmentGroup.config';
 import { SegmentItem, SegmentGroup } from './Segment';
 
-const contentLeftOptions = ['none', 'icon'];
-const contentRightOptions = ['none', 'text', 'counter', 'icon'];
+const segmentItemViews = ['clear', 'default', 'secondary'];
 
-const segmentItemViews = ['default', 'secondary'];
-type Size = typeof sizes[number];
-
-type CustomStoryProps = {
-    itemQuantity: number;
-    contentLeft: string;
-    contentRight: string;
-    segmentItemView?: 'default' | 'secondary';
-};
-
-type StorySegmentProps = ComponentProps<typeof SegmentGroup> & CustomStoryProps;
-
-const sizes = ['xs', 's', 'm', 'l'] as const;
-
-const getContentLeft = (contentLeftOption: string, size: Size) => {
-    const iconSize = size === 'xs' ? 'xs' : 's';
-    return contentLeftOption === 'icon' ? <IconMic size={iconSize} color="inherit" /> : undefined;
+type CustomStorySegmentProps = {
+    segmentItemView?: string;
+    contentItemsNumber?: number;
 };
 
-const getContentRight = (contentRightOption: string, size: Size) => {
-    const iconSize = size === 'xs' ? 'xs' : 's';
-    const counterSize = size === 'xs' ? 'xxs' : 'xs';
-
-    switch (contentRightOption) {
-        case 'icon':
-            return <IconMic size={iconSize} color="inherit" />;
-        case 'counter':
-            return <Counter size={counterSize} count={1} view="positive" />;
-        case 'text':
-            return 'Text';
-        default:
-            return undefined;
-    }
-};
+type StorySegmentProps = ComponentProps<typeof SegmentGroup> & CustomStorySegmentProps;
 
 const meta: Meta<StorySegmentProps> = {
     title: 'plasma_b2c/Segment',
@@ -57,19 +25,6 @@ const meta: Meta<StorySegmentProps> = {
     component: SegmentGroup,
     argTypes: {
         ...argTypesFromConfig(mergeConfig(segmentGroupConfig, config)),
-        ...disableProps(['filledBackground', 'view', 'selectionMode']),
-        stretch: {
-            control: {
-                type: 'boolean',
-            },
-            if: { arg: 'orientation', eq: 'horizontal' },
-        },
-        orientation: {
-            options: ['horizontal', 'vertical'],
-            control: {
-                type: 'select',
-            },
-        },
         selectionMode: {
             options: ['single', 'multiple'],
             control: {
@@ -82,91 +37,60 @@ const meta: Meta<StorySegmentProps> = {
                 type: 'select',
             },
         },
-        contentLeft: {
-            options: contentLeftOptions,
-            control: {
-                type: 'select',
-            },
-        },
-        contentRight: {
-            options: contentRightOptions,
-            control: {
-                type: 'select',
-            },
-        },
     },
 };
 
 export default meta;
 
-const StoryDefault = (props: StorySegmentProps) => {
-    const {
-        disabled,
-        itemQuantity,
-        size,
-        stretch,
-        orientation,
-
-        segmentItemView,
-        contentLeft: contentLeftOption,
-        contentRight: contentRightOption,
-        ...args
-    } = props;
-    const items = Array(itemQuantity).fill(0);
+const StoryDefault = ({ contentItemsNumber, selectionMode, segmentItemView, view, ...args }: StorySegmentProps) => {
+    const contentItems = Array(contentItemsNumber).fill(0);
 
     return (
-        <SegmentProvider>
-            <SegmentGroup stretch={stretch} disabled={disabled} size={size} orientation={orientation} {...args}>
-                {items.map((_, i) => (
-                    <SegmentItem
-                        view={segmentItemView}
-                        label={`Label ${i}`}
-                        value={`label_${i}`}
-                        size={size}
-                        key={`label_${i}`}
-                        contentLeft={getContentLeft(contentLeftOption, size)}
-                        contentRight={getContentRight(contentRightOption, size)}
-                        {...args}
-                    >
-                        {`Label${i + 1}`}
-                    </SegmentItem>
-                ))}
-            </SegmentGroup>
-        </SegmentProvider>
+        <>
+            <h3>Segment with auto width</h3>
+            <SegmentProvider>
+                <SegmentGroup view={view} selectionMode={selectionMode} {...args}>
+                    {contentItems.map((_, i) => (
+                        <SegmentItem
+                            view={segmentItemView}
+                            label={`Label ${i}`}
+                            value={`label_${i}`}
+                            key={`label_${i}`}
+                            {...args}
+                        />
+                    ))}
+                </SegmentGroup>
+            </SegmentProvider>
+
+            <h3>Segment with fixed width</h3>
+            <SegmentProvider>
+                <SegmentGroup view={view} style={{ width: '28.5rem' }} selectionMode={selectionMode} {...args}>
+                    {contentItems.map((_, i) => (
+                        <SegmentItem
+                            view={segmentItemView}
+                            label={`Label ${i}`}
+                            value={`label_${i}`}
+                            key={`label_${i}`}
+                            {...args}
+                        />
+                    ))}
+                </SegmentGroup>
+            </SegmentProvider>
+        </>
     );
 };
 
 export const Default: StoryObj<StorySegmentProps> = {
     args: {
-        itemQuantity: 8,
+        view: 'clear',
         size: 'xs',
-        segmentItemView: 'default',
+        segmentItemView: 'clear',
         selectionMode: 'single',
+        contentItemsNumber: 11,
         pilled: false,
         filledBackground: false,
-        hasBackground: false,
         disabled: false,
         stretch: false,
-        orientation: 'horizontal',
-        contentRight: 'none',
-        contentLeft: 'none',
-    },
-    argTypes: {
-        stretch: {
-            control: {
-                type: 'boolean',
-            },
-            if: { arg: 'orientation', eq: 'horizontal' },
-        },
-        size: {
-            options: sizes,
-            control: {
-                type: 'select',
-            },
-        },
-        ...disableProps(['filledBackground', 'view', 'selectionMode', 'vertical']),
-    },
-    render: (args: StorySegmentProps) => {
-        return <StoryDefault {...args} />;
     },
+    render: (args) => <StoryDefault {...args} />,
 };

package/styled-components/es/examples/plasma_b2c/components/Segment/SegmentGroup.config.js

@@ -7,29 +7,26 @@ export var config = {
   },
   variations: {
     view: {
-      clear: /*#__PURE__*/css(["", ":tranparent;", ":var(--plasma-colors-button-focused);"], segmentTokens.groupBackgroundColor, segmentTokens.outlineFocusColor),
-      filled: /*#__PURE__*/css(["", ":transparent;", ":var(--plasma-colors-button-focused);"], segmentTokens.groupBackgroundColor, segmentTokens.outlineFocusColor)
+      clear: /*#__PURE__*/css(["", ":var(--text-secondary);", ":tranparent;", ":var(--plasma-colors-button-focused);"], segmentTokens.arrowColor, segmentTokens.groupBackgroundColor, segmentTokens.outlineFocusColor),
+      filled: /*#__PURE__*/css(["", ":var(--text-secondary);", ":transparent;", ":var(--plasma-colors-button-focused);"], segmentTokens.arrowColor, segmentTokens.groupBackgroundColor, segmentTokens.outlineFocusColor)
     },
     size: {
-      xs: /*#__PURE__*/css(["", ":0.625rem;", ":1.125rem;", ":auto;", ":auto;"], segmentTokens.groupBorderRadius, segmentTokens.groupPilledBorderRadius, segmentTokens.groupWidth, segmentTokens.groupHeight),
-      s: /*#__PURE__*/css(["", ":0.75rem;", ":1.375rem;", ":auto;", ":auto;"], segmentTokens.groupBorderRadius, segmentTokens.groupPilledBorderRadius, segmentTokens.groupWidth, segmentTokens.groupHeight),
-      m: /*#__PURE__*/css(["", ":0.875rem;", ":1.625rem;", ":auto;", ":auto;"], segmentTokens.groupBorderRadius, segmentTokens.groupPilledBorderRadius, segmentTokens.groupWidth, segmentTokens.groupHeight),
-      l: /*#__PURE__*/css(["", ":1rem;", ":1.875rem;", ":auto;", ":auto;"], segmentTokens.groupBorderRadius, segmentTokens.groupPilledBorderRadius, segmentTokens.groupWidth, segmentTokens.groupHeight)
+      xs: /*#__PURE__*/css(["", ":0.5rem;", ":auto;", ":auto;"], segmentTokens.groupBorderRadius, segmentTokens.groupWidth, segmentTokens.groupHeight),
+      s: /*#__PURE__*/css(["", ":0.625rem;", ":auto;", ":auto;"], segmentTokens.groupBorderRadius, segmentTokens.groupWidth, segmentTokens.groupHeight),
+      m: /*#__PURE__*/css(["", ":0.75rem;", ":auto;", ":auto;"], segmentTokens.groupBorderRadius, segmentTokens.groupWidth, segmentTokens.groupHeight),
+      l: /*#__PURE__*/css(["", ":0.75rem;", ":auto;", ":auto;"], segmentTokens.groupBorderRadius, segmentTokens.groupWidth, segmentTokens.groupHeight)
     },
     disabled: {
       "true": /*#__PURE__*/css(["", ":0.4;"], segmentTokens.disabledOpacity)
     },
     pilled: {
-      "true": /*#__PURE__*/css([""])
+      "true": /*#__PURE__*/css(["", ":1.75rem;"], segmentTokens.groupPilledBorderRadius)
     },
     stretch: {
       "true": /*#__PURE__*/css([""])
     },
     filledBackground: {
       "true": /*#__PURE__*/css(["", ":var(--plasma-colors-surface-liquid02);"], segmentTokens.groupFilledBackgroundColor)
-    },
-    orientation: {
-      vertical: /*#__PURE__*/css([""])
     }
   }
 };

package/styled-components/es/examples/plasma_b2c/components/Segment/SegmentItem.config.js

@@ -7,21 +7,21 @@ export var config = {
   },
   variations: {
     view: {
-      clear: /*#__PURE__*/css(["", ":var(--text-secondary);", ":transparent;", ":var(--text-primary-hover);", ":transparent;", ":var(--text-tertiary);", ":var(--text-secondary);", ":var(--text-primary-hover);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--plasma-colors-button-focused);"], segmentTokens.itemColor, segmentTokens.itemBackgroundColor, segmentTokens.itemColorHover, segmentTokens.itemBackgroundColorHover, segmentTokens.itemAdditionalColor, segmentTokens.itemAdditionalColorHover, segmentTokens.itemSelectedColor, segmentTokens.itemSelectedBackgroundColor, segmentTokens.itemSelectedColorHover, segmentTokens.itemSelectedBackgroundColorHover, segmentTokens.itemSelectedAdditionalColor, segmentTokens.itemSelectedAdditionalColorHover, segmentTokens.outlineFocusColor),
-      secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":transparent;", ":var(--text-primary-hover);", ":transparent;", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-solid-card);", ":var(--text-primary-hover);", ":var(--surface-solid-card);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--plasma-colors-button-focused);"], segmentTokens.itemColor, segmentTokens.itemBackgroundColor, segmentTokens.itemColorHover, segmentTokens.itemBackgroundColorHover, segmentTokens.itemAdditionalColor, segmentTokens.itemAdditionalColorHover, segmentTokens.itemSelectedColor, segmentTokens.itemSelectedBackgroundColor, segmentTokens.itemSelectedColorHover, segmentTokens.itemSelectedBackgroundColorHover, segmentTokens.itemSelectedAdditionalColor, segmentTokens.itemSelectedAdditionalColorHover, segmentTokens.outlineFocusColor),
-      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":transparent;", ":var(--text-primary-hover);", ":transparent;", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary-hover);", ":var(--surface-solid-default);", ":var(--inverse-text-secondary);", ":var(--inverse-text-secondary);", ":var(--plasma-colors-button-focused);"], segmentTokens.itemColor, segmentTokens.itemBackgroundColor, segmentTokens.itemColorHover, segmentTokens.itemBackgroundColorHover, segmentTokens.itemAdditionalColor, segmentTokens.itemAdditionalColorHover, segmentTokens.itemSelectedColor, segmentTokens.itemSelectedBackgroundColor, segmentTokens.itemSelectedColorHover, segmentTokens.itemSelectedBackgroundColorHover, segmentTokens.itemSelectedAdditionalColor, segmentTokens.itemSelectedAdditionalColorHover, segmentTokens.outlineFocusColor)
+      clear: /*#__PURE__*/css(["", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--plasma-colors-button-focused);"], segmentTokens.itemColor, segmentTokens.itemBackgroundColor, segmentTokens.itemColorHover, segmentTokens.itemBackgroundColorHover, segmentTokens.itemSelectedColor, segmentTokens.itemSelectedBackgroundColor, segmentTokens.itemSelectedColorHover, segmentTokens.itemSelectedBackgroundColorHover, segmentTokens.outlineFocusColor),
+      secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":var(--surface-solid-card);", ":var(--text-primary);", ":var(--surface-solid-card);", ":var(--plasma-colors-button-focused);"], segmentTokens.itemColor, segmentTokens.itemBackgroundColor, segmentTokens.itemColorHover, segmentTokens.itemBackgroundColorHover, segmentTokens.itemSelectedColor, segmentTokens.itemSelectedBackgroundColor, segmentTokens.itemSelectedColorHover, segmentTokens.itemSelectedBackgroundColorHover, segmentTokens.outlineFocusColor),
+      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--plasma-colors-button-focused);"], segmentTokens.itemColor, segmentTokens.itemBackgroundColor, segmentTokens.itemColorHover, segmentTokens.itemBackgroundColorHover, segmentTokens.itemSelectedColor, segmentTokens.itemSelectedBackgroundColor, segmentTokens.itemSelectedColorHover, segmentTokens.itemSelectedBackgroundColorHover, segmentTokens.outlineFocusColor)
     },
     size: {
-      xs: /*#__PURE__*/css(["", ":0.5rem;", ":auto;", ":2rem;", ":0.5rem 0.75rem;", ":0.5rem 0.5rem;", ":0.0625rem 0.125rem;", ":0.125rem;", ":0;", ":var(--plasma-typo-body-xs-bold-font-family);", ":var(--plasma-typo-body-xs-bold-font-size);", ":var(--plasma-typo-body-xs-bold-font-style);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":var(--plasma-typo-body-xs-bold-letter-spacing);", ":var(--plasma-typo-body-xs-bold-line-height);"], segmentTokens.itemBorderRadius, segmentTokens.itemWidth, segmentTokens.itemHeight, segmentTokens.itemPadding, segmentTokens.itemPilledPadding, segmentTokens.itemContentPadding, segmentTokens.itemIconMargin, segmentTokens.itemMarginLeft, segmentTokens.fontFamily, segmentTokens.fontSize, segmentTokens.fontStyle, segmentTokens.fontWeight, segmentTokens.letterSpacing, segmentTokens.lineHeight),
-      s: /*#__PURE__*/css(["", ":0.625rem;", ":auto;", ":2.5rem;", ":0.5rem 1rem;", ":0.5rem 0.5rem;", ":0.1875rem 0.125rem;", ":0.125rem;", ":0rem;", ":var(--plasma-typo-body-s-bold-font-family);", ":var(--plasma-typo-body-s-bold-font-size);", ":var(--plasma-typo-body-s-bold-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-bold-letter-spacing);", ":var(--plasma-typo-body-s-bold-line-height);"], segmentTokens.itemBorderRadius, segmentTokens.itemWidth, segmentTokens.itemHeight, segmentTokens.itemPadding, segmentTokens.itemPilledPadding, segmentTokens.itemContentPadding, segmentTokens.itemIconMargin, segmentTokens.itemMarginLeft, segmentTokens.fontFamily, segmentTokens.fontSize, segmentTokens.fontStyle, segmentTokens.fontWeight, segmentTokens.letterSpacing, segmentTokens.lineHeight),
-      m: /*#__PURE__*/css(["", ":0.75rem;", ":auto;", ":3rem;", ":0.75rem 1.25rem;", ":0.75rem 0.75rem;", ":0.125rem;", ":0.25rem;", ":0rem;", ":var(--plasma-typo-body-m-bold-font-family);", ":var(--plasma-typo-body-m-bold-font-size);", ":var(--plasma-typo-body-m-bold-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-bold-letter-spacing);", ":var(--plasma-typo-body-m-bold-line-height);"], segmentTokens.itemBorderRadius, segmentTokens.itemWidth, segmentTokens.itemHeight, segmentTokens.itemPadding, segmentTokens.itemPilledPadding, segmentTokens.itemContentPadding, segmentTokens.itemIconMargin, segmentTokens.itemMarginLeft, segmentTokens.fontFamily, segmentTokens.fontSize, segmentTokens.fontStyle, segmentTokens.fontWeight, segmentTokens.letterSpacing, segmentTokens.lineHeight),
-      l: /*#__PURE__*/css(["", ":0.875rem;", ":auto;", ":3.5rem;", ":1rem 1.5rem;", ":1rem 1rem;", ":0.0625rem 0.125rem;", ":0.375rem;", ":0;", ":var(--plasma-typo-body-l-bold-font-family);", ":var(--plasma-typo-body-l-bold-font-size);", ":var(--plasma-typo-body-l-bold-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-bold-letter-spacing);", ":var(--plasma-typo-body-l-bold-line-height);"], segmentTokens.itemBorderRadius, segmentTokens.itemWidth, segmentTokens.itemHeight, segmentTokens.itemPadding, segmentTokens.itemPilledPadding, segmentTokens.itemContentPadding, segmentTokens.itemIconMargin, segmentTokens.itemMarginLeft, segmentTokens.fontFamily, segmentTokens.fontSize, segmentTokens.fontStyle, segmentTokens.fontWeight, segmentTokens.letterSpacing, segmentTokens.lineHeight)
+      xs: /*#__PURE__*/css(["", ":0.375rem;", ":auto;", ":1.5rem;", ":0 0.625rem;", ":0.125rem;", ":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);"], segmentTokens.itemBorderRadius, segmentTokens.itemWidth, segmentTokens.itemHeight, segmentTokens.itemPadding, segmentTokens.itemMarginLeft, segmentTokens.fontFamily, segmentTokens.fontSize, segmentTokens.fontStyle, segmentTokens.fontWeight, segmentTokens.letterSpacing, segmentTokens.lineHeight),
+      s: /*#__PURE__*/css(["", ":0.5rem;", ":auto;", ":2rem;", ":0 0.75rem;", ":0.125rem;", ":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);"], segmentTokens.itemBorderRadius, segmentTokens.itemWidth, segmentTokens.itemHeight, segmentTokens.itemPadding, segmentTokens.itemMarginLeft, segmentTokens.fontFamily, segmentTokens.fontSize, segmentTokens.fontStyle, segmentTokens.fontWeight, segmentTokens.letterSpacing, segmentTokens.lineHeight),
+      m: /*#__PURE__*/css(["", ":0.625rem;", ":auto;", ":2.5rem;", ":0 0.875rem;", ":0.125rem;", ":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);"], segmentTokens.itemBorderRadius, segmentTokens.itemWidth, segmentTokens.itemHeight, segmentTokens.itemPadding, segmentTokens.itemMarginLeft, segmentTokens.fontFamily, segmentTokens.fontSize, segmentTokens.fontStyle, segmentTokens.fontWeight, segmentTokens.letterSpacing, segmentTokens.lineHeight),
+      l: /*#__PURE__*/css(["", ":0.75rem;", ":auto;", ":3rem;", ":0 1rem;", ":0.125rem;", ":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);"], segmentTokens.itemBorderRadius, segmentTokens.itemWidth, segmentTokens.itemHeight, segmentTokens.itemPadding, segmentTokens.itemMarginLeft, segmentTokens.fontFamily, segmentTokens.fontSize, segmentTokens.fontStyle, segmentTokens.fontWeight, segmentTokens.letterSpacing, segmentTokens.lineHeight)
     },
     disabled: {
       "true": /*#__PURE__*/css(["", ":0.4;"], segmentTokens.disabledOpacity)
     },
     pilled: {
-      "true": /*#__PURE__*/css(["", ":1.75rem;"], segmentTokens.itemPilledBorderRadius)
+      "true": /*#__PURE__*/css(["", ":1.5rem;"], segmentTokens.itemPilledBorderRadius)
     }
   }
 };

package/styled-components/es/examples/plasma_b2c/components/TextArea/TextArea.config.js

@@ -7,19 +7,28 @@ export var config = {
   },
   variations: {
     size: {
-      xs: /*#__PURE__*/css(["", ":100%;", ":7.312rem;", ":0.625rem;", ":0.5rem;", ":0.5rem 0.5rem 0 0;", ":0.563rem;", ":0.625rem;", ":2.125rem;", ":0.563rem;", ":0.625rem;", ":0.5rem;", ":0.625rem;", ":0.563rem;", ":0.625rem;", ":0rem;", ":0.563rem;", ":0.5rem;", ":1.25rem;", ":0.375rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);", ":0rem;", ":0rem;", ":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);", ":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);"], textAreaTokens.inputWidth, textAreaTokens.inputHeight, textAreaTokens.inputMinHeight, textAreaTokens.borderRadius, textAreaTokens.borderRadiusWithHelpers, textAreaTokens.inputPaddingTop, textAreaTokens.inputPaddingRight, textAreaTokens.inputPaddingRightWithRightContent, textAreaTokens.inputPaddingBottom, textAreaTokens.inputPaddingLeft, textAreaTokens.helpersPaddingTop, textAreaTokens.helpersPaddingRight, textAreaTokens.helpersPaddingBottom, textAreaTokens.helpersPaddingLeft, textAreaTokens.helpersOffset, textAreaTokens.rightContentTop, textAreaTokens.rightContentRight, textAreaTokens.rightContentHeight, textAreaTokens.labelMarginBottom, textAreaTokens.labelInnerFontFamily, textAreaTokens.labelInnerFontSize, textAreaTokens.labelInnerFontStyle, textAreaTokens.labelInnerFontWeight, textAreaTokens.labelInnerLetterSpacing, textAreaTokens.labelInnerLineHeight, textAreaTokens.labelInnerTop, textAreaTokens.labelInnerMarginBottom, textAreaTokens.inputFontFamily, textAreaTokens.inputFontSize, textAreaTokens.inputFontStyle, textAreaTokens.inputFontWeight, textAreaTokens.inputLetterSpacing, textAreaTokens.inputLineHeight, textAreaTokens.helpersFontFamily, textAreaTokens.helpersFontSize, textAreaTokens.helpersFontStyle, textAreaTokens.helpersFontWeight, textAreaTokens.helpersLetterSpacing, textAreaTokens.helpersLineHeight),
-      s: /*#__PURE__*/css(["", ":100%;", ":7.187rem;", ":0.625rem;", ":0.625rem;", ":0.625rem 0.625rem 0 0;", ":0.688rem;", ":0.875rem;", ":3.125rem;", ":0.75rem;", ":0.875rem;", ":0.75rem;", ":0.875rem;", ":0.75rem;", ":0.875rem;", ":0rem;", ":0.688rem;", ":0.75rem;", ":1.25rem;", ":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.375rem;", ":0.125rem;", ":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);", ":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.375rem auto auto -0.675rem;", ":0 0 auto auto;", ":0.25rem -0.625rem auto auto;"], textAreaTokens.inputWidth, textAreaTokens.inputHeight, textAreaTokens.inputMinHeight, textAreaTokens.borderRadius, textAreaTokens.borderRadiusWithHelpers, textAreaTokens.inputPaddingTop, textAreaTokens.inputPaddingRight, textAreaTokens.inputPaddingRightWithRightContent, textAreaTokens.inputPaddingBottom, textAreaTokens.inputPaddingLeft, textAreaTokens.helpersPaddingTop, textAreaTokens.helpersPaddingRight, textAreaTokens.helpersPaddingBottom, textAreaTokens.helpersPaddingLeft, textAreaTokens.helpersOffset, textAreaTokens.rightContentTop, textAreaTokens.rightContentRight, textAreaTokens.rightContentHeight, textAreaTokens.labelMarginBottom, textAreaTokens.labelInnerFontFamily, textAreaTokens.labelInnerFontSize, textAreaTokens.labelInnerFontStyle, textAreaTokens.labelInnerFontWeight, textAreaTokens.labelInnerLetterSpacing, textAreaTokens.labelInnerLineHeight, textAreaTokens.labelInnerTop, textAreaTokens.labelInnerMarginBottom, textAreaTokens.inputFontFamily, textAreaTokens.inputFontSize, textAreaTokens.inputFontStyle, textAreaTokens.inputFontWeight, textAreaTokens.inputLetterSpacing, textAreaTokens.inputLineHeight, textAreaTokens.helpersFontFamily, textAreaTokens.helpersFontSize, textAreaTokens.helpersFontStyle, textAreaTokens.helpersFontWeight, textAreaTokens.helpersLetterSpacing, textAreaTokens.helpersLineHeight, textAreaTokens.indicatorSizeInner, textAreaTokens.indicatorSizeOuter, textAreaTokens.indicatorLabelPlacementInner, textAreaTokens.indicatorLabelPlacementOuter, textAreaTokens.indicatorLabelPlacementInnerRight, textAreaTokens.indicatorLabelPlacementOuterRight),
-      m: /*#__PURE__*/css(["", ":100%;", ":7rem;", ":1.125rem;", ":0.75rem;", ":0.75rem 0.75rem 0 0;", ":0.875rem;", ":1rem;", ":3.375rem;", ":0.75rem;", ":1rem;", ":0.75rem;", ":1rem;", ":0.75rem;", ":1rem;", ":0rem;", ":0.875rem;", ":0.875rem;", ":1.25rem;", ":0.625rem;", ":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.125rem;", ":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);", ":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.5rem;", ":0.375rem;", ":0 0 0 0;", ":0.4375rem auto auto -0.675rem;", ":0 0 auto auto;", ":0.1875rem -0.625rem auto auto;"], textAreaTokens.inputWidth, textAreaTokens.inputHeight, textAreaTokens.inputMinHeight, textAreaTokens.borderRadius, textAreaTokens.borderRadiusWithHelpers, textAreaTokens.inputPaddingTop, textAreaTokens.inputPaddingRight, textAreaTokens.inputPaddingRightWithRightContent, textAreaTokens.inputPaddingBottom, textAreaTokens.inputPaddingLeft, textAreaTokens.helpersPaddingTop, textAreaTokens.helpersPaddingRight, textAreaTokens.helpersPaddingBottom, textAreaTokens.helpersPaddingLeft, textAreaTokens.helpersOffset, textAreaTokens.rightContentTop, textAreaTokens.rightContentRight, textAreaTokens.rightContentHeight, textAreaTokens.labelMarginBottom, textAreaTokens.labelInnerFontFamily, textAreaTokens.labelInnerFontSize, textAreaTokens.labelInnerFontStyle, textAreaTokens.labelInnerFontWeight, textAreaTokens.labelInnerLetterSpacing, textAreaTokens.labelInnerLineHeight, textAreaTokens.labelInnerTop, textAreaTokens.labelInnerMarginBottom, textAreaTokens.inputFontFamily, textAreaTokens.inputFontSize, textAreaTokens.inputFontStyle, textAreaTokens.inputFontWeight, textAreaTokens.inputLetterSpacing, textAreaTokens.inputLineHeight, textAreaTokens.helpersFontFamily, textAreaTokens.helpersFontSize, textAreaTokens.helpersFontStyle, textAreaTokens.helpersFontWeight, textAreaTokens.helpersLetterSpacing, textAreaTokens.helpersLineHeight, textAreaTokens.indicatorSizeInner, textAreaTokens.indicatorSizeOuter, textAreaTokens.indicatorLabelPlacementInner, textAreaTokens.indicatorLabelPlacementOuter, textAreaTokens.indicatorLabelPlacementInnerRight, textAreaTokens.indicatorLabelPlacementOuterRight),
-      l: /*#__PURE__*/css(["", ":100%;", ":6.812rem;", ":1.625rem;", ":0.875rem;", ":0.875rem 0.875rem 0 0;", ":1.063rem;", ":1.125rem;", ":3.625rem;", ":0.75rem;", ":1.125rem;", ":0.75rem;", ":1.125rem;", ":0.75rem;", ":1.125rem;", ":0rem;", ":1.063rem;", ":1rem;", ":1.25rem;", ":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.5625rem;", ":0.125rem;", ":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);", ":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.5rem;", ":0.375rem;", ":0 0 0 0;", ":0.5rem auto auto -0.675rem;", ":0 0 auto auto;", ":0.25rem -0.625rem auto auto;"], textAreaTokens.inputWidth, textAreaTokens.inputHeight, textAreaTokens.inputMinHeight, textAreaTokens.borderRadius, textAreaTokens.borderRadiusWithHelpers, textAreaTokens.inputPaddingTop, textAreaTokens.inputPaddingRight, textAreaTokens.inputPaddingRightWithRightContent, textAreaTokens.inputPaddingBottom, textAreaTokens.inputPaddingLeft, textAreaTokens.helpersPaddingTop, textAreaTokens.helpersPaddingRight, textAreaTokens.helpersPaddingBottom, textAreaTokens.helpersPaddingLeft, textAreaTokens.helpersOffset, textAreaTokens.rightContentTop, textAreaTokens.rightContentRight, textAreaTokens.rightContentHeight, textAreaTokens.labelMarginBottom, textAreaTokens.labelInnerFontFamily, textAreaTokens.labelInnerFontSize, textAreaTokens.labelInnerFontStyle, textAreaTokens.labelInnerFontWeight, textAreaTokens.labelInnerLetterSpacing, textAreaTokens.labelInnerLineHeight, textAreaTokens.labelInnerTop, textAreaTokens.labelInnerMarginBottom, textAreaTokens.inputFontFamily, textAreaTokens.inputFontSize, textAreaTokens.inputFontStyle, textAreaTokens.inputFontWeight, textAreaTokens.inputLetterSpacing, textAreaTokens.inputLineHeight, textAreaTokens.helpersFontFamily, textAreaTokens.helpersFontSize, textAreaTokens.helpersFontStyle, textAreaTokens.helpersFontWeight, textAreaTokens.helpersLetterSpacing, textAreaTokens.helpersLineHeight, textAreaTokens.indicatorSizeInner, textAreaTokens.indicatorSizeOuter, textAreaTokens.indicatorLabelPlacementInner, textAreaTokens.indicatorLabelPlacementOuter, textAreaTokens.indicatorLabelPlacementInnerRight, textAreaTokens.indicatorLabelPlacementOuterRight)
+      xs: /*#__PURE__*/css(["", ":100%;", ":7.312rem;", ":0.625rem;", ":0.5rem;", ":0.5rem 0.5rem 0 0;", ":0.563rem;", ":0.625rem;", ":2.125rem;", ":0.563rem;", ":0.625rem;", ":0.5rem;", ":0.625rem;", ":0.563rem;", ":0.625rem;", ":0rem;", ":0.563rem;", ":0.5rem;", ":1.25rem;", ":0.375rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);", ":0rem;", ":0rem;", ":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);", ":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.675rem auto auto;", ":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);"], textAreaTokens.inputWidth, textAreaTokens.inputHeight, textAreaTokens.inputMinHeight, textAreaTokens.borderRadius, textAreaTokens.borderRadiusWithHelpers, textAreaTokens.inputPaddingTop, textAreaTokens.inputPaddingRight, textAreaTokens.inputPaddingRightWithRightContent, textAreaTokens.inputPaddingBottom, textAreaTokens.inputPaddingLeft, textAreaTokens.helpersPaddingTop, textAreaTokens.helpersPaddingRight, textAreaTokens.helpersPaddingBottom, textAreaTokens.helpersPaddingLeft, textAreaTokens.helpersOffset, textAreaTokens.rightContentTop, textAreaTokens.rightContentRight, textAreaTokens.rightContentHeight, textAreaTokens.labelMarginBottom, textAreaTokens.labelInnerFontFamily, textAreaTokens.labelInnerFontSize, textAreaTokens.labelInnerFontStyle, textAreaTokens.labelInnerFontWeight, textAreaTokens.labelInnerLetterSpacing, textAreaTokens.labelInnerLineHeight, textAreaTokens.labelInnerTop, textAreaTokens.labelInnerMarginBottom, textAreaTokens.inputFontFamily, textAreaTokens.inputFontSize, textAreaTokens.inputFontStyle, textAreaTokens.inputFontWeight, textAreaTokens.inputLetterSpacing, textAreaTokens.inputLineHeight, textAreaTokens.helpersFontFamily, textAreaTokens.helpersFontSize, textAreaTokens.helpersFontStyle, textAreaTokens.helpersFontWeight, textAreaTokens.helpersLetterSpacing, textAreaTokens.helpersLineHeight, textAreaTokens.indicatorSizeInner, textAreaTokens.indicatorSizeOuter, textAreaTokens.indicatorLabelPlacementInner, textAreaTokens.indicatorLabelPlacementOuter, textAreaTokens.indicatorLabelPlacementInnerRight, textAreaTokens.indicatorLabelPlacementOuterRight, textAreaTokens.hintMargin, textAreaTokens.hintInnerLabelPlacementOffset, textAreaTokens.titleCaptionInnerLabelOffset, textAreaTokens.titleCaptionFontFamily, textAreaTokens.titleCaptionFontSize, textAreaTokens.titleCaptionFontStyle, textAreaTokens.titleCaptionFontWeight, textAreaTokens.titleCaptionLetterSpacing, textAreaTokens.titleCaptionLineHeight),
+      s: /*#__PURE__*/css(["", ":100%;", ":7.187rem;", ":0.625rem;", ":0.625rem;", ":0.625rem 0.625rem 0 0;", ":0.688rem;", ":0.875rem;", ":3.125rem;", ":0.75rem;", ":0.875rem;", ":0.75rem;", ":0.875rem;", ":0.75rem;", ":0.875rem;", ":0rem;", ":0.688rem;", ":0.75rem;", ":1.25rem;", ":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.375rem;", ":0.125rem;", ":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);", ":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.375rem auto auto -0.675rem;", ":0 0 auto auto;", ":0.25rem -0.625rem auto auto;", ":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);"], textAreaTokens.inputWidth, textAreaTokens.inputHeight, textAreaTokens.inputMinHeight, textAreaTokens.borderRadius, textAreaTokens.borderRadiusWithHelpers, textAreaTokens.inputPaddingTop, textAreaTokens.inputPaddingRight, textAreaTokens.inputPaddingRightWithRightContent, textAreaTokens.inputPaddingBottom, textAreaTokens.inputPaddingLeft, textAreaTokens.helpersPaddingTop, textAreaTokens.helpersPaddingRight, textAreaTokens.helpersPaddingBottom, textAreaTokens.helpersPaddingLeft, textAreaTokens.helpersOffset, textAreaTokens.rightContentTop, textAreaTokens.rightContentRight, textAreaTokens.rightContentHeight, textAreaTokens.labelMarginBottom, textAreaTokens.labelInnerFontFamily, textAreaTokens.labelInnerFontSize, textAreaTokens.labelInnerFontStyle, textAreaTokens.labelInnerFontWeight, textAreaTokens.labelInnerLetterSpacing, textAreaTokens.labelInnerLineHeight, textAreaTokens.labelInnerTop, textAreaTokens.labelInnerMarginBottom, textAreaTokens.inputFontFamily, textAreaTokens.inputFontSize, textAreaTokens.inputFontStyle, textAreaTokens.inputFontWeight, textAreaTokens.inputLetterSpacing, textAreaTokens.inputLineHeight, textAreaTokens.helpersFontFamily, textAreaTokens.helpersFontSize, textAreaTokens.helpersFontStyle, textAreaTokens.helpersFontWeight, textAreaTokens.helpersLetterSpacing, textAreaTokens.helpersLineHeight, textAreaTokens.indicatorSizeInner, textAreaTokens.indicatorSizeOuter, textAreaTokens.indicatorLabelPlacementInner, textAreaTokens.indicatorLabelPlacementOuter, textAreaTokens.indicatorLabelPlacementInnerRight, textAreaTokens.indicatorLabelPlacementOuterRight, textAreaTokens.hintMargin, textAreaTokens.hintInnerLabelPlacementOffset, textAreaTokens.titleCaptionInnerLabelOffset, textAreaTokens.titleCaptionFontFamily, textAreaTokens.titleCaptionFontSize, textAreaTokens.titleCaptionFontStyle, textAreaTokens.titleCaptionFontWeight, textAreaTokens.titleCaptionLetterSpacing, textAreaTokens.titleCaptionLineHeight),
+      m: /*#__PURE__*/css(["", ":100%;", ":7rem;", ":1.125rem;", ":0.75rem;", ":0.75rem 0.75rem 0 0;", ":0.875rem;", ":1rem;", ":3.375rem;", ":0.75rem;", ":1rem;", ":0.75rem;", ":1rem;", ":0.75rem;", ":1rem;", ":0rem;", ":0.875rem;", ":0.875rem;", ":1.25rem;", ":0.625rem;", ":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.125rem;", ":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);", ":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.5rem;", ":0.375rem;", ":0 0 0 0;", ":0.4375rem auto auto -0.675rem;", ":0 0 auto auto;", ":0.1875rem -0.625rem auto auto;", ":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);"], textAreaTokens.inputWidth, textAreaTokens.inputHeight, textAreaTokens.inputMinHeight, textAreaTokens.borderRadius, textAreaTokens.borderRadiusWithHelpers, textAreaTokens.inputPaddingTop, textAreaTokens.inputPaddingRight, textAreaTokens.inputPaddingRightWithRightContent, textAreaTokens.inputPaddingBottom, textAreaTokens.inputPaddingLeft, textAreaTokens.helpersPaddingTop, textAreaTokens.helpersPaddingRight, textAreaTokens.helpersPaddingBottom, textAreaTokens.helpersPaddingLeft, textAreaTokens.helpersOffset, textAreaTokens.rightContentTop, textAreaTokens.rightContentRight, textAreaTokens.rightContentHeight, textAreaTokens.labelMarginBottom, textAreaTokens.labelInnerFontFamily, textAreaTokens.labelInnerFontSize, textAreaTokens.labelInnerFontStyle, textAreaTokens.labelInnerFontWeight, textAreaTokens.labelInnerLetterSpacing, textAreaTokens.labelInnerLineHeight, textAreaTokens.labelInnerTop, textAreaTokens.labelInnerMarginBottom, textAreaTokens.inputFontFamily, textAreaTokens.inputFontSize, textAreaTokens.inputFontStyle, textAreaTokens.inputFontWeight, textAreaTokens.inputLetterSpacing, textAreaTokens.inputLineHeight, textAreaTokens.helpersFontFamily, textAreaTokens.helpersFontSize, textAreaTokens.helpersFontStyle, textAreaTokens.helpersFontWeight, textAreaTokens.helpersLetterSpacing, textAreaTokens.helpersLineHeight, textAreaTokens.indicatorSizeInner, textAreaTokens.indicatorSizeOuter, textAreaTokens.indicatorLabelPlacementInner, textAreaTokens.indicatorLabelPlacementOuter, textAreaTokens.indicatorLabelPlacementInnerRight, textAreaTokens.indicatorLabelPlacementOuterRight, textAreaTokens.hintMargin, textAreaTokens.hintInnerLabelPlacementOffset, textAreaTokens.titleCaptionInnerLabelOffset, textAreaTokens.titleCaptionFontFamily, textAreaTokens.titleCaptionFontSize, textAreaTokens.titleCaptionFontStyle, textAreaTokens.titleCaptionFontWeight, textAreaTokens.titleCaptionLetterSpacing, textAreaTokens.titleCaptionLineHeight),
+      l: /*#__PURE__*/css(["", ":100%;", ":6.812rem;", ":1.625rem;", ":0.875rem;", ":0.875rem 0.875rem 0 0;", ":1.063rem;", ":1.125rem;", ":3.625rem;", ":0.75rem;", ":1.125rem;", ":0.75rem;", ":1.125rem;", ":0.75rem;", ":1.125rem;", ":0rem;", ":1.063rem;", ":1rem;", ":1.25rem;", ":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.5625rem;", ":0.125rem;", ":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);", ":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.5rem;", ":0.375rem;", ":0 0 0 0;", ":0.5rem auto auto -0.675rem;", ":0 0 auto auto;", ":0.25rem -0.625rem auto auto;", ":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);"], textAreaTokens.inputWidth, textAreaTokens.inputHeight, textAreaTokens.inputMinHeight, textAreaTokens.borderRadius, textAreaTokens.borderRadiusWithHelpers, textAreaTokens.inputPaddingTop, textAreaTokens.inputPaddingRight, textAreaTokens.inputPaddingRightWithRightContent, textAreaTokens.inputPaddingBottom, textAreaTokens.inputPaddingLeft, textAreaTokens.helpersPaddingTop, textAreaTokens.helpersPaddingRight, textAreaTokens.helpersPaddingBottom, textAreaTokens.helpersPaddingLeft, textAreaTokens.helpersOffset, textAreaTokens.rightContentTop, textAreaTokens.rightContentRight, textAreaTokens.rightContentHeight, textAreaTokens.labelMarginBottom, textAreaTokens.labelInnerFontFamily, textAreaTokens.labelInnerFontSize, textAreaTokens.labelInnerFontStyle, textAreaTokens.labelInnerFontWeight, textAreaTokens.labelInnerLetterSpacing, textAreaTokens.labelInnerLineHeight, textAreaTokens.labelInnerTop, textAreaTokens.labelInnerMarginBottom, textAreaTokens.inputFontFamily, textAreaTokens.inputFontSize, textAreaTokens.inputFontStyle, textAreaTokens.inputFontWeight, textAreaTokens.inputLetterSpacing, textAreaTokens.inputLineHeight, textAreaTokens.helpersFontFamily, textAreaTokens.helpersFontSize, textAreaTokens.helpersFontStyle, textAreaTokens.helpersFontWeight, textAreaTokens.helpersLetterSpacing, textAreaTokens.helpersLineHeight, textAreaTokens.indicatorSizeInner, textAreaTokens.indicatorSizeOuter, textAreaTokens.indicatorLabelPlacementInner, textAreaTokens.indicatorLabelPlacementOuter, textAreaTokens.indicatorLabelPlacementInnerRight, textAreaTokens.indicatorLabelPlacementOuterRight, textAreaTokens.hintMargin, textAreaTokens.hintInnerLabelPlacementOffset, textAreaTokens.titleCaptionInnerLabelOffset, textAreaTokens.titleCaptionFontFamily, textAreaTokens.titleCaptionFontSize, textAreaTokens.titleCaptionFontStyle, textAreaTokens.titleCaptionFontWeight, textAreaTokens.titleCaptionLetterSpacing, textAreaTokens.titleCaptionLineHeight)
     },
     view: {
-      "default": /*#__PURE__*/css(["", ":var(--surface-transparent-primary);", ":var(--surface-transparent-primary-hover);", ":var(--surface-transparent-primary-active);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-primary-hover);", ":var(--surface-transparent-primary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--surface-negative);", ":var(--text-tertiary);"], textAreaTokens.inputBackgroundColor, textAreaTokens.inputBackgroundColorHover, textAreaTokens.inputBackgroundColorActive, textAreaTokens.inputBackgroundColorFocus, textAreaTokens.helpersBackgroundColor, textAreaTokens.helpersBackgroundColorHover, textAreaTokens.helpersBackgroundColorActive, textAreaTokens.helpersBackgroundColorFocus, textAreaTokens.inputColor, textAreaTokens.inputColorFocus, textAreaTokens.inputCaretColor, textAreaTokens.placeholderColor, textAreaTokens.placeholderColorFocus, textAreaTokens.leftHelperColor, textAreaTokens.rightHelperColor, textAreaTokens.indicatorColor, textAreaTokens.optionalColor),
-      positive: /*#__PURE__*/css(["", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-hover);", ":var(--surface-transparent-positive-active);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-hover);", ":var(--surface-transparent-positive-active);", ":var(--surface-transparent-positive);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--surface-negative);", ":var(--text-tertiary);"], textAreaTokens.inputBackgroundColor, textAreaTokens.inputBackgroundColorHover, textAreaTokens.inputBackgroundColorActive, textAreaTokens.inputBackgroundColorFocus, textAreaTokens.helpersBackgroundColor, textAreaTokens.helpersBackgroundColorHover, textAreaTokens.helpersBackgroundColorActive, textAreaTokens.helpersBackgroundColorFocus, textAreaTokens.inputColor, textAreaTokens.inputColorFocus, textAreaTokens.inputCaretColor, textAreaTokens.placeholderColor, textAreaTokens.placeholderColorFocus, textAreaTokens.leftHelperColor, textAreaTokens.rightHelperColor, textAreaTokens.indicatorColor, textAreaTokens.optionalColor),
-      warning: /*#__PURE__*/css(["", ":var(--surface-transparent-warning);", ":var(--surface-transparent-warning-hover);", ":var(--surface-transparent-warning-active);", ":var(--surface-transparent-warning);", ":var(--surface-transparent-warning);", ":var(--surface-transparent-warning-hover);", ":var(--surface-transparent-warning-active);", ":var(--surface-transparent-warning);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-warning);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-warning);", ":var(--text-secondary);", ":var(--surface-negative);", ":var(--text-tertiary);"], textAreaTokens.inputBackgroundColor, textAreaTokens.inputBackgroundColorHover, textAreaTokens.inputBackgroundColorActive, textAreaTokens.inputBackgroundColorFocus, textAreaTokens.helpersBackgroundColor, textAreaTokens.helpersBackgroundColorHover, textAreaTokens.helpersBackgroundColorActive, textAreaTokens.helpersBackgroundColorFocus, textAreaTokens.inputColor, textAreaTokens.inputColorFocus, textAreaTokens.inputCaretColor, textAreaTokens.placeholderColor, textAreaTokens.placeholderColorFocus, textAreaTokens.leftHelperColor, textAreaTokens.rightHelperColor, textAreaTokens.indicatorColor, textAreaTokens.optionalColor),
-      negative: /*#__PURE__*/css(["", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-hover);", ":var(--surface-transparent-negative-active);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-hover);", ":var(--surface-transparent-negative-active);", ":var(--surface-transparent-negative);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--surface-negative);", ":var(--text-tertiary);"], textAreaTokens.inputBackgroundColor, textAreaTokens.inputBackgroundColorHover, textAreaTokens.inputBackgroundColorActive, textAreaTokens.inputBackgroundColorFocus, textAreaTokens.helpersBackgroundColor, textAreaTokens.helpersBackgroundColorHover, textAreaTokens.helpersBackgroundColorActive, textAreaTokens.helpersBackgroundColorFocus, textAreaTokens.inputColor, textAreaTokens.inputColorFocus, textAreaTokens.inputCaretColor, textAreaTokens.placeholderColor, textAreaTokens.placeholderColorFocus, textAreaTokens.leftHelperColor, textAreaTokens.rightHelperColor, textAreaTokens.indicatorColor, textAreaTokens.optionalColor)
+      "default": /*#__PURE__*/css(["", ":var(--surface-transparent-primary);", ":var(--surface-transparent-primary-hover);", ":var(--surface-transparent-primary-active);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-primary-hover);", ":var(--surface-transparent-primary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--surface-negative);", ":var(--text-tertiary);", ":var(--text-secondary);", ":var(--text-secondary);"], textAreaTokens.inputBackgroundColor, textAreaTokens.inputBackgroundColorHover, textAreaTokens.inputBackgroundColorActive, textAreaTokens.inputBackgroundColorFocus, textAreaTokens.helpersBackgroundColor, textAreaTokens.helpersBackgroundColorHover, textAreaTokens.helpersBackgroundColorActive, textAreaTokens.helpersBackgroundColorFocus, textAreaTokens.inputColor, textAreaTokens.inputColorFocus, textAreaTokens.inputCaretColor, textAreaTokens.placeholderColor, textAreaTokens.placeholderColorFocus, textAreaTokens.leftHelperColor, textAreaTokens.rightHelperColor, textAreaTokens.indicatorColor, textAreaTokens.optionalColor, textAreaTokens.titleCaptionColor, textAreaTokens.hintIconColor),
+      positive: /*#__PURE__*/css(["", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-hover);", ":var(--surface-transparent-positive-active);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-hover);", ":var(--surface-transparent-positive-active);", ":var(--surface-transparent-positive);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--surface-negative);", ":var(--text-tertiary);", ":var(--text-secondary);", ":var(--text-secondary);"], textAreaTokens.inputBackgroundColor, textAreaTokens.inputBackgroundColorHover, textAreaTokens.inputBackgroundColorActive, textAreaTokens.inputBackgroundColorFocus, textAreaTokens.helpersBackgroundColor, textAreaTokens.helpersBackgroundColorHover, textAreaTokens.helpersBackgroundColorActive, textAreaTokens.helpersBackgroundColorFocus, textAreaTokens.inputColor, textAreaTokens.inputColorFocus, textAreaTokens.inputCaretColor, textAreaTokens.placeholderColor, textAreaTokens.placeholderColorFocus, textAreaTokens.leftHelperColor, textAreaTokens.rightHelperColor, textAreaTokens.indicatorColor, textAreaTokens.optionalColor, textAreaTokens.titleCaptionColor, textAreaTokens.hintIconColor),
+      warning: /*#__PURE__*/css(["", ":var(--surface-transparent-warning);", ":var(--surface-transparent-warning-hover);", ":var(--surface-transparent-warning-active);", ":var(--surface-transparent-warning);", ":var(--surface-transparent-warning);", ":var(--surface-transparent-warning-hover);", ":var(--surface-transparent-warning-active);", ":var(--surface-transparent-warning);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-warning);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-warning);", ":var(--text-secondary);", ":var(--surface-negative);", ":var(--text-tertiary);", ":var(--text-secondary);", ":var(--text-secondary);"], textAreaTokens.inputBackgroundColor, textAreaTokens.inputBackgroundColorHover, textAreaTokens.inputBackgroundColorActive, textAreaTokens.inputBackgroundColorFocus, textAreaTokens.helpersBackgroundColor, textAreaTokens.helpersBackgroundColorHover, textAreaTokens.helpersBackgroundColorActive, textAreaTokens.helpersBackgroundColorFocus, textAreaTokens.inputColor, textAreaTokens.inputColorFocus, textAreaTokens.inputCaretColor, textAreaTokens.placeholderColor, textAreaTokens.placeholderColorFocus, textAreaTokens.leftHelperColor, textAreaTokens.rightHelperColor, textAreaTokens.indicatorColor, textAreaTokens.optionalColor, textAreaTokens.titleCaptionColor, textAreaTokens.hintIconColor),
+      negative: /*#__PURE__*/css(["", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-hover);", ":var(--surface-transparent-negative-active);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-hover);", ":var(--surface-transparent-negative-active);", ":var(--surface-transparent-negative);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--surface-negative);", ":var(--text-tertiary);", ":var(--text-secondary);", ":var(--text-secondary);"], textAreaTokens.inputBackgroundColor, textAreaTokens.inputBackgroundColorHover, textAreaTokens.inputBackgroundColorActive, textAreaTokens.inputBackgroundColorFocus, textAreaTokens.helpersBackgroundColor, textAreaTokens.helpersBackgroundColorHover, textAreaTokens.helpersBackgroundColorActive, textAreaTokens.helpersBackgroundColorFocus, textAreaTokens.inputColor, textAreaTokens.inputColorFocus, textAreaTokens.inputCaretColor, textAreaTokens.placeholderColor, textAreaTokens.placeholderColorFocus, textAreaTokens.leftHelperColor, textAreaTokens.rightHelperColor, textAreaTokens.indicatorColor, textAreaTokens.optionalColor, textAreaTokens.titleCaptionColor, textAreaTokens.hintIconColor)
+    },
+    hintView: {
+      "default": /*#__PURE__*/css(["", ":var(--surface-solid-card);", ":var(--shadow-down-hard-m);", ":var(--text-primary);"], textAreaTokens.tooltipBackgroundColor, textAreaTokens.tooltipBoxShadow, textAreaTokens.tooltipColor),
+      onDark: /*#__PURE__*/css(["", ":var(--on-dark-surface-solid-card);", ":var(--shadow-down-hard-m);", ":var(--on-dark-text-primary);"], textAreaTokens.tooltipBackgroundColor, textAreaTokens.tooltipBoxShadow, textAreaTokens.tooltipColor),
+      onLight: /*#__PURE__*/css(["", ":var(--on-light-surface-solid-card);", ":var(--shadow-down-hard-m);", ":var(--on-light-text-primary);"], textAreaTokens.tooltipBackgroundColor, textAreaTokens.tooltipBoxShadow, textAreaTokens.tooltipColor)
+    },
+    hintSize: {
+      m: /*#__PURE__*/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);"], textAreaTokens.tooltipPaddingTop, textAreaTokens.tooltipPaddingRight, textAreaTokens.tooltipPaddingBottom, textAreaTokens.tooltipPaddingLeft, textAreaTokens.tooltipMinHeight, textAreaTokens.tooltipBorderRadius, textAreaTokens.tooltipTextFontFamily, textAreaTokens.tooltipTextFontSize, textAreaTokens.tooltipTextFontStyle, textAreaTokens.tooltipTextFontWeight, textAreaTokens.tooltipTextFontLetterSpacing, textAreaTokens.tooltipTextFontLineHeight, textAreaTokens.tooltipContentLeftMargin, textAreaTokens.tooltipArrowMaskWidth, textAreaTokens.tooltipArrowMaskHeight, textAreaTokens.tooltipArrowMaskImage, textAreaTokens.tooltipArrowHeight, textAreaTokens.tooltipArrowEdgeMargin, textAreaTokens.tooltipArrowBackground),
+      s: /*#__PURE__*/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);"], textAreaTokens.tooltipPaddingTop, textAreaTokens.tooltipPaddingRight, textAreaTokens.tooltipPaddingBottom, textAreaTokens.tooltipPaddingLeft, textAreaTokens.tooltipMinHeight, textAreaTokens.tooltipBorderRadius, textAreaTokens.tooltipTextFontFamily, textAreaTokens.tooltipTextFontSize, textAreaTokens.tooltipTextFontStyle, textAreaTokens.tooltipTextFontWeight, textAreaTokens.tooltipTextFontLetterSpacing, textAreaTokens.tooltipTextFontLineHeight, textAreaTokens.tooltipContentLeftMargin, textAreaTokens.tooltipArrowMaskWidth, textAreaTokens.tooltipArrowMaskHeight, textAreaTokens.tooltipArrowMaskImage, textAreaTokens.tooltipArrowHeight, textAreaTokens.tooltipArrowEdgeMargin, textAreaTokens.tooltipArrowBackground)
     },
     disabled: {
-      "true": /*#__PURE__*/css(["", ":0.4;", ":var(--text-secondary);"], textAreaTokens.disabledOpacity, textAreaTokens.inputColorDisabled)
+      "true": /*#__PURE__*/css(["", ":0.4;", ":var(--text-secondary);", ":var(--text-secondary);"], textAreaTokens.disabledOpacity, textAreaTokens.inputColorDisabled, textAreaTokens.titleCaptionColorReadOnly)
     }
   }
 };

package/styled-components/es/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}
         />
     );