@salutejs/plasma-new-hope 0.240.1-canary.1705.12790178134.0 → 0.241.0-canary.1696.12814018283.0

package/styled-components/cjs/examples/plasma_web/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: 'web/Data Display/Avatar',
     decorators: [WithTheme],
@@ -13,12 +19,69 @@ 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' },
+        },
     },
 };
 
 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 +90,56 @@ 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,
+        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 +151,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 +172,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 +192,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/es/components/Avatar/Avatar.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-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"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -14,10 +14,10 @@ import { component, mergeConfig } from '../../engines';
 import { cx } from '../../utils';
 import { indicatorConfig, indicatorTokens } from '../Indicator';
 import { classes, tokens } from './Avatar.tokens';
-import { base, Wrapper, Image, StatusIcon, Text } from './Avatar.styles';
+import { base, Wrapper, Image, StatusIcon, Text, ExtraContent, ExtraCounter, ExtraBadge } from './Avatar.styles';
 import { base as viewCSS } from './variations/_size/base';
 import { base as focusedCSS } from './variations/_focused/base';
-import { getInitialsForName } from './utils';
+import { extraPlacementMap, getInitialsForName } from './utils';
 var StatusLabelsDefault = {
   active: 'Активен',
   inactive: 'Неактивен'
@@ -73,20 +73,39 @@ export var 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,
       rest = _objectWithoutProperties(props, _excluded);
+    var counterValue = count || 1;
     var initials = useMemo(function () {
       return getInitialsForName(name);
     }, [name]);
     var ariaLabel = getAriaLabel(_objectSpread(_objectSpread({}, props), {}, {
       statusLabels: statusLabels
     }));
+    var extraViewProp = type === 'badge' ? {
+      badgeView: badgeView
+    } : {
+      counterView: counterView
+    };
     return /*#__PURE__*/React.createElement(Root, _extends({
       ref: ref,
       size: avatarSize,
       className: cx(classes.avatarItem, className),
       "aria-label": ariaLabel,
       focused: focused
-    }, rest), /*#__PURE__*/React.createElement(Wrapper, {
+    }, extraViewProp, rest), /*#__PURE__*/React.createElement(Wrapper, {
       isScalable: isScalable
     }, getAvatarContent({
       customText: customText,
@@ -96,7 +115,24 @@ export var avatarRoot = function avatarRoot(Root) {
     })), status && /*#__PURE__*/React.createElement(StatusIcon, null, /*#__PURE__*/React.createElement(StyledIndicator, {
       "aria-label": statusLabels[status],
       status: status
-    })));
+    })), hasExtra && avatarSize !== 'fit' && /*#__PURE__*/React.createElement(ExtraContent, {
+      className: extraPlacementMap(extraPlacement)
+    }, type === 'counter' ? /*#__PURE__*/React.createElement(ExtraCounter, {
+      view: counterView,
+      count: counterValue,
+      maxCount: maxCount
+    }) : avatarSize !== 's' && /*#__PURE__*/React.createElement(ExtraBadge, _extends({
+      view: badgeView,
+      text: text,
+      customColor: customColor,
+      customBackgroundColor: customBackgroundColor,
+      pilled: pilled,
+      maxWidth: "100%"
+    }, contentLeft ? {
+      contentLeft: contentLeft
+    } : {
+      contentRight: contentRight
+    }))));
   });
 };
 export var avatarConfig = {

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

@@ -2,7 +2,14 @@ var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { css } from 'styled-components';
 import styled from 'styled-components';
-import { tokens } from './Avatar.tokens';
+import { component, mergeConfig } from '../../engines';
+import { badgeConfig, badgeTokens } from '../Badge';
+import { counterConfig, counterTokens } from '../Counter';
+import { classes, tokens } from './Avatar.tokens';
+var mergedBadgeConfig = /*#__PURE__*/mergeConfig(badgeConfig);
+var Badge = /*#__PURE__*/component(mergedBadgeConfig);
+var mergedCounterConfig = /*#__PURE__*/mergeConfig(counterConfig);
+var Counter = /*#__PURE__*/component(mergedCounterConfig);
 export var base = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n    position: relative;\n"])));
 export var Wrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-t16ccn-0"
@@ -21,4 +28,13 @@ export var Image = /*#__PURE__*/styled.img.withConfig({
 })(["width:100%;height:100%;border-radius:50%;"]);
 export var Text = /*#__PURE__*/styled.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;"], tokens.fontSize, tokens.fontFamily, tokens.fontWeight, tokens.lineHeight, tokens.color, 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;"], tokens.fontSize, tokens.fontFamily, tokens.fontWeight, tokens.lineHeight, tokens.color, tokens.color);
