@salutejs/plasma-new-hope 0.176.1-canary.1517.11571952534.0 → 0.177.0-canary.1500.11571505911.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/Steps/Steps.tokens.js

@@ -56,7 +56,6 @@ 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',

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

@@ -43,7 +43,6 @@ export var StepItem = function StepItem(_ref) {
   var prevItem = items[index - 1];
   var nextItem = items[index + 1];
   var isActive = status === 'active';
-  var isNextActive = (nextItem === null || nextItem === void 0 ? void 0 : nextItem.status) === 'active';
   var isInactive = status === 'inactive';
   var isPrevInactive = prevItem && !(prevItem !== null && prevItem !== void 0 && prevItem.status) || (prevItem === null || prevItem === void 0 ? void 0 : prevItem.status) === 'inactive';
   var isNextInactive = !(nextItem !== null && nextItem !== void 0 && nextItem.status) || (nextItem === null || nextItem === void 0 ? void 0 : nextItem.status) === 'inactive';
@@ -81,31 +80,8 @@ export var StepItem = function StepItem(_ref) {
       setIsHovered(false);
     }
   }, [isDisabled]);
-  if (isSimple) {
-    var _cls;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StepItemStyled, {
-      className: cls((_cls = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_cls, classes.simple, isSimple), classes.active, isActive), classes.hovered, isHovered && !isActive), classes.inactive, isInactive), classes.centered, isCentered), classes.disabled, isDisabled), classes.clickable, clickable && !isActive), classes.hasIndicator, hasIndicator), classes.verticalOrientation, isVertical), "isFirst", isFirst), _defineProperty(_defineProperty(_defineProperty(_cls, "isLast", isLast), "isPrevInactive", isPrevInactive), "isNextInactive", isNextInactive)))
-    }, /*#__PURE__*/React.createElement(BulletIndicatorWrapper, {
-      className: cls(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, classes.verticalOrientation, isVertical), classes.centered, isCentered), classes.simple, isSimple), classes.hasIndicator, hasIndicator)),
-      onClick: onClickHandler,
-      onFocus: onMouseOver,
-      onBlur: onMouseOut,
-      onMouseOver: onMouseOver,
-      onMouseOut: onMouseOut
-    }, hasLoader && /*#__PURE__*/React.createElement(SpinnerStyled, {
-      hasIndicator: hasIndicator
-    }), !hasLoader && /*#__PURE__*/React.createElement(BulletNode, {
-      className: cls(_defineProperty(_defineProperty({}, classes.active, isActive), classes.inactive, isInactive))
-    }, typeof indicator === 'function' && indicator({
-      status: status,
-      item: item,
-      size: size
-    }), typeof indicator !== 'function' && indicator))), !isLast && /*#__PURE__*/React.createElement(StepItemDivider, {
-      className: cls(classes.simple, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, classes.verticalOrientation, isVertical), classes.transparentDivider, !hasLine), classes.active, isActive), classes.inactive, isInactive || isNextInactive))
-    }));
-  }
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StepItemStyled, {
-    className: cls(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, classes.simple, isSimple), classes.active, isActive), classes.hovered, isHovered && !isActive), classes.inactive, isInactive), classes.centered, isCentered), classes.disabled, isDisabled), classes.clickable, clickable && !isActive), classes.hasIndicator, hasIndicator), classes.verticalOrientation, isVertical), "isNextActive", isNextActive))
+    className: cls(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, classes.simple, isSimple), classes.active, isActive), classes.hovered, isHovered && !isActive), classes.inactive, isInactive), classes.centered, isCentered), classes.disabled, isDisabled), classes.clickable, clickable && !isActive), classes.hasIndicator, hasIndicator), classes.verticalOrientation, isVertical))
   }, /*#__PURE__*/React.createElement(BulletIndicatorWrapper, {
     className: cls(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, classes.verticalOrientation, isVertical), classes.centered, isCentered), classes.simple, isSimple), classes.hasIndicator, hasIndicator)),
     onClick: onClickHandler,
