@salutejs/plasma-new-hope 0.238.1-canary.1688.12706274765.0 → 0.239.0-canary.1696.12706339837.0

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

@@ -15,7 +15,7 @@ var _Avatar2 = /*#__PURE__*/require("./Avatar.styles");
 var _base = /*#__PURE__*/require("./variations/_size/base");
 var _base2 = /*#__PURE__*/require("./variations/_focused/base");
 var _utils2 = /*#__PURE__*/require("./utils");
-var _excluded = ["size", "name", "url", "customText", "status", "className", "focused", "isScalable", "statusLabels"];
+var _excluded = ["size", "name", "url", "customText", "status", "className", "focused", "isScalable", "statusLabels", "hasExtra", "extraPlacement", "type", "counterView", "count", "maxCount", "badgeView", "text", "customColor", "customBackgroundColor", "contentLeft", "contentRight", "pilled", "transparent", "clear"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
@@ -82,6 +82,21 @@ var avatarRoot = exports.avatarRoot = function avatarRoot(Root) {
       isScalable = props.isScalable,
       _props$statusLabels = props.statusLabels,
       statusLabels = _props$statusLabels === void 0 ? StatusLabelsDefault : _props$statusLabels,
+      hasExtra = props.hasExtra,
+      extraPlacement = props.extraPlacement,
+      type = props.type,
+      counterView = props.counterView,
+      count = props.count,
+      maxCount = props.maxCount,
+      badgeView = props.badgeView,
+      text = props.text,
+      customColor = props.customColor,
+      customBackgroundColor = props.customBackgroundColor,
+      contentLeft = props.contentLeft,
+      contentRight = props.contentRight,
+      pilled = props.pilled,
+      transparent = props.transparent,
+      clear = props.clear,
       rest = _objectWithoutProperties(props, _excluded);
     var initials = (0, _react.useMemo)(function () {
       return (0, _utils2.getInitialsForName)(name);
@@ -89,13 +104,28 @@ var avatarRoot = exports.avatarRoot = function avatarRoot(Root) {
     var ariaLabel = getAriaLabel(_objectSpread(_objectSpread({}, props), {}, {
       statusLabels: statusLabels
     }));
+    var extraBadgeProps = _objectSpread(_objectSpread({}, !clear ? {
+      pilled: pilled,
+      transparent: transparent
+    } : {
+      clear: clear
+    }), contentLeft ? {
+      contentLeft: contentLeft
+    } : {
+      contentRight: contentRight
+    });
+    var extraViewProp = type === 'badge' ? {
+      badgeView: badgeView
+    } : {
+      counterView: counterView
+    };
     return /*#__PURE__*/_react["default"].createElement(Root, _extends({
       ref: ref,
       size: avatarSize,
       className: (0, _utils.cx)(_Avatar.classes.avatarItem, className),
       "aria-label": ariaLabel,
       focused: focused
-    }, rest), /*#__PURE__*/_react["default"].createElement(_Avatar2.Wrapper, {
+    }, extraViewProp, rest), /*#__PURE__*/_react["default"].createElement(_Avatar2.Wrapper, {
       isScalable: isScalable
     }, getAvatarContent({
       customText: customText,
@@ -105,7 +135,19 @@ var avatarRoot = exports.avatarRoot = function avatarRoot(Root) {
     })), status && /*#__PURE__*/_react["default"].createElement(_Avatar2.StatusIcon, null, /*#__PURE__*/_react["default"].createElement(StyledIndicator, {
       "aria-label": statusLabels[status],
       status: status
-    })));
+    })), hasExtra && avatarSize !== 'fit' && /*#__PURE__*/_react["default"].createElement(_Avatar2.ExtraContent, {
+      className: (0, _utils2.extraPlacementMap)(extraPlacement)
+    }, type === 'counter' ? /*#__PURE__*/_react["default"].createElement(_Avatar2.ExtraCounter, {
+      view: counterView,
+      count: count || 1,
+      maxCount: maxCount
+    }) : avatarSize !== 's' && /*#__PURE__*/_react["default"].createElement(_Avatar2.ExtraBadge, _extends({
+      view: badgeView,
+      text: text,
+      customColor: customColor,
+      customBackgroundColor: customBackgroundColor,
+      maxWidth: "100%"
+    }, extraBadgeProps))));
   });
 };
 var avatarConfig = exports.avatarConfig = {

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

@@ -4,13 +4,20 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.base = exports.Wrapper = exports.Text = exports.StatusIcon = exports.Image = void 0;
+exports.base = exports.Wrapper = exports.Text = exports.StatusIcon = exports.Image = exports.ExtraCounter = exports.ExtraContent = exports.ExtraBadge = void 0;
 var _styledComponents = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("styled-components"));
+var _engines = /*#__PURE__*/require("../../engines");
+var _Badge = /*#__PURE__*/require("../Badge");
+var _Counter = /*#__PURE__*/require("../Counter");
 var _Avatar = /*#__PURE__*/require("./Avatar.tokens");
 var _templateObject;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var mergedBadgeConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Badge.badgeConfig);
+var Badge = /*#__PURE__*/(0, _engines.component)(mergedBadgeConfig);
+var mergedCounterConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Counter.counterConfig);
+var Counter = /*#__PURE__*/(0, _engines.component)(mergedCounterConfig);
 var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n    position: relative;\n"])));
 var Wrapper = exports.Wrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-t16ccn-0"
