@salutejs/sdds-cs 0.319.0-canary.2010.15854111527.0 → 0.319.0-canary.2016.15704675252.0

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

@@ -1,192 +1,30 @@
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--text-secondary);\n                ",
-        ": var(--surface-solid-tertiary);\n                ",
-        ": var(--surface-positive);\n                ",
-        ": var(--on-light-surface-solid-primary);\n                ",
-        ": 1.02;\n                ",
-        ": var(--plasma-typo-text-font-family);\n            "
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 5.5rem;\n                ",
-        ": 2rem;\n                ",
-        ": 600;\n                ",
-        ": 2.25rem;\n                ",
-        ": 0.75rem;\n\n                ",
-        ": 1.25rem;\n                ",
-        ": 1.25rem;\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            "
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 2.25rem;\n                ",
-        ": 0.875rem;\n                ",
-        ": 600;\n                ",
-        ": 0.875rem;\n                ",
-        ": 0.5rem;\n\n                ",
-        ": 1rem;\n                ",
-        ": 1rem;\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            "
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject3() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 1.5rem;\n                ",
-        ": 0.5rem;\n                ",
-        ": 600;\n                ",
-        ": 0.5rem;\n                ",
-        ": 0.375rem;\n\n                ",
-        ": 0.75rem;\n                ",
-        ": 0.75rem;\n                ",
-        ": 0 0.125rem;\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            "
-    ]);
-    _templateObject3 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject4() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 100%;\n                ",
-        ": 0;\n                ",
-        ": 0;\n                ",
-        ": 0;\n                ",
-        ": 0;\n            "
-    ]);
-    _templateObject4 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject5() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 0.1rem;\n                ",
-        ": -0.2rem;\n                ",
-        ": var(--surface-accent);\n            "
-    ]);
-    _templateObject5 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject6() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--inverse-text-primary);\n                ",
-        ": var(--surface-solid-default);\n            "
-    ]);
-    _templateObject6 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject7() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--on-dark-text-primary);\n                ",
-        ": var(--surface-accent);\n            "
-    ]);
-    _templateObject7 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject8() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--on-dark-text-primary);\n                ",
-        ": var(--surface-positive);\n            "
-    ]);
-    _templateObject8 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject9() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--on-dark-text-primary);\n                ",
-        ": var(--surface-negative);\n            "
-    ]);
-    _templateObject9 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+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 = {
-    defaults: {
-        view: 'default',
-        size: 's'
+  defaults: {
+    view: 'default',
+    size: 's'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--text-secondary);\n                ", ": var(--surface-solid-tertiary);\n                ", ": var(--surface-positive);\n                ", ": var(--on-light-surface-solid-primary);\n                ", ": 1.02;\n                ", ": var(--plasma-typo-text-font-family);\n            "])), tokens.color, tokens.backgroundColor, tokens.statusOnlineColor, tokens.statusOfflineColor, tokens.scaleHover, tokens.fontFamily)
+    },
+    size: {
+      // TODO: #1044 токены типографики в Avatar
+      xxl: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 5.5rem;\n                ", ": 2rem;\n                ", ": 600;\n                ", ": 2.25rem;\n                ", ": 0.75rem;\n\n                ", ": 1.25rem;\n                ", ": 1.25rem;\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            "])), tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize, tokens.counterBorderRadius, tokens.counterHeight, tokens.counterPadding, tokens.counterFontFamily, tokens.counterFontSize, tokens.counterFontStyle, tokens.counterFontWeight, tokens.counterLetterSpacing, tokens.counterLineHeight),
+      m: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 2.25rem;\n                ", ": 0.875rem;\n                ", ": 600;\n                ", ": 0.875rem;\n                ", ": 0.5rem;\n\n                ", ": 1rem;\n                ", ": 1rem;\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            "])), tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize, tokens.counterBorderRadius, tokens.counterHeight, tokens.counterPadding, tokens.counterFontFamily, tokens.counterFontSize, tokens.counterFontStyle, tokens.counterFontWeight, tokens.counterLetterSpacing, tokens.counterLineHeight),
+      s: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 1.5rem;\n                ", ": 0.5rem;\n                ", ": 600;\n                ", ": 0.5rem;\n                ", ": 0.375rem;\n\n                ", ": 0.75rem;\n                ", ": 0.75rem;\n                ", ": 0 0.125rem;\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            "])), tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize, tokens.counterBorderRadius, tokens.counterHeight, tokens.counterPadding, tokens.counterFontFamily, tokens.counterFontSize, tokens.counterFontStyle, tokens.counterFontWeight, tokens.counterLetterSpacing, tokens.counterLineHeight),
+      fit: /*#__PURE__*/css(_templateObject5 || (_templateObject5 = /*#__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(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.1rem;\n                ", ": -0.2rem;\n                ", ": var(--surface-accent);\n            "])), tokens.outlineSize, tokens.outlineOffset, tokens.outlineColor)
     },
-    variations: {
-        view: {
-            default: css(_templateObject(), tokens.color, tokens.backgroundColor, tokens.statusOnlineColor, tokens.statusOfflineColor, tokens.scaleHover, tokens.fontFamily)
-        },
-        size: {
-            // TODO: #1044 токены типографики в Avatar
-            xxl: css(_templateObject1(), tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize, tokens.counterBorderRadius, tokens.counterHeight, tokens.counterPadding, tokens.counterFontFamily, tokens.counterFontSize, tokens.counterFontStyle, tokens.counterFontWeight, tokens.counterLetterSpacing, tokens.counterLineHeight),
-            m: css(_templateObject2(), tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize, tokens.counterBorderRadius, tokens.counterHeight, tokens.counterPadding, tokens.counterFontFamily, tokens.counterFontSize, tokens.counterFontStyle, tokens.counterFontWeight, tokens.counterLetterSpacing, tokens.counterLineHeight),
-            s: css(_templateObject3(), tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize, tokens.counterBorderRadius, tokens.counterHeight, tokens.counterPadding, tokens.counterFontFamily, tokens.counterFontSize, tokens.counterFontStyle, tokens.counterFontWeight, tokens.counterLetterSpacing, tokens.counterLineHeight),
-            fit: css(_templateObject4(), tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize)
-        },
-        focused: {
-            true: css(_templateObject5(), tokens.outlineSize, tokens.outlineOffset, tokens.outlineColor)
-        },
-        counterView: {
-            default: css(_templateObject6(), tokens.counterColor, tokens.counterBackground),
-            accent: css(_templateObject7(), tokens.counterColor, tokens.counterBackground),
-            positive: css(_templateObject8(), tokens.counterColor, tokens.counterBackground),
-            negative: css(_templateObject9(), tokens.counterColor, tokens.counterBackground)
-        }
+    counterView: {
+      "default": /*#__PURE__*/css(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--inverse-text-primary);\n                ", ": var(--surface-solid-default);\n            "])), tokens.counterColor, tokens.counterBackground),
+      accent: /*#__PURE__*/css(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--surface-accent);\n            "])), tokens.counterColor, tokens.counterBackground),
+      positive: /*#__PURE__*/css(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--surface-positive);\n            "])), tokens.counterColor, tokens.counterBackground),
+      negative: /*#__PURE__*/css(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--surface-negative);\n            "])), tokens.counterColor, tokens.counterBackground)
     }
-};
+  }
+};

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

