@salutejs/plasma-new-hope 0.71.2-dev.0 → 0.72.0-canary.1160.8612911363.0

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

@@ -0,0 +1,133 @@
+import React, { ComponentProps, useState } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
+
+import { WithTheme } from '../../../_helpers';
+
+import { TextField } from './TextField';
+
+const onChange = action('onChange');
+const onFocus = action('onFocus');
+const onBlur = action('onBlur');
+const onSearch = action('onSearch');
+
+const sizes = ['l', 'm', 's', 'xs'];
+const views = ['default', 'positive', 'warning', 'negative'];
+const enumerationTypes = ['plain', 'chip'];
+const labelPlacements = ['outer', 'inner'];
+
+const meta: Meta<typeof TextField> = {
+    title: 'plasma_web/TextField',
+    component: TextField,
+    decorators: [WithTheme],
+    argTypes: {
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        maxLength: {
+            control: {
+                type: 'number',
+            },
+        },
+        labelPlacement: {
+            options: labelPlacements,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        enumerationType: {
+            options: enumerationTypes,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+    },
+};
+
+export default meta;
+
+type StoryPropsDefault = Omit<
+    ComponentProps<typeof TextField>,
+    | 'helperBlock'
+    | 'contentLeft'
+    | 'htmlSize'
+    | 'contentRight'
+    | 'type'
+    | 'name'
+    | 'onFocus'
+    | 'onBlur'
+    | 'onChange'
+    | 'value'
+    | 'checked'
+    | 'maxLength'
+    | 'minLength'
+    | 'required'
+> & {
+    'storybook:contentLeft': boolean;
+    'storybook:contentRight': boolean;
+};
+
+const StoryDemo = ({
+    'storybook:contentLeft': enableContentLeft,
+    'storybook:contentRight': enableContentRight,
+    view,
+    ...rest
+}: StoryPropsDefault) => {
+    const [text, setText] = useState('Значение поля');
+
+    const iconSize = rest.size === 'xs' ? 'xs' : 's';
+
+    return (
+        <TextField
+            {...rest}
+            value={text}
+            contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
+            contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
+            view={view}
+            onChange={(e) => {
+                setText(e.target.value);
+                onChange(e.target.value);
+            }}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            onSearch={onSearch}
+        />
+    );
+};
+
+export const Default: StoryObj<StoryPropsDefault> = {
+    args: {
+        id: 'example-text-field',
+        size: 'l',
+        view: 'default',
+        label: 'Лейбл',
+        labelPlacement: 'outer',
+        placeholder: 'Заполните поле',
+        leftHelper: 'Подсказка к полю',
+        enumerationType: 'plain',
+        disabled: false,
+        readOnly: false,
+        'storybook:contentLeft': true,
+        'storybook:contentRight': true,
+    },
+    render: (args) => <StoryDemo {...args} />,
+};
+
+export const Chips: StoryObj<StoryPropsDefault> = {
+    args: {
+        ...Default.args,
+        enumerationType: 'chip',
+        values: ['1 value', '2 value', '3 value', '4 value'],
+    },
+    render: (args) => <StoryDemo {...args} />,
+};

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

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _TextField = /*#__PURE__*/require("../../../../components/TextField");
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    size: 'l',
+    labelPlacement: 'outer'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-secondary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--text-secondary);", ":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);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.backgroundColorFocus, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.colorReadOnly, _TextField.textFieldTokens.backgroundColorReadOnly, _TextField.textFieldTokens.placeholderColorReadOnly, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor),
+      // TODO заменить --surface-transparent-positive на корректный токен
+      positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-colors-primary);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--text-secondary);", ":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);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.backgroundColorFocus, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.colorReadOnly, _TextField.textFieldTokens.backgroundColorReadOnly, _TextField.textFieldTokens.placeholderColorReadOnly, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor),
+      // // TODO заменить --surface-transparent-warning на корректный токен
+      warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-colors-primary);", ":var(--surface-transparent-warning);", ":var(--surface-transparent-warning-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-warning);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--text-secondary);", ":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);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.backgroundColorFocus, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.colorReadOnly, _TextField.textFieldTokens.backgroundColorReadOnly, _TextField.textFieldTokens.placeholderColorReadOnly, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor),
+      // // TODO заменить --surface-transparent-negative на корректный токен
+      negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-colors-primary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--text-secondary);", ":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);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.backgroundColorFocus, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.colorReadOnly, _TextField.textFieldTokens.backgroundColorReadOnly, _TextField.textFieldTokens.placeholderColorReadOnly, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor)
+    },
+    size: {
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":3.5rem;", ":1.0625rem 1.125rem 1.0625rem 1.125rem;", ":0.375rem;", ":0.875rem;", ":-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);"], _TextField.textFieldTokens.height, _TextField.textFieldTokens.padding, _TextField.textFieldTokens.paddingWithChips, _TextField.textFieldTokens.borderRadius, _TextField.textFieldTokens.leftContentMargin, _TextField.textFieldTokens.rightContentMargin, _TextField.textFieldTokens.fontFamily, _TextField.textFieldTokens.fontSize, _TextField.textFieldTokens.fontStyle, _TextField.textFieldTokens.fontWeight, _TextField.textFieldTokens.letterSpacing, _TextField.textFieldTokens.lineHeight, _TextField.textFieldTokens.labelOffset, _TextField.textFieldTokens.labelFontFamily, _TextField.textFieldTokens.labelFontSize, _TextField.textFieldTokens.labelFontStyle, _TextField.textFieldTokens.labelFontWeight, _TextField.textFieldTokens.labelLetterSpacing, _TextField.textFieldTokens.labelLineHeight, _TextField.textFieldTokens.leftHelperOffset, _TextField.textFieldTokens.leftHelperFontFamily, _TextField.textFieldTokens.leftHelperFontSize, _TextField.textFieldTokens.leftHelperFontStyle, _TextField.textFieldTokens.leftHelperFontWeight, _TextField.textFieldTokens.leftHelperLetterSpacing, _TextField.textFieldTokens.leftHelperLineHeight, _TextField.textFieldTokens.labelInnerPadding, _TextField.textFieldTokens.contentLabelInnerPadding, _TextField.textFieldTokens.chipGap, _TextField.textFieldTokens.chipBorderRadius, _TextField.textFieldTokens.chipWidth, _TextField.textFieldTokens.chipHeight, _TextField.textFieldTokens.chipPaddingRight, _TextField.textFieldTokens.chipPaddingLeft, _TextField.textFieldTokens.chipClearContentMarginLeft, _TextField.textFieldTokens.chipClearContentMarginRight, _TextField.textFieldTokens.chipCloseIconSize, _TextField.textFieldTokens.chipFontFamily, _TextField.textFieldTokens.chipFontSize, _TextField.textFieldTokens.chipFontStyle, _TextField.textFieldTokens.chipFontWeight, _TextField.textFieldTokens.chipLetterSpacing, _TextField.textFieldTokens.chipLineHeight),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":3rem;", ":0.875rem 1rem 0.875rem 1rem;", ":0.375rem;", ":0.75rem;", ":-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);"], _TextField.textFieldTokens.height, _TextField.textFieldTokens.padding, _TextField.textFieldTokens.paddingWithChips, _TextField.textFieldTokens.borderRadius, _TextField.textFieldTokens.leftContentMargin, _TextField.textFieldTokens.rightContentMargin, _TextField.textFieldTokens.fontFamily, _TextField.textFieldTokens.fontSize, _TextField.textFieldTokens.fontStyle, _TextField.textFieldTokens.fontWeight, _TextField.textFieldTokens.letterSpacing, _TextField.textFieldTokens.lineHeight, _TextField.textFieldTokens.labelOffset, _TextField.textFieldTokens.labelFontFamily, _TextField.textFieldTokens.labelFontSize, _TextField.textFieldTokens.labelFontStyle, _TextField.textFieldTokens.labelFontWeight, _TextField.textFieldTokens.labelLetterSpacing, _TextField.textFieldTokens.labelLineHeight, _TextField.textFieldTokens.leftHelperOffset, _TextField.textFieldTokens.leftHelperFontFamily, _TextField.textFieldTokens.leftHelperFontSize, _TextField.textFieldTokens.leftHelperFontStyle, _TextField.textFieldTokens.leftHelperFontWeight, _TextField.textFieldTokens.leftHelperLetterSpacing, _TextField.textFieldTokens.leftHelperLineHeight, _TextField.textFieldTokens.labelInnerPadding, _TextField.textFieldTokens.contentLabelInnerPadding, _TextField.textFieldTokens.chipGap, _TextField.textFieldTokens.chipBorderRadius, _TextField.textFieldTokens.chipWidth, _TextField.textFieldTokens.chipHeight, _TextField.textFieldTokens.chipPaddingRight, _TextField.textFieldTokens.chipPaddingLeft, _TextField.textFieldTokens.chipClearContentMarginLeft, _TextField.textFieldTokens.chipClearContentMarginRight, _TextField.textFieldTokens.chipCloseIconSize, _TextField.textFieldTokens.chipFontFamily, _TextField.textFieldTokens.chipFontSize, _TextField.textFieldTokens.chipFontStyle, _TextField.textFieldTokens.chipFontWeight, _TextField.textFieldTokens.chipLetterSpacing, _TextField.textFieldTokens.chipLineHeight),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":0.6875rem 0.875rem 0.6875rem 0.875rem;", ":0.375rem;", ":0.625rem;", ":-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);"], _TextField.textFieldTokens.height, _TextField.textFieldTokens.padding, _TextField.textFieldTokens.paddingWithChips, _TextField.textFieldTokens.borderRadius, _TextField.textFieldTokens.leftContentMargin, _TextField.textFieldTokens.rightContentMargin, _TextField.textFieldTokens.fontFamily, _TextField.textFieldTokens.fontSize, _TextField.textFieldTokens.fontStyle, _TextField.textFieldTokens.fontWeight, _TextField.textFieldTokens.letterSpacing, _TextField.textFieldTokens.lineHeight, _TextField.textFieldTokens.labelOffset, _TextField.textFieldTokens.labelFontFamily, _TextField.textFieldTokens.labelFontSize, _TextField.textFieldTokens.labelFontStyle, _TextField.textFieldTokens.labelFontWeight, _TextField.textFieldTokens.labelLetterSpacing, _TextField.textFieldTokens.labelLineHeight, _TextField.textFieldTokens.leftHelperOffset, _TextField.textFieldTokens.leftHelperFontFamily, _TextField.textFieldTokens.leftHelperFontSize, _TextField.textFieldTokens.leftHelperFontStyle, _TextField.textFieldTokens.leftHelperFontWeight, _TextField.textFieldTokens.leftHelperLetterSpacing, _TextField.textFieldTokens.leftHelperLineHeight, _TextField.textFieldTokens.labelInnerPadding, _TextField.textFieldTokens.contentLabelInnerPadding, _TextField.textFieldTokens.chipGap, _TextField.textFieldTokens.chipBorderRadius, _TextField.textFieldTokens.chipWidth, _TextField.textFieldTokens.chipHeight, _TextField.textFieldTokens.chipPaddingRight, _TextField.textFieldTokens.chipPaddingLeft, _TextField.textFieldTokens.chipClearContentMarginLeft, _TextField.textFieldTokens.chipClearContentMarginRight, _TextField.textFieldTokens.chipCloseIconSize, _TextField.textFieldTokens.chipFontFamily, _TextField.textFieldTokens.chipFontSize, _TextField.textFieldTokens.chipFontStyle, _TextField.textFieldTokens.chipFontWeight, _TextField.textFieldTokens.chipLetterSpacing, _TextField.textFieldTokens.chipLineHeight),
+      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":0.5625rem 0.625rem 0.5625rem 0.625rem;", ":0.375rem;", ":0.5rem;", ":-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);"], _TextField.textFieldTokens.height, _TextField.textFieldTokens.padding, _TextField.textFieldTokens.paddingWithChips, _TextField.textFieldTokens.borderRadius, _TextField.textFieldTokens.leftContentMargin, _TextField.textFieldTokens.rightContentMargin, _TextField.textFieldTokens.fontFamily, _TextField.textFieldTokens.fontSize, _TextField.textFieldTokens.fontStyle, _TextField.textFieldTokens.fontWeight, _TextField.textFieldTokens.letterSpacing, _TextField.textFieldTokens.lineHeight, _TextField.textFieldTokens.labelOffset, _TextField.textFieldTokens.labelFontFamily, _TextField.textFieldTokens.labelFontSize, _TextField.textFieldTokens.labelFontStyle, _TextField.textFieldTokens.labelFontWeight, _TextField.textFieldTokens.labelLetterSpacing, _TextField.textFieldTokens.labelLineHeight, _TextField.textFieldTokens.leftHelperOffset, _TextField.textFieldTokens.leftHelperFontFamily, _TextField.textFieldTokens.leftHelperFontSize, _TextField.textFieldTokens.leftHelperFontStyle, _TextField.textFieldTokens.leftHelperFontWeight, _TextField.textFieldTokens.leftHelperLetterSpacing, _TextField.textFieldTokens.leftHelperLineHeight, _TextField.textFieldTokens.labelInnerPadding, _TextField.textFieldTokens.contentLabelInnerPadding, _TextField.textFieldTokens.chipGap, _TextField.textFieldTokens.chipBorderRadius, _TextField.textFieldTokens.chipWidth, _TextField.textFieldTokens.chipHeight, _TextField.textFieldTokens.chipPaddingRight, _TextField.textFieldTokens.chipPaddingLeft, _TextField.textFieldTokens.chipClearContentMarginLeft, _TextField.textFieldTokens.chipClearContentMarginRight, _TextField.textFieldTokens.chipCloseIconSize, _TextField.textFieldTokens.chipFontFamily, _TextField.textFieldTokens.chipFontSize, _TextField.textFieldTokens.chipFontStyle, _TextField.textFieldTokens.chipFontWeight, _TextField.textFieldTokens.chipLetterSpacing, _TextField.textFieldTokens.chipLineHeight)
+    },
+    labelPlacement: {
+      inner: [_TextField.textField_labelPlacement_inner, /*#__PURE__*/(0, _styledComponents.css)(["&.", "{", ":var(--plasma-input-label-color,var(--plasma-input-placeholder-color,var(--plasma-colors-secondary)));", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);}"], _TextField.textField_labelPlacement_inner, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.labelInnerFontFamily, _TextField.textFieldTokens.labelInnerFontSize, _TextField.textFieldTokens.labelInnerFontStyle, _TextField.textFieldTokens.labelInnerFontWeight, _TextField.textFieldTokens.labelInnerLetterSpacing, _TextField.textFieldTokens.labelInnerLineHeight)],
+      outer: [_TextField.textField_labelPlacement_outer, /*#__PURE__*/(0, _styledComponents.css)(["&.", "{}"], _TextField.textField_labelPlacement_outer)]
+    },
+    disabled: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _TextField.textFieldTokens.disabledOpacity)
+    },
+    // TODO заменить --surface-transparent-primary на корректный токен
+    readOnly: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);"], _TextField.textFieldTokens.colorReadOnly, _TextField.textFieldTokens.backgroundColorReadOnly, _TextField.textFieldTokens.placeholderColorReadOnly, _TextField.textFieldTokens.leftHelperColorReadOnly, _TextField.textFieldTokens.labelColorReadOnly)
+    }
+  }
+};