+export var ExtraContent = /*#__PURE__*/styled.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));}"], classes.extraPlacementTopLeft, tokens.extraPlacementFactor, tokens.extraPlacementFactor, classes.extraPlacementTopRight, tokens.extraPlacementFactor, tokens.extraPlacementFactor, classes.extraPlacementBottomRight, tokens.extraPlacementFactor, tokens.extraPlacementFactor, classes.extraPlacementBottomLeft, tokens.extraPlacementFactor, tokens.extraPlacementFactor);
+export var ExtraBadge = /*#__PURE__*/styled(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(", ");"], badgeTokens.background, tokens.badgeBackground, badgeTokens.color, tokens.badgeColor, badgeTokens.backgroundTransparent, tokens.badgeBackgroundTransparent, badgeTokens.colorTransparent, tokens.badgeColorTransparent, badgeTokens.colorClear, tokens.badgeColorClear, badgeTokens.backgroundClear, tokens.badgeBackgroundClear, badgeTokens.borderRadius, tokens.badgeBorderRadius, badgeTokens.pilledBorderRadius, tokens.badgePilledBorderRadius, badgeTokens.height, tokens.badgeHeight, badgeTokens.padding, tokens.badgePadding, badgeTokens.paddingIconOnly, tokens.badgePaddingIconOnly, badgeTokens.fontFamily, tokens.badgeFontFamily, badgeTokens.fontSize, tokens.badgeFontSize, badgeTokens.fontStyle, tokens.badgeFontStyle, badgeTokens.fontWeight, tokens.badgeFontWeight, badgeTokens.letterSpacing, tokens.badgeLetterSpacing, badgeTokens.lineHeight, tokens.badgeLineHeight, badgeTokens.leftContentMarginLeft, tokens.badgeLeftContentMarginLeft, badgeTokens.leftContentMarginRight, tokens.badgeLeftContentMarginRight, badgeTokens.rightContentMarginLeft, tokens.badgeRightContentMarginLeft, badgeTokens.rightContentMarginRight, tokens.badgeRightContentMarginRight);
+export var ExtraCounter = /*#__PURE__*/styled(Counter).withConfig({
+  componentId: "plasma-new-hope__sc-t16ccn-6"
+})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], counterTokens.background, tokens.counterBackground, counterTokens.color, tokens.counterColor, counterTokens.borderRadius, tokens.counterBorderRadius, counterTokens.height, tokens.counterHeight, counterTokens.padding, tokens.counterPadding, counterTokens.fontFamily, tokens.counterFontFamily, counterTokens.fontSize, tokens.counterFontSize, counterTokens.fontStyle, tokens.counterFontStyle, counterTokens.fontWeight, tokens.counterFontWeight, counterTokens.letterSpacing, tokens.counterLetterSpacing, counterTokens.lineHeight, tokens.counterLineHeight);

package/styled-components/es/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/es/components/Avatar/Avatar.tokens.js