@@ -1,5 +1,5 @@
 import { avatarConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/emotion';
 import { config } from './Avatar.config';
-var mergedConfig = mergeConfig(avatarConfig, config);
-var Avatar = component(mergedConfig);
-export { Avatar, mergedConfig };
+var mergedConfig = /*#__PURE__*/mergeConfig(avatarConfig, config);
+var Avatar = /*#__PURE__*/component(mergedConfig);
+export { Avatar, mergedConfig };

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

@@ -0,0 +1,74 @@
+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 = ['', 'counter'];
+const counterViews = ['default', 'accent', 'positive', 'negative'];
+
+const meta: Meta<typeof Avatar> = {
+    title: 'Data Display/Avatar',
+    component: Avatar,
+    argTypes: {
+        view: { control: 'inline-radio', options: ['default'] },
+        size: { control: 'select', options: ['xxl', '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,
+            defaultValue: 'default',
+            if: { arg: 'type', eq: 'counter' },
+        },
+        count: {
+            control: 'number',
+            if: { arg: 'type', eq: 'counter' },
+        },
+        maxCount: {
+            control: 'number',
+            if: { arg: 'type', eq: 'counter' },
+        },
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<ComponentProps<typeof Avatar>>;
+
+export const Default: Story = {
+    args: {
+        view: 'default',
+        size: 's',
+        name: 'Иван Фадеев',
+        url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
+        status: 'active',
+        isScalable: false,
+        hasExtra: false,
+        extraPlacement: 'bottom-left',
+    },
+    argTypes: {
+        ...disableProps(['focused']),
+    },
+};
+
+export const Accessibility: Story = {
+    args: {
+        role: 'button',
+        tabIndex: 0,
+        view: 'default',
+        size: 's',
+        name: 'Иван Фадеев',
+        status: 'active',
+    },
+};

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

@@ -1 +1 @@
-export { Avatar } from './Avatar';
+export { Avatar } from './Avatar';

package/emotion/es/components/AvatarGroup/AvatarGroup.js

@@ -1,3 +1,3 @@
 import { avatarGroupConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/emotion';
-var mergedConfig = mergeConfig(avatarGroupConfig);
-export var AvatarGroup = component(mergedConfig);
+var mergedConfig = /*#__PURE__*/mergeConfig(avatarGroupConfig);
+export var AvatarGroup = /*#__PURE__*/component(mergedConfig);

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

@@ -0,0 +1,71 @@
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import * as React from 'react';
+
+import { Avatar } from '../Avatar';
+
+import { AvatarGroup } from './AvatarGroup';
+
+type Story = StoryObj<ComponentProps<typeof AvatarGroup>>;
+
+const meta: Meta<typeof AvatarGroup> = {
+    title: 'Data Display/AvatarGroup',
+    component: AvatarGroup,
+};
+
+export default meta;
+
+export const Default: Story = {
+    render: (args: ComponentProps<typeof AvatarGroup>) => {
+        return (
+            <AvatarGroup {...args}>
+                {Array(5)
+                    .fill(true)
+                    .map(() => (
+                        <Avatar size="s" url="https://avatars.githubusercontent.com/u/1813468?v=4" />
+                    ))}
+            </AvatarGroup>
+        );
+    },
+};
+
+export const DynamicSize: Story = {
+    args: { totalCount: 10, visibleCount: 3 },
+    render: (args: ComponentProps<typeof AvatarGroup>) => {
+        const itemLength = args.totalCount;
+
+        return (
+            <AvatarGroup {...args}>
+                {Array(args.visibleCount)
+                    .fill(true)
+                    .map((_, index) => (
+                        <Avatar size="s" customText={index + 1} />
+                    ))}
+
+                {itemLength > args.visibleCount && (
+                    <Avatar size="s" customText={`+${itemLength - args.visibleCount}`} />
+                )}
+            </AvatarGroup>
+        );
+    },
+};
+
+export const Accessibility: Story = {
+    render: (args: ComponentProps<typeof AvatarGroup>) => {
+        return (
+            <AvatarGroup {...args}>
+                {Array(5)
+                    .fill(true)
+                    .map(() => (
+                        <Avatar
+                            role="button"
+                            tabIndex={0}
+                            focused
+                            size="s"
+                            url="https://avatars.githubusercontent.com/u/1813468?v=4"
+                        />
+                    ))}
+            </AvatarGroup>
+        );
+    },
+};

package/emotion/es/components/AvatarGroup/index.js

@@ -1 +1 @@
-export { AvatarGroup } from './AvatarGroup';
+export { AvatarGroup } from './AvatarGroup';

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

@@ -1,140 +1,29 @@
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--inverse-text-primary);\n                ",
-        ": var(--surface-solid-default);\n\n                ",
-        ": var(--text-primary);\n            "
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--on-dark-text-primary);\n                ",
-        ": var(--surface-accent);\n\n                ",
-        ": var(--text-accent);\n                ",
-        ": var(--text-accent);\n            "
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--on-dark-text-primary);\n                ",
-        ": var(--surface-positive);\n\n                ",
-        ": var(--text-positive);\n                ",
-        ": var(--text-positive);\n            "
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject3() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--on-dark-text-primary);\n                ",
-        ": var(--surface-negative);\n\n                ",
-        ": var(--text-negative);\n                ",
-        ": var(--text-negative);\n            "
-    ]);
-    _templateObject3 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject4() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 0.375rem;\n                ",
-        ": 1.5rem;\n                ",
-        ": 0 0.5rem;\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.0625rem;\n                ",
-        ": 0.125rem;\n\n                ",
-        ": 0.125rem;\n                ",
-        ": -0.0625rem;\n            "
-    ]);
-    _templateObject4 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject5() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 1.25rem;\n            "
-    ]);
-    _templateObject5 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject6() {
-    var data = _tagged_template_literal([
-        ""
-    ]);
-    _templateObject6 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject7() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--surface-clear);\n            "
-    ]);
-    _templateObject7 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { css, badgeTokens } from '@salutejs/plasma-new-hope/emotion';
 export var config = {
-    defaults: {
-        view: 'default',
-        size: 's'
+  defaults: {
+    view: 'default',
+    size: 's'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--inverse-text-primary);\n                ", ": var(--surface-solid-default);\n\n                ", ": var(--text-primary);\n            "])), badgeTokens.color, badgeTokens.background, badgeTokens.colorClear),
+      accent: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--surface-accent);\n\n                ", ": var(--text-accent);\n                ", ": var(--text-accent);\n            "])), badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.colorClear),
+      positive: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--surface-positive);\n\n                ", ": var(--text-positive);\n                ", ": var(--text-positive);\n            "])), badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.colorClear),
+      negative: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--surface-negative);\n\n                ", ": var(--text-negative);\n                ", ": var(--text-negative);\n            "])), badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.colorClear)
+    },
+    size: {
+      s: /*#__PURE__*/css(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.375rem;\n                ", ": 1.5rem;\n                ", ": 0 0.5rem;\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.0625rem;\n                ", ": 0.125rem;\n\n                ", ": 0.125rem;\n                ", ": -0.0625rem;\n            "])), badgeTokens.borderRadius, badgeTokens.height, badgeTokens.padding, badgeTokens.paddingIconOnly, badgeTokens.fontFamily, badgeTokens.fontSize, badgeTokens.fontStyle, badgeTokens.fontWeight, badgeTokens.letterSpacing, badgeTokens.lineHeight, badgeTokens.leftContentMarginLeft, badgeTokens.leftContentMarginRight, badgeTokens.rightContentMarginLeft, badgeTokens.rightContentMarginRight)
+    },
+    pilled: {
+      "true": /*#__PURE__*/css(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 1.25rem;\n            "])), badgeTokens.pilledBorderRadius)
+    },
+    transparent: {
+      "true": /*#__PURE__*/css(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteral([""])))
     },
-    variations: {
-        view: {
-            default: css(_templateObject(), badgeTokens.color, badgeTokens.background, badgeTokens.colorClear),
-            accent: css(_templateObject1(), badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.colorClear),
-            positive: css(_templateObject2(), badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.colorClear),
-            negative: css(_templateObject3(), badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.colorClear)
-        },
-        size: {
-            s: css(_templateObject4(), badgeTokens.borderRadius, badgeTokens.height, badgeTokens.padding, badgeTokens.paddingIconOnly, badgeTokens.fontFamily, badgeTokens.fontSize, badgeTokens.fontStyle, badgeTokens.fontWeight, badgeTokens.letterSpacing, badgeTokens.lineHeight, badgeTokens.leftContentMarginLeft, badgeTokens.leftContentMarginRight, badgeTokens.rightContentMarginLeft, badgeTokens.rightContentMarginRight)
-        },
-        pilled: {
-            true: css(_templateObject5(), badgeTokens.pilledBorderRadius)
-        },
-        transparent: {
-            true: css(_templateObject6())
-        },
-        clear: {
-            true: css(_templateObject7(), badgeTokens.backgroundClear)
-        }
+    clear: {
+      "true": /*#__PURE__*/css(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--surface-clear);\n            "])), badgeTokens.backgroundClear)
     }
-};
+  }
+};

