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

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

@@ -4,19 +4,19 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.horizontalTabsRoot = exports.horizontalTabsConfig = void 0;
+exports.tabsRoot = exports.tabsConfig = void 0;
 var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
 var _plasmaCore = /*#__PURE__*/require("@salutejs/plasma-core");
-var _Icon = /*#__PURE__*/require("../../../../_Icon");
-var _tokens = /*#__PURE__*/require("../../../tokens");
-var _utils = /*#__PURE__*/require("../../../../../utils");
-var _TabsContext = /*#__PURE__*/require("../../../TabsContext");
+var _Icon = /*#__PURE__*/require("../../../_Icon");
+var _tokens = /*#__PURE__*/require("../../tokens");
+var _utils = /*#__PURE__*/require("../../../../utils");
+var _TabsContext = /*#__PURE__*/require("../../TabsContext");
 var _base = /*#__PURE__*/require("./variations/_size/base");
 var _base2 = /*#__PURE__*/require("./variations/_view/base");
 var _base3 = /*#__PURE__*/require("./variations/_disabled/base");
 var _base4 = /*#__PURE__*/require("./variations/_pilled/base");
 var _base5 = /*#__PURE__*/require("./variations/_stretch/base");
-var _HorizontalTabs = /*#__PURE__*/require("./HorizontalTabs.styles");
+var _Tabs = /*#__PURE__*/require("./Tabs.styles");
 var _excluded = ["id", "stretch", "disabled", "clip", "size", "view", "children", "pilled", "index", "className"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
@@ -36,7 +36,7 @@ var Keys = /*#__PURE__*/function (Keys) {
   Keys[Keys["right"] = 39] = "right";
   return Keys;
 }(Keys || {});
-var horizontalTabsRoot = exports.horizontalTabsRoot = function horizontalTabsRoot(Root) {
+var tabsRoot = exports.tabsRoot = function tabsRoot(Root) {
   return /*#__PURE__*/(0, _react.forwardRef)(function (props, outerRef) {
     var id = props.id,
       _props$stretch = props.stretch,
@@ -114,7 +114,7 @@ var horizontalTabsRoot = exports.horizontalTabsRoot = function horizontalTabsRoo
       });
     }, [disabled, scrollRef, refs]);
     var PreviousButton = (0, _react.useMemo)(function () {
-      return /*#__PURE__*/_react["default"].createElement(_HorizontalTabs.StyledArrow, {
+      return /*#__PURE__*/_react["default"].createElement(_Tabs.StyledArrow, {
         type: "button",
         "aria-label": "\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 \u0442\u0430\u0431",
         onClick: onPrev,
@@ -128,7 +128,7 @@ var horizontalTabsRoot = exports.horizontalTabsRoot = function horizontalTabsRoo
       }));
     }, [onPrev, disabled, isFilled]);
     var NextButton = (0, _react.useMemo)(function () {
-      return /*#__PURE__*/_react["default"].createElement(_HorizontalTabs.StyledArrow, {
+      return /*#__PURE__*/_react["default"].createElement(_Tabs.StyledArrow, {
         type: "button",
         "aria-label": "\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 \u0442\u0430\u0431",
         onClick: onNext,
@@ -206,20 +206,20 @@ var horizontalTabsRoot = exports.horizontalTabsRoot = function horizontalTabsRoo
       disabled: disabled,
       className: (0, _utils.cx)(pilledClass, stretchClass, hasLeftArrowClass, hasRightArrowClass, className),
       onKeyDown: onKeyDown
-    }, rest), !firstItemVisible && PreviousButton, /*#__PURE__*/_react["default"].createElement(_HorizontalTabs.StyledContentWrapper, {
+    }, rest), !firstItemVisible && PreviousButton, /*#__PURE__*/_react["default"].createElement(_Tabs.StyledContentWrapper, {
       className: (0, _utils.cx)(clipScrollClass, clipShowAllClass),
       ref: scrollRef,
       onScroll: handleScroll
-    }, /*#__PURE__*/_react["default"].createElement(_HorizontalTabs.StyledContent, {
+    }, /*#__PURE__*/_react["default"].createElement(_Tabs.StyledContent, {
       ref: trackRef
     }, children)), !lastItemVisible && NextButton));
   });
 };
-var horizontalTabsConfig = exports.horizontalTabsConfig = {
-  name: 'HorizontalTabs',
+var tabsConfig = exports.tabsConfig = {
+  name: 'Tabs',
   tag: 'div',
-  layout: horizontalTabsRoot,
-  base: _HorizontalTabs.base,
+  layout: tabsRoot,
+  base: _Tabs.base,
   variations: {
     size: {
       css: _base.base

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

@@ -6,21 +6,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.base = exports.StyledContentWrapper = exports.StyledContent = exports.StyledArrow = void 0;
 var _styledComponents = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("styled-components"));
-var _mixins = /*#__PURE__*/require("../../../../../mixins");
-var _tokens = /*#__PURE__*/require("../../../tokens");
+var _mixins = /*#__PURE__*/require("../../../../mixins");
+var _tokens = /*#__PURE__*/require("../../tokens");
 var _templateObject;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n    display: flex;\n    gap: 0.125rem;\n    align-items: center;\n    position: relative;\n"])));
 var StyledContent = exports.StyledContent = /*#__PURE__*/_styledComponents["default"].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;"]);
 var StyledContentWrapper = exports.StyledContentWrapper = /*#__PURE__*/_styledComponents["default"].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;}"], _tokens.classes.tabsClipScroll, _tokens.classes.tabsClipShowAll);
 var StyledArrow = exports.StyledArrow = /*#__PURE__*/_styledComponents["default"].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__*/(0, _mixins.addFocus)({
   outlineSize: '0.063rem',
   outlineOffset: '-0.125rem',

package/styled-components/cjs/components/Tabs/ui/{vertical/VerticalTabs → Tabs}/variations/_disabled/base.js

@@ -5,5 +5,5 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
-var _tokens = /*#__PURE__*/require("../../../../../tokens");
+var _tokens = /*#__PURE__*/require("../../../../tokens");
 var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["opacity:var(", ");"], _tokens.tokens.disabledOpacity);

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

@@ -5,5 +5,5 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
-var _tokens = /*#__PURE__*/require("../../../../../tokens");
+var _tokens = /*#__PURE__*/require("../../../../tokens");
 var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", "{--plasma_private-outline-radius:var(", ");border-radius:var(", ");}"], /*#__PURE__*/String(_tokens.classes.tabsPilled), _tokens.tokens.tabsPilledBorderRadius, _tokens.tokens.tabsPilledBorderRadius);

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

@@ -5,5 +5,5 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
-var _tokens = /*#__PURE__*/require("../../../../../tokens");
+var _tokens = /*#__PURE__*/require("../../../../tokens");
 var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["width:var(", ");height:var(", ");--plasma_private-outline-radius:var(", ");border-radius:var(", ");"], _tokens.tokens.tabsWidth, _tokens.tokens.tabsHeight, _tokens.tokens.tabsBorderRadius, _tokens.tokens.tabsBorderRadius);

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

@@ -5,6 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
-var _tokens = /*#__PURE__*/require("../../../../../tokens");
-var _HorizontalTabs = /*#__PURE__*/require("../../HorizontalTabs.styles");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", "{width:100%;", ",", ",", " > button{width:100%;margin-left:0;}}"], _tokens.classes.tabsStretch, _HorizontalTabs.StyledContentWrapper, _HorizontalTabs.StyledContent, _HorizontalTabs.StyledContent);
+var _tokens = /*#__PURE__*/require("../../../../tokens");
+var _Tabs = /*#__PURE__*/require("../../Tabs.styles");
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", "{width:100%;", ",", ",", " > button{width:100%;margin-left:0;}}"], _tokens.classes.tabsStretch, _Tabs.StyledContentWrapper, _Tabs.StyledContent, _Tabs.StyledContent);

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

@@ -5,5 +5,5 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
-var _tokens = /*#__PURE__*/require("../../../../../tokens");
+var _tokens = /*#__PURE__*/require("../../../../tokens");
 var base = exports.base = /*#__PURE__*/(0, _styledComponents.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.tokens.tabsBackgroundColor, _tokens.tokens.tabsDividerColor, _tokens.tokens.tabsDividerHeight, _tokens.tokens.tabsDividerBorderRadius, _tokens.classes.tabsHasLeftArrow, _tokens.classes.tabsHasRightArrow);

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

@@ -11,14 +11,15 @@ var _styledComponents = /*#__PURE__*/require("styled-components");
 var _utils = /*#__PURE__*/require("../../utils");
 var _base = /*#__PURE__*/require("./variations/_size/base");
 var _base2 = /*#__PURE__*/require("./variations/_view/base");
-var _base3 = /*#__PURE__*/require("./variations/_disabled/base");
-var _base4 = /*#__PURE__*/require("./variations/_read-only/base");
-var _base5 = /*#__PURE__*/require("./variations/_label-placement/base");
+var _base3 = /*#__PURE__*/require("./variations/_clear/base");
+var _base4 = /*#__PURE__*/require("./variations/_disabled/base");
+var _base5 = /*#__PURE__*/require("./variations/_read-only/base");
+var _base6 = /*#__PURE__*/require("./variations/_label-placement/base");
 var _TextField = /*#__PURE__*/require("./TextField.styles");
 var _TextField2 = /*#__PURE__*/require("./TextField.tokens");
 var _ui = /*#__PURE__*/require("./ui");
 var _hooks = /*#__PURE__*/require("./hooks");
-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 _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 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); }
@@ -58,7 +59,10 @@ var textFieldRoot = exports.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,
@@ -87,6 +91,7 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
     var innerId = id || uniqId;
     var labelId = (0, _plasmaCore.safeUseId)();
     var helperTextId = (0, _plasmaCore.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 ? _TextField2.classes.hasChips : undefined;
@@ -98,6 +103,8 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
     var innerLabelPlacementValue = labelPlacement === 'inner' && !hasInnerLabel ? undefined : labelPlacement;
     var innerPlaceholderValue = hasPlaceholder ? placeholder : undefined;
     var placeholderShown = Boolean(innerPlaceholderValue) && !hasValue;
+    var clearClass = clear ? _TextField2.classes.clear : undefined;
+    var hasDividerClass = hasDivider ? _TextField2.classes.hasDivider : undefined;
     var requiredPlacementClass = requiredPlacement === 'right' ? 'align-right ' : undefined;
     var labelPlacementClass = innerLabelPlacementValue ? _TextField2.classes["".concat(innerLabelPlacementValue, "LabelPlacement")] : undefined;
     var hasValueClass = hasValue ? _TextField2.classes.hasValue : undefined;
@@ -189,9 +196,10 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
       size: size,
       disabled: disabled,
       readOnly: !disabled && readOnly,
+      clear: clear,
       labelPlacement: innerLabelPlacementValue,
       onClick: handleInputFocus,
-      className: (0, _utils.cx)(labelPlacementClass, _TextField2.classes.textFieldGroupItem, className),
+      className: (0, _utils.cx)(labelPlacementClass, clearClass, hasDividerClass, _TextField2.classes.textFieldGroupItem, className),
       style: style
     }, hasOuterLabel && /*#__PURE__*/_react["default"].createElement(_TextField.Label, {
       id: labelId,
@@ -205,7 +213,10 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
       className: (0, _utils.cx)(withHasChips, wrapperWithoutLeftContent, wrapperWithoutRightContent)
     }, !hasOuterLabel && required && /*#__PURE__*/_react["default"].createElement(_TextField.StyledIndicator, {
       className: (0, _utils.cx)(_TextField2.classes.innerLabelPlacement, requiredPlacementClass)
-    }), contentLeft && /*#__PURE__*/_react["default"].createElement(_TextField.StyledContentLeft, null, contentLeft), /*#__PURE__*/_react["default"].createElement(_TextField.InputLabelWrapper, {
+    }), contentLeft && /*#__PURE__*/_react["default"].createElement(_TextField.StyledContentLeft, {
+      isClear: clear,
+      isDefaultView: isDefaultView
+    }, contentLeft), /*#__PURE__*/_react["default"].createElement(_TextField.InputLabelWrapper, {
       tabIndex: -1,
       ref: contentRef,
       onKeyDown: handleContentKeyDown,
@@ -264,16 +275,20 @@ var textFieldConfig = exports.textFieldConfig = {
     size: {
       css: _base.base
     },
-    disabled: {
+    clear: {
       css: _base3.base,
       attrs: true
     },
-    readOnly: {
+    disabled: {
       css: _base4.base,
       attrs: true
     },
+    readOnly: {
+      css: _base5.base,
+      attrs: true
+    },
     labelPlacement: {
-      css: _base5.base
+      css: _base6.base
     }
   },
   defaults: {

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

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

package/styled-components/cjs/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/cjs/components/TextField/TextField.tokens.js

@@ -12,24 +12,32 @@ var classes = exports.classes = {
   innerLabelPlacement: 'label-placement-inner',
   outerLabelPlacement: 'label-placement-outer',
   hideLabel: 'hide-label',
+  clear: 'textfield-clear',
+  hasDivider: 'hasDivider',
   textFieldGroupItem: 'text-field-group-item'
 };
 var tokens = exports.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',
@@ -57,6 +65,7 @@ var tokens = exports.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/cjs/components/TextField/variations/_clear/base.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.base = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _TextField = /*#__PURE__*/require("../../TextField.tokens");
+var _TextField2 = /*#__PURE__*/require("../../TextField.styles");
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.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(", ") );}}}"], _TextField.classes.clear, _TextField2.InputWrapper, _TextField2.InputWrapper, _TextField2.StyledContentLeft, _TextField2.StyledContentRight, _TextField2.InputPlaceholder, _TextField.tokens.clearPlaceholderColor, _TextField.classes.outerLabelPlacement, _TextField2.Label, _TextField.tokens.clearLabelOffset, _TextField2.Input, _TextField.tokens.clearColor, _TextField.classes.hasDivider, _TextField2.InputWrapper, /*#__PURE__*/String(_TextField.tokens.dividerColor), _TextField2.InputWrapper, _TextField.tokens.dividerColorHover, /*#__PURE__*/String(_TextField.tokens.dividerColor), _TextField2.InputWrapper, _TextField.tokens.dividerColorFocus, /*#__PURE__*/String(_TextField.tokens.dividerColor));

package/styled-components/cjs/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/cjs/components/TextField/variations/_disabled/base.js

@@ -7,4 +7,4 @@ exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _TextField = /*#__PURE__*/require("../../TextField.tokens");
 var _TextField2 = /*#__PURE__*/require("../../TextField.styles");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&[disabled]{opacity:var(", ");cursor:not-allowed;", "{cursor:not-allowed;min-width:unset;}}"], _TextField.tokens.disabledOpacity, _TextField2.Input);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&[disabled]{pointer-events:none;opacity:var(", ");cursor:not-allowed;", "{cursor:not-allowed;min-width:unset;}}"], _TextField.tokens.disabledOpacity, _TextField2.Input);

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

@@ -7,4 +7,4 @@ exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _TextField = /*#__PURE__*/require("../../TextField.tokens");
 var _TextField2 = /*#__PURE__*/require("../../TextField.styles");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.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);}}"], _TextField.classes.outerLabelPlacement, _TextField2.Label, _TextField.tokens.labelOffset, _TextField.tokens.labelColor, _TextField.classes.innerLabelPlacement, _TextField2.InputContainer, _TextField.tokens.contentLabelInnerPadding, _TextField2.StyledTextAfter, _TextField2.StyledTextBefore, _TextField.tokens.contentLabelInnerPadding, _TextField2.Input, _TextField2.Label, _TextField2.Input, _TextField.classes.hasValue, _TextField2.Label, _TextField.tokens.labelInnerPadding, _TextField.tokens.labelInnerFontFamily, _TextField.tokens.labelInnerFontSize, _TextField.tokens.labelInnerFontStyle, _TextField.tokens.labelInnerFontWeight, _TextField.tokens.labelInnerLetterSpacing, _TextField.tokens.labelInnerLineHeight, _TextField2.Label, _TextField.tokens.placeholderColor, _TextField.tokens.height, _TextField.tokens.height, _TextField.tokens.labelLineHeight, _TextField.tokens.height, _TextField.tokens.labelLineHeight);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.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(", ");}}"], _TextField.classes.outerLabelPlacement, _TextField2.Label, _TextField.tokens.labelOffset, _TextField.tokens.labelColor, _TextField.classes.innerLabelPlacement, _TextField2.InputContainer, _TextField.tokens.contentLabelInnerPadding, _TextField2.StyledTextAfter, _TextField2.StyledTextBefore, _TextField.tokens.contentLabelInnerPadding, _TextField2.Input, _TextField2.Label, _TextField2.Input, _TextField.classes.hasValue, _TextField2.Label, _TextField.tokens.placeholderColor, _TextField.tokens.labelInnerPadding, _TextField.tokens.labelInnerFontFamily, _TextField.tokens.labelInnerFontSize, _TextField.tokens.labelInnerFontStyle, _TextField.tokens.labelInnerFontWeight, _TextField.tokens.labelInnerLetterSpacing, _TextField.tokens.labelInnerLineHeight, _TextField2.Label, _TextField.tokens.placeholderColor, _TextField.tokens.height, _TextField.tokens.height, _TextField.tokens.labelLineHeight, _TextField.tokens.height, _TextField.tokens.labelLineHeight, _TextField.classes.clear, _TextField2.Label, _TextField.tokens.clearPlaceholderColor);

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

