@salutejs/plasma-new-hope 0.193.0-canary.1550.11804452240.0 → 0.193.0-canary.1556.11815100174.0

package/styled-components/cjs/components/Steps/ui/StepItem/StepItem.styles.js

@@ -8,6 +8,7 @@ var _styledComponents = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/requir
 var _Steps = /*#__PURE__*/require("../../Steps.tokens");
 var _engines = /*#__PURE__*/require("../../../../engines");
 var _Spinner = /*#__PURE__*/require("../../../Spinner");
+var _mixins = /*#__PURE__*/require("../../../../mixins");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Spinner.spinnerConfig);
 var Spinner = /*#__PURE__*/(0, _engines.component)(mergedConfig);
@@ -25,16 +26,26 @@ var StepItemContent = exports.StepItemContent = /*#__PURE__*/_styledComponents["
 })(["padding-top:var(", ");padding-right:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");word-break:break-word;color:var(", ");"], _Steps.tokens.contentPaddingTop, _Steps.tokens.contentSidePadding, _Steps.tokens.contentFontFamily, _Steps.tokens.contentFontSize, _Steps.tokens.contentFontStyle, _Steps.tokens.contentFontWeight, _Steps.tokens.contentLetterSpacing, _Steps.tokens.contentLineHeight, _Steps.tokens.contentColor);
 var BulletIndicatorWrapper = exports.BulletIndicatorWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-bjma6z-3"
-})(["display:flex;align-items:center;&:not(.", "){flex:0;&.", "{width:100%;min-height:var(", ");}&:not(.", "){width:100%;min-height:var(", ");}&.", "{padding-right:var(", ");}}&.", "{flex-direction:column;align-items:center;justify-content:center;min-height:100%;&.", "{min-width:var(", ");}&:not(.", "){min-width:var(", ");}}&.", "{justify-content:center;}"], _Steps.classes.simple, _Steps.classes.hasIndicator, _Steps.tokens.activeIndicatorSize, _Steps.classes.hasIndicator, _Steps.tokens.activeBulletSize, _Steps.classes.verticalOrientation, _Steps.tokens.verticalContentPaddingLeft, _Steps.classes.verticalOrientation, _Steps.classes.hasIndicator, _Steps.tokens.activeIndicatorSize, _Steps.classes.hasIndicator, _Steps.tokens.activeBulletSize, _Steps.classes.centered);
-var BulletIndicator = exports.BulletIndicator = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+})(["display:flex;align-items:center;&:not(.", "){flex:0;&.", "{width:100%;min-height:var(", ");}&:not(.", "){width:100%;min-height:var(", ");}&.", "{padding-right:var(", ");}}&.", "{flex:0;justify-content:center;&.", "{width:var(", ");}&:not(.", "){width:var(", ");}}&.", "{flex-direction:column;align-items:center;justify-content:center;&.", "{min-width:var(", ");}&:not(.", "){min-width:var(", ");}}&.", "{justify-content:center;}"], _Steps.classes.simple, _Steps.classes.hasIndicator, _Steps.tokens.activeIndicatorSize, _Steps.classes.hasIndicator, _Steps.tokens.activeBulletSize, _Steps.classes.verticalOrientation, _Steps.tokens.verticalContentPaddingLeft, _Steps.classes.simple, _Steps.classes.hasIndicator, _Steps.tokens.activeIndicatorSize, _Steps.classes.hasIndicator, _Steps.tokens.activeBulletSize, _Steps.classes.verticalOrientation, _Steps.classes.hasIndicator, _Steps.tokens.activeIndicatorSize, _Steps.classes.hasIndicator, _Steps.tokens.activeBulletSize, _Steps.classes.centered);
+var BulletIndicator = exports.BulletIndicator = /*#__PURE__*/_styledComponents["default"].button.withConfig({
   componentId: "plasma-new-hope__sc-bjma6z-4"
-})(["display:flex;align-items:center;justify-content:center;width:var(", ");height:var(", ");border-radius:50%;box-sizing:border-box;position:relative;color:var(", ");background-color:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");&.", "{width:var(", ");height:var(", ");border:var(", ") var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");color:var(", ");background:var(", ");}&.", "{color:var(", ");background:var(", ");&:before,&:after{background:var(", ");}}"], _Steps.tokens.indicatorSize, _Steps.tokens.indicatorSize, _Steps.tokens.completedIndicatorColor, _Steps.tokens.completedIndicatorBackground, _Steps.tokens.indicatorFontFamily, _Steps.tokens.indicatorFontSize, _Steps.tokens.indicatorFontStyle, _Steps.tokens.indicatorFontWeight, _Steps.tokens.indicatorLetterSpacing, _Steps.tokens.indicatorLineHeight, _Steps.classes.active, _Steps.tokens.activeIndicatorSize, _Steps.tokens.activeIndicatorSize, _Steps.tokens.dividerThickness, _Steps.tokens.activeIndicatorBorder, _Steps.tokens.activeIndicatorFontFamily, _Steps.tokens.activeIndicatorFontSize, _Steps.tokens.activeIndicatorFontStyle, _Steps.tokens.activeIndicatorFontWeight, _Steps.tokens.activeIndicatorLetterSpacing, _Steps.tokens.activeIndicatorLineHeight, _Steps.tokens.activeIndicatorColor, _Steps.tokens.activeIndicatorBackground, _Steps.classes.inactive, _Steps.tokens.inactiveIndicatorColor, _Steps.tokens.inactiveIndicatorBackground, _Steps.tokens.inactiveIndicatorBackground);
+})(["display:flex;align-items:center;justify-content:center;width:var(", ");height:var(", ");border-radius:50%;box-sizing:border-box;position:relative;outline:none;padding:0;margin:0;border:none;color:var(", ");background-color:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");", " &.", "{width:var(", ");height:var(", ");border:var(", ") var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");color:var(", ");background:var(", ");", "}&.", "{color:var(", ");background:var(", ");&.", "{&:before,&:after{background:var(", ");}}}"], _Steps.tokens.indicatorSize, _Steps.tokens.indicatorSize, _Steps.tokens.completedIndicatorColor, _Steps.tokens.completedIndicatorBackground, _Steps.tokens.indicatorFontFamily, _Steps.tokens.indicatorFontSize, _Steps.tokens.indicatorFontStyle, _Steps.tokens.indicatorFontWeight, _Steps.tokens.indicatorLetterSpacing, _Steps.tokens.indicatorLineHeight, /*#__PURE__*/(0, _mixins.addFocus)({
+  outlineOffset: '-0.0625rem',
+  outlineSize: '0.0625rem',
+  outlineRadius: '50%',
+  outlineColor: /*#__PURE__*/"var(".concat(_Steps.tokens.focusColor, ")")
+}), _Steps.classes.active, _Steps.tokens.activeIndicatorSize, _Steps.tokens.activeIndicatorSize, _Steps.tokens.dividerThickness, _Steps.tokens.activeIndicatorBorder, _Steps.tokens.activeIndicatorFontFamily, _Steps.tokens.activeIndicatorFontSize, _Steps.tokens.activeIndicatorFontStyle, _Steps.tokens.activeIndicatorFontWeight, _Steps.tokens.activeIndicatorLetterSpacing, _Steps.tokens.activeIndicatorLineHeight, _Steps.tokens.activeIndicatorColor, _Steps.tokens.activeIndicatorBackground, /*#__PURE__*/(0, _mixins.addFocus)({
+  outlineOffset: '-0.1875rem',
+  outlineSize: '0.0625rem',
+  outlineRadius: '50%',
+  outlineColor: /*#__PURE__*/"var(".concat(_Steps.tokens.focusColor, ")")
+}), _Steps.classes.inactive, _Steps.tokens.inactiveIndicatorColor, _Steps.tokens.inactiveIndicatorBackground, _Steps.classes.simple, _Steps.tokens.inactiveIndicatorBackground);
 var Bullet = exports.Bullet = /*#__PURE__*/(0, _styledComponents["default"])(BulletIndicator).withConfig({
   componentId: "plasma-new-hope__sc-bjma6z-5"
-})(["width:var(", ");height:var(", ");&.", "{width:var(", ");height:var(", ");border:var(", ") var(", ");background-color:var(", ");}"], _Steps.tokens.bulletSize, _Steps.tokens.bulletSize, _Steps.classes.active, _Steps.tokens.activeBulletSize, _Steps.tokens.activeBulletSize, _Steps.tokens.dividerThickness, _Steps.tokens.activeIndicatorBorder, _Steps.tokens.activeIndicatorBackground);
+})(["width:var(", ");height:var(", ");&.", "{width:var(", ");height:var(", ");border:var(", ") var(", ");background:var(", ");}"], _Steps.tokens.bulletSize, _Steps.tokens.bulletSize, _Steps.classes.active, _Steps.tokens.activeBulletSize, _Steps.tokens.activeBulletSize, _Steps.tokens.dividerThickness, _Steps.tokens.activeIndicatorBorder, _Steps.tokens.activeIndicatorBackground);
 var StepItemDivider = exports.StepItemDivider = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-bjma6z-6"
