@salutejs/plasma-new-hope 0.187.1-canary.1517.11744378817.0 → 0.188.0-canary.1546.11776758496.0

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

@@ -14,7 +14,7 @@ var _base4 = /*#__PURE__*/require("./variations/_transparent/base");
 var _base5 = /*#__PURE__*/require("./variations/_clear/base");
 var _Badge = /*#__PURE__*/require("./Badge.styles");
 var _Badge2 = /*#__PURE__*/require("./Badge.tokens");
-var _excluded = ["children", "className", "text", "contentLeft", "contentRight", "size", "view", "pilled", "transparent", "clear", "maxWidth"];
+var _excluded = ["children", "className", "style", "text", "contentLeft", "contentRight", "size", "view", "customColor", "customBackgroundColor", "pilled", "transparent", "clear", "maxWidth"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -27,13 +27,17 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var badgeRoot = exports.badgeRoot = function badgeRoot(Root) {
   return /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+    var _StyledContentLeft, _StyledContentMain, _StyledContentMain2, _StyledContentRight;
     var children = props.children,
       className = props.className,
+      style = props.style,
       text = props.text,
       contentLeft = props.contentLeft,
       contentRight = props.contentRight,
       size = props.size,
       view = props.view,
+      customColor = props.customColor,
+      customBackgroundColor = props.customBackgroundColor,
       _props$pilled = props.pilled,
       pilled = _props$pilled === void 0 ? false : _props$pilled,
       _props$transparent = props.transparent,
@@ -48,19 +52,25 @@ var badgeRoot = exports.badgeRoot = function badgeRoot(Root) {
     var clearClass = clear ? _Badge2.classes.badgeClear : undefined;
     var truncateClass = maxWidth !== 'auto' ? _Badge2.classes.badgeTruncate : undefined;
     var txt = !text && typeof children === 'string' ? children : text;
+    var iconOnlyClass = !txt && contentLeft ? _Badge2.classes.iconOnly : undefined;
+    var BadgeContent = function BadgeContent() {
+      if (contentLeft) {
+        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, _StyledContentLeft || (_StyledContentLeft = /*#__PURE__*/_react["default"].createElement(_Badge.StyledContentLeft, null, contentLeft)), txt ? _StyledContentMain || (_StyledContentMain = /*#__PURE__*/_react["default"].createElement(_Badge.StyledContentMain, null, txt)) : children);
+      }
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, txt ? _StyledContentMain2 || (_StyledContentMain2 = /*#__PURE__*/_react["default"].createElement(_Badge.StyledContentMain, null, txt)) : children, contentRight && (_StyledContentRight || (_StyledContentRight = /*#__PURE__*/_react["default"].createElement(_Badge.StyledContentRight, null, contentRight))));
+    };
     return /*#__PURE__*/_react["default"].createElement(Root, _extends({
       ref: ref,
-      className: (0, _utils.cx)(pilledClass, transparentClass, clearClass, truncateClass, className),
+      className: (0, _utils.cx)(pilledClass, transparentClass, clearClass, truncateClass, iconOnlyClass, className),
       view: view,
       size: size,
       pilled: pilled,
       transparent: transparent,
-      clear: clear
-    }, rest, {
-      style: _objectSpread(_objectSpread({}, rest.style), {}, {
+      clear: clear,
+      style: _objectSpread(_objectSpread({}, style), {}, _defineProperty(_defineProperty({
         maxWidth: maxWidth
-      })
-    }), contentLeft && /*#__PURE__*/_react["default"].createElement(_Badge.StyledContentLeft, null, contentLeft), txt ? /*#__PURE__*/_react["default"].createElement(_Badge.StyledContentMain, null, txt) : children, contentRight && /*#__PURE__*/_react["default"].createElement(_Badge.StyledContentRight, null, contentRight));
+      }, _Badge2.privateTokens.customBackground, customBackgroundColor), _Badge2.privateTokens.customColor, customColor))
+    }, rest), /*#__PURE__*/_react["default"].createElement(BadgeContent, null));
   });
 };
 var badgeConfig = exports.badgeConfig = {

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

@@ -3,12 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tokens = exports.classes = void 0;
+exports.tokens = exports.privateTokens = exports.classes = void 0;
 var classes = exports.classes = {
   badgePilled: 'badge-pilled',
   badgeTransparent: 'badge-transparent',
   badgeClear: 'badge-clear',
-  badgeTruncate: 'badge-truncate'
+  badgeTruncate: 'badge-truncate',
+  iconOnly: 'badge-icon-only'
+};
+var privateTokens = exports.privateTokens = {
+  customBackground: '--plasma-badge-custom-background',
+  customColor: '--plasma-badge-custom-color'
 };
 var tokens = exports.tokens = {
   background: '--plasma-badge-background',
@@ -16,13 +21,12 @@ var tokens = exports.tokens = {
   backgroundTransparent: '--plasma-badge-background-transparent',
   colorTransparent: '--plasma-badge-color-transparent',
   colorClear: '--plasma-badge-color-clear',
+  backgroundClear: '--plasma-badge-background-clear',
   borderRadius: '--plasma-badge-border-radius',
   pilledBorderRadius: '--plasma-badge-pilled-border-radius',
   height: '--plasma-badge-height',
-  paddingTop: '--plasma-badge-padding-top',
-  paddingRight: '--plasma-badge-padding-right',
-  paddingBottom: '--plasma-badge-padding-bottom',
-  paddingLeft: '--plasma-badge-padding-left',
+  padding: '--plasma-badge-padding',
+  paddingIconOnly: '--plasma-badge-padding-icon-only',
   fontFamily: '--plasma-badge-font-family',
   fontSize: '--plasma-badge-font-size',
   fontStyle: '--plasma-badge-font-style',

package/styled-components/cjs/components/Badge/variations/_clear/base.js

@@ -6,4 +6,4 @@ Object.defineProperty(exports, "__esModule", {
 exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _Badge = /*#__PURE__*/require("../../Badge.tokens");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", "{color:var(", ");background-color:transparent;padding:0;}"], _Badge.classes.badgeClear, _Badge.tokens.colorClear);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", "{color:var(", ",var(", "));background-color:var(", ",var(", "));}"], _Badge.classes.badgeClear, _Badge.privateTokens.customColor, _Badge.tokens.colorClear, _Badge.privateTokens.customBackground, _Badge.tokens.backgroundClear);

package/styled-components/cjs/components/Badge/variations/_size/base.js

@@ -6,4 +6,5 @@ Object.defineProperty(exports, "__esModule", {
 exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _Badge = /*#__PURE__*/require("../../Badge.tokens");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");border-radius:var(", ");height:var(", ");padding-top:var(", ");padding-right:var(", ");padding-bottom:var(", ");padding-left:var(", ");"], _Badge.tokens.fontFamily, _Badge.tokens.fontSize, _Badge.tokens.fontStyle, _Badge.tokens.fontWeight, _Badge.tokens.letterSpacing, _Badge.tokens.lineHeight, _Badge.tokens.borderRadius, _Badge.tokens.height, _Badge.tokens.paddingTop, _Badge.tokens.paddingRight, _Badge.tokens.paddingBottom, _Badge.tokens.paddingLeft);
+var _Badge2 = /*#__PURE__*/require("../../Badge.styles");
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");border-radius:var(", ");height:var(", ");padding:var(", ");&.", "{padding:var(", ");", "{margin:0;}}"], _Badge.tokens.fontFamily, _Badge.tokens.fontSize, _Badge.tokens.fontStyle, _Badge.tokens.fontWeight, _Badge.tokens.letterSpacing, _Badge.tokens.lineHeight, _Badge.tokens.borderRadius, _Badge.tokens.height, _Badge.tokens.padding, _Badge.classes.iconOnly, _Badge.tokens.paddingIconOnly, _Badge2.StyledContentLeft);

package/styled-components/cjs/components/Badge/variations/_transparent/base.js

@@ -6,4 +6,4 @@ Object.defineProperty(exports, "__esModule", {
 exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _Badge = /*#__PURE__*/require("../../Badge.tokens");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", "{color:var(", ");background-color:var(", ");}"], _Badge.classes.badgeTransparent, _Badge.tokens.colorTransparent, _Badge.tokens.backgroundTransparent);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", "{color:var(", ",var(", "));background-color:var(", ",var(", "));}"], _Badge.classes.badgeTransparent, _Badge.privateTokens.customColor, _Badge.tokens.colorTransparent, _Badge.privateTokens.customBackground, _Badge.tokens.backgroundTransparent);

package/styled-components/cjs/components/Badge/variations/_view/base.js

@@ -6,4 +6,4 @@ Object.defineProperty(exports, "__esModule", {
 exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _Badge = /*#__PURE__*/require("../../Badge.tokens");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["color:var(", ");background-color:var(", ");"], _Badge.tokens.color, _Badge.tokens.background);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["color:var(", ",var(", "));background-color:var(", ",var(", "));"], _Badge.privateTokens.customColor, _Badge.tokens.color, _Badge.privateTokens.customBackground, _Badge.tokens.background);

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

@@ -18,8 +18,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-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); }
@@ -55,33 +53,19 @@ var stepsRoot = exports.stepsRoot = function stepsRoot(Root) {
       _useState2 = _slicedToArray(_useState, 2),
       prevIndex = _useState2[0],
       setPrevIndex = _useState2[1];
+    var isUncontrolled = current !== undefined;
     var hasIndicator = items.some(function (item) {
       return item.indicator != null;
     });
     var isSimple = items.every(function (item) {
       return !item.title && !item.content;
     });
-    var innerItems = (0, _react.useMemo)(function () {
-      var isUncontrolled = current !== undefined;
-      return items.map(function (item, index) {
-        var itemStatus = (0, _getItemStatus.getItemStatus)({
-          isUncontrolled: isUncontrolled,
-          current: current,
-          status: status,
-          index: index,
-          item: item
-        });
-        return _objectSpread(_objectSpread({}, item), {}, {
-          status: itemStatus
-        });
-      });
-    }, [status, current, items]);
     (0, _react.useEffect)(function () {
       var calcPrevIndex = function calcPrevIndex() {
         if (current !== undefined) {
           setPrevIndex(current);
         } else {
-          var index = innerItems.findIndex(function (item) {
+          var index = items.findIndex(function (item) {
             return item.status === 'active';
           });
           setPrevIndex(index !== -1 ? index : undefined);
@@ -91,14 +75,21 @@ var stepsRoot = exports.stepsRoot = function stepsRoot(Root) {
       return function () {
         calcPrevIndex();
       };
-    }, [current, innerItems]);
+    }, [current, items]);
     return /*#__PURE__*/_react["default"].createElement(Root, _extends({
       size: size,
       view: view,
       ref: outerRef,
       className: (0, _classnames["default"])(_defineProperty(_defineProperty(_defineProperty({}, _Steps.classes.verticalOrientation, orientation === 'vertical'), _Steps.classes.simple, isSimple), _Steps.classes.hasIndicator, hasIndicator))
-    }, rest), innerItems.map(function (item, index) {
-      var isActive = item.status === 'active';
+    }, rest), items.map(function (item, index) {
+      var itemStatus = (0, _getItemStatus.getItemStatus)({
+        isUncontrolled: isUncontrolled,
+        current: current,
+        status: status,
+        index: index,
+        item: item
+      });
+      var isActive = itemStatus === 'active';
       var itemContent = hasContent === 'active' && !isActive || hasContent === 'none' ? '' : item.content;
       var itemContentAlign = orientation === 'horizontal' ? contentAlign : 'left';
       var onClick = onChange ? function () {
@@ -110,14 +101,14 @@ var stepsRoot = exports.stepsRoot = function stepsRoot(Root) {
         title: item.title,
         content: itemContent,
         indicator: item.indicator,
-        status: item.status,
+        status: itemStatus,
         size: size,
         orientation: orientation,
         contentAlign: itemContentAlign,
         hasLine: hasLine,
         hasLoader: hasLoader && isActive,
         onClick: onClick,
-        items: innerItems
+        items: items
       });
     }));
   });

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

@@ -6,4 +6,4 @@ Object.defineProperty(exports, "__esModule", {
 exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _Steps = /*#__PURE__*/require("./Steps.tokens");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["display:flex;flex-direction:row;&.", "{align-items:center;&:not(&.", "){&.", "{height:var(", ");}&:not(.", "){height:var(", ");}}&.", "{&.", "{width:var(", ");}&:not(.", "){width:var(", ");}}}&.", "{display:flex;flex-direction:column;justify-content:center;height:100%;}"], _Steps.classes.simple, _Steps.classes.verticalOrientation, _Steps.classes.hasIndicator, _Steps.tokens.activeIndicatorSize, _Steps.classes.hasIndicator, _Steps.tokens.activeBulletSize, _Steps.classes.verticalOrientation, _Steps.classes.hasIndicator, _Steps.tokens.activeIndicatorSize, _Steps.classes.hasIndicator, _Steps.tokens.activeBulletSize, _Steps.classes.verticalOrientation);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["display:flex;flex-direction:row;&.", "{align-items:center;&:not(&.", "){&.", "{height:var(", ");}&:not(.", "){height:var(", ");}}&.", "{&.", "{width:var(", ");}&:not(.", "){width:var(", ");}}}&.", "{display:flex;flex-direction:column;justify-content:center;height:100%;&.", "{display:inline-flex;}}"], _Steps.classes.simple, _Steps.classes.verticalOrientation, _Steps.classes.hasIndicator, _Steps.tokens.activeIndicatorSize, _Steps.classes.hasIndicator, _Steps.tokens.activeBulletSize, _Steps.classes.verticalOrientation, _Steps.classes.hasIndicator, _Steps.tokens.activeIndicatorSize, _Steps.classes.hasIndicator, _Steps.tokens.activeBulletSize, _Steps.classes.verticalOrientation, _Steps.classes.simple);

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

@@ -62,7 +62,6 @@ var tokens = exports.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/cjs/components/Steps/ui/StepItem/StepItem.js

@@ -51,7 +51,6 @@ var StepItem = exports.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';
@@ -89,31 +88,8 @@ var StepItem = exports.StepItem = function StepItem(_ref) {
       setIsHovered(false);
     }
   }, [isDisabled]);