@@ -7,4 +7,4 @@ exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _TextField = /*#__PURE__*/require("../../TextField.tokens");
 var _TextField2 = /*#__PURE__*/require("../../TextField.styles");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.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(", ");}}"], _TextField2.InputWrapper, _TextField.tokens.colorReadOnly, /*#__PURE__*/String(_TextField.tokens.backgroundColorReadOnly), /*#__PURE__*/String(_TextField.tokens.borderWidth), /*#__PURE__*/String(_TextField.tokens.borderColorReadOnly), _TextField2.InputWrapper, _TextField.tokens.backgroundColorReadOnly, _TextField2.InputPlaceholder, _TextField.tokens.placeholderColorReadOnly, _TextField2.Input, _TextField.tokens.colorReadOnly, _TextField2.LeftHelper, _TextField.tokens.leftHelperColorReadOnly, _TextField2.Label, _TextField.tokens.labelColorReadOnly);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.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(", ");}}"], _TextField2.InputWrapper, _TextField.tokens.colorReadOnly, /*#__PURE__*/String(_TextField.tokens.backgroundColorReadOnly), /*#__PURE__*/String(_TextField.tokens.borderWidth), /*#__PURE__*/String(_TextField.tokens.borderColorReadOnly), _TextField.classes.hasDivider, _TextField2.InputWrapper, /*#__PURE__*/String(_TextField.tokens.dividerColorReadOnly), _TextField2.InputWrapper, _TextField.tokens.backgroundColorReadOnly, _TextField2.InputPlaceholder, _TextField.tokens.placeholderColorReadOnly, _TextField2.Input, _TextField.tokens.colorReadOnly, _TextField2.LeftHelper, _TextField.tokens.leftHelperColorReadOnly, _TextField.classes.outerLabelPlacement, _TextField2.Label, _TextField.tokens.labelColorReadOnly);

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.config = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
-var _Tabs = /*#__PURE__*/require("../../../../../components/Tabs");
+var _Tabs = /*#__PURE__*/require("../../../../components/Tabs");
 var config = exports.config = {
   defaults: {
     view: 'default',

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

@@ -4,19 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TabItem = void 0;
-var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
 var _Tabs = /*#__PURE__*/require("../../../../components/Tabs");
 var _engines = /*#__PURE__*/require("../../../../engines");
-var _HorizontalTabItem = /*#__PURE__*/require("./horizontal/HorizontalTabItem.config");
-var _VerticalTabItem = /*#__PURE__*/require("./vertical/VerticalTabItem.config");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var mergedHorizontalTabItemConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Tabs.horizontalTabItemConfig, _HorizontalTabItem.config);
-var HorizontalTabItem = /*#__PURE__*/(0, _engines.component)(mergedHorizontalTabItemConfig);
-var mergedVerticalTabItemConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Tabs.verticalTabItemConfig, _VerticalTabItem.config);
-var VerticalTabItem = /*#__PURE__*/(0, _engines.component)(mergedVerticalTabItemConfig);
-var TabItem = exports.TabItem = function TabItem(props) {
-  if (props.orientation === 'vertical') {
-    return /*#__PURE__*/_react["default"].createElement(VerticalTabItem, props);
-  }
-  return /*#__PURE__*/_react["default"].createElement(HorizontalTabItem, props);
-};
+var _TabItem = /*#__PURE__*/require("./TabItem.config");
+var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Tabs.tabItemConfig, _TabItem.config);
+var TabItem = exports.TabItem = /*#__PURE__*/(0, _engines.component)(mergedConfig);

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.config = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
-var _Tabs = /*#__PURE__*/require("../../../../../components/Tabs");
+var _Tabs = /*#__PURE__*/require("../../../../components/Tabs");
 var config = exports.config = {
   defaults: {
     view: 'filled',

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

@@ -4,21 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Tabs = void 0;
-var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
 var _Tabs = /*#__PURE__*/require("../../../../components/Tabs");
 var _engines = /*#__PURE__*/require("../../../../engines");
-var _HorizontalTabs = /*#__PURE__*/require("./horizontal/HorizontalTabs.config");
-var _VerticalTabs = /*#__PURE__*/require("./vertical/VerticalTabs.config");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var mergedHorizontalTabsConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Tabs.horizontalTabsConfig, _HorizontalTabs.config);
-var mergedVerticalTabsConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Tabs.verticalTabsConfig, _VerticalTabs.config);
-var HorizontalTabs = /*#__PURE__*/(0, _engines.component)(mergedHorizontalTabsConfig);
-var VerticalTabs = /*#__PURE__*/(0, _engines.component)(mergedVerticalTabsConfig);
-var Tabs = exports.Tabs = function Tabs(props) {
-  if (props.orientation === 'vertical') {
-    return /*#__PURE__*/_react["default"].createElement(_Tabs.VerticalTabsContext.Provider, {
-      value: props.contentLeft
-    }, /*#__PURE__*/_react["default"].createElement(VerticalTabs, props));
-  }
-  return /*#__PURE__*/_react["default"].createElement(HorizontalTabs, props);
-};
+var _Tabs2 = /*#__PURE__*/require("./Tabs.config");
+var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Tabs.tabsConfig, _Tabs2.config);
+var Tabs = exports.Tabs = /*#__PURE__*/(0, _engines.component)(mergedConfig);