@salutejs/plasma-new-hope 0.262.0-canary.1768.13259356377.0 → 0.262.0-canary.1770.13273833712.0

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

@@ -8,12 +8,14 @@ import { textAreaConfig } from '../../../../components/TextArea';
 import { mergeConfig } from '../../../../engines';
 import { WithTheme, argTypesFromConfig } from '../../../_helpers';
 import type { PopoverPlacement } from '../Popover/Popover';
+import { IconLock } from '../../../../components/_Icon';
 
 import { config } from './TextArea.config';
 import { TextArea } from './TextArea';
 
 const labelPlacements = ['inner', 'outer'];
 const sizes = ['xs', 's', 'm', 'l'];
+const views = ['default', 'positive', 'warning', 'negative'];
 const hintViews = ['default'];
 const hintSizes = ['m', 's'];
 const hintTriggers = ['hover', 'click'];
@@ -37,6 +39,16 @@ const placements: Array<PopoverPlacement> = [
     'auto',
 ];
 
+const getIcon = (IconComponent: React.ReactElement, size: string, readOnly = false) => {
+    const iconSize = size === 'xs' ? 'xs' : 's';
+
+    if (readOnly) {
+        return <IconLock size={iconSize} color="var(--text-secondary)" style={{ opacity: 0.4 }} />;
+    }
+
+    return <IconComponent size={iconSize} color="inherit" />;
+};
+
 type StoryTextAreaPropsCustom = {
     hasHint?: boolean;
     enableContentRight?: boolean;
@@ -60,19 +72,25 @@ const meta: Meta<StoryTextAreaProps> = {
             control: {
                 type: 'boolean',
             },
-            if: { arg: 'optional', truthy: false },
+            if: {
+                arg: 'optional',
+                truthy: false,
+            },
         },
         optional: {
             control: {
                 type: 'boolean',
             },
-            if: { arg: 'required', truthy: false },
+            if: {
+                arg: 'required',
+                truthy: false,
+            },
         },
         size: {
             options: sizes,
             defaultValue: 'm',
             control: {
-                type: 'select',
+                type: 'inline-radio',
             },
         },
         view: {
@@ -91,19 +109,28 @@ const meta: Meta<StoryTextAreaProps> = {
             control: {
                 type: 'boolean',
             },
-            if: { arg: 'clear', truthy: true },
+            if: {
+                arg: 'clear',
+                truthy: true,
+            },
         },
         cols: {
             control: {
                 type: 'number',
             },
-            if: { arg: 'clear', truthy: false },
+            if: {
+                arg: 'clear',
+                truthy: false,
+            },
         },
         rows: {
             control: {
                 type: 'number',
             },
-            if: { arg: 'clear', truthy: false },
+            if: {
+                arg: 'clear',
+                truthy: false,
+            },
         },
         hasHint: {
             control: {
@@ -112,47 +139,65 @@ const meta: Meta<StoryTextAreaProps> = {
         },
         hintText: {
             control: { type: 'text' },
-            if: { arg: 'hasHint', truthy: true },
+            if: {
+                arg: 'hasHint',
+                truthy: true,
+            },
         },
         hintView: {
             options: hintViews,
             control: {
                 type: 'select',
             },
-            if: { arg: 'hasHint', truthy: true },
+            if: {
+                arg: 'hasHint',
+                truthy: true,
+            },
         },
         hintSize: {
             options: hintSizes,
             control: {
                 type: 'select',
             },
-            if: { arg: 'hasHint', truthy: true },
+            if: {
+                arg: 'hasHint',
+                truthy: true,
+            },
         },
         hintTrigger: {
             options: hintTriggers,
             control: {
                 type: 'inline-radio',
             },
-            if: { arg: 'hasHint', truthy: true },
+            if: {
+                arg: 'hasHint',
+                truthy: true,
+            },
         },
         hintPlacement: {
             options: placements,
             control: {
                 type: 'select',
             },
-            if: { arg: 'hasHint', truthy: true },
+            if: {
+                arg: 'hasHint',
+                truthy: true,
+            },
             mappers: placements,
         },
         hintHasArrow: {
             control: { type: 'boolean' },
-            if: { arg: 'hasHint', truthy: true },
+            if: {
+                arg: 'hasHint',
+                truthy: true,
+            },
         },
         hintWidth: {
             control: { type: 'text' },
-            if: { arg: 'hasHint', truthy: true },
-        },
-        helperText: {
-            control: { type: 'text' },
+            if: {
+                arg: 'hasHint',
+                truthy: true,
+            },
         },
         width: {
             control: { type: 'text' },
@@ -171,6 +216,7 @@ const meta: Meta<StoryTextAreaProps> = {
         },
         ...disableProps([
             'helperBlock',
+            'helperText',
             '$isFocused',
             'contentRight',
             'autoComplete',
@@ -194,6 +240,7 @@ const meta: Meta<StoryTextAreaProps> = {
             'hintOffset',
             'hintContentLeft',
             'hintView',
+            'hintOpened',
         ]),
     },
     args: {
@@ -237,19 +284,24 @@ const onBlur = action('onBlur');
 const StoryDefault = (props: StoryTextAreaProps) => {
     const [value, setValue] = useState('Значение поля');
 
-    const iconSize = props.size === 'xs' ? 'xs' : 's';
-
     return (
         <TextArea
             value={value}
-            contentRight={props.enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
+            contentRight={
+                props.enableContentRight || props.readOnly
+                    ? getIcon(IconPlaceholder, props.size, props.readOnly)
+                    : undefined
+            }
             onChange={(e) => {
                 setValue(e.target.value);
                 onChange(e);
             }}
             onFocus={onFocus}
             onBlur={onBlur}
-            style={{ width: '70%', margin: '0 auto' }}
+            style={{
+                width: '70%',
+                margin: '0 auto',
+            }}
             {...props}
         />
     );

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

@@ -33,12 +33,12 @@ var config = exports.config = {
       "true": /*#__PURE__*/(0, _styledComponents.css)([""])
     },
     chipView: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--inverse-text-secondary);", ":0.72;"], _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.chipCloseIconColor, _TextField.textFieldTokens.chipOpacityReadonly),
-      secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":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);", ":var(--text-secondary);", ":0.72;"], _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.chipCloseIconColor, _TextField.textFieldTokens.chipOpacityReadonly),
-      accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":0.72;"], _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.chipCloseIconColor, _TextField.textFieldTokens.chipOpacityReadonly),
-      positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":0.72;"], _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.chipCloseIconColor, _TextField.textFieldTokens.chipOpacityReadonly),
-      warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":0.72;"], _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.chipCloseIconColor, _TextField.textFieldTokens.chipOpacityReadonly),
-      negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":0.72;"], _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.chipCloseIconColor, _TextField.textFieldTokens.chipOpacityReadonly)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--inverse-text-secondary);", ":1;"], _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.chipCloseIconColor, _TextField.textFieldTokens.chipOpacityReadonly),
+      secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":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);", ":var(--text-secondary);", ":1;"], _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.chipCloseIconColor, _TextField.textFieldTokens.chipOpacityReadonly),
+      accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":1;"], _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.chipCloseIconColor, _TextField.textFieldTokens.chipOpacityReadonly),
+      positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":1;"], _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.chipCloseIconColor, _TextField.textFieldTokens.chipOpacityReadonly),
+      warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":1;"], _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.chipCloseIconColor, _TextField.textFieldTokens.chipOpacityReadonly),
+      negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":1;"], _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.chipCloseIconColor, _TextField.textFieldTokens.chipOpacityReadonly)
     },
     hintView: {
       "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-solid-card-brightness);", ":var(--shadow-down-hard-m,0px 4px 12px 0px rgba(0,0,0,0.16),0px 1px 4px 0px rgba(0,0,0,0.08));", ":var(--text-primary);", ":var(--surface-solid-card);"], _TextField.textFieldTokens.tooltipBackgroundColor, _TextField.textFieldTokens.tooltipBoxShadow, _TextField.textFieldTokens.tooltipColor, _TextField.textFieldTokens.tooltipArrowBackground)