@@ -115,7 +91,7 @@ export var StepItem = function StepItem(_ref) {
     onMouseOut: onMouseOut
   }, contentAlign === 'center' && !isSimple && /*#__PURE__*/React.createElement(StepItemDivider, {
     className: cls(_defineProperty(_defineProperty(_defineProperty({}, classes.simple, isSimple), classes.transparentDivider, !hasLine || isFirst), classes.inactive, isInactive || isPrevInactive))
-  }), isVertical && /*#__PURE__*/React.createElement(StepItemDivider, {
+  }), isVertical && (isSimple ? !isFirst : true) && /*#__PURE__*/React.createElement(StepItemDivider, {
     className: cls(classes.indentDivider, _defineProperty(_defineProperty(_defineProperty({}, classes.simple, isSimple), classes.transparentDivider, !hasLine || isFirst), classes.inactive, isInactive || isPrevInactive)),
     indentToken: indentToken
   }), hasLoader && /*#__PURE__*/React.createElement(SpinnerStyled, {
@@ -126,9 +102,9 @@ export var StepItem = function StepItem(_ref) {
     status: status,
     item: item,
     size: size
-  }), typeof indicator !== 'function' && indicator), /*#__PURE__*/React.createElement(StepItemDivider, {
+  }), typeof indicator !== 'function' && indicator), !isSimple && /*#__PURE__*/React.createElement(StepItemDivider, {
     className: cls(_defineProperty(_defineProperty(_defineProperty({}, classes.simple, isSimple), classes.transparentDivider, !hasLine || isLast), classes.inactive, isInactive || isNextInactive))
-  })), /*#__PURE__*/React.createElement(StepItemContentWrapper, {
+  })), !isSimple && /*#__PURE__*/React.createElement(StepItemContentWrapper, {
     className: cls(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, classes.verticalOrientation, isVertical), classes.centered, isCentered), classes.active, isActive), classes.hasIndicator, hasIndicator))
   }, /*#__PURE__*/React.createElement(StepItemTitle, {
     onClick: onClickHandler,
@@ -136,5 +112,7 @@ export var StepItem = function StepItem(_ref) {
     onBlur: onMouseOut,
     onMouseOver: onMouseOver,
     onMouseOut: onMouseOut
-  }, title), content && /*#__PURE__*/React.createElement(StepItemContent, null, typeof content === 'function' ? content(status, index, items) : content))));
+  }, title), content && /*#__PURE__*/React.createElement(StepItemContent, null, typeof content === 'function' ? content(status, index, items) : content))), isSimple && !isLast && /*#__PURE__*/React.createElement(StepItemDivider, {
+    className: cls(classes.simple, _defineProperty(_defineProperty(_defineProperty({}, classes.verticalOrientation, isVertical), classes.transparentDivider, !hasLine), classes.inactive, isInactive || isNextInactive))
+  }));
 };

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

@@ -2,7 +2,6 @@ import styled from 'styled-components';
 import { classes, tokens } from '../../Steps.tokens';
 import { component, mergeConfig } from '../../../../engines';
 import { spinnerConfig, spinnerTokens } from '../../../Spinner';
