@salutejs/sdds-serv 0.225.1-canary.1707.12823225023.0 → 0.226.0-dev.0

package/components/Tabs/horizontal/HorizontalTabs.config.js

@@ -1,4 +1,4 @@
-require('./HorizontalTabs.config_r01l94.css');
+import './HorizontalTabs.config_r01l94.css';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/components/Tabs/vertical/VerticalTabItem.config.js

@@ -1,4 +1,4 @@
-require('./VerticalTabItem.config_1b9301p.css');
+import './VerticalTabItem.config_1b9301p.css';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/components/Tabs/vertical/VerticalTabs.config.js

@@ -1,4 +1,4 @@
-require('./VerticalTabs.config_cqbb3f.css');
+import './VerticalTabs.config_cqbb3f.css';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/components/TextArea/TextArea.config.js

@@ -1,4 +1,4 @@
-require('./TextArea.config_1mpq6sw.css');
+import './TextArea.config_1mpq6sw.css';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/components/TextField/TextField.config.js

@@ -1,4 +1,4 @@
-require('./TextField.config_sjc8tu.css');
+import './TextField.config_sjc8tu.css';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/components/TextFieldGroup/TextFieldGroup.config.js

@@ -1,4 +1,4 @@
-require('./TextFieldGroup.config_1gikqtw.css');
+import './TextFieldGroup.config_1gikqtw.css';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/components/Toast/Toast.config.js

@@ -1,4 +1,4 @@
-require('./Toast.config_7vhrqm.css');
+import './Toast.config_7vhrqm.css';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/components/Toolbar/Toolbar.config.js

@@ -1,4 +1,4 @@
-require('./Toolbar.config_1yum23z.css');
+import './Toolbar.config_1yum23z.css';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/components/Tooltip/Tooltip.config.js

@@ -1,4 +1,4 @@
-require('./Tooltip.config_19fazns.css');
+import './Tooltip.config_19fazns.css';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/components/Tree/Tree.config.js

@@ -1,4 +1,4 @@
-require('./Tree.config_1adspmr.css');
+import './Tree.config_1adspmr.css';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/components/Typography/Body.config.js

@@ -1,4 +1,4 @@
-require('./Body.config_endr2e.css');
+import './Body.config_endr2e.css';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/components/Typography/Dspl.config.js

@@ -1,4 +1,4 @@
-require('./Dspl.config_owrt7v.css');
+import './Dspl.config_owrt7v.css';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/components/Typography/Heading.config.js

@@ -1,4 +1,4 @@
-require('./Heading.config_1fd36gz.css');
+import './Heading.config_1fd36gz.css';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/components/Typography/Text.config.js

@@ -1,4 +1,4 @@
-require('./Text.config_ta1h5z.css');
+import './Text.config_ta1h5z.css';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/components/ViewContainer/ViewContainer.config.js