-})(["width:100%;height:var(", ");flex:1;background-color:var(", ");&.", "{background-color:var(", ");}&.", "{background-color:transparent;}&.", "{width:var(", ");height:100%;}&.", "{height:", ";min-height:", ";max-height:", ";&.", "{height:auto;max-height:none;}}"], _Steps.tokens.dividerThickness, _Steps.tokens.activeIndicatorColor, _Steps.classes.inactive, _Steps.tokens.inactiveIndicatorBackground, _Steps.classes.transparentDivider, _Steps.classes.verticalOrientation, _Steps.tokens.dividerThickness, _Steps.classes.indentDivider, function (_ref2) {
+})(["width:100%;height:var(", ");flex:1;background:var(", ");&.", "{background:var(", ");}&.", "{opacity:var(", ");}&.", "{background:transparent;}&.", "{width:var(", ");height:100%;}&.", "{height:", ";min-height:", ";max-height:", ";&.", "{height:auto;max-height:none;}}"], _Steps.tokens.dividerThickness, _Steps.tokens.activeIndicatorColor, _Steps.classes.inactive, _Steps.tokens.inactiveIndicatorBackground, _Steps.classes.disabled, _Steps.tokens.disabledOpacity, _Steps.classes.transparentDivider, _Steps.classes.verticalOrientation, _Steps.tokens.dividerThickness, _Steps.classes.indentDivider, function (_ref2) {
   var indentToken = _ref2.indentToken;
   return indentToken || '';
 }, function (_ref3) {
@@ -49,4 +60,4 @@ var StepItemContentWrapper = exports.StepItemContentWrapper = /*#__PURE__*/_styl
 })(["&.", "{", "{padding-top:var(", ");padding-right:0;}", "{padding-top:var(", ");padding-bottom:var(", ");padding-right:0;}}"], _Steps.classes.verticalOrientation, StepItemTitle, _Steps.tokens.contentVerticalPadding, StepItemContent, _Steps.tokens.contentVerticalPadding, _Steps.tokens.contentVerticalPadding);
 var StepItemStyled = exports.StepItemStyled = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-bjma6z-8"