@@ -29,4 +36,13 @@ var Image = exports.Image = /*#__PURE__*/_styledComponents["default"].img.withCo
 })(["width:100%;height:100%;border-radius:50%;"]);
 var Text = exports.Text = /*#__PURE__*/_styledComponents["default"].span.withConfig({
   componentId: "plasma-new-hope__sc-t16ccn-3"
-})(["font-size:var(", ");font-family:var(", ");font-weight:var(", ");line-height:var(", ");background-image:var(", ");background-color:var(", ");background-size:100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;"], _Avatar.tokens.fontSize, _Avatar.tokens.fontFamily, _Avatar.tokens.fontWeight, _Avatar.tokens.lineHeight, _Avatar.tokens.color, _Avatar.tokens.color);
+})(["font-size:var(", ");font-family:var(", ");font-weight:var(", ");line-height:var(", ");background-image:var(", ");background-color:var(", ");background-size:100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;"], _Avatar.tokens.fontSize, _Avatar.tokens.fontFamily, _Avatar.tokens.fontWeight, _Avatar.tokens.lineHeight, _Avatar.tokens.color, _Avatar.tokens.color);
+var ExtraContent = exports.ExtraContent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-t16ccn-4"
+})(["max-width:100%;display:flex;position:absolute;z-index:2;&.", "{top:calc(-0.063rem * var(", ",0));left:calc(-0.063rem * var(", ",0));}&.", "{top:calc(-0.063rem * var(", ",0));right:calc(-0.063rem * var(", ",0));}&.", "{bottom:calc(-0.063rem * var(", ",0));right:calc(-0.063rem * var(", ",0));}&.", "{bottom:calc(-0.063rem * var(", ",0));left:calc(-0.063rem * var(", ",0));}"], _Avatar.classes.extraPlacementTopLeft, _Avatar.tokens.extraPlacementFactor, _Avatar.tokens.extraPlacementFactor, _Avatar.classes.extraPlacementTopRight, _Avatar.tokens.extraPlacementFactor, _Avatar.tokens.extraPlacementFactor, _Avatar.classes.extraPlacementBottomRight, _Avatar.tokens.extraPlacementFactor, _Avatar.tokens.extraPlacementFactor, _Avatar.classes.extraPlacementBottomLeft, _Avatar.tokens.extraPlacementFactor, _Avatar.tokens.extraPlacementFactor);
+var ExtraBadge = exports.ExtraBadge = /*#__PURE__*/(0, _styledComponents["default"])(Badge).withConfig({
+  componentId: "plasma-new-hope__sc-t16ccn-5"
+})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], _Badge.badgeTokens.background, _Avatar.tokens.badgeBackground, _Badge.badgeTokens.color, _Avatar.tokens.badgeColor, _Badge.badgeTokens.backgroundTransparent, _Avatar.tokens.badgeBackgroundTransparent, _Badge.badgeTokens.colorTransparent, _Avatar.tokens.badgeColorTransparent, _Badge.badgeTokens.colorClear, _Avatar.tokens.badgeColorClear, _Badge.badgeTokens.backgroundClear, _Avatar.tokens.badgeBackgroundClear, _Badge.badgeTokens.borderRadius, _Avatar.tokens.badgeBorderRadius, _Badge.badgeTokens.pilledBorderRadius, _Avatar.tokens.badgePilledBorderRadius, _Badge.badgeTokens.height, _Avatar.tokens.badgeHeight, _Badge.badgeTokens.padding, _Avatar.tokens.badgePadding, _Badge.badgeTokens.paddingIconOnly, _Avatar.tokens.badgePaddingIconOnly, _Badge.badgeTokens.fontFamily, _Avatar.tokens.badgeFontFamily, _Badge.badgeTokens.fontSize, _Avatar.tokens.badgeFontSize, _Badge.badgeTokens.fontStyle, _Avatar.tokens.badgeFontStyle, _Badge.badgeTokens.fontWeight, _Avatar.tokens.badgeFontWeight, _Badge.badgeTokens.letterSpacing, _Avatar.tokens.badgeLetterSpacing, _Badge.badgeTokens.lineHeight, _Avatar.tokens.badgeLineHeight, _Badge.badgeTokens.leftContentMarginLeft, _Avatar.tokens.badgeLeftContentMarginLeft, _Badge.badgeTokens.leftContentMarginRight, _Avatar.tokens.badgeLeftContentMarginRight, _Badge.badgeTokens.rightContentMarginLeft, _Avatar.tokens.badgeRightContentMarginLeft, _Badge.badgeTokens.rightContentMarginRight, _Avatar.tokens.badgeRightContentMarginRight);
+var ExtraCounter = exports.ExtraCounter = /*#__PURE__*/(0, _styledComponents["default"])(Counter).withConfig({
+  componentId: "plasma-new-hope__sc-t16ccn-6"
+})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], _Counter.counterTokens.background, _Avatar.tokens.counterBackground, _Counter.counterTokens.color, _Avatar.tokens.counterColor, _Counter.counterTokens.borderRadius, _Avatar.tokens.counterBorderRadius, _Counter.counterTokens.height, _Avatar.tokens.counterHeight, _Counter.counterTokens.padding, _Avatar.tokens.counterPadding, _Counter.counterTokens.fontFamily, _Avatar.tokens.counterFontFamily, _Counter.counterTokens.fontSize, _Avatar.tokens.counterFontSize, _Counter.counterTokens.fontStyle, _Avatar.tokens.counterFontStyle, _Counter.counterTokens.fontWeight, _Avatar.tokens.counterFontWeight, _Counter.counterTokens.letterSpacing, _Avatar.tokens.counterLetterSpacing, _Counter.counterTokens.lineHeight, _Avatar.tokens.counterLineHeight);

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

