@salutejs/plasma-new-hope 0.178.1-canary.1515.11581730946.0 → 0.179.0-canary.1500.11582881437.0

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

@@ -1,5 +1,11 @@
-var _excluded = ["children", "className", "text", "contentLeft", "contentRight", "size", "view", "pilled", "transparent", "clear"];
+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 = ["children", "className", "text", "contentLeft", "contentRight", "size", "view", "pilled", "transparent", "clear", "maxWidth"];
 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); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { forwardRef } from 'react';
@@ -9,6 +15,7 @@ import { base as sizeCSS } from './variations/_size/base';
 import { base as pilledCSS } from './variations/_pilled/base';
 import { base as transparentCSS } from './variations/_transparent/base';
 import { base as clearCSS } from './variations/_clear/base';
+import { base as truncateCSS } from './variations/_truncate/base';
 import { StyledContentLeft, StyledContentMain, StyledContentRight, base } from './Badge.styles';
 import { classes } from './Badge.tokens';
 export var badgeRoot = function badgeRoot(Root) {
@@ -26,20 +33,28 @@ export var badgeRoot = function badgeRoot(Root) {
       transparent = _props$transparent === void 0 ? false : _props$transparent,
       _props$clear = props.clear,
       clear = _props$clear === void 0 ? false : _props$clear,
+      _props$maxWidth = props.maxWidth,
+      maxWidth = _props$maxWidth === void 0 ? 'auto' : _props$maxWidth,
       rest = _objectWithoutProperties(props, _excluded);
     var pilledClass = pilled ? classes.badgePilled : undefined;
     var transparentClass = transparent ? classes.badgeTransparent : undefined;
     var clearClass = clear ? classes.badgeClear : undefined;
     var txt = !text && typeof children === 'string' ? children : text;
+    var truncate = maxWidth !== 'auto';
     return /*#__PURE__*/React.createElement(Root, _extends({
       ref: ref,
-      className: cx(pilledClass, transparentClass, clearClass, className),
+      className: cx(pilledClass, transparentClass, clearClass, truncate && classes.badgeTruncate, className),
       view: view,
       size: size,
       pilled: pilled,
       transparent: transparent,
-      clear: clear
-    }, rest), contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), txt ? /*#__PURE__*/React.createElement(StyledContentMain, null, txt) : children, contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight));
+      clear: clear,
+      truncate: truncate
+    }, rest, {
+      style: _objectSpread(_objectSpread({}, rest.style), {}, {
+        maxWidth: maxWidth
+      })
+    }), contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), txt ? /*#__PURE__*/React.createElement(StyledContentMain, null, txt) : children, contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight));
   });
 };
 export var badgeConfig = {
@@ -65,6 +80,10 @@ export var badgeConfig = {
     clear: {
       css: clearCSS,
       attrs: true
+    },
+    truncate: {
+      css: truncateCSS,
+      attrs: true
     }
   },
   defaults: {

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

@@ -1,7 +1,8 @@
 export var classes = {
   badgePilled: 'badge-pilled',
   badgeTransparent: 'badge-transparent',
-  badgeClear: 'badge-clear'
+  badgeClear: 'badge-clear',
+  badgeTruncate: 'badge-truncate'
 };
 export var tokens = {
   background: '--plasma-badge-background',

package/styled-components/es/components/Badge/variations/_truncate/base.js

@@ -0,0 +1,4 @@
+import { css } from 'styled-components';
+import { classes } from '../../Badge.tokens';
+import { StyledContentMain } from '../../Badge.styles';
+export var base = /*#__PURE__*/css(["&.", "{max-width:100%;", "{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}}"], classes.badgeTruncate, StyledContentMain);

package/styled-components/es/components/Badge/variations/_truncate/tokens.json

@@ -0,0 +1 @@
+[]

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

@@ -130,7 +130,7 @@ export var popupRoot = function popupRoot(Root) {
       animationInfo: animationInfo,
       setVisible: setVisible
     }, children));
-    if (typeof frame !== 'string' && frame && frame.current && canUseDOM) {
+    if (typeof frame !== 'string' && frame && frame.current) {
       return /*#__PURE__*/React.createElement(Portal, {
         container: frame.current
       }, rootNode);

package/styled-components/es/components/Popup/PopupContext.js

@@ -82,7 +82,7 @@ export var PopupProvider = function PopupProvider(_ref) {
   };
   return /*#__PURE__*/React.createElement(PopupContext.Provider, {
     value: context
-  }, children, canUseDOM && /*#__PURE__*/React.createElement(Portal, {
+  }, children, /*#__PURE__*/React.createElement(Portal, {
     container: document.body
   }, /*#__PURE__*/React.createElement(StyledPortal, {
     id: rootId

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { canUseDOM } from '../../utils';
 /**
  * Вспомогательный компонент. Используется в Popup, Popover.
  * Представляет собой ReactDOM.createPortal() в форме компонента.
@@ -10,9 +9,6 @@ export var Portal = function Portal(_ref) {
     container = _ref.container,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled;
-  if (!canUseDOM) {
-    return null;
-  }
   var portalContainer = typeof container === 'function' ? container() : container;
   return /*#__PURE__*/React.createElement(React.Fragment, null, disabled && children, !disabled && /*#__PURE__*/ReactDOM.createPortal(children, portalContainer));
 };

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

@@ -14,7 +14,8 @@ export var classes = {
   tabsHasTopArrow: 'tabs-has-top-arrow',
   tabsHasBottomArrow: 'tabs-has-bottom-arrow',
   tabsClipScroll: 'tabs-clip-scroll',
-  tabsClipShowAll: 'tabs-clip-show-all'
+  tabsClipShowAll: 'tabs-clip-show-all',
+  tabsTruncate: 'tabs-truncate'
 };
 export var tokens = {
   disabledOpacity: '--plasma-tabs-disabled-opacity',

package/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js

@@ -1,5 +1,11 @@
-var _excluded = ["size", "view", "isActive", "selected", "disabled", "pilled", "children", "value", "contentLeft", "contentRight", "animated", "onIndexChange", "itemIndex", "tabIndex", "className", "onClick"];
+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", "view", "isActive", "selected", "disabled", "pilled", "children", "value", "contentLeft", "contentRight", "animated", "onIndexChange", "itemIndex", "tabIndex", "className", "onClick", "maxItemWidth"];
 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); }
 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, useRef, useContext, useEffect, useCallback } from 'react';
@@ -11,6 +17,7 @@ import { base as viewCSS } from './variations/_view/base';
 import { base as sizeCSS } from './variations/_size/base';
 import { base as pilledCSS } from './variations/_pilled/base';
 import { base as disabledCSS } from './variations/_disabled/base';
+import { base as truncateCSS } from './variations/_truncate/base';
 import { LeftContent, RightContent, StyledContent, TabItemValue, base } from './HorizontalTabItem.styles';
 export var horizontalTabItemRoot = function horizontalTabItemRoot(Root) {
   return /*#__PURE__*/forwardRef(function (props, outerRef) {
@@ -33,11 +40,13 @@ export var horizontalTabItemRoot = function horizontalTabItemRoot(Root) {
       tabIndex = props.tabIndex,
       className = props.className,
       onClick = props.onClick,
+      maxWidth = props.maxItemWidth,
       rest = _objectWithoutProperties(props, _excluded);
     var innerRef = useRef(null);
     var ref = useForkRef(outerRef, innerRef);
     var refs = useContext(TabsContext);
     var role = 'tab';
+    var truncate = maxWidth !== 'auto';
     var pilledAttr = view !== 'clear' && pilled;
     var animatedClass = animated ? classes.tabItemAnimated : undefined;
     var pilledClass = pilledAttr ? classes.tabsPilled : undefined;
@@ -96,11 +105,16 @@ export var horizontalTabItemRoot = function horizontalTabItemRoot(Root) {
       // TODO: убрать каст any, когда будут удалены deprecated props
       ,
       size: size,
+      truncate: truncate,
       onFocus: onItemFocus,
       tabIndex: hasKeyNavigation ? navigationTabIndex : tabIndex,
-      className: cx(pilledClass, selectedClass, animatedClass, className),
+      className: cx(pilledClass, selectedClass, animatedClass, truncate && classes.tabsTruncate, className),
       onClick: handleClick
-    }, rest), /*#__PURE__*/React.createElement(React.Fragment, null, contentLeft && /*#__PURE__*/React.createElement(LeftContent, {
+    }, rest, {
+      style: _objectSpread(_objectSpread({}, rest.style), {}, {
+        maxWidth: maxWidth
+      })
+    }), /*#__PURE__*/React.createElement(React.Fragment, null, contentLeft && /*#__PURE__*/React.createElement(LeftContent, {
       className: classes.tabLeftContent
     }, contentLeft), /*#__PURE__*/React.createElement(StyledContent, {
       className: classes.tabContent
@@ -127,6 +141,9 @@ export var horizontalTabItemConfig = {
     },
     pilled: {
       css: pilledCSS
+    },
+    truncate: {
+      css: truncateCSS
     }
   },
   defaults: {

package/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.js

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { css } from 'styled-components';
 import { addFocus } from '../../../../../mixins';
 import { tokens } from '../../../tokens';
-export var base = /*#__PURE__*/css(["position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;align-items:center;gap:var(", ");padding:var(", ",var(", "));appearance:none;border:none;outline:none;cursor:pointer;-webkit-tap-highlight-color:transparent;&:first-child{margin-left:0;}", ";"], tokens.itemContentGap, tokens.itemPaddingClear, tokens.itemPadding, /*#__PURE__*/addFocus({
+export var base = /*#__PURE__*/css(["position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;align-items:center;white-space:nowrap;gap:var(", ");padding:var(", ",var(", "));appearance:none;border:none;outline:none;cursor:pointer;-webkit-tap-highlight-color:transparent;&:first-child{margin-left:0;}", ";"], tokens.itemContentGap, tokens.itemPaddingClear, tokens.itemPadding, /*#__PURE__*/addFocus({
   outlineSize: '0.063rem',
   outlineOffset: '-0.125rem',
   outlineColor: /*#__PURE__*/"var(".concat(tokens.outlineFocusColor, ")"),

package/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_truncate/base.js

@@ -0,0 +1,4 @@
+import { css } from 'styled-components';
+import { classes } from '../../../../../tokens';
+import { StyledContent, TabItemValue } from '../../HorizontalTabItem.styles';
+export var base = /*#__PURE__*/css(["&.", "{", "{overflow:hidden;text-overflow:ellipsis;}", "{overflow:hidden;text-overflow:ellipsis;}}"], classes.tabsTruncate, StyledContent, TabItemValue);

package/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_truncate/tokens.json

@@ -0,0 +1 @@
+[]

package/styled-components/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js

@@ -1,5 +1,11 @@
-var _excluded = ["size", "view", "selected", "disabled", "children", "value", "contentLeft", "contentRight", "onIndexChange", "itemIndex", "tabIndex", "className", "onClick"];
+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", "view", "selected", "disabled", "children", "value", "contentLeft", "contentRight", "onIndexChange", "itemIndex", "tabIndex", "className", "onClick", "maxItemWidth"];
 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); }
 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, useRef, useContext, useEffect, useCallback } from 'react';
@@ -11,6 +17,7 @@ import { base, LeftContent, RightContent, StyledContent, TabItemValue } from './
 import { base as viewCSS } from './variations/_view/base';
 import { base as sizeCSS } from './variations/_size/base';
 import { base as disabledCSS } from './variations/_disabled/base';
+import { base as truncateCSS } from './variations/_truncate/base';
 export var verticalTabItemRoot = function verticalTabItemRoot(Root) {
   return /*#__PURE__*/forwardRef(function (props, outerRef) {
     var size = props.size,
@@ -27,11 +34,13 @@ export var verticalTabItemRoot = function verticalTabItemRoot(Root) {
       tabIndex = props.tabIndex,
       className = props.className,
       onClick = props.onClick,
+      maxWidth = props.maxItemWidth,
       rest = _objectWithoutProperties(props, _excluded);
     var innerRef = useRef(null);
     var ref = useForkRef(outerRef, innerRef);
     var refs = useContext(TabsContext);
     var role = 'tab';
+    var truncate = maxWidth !== 'auto';
     var selectedClass = selected ? classes.selectedTabsItem : undefined;
     var hasKeyNavigation = itemIndex !== undefined && onIndexChange !== undefined;
     var navigationTabIndex = !disabled && (refs === null || refs === void 0 ? void 0 : refs.current) === itemIndex ? 0 : -1;
@@ -83,11 +92,16 @@ export var verticalTabItemRoot = function verticalTabItemRoot(Root) {
       role: role,
       view: view,
       size: size,
+      truncate: truncate,
       onFocus: onItemFocus,
       tabIndex: hasKeyNavigation ? navigationTabIndex : tabIndex,
-      className: cx(selectedClass, className),
+      className: cx(selectedClass, truncate && classes.tabsTruncate, className),
       onClick: handleClick
-    }, rest), /*#__PURE__*/React.createElement(React.Fragment, null, contentLeft && /*#__PURE__*/React.createElement(LeftContent, {
+    }, rest, {
+      style: _objectSpread(_objectSpread({}, rest.style), {}, {
+        maxWidth: maxWidth
+      })
+    }), /*#__PURE__*/React.createElement(React.Fragment, null, contentLeft && /*#__PURE__*/React.createElement(LeftContent, {
       className: classes.tabLeftContent
     }, contentLeft), /*#__PURE__*/React.createElement(StyledContent, {
       className: classes.tabContent
@@ -111,6 +125,9 @@ export var verticalTabItemConfig = {
     disabled: {
       css: disabledCSS,
       attrs: true
+    },
+    truncate: {
+      css: truncateCSS
     }
   },
   defaults: {

package/styled-components/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js

@@ -4,7 +4,7 @@ import { css } from 'styled-components';
 import styled from 'styled-components';
 import { addFocus } from '../../../../../mixins';
 import { tokens } from '../../../tokens';
-export var base = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    box-sizing: border-box;\n    align-items: center;\n\n    gap: var(", ");\n    padding: var(", ");\n\n    appearance: none;\n    border: none;\n    outline: none;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n\n    ", ";\n"])), tokens.itemContentGap, tokens.itemPaddingOrientationVertical, /*#__PURE__*/addFocus({
+export var base = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    box-sizing: border-box;\n    white-space: nowrap;\n\n    gap: var(", ");\n    padding: var(", ");\n\n    appearance: none;\n    border: none;\n    outline: none;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n\n    ", ";\n"])), tokens.itemContentGap, tokens.itemPaddingOrientationVertical, /*#__PURE__*/addFocus({
   outlineSize: '0.063rem',
   outlineOffset: '-0.125rem',
   outlineColor: /*#__PURE__*/"var(".concat(tokens.outlineFocusColor, ")"),
@@ -16,7 +16,7 @@ export var StyledContent = /*#__PURE__*/styled.div.withConfig({
 })(["display:inline-block;width:fit-content;padding:0 var(", ",var(", "));"], tokens.itemContentPaddingClear, tokens.itemContentPadding);
 export var TabItemValue = /*#__PURE__*/styled.span.withConfig({
   componentId: "plasma-new-hope__sc-1pflgj8-1"
-})(["color:var(", ");"], tokens.itemValueColor);
+})(["white-space:nowrap;color:var(", ");"], tokens.itemValueColor);
 export var RightContent = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-1pflgj8-2"
 })(["display:flex;color:inherit;&:hover{color:inherit;}"]);

package/styled-components/es/components/Tabs/ui/vertical/VerticalTabItem/variations/_truncate/base.js

@@ -0,0 +1,4 @@
+import { css } from 'styled-components';
+import { classes } from '../../../../../tokens';
+import { StyledContent, TabItemValue } from '../../VerticalTabItem.styles';
+export var base = /*#__PURE__*/css(["&.", "{", "{overflow:hidden;text-overflow:ellipsis;}", "{overflow:hidden;text-overflow:ellipsis;}}"], classes.tabsTruncate, StyledContent, TabItemValue);

package/styled-components/es/components/Tabs/ui/vertical/VerticalTabItem/variations/_truncate/tokens.json

@@ -0,0 +1 @@
+[]

package/styled-components/es/examples/plasma_b2c/components/Badge/Badge.config.js

@@ -29,6 +29,9 @@ export var config = {
     },
     clear: {
       "true": /*#__PURE__*/css([""])
+    },
+    truncate: {
+      "true": /*#__PURE__*/css([""])
     }
   }
 };

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

@@ -31,6 +31,9 @@ const meta: Meta<typeof Badge> = {
             control: { type: 'boolean' },
             if: { arg: 'clear', truthy: false },
         },
+        maxWidth: {
+            control: { type: 'text' },
+        },
         ...disableProps(['contentLeft', 'contentRight']),
     },
 };
@@ -64,7 +67,7 @@ export const Default: Story = {
         },
     },
     args: {
-        text: 'Hello',
+        text: 'Hello Kitty',
         view: 'default',
         size: 'm',
         enableContentLeft: false,
@@ -72,6 +75,7 @@ export const Default: Story = {
         clear: false,
         pilled: false,
         transparent: false,
+        maxWidth: '',
     },
     render: ({ enableContentLeft, enableContentRight, size, ...rest }: StoryProps) => {
         const iconSize = size === 'l' ? '1rem' : '0.75rem';