@salutejs/plasma-new-hope 0.151.0-canary.1449.11009654671.0 → 0.151.0-dev.0

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

@@ -0,0 +1,168 @@
+import React from 'react';
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+
+import { mergeConfig } from '../../../../engines';
+import { WithTheme, argTypesFromConfig } from '../../../_helpers';
+import { attachConfig } from '../../../../components/Attach';
+import { IconMic } from '../../../../components/_Icon';
+
+import { Attach } from './Attach';
+import { config } from './Attach.config';
+
+const buttonViewOptions = [
+    'default',
+    'accent',
+    'secondary',
+    'clear',
+    'positive',
+    'warning',
+    'negative',
+    'dark',
+    'black',
+    'white',
+];
+const iconButtonViewOptions = [
+    'default',
+    'accent',
+    'secondary',
+    'clear',
+    'success',
+    'warning',
+    'critical',
+    'dark',
+    'black',
+    'white',
+];
+const flowOptions = ['horizontal', 'vertical', 'auto'];
+const fileFormatOptions = ['all', '.doc', '.xls', '.pdf', '.csv', '.txt'];
+
+type StoryAttachProps = ComponentProps<typeof Attach> & {
+    enableContentLeft: boolean;
+    enableContentRight: boolean;
+    buttonText?: string;
+    buttonValue?: string;
+    fileFormat?: string;
+    width?: string;
+};
+
+const meta: Meta<StoryAttachProps> = {
+    title: 'plasma_web/Attach',
+    decorators: [WithTheme],
+    component: Attach,
+    argTypes: {
+        ...argTypesFromConfig(mergeConfig(attachConfig, config)),
+        fileFormat: {
+            options: fileFormatOptions,
+            control: {
+                type: 'select',
+            },
+        },
+        flow: {
+            options: flowOptions,
+            control: {
+                type: 'select',
+            },
+        },
+    },
+};
+
+export default meta;
+
+const StoryButton = (props: StoryAttachProps) => {
+    return <Attach {...props} />;
+};
+
+export const Button: StoryObj<StoryAttachProps> = {
+    args: {
+        fileFormat: 'all',
+        flow: 'horizontal',
+        hasAttachment: true,
+        width: '400px',
+        buttonText: 'Загрузить файл',
+        buttonValue: '',
+        square: false,
+        enableContentLeft: false,
+        enableContentRight: false,
+        size: 'm',
+        view: 'accent',
+    },
+    argTypes: {
+        view: {
+            options: buttonViewOptions,
+            control: {
+                type: 'select',
+            },
+        },
+    },
+    render: (args) => {
+        const { buttonText, buttonValue, width, size, fileFormat, contentLeft, contentRight, ...rest } = args;
+        const accepted = fileFormat && fileFormat !== 'all' ? [fileFormat] : undefined;
+        const iconSize = size === 'xs' ? 'xs' : 's';
+
+        return (
+            <StoryButton
+                style={{ width }}
+                size={size}
+                buttonType="button"
+                contentLeft={contentLeft ? <IconMic size={iconSize} color="inherit" /> : undefined}
+                contentRight={contentRight ? <IconMic size={iconSize} color="inherit" /> : undefined}
+                acceptedFileFormats={accepted}
+                text={buttonText}
+                value={buttonValue}
+                {...rest}
+            />
+        );
+    },
+};
+
+const StoryIconButton = (props: StoryAttachProps) => {
+    return <Attach {...props} />;
+};
+
+export const IconButton: StoryObj<StoryAttachProps> = {
+    args: {
+        fileFormat: 'all',
+        flow: 'horizontal',
+        hasAttachment: true,
+        width: '400px',
+        size: 'm',
+        view: 'accent',
+    },
+    argTypes: {
+        view: {
+            options: iconButtonViewOptions,
+            control: {
+                type: 'select',
+            },
+        },
+    },
+    render: (args) => {
+        const {
+            buttonText,
+            buttonValue,
+            width,
+            size,
+            fileFormat,
+            enableContentLeft,
+            enableContentRight,
+            ...rest
+        } = args;
+        const accepted = fileFormat && fileFormat !== 'all' ? [fileFormat] : undefined;
+        const iconSize = size === 'xs' ? 'xs' : 's';
+
+        return (
+            <StoryIconButton
+                style={{ width }}
+                size={size}
+                buttonType="iconButton"
+                contentLeft={enableContentLeft ? <IconMic size={iconSize} color="inherit" /> : undefined}
+                contentRight={enableContentRight ? <IconMic size={iconSize} color="inherit" /> : undefined}
+                acceptedFileFormats={accepted}
+                text={buttonText}
+                value={buttonValue}
+                {...rest}
+            />
+        );
+    },
+};

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