-  if (isSimple) {
-    var _cls;
-    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemStyled, {
-      className: (0, _classnames["default"])((_cls = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_cls, _Steps.classes.simple, isSimple), _Steps.classes.active, isActive), _Steps.classes.hovered, isHovered && !isActive), _Steps.classes.inactive, isInactive), _Steps.classes.centered, isCentered), _Steps.classes.disabled, isDisabled), _Steps.classes.clickable, clickable && !isActive), _Steps.classes.hasIndicator, hasIndicator), _Steps.classes.verticalOrientation, isVertical), "isFirst", isFirst), _defineProperty(_defineProperty(_defineProperty(_cls, "isLast", isLast), "isPrevInactive", isPrevInactive), "isNextInactive", isNextInactive)))
-    }, /*#__PURE__*/_react["default"].createElement(_StepItem.BulletIndicatorWrapper, {
-      className: (0, _classnames["default"])(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, _Steps.classes.verticalOrientation, isVertical), _Steps.classes.centered, isCentered), _Steps.classes.simple, isSimple), _Steps.classes.hasIndicator, hasIndicator)),
-      onClick: onClickHandler,
-      onFocus: onMouseOver,
-      onBlur: onMouseOut,
-      onMouseOver: onMouseOver,
-      onMouseOut: onMouseOut
-    }, hasLoader && /*#__PURE__*/_react["default"].createElement(_StepItem.SpinnerStyled, {
-      hasIndicator: hasIndicator
-    }), !hasLoader && /*#__PURE__*/_react["default"].createElement(BulletNode, {
-      className: (0, _classnames["default"])(_defineProperty(_defineProperty({}, _Steps.classes.active, isActive), _Steps.classes.inactive, isInactive))
-    }, typeof indicator === 'function' && indicator({
-      status: status,
-      item: item,
-      size: size
-    }), typeof indicator !== 'function' && indicator))), !isLast && /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemDivider, {
-      className: (0, _classnames["default"])(_Steps.classes.simple, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, _Steps.classes.verticalOrientation, isVertical), _Steps.classes.transparentDivider, !hasLine), _Steps.classes.active, isActive), _Steps.classes.inactive, isInactive || isNextInactive))
-    }));
-  }
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemStyled, {
-    className: (0, _classnames["default"])(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, _Steps.classes.simple, isSimple), _Steps.classes.active, isActive), _Steps.classes.hovered, isHovered && !isActive), _Steps.classes.inactive, isInactive), _Steps.classes.centered, isCentered), _Steps.classes.disabled, isDisabled), _Steps.classes.clickable, clickable && !isActive), _Steps.classes.hasIndicator, hasIndicator), _Steps.classes.verticalOrientation, isVertical), "isNextActive", isNextActive))
+    className: (0, _classnames["default"])(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, _Steps.classes.simple, isSimple), _Steps.classes.active, isActive), _Steps.classes.hovered, isHovered && !isActive), _Steps.classes.inactive, isInactive), _Steps.classes.centered, isCentered), _Steps.classes.disabled, isDisabled), _Steps.classes.clickable, clickable && !isActive), _Steps.classes.hasIndicator, hasIndicator), _Steps.classes.verticalOrientation, isVertical))
   }, /*#__PURE__*/_react["default"].createElement(_StepItem.BulletIndicatorWrapper, {
     className: (0, _classnames["default"])(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, _Steps.classes.verticalOrientation, isVertical), _Steps.classes.centered, isCentered), _Steps.classes.simple, isSimple), _Steps.classes.hasIndicator, hasIndicator)),
     onClick: onClickHandler,
