@salutejs/sdds-cs 0.319.0-canary.1741.15776056320.0 → 0.319.0-canary.1973.15679545656.0

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

@@ -0,0 +1,170 @@
+import type { ComponentProps } from 'react';
+import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+import { IconPlasma } from '@salutejs/plasma-icons';
+
+import { Autocomplete } from './Autocomplete';
+
+const views = ['default', 'negative'];
+
+const suggestions = [
+    { label: 'Алексей Смирнов' },
+    { label: 'Екатерина Иванова' },
+    { label: 'Дмитрий Петров' },
+    { label: 'Ольга Васильева' },
+    { label: 'Сергей Сидоров' },
+    { label: 'Мария Кузнецова' },
+    { label: 'Андрей Попов' },
+    { label: 'Анна Николаева' },
+    { label: 'Иван Федоров' },
+    { label: 'Наталья Морозова' },
+    { label: 'Михаил Павлов' },
+    { label: 'Елена Романова' },
+    { label: 'Владимир Киселев' },
+    { label: 'Татьяна Захарова' },
+    { label: 'Николай Семенов' },
+    { label: 'Юлия Белова' },
+    { label: 'Александр Гусев' },
+    { label: 'Оксана Яковлева' },
+    { label: 'Игорь Егорова' },
+    { label: 'Вера Тихомирова' },
+    { label: 'Артем Григорьев' },
+    { label: 'Евгения Козлова' },
+    { label: 'Максим Лебедев' },
+    { label: 'Виктория Калашникова' },
+    { label: 'Константин Абрамов' },
+    { label: 'Светлана Новикова' },
+    { label: 'Юрий Волков' },
+    { label: 'Валентина Воробьева' },
+    { label: 'Павел Сергеев' },
+    { label: 'Людмила Виноградова' },
+    { label: 'Антон Соловьев' },
+    { label: 'Маргарита Цветкова' },
+    { label: 'Роман Трофимов' },
+    { label: 'Лариса Зайцева' },
+    { label: 'Евгений Никитин' },
+    { label: 'Галина Михайлова' },
+    { label: 'Владислав Антонов' },
+    { label: 'Дарья Филатова' },
+    { label: 'Олег Буров' },
+    { label: 'Инна Медведева' },
+    { label: 'Вячеслав Крылов' },
+    { label: 'Тамара Беляева' },
+    { label: 'Кирилл Марков' },
+    { label: 'Марина Пономарева' },
+    { label: 'Борис Захаров' },
+    { label: 'Жанна Савельева' },
+    { label: 'Федор Жуков' },
+    { label: 'Елизавета Логинова' },
+    { label: 'Виктор Рыбаков' },
+    { label: 'Лилия Макарова' },
+];
+
+type StoryProps = ComponentProps<typeof Autocomplete> & {
+    enableContentLeft: boolean;
+    enableContentRight: boolean;
+};
+
+const meta: Meta<StoryProps> = {
+    title: 'Data Entry/Autocomplete',
+    decorators: [InSpacingDecorator],
+    component: Autocomplete,
+    argTypes: {
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        requiredPlacement: {
+            options: ['left', 'right'],
+            control: {
+                type: 'select',
+            },
+            if: { arg: 'required', truthy: true },
+        },
+        required: {
+            control: {
+                type: 'boolean',
+            },
+            if: { arg: 'optional', truthy: false },
+        },
+        hasRequiredIndicator: {
+            control: {
+                type: 'boolean',
+            },
+            if: {
+                arg: 'required',
+                truthy: true,
+            },
+        },
+        optional: {
+            control: {
+                type: 'boolean',
+            },
+            if: { arg: 'required', truthy: false },
+        },
+        listWidth: {
+            control: { type: 'text' },
+        },
+        listMaxHeight: {
+            control: { type: 'text' },
+        },
+        virtual: {
+            control: { type: 'boolean' },
+        },
+        ...disableProps([
+            'hintText',
+            'hintTrigger',
+            'hintView',
+            'hintSize',
+            'hintTargetIcon',
+            'hintTargetPlacement',
+            'hintPlacement',
+            'hintHasArrow',
+            'hintOffset',
+            'hintWidth',
+            'hintContentLeft',
+        ]),
+    },
+    args: {
+        view: 'default',
+        disabled: false,
+        readOnly: false,
+        label: 'Label',
+        textBefore: '',
+        textAfter: '',
+        placeholder: 'Заполните поле',
+        leftHelper: 'Введите имя Алексей',
+        threshold: 2,
+        enableContentLeft: true,
+        enableContentRight: true,
+        optional: false,
+        required: false,
+        requiredPlacement: 'right',
+        hasRequiredIndicator: true,
+        virtual: false,
+    },
+};
+
+export default meta;
+
+const DefaultStory = (args: StoryProps) => {
+    const { enableContentLeft, enableContentRight } = args;
+
+    const iconSize = 's';
+
+    return (
+        <Autocomplete
+            {...args}
+            suggestions={suggestions}
+            contentLeft={enableContentLeft ? <IconPlasma size={iconSize} /> : undefined}
+            contentRight={enableContentRight ? <IconPlasma size={iconSize} /> : undefined}
+        />
+    );
+};
+
+export const Default: StoryObj<StoryProps> = {
+    render: (args) => <DefaultStory {...args} />,
+};

