@salutejs/plasma-new-hope 0.195.0-canary.1574.11921374356.0 → 0.195.1-canary.1561.11932328624.0

package/styled-components/cjs/components/Badge/Badge.template-doc.mdx

@@ -52,16 +52,7 @@ export function App() {
 ```
 
 ### Вид badge
-Вид `badge` задается с помощью свойства `view`. Возможные значения свойства `view`:
-
-+ `"primary"` – основной badge;
-+ `"accent"` – бейдж акцентного цвета;
-+ `"positive"` – успешное завершение;
-+ `"warning"` – предупреждение;
-+ `"negative"` – ошибка;
-+ `"dark"` – темный badge;
-+ `"light"` – светлый badge.
-
+Вид `badge` задается с помощью свойства `view`.
 Так же на вид badge влияет свойства `transparent` и `clear`.
 
 ```tsx live 
@@ -72,7 +63,7 @@ export function App() {
     const Badges = ({transparent, clear}) => {
         return (
             <div style=\{{ display: 'flex', gap: '0.5rem' }}>
-                <Badge text="Бейдж" size="l" view="primary" transparent={transparent} clear={clear} />
+                <Badge text="Бейдж" size="l" view="default" transparent={transparent} clear={clear} />
                 <Badge text="Бейдж" size="l" view="accent" transparent={transparent} clear={clear} />
                 <Badge text="Бейдж" size="l" view="positive" transparent={transparent} clear={clear} />
                 <Badge text="Бейдж" size="l" view="warning" transparent={transparent} clear={clear} />
@@ -94,7 +85,8 @@ export function App() {
 ```
 
 ### Иконка слева / справа
-В левой и/или правой части badge можно отобразить иконку:
+В левой или правой части badge можно отобразить иконку. 
+Если же нужен Badge с иконкой без текста, нужно использовать `contentLeft`.
 
 ```tsx live
 import React from 'react';
@@ -107,17 +99,49 @@ export function App() {
             <Badge 
                 text="Бейдж" 
                 size="l"   
-                view="primary" 
+                view="default" 
                 contentLeft={
                     <IconEye color="inherit" size="xs" />
-                } />
+                } 
+            />
             <Badge 
                 text="Бейдж" 
                 size="l"   
-                view="primary" 
+                view="default" 
                 contentRight={
                     <IconEye color="inherit" size="xs" />
-                } />
+                }
+            />
+            <Badge 
+                size="l"   
+                view="default" 
+                contentLeft={
+                    <IconEye color="inherit" size="xs" />
+                } 
+            />
+        </div>
+    );
+}
+```
+
+### Задание цвета текста и фона
+Цвет текста и фона можно задать с помощью свойств 
+`customColor` и `customBackgroundColor` соответственно.
+
+```tsx live
+import React from 'react';
+import { Badge } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <Badge 
+                text="Бейдж" 
+                size="l"   
+                view="default" 
+                customColor="antiquewhite"
+                customBackgroundColor="darkolivegreen" 
+            />
         </div>
     );
 }

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/Select/Select.js