-})(["display:flex;flex-direction:column;align-items:flex-start;flex:1;&.", "{flex-direction:row;align-items:stretch;", "{width:var(", ");height:100%;}}&.", "{", "{color:var(", ");}}&.", "{", "{color:var(", ");}}&.", "{&:not(.", "){", "{cursor:pointer;color:var(", ");}", ",", "{color:var(", ");background:var(", ");}}&.", "{", "{color:var(", ");}", ",", "{color:var(", ");background:var(", ");}}", "{cursor:pointer;}}&.", "{align-items:center;", "{display:flex;flex-direction:column;align-items:center;padding-left:calc(var(", ") / 2);padding-right:calc(var(", ") / 2);", "{width:100%;}", ",", "{padding-right:0;text-align:center;}}}&.", "{flex:0;}&.", "{opacity:var(", ");}"], _Steps.classes.verticalOrientation, StepItemDivider, _Steps.tokens.dividerThickness, _Steps.classes.active, StepItemTitle, _Steps.tokens.activeTitleColor, _Steps.classes.inactive, StepItemTitle, _Steps.tokens.inactiveTitleColor, _Steps.classes.hovered, _Steps.classes.active, StepItemTitle, _Steps.tokens.activeTitleColorHover, BulletIndicator, Bullet, _Steps.tokens.completedIndicatorColorHover, _Steps.tokens.completedIndicatorBackgroundHover, _Steps.classes.inactive, StepItemTitle, _Steps.tokens.inactiveTitleColorHover, BulletIndicator, Bullet, _Steps.tokens.inactiveIndicatorColorHover, _Steps.tokens.inactiveIndicatorBackgroundHover, BulletIndicatorWrapper, _Steps.classes.centered, StepItemContentWrapper, _Steps.tokens.contentSidePadding, _Steps.tokens.contentSidePadding, StepItemTitle, StepItemTitle, StepItemContent, _Steps.classes.simple, _Steps.classes.disabled, _Steps.tokens.disabledOpacity);
+})(["position:relative;display:flex;flex-direction:column;align-items:flex-start;flex:1;color:var(", ");&.", "{flex-direction:row;align-items:stretch;", "{width:var(", ");height:100%;}}&.", "{", "{color:var(", ");}}&.", "{color:var(", ");", "{color:var(", ");}}&.", "{flex:0;align-items:center;justify-content:center;flex-direction:row;height:100%;&.", "{min-width:var(", ");min-height:var(", ");}&:not(.", "){width:var(", ");min-height:var(", ");}&.", ",&:not(.", "){&:before,&:after{content:'';display:block;width:calc((var(", ") - var(", ")) / 2);height:var(", ");background:var(", ");}&:not(.", "){&:before,&:after{width:calc((var(", ") - var(", ")) / 2);}}&.", "{flex-direction:column;&:before,&:after{width:var(", ");height:calc((var(", ") - var(", ")) / 2);margin:0 auto;align-self:auto;}&:not(.", "){&:before,&:after{height:calc((var(", ") - var(", ")) / 2);}}&:after{margin:0 auto;}}&.isFirst{&:before{background:transparent;}}&.isLast{&:after{background:transparent;}}}&.", "{&:after,&:before{background:var(", ");}}&.isPrevInactive{&:before{background:var(", ");}}&.isNextInactive{&:after{background:var(", ");}}&.", "{&:before,&:after{background:var(", ");opacity:1;}}&.", "{&:before,&:after{background:transparent;}}}&:not(.", "):not(.", "){&.isNextActive{", "{width:calc(100% - (var(", ") - var(", ")) / 2);}}&.", "{", "{margin-left:calc((var(", ") - var(", ")) / -2);width:calc(100% + (var(", ") - var(", ")) / 2);}}}&.", "{&:not(.", "){", "{cursor:pointer;color:var(", ");}", ",", "{color:var(", ");background:var(", ");}}&.", "{", "{color:var(", ");}", ",", "{color:var(", ");background:var(", ");}}", "{cursor:pointer;}}&.", "{align-items:center;", "{display:flex;flex-direction:column;align-items:center;padding-left:calc(var(", ") / 2);padding-right:calc(var(", ") / 2);", "{width:100%;}", ",", "{padding-right:0;text-align:center;}}}&.", "{opacity:var(", ");}"], _Steps.tokens.activeIndicatorColor, _Steps.classes.verticalOrientation, StepItemDivider, _Steps.tokens.dividerThickness, _Steps.classes.active, StepItemTitle, _Steps.tokens.activeTitleColor, _Steps.classes.inactive, _Steps.tokens.inactiveIndicatorColor, StepItemTitle, _Steps.tokens.inactiveTitleColor, _Steps.classes.simple, _Steps.classes.hasIndicator, _Steps.tokens.activeIndicatorSize, _Steps.tokens.activeIndicatorSize, _Steps.classes.hasIndicator, _Steps.tokens.activeBulletSize, _Steps.tokens.activeBulletSize, _Steps.classes.inactive, _Steps.classes.active, _Steps.tokens.activeIndicatorSize, _Steps.tokens.indicatorSize, _Steps.tokens.dividerThickness, _Steps.tokens.activeIndicatorColor, _Steps.classes.hasIndicator, _Steps.tokens.activeBulletSize, _Steps.tokens.bulletSize, _Steps.classes.verticalOrientation, _Steps.tokens.dividerThickness, _Steps.tokens.activeIndicatorSize, _Steps.tokens.indicatorSize, _Steps.classes.hasIndicator, _Steps.tokens.activeBulletSize, _Steps.tokens.bulletSize, _Steps.classes.inactive, _Steps.tokens.inactiveIndicatorBackground, _Steps.tokens.inactiveIndicatorBackground, _Steps.tokens.inactiveIndicatorBackground, _Steps.classes.disabled, _Steps.tokens.inactiveIndicatorBackground, _Steps.classes.transparentDivider, _Steps.classes.simple, _Steps.classes.verticalOrientation, BulletIndicatorWrapper, _Steps.tokens.activeIndicatorSize, _Steps.tokens.indicatorSize, _Steps.classes.active, BulletIndicatorWrapper, _Steps.tokens.activeIndicatorSize, _Steps.tokens.indicatorSize, _Steps.tokens.activeIndicatorSize, _Steps.tokens.indicatorSize, _Steps.classes.hovered, _Steps.classes.active, StepItemTitle, _Steps.tokens.activeTitleColorHover, BulletIndicator, Bullet, _Steps.tokens.completedIndicatorColorHover, _Steps.tokens.completedIndicatorBackgroundHover, _Steps.classes.inactive, StepItemTitle, _Steps.tokens.inactiveTitleColorHover, BulletIndicator, Bullet, _Steps.tokens.inactiveIndicatorColorHover, _Steps.tokens.inactiveIndicatorBackgroundHover, BulletIndicatorWrapper, _Steps.classes.centered, StepItemContentWrapper, _Steps.tokens.contentSidePadding, _Steps.tokens.contentSidePadding, StepItemTitle, StepItemTitle, StepItemContent, _Steps.classes.disabled, _Steps.tokens.disabledOpacity);

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

@@ -23,7 +23,7 @@ var _TextField2 = /*#__PURE__*/require("./TextField.tokens");
 var _ui = /*#__PURE__*/require("./ui");
 var _hooks2 = /*#__PURE__*/require("./hooks");
 var _Hint = /*#__PURE__*/require("./ui/Hint/Hint");