package/emotion/cjs/components/Autocomplete/index.js

@@ -1,11 +1,12 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
 Object.defineProperty(exports, "Autocomplete", {
-    enumerable: true,
-    get: function() {
-        return _Autocomplete.Autocomplete;
-    }
+  enumerable: true,
+  get: function get() {
+    return _Autocomplete.Autocomplete;
+  }
 });
-var _Autocomplete = require("./Autocomplete");
+var _Autocomplete = /*#__PURE__*/require("./Autocomplete");

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

@@ -1,202 +1,36 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-Object.defineProperty(exports, "config", {
-    enumerable: true,
-    get: function() {
-        return config;
-    }
-});
-var _emotion = require("@salutejs/plasma-new-hope/emotion");
-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 config = {
-    defaults: {
-        view: 'default',
-        size: 's'
+exports.config = void 0;
+var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");
+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) } })); }
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    size: 's'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/(0, _emotion.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            "])), _emotion.avatarTokens.color, _emotion.avatarTokens.backgroundColor, _emotion.avatarTokens.statusOnlineColor, _emotion.avatarTokens.statusOfflineColor, _emotion.avatarTokens.scaleHover, _emotion.avatarTokens.fontFamily)
+    },
+    size: {
+      // TODO: #1044 токены типографики в Avatar
+      xxl: /*#__PURE__*/(0, _emotion.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            "])), _emotion.avatarTokens.avatarSize, _emotion.avatarTokens.fontSize, _emotion.avatarTokens.fontWeight, _emotion.avatarTokens.lineHeight, _emotion.avatarTokens.statusIconSize, _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)(_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            "])), _emotion.avatarTokens.avatarSize, _emotion.avatarTokens.fontSize, _emotion.avatarTokens.fontWeight, _emotion.avatarTokens.lineHeight, _emotion.avatarTokens.statusIconSize, _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)(_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            "])), _emotion.avatarTokens.avatarSize, _emotion.avatarTokens.fontSize, _emotion.avatarTokens.fontWeight, _emotion.avatarTokens.lineHeight, _emotion.avatarTokens.statusIconSize, _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)(_templateObject5 || (_templateObject5 = /*#__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)(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.1rem;\n                ", ": -0.2rem;\n                ", ": var(--surface-accent);\n            "])), _emotion.avatarTokens.outlineSize, _emotion.avatarTokens.outlineOffset, _emotion.avatarTokens.outlineColor)
     },