@@ -123,7 +99,7 @@ var StepItem = exports.StepItem = function StepItem(_ref) {
     onMouseOut: onMouseOut
   }, contentAlign === 'center' && !isSimple && /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemDivider, {
     className: (0, _classnames["default"])(_defineProperty(_defineProperty(_defineProperty({}, _Steps.classes.simple, isSimple), _Steps.classes.transparentDivider, !hasLine || isFirst), _Steps.classes.inactive, isInactive || isPrevInactive))
-  }), isVertical && /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemDivider, {
+  }), isVertical && (isSimple ? !isFirst : true) && /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemDivider, {
     className: (0, _classnames["default"])(_Steps.classes.indentDivider, _defineProperty(_defineProperty(_defineProperty({}, _Steps.classes.simple, isSimple), _Steps.classes.transparentDivider, !hasLine || isFirst), _Steps.classes.inactive, isInactive || isPrevInactive)),
     indentToken: indentToken
   }), hasLoader && /*#__PURE__*/_react["default"].createElement(_StepItem.SpinnerStyled, {
@@ -134,9 +110,9 @@ var StepItem = exports.StepItem = function StepItem(_ref) {
     status: status,
     item: item,
     size: size
-  }), typeof indicator !== 'function' && indicator), /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemDivider, {
+  }), typeof indicator !== 'function' && indicator), !isSimple && /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemDivider, {
     className: (0, _classnames["default"])(_defineProperty(_defineProperty(_defineProperty({}, _Steps.classes.simple, isSimple), _Steps.classes.transparentDivider, !hasLine || isLast), _Steps.classes.inactive, isInactive || isNextInactive))
-  })), /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemContentWrapper, {
+  })), !isSimple && /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemContentWrapper, {
     className: (0, _classnames["default"])(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, _Steps.classes.verticalOrientation, isVertical), _Steps.classes.centered, isCentered), _Steps.classes.active, isActive), _Steps.classes.hasIndicator, hasIndicator))
   }, /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemTitle, {
     onClick: onClickHandler,
@@ -144,5 +120,7 @@ var StepItem = exports.StepItem = function StepItem(_ref) {
     onBlur: onMouseOut,
     onMouseOver: onMouseOver,
     onMouseOut: onMouseOut
-  }, title), content && /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemContent, null, typeof content === 'function' ? content(status, index, items) : content))));
+  }, title), content && /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemContent, null, typeof content === 'function' ? content(status, index, items) : content))), isSimple && !isLast && /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemDivider, {
+    className: (0, _classnames["default"])(_Steps.classes.simple, _defineProperty(_defineProperty(_defineProperty({}, _Steps.classes.verticalOrientation, isVertical), _Steps.classes.transparentDivider, !hasLine), _Steps.classes.inactive, isInactive || isNextInactive))
+  }));
 };

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

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

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

