@salutejs/plasma-new-hope 0.122.0-canary.1349.10357757918.0 → 0.122.0-canary.1352.10359015289.0

package/styled-components/cjs/components/Select/hooks/usePathMaps.js

@@ -11,10 +11,10 @@ var usePathMaps = exports.usePathMaps = function usePathMaps(items) {
   var focusedToValueMap = new Map();
   var valueToCheckedMap = new Map();
   var valueToItemMap = new Map();
-  pathMap.set('root', (items === null || items === void 0 ? void 0 : items.length) || 0);
+  pathMap.set('root', items.length);
   var rec = function rec(items) {
     var prevIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-    items === null || items === void 0 || items.forEach(function (item, index) {
+    items.forEach(function (item, index) {
       var value = item.value,
         innerItems = item.items;
       var currIndex = "".concat(prevIndex, "/").concat(index).replace(/^(\/)/, '');

package/styled-components/cjs/components/Select/ui/Inner/ui/Item/Item.js

@@ -27,8 +27,6 @@ var Item = exports.Item = function Item(_ref) {
   var value = item.value,
     label = item.label,
     disabled = item.disabled,
-    isDisabled = item.isDisabled,
-    color = item.color,
     contentLeft = item.contentLeft,
     contentRight = item.contentRight;
   var ref = (0, _react.useRef)(null);
@@ -40,9 +38,8 @@ var Item = exports.Item = function Item(_ref) {
     handleCheckboxChange = _useContext.handleCheckboxChange,
     handleItemClick = _useContext.handleItemClick,
     variant = _useContext.variant,
-    renderItem = _useContext.renderItem,
-    valueToItemMap = _useContext.valueToItemMap;
-  var isDisabledClassName = disabled || isDisabled ? _Select.classes.dropdownItemIsDisabled : undefined;
+    renderItem = _useContext.renderItem;
+  var isDisabledClassName = disabled ? _Select.classes.dropdownItemIsDisabled : undefined;
   var focusedClass = currentLevel === focusedPath.length - 1 && index === (focusedPath === null || focusedPath === void 0 ? void 0 : focusedPath[currentLevel]) ? _Select.classes.dropdownItemIsFocused : undefined;
   var activeClass = value === (path === null || path === void 0 ? void 0 : path[currentLevel + 1]) ? _Select.classes.dropdownItemIsActive : undefined;
   (0, _react.useEffect)(function () {
@@ -55,15 +52,12 @@ var Item = exports.Item = function Item(_ref) {
     }
   }, [focusedClass]);
   var handleChange = function handleChange(e) {
-    if (disabled || isDisabled) return;
+    if (disabled) return;
     e.stopPropagation();
     handleCheckboxChange(item);
   };
   var handleClick = function handleClick(e) {
-    if (disabled || isDisabled) {
-      e.stopPropagation();
-      return;
-    }
+    if (disabled) return;
     handleItemClick(item, e);
   };
   return /*#__PURE__*/_react["default"].createElement(_Item.Wrapper, {
@@ -94,9 +88,7 @@ var Item = exports.Item = function Item(_ref) {
   }))), !multiselect && checked.get(item.value) === 'done' && /*#__PURE__*/_react["default"].createElement(_Icon.IconDone, {
     size: (0, _utils.sizeToIconSize)(size, variant),
     color: "inherit"
-  })), contentLeft && /*#__PURE__*/_react["default"].createElement(_Item.StyledContentLeft, null, contentLeft), /*#__PURE__*/_react["default"].createElement(_Item.StyledText, {
-    color: color
-  }, renderItem && renderItem(valueToItemMap.get(value)) || label), contentRight && /*#__PURE__*/_react["default"].createElement(_Item.StyledContentRight, null, contentRight), !(0, _utils2.isEmpty)(item.items) && /*#__PURE__*/_react["default"].createElement(_Item.DisclosureIconWrapper, null, /*#__PURE__*/_react["default"].createElement(_Icon.IconDisclosureRightCentered, {
+  })), contentLeft && /*#__PURE__*/_react["default"].createElement(_Item.StyledContentLeft, null, contentLeft), /*#__PURE__*/_react["default"].createElement(_Item.StyledText, null, renderItem && renderItem(value, label) || label), contentRight && /*#__PURE__*/_react["default"].createElement(_Item.StyledContentRight, null, contentRight), !(0, _utils2.isEmpty)(item.items) && /*#__PURE__*/_react["default"].createElement(_Item.DisclosureIconWrapper, null, /*#__PURE__*/_react["default"].createElement(_Icon.IconDisclosureRightCentered, {
     size: (0, _utils.sizeToIconSize)(size, variant),
     color: "inherit"
   })));

package/styled-components/cjs/components/Select/ui/Inner/ui/Item/Item.styles.js

@@ -47,14 +47,11 @@ var IconWrapper = exports.IconWrapper = /*#__PURE__*/_styledComponents["default"
 });
 var StyledText = exports.StyledText = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-6"
-})(["", ";flex:1;color:", ";"], /*#__PURE__*/(0, _mixins.applyEllipsis)(), function (_ref5) {
-  var color = _ref5.color;
-  return color || 'inherit';
-});
+})(["", ";flex:1;"], /*#__PURE__*/(0, _mixins.applyEllipsis)());
 var Wrapper = exports.Wrapper = /*#__PURE__*/_styledComponents["default"].li.withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-7"