@@ -39,7 +39,7 @@ var selectRoot = exports.selectRoot = function selectRoot(Root) {
     var outerValue = props.value,
       outerOnChange = props.onChange,
       _props$target = props.target,
-      _target = _props$target === void 0 ? 'textfield-like' : _props$target,
+      target = _props$target === void 0 ? 'textfield-like' : _props$target,
       items = props.items,
       _props$placement = props.placement,
       placement = _props$placement === void 0 ? 'bottom' : _props$placement,
@@ -104,7 +104,14 @@ var selectRoot = exports.selectRoot = function selectRoot(Root) {
     var activeDescendantItemValue = ((_getItemByFocused = (0, _useKeyboardNavigation.getItemByFocused)(focusedPath, focusedToValueMap)) === null || _getItemByFocused === void 0 ? void 0 : _getItemByFocused.value.toString()) || '';
     var closeAfterSelect = outerCloseAfterSelect !== null && outerCloseAfterSelect !== void 0 ? outerCloseAfterSelect : !props.multiselect;
     var treeId = (0, _plasmaCore.safeUseId)();
-    var view = _target === 'textfield-like' && disabled ? 'default' : (0, _utils2.getView)(status, outerView);
+    var view = target === 'textfield-like' && disabled ? 'default' : (0, _utils2.getView)(status, outerView);
+
+    // Собираем объект с пропсами для required и прокидываем их напрямую в компонент Textfield.
+    var requiredProps = props.target === 'button-like' ? undefined : {
+      required: props.required,
+      requiredPlacement: props.requiredPlacement,
+      optional: props.optional
+    };
     var targetRef = (0, _hooks.useOutsideClick)(function () {
       if (!isCurrentListOpen) {
         return;
@@ -295,7 +302,6 @@ var selectRoot = exports.selectRoot = function selectRoot(Root) {
       target: function target(referenceRef) {
         return /*#__PURE__*/_react["default"].createElement(_ui.Target, {
           ref: ref,
-          target: _target,
           value: value,
           opened: isCurrentListOpen,
           valueToItemMap: valueToItemMap,
@@ -319,7 +325,8 @@ var selectRoot = exports.selectRoot = function selectRoot(Root) {
           onChange: onChange,
           labelToItemMap: labelToItemMap,
           chipView: chipView,
-          separator: separator
+          separator: separator,
+          requiredProps: requiredProps
         });
       }
     }, /*#__PURE__*/_react["default"].createElement(Root, _extends({

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

@@ -77,7 +77,6 @@ var tokens = exports.tokens = {
   textFieldBorderColorFocus: '--plasma-select-textfield-border-color-focus',
   textFieldPlaceholderColor: '--plasma-select-textfield-placeholder-color',
   textFieldPlaceholderColorFocus: '--plasma-select-textfield-placeholder-color-focus',
-  textFieldOptionalColor: '--plasma-select-textfield-optional-color',
   textFieldHeight: '--plasma-select-textfield-height',
   textFieldBorderWidth: '--plasma-select-textfield-border-width',
   textFieldBorderRadius: '--plasma-select-textfield-border-radius',
@@ -161,6 +160,17 @@ var tokens = exports.tokens = {
   textFieldChipLineHeight: '--plasma-select-textfield-chip-line-height',
   textFieldChipClearContentMarginLeft: '--plasma-select-textfield-chip-clear-content-margin-left',
   textFieldChipClearContentMarginRight: '--plasma-select-textfield-chip-clear-content-margin-right',
+  textFieldIndicatorColor: '--plasma-select-new-textfield-indicator-color',
+  textFieldIndicatorSizeInner: '--plasma-select-new-textfield-indicator-size-inner',
+  textFieldIndicatorSizeOuter: '--plasma-select-new-textfield-indicator-size-outer',
+  textFieldIndicatorLabelPlacementInner: '--plasma-select-new-textfield-indicator-placement-inner',
+  textFieldIndicatorLabelPlacementOuter: '--plasma-select-new-textfield-indicator-placement-outer',
+  textFieldIndicatorLabelPlacementInnerRight: '--plasma-select-new-textfield-indicator-placement-inner-right',
+  textFieldIndicatorLabelPlacementOuterRight: '--plasma-select-new-textfield-indicator-placement-outer-right',
+  textFieldClearIndicatorLabelPlacementInner: '--plasma-select-new-textfield-clear-indicator-placement-inner',
+  textFieldClearIndicatorLabelPlacementInnerRight: '--plasma-select-new-textfield-clear-indicator-placement-inner-right',
+  textFieldClearIndicatorHintInnerRight: '--plasma-select-new-textfield-clear-indicator-hint-placement-inner-right',
+  textFieldOptionalColor: '--plasma-select-new-textfield-optional-color',
   textFieldFocusColor: '--plasma-select-textfield-focus-color',
   disclosureIconColor: '--plasma-select-disclosure-icon-color',
   disclosureIconColorHover: '--plasma-select-disclosure-icon-color-hover'

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

@@ -12,7 +12,6 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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; }
 var Target = exports.Target = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var value = _ref.value,
-    target = _ref.target,
     opened = _ref.opened,
     valueToItemMap = _ref.valueToItemMap,
     label = _ref.label,
@@ -35,7 +34,8 @@ var Target = exports.Target = /*#__PURE__*/(0, _react.forwardRef)(function (_ref
     onChange = _ref.onChange,
     labelToItemMap = _ref.labelToItemMap,
     chipView = _ref.chipView,
-    separator = _ref.separator;
+    separator = _ref.separator,
+    requiredProps = _ref.requiredProps;
   var buttonRef = (0, _plasmaCore.useForkRef)(ref, inputWrapperRef);
   if (selectProps.renderTarget) {
     return /*#__PURE__*/_react["default"].createElement("div", {
@@ -44,7 +44,7 @@ var Target = exports.Target = /*#__PURE__*/(0, _react.forwardRef)(function (_ref
       return valueToItemMap.get(value);
     }) : valueToItemMap.get(value)));
   }
-  return target === 'button-like' ? /*#__PURE__*/_react["default"].createElement(_ui.Button, {
+  return selectProps.target === 'button-like' ? /*#__PURE__*/_react["default"].createElement(_ui.Button, {
     ref: buttonRef,
     opened: opened,
     value: value,
@@ -81,6 +81,7 @@ var Target = exports.Target = /*#__PURE__*/(0, _react.forwardRef)(function (_ref
     renderValue: renderValue,
     onChange: onChange,
     labelToItemMap: labelToItemMap,
-    chipView: chipView
+    chipView: chipView,
+    requiredProps: requiredProps
   });
 });

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

@@ -41,7 +41,8 @@ var Textfield = exports.Textfield = /*#__PURE__*/(0, _react.forwardRef)(function
     renderValue = _ref.renderValue,
     onChange = _ref.onChange,
     labelToItemMap = _ref.labelToItemMap,
-    chipView = _ref.chipView;
+    chipView = _ref.chipView,
+    requiredProps = _ref.requiredProps;
   var withArrowInverse = opened ? _Select.classes.arrowInverse : undefined;
   var getChips = function getChips() {
     if (multiselect && Array.isArray(value)) {
@@ -122,5 +123,5 @@ var Textfield = exports.Textfield = /*#__PURE__*/(0, _react.forwardRef)(function
     // TODO: #1547
     ,
     _forceChipManipulationWithReadonly: true
-  }));
+  }, requiredProps));
 });

package/styled-components/cjs/components/Select/ui/Target/ui/Textfield/Textfield.styles.js

@@ -14,7 +14,7 @@ var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_TextField.textFieldCo
 var TextField = /*#__PURE__*/(0, _engines.component)(mergedConfig);
 var StyledTextField = exports.StyledTextField = /*#__PURE__*/(0, _styledComponents["default"])(TextField).withConfig({
   componentId: "plasma-new-hope__sc-1akl2tk-0"
-})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":", ";", ":", ";", ":var(", ");", ":var(", ");", ":", ";", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");& div.input-wrapper:focus-within{background-color:var(", ");}"], _TextField.textFieldTokens.color, _Select.tokens.textFieldColor, _TextField.textFieldTokens.backgroundColor, _Select.tokens.textFieldBackgroundColor, _TextField.textFieldTokens.borderColor, _Select.tokens.textFieldBorderColor, _TextField.textFieldTokens.placeholderColor, _Select.tokens.textFieldPlaceholderColor, _TextField.textFieldTokens.labelColor, _Select.tokens.textFieldLabelColor, _TextField.textFieldTokens.leftHelperColor, _Select.tokens.textFieldLeftHelperColor, _TextField.textFieldTokens.colorReadOnly, _Select.tokens.textFieldColor, _TextField.textFieldTokens.backgroundColorReadOnly, function (_ref) {
+})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":", ";", ":", ";", ":var(", ");", ":var(", ");", ":", ";", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");& div.input-wrapper:focus-within{background-color:var(", ");}"], _TextField.textFieldTokens.color, _Select.tokens.textFieldColor, _TextField.textFieldTokens.backgroundColor, _Select.tokens.textFieldBackgroundColor, _TextField.textFieldTokens.borderColor, _Select.tokens.textFieldBorderColor, _TextField.textFieldTokens.placeholderColor, _Select.tokens.textFieldPlaceholderColor, _TextField.textFieldTokens.labelColor, _Select.tokens.textFieldLabelColor, _TextField.textFieldTokens.leftHelperColor, _Select.tokens.textFieldLeftHelperColor, _TextField.textFieldTokens.colorReadOnly, _Select.tokens.textFieldColor, _TextField.textFieldTokens.backgroundColorReadOnly, function (_ref) {
   var opened = _ref.opened;
   return opened ? "var(".concat(_Select.tokens.textFieldBackgroundColorFocus, ")") : "var(".concat(_Select.tokens.textFieldBackgroundColor, ")");
 }, _TextField.textFieldTokens.placeholderColorReadOnly, function (_ref2) {
@@ -23,7 +23,7 @@ var StyledTextField = exports.StyledTextField = /*#__PURE__*/(0, _styledComponen
 }, _TextField.textFieldTokens.leftHelperColorReadOnly, _Select.tokens.textFieldLeftHelperColor, _TextField.textFieldTokens.labelColorReadOnly, _Select.tokens.textFieldLabelColor, _TextField.textFieldTokens.borderColorReadOnly, function (_ref3) {
   var opened = _ref3.opened;
   return opened ? "var(".concat(_Select.tokens.textFieldBorderColorFocus, ")") : "var(".concat(_Select.tokens.textFieldBorderColor, ")");
-}, _TextField.textFieldTokens.placeholderColor, _Select.tokens.textFieldPlaceholderColor, _TextField.textFieldTokens.borderColorHover, _Select.tokens.textFieldBorderColorHover, _TextField.textFieldTokens.borderColorFocus, _Select.tokens.textFieldBorderColorFocus, _TextField.textFieldTokens.optionalColor, _Select.tokens.textFieldOptionalColor, _TextField.textFieldTokens.height, _Select.tokens.textFieldHeight, _TextField.textFieldTokens.borderWidth, _Select.tokens.textFieldBorderWidth, _TextField.textFieldTokens.borderRadius, _Select.tokens.textFieldBorderRadius, _TextField.textFieldTokens.padding, _Select.tokens.textFieldPadding, _TextField.textFieldTokens.paddingWithChips, _Select.tokens.textFieldPaddingWithChips, _TextField.textFieldTokens.leftContentMargin, _Select.tokens.textFieldLeftContentMargin, _TextField.textFieldTokens.rightContentMargin, _Select.tokens.textFieldRightContentMargin, _TextField.textFieldTokens.fontFamily, _Select.tokens.textFieldFontFamily, _TextField.textFieldTokens.fontStyle, _Select.tokens.textFieldFontStyle, _TextField.textFieldTokens.fontSize, _Select.tokens.textFieldFontSize, _TextField.textFieldTokens.fontWeight, _Select.tokens.textFieldFontWeight, _TextField.textFieldTokens.letterSpacing, _Select.tokens.textFieldLetterSpacing, _TextField.textFieldTokens.lineHeight, _Select.tokens.textFieldLineHeight, _TextField.textFieldTokens.contentSlotColor, _Select.tokens.textFieldContentSlotColor, _TextField.textFieldTokens.contentSlotColorHover, _Select.tokens.textFieldContentSlotColorHover, _TextField.textFieldTokens.contentSlotColorActive, _Select.tokens.textFieldContentSlotColorActive, _TextField.textFieldTokens.contentSlotRightColor, _Select.tokens.textFieldContentSlotRightColor, _TextField.textFieldTokens.contentSlotRightColorHover, _Select.tokens.textFieldContentSlotRightColorHover, _TextField.textFieldTokens.contentSlotRightColorActive, _Select.tokens.textFieldContentSlotRightColorActive, _TextField.textFieldTokens.labelOffset, _Select.tokens.textFieldLabelOffset, _TextField.textFieldTokens.labelFontFamily, _Select.tokens.textFieldLabelFontFamily, _TextField.textFieldTokens.labelFontStyle, _Select.tokens.textFieldLabelFontStyle, _TextField.textFieldTokens.labelFontSize, _Select.tokens.textFieldLabelFontSize, _TextField.textFieldTokens.labelFontWeight, _Select.tokens.textFieldLabelFontWeight, _TextField.textFieldTokens.labelLetterSpacing, _Select.tokens.textFieldLabelLetterSpacing, _TextField.textFieldTokens.labelLineHeight, _Select.tokens.textFieldLabelLineHeight, _TextField.textFieldTokens.labelInnerFontFamily, _Select.tokens.textFieldLabelInnerFontFamily, _TextField.textFieldTokens.labelInnerFontStyle, _Select.tokens.textFieldLabelInnerFontStyle, _TextField.textFieldTokens.labelInnerFontSize, _Select.tokens.textFieldLabelInnerFontSize, _TextField.textFieldTokens.labelInnerFontWeight, _Select.tokens.textFieldLabelInnerFontWeight, _TextField.textFieldTokens.labelInnerLetterSpacing, _Select.tokens.textFieldLabelInnerLetterSpacing, _TextField.textFieldTokens.labelInnerLineHeight, _Select.tokens.textFieldLabelInnerLineHeight, _TextField.textFieldTokens.labelInnerPadding, _Select.tokens.textFieldLabelInnerPadding, _TextField.textFieldTokens.contentLabelInnerPadding, _Select.tokens.textFieldContentLabelInnerPadding, _TextField.textFieldTokens.titleCaptionColor, _Select.tokens.textFieldTitleCaptionColor, _TextField.textFieldTokens.titleCaptionInnerLabelOffset, _Select.tokens.textFieldTitleCaptionInnerLabelOffset, _TextField.textFieldTokens.titleCaptionFontFamily, _Select.tokens.textFieldTitleCaptionFontFamily, _TextField.textFieldTokens.titleCaptionFontStyle, _Select.tokens.textFieldTitleCaptionFontStyle, _TextField.textFieldTokens.titleCaptionFontSize, _Select.tokens.textFieldTitleCaptionFontSize, _TextField.textFieldTokens.titleCaptionFontWeight, _Select.tokens.textFieldTitleCaptionFontWeight, _TextField.textFieldTokens.titleCaptionLetterSpacing, _Select.tokens.textFieldTitleCaptionLetterSpacing, _TextField.textFieldTokens.titleCaptionLineHeight, _Select.tokens.textFieldTitleCaptionLineHeight, _TextField.textFieldTokens.leftHelperOffset, _Select.tokens.textFieldLeftHelperOffset, _TextField.textFieldTokens.leftHelperFontFamily, _Select.tokens.textFieldLeftHelperFontFamily, _TextField.textFieldTokens.leftHelperFontStyle, _Select.tokens.textFieldLeftHelperFontStyle, _TextField.textFieldTokens.leftHelperFontSize, _Select.tokens.textFieldLeftHelperFontSize, _TextField.textFieldTokens.leftHelperFontWeight, _Select.tokens.textFieldLeftHelperFontWeight, _TextField.textFieldTokens.leftHelperLetterSpacing, _Select.tokens.textFieldLeftHelperLetterSpacing, _TextField.textFieldTokens.leftHelperLineHeight, _Select.tokens.textFieldLeftHelperLineHeight, _TextField.textFieldTokens.textBeforeColor, _Select.tokens.textFieldTextBeforeColor, _TextField.textFieldTokens.textAfterColor, _Select.tokens.textFieldTextAfterColor, _TextField.textFieldTokens.textBeforeMargin, _Select.tokens.textFieldTextBeforeMargin, _TextField.textFieldTokens.textAfterMargin, _Select.tokens.textFieldTextAfterMargin, _TextField.textFieldTokens.disabledOpacity, _Select.tokens.textFieldDisabledOpacity, _TextField.textFieldTokens.chipHeight, _Select.tokens.textFieldChipHeight, _TextField.textFieldTokens.chipBorderRadius, _Select.tokens.textFieldChipBorderRadius, _TextField.textFieldTokens.chipGap, _Select.tokens.textFieldChipGap, _TextField.textFieldTokens.chipColor, _Select.tokens.textFieldChipColor, _TextField.textFieldTokens.chipColorHover, _Select.tokens.textFieldChipColorHover, _TextField.textFieldTokens.chipScaleHover, _Select.tokens.textFieldChipScaleHover, _TextField.textFieldTokens.chipBackground, _Select.tokens.textFieldChipBackground, _TextField.textFieldTokens.chipBackgroundActive, _Select.tokens.textFieldChipBackgroundActive, _TextField.textFieldTokens.chipColorActive, _Select.tokens.textFieldChipColorActive, _TextField.textFieldTokens.chipScaleActive, _Select.tokens.textFieldChipScaleActive, _TextField.textFieldTokens.chipCloseIconColor, _Select.tokens.textFieldChipCloseIconColor, _TextField.textFieldTokens.chipOutlineSize, _Select.tokens.textFieldChipOutlineSize, _TextField.textFieldTokens.chipWidth, _Select.tokens.textFieldChipWidth, _TextField.textFieldTokens.chipPaddingTop, _Select.tokens.textFieldChipPaddingTop, _TextField.textFieldTokens.chipPaddingRight, _Select.tokens.textFieldChipPaddingRight, _TextField.textFieldTokens.chipPaddingBottom, _Select.tokens.textFieldChipPaddingBottom, _TextField.textFieldTokens.chipPaddingLeft, _Select.tokens.textFieldChipPaddingLeft, _TextField.textFieldTokens.chipCloseIconSize, _Select.tokens.textFieldChipCloseIconSize, _TextField.textFieldTokens.chipFontFamily, _Select.tokens.textFieldChipFontFamily, _TextField.textFieldTokens.chipFontSize, _Select.tokens.textFieldChipFontSize, _TextField.textFieldTokens.chipFontStyle, _Select.tokens.textFieldChipFontStyle, _TextField.textFieldTokens.chipFontWeight, _Select.tokens.textFieldChipFontWeight, _TextField.textFieldTokens.chipLetterSpacing, _Select.tokens.textFieldChipLetterSpacing, _TextField.textFieldTokens.chipLineHeight, _Select.tokens.textFieldChipLineHeight, _TextField.textFieldTokens.chipColorReadOnly, _Select.tokens.textFieldChipColor, _TextField.textFieldTokens.chipColorReadOnlyHover, _Select.tokens.textFieldChipColor, _TextField.textFieldTokens.chipBackgroundReadOnly, _Select.tokens.textFieldChipBackground, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _Select.tokens.textFieldChipBackgroundHover, _TextField.textFieldTokens.chipClearContentMarginLeft, _Select.tokens.textFieldChipClearContentMarginLeft, _TextField.textFieldTokens.chipClearContentMarginRight, _Select.tokens.textFieldChipClearContentMarginRight, _TextField.textFieldTokens.focusColor, _Select.tokens.textFieldFocusColor, _Select.tokens.textFieldBackgroundColorFocus);
+}, _TextField.textFieldTokens.placeholderColor, _Select.tokens.textFieldPlaceholderColor, _TextField.textFieldTokens.borderColorHover, _Select.tokens.textFieldBorderColorHover, _TextField.textFieldTokens.borderColorFocus, _Select.tokens.textFieldBorderColorFocus, _TextField.textFieldTokens.optionalColor, _Select.tokens.textFieldOptionalColor, _TextField.textFieldTokens.height, _Select.tokens.textFieldHeight, _TextField.textFieldTokens.borderWidth, _Select.tokens.textFieldBorderWidth, _TextField.textFieldTokens.borderRadius, _Select.tokens.textFieldBorderRadius, _TextField.textFieldTokens.padding, _Select.tokens.textFieldPadding, _TextField.textFieldTokens.paddingWithChips, _Select.tokens.textFieldPaddingWithChips, _TextField.textFieldTokens.leftContentMargin, _Select.tokens.textFieldLeftContentMargin, _TextField.textFieldTokens.rightContentMargin, _Select.tokens.textFieldRightContentMargin, _TextField.textFieldTokens.fontFamily, _Select.tokens.textFieldFontFamily, _TextField.textFieldTokens.fontStyle, _Select.tokens.textFieldFontStyle, _TextField.textFieldTokens.fontSize, _Select.tokens.textFieldFontSize, _TextField.textFieldTokens.fontWeight, _Select.tokens.textFieldFontWeight, _TextField.textFieldTokens.letterSpacing, _Select.tokens.textFieldLetterSpacing, _TextField.textFieldTokens.lineHeight, _Select.tokens.textFieldLineHeight, _TextField.textFieldTokens.contentSlotColor, _Select.tokens.textFieldContentSlotColor, _TextField.textFieldTokens.contentSlotColorHover, _Select.tokens.textFieldContentSlotColorHover, _TextField.textFieldTokens.contentSlotColorActive, _Select.tokens.textFieldContentSlotColorActive, _TextField.textFieldTokens.contentSlotRightColor, _Select.tokens.textFieldContentSlotRightColor, _TextField.textFieldTokens.contentSlotRightColorHover, _Select.tokens.textFieldContentSlotRightColorHover, _TextField.textFieldTokens.contentSlotRightColorActive, _Select.tokens.textFieldContentSlotRightColorActive, _TextField.textFieldTokens.labelOffset, _Select.tokens.textFieldLabelOffset, _TextField.textFieldTokens.labelFontFamily, _Select.tokens.textFieldLabelFontFamily, _TextField.textFieldTokens.labelFontStyle, _Select.tokens.textFieldLabelFontStyle, _TextField.textFieldTokens.labelFontSize, _Select.tokens.textFieldLabelFontSize, _TextField.textFieldTokens.labelFontWeight, _Select.tokens.textFieldLabelFontWeight, _TextField.textFieldTokens.labelLetterSpacing, _Select.tokens.textFieldLabelLetterSpacing, _TextField.textFieldTokens.labelLineHeight, _Select.tokens.textFieldLabelLineHeight, _TextField.textFieldTokens.labelInnerFontFamily, _Select.tokens.textFieldLabelInnerFontFamily, _TextField.textFieldTokens.labelInnerFontStyle, _Select.tokens.textFieldLabelInnerFontStyle, _TextField.textFieldTokens.labelInnerFontSize, _Select.tokens.textFieldLabelInnerFontSize, _TextField.textFieldTokens.labelInnerFontWeight, _Select.tokens.textFieldLabelInnerFontWeight, _TextField.textFieldTokens.labelInnerLetterSpacing, _Select.tokens.textFieldLabelInnerLetterSpacing, _TextField.textFieldTokens.labelInnerLineHeight, _Select.tokens.textFieldLabelInnerLineHeight, _TextField.textFieldTokens.labelInnerPadding, _Select.tokens.textFieldLabelInnerPadding, _TextField.textFieldTokens.contentLabelInnerPadding, _Select.tokens.textFieldContentLabelInnerPadding, _TextField.textFieldTokens.titleCaptionColor, _Select.tokens.textFieldTitleCaptionColor, _TextField.textFieldTokens.titleCaptionInnerLabelOffset, _Select.tokens.textFieldTitleCaptionInnerLabelOffset, _TextField.textFieldTokens.titleCaptionFontFamily, _Select.tokens.textFieldTitleCaptionFontFamily, _TextField.textFieldTokens.titleCaptionFontStyle, _Select.tokens.textFieldTitleCaptionFontStyle, _TextField.textFieldTokens.titleCaptionFontSize, _Select.tokens.textFieldTitleCaptionFontSize, _TextField.textFieldTokens.titleCaptionFontWeight, _Select.tokens.textFieldTitleCaptionFontWeight, _TextField.textFieldTokens.titleCaptionLetterSpacing, _Select.tokens.textFieldTitleCaptionLetterSpacing, _TextField.textFieldTokens.titleCaptionLineHeight, _Select.tokens.textFieldTitleCaptionLineHeight, _TextField.textFieldTokens.leftHelperOffset, _Select.tokens.textFieldLeftHelperOffset, _TextField.textFieldTokens.leftHelperFontFamily, _Select.tokens.textFieldLeftHelperFontFamily, _TextField.textFieldTokens.leftHelperFontStyle, _Select.tokens.textFieldLeftHelperFontStyle, _TextField.textFieldTokens.leftHelperFontSize, _Select.tokens.textFieldLeftHelperFontSize, _TextField.textFieldTokens.leftHelperFontWeight, _Select.tokens.textFieldLeftHelperFontWeight, _TextField.textFieldTokens.leftHelperLetterSpacing, _Select.tokens.textFieldLeftHelperLetterSpacing, _TextField.textFieldTokens.leftHelperLineHeight, _Select.tokens.textFieldLeftHelperLineHeight, _TextField.textFieldTokens.textBeforeColor, _Select.tokens.textFieldTextBeforeColor, _TextField.textFieldTokens.textAfterColor, _Select.tokens.textFieldTextAfterColor, _TextField.textFieldTokens.textBeforeMargin, _Select.tokens.textFieldTextBeforeMargin, _TextField.textFieldTokens.textAfterMargin, _Select.tokens.textFieldTextAfterMargin, _TextField.textFieldTokens.disabledOpacity, _Select.tokens.textFieldDisabledOpacity, _TextField.textFieldTokens.chipHeight, _Select.tokens.textFieldChipHeight, _TextField.textFieldTokens.chipBorderRadius, _Select.tokens.textFieldChipBorderRadius, _TextField.textFieldTokens.chipGap, _Select.tokens.textFieldChipGap, _TextField.textFieldTokens.chipColor, _Select.tokens.textFieldChipColor, _TextField.textFieldTokens.chipColorHover, _Select.tokens.textFieldChipColorHover, _TextField.textFieldTokens.chipScaleHover, _Select.tokens.textFieldChipScaleHover, _TextField.textFieldTokens.chipBackground, _Select.tokens.textFieldChipBackground, _TextField.textFieldTokens.chipBackgroundActive, _Select.tokens.textFieldChipBackgroundActive, _TextField.textFieldTokens.chipColorActive, _Select.tokens.textFieldChipColorActive, _TextField.textFieldTokens.chipScaleActive, _Select.tokens.textFieldChipScaleActive, _TextField.textFieldTokens.chipCloseIconColor, _Select.tokens.textFieldChipCloseIconColor, _TextField.textFieldTokens.chipOutlineSize, _Select.tokens.textFieldChipOutlineSize, _TextField.textFieldTokens.chipWidth, _Select.tokens.textFieldChipWidth, _TextField.textFieldTokens.chipPaddingTop, _Select.tokens.textFieldChipPaddingTop, _TextField.textFieldTokens.chipPaddingRight, _Select.tokens.textFieldChipPaddingRight, _TextField.textFieldTokens.chipPaddingBottom, _Select.tokens.textFieldChipPaddingBottom, _TextField.textFieldTokens.chipPaddingLeft, _Select.tokens.textFieldChipPaddingLeft, _TextField.textFieldTokens.chipCloseIconSize, _Select.tokens.textFieldChipCloseIconSize, _TextField.textFieldTokens.chipFontFamily, _Select.tokens.textFieldChipFontFamily, _TextField.textFieldTokens.chipFontSize, _Select.tokens.textFieldChipFontSize, _TextField.textFieldTokens.chipFontStyle, _Select.tokens.textFieldChipFontStyle, _TextField.textFieldTokens.chipFontWeight, _Select.tokens.textFieldChipFontWeight, _TextField.textFieldTokens.chipLetterSpacing, _Select.tokens.textFieldChipLetterSpacing, _TextField.textFieldTokens.chipLineHeight, _Select.tokens.textFieldChipLineHeight, _TextField.textFieldTokens.chipColorReadOnly, _Select.tokens.textFieldChipColor, _TextField.textFieldTokens.chipColorReadOnlyHover, _Select.tokens.textFieldChipColor, _TextField.textFieldTokens.chipBackgroundReadOnly, _Select.tokens.textFieldChipBackground, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _Select.tokens.textFieldChipBackgroundHover, _TextField.textFieldTokens.chipClearContentMarginLeft, _Select.tokens.textFieldChipClearContentMarginLeft, _TextField.textFieldTokens.chipClearContentMarginRight, _Select.tokens.textFieldChipClearContentMarginRight, _TextField.textFieldTokens.indicatorColor, _Select.tokens.textFieldIndicatorColor, _TextField.textFieldTokens.indicatorSizeInner, _Select.tokens.textFieldIndicatorSizeInner, _TextField.textFieldTokens.indicatorSizeOuter, _Select.tokens.textFieldIndicatorSizeOuter, _TextField.textFieldTokens.indicatorLabelPlacementInner, _Select.tokens.textFieldIndicatorLabelPlacementInner, _TextField.textFieldTokens.indicatorLabelPlacementOuter, _Select.tokens.textFieldIndicatorLabelPlacementOuter, _TextField.textFieldTokens.indicatorLabelPlacementInnerRight, _Select.tokens.textFieldIndicatorLabelPlacementInnerRight, _TextField.textFieldTokens.indicatorLabelPlacementOuterRight, _Select.tokens.textFieldIndicatorLabelPlacementOuterRight, _TextField.textFieldTokens.clearIndicatorLabelPlacementInner, _Select.tokens.textFieldClearIndicatorLabelPlacementInner, _TextField.textFieldTokens.clearIndicatorLabelPlacementInnerRight, _Select.tokens.textFieldClearIndicatorLabelPlacementInnerRight, _TextField.textFieldTokens.clearIndicatorHintInnerRight, _Select.tokens.textFieldClearIndicatorHintInnerRight, _TextField.textFieldTokens.focusColor, _Select.tokens.textFieldFocusColor, _Select.tokens.textFieldBackgroundColorFocus);
 var IconArrowWrapper = exports.IconArrowWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-1akl2tk-1"
 })(["line-height:0;color:var(", ");cursor:", ";.", "{transform:rotate(-180deg);}&:hover,&:active{color:", ";}"], _Select.tokens.disclosureIconColor, function (_ref4) {

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}
             />