package/styled-components/cjs/examples/sds_engineer/components/TextField/TextField.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextField = void 0;
+var _engines = /*#__PURE__*/require("../../../../engines");
+var _TextField = /*#__PURE__*/require("../../../../components/TextField");
+var _TextField2 = /*#__PURE__*/require("./TextField.config");
+var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_TextField.textFieldConfig, _TextField2.config);
+var TextField = exports.TextField = /*#__PURE__*/(0, _engines.component)(mergedConfig);

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

@@ -0,0 +1,133 @@
+import React, { ComponentProps, useState } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
+
+import { WithTheme } from '../../../_helpers';
+
+import { TextField } from './TextField';
+
+const onChange = action('onChange');
+const onFocus = action('onFocus');
+const onBlur = action('onBlur');
+const onSearch = action('onSearch');
+
+const sizes = ['l', 'm', 's', 'xs'];
+const views = ['default', 'positive', 'warning', 'negative'];
+const enumerationTypes = ['plain', 'chip'];
+const labelPlacements = ['outer', 'inner'];
+
+const meta: Meta<typeof TextField> = {
+    title: 'sds_engineer/TextField',
+    component: TextField,
+    decorators: [WithTheme],
+    argTypes: {
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        maxLength: {
+            control: {
+                type: 'number',
+            },
+        },
+        labelPlacement: {
+            options: labelPlacements,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        enumerationType: {
+            options: enumerationTypes,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+    },
+};
+
+export default meta;
+
+type StoryPropsDefault = Omit<
+    ComponentProps<typeof TextField>,
+    | 'helperBlock'
+    | 'contentLeft'
+    | 'htmlSize'
+    | 'contentRight'
+    | 'type'
+    | 'name'
+    | 'onFocus'
+    | 'onBlur'
+    | 'onChange'
+    | 'value'
+    | 'checked'
+    | 'maxLength'
+    | 'minLength'
+    | 'required'
+> & {
+    'storybook:contentLeft': boolean;
+    'storybook:contentRight': boolean;
+};
+
+const StoryDemo = ({
+    'storybook:contentLeft': enableContentLeft,
+    'storybook:contentRight': enableContentRight,
+    view,
+    ...rest
+}: StoryPropsDefault) => {
+    const [text, setText] = useState('Значение поля');
+
+    const iconSize = rest.size === 'xs' ? 'xs' : 's';
+
+    return (
+        <TextField
+            {...rest}
+            value={text}
+            contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
+            contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
+            view={view}
+            onChange={(e) => {
+                setText(e.target.value);
+                onChange(e.target.value);
+            }}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            onSearch={onSearch}
+        />
+    );
+};
+
+export const Default: StoryObj<StoryPropsDefault> = {
+    args: {
+        id: 'example-text-field',
+        size: 'l',
+        view: 'default',
+        label: 'Лейбл',
+        labelPlacement: 'outer',
+        placeholder: 'Заполните поле',
+        leftHelper: 'Подсказка к полю',
+        enumerationType: 'plain',
+        disabled: false,
+        readOnly: false,
+        'storybook:contentLeft': true,
+        'storybook:contentRight': true,
+    },
+    render: (args) => <StoryDemo {...args} />,
+};
+
+export const Chips: StoryObj<StoryPropsDefault> = {
+    args: {
+        ...Default.args,
+        enumerationType: 'chip',
+        values: ['1 value', '2 value', '3 value', '4 value'],
+    },
+    render: (args) => <StoryDemo {...args} />,
+};

package/styled-components/es/components/Cell/Cell.js

@@ -24,8 +24,6 @@ export var cellRoot = function cellRoot(Root) {
       _ref$stretching = _ref.stretching,
       stretching = _ref$stretching === void 0 ? 'filled' : _ref$stretching;
     var stretchingClass = classes["".concat(stretching, "Stretching")];
-
-    // Импорт  старых свойств
     var titleText = title || description;
     var contentLeftDeprecated = contentLeft || content;
     return /*#__PURE__*/React.createElement(Root, {

package/styled-components/es/components/TextField/TextField.js

@@ -1,91 +1,221 @@
-var _excluded = ["contentLeft", "contentRight", "children", "label", "labelPlacement", "placeholder", "leftHelper", "view", "size", "disabled", "onChange", "onSearch"];
+var _excluded = ["id", "contentLeft", "contentRight", "label", "labelPlacement", "placeholder", "leftHelper", "enumerationType", "view", "size", "readOnly", "disabled", "values", "onChange", "onChangeChips", "onSearch"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React, { forwardRef } from 'react';
-import { css } from 'styled-components';
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import { safeUseId } from '@salutejs/plasma-core';
-import { base as size } from './_size/base';
-import { base as view } from './_view/base';
-import { base as disabled } from './_disabled/base';
-import { base as labelPlacement } from './_label-placement/base';
-import { Input, LeftHelper, Label, InputWrapper, InputLabelWrapper } from './TextField.styles';
-var base = /*#__PURE__*/css(["display:block;"]);
+import { css } from 'styled-components';
+import { cx } from '../../utils';
+import { base as sizeCSS } from './variations/_size/base';
+import { base as viewCSS } from './variations/_view/base';
+import { base as disabledCSS } from './variations/_disabled/base';
+import { base as readOnlyCSS } from './variations/_read-only/base';
+import { base as labelPlacementCSS } from './variations/_label-placement/base';
+import { Input, LeftHelper, Label, InputWrapper, InputLabelWrapper, StyledContentLeft, StyledContentRight, StyledChips } from './TextField.styles';
+import { classes } from './TextField.tokens';
+import { TextFieldChip } from './ui';
+import { useKeyNavigation } from './hooks/useKeyNavigation';
+export var base = /*#__PURE__*/css(["display:block;overflow:hidden;"]);
 export var textFieldRoot = function textFieldRoot(Root) {
-  return /*#__PURE__*/forwardRef(function (props, ref) {
-    var contentLeft = props.contentLeft,
-      contentRight = props.contentRight,
-      children = props.children,
-      label = props.label,
-      labelPlacement = props.labelPlacement,
-      placeholder = props.placeholder,
-      leftHelper = props.leftHelper,
-      view = props.view,
-      size = props.size,
-      disabled = props.disabled,
-      onChange = props.onChange,
-      onSearch = props.onSearch,
-      rest = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/forwardRef(function (_ref, ref) {
+    var id = _ref.id,
+      contentLeft = _ref.contentLeft,
+      contentRight = _ref.contentRight,
+      label = _ref.label,
+      labelPlacement = _ref.labelPlacement,
+      placeholder = _ref.placeholder,
+      leftHelper = _ref.leftHelper,
+      _ref$enumerationType = _ref.enumerationType,
+      enumerationType = _ref$enumerationType === void 0 ? 'plain' : _ref$enumerationType,
+      view = _ref.view,
+      size = _ref.size,
+      _ref$readOnly = _ref.readOnly,
+      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      values = _ref.values,
+      onChange = _ref.onChange,
+      onChangeChips = _ref.onChangeChips,
+      onSearch = _ref.onSearch,
+      rest = _objectWithoutProperties(_ref, _excluded);
+    var contentRef = useRef(null);
+    var inputRef = useRef(null);
+    var chipsRefs = useRef([]);
+    var controlledRefs = {
+      contentRef: contentRef,
+      inputRef: inputRef,
+      chipsRefs: chipsRefs
+    };
+    var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      chips = _useState2[0],
+      setChips = _useState2[1];
+    var uniqId = safeUseId();
+    var innerId = id || uniqId;
+    var labelId = safeUseId();
+    var helperTextId = safeUseId();
+    var isChipEnumeration = enumerationType === 'chip';
+    var hideLabel = (size === 'xs' || isChipEnumeration) && labelPlacement === 'inner';
+    var labelInside = size !== 'xs' && labelPlacement === 'inner';
+    var innerLabelPlacementValue = hideLabel ? 'outer' : labelPlacement;
+    var innerPlaceholderValue = hideLabel ? label : placeholder;
+    var innerLabelValue = hideLabel ? undefined : label;
+    var isChipsVisible = isChipEnumeration && (chips === null || chips === void 0 ? void 0 : chips.length);
+    var withHasChips = isChipsVisible ? classes.hasChips : undefined;
+    var wrapperWithoutLeftContent = !contentLeft && isChipsVisible ? classes.hasEmptyContentLeft : undefined;
+    var wrapperWithoutRightContent = !contentRight && isChipsVisible ? classes.hasEmptyContentRight : undefined;
     var handleChange = function handleChange(event) {
+      if (disabled || readOnly) {
+        return;
+      }
       var _event$target = event.target,
         maxLength = _event$target.maxLength,
         value = _event$target.value;
-      if (!onChange || maxLength !== -1 && value.length > maxLength) {
+      if (maxLength !== -1 && value.length > maxLength) {
+        return;
+      }
+      onChange === null || onChange === void 0 ? void 0 : onChange(event);
+    };
+    var updateChips = function updateChips(newChips, newValues) {
+      setChips(newChips);
+      onChangeChips === null || onChangeChips === void 0 ? void 0 : onChangeChips(newValues);
+    };
+    var _useKeyNavigation = useKeyNavigation({
+        controlledRefs: controlledRefs,
+        disabled: disabled,
+        readOnly: readOnly,
+        chips: chips,
+        enumerationType: enumerationType,
+        updateChips: updateChips,
+        onSearch: onSearch,
+        onChange: onChange
+      }),
+      handleInputKeydown = _useKeyNavigation.handleInputKeydown,
+      handleChipKeyDown = _useKeyNavigation.handleChipKeyDown,
+      onChipClear = _useKeyNavigation.onChipClear,
+      handleContentKeyDown = _useKeyNavigation.handleContentKeyDown;
+    var onChipClick = function onChipClick(event) {
+      return event.stopPropagation();
+    };
+    var handleInputFocus = function handleInputFocus() {
+      if (readOnly || disabled || !(inputRef !== null && inputRef !== void 0 && inputRef.current)) {
         return;
       }
-      onChange(event);
+      inputRef.current.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+        inline: 'center'
+      });
+      inputRef.current.focus({
+        preventScroll: true
+      });
     };
-    var handleKeyUp = function handleKeyUp(event) {
-      if (event.key === 'Enter' && onSearch) {
-        onSearch(event.target.value, event);
+    var getRef = function getRef(element, index) {
+      if (element && chipsRefs !== null && chipsRefs !== void 0 && chipsRefs.current) {
+        chipsRefs.current[index] = element;
       }
     };
-    var labelInside = labelPlacement === 'inner';
-    var lableId = safeUseId();
-    var helperTextId = safeUseId();
+    useEffect(function () {
+      if (!isChipEnumeration && !(values !== null && values !== void 0 && values.length)) {
+        return;
+      }
+      var newChips = (values === null || values === void 0 ? void 0 : values.map(function (value, index) {
+        return {
+          id: "".concat(index, "_").concat(value),
+          text: value
+        };
+      })) || [];
+      setChips(newChips);
+    }, [isChipEnumeration, values]);
     return /*#__PURE__*/React.createElement(Root, {
+      ref: ref,
       view: view,
       size: size,
       disabled: disabled,
-      labelPlacement: labelPlacement
-    }, labelInside || label && /*#__PURE__*/React.createElement(Label, {
-      id: lableId
-    }, label), /*#__PURE__*/React.createElement(InputWrapper, null, contentLeft, /*#__PURE__*/React.createElement(InputLabelWrapper, null, /*#__PURE__*/React.createElement(Input, _extends({}, rest, {
-      ref: ref,
-      "aria-labelledby": lableId,
+      readOnly: !disabled && readOnly,
+      labelPlacement: innerLabelPlacementValue,
+      onClick: handleInputFocus
+    }, labelInside || innerLabelValue && /*#__PURE__*/React.createElement(Label, {
+      id: labelId,
+      htmlFor: id
+    }, innerLabelValue), /*#__PURE__*/React.createElement(InputWrapper, {
+      className: cx(withHasChips, wrapperWithoutLeftContent, wrapperWithoutRightContent)
+    }, contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), /*#__PURE__*/React.createElement(InputLabelWrapper, {
+      tabIndex: -1,
+      ref: contentRef,
+      onKeyDown: handleContentKeyDown,
+      className: withHasChips
+    }, isChipEnumeration && Boolean(chips === null || chips === void 0 ? void 0 : chips.length) && /*#__PURE__*/React.createElement(StyledChips, null, chips === null || chips === void 0 ? void 0 : chips.map(function (_ref2, index) {
+      var chipId = _ref2.id,
+        text = _ref2.text;
+      return /*#__PURE__*/React.createElement(TextFieldChip, {
+        ref: function ref(element) {
+          return getRef(element, index);
+        },
+        chipId: chipId,
+        key: "".concat(chipId, "_").concat(index),
+        disabled: disabled,
+        readOnly: readOnly,
+        value: text,
+        text: text,
+        onKeyDown: function onKeyDown(event) {
+          return handleChipKeyDown(event, chipId);
+        },
+        onClear: function onClear() {
+          return onChipClear(chipId);
+        },
+        onClick: onChipClick
+      });
+    })), /*#__PURE__*/React.createElement(Input, _extends({}, rest, {
+      ref: inputRef,
+      id: innerId,
+      "aria-labelledby": labelId,
       "aria-describedby": helperTextId,
-      placeholder: placeholder,
+      placeholder: innerPlaceholderValue,
       disabled: disabled,
+      readOnly: !disabled && readOnly,
       onChange: handleChange,
-      onKeyUp: handleKeyUp
+      onKeyDown: handleInputKeydown
     })), labelInside && /*#__PURE__*/React.createElement(Label, {
-      id: lableId
-    }, label)), contentRight), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, {
+      id: labelId,
+      htmlFor: innerId
+    }, innerLabelValue)), contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight)), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, {
       id: helperTextId
     }, leftHelper));
   });
 };
 export var textFieldConfig = {
   name: 'TextField',
-  tag: 'label',
+  tag: 'div',
   layout: textFieldRoot,
   base: base,
   variations: {
     view: {
-      css: view
+      css: viewCSS
     },
     size: {
-      css: size
+      css: sizeCSS
     },
     disabled: {
-      css: disabled,
+      css: disabledCSS,
+      attrs: true
+    },
+    readOnly: {
+      css: readOnlyCSS,
       attrs: true
     },
     labelPlacement: {
-      css: labelPlacement
+      css: labelPlacementCSS
     }
   },
   defaults: {
-    size: 'm'
+    size: 'm',
+    view: 'default'
   }
 };