package/emotion/es/components/Badge/Badge.js

@@ -1,6 +1,8 @@
 import { badgeConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/emotion';
 import { config } from './Badge.config';
-var mergedConfig = mergeConfig(badgeConfig, config);
+var mergedConfig = /*#__PURE__*/mergeConfig(badgeConfig, config);
+
 /**
  * Компонент Badge.
- */ export var Badge = component(mergedConfig);
+ */
+export var Badge = /*#__PURE__*/component(mergedConfig);

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

@@ -0,0 +1,87 @@
+import React, { ComponentProps } from 'react';
+import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+import type { StoryObj, Meta } from '@storybook/react';
+
+import { Badge } from './Badge';
+
+const meta: Meta<typeof Badge> = {
+    title: 'Data Display/Badge',
+    component: Badge,
+    decorators: [InSpacingDecorator],
+    argTypes: {
+        size: {
+            options: ['s'],
+            control: {
+                type: 'select',
+            },
+        },
+        view: {
+            options: ['default', 'accent', 'positive', 'negative'],
+            control: {
+                type: 'select',
+            },
+        },
+        pilled: {
+            control: { type: 'boolean' },
+            if: { arg: 'clear', truthy: false },
+        },
+        text: {
+            control: { type: 'text' },
+            if: { arg: 'enableText', truthy: true },
+        },
+        ...disableProps(['contentLeft', 'contentRight', 'transparent', 'size']),
+    },
+};
+
+export default meta;
+
+type StoryProps = ComponentProps<typeof Badge> & {
+    enableContentLeft: boolean;
+    enableContentRight: boolean;
+    enableText: 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 = {
+    argTypes: {
+        enableContentLeft: {
+            control: { type: 'boolean' },
+            if: { arg: 'enableContentRight', truthy: false },
+        },
+        enableContentRight: {
+            control: { type: 'boolean' },
+            if: { arg: 'enableText', truthy: true },
+        },
+    },
+    args: {
+        view: 'default',
+        size: 's',
+        enableText: true,
+        text: 'Hello',
+        enableContentLeft: false,
+        enableContentRight: false,
+        clear: false,
+        pilled: false,
+    },
+    render: ({ enableContentLeft, enableContentRight, enableText, size, ...rest }: StoryProps) => {
+        return (
+            <Badge
+                contentLeft={
+                    enableContentLeft || !enableText ? <BellIcon width="0.75rem" height="0.75rem" /> : undefined
+                }
+                contentRight={enableContentRight ? <BellIcon width="0.75rem" height="0.75rem" /> : undefined}
+                size={size}
+                {...rest}
+            />
+        );
+    },
+};

package/emotion/es/components/Badge/index.js

@@ -1 +1 @@
-export { Badge } from './Badge';
+export { Badge } from './Badge';