-})(["display:flex;align-items:center;min-height:var(", ");margin:0;box-sizing:content-box;padding:", ";font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");background:var(", ");color:var(--text-primary);border-radius:var(", ");user-select:none;&:hover:not(.", "){cursor:pointer;background:var(", ");}&.", "{background:var(", ");}&.", "{opacity:", ";cursor:not-allowed;}:focus{outline:none;}", ";"], _Select.tokens.itemHeight, function (_ref6) {
-  var variant = _ref6.variant;
+})(["display:flex;align-items:center;min-height:var(", ");margin:0;box-sizing:content-box;padding:", ";font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");background:var(", ");color:var(--text-primary);border-radius:var(", ");user-select:none;&:hover:not(.", "){cursor:pointer;background:var(", ");}&.", "{background:var(", ");}&.", "{opacity:", ";cursor:not-allowed;}:focus{outline:none;}", ";"], _Select.tokens.itemHeight, function (_ref5) {
+  var variant = _ref5.variant;
   return "var(".concat(variant === 'tight' ? _Select.tokens.itemPaddingTight : _Select.tokens.itemPadding, ")");
 }, _Select.tokens.fontFamily, _Select.tokens.fontSize, _Select.tokens.fontStyle, _Select.tokens.fontWeight, _Select.tokens.fontLetterSpacing, _Select.tokens.fontLineHeight, _Select.constants.itemBackground, _Select.tokens.itemBorderRadius, _Select.classes.dropdownItemIsDisabled, _Select.constants.itemBackgroundHover, _Select.classes.dropdownItemIsActive, _Select.constants.itemBackgroundHover, _Select.classes.dropdownItemIsDisabled, _Select.constants.opacity, /*#__PURE__*/(0, _mixins.addFocus)({
   outlineSize: '0.0625rem',

package/styled-components/cjs/components/Select/ui/Target/Target.js

@@ -23,8 +23,7 @@ var Target = exports.Target = function Target(_ref) {
     renderValue = _ref.renderValue,
     focusedPath = _ref.focusedPath,
     focusedToValueMap = _ref.focusedToValueMap,
-    selectProps = _ref.selectProps,
-    separator = _ref.separator;
+    selectProps = _ref.selectProps;
   return selectProps.target === 'button-like' ? /*#__PURE__*/_react["default"].createElement(_ui.Button, {
     opened: opened,
     value: value,
@@ -36,8 +35,7 @@ var Target = exports.Target = function Target(_ref) {
     renderValue: renderValue,
     focusedPath: focusedPath,
     focusedToValueMap: focusedToValueMap,
-    selectProps: selectProps,
-    separator: separator
+    selectProps: selectProps
   }) : /*#__PURE__*/_react["default"].createElement(_ui.Textfield, {
     opened: opened,
     value: value,

package/styled-components/cjs/components/Select/ui/Target/ui/Button/Button.js

@@ -46,9 +46,7 @@ var Button = exports.Button = function Button(_ref) {
     "aria-activedescendant": getActiveDescendant(),
     "aria-label": label,
     renderTarget: Boolean(selectProps.renderTarget)
-  }, selectProps.renderTarget ? selectProps.renderTarget(Array.isArray(value) ? value.map(function (value) {
-    return valueToItemMap.get(value);
-  }) : valueToItemMap.get(value)) : /*#__PURE__*/_react["default"].createElement(_Button.Label, null, (0, _utils2.getButtonLabel)({
+  }, selectProps.renderTarget ? selectProps.renderTarget(value) : /*#__PURE__*/_react["default"].createElement(_Button.Label, null, (0, _utils2.getButtonLabel)({
     value: value,
     valueToItemMap: valueToItemMap,
     label: label,

package/styled-components/cjs/components/Select/ui/Target/ui/Textfield/Textfield.js

@@ -22,7 +22,7 @@ var getLabel = function getLabel(_ref) {
     labelPlacement = _ref.labelPlacement,
     size = _ref.size,
     renderValue = _ref.renderValue;
-  if ((0, _utils.isEmpty)(value) && typeof value !== 'number') {
+  if ((0, _utils.isEmpty)(value)) {
     if (!label || labelPlacement === 'outer') {
       return /*#__PURE__*/_react["default"].createElement(_Textfield.Placeholder, null, placeholder);
     }
@@ -38,7 +38,7 @@ var getLabel = function getLabel(_ref) {
     return value.map(function (currentValue, index) {
       var itemLabel = valueToItemMap.get(currentValue).label;
       return /*#__PURE__*/_react["default"].createElement(_ui.Chip, {
-        text: renderValue ? renderValue(valueToItemMap.get(currentValue)) : itemLabel,
+        text: renderValue ? renderValue(currentValue, itemLabel) : itemLabel,
         onClick: function onClick(e) {
           e.stopPropagation();
           onChipClick(currentValue);
@@ -49,9 +49,9 @@ var getLabel = function getLabel(_ref) {
   }
   var itemLabel = valueToItemMap.get(value).label;
   if (!label || labelPlacement === 'outer') {
-    return /*#__PURE__*/_react["default"].createElement(_Textfield.Value, null, renderValue ? renderValue(valueToItemMap.get(value)) : itemLabel);
+    return /*#__PURE__*/_react["default"].createElement(_Textfield.Value, null, renderValue ? renderValue(value, itemLabel) : itemLabel);
   }
-  return /*#__PURE__*/_react["default"].createElement(_Textfield.InnerLabelWrapper, null, size !== 'xs' && /*#__PURE__*/_react["default"].createElement(_Textfield.InnerLabel, null, label), /*#__PURE__*/_react["default"].createElement(_Textfield.Value, null, renderValue ? renderValue(valueToItemMap.get(value)) : itemLabel));
+  return /*#__PURE__*/_react["default"].createElement(_Textfield.InnerLabelWrapper, null, size !== 'xs' && /*#__PURE__*/_react["default"].createElement(_Textfield.InnerLabel, null, label), /*#__PURE__*/_react["default"].createElement(_Textfield.Value, null, renderValue ? renderValue(value, itemLabel) : itemLabel));
 };
 var Textfield = exports.Textfield = function Textfield(_ref2) {
   var opened = _ref2.opened,
@@ -92,9 +92,7 @@ var Textfield = exports.Textfield = function Textfield(_ref2) {
     "aria-activedescendant": getActiveDescendant(),
     "aria-label": label,
     renderTarget: Boolean(selectProps.renderTarget)
-  }, /*#__PURE__*/_react["default"].createElement(_Textfield.Wrapper, null, selectProps !== null && selectProps !== void 0 && selectProps.renderTarget ? selectProps.renderTarget(Array.isArray(value) ? value.map(function (value) {
-    return valueToItemMap.get(value);
-  }) : valueToItemMap.get(value)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, contentLeft && (!selectProps.multiselect || (0, _utils.isEmpty)(value)) && /*#__PURE__*/_react["default"].createElement(_Textfield.ContentLeftWrapper, null, contentLeft), /*#__PURE__*/_react["default"].createElement(_Textfield.ChipWrapper, null, getLabel({
+  }, /*#__PURE__*/_react["default"].createElement(_Textfield.Wrapper, null, selectProps !== null && selectProps !== void 0 && selectProps.renderTarget ? selectProps.renderTarget(value) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, contentLeft && (!selectProps.multiselect || (0, _utils.isEmpty)(value)) && /*#__PURE__*/_react["default"].createElement(_Textfield.ContentLeftWrapper, null, contentLeft), /*#__PURE__*/_react["default"].createElement(_Textfield.ChipWrapper, null, getLabel({
     value: value,
     valueToItemMap: valueToItemMap,
     onChipClick: onChipClick,

package/styled-components/cjs/components/Select/utils/getButtonLabel.js

@@ -9,9 +9,9 @@ var getLabel = function getLabel(_ref) {
   var value = _ref.value,
     valueToItemMap = _ref.valueToItemMap,
     renderValue = _ref.renderValue;
-  var _ref2 = valueToItemMap.get(value),
+  var _ref2 = valueToItemMap.get(value === null || value === void 0 ? void 0 : value.toString()),
     label = _ref2.label;
-  return renderValue ? renderValue(valueToItemMap.get(value)) : label;
+  return renderValue ? renderValue(value, label) : label;
 };
 var getButtonLabel = exports.getButtonLabel = function getButtonLabel(_ref3) {
   var value = _ref3.value,
@@ -19,7 +19,7 @@ var getButtonLabel = exports.getButtonLabel = function getButtonLabel(_ref3) {
     label = _ref3.label,
     renderValue = _ref3.renderValue,
     selectProps = _ref3.selectProps;
-  if ((0, _utils.isEmpty)(value) && typeof value !== 'number') {
+  if ((0, _utils.isEmpty)(value)) {
     return label || '';
   }
   if (selectProps.multiselect && selectProps.isTargetAmount) {
@@ -35,8 +35,8 @@ var getButtonLabel = exports.getButtonLabel = function getButtonLabel(_ref3) {
     }).join(', ');
   }
   return getLabel({
+    renderValue: renderValue,
     value: value,
-    valueToItemMap: valueToItemMap,
-    renderValue: renderValue
+    valueToItemMap: valueToItemMap
   });
 };

package/styled-components/cjs/components/Select/utils/index.js

@@ -15,12 +15,6 @@ Object.defineProperty(exports, "getCorrectHeight", {
     return _getCorrectHeight.getCorrectHeight;
   }
 });
-Object.defineProperty(exports, "getView", {
-  enumerable: true,
-  get: function get() {
-    return _getView.getView;
-  }
-});
 Object.defineProperty(exports, "initialItemsTransform", {
   enumerable: true,
   get: function get() {
@@ -57,5 +51,4 @@ var _updateAncestors = /*#__PURE__*/require("./updateAncestors");
 var _updateSingleAncestors = /*#__PURE__*/require("./updateSingleAncestors");
 var _sizeToIconSize = /*#__PURE__*/require("./sizeToIconSize");
 var _getCorrectHeight = /*#__PURE__*/require("./getCorrectHeight");
-var _getButtonLabel = /*#__PURE__*/require("./getButtonLabel");
-var _getView = /*#__PURE__*/require("./getView");
+var _getButtonLabel = /*#__PURE__*/require("./getButtonLabel");

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

@@ -16,7 +16,8 @@ var _TextArea2 = /*#__PURE__*/require("./TextArea.tokens");
 var _base = /*#__PURE__*/require("./variations/_view/base");
 var _base2 = /*#__PURE__*/require("./variations/_size/base");
 var _base3 = /*#__PURE__*/require("./variations/_disabled/base");
-var _excluded = ["helperText", "status", "resize", "rightHelper", "leftHelper", "contentRight", "autoResize", "minAuto", "maxAuto", "label", "labelPlacement", "placeholder", "defaultValue", "height", "width", "value", "disabled", "size", "view", "id", "style", "className", "readOnly", "rows", "cols", "onChange"];
+var _base4 = /*#__PURE__*/require("./variations/_required/base");
+var _excluded = ["helperText", "status", "resize", "rightHelper", "leftHelper", "contentRight", "autoResize", "minAuto", "maxAuto", "label", "labelPlacement", "placeholder", "defaultValue", "height", "width", "value", "disabled", "required", "requiredAlign", "size", "view", "id", "style", "className", "readOnly", "rows", "cols", "onChange"];
 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); }
@@ -97,6 +98,8 @@ var textAreaRoot = exports.textAreaRoot = function textAreaRoot(Root) {
       width = props.width,
       value = props.value,
       disabled = props.disabled,
+      required = props.required,
+      requiredAlign = props.requiredAlign,
       size = props.size,
       view = props.view,
       id = props.id,
@@ -125,6 +128,8 @@ var textAreaRoot = exports.textAreaRoot = function textAreaRoot(Root) {
     var textareaHelperId = id ? "".concat(id, "-helper") : undefined;
     var applyCustomWidth = resize !== 'horizontal' && resize !== 'both' && !cols;
     var placeLabel = labelPlacement === 'inner' && label && size !== 'xs' ? label : placeholder;
+    var hasOuterLabel = Boolean(label && labelPlacement === 'outer');
+    var requiredAlignClass = requiredAlign === 'right' ? 'align-right ' : undefined;
     (0, _plasmaCore.useResizeObserver)(outerRef, function (currentElement) {
       var inlineWidth = currentElement.style.width;
       if (inlineWidth || cols) {
@@ -163,16 +168,21 @@ var textAreaRoot = exports.textAreaRoot = function textAreaRoot(Root) {
       size: size,
       disabled: disabled,
       readOnly: readOnly,
+      required: required,
       style: _objectSpread({
         width: helperWidth
       }, style),
       className: className
-    }, label && labelPlacement === 'outer' && /*#__PURE__*/_react["default"].createElement(_TextArea.StyledLabel, null, label), /*#__PURE__*/_react["default"].createElement(_TextArea.StyledContainer, {
+    }, hasOuterLabel && /*#__PURE__*/_react["default"].createElement(_TextArea.StyledLabel, null, required && /*#__PURE__*/_react["default"].createElement(_TextArea.StyledIndicator, {
+      className: (0, _utils.cx)('placement-outer', requiredAlignClass)
+    }), label), /*#__PURE__*/_react["default"].createElement(_TextArea.StyledContainer, {
       className: _utils.cx.apply(void 0, [styledContainer].concat(_toConsumableArray(dynamicLabelClasses))),
       width: helperWidth,
       onFocus: onFocusHandler,
       onBlur: onBlurHandler
-    }, contentRight && /*#__PURE__*/_react["default"].createElement(_TextArea.StyledContent, null, contentRight), /*#__PURE__*/_react["default"].createElement(_TextArea.StyledTextAreaWrapper, {
+    }, required && !hasOuterLabel && /*#__PURE__*/_react["default"].createElement(_TextArea.StyledIndicator, {
+      className: (0, _utils.cx)('placement-inner', requiredAlignClass)
+    }), contentRight && /*#__PURE__*/_react["default"].createElement(_TextArea.StyledContent, null, contentRight), /*#__PURE__*/_react["default"].createElement(_TextArea.StyledTextAreaWrapper, {
       className: styledTextAreaWrapper,
       hasHelper: hasHelper
     }, /*#__PURE__*/_react["default"].createElement(_TextArea.StyledTextArea, _extends({
@@ -220,6 +230,10 @@ var textAreaConfig = exports.textAreaConfig = {
       css: _base3.base,
       attrs: true
     },
+    required: {
+      css: _base4.base,
+      attrs: true
+    },
     readOnly: {
       attrs: true
     }

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

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledTextAreaWrapper = exports.StyledTextArea = exports.StyledRightHelper = exports.StyledPlaceholder = exports.StyledLeftHelper = exports.StyledLabel = exports.StyledHelpers = exports.StyledContent = exports.StyledContainer = void 0;
+exports.StyledTextAreaWrapper = exports.StyledTextArea = exports.StyledRightHelper = exports.StyledPlaceholder = exports.StyledLeftHelper = exports.StyledLabel = exports.StyledIndicator = exports.StyledHelpers = exports.StyledContent = exports.StyledContainer = void 0;
 var _styledComponents = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("styled-components"));
 var _mixins = /*#__PURE__*/require("../../mixins");
 var _TextArea = /*#__PURE__*/require("./TextArea.tokens");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var StyledLabel = exports.StyledLabel = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-pxxv3p-0"
-})(["margin-bottom:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], _TextArea.tokens.labelMarginBottom, _TextArea.tokens.inputFontFamily, _TextArea.tokens.inputFontSize, _TextArea.tokens.inputFontStyle, _TextArea.tokens.inputFontWeight, _TextArea.tokens.inputLetterSpacing, _TextArea.tokens.inputLineHeight);
+})(["position:relative;display:inline-block;margin-bottom:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], _TextArea.tokens.labelMarginBottom, _TextArea.tokens.inputFontFamily, _TextArea.tokens.inputFontSize, _TextArea.tokens.inputFontStyle, _TextArea.tokens.inputFontWeight, _TextArea.tokens.inputLetterSpacing, _TextArea.tokens.inputLineHeight);
 var StyledTextAreaWrapper = exports.StyledTextAreaWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-pxxv3p-1"
 })(["background-color:var(", ");padding-top:var(", ");padding-bottom:", ";border-radius:", ";"], _TextArea.tokens.inputBackgroundColor, _TextArea.tokens.inputPaddingTop, function (_ref) {
@@ -74,4 +74,7 @@ var StyledPlaceholder = exports.StyledPlaceholder = /*#__PURE__*/_styledComponen
 })(["box-sizing:border-box;position:absolute;pointer-events:none;display:inline-flex;align-items:center;transition:all 0.1s ease-in-out;transform-origin:top left;color:var(", ");width:100%;height:auto;top:var(", ");padding-left:var(", ");padding-right:", ";font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], _TextArea.tokens.placeholderColor, _TextArea.tokens.inputPaddingTop, _TextArea.tokens.inputPaddingLeft, function (_ref13) {
   var hasContentRight = _ref13.hasContentRight;
   return hasContentRight ? "var(".concat(_TextArea.tokens.inputPaddingRightWithRightContent, ")") : "var(".concat(_TextArea.tokens.inputPaddingRight, ")");
-}, _TextArea.tokens.inputFontFamily, _TextArea.tokens.inputFontSize, _TextArea.tokens.inputFontStyle, _TextArea.tokens.inputFontWeight, _TextArea.tokens.inputLetterSpacing, _TextArea.tokens.inputLineHeight);
+}, _TextArea.tokens.inputFontFamily, _TextArea.tokens.inputFontSize, _TextArea.tokens.inputFontStyle, _TextArea.tokens.inputFontWeight, _TextArea.tokens.inputLetterSpacing, _TextArea.tokens.inputLineHeight);
+var StyledIndicator = exports.StyledIndicator = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-pxxv3p-9"
+})(["position:absolute;border-radius:50%;background-color:var(", ");&.placement-outer{width:var(", ");height:var(", ");inset:var(", ");&.align-right{inset:var(", ");}}&.placement-inner{width:var(", ");height:var(", ");inset:var(", ");&.align-right{inset:var(", ");}}"], _TextArea.tokens.indicatorColor, _TextArea.tokens.indicatorSizeOuter, _TextArea.tokens.indicatorSizeOuter, _TextArea.tokens.indicatorLabelPlacementOuter, _TextArea.tokens.indicatorLabelPlacementOuterRight, _TextArea.tokens.indicatorSizeInner, _TextArea.tokens.indicatorSizeInner, _TextArea.tokens.indicatorLabelPlacementInner, _TextArea.tokens.indicatorLabelPlacementInnerRight);

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

@@ -32,7 +32,7 @@ export function App() {
 ```
 
 ### Размеры компонента
-Высоту и ширину можно регулировать с помощью свойств `height` и `width`, 
+Высоту и ширину можно регулировать с помощью свойств `height` и `width`,
 указав значения в `rem` или соответствующие свойствам css значения.
 `height` и `width` отвечают за **всю** высоту и ширину компонента.
 
@@ -76,7 +76,7 @@ export function App() {
 
 ### Autoresize
 Также можно включить автоматическое регулирование высоты поля ввода по длине контента внутри (параметра `value`).
-Для этого необходимо использовать свойство `autoResize`. 
+Для этого необходимо использовать свойство `autoResize`.
 
 Свойства `minAuto`, `maxAuto` указываются в абсолютных единицах и отвечают за минимальное и максимальное количество строк.
 
@@ -123,4 +123,30 @@ export function App() {
         </div>
     );
 }
-```
+```
+
+
+### Обязательность поля
+Обязательность поля задаётся с помощью свойств `required` и `requiredAlign`. Где `requiredAlign` отвечает за выравнивание и принимает значения `"left"` и `"right"`:
+
+```tsx live
+import React from 'react';
+import { TextField } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <TextArea
+                placeholder="Введите значение"
+                required
+            />
+            <TextArea
+                placeholder="Введите значение"
+                label="Заголовок"
+                required
+                requiredAlign="right"
+            />
+        </div>
+    );
+}
+```

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

@@ -152,5 +152,12 @@ var tokens = exports.tokens = {
   /** Прозрачность для всего компонента в состоянии disabled */
   disabledOpacity: '--plasma-textarea-disabled-opacity',
   /** Цвет текста для элемента textarea в состоянии disabled */
-  inputColorDisabled: '--plasma-textarea-input-color-disabled'
+  inputColorDisabled: '--plasma-textarea-input-color-disabled',
+  indicatorColor: '--plasma-textarea-indicator-color',
+  indicatorSizeInner: '--plasma-textarea-indicator-size-inner',
+  indicatorSizeOuter: '--plasma-textarea-indicator-size-outer',
+  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'
 };

package/styled-components/cjs/components/TextArea/variations/_required/base.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.base = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([""]);

package/styled-components/cjs/components/TextArea/variations/_required/tokens.json

@@ -0,0 +1 @@
+["--plasma-textarea-indicator-color"]

package/styled-components/cjs/components/TextArea/variations/_size/tokens.json

@@ -36,5 +36,11 @@
     "--plasma-textarea-helpers-font-style",
     "--plasma-textarea-helpers-font-weight",
     "--plasma-textarea-helpers-letter-spacing",
-    "--plasma-textarea-helpers-line-height"
+    "--plasma-textarea-helpers-line-height",
+    "--plasma-textarea-indicator-size-inner",
+    "--plasma-textarea-indicator-size-outer",
+    "--plasma-textarea-indicator-placement-inner",
+    "--plasma-textarea-indicator-placement-outer",
+    "--plasma-textarea-indicator-placement-inner-right",
+    "--plasma-textarea-indicator-placement-outer-right"
 ]

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

@@ -13,12 +13,13 @@ 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 _base5 = /*#__PURE__*/require("./variations/_required/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", "view", "size", "readOnly", "disabled", "chips", "onChange", "onChangeChips", "onSearch", "onKeyDown"];
+var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "textBefore", "textAfter", "placeholder", "leftHelper", "enumerationType", "requiredAlign", "view", "size", "readOnly", "disabled", "required", "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); }
@@ -30,7 +31,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 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; }
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["display:block;overflow:hidden;"]);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["display:block;"]);
 var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
   return /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     var id = _ref.id,
@@ -46,12 +47,16 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
       leftHelper = _ref.leftHelper,
       _ref$enumerationType = _ref.enumerationType,
       enumerationType = _ref$enumerationType === void 0 ? 'plain' : _ref$enumerationType,
+      _ref$requiredAlign = _ref.requiredAlign,
+      requiredAlign = _ref$requiredAlign === void 0 ? 'left' : _ref$requiredAlign,
       view = _ref.view,
       size = _ref.size,
       _ref$readOnly = _ref.readOnly,
       readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$required = _ref.required,
+      required = _ref$required === void 0 ? false : _ref$required,
       values = _ref.chips,
       onChange = _ref.onChange,
       onChangeChips = _ref.onChangeChips,
@@ -81,6 +86,8 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
     var innerLabelPlacementValue = hideLabel ? 'outer' : labelPlacement;
     var innerPlaceholderValue = hideLabel ? label : placeholder;
     var innerLabelValue = hideLabel ? undefined : label;
+    var hasOuterLabel = Boolean(!labelInside && innerLabelValue);
+    var requiredAlignClass = requiredAlign === 'right' ? 'align-right ' : undefined;
     var hideLabelClass = hideLabel && label ? _TextField2.classes.hideLabel : undefined;
     var labelPlacementClass = _TextField2.classes["".concat(labelPlacement, "LabelPlacement")];
     var isChipsVisible = isChipEnumeration && (chips === null || chips === void 0 ? void 0 : chips.length);
@@ -156,17 +163,22 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
       view: view,
       size: size,
       disabled: disabled,
+      required: required,
       readOnly: !disabled && readOnly,
       labelPlacement: innerLabelPlacementValue,
       onClick: handleInputFocus,
       className: (0, _utils.cx)(labelPlacementClass, hideLabelClass, className),
       style: style
-    }, labelInside || innerLabelValue && /*#__PURE__*/_react["default"].createElement(_TextField.Label, {
+    }, hasOuterLabel && /*#__PURE__*/_react["default"].createElement(_TextField.Label, {
       id: labelId,
       htmlFor: id
-    }, innerLabelValue), /*#__PURE__*/_react["default"].createElement(_TextField.InputWrapper, {
+    }, required && /*#__PURE__*/_react["default"].createElement(_TextField.StyledIndicator, {
+      className: (0, _utils.cx)('placement-outer', requiredAlignClass)
+    }), innerLabelValue), /*#__PURE__*/_react["default"].createElement(_TextField.InputWrapper, {
       className: (0, _utils.cx)(withHasChips, wrapperWithoutLeftContent, wrapperWithoutRightContent)
-    }, contentLeft && /*#__PURE__*/_react["default"].createElement(_TextField.StyledContentLeft, null, contentLeft), /*#__PURE__*/_react["default"].createElement(_TextField.InputLabelWrapper, {
+    }, !hasOuterLabel && required && /*#__PURE__*/_react["default"].createElement(_TextField.StyledIndicator, {
+      className: (0, _utils.cx)('placement-inner', requiredAlignClass)
+    }), contentLeft && /*#__PURE__*/_react["default"].createElement(_TextField.StyledContentLeft, null, contentLeft), /*#__PURE__*/_react["default"].createElement(_TextField.InputLabelWrapper, {
       tabIndex: -1,
       ref: contentRef,
       onKeyDown: handleContentKeyDown,
@@ -230,8 +242,12 @@ var textFieldConfig = exports.textFieldConfig = {
       css: _base4.base,
       attrs: true
     },
+    required: {
+      css: _base5.base,
+      attrs: true
+    },
     labelPlacement: {
-      css: _base5.base
+      css: _base6.base
     }
   },
   defaults: {

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledTextBefore = exports.StyledTextAfter = exports.StyledContentRight = exports.StyledContentLeft = exports.StyledChips = exports.LeftHelper = exports.Label = exports.InputWrapper = exports.InputLabelWrapper = exports.Input = void 0;
+exports.StyledTextBefore = exports.StyledTextAfter = exports.StyledIndicator = exports.StyledContentRight = exports.StyledContentLeft = exports.StyledChips = exports.LeftHelper = exports.Label = exports.InputWrapper = exports.InputLabelWrapper = exports.Input = void 0;
 var _styledComponents = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("styled-components"));
 var _TextField = /*#__PURE__*/require("./TextField.tokens");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -21,7 +21,7 @@ var Input = exports.Input = /*#__PURE__*/_styledComponents["default"].input.with
 })(["box-sizing:border-box;appearance:none;border:0;padding:0;background-color:transparent;outline:none;flex:1;min-width:60%;"]);
 var Label = exports.Label = /*#__PURE__*/_styledComponents["default"].label.withConfig({
   componentId: "plasma-new-hope__sc-g4vxbb-4"
-})([""]);
+})(["position:relative;"]);
 var StyledContentLeft = exports.StyledContentLeft = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-g4vxbb-5"
 })(["margin:var(", ");line-height:0;"], _TextField.tokens.leftContentMargin);
@@ -36,4 +36,7 @@ var StyledTextBefore = exports.StyledTextBefore = /*#__PURE__*/_styledComponents
 })([""]);
 var StyledTextAfter = exports.StyledTextAfter = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-g4vxbb-9"
-})([""]);
+})([""]);
+var StyledIndicator = exports.StyledIndicator = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-g4vxbb-10"
+})(["position:absolute;border-radius:50%;background-color:var(", ");&.placement-outer{width:var(", ");height:var(", ");inset:var(", ");&.align-right{inset:var(", ");}}&.placement-inner{width:var(", ");height:var(", ");inset:var(", ");&.align-right{inset:var(", ");}}"], _TextField.tokens.indicatorColor, _TextField.tokens.indicatorSizeOuter, _TextField.tokens.indicatorSizeOuter, _TextField.tokens.indicatorLabelPlacementOuter, _TextField.tokens.indicatorLabelPlacementOuterRight, _TextField.tokens.indicatorSizeInner, _TextField.tokens.indicatorSizeInner, _TextField.tokens.indicatorLabelPlacementInner, _TextField.tokens.indicatorLabelPlacementInnerRight);

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

@@ -112,7 +112,7 @@ export function App() {
 ```
 
 ### Режим ввода
-С помощью свойства `enumarationType` можно вводить элементы как теги. 
+С помощью свойства `enumarationType` можно вводить элементы как теги.
 По нажатию Enter, после ввода нужного текста, он преобразуется в Chip:
 
 ```tsx live
@@ -134,3 +134,29 @@ export function App() {
     );
 }
 ```
+
+
+### Обязательность поля
+Обязательность поля задаётся с помощью свойств `required` и `requiredAlign`. Где `requiredAlign` отвечает за выравнивание и принимает значения `"left"` и `"right"`:
+
+```tsx live
+import React from 'react';
+import { TextField } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <TextField
+                placeholder="Введите значение"
+                required
+            />
+            <TextField
+                placeholder="Введите значение"
+                label="Заголовок"
+                required
+                requiredAlign="right"
+            />
+        </div>
+    );
+}
+```

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

@@ -112,5 +112,12 @@ var tokens = exports.tokens = {
   chipClearContentMarginLeft: '--plasma-textfield__chip-clear-content-margin-left',
   chipClearContentMarginRight: '--plasma-textfield__chip-clear-content-margin-right',
   chipOpacityReadonly: '--plasma-textfield__chip-opacity-readonly',
-  focusColor: '--plasma-textfield-focus-color'
+  focusColor: '--plasma-textfield-focus-color',
+  indicatorColor: '--plasma-textfield-indicator-color',
+  indicatorSizeInner: '--plasma-textfield-indicator-size-inner',
+  indicatorSizeOuter: '--plasma-textfield-indicator-size-outer',
+  indicatorLabelPlacementInner: '--plasma-textfield-indicator-placement-inner',
+  indicatorLabelPlacementOuter: '--plasma-textfield-indicator-placement-outer',
+  indicatorLabelPlacementInnerRight: '--plasma-textfield-indicator-placement-inner-right',
+  indicatorLabelPlacementOuterRight: '--plasma-textfield-indicator-placement-outer-right'
 };

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)(["&.", "{", "{display:block;margin-bottom:var(", ");color:var(", ");}}&.", "{&:not(.", "){", "{padding:var(", ");}", ",", "{padding:var(", ");}}", ":focus ~ ", ",", ":not(:placeholder-shown) ~ ", "{height:auto;padding:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}&:not(.", "){", ":not(:focus)::placeholder{color:transparent;}", ":focus::placeholder{color:transparent;}}", "{color:var(", ");pointer-events:none;position:absolute;top:0;display:flex;align-items:center;box-sizing:border-box;transition:padding 0.1s ease-in-out,height 0s;height:var(", ");padding-top:calc(var(", ") / 4);padding-bottom:calc(var(", ") / 4);}}"], _TextField.classes.outerLabelPlacement, _TextField2.Label, _TextField.tokens.labelOffset, _TextField.tokens.labelColor, _TextField.classes.innerLabelPlacement, _TextField.classes.hideLabel, _TextField2.Input, _TextField.tokens.contentLabelInnerPadding, _TextField2.StyledTextAfter, _TextField2.StyledTextBefore, _TextField.tokens.contentLabelInnerPadding, _TextField2.Input, _TextField2.Label, _TextField2.Input, _TextField2.Label, _TextField.tokens.labelInnerPadding, _TextField.tokens.labelInnerFontFamily, _TextField.tokens.labelInnerFontSize, _TextField.tokens.labelInnerFontStyle, _TextField.tokens.labelInnerFontWeight, _TextField.tokens.labelInnerLetterSpacing, _TextField.tokens.labelInnerLineHeight, _TextField.classes.hideLabel, _TextField2.Input, _TextField2.Input, _TextField2.Label, _TextField.tokens.placeholderColor, _TextField.tokens.height, _TextField.tokens.height, _TextField.tokens.height);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", "{", "{position:relative;display:inline-block;margin-bottom:var(", ");color:var(", ");}}&.", "{&:not(.", "){", "{padding:var(", ");}", ",", "{padding:var(", ");}}", ":focus ~ ", ",", ":not(:placeholder-shown) ~ ", "{height:auto;padding:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}&:not(.", "){", ":not(:focus)::placeholder{color:transparent;}", ":focus::placeholder{color:transparent;}}", "{color:var(", ");pointer-events:none;position:absolute;top:0;display:flex;align-items:center;box-sizing:border-box;transition:padding 0.1s ease-in-out,height 0s;height:var(", ");padding-top:calc(var(", ") / 4);padding-bottom:calc(var(", ") / 4);}}"], _TextField.classes.outerLabelPlacement, _TextField2.Label, _TextField.tokens.labelOffset, _TextField.tokens.labelColor, _TextField.classes.innerLabelPlacement, _TextField.classes.hideLabel, _TextField2.Input, _TextField.tokens.contentLabelInnerPadding, _TextField2.StyledTextAfter, _TextField2.StyledTextBefore, _TextField.tokens.contentLabelInnerPadding, _TextField2.Input, _TextField2.Label, _TextField2.Input, _TextField2.Label, _TextField.tokens.labelInnerPadding, _TextField.tokens.labelInnerFontFamily, _TextField.tokens.labelInnerFontSize, _TextField.tokens.labelInnerFontStyle, _TextField.tokens.labelInnerFontWeight, _TextField.tokens.labelInnerLetterSpacing, _TextField.tokens.labelInnerLineHeight, _TextField.classes.hideLabel, _TextField2.Input, _TextField2.Input, _TextField2.Label, _TextField.tokens.placeholderColor, _TextField.tokens.height, _TextField.tokens.height, _TextField.tokens.height);

package/styled-components/cjs/components/TextField/variations/_required/base.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.base = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([""]);

package/styled-components/cjs/components/TextField/variations/_required/tokens.json

@@ -0,0 +1 @@
+["--plasma-textfield-indicator-color"]

package/styled-components/cjs/components/TextField/variations/_size/tokens.json

@@ -2,5 +2,11 @@
     "--plasma-textfield-height",
     "--plasma-textfield-padding",
     "--plasma-textfield-radius",
+    "--plasma-textfield-indicator-size-inner",
+    "--plasma-textfield-indicator-size-outer",
+    "--plasma-textfield-indicator-placement-inner",
+    "--plasma-textfield-indicator-placement-outer",
+    "--plasma-textfield-indicator-placement-inner-right",
+    "--plasma-textfield-indicator-placement-outer-right",
     { "name": "typography", "type": "enum", "value": "typo:body" }
 ]