@salutejs/plasma-new-hope 0.197.0-canary.1572.11971256317.0 → 0.197.0-canary.1588.11972699441.0

package/styled-components/es/components/Calendar/CalendarBase/CalendarBase.js

@@ -63,7 +63,7 @@ export var calendarBaseRoot = function calendarBaseRoot(Root) {
       _useState8 = _slicedToArray(_useState7, 2),
       outOfRangeKey = _useState8[0],
       setOutOfRangeKey = _useState8[1];
-    var _useReducer = useReducer(reducer, getInitialState(value, min, type)),
+    var _useReducer = useReducer(reducer, getInitialState(value, type)),
       _useReducer2 = _slicedToArray(_useReducer, 2),
       state = _useReducer2[0],
       dispatch = _useReducer2[1];

package/styled-components/es/components/Calendar/CalendarDouble/CalendarDouble.js

@@ -64,7 +64,7 @@ export var calendarDoubleRoot = function calendarDoubleRoot(Root) {
       _useState8 = _slicedToArray(_useState7, 2),
       outOfRangeKey = _useState8[0],
       setOutOfRangeKey = _useState8[1];
-    var _useReducer = useReducer(reducer, getInitialState(value, min, type, true)),
+    var _useReducer = useReducer(reducer, getInitialState(value, type, true)),
       _useReducer2 = _slicedToArray(_useReducer, 2),
       state = _useReducer2[0],
       dispatch = _useReducer2[1];

package/styled-components/es/components/Calendar/store/reducer.js

@@ -30,8 +30,8 @@ export var sizeMap = {
     "double": [3, 1]
   }
 };
-export var getInitialState = function getInitialState(value, min, calendarState, isDouble) {
-  var initDate = value || min || new Date();
+export var getInitialState = function getInitialState(value, calendarState, isDouble) {
+  var initDate = value || new Date();
   var date = getDateFromValue(initDate);
   var resSize = isDouble ? sizeMap[calendarState]["double"] : sizeMap[calendarState].single;
   return {

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

@@ -73,6 +73,7 @@ export var Target = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onChange: onChange,
     labelToItemMap: labelToItemMap,
     chipView: chipView,
-    requiredProps: requiredProps
+    requiredProps: requiredProps,
+    chipType: selectProps.chipType
   });
 });

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

@@ -33,7 +33,8 @@ export var Textfield = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onChange = _ref.onChange,
     labelToItemMap = _ref.labelToItemMap,
     chipView = _ref.chipView,
