@salutejs/plasma-new-hope 0.152.0-canary.1374.11013124158.0 → 0.152.0-canary.1449.11029161599.0

package/styled-components/es/components/Tabs/ui/{horizontal/HorizontalTabItem/HorizontalTabItem.js → TabItem/TabItem.js}

@@ -4,15 +4,15 @@ 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, useRef, useContext, useEffect, useCallback } from 'react';
 import { useForkRef } from '@salutejs/plasma-core';
-import { classes } from '../../../tokens';
-import { cx } from '../../../../../utils';
-import { TabsContext } from '../../../TabsContext';
+import { classes } from '../../tokens';
+import { cx } from '../../../../utils';
+import { TabsContext } from '../../TabsContext';
 import { base as viewCSS } from './variations/_view/base';
 import { base as sizeCSS } from './variations/_size/base';
 import { base as pilledCSS } from './variations/_pilled/base';
 import { base as disabledCSS } from './variations/_disabled/base';
-import { LeftContent, RightContent, StyledContent, base } from './HorizontalTabItem.styles';
-export var horizontalTabItemRoot = function horizontalTabItemRoot(Root) {
+import { LeftContent, RightContent, StyledContent, base } from './TabItem.styles';
+export var tabItemRoot = function tabItemRoot(Root) {
   return /*#__PURE__*/forwardRef(function (props, outerRef) {
     var size = props.size,
       view = props.view,
@@ -103,10 +103,10 @@ export var horizontalTabItemRoot = function horizontalTabItemRoot(Root) {
     }, contentRight)));
   });
 };
-export var horizontalTabItemConfig = {
-  name: 'HorizontalTabItem',
+export var tabItemConfig = {
+  name: 'TabItem',
   tag: 'button',
-  layout: horizontalTabItemRoot,
+  layout: tabItemRoot,
   base: base,
   variations: {
     size: {

package/styled-components/es/components/Tabs/ui/{horizontal/HorizontalTabItem/HorizontalTabItem.styles.js → TabItem/TabItem.styles.js}

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { css } from 'styled-components';
-import { addFocus } from '../../../../../mixins';
-import { tokens } from '../../../tokens';
+import { addFocus } from '../../../../mixins';
+import { tokens } from '../../tokens';
 export var base = /*#__PURE__*/css(["position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;align-items:center;gap:var(", ");padding:var(", ",var(", "));appearance:none;border:none;outline:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);&:first-child{margin-left:0;}", ";"], tokens.itemContentGap, tokens.itemPaddingClear, tokens.itemPadding, /*#__PURE__*/addFocus({
   outlineSize: '0.063rem',
   outlineOffset: '-0.125rem',
@@ -10,11 +10,11 @@ export var base = /*#__PURE__*/css(["position:relative;display:flex;align-items:
   customFocusRules: /*#__PURE__*/"\n            &.focus-visible:focus,\n            &[data-focus-visible-added] {\n                &::before {\n                    z-index: 1;\n                    outline: none;\n                    box-shadow: 0 0 0 0.063rem var(".concat(tokens.outlineFocusColor, ");\n                }\n            }\n        ")
 }));
 export var StyledContent = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-lremls-0"
+  componentId: "plasma-new-hope__sc-1ngrr4h-0"
 })(["display:inline-block;width:fit-content;padding:0 var(", ",var(", "));"], tokens.itemContentPaddingClear, tokens.itemContentPadding);
 export var RightContent = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-lremls-1"
+  componentId: "plasma-new-hope__sc-1ngrr4h-1"
 })(["display:flex;color:var(", ");&:hover{color:var(", ");}"], tokens.additionalContentColor, tokens.additionalContentHoverColor);
 export var LeftContent = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-lremls-2"
+  componentId: "plasma-new-hope__sc-1ngrr4h-2"
 })(["display:flex;color:inherit;&:hover{color:inherit;}"]);

package/styled-components/es/components/Tabs/ui/{horizontal/HorizontalTabItem → TabItem}/variations/_disabled/base.js

@@ -1,3 +1,3 @@
 import { css } from 'styled-components';
-import { classes, tokens } from '../../../../../tokens';
+import { classes, tokens } from '../../../../tokens';
 export var base = /*#__PURE__*/css(["&[disabled]{cursor:not-allowed;&:hover{color:var(", ");background-color:var(", ");}&.", ":hover{color:var(", ");background-color:var(", ");}}"], tokens.itemColor, tokens.itemBackgroundColor, /*#__PURE__*/String(classes.selectedTabsItem), tokens.itemSelectedColor, tokens.itemSelectedBackgroundColor);

