@itcase/ui-web 1.9.104 → 1.9.106

package/dist/types/components/Loader/stories/LoaderStyle.stories.js

@@ -10,7 +10,7 @@ const meta = {
 export default meta;
 export const Solid = {
     args: {
-        appearance: 'accentPrimary sizeL solid',
+        appearance: 'accentPrimary sizeL solid rounded',
     },
     render: (args) => {
         return _jsx(Loader, { ...args });
@@ -18,7 +18,7 @@ export const Solid = {
 };
 export const Outlined = {
     args: {
-        appearance: 'accentPrimary sizeL outlined',
+        appearance: 'accentPrimary sizeL outlined rounded',
     },
     render: (args) => {
         return _jsx(Loader, { ...args });
@@ -26,7 +26,7 @@ export const Outlined = {
 };
 export const Full = {
     args: {
-        appearance: 'accentPrimary sizeL full',
+        appearance: 'accentPrimary sizeL full rounded',
     },
     render: (args) => {
         return _jsx(Loader, { ...args });
@@ -34,7 +34,7 @@ export const Full = {
 };
 export const Ghost = {
     args: {
-        appearance: 'accentPrimary sizeL ghost',
+        appearance: 'accentPrimary sizeL ghost rounded',
     },
     render: (args) => {
         return _jsx(Loader, { ...args });

package/dist/types/components/Loader/stories/LoaderText.stories.d.ts

@@ -4,7 +4,7 @@ declare const meta: {
     title: string;
     component: typeof Loader;
     args: {
-        appearance: "accentPrimary sizeL";
+        appearance: "accentPrimary sizeL solid rounded";
     };
     parameters: {
         layout: string;

package/dist/types/components/Loader/stories/LoaderText.stories.js

@@ -4,7 +4,7 @@ const meta = {
     title: 'Atoms / Loader / Text',
     component: Loader,
     args: {
-        appearance: 'accentPrimary sizeL',
+        appearance: 'accentPrimary sizeL solid rounded',
     },
     parameters: {
         layout: 'center',

package/dist/types/components/Loader/stories/LoaderType.stories.d.ts

@@ -4,7 +4,7 @@ declare const meta: {
     title: string;
     component: typeof Loader;
     args: {
-        appearance: "accentPrimary sizeL";
+        appearance: "accentPrimary sizeL solid rounded";
     };
     parameters: {
         layout: string;

package/dist/types/components/Loader/stories/LoaderType.stories.js

@@ -4,7 +4,7 @@ const meta = {
     title: 'Atoms / Loader / Type',
     component: Loader,
     args: {
-        appearance: 'accentPrimary sizeL',
+        appearance: 'accentPrimary sizeL solid rounded',
     },
     parameters: {
         layout: 'center',

package/dist/types/components/MenuItem/MenuItem.appearance.d.ts

@@ -6,16 +6,16 @@ declare const menuItemAppearance: {
         shape: "rounded";
     };
     roundedXL: {
-        shape: "rounded";
+        shape: "roundedXL";
     };
     roundedL: {
-        shape: "rounded";
+        shape: "roundedL";
     };
     roundedM: {
-        shape: "rounded";
+        shape: "roundedM";
     };
     roundedS: {
-        shape: "rounded";
+        shape: "roundedS";
     };
     surfaceMutedPrimary: {
         fill: "surfaceSecondary";

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

@@ -2,6 +2,7 @@ import type { CSSProperties, ElementType, ReactNode } from 'react';
 import type { LinkProps } from 'react-scroll';
 import type { AlignProps, AppearanceConfig, AppearanceKeysDefault, AppearancePartialRecord, AppearanceRecord, AppearanceShapeKey, AppearanceSizeKey, AppearanceStyleKey, ArrowPosition, BorderColorProps, CompositeAppearanceKeys, DirectionProps, FillActiveHoverProps, FillActiveProps, FillHoverProps, FillProps, JustifyContentProps, ShapeProps, TextSizeProps, UnderlineProps } from '@itcase/types-ui';
 import { StyleAttributes } from '@itcase/ui-core/hooks';
+import type { ComponentGalleryArgs } from 'src/storybook/createComponentGallery';
 import type { IconProps } from '../Icon/Icon.interface';
 import type { TextProps } from '../Text/Text.interface';
 import type { RCComponentTooltipWrapperPlacement, TooltipProps, TooltipWrapperProps } from '../Tooltip/Tooltip.interface';
@@ -93,4 +94,9 @@ type MenuItemAppearance = MenuItemConfig['appearance'];
 type MenuItemAppearanceStyle = AppearanceRecord<AppearanceStyleKey, MenuItemAppearanceProps, 'borderColor' | 'fill'>;
 type MenuItemAppearanceShape = AppearancePartialRecord<AppearanceShapeKey, MenuItemAppearanceProps, 'shape'>;
 type MenuItemAppearanceSize = AppearancePartialRecord<AppearanceSizeKey, MenuItemAppearanceProps, 'iconAfterSize' | 'iconBeforeSize' | 'labelTextSize' | 'size' | 'tooltipSize' | 'tooltipTextSize'>;
-export type { MenuItemAppearance, MenuItemAppearanceShape, MenuItemAppearanceSize, MenuItemAppearanceStyle, MenuItemConfig, MenuItemProps, };
+type MenuItemAppearanceKey = NonNullable<MenuItemProps['appearance']>;
+type MenuItemGalleryStory = ComponentGalleryArgs & Pick<MenuItemProps, 'isDisabled' | 'isSkeleton' | 'label'> & {
+    iconAfter?: boolean;
+    iconBefore?: boolean;
+};
+export type { MenuItemAppearance, MenuItemAppearanceKey, MenuItemAppearanceShape, MenuItemAppearanceSize, MenuItemAppearanceStyle, MenuItemConfig, MenuItemGalleryStory, MenuItemProps, };

package/dist/types/components/MenuItem/appearance/menuItemShape.d.ts

@@ -6,16 +6,16 @@ declare const menuItemAppearanceShape: {
         shape: "rounded";
     };
     roundedXL: {
-        shape: "rounded";
+        shape: "roundedXL";
     };
     roundedL: {
-        shape: "rounded";
+        shape: "roundedL";
     };
     roundedM: {
-        shape: "rounded";
+        shape: "roundedM";
     };
     roundedS: {
-        shape: "rounded";
+        shape: "roundedS";
     };
 };
 export { menuItemAppearanceShape };

package/dist/types/components/MenuItem/appearance/menuItemShape.js

@@ -6,16 +6,16 @@ const menuItemAppearanceShape = {
         shape: 'rounded',
     },
     roundedXL: {
-        shape: 'rounded',
+        shape: 'roundedXL',
     },
     roundedL: {
-        shape: 'rounded',
+        shape: 'roundedL',
     },
     roundedM: {
-        shape: 'rounded',
+        shape: 'roundedM',
     },
     roundedS: {
-        shape: 'rounded',
+        shape: 'roundedS',
     },
 };
 export { menuItemAppearanceShape };

package/dist/types/components/MenuItem/stories/MenuItemDefault.stories.js

@@ -16,7 +16,7 @@ const meta = {
 export default meta;
 export const Surface = {
     args: {
-        appearance: 'surfacePrimary sizeXXL',
+        appearance: 'surfacePrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(MenuItem, { ...args });
@@ -24,7 +24,7 @@ export const Surface = {
 };
 export const Accent = {
     args: {
-        appearance: 'accentPrimary sizeXXL',
+        appearance: 'accentPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(MenuItem, { ...args });
@@ -32,7 +32,7 @@ export const Accent = {
 };
 export const Error = {
     args: {
-        appearance: 'errorPrimary sizeXXL',
+        appearance: 'errorPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(MenuItem, { ...args });

package/dist/types/components/MenuItem/stories/MenuItemDemo.stories.d.ts

@@ -1,19 +1,6 @@
-import type { StoryObj } from '@storybook/react-vite';
-import { MenuItem } from '../MenuItem';
-declare const meta: {
-    title: string;
-    component: typeof MenuItem;
-    args: {
-        appearance: "surfacePrimary sizeXXL solid";
-        label: string;
-        iconAfter: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
-        iconBefore: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
-    };
-    parameters: {
-        layout: string;
-    };
-};
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { MenuItemGalleryStory } from '../MenuItem.interface';
+declare const meta: Meta<MenuItemGalleryStory>;
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<MenuItemGalleryStory>;
 export declare const Demo: Story;
-export declare const Skeleton: Story;

package/dist/types/components/MenuItem/stories/MenuItemDemo.stories.js

@@ -1,30 +1,59 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { icons20 } from '@itcase/icons-default';
+import { icons12, icons16, icons20 } from '@itcase/icons-default';
+import { createComponentGallery } from 'src/storybook/createComponentGallery';
+import { menuItemAppearanceAccent } from '../appearance/menuItemAccent';
+import { menuItemAppearanceError } from '../appearance/menuItemError';
+import { menuItemAppearanceShape } from '../appearance/menuItemShape';
+import { menuItemAppearanceSize } from '../appearance/menuItemSize';
+import { menuItemAppearanceStyle } from '../appearance/menuItemStyle';
+import { menuItemAppearanceSurface } from '../appearance/menuItemSurface';
 import { MenuItem } from '../MenuItem';
+const galleryIconsBySizeKey = {
+    sizeXXL: icons20.Placeholder.Default,
+    sizeXL: icons20.Placeholder.Default,
+    sizeL: icons16.Placeholder.Default,
+    sizeM: icons16.Placeholder.Default,
+    sizeS: icons12.Placeholder.Default,
+    sizeXS: icons12.Placeholder.Default,
+    sizeXXS: icons12.Placeholder.Default,
+};
+const gallery = createComponentGallery({
+    size: menuItemAppearanceSize,
+    appearanceGroups: {
+        accent: menuItemAppearanceAccent,
+        error: menuItemAppearanceError,
+        surface: menuItemAppearanceSurface,
+    },
+    shape: menuItemAppearanceShape,
+    style: menuItemAppearanceStyle,
+});
 const meta = {
     title: 'Atoms / MenuItem',
-    component: MenuItem,
     args: {
-        appearance: 'surfacePrimary sizeXXL solid',
+        appearance: 'surface sizeM solid rounded',
+        tier: 'Primary',
+        style: 'solid',
+        shape: 'rounded',
         label: 'Label',
-        iconAfter: icons20.Placeholder.Default,
-        iconBefore: icons20.Placeholder.Default,
+        iconBefore: true,
+        iconAfter: true,
+        isDisabled: false,
+        isSkeleton: false,
     },
     parameters: {
         layout: 'centered',
     },
+    argTypes: {
+        appearance: gallery.argTypes.appearance,
+        tier: gallery.argTypes.tier,
+        style: gallery.argTypes.style,
+        shape: gallery.argTypes.shape,
+    },
 };
 export default meta;
 export const Demo = {
-    render: (args) => {
-        return _jsx(MenuItem, { ...args });
-    },
-};
-export const Skeleton = {
-    args: {
-        isSkeleton: true,
-    },
-    render: (args) => {
-        return _jsx(MenuItem, { ...args });
-    },
+    render: (args) => gallery.render(args, ({ appearance, args: storyArgs, sizeKey }) => {
+        const icon = galleryIconsBySizeKey[sizeKey];
+        return (_jsx(MenuItem, { appearance: appearance, label: storyArgs.label, iconAfter: storyArgs.iconAfter ? icon : undefined, iconBefore: storyArgs.iconBefore ? icon : undefined, isDisabled: storyArgs.isDisabled, isSkeleton: storyArgs.isSkeleton }));
+    }),
 };

package/dist/types/components/MenuItem/stories/MenuItemIcon.stories.js

@@ -11,7 +11,7 @@ const meta = {
 export default meta;
 export const Surface = {
     args: {
-        appearance: 'surfacePrimary sizeXXL',
+        appearance: 'surfacePrimary sizeXXL solid rounded',
         iconBefore: icons20.Placeholder.Default,
     },
     render: (args) => {
@@ -20,7 +20,7 @@ export const Surface = {
 };
 export const Accent = {
     args: {
-        appearance: 'accentPrimary sizeXXL',
+        appearance: 'accentPrimary sizeXXL solid rounded',
         iconBefore: icons20.Placeholder.Default,
     },
     render: (args) => {
@@ -29,7 +29,7 @@ export const Accent = {
 };
 export const Error = {
     args: {
-        appearance: 'errorPrimary sizeXXL',
+        appearance: 'errorPrimary sizeXXL solid rounded',
         iconBefore: icons20.Placeholder.Default,
     },
     render: (args) => {

package/dist/types/components/MenuItem/stories/MenuItemIconMuted.stories.js

@@ -11,7 +11,7 @@ const meta = {
 export default meta;
 export const Surface = {
     args: {
-        appearance: 'surfaceMutedPrimary sizeXXL',
+        appearance: 'surfaceMutedPrimary sizeXXL solid rounded',
         iconBefore: icons20.Placeholder.Default,
     },
     render: (args) => {
@@ -20,7 +20,7 @@ export const Surface = {
 };
 export const Accent = {
     args: {
-        appearance: 'accentMutedPrimary sizeXXL',
+        appearance: 'accentMutedPrimary sizeXXL solid rounded',
         iconBefore: icons20.Placeholder.Default,
     },
     render: (args) => {
@@ -29,7 +29,7 @@ export const Accent = {
 };
 export const Error = {
     args: {
-        appearance: 'errorMutedPrimary sizeXXL',
+        appearance: 'errorMutedPrimary sizeXXL solid rounded',
         iconBefore: icons20.Placeholder.Default,
     },
     render: (args) => {

package/dist/types/components/MenuItem/stories/MenuItemMuted.stories.js

@@ -16,7 +16,7 @@ const meta = {
 export default meta;
 export const Surface = {
     args: {
-        appearance: 'surfaceMutedPrimary sizeXXL',
+        appearance: 'surfaceMutedPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(MenuItem, { ...args });
@@ -24,7 +24,7 @@ export const Surface = {
 };
 export const Accent = {
     args: {
-        appearance: 'accentMutedPrimary sizeXXL',
+        appearance: 'accentMutedPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(MenuItem, { ...args });
@@ -32,7 +32,7 @@ export const Accent = {
 };
 export const Error = {
     args: {
-        appearance: 'errorMutedPrimary sizeXXL',
+        appearance: 'errorMutedPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(MenuItem, { ...args });

package/dist/types/components/MenuItem/stories/MenuItemSize.stories.js

@@ -14,7 +14,7 @@ const meta = {
 export default meta;
 export const SizeXXL = {
     args: {
-        appearance: 'surfacePrimary sizeXXL',
+        appearance: 'surfacePrimary sizeXXL solid rounded',
         iconAfter: icons20.Placeholder.Default,
         iconBefore: icons20.Placeholder.Default,
     },
@@ -22,7 +22,7 @@ export const SizeXXL = {
 };
 export const SizeXL = {
     args: {
-        appearance: 'surfacePrimary sizeXL',
+        appearance: 'surfacePrimary sizeXL solid rounded',
         iconAfter: icons20.Placeholder.Default,
         iconBefore: icons20.Placeholder.Default,
     },
@@ -30,7 +30,7 @@ export const SizeXL = {
 };
 export const SizeL = {
     args: {
-        appearance: 'surfacePrimary sizeL',
+        appearance: 'surfacePrimary sizeL solid rounded',
         iconAfter: icons16.Placeholder.Default,
         iconBefore: icons16.Placeholder.Default,
     },
@@ -38,7 +38,7 @@ export const SizeL = {
 };
 export const SizeM = {
     args: {
-        appearance: 'surfacePrimary sizeM',
+        appearance: 'surfacePrimary sizeM solid rounded',
         iconAfter: icons16.Placeholder.Default,
         iconBefore: icons16.Placeholder.Default,
     },
@@ -46,7 +46,7 @@ export const SizeM = {
 };
 export const SizeS = {
     args: {
-        appearance: 'surfacePrimary sizeS',
+        appearance: 'surfacePrimary sizeS solid rounded',
         iconAfter: icons12.Placeholder.Default,
         iconBefore: icons12.Placeholder.Default,
     },
@@ -54,7 +54,7 @@ export const SizeS = {
 };
 export const SizeXS = {
     args: {
-        appearance: 'surfacePrimary sizeXS',
+        appearance: 'surfacePrimary sizeXS solid rounded',
         iconAfter: icons12.Placeholder.Default,
         iconBefore: icons12.Placeholder.Default,
     },
@@ -62,7 +62,7 @@ export const SizeXS = {
 };
 export const SizeXXS = {
     args: {
-        appearance: 'surfacePrimary sizeXXS',
+        appearance: 'surfacePrimary sizeXXS solid rounded',
         iconAfter: icons12.Placeholder.Default,
         iconBefore: icons12.Placeholder.Default,
     },

package/dist/types/components/MenuItem/stories/MenuItemStyle.stories.js

@@ -16,7 +16,7 @@ const meta = {
 export default meta;
 export const Solid = {
     args: {
-        appearance: 'surfacePrimary sizeXXL solid',
+        appearance: 'surfacePrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(MenuItem, { ...args });
@@ -24,7 +24,7 @@ export const Solid = {
 };
 export const Outlined = {
     args: {
-        appearance: 'surfacePrimary sizeXXL outlined',
+        appearance: 'surfacePrimary sizeXXL outlined rounded',
     },
     render: (args) => {
         return _jsx(MenuItem, { ...args });
@@ -32,7 +32,7 @@ export const Outlined = {
 };
 export const Full = {
     args: {
-        appearance: 'surfacePrimary sizeXXL full',
+        appearance: 'surfacePrimary sizeXXL full rounded',
     },
     render: (args) => {
         return _jsx(MenuItem, { ...args });
@@ -40,7 +40,7 @@ export const Full = {
 };
 export const Ghost = {
     args: {
-        appearance: 'surfacePrimary sizeXXL ghost',
+        appearance: 'surfacePrimary sizeXXL ghost rounded',
     },
     render: (args) => {
         return _jsx(MenuItem, { ...args });

package/dist/types/components/MenuItem/stories/MenuItemTooltip.stories.d.ts

@@ -4,10 +4,10 @@ declare const meta: {
     title: string;
     component: typeof MenuItem;
     args: {
-        appearance: "surfacePrimary sizeXXL";
+        appearance: "surfacePrimary sizeXXL solid rounded";
         label: string;
         showTooltip: true;
-        tooltipAppearance: "defaultPrimary sizeL";
+        tooltipAppearance: "defaultPrimary sizeL solid rounded";
         tooltipText: string;
         tooltipTitle: string;
     };

package/dist/types/components/MenuItem/stories/MenuItemTooltip.stories.js

@@ -4,10 +4,10 @@ const meta = {
     title: 'Atoms / MenuItem / Tooltip',
     component: MenuItem,
     args: {
-        appearance: 'surfacePrimary sizeXXL',
+        appearance: 'surfacePrimary sizeXXL solid rounded',
         label: 'Label',
         showTooltip: true,
-        tooltipAppearance: 'defaultPrimary sizeL',
+        tooltipAppearance: 'defaultPrimary sizeL solid rounded',
         tooltipText: 'Text',
         tooltipTitle: 'Title',
     },

package/dist/types/components/Modal/Modal.appearance.d.ts

@@ -41,21 +41,21 @@ declare const modalAppearance: {
         shape: "rounded";
     };
     roundedXL: {
-        shape: "rounded";
+        shape: "roundedXL";
     };
     roundedL: {
-        shape: "rounded";
+        shape: "roundedL";
     };
     roundedM: {
-        shape: "rounded";
+        shape: "roundedM";
     };
     roundedS: {
-        shape: "rounded";
+        shape: "roundedS";
     };
     surfacePrimary: {
         fill: "surfacePrimary";
         borderColor: "surfaceBorderPrimary";
-        closeIconAppearance: "surfacePrimary ghost circular";
+        closeIconAppearance: "surfacePrimary size12_12 ghost circular";
     };
 };
 export { modalAppearance };

package/dist/types/components/Modal/__test__/ModalTest.stories.d.ts

@@ -0,0 +1,75 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<{
+        borderColor?: import("@itcase/types-ui").BorderColorProps;
+        borderType?: import("@itcase/types-ui").BorderTypeProps;
+        borderWidth?: import("@itcase/types-ui").BorderWidthProps;
+        closeIcon?: boolean;
+        closeIconAppearance?: import("../../Icon").IconProps["appearance"];
+        closeIconAppearanceSize?: import("@itcase/types-ui").AppearanceIconSizeKey;
+        closeIconFillSize?: import("../../Icon").IconProps["fillSize"];
+        closeIconImage?: import("../../Icon").IconProps["SvgImage"];
+        closeIconShape?: import("../../Icon").IconProps["shape"];
+        closeIconSize?: import("../../Icon").IconProps["iconSize"];
+        elevation?: import("@itcase/types-ui").ElevationProps;
+        fill?: import("@itcase/types-ui").FillProps;
+        isDisabled?: boolean;
+        isOpen?: boolean;
+        itemFill?: import("@itcase/types-ui").ItemFillProps;
+        overlayFill?: import("../../Overlay").OverlayProps["fill"];
+        overlayOpacity?: import("../../Overlay").OverlayProps["opacity"];
+        print?: boolean;
+        shape?: import("@itcase/types-ui").ShapeProps;
+        size?: import("@itcase/types-ui").SizeProps;
+        textColor?: import("../../Text").TextProps["textColor"];
+        textSize?: import("../../Text").TextProps["size"];
+        titleTextColor?: import("../../Title").TitleProps["textColor"];
+        titleTextColorHover?: import("../../Title").TitleProps["textColorHover"];
+        titleTextSize?: import("../../Title").TitleProps["size"];
+        titleTextTruncate?: import("../../Title").TitleProps["textTruncate"];
+        titleTextWeight?: import("../../Title").TitleProps["textWeight"];
+        titleTextWidth?: import("@itcase/types-ui").WidthProps;
+        titleTextWrap?: import("../../Title").TitleProps["textWrap"];
+    } & import("@itcase/ui-core/hooks").StyleAttributes & {
+        id?: string;
+        absoluteHeader?: boolean;
+        after?: import("react").ReactNode;
+        appearance?: import("@itcase/types-ui").CompositeAppearanceKeys;
+        before?: import("react").ReactNode;
+        children?: import("react").ReactNode;
+        className?: string;
+        contentClassName?: string;
+        dataTestId?: string;
+        dataTour?: string;
+        isCloseOnBlur?: boolean;
+        isOverlay?: boolean;
+        isScrollOnOpen?: boolean;
+        isSetFocusOnOpen?: boolean;
+        isSkeleton?: boolean;
+        modalIdQuerySelector?: string;
+        modalQuerySelector?: string;
+        onClickOverlay?: import("../../Overlay").OverlayProps["onClick"];
+        onCloseModal?: () => void;
+        onOpenModal?: () => void;
+        scroll?: boolean;
+        stickyHeader?: boolean;
+        style?: import("react").CSSProperties;
+        title?: string;
+    } & import("react").RefAttributes<import("..").ModalRef>>;
+    args: {
+        appearance: "surfacePrimary sizeXL solid rounded";
+        dataTestId: string;
+        title: string;
+        print: false;
+        closeIcon: true;
+        isCloseOnBlur: true;
+        isOpen: true;
+        onClickOverlay: () => void;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Children: Story;
+export declare const Close: Story;
+export declare const Skeleton: Story;

package/dist/types/components/Modal/__test__/ModalTest.stories.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as storybookTest from 'storybook/test';
+import { Modal } from '../Modal';
+const meta = {
+    title: 'Molecules / Modal / __test__',
+    component: Modal,
+    args: {
+        appearance: 'surfacePrimary sizeXL solid rounded',
+        dataTestId: 'modalTestId',
+        title: 'Title 123',
+        print: false,
+        closeIcon: true,
+        isCloseOnBlur: true,
+        isOpen: true,
+        onClickOverlay: () => { },
+    },
+};
+export default meta;
+export const Children = {
+    play: async ({ args, step }) => {
+        await step('Modal renders with children', async () => {
+            const modal = storybookTest.screen.getByTestId(args.dataTestId);
+            await storybookTest.expect(modal).toBeInTheDocument();
+            await storybookTest.expect(modal).toHaveTextContent(args.title);
+            await storybookTest.expect(modal).toHaveTextContent(String(args.children));
+        });
+    },
+    args: {
+        children: 'Modal content',
+    },
+    render: (args) => _jsx(Modal, { ...args }),
+};
+export const Close = {
+    play: async ({ args, step, userEvent }) => {
+        await step('Modal closed when close icon is clicked', async () => {
+            const modal = storybookTest.screen.getByTestId(args.dataTestId);
+            await storybookTest.expect(modal).toBeInTheDocument();
+            await step('Click via userEvent', async () => {
+                const closeIcon = modal.querySelector('.modal__close');
+                await userEvent.click(closeIcon);
+            });
+            await step('onClick called once', async () => {
+                const onCloseModal = args?.onCloseModal;
+                await storybookTest.expect(onCloseModal).toHaveBeenCalled();
+                await storybookTest.expect(modal).not.toBeInTheDocument();
+            });
+        });
+    },
+    args: {
+        onCloseModal: storybookTest['fn'](),
+    },
+    render: (args) => _jsx(Modal, { ...args }),
+};
+export const Skeleton = {
+    play: async ({ args, step }) => {
+        await step('Modal renders with skeleton class', async () => {
+            const modal = storybookTest.screen.getByTestId(args.dataTestId);
+            await storybookTest.expect(modal).toBeInTheDocument();
+            await storybookTest.expect(modal).toHaveClass('skeleton');
+        });
+    },
+    args: {
+        isSkeleton: true,
+    },
+    render: (args) => _jsx(Modal, { ...args }),
+};