@salutejs/plasma-new-hope 0.195.0-canary.1572.11914481185.0 → 0.195.0-dev.0

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

@@ -2,7 +2,12 @@ export var classes = {
   badgePilled: 'badge-pilled',
   badgeTransparent: 'badge-transparent',
   badgeClear: 'badge-clear',
-  badgeTruncate: 'badge-truncate'
+  badgeTruncate: 'badge-truncate',
+  iconOnly: 'badge-icon-only'
+};
+export var privateTokens = {
+  customBackground: '--plasma-badge-custom-background',
+  customColor: '--plasma-badge-custom-color'
 };
 export var tokens = {
   background: '--plasma-badge-background',
@@ -10,13 +15,12 @@ export var 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/es/components/Badge/variations/_clear/base.js

@@ -1,3 +1,3 @@
 import { css } from 'styled-components';
-import { classes, tokens } from '../../Badge.tokens';
-export var base = /*#__PURE__*/css(["&.", "{color:var(", ");background-color:transparent;padding:0;}"], classes.badgeClear, tokens.colorClear);
+import { classes, privateTokens, tokens } from '../../Badge.tokens';
+export var base = /*#__PURE__*/css(["&.", "{color:var(", ",var(", "));background-color:var(", ",var(", "));}"], classes.badgeClear, privateTokens.customColor, tokens.colorClear, privateTokens.customBackground, tokens.backgroundClear);

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

@@ -1,3 +1,4 @@
 import { css } from 'styled-components';
-import { tokens } from '../../Badge.tokens';
-export var base = /*#__PURE__*/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(", ");"], tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.borderRadius, tokens.height, tokens.paddingTop, tokens.paddingRight, tokens.paddingBottom, tokens.paddingLeft);
+import { classes, tokens } from '../../Badge.tokens';
+import { StyledContentLeft } from '../../Badge.styles';
+export var base = /*#__PURE__*/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;}}"], tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.borderRadius, tokens.height, tokens.padding, classes.iconOnly, tokens.paddingIconOnly, StyledContentLeft);

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

@@ -1,3 +1,3 @@
 import { css } from 'styled-components';
-import { classes, tokens } from '../../Badge.tokens';
-export var base = /*#__PURE__*/css(["&.", "{color:var(", ");background-color:var(", ");}"], classes.badgeTransparent, tokens.colorTransparent, tokens.backgroundTransparent);
+import { classes, privateTokens, tokens } from '../../Badge.tokens';
+export var base = /*#__PURE__*/css(["&.", "{color:var(", ",var(", "));background-color:var(", ",var(", "));}"], classes.badgeTransparent, privateTokens.customColor, tokens.colorTransparent, privateTokens.customBackground, tokens.backgroundTransparent);

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

@@ -1,3 +1,3 @@
 import { css } from 'styled-components';
-import { tokens } from '../../Badge.tokens';
-export var base = /*#__PURE__*/css(["color:var(", ");background-color:var(", ");"], tokens.color, tokens.background);
+import { privateTokens, tokens } from '../../Badge.tokens';
+export var base = /*#__PURE__*/css(["color:var(", ",var(", "));background-color:var(", ",var(", "));"], privateTokens.customColor, tokens.color, privateTokens.customBackground, tokens.background);

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

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

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

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

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

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

package/styled-components/es/components/Combobox/ComboboxNew/Combobox.js

