@itcase/ui-web 1.9.112 → 1.9.114

package/dist/css/styles/bundles.css

@@ -80315,7 +80315,8 @@ div.label {
       &_xxl {
         min-width: var(--menu-item-size-xxl-min-width);
         min-height: var(--menu-item-size-xxl-min-height);
-        padding: var(--menu-item-size-xxl-padding);
+        padding: var(--menu-item-size-xxl-padding-vertical)
+          var(--menu-item-size-xxl-padding-horizontal);
         gap: var(--menu-item-size-xxl-gap);
         ^^&__icon_before {
           padding: var(--menu-item-size-xxl-icon-padding);
@@ -80324,7 +80325,8 @@ div.label {
       &_xl {
         min-width: var(--menu-item-size-xl-min-width);
         min-height: var(--menu-item-size-xl-min-height);
-        padding: var(--menu-item-size-xl-padding);
+        padding: var(--menu-item-size-xl-padding-vertical)
+          var(--menu-item-size-xl-padding-horizontal);
         gap: var(--menu-item-size-xl-gap);
         ^^&__icon_before {
           padding: var(--menu-item-size-xl-icon-padding);
@@ -80333,7 +80335,8 @@ div.label {
       &_l {
         min-width: var(--menu-item-size-l-min-width);
         min-height: var(--menu-item-size-l-min-height);
-        padding: var(--menu-item-size-l-padding);
+        padding: var(--menu-item-size-l-padding-vertical)
+          var(--menu-item-size-l-padding-horizontal);
         gap: var(--menu-item-size-l-gap);
         ^^&__icon_before {
           padding: var(--menu-item-size-l-icon-padding);
@@ -80342,7 +80345,8 @@ div.label {
       &_m {
         min-width: var(--menu-item-size-m-min-width);
         min-height: var(--menu-item-size-m-min-height);
-        padding: var(--menu-item-size-m-padding);
+        padding: var(--menu-item-size-m-padding-vertical)
+          var(--menu-item-size-m-padding-horizontal);
         gap: var(--menu-item-size-m-gap);
         ^^&__icon_before {
           padding: var(--menu-item-size-m-icon-padding);
@@ -80351,7 +80355,8 @@ div.label {
       &_s {
         min-width: var(--menu-item-size-s-min-width);
         min-height: var(--menu-item-size-s-min-height);
-        padding: var(--menu-item-size-s-padding);
+        padding: var(--menu-item-size-s-padding-vertical)
+          var(--menu-item-size-s-padding-horizontal);
         gap: var(--menu-item-size-s-gap);
         ^^&__icon_before {
           padding: var(--menu-item-size-s-icon-padding);
@@ -80360,7 +80365,8 @@ div.label {
       &_xs {
         min-width: var(--menu-item-size-xs-min-width);
         min-height: var(--menu-item-size-xs-min-height);
-        padding: var(--menu-item-size-xs-padding);
+        padding: var(--menu-item-size-xs-padding-vertical)
+          var(--menu-item-size-xs-padding-horizontal);
         gap: var(--menu-item-size-xs-gap);
         ^^&__icon_before {
           padding: var(--menu-item-size-xs-icon-padding);
@@ -80369,7 +80375,8 @@ div.label {
       &_xxs {
         min-width: var(--menu-item-size-xxs-min-width);
         min-height: var(--menu-item-size-xxs-min-height);
-        padding: var(--menu-item-size-xxs-padding);
+        padding: var(--menu-item-size-xxs-padding-vertical)
+          var(--menu-item-size-xxs-padding-horizontal);
         gap: var(--menu-item-size-xxs-gap);
         ^^&__icon_before {
           padding: var(--menu-item-size-xxs-icon-padding);

package/dist/types/components/Avatar/stories/AvatarCount.stories.d.ts

@@ -10,6 +10,10 @@ declare const meta: {
     };
     parameters: {
         layout: string;
+        design: {
+            type: string;
+            url: string;
+        };
     };
     tags: string[];
 };

package/dist/types/components/Avatar/stories/AvatarCount.stories.js

@@ -11,6 +11,10 @@ const meta = {
     },
     parameters: {
         layout: 'centered',
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=3-2&t=nC7GgbHgKhjeziiL-1',
+        },
     },
     tags: ['test'],
 };

package/dist/types/components/Avatar/stories/AvatarDemo.stories.js

@@ -32,6 +32,10 @@ const meta = {
         isSkeleton: false,
     },
     parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=3-2&t=nC7GgbHgKhjeziiL-1',
+        },
         layout: 'centered',
     },
     argTypes: {

package/dist/types/components/Avatar/stories/AvatarImage.stories.d.ts

@@ -10,6 +10,10 @@ declare const meta: {
     };
     parameters: {
         layout: string;
+        design: {
+            type: string;
+            url: string;
+        };
     };
     tags: string[];
 };

package/dist/types/components/Avatar/stories/AvatarImage.stories.js

@@ -11,6 +11,10 @@ const meta = {
     },
     parameters: {
         layout: 'centered',
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=3-2&t=nC7GgbHgKhjeziiL-1',
+        },
     },
     tags: ['test'],
 };

package/dist/types/components/Avatar/stories/AvatarInteraction.stories.d.ts

@@ -9,6 +9,10 @@ declare const meta: {
     };
     parameters: {
         layout: string;
+        design: {
+            type: string;
+            url: string;
+        };
     };
     tags: string[];
 };

package/dist/types/components/Avatar/stories/AvatarInteraction.stories.js

@@ -10,6 +10,10 @@ const meta = {
     },
     parameters: {
         layout: 'centered',
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=3-2&t=nC7GgbHgKhjeziiL-1',
+        },
     },
     tags: ['test'],
 };

package/dist/types/components/Avatar/stories/AvatarLetters.stories.d.ts

@@ -11,6 +11,10 @@ declare const meta: {
     };
     parameters: {
         layout: string;
+        design: {
+            type: string;
+            url: string;
+        };
     };
     tags: string[];
 };

package/dist/types/components/Avatar/stories/AvatarLetters.stories.js

@@ -12,6 +12,10 @@ const meta = {
     },
     parameters: {
         layout: 'centered',
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=3-2&t=nC7GgbHgKhjeziiL-1',
+        },
     },
     tags: ['test'],
 };

package/dist/types/components/Avatar/stories/AvatarSkeleton.stories.d.ts

@@ -10,6 +10,10 @@ declare const meta: {
     };
     parameters: {
         layout: string;
+        design: {
+            type: string;
+            url: string;
+        };
     };
     tags: string[];
 };

package/dist/types/components/Avatar/stories/AvatarSkeleton.stories.js

@@ -11,6 +11,10 @@ const meta = {
     },
     parameters: {
         layout: 'centered',
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=3-2&t=nC7GgbHgKhjeziiL-1',
+        },
     },
     tags: ['test'],
 };

package/dist/types/components/AvatarStack/AvatarStack.interface.d.ts

@@ -1,26 +1,21 @@
 import { StringId } from '@itcase/types-core';
-import type { AppearanceKeysPx, AppearancePartialRecord, AppearanceSizePxKey, DirectionProps, SizePXProps } from '@itcase/types-ui';
+import type { DirectionProps, SizePXProps } from '@itcase/types-ui';
+import { CompositeAppearanceWithoutSizeKeys } from '@itcase/types-ui';
 import { StyleAttributes } from '@itcase/ui-core/hooks';
-import { AvatarConfig, AvatarProps } from '../Avatar/Avatar.interface';
-type AvatarStackAppearanceProps = {
-    size?: SizePXProps;
-};
 type AvatarsItem = {
     id: StringId;
     firstName: string;
     lastName: string;
     src: string;
 };
-type AvatarStackProps = AvatarStackAppearanceProps & StyleAttributes & {
-    appearance?: AppearanceKeysPx;
-    avatarAppearance?: AvatarProps['appearance'];
+type AvatarStackProps = StyleAttributes & {
+    avatarAppearance?: CompositeAppearanceWithoutSizeKeys;
     avatarsList: AvatarsItem[];
     className?: string;
     dataTestId?: string;
     direction?: DirectionProps;
     isSkeleton?: boolean;
     length?: number;
+    size?: SizePXProps;
 };
-type AvatarStackAppearance = AvatarConfig['appearance'];
-type AvatarStackAppearanceSize = AppearancePartialRecord<AppearanceSizePxKey, AvatarStackAppearanceProps, 'size'>;
-export type { AvatarStackAppearance, AvatarStackAppearanceSize, AvatarStackProps, };
+export type { AvatarStackProps };

package/dist/types/components/AvatarStack/AvatarStack.js

@@ -1,23 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
-import { useAppearanceConfig, useDevicePropsGenerator, useStyles, } from '@itcase/ui-core/hooks';
+import { useStyles } from '@itcase/ui-core/hooks';
 import { mergeAppearanceKeys } from '@itcase/ui-core/utils';
 import { Avatar } from 'src/components/Avatar';
 import { Group } from 'src/components/Group';
 import { Text } from 'src/components/Text';
-import { avatarStackAppearance } from './AvatarStack.appearance';
-const avatarStackConfig = {
-    appearance: avatarStackAppearance,
-    setAppearance: (appearanceConfig) => {
-        avatarStackConfig.appearance = appearanceConfig;
-    },
-};
 function AvatarStack(props) {
-    const { appearance, className, dataTestId, direction = 'horizontal', avatarAppearance, avatarsList, length = 3, isSkeleton, } = props;
-    const appearanceConfig = useAppearanceConfig(appearance, avatarStackConfig);
-    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    const { size } = propsGenerator;
+    const { className, dataTestId, direction = 'horizontal', size = '56', avatarAppearance, avatarsList, length = 3, isSkeleton, } = props;
     const { styles: avatarStackStyles } = useStyles(props);
-    return (avatarsList.length && (_jsxs("div", { className: clsx(className, 'avatar-stack', direction && `group_direction_${direction}`, size && `avatar-stack_size_${size}`, isSkeleton && `skeleton`), "data-testid": dataTestId, style: avatarStackStyles, children: [avatarsList.slice(0, length).map((item) => (_jsx(Avatar, { appearance: mergeAppearanceKeys(avatarAppearance, `size${size}`), className: "avatar-stack__item", src: item.src, textSize: "l", firstName: item.firstName, secondName: item.lastName, shape: "circular" }, item.id))), avatarsList.length > length && (_jsx(Group, { className: "avatar-stack__item avatar-stack__item-text", width: `${size}px`, height: `${size}px`, fill: "surfaceSecondary", children: _jsxs(Text, { size: "xs", textColor: "surfaceTextPrimary", textWeight: "600", children: ["+", avatarsList.length - length] }) }))] })));
+    return (avatarsList.length && (_jsxs("div", { className: clsx(className, 'avatar-stack', direction && `avatar-stack_direction_${direction}`, `avatar-stack_size_${size}`), "data-testid": dataTestId, style: avatarStackStyles, children: [avatarsList.slice(0, length).map((item) => (_jsx(Avatar, { appearance: mergeAppearanceKeys(avatarAppearance, `size${size}`), className: "avatar-stack__item", src: item.src, firstName: item.firstName, secondName: item.lastName, isSkeleton: isSkeleton }, item.id))), avatarsList.length > length && (_jsx(Group, { className: clsx('avatar-stack__item avatar-stack__item-text', isSkeleton && 'skeleton'), width: `${size}px`, height: `${size}px`, fill: "surfaceSecondary", children: _jsxs(Text, { size: "xs", textColor: "surfaceTextPrimary", textWeight: "600", children: ["+", avatarsList.length - length] }) }))] })));
 }
 export { AvatarStack };

package/dist/types/components/AvatarStack/index.d.ts

@@ -1,3 +1,3 @@
 import { AvatarStack } from './AvatarStack';
 export { AvatarStack };
-export type { AvatarStackAppearance, AvatarStackProps, } from './AvatarStack.interface';
+export type { AvatarStackProps } from './AvatarStack.interface';

package/dist/types/components/AvatarStack/stories/AvatarStackCount.stories.d.ts

@@ -4,8 +4,9 @@ declare const meta: {
     title: string;
     component: typeof AvatarStack;
     args: {
-        appearance: "size56";
-        avatarAppearance: "surfaceSecondary size56 solid rounded";
+        dataTestId: string;
+        size: "56";
+        avatarAppearance: "surfaceSecondary solid circular";
         avatarsList: {
             id: string;
             src: string;
@@ -15,10 +16,17 @@ declare const meta: {
     };
     parameters: {
         layout: string;
+        design: {
+            type: string;
+            url: string;
+        };
     };
+    tags: string[];
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Length3: Story;
-export declare const Length2: Story;
 export declare const Length1: Story;
+export declare const Length2: Story;
+export declare const Length3: Story;
+export declare const Length4: Story;
+export declare const Length5: Story;

package/dist/types/components/AvatarStack/stories/AvatarStackCount.stories.js

@@ -1,40 +1,76 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import * as storybookTest from 'storybook/test';
 import { AvatarStack } from '..';
 import { avatarsListMock } from './__mock__';
 const meta = {
     title: 'Molecules / Avatar Stack / Length',
     component: AvatarStack,
     args: {
-        appearance: 'size56',
-        avatarAppearance: `surfaceSecondary size56 solid rounded`,
+        dataTestId: 'avatarStackLengthTestId',
+        size: '56',
+        avatarAppearance: 'surfaceSecondary solid circular',
         avatarsList: avatarsListMock,
     },
     parameters: {
         layout: 'centered',
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=726-536&t=nC7GgbHgKhjeziiL-1',
+        },
     },
+    tags: ['test'],
 };
 export default meta;
-export const Length3 = {
+const lengthPlay = async ({ args, canvas, step }) => {
+    const { dataTestId, avatarsList = avatarsListMock, length = 0 } = args;
+    const overflow = avatarsList.length - length;
+    await step(`AvatarStack: ${length} avatar(s)${overflow > 0 ? ` and +${overflow} badge` : ', no overflow badge'}`, async () => {
+        const root = canvas.getByTestId(dataTestId);
+        const items = root.querySelectorAll(':scope > .avatar-stack__item:not(.avatar-stack__item-text)');
+        const badge = root.querySelector(':scope > .avatar-stack__item-text');
+        await storybookTest
+            .expect({
+            overflow: badge?.textContent ?? null,
+            avatars: items.length,
+        })
+            .toEqual({
+            overflow: overflow > 0 ? `+${overflow}` : null,
+            avatars: length,
+        });
+    });
+};
+export const Length1 = {
     args: {
-        length: 3,
-    },
-    render: (args) => {
-        return _jsx(AvatarStack, { ...args });
+        length: 1,
     },
+    play: lengthPlay,
+    render: (args) => _jsx(AvatarStack, { ...args }),
 };
 export const Length2 = {
     args: {
         length: 2,
     },
-    render: (args) => {
-        return _jsx(AvatarStack, { ...args });
+    play: lengthPlay,
+    render: (args) => _jsx(AvatarStack, { ...args }),
+};
+export const Length3 = {
+    args: {
+        length: 3,
     },
+    play: lengthPlay,
+    render: (args) => _jsx(AvatarStack, { ...args }),
 };
-export const Length1 = {
+export const Length4 = {
     args: {
-        length: 1,
+        length: 4,
     },
-    render: (args) => {
-        return _jsx(AvatarStack, { ...args });
+    play: lengthPlay,
+    render: (args) => _jsx(AvatarStack, { ...args }),
+};
+export const Length5 = {
+    args: {
+        length: 5,
     },
+    play: lengthPlay,
+    render: (args) => _jsx(AvatarStack, { ...args }),
 };

package/dist/types/components/AvatarStack/stories/AvatarStackDemo.stories.d.ts

@@ -4,7 +4,8 @@ declare const meta: {
     title: string;
     component: typeof AvatarStack;
     args: {
-        avatarAppearance: "surfaceSecondary size56 solid rounded";
+        size: "56";
+        avatarAppearance: "surfaceSecondary solid circular";
         avatarsList: {
             id: string;
             src: string;
@@ -14,9 +15,12 @@ declare const meta: {
     };
     parameters: {
         layout: string;
+        design: {
+            type: string;
+            url: string;
+        };
     };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Demo: Story;
-export declare const Skeleton: Story;

package/dist/types/components/AvatarStack/stories/AvatarStackDemo.stories.js

@@ -5,24 +5,19 @@ const meta = {
     title: 'Molecules / Avatar Stack',
     component: AvatarStack,
     args: {
-        avatarAppearance: `surfaceSecondary size56 solid rounded`,
+        size: '56',
+        avatarAppearance: 'surfaceSecondary solid circular',
         avatarsList: avatarsListMock,
     },
     parameters: {
         layout: 'centered',
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=726-536&t=nC7GgbHgKhjeziiL-1',
+        },
     },
 };
 export default meta;
 export const Demo = {
-    render: (args) => {
-        return _jsx(AvatarStack, { ...args });
-    },
-};
-export const Skeleton = {
-    args: {
-        isSkeleton: true,
-    },
-    render: (args) => {
-        return _jsx(AvatarStack, { ...args });
-    },
+    render: (args) => _jsx(AvatarStack, { ...args }),
 };

package/dist/types/components/AvatarStack/stories/AvatarStackSize.stories.d.ts

@@ -4,17 +4,25 @@ declare const meta: {
     title: string;
     component: typeof AvatarStack;
     args: {
-        avatarAppearance: "surfaceSecondary size56 solid rounded";
+        dataTestId: string;
+        size: "56";
+        avatarAppearance: "surfaceSecondary solid circular";
         avatarsList: {
             id: string;
             src: string;
             firstName: string;
             lastName: string;
         }[];
+        length: number;
     };
     parameters: {
         layout: string;
+        design: {
+            type: string;
+            url: string;
+        };
     };
+    tags: string[];
 };
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/types/components/AvatarStack/stories/AvatarStackSize.stories.js

@@ -1,63 +1,77 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import * as storybookTest from 'storybook/test';
 import { AvatarStack } from '..';
 import { avatarsListMock } from './__mock__';
 const meta = {
     title: 'Molecules / Avatar Stack / Size',
     component: AvatarStack,
     args: {
-        avatarAppearance: `surfaceSecondary size56 solid rounded`,
+        dataTestId: 'avatarStackSizeTestId',
+        size: '56',
+        avatarAppearance: 'surfaceSecondary solid circular',
         avatarsList: avatarsListMock,
+        length: 1,
     },
     parameters: {
         layout: 'centered',
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=726-536&t=nC7GgbHgKhjeziiL-1',
+        },
     },
+    tags: ['test'],
 };
 export default meta;
+const sizePlay = async ({ args, canvas, step }) => {
+    const { dataTestId, size, avatarsList = avatarsListMock, length = avatarsListMock.length, } = args;
+    const root = canvas.getByTestId(dataTestId);
+    const item = root.querySelector(':scope > .avatar-stack__item:not(.avatar-stack__item-text)');
+    await step(`AvatarStack: avatar ${size}px`, async () => {
+        await storybookTest.expect(root).toHaveClass(`avatar-stack_size_${size}`);
+        await storybookTest.expect(item).toHaveClass(`avatar_size_${size}`);
+        await storybookTest
+            .expect([item.clientWidth, item.clientHeight])
+            .toEqual([Number(size), Number(size)]);
+    });
+    const badge = root.querySelector(':scope > .avatar-stack__item-text');
+    await step(`Badge text is +${avatarsList.length - length}`, async () => {
+        await storybookTest
+            .expect(badge)
+            .toHaveTextContent(`+${avatarsList.length - length}`);
+    });
+    await step(`Badge size is ${size}px`, async () => {
+        await storybookTest
+            .expect([badge.clientWidth, badge.clientHeight])
+            .toEqual([Number(size), Number(size)]);
+    });
+};
 export const Size56 = {
-    args: {
-        appearance: 'size56',
-    },
-    render: (args) => {
-        return _jsx(AvatarStack, { ...args });
-    },
+    args: { size: '56' },
+    play: sizePlay,
+    render: (args) => _jsx(AvatarStack, { ...args }),
 };
 export const Size40 = {
-    args: {
-        appearance: 'size40',
-    },
-    render: (args) => {
-        return _jsx(AvatarStack, { ...args });
-    },
+    args: { size: '40' },
+    play: sizePlay,
+    render: (args) => _jsx(AvatarStack, { ...args }),
 };
 export const Size32 = {
-    args: {
-        appearance: 'size32',
-    },
-    render: (args) => {
-        return _jsx(AvatarStack, { ...args });
-    },
+    args: { size: '32' },
+    play: sizePlay,
+    render: (args) => _jsx(AvatarStack, { ...args }),
 };
 export const Size24 = {
-    args: {
-        appearance: 'size24',
-    },
-    render: (args) => {
-        return _jsx(AvatarStack, { ...args });
-    },
+    args: { size: '24' },
+    play: sizePlay,
+    render: (args) => _jsx(AvatarStack, { ...args }),
 };
 export const Size20 = {
-    args: {
-        appearance: 'size20',
-    },
-    render: (args) => {
-        return _jsx(AvatarStack, { ...args });
-    },
+    args: { size: '20' },
+    play: sizePlay,
+    render: (args) => _jsx(AvatarStack, { ...args }),
 };
 export const Size16 = {
-    args: {
-        appearance: 'size16',
-    },
-    render: (args) => {
-        return _jsx(AvatarStack, { ...args });
-    },
+    args: { size: '16' },
+    play: sizePlay,
+    render: (args) => _jsx(AvatarStack, { ...args }),
 };

package/dist/types/components/AvatarStack/{__test__/AvatarStackTest.stories.d.ts → stories/AvatarStackSkeleton.stories.d.ts}

@@ -5,20 +5,25 @@ declare const meta: {
     component: typeof AvatarStack;
     args: {
         dataTestId: string;
-        avatarAppearance: "surfaceSecondary size56 solid rounded";
+        size: "56";
+        avatarAppearance: "surfaceSecondary solid circular";
         avatarsList: {
             id: string;
             src: string;
             firstName: string;
             lastName: string;
         }[];
+        isSkeleton: true;
     };
     parameters: {
         layout: string;
+        design: {
+            type: string;
+            url: string;
+        };
     };
     tags: string[];
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Skeleton: Story;
-export declare const Length: Story;

package/dist/types/components/AvatarStack/stories/AvatarStackSkeleton.stories.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as storybookTest from 'storybook/test';
+import { AvatarStack } from '../AvatarStack';
+import { avatarsListMock } from './__mock__';
+const meta = {
+    title: 'Molecules / Avatar Stack / Skeleton',
+    component: AvatarStack,
+    args: {
+        dataTestId: 'avatarStackSkeletonTestId',
+        size: '56',
+        avatarAppearance: 'surfaceSecondary solid circular',
+        avatarsList: avatarsListMock,
+        isSkeleton: true,
+    },
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=726-536&t=nC7GgbHgKhjeziiL-1',
+        },
+    },
+    tags: ['test'],
+};
+export default meta;
+const avatarItemSelector = ':scope > .avatar-stack__item:not(.avatar-stack__item-text)';
+export const Skeleton = {
+    play: async ({ args, canvas, step }) => {
+        const { avatarsList = avatarsListMock, length = 3 } = args;
+        const hasOverflow = avatarsList.length > length;
+        await step(`AvatarStack: ${length} skeleton avatar(s)${hasOverflow ? ' and skeleton overflow badge' : ''}`, async () => {
+            const root = canvas.getByTestId(args.dataTestId);
+            const avatars = root.querySelectorAll(avatarItemSelector);
+            const overflow = root.querySelector(':scope > .avatar-stack__item-text');
+            await storybookTest.expect(avatars.length).toBe(length);
+            for (const avatar of avatars) {
+                await storybookTest.expect(avatar).toHaveClass('skeleton');
+            }
+            if (hasOverflow) {
+                await storybookTest.expect(overflow).toHaveClass('skeleton');
+            }
+            else {
+                await storybookTest.expect(overflow).toBeNull();
+            }
+        });
+    },
+    render: (args) => _jsx(AvatarStack, { ...args }),
+};