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

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.template-doc.mdx

@@ -9,6 +9,12 @@ import { PropsTable, Description } from '@site/src/components';
 <Description name="Checkbox" />
 <PropsTable name="Checkbox" exclude={['css', 'focused']} />
 
+:::caution Устаревшие значения для свойства view
+Актуальным значением для свойства `view` - является `accent`. 
+
+Все остальные значения `deprecated` и будут удалены в ближайшее время! 
+:::
+
 ## Использование
 Компонент `Checkbox` может содержать лейбл и описание.
 

package/styled-components/es/components/Combobox/ComboboxNew/Combobox.js

@@ -1,4 +1,4 @@
-var _excluded = ["name", "multiple", "value", "onChange", "defaultValue", "isTargetAmount", "targetAmount", "items", "placement", "label", "placeholder", "helperText", "contentLeft", "textBefore", "textAfter", "variant", "listOverflow", "listHeight", "listWidth", "portal", "renderItem", "view", "size", "labelPlacement", "keepPlaceholder", "readOnly", "disabled", "alwaysOpened", "filter", "closeAfterSelect", "renderValue", "zIndex", "beforeList", "afterList", "hintView", "hintSize"];
+var _excluded = ["name", "multiple", "value", "onChange", "defaultValue", "isTargetAmount", "targetAmount", "items", "placement", "label", "placeholder", "helperText", "contentLeft", "textBefore", "textAfter", "variant", "listOverflow", "listHeight", "listWidth", "portal", "renderItem", "view", "size", "labelPlacement", "keepPlaceholder", "readOnly", "disabled", "alwaysOpened", "filter", "closeAfterSelect", "renderValue", "zIndex", "beforeList", "afterList", "virtual", "hintView", "hintSize"];
 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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -22,7 +22,7 @@ import { classes } from './Combobox.tokens';
 import { FloatingPopover } from './FloatingPopover';
 import { useKeyNavigation, getItemByFocused } from './hooks/useKeyboardNavigation';
 import { initialItemsTransform, updateAncestors, updateDescendants, updateSingleAncestors, filterItems, getItemId, getInitialValue } from './utils';
-import { Inner, StyledTextField } from './ui';
+import { Inner, StyledTextField, VirtualList } from './ui';
 import { pathReducer, focusedPathReducer } from './reducers';
 import { getPathMap, getTreeMaps } from './hooks/getPathMaps';
 import { Ul, base, StyledArrow, IconArrowWrapper, StyledEmptyState } from './Combobox.styles';
@@ -77,6 +77,8 @@ export var comboboxRoot = function comboboxRoot(Root) {
       zIndex = props.zIndex,
       beforeList = props.beforeList,
       afterList = props.afterList,
+      _props$virtual = props.virtual,
+      virtual = _props$virtual === void 0 ? false : _props$virtual,
       hintView = props.hintView,
       hintSize = props.hintSize,
       rest = _objectWithoutProperties(props, _excluded);
@@ -483,7 +485,10 @@ export var comboboxRoot = function comboboxRoot(Root) {
       listOverflow: listOverflow,
       listWidth: listWidth,
       ref: targetRef
-    }, beforeList, isEmpty(filteredItems) ? /*#__PURE__*/React.createElement(StyledEmptyState, {
+    }, virtual ? /*#__PURE__*/React.createElement(VirtualList, {
+      items: filteredItems,
+      listHeight: listHeight
+    }) : /*#__PURE__*/React.createElement(React.Fragment, null, beforeList, isEmpty(filteredItems) ? /*#__PURE__*/React.createElement(StyledEmptyState, {
       className: classes.emptyStateWrapper,
       size: size,
       description: "\u041D\u0438\u0447\u0435\u0433\u043E \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E"
@@ -497,7 +502,7 @@ export var comboboxRoot = function comboboxRoot(Root) {
         index: index,
         listWidth: listWidth
       });
-    }), afterList))))));
+    }), afterList)))))));
   });
 };
 export var comboboxConfig = {

package/styled-components/es/components/Combobox/ComboboxNew/ui/VirtualList/VirtualList.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import List from 'rc-virtual-list';
+import { Item } from '../Inner/ui';
+var getHeight = function getHeight(listHeight) {
+  if (!listHeight) return 300;
+  if (typeof listHeight === 'number') return listHeight;
+  return parseInt(listHeight, 10);
+};
+export var VirtualList = function VirtualList(_ref) {
+  var items = _ref.items,
+    listHeight = _ref.listHeight;
+  return /*#__PURE__*/React.createElement(List, {
+    data: items,
+    height: getHeight(listHeight),
+    itemHeight: 100,
+    itemKey: "id"
+  }, function (item, index, props) {
+    return /*#__PURE__*/React.createElement("div", props, /*#__PURE__*/React.createElement(Item, {
+      item: item,
+      path: ['root'],
+      currentLevel: 0,
+      index: index,
+      ariaLevel: 1
+    }));
+  });
+};

package/styled-components/es/components/Combobox/ComboboxNew/ui/index.js

@@ -1,2 +1,3 @@
 export * from './Inner/Inner';
-export * from './Target/Target';
+export * from './Target/Target';
+export * from './VirtualList/VirtualList';

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);

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