@@ -147,3 +147,57 @@ export function App() {
 Опциональное свойство для корректной озвучки значений свойства `status`.
 
 По-умолчанию стоит значение для русскоговорящих `{ active: 'Активен', inactive: 'Неактивен' }`.
+
+#### Avatar и дополнительный контент
+
+Чтобы отобразить дополнительный контент нужно передать свойство `hasExtra`. 
+Тип дополнительного контента задается с помощью свойства `type`, а его вид с помощью `badgeView` и `counterView` соответственно.
+За положение дополнительного контента отвечает `extraPlacement`:
+
+```tsx live
+import React from 'react';
+import { Avatar } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <>
+            <Avatar
+                size="l"
+                name="Иван Фадеев"
+                extraPlacement="top-left"
+                type="counter"
+                count={33}
+                counterView="positive"
+                hasExtra
+            />
+            <Avatar
+                size="l"
+                name="Иван Фадеев"
+                extraPlacement="top-right"
+                type="counter"
+                count={33}
+                counterView="accent"
+                hasExtra
+            />
+            <Avatar
+                size="l"
+                name="Иван Фадеев"
+                extraPlacement="bottom-right"
+                type="badge"
+                text="15"
+                badgeView="warning"
+                hasExtra
+            />
+            <Avatar
+                size="l"
+                name="Иван Фадеев"
+                extraPlacement="bottom-left"
+                type="badge"
+                text="15"
+                badgeView="negative"
+                hasExtra
+            />
+        </>
+    );
+}
+```

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

@@ -5,7 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.tokens = exports.classes = void 0;
 var classes = exports.classes = {
-  avatarItem: 'avatar-item'
+  avatarItem: 'avatar-item',
+  extraPlacementTopRight: 'avatar-extra-placement-top-right',
+  extraPlacementTopLeft: 'avatar-extra-placement-top-left',
+  extraPlacementBottomLeft: 'avatar-extra-placement-bottom-left',
+  extraPlacementBottomRight: 'avatar-extra-placement-bottom-right'
 };
 var tokens = exports.tokens = {
   avatarSize: '--plasma-avatar-size',
@@ -21,5 +25,40 @@ var tokens = exports.tokens = {
   outlineColor: '--plasma-avatar-outline-color',
   outlineSize: '--plasma-avatar-outline-size',
   outlineOffset: '--plasma-avatar-outline-offset',
-  scaleHover: '--plasma-avatar-scale-hover'
+  scaleHover: '--plasma-avatar-scale-hover',
+  extraPlacementFactor: '--plasma-avatar-extra-placement-factor',
+  // extra badge tokens
+  badgeBackground: '--plasma-avatar-extra-badge-background',
+  badgeColor: '--plasma-avatar-extra-badge-color',
+  badgeBackgroundTransparent: '--plasma-avatar-extra-badge-background-transparent',
+  badgeColorTransparent: '--plasma-avatar-extra-badge-color-transparent',
+  badgeColorClear: '--plasma-avatar-extra-badge-color-clear',
+  badgeBackgroundClear: '--plasma-avatar-extra-badge-background-clear',
+  badgeBorderRadius: '--plasma-avatar-extra-badge-border-radius',
+  badgePilledBorderRadius: '--plasma-avatar-extra-badge-pilled-border-radius',
+  badgeHeight: '--plasma-avatar-extra-badge-height',
+  badgePadding: '--plasma-avatar-extra-badge-padding',
+  badgePaddingIconOnly: '--plasma-avatar-extra-badge-padding-icon-only',
+  badgeFontFamily: '--plasma-avatar-extra-badge-font-family',
+  badgeFontSize: '--plasma-avatar-extra-badge-font-size',
+  badgeFontStyle: '--plasma-avatar-extra-badge-font-style',
+  badgeFontWeight: '--plasma-avatar-extra-badge-font-weight',
+  badgeLetterSpacing: '--plasma-avatar-extra-badge-letter-spacing',
+  badgeLineHeight: '--plasma-avatar-extra-badge-lineheight',
+  badgeLeftContentMarginLeft: '--plasma-avatar-extra-badge-left-content-margin-left',
+  badgeLeftContentMarginRight: '--plasma-avatar-extra-badge-left-content-margin-right',
+  badgeRightContentMarginLeft: '--plasma-avatar-extra-badge-right-content-margin-left',
+  badgeRightContentMarginRight: '--plasma-avatar-extra-badge-right-content-margin-right',
+  // extra counter tokens
+  counterBackground: '--plasma-avatar-extra-counter-background',
+  counterColor: '--plasma-avatar-extra-counter-color',
+  counterBorderRadius: '--plasma-avatar-extra-counter-border-radius',
+  counterHeight: '--plasma-avatar-extra-counter-height',
+  counterPadding: '--plasma-avatar-extra-counter-padding',
+  counterFontFamily: '--plasma-avatar-extra-counter-font-family',
+  counterFontSize: '--plasma-avatar-extra-counter-font-size',
+  counterFontStyle: '--plasma-avatar-extra-counter-font-style',
+  counterFontWeight: '--plasma-avatar-extra-counter-font-weight',
+  counterLetterSpacing: '--plasma-avatar-extra-counter-letter-spacing',
+  counterLineHeight: '--plasma-avatar-extra-counter-lineheight'
 };

package/styled-components/cjs/components/Avatar/utils/index.js

@@ -3,10 +3,24 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.extraPlacementMap = void 0;
 Object.defineProperty(exports, "getInitialsForName", {
   enumerable: true,
   get: function get() {
     return _getInitialsForName.getInitialsForName;
   }
 });
-var _getInitialsForName = /*#__PURE__*/require("./getInitialsForName");
+var _Avatar = /*#__PURE__*/require("../Avatar.tokens");
+var _getInitialsForName = /*#__PURE__*/require("./getInitialsForName");
+var extraPlacementMap = exports.extraPlacementMap = function extraPlacementMap(extraPlacement) {
+  switch (extraPlacement) {
+    case 'top-left':
+      return _Avatar.classes.extraPlacementTopLeft;
+    case 'bottom-left':
+      return _Avatar.classes.extraPlacementBottomLeft;
+    case 'bottom-right':
+      return _Avatar.classes.extraPlacementBottomRight;
+    default:
+      return _Avatar.classes.extraPlacementTopRight;
+  }
+};

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

@@ -16,14 +16,32 @@ var config = exports.config = {
       "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-accent-gradient);", ":linear-gradient(94deg,rgba(62,121,240,0.2) 6.49%,rgba(39,198,229,0.2) 93.51%);", ":var(--surface-positive);", ":var(--surface-solid-tertiary);", ":1.02;"], _Avatar.tokens.color, _Avatar.tokens.backgroundColor, _Avatar.tokens.statusOnlineColor, _Avatar.tokens.statusOfflineColor, _Avatar.tokens.scaleHover)
     },
     size: {
-      xxl: /*#__PURE__*/(0, _styledComponents.css)(["", ":6.25rem;", ":2rem;", ":600;", ":2rem;", ":0.75rem;"], _Avatar.tokens.avatarSize, _Avatar.tokens.fontSize, _Avatar.tokens.fontWeight, _Avatar.tokens.lineHeight, _Avatar.tokens.statusIconSize),
-      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":3rem;", ":1.25rem;", ":600;", ":1.25rem;", ":0.5rem;"], _Avatar.tokens.avatarSize, _Avatar.tokens.fontSize, _Avatar.tokens.fontWeight, _Avatar.tokens.lineHeight, _Avatar.tokens.statusIconSize),
-      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.25rem;", ":0.875rem;", ":600;", ":0.875rem;", ":0.5rem;"], _Avatar.tokens.avatarSize, _Avatar.tokens.fontSize, _Avatar.tokens.fontWeight, _Avatar.tokens.lineHeight, _Avatar.tokens.statusIconSize),
-      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":0.5rem;", ":600;", ":0.5rem;", ":0.375rem;"], _Avatar.tokens.avatarSize, _Avatar.tokens.fontSize, _Avatar.tokens.fontWeight, _Avatar.tokens.lineHeight, _Avatar.tokens.statusIconSize),
+      xxl: /*#__PURE__*/(0, _styledComponents.css)(["", ":6.25rem;", ":2rem;", ":600;", ":2rem;", ":0.75rem;", ":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;", ":1.25rem;", ":1rem;", ":1.75rem;", ":0 0.625rem;", ":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);"], _Avatar.tokens.avatarSize, _Avatar.tokens.fontSize, _Avatar.tokens.fontWeight, _Avatar.tokens.lineHeight, _Avatar.tokens.statusIconSize, _Avatar.tokens.badgeBorderRadius, _Avatar.tokens.badgeHeight, _Avatar.tokens.badgePadding, _Avatar.tokens.badgePaddingIconOnly, _Avatar.tokens.badgeFontFamily, _Avatar.tokens.badgeFontSize, _Avatar.tokens.badgeFontStyle, _Avatar.tokens.badgeFontWeight, _Avatar.tokens.badgeLetterSpacing, _Avatar.tokens.badgeLineHeight, _Avatar.tokens.badgeLeftContentMarginLeft, _Avatar.tokens.badgeLeftContentMarginRight, _Avatar.tokens.badgeRightContentMarginLeft, _Avatar.tokens.badgeRightContentMarginRight, _Avatar.tokens.badgePilledBorderRadius, _Avatar.tokens.counterBorderRadius, _Avatar.tokens.counterHeight, _Avatar.tokens.counterPadding, _Avatar.tokens.counterFontFamily, _Avatar.tokens.counterFontSize, _Avatar.tokens.counterFontStyle, _Avatar.tokens.counterFontWeight, _Avatar.tokens.counterLetterSpacing, _Avatar.tokens.counterLineHeight),
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":3rem;", ":1.25rem;", ":600;", ":1.25rem;", ":0.5rem;", ":2;", ":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;", ":1.25rem;", ":1rem;", ":1.25rem;", ":0 0.375rem;", ":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);"], _Avatar.tokens.avatarSize, _Avatar.tokens.fontSize, _Avatar.tokens.fontWeight, _Avatar.tokens.lineHeight, _Avatar.tokens.statusIconSize, _Avatar.tokens.extraPlacementFactor, _Avatar.tokens.badgeBorderRadius, _Avatar.tokens.badgeHeight, _Avatar.tokens.badgePadding, _Avatar.tokens.badgePaddingIconOnly, _Avatar.tokens.badgeFontFamily, _Avatar.tokens.badgeFontSize, _Avatar.tokens.badgeFontStyle, _Avatar.tokens.badgeFontWeight, _Avatar.tokens.badgeLetterSpacing, _Avatar.tokens.badgeLineHeight, _Avatar.tokens.badgeLeftContentMarginLeft, _Avatar.tokens.badgeLeftContentMarginRight, _Avatar.tokens.badgeRightContentMarginLeft, _Avatar.tokens.badgeRightContentMarginRight, _Avatar.tokens.badgePilledBorderRadius, _Avatar.tokens.counterBorderRadius, _Avatar.tokens.counterHeight, _Avatar.tokens.counterPadding, _Avatar.tokens.counterFontFamily, _Avatar.tokens.counterFontSize, _Avatar.tokens.counterFontStyle, _Avatar.tokens.counterFontWeight, _Avatar.tokens.counterLetterSpacing, _Avatar.tokens.counterLineHeight),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.25rem;", ":0.875rem;", ":600;", ":0.875rem;", ":0.5rem;", ":2;", ":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;", ":1.25rem;", ":1rem;", ":1rem;", ":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);"], _Avatar.tokens.avatarSize, _Avatar.tokens.fontSize, _Avatar.tokens.fontWeight, _Avatar.tokens.lineHeight, _Avatar.tokens.statusIconSize, _Avatar.tokens.extraPlacementFactor, _Avatar.tokens.badgeBorderRadius, _Avatar.tokens.badgeHeight, _Avatar.tokens.badgePadding, _Avatar.tokens.badgePaddingIconOnly, _Avatar.tokens.badgeFontFamily, _Avatar.tokens.badgeFontSize, _Avatar.tokens.badgeFontStyle, _Avatar.tokens.badgeFontWeight, _Avatar.tokens.badgeLetterSpacing, _Avatar.tokens.badgeLineHeight, _Avatar.tokens.badgeLeftContentMarginLeft, _Avatar.tokens.badgeLeftContentMarginRight, _Avatar.tokens.badgeRightContentMarginLeft, _Avatar.tokens.badgeRightContentMarginRight, _Avatar.tokens.badgePilledBorderRadius, _Avatar.tokens.counterBorderRadius, _Avatar.tokens.counterHeight, _Avatar.tokens.counterPadding, _Avatar.tokens.counterFontFamily, _Avatar.tokens.counterFontSize, _Avatar.tokens.counterFontStyle, _Avatar.tokens.counterFontWeight, _Avatar.tokens.counterLetterSpacing, _Avatar.tokens.counterLineHeight),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":0.5rem;", ":600;", ":0.5rem;", ":0.375rem;", ":1;", ":1rem;", ":0.75rem;", ":0 0.125rem;", ":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);"], _Avatar.tokens.avatarSize, _Avatar.tokens.fontSize, _Avatar.tokens.fontWeight, _Avatar.tokens.lineHeight, _Avatar.tokens.statusIconSize, _Avatar.tokens.extraPlacementFactor, _Avatar.tokens.counterBorderRadius, _Avatar.tokens.counterHeight, _Avatar.tokens.counterPadding, _Avatar.tokens.counterFontFamily, _Avatar.tokens.counterFontSize, _Avatar.tokens.counterFontStyle, _Avatar.tokens.counterFontWeight, _Avatar.tokens.counterLetterSpacing, _Avatar.tokens.counterLineHeight),
       fit: /*#__PURE__*/(0, _styledComponents.css)(["", ":100%;", ":0;", ":0;", ":0;", ":0;"], _Avatar.tokens.avatarSize, _Avatar.tokens.fontSize, _Avatar.tokens.fontWeight, _Avatar.tokens.lineHeight, _Avatar.tokens.statusIconSize)
     },
     focused: {
       "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.1rem;", ":-0.2rem;", ":var(--surface-accent);"], _Avatar.tokens.outlineSize, _Avatar.tokens.outlineOffset, _Avatar.tokens.outlineColor)