@@ -51,7 +51,7 @@ var config = exports.config = {
       "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _TextField.textFieldTokens.disabledOpacity)
     },
     readOnly: {
-      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--surface-transparent-tertiary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);"], _TextField.textFieldTokens.colorReadOnly, _TextField.textFieldTokens.backgroundColorReadOnly, _TextField.textFieldTokens.borderColorReadOnly, _TextField.textFieldTokens.placeholderColorReadOnly, _TextField.textFieldTokens.leftHelperColorReadOnly, _TextField.textFieldTokens.titleCaptionColorReadOnly, _TextField.textFieldTokens.labelColorReadOnly)
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--surface-transparent-primary);"], _TextField.textFieldTokens.colorReadOnly, _TextField.textFieldTokens.backgroundColorReadOnly, _TextField.textFieldTokens.placeholderColorReadOnly, _TextField.textFieldTokens.leftHelperColorReadOnly, _TextField.textFieldTokens.titleCaptionColorReadOnly, _TextField.textFieldTokens.labelColorReadOnly, _TextField.textFieldTokens.dividerColorReadOnly)
     }
   }
 };

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

@@ -4,7 +4,7 @@ import { action } from '@storybook/addon-actions';
 import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
 
 import { WithTheme } from '../../../_helpers';
-import { IconCross } from '../../../../components/_Icon';
+import { IconCross, IconLock } from '../../../../components/_Icon';
 import type { PopoverPlacement } from '../Popover/Popover';
 
 import { TextField } from './TextField';