@@ -30,7 +30,6 @@ 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';
@@ -351,14 +350,13 @@ export var textAreaConfig = {
       css: clearCSS,
       attrs: true
     },
-    readOnly: {
-      css: readOnlyCSS,
-      attrs: true
-    },
     disabled: {
       css: disabledCSS,
       attrs: true
     },
+    readOnly: {
+      attrs: true
+    },
     hintView: {
       css: hintViewCSS
     },

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

@@ -60,7 +60,6 @@ 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/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, 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);
+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);

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

@@ -5,7 +5,6 @@ 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';

package/styled-components/es/examples/plasma_b2c/components/Checkbox/Checkbox.config.js

@@ -16,13 +16,20 @@ export var config = {
      * Вид контрола.
      */
     view: {
+      accent: /*#__PURE__*/css(["", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor),
+      // deprecated
       "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor),
+      // deprecated
       secondary: /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor),
+      // deprecated
       tertiary: /*#__PURE__*/css(["", ":var(--text-tertiary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor),
+      // deprecated
       paragraph: /*#__PURE__*/css(["", ":var(--text-paragraph);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor),
-      accent: /*#__PURE__*/css(["", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor),
+      // deprecated
       positive: /*#__PURE__*/css(["", ":var(--text-positive);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor),
+      // deprecated
       warning: /*#__PURE__*/css(["", ":var(--text-warning);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor),
+      // deprecated
       negative: /*#__PURE__*/css(["", ":var(--text-negative);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor)
     },
     disabled: {

package/styled-components/es/examples/plasma_b2c/components/Checkbox/Checkbox.stories.tsx

@@ -3,12 +3,9 @@ import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
-import { checkboxConfig } from '../../../../components/Checkbox';
-import { mergeConfig } from '../../../../engines';
-import { WithTheme, argTypesFromConfig } from '../../../_helpers';
+import { WithTheme } from '../../../_helpers';
 import { Link } from '../Link/Link';
 
-import { config } from './Checkbox.config';
 import { Checkbox } from './Checkbox';
 
 const onChange = action('onChange');
@@ -19,7 +16,20 @@ const meta: Meta<typeof Checkbox> = {
     title: 'b2c/Data Entry/Checkbox',
     decorators: [WithTheme],
     component: Checkbox,
-    argTypes: argTypesFromConfig(mergeConfig(checkboxConfig, config)),
+    argTypes: {
+        view: {
+            options: ['accent'],
+            control: {
+                type: 'radio',
+            },
+        },
+        size: {
+            options: ['m', 's'],
+            control: {
+                type: 'radio',
+            },
+        },
+    },
     args: {
         view: 'accent',
         size: 'm',

package/styled-components/es/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx

@@ -1,7 +1,7 @@
 import React, { ComponentProps, useEffect, useRef, useState } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { disableProps, IconPlaceholder } from '@salutejs/plasma-sb-utils';
+import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
 
 import { WithTheme } from '../../../_helpers';
 import { IconButton } from '../IconButton/IconButton';

package/styled-components/es/examples/plasma_b2c/components/Range/Range.config.js

@@ -19,7 +19,7 @@ export var config = {
       "true": /*#__PURE__*/css(["", ":0.4;"], tokens.disabledOpacity)
     },
     readOnly: {
-      "true": /*#__PURE__*/css(["", ":var(--surface-transparent-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":0.4;", ":0.4;", ":var(--text-primary);", ":transparent;", ":var(--text-secondary);"], tokens.backgroundReadOnly, tokens.labelColorReadOnly, tokens.leftHelperColorReadOnly, tokens.dividerColorReadOnly, tokens.dividerOpacityReadOnly, tokens.rightContentOpacityReadOnly, tokens.textFieldColorReadOnly, tokens.textFieldBackgroundColorReadOnly, tokens.textFieldPlaceholderColorReadOnly)
+      "true": /*#__PURE__*/css(["", ":var(--surface-transparent-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], tokens.backgroundReadOnly, tokens.labelColorReadOnly, tokens.leftHelperColorReadOnly, tokens.dividerColorReadOnly, tokens.textFieldColorReadOnly, tokens.textFieldBackgroundColorReadOnly, tokens.textFieldPlaceholderColorReadOnly)
     }
   }
 };

package/styled-components/es/examples/plasma_b2c/components/Range/Range.stories.tsx

@@ -1,7 +1,7 @@
 import React, { ChangeEvent, ComponentProps, Dispatch, SetStateAction, useState } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { disableProps, IconPlaceholder } from '@salutejs/plasma-sb-utils';
+import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
 
 import { WithTheme } from '../../../_helpers';
 import { IconChevronLeft } from '../../../../components/_Icon';

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

@@ -28,9 +28,6 @@ export var config = {
     clear: {
       "true": /*#__PURE__*/css([""])
     },
-    readOnly: {
-      "true": /*#__PURE__*/css(["", ":var(--text-primary);"], textAreaTokens.inputColorReadOnly)
-    },
     disabled: {
       "true": /*#__PURE__*/css(["", ":0.4;", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--text-secondary);"], textAreaTokens.disabledOpacity, textAreaTokens.inputColorDisabled, textAreaTokens.dividerColorReadOnly, textAreaTokens.titleCaptionColorReadOnly)
     }