+    },
+    badgeView: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-clear);"], _Avatar.tokens.badgeColor, _Avatar.tokens.badgeBackground, _Avatar.tokens.badgeColorTransparent, _Avatar.tokens.badgeBackgroundTransparent, _Avatar.tokens.badgeColorClear, _Avatar.tokens.badgeBackgroundClear),
+      accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--text-accent);", ":var(--surface-transparent-accent);", ":var(--text-accent);", ":var(--surface-clear)"], _Avatar.tokens.badgeColor, _Avatar.tokens.badgeBackground, _Avatar.tokens.badgeColorTransparent, _Avatar.tokens.badgeBackgroundTransparent, _Avatar.tokens.badgeColorClear, _Avatar.tokens.badgeBackgroundClear),
+      positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--text-positive);", ":var(--surface-transparent-positive);", ":var(--text-positive);", ":var(--surface-clear)"], _Avatar.tokens.badgeColor, _Avatar.tokens.badgeBackground, _Avatar.tokens.badgeColorTransparent, _Avatar.tokens.badgeBackgroundTransparent, _Avatar.tokens.badgeColorClear, _Avatar.tokens.badgeBackgroundClear),
+      warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--text-warning);", ":var(--surface-transparent-warning);", ":var(--text-warning);", ":var(--surface-clear)"], _Avatar.tokens.badgeColor, _Avatar.tokens.badgeBackground, _Avatar.tokens.badgeColorTransparent, _Avatar.tokens.badgeBackgroundTransparent, _Avatar.tokens.badgeColorClear, _Avatar.tokens.badgeBackgroundClear),
+      negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--text-negative);", ":var(--surface-transparent-negative);", ":var(--text-negative);", ":var(--surface-clear)"], _Avatar.tokens.badgeColor, _Avatar.tokens.badgeBackground, _Avatar.tokens.badgeColorTransparent, _Avatar.tokens.badgeBackgroundTransparent, _Avatar.tokens.badgeColorClear, _Avatar.tokens.badgeBackgroundClear),
+      dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-light-text-pri ", ":var(--surface-clear)mary);"], _Avatar.tokens.badgeColor, _Avatar.tokens.badgeBackground, _Avatar.tokens.badgeColorTransparent, _Avatar.tokens.badgeBackgroundTransparent, _Avatar.tokens.badgeColorClear, _Avatar.tokens.badgeBackgroundClear),
+      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-prima ", ":var(--surface-clear)ry);"], _Avatar.tokens.badgeColor, _Avatar.tokens.badgeBackground, _Avatar.tokens.badgeColorTransparent, _Avatar.tokens.badgeBackgroundTransparent, _Avatar.tokens.badgeColorClear, _Avatar.tokens.badgeBackgroundClear)
+    },
+    counterView: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);"], _Avatar.tokens.counterColor, _Avatar.tokens.counterBackground),
+      accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);"], _Avatar.tokens.counterColor, _Avatar.tokens.counterBackground),
+      positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);"], _Avatar.tokens.counterColor, _Avatar.tokens.counterBackground),
+      warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);"], _Avatar.tokens.counterColor, _Avatar.tokens.counterBackground),
+      negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);"], _Avatar.tokens.counterColor, _Avatar.tokens.counterBackground),
+      dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);"], _Avatar.tokens.counterColor, _Avatar.tokens.counterBackground),
+      light: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);"], _Avatar.tokens.counterColor, _Avatar.tokens.counterBackground)
     }
   }
 };

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { disableProps } from '@salutejs/plasma-sb-utils';
@@ -6,6 +7,11 @@ import { argTypesFromConfig, WithTheme } from '../../../_helpers';
 
 import { Avatar, mergedConfig } from './Avatar';
 