@@ -1,5 +1,9 @@
 var _excluded = ["multiple", "value", "onChange", "isTargetAmount", "targetAmount", "items", "placement", "label", "placeholder", "helperText", "contentLeft", "textBefore", "textAfter", "variant", "listOverflow", "listHeight", "listWidth", "portal", "renderItem", "view", "size", "labelPlacement", "readOnly", "disabled", "alwaysOpened", "filter", "closeAfterSelect", "renderValue"];
 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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -177,9 +181,24 @@ export var comboboxRoot = function comboboxRoot(Root) {
 
     // Обработчик чипов
     var handleChipsChange = function handleChipsChange(chipLabels) {
-      onChange(chipLabels.map(function (chipLabel) {
-        return labelToItemMap.get(chipLabel).value;
-      }));
+      if (!Array.isArray(value)) return;
+
+      // TODO: #1564
+      // Из лейблов чипов получаем value у item и далее прокидываем его в onChange.
+      if (renderValue && !isTargetAmount) {
+        var resultValues = _toConsumableArray(value);
+        value.forEach(function (_, index) {
+          var labelAfterRenderValue = renderValue(labelToItemMap.get(valueToItemMap.get(value[index]).label));
+          if (!chipLabels.includes(labelAfterRenderValue)) {
+            resultValues.splice(index, 1);
+          }
+        });
+        onChange(resultValues);
+      } else {
+        onChange(chipLabels.map(function (chipLabel) {
+          return labelToItemMap.get(chipLabel).value;
+        }));
+      }
     };
 
     // Обработчик открытия/закрытия выпадающего списка
@@ -348,7 +367,6 @@ export var comboboxRoot = function comboboxRoot(Root) {
         handleItemClick: handleItemClick,
         variant: variant,
         renderItem: renderItem,
-        valueToItemMap: valueToItemMap,
         treeId: treeId
       }
     }, /*#__PURE__*/React.createElement(FloatingPopover, {

package/styled-components/es/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.js

@@ -31,7 +31,6 @@ export var Item = function Item(_ref) {
     handleItemClick = _useContext.handleItemClick,
     variant = _useContext.variant,
     renderItem = _useContext.renderItem,
-    valueToItemMap = _useContext.valueToItemMap,
     treeId = _useContext.treeId;
   var disabledClassName = disabled ? classes.dropdownItemIsDisabled : undefined;
   var focusedClass = currentLevel === focusedPath.length - 1 && index === (focusedPath === null || focusedPath === void 0 ? void 0 : focusedPath[currentLevel]) ? classes.dropdownItemIsFocused : undefined;
@@ -85,7 +84,7 @@ export var Item = function Item(_ref) {
   }))), !multiple && checked.get(item.value) === 'done' && /*#__PURE__*/React.createElement(IconDone, {
     size: sizeToIconSize(size, variant),
     color: "inherit"
-  })), renderItem ? /*#__PURE__*/React.createElement(StyledText, null, renderItem(valueToItemMap.get(value))) : /*#__PURE__*/React.createElement(StyledWrapper, null, /*#__PURE__*/React.createElement(StyledCell, {
+  })), renderItem ? /*#__PURE__*/React.createElement(StyledText, null, renderItem(item)) : /*#__PURE__*/React.createElement(StyledWrapper, null, /*#__PURE__*/React.createElement(StyledCell, {
     view: "default",
     size: "l",
     contentLeft: contentLeft,

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

@@ -1,4 +1,4 @@
-var _excluded = ["items", "children", "placement", "offset", "closeOnOverlayClick", "onToggle", "size", "view", "itemRole", "className", "listWidth", "listHeight", "listOverflow", "closeOnSelect", "onHover", "onItemSelect", "onItemClick", "trigger", "variant", "hasArrow", "alwaysOpened", "portal"];
+var _excluded = ["items", "children", "placement", "offset", "closeOnOverlayClick", "onToggle", "size", "view", "itemRole", "className", "listWidth", "listHeight", "listOverflow", "closeOnSelect", "onHover", "onItemSelect", "onItemClick", "trigger", "variant", "hasArrow", "alwaysOpened", "portal", "renderItem"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -60,6 +60,7 @@ export var dropdownRoot = function dropdownRoot(Root) {
       _ref$alwaysOpened = _ref.alwaysOpened,
       alwaysOpened = _ref$alwaysOpened === void 0 ? false : _ref$alwaysOpened,
       portal = _ref.portal,
+      renderItem = _ref.renderItem,
       rest = _objectWithoutProperties(_ref, _excluded);
     var _useReducer = useReducer(pathReducer, []),
       _useReducer2 = _slicedToArray(_useReducer, 2),
@@ -135,7 +136,8 @@ export var dropdownRoot = function dropdownRoot(Root) {
         onItemClick: onItemClick,
         onItemSelect: onItemSelect,
         hasArrow: hasArrow,
-        treeId: treeId
+        treeId: treeId,
+        renderItem: renderItem
       }
     }, /*#__PURE__*/React.createElement(FloatingPopover, {
       ref: floatingPopoverRef,

package/styled-components/es/components/Dropdown/ui/DropdownItem/DropdownItem.js

@@ -4,7 +4,7 @@ import { cx } from '../../../../utils';
 import { IconDisclosureRight } from '../../../_Icon';
 import { Context } from '../../Dropdown';
 import { getItemId } from '../../utils';
-import { Wrapper, DisclosureIconWrapper, Divider, CellWrapper, StyledCell } from './DropdownItem.styles';
+import { Wrapper, DisclosureIconWrapper, Divider, CellWrapper, StyledCell, RenderItemWrapper } from './DropdownItem.styles';
 export var DropdownItem = function DropdownItem(_ref) {
   var item = _ref.item,
     path = _ref.path,
@@ -34,7 +34,8 @@ export var DropdownItem = function DropdownItem(_ref) {
     onItemSelect = _useContext.onItemSelect,
     onItemClick = _useContext.onItemClick,
     hasArrow = _useContext.hasArrow,
-    treeId = _useContext.treeId;
+    treeId = _useContext.treeId,
+    renderItem = _useContext.renderItem;
   var hasDescendants = Boolean(item.items);
   var disclosureIconSize = size === 'xs' ? 'xs' : 's';
   var isDisabledClassName = disabled || isDisabled ? classes.dropdownItemIsDisabled : undefined;
@@ -85,7 +86,7 @@ export var DropdownItem = function DropdownItem(_ref) {
     "aria-expanded": ariaExpanded,
     "aria-level": ariaLevel,
     "aria-label": ariaLabel
-  }, /*#__PURE__*/React.createElement(CellWrapper, null, /*#__PURE__*/React.createElement(StyledCell, {
+  }, renderItem ? /*#__PURE__*/React.createElement(RenderItemWrapper, null, renderItem(item)) : /*#__PURE__*/React.createElement(CellWrapper, null, /*#__PURE__*/React.createElement(StyledCell, {
     contentLeft: contentLeft,
     contentRight: contentRight,
     alignContentLeft: "center",

package/styled-components/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { classes, tokens, constants } from '../../Dropdown.tokens';
-import { addFocus } from '../../../../mixins';
+import { addFocus, applyEllipsis } from '../../../../mixins';
 import { cellConfig, cellTokens } from '../../../Cell';
 import { component, mergeConfig } from '../../../../engines';
 var mergedCellConfig = /*#__PURE__*/mergeConfig(cellConfig);
@@ -35,4 +35,7 @@ export var Wrapper = /*#__PURE__*/styled.li.withConfig({
   outlineRadius: /*#__PURE__*/"var(".concat(tokens.itemBorderRadius, ")"),
   hasTransition: false,
   customFocusRules: /*#__PURE__*/"\n            &.".concat(classes.dropdownItemIsFocused, ":before {\n                outline: none;\n                box-shadow: 0 0 0 0.0625rem var(").concat(constants.focusColor, ");\n            }\n        ")
-}));
+}));
+export var RenderItemWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-hs0ek1-5"
+})(["", ";flex:1;"], /*#__PURE__*/applyEllipsis());

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

@@ -272,7 +272,6 @@ export var selectRoot = function selectRoot(Root) {
         handleItemClick: handleItemClick,
         variant: variant,
         renderItem: renderItem,
-        valueToItemMap: valueToItemMap,
         treeId: treeId
       }
     }, /*#__PURE__*/React.createElement(FloatingPopover, {

package/styled-components/es/components/Select/ui/Inner/ui/Item/Item.js

@@ -32,7 +32,6 @@ export var Item = function Item(_ref) {
     handleItemClick = _useContext.handleItemClick,
     variant = _useContext.variant,
     renderItem = _useContext.renderItem,
-    valueToItemMap = _useContext.valueToItemMap,
     treeId = _useContext.treeId;
   var itemDisabled = Boolean(disabled || isDisabled);
   var disabledClassName = itemDisabled ? classes.dropdownItemIsDisabled : undefined;
@@ -87,7 +86,7 @@ export var Item = function Item(_ref) {
   }))), !multiselect && checked.get(item.value) === 'done' && /*#__PURE__*/React.createElement(IconDone, {
     size: sizeToIconSize(size, variant),
     color: "inherit"
-  })), renderItem ? /*#__PURE__*/React.createElement(StyledText, null, renderItem(valueToItemMap.get(value))) : /*#__PURE__*/React.createElement(StyledWrapper, null, /*#__PURE__*/React.createElement(StyledCell, {
+  })), renderItem ? /*#__PURE__*/React.createElement(StyledText, null, renderItem(item)) : /*#__PURE__*/React.createElement(StyledWrapper, null, /*#__PURE__*/React.createElement(StyledCell, {
     contentLeft: contentLeft,
     contentRight: contentRight
     // TODO: #1548

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

@@ -1,4 +1,10 @@
 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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 import React, { forwardRef } from 'react';
 import { sizeToIconSize, getItemId } from '../../../../utils';
 import { classes } from '../../../../Select.tokens';
@@ -47,9 +53,24 @@ export var Textfield = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
   // Обработчик чипов
   var handleChipsChange = function handleChipsChange(chipLabels) {
-    onChange(chipLabels.map(function (chipLabel) {
-      return labelToItemMap.get(chipLabel).value;
-    }));
+    if (!Array.isArray(value)) return;
+
+    // TODO: #1564
+    // Из лейблов чипов получаем value у item и далее прокидываем его в onChange.
+    if (renderValue && !isTargetAmount) {
+      var resultValues = _toConsumableArray(value);
+      value.forEach(function (_, index) {
+        var labelAfterRenderValue = renderValue(labelToItemMap.get(valueToItemMap.get(value[index]).label));
+        if (!chipLabels.includes(labelAfterRenderValue)) {
+          resultValues.splice(index, 1);
+        }
+      });
+      onChange(resultValues);
+    } else {
+      onChange(chipLabels.map(function (chipLabel) {
+        return labelToItemMap.get(chipLabel).value;
+      }));
+    }
   };
   return /*#__PURE__*/React.createElement(StyledTextField, _extends({
     ref: ref,

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

@@ -16,10 +16,10 @@ export var config = {
       light: /*#__PURE__*/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);"], badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.backgroundTransparent, badgeTokens.colorClear)
     },
     size: {
-      l: /*#__PURE__*/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;"], badgeTokens.borderRadius, badgeTokens.height, badgeTokens.paddingRight, badgeTokens.paddingLeft, badgeTokens.fontFamily, badgeTokens.fontSize, badgeTokens.fontStyle, badgeTokens.fontWeight, badgeTokens.letterSpacing, badgeTokens.lineHeight, badgeTokens.leftContentMarginLeft, badgeTokens.leftContentMarginRight, badgeTokens.rightContentMarginLeft, badgeTokens.rightContentMarginRight),
-      m: /*#__PURE__*/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;"], badgeTokens.borderRadius, badgeTokens.height, badgeTokens.paddingRight, badgeTokens.paddingLeft, badgeTokens.fontFamily, badgeTokens.fontSize, badgeTokens.fontStyle, badgeTokens.fontWeight, badgeTokens.letterSpacing, badgeTokens.lineHeight, badgeTokens.leftContentMarginLeft, badgeTokens.leftContentMarginRight, badgeTokens.rightContentMarginLeft, badgeTokens.rightContentMarginRight),
-      s: /*#__PURE__*/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;"], badgeTokens.borderRadius, badgeTokens.height, badgeTokens.paddingRight, badgeTokens.paddingLeft, badgeTokens.fontFamily, badgeTokens.fontSize, badgeTokens.fontStyle, badgeTokens.fontWeight, badgeTokens.letterSpacing, badgeTokens.lineHeight, badgeTokens.leftContentMarginLeft, badgeTokens.leftContentMarginRight, badgeTokens.rightContentMarginLeft, badgeTokens.rightContentMarginRight),
-      xs: /*#__PURE__*/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;"], badgeTokens.borderRadius, badgeTokens.height, badgeTokens.paddingRight, badgeTokens.paddingLeft, badgeTokens.fontFamily, badgeTokens.fontSize, badgeTokens.fontStyle, badgeTokens.fontWeight, badgeTokens.letterSpacing, badgeTokens.lineHeight, badgeTokens.leftContentMarginLeft, badgeTokens.leftContentMarginRight, badgeTokens.rightContentMarginLeft, badgeTokens.rightContentMarginRight)
+      l: /*#__PURE__*/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;"], badgeTokens.borderRadius, badgeTokens.height, badgeTokens.padding, badgeTokens.paddingIconOnly, badgeTokens.fontFamily, badgeTokens.fontSize, badgeTokens.fontStyle, badgeTokens.fontWeight, badgeTokens.letterSpacing, badgeTokens.lineHeight, badgeTokens.leftContentMarginLeft, badgeTokens.leftContentMarginRight, badgeTokens.rightContentMarginLeft, badgeTokens.rightContentMarginRight),
+      m: /*#__PURE__*/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;"], badgeTokens.borderRadius, badgeTokens.height, badgeTokens.padding, badgeTokens.paddingIconOnly, badgeTokens.fontFamily, badgeTokens.fontSize, badgeTokens.fontStyle, badgeTokens.fontWeight, badgeTokens.letterSpacing, badgeTokens.lineHeight, badgeTokens.leftContentMarginLeft, badgeTokens.leftContentMarginRight, badgeTokens.rightContentMarginLeft, badgeTokens.rightContentMarginRight),
+      s: /*#__PURE__*/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;"], badgeTokens.borderRadius, badgeTokens.height, badgeTokens.padding, badgeTokens.paddingIconOnly, badgeTokens.fontFamily, badgeTokens.fontSize, badgeTokens.fontStyle, badgeTokens.fontWeight, badgeTokens.letterSpacing, badgeTokens.lineHeight, badgeTokens.leftContentMarginLeft, badgeTokens.leftContentMarginRight, badgeTokens.rightContentMarginLeft, badgeTokens.rightContentMarginRight),
+      xs: /*#__PURE__*/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;"], badgeTokens.borderRadius, badgeTokens.height, badgeTokens.padding, badgeTokens.paddingIconOnly, badgeTokens.fontFamily, badgeTokens.fontSize, badgeTokens.fontStyle, badgeTokens.fontWeight, badgeTokens.letterSpacing, badgeTokens.lineHeight, badgeTokens.leftContentMarginLeft, badgeTokens.leftContentMarginRight, badgeTokens.rightContentMarginLeft, badgeTokens.rightContentMarginRight)
     },
     pilled: {
       "true": /*#__PURE__*/css(["", ":1.25rem;"], badgeTokens.pilledBorderRadius)
@@ -28,7 +28,7 @@ export var config = {
       "true": /*#__PURE__*/css([""])
     },
     clear: {
-      "true": /*#__PURE__*/css([""])
+      "true": /*#__PURE__*/css(["", ":var(--surface-clear);"], badgeTokens.backgroundClear)
     },
     truncate: {
       "true": /*#__PURE__*/css([""])

package/styled-components/es/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/es/examples/plasma_web/components/Badge/Badge.config.js

@@ -16,10 +16,10 @@ export var config = {
       light: /*#__PURE__*/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);"], badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.backgroundTransparent, badgeTokens.colorClear)
     },
     size: {
-      l: /*#__PURE__*/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;"], badgeTokens.borderRadius, badgeTokens.height, badgeTokens.paddingRight, badgeTokens.paddingLeft, badgeTokens.fontFamily, badgeTokens.fontSize, badgeTokens.fontStyle, badgeTokens.fontWeight, badgeTokens.letterSpacing, badgeTokens.lineHeight, badgeTokens.leftContentMarginLeft, badgeTokens.leftContentMarginRight, badgeTokens.rightContentMarginLeft, badgeTokens.rightContentMarginRight),
-      m: /*#__PURE__*/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;"], badgeTokens.borderRadius, badgeTokens.height, badgeTokens.paddingRight, badgeTokens.paddingLeft, badgeTokens.fontFamily, badgeTokens.fontSize, badgeTokens.fontStyle, badgeTokens.fontWeight, badgeTokens.letterSpacing, badgeTokens.lineHeight, badgeTokens.leftContentMarginLeft, badgeTokens.leftContentMarginRight, badgeTokens.rightContentMarginLeft, badgeTokens.rightContentMarginRight),
-      s: /*#__PURE__*/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;"], badgeTokens.borderRadius, badgeTokens.height, badgeTokens.paddingRight, badgeTokens.paddingLeft, badgeTokens.fontFamily, badgeTokens.fontSize, badgeTokens.fontStyle, badgeTokens.fontWeight, badgeTokens.letterSpacing, badgeTokens.lineHeight, badgeTokens.leftContentMarginLeft, badgeTokens.leftContentMarginRight, badgeTokens.rightContentMarginLeft, badgeTokens.rightContentMarginRight),
-      xs: /*#__PURE__*/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;"], badgeTokens.borderRadius, badgeTokens.height, badgeTokens.paddingRight, badgeTokens.paddingLeft, badgeTokens.fontFamily, badgeTokens.fontSize, badgeTokens.fontStyle, badgeTokens.fontWeight, badgeTokens.letterSpacing, badgeTokens.lineHeight, badgeTokens.leftContentMarginLeft, badgeTokens.leftContentMarginRight, badgeTokens.rightContentMarginLeft, badgeTokens.rightContentMarginRight)
+      l: /*#__PURE__*/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;"], badgeTokens.borderRadius, badgeTokens.height, badgeTokens.padding, badgeTokens.paddingIconOnly, badgeTokens.fontFamily, badgeTokens.fontSize, badgeTokens.fontStyle, badgeTokens.fontWeight, badgeTokens.letterSpacing, badgeTokens.lineHeight, badgeTokens.leftContentMarginLeft, badgeTokens.leftContentMarginRight, badgeTokens.rightContentMarginLeft, badgeTokens.rightContentMarginRight),
+      m: /*#__PURE__*/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;"], badgeTokens.borderRadius, badgeTokens.height, badgeTokens.padding, badgeTokens.paddingIconOnly, badgeTokens.fontFamily, badgeTokens.fontSize, badgeTokens.fontStyle, badgeTokens.fontWeight, badgeTokens.letterSpacing, badgeTokens.lineHeight, badgeTokens.leftContentMarginLeft, badgeTokens.leftContentMarginRight, badgeTokens.rightContentMarginLeft, badgeTokens.rightContentMarginRight),
+      s: /*#__PURE__*/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;"], badgeTokens.borderRadius, badgeTokens.height, badgeTokens.padding, badgeTokens.paddingIconOnly, badgeTokens.fontFamily, badgeTokens.fontSize, badgeTokens.fontStyle, badgeTokens.fontWeight, badgeTokens.letterSpacing, badgeTokens.lineHeight, badgeTokens.leftContentMarginLeft, badgeTokens.leftContentMarginRight, badgeTokens.rightContentMarginLeft, badgeTokens.rightContentMarginRight),
+      xs: /*#__PURE__*/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;"], badgeTokens.borderRadius, badgeTokens.height, badgeTokens.padding, badgeTokens.paddingIconOnly, badgeTokens.fontFamily, badgeTokens.fontSize, badgeTokens.fontStyle, badgeTokens.fontWeight, badgeTokens.letterSpacing, badgeTokens.lineHeight, badgeTokens.leftContentMarginLeft, badgeTokens.leftContentMarginRight, badgeTokens.rightContentMarginLeft, badgeTokens.rightContentMarginRight)
     },
     pilled: {
       "true": /*#__PURE__*/css(["", ":1.25rem;"], badgeTokens.pilledBorderRadius)
@@ -28,7 +28,7 @@ export var config = {
       "true": /*#__PURE__*/css([""])
     },
     clear: {
-      "true": /*#__PURE__*/css([""])
+      "true": /*#__PURE__*/css(["", ":var(--surface-clear);"], badgeTokens.backgroundClear)
     }
   }
 };

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

@@ -31,6 +31,13 @@ const meta: Meta<typeof Badge> = {
             control: { type: 'boolean' },
             if: { arg: 'clear', truthy: false },
         },
+        maxWidth: {
+            control: { type: 'text' },
+        },
+        text: {
+            control: { type: 'text' },
+            if: { arg: 'enableText', truthy: true },
+        },
         ...disableProps(['contentLeft', 'contentRight']),
     },
 };
@@ -40,6 +47,7 @@ export default meta;
 type StoryProps = ComponentProps<typeof Badge> & {
     enableContentLeft: boolean;
     enableContentRight: boolean;
+    enableText: boolean;
 };
 type Story = StoryObj<StoryProps>;
 
@@ -60,26 +68,39 @@ export const Default: Story = {
         },
         enableContentRight: {
             control: { type: 'boolean' },
-            if: { arg: 'enableContentLeft', truthy: false },
+            if: { arg: 'enableText', truthy: true },
         },
     },
     args: {
-        text: 'Hello',
         view: 'default',
         size: 'm',
+        enableText: true,
+        text: 'Hello',
         enableContentLeft: false,
         enableContentRight: false,
         clear: false,
         pilled: false,
         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/types/components/Badge/Badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAQ/C,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAIhE,eAAO,MAAM,SAAS,SAAU,UAAU,cAAc,EAAE,cAAc,CAAC,sFA4CnE,CAAC;AAEP,eAAO,MAAM,WAAW;;;mBA9CQ,UAAU,cAAc,EAAE,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;CA2ExE,CAAC"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAQ/C,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAIhE,eAAO,MAAM,SAAS,SAAU,UAAU,cAAc,EAAE,cAAc,CAAC,sFAoEnE,CAAC;AAEP,eAAO,MAAM,WAAW;;;mBAtEQ,UAAU,cAAc,EAAE,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;CAmGxE,CAAC"}

package/types/components/Badge/Badge.tokens.d.ts

@@ -3,6 +3,11 @@ export declare const classes: {
     badgeTransparent: string;
     badgeClear: string;
     badgeTruncate: string;
+    iconOnly: string;
+};
+export declare const privateTokens: {
+    customBackground: string;
+    customColor: string;
 };
 export declare const tokens: {
     background: string;
@@ -10,13 +15,12 @@ export declare const tokens: {
     backgroundTransparent: string;
     colorTransparent: string;
     colorClear: string;
+    backgroundClear: string;
     borderRadius: string;
     pilledBorderRadius: string;
     height: string;
-    paddingTop: string;
-    paddingRight: string;
-    paddingBottom: string;
-    paddingLeft: string;
+    padding: string;
+    paddingIconOnly: string;
     fontFamily: string;
     fontSize: string;
     fontStyle: string;

package/types/components/Badge/Badge.tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;CAKnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;CA0BlB,CAAC"}
+{"version":3,"file":"Badge.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;CAMnB,CAAC;AAEF,eAAO,MAAM,aAAa;;;CAGzB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;CAyBlB,CAAC"}

package/types/components/Badge/Badge.types.d.ts

@@ -45,19 +45,32 @@ declare type ClearViewProps = {
      */
     clear?: false;
 };
+declare type IconContentProps = {
+    /**
+     * Слот для контента слева, например `Icon`
+     */
+    contentLeft?: ReactNode;
+    /**
+     * Слот для контента справа, например `Icon`
+     */
+    contentRight?: never;
+} | {
+    contentLeft?: never;
+    contentRight?: ReactNode;
+};
 declare type CustomBadgeProps = {
     /**
      * Текстовая надпись
      */
     text?: string;
     /**
-     * Слот для контента слева, например `Icon`
+     * Пользовательский цвет текста и иконок
      */
-    contentLeft?: ReactNode;
+    customColor?: string;
     /**
-     * Слот для контента справа, например `Icon`
+     * Пользовательский цвет фона
      */
-    contentRight?: ReactNode;
+    customBackgroundColor?: string;
     /**
      * Обрезает контент по максимальной ширине и добавляет ...
      * @default 'auto'
@@ -75,7 +88,7 @@ declare type CustomBadgeProps = {
      * default
      */
     view?: string;
-} & PropsWithChildren;
+} & IconContentProps & PropsWithChildren;
 export declare type BadgeProps = HTMLAttributes<HTMLDivElement> & CustomBadgeProps & ClearViewProps;
 export declare type BadgeRootProps = HTMLAttributes<HTMLDivElement> & CustomBadgeProps & {
     pilled?: boolean;

package/types/components/Badge/Badge.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.types.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzF,aAAK,cAAc,GACb;IACI;;;;OAIG;IACH,KAAK,CAAC,EAAE,IAAI,CAAC;IACb;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC;IACf;;;;OAIG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC;CACvB,GACD;IACI;;OAEG;IACH,MAAM,CAAC,EAAE,IAAI,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;CACjB,GACD;IACI;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;CACjB,CAAC;AAER,aAAK,gBAAgB,GAAG;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAClC;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB,GAAG,iBAAiB,CAAC;AAEtB,oBAAY,UAAU,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG,gBAAgB,GAAG,cAAc,CAAC;AAC5F,oBAAY,cAAc,GAAG,cAAc,CAAC,cAAc,CAAC,GACvD,gBAAgB,GAAG;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC"}
+{"version":3,"file":"Badge.types.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzF,aAAK,cAAc,GACb;IACI;;;;OAIG;IACH,KAAK,CAAC,EAAE,IAAI,CAAC;IACb;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC;IACf;;;;OAIG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC;CACvB,GACD;IACI;;OAEG;IACH,MAAM,CAAC,EAAE,IAAI,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;CACjB,GACD;IACI;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;CACjB,CAAC;AAER,aAAK,gBAAgB,GACf;IACI;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC;CACxB,GACD;IACI,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,YAAY,CAAC,EAAE,SAAS,CAAC;CAC5B,CAAC;AAER,aAAK,gBAAgB,GAAG;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B;;;OAGG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAClC;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB,GAAG,gBAAgB,GAChB,iBAAiB,CAAC;AAEtB,oBAAY,UAAU,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG,gBAAgB,GAAG,cAAc,CAAC;AAC5F,oBAAY,cAAc,GAAG,cAAc,CAAC,cAAc,CAAC,GACvD,gBAAgB,GAAG;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC"}

package/types/components/Badge/variations/_clear/base.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../../../src/components/Badge/variations/_clear/base.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,0CAMhB,CAAC"}
+{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../../../src/components/Badge/variations/_clear/base.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,0CAKhB,CAAC"}

package/types/components/Badge/variations/_size/base.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../../../src/components/Badge/variations/_size/base.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,0CAgBhB,CAAC"}
+{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../../../src/components/Badge/variations/_size/base.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,IAAI,0CAqBhB,CAAC"}