@@ -43,6 +43,16 @@ const placements: Array<PopoverPlacement> = [
     'auto',
 ];
 
+const getIcon = (IconComponent: React.ReactElement, size: string, readOnly = false) => {
+    const iconSize = size === 'xs' ? 'xs' : 's';
+
+    if (readOnly) {
+        return <IconLock size={iconSize} color="var(--text-secondary)" style={{ opacity: 0.4 }} />;
+    }
+
+    return <IconComponent size={iconSize} color="inherit" />;
+};
+
 const meta: Meta<typeof TextField> = {
     title: 'web/Data Entry/TextField',
     component: TextField,
@@ -58,19 +68,28 @@ const meta: Meta<typeof TextField> = {
             control: {
                 type: 'boolean',
             },
-            if: { arg: 'optional', truthy: false },
+            if: {
+                arg: 'optional',
+                truthy: false,
+            },
         },
         optional: {
             control: {
                 type: 'boolean',
             },
-            if: { arg: 'required', truthy: false },
+            if: {
+                arg: 'required',
+                truthy: false,
+            },
         },
         hasDivider: {
             control: {
                 type: 'boolean',
             },
-            if: { arg: 'clear', truthy: true },
+            if: {
+                arg: 'clear',
+                truthy: true,
+            },
         },
         view: {
             options: views,
@@ -93,7 +112,10 @@ const meta: Meta<typeof TextField> = {
             control: {
                 type: 'boolean',
             },
-            if: { arg: 'labelPlacement', eq: 'inner' },
+            if: {
+                arg: 'labelPlacement',
+                eq: 'inner',
+            },
         },
         size: {
             options: sizes,
@@ -103,51 +125,75 @@ const meta: Meta<typeof TextField> = {
         },
         hintText: {
             control: { type: 'text' },
-            if: { arg: 'hasHint', truthy: true },
+            if: {
+                arg: 'hasHint',
+                truthy: true,
+            },
         },
         hintView: {
             options: hintViews,
             control: {
                 type: 'select',
             },
-            if: { arg: 'hasHint', truthy: true },
+            if: {
+                arg: 'hasHint',
+                truthy: true,
+            },
         },
         hintSize: {
             options: hintSizes,
             control: {
                 type: 'select',
             },
-            if: { arg: 'hasHint', truthy: true },
+            if: {
+                arg: 'hasHint',
+                truthy: true,
+            },
         },
         hintTargetPlacement: {
             options: hintTargetPlacements,
             control: {
                 type: 'inline-radio',
             },
-            if: { arg: 'hasHint', truthy: true },
+            if: {
+                arg: 'hasHint',
+                truthy: true,
+            },
         },
         hintTrigger: {
             options: hintTriggers,
             control: {
                 type: 'inline-radio',
             },
-            if: { arg: 'hasHint', truthy: true },
+            if: {
+                arg: 'hasHint',
+                truthy: true,
+            },
         },
         hintPlacement: {
             options: placements,
             control: {
                 type: 'select',
             },
-            if: { arg: 'hasHint', truthy: true },
+            if: {
+                arg: 'hasHint',
+                truthy: true,
+            },
             mappers: placements,
         },
         hintHasArrow: {
             control: { type: 'boolean' },
-            if: { arg: 'hasHint', truthy: true },
+            if: {
+                arg: 'hasHint',
+                truthy: true,
+            },
         },
         hintWidth: {
             control: { type: 'text' },
-            if: { arg: 'hasHint', truthy: true },
+            if: {
+                arg: 'hasHint',
+                truthy: true,
+            },
         },
         chipType: {
             control: 'select',
@@ -183,19 +229,28 @@ type StoryPropsDefault = Omit<
     enableContentRight: boolean;
 };
 
-const StoryDemo = ({ enableContentLeft, enableContentRight, view, ...rest }: StoryPropsDefault) => {
+const StoryDemo = ({ enableContentLeft, enableContentRight, view, readOnly, ...rest }: StoryPropsDefault) => {
     const [text, setText] = useState('Значение поля');
 
-    const iconSize = rest.size === 'xs' ? 'xs' : 's';
+    const contentRight = enableContentRight || readOnly ? getIcon(IconCross, rest.size, readOnly) : undefined;
 
     return (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem', width: '70%', margin: '0 auto' }}>
+        <div
+            style={{
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '2rem',
+                width: '70%',
+                margin: '0 auto',
+            }}
+        >
             <TextField
                 {...rest}
                 enumerationType="plain"
                 value={text}
-                contentLeft={enableContentLeft ? <IconCross color="inherit" size={iconSize} /> : undefined}
-                contentRight={enableContentRight ? <IconCross color="inherit" size={iconSize} /> : undefined}
+                readOnly={readOnly}
+                contentLeft={enableContentLeft ? getIcon(IconPlaceholder, rest.size) : undefined}
+                contentRight={contentRight}
                 view={view}
                 onChange={(e) => {
                     setText(e.target.value);
@@ -211,9 +266,10 @@ const StoryDemo = ({ enableContentLeft, enableContentRight, view, ...rest }: Sto
                 label="Uncontrolled TextField"
                 defaultValue="Дефолтное значение"
                 enumerationType="plain"
-                contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
-                contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
+                contentLeft={enableContentLeft ? getIcon(IconPlaceholder, rest.size) : undefined}
+                contentRight={contentRight}
                 view={view}
+                readOnly={readOnly}
                 onFocus={onFocus}
                 onBlur={onBlur}
                 onSearch={onSearch}
@@ -285,10 +341,10 @@ type StoryPropsChips = Omit<
     enableContentRight: boolean;
 };
 
-const StoryChips = ({ enableContentLeft, enableContentRight, view, ...rest }: StoryPropsChips) => {
+const StoryChips = ({ enableContentLeft, enableContentRight, view, readOnly, ...rest }: StoryPropsChips) => {
     const [text, setText] = useState('Значение поля');
 
-    const iconSize = rest.size === 'xs' ? 'xs' : 's';
+    const contentRight = enableContentRight || readOnly ? getIcon(IconCross, rest.size, readOnly) : undefined;
 
     const validateChip = (value) => (value === '1 value' ? { view: 'negative' } : {});
 
@@ -297,9 +353,10 @@ const StoryChips = ({ enableContentLeft, enableContentRight, view, ...rest }: St
             {...rest}
             enumerationType="chip"
             value={text}
-            contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
-            contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
+            contentLeft={enableContentLeft ? getIcon(IconPlaceholder, rest.size) : undefined}
+            contentRight={contentRight}
             view={view}
+            readOnly={readOnly}
             onChange={(e) => {
                 setText(e.target.value);
                 onChange(e.target.value);
@@ -308,7 +365,10 @@ const StoryChips = ({ enableContentLeft, enableContentRight, view, ...rest }: St
             onBlur={onBlur}
             onChangeChips={onChipsChange}
             chipValidator={validateChip}
-            style={{ width: '70%', margin: '0 auto' }}
+            style={{
+                width: '70%',
+                margin: '0 auto',
+            }}
         />
     );
 };

package/styled-components/es/components/Range/Range.tokens.js

@@ -20,6 +20,7 @@ export var tokens = {
   /** Токены разделителя */
   dividerColor: '--plasma-range__divider-color',
   dividerColorReadOnly: '--plasma-range__divider-color-readonly',
+  dividerOpacityReadOnly: '--plasma-range__divider-opacity-readonly',
   dividerPadding: '--plasma-range__divider-padding',
   dividerFontFamily: '--plasma-range__divider-font-family',
   dividerFontStyle: '--plasma-range__divider-font-style',
@@ -30,6 +31,7 @@ export var tokens = {
   /** Токены слотов для контента */
   leftContentMargin: '--plasma-range__left-content-margin',
   rightContentMargin: '--plasma-range__right-content-margin',
+  rightContentOpacityReadOnly: '--plasma-range__right-content-opacity-readonly',
   /** Токены лейбла */
   labelColor: '--plasma-range__label-color',
   labelColorReadOnly: '--plasma-range__label-color-readonly',

package/styled-components/es/components/Range/variations/_readonly/base.js

@@ -1,4 +1,4 @@
 import { css } from 'styled-components';
 import { tokens } from '../../Range.tokens';
 import { ContentWrapper, LeftHelper, StyledContentLeft, StyledContentRight, StyledDivider, StyledLabel } from '../../Range.styles';
-export var base = /*#__PURE__*/css(["&[readonly]{cursor:default;", "{background:var(", ");}", "{display:block;color:var(", ");}", "{color:var(", ");}", "{color:var(", ");}", ",", "{color:var(", ");}}"], ContentWrapper, tokens.backgroundReadOnly, StyledLabel, tokens.labelColorReadOnly, LeftHelper, tokens.leftHelperColorReadOnly, StyledDivider, tokens.dividerColorReadOnly, StyledContentLeft, StyledContentRight, tokens.textFieldColorReadOnly);
+export var base = /*#__PURE__*/css(["&[readonly]{cursor:default;", "{background:var(", ");}", "{display:block;color:var(", ");}", "{color:var(", ");}", "{color:var(", ");opacity:var(", ");}", ",", "{color:var(", ");}", "{opacity:var(", ");}}"], ContentWrapper, tokens.backgroundReadOnly, StyledLabel, tokens.labelColorReadOnly, LeftHelper, tokens.leftHelperColorReadOnly, StyledDivider, tokens.dividerColorReadOnly, tokens.dividerOpacityReadOnly, StyledContentLeft, StyledContentRight, tokens.textFieldColorReadOnly, StyledContentRight, tokens.rightContentOpacityReadOnly);

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

@@ -30,6 +30,7 @@ import { classes } from './TextArea.tokens';
 import { base as viewCSS } from './variations/_view/base';
 import { base as sizeCSS } from './variations/_size/base';
 import { base as clearCSS } from './variations/_clear/base';
+import { base as readOnlyCSS } from './variations/_read-only/base';
 import { base as disabledCSS } from './variations/_disabled/base';
 import { base as hintViewCSS } from './variations/_hint-view/base';
 import { base as hintSizeCSS } from './variations/_hint-size/base';
@@ -350,11 +351,12 @@ export var textAreaConfig = {
       css: clearCSS,
       attrs: true
     },
-    disabled: {
-      css: disabledCSS,
+    readOnly: {
+      css: readOnlyCSS,
       attrs: true
     },
-    readOnly: {
+    disabled: {
+      css: disabledCSS,
       attrs: true
     },
     hintView: {

package/styled-components/es/components/TextArea/TextArea.tokens.js

@@ -60,6 +60,7 @@ export var tokens = {
   /** Цвет текста для элемента textarea */
   inputColor: '--plasma-textarea-input-color',
   clearInputColor: '--plasma-textarea-input-clear-color',
+  inputColorReadOnly: '--plasma-textarea-input-color-read-only',
   /** Цвет текста для элемента textarea в состоянии focus */
   inputColorFocus: '--plasma-textarea-input-color-focus',
   /** Цвет каретки для элемента textarea */

package/styled-components/es/components/TextArea/variations/_read-only/base.js

@@ -0,0 +1,4 @@
+import { css } from 'styled-components';
+import { StyledTextArea } from '../../TextArea.styles';
+import { tokens } from '../../TextArea.tokens';
+export var base = /*#__PURE__*/css(["&[readonly]{", "{color:var(", ");}}"], StyledTextArea, tokens.inputColorReadOnly);

package/styled-components/es/components/TextArea/variations/_read-only/tokens.json

@@ -0,0 +1 @@
+[]

package/styled-components/es/components/TextField/variations/_read-only/base.js

@@ -1,4 +1,4 @@
 import { css } from 'styled-components';
 import { classes, tokens } from '../../TextField.tokens';
-import { Input, InputPlaceholder, InputWrapper, Label, LeftHelper, TitleCaption } from '../../TextField.styles';
-export var base = /*#__PURE__*/css(["&[readonly]{", "{color:var(", ");background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}&.", " ", "{&:before{background-color:var(", ");}}", ":hover{background-color:var(", ");}", ":focus-within ", ",", "{color:var(", ");}", "{color:var(", ");cursor:default;min-width:unset;}", "{color:var(", ");}", "{color:var(", ");}&.", " ", "{color:var(", ");}}"], InputWrapper, tokens.colorReadOnly, /*#__PURE__*/String(tokens.backgroundColorReadOnly), /*#__PURE__*/String(tokens.borderWidth), /*#__PURE__*/String(tokens.borderColorReadOnly), classes.hasDivider, InputWrapper, /*#__PURE__*/String(tokens.dividerColorReadOnly), InputWrapper, tokens.backgroundColorReadOnly, InputWrapper, InputPlaceholder, InputPlaceholder, tokens.placeholderColorReadOnly, Input, tokens.colorReadOnly, TitleCaption, tokens.titleCaptionColorReadOnly, LeftHelper, tokens.leftHelperColorReadOnly, classes.outerLabelPlacement, Label, tokens.labelColorReadOnly);
+import { Input, InputPlaceholder, InputWrapper, Label, LeftHelper, StyledContentRight, TitleCaption } from '../../TextField.styles';
+export var base = /*#__PURE__*/css(["&[readonly]{", "{color:var(", ");background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}&.", " ", "{&:before{background-color:var(", ");}}", ":hover{background-color:var(", ");}", ":focus-within ", ",", "{color:var(", ");}", "{color:var(", ");cursor:default;min-width:unset;}", "{color:var(", ");}", "{color:var(", ");}", ":hover,", ":active{cursor:default;color:var(", ",var(", "));}&.", " ", "{color:var(", ");}}"], InputWrapper, tokens.colorReadOnly, /*#__PURE__*/String(tokens.backgroundColorReadOnly), /*#__PURE__*/String(tokens.borderWidth), /*#__PURE__*/String(tokens.borderColorReadOnly), classes.hasDivider, InputWrapper, /*#__PURE__*/String(tokens.dividerColorReadOnly), InputWrapper, tokens.backgroundColorReadOnly, InputWrapper, InputPlaceholder, InputPlaceholder, tokens.placeholderColorReadOnly, Input, tokens.colorReadOnly, TitleCaption, tokens.titleCaptionColorReadOnly, LeftHelper, tokens.leftHelperColorReadOnly, StyledContentRight, StyledContentRight, tokens.contentSlotRightColor, tokens.contentSlotColor, classes.outerLabelPlacement, Label, tokens.labelColorReadOnly);

package/styled-components/es/components/_Icon/Icon.assets/Lock.js

@@ -0,0 +1,19 @@
+var _path, _path2;
+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); }
+import React from 'react';
+export var Lock = function Lock(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    d: "M12.0001 18C13.1046 18 14.0001 17.1046 14.0001 16C14.0001 14.8954 13.1046 14 12.0001 14C10.8955 14 10.0001 14.8954 10.0001 16C10.0001 17.1046 10.8955 18 12.0001 18Z",
+    fill: "currentColor"
+  })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M16.7501 7V10.0056C17.0393 10.0142 17.2842 10.0359 17.5087 10.0898C18.6971 10.3751 19.625 11.3029 19.9103 12.4913C20.0005 12.8672 20.0003 13.3001 20.0001 13.9028L20.0001 17.2814C20.0001 17.9548 20.0001 18.5055 19.9635 18.9531C19.9257 19.4163 19.8449 19.8347 19.6458 20.2255C19.3342 20.837 18.837 21.3342 18.2255 21.6458C17.8348 21.8449 17.4164 21.9256 16.9531 21.9634C16.5056 22 15.9549 22 15.2815 22H8.71861C8.04524 22 7.49454 22 7.04698 21.9634C6.58372 21.9256 6.16532 21.8449 5.77458 21.6458C5.16306 21.3342 4.66587 20.837 4.35428 20.2255C4.15519 19.8347 4.07445 19.4163 4.0366 18.9531C4.00004 18.5055 4.00004 17.9548 4.00005 17.2814L4.00003 13.9029C3.99978 13.3001 3.9996 12.8672 4.08985 12.4913C4.37515 11.3029 5.30299 10.3751 6.49135 10.0898C6.7159 10.0359 6.96077 10.0142 7.25005 10.0056V7C7.25005 4.37665 9.3767 2.25 12.0001 2.25C14.6234 2.25 16.7501 4.37665 16.7501 7ZM8.75005 7C8.75005 5.20507 10.2051 3.75 12.0001 3.75C13.795 3.75 15.2501 5.20507 15.2501 7V10H8.75005V7ZM6.84152 11.5484C7.02117 11.5052 7.25947 11.5 8.00005 11.5H16.0001C16.7406 11.5 16.9789 11.5052 17.1586 11.5484C17.7985 11.702 18.2981 12.2016 18.4517 12.8415C18.4948 13.0211 18.5001 13.2594 18.5001 14V17.25C18.5001 17.9624 18.4995 18.4517 18.4685 18.8309C18.4382 19.2014 18.3827 19.4004 18.3093 19.5445C18.1415 19.8738 17.8738 20.1415 17.5445 20.3093C17.4005 20.3827 17.2015 20.4382 16.831 20.4684C16.4517 20.4994 15.9625 20.5 15.2501 20.5H8.75005C8.03761 20.5 7.54839 20.4994 7.16913 20.4684C6.79863 20.4382 6.59961 20.3827 6.45557 20.3093C6.12628 20.1415 5.85857 19.8738 5.69079 19.5445C5.6174 19.4004 5.56189 19.2014 5.53162 18.8309C5.50063 18.4517 5.50005 17.9624 5.50005 17.25V14C5.50005 13.2594 5.50527 13.0211 5.5484 12.8415C5.70203 12.2016 6.20164 11.702 6.84152 11.5484Z",
+    fill: "currentColor"
+  })));
+};

package/styled-components/es/components/_Icon/Icons/IconLock.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Lock } from '../Icon.assets/Lock';
+import { IconRoot } from '../IconRoot';
+export var IconLock = function IconLock(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 's' : _ref$size,
+    color = _ref.color,
+    className = _ref.className,
+    sizeCustomValue = _ref.sizeCustomValue;
+  return /*#__PURE__*/React.createElement(IconRoot, {
+    className: className,
+    sizeCustomValue: sizeCustomValue,
+    size: size,
+    color: color,
+    icon: Lock
+  });
+};

package/styled-components/es/components/_Icon/index.js

@@ -5,6 +5,7 @@ export { IconDisclosureRightWithOffset } from './Icons/IconDisclosureRightWithOf
 export { IconDisclosureDownFill } from './Icons/IconDisclosureDownFill';
 export { IconDisclosureDownWithOffset } from './Icons/IconDisclosureDownWithOffset';
 export { IconDisclosureUpWithOffset } from './Icons/IconDisclosureUpWithOffset';
+export { IconLock } from './Icons/IconLock';
 export { IconMic } from './Icons/IconMic';
 export { IconChevronLeft } from './Icons/IconChevronLeft';
 export { IconChevronDoubleLeft } from './Icons/IconChevronDoubleLeft';