@salutejs/plasma-new-hope 0.272.0-canary.1770.13398571521.0 → 0.272.0-canary.1781.13399946146.0

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

@@ -8,7 +8,6 @@ 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';
@@ -39,16 +38,6 @@ 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;
@@ -72,25 +61,19 @@ 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: 'inline-radio',
+                type: 'select',
             },
         },
         view: {
@@ -109,28 +92,19 @@ 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: {
@@ -139,65 +113,47 @@ 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,
-            },
+            if: { arg: 'hasHint', truthy: true },
+        },
+        helperText: {
+            control: { type: 'text' },
         },
         width: {
             control: { type: 'text' },
@@ -216,7 +172,6 @@ const meta: Meta<StoryTextAreaProps> = {
         },
         ...disableProps([
             'helperBlock',
-            'helperText',
             '$isFocused',
             'contentRight',
             'autoComplete',
@@ -240,7 +195,6 @@ const meta: Meta<StoryTextAreaProps> = {
             'hintOffset',
             'hintContentLeft',
             'hintView',
-            'hintOpened',
         ]),
     },
     args: {
@@ -284,24 +238,19 @@ 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 || props.readOnly
-                    ? getIcon(IconPlaceholder, props.size, props.readOnly)
-                    : undefined
-            }
+            contentRight={props.enableContentRight ? <IconPlaceholder size={iconSize} /> : 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);", ":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)
+      "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)
     },
     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)(["", ":0.4;", ":var(--text-primary);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-tertiary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-primary);"], _TextField.textFieldTokens.readOnlyOpacity, _TextField.textFieldTokens.colorReadOnly, _TextField.textFieldTokens.backgroundColorReadOnly, _TextField.textFieldTokens.borderColorReadOnly, _TextField.textFieldTokens.placeholderColorReadOnly, _TextField.textFieldTokens.leftHelperColorReadOnly, _TextField.textFieldTokens.titleCaptionColorReadOnly, _TextField.textFieldTokens.labelColorReadOnly, _TextField.textFieldTokens.dividerColorReadOnly)
+      "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)
     }
   }
 };

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, IconLock } from '../../../../components/_Icon';
+import { IconCross } from '../../../../components/_Icon';
 import type { PopoverPlacement } from '../Popover/Popover';
 
 import { TextField } from './TextField';
@@ -43,16 +43,6 @@ 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,
@@ -68,28 +58,19 @@ 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,
@@ -112,10 +93,7 @@ const meta: Meta<typeof TextField> = {
             control: {
                 type: 'boolean',
             },
-            if: {
-                arg: 'labelPlacement',
-                eq: 'inner',
-            },
+            if: { arg: 'labelPlacement', eq: 'inner' },
         },
         size: {
             options: sizes,
@@ -125,75 +103,51 @@ 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',
@@ -229,28 +183,19 @@ type StoryPropsDefault = Omit<
     enableContentRight: boolean;
 };
 