+const extraPlacements = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
+const extraType = ['', 'badge', 'counter'];
+const counterViews = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'];
+const badgeViews = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'];
+
 const meta: Meta<typeof Avatar> = {
     title: 'b2c/Data Display/Avatar',
     decorators: [WithTheme],
@@ -13,12 +19,77 @@ const meta: Meta<typeof Avatar> = {
     argTypes: {
         ...argTypesFromConfig(mergedConfig),
         status: { control: 'select', options: ['active', 'inactive'] },
+        type: {
+            control: 'select',
+            options: extraType,
+            if: { arg: 'hasExtra', truthy: true },
+        },
+        extraPlacement: {
+            control: 'select',
+            options: extraPlacements,
+            if: { arg: 'hasExtra', truthy: true },
+        },
+        counterView: {
+            control: 'select',
+            options: counterViews,
+            if: { arg: 'type', eq: 'counter' },
+        },
+        count: {
+            control: 'number',
+            if: { arg: 'type', eq: 'counter' },
+        },
+        maxCount: {
+            control: 'number',
+            if: { arg: 'type', eq: 'counter' },
+        },
+        badgeView: {
+            control: 'select',
+            options: badgeViews,
+            if: { arg: 'type', eq: 'badge' },
+        },
+        text: {
+            control: 'text',
+            if: { arg: 'type', eq: 'badge' },
+        },
+        customColor: {
+            control: 'color',
+            if: { arg: 'type', eq: 'badge' },
+        },
+        customBackgroundColor: {
+            control: 'color',
+            if: { arg: 'type', eq: 'badge' },
+        },
+        pilled: {
+            control: 'boolean',
+            if: { arg: 'type', eq: 'badge' },
+        },
+        transparent: {
+            control: 'boolean',
+            if: { arg: 'type', eq: 'badge' },
+        },
+        clear: {
+            control: 'boolean',
+            if: { arg: 'type', eq: 'badge' },
+        },
     },
 };
 
 export default meta;
 
-type Story = StoryObj<ComponentProps<typeof Avatar>>;
+type StoryProps = ComponentProps<typeof Avatar> & {
+    enableContentLeft: boolean;
+    enableContentRight: boolean;
+};
+type Story = StoryObj<StoryProps>;
+
+const BellIcon = (props) => (
+    <svg width="100%" viewBox="0 0 24 24" fill="none" {...props}>
+        <path
+            d="M11.501 21.28c1.088 0 1.978-.889 1.978-1.977H9.524c0 1.088.88 1.978 1.977 1.978zm5.933-5.932v-4.944c0-3.035-1.622-5.576-4.45-6.248v-.673c0-.82-.662-1.483-1.483-1.483-.82 0-1.483.662-1.483 1.483v.672c-2.838.673-4.45 3.204-4.45 6.25v4.943l-1.275 1.276c-.623.623-.188 1.69.692 1.69h13.022c.88 0 1.325-1.067.702-1.69l-1.275-1.276z"
+            fill="currentColor"
+        />
+    </svg>
+);
 
 export const Default: Story = {
     args: {
@@ -27,10 +98,58 @@ export const Default: Story = {
         name: 'Иван Фадеев',
         url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
         isScalable: false,
+        hasExtra: false,
+        extraPlacement: 'top-right',
+        type: undefined,
+        counterView: 'accent',
+        count: 3,
+        maxCount: 10,
+        badgeView: 'accent',
+        text: '31',
+        pilled: true,
+        clear: false,
+        transparent: false,
+        enableContentLeft: false,
+        enableContentRight: false,
     },
     argTypes: {
+        enableContentLeft: {
+            control: { type: 'boolean' },
+            if: { arg: 'type', eq: 'badge' },
+        },
+        enableContentRight: {
+            control: { type: 'boolean' },
+            if: { arg: 'type', eq: 'badge' },
+        },
         ...disableProps(['focused']),
     },
+    render: ({ enableContentLeft, enableContentRight, size, ...rest }: StoryProps) => {
+        const iconSize = () => {
+            switch (size) {
+                case 'xxl':
+                    return '1rem';
+                case 'm':
+                    return '0.625rem';
+                default:
+                    return '0.75rem';
+            }
+        };
+
+        return (
+            <>
+                <Avatar
+                    contentLeft={enableContentLeft ? <BellIcon width={iconSize()} height={iconSize()} /> : undefined}
+                    contentRight={
+                        !enableContentLeft && enableContentRight ? (
+                            <BellIcon width={iconSize()} height={iconSize()} />
+                        ) : undefined
+                    }
+                    size={size}
+                    {...rest}
+                />
+            </>
+        );
+    },
 };
 
 export const Accessibility: Story = {
@@ -42,6 +161,14 @@ export const Accessibility: Story = {
         size: 'xxl',
         status: 'active',
         focused: true,
+        hasExtra: false,
+        extraPlacement: 'top-right',
+        type: undefined,
+        counterView: 'accent',
+        count: 3,
+        maxCount: 10,
+        badgeView: 'accent',
+        text: '31',
     },
 };
 
@@ -55,6 +182,14 @@ export const AccessibilityWithURL: Story = {
         focused: true,
         name: 'Микула Селянинович',
         url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
+        hasExtra: false,
+        extraPlacement: 'top-right',
+        type: undefined,
+        counterView: 'accent',
+        count: 3,
+        maxCount: 10,
+        badgeView: 'accent',
+        text: '31',
     },
 };
 
@@ -67,5 +202,13 @@ export const AccessibilityWithCustomText: Story = {
         status: 'inactive',
         focused: true,
         customText: 'ФИО',
+        hasExtra: false,
+        extraPlacement: 'top-right',
+        type: undefined,
+        counterView: 'accent',
+        count: 3,
+        maxCount: 10,
+        badgeView: 'accent',
+        text: '31',
     },
 };

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