@@ -22,10 +22,10 @@ var config = exports.config = {
       light: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-transparent-card);", ":var(--on-dark-text-primary);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent, _Badge.badgeTokens.colorClear)
     },
     size: {
-      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":1.75rem;", ":0.6875rem;", ":0.6875rem;", ":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);", ":-0.0625rem;", ":0.25rem;", ":0.25rem;", ":-0.0625rem;"], _Badge.badgeTokens.borderRadius, _Badge.badgeTokens.height, _Badge.badgeTokens.paddingRight, _Badge.badgeTokens.paddingLeft, _Badge.badgeTokens.fontFamily, _Badge.badgeTokens.fontSize, _Badge.badgeTokens.fontStyle, _Badge.badgeTokens.fontWeight, _Badge.badgeTokens.letterSpacing, _Badge.badgeTokens.lineHeight, _Badge.badgeTokens.leftContentMarginLeft, _Badge.badgeTokens.leftContentMarginRight, _Badge.badgeTokens.rightContentMarginLeft, _Badge.badgeTokens.rightContentMarginRight),
-      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.375rem;", ":1.5rem;", ":0.5625rem;", ":0.5625rem;", ":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);", ":-0.0625rem;", ":0.1875rem;", ":0.1875rem;", ":-0.0625rem;"], _Badge.badgeTokens.borderRadius, _Badge.badgeTokens.height, _Badge.badgeTokens.paddingRight, _Badge.badgeTokens.paddingLeft, _Badge.badgeTokens.fontFamily, _Badge.badgeTokens.fontSize, _Badge.badgeTokens.fontStyle, _Badge.badgeTokens.fontWeight, _Badge.badgeTokens.letterSpacing, _Badge.badgeTokens.lineHeight, _Badge.badgeTokens.leftContentMarginLeft, _Badge.badgeTokens.leftContentMarginRight, _Badge.badgeTokens.rightContentMarginLeft, _Badge.badgeTokens.rightContentMarginRight),
-      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.375rem;", ":1.25rem;", ":0.4375rem;", ":0.4375rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);", ":-0.0625rem;", ":0.125rem;", ":0.125rem;", ":-0.0625rem;"], _Badge.badgeTokens.borderRadius, _Badge.badgeTokens.height, _Badge.badgeTokens.paddingRight, _Badge.badgeTokens.paddingLeft, _Badge.badgeTokens.fontFamily, _Badge.badgeTokens.fontSize, _Badge.badgeTokens.fontStyle, _Badge.badgeTokens.fontWeight, _Badge.badgeTokens.letterSpacing, _Badge.badgeTokens.lineHeight, _Badge.badgeTokens.leftContentMarginLeft, _Badge.badgeTokens.leftContentMarginRight, _Badge.badgeTokens.rightContentMarginLeft, _Badge.badgeTokens.rightContentMarginRight),
-      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.25rem;", ":1rem;", ":0.25rem;", ":0.25rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);", ":-0.0625rem;", ":0.125rem;", ":0.125rem;", ":-0.0625rem;"], _Badge.badgeTokens.borderRadius, _Badge.badgeTokens.height, _Badge.badgeTokens.paddingRight, _Badge.badgeTokens.paddingLeft, _Badge.badgeTokens.fontFamily, _Badge.badgeTokens.fontSize, _Badge.badgeTokens.fontStyle, _Badge.badgeTokens.fontWeight, _Badge.badgeTokens.letterSpacing, _Badge.badgeTokens.lineHeight, _Badge.badgeTokens.leftContentMarginLeft, _Badge.badgeTokens.leftContentMarginRight, _Badge.badgeTokens.rightContentMarginLeft, _Badge.badgeTokens.rightContentMarginRight)
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":1.75rem;", ":0 0.6875rem;", ":0 0.375rem;", ":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);", ":-0.0625rem;", ":0.25rem;", ":0.25rem;", ":-0.0625rem;"], _Badge.badgeTokens.borderRadius, _Badge.badgeTokens.height, _Badge.badgeTokens.padding, _Badge.badgeTokens.paddingIconOnly, _Badge.badgeTokens.fontFamily, _Badge.badgeTokens.fontSize, _Badge.badgeTokens.fontStyle, _Badge.badgeTokens.fontWeight, _Badge.badgeTokens.letterSpacing, _Badge.badgeTokens.lineHeight, _Badge.badgeTokens.leftContentMarginLeft, _Badge.badgeTokens.leftContentMarginRight, _Badge.badgeTokens.rightContentMarginLeft, _Badge.badgeTokens.rightContentMarginRight),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.375rem;", ":1.5rem;", ":0 0.5625rem;", ":0 0.375rem;", ":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);", ":-0.0625rem;", ":0.1875rem;", ":0.1875rem;", ":-0.0625rem;"], _Badge.badgeTokens.borderRadius, _Badge.badgeTokens.height, _Badge.badgeTokens.padding, _Badge.badgeTokens.paddingIconOnly, _Badge.badgeTokens.fontFamily, _Badge.badgeTokens.fontSize, _Badge.badgeTokens.fontStyle, _Badge.badgeTokens.fontWeight, _Badge.badgeTokens.letterSpacing, _Badge.badgeTokens.lineHeight, _Badge.badgeTokens.leftContentMarginLeft, _Badge.badgeTokens.leftContentMarginRight, _Badge.badgeTokens.rightContentMarginLeft, _Badge.badgeTokens.rightContentMarginRight),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.375rem;", ":1.25rem;", ":0 0.4375rem;", ":0 0.25rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);", ":-0.0625rem;", ":0.125rem;", ":0.125rem;", ":-0.0625rem;"], _Badge.badgeTokens.borderRadius, _Badge.badgeTokens.height, _Badge.badgeTokens.padding, _Badge.badgeTokens.paddingIconOnly, _Badge.badgeTokens.fontFamily, _Badge.badgeTokens.fontSize, _Badge.badgeTokens.fontStyle, _Badge.badgeTokens.fontWeight, _Badge.badgeTokens.letterSpacing, _Badge.badgeTokens.lineHeight, _Badge.badgeTokens.leftContentMarginLeft, _Badge.badgeTokens.leftContentMarginRight, _Badge.badgeTokens.rightContentMarginLeft, _Badge.badgeTokens.rightContentMarginRight),
+      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.25rem;", ":1rem;", ":0 0.25rem;", ":0 0.188rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);", ":-0.0625rem;", ":0.125rem;", ":0.125rem;", ":-0.0625rem;"], _Badge.badgeTokens.borderRadius, _Badge.badgeTokens.height, _Badge.badgeTokens.padding, _Badge.badgeTokens.paddingIconOnly, _Badge.badgeTokens.fontFamily, _Badge.badgeTokens.fontSize, _Badge.badgeTokens.fontStyle, _Badge.badgeTokens.fontWeight, _Badge.badgeTokens.letterSpacing, _Badge.badgeTokens.lineHeight, _Badge.badgeTokens.leftContentMarginLeft, _Badge.badgeTokens.leftContentMarginRight, _Badge.badgeTokens.rightContentMarginLeft, _Badge.badgeTokens.rightContentMarginRight)
     },
     pilled: {
       "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":1.25rem;"], _Badge.badgeTokens.pilledBorderRadius)
@@ -34,7 +34,7 @@ var config = exports.config = {
       "true": /*#__PURE__*/(0, _styledComponents.css)([""])
     },
     clear: {
-      "true": /*#__PURE__*/(0, _styledComponents.css)([""])
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-clear);"], _Badge.badgeTokens.backgroundClear)
     },
     truncate: {
       "true": /*#__PURE__*/(0, _styledComponents.css)([""])

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

@@ -34,6 +34,10 @@ const meta: Meta<typeof Badge> = {
         maxWidth: {
             control: { type: 'text' },
         },
+        text: {
+            control: { type: 'text' },
+            if: { arg: 'enableText', truthy: true },
+        },
         ...disableProps(['contentLeft', 'contentRight']),
     },
 };