-var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "textBefore", "textAfter", "placeholder", "leftHelper", "enumerationType", "requiredPlacement", "titleCaption", "hintTrigger", "hintText", "hintView", "hintSize", "hintTargetIcon", "hintPlacement", "hintHasArrow", "hintOffset", "hintWidth", "hintContentLeft", "view", "size", "readOnly", "disabled", "required", "clear", "optional", "hasDivider", "value", "chips", "onChange", "onChangeChips", "onSearch", "onKeyDown"];
+var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "hasInnerLabelPlaceholder", "textBefore", "textAfter", "placeholder", "leftHelper", "enumerationType", "requiredPlacement", "titleCaption", "hintTrigger", "hintText", "hintView", "hintSize", "hintTargetIcon", "hintPlacement", "hintHasArrow", "hintOffset", "hintWidth", "hintContentLeft", "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); }
@@ -48,6 +48,7 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
       contentRight = _ref.contentRight,
       label = _ref.label,
       labelPlacement = _ref.labelPlacement,
+      hasInnerLabelPlaceholder = _ref.hasInnerLabelPlaceholder,
       textBefore = _ref.textBefore,
       textAfter = _ref.textAfter,
       placeholder = _ref.placeholder,
@@ -123,7 +124,7 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
     var hasLabelValue = Boolean(label);
     var hasInnerLabel = size !== 'xs' && labelPlacement === 'inner' && !isChipsVisible && hasLabelValue;
     var hasOuterLabel = labelPlacement === 'outer' && hasLabelValue;
-    var hasPlaceholder = Boolean(placeholder) && !hasInnerLabel;
+    var hasPlaceholder = Boolean(placeholder) && (hasInnerLabelPlaceholder || !hasInnerLabel);
     var innerLabelValue = hasInnerLabel || hasOuterLabel ? label : undefined;
     var innerLabelPlacementValue = labelPlacement === 'inner' && !hasInnerLabel ? undefined : labelPlacement;
     var innerPlaceholderValue = hasPlaceholder ? placeholder : undefined;
@@ -134,6 +135,7 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
     var requiredPlacementClass = requiredPlacement === 'right' ? _TextField2.classes.requiredAlignRight : undefined;
     var labelPlacementClass = innerLabelPlacementValue ? _TextField2.classes["".concat(innerLabelPlacementValue, "LabelPlacement")] : undefined;
     var hasValueClass = hasValue ? _TextField2.classes.hasValue : undefined;
+    var hasInnerLabelPlaceholderClass = hasInnerLabelPlaceholder && placeholderShown && _TextField2.classes.forcePlaceholder;
     var wrapperWithoutLeftContent = !contentLeft && isChipsVisible ? _TextField2.classes.hasEmptyContentLeft : undefined;
     var wrapperWithoutRightContent = !contentRight && isChipsVisible ? _TextField2.classes.hasEmptyContentRight : undefined;
     var hintRef = (0, _hooks.useOutsideClick)(function () {
@@ -342,7 +344,7 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
       "aria-labelledby": labelId,
       "aria-describedby": helperTextId,
       placeholder: innerPlaceholderValue,
-      className: (0, _utils.cx)(hasValueClass),
+      className: (0, _utils.cx)(hasValueClass, hasInnerLabelPlaceholderClass),
       disabled: disabled,
       readOnly: !disabled && readOnly,
       onInput: handleInput,
@@ -351,7 +353,9 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
     }, rest)), hasInnerLabel && /*#__PURE__*/_react["default"].createElement(_TextField.Label, {
       id: labelId,
       htmlFor: innerId
-    }, innerLabelValue, optionalTextNode), placeholderShown && !hasValue && /*#__PURE__*/_react["default"].createElement(_TextField.InputPlaceholder, null, innerPlaceholderValue, hasPlaceholderOptional && optionalTextNode)), textAfter && /*#__PURE__*/_react["default"].createElement(_TextField.StyledTextAfter, null, textAfter)), contentRight && /*#__PURE__*/_react["default"].createElement(_TextField.StyledContentRight, null, contentRight)), leftHelper && /*#__PURE__*/_react["default"].createElement(_TextField.LeftHelper, {
+    }, innerLabelValue, optionalTextNode), placeholderShown && !hasValue && /*#__PURE__*/_react["default"].createElement(_TextField.InputPlaceholder, {
+      hasInnerLabelPlaceholder: hasInnerLabelPlaceholder
+    }, innerPlaceholderValue, hasPlaceholderOptional && optionalTextNode)), textAfter && /*#__PURE__*/_react["default"].createElement(_TextField.StyledTextAfter, null, textAfter)), contentRight && /*#__PURE__*/_react["default"].createElement(_TextField.StyledContentRight, null, contentRight)), leftHelper && /*#__PURE__*/_react["default"].createElement(_TextField.LeftHelper, {
       id: helperTextId
     }, leftHelper));
   });

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

@@ -31,11 +31,14 @@ var InputContainer = exports.InputContainer = /*#__PURE__*/_styledComponents["de
 })(["position:relative;flex:1;min-width:60%;"]);
 var InputPlaceholder = exports.InputPlaceholder = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-g4vxbb-6"
-})(["position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;white-space:nowrap;pointer-events:none;user-select:none;font:inherit;letter-spacing:inherit;line-height:inherit;color:var(", ");"], _TextField.tokens.placeholderColor);
+})(["position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;white-space:nowrap;pointer-events:none;user-select:none;font:inherit;letter-spacing:inherit;line-height:inherit;color:var(", ");padding:", ";"], _TextField.tokens.placeholderColor, function (_ref) {
+  var hasInnerLabelPlaceholder = _ref.hasInnerLabelPlaceholder;
+  return hasInnerLabelPlaceholder ? "var(".concat(_TextField.tokens.contentLabelInnerPadding, ")") : '0';
+});
 var OuterLabelWrapper = exports.OuterLabelWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-g4vxbb-7"
-})(["display:flex;align-items:center;margin-bottom:", ";"], function (_ref) {
-  var isInnerLabel = _ref.isInnerLabel;
+})(["display:flex;align-items:center;margin-bottom:", ";"], function (_ref2) {
+  var isInnerLabel = _ref2.isInnerLabel;
   return isInnerLabel ? "var(".concat(_TextField.tokens.titleCaptionInnerLabelOffset, ")") : "var(".concat(_TextField.tokens.labelOffset, ")");
 });
 var TitleCaption = exports.TitleCaption = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -49,9 +52,9 @@ var Label = exports.Label = /*#__PURE__*/_styledComponents["default"].label.with
 })(["display:inline-flex;"]);
 var StyledContentLeft = exports.StyledContentLeft = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-g4vxbb-11"