@@ -1,5 +1,9 @@
 export var 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'
 };
 export var tokens = {
   avatarSize: '--plasma-avatar-size',
@@ -15,5 +19,40 @@ export var 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/es/components/Avatar/utils/index.js

@@ -1 +1,14 @@
-export { getInitialsForName } from './getInitialsForName';
+import { classes } from '../Avatar.tokens';
+export { getInitialsForName } from './getInitialsForName';
+export var extraPlacementMap = function extraPlacementMap(extraPlacement) {
+  switch (extraPlacement) {
+    case 'top-left':
+      return classes.extraPlacementTopLeft;
+    case 'bottom-left':
+      return classes.extraPlacementBottomLeft;
+    case 'bottom-right':
+      return classes.extraPlacementBottomRight;
+    default:
+      return classes.extraPlacementTopRight;
+  }
+};

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

@@ -76,7 +76,6 @@ export var tokens = {
   itemFontWeightBold: '--plasma-dropdown-item-letter-spacing',
   itemFontLetterSpacing: '--plasma-dropdown-item-line-height',
   itemFontLineHeight: '--plasma-dropdown-item-font-weight',
-  itemMargin: '--plasma-dropdown-item-margin',
   itemPadding: '--plasma-dropdown-item-padding',
   itemPaddingTight: '--plasma-dropdown-item-padding-tight',
   itemGap: '--plasma-dropdown-item-gap',

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

@@ -44,10 +44,10 @@ export var Divider = /*#__PURE__*/styled.div.withConfig({
 }, tokens.dividerMarginLeft, tokens.dividerColor);
 export var Wrapper = /*#__PURE__*/styled.li.withConfig({
   componentId: "plasma-new-hope__sc-hs0ek1-5"
-})(["display:flex;align-items:center;gap:", ";min-height:var(", ");margin:var(", ",0 calc(0.125rem + var(", ",0rem)));box-sizing:content-box;padding:", ";font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");background-color:var(", ");border-radius:calc(var(", ") - 0.125rem - var(", ",0rem));user-select:none;background-clip:padding-box;&:hover:not(.", "){cursor:pointer;background-color:var(", ");}&.", "{background-color:var(", ");}&.", "{opacity:", ";cursor:not-allowed;}:focus{outline:none;}", ";"], function (_ref5) {
+})(["display:flex;align-items:center;gap:", ";min-height:var(", ");margin:0 calc(0.125rem + var(", ",0rem));box-sizing:content-box;padding:", ";font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");background-color:var(", ");border-radius:calc(var(", ") - 0.125rem - var(", ",0rem));user-select:none;background-clip:padding-box;&:hover:not(.", "){cursor:pointer;background-color:var(", ");}&.", "{background-color:var(", ");}&.", "{opacity:", ";cursor:not-allowed;}:focus{outline:none;}", ";"], function (_ref5) {
   var variant = _ref5.variant;
   return "var(".concat(variant === 'tight' ? tokens.itemGapTight : tokens.itemGap, ")");
-}, tokens.itemHeight, tokens.itemMargin, tokens.borderWidth, function (_ref6) {
+}, tokens.itemHeight, tokens.borderWidth, function (_ref6) {
   var variant = _ref6.variant;
   return "var(".concat(variant === 'tight' ? tokens.itemPaddingTight : tokens.itemPadding, ")");
 }, tokens.itemFontFamily, tokens.itemFontSize, tokens.itemFontStyle, tokens.itemFontWeightBold, tokens.itemFontLetterSpacing, tokens.itemFontLineHeight, constants.itemBackground, tokens.borderRadius, tokens.borderWidth, classes.dropdownItemIsDisabled, tokens.itemBackgroundHover, classes.dropdownItemIsActive, tokens.itemBackgroundHover, classes.dropdownItemIsDisabled, constants.opacity, /*#__PURE__*/addFocus({

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

@@ -10,14 +10,32 @@ export var config = {
       "default": /*#__PURE__*/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;"], tokens.color, tokens.backgroundColor, tokens.statusOnlineColor, tokens.statusOfflineColor, tokens.scaleHover)
     },
     size: {
-      xxl: /*#__PURE__*/css(["", ":6.25rem;", ":2rem;", ":600;", ":2rem;", ":0.75rem;"], tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize),
-      l: /*#__PURE__*/css(["", ":3rem;", ":1.25rem;", ":600;", ":1.25rem;", ":0.5rem;"], tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize),
-      m: /*#__PURE__*/css(["", ":2.25rem;", ":0.875rem;", ":600;", ":0.875rem;", ":0.5rem;"], tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize),
-      s: /*#__PURE__*/css(["", ":1.5rem;", ":0.5rem;", ":600;", ":0.5rem;", ":0.375rem;"], tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize),
+      xxl: /*#__PURE__*/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);"], 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(["", ":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);"], 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(["", ":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);"], 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(["", ":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);"], 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(["", ":100%;", ":0;", ":0;", ":0;", ":0;"], tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize)
     },
     focused: {
       "true": /*#__PURE__*/css(["", ":0.1rem;", ":-0.2rem;", ":var(--surface-accent);"], tokens.outlineSize, tokens.outlineOffset, tokens.outlineColor)
+    },
+    badgeView: {
+      "default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-clear);"], tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear),
+      accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--text-accent);", ":var(--surface-transparent-accent);", ":var(--text-accent);", ":var(--surface-clear)"], tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear),
+      positive: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--text-positive);", ":var(--surface-transparent-positive);", ":var(--text-positive);", ":var(--surface-clear)"], tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear),
+      warning: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--text-warning);", ":var(--surface-transparent-warning);", ":var(--text-warning);", ":var(--surface-clear)"], tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear),
+      negative: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--text-negative);", ":var(--surface-transparent-negative);", ":var(--text-negative);", ":var(--surface-clear)"], tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear),
+      dark: /*#__PURE__*/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);"], tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear),
+      light: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-transparent-card);", ":var(--on-dark-text-prima ", ":var(--surface-clear)ry);"], tokens.badgeColor, tokens.badgeBackground, tokens.badgeColorTransparent, tokens.badgeBackgroundTransparent, tokens.badgeColorClear, tokens.badgeBackgroundClear)
+    },
+    counterView: {
+      "default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);"], tokens.counterColor, tokens.counterBackground),
+      accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);"], tokens.counterColor, tokens.counterBackground),
+      positive: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);"], tokens.counterColor, tokens.counterBackground),
+      warning: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);"], tokens.counterColor, tokens.counterBackground),
+      negative: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);"], tokens.counterColor, tokens.counterBackground),
+      dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);"], tokens.counterColor, tokens.counterBackground),
+      light: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);"], tokens.counterColor, tokens.counterBackground)
     }
   }
 };