@salutejs/plasma-new-hope 0.152.0-canary.1374.11013124158.0 → 0.152.0-canary.1451.11017866198.0

package/styled-components/es/examples/plasma_web/components/Tabs/Tabs.stories.tsx

@@ -3,11 +3,14 @@ import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { disableProps } from '@salutejs/plasma-sb-utils';
 
-import { WithTheme } from '../../../_helpers';
+import { tabsConfig } from '../../../../components/Tabs';
+import { mergeConfig } from '../../../../engines';
+import { argTypesFromConfig, WithTheme } from '../../../_helpers';
 import { IconMic } from '../../../../components/_Icon';
 import { Dropdown } from '../Dropdown/Dropdown';
 import { Counter } from '../Counter/Counter';
 
+import { config } from './Tabs.config';
 import { Tabs } from './Tabs';
 import { TabItem } from './TabItem';
 
@@ -18,8 +21,8 @@ const headerSizes = ['h5', 'h4', 'h3', 'h2', 'h1'] as const;
 type Size = typeof sizes[number];
 
 type CustomStoryTabsProps = {
-    itemQuantity: number;
     hasDivider: boolean;
+    itemQuantity: number;
     contentLeft: string;
     contentRight: string;
 };
@@ -55,23 +58,26 @@ const meta: Meta<StoryTabsProps> = {
     component: Tabs,
     decorators: [WithTheme],
     argTypes: {
-        ...disableProps([
-            'orientation',
-            'tabItemContentLeft',
-            'pilled',
-            'animated',
-            'view',
-            'as',
-            'forwardedAs',
-            'outsideScroll',
-            'index',
-        ]),
+        ...argTypesFromConfig(mergeConfig(tabsConfig, config)),
+        contentLeft: {
+            options: contentLeftOptions,
+            control: {
+                type: 'select',
+            },
+        },
+        contentRight: {
+            options: contentRightOptions,
+            control: {
+                type: 'select',
+            },
+        },
+        ...disableProps(['itemsNumber', 'pilled', 'animated', 'view']),
     },
 };
 
 export default meta;
 