-})(["margin:var(", ");color:", ";line-height:0;"], _TextField.tokens.leftContentMargin, function (_ref2) {
-  var isDefaultView = _ref2.isDefaultView,
-    isClear = _ref2.isClear;
+})(["margin:var(", ");color:", ";line-height:0;"], _TextField.tokens.leftContentMargin, function (_ref3) {
+  var isDefaultView = _ref3.isDefaultView,
+    isClear = _ref3.isClear;
   return !isDefaultView && isClear ? "var(".concat(_TextField.tokens.clearColor, ")") : "var(".concat(_TextField.tokens.contentSlotColor, ")");
 });
 var StyledContentRight = exports.StyledContentRight = /*#__PURE__*/_styledComponents["default"].div.withConfig({

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

@@ -7,6 +7,7 @@ exports.tokens = exports.classes = void 0;
 var classes = exports.classes = {
   hasChips: 'has-chips',
   hasValue: 'has-value',
+  forcePlaceholder: 'force-placeholder',
   hasEmptyContentLeft: 'has-empty-content-left',
   hasEmptyContentRight: 'has-empty-content-right',
   innerLabelPlacement: 'label-placement-inner',

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;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.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);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", "{", "{position:relative;display:inline-block;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.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, _TextField2.Input, _TextField.classes.forcePlaceholder, _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/examples/plasma_b2c/components/Steps/Steps.config.js

@@ -13,7 +13,7 @@ var config = exports.config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-primary-hover);", ":solid var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-clear);", ":var(--inverse-text-primary);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--surface-solid-default-hover);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-secondary);", ":0.4;"], _Steps.stepsTokens.activeTitleColor, _Steps.stepsTokens.activeTitleColorHover, _Steps.stepsTokens.activeIndicatorBorder, _Steps.stepsTokens.activeIndicatorColor, _Steps.stepsTokens.activeIndicatorBackground, _Steps.stepsTokens.completedIndicatorColor, _Steps.stepsTokens.completedIndicatorColorHover, _Steps.stepsTokens.completedIndicatorBackground, _Steps.stepsTokens.completedIndicatorBackgroundHover, _Steps.stepsTokens.inactiveTitleColor, _Steps.stepsTokens.inactiveTitleColorHover, _Steps.stepsTokens.inactiveIndicatorColor, _Steps.stepsTokens.inactiveIndicatorColorHover, _Steps.stepsTokens.inactiveIndicatorBackground, _Steps.stepsTokens.inactiveIndicatorBackgroundHover, _Steps.stepsTokens.contentColor, _Steps.stepsTokens.disabledOpacity)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-primary-hover);", ":solid var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-clear);", ":var(--inverse-text-primary);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--surface-solid-default-hover);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-secondary);", ":var(--surface-accent);", ":0.4;"], _Steps.stepsTokens.activeTitleColor, _Steps.stepsTokens.activeTitleColorHover, _Steps.stepsTokens.activeIndicatorBorder, _Steps.stepsTokens.activeIndicatorColor, _Steps.stepsTokens.activeIndicatorBackground, _Steps.stepsTokens.completedIndicatorColor, _Steps.stepsTokens.completedIndicatorColorHover, _Steps.stepsTokens.completedIndicatorBackground, _Steps.stepsTokens.completedIndicatorBackgroundHover, _Steps.stepsTokens.inactiveTitleColor, _Steps.stepsTokens.inactiveTitleColorHover, _Steps.stepsTokens.inactiveIndicatorColor, _Steps.stepsTokens.inactiveIndicatorColorHover, _Steps.stepsTokens.inactiveIndicatorBackground, _Steps.stepsTokens.inactiveIndicatorBackgroundHover, _Steps.stepsTokens.contentColor, _Steps.stepsTokens.focusColor, _Steps.stepsTokens.disabledOpacity)
     },
     size: {
       l: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":2.25rem;", ":0.5rem;", ":1rem;", ":0.75rem;", ":0.375rem;", ":2rem;", ":1.0625rem;", ":0.75rem;", ":1rem;", ":0.625rem;", ":1.5rem;", ":1.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.125rem;"], _Steps.stepsTokens.indicatorSize, _Steps.stepsTokens.activeIndicatorSize, _Steps.stepsTokens.bulletSize, _Steps.stepsTokens.activeBulletSize, _Steps.stepsTokens.titlePaddingTop, _Steps.stepsTokens.contentPaddingTop, _Steps.stepsTokens.contentSidePadding, _Steps.stepsTokens.contentVerticalPadding, _Steps.stepsTokens.verticalContentPaddingLeft, _Steps.stepsTokens.smallIndicatorIndentHeight, _Steps.stepsTokens.largeIndicatorIndentHeight, _Steps.stepsTokens.smallBulletIndentHeight, _Steps.stepsTokens.largeBulletIndentHeight, _Steps.stepsTokens.indicatorFontFamily, _Steps.stepsTokens.indicatorFontSize, _Steps.stepsTokens.indicatorFontStyle, _Steps.stepsTokens.indicatorFontWeight, _Steps.stepsTokens.indicatorLetterSpacing, _Steps.stepsTokens.indicatorLineHeight, _Steps.stepsTokens.activeIndicatorFontFamily, _Steps.stepsTokens.activeIndicatorFontSize, _Steps.stepsTokens.activeIndicatorFontStyle, _Steps.stepsTokens.activeIndicatorFontWeight, _Steps.stepsTokens.activeIndicatorLetterSpacing, _Steps.stepsTokens.activeIndicatorLineHeight, _Steps.stepsTokens.titleFontFamily, _Steps.stepsTokens.titleFontSize, _Steps.stepsTokens.titleFontStyle, _Steps.stepsTokens.titleFontWeight, _Steps.stepsTokens.titleLetterSpacing, _Steps.stepsTokens.titleLineHeight, _Steps.stepsTokens.contentFontFamily, _Steps.stepsTokens.contentFontSize, _Steps.stepsTokens.contentFontStyle, _Steps.stepsTokens.contentFontWeight, _Steps.stepsTokens.contentLetterSpacing, _Steps.stepsTokens.contentLineHeight, _Steps.stepsTokens.dividerThickness),

package/styled-components/cjs/examples/plasma_b2c/components/Steps/Steps.stories.tsx