package/styled-components/es/components/Tabs/ui/{horizontal/HorizontalTabItem → TabItem}/variations/_pilled/base.js

@@ -1,3 +1,3 @@
 import { css } from 'styled-components';
-import { classes, tokens } from '../../../../../tokens';
+import { classes, tokens } from '../../../../tokens';
 export var base = /*#__PURE__*/css(["&.", "{--plasma_private-outline-radius:var(", ");border-radius:var(", ");padding:var(", ");}"], /*#__PURE__*/String(classes.tabsPilled), tokens.itemPilledBorderRadius, tokens.itemPilledBorderRadius, tokens.itemPaddingPilled);

package/styled-components/es/components/Tabs/ui/{vertical/VerticalTabItem → TabItem}/variations/_size/base.js

@@ -1,3 +1,3 @@
 import { css } from 'styled-components';
-import { tokens } from '../../../../../tokens';
+import { tokens } from '../../../../tokens';
 export var base = /*#__PURE__*/css(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");--plasma_private-outline-radius:var(", ");border-radius:var(", ");width:var(", ");height:var(", ");"], tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.itemBorderRadius, tokens.itemBorderRadius, tokens.itemWidth, tokens.itemHeight);

package/styled-components/es/components/Tabs/ui/{horizontal/HorizontalTabItem → TabItem}/variations/_view/base.js

@@ -1,4 +1,4 @@
 import { css } from 'styled-components';
-import { classes, tokens } from '../../../../../tokens';
-import { RightContent } from '../../HorizontalTabItem.styles';
+import { classes, tokens } from '../../../../tokens';
+import { RightContent } from '../../TabItem.styles';
 export var base = /*#__PURE__*/css(["color:var(", ");background-color:var(", ");margin-left:var(", ",var(", "));&:hover{color:var(", ");background-color:var(", ");", "{color:var(", ");}}&:active{color:var(", ");}&.", "{transition:var(", ");}&.", "{color:var(", ");background-color:var(", ");&:hover{color:var(", ");background-color:var(", ");&::after{background:var(", ");}}", "{color:var(", ");&:hover{color:var(", ");}}&::after{content:'';position:absolute;bottom:0px;left:0;right:0;background:var(", ");height:var(", ");border-radius:1px;}}"], tokens.itemColor, tokens.itemBackgroundColor, tokens.itemMarginLeftFilled, tokens.itemMarginLeft, tokens.itemColorHover, tokens.itemBackgroundColorHover, RightContent, tokens.additionalContentHoverColor, tokens.itemColorActive, /*#__PURE__*/String(classes.tabItemAnimated), tokens.itemBackgroundTransition, /*#__PURE__*/String(classes.selectedTabsItem), tokens.itemSelectedColor, tokens.itemSelectedBackgroundColor, tokens.itemSelectedColorHover, tokens.itemSelectedBackgroundColorHover, tokens.itemSelectedDividerColorHover, RightContent, tokens.additionalContentSelectedColor, tokens.additionalContentSelectedHoverColor, tokens.itemSelectedDividerColor, tokens.itemSelectedDividerHeight);

package/{emotion/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js → styled-components/es/components/Tabs/ui/Tabs/Tabs.js}

@@ -10,16 +10,16 @@ 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, useCallback, useMemo, useState, useEffect, useRef } from 'react';
 import { safeUseId } from '@salutejs/plasma-core';
-import { IconDisclosureLeft, IconDisclosureRight } from '../../../../_Icon';
-import { classes, tokens } from '../../../tokens';
-import { cx } from '../../../../../utils';
-import { TabItemRefs, TabsContext } from '../../../TabsContext';
+import { IconDisclosureLeft, IconDisclosureRight } from '../../../_Icon';
+import { classes, tokens } from '../../tokens';
+import { cx } from '../../../../utils';
+import { TabItemRefs, TabsContext } from '../../TabsContext';
 import { base as sizeCSS } from './variations/_size/base';
 import { base as viewCSS } from './variations/_view/base';
 import { base as disabledCSS } from './variations/_disabled/base';
 import { base as pilledCSS } from './variations/_pilled/base';
 import { base as stretchCSS } from './variations/_stretch/base';