@@ -16,14 +16,32 @@ var config = exports.config = {
       "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-accent-gradient);", ":linear-gradient(94deg,rgba(62,121,240,0.2) 6.49%,rgba(39,198,229,0.2) 93.51%);", ":var(--surface-positive);", ":var(--surface-solid-tertiary);", ":1.02;"], _Avatar.tokens.color, _Avatar.tokens.backgroundColor, _Avatar.tokens.statusOnlineColor, _Avatar.tokens.statusOfflineColor, _Avatar.tokens.scaleHover)
     },
     size: {
-      xxl: /*#__PURE__*/(0, _styledComponents.css)(["", ":6.25rem;", ":2rem;", ":600;", ":2rem;", ":0.75rem;"], _Avatar.tokens.avatarSize, _Avatar.tokens.fontSize, _Avatar.tokens.fontWeight, _Avatar.tokens.lineHeight, _Avatar.tokens.statusIconSize),
-      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":3rem;", ":1.25rem;", ":600;", ":1.25rem;", ":0.5rem;"], _Avatar.tokens.avatarSize, _Avatar.tokens.fontSize, _Avatar.tokens.fontWeight, _Avatar.tokens.lineHeight, _Avatar.tokens.statusIconSize),
-      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.25rem;", ":0.875rem;", ":600;", ":0.875rem;", ":0.5rem;"], _Avatar.tokens.avatarSize, _Avatar.tokens.fontSize, _Avatar.tokens.fontWeight, _Avatar.tokens.lineHeight, _Avatar.tokens.statusIconSize),
-      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":0.5rem;", ":600;", ":0.5rem;", ":0.375rem;"], _Avatar.tokens.avatarSize, _Avatar.tokens.fontSize, _Avatar.tokens.fontWeight, _Avatar.tokens.lineHeight, _Avatar.tokens.statusIconSize),
+      xxl: /*#__PURE__*/(0, _styledComponents.css)(["", ":6.25rem;", ":2rem;", ":600;", ":2rem;", ":0.75rem;", ":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;", ":1.25rem;", ":1rem;", ":1.75rem;", ":0 0.625rem;", ":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);"], _Avatar.tokens.avatarSize, _Avatar.tokens.fontSize, _Avatar.tokens.fontWeight, _Avatar.tokens.lineHeight, _Avatar.tokens.statusIconSize, _Avatar.tokens.badgeBorderRadius, _Avatar.tokens.badgeHeight, _Avatar.tokens.badgePadding, _Avatar.tokens.badgePaddingIconOnly, _Avatar.tokens.badgeFontFamily, _Avatar.tokens.badgeFontSize, _Avatar.tokens.badgeFontStyle, _Avatar.tokens.badgeFontWeight, _Avatar.tokens.badgeLetterSpacing, _Avatar.tokens.badgeLineHeight, _Avatar.tokens.badgeLeftContentMarginLeft, _Avatar.tokens.badgeLeftContentMarginRight, _Avatar.tokens.badgeRightContentMarginLeft, _Avatar.tokens.badgeRightContentMarginRight, _Avatar.tokens.badgePilledBorderRadius, _Avatar.tokens.counterBorderRadius, _Avatar.tokens.counterHeight, _Avatar.tokens.counterPadding, _Avatar.tokens.counterFontFamily, _Avatar.tokens.counterFontSize, _Avatar.tokens.counterFontStyle, _Avatar.tokens.counterFontWeight, _Avatar.tokens.counterLetterSpacing, _Avatar.tokens.counterLineHeight),
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":3rem;", ":1.25rem;", ":600;", ":1.25rem;", ":0.5rem;", ":2;", ":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;", ":1.25rem;", ":1rem;", ":1.25rem;", ":0 0.375rem;", ":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);"], _Avatar.tokens.avatarSize, _Avatar.tokens.fontSize, _Avatar.tokens.fontWeight, _Avatar.tokens.lineHeight, _Avatar.tokens.statusIconSize, _Avatar.tokens.extraPlacementFactor, _Avatar.tokens.badgeBorderRadius, _Avatar.tokens.badgeHeight, _Avatar.tokens.badgePadding, _Avatar.tokens.badgePaddingIconOnly, _Avatar.tokens.badgeFontFamily, _Avatar.tokens.badgeFontSize, _Avatar.tokens.badgeFontStyle, _Avatar.tokens.badgeFontWeight, _Avatar.tokens.badgeLetterSpacing, _Avatar.tokens.badgeLineHeight, _Avatar.tokens.badgeLeftContentMarginLeft, _Avatar.tokens.badgeLeftContentMarginRight, _Avatar.tokens.badgeRightContentMarginLeft, _Avatar.tokens.badgeRightContentMarginRight, _Avatar.tokens.badgePilledBorderRadius, _Avatar.tokens.counterBorderRadius, _Avatar.tokens.counterHeight, _Avatar.tokens.counterPadding, _Avatar.tokens.counterFontFamily, _Avatar.tokens.counterFontSize, _Avatar.tokens.counterFontStyle, _Avatar.tokens.counterFontWeight, _Avatar.tokens.counterLetterSpacing, _Avatar.tokens.counterLineHeight),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.25rem;", ":0.875rem;", ":600;", ":0.875rem;", ":0.5rem;", ":2;", ":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;", ":1.25rem;", ":1rem;", ":1rem;", ":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);"], _Avatar.tokens.avatarSize, _Avatar.tokens.fontSize, _Avatar.tokens.fontWeight, _Avatar.tokens.lineHeight, _Avatar.tokens.statusIconSize, _Avatar.tokens.extraPlacementFactor, _Avatar.tokens.badgeBorderRadius, _Avatar.tokens.badgeHeight, _Avatar.tokens.badgePadding, _Avatar.tokens.badgePaddingIconOnly, _Avatar.tokens.badgeFontFamily, _Avatar.tokens.badgeFontSize, _Avatar.tokens.badgeFontStyle, _Avatar.tokens.badgeFontWeight, _Avatar.tokens.badgeLetterSpacing, _Avatar.tokens.badgeLineHeight, _Avatar.tokens.badgeLeftContentMarginLeft, _Avatar.tokens.badgeLeftContentMarginRight, _Avatar.tokens.badgeRightContentMarginLeft, _Avatar.tokens.badgeRightContentMarginRight, _Avatar.tokens.badgePilledBorderRadius, _Avatar.tokens.counterBorderRadius, _Avatar.tokens.counterHeight, _Avatar.tokens.counterPadding, _Avatar.tokens.counterFontFamily, _Avatar.tokens.counterFontSize, _Avatar.tokens.counterFontStyle, _Avatar.tokens.counterFontWeight, _Avatar.tokens.counterLetterSpacing, _Avatar.tokens.counterLineHeight),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":0.5rem;", ":600;", ":0.5rem;", ":0.375rem;", ":1;", ":1rem;", ":0.75rem;", ":0 0.125rem;", ":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);"], _Avatar.tokens.avatarSize, _Avatar.tokens.fontSize, _Avatar.tokens.fontWeight, _Avatar.tokens.lineHeight, _Avatar.tokens.statusIconSize, _Avatar.tokens.extraPlacementFactor, _Avatar.tokens.counterBorderRadius, _Avatar.tokens.counterHeight, _Avatar.tokens.counterPadding, _Avatar.tokens.counterFontFamily, _Avatar.tokens.counterFontSize, _Avatar.tokens.counterFontStyle, _Avatar.tokens.counterFontWeight, _Avatar.tokens.counterLetterSpacing, _Avatar.tokens.counterLineHeight),
       fit: /*#__PURE__*/(0, _styledComponents.css)(["", ":100%;", ":0;", ":0;", ":0;", ":0;"], _Avatar.tokens.avatarSize, _Avatar.tokens.fontSize, _Avatar.tokens.fontWeight, _Avatar.tokens.lineHeight, _Avatar.tokens.statusIconSize)
     },
     focused: {
       "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.1rem;", ":-0.2rem;", ":var(--surface-accent);"], _Avatar.tokens.outlineSize, _Avatar.tokens.outlineOffset, _Avatar.tokens.outlineColor)