@@ -118,7 +118,7 @@ const DefaultStory = (args) => {
     };
 
     return (
-        <div style={{ maxWidth, height: '400px' }}>
+        <div style={{ maxWidth, height: '600px' }}>
             <Steps
                 size={size}
                 items={items}

package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx

@@ -87,6 +87,12 @@ const meta: Meta<typeof TextField> = {
                 type: 'inline-radio',
             },
         },
+        hasInnerLabelPlaceholder: {
+            control: {
+                type: 'boolean',
+            },
+            if: { arg: 'labelPlacement', equal: 'inner' },
+        },
         size: {
             options: sizes,
             control: {
@@ -210,6 +216,7 @@ export const Default: StoryObj<StoryPropsDefault> = {
         view: 'default',
         label: 'Лейбл',
         labelPlacement: 'outer',
+        hasInnerLabelPlaceholder: false,
         titleCaption: 'Подпись к полю',
         textBefore: '',
         textAfter: '',

package/styled-components/cjs/examples/plasma_web/components/Steps/Steps.config.js

@@ -13,7 +13,7 @@ var config = exports.config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-primary-hover);", ":solid var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-clear);", ":var(--inverse-text-primary);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--surface-solid-default-hover);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-secondary);", ":0.4;"], _Steps.stepsTokens.activeTitleColor, _Steps.stepsTokens.activeTitleColorHover, _Steps.stepsTokens.activeIndicatorBorder, _Steps.stepsTokens.activeIndicatorColor, _Steps.stepsTokens.activeIndicatorBackground, _Steps.stepsTokens.completedIndicatorColor, _Steps.stepsTokens.completedIndicatorColorHover, _Steps.stepsTokens.completedIndicatorBackground, _Steps.stepsTokens.completedIndicatorBackgroundHover, _Steps.stepsTokens.inactiveTitleColor, _Steps.stepsTokens.inactiveTitleColorHover, _Steps.stepsTokens.inactiveIndicatorColor, _Steps.stepsTokens.inactiveIndicatorColorHover, _Steps.stepsTokens.inactiveIndicatorBackground, _Steps.stepsTokens.inactiveIndicatorBackgroundHover, _Steps.stepsTokens.contentColor, _Steps.stepsTokens.disabledOpacity)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-primary-hover);", ":solid var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-clear);", ":var(--inverse-text-primary);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--surface-solid-default-hover);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-secondary);", ":var(--surface-accent);", ":0.4;"], _Steps.stepsTokens.activeTitleColor, _Steps.stepsTokens.activeTitleColorHover, _Steps.stepsTokens.activeIndicatorBorder, _Steps.stepsTokens.activeIndicatorColor, _Steps.stepsTokens.activeIndicatorBackground, _Steps.stepsTokens.completedIndicatorColor, _Steps.stepsTokens.completedIndicatorColorHover, _Steps.stepsTokens.completedIndicatorBackground, _Steps.stepsTokens.completedIndicatorBackgroundHover, _Steps.stepsTokens.inactiveTitleColor, _Steps.stepsTokens.inactiveTitleColorHover, _Steps.stepsTokens.inactiveIndicatorColor, _Steps.stepsTokens.inactiveIndicatorColorHover, _Steps.stepsTokens.inactiveIndicatorBackground, _Steps.stepsTokens.inactiveIndicatorBackgroundHover, _Steps.stepsTokens.contentColor, _Steps.stepsTokens.focusColor, _Steps.stepsTokens.disabledOpacity)
     },
     size: {
       l: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":2.25rem;", ":0.5rem;", ":1rem;", ":0.75rem;", ":0.375rem;", ":2rem;", ":1.0625rem;", ":0.75rem;", ":1rem;", ":0.625rem;", ":1.5rem;", ":1.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.125rem;"], _Steps.stepsTokens.indicatorSize, _Steps.stepsTokens.activeIndicatorSize, _Steps.stepsTokens.bulletSize, _Steps.stepsTokens.activeBulletSize, _Steps.stepsTokens.titlePaddingTop, _Steps.stepsTokens.contentPaddingTop, _Steps.stepsTokens.contentSidePadding, _Steps.stepsTokens.contentVerticalPadding, _Steps.stepsTokens.verticalContentPaddingLeft, _Steps.stepsTokens.smallIndicatorIndentHeight, _Steps.stepsTokens.largeIndicatorIndentHeight, _Steps.stepsTokens.smallBulletIndentHeight, _Steps.stepsTokens.largeBulletIndentHeight, _Steps.stepsTokens.indicatorFontFamily, _Steps.stepsTokens.indicatorFontSize, _Steps.stepsTokens.indicatorFontStyle, _Steps.stepsTokens.indicatorFontWeight, _Steps.stepsTokens.indicatorLetterSpacing, _Steps.stepsTokens.indicatorLineHeight, _Steps.stepsTokens.activeIndicatorFontFamily, _Steps.stepsTokens.activeIndicatorFontSize, _Steps.stepsTokens.activeIndicatorFontStyle, _Steps.stepsTokens.activeIndicatorFontWeight, _Steps.stepsTokens.activeIndicatorLetterSpacing, _Steps.stepsTokens.activeIndicatorLineHeight, _Steps.stepsTokens.titleFontFamily, _Steps.stepsTokens.titleFontSize, _Steps.stepsTokens.titleFontStyle, _Steps.stepsTokens.titleFontWeight, _Steps.stepsTokens.titleLetterSpacing, _Steps.stepsTokens.titleLineHeight, _Steps.stepsTokens.contentFontFamily, _Steps.stepsTokens.contentFontSize, _Steps.stepsTokens.contentFontStyle, _Steps.stepsTokens.contentFontWeight, _Steps.stepsTokens.contentLetterSpacing, _Steps.stepsTokens.contentLineHeight, _Steps.stepsTokens.dividerThickness),

package/styled-components/cjs/examples/plasma_web/components/Steps/Steps.stories.tsx

@@ -118,7 +118,7 @@ const DefaultStory = (args) => {
     };
 
     return (
-        <div style={{ maxWidth, height: '400px' }}>
+        <div style={{ maxWidth, height: '600px' }}>
             <Steps
                 size={size}
                 items={items}

package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx

@@ -87,6 +87,12 @@ const meta: Meta<typeof TextField> = {
                 type: 'inline-radio',
             },
         },