-import { addFocus } from '../../../../mixins';
 var mergedConfig = /*#__PURE__*/mergeConfig(spinnerConfig);
 var Spinner = /*#__PURE__*/component(mergedConfig);
 export var SpinnerStyled = /*#__PURE__*/styled(Spinner).withConfig({
@@ -19,21 +18,16 @@ export var StepItemContent = /*#__PURE__*/styled.div.withConfig({
 })(["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(", ");"], tokens.contentPaddingTop, tokens.contentSidePadding, tokens.contentFontFamily, tokens.contentFontSize, tokens.contentFontStyle, tokens.contentFontWeight, tokens.contentLetterSpacing, tokens.contentLineHeight, tokens.contentColor);
 export var BulletIndicatorWrapper = /*#__PURE__*/styled.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:0;justify-content:center;&.", "{width:var(", ");min-height:var(", ");}&:not(.", "){width:var(", ");min-height:var(", ");}}&.", "{flex-direction:column;align-items:center;justify-content:center;min-height:100%;&.", "{min-width:var(", ");}&:not(.", "){min-width:var(", ");}}&.", "{justify-content:center;}"], classes.simple, classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.verticalOrientation, tokens.verticalContentPaddingLeft, classes.simple, classes.hasIndicator, tokens.activeIndicatorSize, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, tokens.activeBulletSize, classes.verticalOrientation, classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.centered);
-export var BulletIndicator = /*#__PURE__*/styled.button.withConfig({
+})(["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;}"], classes.simple, classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.verticalOrientation, tokens.verticalContentPaddingLeft, classes.verticalOrientation, classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.centered);
+export var BulletIndicator = /*#__PURE__*/styled.div.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;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(", ");}}}"], tokens.indicatorSize, tokens.indicatorSize, tokens.completedIndicatorColor, tokens.completedIndicatorBackground, tokens.indicatorFontFamily, tokens.indicatorFontSize, tokens.indicatorFontStyle, tokens.indicatorFontWeight, tokens.indicatorLetterSpacing, tokens.indicatorLineHeight, /*#__PURE__*/addFocus({
-  outlineOffset: '-0.1875rem',
-  outlineSize: '0.0625rem',
-  outlineRadius: '50%',
-  outlineColor: /*#__PURE__*/"var(".concat(tokens.focusColor, ")")
-}), classes.active, tokens.activeIndicatorSize, tokens.activeIndicatorSize, tokens.dividerThickness, tokens.activeIndicatorBorder, tokens.activeIndicatorFontFamily, tokens.activeIndicatorFontSize, tokens.activeIndicatorFontStyle, tokens.activeIndicatorFontWeight, tokens.activeIndicatorLetterSpacing, tokens.activeIndicatorLineHeight, tokens.activeIndicatorColor, tokens.activeIndicatorBackground, classes.inactive, tokens.inactiveIndicatorColor, tokens.inactiveIndicatorBackground, classes.simple, tokens.inactiveIndicatorBackground);
+})(["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(", ");}}"], tokens.indicatorSize, tokens.indicatorSize, tokens.completedIndicatorColor, tokens.completedIndicatorBackground, tokens.indicatorFontFamily, tokens.indicatorFontSize, tokens.indicatorFontStyle, tokens.indicatorFontWeight, tokens.indicatorLetterSpacing, tokens.indicatorLineHeight, classes.active, tokens.activeIndicatorSize, tokens.activeIndicatorSize, tokens.dividerThickness, tokens.activeIndicatorBorder, tokens.activeIndicatorFontFamily, tokens.activeIndicatorFontSize, tokens.activeIndicatorFontStyle, tokens.activeIndicatorFontWeight, tokens.activeIndicatorLetterSpacing, tokens.activeIndicatorLineHeight, tokens.activeIndicatorColor, tokens.activeIndicatorBackground, classes.inactive, tokens.inactiveIndicatorColor, tokens.inactiveIndicatorBackground, tokens.inactiveIndicatorBackground);
 export var Bullet = /*#__PURE__*/styled(BulletIndicator).withConfig({
   componentId: "plasma-new-hope__sc-bjma6z-5"
-})(["width:var(", ");height:var(", ");&.", "{width:var(", ");height:var(", ");border:var(", ") var(", ");background:var(", ");}"], tokens.bulletSize, tokens.bulletSize, classes.active, tokens.activeBulletSize, tokens.activeBulletSize, tokens.dividerThickness, tokens.activeIndicatorBorder, tokens.activeIndicatorBackground);
+})(["width:var(", ");height:var(", ");&.", "{width:var(", ");height:var(", ");border:var(", ") var(", ");background-color:var(", ");}"], tokens.bulletSize, tokens.bulletSize, classes.active, tokens.activeBulletSize, tokens.activeBulletSize, tokens.dividerThickness, tokens.activeIndicatorBorder, tokens.activeIndicatorBackground);
 export var StepItemDivider = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-bjma6z-6"