+    },
+    badgeView: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-clear);"], _Avatar.tokens.badgeColor, _Avatar.tokens.badgeBackground, _Avatar.tokens.badgeColorTransparent, _Avatar.tokens.badgeBackgroundTransparent, _Avatar.tokens.badgeColorClear, _Avatar.tokens.badgeBackgroundClear),
+      accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--text-accent);", ":var(--surface-transparent-accent);", ":var(--text-accent);", ":var(--surface-clear)"], _Avatar.tokens.badgeColor, _Avatar.tokens.badgeBackground, _Avatar.tokens.badgeColorTransparent, _Avatar.tokens.badgeBackgroundTransparent, _Avatar.tokens.badgeColorClear, _Avatar.tokens.badgeBackgroundClear),
+      positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--text-positive);", ":var(--surface-transparent-positive);", ":var(--text-positive);", ":var(--surface-clear)"], _Avatar.tokens.badgeColor, _Avatar.tokens.badgeBackground, _Avatar.tokens.badgeColorTransparent, _Avatar.tokens.badgeBackgroundTransparent, _Avatar.tokens.badgeColorClear, _Avatar.tokens.badgeBackgroundClear),
+      warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--text-warning);", ":var(--surface-transparent-warning);", ":var(--text-warning);", ":var(--surface-clear)"], _Avatar.tokens.badgeColor, _Avatar.tokens.badgeBackground, _Avatar.tokens.badgeColorTransparent, _Avatar.tokens.badgeBackgroundTransparent, _Avatar.tokens.badgeColorClear, _Avatar.tokens.badgeBackgroundClear),
+      negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--text-negative);", ":var(--surface-transparent-negative);", ":var(--text-negative);", ":var(--surface-clear)"], _Avatar.tokens.badgeColor, _Avatar.tokens.badgeBackground, _Avatar.tokens.badgeColorTransparent, _Avatar.tokens.badgeBackgroundTransparent, _Avatar.tokens.badgeColorClear, _Avatar.tokens.badgeBackgroundClear),
+      dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-light-text-pri ", ":var(--surface-clear)mary);"], _Avatar.tokens.badgeColor, _Avatar.tokens.badgeBackground, _Avatar.tokens.badgeColorTransparent, _Avatar.tokens.badgeBackgroundTransparent, _Avatar.tokens.badgeColorClear, _Avatar.tokens.badgeBackgroundClear),
+      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-prima ", ":var(--surface-clear)ry);"], _Avatar.tokens.badgeColor, _Avatar.tokens.badgeBackground, _Avatar.tokens.badgeColorTransparent, _Avatar.tokens.badgeBackgroundTransparent, _Avatar.tokens.badgeColorClear, _Avatar.tokens.badgeBackgroundClear)
+    },
+    counterView: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);"], _Avatar.tokens.counterColor, _Avatar.tokens.counterBackground),
+      accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);"], _Avatar.tokens.counterColor, _Avatar.tokens.counterBackground),
+      positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);"], _Avatar.tokens.counterColor, _Avatar.tokens.counterBackground),
+      warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);"], _Avatar.tokens.counterColor, _Avatar.tokens.counterBackground),
+      negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);"], _Avatar.tokens.counterColor, _Avatar.tokens.counterBackground),
+      dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);"], _Avatar.tokens.counterColor, _Avatar.tokens.counterBackground),
+      light: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);"], _Avatar.tokens.counterColor, _Avatar.tokens.counterBackground)
     }
   }
 };