+        hasInnerLabelPlaceholder: {
+            control: {
+                type: 'boolean',
+            },
+            if: { arg: 'labelPlacement', equal: 'inner' },
+        },
         size: {
             options: sizes,
             control: {
@@ -210,6 +216,7 @@ export const Default: StoryObj<StoryPropsDefault> = {
         view: 'default',
         label: 'Лейбл',
         labelPlacement: 'outer',
+        hasInnerLabelPlaceholder: false,
         titleCaption: 'Подпись к полю',
         textBefore: '',
         textAfter: '',
@@ -219,11 +226,11 @@ export const Default: StoryObj<StoryPropsDefault> = {
         readOnly: false,
         enableContentLeft: true,
         enableContentRight: true,
-        clear: false,
-        hasDivider: false,
         optional: false,
         required: false,
         requiredPlacement: 'right',
+        clear: false,
+        hasDivider: false,
         hasHint: true,
         hintText: 'Текст подсказки',
         hintTrigger: 'hover',

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

@@ -1,4 +1,4 @@
-var _excluded = ["value", "onChange", "suggestions", "view", "size", "labelPlacement", "disabled", "readOnly", "label", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "onScroll", "listMaxHeight", "listWidth", "portal", "filter", "onSuggestionSelect", "threshold", "renderList", "renderListEnd", "onSearch", "hintText"];
+var _excluded = ["value", "onChange", "suggestions", "view", "size", "labelPlacement", "hasInnerLabelPlaceholder", "disabled", "readOnly", "label", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "onScroll", "listMaxHeight", "listWidth", "portal", "filter", "onSuggestionSelect", "threshold", "renderList", "renderListEnd", "onSearch", "hintText"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -28,6 +28,7 @@ export var autocompleteRoot = function autocompleteRoot(Root) {
       view = _ref.view,
       size = _ref.size,
       labelPlacement = _ref.labelPlacement,
+      hasInnerLabelPlaceholder = _ref.hasInnerLabelPlaceholder,
       disabled = _ref.disabled,
       readOnly = _ref.readOnly,
       label = _ref.label,
@@ -147,6 +148,11 @@ export var autocompleteRoot = function autocompleteRoot(Root) {
         "aria-activedescendant": "".concat(listId, "/").concat(focused),
         "aria-describedby": helperTextId,
         hintText: String(hintText || '')
+      }, labelPlacement === 'inner' ? {
+        labelPlacement: labelPlacement,
+        hasInnerLabelPlaceholder: hasInnerLabelPlaceholder
+      } : {
+        labelPlacement: labelPlacement
       }, rest)),
       preventOverflow: false,
       ref: targetRef,

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

@@ -1,4 +1,4 @@
-var _excluded = ["multiple", "value", "onChange", "isTargetAmount", "targetAmount", "items", "placement", "label", "placeholder", "helperText", "contentLeft", "textBefore", "textAfter", "variant", "listOverflow", "listHeight", "listWidth", "portal", "renderItem", "view", "size", "labelPlacement", "readOnly", "disabled", "alwaysOpened", "filter", "closeAfterSelect", "renderValue"];
+var _excluded = ["multiple", "value", "onChange", "isTargetAmount", "targetAmount", "items", "placement", "label", "placeholder", "helperText", "contentLeft", "textBefore", "textAfter", "variant", "listOverflow", "listHeight", "listWidth", "portal", "renderItem", "view", "size", "labelPlacement", "hasInnerLabelPlaceholder", "readOnly", "disabled", "alwaysOpened", "filter", "closeAfterSelect", "renderValue"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -55,6 +55,7 @@ export var comboboxRoot = function comboboxRoot(Root) {
       view = props.view,
       size = props.size,
       labelPlacement = props.labelPlacement,
+      hasInnerLabelPlaceholder = props.hasInnerLabelPlaceholder,
       _props$readOnly = props.readOnly,
       readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
       _props$disabled = props.disabled,
@@ -368,7 +369,6 @@ export var comboboxRoot = function comboboxRoot(Root) {
           onChange: handleTextValueChange,
           size: size,
           view: view,
-          labelPlacement: labelPlacement,
           disabled: disabled,
           readOnly: readOnly,
           label: label,
@@ -391,6 +391,11 @@ export var comboboxRoot = function comboboxRoot(Root) {
           "aria-controls": "".concat(treeId, "_tree_level_1"),
           "aria-expanded": isCurrentListOpen,
           "aria-activedescendant": activeDescendantItemValue ? getItemId(treeId, activeDescendantItemValue) : ''
+        }, labelPlacement === 'inner' ? {
+          labelPlacement: labelPlacement,
+          hasInnerLabelPlaceholder: hasInnerLabelPlaceholder
+        } : {
+          labelPlacement: labelPlacement
         }, multiple ? {
           enumerationType: 'chip',
           chips: getChips(),

package/styled-components/es/components/DatePicker/SingleDate/SingleDate.js

@@ -1,4 +1,4 @@
-var _excluded = ["className", "opened", "label", "labelPlacement", "placeholder", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "view", "size", "readOnly", "disabled", "name", "defaultDate", "valueError", "valueSuccess", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "onChangeValue", "onCommitDate", "onToggle", "onFocus", "onBlur", "onChange"];
+var _excluded = ["className", "opened", "label", "labelPlacement", "hasInnerLabelPlaceholder", "placeholder", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "view", "size", "readOnly", "disabled", "name", "defaultDate", "valueError", "valueSuccess", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "onChangeValue", "onCommitDate", "onToggle", "onFocus", "onBlur", "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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -28,6 +28,7 @@ export var datePickerRoot = function datePickerRoot(Root) {
       label = _ref.label,
       _ref$labelPlacement = _ref.labelPlacement,
       labelPlacement = _ref$labelPlacement === void 0 ? 'outer' : _ref$labelPlacement,
+      hasInnerLabelPlaceholder = _ref.hasInnerLabelPlaceholder,
       placeholder = _ref.placeholder,
       leftHelper = _ref.leftHelper,
       contentLeft = _ref.contentLeft,
@@ -164,10 +165,14 @@ export var datePickerRoot = function datePickerRoot(Root) {
       },
       onFocus: onFocus,
       onBlur: onBlur,
-      onKeyDown: onKeyDown
-    }, innerLabelPlacement && {
-      label: label,
+      onKeyDown: onKeyDown,
       labelPlacement: labelPlacement
+    }, labelPlacement === 'inner' ? {
+      label: label,
+      labelPlacement: labelPlacement,
+      hasInnerLabelPlaceholder: hasInnerLabelPlaceholder
+    } : {
+      labelPlacement: undefined
     }));
     useEffect(function () {
       setIsInnerOpen(function (prevOpen) {

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

@@ -28,6 +28,13 @@ export var Target = /*#__PURE__*/forwardRef(function (_ref, ref) {
     chipView = _ref.chipView,
     separator = _ref.separator;
   var buttonRef = useForkRef(ref, inputWrapperRef);
+  if (selectProps.renderTarget) {
+    return /*#__PURE__*/React.createElement("div", {
+      ref: inputWrapperRef
+    }, selectProps.renderTarget(Array.isArray(value) ? value.map(function (value) {
+      return valueToItemMap.get(value);
+    }) : valueToItemMap.get(value)));
+  }
   return target === 'button-like' ? /*#__PURE__*/React.createElement(Button, {
     ref: buttonRef,
     opened: opened,

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

@@ -34,9 +34,7 @@ export var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
     "aria-activedescendant": activeDescendantItemValue ? getItemId(treeId, activeDescendantItemValue) : '',
     "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.createElement(Label, null, getButtonLabel({
+  }, /*#__PURE__*/React.createElement(Label, null, getButtonLabel({
     value: value,
     valueToItemMap: valueToItemMap,
     label: label,

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

@@ -1,6 +1,8 @@
 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 = ["view", "size", "orientation", "contentAlign", "hasLine", "hasContent", "hasLoader", "items", "onChange", "current", "status"];
 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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
@@ -12,7 +14,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; }
-import React, { forwardRef, useState, useEffect } from 'react';
+import React, { forwardRef, useState, useEffect, useMemo } from 'react';
 import cls from 'classnames';
 import { classes } from './Steps.tokens';
 import { StepItem } from './ui';
@@ -44,19 +46,33 @@ export var stepsRoot = function stepsRoot(Root) {
       _useState2 = _slicedToArray(_useState, 2),
       prevIndex = _useState2[0],
       setPrevIndex = _useState2[1];
-    var isUncontrolled = current !== undefined;
     var hasIndicator = items.some(function (item) {
       return item.indicator != null;
     });
     var isSimple = items.every(function (item) {
       return !item.title && !item.content;
     });
+    var innerItems = useMemo(function () {
+      var isUncontrolled = current !== undefined;
+      return items.map(function (item, index) {
+        var itemStatus = getItemStatus({
+          isUncontrolled: isUncontrolled,
+          current: current,
+          status: status,
+          index: index,
+          item: item
+        });
+        return _objectSpread(_objectSpread({}, item), {}, {
+          status: itemStatus
+        });
+      });
+    }, [status, current, items]);
     useEffect(function () {
       var calcPrevIndex = function calcPrevIndex() {
         if (current !== undefined) {
           setPrevIndex(current);
         } else {
-          var index = items.findIndex(function (item) {
+          var index = innerItems.findIndex(function (item) {
             return item.status === 'active';
           });
           setPrevIndex(index !== -1 ? index : undefined);
@@ -66,21 +82,14 @@ export var stepsRoot = function stepsRoot(Root) {
       return function () {
         calcPrevIndex();
       };
-    }, [current, items]);
+    }, [current, innerItems]);
     return /*#__PURE__*/React.createElement(Root, _extends({
       size: size,
       view: view,
       ref: outerRef,
       className: cls(_defineProperty(_defineProperty(_defineProperty({}, classes.verticalOrientation, orientation === 'vertical'), classes.simple, isSimple), classes.hasIndicator, hasIndicator))
-    }, rest), items.map(function (item, index) {
-      var itemStatus = getItemStatus({
-        isUncontrolled: isUncontrolled,
-        current: current,
-        status: status,
-        index: index,
-        item: item
-      });
-      var isActive = itemStatus === 'active';
+    }, rest), innerItems.map(function (item, index) {
+      var isActive = item.status === 'active';
       var itemContent = hasContent === 'active' && !isActive || hasContent === 'none' ? '' : item.content;
       var itemContentAlign = orientation === 'horizontal' ? contentAlign : 'left';
       var onClick = onChange ? function () {
@@ -92,14 +101,14 @@ export var stepsRoot = function stepsRoot(Root) {
         title: item.title,
         content: itemContent,
         indicator: item.indicator,
-        status: itemStatus,
+        status: item.status,
         size: size,
         orientation: orientation,
         contentAlign: itemContentAlign,
         hasLine: hasLine,
         hasLoader: hasLoader && isActive,
         onClick: onClick,
-        items: items
+        items: innerItems
       });
     }));
   });

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

@@ -1,3 +1,3 @@
 import { css } from 'styled-components';
 import { classes, tokens } from './Steps.tokens';
-export var base = /*#__PURE__*/css(["display:flex;flex-direction:row;&.", "{align-items:center;&:not(&.", "){&.", "{height:var(", ");}&:not(.", "){height:var(", ");}}&.", "{&.", "{width:var(", ");}&:not(.", "){width:var(", ");}}}&.", "{display:flex;flex-direction:column;justify-content:center;height:100%;&.", "{display:inline-flex;}}"], classes.simple, classes.verticalOrientation, classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.verticalOrientation, classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.verticalOrientation, classes.simple);
+export var base = /*#__PURE__*/css(["display:flex;flex-direction:row;&.", "{align-items:center;&:not(&.", "){&.", "{height:var(", ");}&:not(.", "){height:var(", ");}}&.", "{&.", "{width:var(", ");}&:not(.", "){width:var(", ");}}}&.", "{display:flex;flex-direction:column;justify-content:center;height:100%;}"], classes.simple, classes.verticalOrientation, classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.verticalOrientation, classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.verticalOrientation);

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

@@ -56,6 +56,7 @@ export var tokens = {
   inactiveTitleColor: '--plasma-step-item-inactive-title-color',
   inactiveTitleColorHover: '--plasma-step-item-inactive-title-color-hover',
   contentColor: '--plasma-step-item-content-color',
+  focusColor: '--plasma-step-item-focus-color',
   activeIndicatorBorder: '--plasma-step-item-active-indicator-border',
   activeIndicatorBorderHover: '--plasma-step-item-active-indicator-border-hover',
   activeIndicatorColor: '--plasma-step-item-active-indicator-color',