@@ -43,6 +47,7 @@ export default meta;
 type StoryProps = ComponentProps<typeof Badge> & {
     enableContentLeft: boolean;
     enableContentRight: boolean;
+    enableText: boolean;
 };
 type Story = StoryObj<StoryProps>;
 
@@ -63,13 +68,14 @@ export const Default: Story = {
         },
         enableContentRight: {
             control: { type: 'boolean' },
-            if: { arg: 'enableContentLeft', truthy: false },
+            if: { arg: 'enableText', truthy: true },
         },
     },
     args: {
-        text: 'Hello Kitty',
         view: 'default',
         size: 'm',
+        enableText: true,
+        text: 'Hello',
         enableContentLeft: false,
         enableContentRight: false,
         clear: false,
@@ -77,13 +83,24 @@ export const Default: Story = {
         transparent: false,
         maxWidth: '',
     },
-    render: ({ enableContentLeft, enableContentRight, size, ...rest }: StoryProps) => {
-        const iconSize = size === 'l' ? '1rem' : '0.75rem';
+    render: ({ enableContentLeft, enableContentRight, enableText, size, ...rest }: StoryProps) => {
+        const iconSize = () => {
+            switch (size) {
+                case 'l':
+                    return '1rem';
+                case 'xs':
+                    return '0.625rem';
+                default:
+                    return '0.75rem';
+            }
+        };
 
         return (
             <Badge
-                contentLeft={enableContentLeft ? <BellIcon width={iconSize} height={iconSize} /> : undefined}
-                contentRight={enableContentRight ? <BellIcon width={iconSize} height={iconSize} /> : undefined}
+                contentLeft={
+                    enableContentLeft || !enableText ? <BellIcon width={iconSize()} height={iconSize()} /> : undefined
+                }
+                contentRight={enableContentRight ? <BellIcon width={iconSize()} height={iconSize()} /> : undefined}
                 size={size}
                 {...rest}
             />

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

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

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

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

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

@@ -22,10 +22,10 @@ var config = exports.config = {
       light: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-transparent-card);", ":var(--on-dark-text-primary);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent, _Badge.badgeTokens.colorClear)
     },
     size: {
-      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":1.75rem;", ":0.6875rem;", ":0.6875rem;", ":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);", ":-0.0625rem;", ":0.25rem;", ":0.25rem;", ":-0.0625rem;"], _Badge.badgeTokens.borderRadius, _Badge.badgeTokens.height, _Badge.badgeTokens.paddingRight, _Badge.badgeTokens.paddingLeft, _Badge.badgeTokens.fontFamily, _Badge.badgeTokens.fontSize, _Badge.badgeTokens.fontStyle, _Badge.badgeTokens.fontWeight, _Badge.badgeTokens.letterSpacing, _Badge.badgeTokens.lineHeight, _Badge.badgeTokens.leftContentMarginLeft, _Badge.badgeTokens.leftContentMarginRight, _Badge.badgeTokens.rightContentMarginLeft, _Badge.badgeTokens.rightContentMarginRight),
-      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.375rem;", ":1.5rem;", ":0.5625rem;", ":0.5625rem;", ":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);", ":-0.0625rem;", ":0.1875rem;", ":0.1875rem;", ":-0.0625rem;"], _Badge.badgeTokens.borderRadius, _Badge.badgeTokens.height, _Badge.badgeTokens.paddingRight, _Badge.badgeTokens.paddingLeft, _Badge.badgeTokens.fontFamily, _Badge.badgeTokens.fontSize, _Badge.badgeTokens.fontStyle, _Badge.badgeTokens.fontWeight, _Badge.badgeTokens.letterSpacing, _Badge.badgeTokens.lineHeight, _Badge.badgeTokens.leftContentMarginLeft, _Badge.badgeTokens.leftContentMarginRight, _Badge.badgeTokens.rightContentMarginLeft, _Badge.badgeTokens.rightContentMarginRight),
-      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.375rem;", ":1.25rem;", ":0.4375rem;", ":0.4375rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);", ":-0.0625rem;", ":0.125rem;", ":0.125rem;", ":-0.0625rem;"], _Badge.badgeTokens.borderRadius, _Badge.badgeTokens.height, _Badge.badgeTokens.paddingRight, _Badge.badgeTokens.paddingLeft, _Badge.badgeTokens.fontFamily, _Badge.badgeTokens.fontSize, _Badge.badgeTokens.fontStyle, _Badge.badgeTokens.fontWeight, _Badge.badgeTokens.letterSpacing, _Badge.badgeTokens.lineHeight, _Badge.badgeTokens.leftContentMarginLeft, _Badge.badgeTokens.leftContentMarginRight, _Badge.badgeTokens.rightContentMarginLeft, _Badge.badgeTokens.rightContentMarginRight),
-      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.25rem;", ":1rem;", ":0.25rem;", ":0.25rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);", ":-0.0625rem;", ":0.125rem;", ":0.125rem;", ":-0.0625rem;"], _Badge.badgeTokens.borderRadius, _Badge.badgeTokens.height, _Badge.badgeTokens.paddingRight, _Badge.badgeTokens.paddingLeft, _Badge.badgeTokens.fontFamily, _Badge.badgeTokens.fontSize, _Badge.badgeTokens.fontStyle, _Badge.badgeTokens.fontWeight, _Badge.badgeTokens.letterSpacing, _Badge.badgeTokens.lineHeight, _Badge.badgeTokens.leftContentMarginLeft, _Badge.badgeTokens.leftContentMarginRight, _Badge.badgeTokens.rightContentMarginLeft, _Badge.badgeTokens.rightContentMarginRight)
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":1.75rem;", ":0 0.6875rem;", ":0 0.375rem;", ":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);", ":-0.0625rem;", ":0.25rem;", ":0.25rem;", ":-0.0625rem;"], _Badge.badgeTokens.borderRadius, _Badge.badgeTokens.height, _Badge.badgeTokens.padding, _Badge.badgeTokens.paddingIconOnly, _Badge.badgeTokens.fontFamily, _Badge.badgeTokens.fontSize, _Badge.badgeTokens.fontStyle, _Badge.badgeTokens.fontWeight, _Badge.badgeTokens.letterSpacing, _Badge.badgeTokens.lineHeight, _Badge.badgeTokens.leftContentMarginLeft, _Badge.badgeTokens.leftContentMarginRight, _Badge.badgeTokens.rightContentMarginLeft, _Badge.badgeTokens.rightContentMarginRight),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.375rem;", ":1.5rem;", ":0 0.5625rem;", ":0 0.375rem;", ":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);", ":-0.0625rem;", ":0.1875rem;", ":0.1875rem;", ":-0.0625rem;"], _Badge.badgeTokens.borderRadius, _Badge.badgeTokens.height, _Badge.badgeTokens.padding, _Badge.badgeTokens.paddingIconOnly, _Badge.badgeTokens.fontFamily, _Badge.badgeTokens.fontSize, _Badge.badgeTokens.fontStyle, _Badge.badgeTokens.fontWeight, _Badge.badgeTokens.letterSpacing, _Badge.badgeTokens.lineHeight, _Badge.badgeTokens.leftContentMarginLeft, _Badge.badgeTokens.leftContentMarginRight, _Badge.badgeTokens.rightContentMarginLeft, _Badge.badgeTokens.rightContentMarginRight),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.375rem;", ":1.25rem;", ":0 0.4375rem;", ":0 0.25rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);", ":-0.0625rem;", ":0.125rem;", ":0.125rem;", ":-0.0625rem;"], _Badge.badgeTokens.borderRadius, _Badge.badgeTokens.height, _Badge.badgeTokens.padding, _Badge.badgeTokens.paddingIconOnly, _Badge.badgeTokens.fontFamily, _Badge.badgeTokens.fontSize, _Badge.badgeTokens.fontStyle, _Badge.badgeTokens.fontWeight, _Badge.badgeTokens.letterSpacing, _Badge.badgeTokens.lineHeight, _Badge.badgeTokens.leftContentMarginLeft, _Badge.badgeTokens.leftContentMarginRight, _Badge.badgeTokens.rightContentMarginLeft, _Badge.badgeTokens.rightContentMarginRight),
+      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.25rem;", ":1rem;", ":0 0.25rem;", ":0 0.188rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);", ":-0.0625rem;", ":0.125rem;", ":0.125rem;", ":-0.0625rem;"], _Badge.badgeTokens.borderRadius, _Badge.badgeTokens.height, _Badge.badgeTokens.padding, _Badge.badgeTokens.paddingIconOnly, _Badge.badgeTokens.fontFamily, _Badge.badgeTokens.fontSize, _Badge.badgeTokens.fontStyle, _Badge.badgeTokens.fontWeight, _Badge.badgeTokens.letterSpacing, _Badge.badgeTokens.lineHeight, _Badge.badgeTokens.leftContentMarginLeft, _Badge.badgeTokens.leftContentMarginRight, _Badge.badgeTokens.rightContentMarginLeft, _Badge.badgeTokens.rightContentMarginRight)
     },
     pilled: {
       "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":1.25rem;"], _Badge.badgeTokens.pilledBorderRadius)
@@ -34,7 +34,7 @@ var config = exports.config = {
       "true": /*#__PURE__*/(0, _styledComponents.css)([""])
     },
     clear: {
-      "true": /*#__PURE__*/(0, _styledComponents.css)([""])
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-clear);"], _Badge.badgeTokens.backgroundClear)
     }
   }
 };