-    variations: {
-        view: {
-            default: (0, _emotion.css)(_templateObject(), _emotion.avatarTokens.color, _emotion.avatarTokens.backgroundColor, _emotion.avatarTokens.statusOnlineColor, _emotion.avatarTokens.statusOfflineColor, _emotion.avatarTokens.scaleHover, _emotion.avatarTokens.fontFamily)
-        },
-        size: {
-            // TODO: #1044 токены типографики в Avatar
-            xxl: (0, _emotion.css)(_templateObject1(), _emotion.avatarTokens.avatarSize, _emotion.avatarTokens.fontSize, _emotion.avatarTokens.fontWeight, _emotion.avatarTokens.lineHeight, _emotion.avatarTokens.statusIconSize, _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: (0, _emotion.css)(_templateObject2(), _emotion.avatarTokens.avatarSize, _emotion.avatarTokens.fontSize, _emotion.avatarTokens.fontWeight, _emotion.avatarTokens.lineHeight, _emotion.avatarTokens.statusIconSize, _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: (0, _emotion.css)(_templateObject3(), _emotion.avatarTokens.avatarSize, _emotion.avatarTokens.fontSize, _emotion.avatarTokens.fontWeight, _emotion.avatarTokens.lineHeight, _emotion.avatarTokens.statusIconSize, _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: (0, _emotion.css)(_templateObject4(), _emotion.avatarTokens.avatarSize, _emotion.avatarTokens.fontSize, _emotion.avatarTokens.fontWeight, _emotion.avatarTokens.lineHeight, _emotion.avatarTokens.statusIconSize)
-        },
-        focused: {
-            true: (0, _emotion.css)(_templateObject5(), _emotion.avatarTokens.outlineSize, _emotion.avatarTokens.outlineOffset, _emotion.avatarTokens.outlineColor)
-        },
-        counterView: {
-            default: (0, _emotion.css)(_templateObject6(), _emotion.avatarTokens.counterColor, _emotion.avatarTokens.counterBackground),
-            accent: (0, _emotion.css)(_templateObject7(), _emotion.avatarTokens.counterColor, _emotion.avatarTokens.counterBackground),
-            positive: (0, _emotion.css)(_templateObject8(), _emotion.avatarTokens.counterColor, _emotion.avatarTokens.counterBackground),
-            negative: (0, _emotion.css)(_templateObject9(), _emotion.avatarTokens.counterColor, _emotion.avatarTokens.counterBackground)
-        }
+    counterView: {
+      "default": /*#__PURE__*/(0, _emotion.css)(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--inverse-text-primary);\n                ", ": var(--surface-solid-default);\n            "])), _emotion.avatarTokens.counterColor, _emotion.avatarTokens.counterBackground),
+      accent: /*#__PURE__*/(0, _emotion.css)(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--surface-accent);\n            "])), _emotion.avatarTokens.counterColor, _emotion.avatarTokens.counterBackground),
+      positive: /*#__PURE__*/(0, _emotion.css)(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--surface-positive);\n            "])), _emotion.avatarTokens.counterColor, _emotion.avatarTokens.counterBackground),
+      negative: /*#__PURE__*/(0, _emotion.css)(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--surface-negative);\n            "])), _emotion.avatarTokens.counterColor, _emotion.avatarTokens.counterBackground)
     }
-};
+  }
+};

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

@@ -1,22 +1,10 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: Object.getOwnPropertyDescriptor(all, name).get
-    });
-}
-_export(exports, {
-    get Avatar () {
-        return Avatar;
-    },
-    get mergedConfig () {
-        return mergedConfig;
-    }
-});
-var _emotion = require("@salutejs/plasma-new-hope/emotion");
-var _Avatarconfig = require("./Avatar.config");
-var mergedConfig = (0, _emotion.mergeConfig)(_emotion.avatarConfig, _Avatarconfig.config);
-var Avatar = (0, _emotion.component)(mergedConfig);
+exports.mergedConfig = exports.Avatar = void 0;
+var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");
+var _Avatar = /*#__PURE__*/require("./Avatar.config");
+var mergedConfig = exports.mergedConfig = /*#__PURE__*/(0, _emotion.mergeConfig)(_emotion.avatarConfig, _Avatar.config);
+var Avatar = exports.Avatar = /*#__PURE__*/(0, _emotion.component)(mergedConfig);

package/emotion/cjs/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/cjs/components/Avatar/index.js

@@ -1,11 +1,12 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
 Object.defineProperty(exports, "Avatar", {
-    enumerable: true,
-    get: function() {
-        return _Avatar.Avatar;
-    }
+  enumerable: true,
+  get: function get() {
+    return _Avatar.Avatar;
+  }
 });
-var _Avatar = require("./Avatar");
+var _Avatar = /*#__PURE__*/require("./Avatar");

package/emotion/cjs/components/AvatarGroup/AvatarGroup.js

@@ -1,13 +1,9 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-Object.defineProperty(exports, "AvatarGroup", {
-    enumerable: true,
-    get: function() {
-        return AvatarGroup;
-    }
-});
-var _emotion = require("@salutejs/plasma-new-hope/emotion");
-var mergedConfig = (0, _emotion.mergeConfig)(_emotion.avatarGroupConfig);
-var AvatarGroup = (0, _emotion.component)(mergedConfig);
+exports.AvatarGroup = void 0;
+var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");
+var mergedConfig = /*#__PURE__*/(0, _emotion.mergeConfig)(_emotion.avatarGroupConfig);
+var AvatarGroup = exports.AvatarGroup = /*#__PURE__*/(0, _emotion.component)(mergedConfig);

package/emotion/cjs/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/cjs/components/AvatarGroup/index.js

@@ -1,11 +1,12 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
 Object.defineProperty(exports, "AvatarGroup", {
-    enumerable: true,
-    get: function() {
-        return _AvatarGroup.AvatarGroup;
-    }
+  enumerable: true,
+  get: function get() {
+    return _AvatarGroup.AvatarGroup;
+  }
 });
-var _AvatarGroup = require("./AvatarGroup");
+var _AvatarGroup = /*#__PURE__*/require("./AvatarGroup");