-const StoryDemo = ({ enableContentLeft, enableContentRight, view, readOnly, ...rest }: StoryPropsDefault) => {
+const StoryDemo = ({ enableContentLeft, enableContentRight, view, ...rest }: StoryPropsDefault) => {
     const [text, setText] = useState('Значение поля');
 
-    const contentRight = enableContentRight || readOnly ? getIcon(IconCross, rest.size, readOnly) : undefined;
+    const iconSize = rest.size === 'xs' ? 'xs' : 's';
 
     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}
-                readOnly={readOnly}
-                contentLeft={enableContentLeft ? getIcon(IconPlaceholder, rest.size) : undefined}
-                contentRight={contentRight}
+                contentLeft={enableContentLeft ? <IconCross color="inherit" size={iconSize} /> : undefined}
+                contentRight={enableContentRight ? <IconCross color="inherit" size={iconSize} /> : undefined}
                 view={view}
                 onChange={(e) => {
                     setText(e.target.value);
@@ -266,10 +211,9 @@ const StoryDemo = ({ enableContentLeft, enableContentRight, view, readOnly, ...r
                 label="Uncontrolled TextField"
                 defaultValue="Дефолтное значение"
                 enumerationType="plain"
-                contentLeft={enableContentLeft ? getIcon(IconPlaceholder, rest.size) : undefined}
-                contentRight={contentRight}
+                contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
+                contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
                 view={view}
-                readOnly={readOnly}
                 onFocus={onFocus}
                 onBlur={onBlur}
                 onSearch={onSearch}
@@ -341,10 +285,10 @@ type StoryPropsChips = Omit<
     enableContentRight: boolean;
 };
 
-const StoryChips = ({ enableContentLeft, enableContentRight, view, readOnly, ...rest }: StoryPropsChips) => {
+const StoryChips = ({ enableContentLeft, enableContentRight, view, ...rest }: StoryPropsChips) => {
     const [text, setText] = useState('Значение поля');
 
-    const contentRight = enableContentRight || readOnly ? getIcon(IconCross, rest.size, readOnly) : undefined;
+    const iconSize = rest.size === 'xs' ? 'xs' : 's';
 
     const validateChip = (value) => (value === '1 value' ? { view: 'negative' } : {});
 
@@ -353,10 +297,9 @@ const StoryChips = ({ enableContentLeft, enableContentRight, view, readOnly, ...
             {...rest}
             enumerationType="chip"
             value={text}
-            contentLeft={enableContentLeft ? getIcon(IconPlaceholder, rest.size) : undefined}
-            contentRight={contentRight}
+            contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
+            contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
             view={view}
-            readOnly={readOnly}
             onChange={(e) => {
                 setText(e.target.value);
                 onChange(e.target.value);
@@ -365,10 +308,7 @@ const StoryChips = ({ enableContentLeft, enableContentRight, view, readOnly, ...
             onBlur={onBlur}
             onChangeChips={onChipsChange}
             chipValidator={validateChip}
-            style={{
-                width: '70%',
-                margin: '0 auto',
-            }}
+            style={{ width: '70%', margin: '0 auto' }}
         />
     );
 };

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

@@ -11,7 +11,7 @@ import { base as sizeCSS } from './variations/_size/base';
 import { base as disabledCSS } from './variations/_disabled/base';
 import { base as focusedCSS } from './variations/_focused/base';
 import { Done, Indeterminate } from './IconsSvg';
-import { StyledContent, StyledContentWrapper, StyledDescription, StyledInput, StyledLabel, StyledTrigger, base } from './Checkbox.styles';
+import { StyledContent, StyledContentWrapper, StyledDescription, StyledInput, StyledLabel, StyledTrigger, base, StyledTriggerWrapper } from './Checkbox.styles';
 import { classes } from './Checkbox.tokens';
 export var checkboxRoot = function checkboxRoot(Root) {
   return /*#__PURE__*/forwardRef(function (props, ref) {
@@ -67,9 +67,9 @@ export var checkboxRoot = function checkboxRoot(Root) {
     })), /*#__PURE__*/React.createElement(StyledContentWrapper, {
       htmlFor: checkboxId,
       className: singleLineClass
-    }, /*#__PURE__*/React.createElement(StyledTrigger, {
+    }, /*#__PURE__*/React.createElement(StyledTriggerWrapper, null, /*#__PURE__*/React.createElement(StyledTrigger, {
       className: classes.checkboxTrigger
-    }, indeterminate ? _Indeterminate || (_Indeterminate = /*#__PURE__*/React.createElement(Indeterminate, null)) : _Done || (_Done = /*#__PURE__*/React.createElement(Done, null))), hasContent && /*#__PURE__*/React.createElement(StyledContent, {
+    }, indeterminate ? _Indeterminate || (_Indeterminate = /*#__PURE__*/React.createElement(Indeterminate, null)) : _Done || (_Done = /*#__PURE__*/React.createElement(Done, null)))), hasContent && /*#__PURE__*/React.createElement(StyledContent, {
       className: singleLineClass
     }, label && /*#__PURE__*/React.createElement(StyledLabel, {
       className: singleLineClass,

package/styled-components/es/components/Checkbox/Checkbox.styles.js

@@ -8,18 +8,21 @@ export var base = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PU
 export var StyledInput = /*#__PURE__*/styled.input.withConfig({
   componentId: "plasma-new-hope__sc-tydhc1-0"
 })(["position:absolute;&:focus{outline:0 none;}width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);"]);
-export var StyledTrigger = /*#__PURE__*/styled.div.withConfig({
+export var StyledTriggerWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-tydhc1-1"
-})(["margin:var(", ");width:var(", ");height:var(", ");border-radius:var(", ");position:relative;display:flex;align-items:center;justify-content:center;background:var(", ");border:0.125rem solid var(", ");box-sizing:border-box;flex-shrink:0;flex-grow:0;input:not(:indeterminate) + label & div{transform:scale(0);transition:transform 0.15s ease-in-out;}input:checked + label & div{transform:scale(1);}"], tokens.triggerMargin, tokens.triggerSize, tokens.triggerSize, tokens.triggerBorderRadius, tokens.triggerBackgroundColor, tokens.triggerBorderColor);
-export var StyledContentWrapper = /*#__PURE__*/styled.label.withConfig({
+})(["padding:var(", ");"], tokens.triggerPadding);
+export var StyledTrigger = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-tydhc1-2"
+})(["width:var(", ");height:var(", ");border-radius:var(", ");position:relative;display:flex;align-items:center;justify-content:center;background:var(", ");border:0.125rem solid var(", ");box-sizing:border-box;flex-shrink:0;flex-grow:0;input:not(:indeterminate) + label & div{transform:scale(0);transition:transform 0.15s ease-in-out;}input:checked + label & div{transform:scale(1);}"], tokens.triggerSize, tokens.triggerSize, tokens.triggerBorderRadius, tokens.triggerBackgroundColor, tokens.triggerBorderColor);
+export var StyledContentWrapper = /*#__PURE__*/styled.label.withConfig({
+  componentId: "plasma-new-hope__sc-tydhc1-3"
 })(["position:relative;align-items:flex-start;display:flex;width:inherit;cursor:pointer;.", "{width:100%;}"], classes.singleLine);
 export var StyledContent = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-tydhc1-3"
+  componentId: "plasma-new-hope__sc-tydhc1-4"
 })(["display:flex;flex-direction:column;margin-top:var(", ");margin-left:var(", ");"], tokens.contentTopOffset, tokens.contentLeftOffset);
 export var StyledLabel = /*#__PURE__*/styled.span.withConfig({
-  componentId: "plasma-new-hope__sc-tydhc1-4"
+  componentId: "plasma-new-hope__sc-tydhc1-5"
 })(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight);
 export var StyledDescription = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-tydhc1-5"
+  componentId: "plasma-new-hope__sc-tydhc1-6"
 })(["margin-top:var(", ");color:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");&.", "{margin-top:0;}"], tokens.descriptionMarginTop, tokens.descriptionColor, tokens.descriptionFontFamily, tokens.descriptionFontSize, tokens.descriptionFontStyle, tokens.descriptionFontWeight, tokens.descriptionLetterSpacing, tokens.descriptionLineHeight, classes.onlyDescription);

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

@@ -5,7 +5,7 @@ export var classes = {
 };
 export var tokens = {
   margin: '--plasma-checkbox-margin',
-  triggerMargin: '--plasma-checkbox-trigger-margin',
+  triggerPadding: '--plasma-checkbox-trigger-padding',
   triggerSize: '--plasma-checkbox-trigger-size',
   triggerBorderRadius: '--plasma-checkbox-trigger-border-radius',
   contentTopOffset: '--plasma-checkbox-content-top-offset',

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

@@ -5,7 +5,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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, useMemo } from 'react';
 import { safeUseId, extractTextFrom } from '@salutejs/plasma-core';
-import { StyledContentWrapper, StyledDescription, StyledInput, StyledLabel, StyledContent, StyledTrigger } from '../Checkbox/Checkbox.styles';
+import { StyledContentWrapper, StyledDescription, StyledInput, StyledLabel, StyledContent, StyledTrigger, StyledTriggerWrapper } from '../Checkbox/Checkbox.styles';
 import { cx } from '../../utils';
 import { base as viewCSS } from './variations/_view/base';
 import { base as sizeCSS } from './variations/_size/base';
@@ -59,9 +59,9 @@ export var radioboxRoot = function radioboxRoot(Root) {
     })), /*#__PURE__*/React.createElement(StyledContentWrapper, {
       htmlFor: radioboxId,
       className: singleLineClass
-    }, /*#__PURE__*/React.createElement(StyledTrigger, {
+    }, /*#__PURE__*/React.createElement(StyledTriggerWrapper, null, /*#__PURE__*/React.createElement(StyledTrigger, {
       className: classes.radioboxTrigger
-    }, _StyledEllipse || (_StyledEllipse = /*#__PURE__*/React.createElement(StyledEllipse, null))), hasContent && /*#__PURE__*/React.createElement(StyledContent, {
+    }, _StyledEllipse || (_StyledEllipse = /*#__PURE__*/React.createElement(StyledEllipse, null)))), hasContent && /*#__PURE__*/React.createElement(StyledContent, {
       className: singleLineClass
     }, label && /*#__PURE__*/React.createElement(StyledLabel, {
       className: cx(singleLineClass, onlyDescriptionClass),

package/styled-components/es/components/Radiobox/Radiobox.styles.js

@@ -5,7 +5,7 @@ import { applyEllipsis, applyNoUserSelect } from '../../mixins';
 import { classes, tokens } from './Radiobox.tokens';
 
 // NOTE: Необходимое переопределение токенов из компонента Checkbox т.к. используются его части
-var mappingOverride = /*#__PURE__*/"\n    ".concat(checkboxTokens.labelFontFamily, ": var(").concat(tokens.labelFontFamily, ");\n    ").concat(checkboxTokens.labelFontSize, ": var(").concat(tokens.labelFontSize, ");\n    ").concat(checkboxTokens.labelFontStyle, ": var(").concat(tokens.labelFontStyle, ");\n    ").concat(checkboxTokens.labelFontWeight, ": var(").concat(tokens.labelFontWeight, ");\n    ").concat(checkboxTokens.labelLetterSpacing, ": var(").concat(tokens.labelLetterSpacing, ");\n    ").concat(checkboxTokens.labelLineHeight, ": var(").concat(tokens.labelLineHeight, ");\n    ").concat(checkboxTokens.descriptionMarginTop, ": var(").concat(tokens.descriptionMarginTop, ");\n    ").concat(checkboxTokens.descriptionFontFamily, ": var(").concat(tokens.descriptionFontFamily, ");\n    ").concat(checkboxTokens.descriptionFontSize, ": var(").concat(tokens.descriptionFontSize, ");\n    ").concat(checkboxTokens.descriptionFontStyle, ": var(").concat(tokens.descriptionFontStyle, ");\n    ").concat(checkboxTokens.descriptionFontWeight, ": var(").concat(tokens.descriptionFontWeight, ");\n    ").concat(checkboxTokens.descriptionLetterSpacing, ": var(").concat(tokens.descriptionLetterSpacing, ");\n    ").concat(checkboxTokens.descriptionLineHeight, ": var(").concat(tokens.descriptionLineHeight, ");\n\n    ").concat(checkboxTokens.fillColor, ": var(").concat(tokens.fillColor, ");\n    ").concat(checkboxTokens.descriptionColor, ": var(").concat(tokens.descriptionColor, ");\n    ").concat(checkboxTokens.triggerBorderColor, ": var(").concat(tokens.triggerBorderColor, ");\n    ").concat(checkboxTokens.triggerBackgroundColor, ": var(").concat(tokens.triggerBackgroundColor, ");\n\n    ").concat(checkboxTokens.contentTopOffset, ": var(").concat(tokens.contentTopOffset, ");\n    ").concat(checkboxTokens.contentLeftOffset, ": var(").concat(tokens.contentLeftOffset, ");\n    ").concat(checkboxTokens.triggerSize, ": var(").concat(tokens.triggerSize, ");\n    ").concat(checkboxTokens.triggerBorderRadius, ": var(").concat(tokens.triggerBorderRadius, ");\n    ").concat(checkboxTokens.triggerMargin, ": var(").concat(tokens.triggerMargin, ");\n");
+var mappingOverride = /*#__PURE__*/"\n    ".concat(checkboxTokens.labelFontFamily, ": var(").concat(tokens.labelFontFamily, ");\n    ").concat(checkboxTokens.labelFontSize, ": var(").concat(tokens.labelFontSize, ");\n    ").concat(checkboxTokens.labelFontStyle, ": var(").concat(tokens.labelFontStyle, ");\n    ").concat(checkboxTokens.labelFontWeight, ": var(").concat(tokens.labelFontWeight, ");\n    ").concat(checkboxTokens.labelLetterSpacing, ": var(").concat(tokens.labelLetterSpacing, ");\n    ").concat(checkboxTokens.labelLineHeight, ": var(").concat(tokens.labelLineHeight, ");\n    ").concat(checkboxTokens.descriptionMarginTop, ": var(").concat(tokens.descriptionMarginTop, ");\n    ").concat(checkboxTokens.descriptionFontFamily, ": var(").concat(tokens.descriptionFontFamily, ");\n    ").concat(checkboxTokens.descriptionFontSize, ": var(").concat(tokens.descriptionFontSize, ");\n    ").concat(checkboxTokens.descriptionFontStyle, ": var(").concat(tokens.descriptionFontStyle, ");\n    ").concat(checkboxTokens.descriptionFontWeight, ": var(").concat(tokens.descriptionFontWeight, ");\n    ").concat(checkboxTokens.descriptionLetterSpacing, ": var(").concat(tokens.descriptionLetterSpacing, ");\n    ").concat(checkboxTokens.descriptionLineHeight, ": var(").concat(tokens.descriptionLineHeight, ");\n\n    ").concat(checkboxTokens.fillColor, ": var(").concat(tokens.fillColor, ");\n    ").concat(checkboxTokens.descriptionColor, ": var(").concat(tokens.descriptionColor, ");\n    ").concat(checkboxTokens.triggerBorderColor, ": var(").concat(tokens.triggerBorderColor, ");\n    ").concat(checkboxTokens.triggerBackgroundColor, ": var(").concat(tokens.triggerBackgroundColor, ");\n\n    ").concat(checkboxTokens.contentTopOffset, ": var(").concat(tokens.contentTopOffset, ");\n    ").concat(checkboxTokens.contentLeftOffset, ": var(").concat(tokens.contentLeftOffset, ");\n    ").concat(checkboxTokens.triggerSize, ": var(").concat(tokens.triggerSize, ");\n    ").concat(checkboxTokens.triggerBorderRadius, ": var(").concat(tokens.triggerBorderRadius, ");\n    ").concat(checkboxTokens.triggerPadding, ": var(").concat(tokens.triggerPadding, ");\n");
 export var StyledEllipse = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-rqiilp-0"
 })(["width:var(", ");height:var(", ");border-radius:var(", ");background-color:var(", ");transition:transform 0.3s ease-in-out;transform:scale(0);input:checked + label &{transform:scale(1);}"], tokens.ellipseSize, tokens.ellipseSize, tokens.ellipseSize, tokens.ellipseColor);

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

@@ -25,7 +25,7 @@ export var tokens = {
   contentLeftOffset: '--plasma-radiobox-content-left-offset',
   triggerSize: '--plasma-radiobox-trigger-size',
   triggerBorderRadius: '--plasma-radiobox-trigger-border-radius',
-  triggerMargin: '--plasma-radiobox-trigger-margin',
+  triggerPadding: '--plasma-radiobox-trigger-padding',
   margin: '--plasma-radiobox-margin',
   ellipseSize: '--plasma-radiobox-ellipse-size',
   ellipseColor: '--plasma-radiobox-ellipse-color',

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

@@ -20,7 +20,6 @@ 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',
@@ -31,7 +30,6 @@ 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(", ");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);
+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);