-})(["width:100%;height:var(", ");flex:1;background:var(", ");&.", "{background:var(", ");}&.", "{background:transparent;}&.", "{width:var(", ");height:100%;}&.", "{height:", ";min-height:", ";max-height:", ";&.", "{height:auto;max-height:none;}}"], tokens.dividerThickness, tokens.activeIndicatorColor, classes.inactive, tokens.inactiveIndicatorBackground, classes.transparentDivider, classes.verticalOrientation, tokens.dividerThickness, classes.indentDivider, function (_ref2) {
+})(["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;}}"], tokens.dividerThickness, tokens.activeIndicatorColor, classes.inactive, tokens.inactiveIndicatorBackground, classes.transparentDivider, classes.verticalOrientation, tokens.dividerThickness, classes.indentDivider, function (_ref2) {
   var indentToken = _ref2.indentToken;
   return indentToken || '';
 }, function (_ref3) {
@@ -48,4 +42,4 @@ export var StepItemContentWrapper = /*#__PURE__*/styled.div.withConfig({
 })(["&.", "{", "{padding-top:var(", ");padding-right:0;}", "{padding-top:var(", ");padding-bottom:var(", ");padding-right:0;}}"], classes.verticalOrientation, StepItemTitle, tokens.contentVerticalPadding, StepItemContent, tokens.contentVerticalPadding, tokens.contentVerticalPadding);
 export var StepItemStyled = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-bjma6z-8"
-})(["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;&.", "{min-width:var(", ");}&:not(.", "){min-width:var(", ");}&.", ",&:not(.", "){&:before,&:after{position:absolute;top:0;bottom:0;left:0;content:'';display:flex;align-self:center;width:calc((var(", ") - var(", ")) / 2);height:var(", ");background:var(", ");}&:after{left:auto;right:0;}&.", "{&:before,&:after{width:var(", ");height:calc((var(", ") - var(", ")) / 2);margin:0 auto;align-self:auto;}&:before{top:0;left:0;right:0;}&:after{top:auto;left:0;right:0;bottom:0;margin:0 auto;}}&.isFirst{&:before{display:none;}}&.isLast{&:after{display:none;}}}&.", "{&:after,&:before{background:var(", ");}}&.isPrevInactive{&:before{background:var(", ");}}&.isNextInactive{&:after{background:var(", ");}}}&: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(", ");}"], tokens.activeIndicatorColor, classes.verticalOrientation, StepItemDivider, tokens.dividerThickness, classes.active, StepItemTitle, tokens.activeTitleColor, classes.inactive, tokens.inactiveIndicatorColor, StepItemTitle, tokens.inactiveTitleColor, classes.simple, classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.inactive, classes.active, tokens.activeIndicatorSize, tokens.indicatorSize, tokens.dividerThickness, tokens.activeIndicatorColor, classes.verticalOrientation, tokens.dividerThickness, tokens.activeIndicatorSize, tokens.indicatorSize, classes.inactive, tokens.inactiveIndicatorBackground, tokens.inactiveIndicatorBackground, tokens.inactiveIndicatorBackground, classes.simple, classes.verticalOrientation, BulletIndicatorWrapper, tokens.activeIndicatorSize, tokens.indicatorSize, classes.active, BulletIndicatorWrapper, tokens.activeIndicatorSize, tokens.indicatorSize, tokens.activeIndicatorSize, tokens.indicatorSize, classes.hovered, classes.active, StepItemTitle, tokens.activeTitleColorHover, BulletIndicator, Bullet, tokens.completedIndicatorColorHover, tokens.completedIndicatorBackgroundHover, classes.inactive, StepItemTitle, tokens.inactiveTitleColorHover, BulletIndicator, Bullet, tokens.inactiveIndicatorColorHover, tokens.inactiveIndicatorBackgroundHover, BulletIndicatorWrapper, classes.centered, StepItemContentWrapper, tokens.contentSidePadding, tokens.contentSidePadding, StepItemTitle, StepItemTitle, StepItemContent, classes.disabled, tokens.disabledOpacity);
+})(["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(", ");}"], classes.verticalOrientation, StepItemDivider, tokens.dividerThickness, classes.active, StepItemTitle, tokens.activeTitleColor, classes.inactive, StepItemTitle, tokens.inactiveTitleColor, classes.hovered, classes.active, StepItemTitle, tokens.activeTitleColorHover, BulletIndicator, Bullet, tokens.completedIndicatorColorHover, tokens.completedIndicatorBackgroundHover, classes.inactive, StepItemTitle, tokens.inactiveTitleColorHover, BulletIndicator, Bullet, tokens.inactiveIndicatorColorHover, tokens.inactiveIndicatorBackgroundHover, BulletIndicatorWrapper, classes.centered, StepItemContentWrapper, tokens.contentSidePadding, tokens.contentSidePadding, StepItemTitle, StepItemTitle, StepItemContent, classes.simple, classes.disabled, tokens.disabledOpacity);

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;
@@ -94,11 +103,16 @@ export var horizontalTabItemRoot = function horizontalTabItemRoot(Root) {
       role: role,
       view: view,
       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
@@ -125,6 +139,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    align-items: center;\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';

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

@@ -7,7 +7,7 @@ export var config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/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;"], tokens.activeTitleColor, tokens.activeTitleColorHover, tokens.activeIndicatorBorder, tokens.activeIndicatorColor, tokens.activeIndicatorBackground, tokens.completedIndicatorColor, tokens.completedIndicatorColorHover, tokens.completedIndicatorBackground, tokens.completedIndicatorBackgroundHover, tokens.inactiveTitleColor, tokens.inactiveTitleColorHover, tokens.inactiveIndicatorColor, tokens.inactiveIndicatorColorHover, tokens.inactiveIndicatorBackground, tokens.inactiveIndicatorBackgroundHover, tokens.contentColor, tokens.focusColor, tokens.disabledOpacity)
+      "default": /*#__PURE__*/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;"], tokens.activeTitleColor, tokens.activeTitleColorHover, tokens.activeIndicatorBorder, tokens.activeIndicatorColor, tokens.activeIndicatorBackground, tokens.completedIndicatorColor, tokens.completedIndicatorColorHover, tokens.completedIndicatorBackground, tokens.completedIndicatorBackgroundHover, tokens.inactiveTitleColor, tokens.inactiveTitleColorHover, tokens.inactiveIndicatorColor, tokens.inactiveIndicatorColorHover, tokens.inactiveIndicatorBackground, tokens.inactiveIndicatorBackgroundHover, tokens.contentColor, tokens.disabledOpacity)
     },
     size: {
       l: /*#__PURE__*/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;"], tokens.indicatorSize, tokens.activeIndicatorSize, tokens.bulletSize, tokens.activeBulletSize, tokens.titlePaddingTop, tokens.contentPaddingTop, tokens.contentSidePadding, tokens.contentVerticalPadding, tokens.verticalContentPaddingLeft, tokens.smallIndicatorIndentHeight, tokens.largeIndicatorIndentHeight, tokens.smallBulletIndentHeight, tokens.largeBulletIndentHeight, tokens.indicatorFontFamily, tokens.indicatorFontSize, tokens.indicatorFontStyle, tokens.indicatorFontWeight, tokens.indicatorLetterSpacing, tokens.indicatorLineHeight, tokens.activeIndicatorFontFamily, tokens.activeIndicatorFontSize, tokens.activeIndicatorFontStyle, tokens.activeIndicatorFontWeight, tokens.activeIndicatorLetterSpacing, tokens.activeIndicatorLineHeight, tokens.titleFontFamily, tokens.titleFontSize, tokens.titleFontStyle, tokens.titleFontWeight, tokens.titleLetterSpacing, tokens.titleLineHeight, tokens.contentFontFamily, tokens.contentFontSize, tokens.contentFontStyle, tokens.contentFontWeight, tokens.contentLetterSpacing, tokens.contentLineHeight, tokens.dividerThickness),

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

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