@@ -1,4 +1,4 @@
-require('./ViewContainer.config_10lsxqu.css');
+import './ViewContainer.config_10lsxqu.css';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/emotion/cjs/components/Avatar/Avatar.config.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.config = void 0;
 var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var config = exports.config = {
   defaults: {
@@ -18,14 +18,32 @@ var config = exports.config = {
     },
     size: {
       // TODO: #1044 токены типографики в Avatar
-      xxl: /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 6.25rem;\n                ", ": 2rem;\n                ", ": 600;\n                ", ": 2rem;\n                ", ": 0.75rem;\n            "])), _emotion.avatarTokens.avatarSize, _emotion.avatarTokens.fontSize, _emotion.avatarTokens.fontWeight, _emotion.avatarTokens.lineHeight, _emotion.avatarTokens.statusIconSize),
-      l: /*#__PURE__*/(0, _emotion.css)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 3rem;\n                ", ": 1.25rem;\n                ", ": 600;\n                ", ": 1.25rem;\n                ", ": 0.5rem;\n            "])), _emotion.avatarTokens.avatarSize, _emotion.avatarTokens.fontSize, _emotion.avatarTokens.fontWeight, _emotion.avatarTokens.lineHeight, _emotion.avatarTokens.statusIconSize),
-      m: /*#__PURE__*/(0, _emotion.css)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 2.25rem;\n                ", ": 0.875rem;\n                ", ": 600;\n                ", ": 0.875rem;\n                ", ": 0.5rem;\n            "])), _emotion.avatarTokens.avatarSize, _emotion.avatarTokens.fontSize, _emotion.avatarTokens.fontWeight, _emotion.avatarTokens.lineHeight, _emotion.avatarTokens.statusIconSize),
-      s: /*#__PURE__*/(0, _emotion.css)(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 1.5rem;\n                ", ": 0.5rem;\n                ", ": 600;\n                ", ": 0.5rem;\n                ", ": 0.375rem;\n            "])), _emotion.avatarTokens.avatarSize, _emotion.avatarTokens.fontSize, _emotion.avatarTokens.fontWeight, _emotion.avatarTokens.lineHeight, _emotion.avatarTokens.statusIconSize),
+      xxl: /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 6.25rem;\n                ", ": 2rem;\n                ", ": 600;\n                ", ": 2rem;\n                ", ": 0.75rem;\n\n                ", ": 0.5rem;\n                ", ": 1.75rem;\n                ", ": 0 0.688rem;\n                ", ": 0 0.375rem;\n\n                ", ": var(--plasma-typo-body-s-font-family);\n                ", ": var(--plasma-typo-body-s-font-size);\n                ", ": var(--plasma-typo-body-s-font-style);\n                ", ": var(--plasma-typo-body-s-font-weight);\n                ", ": var(--plasma-typo-body-s-letter-spacing);\n                ", ": var(--plasma-typo-body-s-line-height);\n\n                ", ": -0.063rem;\n                ", ": 0.25rem;\n\n                ", ": 0.25rem;\n                ", ": -0.063rem;\n                ", ": 1.25rem;\n\n                ", ": 1rem;\n                ", ": 1.75rem;\n                ", ": 0 0.625rem;\n                ", ": var(--plasma-typo-body-s-font-family);\n                ", ": var(--plasma-typo-body-s-font-size);\n                ", ": var(--plasma-typo-body-s-font-style);\n                ", ": var(--plasma-typo-body-s-font-weight);\n                ", ": var(--plasma-typo-body-s-letter-spacing);\n                ", ": var(--plasma-typo-body-s-line-height);\n            "])), _emotion.avatarTokens.avatarSize, _emotion.avatarTokens.fontSize, _emotion.avatarTokens.fontWeight, _emotion.avatarTokens.lineHeight, _emotion.avatarTokens.statusIconSize, _emotion.avatarTokens.badgeBorderRadius, _emotion.avatarTokens.badgeHeight, _emotion.avatarTokens.badgePadding, _emotion.avatarTokens.badgePaddingIconOnly, _emotion.avatarTokens.badgeFontFamily, _emotion.avatarTokens.badgeFontSize, _emotion.avatarTokens.badgeFontStyle, _emotion.avatarTokens.badgeFontWeight, _emotion.avatarTokens.badgeLetterSpacing, _emotion.avatarTokens.badgeLineHeight, _emotion.avatarTokens.badgeLeftContentMarginLeft, _emotion.avatarTokens.badgeLeftContentMarginRight, _emotion.avatarTokens.badgeRightContentMarginLeft, _emotion.avatarTokens.badgeRightContentMarginRight, _emotion.avatarTokens.badgePilledBorderRadius, _emotion.avatarTokens.counterBorderRadius, _emotion.avatarTokens.counterHeight, _emotion.avatarTokens.counterPadding, _emotion.avatarTokens.counterFontFamily, _emotion.avatarTokens.counterFontSize, _emotion.avatarTokens.counterFontStyle, _emotion.avatarTokens.counterFontWeight, _emotion.avatarTokens.counterLetterSpacing, _emotion.avatarTokens.counterLineHeight),
+      l: /*#__PURE__*/(0, _emotion.css)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 3rem;\n                ", ": 1.25rem;\n                ", ": 600;\n                ", ": 1.25rem;\n                ", ": 0.5rem;\n\n                ", ": 2;\n\n                ", ": 0.375rem;\n                ", ": 1.25rem;\n                ", ": 0 0.438rem;\n                ", ": 0 0.25rem;\n\n                ", ": var(--plasma-typo-body-xxs-font-family);\n                ", ": var(--plasma-typo-body-xxs-font-size);\n                ", ": var(--plasma-typo-body-xxs-font-style);\n                ", ": var(--plasma-typo-body-xxs-font-weight);\n                ", ": var(--plasma-typo-body-xxs-letter-spacing);\n                ", ": var(--plasma-typo-body-xxs-line-height);\n\n                ", ": -0.063rem;\n                ", ": 0.125rem;\n\n                ", ": 0.125rem;\n                ", ": -0.063rem;\n                ", ": 1.25rem;\n\n                ", ": 1rem;\n                ", ": 1.25rem;\n                ", ": 0 0.375rem;\n                ", ": var(--plasma-typo-body-xxs-font-family);\n                ", ": var(--plasma-typo-body-xxs-font-size);\n                ", ": var(--plasma-typo-body-xxs-font-style);\n                ", ": var(--plasma-typo-body-xxs-font-weight);\n                ", ": var(--plasma-typo-body-xxs-letter-spacing);\n                ", ": var(--plasma-typo-body-xxs-line-height);\n            "])), _emotion.avatarTokens.avatarSize, _emotion.avatarTokens.fontSize, _emotion.avatarTokens.fontWeight, _emotion.avatarTokens.lineHeight, _emotion.avatarTokens.statusIconSize, _emotion.avatarTokens.extraPlacementFactor, _emotion.avatarTokens.badgeBorderRadius, _emotion.avatarTokens.badgeHeight, _emotion.avatarTokens.badgePadding, _emotion.avatarTokens.badgePaddingIconOnly, _emotion.avatarTokens.badgeFontFamily, _emotion.avatarTokens.badgeFontSize, _emotion.avatarTokens.badgeFontStyle, _emotion.avatarTokens.badgeFontWeight, _emotion.avatarTokens.badgeLetterSpacing, _emotion.avatarTokens.badgeLineHeight, _emotion.avatarTokens.badgeLeftContentMarginLeft, _emotion.avatarTokens.badgeLeftContentMarginRight, _emotion.avatarTokens.badgeRightContentMarginLeft, _emotion.avatarTokens.badgeRightContentMarginRight, _emotion.avatarTokens.badgePilledBorderRadius, _emotion.avatarTokens.counterBorderRadius, _emotion.avatarTokens.counterHeight, _emotion.avatarTokens.counterPadding, _emotion.avatarTokens.counterFontFamily, _emotion.avatarTokens.counterFontSize, _emotion.avatarTokens.counterFontStyle, _emotion.avatarTokens.counterFontWeight, _emotion.avatarTokens.counterLetterSpacing, _emotion.avatarTokens.counterLineHeight),
+      m: /*#__PURE__*/(0, _emotion.css)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 2.25rem;\n                ", ": 0.875rem;\n                ", ": 600;\n                ", ": 0.875rem;\n                ", ": 0.5rem;\n\n                ", ": 2;\n\n                ", ": 0.25rem;\n                ", ": 1rem;\n                ", ": 0 0.25rem;\n                ", ": 0 0.188rem;\n\n                ", ": var(--plasma-typo-body-xxs-font-family);\n                ", ": var(--plasma-typo-body-xxs-font-size);\n                ", ": var(--plasma-typo-body-xxs-font-style);\n                ", ": var(--plasma-typo-body-xxs-font-weight);\n                ", ": var(--plasma-typo-body-xxs-letter-spacing);\n                ", ": var(--plasma-typo-body-xxs-line-height);\n\n                ", ": -0.063rem;\n                ", ": 0.125rem;\n\n                ", ": 0.125rem;\n                ", ": -0.063rem;\n                ", ": 1.25rem;\n\n                ", ": 1rem;\n                ", ": 1rem;\n                ", ": 0 0.25rem;\n                ", ": var(--plasma-typo-body-xxs-font-family);\n                ", ": var(--plasma-typo-body-xxs-font-size);\n                ", ": var(--plasma-typo-body-xxs-font-style);\n                ", ": var(--plasma-typo-body-xxs-font-weight);\n                ", ": var(--plasma-typo-body-xxs-letter-spacing);\n                ", ": var(--plasma-typo-body-xxs-line-height);\n            "])), _emotion.avatarTokens.avatarSize, _emotion.avatarTokens.fontSize, _emotion.avatarTokens.fontWeight, _emotion.avatarTokens.lineHeight, _emotion.avatarTokens.statusIconSize, _emotion.avatarTokens.extraPlacementFactor, _emotion.avatarTokens.badgeBorderRadius, _emotion.avatarTokens.badgeHeight, _emotion.avatarTokens.badgePadding, _emotion.avatarTokens.badgePaddingIconOnly, _emotion.avatarTokens.badgeFontFamily, _emotion.avatarTokens.badgeFontSize, _emotion.avatarTokens.badgeFontStyle, _emotion.avatarTokens.badgeFontWeight, _emotion.avatarTokens.badgeLetterSpacing, _emotion.avatarTokens.badgeLineHeight, _emotion.avatarTokens.badgeLeftContentMarginLeft, _emotion.avatarTokens.badgeLeftContentMarginRight, _emotion.avatarTokens.badgeRightContentMarginLeft, _emotion.avatarTokens.badgeRightContentMarginRight, _emotion.avatarTokens.badgePilledBorderRadius, _emotion.avatarTokens.counterBorderRadius, _emotion.avatarTokens.counterHeight, _emotion.avatarTokens.counterPadding, _emotion.avatarTokens.counterFontFamily, _emotion.avatarTokens.counterFontSize, _emotion.avatarTokens.counterFontStyle, _emotion.avatarTokens.counterFontWeight, _emotion.avatarTokens.counterLetterSpacing, _emotion.avatarTokens.counterLineHeight),
+      s: /*#__PURE__*/(0, _emotion.css)(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 1.5rem;\n                ", ": 0.5rem;\n                ", ": 600;\n                ", ": 0.5rem;\n                ", ": 0.375rem;\n\n                ", ": 1;\n\n                ", ": 1rem;\n                ", ": 0.75rem;\n                ", ": 0 0.125rem;\n                ", ": var(--plasma-typo-body-xxs-font-family);\n                ", ": var(--plasma-typo-body-xxs-font-size);\n                ", ": var(--plasma-typo-body-xxs-font-style);\n                ", ": var(--plasma-typo-body-xxs-font-weight);\n                ", ": var(--plasma-typo-body-xxs-letter-spacing);\n                ", ": var(--plasma-typo-body-xxs-line-height);\n            "])), _emotion.avatarTokens.avatarSize, _emotion.avatarTokens.fontSize, _emotion.avatarTokens.fontWeight, _emotion.avatarTokens.lineHeight, _emotion.avatarTokens.statusIconSize, _emotion.avatarTokens.extraPlacementFactor, _emotion.avatarTokens.counterBorderRadius, _emotion.avatarTokens.counterHeight, _emotion.avatarTokens.counterPadding, _emotion.avatarTokens.counterFontFamily, _emotion.avatarTokens.counterFontSize, _emotion.avatarTokens.counterFontStyle, _emotion.avatarTokens.counterFontWeight, _emotion.avatarTokens.counterLetterSpacing, _emotion.avatarTokens.counterLineHeight),
       fit: /*#__PURE__*/(0, _emotion.css)(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 100%;\n                ", ": 0;\n                ", ": 0;\n                ", ": 0;\n                ", ": 0;\n            "])), _emotion.avatarTokens.avatarSize, _emotion.avatarTokens.fontSize, _emotion.avatarTokens.fontWeight, _emotion.avatarTokens.lineHeight, _emotion.avatarTokens.statusIconSize)
     },
     focused: {
       "true": /*#__PURE__*/(0, _emotion.css)(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.1rem;\n                ", ": -0.2rem;\n                ", ": var(--surface-accent);\n            "])), _emotion.avatarTokens.outlineSize, _emotion.avatarTokens.outlineOffset, _emotion.avatarTokens.outlineColor)
+    },
+    badgeView: {
+      "default": /*#__PURE__*/(0, _emotion.css)(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--inverse-text-primary);\n                ", ": var(--surface-solid-default);\n\n                ", ": var(--text-primary);\n                ", ": var(--surface-transparent-secondary);\n\n                ", ": var(--text-primary);\n                ", ": var(--surface-clear);\n            "])), _emotion.avatarTokens.badgeColor, _emotion.avatarTokens.badgeBackground, _emotion.avatarTokens.badgeColorTransparent, _emotion.avatarTokens.badgeBackgroundTransparent, _emotion.avatarTokens.badgeColorClear, _emotion.avatarTokens.badgeBackgroundClear),
+      accent: /*#__PURE__*/(0, _emotion.css)(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--surface-accent);\n\n                ", ": var(--text-accent);\n                ", ": var(--surface-transparent-accent);\n\n                ", ": var(--text-accent);\n                ", ": var(--surface-clear);\n            "])), _emotion.avatarTokens.badgeColor, _emotion.avatarTokens.badgeBackground, _emotion.avatarTokens.badgeColorTransparent, _emotion.avatarTokens.badgeBackgroundTransparent, _emotion.avatarTokens.badgeColorClear, _emotion.avatarTokens.badgeBackgroundClear),
+      positive: /*#__PURE__*/(0, _emotion.css)(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--surface-positive);\n\n                ", ": var(--text-positive);\n                ", ": var(--surface-transparent-positive);\n\n                ", ": var(--text-positive);\n                ", ": var(--surface-clear);\n            "])), _emotion.avatarTokens.badgeColor, _emotion.avatarTokens.badgeBackground, _emotion.avatarTokens.badgeColorTransparent, _emotion.avatarTokens.badgeBackgroundTransparent, _emotion.avatarTokens.badgeColorClear, _emotion.avatarTokens.badgeBackgroundClear),
+      warning: /*#__PURE__*/(0, _emotion.css)(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--surface-warning);\n\n                ", ": var(--text-warning);\n                ", ": var(--surface-transparent-warning);\n\n                ", ": var(--text-warning);\n                ", ": var(--surface-clear);\n            "])), _emotion.avatarTokens.badgeColor, _emotion.avatarTokens.badgeBackground, _emotion.avatarTokens.badgeColorTransparent, _emotion.avatarTokens.badgeBackgroundTransparent, _emotion.avatarTokens.badgeColorClear, _emotion.avatarTokens.badgeBackgroundClear),
+      negative: /*#__PURE__*/(0, _emotion.css)(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--surface-negative);\n\n                ", ": var(--text-negative);\n                ", ": var(--surface-transparent-negative);\n\n                ", ": var(--text-negative);\n                ", ": var(--surface-clear);\n            "])), _emotion.avatarTokens.badgeColor, _emotion.avatarTokens.badgeBackground, _emotion.avatarTokens.badgeColorTransparent, _emotion.avatarTokens.badgeBackgroundTransparent, _emotion.avatarTokens.badgeColorClear, _emotion.avatarTokens.badgeBackgroundClear),
+      dark: /*#__PURE__*/(0, _emotion.css)(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--on-light-surface-solid-default);\n\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--on-light-surface-transparent-deep);\n\n                ", ": var(--on-light-text-primary);\n                ", ": var(--surface-clear);\n            "])), _emotion.avatarTokens.badgeColor, _emotion.avatarTokens.badgeBackground, _emotion.avatarTokens.badgeColorTransparent, _emotion.avatarTokens.badgeBackgroundTransparent, _emotion.avatarTokens.badgeColorClear, _emotion.avatarTokens.badgeBackgroundClear),
+      light: /*#__PURE__*/(0, _emotion.css)(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--on-light-text-primary);\n                ", ": var(--on-dark-surface-solid-default);\n\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--on-dark-surface-transparent-card);\n\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--surface-clear);\n            "])), _emotion.avatarTokens.badgeColor, _emotion.avatarTokens.badgeBackground, _emotion.avatarTokens.badgeColorTransparent, _emotion.avatarTokens.badgeBackgroundTransparent, _emotion.avatarTokens.badgeColorClear, _emotion.avatarTokens.badgeBackgroundClear)
+    },
+    counterView: {
+      "default": /*#__PURE__*/(0, _emotion.css)(_templateObject15 || (_templateObject15 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--inverse-text-primary);\n                ", ": var(--surface-solid-default);\n            "])), _emotion.avatarTokens.counterColor, _emotion.avatarTokens.counterBackground),
+      accent: /*#__PURE__*/(0, _emotion.css)(_templateObject16 || (_templateObject16 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--surface-accent);\n            "])), _emotion.avatarTokens.counterColor, _emotion.avatarTokens.counterBackground),
+      positive: /*#__PURE__*/(0, _emotion.css)(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--surface-positive);\n            "])), _emotion.avatarTokens.counterColor, _emotion.avatarTokens.counterBackground),
+      warning: /*#__PURE__*/(0, _emotion.css)(_templateObject18 || (_templateObject18 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--surface-warning);\n            "])), _emotion.avatarTokens.counterColor, _emotion.avatarTokens.counterBackground),
+      negative: /*#__PURE__*/(0, _emotion.css)(_templateObject19 || (_templateObject19 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--surface-negative);\n            "])), _emotion.avatarTokens.counterColor, _emotion.avatarTokens.counterBackground),
+      dark: /*#__PURE__*/(0, _emotion.css)(_templateObject20 || (_templateObject20 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--on-light-surface-solid-default);\n            "])), _emotion.avatarTokens.counterColor, _emotion.avatarTokens.counterBackground),
+      light: /*#__PURE__*/(0, _emotion.css)(_templateObject21 || (_templateObject21 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--on-light-text-primary);\n                ", ": var(--on-dark-surface-solid-default);\n            "])), _emotion.avatarTokens.counterColor, _emotion.avatarTokens.counterBackground)
     }
   }
 };

package/emotion/cjs/components/Avatar/Avatar.stories.tsx

@@ -1,9 +1,15 @@
+import React from 'react';
 import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { disableProps } from '@salutejs/plasma-sb-utils';
 
 import { Avatar } 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: 'Data Display/Avatar',
     component: Avatar,
@@ -11,12 +17,69 @@ const meta: Meta<typeof Avatar> = {
         view: { control: 'inline-radio', options: ['default'] },
         size: { control: 'select', options: ['xxl', 'l', 'm', 's', 'fit'] },
         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' },
+        },
     },
 };
 
 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: {
@@ -24,21 +87,75 @@ export const Default: Story = {
         size: 'xxl',
         name: 'Иван Фадеев',
         url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
-        status: 'active',
         isScalable: false,
+        hasExtra: false,
+        extraPlacement: 'top-right',
+        type: undefined,
+        counterView: 'accent',
+        count: 3,
+        maxCount: 10,
+        badgeView: 'accent',
+        text: '31',
+        pilled: true,
+        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 = {
     args: {
         role: 'button',
+        name: 'Иван Фадеев',
         tabIndex: 0,
         view: 'default',
         size: 'xxl',
-        name: 'Иван Фадеев',
         status: 'active',
+        focused: true,
+        hasExtra: false,
+        extraPlacement: 'top-right',
+        type: undefined,
+        counterView: 'accent',
+        count: 3,
+        maxCount: 10,
+        badgeView: 'accent',
+        text: '31',
     },
 };

package/emotion/es/components/Avatar/Avatar.config.js

@@ -1,4 +1,4 @@
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { css, avatarTokens as tokens } from '@salutejs/plasma-new-hope/emotion';
 export var config = {
@@ -12,14 +12,32 @@ export var config = {
     },
     size: {
       // TODO: #1044 токены типографики в Avatar
-      xxl: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 6.25rem;\n                ", ": 2rem;\n                ", ": 600;\n                ", ": 2rem;\n                ", ": 0.75rem;\n            "])), tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize),
-      l: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 3rem;\n                ", ": 1.25rem;\n                ", ": 600;\n                ", ": 1.25rem;\n                ", ": 0.5rem;\n            "])), tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize),
-      m: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 2.25rem;\n                ", ": 0.875rem;\n                ", ": 600;\n                ", ": 0.875rem;\n                ", ": 0.5rem;\n            "])), tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize),
-      s: /*#__PURE__*/css(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 1.5rem;\n                ", ": 0.5rem;\n                ", ": 600;\n                ", ": 0.5rem;\n                ", ": 0.375rem;\n            "])), tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize),
+      xxl: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 6.25rem;\n                ", ": 2rem;\n                ", ": 600;\n                ", ": 2rem;\n                ", ": 0.75rem;\n\n                ", ": 0.5rem;\n                ", ": 1.75rem;\n                ", ": 0 0.688rem;\n                ", ": 0 0.375rem;\n\n                ", ": var(--plasma-typo-body-s-font-family);\n                ", ": var(--plasma-typo-body-s-font-size);\n                ", ": var(--plasma-typo-body-s-font-style);\n                ", ": var(--plasma-typo-body-s-font-weight);\n                ", ": var(--plasma-typo-body-s-letter-spacing);\n                ", ": var(--plasma-typo-body-s-line-height);\n\n                ", ": -0.063rem;\n                ", ": 0.25rem;\n\n                ", ": 0.25rem;\n                ", ": -0.063rem;\n                ", ": 1.25rem;\n\n                ", ": 1rem;\n                ", ": 1.75rem;\n                ", ": 0 0.625rem;\n                ", ": var(--plasma-typo-body-s-font-family);\n                ", ": var(--plasma-typo-body-s-font-size);\n                ", ": var(--plasma-typo-body-s-font-style);\n                ", ": var(--plasma-typo-body-s-font-weight);\n                ", ": var(--plasma-typo-body-s-letter-spacing);\n                ", ": var(--plasma-typo-body-s-line-height);\n            "])), tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize, tokens.badgeBorderRadius, tokens.badgeHeight, tokens.badgePadding, tokens.badgePaddingIconOnly, tokens.badgeFontFamily, tokens.badgeFontSize, tokens.badgeFontStyle, tokens.badgeFontWeight, tokens.badgeLetterSpacing, tokens.badgeLineHeight, tokens.badgeLeftContentMarginLeft, tokens.badgeLeftContentMarginRight, tokens.badgeRightContentMarginLeft, tokens.badgeRightContentMarginRight, tokens.badgePilledBorderRadius, tokens.counterBorderRadius, tokens.counterHeight, tokens.counterPadding, tokens.counterFontFamily, tokens.counterFontSize, tokens.counterFontStyle, tokens.counterFontWeight, tokens.counterLetterSpacing, tokens.counterLineHeight),
+      l: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 3rem;\n                ", ": 1.25rem;\n                ", ": 600;\n                ", ": 1.25rem;\n                ", ": 0.5rem;\n\n                ", ": 2;\n\n                ", ": 0.375rem;\n                ", ": 1.25rem;\n                ", ": 0 0.438rem;\n                ", ": 0 0.25rem;\n\n                ", ": var(--plasma-typo-body-xxs-font-family);\n                ", ": var(--plasma-typo-body-xxs-font-size);\n                ", ": var(--plasma-typo-body-xxs-font-style);\n                ", ": var(--plasma-typo-body-xxs-font-weight);\n                ", ": var(--plasma-typo-body-xxs-letter-spacing);\n                ", ": var(--plasma-typo-body-xxs-line-height);\n\n                ", ": -0.063rem;\n                ", ": 0.125rem;\n\n                ", ": 0.125rem;\n                ", ": -0.063rem;\n                ", ": 1.25rem;\n\n                ", ": 1rem;\n                ", ": 1.25rem;\n                ", ": 0 0.375rem;\n                ", ": var(--plasma-typo-body-xxs-font-family);\n                ", ": var(--plasma-typo-body-xxs-font-size);\n                ", ": var(--plasma-typo-body-xxs-font-style);\n                ", ": var(--plasma-typo-body-xxs-font-weight);\n                ", ": var(--plasma-typo-body-xxs-letter-spacing);\n                ", ": var(--plasma-typo-body-xxs-line-height);\n            "])), tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize, tokens.extraPlacementFactor, tokens.badgeBorderRadius, tokens.badgeHeight, tokens.badgePadding, tokens.badgePaddingIconOnly, tokens.badgeFontFamily, tokens.badgeFontSize, tokens.badgeFontStyle, tokens.badgeFontWeight, tokens.badgeLetterSpacing, tokens.badgeLineHeight, tokens.badgeLeftContentMarginLeft, tokens.badgeLeftContentMarginRight, tokens.badgeRightContentMarginLeft, tokens.badgeRightContentMarginRight, tokens.badgePilledBorderRadius, tokens.counterBorderRadius, tokens.counterHeight, tokens.counterPadding, tokens.counterFontFamily, tokens.counterFontSize, tokens.counterFontStyle, tokens.counterFontWeight, tokens.counterLetterSpacing, tokens.counterLineHeight),
+      m: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 2.25rem;\n                ", ": 0.875rem;\n                ", ": 600;\n                ", ": 0.875rem;\n                ", ": 0.5rem;\n\n                ", ": 2;\n\n                ", ": 0.25rem;\n                ", ": 1rem;\n                ", ": 0 0.25rem;\n                ", ": 0 0.188rem;\n\n                ", ": var(--plasma-typo-body-xxs-font-family);\n                ", ": var(--plasma-typo-body-xxs-font-size);\n                ", ": var(--plasma-typo-body-xxs-font-style);\n                ", ": var(--plasma-typo-body-xxs-font-weight);\n                ", ": var(--plasma-typo-body-xxs-letter-spacing);\n                ", ": var(--plasma-typo-body-xxs-line-height);\n\n                ", ": -0.063rem;\n                ", ": 0.125rem;\n\n                ", ": 0.125rem;\n                ", ": -0.063rem;\n                ", ": 1.25rem;\n\n                ", ": 1rem;\n                ", ": 1rem;\n                ", ": 0 0.25rem;\n                ", ": var(--plasma-typo-body-xxs-font-family);\n                ", ": var(--plasma-typo-body-xxs-font-size);\n                ", ": var(--plasma-typo-body-xxs-font-style);\n                ", ": var(--plasma-typo-body-xxs-font-weight);\n                ", ": var(--plasma-typo-body-xxs-letter-spacing);\n                ", ": var(--plasma-typo-body-xxs-line-height);\n            "])), tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize, tokens.extraPlacementFactor, tokens.badgeBorderRadius, tokens.badgeHeight, tokens.badgePadding, tokens.badgePaddingIconOnly, tokens.badgeFontFamily, tokens.badgeFontSize, tokens.badgeFontStyle, tokens.badgeFontWeight, tokens.badgeLetterSpacing, tokens.badgeLineHeight, tokens.badgeLeftContentMarginLeft, tokens.badgeLeftContentMarginRight, tokens.badgeRightContentMarginLeft, tokens.badgeRightContentMarginRight, tokens.badgePilledBorderRadius, tokens.counterBorderRadius, tokens.counterHeight, tokens.counterPadding, tokens.counterFontFamily, tokens.counterFontSize, tokens.counterFontStyle, tokens.counterFontWeight, tokens.counterLetterSpacing, tokens.counterLineHeight),
+      s: /*#__PURE__*/css(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 1.5rem;\n                ", ": 0.5rem;\n                ", ": 600;\n                ", ": 0.5rem;\n                ", ": 0.375rem;\n\n                ", ": 1;\n\n                ", ": 1rem;\n                ", ": 0.75rem;\n                ", ": 0 0.125rem;\n                ", ": var(--plasma-typo-body-xxs-font-family);\n                ", ": var(--plasma-typo-body-xxs-font-size);\n                ", ": var(--plasma-typo-body-xxs-font-style);\n                ", ": var(--plasma-typo-body-xxs-font-weight);\n                ", ": var(--plasma-typo-body-xxs-letter-spacing);\n                ", ": var(--plasma-typo-body-xxs-line-height);\n            "])), tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize, tokens.extraPlacementFactor, tokens.counterBorderRadius, tokens.counterHeight, tokens.counterPadding, tokens.counterFontFamily, tokens.counterFontSize, tokens.counterFontStyle, tokens.counterFontWeight, tokens.counterLetterSpacing, tokens.counterLineHeight),
       fit: /*#__PURE__*/css(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 100%;\n                ", ": 0;\n                ", ": 0;\n                ", ": 0;\n                ", ": 0;\n            "])), tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize)
     },
     focused: {
       "true": /*#__PURE__*/css(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.1rem;\n                ", ": -0.2rem;\n                ", ": var(--surface-accent);\n            "])), tokens.outlineSize, tokens.outlineOffset, tokens.outlineColor)
+    },
+    badgeView: {
+      "default": /*#__PURE__*/css(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--inverse-text-primary);\n                ", ": var(--surface-solid-default);\n\n                ", ": var(--text-primary);\n                ", ": var(--surface-transparent-secondary);\n\n                ", ": var(--text-primary);\n                ", ": var(--surface-clear);\n            "])), tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear),
+      accent: /*#__PURE__*/css(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--surface-accent);\n\n                ", ": var(--text-accent);\n                ", ": var(--surface-transparent-accent);\n\n                ", ": var(--text-accent);\n                ", ": var(--surface-clear);\n            "])), tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear),
+      positive: /*#__PURE__*/css(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--surface-positive);\n\n                ", ": var(--text-positive);\n                ", ": var(--surface-transparent-positive);\n\n                ", ": var(--text-positive);\n                ", ": var(--surface-clear);\n            "])), tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear),
+      warning: /*#__PURE__*/css(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--surface-warning);\n\n                ", ": var(--text-warning);\n                ", ": var(--surface-transparent-warning);\n\n                ", ": var(--text-warning);\n                ", ": var(--surface-clear);\n            "])), tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear),
+      negative: /*#__PURE__*/css(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--surface-negative);\n\n                ", ": var(--text-negative);\n                ", ": var(--surface-transparent-negative);\n\n                ", ": var(--text-negative);\n                ", ": var(--surface-clear);\n            "])), tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear),
+      dark: /*#__PURE__*/css(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--on-light-surface-solid-default);\n\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--on-light-surface-transparent-deep);\n\n                ", ": var(--on-light-text-primary);\n                ", ": var(--surface-clear);\n            "])), tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear),
+      light: /*#__PURE__*/css(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--on-light-text-primary);\n                ", ": var(--on-dark-surface-solid-default);\n\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--on-dark-surface-transparent-card);\n\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--surface-clear);\n            "])), tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear)
+    },
+    counterView: {
+      "default": /*#__PURE__*/css(_templateObject15 || (_templateObject15 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--inverse-text-primary);\n                ", ": var(--surface-solid-default);\n            "])), tokens.counterColor, tokens.counterBackground),
+      accent: /*#__PURE__*/css(_templateObject16 || (_templateObject16 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--surface-accent);\n            "])), tokens.counterColor, tokens.counterBackground),
+      positive: /*#__PURE__*/css(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--surface-positive);\n            "])), tokens.counterColor, tokens.counterBackground),
+      warning: /*#__PURE__*/css(_templateObject18 || (_templateObject18 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--surface-warning);\n            "])), tokens.counterColor, tokens.counterBackground),
+      negative: /*#__PURE__*/css(_templateObject19 || (_templateObject19 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--surface-negative);\n            "])), tokens.counterColor, tokens.counterBackground),
+      dark: /*#__PURE__*/css(_templateObject20 || (_templateObject20 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--on-light-surface-solid-default);\n            "])), tokens.counterColor, tokens.counterBackground),
+      light: /*#__PURE__*/css(_templateObject21 || (_templateObject21 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--on-light-text-primary);\n                ", ": var(--on-dark-surface-solid-default);\n            "])), tokens.counterColor, tokens.counterBackground)
     }
   }
 };

package/emotion/es/components/Avatar/Avatar.stories.tsx

@@ -1,9 +1,15 @@
+import React from 'react';
 import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { disableProps } from '@salutejs/plasma-sb-utils';
 
 import { Avatar } 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: 'Data Display/Avatar',
     component: Avatar,
@@ -11,12 +17,69 @@ const meta: Meta<typeof Avatar> = {
         view: { control: 'inline-radio', options: ['default'] },
         size: { control: 'select', options: ['xxl', 'l', 'm', 's', 'fit'] },
         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' },
+        },
     },
 };
 
 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: {
@@ -24,21 +87,75 @@ export const Default: Story = {
         size: 'xxl',
         name: 'Иван Фадеев',
         url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
-        status: 'active',
         isScalable: false,
+        hasExtra: false,
+        extraPlacement: 'top-right',
+        type: undefined,
+        counterView: 'accent',
+        count: 3,
+        maxCount: 10,
+        badgeView: 'accent',
+        text: '31',
+        pilled: true,
+        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 = {
     args: {
         role: 'button',
+        name: 'Иван Фадеев',
         tabIndex: 0,
         view: 'default',
         size: 'xxl',
-        name: 'Иван Фадеев',
         status: 'active',
+        focused: true,
+        hasExtra: false,
+        extraPlacement: 'top-right',
+        type: undefined,
+        counterView: 'accent',
+        count: 3,
+        maxCount: 10,
+        badgeView: 'accent',
+        text: '31',
     },
 };

package/es/components/Avatar/Avatar.config.js

@@ -1,4 +1,4 @@
-import './Avatar.config_weecw4.css';
+import './Avatar.config_1buqzeq.css';
 var config = {
   defaults: {
     view: 'default',
@@ -18,6 +18,24 @@ var config = {
     },
     focused: {
       "true": "t12fbiph"
+    },
+    badgeView: {
+      "default": "d1v24dm1",
+      accent: "aklmhlm",
+      positive: "pts1qri",
+      warning: "wu8qekr",
+      negative: "nc00x8o",
+      dark: "d4vpurz",
+      light: "lh713v8"
+    },
+    counterView: {
+      "default": "d18xlm4d",
+      accent: "a19kwqy5",
+      positive: "p1jpkhmc",
+      warning: "w1rt05zb",
+      negative: "n18uzb5o",
+      dark: "dwmydiz",
+      light: "l84jq18"
     }
   }
 };