@@ -8,29 +8,26 @@ export var config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-transparent-tertiary);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--surface-transparent-tertiary);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], tokens.color, tokens.backgroundColor, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotColorActive, tokens.borderColor, tokens.borderColorHover, tokens.borderColorFocus, tokens.dividerColor, tokens.dividerColorHover, tokens.dividerColorFocus, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor, tokens.indicatorColor, tokens.optionalColor),
-      positive: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-positive);", ":var(--surface-positive);", ":var(--surface-accent);", ":var(--surface-positive);", ":var(--surface-positive);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], tokens.color, tokens.backgroundColor, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotColorActive, tokens.borderColor, tokens.borderColorHover, tokens.borderColorFocus, tokens.dividerColor, tokens.dividerColorHover, tokens.dividerColorFocus, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor, tokens.indicatorColor, tokens.optionalColor),
-      warning: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-warning);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-warning);", ":var(--surface-warning);", ":var(--surface-accent);", ":var(--surface-warning);", ":var(--surface-warning);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], tokens.color, tokens.backgroundColor, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotColorActive, tokens.borderColor, tokens.borderColorHover, tokens.borderColorFocus, tokens.dividerColor, tokens.dividerColorHover, tokens.dividerColorFocus, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor, tokens.indicatorColor, tokens.optionalColor),
-      negative: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-negative);", ":var(--surface-negative);", ":var(--surface-accent);", ":var(--surface-negative);", ":var(--surface-negative);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], tokens.color, tokens.backgroundColor, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotColorActive, tokens.borderColor, tokens.borderColorHover, tokens.borderColorFocus, tokens.dividerColor, tokens.dividerColorHover, tokens.dividerColorFocus, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor, tokens.indicatorColor, tokens.optionalColor)
+      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-transparent-tertiary);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], tokens.color, tokens.backgroundColor, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotColorActive, tokens.borderColor, tokens.borderColorHover, tokens.borderColorFocus, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor, tokens.indicatorColor, tokens.optionalColor),
+      positive: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-positive);", ":var(--surface-positive);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], tokens.color, tokens.backgroundColor, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotColorActive, tokens.borderColor, tokens.borderColorHover, tokens.borderColorFocus, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor, tokens.indicatorColor, tokens.optionalColor),
+      warning: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-warning);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-warning);", ":var(--surface-warning);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], tokens.color, tokens.backgroundColor, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotColorActive, tokens.borderColor, tokens.borderColorHover, tokens.borderColorFocus, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor, tokens.indicatorColor, tokens.optionalColor),
+      negative: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-negative);", ":var(--surface-negative);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], tokens.color, tokens.backgroundColor, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotColorActive, tokens.borderColor, tokens.borderColorHover, tokens.borderColorFocus, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor, tokens.indicatorColor, tokens.optionalColor)
     },
     size: {
-      l: /*#__PURE__*/css(["", ":3.5rem;", ":1.0625rem 1.125rem 1.0625rem 1.125rem;", ":0.375rem;", ":0.875rem;", ":0.0625rem;", ":-0.0625rem 0.5rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.75rem;", ":0.25rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.5625rem 0 0.125rem 0;", ":1.5625rem 0 0.5625rem 0;", ":0.25rem;", ":0.5rem;", ":auto;", ":2.75rem;", ":0.75rem;", ":1rem;", ":0.625rem;", ":0rem;", ":1.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.5rem;", ":0.375rem;", ":0 0 0 0;", ":0.5rem auto auto -0.75rem;", ":0 0 auto auto;", ":0.25rem -0.625rem auto auto;"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.borderWidth, tokens.leftContentMargin, tokens.rightContentMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.clearLabelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight, tokens.indicatorSizeInner, tokens.indicatorSizeOuter, tokens.indicatorLabelPlacementInner, tokens.indicatorLabelPlacementOuter, tokens.indicatorLabelPlacementInnerRight, tokens.indicatorLabelPlacementOuterRight),
-      m: /*#__PURE__*/css(["", ":3rem;", ":0.875rem 1rem 0.875rem 1rem;", ":0.375rem;", ":0.75rem;", ":0.0625rem;", ":-0.125rem 0.375rem -0.125rem -0.125rem;", ":-0.125rem -0.125rem -0.125rem 0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.625rem;", ":0.25rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.375rem 0 0.125rem 0;", ":1.375rem 0 0.375rem 0;", ":0.25rem;", ":0.375rem;", ":auto;", ":2.25rem;", ":0.625rem;", ":0.875rem;", ":0.5rem;", ":0rem;", ":1.25rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.5rem;", ":0.375rem;", ":0 0 0 0;", ":0.375rem auto auto -0.75rem;", ":0 0 auto auto;", ":0.25rem -0.6875rem auto auto;"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.borderWidth, tokens.leftContentMargin, tokens.rightContentMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.clearLabelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight, tokens.indicatorSizeInner, tokens.indicatorSizeOuter, tokens.indicatorLabelPlacementInner, tokens.indicatorLabelPlacementOuter, tokens.indicatorLabelPlacementInnerRight, tokens.indicatorLabelPlacementOuterRight),
-      s: /*#__PURE__*/css(["", ":2.5rem;", ":0.6875rem 0.875rem 0.6875rem 0.875rem;", ":0.375rem;", ":0.625rem;", ":0.0625rem;", ":-0.1875rem 0.25rem -0.1875rem -0.125rem;", ":-0.1875rem -0.125rem -0.1875rem 0.75rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.5rem;", ":0.25rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.3125rem 0 0 0;", ":1.0625rem 0 0.3125rem 0;", ":0.25rem;", ":0.25rem;", ":auto;", ":1.75rem;", ":0.5rem;", ":0.75rem;", ":0.375rem;", ":0rem;", ":1rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.375rem;", ":0.375rem;", ":0 0 0 0;", ":0.3125rem auto auto -0.6875rem;", ":0 0 auto auto;", ":0.25rem -0.625rem auto auto;"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.borderWidth, tokens.leftContentMargin, tokens.rightContentMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.clearLabelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight, tokens.indicatorSizeInner, tokens.indicatorSizeOuter, tokens.indicatorLabelPlacementInner, tokens.indicatorLabelPlacementOuter, tokens.indicatorLabelPlacementInnerRight, tokens.indicatorLabelPlacementOuterRight),
-      xs: /*#__PURE__*/css(["", ":2rem;", ":0.5625rem 0.625rem 0.5625rem 0.625rem;", ":0.375rem;", ":0.5rem;", ":0.0625rem;", ":-0.0625rem 0.25rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.375rem;", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.3125rem 0 0 0;", ":1.0625rem 0 0.3125rem 0;", ":0.25rem;", ":0.125rem;", ":auto;", ":1.25rem;", ":0.375rem;", ":0.625rem;", ":0.25rem;", ":0rem;", ":0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.375rem;", ":0.375rem;", ":0 0 0 0;", ":0.25rem auto auto -0.625rem;", ":0 0 auto auto;", ":0.125rem -0.6875rem auto auto;"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.borderWidth, tokens.leftContentMargin, tokens.rightContentMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.clearLabelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight, tokens.indicatorSizeInner, tokens.indicatorSizeOuter, tokens.indicatorLabelPlacementInner, tokens.indicatorLabelPlacementOuter, tokens.indicatorLabelPlacementInnerRight, tokens.indicatorLabelPlacementOuterRight)
+      l: /*#__PURE__*/css(["", ":3.5rem;", ":1.0625rem 1.125rem 1.0625rem 1.125rem;", ":0.375rem;", ":0.875rem;", ":0.0625rem;", ":-0.0625rem 0.5rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.5625rem 0 0.125rem 0;", ":1.5625rem 0 0.5625rem 0;", ":0.25rem;", ":0.5rem;", ":auto;", ":2.75rem;", ":0.75rem;", ":1rem;", ":0.625rem;", ":0rem;", ":1.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.5rem;", ":0.375rem;", ":0 0 0 0;", ":0.5rem auto auto -0.75rem;", ":0 0 auto auto;", ":0.25rem -0.625rem auto auto;"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.borderWidth, tokens.leftContentMargin, tokens.rightContentMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight, tokens.indicatorSizeInner, tokens.indicatorSizeOuter, tokens.indicatorLabelPlacementInner, tokens.indicatorLabelPlacementOuter, tokens.indicatorLabelPlacementInnerRight, tokens.indicatorLabelPlacementOuterRight),
+      m: /*#__PURE__*/css(["", ":3rem;", ":0.875rem 1rem 0.875rem 1rem;", ":0.375rem;", ":0.75rem;", ":0.0625rem;", ":-0.125rem 0.375rem -0.125rem -0.125rem;", ":-0.125rem -0.125rem -0.125rem 0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.625rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.375rem 0 0.125rem 0;", ":1.375rem 0 0.375rem 0;", ":0.25rem;", ":0.375rem;", ":auto;", ":2.25rem;", ":0.625rem;", ":0.875rem;", ":0.5rem;", ":0rem;", ":1.25rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.5rem;", ":0.375rem;", ":0 0 0 0;", ":0.375rem auto auto -0.75rem;", ":0 0 auto auto;", ":0.25rem -0.6875rem auto auto;"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.borderWidth, tokens.leftContentMargin, tokens.rightContentMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight, tokens.indicatorSizeInner, tokens.indicatorSizeOuter, tokens.indicatorLabelPlacementInner, tokens.indicatorLabelPlacementOuter, tokens.indicatorLabelPlacementInnerRight, tokens.indicatorLabelPlacementOuterRight),
+      s: /*#__PURE__*/css(["", ":2.5rem;", ":0.6875rem 0.875rem 0.6875rem 0.875rem;", ":0.375rem;", ":0.625rem;", ":0.0625rem;", ":-0.1875rem 0.25rem -0.1875rem -0.125rem;", ":-0.1875rem -0.125rem -0.1875rem 0.75rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.3125rem 0 0 0;", ":1.0625rem 0 0.3125rem 0;", ":0.25rem;", ":0.25rem;", ":auto;", ":1.75rem;", ":0.5rem;", ":0.75rem;", ":0.375rem;", ":0rem;", ":1rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.375rem;", ":0.375rem;", ":0 0 0 0;", ":0.3125rem auto auto -0.6875rem;", ":0 0 auto auto;", ":0.25rem -0.625rem auto auto;"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.borderWidth, tokens.leftContentMargin, tokens.rightContentMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight, tokens.indicatorSizeInner, tokens.indicatorSizeOuter, tokens.indicatorLabelPlacementInner, tokens.indicatorLabelPlacementOuter, tokens.indicatorLabelPlacementInnerRight, tokens.indicatorLabelPlacementOuterRight),
+      xs: /*#__PURE__*/css(["", ":2rem;", ":0.5625rem 0.625rem 0.5625rem 0.625rem;", ":0.375rem;", ":0.5rem;", ":0.0625rem;", ":-0.0625rem 0.25rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.3125rem 0 0 0;", ":1.0625rem 0 0.3125rem 0;", ":0.25rem;", ":0.125rem;", ":auto;", ":1.25rem;", ":0.375rem;", ":0.625rem;", ":0.25rem;", ":0rem;", ":0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.375rem;", ":0.375rem;", ":0 0 0 0;", ":0.25rem auto auto -0.625rem;", ":0 0 auto auto;", ":0.125rem -0.6875rem auto auto;"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.borderWidth, tokens.leftContentMargin, tokens.rightContentMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight, tokens.indicatorSizeInner, tokens.indicatorSizeOuter, tokens.indicatorLabelPlacementInner, tokens.indicatorLabelPlacementOuter, tokens.indicatorLabelPlacementInnerRight, tokens.indicatorLabelPlacementOuterRight)
     },
     labelPlacement: {
       inner: /*#__PURE__*/css(["", ":var(--plasma-input-label-color,var(--plasma-input-placeholder-color,var(--text-secondary)));", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], tokens.placeholderColor, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight),
       outer: /*#__PURE__*/css([""])
     },
-    clear: {
-      "true": /*#__PURE__*/css([""])
-    },
     disabled: {
       "true": /*#__PURE__*/css(["", ":0.4;"], tokens.disabledOpacity)
     },
     readOnly: {
-      "true": /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--surface-transparent-tertiary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);"], tokens.colorReadOnly, tokens.backgroundColorReadOnly, tokens.borderColorReadOnly, tokens.placeholderColorReadOnly, tokens.leftHelperColorReadOnly, tokens.labelColorReadOnly)
+      "true": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--surface-transparent-tertiary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);"], tokens.colorReadOnly, tokens.backgroundColorReadOnly, tokens.borderColorReadOnly, tokens.placeholderColorReadOnly, tokens.leftHelperColorReadOnly, tokens.labelColorReadOnly)
     }
   }
 };

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

@@ -41,12 +41,6 @@ const meta: Meta<typeof TextField> = {
             },
             if: { arg: 'required', truthy: false },
         },
-        hasDivider: {
-            control: {
-                type: 'boolean',
-            },
-            if: { arg: 'clear', truthy: true },
-        },
         view: {
             options: views,
             control: {
@@ -154,8 +148,6 @@ export const Default: StoryObj<StoryPropsDefault> = {
         optional: false,
         enableContentLeft: true,
         enableContentRight: true,
-        clear: false,
-        hasDivider: false,
     },
     render: (args) => <StoryDemo {...args} />,
 };

package/styled-components/es/index.js

@@ -57,4 +57,5 @@ export * from './components/Price';
 export * from './components/Autocomplete';
 export * from './components/EmptyState';
 export * from './components/Editable';
-export * from './components/Mask';
+export * from './components/Mask';
+export * from './components/Attach';

package/types/components/Attach/Attach.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { RootProps } from '../../engines';
+import { AttachProps } from './Attach.types';
+export declare const attachRoot: (Root: RootProps<HTMLDivElement, AttachProps>) => React.ForwardRefExoticComponent<AttachProps & React.RefAttributes<HTMLDivElement>>;
+export declare const attachConfig: {
+    name: string;
+    tag: string;
+    layout: (Root: RootProps<HTMLDivElement, AttachProps>) => React.ForwardRefExoticComponent<AttachProps & React.RefAttributes<HTMLDivElement>>;
+    base: import("@linaria/core").LinariaClassName;
+    variations: {
+        view: {
+            css: import("@linaria/core").LinariaClassName;
+        };
+        size: {
+            css: import("@linaria/core").LinariaClassName;
+        };
+    };
+    defaults: {
+        view: string;
+        size: string;
+    };
+};
+//# sourceMappingURL=Attach.d.ts.map

package/types/components/Attach/Attach.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Attach.d.ts","sourceRoot":"","sources":["../../../src/components/Attach/Attach.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAGvE,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAI1C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAU7C,eAAO,MAAM,UAAU,SAAU,UAAU,cAAc,EAAE,WAAW,CAAC,uFA+JjE,CAAC;AAEP,eAAO,MAAM,YAAY;;;mBAjKQ,UAAU,cAAc,EAAE,WAAW,CAAC;;;;;;;;;;;;;;CAkLtE,CAAC"}

package/types/components/Attach/Attach.styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const base: import("@linaria/core").LinariaClassName;
+export declare const StyledHiddenInput: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Record<never, unknown>>;
+export declare const StyledHiddenInputHelper: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+//# sourceMappingURL=Attach.styles.d.ts.map

package/types/components/Attach/Attach.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Attach.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Attach/Attach.styles.ts"],"names":[],"mappings":";AAKA,eAAO,MAAM,IAAI,0CAGhB,CAAC;AAEF,eAAO,MAAM,iBAAiB,8KAE7B,CAAC;AAEF,eAAO,MAAM,uBAAuB,qKAUnC,CAAC"}

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

@@ -0,0 +1,119 @@
+export declare const classes: {
+    auto: string;
+    horizontal: string;
+    vertical: string;
+    cellHidden: string;
+};
+export declare const tokens: {
+    horizontalGap: string;
+    verticalGap: string;
+    buttonColor: string;
+    buttonValueColor: string;
+    buttonBackgroundColor: string;
+    buttonColorHover: string;
+    buttonBackgroundColorHover: string;
+    buttonColorActive: string;
+    buttonBackgroundColorActive: string;
+    buttonLoadingBackgroundColor: string;
+    buttonScaleHover: string;
+    buttonScaleActive: string;
+    buttonHeight: string;
+    buttonWidth: string;
+    buttonPadding: string;
+    buttonRadius: string;
+    buttonRadiusCircle: string;
+    buttonFontFamily: string;
+    buttonFontSize: string;
+    buttonFontStyle: string;
+    buttonFontWeight: string;
+    buttonLetterSpacing: string;
+    buttonLineHeight: string;
+    buttonLeftContentMargin: string;
+    buttonLeftContentAlignSelf: string;
+    buttonRightContentMargin: string;
+    buttonRightContentAlignSelf: string;
+    buttonValueMargin: string;
+    buttonDisabledOpacity: string;
+    buttonFocusColor: string;
+    buttonSpinnerColor: string;
+    buttonSpinnerSize: string;
+    cellColor: string;
+    cellBackgroundColor: string;
+    cellPadding: string;
+    cellPaddingLeftContent: string;
+    cellPaddingContent: string;
+    cellPaddingRightContent: string;
+    cellTextboxGap: string;
+    cellGap: string;
+    cellWidth: string;
+    cellLabelColor: string;
+    cellLabelFontFamily: string;
+    cellLabelFontSize: string;
+    cellLabelFontStyle: string;
+    cellLabelFontWeight: string;
+    cellLabelLetterSpacing: string;
+    cellLabelLineHeight: string;
+    cellTitleColor: string;
+    cellTitleFontFamily: string;
+    cellTitleFontSize: string;
+    cellTitleFontStyle: string;
+    cellTitleFontWeight: string;
+    cellTitleLetterSpacing: string;
+    cellTitleLineHeight: string;
+    cellSubtitleColor: string;
+    cellSubtitleFontFamily: string;
+    cellSubtitleFontSize: string;
+    cellSubtitleFontStyle: string;
+    cellSubtitleFontWeight: string;
+    cellSubtitleLetterSpacing: string;
+    cellSubtitleLineHeight: string;
+    iconButtonColor: string;
+    iconButtonBackgroundColor: string;
+    iconButtonLoadingBackgroundColor: string;
+    iconButtonColorHover: string;
+    iconButtonBackgroundColorHover: string;
+    iconButtonColorActive: string;
+    iconButtonBackgroundColorActive: string;
+    iconButtonScaleHover: string;
+    iconButtonScaleActive: string;
+    iconButtonHeight: string;
+    iconButtonWidth: string;
+    iconButtonPadding: string;
+    iconButtonRadius: string;
+    iconButtonRadiusCircle: string;
+    iconButtonFontFamily: string;
+    iconButtonFontSize: string;
+    iconButtonFontStyle: string;
+    iconButtonFontWeight: string;
+    iconButtonLetterSpacing: string;
+    iconButtonLineHeight: string;
+    iconButtonDisabledOpacity: string;
+    iconButtonFocusColor: string;
+    iconButtonSpinnerColor: string;
+    iconButtonSpinnerSize: string;
+    iconButtonCancelColor: string;
+    iconButtonCancelBackgroundColor: string;
+    iconButtonCancelLoadingBackgroundColor: string;
+    iconButtonCancelColorHover: string;
+    iconButtonCancelBackgroundColorHover: string;
+    iconButtonCancelColorActive: string;
+    iconButtonCancelBackgroundColorActive: string;
+    iconButtonCancelScaleHover: string;
+    iconButtonCancelScaleActive: string;
+    iconButtonCancelHeight: string;
+    iconButtonCancelWidth: string;
+    iconButtonCancelPadding: string;
+    iconButtonCancelRadius: string;
+    iconButtonCancelRadiusCircle: string;
+    iconButtonCancelFontFamily: string;
+    iconButtonCancelFontSize: string;
+    iconButtonCancelFontStyle: string;
+    iconButtonCancelFontWeight: string;
+    iconButtonCancelLetterSpacing: string;
+    iconButtonCancelLineHeight: string;
+    iconButtonCancelDisabledOpacity: string;
+    iconButtonCancelFocusColor: string;
+    iconButtonCancelSpinnerColor: string;
+    iconButtonCancelSpinnerSize: string;
+};
+//# sourceMappingURL=Attach.tokens.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Attach.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Attach/Attach.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;CAKnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0IlB,CAAC"}

package/types/components/Attach/Attach.types.d.ts

@@ -0,0 +1,43 @@
+import type { HTMLAttributes } from 'react';
+import React from 'react';
+import { ButtonProps } from '../Button/Button.types';
+export declare type BaseAttachProps = {
+    /**
+     * Массив форматов файлов, которые могут быть прикреплены (см. HTML-атрибут 'accept' для 'input').
+     */
+    acceptedFileFormats?: string[];
+    /**
+     * Отображать прикрепленный файл
+     * @default true
+     */
+    hasAttachment?: boolean;
+    /**
+     * Расположение элементов.
+     * По умолчанию 'auto' – автоматический перенос элемента в случае нехватки ширины контейнера.
+     * @default 'auto'
+     */
+    flow?: 'horizontal' | 'vertical' | 'auto';
+    /**
+     * Размер Attach
+     */
+    size?: string;
+    /**
+     * Вид Attach
+     */
+    view?: string;
+};
+export declare type AttachButtonProps = ({
+    /**
+     * Тип кнопки. 'button' – обычная кнопка. 'iconButton' – кнопка с иконкой.
+     * @default 'button'
+     */
+    buttonType?: 'button';
+} | {
+    buttonType?: 'iconButton';
+    /**
+     * Иконка
+     */
+    icon?: React.ReactNode;
+}) & ButtonProps;
+export declare type AttachProps = HTMLAttributes<HTMLDivElement> & ButtonProps & BaseAttachProps & AttachButtonProps;
+//# sourceMappingURL=Attach.types.d.ts.map

package/types/components/Attach/Attach.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Attach.types.d.ts","sourceRoot":"","sources":["../../../src/components/Attach/Attach.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,oBAAY,eAAe,GAAG;IAC1B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,IAAI,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;IAC1C;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,oBAAY,iBAAiB,GAAG,CAC1B;IACI;;;OAGG;IACH,UAAU,CAAC,EAAE,QAAQ,CAAC;CACzB,GACD;IACI,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,CACN,GACG,WAAW,CAAC;AAEhB,oBAAY,WAAW,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG,WAAW,GAAG,eAAe,GAAG,iBAAiB,CAAC"}

package/types/components/Attach/components/AttachButton/AttachButton.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { AttachButtonProps } from '../../Attach.types';
+export declare const AttachButton: React.ForwardRefExoticComponent<AttachButtonProps & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=AttachButton.d.ts.map

package/types/components/Attach/components/AttachButton/AttachButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AttachButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/Attach/components/AttachButton/AttachButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAoBvD,eAAO,MAAM,YAAY,6FAavB,CAAC"}

package/types/components/Attach/components/AttachButton/index.d.ts

@@ -0,0 +1,2 @@
+export { AttachButton } from './AttachButton';
+//# sourceMappingURL=index.d.ts.map

package/types/components/Attach/components/AttachButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Attach/components/AttachButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

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

@@ -0,0 +1,4 @@
+export { attachRoot, attachConfig } from './Attach';
+export type { AttachProps } from './Attach.types';
+export { tokens as attachTokens } from './Attach.tokens';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Attach/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACpD,YAAY,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,iBAAiB,CAAC"}

package/types/components/Attach/ui/Button/Button.d.ts

@@ -0,0 +1,2 @@
+export { StyledButton } from './Button.styles';
+//# sourceMappingURL=Button.d.ts.map

package/types/components/Attach/ui/Button/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/components/Attach/ui/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}

package/types/components/Attach/ui/Button/Button.styles.d.ts

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+export declare const StyledButton: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("../../../../engines/types").PropsType<import("../../../../engines/types").Variants> & ((Omit<import("react").ButtonHTMLAttributes<HTMLElement>, "value"> & Omit<import("react").AnchorHTMLAttributes<HTMLElement>, "type"> & import("../../../../types").AsProps<any> & {
+    text?: string | undefined;
+    contentLeft?: import("react").ReactNode;
+    contentPlacing?: ("default" | "relaxed") | undefined;
+    isLoading?: boolean | undefined;
+    loader?: import("react").ReactNode;
+    stretch?: boolean | undefined;
+    stretching?: ("auto" | "fixed" | "filled") | undefined;
+    square?: boolean | undefined;
+    focused?: boolean | undefined;
+    disabled?: boolean | undefined;
+    pin?: "square-square" | "square-clear" | "clear-square" | "clear-clear" | "clear-circle" | "circle-clear" | "circle-circle" | undefined;
+    view?: string | undefined;
+    size?: string | undefined;
+    outlined?: boolean | undefined;
+    shiftLeft?: boolean | undefined;
+    shiftRight?: boolean | undefined;
+    blur?: "small" | "medium" | "large" | undefined;
+} & {
+    value?: string | number | undefined;
+    contentRight?: undefined;
+} & import("react").RefAttributes<HTMLButtonElement>) | (Omit<import("react").ButtonHTMLAttributes<HTMLElement>, "value"> & Omit<import("react").AnchorHTMLAttributes<HTMLElement>, "type"> & import("../../../../types").AsProps<any> & {
+    text?: string | undefined;
+    contentLeft?: import("react").ReactNode;
+    contentPlacing?: ("default" | "relaxed") | undefined;
+    isLoading?: boolean | undefined;
+    loader?: import("react").ReactNode;
+    stretch?: boolean | undefined;
+    stretching?: ("auto" | "fixed" | "filled") | undefined;
+    square?: boolean | undefined;
+    focused?: boolean | undefined;
+    disabled?: boolean | undefined;
+    pin?: "square-square" | "square-clear" | "clear-square" | "clear-clear" | "clear-circle" | "circle-clear" | "circle-circle" | undefined;
+    view?: string | undefined;
+    size?: string | undefined;
+    outlined?: boolean | undefined;
+    shiftLeft?: boolean | undefined;
+    shiftRight?: boolean | undefined;
+    blur?: "small" | "medium" | "large" | undefined;
+} & {
+    value?: undefined;
+    contentRight?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLButtonElement>))>;
+//# sourceMappingURL=Button.styles.d.ts.map

package/types/components/Attach/ui/Button/Button.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Attach/ui/Button/Button.styles.tsx"],"names":[],"mappings":";AASA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uDAoCxB,CAAC"}

package/types/components/Attach/ui/Cell/Cell.d.ts

@@ -0,0 +1,2 @@
+export { StyledCell } from './Cell.styles';
+//# sourceMappingURL=Cell.d.ts.map

package/types/components/Attach/ui/Cell/Cell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Cell.d.ts","sourceRoot":"","sources":["../../../../../src/components/Attach/ui/Cell/Cell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC"}