@salutejs/plasma-new-hope 0.152.0-canary.1451.11029152908.0 → 0.153.0-canary.1446.11031564701.0

package/styled-components/cjs/index.js

@@ -102,6 +102,17 @@ Object.keys(_Chip).forEach(function (key) {
     }
   });
 });
+var _ChipGroup = /*#__PURE__*/require("./components/ChipGroup");
+Object.keys(_ChipGroup).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChipGroup[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ChipGroup[key];
+    }
+  });
+});
 var _Cell = /*#__PURE__*/require("./components/Cell");
 Object.keys(_Cell).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

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

@@ -51,7 +51,7 @@ export var chipRoot = function chipRoot(Root) {
     return /*#__PURE__*/React.createElement(Root, _extends({
       type: "button",
       ref: ref,
-      className: cx(pilledClass, className),
+      className: cx(pilledClass, classes.chipItem, className),
       tabIndex: readOnly ? -1 : 0,
       onClick: handleClick,
       disabled: disabled,

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

@@ -1,5 +1,6 @@
 export var classes = {
-  pilled: 'chip-pilled'
+  pilled: 'chip-pilled',
+  chipItem: 'chip-item'
 };
 export var tokens = {
   background: '--plasma-chip-background',

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

@@ -1,2 +1,2 @@
 export { chipRoot, chipConfig } from './Chip';
-export { tokens as chipTokens } from './Chip.tokens';
+export { tokens as chipTokens, classes as chipClasses } from './Chip.tokens';

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

@@ -0,0 +1,56 @@
+var _excluded = ["children", "view", "size", "className", "isWrapped", "gap", "isCommonChipStyles"];
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+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 } from 'react';
+import { cx } from '../../utils';
+import { base } from './ChipGroup.styles';
+import { base as viewCSS } from './variations/_view/base';
+import { base as sizeCSS } from './variations/_size/base';
+import { base as gapCSS } from './variations/_gap/base';
+import { classes } from './ChipGroup.tokens';
+export var chipGroupRoot = function chipGroupRoot(Root) {
+  return /*#__PURE__*/forwardRef(function (props, ref) {
+    var children = props.children,
+      view = props.view,
+      size = props.size,
+      className = props.className,
+      isWrapped = props.isWrapped,
+      _props$gap = props.gap,
+      gap = _props$gap === void 0 ? 'dense' : _props$gap,
+      _props$isCommonChipSt = props.isCommonChipStyles,
+      isCommonChipStyles = _props$isCommonChipSt === void 0 ? true : _props$isCommonChipSt,
+      rest = _objectWithoutProperties(props, _excluded);
+    var overrideStylesClass = isCommonChipStyles ? classes.chipGroupOverrideStyles : undefined;
+    var wrappedClass = isWrapped ? classes.wrap : undefined;
+    return /*#__PURE__*/React.createElement(Root, _extends({
+      ref: ref,
+      view: view,
+      size: size,
+      gap: gap,
+      className: cx(overrideStylesClass, wrappedClass, className)
+    }, rest), children);
+  });
+};
+export var chipGroupConfig = {
+  name: 'ChipGroup',
+  tag: 'div',
+  layout: chipGroupRoot,
+  base: base,
+  variations: {
+    view: {
+      css: viewCSS
+    },
+    size: {
+      css: sizeCSS
+    },
+    gap: {
+      css: gapCSS
+    }
+  },
+  defaults: {
+    view: 'primary',
+    size: 'm',
+    gap: 'dense'
+  }
+};

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

@@ -0,0 +1,3 @@
+import { css } from 'styled-components';
+import { classes } from './ChipGroup.tokens';
+export var base = /*#__PURE__*/css(["display:inline-flex;&.", "{flex-wrap:wrap;}"], classes.wrap);

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

@@ -0,0 +1,93 @@
+---
+id: chipGroup
+title: ChipGroup
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# ChipGroup
+<Description name="ChipGroup" />
+<PropsTable name="ChipGroup" exclude={['css']} />
+
+## Использование
+Компонент `ChipGroup` - это обертка для Chip. Принимает в себя группу элементов.
+
+```tsx live
+import React from 'react';
+import { ChipGroup, Chip } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <ChipGroup>
+            {Array(5)
+                .fill(true)
+                .map((_, i) => (
+                    <Chip text={`Chip ${i}`} />
+                ))}
+        </ChipGroup>
+    );
+}
+```
+
+## Примеры
+
+### Размер и вид группы Chip
+Размер и вид группы элементов задается с помощью свойств `size` и `view` соответственно.
+С помощью свойства `isCommonChipStyles` можно отключить переопределение стилей для всех элементов внутри группы. 
+Тогда каждый элемент будет иметь настраиваемый размер и вид. 
+
+```tsx live
+import React from 'react';
+import { ChipGroup, Chip } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <ChipGroup size="s" view="secondary">
+                {Array(5)
+                    .fill(true)
+                    .map((_, i) => (
+                        <Chip text={`Chip ${i}`} />
+                    ))}
+            </ChipGroup>
+            
+            <ChipGroup isCommonChipStyles={false}>
+                <Chip size="m" text="Default" />
+                <Chip size="s" text="Secondary" view="secondary" />
+                <Chip size="xs" text="Accent" view="accent" />
+            </ChipGroup>
+        </div>
+    );
+}
+```
+
+### Отступы между Chip
+
+Группа элементов имеет два вида отступов:
+
+```tsx live
+import React from 'react';
+import { ChipGroup, Chip } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <ChipGroup size="xs" gap="dense">
+                {Array(5)
+                    .fill(true)
+                    .map((_, i) => (
+                        <Chip text={`Chip ${i}`} />
+                    ))}
+            </ChipGroup>
+
+            <ChipGroup size="xs" gap="wide">
+                {Array(5)
+                    .fill(true)
+                    .map((_, i) => (
+                        <Chip text={`Chip ${i}`} />
+                    ))}
+            </ChipGroup>
+        </div>
+    );
+}
+```

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

@@ -0,0 +1,42 @@
+export var classes = {
+  chipGroupOverrideStyles: 'chip-group-override-styles',
+  dense: 'chip-group-gap-dense',
+  wide: 'chip-group-gap-wide',
+  wrap: 'chip-group-wrap'
+};
+export var tokens = {
+  chipBackground: '--plasma-chip-group-items-background',
+  chipColor: '--plasma-chip-group-items-color',
+  chipBackgroundHover: '--plasma-chip-group-items-background-hover',
+  chipColorHover: '--plasma-chip-group-items-color-hover',
+  chipScaleHover: '--plasma-chip-group-items-scale-hover',
+  chipBackgroundActive: '--plasma-chip-group-items-background-active',
+  chipColorActive: '--plasma-chip-group-items-color-active',
+  chipScaleActive: '--plasma-chip-group-items-scale-active',
+  chipFocusColor: '--plasma-chip-group-items-focus-color',
+  chipOutlineSize: '--plasma-chip-group-items-outline-size',
+  chipCloseIconColor: '--plasma-chip-group-items-close-icon-color',
+  chipCloseIconColorHover: '--plasma-chip-group-items-close-icon-color-hover',
+  chipCloseIconColorActive: '--plasma-chip-group-items-close-icon-color-active',
+  chipGroupItemsGap: '--plasma-chip-group-items-gap',
+  chipBorderRadius: '--plasma-chip-group-items-border-radius',
+  chipHeight: '--plasma-chip-group-item-height',
+  chipWidth: '--plasma-chip-group-item-width',
+  chipPaddingTop: '--plasma-chip-group-item-padding-top',
+  chipPaddingRight: '--plasma-chip-group-item-padding-right',
+  chipPaddingBottom: '--plasma-chip-group-item-padding-bottom',
+  chipPaddingLeft: '--plasma-chip-group-item-padding-left',
+  chipCloseIconSize: '--plasma-chip-group-item-close-icon-size',
+  chipFontFamily: '--plasma-chip-group-item-font-family',
+  chipFontSize: '--plasma-chip-group-item-font-size',
+  chipFontStyle: '--plasma-chip-group-item-font-style',
+  chipFontWeight: '--plasma-chip-group-item-font-weight',
+  chipLetterSpacing: '--plasma-chip-group-item-letter-spacing',
+  chipLineHeight: '--plasma-chip-group-item-line-height',
+  chipLeftContentMarginLeft: '--plasma-chip-group-item-left-content-margin-left',
+  chipLeftContentMarginRight: '--plasma-chip-group-item-left-content-margin-right',
+  chipRightContentMarginLeft: '--plasma-chip-group-item-right-content-margin-left',
+  chipRightContentMarginRight: '--plasma-chip-group-item-right-content-margin-right',
+  chipClearContentMarginLeft: '--plasma-chip-group-item-clear-content-margin-left',
+  chipClearContentMarginRight: '--plasma-chip-group-item-clear-content-margin-right'
+};

package/styled-components/es/components/ChipGroup/ChipGroup.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export { chipGroupRoot, chipGroupConfig } from './ChipGroup';
+export { tokens as chipGroupTokens, classes as chipGroupClasses } from './ChipGroup.tokens';

package/styled-components/es/components/ChipGroup/variations/_gap/base.js

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

package/styled-components/es/components/ChipGroup/variations/_gap/tokens.json

@@ -0,0 +1 @@
+["--plasma-chip-group-items-gap"]

package/styled-components/es/components/ChipGroup/variations/_size/base.js

@@ -0,0 +1,4 @@
+import { css } from 'styled-components';
+import { classes, tokens } from '../../ChipGroup.tokens';
+import { chipClasses, chipTokens } from '../../../Chip';
+export var base = /*#__PURE__*/css(["&.", " .", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");}"], classes.chipGroupOverrideStyles, chipClasses.chipItem, chipTokens.height, tokens.chipHeight, chipTokens.width, tokens.chipWidth, chipTokens.borderRadius, tokens.chipBorderRadius, chipTokens.paddingTop, tokens.chipPaddingTop, chipTokens.paddingRight, tokens.chipPaddingRight, chipTokens.paddingBottom, tokens.chipPaddingBottom, chipTokens.paddingLeft, tokens.chipPaddingLeft, chipTokens.closeIconSize, tokens.chipCloseIconSize, chipTokens.fontFamily, tokens.chipFontFamily, chipTokens.fontSize, tokens.chipFontSize, chipTokens.fontStyle, tokens.chipFontStyle, chipTokens.fontWeight, tokens.chipFontWeight, chipTokens.letterSpacing, tokens.chipLetterSpacing, chipTokens.lineHeight, tokens.chipLineHeight, chipTokens.leftContentMarginLeft, tokens.chipLeftContentMarginLeft, chipTokens.leftContentMarginRight, tokens.chipLeftContentMarginRight, chipTokens.rightContentMarginLeft, tokens.chipRightContentMarginLeft, chipTokens.rightContentMarginRight, tokens.chipRightContentMarginRight, chipTokens.clearContentMarginLeft, tokens.chipClearContentMarginLeft, chipTokens.clearContentMarginRight, tokens.chipClearContentMarginRight);

package/styled-components/es/components/ChipGroup/variations/_size/tokens.json

@@ -0,0 +1,22 @@
+[
+    "--plasma-chip-group-item-height",
+    "--plasma-chip-group-item-width",
+    "--plasma-chip-group-item-border-radius",
+    "--plasma-chip-group-item-padding-top",
+    "--plasma-chip-group-item-padding-right",
+    "--plasma-chip-group-item-padding-bottom",
+    "--plasma-chip-group-item-padding-left",
+    "--plasma-chip-group-item-close-icon-size",
+    "--plasma-chip-group-item-font-family",
+    "--plasma-chip-group-item-font-size",
+    "--plasma-chip-group-item-font-style",
+    "--plasma-chip-group-item-font-weight",
+    "--plasma-chip-group-item-letter-spacing",
+    "--plasma-chip-group-item-line-height",
+    "--plasma-chip-group-item-left-content-margin-left",
+    "--plasma-chip-group-item-left-content-margin-right",
+    "--plasma-chip-group-item-right-content-margin-left",
+    "--plasma-chip-group-item-right-content-margin-right",
+    "--plasma-chip-group-item-clear-content-margin-left",
+    "--plasma-chip-group-item-clear-content-margin-right"
+]

package/styled-components/es/components/ChipGroup/variations/_view/base.js

@@ -0,0 +1,4 @@
+import { css } from 'styled-components';
+import { classes, tokens } from '../../ChipGroup.tokens';
+import { chipClasses, chipTokens } from '../../../Chip';
+export var base = /*#__PURE__*/css(["&.", " .", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");}"], classes.chipGroupOverrideStyles, chipClasses.chipItem, chipTokens.background, tokens.chipBackground, chipTokens.color, tokens.chipColor, chipTokens.backgroundHover, tokens.chipBackgroundHover, chipTokens.colorHover, tokens.chipColorHover, chipTokens.scaleHover, tokens.chipScaleHover, chipTokens.backgroundActive, tokens.chipBackgroundActive, chipTokens.colorActive, tokens.chipColorActive, chipTokens.scaleActive, tokens.chipScaleActive, chipTokens.focusColor, tokens.chipFocusColor, chipTokens.outlineSize, tokens.chipOutlineSize, chipTokens.closeIconColor, tokens.chipCloseIconColor, chipTokens.closeIconColorHover, tokens.chipCloseIconColorHover, chipTokens.closeIconColorActive, tokens.chipCloseIconColorActive);

package/styled-components/es/components/ChipGroup/variations/_view/tokens.json

@@ -0,0 +1,15 @@
+[
+    "--plasma-chip-group-items-background",
+    "--plasma-chip-group-items-color",
+    "--plasma-chip-group-items-background-hover",
+    "--plasma-chip-group-items-color-hover",
+    "--plasma-chip-group-items-scale-hover",
+    "--plasma-chip-group-items-background-active",
+    "--plasma-chip-group-items-color-active",
+    "--plasma-chip-group-items-scale-active",
+    "--plasma-chip-group-items-focus-color",
+    "--plasma-chip-group-items-outline-size",
+    "--plasma-chip-group-items-close-icon-color",
+    "--plasma-chip-group-items-close-icon-color-hover",
+    "--plasma-chip-group-items-close-icon-color-active"
+]

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

@@ -45,6 +45,14 @@ type Items = Array<{
          * Слот для контента справа
          */
         contentRight?: ReactNode;
+        /**
+        * Отобразить ли разделитель до элемента
+        */
+        dividerBefore?: boolean;
+        /**
+        * Отобразить ли разделитель после элемента
+        */
+        dividerAfter?: boolean;
         /**
          * Выбранный item.
          * @deprecated использовать ContentLeft || ContentRight

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

@@ -14,6 +14,13 @@ export var tokens = {
   disclosureIconColor: '--plasma-dropdown-disclosure-icon-color',
   disabledOpacity: '--plasma-dropdown-disabled-opacity',
   focusColor: '--plasma-dropdown-focus-color',
+  dividerColor: '--plasma-dropdown-divider-color',
+  dividerMarginTop: '--plasma-dropdown-divider-margin-top',
+  dividerMarginTopTight: '--plasma-dropdown-divider-margin-top-tight',
+  dividerMarginRight: '--plasma-dropdown-divider-margin-right',
+  dividerMarginBottom: '--plasma-dropdown-divider-margin-bottom',
+  dividerMarginBottomTight: '--plasma-dropdown-divider-margin-bottom-tight',
+  dividerMarginLeft: '--plasma-dropdown-divider-margin-left',
   itemBackground: '--plasma-dropdown-item-background',
   itemBackgroundHover: '--plasma-dropdown-item-background-hover',
   itemBackgroundSelected: '--plasma-dropdown-item-background-selected',
@@ -93,13 +100,8 @@ export var tokens = {
   headerFontWeightBold: '--plasma-dropdown-header-letter-spacing',
   headerFontLetterSpacing: '--plasma-dropdown-header-line-height',
   headerFontLineHeight: '--plasma-dropdown-header-font-weight',
-  dividerColor: '--plasma-dropdown-divider-color',
   dividerWidth: '--plasma-dropdown-divider-width',
   dividerHeight: '--plasma-dropdown-divider-height',
-  dividerMarginTop: '--plasma-dropdown-divider-margin-top',
-  dividerMarginRight: '--plasma-dropdown-divider-margin-right',
-  dividerMarginBottom: '--plasma-dropdown-divider-margin-bottom',
-  dividerMarginLeft: '--plasma-dropdown-divider-margin-left',
   groupBackground: '--plasma-dropdown-group-background',
   groupWidth: '--plasma-dropdown-group-width',
   groupHeight: '--plasma-dropdown-group-height',

package/styled-components/es/components/Dropdown/ui/DropdownItem/DropdownItem.js

@@ -2,7 +2,7 @@ import React, { useEffect, useRef } from 'react';
 import { classes } from '../../Dropdown.tokens';
 import { cx } from '../../../../utils';
 import { IconDisclosureRight } from '../../../_Icon';
-import { StyledContentLeft, StyledContentRight, StyledText, Wrapper, DisclosureIconWrapper } from './DropdownItem.styles';
+import { StyledContentLeft, StyledContentRight, StyledText, Wrapper, DisclosureIconWrapper, Divider } from './DropdownItem.styles';
 export var DropdownItem = function DropdownItem(_ref) {
   var item = _ref.item,
     path = _ref.path,
@@ -28,7 +28,9 @@ export var DropdownItem = function DropdownItem(_ref) {
     disabled = item.disabled,
     isDisabled = item.isDisabled,
     contentLeft = item.contentLeft,
-    contentRight = item.contentRight;
+    contentRight = item.contentRight,
+    dividerBefore = item.dividerBefore,
+    dividerAfter = item.dividerAfter;
   var ref = useRef(null);
   var disclosureIconSize = size === 'xs' ? 'xs' : 's';
   var isDisabledClassName = disabled || isDisabled ? classes.dropdownItemIsDisabled : undefined;
@@ -62,7 +64,9 @@ export var DropdownItem = function DropdownItem(_ref) {
       onHover(index);
     }
   };
-  return /*#__PURE__*/React.createElement(Wrapper, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, dividerBefore && /*#__PURE__*/React.createElement(Divider, {
+    variant: variant
+  }), /*#__PURE__*/React.createElement(Wrapper, {
     className: cx(isDisabledClassName, focusedClass, activeClass),
     id: value.toString(),
     role: itemRole,
@@ -79,5 +83,7 @@ export var DropdownItem = function DropdownItem(_ref) {
   }, contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), /*#__PURE__*/React.createElement(StyledText, null, label), contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight), item.items && hasArrow && /*#__PURE__*/React.createElement(DisclosureIconWrapper, null, /*#__PURE__*/React.createElement(IconDisclosureRight, {
     size: disclosureIconSize,
     color: "inherit"
-  })));
+  }))), dividerAfter && /*#__PURE__*/React.createElement(Divider, {
+    variant: variant
+  }));
 };