-import { StyledArrow, StyledContent, StyledContentWrapper, base } from './HorizontalTabs.styles';
+import { StyledArrow, StyledContent, StyledContentWrapper, base } from './Tabs.styles';
 var Keys = /*#__PURE__*/function (Keys) {
   Keys[Keys["end"] = 35] = "end";
   Keys[Keys["home"] = 36] = "home";
@@ -27,7 +27,7 @@ var Keys = /*#__PURE__*/function (Keys) {
   Keys[Keys["right"] = 39] = "right";
   return Keys;
 }(Keys || {});
-export var horizontalTabsRoot = function horizontalTabsRoot(Root) {
+export var tabsRoot = function tabsRoot(Root) {
   return /*#__PURE__*/forwardRef(function (props, outerRef) {
     var id = props.id,
       _props$stretch = props.stretch,
@@ -206,10 +206,10 @@ export var horizontalTabsRoot = function horizontalTabsRoot(Root) {
     }, children)), !lastItemVisible && NextButton));
   });
 };
-export var horizontalTabsConfig = {
-  name: 'HorizontalTabs',
+export var tabsConfig = {
+  name: 'Tabs',
   tag: 'div',
-  layout: horizontalTabsRoot,
+  layout: tabsRoot,
   base: base,
   variations: {
     size: {

package/styled-components/es/components/Tabs/ui/{horizontal/HorizontalTabs/HorizontalTabs.styles.js → Tabs/Tabs.styles.js}

@@ -2,17 +2,17 @@ var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { css } from 'styled-components';
 import styled from 'styled-components';
-import { addFocus } from '../../../../../mixins';
-import { classes, tokens } from '../../../tokens';
+import { addFocus } from '../../../../mixins';
+import { classes, tokens } from '../../tokens';
 export var base = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n    display: flex;\n    gap: 0.125rem;\n    align-items: center;\n    position: relative;\n"])));
 export var StyledContent = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-1nr0m0h-0"
+  componentId: "plasma-new-hope__sc-1ibkmsl-0"
 })(["display:inline-flex;flex-direction:row;align-items:center;"]);
 export var StyledContentWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-1nr0m0h-1"
+  componentId: "plasma-new-hope__sc-1ibkmsl-1"
 })(["margin:-0.125rem;padding:0.25rem;box-sizing:content-box;position:relative;height:100%;width:100%;display:flex;align-items:center;&.", "{overflow:scroll;scroll-padding:0.25rem;overscroll-behavior:contain;scrollbar-width:none;::-webkit-scrollbar{display:none;}}&.", "{overflow:visible;}"], classes.tabsClipScroll, classes.tabsClipShowAll);
 export var StyledArrow = /*#__PURE__*/styled.button.withConfig({
-  componentId: "plasma-new-hope__sc-1nr0m0h-2"
+  componentId: "plasma-new-hope__sc-1ibkmsl-2"
 })(["display:flex;cursor:pointer;border:none;background-color:transparent;padding:0;outline:none;", ";&[disabled]{cursor:not-allowed;}--plasma_private-outer-padding:", ";padding-right:", ";padding-left:", ";"], /*#__PURE__*/addFocus({
   outlineSize: '0.063rem',
   outlineOffset: '-0.125rem',

package/styled-components/es/components/Tabs/ui/{horizontal/HorizontalTabs → Tabs}/variations/_disabled/base.js

@@ -1,3 +1,3 @@
 import { css } from 'styled-components';
-import { tokens } from '../../../../../tokens';
+import { tokens } from '../../../../tokens';
 export var base = /*#__PURE__*/css(["opacity:var(", ");"], tokens.disabledOpacity);

package/styled-components/es/components/Tabs/ui/{horizontal/HorizontalTabs → Tabs}/variations/_pilled/base.js

@@ -1,3 +1,3 @@
 import { css } from 'styled-components';
-import { classes, tokens } from '../../../../../tokens';
+import { classes, tokens } from '../../../../tokens';
 export var base = /*#__PURE__*/css(["&.", "{--plasma_private-outline-radius:var(", ");border-radius:var(", ");}"], /*#__PURE__*/String(classes.tabsPilled), tokens.tabsPilledBorderRadius, tokens.tabsPilledBorderRadius);

package/styled-components/es/components/Tabs/ui/{horizontal/HorizontalTabs → Tabs}/variations/_size/base.js

@@ -1,3 +1,3 @@
 import { css } from 'styled-components';
-import { tokens } from '../../../../../tokens';
+import { tokens } from '../../../../tokens';
 export var base = /*#__PURE__*/css(["width:var(", ");height:var(", ");--plasma_private-outline-radius:var(", ");border-radius:var(", ");"], tokens.tabsWidth, tokens.tabsHeight, tokens.tabsBorderRadius, tokens.tabsBorderRadius);

package/styled-components/es/components/Tabs/ui/Tabs/variations/_stretch/base.js

@@ -0,0 +1,4 @@
+import { css } from 'styled-components';
+import { classes } from '../../../../tokens';
+import { StyledContent, StyledContentWrapper } from '../../Tabs.styles';
+export var base = /*#__PURE__*/css(["&.", "{width:100%;", ",", ",", " > button{width:100%;margin-left:0;}}"], classes.tabsStretch, StyledContentWrapper, StyledContent, StyledContent);

package/styled-components/es/components/Tabs/ui/{horizontal/HorizontalTabs → Tabs}/variations/_view/base.js

@@ -1,3 +1,3 @@
 import { css } from 'styled-components';
-import { classes, tokens } from '../../../../../tokens';
+import { classes, tokens } from '../../../../tokens';
 export var base = /*#__PURE__*/css(["background-color:var(", ");&::after{content:'';position:absolute;bottom:0.125rem;left:0.125rem;right:0.125rem;background:var(", ");height:var(", ");border-radius:var(", ");}&.", "{&::after{left:1.5rem;}}&.", "{&::after{right:1.5rem;}}"], tokens.tabsBackgroundColor, tokens.tabsDividerColor, tokens.tabsDividerHeight, tokens.tabsDividerBorderRadius, classes.tabsHasLeftArrow, classes.tabsHasRightArrow);

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

@@ -1,4 +1,4 @@
-var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "textBefore", "textAfter", "placeholder", "leftHelper", "enumerationType", "requiredPlacement", "view", "size", "readOnly", "disabled", "required", "optional", "value", "chips", "onChange", "onChangeChips", "onSearch", "onKeyDown"];
+var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "textBefore", "textAfter", "placeholder", "leftHelper", "enumerationType", "requiredPlacement", "view", "size", "readOnly", "disabled", "required", "clear", "optional", "hasDivider", "value", "chips", "onChange", "onChangeChips", "onSearch", "onKeyDown"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -14,6 +14,7 @@ import { css } from 'styled-components';
 import { cx } from '../../utils';
 import { base as sizeCSS } from './variations/_size/base';
 import { base as viewCSS } from './variations/_view/base';
+import { base as clearCSS } from './variations/_clear/base';
 import { base as disabledCSS } from './variations/_disabled/base';
 import { base as readOnlyCSS } from './variations/_read-only/base';
 import { base as labelPlacementCSS } from './variations/_label-placement/base';
@@ -49,7 +50,10 @@ export var textFieldRoot = function textFieldRoot(Root) {
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       _ref$required = _ref.required,
       required = _ref$required === void 0 ? false : _ref$required,
+      _ref$clear = _ref.clear,
+      clear = _ref$clear === void 0 ? false : _ref$clear,
       optional = _ref.optional,
+      hasDivider = _ref.hasDivider,
       outerValue = _ref.value,
       values = _ref.chips,
       onChange = _ref.onChange,
@@ -78,6 +82,7 @@ export var textFieldRoot = function textFieldRoot(Root) {
     var innerId = id || uniqId;
     var labelId = safeUseId();
     var helperTextId = safeUseId();
+    var isDefaultView = view === 'default' || readOnly || disabled;
     var isChipEnumeration = enumerationType === 'chip';
     var isChipsVisible = isChipEnumeration && Boolean(chips === null || chips === void 0 ? void 0 : chips.length);
     var withHasChips = isChipsVisible ? classes.hasChips : undefined;
@@ -89,6 +94,8 @@ export var textFieldRoot = function textFieldRoot(Root) {
     var innerLabelPlacementValue = labelPlacement === 'inner' && !hasInnerLabel ? undefined : labelPlacement;
     var innerPlaceholderValue = hasPlaceholder ? placeholder : undefined;
     var placeholderShown = Boolean(innerPlaceholderValue) && !hasValue;
+    var clearClass = clear ? classes.clear : undefined;
+    var hasDividerClass = hasDivider ? classes.hasDivider : undefined;
     var requiredPlacementClass = requiredPlacement === 'right' ? 'align-right ' : undefined;
     var labelPlacementClass = innerLabelPlacementValue ? classes["".concat(innerLabelPlacementValue, "LabelPlacement")] : undefined;
     var hasValueClass = hasValue ? classes.hasValue : undefined;
@@ -180,9 +187,10 @@ export var textFieldRoot = function textFieldRoot(Root) {
       size: size,
       disabled: disabled,
       readOnly: !disabled && readOnly,
+      clear: clear,
       labelPlacement: innerLabelPlacementValue,
       onClick: handleInputFocus,
-      className: cx(labelPlacementClass, classes.textFieldGroupItem, className),
+      className: cx(labelPlacementClass, clearClass, hasDividerClass, classes.textFieldGroupItem, className),
       style: style
     }, hasOuterLabel && /*#__PURE__*/React.createElement(Label, {
       id: labelId,
@@ -196,7 +204,10 @@ export var textFieldRoot = function textFieldRoot(Root) {
       className: cx(withHasChips, wrapperWithoutLeftContent, wrapperWithoutRightContent)
     }, !hasOuterLabel && required && /*#__PURE__*/React.createElement(StyledIndicator, {
       className: cx(classes.innerLabelPlacement, requiredPlacementClass)
-    }), contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), /*#__PURE__*/React.createElement(InputLabelWrapper, {
+    }), contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, {
+      isClear: clear,
+      isDefaultView: isDefaultView
+    }, contentLeft), /*#__PURE__*/React.createElement(InputLabelWrapper, {
       tabIndex: -1,
       ref: contentRef,
       onKeyDown: handleContentKeyDown,
@@ -255,6 +266,10 @@ export var textFieldConfig = {
     size: {
       css: sizeCSS
     },
+    clear: {
+      css: clearCSS,
+      attrs: true
+    },
     disabled: {
       css: disabledCSS,
       attrs: true

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

@@ -23,13 +23,17 @@ export var Label = /*#__PURE__*/styled.label.withConfig({
 })(["position:relative;display:inline-flex;"]);
 var StyledContentSlot = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-g4vxbb-7"
-})(["color:var(", ");line-height:0;"], tokens.contentSlotColor);
+})(["color:", ";line-height:0;"], function (_ref) {
+  var isDefaultView = _ref.isDefaultView,
+    isClear = _ref.isClear;
+  return !isDefaultView && isClear ? "var(".concat(tokens.clearColor, ")") : "var(".concat(tokens.contentSlotColor, ")");
+});
 export var StyledContentLeft = /*#__PURE__*/styled(StyledContentSlot).withConfig({
   componentId: "plasma-new-hope__sc-g4vxbb-8"
 })(["margin:var(", ");"], tokens.leftContentMargin);
-export var StyledContentRight = /*#__PURE__*/styled(StyledContentSlot).withConfig({
+export var StyledContentRight = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-g4vxbb-9"
-})(["margin:var(", ");color:var(", ",var(", "));&:hover{color:var(", ");color:var(", ",var(", "));cursor:pointer;}&:active{color:var(", ",var(", "));}"], tokens.rightContentMargin, tokens.contentSlotRightColor, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotRightColorHover, tokens.contentSlotColorHover, tokens.contentSlotRightColorActive, tokens.contentSlotColorActive);
+})(["line-height:0;margin:var(", ");color:var(", ",var(", "));&:hover{color:var(", ");color:var(", ",var(", "));cursor:pointer;}&:active{color:var(", ",var(", "));}"], tokens.rightContentMargin, tokens.contentSlotRightColor, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotRightColorHover, tokens.contentSlotColorHover, tokens.contentSlotRightColorActive, tokens.contentSlotColorActive);
 export var LeftHelper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-g4vxbb-10"
 })([""]);

package/styled-components/es/components/TextField/TextField.template-doc.mdx

@@ -62,7 +62,9 @@ export function App() {
 ```
 
 ### Статус поля
-Статус поля задается с помощью свойства `status`. Возможные значения свойства: `success`, `warning` и `error`:
+Статус поля задается с помощью свойства `status`. 
+Возможные значения свойства: `success`, `warning` и `error`.
+На отображение TextField так же влияют свойства `clear` и `hasDivider`:
 
 ```tsx live
 import React from 'react';
@@ -70,22 +72,53 @@ import { TextField } from '@salutejs/{{ package }}';
 
 export function App() {
     return (
-        <div>
-            <TextField
-                placeholder="Статус"
-                status="success"
-                defaultValue="Успех"
-            />
-            <TextField
-                placeholder="Статус"
-                status="warning"
-                defaultValue="Успех"
-            />
-            <TextField
-                placeholder="Статус"
-                status="error"
-                defaultValue="Ошибка"
-            />
+        <div style=\{{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+            <div style=\{{ display: "flex", gap: "0.5rem" }}>
+                <TextField
+                    placeholder="Статус"
+                    status="success"
+                    size="m"
+                    defaultValue="Успех"
+                />
+                <TextField
+                    placeholder="Статус"
+                    status="warning"
+                    size="m"
+                    defaultValue="Предупреждение"
+                />
+                <TextField
+                    placeholder="Статус"
+                    status="error"
+                    size="m"
+                    defaultValue="Ошибка"
+                />
+            </div>
+            <div style=\{{ display: "flex", gap: "0.5rem" }}>
+                <TextField
+                    placeholder="Статус"
+                    status="success"
+                    size="m"
+                    defaultValue="Успех"
+                    clear
+                    hasDivider
+                />
+                <TextField
+                    placeholder="Статус"
+                    status="warning"
+                    size="m"
+                    defaultValue="Предупреждение"
+                    clear
+                    hasDivider
+                />
+                <TextField
+                    placeholder="Статус"
+                    status="error"
+                    size="m"
+                    defaultValue="Ошибка"
+                    clear
+                    hasDivider
+                />
+            </div>
         </div>
     );
 }

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

@@ -6,24 +6,32 @@ export var classes = {
   innerLabelPlacement: 'label-placement-inner',
   outerLabelPlacement: 'label-placement-outer',
   hideLabel: 'hide-label',
+  clear: 'textfield-clear',
+  hasDivider: 'hasDivider',
   textFieldGroupItem: 'text-field-group-item'
 };
 export var tokens = {
   color: '--plasma-textfield-color',
+  clearColor: '--plasma-textfield-clear-color',
   backgroundColor: '--plasma-textfield-bg-color',
   backgroundColorHover: '--plasma-textfield-bg-color-hover',
   backgroundColorFocus: '--plasma-textfield-bg-color-focus',
   borderColor: '--plasma-textfield-border-color',
   borderColorHover: '--plasma-textfield-border-color-hover',
   borderColorFocus: '--plasma-textfield-border-color-focus',
+  dividerColor: '--plasma-textfield-divider-color',
+  dividerColorHover: '--plasma-textfield-divider-color-hover',
+  dividerColorFocus: '--plasma-textfield-divider-color-focus',
   /** Цвета для read-only состояния */
   colorReadOnly: '--plasma-textfield-color-readonly',
   backgroundColorReadOnly: '--plasma-textfield-bg-color-readonly',
   borderColorReadOnly: '--plasma-textfield-border-color-readonly',
   placeholderColorReadOnly: '--plasma-textfield__placeholder-color-readonly',
+  dividerColorReadOnly: '--plasma-textfield-divider-color-readonly',
   /** Цвет каретки */
   caretColor: '--plasma-textfield__caret-color',
   placeholderColor: '--plasma-textfield__placeholder-color',
+  clearPlaceholderColor: '--plasma-textfield__clear-placeholder-color',
   optionalColor: '--plasma-textfield__optional-color',
   height: '--plasma-textfield-height',
   borderWidth: '--plasma-textfield-border-width',
@@ -51,6 +59,7 @@ export var tokens = {
   labelColor: '--plasma-textfield__label-color',
   labelColorReadOnly: '--plasma-textfield__label-color-readonly',
   labelOffset: '--plasma-textfield__label-offset',
+  clearLabelOffset: '--plasma-textfield__clear-label-offset',
   labelFontFamily: '--plasma-textfield__label-font-family',
   labelFontStyle: '--plasma-textfield__label-font-style',
   labelFontSize: '--plasma-textfield__label-font-size',

package/styled-components/es/components/TextField/variations/_clear/base.js

@@ -0,0 +1,4 @@
+import { css } from 'styled-components';
+import { classes, tokens } from '../../TextField.tokens';
+import { Input, InputPlaceholder, InputWrapper, Label, StyledContentLeft, StyledContentRight } from '../../TextField.styles';
+export var base = /*#__PURE__*/css(["&.", "{&[readonly] ", ",", "{background-color:unset;box-shadow:none;border-radius:0;padding-left:0;padding-right:0;&:hover{background-color:unset;}}", "{margin-left:0;}", "{margin-right:0;}", "{color:var(", ");}&.", "{", "{margin-bottom:var(", ");}}", "{color:var(", ");}&.", "{", "{--plasma_private-textfield-divider-color:var(", ");&:before{content:'';position:absolute;height:0.063rem;width:100%;bottom:0;left:0;background-color:var(--plasma_private-textfield-divider-color);transition:background-color 0.1s ease-in;}}&:not([readonly]) ", ":hover{--plasma_private-textfield-divider-color:var( ", ",var(", ") );}&:not([readonly]) ", ":focus-within{--plasma_private-textfield-divider-color:var( ", ",var(", ") );}}}"], classes.clear, InputWrapper, InputWrapper, StyledContentLeft, StyledContentRight, InputPlaceholder, tokens.clearPlaceholderColor, classes.outerLabelPlacement, Label, tokens.clearLabelOffset, Input, tokens.clearColor, classes.hasDivider, InputWrapper, /*#__PURE__*/String(tokens.dividerColor), InputWrapper, tokens.dividerColorHover, /*#__PURE__*/String(tokens.dividerColor), InputWrapper, tokens.dividerColorFocus, /*#__PURE__*/String(tokens.dividerColor));

package/styled-components/es/components/TextField/variations/_clear/tokens.json

@@ -0,0 +1,10 @@
+{
+    "type": "boolean",
+    "tokens": [
+        "--plasma-textfield__clear-label-offset",
+        "--plasma-textfield-divider-color",
+        "--plasma-textfield-divider-color-hover",
+        "--plasma-textfield-divider-color-focus",
+        "--plasma-textfield-clear-color"
+    ]
+}

package/styled-components/es/components/TextField/variations/_disabled/base.js

@@ -1,4 +1,4 @@
 import { css } from 'styled-components';
 import { tokens } from '../../TextField.tokens';
 import { Input } from '../../TextField.styles';
-export var base = /*#__PURE__*/css(["&[disabled]{opacity:var(", ");cursor:not-allowed;", "{cursor:not-allowed;min-width:unset;}}"], tokens.disabledOpacity, Input);
+export var base = /*#__PURE__*/css(["&[disabled]{pointer-events:none;opacity:var(", ");cursor:not-allowed;", "{cursor:not-allowed;min-width:unset;}}"], tokens.disabledOpacity, Input);

package/styled-components/es/components/TextField/variations/_label-placement/base.js

@@ -1,4 +1,4 @@
 import { css } from 'styled-components';
 import { classes, tokens } from '../../TextField.tokens';
 import { Input, InputContainer, Label, StyledTextAfter, StyledTextBefore } from '../../TextField.styles';
-export var base = /*#__PURE__*/css(["&.", "{", "{position:relative;display:inline-block;margin-bottom:var(", ");color:var(", ");}}&.", "{", "{padding:var(", ");}", ",", "{padding:var(", ");}", ":focus ~ ", ",", ".", " ~ ", "{align-items:flex-start;padding:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{color:var(", ");pointer-events:none;position:absolute;top:0;display:flex;align-items:center;box-sizing:border-box;height:var(", ");padding-top:calc(calc(var(", ") - var(", ")) / 2);padding-bottom:calc(calc(var(", ") - var(", ")) / 2);}}"], classes.outerLabelPlacement, Label, tokens.labelOffset, tokens.labelColor, classes.innerLabelPlacement, InputContainer, tokens.contentLabelInnerPadding, StyledTextAfter, StyledTextBefore, tokens.contentLabelInnerPadding, Input, Label, Input, classes.hasValue, Label, tokens.labelInnerPadding, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight, Label, tokens.placeholderColor, tokens.height, tokens.height, tokens.labelLineHeight, tokens.height, tokens.labelLineHeight);
+export var base = /*#__PURE__*/css(["&.", "{", "{position:relative;display:inline-block;margin-bottom:var(", ");color:var(", ");}}&.", "{", "{padding:var(", ");}", ",", "{padding:var(", ");}", ":focus ~ ", ",", ".", " ~ ", "{color:var(", ");align-items:flex-start;padding:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{color:var(", ");pointer-events:none;position:absolute;top:0;display:flex;align-items:center;box-sizing:border-box;height:var(", ");padding-top:calc(calc(var(", ") - var(", ")) / 2);padding-bottom:calc(calc(var(", ") - var(", ")) / 2);}&.", " ", "{color:var(", ");}}"], classes.outerLabelPlacement, Label, tokens.labelOffset, tokens.labelColor, classes.innerLabelPlacement, InputContainer, tokens.contentLabelInnerPadding, StyledTextAfter, StyledTextBefore, tokens.contentLabelInnerPadding, Input, Label, Input, classes.hasValue, Label, tokens.placeholderColor, tokens.labelInnerPadding, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight, Label, tokens.placeholderColor, tokens.height, tokens.height, tokens.labelLineHeight, tokens.height, tokens.labelLineHeight, classes.clear, Label, tokens.clearPlaceholderColor);

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

@@ -1,4 +1,4 @@
 import { css } from 'styled-components';
-import { tokens } from '../../TextField.tokens';
+import { classes, tokens } from '../../TextField.tokens';
 import { Input, InputPlaceholder, InputWrapper, Label, LeftHelper } from '../../TextField.styles';
-export var base = /*#__PURE__*/css(["&[readonly]{", "{color:var(", ");background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}", ":hover{background-color:var(", ");}", "{color:var(", ");}", "{color:var(", ");cursor:default;min-width:unset;}", "{color:var(", ");}", "{color:var(", ");}}"], InputWrapper, tokens.colorReadOnly, /*#__PURE__*/String(tokens.backgroundColorReadOnly), /*#__PURE__*/String(tokens.borderWidth), /*#__PURE__*/String(tokens.borderColorReadOnly), InputWrapper, tokens.backgroundColorReadOnly, InputPlaceholder, tokens.placeholderColorReadOnly, Input, tokens.colorReadOnly, LeftHelper, tokens.leftHelperColorReadOnly, Label, tokens.labelColorReadOnly);
+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(", ");}", "{color:var(", ");}", "{color:var(", ");cursor:default;min-width:unset;}", "{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, InputPlaceholder, tokens.placeholderColorReadOnly, Input, tokens.colorReadOnly, LeftHelper, tokens.leftHelperColorReadOnly, classes.outerLabelPlacement, Label, tokens.labelColorReadOnly);

package/styled-components/es/examples/plasma_b2c/components/Tabs/{horizontal/HorizontalTabItem.config.js → TabItem.config.js}

@@ -1,5 +1,5 @@
 import { css } from 'styled-components';
-import { tabsTokens } from '../../../../../components/Tabs';
+import { tabsTokens } from '../../../../components/Tabs';
 export var config = {
   defaults: {
     view: 'default',

package/styled-components/es/examples/plasma_b2c/components/Tabs/TabItem.js

@@ -1,15 +1,5 @@
-import React from 'react';
-import { horizontalTabItemConfig, verticalTabItemConfig } from '../../../../components/Tabs';
+import { tabItemConfig } from '../../../../components/Tabs';
 import { component, mergeConfig } from '../../../../engines';
-import { config as horizontalConfig } from './horizontal/HorizontalTabItem.config';
-import { config as verticalConfig } from './vertical/VerticalTabItem.config';
-var mergedHorizontalTabItemConfig = /*#__PURE__*/mergeConfig(horizontalTabItemConfig, horizontalConfig);
-var HorizontalTabItem = /*#__PURE__*/component(mergedHorizontalTabItemConfig);
-var mergedVerticalTabItemConfig = /*#__PURE__*/mergeConfig(verticalTabItemConfig, verticalConfig);
-var VerticalTabItem = /*#__PURE__*/component(mergedVerticalTabItemConfig);
-export var TabItem = function TabItem(props) {
-  if (props.orientation === 'vertical') {
-    return /*#__PURE__*/React.createElement(VerticalTabItem, props);
-  }
-  return /*#__PURE__*/React.createElement(HorizontalTabItem, props);
-};
+import { config } from './TabItem.config';
+var mergedConfig = /*#__PURE__*/mergeConfig(tabItemConfig, config);
+export var TabItem = /*#__PURE__*/component(mergedConfig);

package/styled-components/es/examples/{plasma_web/components/Tabs/horizontal/HorizontalTabs.config.js → plasma_b2c/components/Tabs/Tabs.config.js}

@@ -1,5 +1,5 @@
 import { css } from 'styled-components';
-import { tabsTokens } from '../../../../../components/Tabs';
+import { tabsTokens } from '../../../../components/Tabs';
 export var config = {
   defaults: {
     view: 'filled',

package/styled-components/es/examples/plasma_b2c/components/Tabs/Tabs.js

@@ -1,17 +1,5 @@
-import React from 'react';
-import { horizontalTabsConfig, verticalTabsConfig, VerticalTabsContext } from '../../../../components/Tabs';
+import { tabsConfig } from '../../../../components/Tabs';
 import { component, mergeConfig } from '../../../../engines';
-import { config as horizontalConfig } from './horizontal/HorizontalTabs.config';
-import { config as verticalConfig } from './vertical/VerticalTabs.config';
-var mergedHorizontalTabsConfig = /*#__PURE__*/mergeConfig(horizontalTabsConfig, horizontalConfig);
-var mergedVerticalTabsConfig = /*#__PURE__*/mergeConfig(verticalTabsConfig, verticalConfig);
-var HorizontalTabs = /*#__PURE__*/component(mergedHorizontalTabsConfig);
-var VerticalTabs = /*#__PURE__*/component(mergedVerticalTabsConfig);
-export var Tabs = function Tabs(props) {
-  if (props.orientation === 'vertical') {
-    return /*#__PURE__*/React.createElement(VerticalTabsContext.Provider, {
-      value: props.contentLeft
-    }, /*#__PURE__*/React.createElement(VerticalTabs, props));
-  }
-  return /*#__PURE__*/React.createElement(HorizontalTabs, props);
-};
+import { config } from './Tabs.config';
+var mergedConfig = /*#__PURE__*/mergeConfig(tabsConfig, config);
+export var Tabs = /*#__PURE__*/component(mergedConfig);