-    requiredProps = _ref.requiredProps;
+    requiredProps = _ref.requiredProps,
+    chipType = _ref.chipType;
   var withArrowInverse = opened ? classes.arrowInverse : undefined;
   var getChips = function getChips() {
     if (multiselect && Array.isArray(value)) {
@@ -104,7 +105,8 @@ export var Textfield = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, multiselect ? {
     enumerationType: 'chip',
     chips: getChips(),
-    onChangeChips: handleChipsChange
+    onChangeChips: handleChipsChange,
+    chipType: chipType
   } : {
     enumerationType: 'plain'
   }, {

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

@@ -1,4 +1,4 @@
-var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "textBefore", "textAfter", "placeholder", "leftHelper", "enumerationType", "requiredPlacement", "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", "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", "chipType", "onChange", "onChangeChips", "onSearch", "onKeyDown"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -77,6 +77,8 @@ export var textFieldRoot = function textFieldRoot(Root) {
       hasDivider = _ref.hasDivider,
       outerValue = _ref.value,
       values = _ref.chips,
+      _ref$chipType = _ref.chipType,
+      chipType = _ref$chipType === void 0 ? 'default' : _ref$chipType,
       onChange = _ref.onChange,
       onChangeChips = _ref.onChangeChips,
       onSearch = _ref.onSearch,
@@ -125,8 +127,8 @@ export var textFieldRoot = function textFieldRoot(Root) {
     var requiredPlacementClass = requiredPlacement === 'right' ? classes.requiredAlignRight : undefined;
     var labelPlacementClass = innerLabelPlacementValue ? classes["".concat(innerLabelPlacementValue, "LabelPlacement")] : undefined;
     var hasValueClass = hasValue ? classes.hasValue : undefined;
-    var wrapperWithoutLeftContent = !contentLeft && isChipsVisible ? classes.hasEmptyContentLeft : undefined;
-    var wrapperWithoutRightContent = !contentRight && isChipsVisible ? classes.hasEmptyContentRight : undefined;
+    var wrapperWithoutLeftContent = !contentLeft && isChipsVisible && chipType === 'default' ? classes.hasEmptyContentLeft : undefined;
+    var wrapperWithoutRightContent = !contentRight && isChipsVisible && chipType === 'default' ? classes.hasEmptyContentRight : undefined;
     var hintRef = useOutsideClick(function () {
       setIsHintVisible(false);
     });
@@ -317,7 +319,8 @@ export var textFieldRoot = function textFieldRoot(Root) {
         onClear: function onClear() {
           return onChipClear(chipId, index);
         },
-        onClick: onChipClick
+        onClick: onChipClick,
+        chipType: chipType
         // TODO: #1547
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore

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

@@ -62,7 +62,7 @@ export function App() {
 ```
 
 ### Статус поля
-Статус поля задается с помощью свойства `status`. 
+Статус поля задается с помощью свойства `status`.
 Возможные значения свойства: `success`, `warning` и `error`.
 На отображение TextField так же влияют свойства `clear` и `hasDivider`:
 
@@ -150,7 +150,7 @@ export function App() {
 ```
 
 ### Режим ввода
-С помощью свойства `enumerationType` можно вводить элементы как теги.
+С помощью свойства `enumerationType` можно вводить элементы как теги. Свойство `chipType` изменяет внешний вид чипа.
 По нажатию Enter, после ввода нужного текста, он преобразуется в Chip:
 
 ```tsx live
@@ -166,7 +166,17 @@ export function App() {
                 size="l"
                 enumerationType="chip"
                 helperText="Подсказка снизу"
-                values={["Значение 1"]}
+                chips={["Значение 1"]}
+            />
+
+            <TextField
+                placeholder="Введите значение"
+                defaultValue="Значение"
+                size="l"
+                enumerationType="chip"
+                helperText="Подсказка снизу"
+                chips={["Значение 1"]}
+                chipType="text"
             />
         </div>
     );

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

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react';
-import { StyledChip } from './TextFieldChip.styles';
+import { StyledChip, TextChip } from './TextFieldChip.styles';
 /**
  * Чип, отображающий выбранный элемент
  */
@@ -11,14 +11,23 @@ export var TextFieldChip = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onClick = _ref.onClick,
     onClear = _ref.onClear,
     onKeyDown = _ref.onKeyDown,
-    _forceChipManipulationWithReadonly = _ref._forceChipManipulationWithReadonly;
+    _forceChipManipulationWithReadonly = _ref._forceChipManipulationWithReadonly,
+    chipType = _ref.chipType;
   var onClearHandle = function onClearHandle() {
     return onClear(id);
   };
   var onKeyDownHandle = function onKeyDownHandle(event) {
     onKeyDown === null || onKeyDown === void 0 || onKeyDown(event, id);
   };
-  return /*#__PURE__*/React.createElement(StyledChip, {
+  var handleClick = function handleClick(e) {
+    if (onClick) {
+      onClick(e);
+    }
+    if (onClear) {
+      onClear(id);
+    }
+  };
+  return chipType === 'default' ? /*#__PURE__*/React.createElement(StyledChip, {
     ref: ref,
     tabIndex: -1,
     disabled: disabled,
@@ -32,5 +41,10 @@ export var TextFieldChip = /*#__PURE__*/forwardRef(function (_ref, ref) {
     // @ts-ignore
     ,
     _forceChipManipulationWithReadonly: _forceChipManipulationWithReadonly
-  });
+  }) : /*#__PURE__*/React.createElement(TextChip, {
+    ref: ref,
+    tabIndex: -1,
+    onClick: handleClick,
+    onKeyDown: onKeyDownHandle
+  }, text);
 });

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

@@ -16,4 +16,12 @@ export var StyledChip = /*#__PURE__*/styled(Chip).withConfig({
   outlineSize: '0.0625rem',
   outlineRadius: /*#__PURE__*/"calc(var(".concat(tokens.chipBorderRadius, ") - 0.1rem)"),
   outlineColor: /*#__PURE__*/"var(".concat(tokens.focusColor, ")")
-}), tokens.chipOpacityReadonly);
+}), tokens.chipOpacityReadonly);
+export var TextChip = /*#__PURE__*/styled.button.withConfig({
+  componentId: "plasma-new-hope__sc-1mypbcr-1"
+})(["display:block;flex:none;background:none;border:none;outline:none;padding:0;white-space:nowrap;cursor:pointer;font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");color:var(", ");", " &:after{content:',';}&:last-child{&:after{content:'';}}"], tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.color, /*#__PURE__*/addFocus({
+  outlineOffset: '0.0625rem',
+  outlineSize: '0.0625rem',
+  outlineRadius: /*#__PURE__*/"calc(var(".concat(tokens.chipBorderRadius, ") - 0.1rem)"),
+  outlineColor: /*#__PURE__*/"var(".concat(tokens.focusColor, ")")
+}));

package/styled-components/es/components/Typography/Old/Paragraph/Paragraph.styles.js

@@ -1,4 +1,4 @@
 import { css } from 'styled-components';
 import { classes, tokens } from '../../tokens';
 import { applyHyphens, applyHyphensNormal } from '../../../../mixins';
-export var base = /*#__PURE__*/css(["font-family:var(", ");font-size:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");font-weight:var(", ");margin:0;", ";&.", "{", ";}"], tokens.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight, tokens.typoFontWeight, /*#__PURE__*/String(applyHyphensNormal), /*#__PURE__*/String(classes.typoWithBreakWord), /*#__PURE__*/String(applyHyphens));
+export var base = /*#__PURE__*/css(["font-family:var(", ");font-size:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");font-weight:var(", ");margin:0;&.", "{white-space:nowrap;}", ";&.", "{", ";}"], tokens.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight, tokens.typoFontWeight, classes.typoWithNoWrap, applyHyphensNormal, classes.typoWithBreakWord, applyHyphens);

package/styled-components/es/components/Typography/Old/Subtitle/Subtitle.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["size", "children", "color", "style"];
+var _excluded = ["size", "children", "color", "noWrap", "className", "style"];
 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; }
@@ -11,17 +11,23 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React, { forwardRef } from 'react';
 import { applySpacing } from '../../../../mixins/applySpacing';
 import { base as sizeCSS } from '../../variations/_size/base';
+import { classes } from '../../tokens';
+import { cx } from '../../../../utils';
 import { base } from './Subtitle.styles';
 export var subtitleRoot = function subtitleRoot(Root) {
   return /*#__PURE__*/forwardRef(function (props, ref) {
     var size = props.size,
       children = props.children,
       color = props.color,
+      noWrap = props.noWrap,
+      className = props.className,
       style = props.style,
       rest = _objectWithoutProperties(props, _excluded);
+    var withNoWrap = noWrap ? classes.typoWithNoWrap : undefined;
     return /*#__PURE__*/React.createElement(Root, _extends({
       size: size,
       ref: ref,
+      className: cx(withNoWrap, className),
       style: _objectSpread(_objectSpread({
         color: color
       }, style), applySpacing(rest))

package/styled-components/es/components/Typography/Old/Subtitle/Subtitle.styles.js

@@ -1,4 +1,4 @@
 import { css } from 'styled-components';
-import { tokens } from '../../tokens';
+import { classes, tokens } from '../../tokens';
 import { applyHyphens } from '../../../../mixins';
-export var base = /*#__PURE__*/css(["font-family:var(", ");font-size:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");font-weight:var(", ");", ";"], tokens.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight, tokens.typoFontWeight, /*#__PURE__*/String(applyHyphens));
+export var base = /*#__PURE__*/css(["font-family:var(", ");font-size:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");font-weight:var(", ");&.", "{white-space:nowrap;}", ";"], tokens.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight, tokens.typoFontWeight, classes.typoWithNoWrap, applyHyphens);

package/styled-components/es/components/Typography/Old/TypographyOld.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["size", "children", "breakWord", "color", "className", "style"];
+var _excluded = ["size", "children", "breakWord", "noWrap", "color", "className", "style"];
 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; }
@@ -17,15 +17,17 @@ export var typographyOldRoot = function typographyOldRoot(Root) {
     var size = props.size,
       children = props.children,
       breakWord = props.breakWord,
+      noWrap = props.noWrap,
       color = props.color,
       className = props.className,
       style = props.style,
       rest = _objectWithoutProperties(props, _excluded);
+    var withNoWrap = noWrap ? classes.typoWithNoWrap : undefined;
     var withBreakWord = breakWord ? classes.typoWithBreakWord : undefined;
     return /*#__PURE__*/React.createElement(Root, _extends({
       size: size,
       ref: ref,
-      className: cx(withBreakWord, className),
+      className: cx(withNoWrap, withBreakWord, className),
       style: _objectSpread(_objectSpread({
         color: color
       }, style), applySpacing(rest))

package/styled-components/es/components/Typography/Old/TypographyOld.styles.js

@@ -1,4 +1,4 @@
 import { css } from 'styled-components';
 import { classes, tokens } from '../tokens';
 import { applyHyphens, applyHyphensNormal } from '../../../mixins';
-export var base = /*#__PURE__*/css(["font-family:var(", ");font-size:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");font-weight:var(", ");", ";&.", "{", ";}"], tokens.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight, tokens.typoFontWeight, /*#__PURE__*/String(applyHyphensNormal), /*#__PURE__*/String(classes.typoWithBreakWord), /*#__PURE__*/String(applyHyphens));
+export var base = /*#__PURE__*/css(["font-family:var(", ");font-size:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");font-weight:var(", ");&.", "{white-space:nowrap;}", ";&.", "{", ";}"], tokens.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight, tokens.typoFontWeight, classes.typoWithNoWrap, applyHyphensNormal, classes.typoWithBreakWord, applyHyphens);

package/styled-components/es/components/Typography/Old/Underline/Underline.styles.js

@@ -1,4 +1,4 @@
 import { css } from 'styled-components';
 import { classes, tokens } from '../../tokens';
 import { applyHyphens, applyHyphensNormal } from '../../../../mixins';
-export var base = /*#__PURE__*/css(["font-family:var(", ");font-size:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");font-weight:var(", ");text-transform:uppercase;", ";&.", "{", ";}"], tokens.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight, tokens.typoFontWeight, /*#__PURE__*/String(applyHyphensNormal), /*#__PURE__*/String(classes.typoWithBreakWord), /*#__PURE__*/String(applyHyphens));
+export var base = /*#__PURE__*/css(["font-family:var(", ");font-size:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");font-weight:var(", ");text-transform:uppercase;&.", "{white-space:nowrap;}", ";&.", "{", ";}"], tokens.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight, tokens.typoFontWeight, classes.typoWithNoWrap, applyHyphensNormal, classes.typoWithBreakWord, applyHyphens);

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

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["size", "children", "breakWord", "bold", "color", "className", "style"];
+var _excluded = ["size", "children", "breakWord", "noWrap", "bold", "color", "className", "style"];
 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; }
@@ -18,18 +18,20 @@ export var typographyRootCompose = function typographyRootCompose(defaultArgs) {
       var size = props.size,
         children = props.children,
         breakWord = props.breakWord,
+        noWrap = props.noWrap,
         _props$bold = props.bold,
         bold = _props$bold === void 0 ? defaultArgs === null || defaultArgs === void 0 ? void 0 : defaultArgs.defaultBold : _props$bold,
         color = props.color,
         className = props.className,
         style = props.style,
         rest = _objectWithoutProperties(props, _excluded);
+      var withNoWrap = noWrap ? classes.typoWithNoWrap : undefined;
       var withBreakWord = breakWord ? classes.typoWithBreakWord : undefined;
       var typographyBold = bold ? classes.typoBold : undefined;
       return /*#__PURE__*/React.createElement(Root, _extends({
         size: size,
         ref: ref,
-        className: cx(withBreakWord, typographyBold, className),
+        className: cx(withNoWrap, withBreakWord, typographyBold, className),
         style: _objectSpread(_objectSpread({
           color: color
         }, style), applySpacing(rest)),

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

@@ -1,4 +1,4 @@
 import { css } from 'styled-components';
 import { applyHyphens, applyHyphensNormal } from '../../mixins';
 import { classes, tokens } from './tokens';
-export var base = /*#__PURE__*/css(["font-family:var(", ");font-size:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");font-weight:var(", ");&.", "{font-weight:var(", ");}", ";&.", "{", ";}"], tokens.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight, tokens.typoFontWeight, /*#__PURE__*/String(classes.typoBold), tokens.typoFontWeightBold, /*#__PURE__*/String(applyHyphensNormal), /*#__PURE__*/String(classes.typoWithBreakWord), /*#__PURE__*/String(applyHyphens));
+export var base = /*#__PURE__*/css(["font-family:var(", ");font-size:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");font-weight:var(", ");&.", "{font-weight:var(", ");}&.", "{white-space:nowrap;}", ";&.", "{", ";}"], tokens.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight, tokens.typoFontWeight, classes.typoBold, tokens.typoFontWeightBold, classes.typoWithNoWrap, applyHyphensNormal, classes.typoWithBreakWord, applyHyphens);

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

@@ -19,6 +19,10 @@ title: Typography
 По умолчанию в типографике слова переносятся по слогам.
 Чтобы отключить данный функционал, необходимо установить свойство `breakWord` в значении `false`.
 
+## Пробелы
+По умолчанию в типографике если текст превышает ширину элемента, то слова будут переноситься по пробелам.
+Чтобы запретить перенос по пробелам, необходимо установить свойство `noWrap` в значении `true`.
+
 ## Состав
 
 ### Hero unit

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

@@ -1,4 +1,5 @@
 export var classes = {
+  typoWithNoWrap: 'with-no-wrap',
   typoWithBreakWord: 'with-break-word',
   typoBold: 'typography-bold'
 };

package/styled-components/es/examples/plasma_b2c/components/Select/Select.stories.tsx

@@ -104,6 +104,11 @@ const meta: Meta<StorySelectProps> = {
             },
             if: { arg: 'required', truthy: false },
         },
+        chipType: {
+            control: 'select',
+            options: ['default', 'text'],
+            if: { arg: 'target', eq: 'textfield-like' },
+        },
     },
     args: {
         target: 'textfield-like',
@@ -121,6 +126,7 @@ const meta: Meta<StorySelectProps> = {
         optional: false,
         required: false,
         requiredPlacement: 'right',
+        chipType: 'default',
     },
     parameters: {
         controls: {
@@ -144,6 +150,7 @@ const meta: Meta<StorySelectProps> = {
                 'optional',
                 'required',
                 'requiredPlacement',
+                'chipType',
             ],
         },
     },
@@ -382,7 +389,7 @@ const SingleStory = (args: StorySelectProps) => {
 export const Single: StoryObj<StorySelectProps> = {
     parameters: {
         controls: {
-            exclude: ['chipView', 'isTargetAmount'],
+            exclude: ['chipView', 'isTargetAmount', 'chipType'],
         },
     },
     render: (args) => <SingleStory {...args} />,

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

@@ -134,6 +134,10 @@ const meta: Meta<typeof TextField> = {
             control: { type: 'text' },
             if: { arg: 'hasHint', truthy: true },
         },
+        chipType: {
+            control: 'select',
+            options: ['default', 'text'],
+        },
     },
 };
 
@@ -233,6 +237,11 @@ export const Default: StoryObj<StoryPropsDefault> = {
         hintWidth: '10rem',
         hintHasArrow: true,
     },
+    parameters: {
+        controls: {
+            exclude: ['chipType'],
+        },
+    },
     render: (args) => <StoryDemo {...args} />,
 };
 
@@ -288,6 +297,7 @@ export const Chips: StoryObj<StoryPropsChips> = {
     args: {
         ...Default.args,
         chips: ['1 value', '2 value', '3 value', '4 value'],
+        chipType: 'default',
     },
     render: (args) => <StoryChips {...args} />,
 };

package/styled-components/es/examples/plasma_web/components/Select/Select.stories.tsx

@@ -103,6 +103,11 @@ const meta: Meta<StorySelectProps> = {
             },
             if: { arg: 'required', truthy: false },
         },
+        chipType: {
+            control: 'select',
+            options: ['default', 'text'],
+            if: { arg: 'target', eq: 'textfield-like' },
+        },
     },
     args: {
         target: 'textfield-like',
@@ -120,6 +125,7 @@ const meta: Meta<StorySelectProps> = {
         optional: false,
         required: false,
         requiredPlacement: 'right',
+        chipType: 'default',
     },
     parameters: {
         controls: {
@@ -143,6 +149,7 @@ const meta: Meta<StorySelectProps> = {
                 'optional',
                 'required',
                 'requiredPlacement',
+                'chipType',
             ],
         },
     },
@@ -381,7 +388,7 @@ const SingleStory = (args: StorySelectProps) => {
 export const Single: StoryObj<StorySelectProps> = {
     parameters: {
         controls: {
-            exclude: ['chipView', 'isTargetAmount'],
+            exclude: ['chipView', 'isTargetAmount', 'chipType'],
         },
     },
     render: (args) => <SingleStory {...args} />,

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

@@ -134,6 +134,10 @@ const meta: Meta<typeof TextField> = {
             control: { type: 'text' },
             if: { arg: 'hasHint', truthy: true },
         },
+        chipType: {
+            control: 'select',
+            options: ['default', 'text'],
+        },
     },
 };
 
@@ -233,6 +237,11 @@ export const Default: StoryObj<StoryPropsDefault> = {
         hintWidth: '10rem',
         hintHasArrow: true,
     },
+    parameters: {
+        controls: {
+            exclude: ['chipType'],
+        },
+    },
     render: (args) => <StoryDemo {...args} />,
 };
 
@@ -288,6 +297,7 @@ export const Chips: StoryObj<StoryPropsChips> = {
     args: {
         ...Default.args,
         chips: ['1 value', '2 value', '3 value', '4 value'],
+        chipType: 'default',
     },
     render: (args) => <StoryChips {...args} />,
 };

package/styled-components/es/examples/typograpy/components/Body/Body.stories.tsx

@@ -12,8 +12,16 @@ const meta: Meta<typeof Body> = {
     title: 'typography/Body',
     decorators: [WithTheme],
     component: Body,
-    argTypes: argTypesFromConfig(mergeConfig(bodyConfig, config)),
+    argTypes: {
+        ...argTypesFromConfig(mergeConfig(bodyConfig, config)),
+        color: {
+            control: {
+                type: 'color',
+            },
+        },
+    },
     args: {
+        noWrap: false,
         breakWord: true,
         bold: false,
     },

package/styled-components/es/examples/typograpy/components/Dspl/Dspl.stories.tsx

@@ -12,8 +12,16 @@ const meta: Meta<typeof Dspl> = {
     title: 'typography/Dspl',
     decorators: [WithTheme],
     component: Dspl,
-    argTypes: argTypesFromConfig(mergeConfig(dsplConfig, config)),
+    argTypes: {
+        ...argTypesFromConfig(mergeConfig(dsplConfig, config)),
+        color: {
+            control: {
+                type: 'color',
+            },
+        },
+    },
     args: {
+        noWrap: false,
         breakWord: true,
         bold: false,
     },

package/styled-components/es/examples/typograpy/components/Heading/Heading.stories.tsx

@@ -12,8 +12,16 @@ const meta: Meta<typeof Heading> = {
     title: 'typography/Heading',
     decorators: [WithTheme],
     component: Heading,
-    argTypes: argTypesFromConfig(mergeConfig(dsplConfig, config)),
+    argTypes: {
+        ...argTypesFromConfig(mergeConfig(dsplConfig, config)),
+        color: {
+            control: {
+                type: 'color',
+            },
+        },
+    },
     args: {
+        noWrap: false,
         breakWord: true,
         bold: false,
     },

package/styled-components/es/examples/typograpy/components/Old/Body/Body.stories.tsx

@@ -12,8 +12,16 @@ const meta: Meta<typeof OldBody> = {
     title: 'typography/Old/Body',
     decorators: [WithTheme],
     component: OldBody,
-    argTypes: argTypesFromConfig(mergeConfig(oldBodyConfig, config)),
+    argTypes: {
+        ...argTypesFromConfig(mergeConfig(oldBodyConfig, config)),
+        color: {
+            control: {
+                type: 'color',
+            },
+        },
+    },
     args: {
+        noWrap: false,
         breakWord: true,
     },
 };

package/styled-components/es/examples/typograpy/components/Old/Button/Button.stories.tsx

@@ -12,8 +12,16 @@ const meta: Meta<typeof Button> = {
     title: 'typography/Old/Button',
     decorators: [WithTheme],
     component: Button,
-    argTypes: argTypesFromConfig(mergeConfig(buttonTypographyConfig, config)),
+    argTypes: {
+        ...argTypesFromConfig(mergeConfig(buttonTypographyConfig, config)),
+        color: {
+            control: {
+                type: 'color',
+            },
+        },
+    },
     args: {
+        noWrap: false,
         breakWord: true,
     },
 };

package/styled-components/es/examples/typograpy/components/Old/Caption/Caption.stories.tsx

@@ -12,8 +12,16 @@ const meta: Meta<typeof Caption> = {
     title: 'typography/Old/Caption',
     decorators: [WithTheme],
     component: Caption,
-    argTypes: argTypesFromConfig(mergeConfig(captionConfig, config)),
+    argTypes: {
+        ...argTypesFromConfig(mergeConfig(captionConfig, config)),
+        color: {
+            control: {
+                type: 'color',
+            },
+        },
+    },
     args: {
+        noWrap: false,
         breakWord: true,
     },
 };

package/styled-components/es/examples/typograpy/components/Old/Display/Display.stories.tsx

@@ -12,8 +12,16 @@ const meta: Meta<typeof Display> = {
     title: 'typography/Old/Display',
     decorators: [WithTheme],
     component: Display,
-    argTypes: argTypesFromConfig(mergeConfig(displayConfig, config)),
+    argTypes: {
+        ...argTypesFromConfig(mergeConfig(displayConfig, config)),
+        color: {
+            control: {
+                type: 'color',
+            },
+        },
+    },
     args: {
+        noWrap: false,
         breakWord: true,
     },
 };