package/styled-components/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js

@@ -13,13 +13,22 @@ export var DisclosureIconWrapper = /*#__PURE__*/styled.div.withConfig({
 export var StyledText = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-hs0ek1-3"
 })(["", ";flex:1;"], /*#__PURE__*/applyEllipsis());
-export var Wrapper = /*#__PURE__*/styled.li.withConfig({
+export var Divider = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-hs0ek1-4"
-})(["display:flex;align-items:center;margin:0;box-sizing:content-box;padding-top:", ";padding-right:var(", ");padding-bottom:", ";padding-left:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");background:var(", ");color:var(", ");border-radius:var(", ");user-select:none;&:hover:not(.", "){cursor:pointer;background:var(", ");}&.", "{background:var(", ");}&.", "{opacity:var(", ");cursor:not-allowed;}:focus{outline:none;}", ";"], function (_ref) {
+})(["height:1px;margin-top:", ";margin-right:var(", ");margin-bottom:", ";margin-left:var(", ");background:var(", ");"], function (_ref) {
   var variant = _ref.variant;
-  return "var(".concat(variant === 'tight' ? tokens.itemPaddingTopTight : tokens.itemPaddingTop, ")");
-}, tokens.itemPaddingRight, function (_ref2) {
+  return "var(".concat(variant === 'tight' ? tokens.dividerMarginTopTight : tokens.dividerMarginTop, ")");
+}, tokens.dividerMarginRight, function (_ref2) {
   var variant = _ref2.variant;
+  return "var(".concat(variant === 'tight' ? tokens.dividerMarginBottomTight : tokens.dividerMarginBottom, ")");
+}, tokens.dividerMarginLeft, tokens.dividerColor);
+export var Wrapper = /*#__PURE__*/styled.li.withConfig({
+  componentId: "plasma-new-hope__sc-hs0ek1-5"
+})(["display:flex;align-items:center;margin:0;box-sizing:content-box;padding-top:", ";padding-right:var(", ");padding-bottom:", ";padding-left:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");background:var(", ");color:var(", ");border-radius:var(", ");user-select:none;&:hover:not(.", "){cursor:pointer;background:var(", ");}&.", "{background:var(", ");}&.", "{opacity:var(", ");cursor:not-allowed;}:focus{outline:none;}", ";"], function (_ref3) {
+  var variant = _ref3.variant;
+  return "var(".concat(variant === 'tight' ? tokens.itemPaddingTopTight : tokens.itemPaddingTop, ")");
+}, tokens.itemPaddingRight, function (_ref4) {
+  var variant = _ref4.variant;
   return "var(".concat(variant === 'tight' ? tokens.itemPaddingBottomTight : tokens.itemPaddingBottom, ")");
 }, tokens.itemPaddingLeft, tokens.itemFontFamily, tokens.itemFontSize, tokens.itemFontStyle, tokens.itemFontWeightBold, tokens.itemFontLetterSpacing, tokens.itemFontLineHeight, tokens.itemBackground, tokens.itemColor, tokens.itemBorderRadius, classes.dropdownItemIsDisabled, tokens.itemBackgroundHover, classes.dropdownItemIsActive, tokens.itemBackgroundHover, classes.dropdownItemIsDisabled, tokens.disabledOpacity, /*#__PURE__*/addFocus({
   outlineSize: '0.0625rem',

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

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["helperText", "status", "resize", "rightHelper", "leftHelper", "contentRight", "autoResize", "minAuto", "maxAuto", "label", "labelPlacement", "placeholder", "defaultValue", "height", "width", "value", "disabled", "required", "requiredPlacement", "optional", "clear", "hasDivider", "size", "view", "id", "style", "className", "readOnly", "rows", "cols", "onChange"];
+var _excluded = ["helperText", "status", "resize", "rightHelper", "leftHelper", "contentRight", "autoResize", "minAuto", "maxAuto", "label", "labelPlacement", "placeholder", "defaultValue", "height", "width", "value", "disabled", "required", "requiredPlacement", "optional", "size", "view", "id", "style", "className", "readOnly", "rows", "cols", "onChange"];
 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."); }
@@ -28,7 +28,6 @@ import { StyledContent, StyledHelpers, StyledLeftHelper, StyledRightHelper, Styl
 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 disabledCSS } from './variations/_disabled/base';
 var innerPlaceholderUp = classes.innerPlaceholderUp,
   focusedOuterPlaceholderColor = classes.focusedOuterPlaceholderColor,
@@ -54,6 +53,7 @@ export var getDynamicLabelClasses = function getDynamicLabelClasses(props, focus
   var readOnly = props.readOnly,
     label = props.label,
     labelPlacement = props.labelPlacement,
+    autoResize = props.autoResize,
     rows = props.rows,
     value = props.value,
     size = props.size;
@@ -62,10 +62,10 @@ export var getDynamicLabelClasses = function getDynamicLabelClasses(props, focus
   var withFocusedOuterUpPlaceholder = !readOnly && focused && (!label || labelPlacement === 'outer') ? focusedOuterPlaceholderColor : undefined;
 
   // Добавить класс отвечающий за поднятие и уменьшение плейсхолдера
-  var withInnerPlaceholderUp = labelPlacement === 'inner' && label && !rows && size !== 'xs' && (!readOnly && (value || focused) || readOnly && value) ? innerPlaceholderUp : undefined;
+  var withInnerPlaceholderUp = labelPlacement === 'inner' && label && !autoResize && !rows && size !== 'xs' && (!readOnly && (value || focused) || readOnly && value) ? innerPlaceholderUp : undefined;
 
   // Добавить класс отвечающий за скрытие плейсхолдера
-  var withHidePlaceholder = value && !label || labelPlacement === 'inner' && (focused && !readOnly || value) && label && rows || labelPlacement === 'outer' && value || labelPlacement === 'inner' && size === 'xs' && value ? hidePlaceHolder : undefined;
+  var withHidePlaceholder = value && !label || labelPlacement === 'inner' && (focused && !readOnly || value) && label && (rows || autoResize) || labelPlacement === 'outer' && value || labelPlacement === 'inner' && size === 'xs' && value ? hidePlaceHolder : undefined;
   return [withFocusedOuterUpPlaceholder, withInnerPlaceholderUp, withHidePlaceholder];
 };
 export var textAreaRoot = function textAreaRoot(Root) {
@@ -96,8 +96,6 @@ export var textAreaRoot = function textAreaRoot(Root) {
       requiredPlacement = _props$requiredPlacem === void 0 ? 'right' : _props$requiredPlacem,
       _props$optional = props.optional,
       optional = _props$optional === void 0 ? false : _props$optional,
-      clear = props.clear,
-      hasDivider = props.hasDivider,
       size = props.size,
       view = props.view,
       id = props.id,
@@ -130,8 +128,6 @@ export var textAreaRoot = function textAreaRoot(Root) {
     var textareaHelperId = id ? "".concat(id, "-helper") : undefined;
     var applyCustomWidth = resize !== 'horizontal' && resize !== 'both' && !cols;
     var placeholderLabel = hasInnerLabel ? label : placeholder;
-    var clearClass = clear ? classes.clear : undefined;
-    var hasDividerClass = hasDivider ? classes.hasDivider : undefined;
     var requiredPlacementClass = requiredPlacement === 'right' ? 'align-right ' : undefined;
     useResizeObserver(outerRef, function (currentElement) {
       var inlineWidth = currentElement.style.width;
@@ -141,7 +137,7 @@ export var textAreaRoot = function textAreaRoot(Root) {
         setHelperWidth("".concat(elementWidth / ROOT_FONT_SIZE, "rem"));
       }
     });
-    useAutoResize(autoResize || Boolean(clear), outerRef, value, minAuto, maxAuto);
+    useAutoResize(autoResize, outerRef, value, minAuto, maxAuto);
     var onFocusHandler = useCallback(function () {
       setFocused(true);
     }, []);
@@ -155,25 +151,27 @@ export var textAreaRoot = function textAreaRoot(Root) {
       }
       onChange === null || onChange === void 0 || onChange(event);
     }, [value, onChange]);
-    var dynamicLabelClasses = getDynamicLabelClasses({
+    var dynamicLabelClasses = getDynamicLabelClasses(_objectSpread({
       size: size,
       readOnly: readOnly,
       label: label,
       labelPlacement: labelPlacement,
-      value: value || uncontrolledValue || defaultValue,
+      value: value || uncontrolledValue || defaultValue
+    }, rows ? {
       rows: rows
-    }, focused);
+    } : {
+      autoResize: autoResize
+    }), focused);
     var optionalTextNode = innerOptional ? /*#__PURE__*/React.createElement(StyledOptionalText, null, Boolean(hasPlaceholderOptional ? placeholderLabel : label) && '\xa0', optionalText) : null;
     return /*#__PURE__*/React.createElement(Root, {
       view: overriddenView,
       size: size,
       disabled: disabled,
       readOnly: readOnly,
-      clear: clear,
       style: _objectSpread({
         width: helperWidth
       }, style),
-      className: cx(clearClass, hasDividerClass, className)
+      className: className
     }, hasOuterLabel && /*#__PURE__*/React.createElement(StyledLabel, null, required && /*#__PURE__*/React.createElement(StyledIndicator, {
       className: cx(classes.outerLabelPlacement, requiredPlacementClass)
     }), label, optionalTextNode), /*#__PURE__*/React.createElement(StyledContainer, {
@@ -194,7 +192,7 @@ export var textAreaRoot = function textAreaRoot(Root) {
       applyCustomWidth: applyCustomWidth,
       ref: outerRef,
       disabled: disabled,
-      height: autoResize || Boolean(clear) ? minAuto : height,
+      height: autoResize ? minAuto : height,
       width: width,
       placeholder: placeholderLabel,
       "aria-describedby": textareaHelperId,
@@ -227,10 +225,6 @@ export var textAreaConfig = {
     view: {
       css: viewCSS
     },
-    clear: {
-      css: clearCSS,
-      attrs: true
-    },
     disabled: {
       css: disabledCSS,
       attrs: true

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

@@ -104,35 +104,6 @@ export function App() {
 }
 ```
 
-### Clear
-На отображение TextArea влияют свойства `clear` и `hasDivider`.
-При этом `hasDivider` не может использоваться без `clear`.
-Свойства `minAuto`, `maxAuto`, `autoResize`, `rows` и `cols`, `height` и `width` игнорируются.
-Высота TextArea в таком случае регулируется по длине контента внутри:
-
-```tsx live
-import React from 'react';
-import { TextArea } from '@salutejs/{{ package }}';
-
-export function App() {
-    const [value, setValue] = React.useState('Значение');
-
-    return (
-        <div>
-            <TextArea
-                placeholder="Введите значение"
-                value={value}
-                onChange={(e) => {
-                    setValue(e.target.value);
-                }}
-                clear
-                hasDivider
-            />
-        </div>
-    );
-}
-```
-
 ### Подсказка
 Для вывода подсказки снизу от поля используйте свойство `leftHelper` и/или `rightHelper`.
 

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

@@ -16,10 +16,7 @@ export var classes = {
   /** Класс для компонента `StyledHelpers` */
   styledHelpers: 'textarea-helpers',
   innerLabelPlacement: 'label-placement-inner',
-  outerLabelPlacement: 'label-placement-outer',
-  /** Класс для view `clear` */
-  clear: 'textfield-clear',
-  hasDivider: 'hasDivider'
+  outerLabelPlacement: 'label-placement-outer'
 };
 export var tokens = {
   /** Цвет фона для элемента textarea */
@@ -48,14 +45,12 @@ export var tokens = {
   helpersBackgroundColorFocus: '--plasma-textarea-helpers-background-color-focus',
   /** Цвет текста для элемента textarea */
   inputColor: '--plasma-textarea-input-color',
-  clearInputColor: '--plasma-textarea-input-clear-color',
   /** Цвет текста для элемента textarea в состоянии focus */
   inputColorFocus: '--plasma-textarea-input-color-focus',
   /** Цвет каретки для элемента textarea */
   inputCaretColor: '--plasma-textarea-input-caret-color',
   /** Цвет элемента placeholder */
   placeholderColor: '--plasma-textarea-placeholder-color',
-  clearPlaceholderColor: '--plasma-textfield__clear-placeholder-color',
   /** Цвет элемента placeholder в состоянии focus */
   placeholderColorFocus: '--plasma-textarea-placeholder-color-focus',
   /** Цвет элемента optional */
@@ -96,7 +91,6 @@ export var tokens = {
   inputPaddingLeft: '--plasma-textarea-input-padding-left',
   /** Отступ сверху для блока подписей */
   helpersPaddingTop: '--plasma-textarea-helpers-padding-top',
-  clearHelpersPaddingTop: '--plasma-textarea-clear-helpers-padding-top',
   /** Отступ справа для блока подписей */
   helpersPaddingRight: '--plasma-textarea-helpers-padding-right',
   /** Отступ снизу для блока подписей */
@@ -127,7 +121,6 @@ export var tokens = {
   labelOuterLineHeight: '--plasma-textarea-label-outer-line-height',
   /** Отступ сверху для элемента label, когда он внутри и уменьшен */
   labelMarginBottom: '--plasma-textarea-label-margin-bottom',
-  clearLabelMarginBottom: '--plasma-textarea-clear-label-margin-bottom',
   /** Шрифт для элемента label, когда он внутри и уменьшен */
   labelInnerFontFamily: '--plasma-textarea-label-inner-font-family',
   /** Размер шрифта для элемента label, когда он внутри и уменьшен */
@@ -179,9 +172,5 @@ export var tokens = {
   indicatorLabelPlacementInner: '--plasma-textarea-indicator-placement-inner',
   indicatorLabelPlacementOuter: '--plasma-textarea-indicator-placement-outer',
   indicatorLabelPlacementInnerRight: '--plasma-textarea-indicator-placement-inner-right',
-  indicatorLabelPlacementOuterRight: '--plasma-textarea-indicator-placement-outer-right',
-  dividerColor: '--plasma-textfield-divider-color',
-  dividerColorHover: '--plasma-textfield-divider-color-hover',
-  dividerColorFocus: '--plasma-textfield-divider-color-focus',
-  dividerColorReadOnly: '--plasma-textfield-divider-color-readonly'
+  indicatorLabelPlacementOuterRight: '--plasma-textarea-indicator-placement-outer-right'
 };