-const StoryHorizontalDefault = (props: StoryTabsProps) => {
+const StoryDefault = (props: StoryTabsProps) => {
     const {
         disabled,
         itemQuantity,
@@ -85,7 +91,7 @@ const StoryHorizontalDefault = (props: StoryTabsProps) => {
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs view={hasDivider ? 'divider' : 'clear'} stretch={stretch} disabled={disabled} size={size} index={index}>
+        <Tabs view={hasDivider ? 'divider' : 'clear'} stretch={stretch} disabled={disabled} size={size}>
             {items.map((_, i) => (
                 <TabItem
                     key={`item:${i}`}
@@ -105,7 +111,7 @@ const StoryHorizontalDefault = (props: StoryTabsProps) => {
     );
 };
 
-const StoryHorizontalScroll = (props: StoryTabsProps) => {
+const StoryScroll = (props: StoryTabsProps) => {
     const {
         disabled,
         itemQuantity,
@@ -145,7 +151,7 @@ const StoryHorizontalScroll = (props: StoryTabsProps) => {
     );
 };
 
-const StoryHorizontalShowAll = (props: StoryTabsProps) => {
+const StoryShowAll = (props: StoryTabsProps) => {
     const {
         disabled,
         itemQuantity,
@@ -211,7 +217,7 @@ const StoryHorizontalShowAll = (props: StoryTabsProps) => {
     );
 };
 
-export const HorizontalTabs: StoryObj<StoryTabsProps> = {
+export const Default: StoryObj<StoryTabsProps> = {
     args: {
         size: 'xs',
         disabled: false,
@@ -219,18 +225,6 @@ export const HorizontalTabs: StoryObj<StoryTabsProps> = {
         itemQuantity: 8,
     },
     argTypes: {
-        contentLeft: {
-            options: contentLeftOptions,
-            control: {
-                type: 'select',
-            },
-        },
-        contentRight: {
-            options: contentRightOptions,
-            control: {
-                type: 'select',
-            },
-        },
         clip: {
             options: clips,
             control: {
@@ -248,216 +242,11 @@ export const HorizontalTabs: StoryObj<StoryTabsProps> = {
     render: (args) => {
         switch (args.clip) {
             case 'scroll':
-                return <StoryHorizontalScroll {...args} />;
+                return <StoryScroll {...args} />;
             case 'showAll':
-                return <StoryHorizontalShowAll {...args} />;
+                return <StoryShowAll {...args} />;
             default:
-                return <StoryHorizontalDefault {...args} />;
-        }
-    },
-};
-
-const StoryVerticalDefault = (props: StoryTabsProps) => {
-    const {
-        disabled,
-        itemQuantity,
-        stretch,
-        size,
-        contentLeft: contentLeftOption,
-        contentRight: contentRightOption,
-        hasDivider,
-    } = props;
-    const items = Array(itemQuantity).fill(0);
-    const [index, setIndex] = useState(0);
-
-    return (
-        <div style={{ height: '100vh' }}>
-            <Tabs
-                orientation="vertical"
-                hasDivider={hasDivider}
-                size={size as Size}
-                disabled={disabled}
-                stretch={stretch}
-                contentLeft={getContentLeft(contentLeftOption, size as Size)}
-            >
-                {items.map((_, i) => (
-                    <TabItem
-                        orientation="vertical"
-                        key={`item:${i}`}
-                        view="divider"
-                        selected={i === index}
-                        onClick={() => !disabled && setIndex(i)}
-                        tabIndex={!disabled ? 0 : -1}
-                        size={size as Size}
-                        disabled={disabled}
-                        contentRight={getContentRight(contentRightOption, size as Size)}
-                    >
-                        {`Label${i + 1}`}
-                    </TabItem>
-                ))}
-            </Tabs>
-        </div>
-    );
-};
-
-const StoryVerticalScroll = (props: StoryTabsProps) => {
-    const {
-        disabled,
-        itemQuantity,
-        clip,
-        size,
-        contentLeft: contentLeftOption,
-        contentRight: contentRightOption,
-        hasDivider,
-    } = props;
-    const items = Array(itemQuantity).fill(0);
-    const [index, setIndex] = useState(0);
-
-    return (
-        <div style={{ height: '100vh' }}>
-            <Tabs
-                orientation="vertical"
-                size={size as Size}
-                disabled={disabled}
-                clip={clip}
-                style={{ height: '10rem' }}
-                contentLeft={getContentLeft(contentLeftOption, size as Size)}
-                hasDivider={hasDivider}
-            >
-                {items.map((_, i) => (
-                    <TabItem
-                        orientation="vertical"
-                        key={`item:${i}`}
-                        view="divider"
-                        selected={i === index}
-                        onClick={() => !disabled && setIndex(i)}
-                        tabIndex={!disabled ? 0 : -1}
-                        size={size as Size}
-                        disabled={disabled}
-                        contentRight={getContentRight(contentRightOption, size as Size)}
-                    >
-                        {`Label${i + 1}`}
-                    </TabItem>
-                ))}
-            </Tabs>
-        </div>
-    );
-};
-
-const StoryVerticalShowAll = (props: StoryTabsProps) => {
-    const {
-        disabled,
-        itemQuantity,
-        clip,
-        size,
-        contentLeft: contentLeftOption,
-        contentRight: contentRightOption,
-        hasDivider,
-    } = props;
-    const maxItemQuantity = 3;
-    const items = Array(itemQuantity).fill(0);
-    const [index, setIndex] = useState(0);
-
-    const visibleItems = items.slice(0, maxItemQuantity);
-    const otherItems = items.slice(maxItemQuantity);
-
-    const dropdownItems = otherItems.map((_, i) => {
-        const itemIndex = maxItemQuantity + i;
-
-        return {
-            label: `Label${itemIndex + 1}`,
-            value: itemIndex,
-        };
-    });
-
-    return (
-        <Tabs
-            clip={clip}
-            orientation="vertical"
-            size={size as Size}
-            disabled={disabled}
-            contentLeft={getContentLeft(contentLeftOption, size as Size)}
-            hasDivider={hasDivider}
-        >
-            {visibleItems.map((_, i) => (
-                <TabItem
-                    orientation="vertical"
-                    key={`item:${i}`}
-                    selected={i === index}
-                    onClick={() => !disabled && setIndex(i)}
-                    tabIndex={!disabled ? 0 : -1}
-                    disabled={disabled}
-                    contentRight={getContentRight(contentRightOption, size as Size)}
-                    size={size as Size}
-                >
-                    {`Label${i + 1}`}
-                </TabItem>
-            ))}
-            {dropdownItems.length > 0 && (
-                <Dropdown
-                    size={size as Size}
-                    items={dropdownItems}
-                    onItemSelect={(item) => setIndex(item.value as number)}
-                    placement="right"
-                >
-                    <TabItem
-                        orientation="vertical"
-                        key="item:ShowAll"
-                        tabIndex={!disabled ? 0 : -1}
-                        disabled={disabled}
-                        size={size as Size}
-                    >
-                        ShowAll
-                    </TabItem>
-                </Dropdown>
-            )}
-        </Tabs>
-    );
-};
-
-export const VerticalTabs: StoryObj<StoryTabsProps> = {
-    args: {
-        size: 'xs',
-        disabled: false,
-        hasDivider: true,
-        itemQuantity: 8,
-        orientation: 'vertical',
-    },
-    argTypes: {
-        contentLeft: {
-            options: contentLeftOptions,
-            control: {
-                type: 'select',
-            },
-        },
-        contentRight: {
-            options: contentRightOptions,
-            control: {
-                type: 'select',
-            },
-        },
-        size: {
-            options: sizes,
-            control: {
-                type: 'select',
-            },
-        },
-        clip: {
-            options: clips,
-            control: {
-                type: 'select',
-            },
-            if: { arg: 'stretch', truthy: false },
-        },
-    },
-    render: (args) => {
-        switch (args.clip) {
-            case 'scroll':
-                return <StoryVerticalScroll {...args} />;
-            case 'showAll':
-                return <StoryVerticalShowAll {...args} />;
-            default:
-                return <StoryVerticalDefault {...args} />;
+                return <StoryDefault {...args} />;
         }
     },
 };
@@ -470,13 +259,12 @@ const StoryHeaderTabs = (props: StoryTabsProps) => {
         contentLeft: contentLeftOption,
         contentRight: contentRightOption,
         hasDivider,
-        stretch,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size} stretch={stretch}>
+        <Tabs view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size}>
             {items.map((_, i) => (
                 <TabItem
                     key={`item:${i}`}
@@ -510,23 +298,6 @@ export const HeaderTabs: StoryObj<StoryTabsProps> = {
                 type: 'select',
             },
         },
-        contentLeft: {
-            options: contentLeftOptions,
-            control: {
-                type: 'select',
-            },
-        },
-        contentRight: {
-            options: contentRightOptions,
-            control: {
-                type: 'select',
-            },
-        },
-        clip: {
-            table: {
-                disable: true,
-            },
-        },
     },
     render: (args) => <StoryHeaderTabs {...args} />,
 };

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

@@ -7,16 +7,19 @@ export var config = {
   },
   variations: {
     size: {
-      xs: /*#__PURE__*/css(["", ":100%;", ":7.312rem;", ":0.625rem;", ":0.5rem;", ":0.5rem;", ":0.5625rem;", ":0.625rem;", ":2.125rem;", ":0.563rem;", ":0.563rem;", ":0.625rem;", ":0.25rem;", ":0rem;", ":0rem;", ":0rem;", ":0.375rem;", ":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;"], textAreaTokens.inputWidth, textAreaTokens.inputHeight, textAreaTokens.inputMinHeight, textAreaTokens.borderRadius, textAreaTokens.borderRadiusWithHelpers, textAreaTokens.inputPaddingTop, textAreaTokens.inputPaddingRight, textAreaTokens.inputPaddingRightWithRightContent, textAreaTokens.inputPaddingBottom, textAreaTokens.inputPaddingBottomWithHelpers, 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),
-      s: /*#__PURE__*/css(["", ":100%;", ":7.187rem;", ":0.625rem;", ":0.625rem;", ":0.625rem;", ":0.6875rem;", ":0.875rem;", ":3.125rem;", ":0.75rem;", ":0.75rem;", ":0.875rem;", ":0.25rem;", ":0rem;", ":0rem;", ":0rem;", ":0.375rem;", ":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.inputPaddingBottomWithHelpers, 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.875rem;", ":1rem;", ":3.375rem;", ":0.75rem;", ":0.75rem;", ":1rem;", ":0.25rem;", ":0rem;", ":0rem;", ":0rem;", ":0.375rem;", ":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.inputPaddingBottomWithHelpers, 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;", ":1rem;", ":1.125rem;", ":3.625rem;", ":0.75rem;", ":0.75rem;", ":1.125rem;", ":0.25rem;", ":0rem;", ":0rem;", ":0rem;", ":0.375rem;", ":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.inputPaddingBottomWithHelpers, 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.5625rem;", ":0.625rem;", ":2.125rem;", ":0.563rem;", ":0.563rem;", ":0.625rem;", ":0.25rem;", ":0.25rem;", ":0rem;", ":0rem;", ":0rem;", ":0.375rem;", ":0.563rem;", ":0.5rem;", ":1.25rem;", ":0.375rem;", ":0.25rem;", ":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;"], textAreaTokens.inputWidth, textAreaTokens.inputHeight, textAreaTokens.inputMinHeight, textAreaTokens.borderRadius, textAreaTokens.borderRadiusWithHelpers, textAreaTokens.inputPaddingTop, textAreaTokens.inputPaddingRight, textAreaTokens.inputPaddingRightWithRightContent, textAreaTokens.inputPaddingBottom, textAreaTokens.inputPaddingBottomWithHelpers, textAreaTokens.inputPaddingLeft, textAreaTokens.helpersPaddingTop, textAreaTokens.clearHelpersPaddingTop, textAreaTokens.helpersPaddingRight, textAreaTokens.helpersPaddingBottom, textAreaTokens.helpersPaddingLeft, textAreaTokens.helpersOffset, textAreaTokens.rightContentTop, textAreaTokens.rightContentRight, textAreaTokens.rightContentHeight, textAreaTokens.labelMarginBottom, textAreaTokens.clearLabelMarginBottom, 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),
+      s: /*#__PURE__*/css(["", ":100%;", ":7.187rem;", ":0.625rem;", ":0.625rem;", ":0.625rem;", ":0.6875rem;", ":0.875rem;", ":3.125rem;", ":0.75rem;", ":0.75rem;", ":0.875rem;", ":0.25rem;", ":0.25rem;", ":0rem;", ":0rem;", ":0rem;", ":0.375rem;", ":0.688rem;", ":0.75rem;", ":1.25rem;", ":0.5rem;", ":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.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.inputPaddingBottomWithHelpers, textAreaTokens.inputPaddingLeft, textAreaTokens.helpersPaddingTop, textAreaTokens.clearHelpersPaddingTop, textAreaTokens.helpersPaddingRight, textAreaTokens.helpersPaddingBottom, textAreaTokens.helpersPaddingLeft, textAreaTokens.helpersOffset, textAreaTokens.rightContentTop, textAreaTokens.rightContentRight, textAreaTokens.rightContentHeight, textAreaTokens.labelMarginBottom, textAreaTokens.clearLabelMarginBottom, 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.875rem;", ":1rem;", ":3.375rem;", ":0.75rem;", ":0.75rem;", ":1rem;", ":0.25rem;", ":0.25rem;", ":0rem;", ":0rem;", ":0rem;", ":0.375rem;", ":0.875rem;", ":0.875rem;", ":1.25rem;", ":0.625rem;", ":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.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.inputPaddingBottomWithHelpers, textAreaTokens.inputPaddingLeft, textAreaTokens.helpersPaddingTop, textAreaTokens.clearHelpersPaddingTop, textAreaTokens.helpersPaddingRight, textAreaTokens.helpersPaddingBottom, textAreaTokens.helpersPaddingLeft, textAreaTokens.helpersOffset, textAreaTokens.rightContentTop, textAreaTokens.rightContentRight, textAreaTokens.rightContentHeight, textAreaTokens.labelMarginBottom, textAreaTokens.clearLabelMarginBottom, 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;", ":1rem;", ":1.125rem;", ":3.625rem;", ":0.75rem;", ":0.75rem;", ":1.125rem;", ":0.25rem;", ":0.25rem;", ":0rem;", ":0rem;", ":0rem;", ":0.375rem;", ":1.063rem;", ":1rem;", ":1.25rem;", ":0.75rem;", ":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.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.inputPaddingBottomWithHelpers, textAreaTokens.inputPaddingLeft, textAreaTokens.helpersPaddingTop, textAreaTokens.clearHelpersPaddingTop, textAreaTokens.helpersPaddingRight, textAreaTokens.helpersPaddingBottom, textAreaTokens.helpersPaddingLeft, textAreaTokens.helpersOffset, textAreaTokens.rightContentTop, textAreaTokens.rightContentRight, textAreaTokens.rightContentHeight, textAreaTokens.labelMarginBottom, textAreaTokens.clearLabelMarginBottom, 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)
     },
     view: {
-      "default": /*#__PURE__*/css(["", ":var(--text-tertiary);", ":var(--text-tertiary-hover);", ":var(--text-tertiary-hover);", ":var(--text-accent);", ":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.inputBorderColor, textAreaTokens.inputBorderColorHover, textAreaTokens.inputBorderColorActive, textAreaTokens.inputBorderColorFocus, textAreaTokens.inputColor, textAreaTokens.inputColorFocus, textAreaTokens.inputCaretColor, textAreaTokens.placeholderColor, textAreaTokens.placeholderColorFocus, textAreaTokens.leftHelperColor, textAreaTokens.rightHelperColor, textAreaTokens.indicatorColor, textAreaTokens.optionalColor),
-      positive: /*#__PURE__*/css(["", ":var(--text-positive);", ":var(--text-positive-hover);", ":var(--text-positive-hover);", ":var(--text-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.inputBorderColor, textAreaTokens.inputBorderColorHover, textAreaTokens.inputBorderColorActive, textAreaTokens.inputBorderColorFocus, textAreaTokens.inputColor, textAreaTokens.inputColorFocus, textAreaTokens.inputCaretColor, textAreaTokens.placeholderColor, textAreaTokens.placeholderColorFocus, textAreaTokens.leftHelperColor, textAreaTokens.rightHelperColor, textAreaTokens.indicatorColor, textAreaTokens.optionalColor),
-      warning: /*#__PURE__*/css(["", ":var(--text-warning);", ":var(--text-warning-hover);", ":var(--text-warning-hover);", ":var(--text-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.inputBorderColor, textAreaTokens.inputBorderColorHover, textAreaTokens.inputBorderColorActive, textAreaTokens.inputBorderColorFocus, textAreaTokens.inputColor, textAreaTokens.inputColorFocus, textAreaTokens.inputCaretColor, textAreaTokens.placeholderColor, textAreaTokens.placeholderColorFocus, textAreaTokens.leftHelperColor, textAreaTokens.rightHelperColor, textAreaTokens.indicatorColor, textAreaTokens.optionalColor),
-      negative: /*#__PURE__*/css(["", ":var(--text-negative);", ":var(--text-negative-hover);", ":var(--text-negative-hover);", ":var(--text-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.inputBorderColor, textAreaTokens.inputBorderColorHover, textAreaTokens.inputBorderColorActive, textAreaTokens.inputBorderColorFocus, textAreaTokens.inputColor, textAreaTokens.inputColorFocus, textAreaTokens.inputCaretColor, textAreaTokens.placeholderColor, textAreaTokens.placeholderColorFocus, textAreaTokens.leftHelperColor, textAreaTokens.rightHelperColor, textAreaTokens.indicatorColor, textAreaTokens.optionalColor)
+      "default": /*#__PURE__*/css(["", ":var(--text-tertiary);", ":var(--text-tertiary-hover);", ":var(--text-tertiary-hover);", ":var(--text-accent);", ":var(--text-primary);", ":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(--surface-transparent-tertiary);", ":var(--text-secondary);", ":var(--surface-accent);"], textAreaTokens.inputBorderColor, textAreaTokens.inputBorderColorHover, textAreaTokens.inputBorderColorActive, textAreaTokens.inputBorderColorFocus, textAreaTokens.inputColor, textAreaTokens.clearInputColor, textAreaTokens.inputColorFocus, textAreaTokens.inputCaretColor, textAreaTokens.placeholderColor, textAreaTokens.placeholderColorFocus, textAreaTokens.leftHelperColor, textAreaTokens.rightHelperColor, textAreaTokens.indicatorColor, textAreaTokens.optionalColor, textAreaTokens.dividerColor, textAreaTokens.dividerColorHover, textAreaTokens.dividerColorFocus),
+      positive: /*#__PURE__*/css(["", ":var(--text-positive);", ":var(--text-positive-hover);", ":var(--text-positive-hover);", ":var(--text-positive);", ":var(--text-primary);", ":var(--text-positive);", ":var(--text-positive);", ":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(--surface-positive);", ":var(--surface-positive);", ":var(--surface-accent);"], textAreaTokens.inputBorderColor, textAreaTokens.inputBorderColorHover, textAreaTokens.inputBorderColorActive, textAreaTokens.inputBorderColorFocus, textAreaTokens.inputColor, textAreaTokens.clearInputColor, textAreaTokens.clearPlaceholderColor, textAreaTokens.inputColorFocus, textAreaTokens.inputCaretColor, textAreaTokens.placeholderColor, textAreaTokens.placeholderColorFocus, textAreaTokens.leftHelperColor, textAreaTokens.rightHelperColor, textAreaTokens.indicatorColor, textAreaTokens.optionalColor, textAreaTokens.dividerColor, textAreaTokens.dividerColorHover, textAreaTokens.dividerColorFocus),
+      warning: /*#__PURE__*/css(["", ":var(--text-warning);", ":var(--text-warning-hover);", ":var(--text-warning-hover);", ":var(--text-warning);", ":var(--text-primary);", ":var(--text-warning);", ":var(--text-warning);", ":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(--surface-warning);", ":var(--surface-warning);", ":var(--surface-accent);"], textAreaTokens.inputBorderColor, textAreaTokens.inputBorderColorHover, textAreaTokens.inputBorderColorActive, textAreaTokens.inputBorderColorFocus, textAreaTokens.inputColor, textAreaTokens.clearInputColor, textAreaTokens.clearPlaceholderColor, textAreaTokens.inputColorFocus, textAreaTokens.inputCaretColor, textAreaTokens.placeholderColor, textAreaTokens.placeholderColorFocus, textAreaTokens.leftHelperColor, textAreaTokens.rightHelperColor, textAreaTokens.indicatorColor, textAreaTokens.optionalColor, textAreaTokens.dividerColor, textAreaTokens.dividerColorHover, textAreaTokens.dividerColorFocus),
+      negative: /*#__PURE__*/css(["", ":var(--text-negative);", ":var(--text-negative-hover);", ":var(--text-negative-hover);", ":var(--text-negative);", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-negative);", ":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(--surface-negative);", ":var(--surface-negative);", ":var(--surface-accent);"], textAreaTokens.inputBorderColor, textAreaTokens.inputBorderColorHover, textAreaTokens.inputBorderColorActive, textAreaTokens.inputBorderColorFocus, textAreaTokens.inputColor, textAreaTokens.clearInputColor, textAreaTokens.clearPlaceholderColor, textAreaTokens.inputColorFocus, textAreaTokens.inputCaretColor, textAreaTokens.placeholderColor, textAreaTokens.placeholderColorFocus, textAreaTokens.leftHelperColor, textAreaTokens.rightHelperColor, textAreaTokens.indicatorColor, textAreaTokens.optionalColor, textAreaTokens.dividerColor, textAreaTokens.dividerColorHover, textAreaTokens.dividerColorFocus)
+    },
+    clear: {
+      "true": /*#__PURE__*/css([""])
     },
     disabled: {
       "true": /*#__PURE__*/css(["", ":0.4;", ":var(--text-secondary);"], textAreaTokens.disabledOpacity, textAreaTokens.inputColorDisabled)

package/styled-components/es/examples/plasma_web/components/TextArea/TextArea.stories.tsx

@@ -2,8 +2,7 @@ import React, { useState } from 'react';
 import type { ComponentProps } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { tertiary } from '@salutejs/plasma-core';
-import styled from 'styled-components';
+import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
 
 import { textAreaConfig } from '../../../../components/TextArea';
 import { mergeConfig } from '../../../../engines';
@@ -48,11 +47,13 @@ const meta: Meta<StoryTextAreaProps> = {
             control: {
                 type: 'number',
             },
+            if: { arg: 'clear', truthy: false },
         },
         cols: {
             control: {
                 type: 'number',
             },
+            if: { arg: 'clear', truthy: false },
         },
         labelPlacement: {
             options: labelPlacements,
@@ -60,11 +61,20 @@ const meta: Meta<StoryTextAreaProps> = {
                 type: 'select',
             },
         },
+        hasDivider: {
+            control: {
+                type: 'boolean',
+            },
+            if: { arg: 'clear', truthy: true },
+        },
     },
     args: {
         id: 'example-textarea',
+        view: 'default',
+        size: 's',
         enableContentRight: true,
         label: 'Подсказка',
+        labelPlacements: 'outer',
         placeholder: 'Заполните многострочное поле',
         leftHelper: 'Подсказка к полю слева',
         rightHelper: 'Подсказка к полю справа',
@@ -73,10 +83,11 @@ const meta: Meta<StoryTextAreaProps> = {
         autoResize: false,
         minAuto: 0,
         maxAuto: 0,
-        size: 's',
         optional: false,
         required: false,
         requiredPlacement: 'right',
+        clear: false,
+        hasDivider: false,
     },
 };
 
@@ -86,20 +97,15 @@ const onChange = action('onChange');
 const onFocus = action('onFocus');
 const onBlur = action('onBlur');
 
-const IconPlaceholder = styled.div`
-    width: 1.5rem;
-    height: 1.5rem;
-    border-radius: 50%;
-    background: ${tertiary};
-`;
-
 const StoryDefault = (props: StoryTextAreaProps) => {
     const [value, setValue] = useState('Значение поля');
 
+    const iconSize = props.size === 'xs' ? 'xs' : 's';
+
     return (
         <TextArea
             value={value}
-            contentRight={props.enableContentRight ? <IconPlaceholder /> : undefined}
+            contentRight={props.enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
             onChange={(e) => {
                 setValue(e.target.value);
                 onChange(e);

package/types/components/Tabs/createTabsController.d.ts

@@ -1,7 +1,6 @@
 import React, { ForwardRefExoticComponent, RefAttributes } from 'react';
-import { TabsProps } from './Tabs.types';
-import { TabItemProps } from './TabItem.types';
-export declare type TabsControllerProps = TabsProps & {
+import { TabsProps, TabItemProps } from '.';
+export interface TabsControllerProps extends TabsProps {
     items: Array<{
         label: string;
     } & TabItemProps>;
@@ -9,7 +8,7 @@ export declare type TabsControllerProps = TabsProps & {
     onIndexChange: (index: number) => void;
     children?: never;
     autoscroll?: boolean;
-};
+}
 /**
  * @deprecated
  * Используйте Tabs, TabItem, указав параметры index, itemIndex, onIndexChange

package/types/components/Tabs/createTabsController.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createTabsController.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/createTabsController.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,yBAAyB,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEpF,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,oBAAY,mBAAmB,GAAG,SAAS,GAAG;IAC1C,KAAK,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,YAAY,CAAC,CAAC;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,cAAc,EAAE,CAAC,SAAS,mBAAmB,EACxF,aAAa,EAAE,yBAAyB,CAAC,SAAS,GAAG,aAAa,CAAC,cAAc,CAAC,CAAC,EACnF,aAAa,EAAE,yBAAyB,CAAC,YAAY,GAAG,aAAa,CAAC,cAAc,CAAC,CAAC,sFA2BzF"}
+{"version":3,"file":"createTabsController.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/createTabsController.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,yBAAyB,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEpF,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,GAAG,CAAC;AAE5C,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IAClD,KAAK,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,YAAY,CAAC,CAAC;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,cAAc,EAAE,CAAC,SAAS,mBAAmB,EACxF,aAAa,EAAE,yBAAyB,CAAC,SAAS,GAAG,aAAa,CAAC,cAAc,CAAC,CAAC,EACnF,aAAa,EAAE,yBAAyB,CAAC,YAAY,GAAG,aAAa,CAAC,cAAc,CAAC,CAAC,sFAwBzF"}

package/types/components/Tabs/index.d.ts

@@ -1,12 +1,9 @@
-export { horizontalTabsRoot, horizontalTabsConfig } from './ui/horizontal/HorizontalTabs/HorizontalTabs';
-export { horizontalTabItemRoot, horizontalTabItemConfig } from './ui/horizontal/HorizontalTabItem/HorizontalTabItem';
-export { verticalTabsRoot, verticalTabsConfig } from './ui/vertical/VerticalTabs/VerticalTabs';
-export { verticalTabItemRoot, verticalTabItemConfig } from './ui/vertical/VerticalTabItem/VerticalTabItem';
-export { VerticalTabsContext } from './ui/vertical/VerticalTabsContext';
+export { tabsRoot, tabsConfig } from './ui/Tabs/Tabs';
+export { tabItemRoot, tabItemConfig } from './ui/TabItem/TabItem';
 export { tokens as tabsTokens } from './tokens';
 export { TabItemRefs, TabsContext } from './TabsContext';
 export { createTabsController } from './createTabsController';
 export type { TabsControllerProps } from './createTabsController';
-export type { TabsProps } from './Tabs.types';
-export type { TabItemProps } from './TabItem.types';
+export type { TabsProps } from './ui/Tabs/Tabs.types';
+export type { TabItemProps } from './ui/TabItem/TabItem.types';
 //# sourceMappingURL=index.d.ts.map

package/types/components/Tabs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,+CAA+C,CAAC;AACzG,OAAO,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,MAAM,qDAAqD,CAAC;AACrH,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAC/F,OAAO,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,+CAA+C,CAAC;AAC3G,OAAO,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,UAAU,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,YAAY,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAClE,YAAY,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,UAAU,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,YAAY,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAClE,YAAY,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,YAAY,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC"}

package/types/components/Tabs/tokens.d.ts

@@ -10,15 +10,12 @@ export declare const classes: {
     tabLeftContent: string;
     tabsHasLeftArrow: string;
     tabsHasRightArrow: string;
-    tabsHasTopArrow: string;
-    tabsHasBottomArrow: string;
     tabsClipScroll: string;
     tabsClipShowAll: string;
 };
 export declare const tokens: {
     disabledOpacity: string;
     containerWidth: string;
-    containerHeight: string;
     cursor: string;
     color: string;
     colorHover: string;

package/types/components/Tabs/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;CAgBnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqElB,CAAC"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;CAcnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoElB,CAAC"}

package/types/components/Tabs/ui/TabItem/TabItem.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { RootProps } from '../../../../engines';
+import { TabItemProps } from './TabItem.types';
+export declare const tabItemRoot: (Root: RootProps<HTMLDivElement, TabItemProps>) => React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & import("../../../../types").AsProps<any> & import("./TabItem.types").CustomTabItemProps & React.RefAttributes<HTMLDivElement>>;
+export declare const tabItemConfig: {
+    name: string;
+    tag: string;
+    layout: (Root: RootProps<HTMLDivElement, TabItemProps>) => React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & import("../../../../types").AsProps<any> & import("./TabItem.types").CustomTabItemProps & React.RefAttributes<HTMLDivElement>>;
+    base: import("@linaria/core").LinariaClassName;
+    variations: {
+        size: {
+            css: import("@linaria/core").LinariaClassName;
+        };
+        view: {
+            css: import("@linaria/core").LinariaClassName;
+        };
+        disabled: {
+            css: import("@linaria/core").LinariaClassName;
+            attrs: boolean;
+        };
+        pilled: {
+            css: import("@linaria/core").LinariaClassName;
+        };
+    };
+    defaults: {
+        view: string;
+    };
+};
+//# sourceMappingURL=TabItem.d.ts.map