@itcase/ui-web 1.9.103 → 1.9.105

package/dist/types/components/Tile/stories/TileStyle.stories.js

@@ -14,7 +14,7 @@ const meta = {
 export default meta;
 export const Solid = {
     args: {
-        appearance: 'surfacePrimary sizeXL solid',
+        appearance: 'surfacePrimary sizeXL solid rounded',
     },
     render: (args) => {
         return _jsx(Tile, { ...args });
@@ -22,7 +22,7 @@ export const Solid = {
 };
 export const Outlined = {
     args: {
-        appearance: 'surfacePrimary sizeXL outlined',
+        appearance: 'surfacePrimary sizeXL outlined rounded',
     },
     render: (args) => {
         return _jsx(Tile, { ...args });
@@ -30,7 +30,7 @@ export const Outlined = {
 };
 export const Ghost = {
     args: {
-        appearance: 'surfacePrimary sizeXL ghost',
+        appearance: 'surfacePrimary sizeXL ghost rounded',
     },
     render: (args) => {
         return _jsx(Tile, { ...args });
@@ -38,7 +38,7 @@ export const Ghost = {
 };
 export const Full = {
     args: {
-        appearance: 'surfacePrimary sizeXL full',
+        appearance: 'surfacePrimary sizeXL full rounded',
     },
     render: (args) => {
         return _jsx(Tile, { ...args });

package/dist/types/components/Tile/stories/TileSwap.stories.d.ts

@@ -4,7 +4,7 @@ declare const meta: {
     title: string;
     component: typeof Tile;
     args: {
-        appearance: "surfacePrimary sizeXL";
+        appearance: "surfacePrimary sizeXL solid rounded";
         title: string;
         desc: string;
     };

package/dist/types/components/Tile/stories/TileSwap.stories.js

@@ -5,7 +5,7 @@ const meta = {
     title: 'Molecules / Tile',
     component: Tile,
     args: {
-        appearance: 'surfacePrimary sizeXL',
+        appearance: 'surfacePrimary sizeXL solid rounded',
         title: 'Title 123',
         desc: 'Text 123',
     },
@@ -16,7 +16,7 @@ const meta = {
 export default meta;
 export const Before = {
     args: {
-        before: (_jsx(Button, { appearance: "accentPrimary sizeXL", width: "fill", label: "Label" })),
+        before: (_jsx(Button, { appearance: "accentPrimary sizeXL solid rounded", width: "fill", label: "Label" })),
     },
     render: (args) => {
         return _jsx(Tile, { ...args });
@@ -29,7 +29,7 @@ export const Children = {
 };
 export const After = {
     args: {
-        after: (_jsx(Button, { appearance: "accentPrimary sizeXL", width: "fill", label: "Label" })),
+        after: (_jsx(Button, { appearance: "accentPrimary sizeXL solid rounded", width: "fill", label: "Label" })),
     },
     render: (args) => {
         return _jsx(Tile, { ...args });

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

@@ -4,6 +4,7 @@ import type { AppearancePartialRecord } from '@itcase/types-ui';
 import { StyleAttributes } from '@itcase/ui-core/hooks';
 import { IconProps } from 'src/components/Icon/Icon.interface';
 import { TextProps } from 'src/components/Text/Text.interface';
+import type { ComponentGalleryArgs } from 'src/storybook/createComponentGallery';
 type TitleAppearanceProps = {
     borderColor?: BorderColorProps;
     borderHover?: BorderColorHoverProps;
@@ -70,4 +71,6 @@ type TitleConfig = AppearanceConfig<AppearanceKeysTitle, TitleAppearanceProps>;
 type TitleAppearance = TitleConfig['appearance'];
 type TitleAppearanceStyle = Partial<Record<AppearanceStyleKey, Partial<Pick<TitleAppearanceProps, 'fill'>>>>;
 type TitleAppearanceSize = AppearancePartialRecord<AppearanceTitleSizeKey, TitleAppearanceProps, 'iconAfterFillSize' | 'iconAfterSize' | 'iconBeforeFillSize' | 'iconBeforeSize' | 'size'>;
-export type { TitleAppearance, TitleAppearanceSize, TitleAppearanceStyle, TitleConfig, TitleProps, };
+type TitleAppearanceKey = NonNullable<TitleProps['appearance']>;
+type TitleGalleryStory = ComponentGalleryArgs & Pick<TitleProps, 'children' | 'isSkeleton'>;
+export type { TitleAppearance, TitleAppearanceKey, TitleAppearanceSize, TitleAppearanceStyle, TitleConfig, TitleGalleryStory, TitleProps, };

package/dist/types/components/Title/__test__/TitleTest.stories.d.ts

@@ -0,0 +1,19 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Title } from '..';
+declare const meta: {
+    title: string;
+    component: typeof Title;
+    args: {
+        appearance: "surfacePrimary sizeH2 solid rounded";
+        dataTestId: string;
+        children: string;
+    };
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Skeleton: Story;
+export declare const Children: Story;

package/dist/types/components/Title/__test__/TitleTest.stories.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as storybookTest from 'storybook/test';
+import { Title } from '..';
+const meta = {
+    title: 'Typography / Title / __test__',
+    component: Title,
+    args: {
+        appearance: 'surfacePrimary sizeH2 solid rounded',
+        dataTestId: 'titleTestId',
+        children: 'Title',
+    },
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['test'],
+};
+export default meta;
+export const Skeleton = {
+    args: {
+        isSkeleton: true,
+    },
+    play: async ({ args, canvas, step }) => {
+        await step('Title renders with skeleton class', async () => {
+            const title = canvas.getByTestId(args.dataTestId);
+            await storybookTest.expect(title).toBeInTheDocument();
+            await storybookTest.expect(title).toHaveClass('skeleton');
+        });
+    },
+    render: (args) => _jsx(Title, { ...args }),
+};
+export const Children = {
+    play: async ({ args, canvas, step }) => {
+        await step('Title renders with children content', async () => {
+            const title = canvas.getByTestId(args.dataTestId);
+            await storybookTest.expect(title).toBeInTheDocument();
+            await storybookTest.expect(title).toHaveTextContent(String(args.children));
+        });
+    },
+    render: (args) => _jsx(Title, { ...args }),
+};

package/dist/types/components/Title/stories/TitleDemo.stories.d.ts

@@ -1,18 +1,6 @@
-import type { StoryObj } from '@storybook/react-vite';
-import { Title } from '../Title';
-declare const meta: {
-    title: string;
-    component: typeof Title;
-    args: {
-        size: "h1";
-        textColor: "surfaceTextPrimary";
-        children: string;
-    };
-    parameters: {
-        layout: string;
-    };
-};
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { TitleGalleryStory } from '../Title.interface';
+declare const meta: Meta<TitleGalleryStory>;
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<TitleGalleryStory>;
 export declare const Demo: Story;
-export declare const Skeleton: Story;

package/dist/types/components/Title/stories/TitleDemo.stories.js

@@ -1,28 +1,64 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { createComponentGallery } from 'src/storybook/createComponentGallery';
+import { titleAppearanceAccent } from '../appearance/titleAccent';
+import { titleAppearanceDanger } from '../appearance/titleDanger';
+import { titleAppearanceDisabled } from '../appearance/titleDisabled';
+import { titleAppearanceError } from '../appearance/titleError';
+import { titleAppearanceExtra } from '../appearance/titleExtra';
+import { titleAppearanceInfo } from '../appearance/titleInfo';
+import { titleAppearanceRequire } from '../appearance/titleRequire';
+import { titleAppearanceSize } from '../appearance/titleSize';
+import { titleAppearanceSpecial } from '../appearance/titleSpecial';
+import { titleAppearanceStyle } from '../appearance/titleStyle';
+import { titleAppearanceSuccess } from '../appearance/titleSuccess';
+import { titleAppearanceSurface } from '../appearance/titleSurface';
+import { titleAppearanceWarning } from '../appearance/titleWarning';
 import { Title } from '../Title';
+const titleGalleryShape = {
+    rounded: {
+        shape: 'rounded',
+    },
+};
+const gallery = createComponentGallery({
+    size: titleAppearanceSize,
+    appearanceGroups: {
+        accent: titleAppearanceAccent,
+        danger: titleAppearanceDanger,
+        disabled: titleAppearanceDisabled,
+        error: titleAppearanceError,
+        extra: titleAppearanceExtra,
+        info: titleAppearanceInfo,
+        require: titleAppearanceRequire,
+        special: titleAppearanceSpecial,
+        success: titleAppearanceSuccess,
+        surface: titleAppearanceSurface,
+        warning: titleAppearanceWarning,
+    },
+    shape: titleGalleryShape,
+    style: titleAppearanceStyle,
+});
 const meta = {
     title: 'Typography / Title',
     component: Title,
     args: {
-        size: 'h1',
-        textColor: 'surfaceTextPrimary',
+        appearance: 'surface sizeM solid rounded',
+        tier: 'Primary',
+        style: 'solid',
+        shape: 'rounded',
         children: 'Title',
+        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(Title, { ...args });
-    },
-};
-export const Skeleton = {
-    args: {
-        isSkeleton: true,
-    },
-    render: (args) => {
-        return _jsx(Title, { ...args });
-    },
+    render: (args) => gallery.render(args, ({ appearance, args: storyArgs }) => (_jsx(Title, { appearance: appearance, isSkeleton: storyArgs.isSkeleton, children: storyArgs.children }))),
 };

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

@@ -31,16 +31,16 @@ declare const tooltipAppearance: {
         shape: "rounded";
     };
     roundedXL: {
-        shape: "rounded";
+        shape: "roundedXL";
     };
     roundedL: {
-        shape: "rounded";
+        shape: "roundedL";
     };
     roundedM: {
-        shape: "rounded";
+        shape: "roundedM";
     };
     roundedS: {
-        shape: "rounded";
+        shape: "roundedS";
     };
     requirePrimary: {
         fill: "warningPrimary";

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

@@ -6,6 +6,7 @@ import type { AppearanceRecord } from '@itcase/types-ui';
 import { StyleAttributes } from '@itcase/ui-core/hooks';
 import { TextProps } from 'src/components/Text/Text.interface';
 import { TitleProps } from 'src/components/Title/Title.interface';
+import type { ComponentGalleryArgs } from 'src/storybook/createComponentGallery';
 type TooltipAppearanceProps = {
     align?: AlignProps;
     alignDirection?: DirectionProps;
@@ -63,4 +64,6 @@ type TooltipAppearance = TooltipConfig['appearance'];
 type TooltipAppearanceStyle = AppearanceRecord<AppearanceStyleKey, TooltipAppearanceProps, 'borderColor' | 'fill'>;
 type TooltipAppearanceShape = Partial<Record<AppearanceShapeKey, Partial<Pick<TooltipAppearanceProps, 'shape'>>>>;
 type TooltipAppearanceSize = Partial<Record<AppearanceSizeKey, Partial<Pick<TooltipAppearanceProps, 'size' | 'textSize' | 'titleSize'>>>>;
-export type { RCComponentTooltipWrapperPlacement, TooltipAppearance, TooltipAppearanceShape, TooltipAppearanceSize, TooltipAppearanceStyle, TooltipConfig, TooltipProps, TooltipWrapperProps, };
+type TooltipAppearanceKey = NonNullable<TooltipProps['appearance']>;
+type TooltipGalleryStory = ComponentGalleryArgs & Pick<TooltipProps, 'initialIsVisible' | 'isSkeleton' | 'text' | 'title'>;
+export type { RCComponentTooltipWrapperPlacement, TooltipAppearance, TooltipAppearanceKey, TooltipAppearanceShape, TooltipAppearanceSize, TooltipAppearanceStyle, TooltipConfig, TooltipGalleryStory, TooltipProps, TooltipWrapperProps, };

package/dist/types/components/Tooltip/appearance/tooltipShape.d.ts

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

package/dist/types/components/Tooltip/appearance/tooltipShape.js

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

package/dist/types/components/Tooltip/stories/TooltipAppearance.stories.js

@@ -15,7 +15,7 @@ const meta = {
 export default meta;
 export const Default = {
     args: {
-        appearance: 'defaultPrimary sizeL',
+        appearance: 'defaultPrimary sizeL solid rounded',
     },
     render: (args) => {
         return _jsx(Tooltip, { ...args });
@@ -23,7 +23,7 @@ export const Default = {
 };
 export const Error = {
     args: {
-        appearance: 'errorPrimary sizeL',
+        appearance: 'errorPrimary sizeL solid rounded',
     },
     render: (args) => {
         return _jsx(Tooltip, { ...args });
@@ -31,7 +31,7 @@ export const Error = {
 };
 export const Success = {
     args: {
-        appearance: 'successPrimary sizeL',
+        appearance: 'successPrimary sizeL solid rounded',
     },
     render: (args) => {
         return _jsx(Tooltip, { ...args });
@@ -39,7 +39,7 @@ export const Success = {
 };
 export const Require = {
     args: {
-        appearance: 'requirePrimary sizeL',
+        appearance: 'requirePrimary sizeL solid rounded',
     },
     render: (args) => {
         return _jsx(Tooltip, { ...args });
@@ -47,7 +47,7 @@ export const Require = {
 };
 export const Disabled = {
     args: {
-        appearance: 'disabledPrimary sizeL',
+        appearance: 'disabledPrimary sizeL solid rounded',
     },
     render: (args) => {
         return _jsx(Tooltip, { ...args });

package/dist/types/components/Tooltip/stories/TooltipArrow.stories.d.ts

@@ -43,7 +43,7 @@ declare const meta: {
         title?: string;
     } & import("react").RefAttributes<any>>;
     args: {
-        appearance: "defaultPrimary sizeL";
+        appearance: "defaultPrimary sizeL solid rounded";
         initialIsVisible: true;
         title: string;
         text: string;

package/dist/types/components/Tooltip/stories/TooltipArrow.stories.js

@@ -4,7 +4,7 @@ const meta = {
     title: 'Atoms / Tooltip / Arrow',
     component: Tooltip,
     args: {
-        appearance: 'defaultPrimary sizeL',
+        appearance: 'defaultPrimary sizeL solid rounded',
         initialIsVisible: true,
         title: 'Title',
         text: 'Text',

package/dist/types/components/Tooltip/stories/TooltipCustom.stories.js

@@ -15,7 +15,7 @@ const meta = {
 export default meta;
 export const Custom = {
     args: {
-        appearance: 'defaultPrimary sizeL',
+        appearance: 'defaultPrimary sizeL solid rounded',
         fill: 'black',
         titleColor: 'white',
         textColor: 'white',

package/dist/types/components/Tooltip/stories/TooltipDemo.stories.d.ts

@@ -1,58 +1,6 @@
-import type { StoryObj } from '@storybook/react-vite';
-declare const meta: {
-    title: string;
-    component: import("react").ForwardRefExoticComponent<import("@itcase/ui-core/hooks").StyleAttributes & {
-        align?: import("@itcase/types-ui").AlignProps;
-        alignDirection?: import("@itcase/types-ui").DirectionProps;
-        alignment?: string;
-        alignPosition?: import("@itcase/types-ui").AlignProps;
-        arrowPosition?: import("@itcase/types-ui").ArrowPosition;
-        borderColor?: import("@itcase/types-ui").BorderColorProps;
-        borderType?: import("@itcase/types-ui").BorderTypeProps;
-        borderWidth?: import("@itcase/types-ui").BorderWidthProps;
-        centering?: string;
-        elevation?: import("@itcase/types-ui").ElevationProps;
-        fill?: import("@itcase/types-ui").FillProps;
-        fillHover?: import("@itcase/types-ui").FillHoverProps;
-        shape?: import("@itcase/types-ui").ShapeProps;
-        size?: import("@itcase/types-ui").SizeProps;
-        textColor?: import("../../Text").TextProps["textColor"];
-        textSize?: import("../../Text").TextProps["size"];
-        textWeight?: import("../../Text").TextProps["textWeight"];
-        titleColor?: import("../../Title").TitleProps["textColor"];
-        titleSize?: import("../../Title").TitleProps["size"];
-        titleWeight?: import("../../Title").TitleProps["textWeight"];
-        wrap?: import("@itcase/types-ui").WrapProps;
-    } & {
-        after?: string;
-        appearance?: import("@itcase/types-ui").CompositeAppearanceStateDefault;
-        before?: string;
-        children?: import("react").ReactNode;
-        className?: string;
-        closeTimeoutDelay?: number;
-        dataTestId?: string;
-        dataTour?: string;
-        initialIsVisible?: boolean;
-        isDisabled?: boolean;
-        isSkeleton?: boolean;
-        onClick?: () => void;
-        openTimeoutDelay?: number;
-        showArrow?: boolean;
-        style?: import("react").CSSProperties;
-        text?: string;
-        title?: string;
-    } & import("react").RefAttributes<any>>;
-    args: {
-        appearance: "defaultPrimary sizeL";
-        initialIsVisible: true;
-        title: string;
-        text: string;
-    };
-    parameters: {
-        layout: string;
-    };
-};
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { TooltipGalleryStory } from '../Tooltip.interface';
+declare const meta: Meta<TooltipGalleryStory>;
 export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
-export declare const Skeleton: Story;
+type Story = StoryObj<TooltipGalleryStory>;
+export declare const Demo: Story;

package/dist/types/components/Tooltip/stories/TooltipDemo.stories.js

@@ -1,29 +1,50 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { createComponentGallery } from 'src/storybook/createComponentGallery';
+import { tooltipAppearanceDefault } from '../appearance/tooltipDefault';
+import { tooltipAppearanceDisabled } from '../appearance/tooltipDisabled';
+import { tooltipAppearanceError } from '../appearance/tooltipError';
+import { tooltipAppearanceRequire } from '../appearance/tooltipRequire';
+import { tooltipAppearanceShape } from '../appearance/tooltipShape';
+import { tooltipAppearanceSize } from '../appearance/tooltipSize';
+import { tooltipAppearanceStyle } from '../appearance/tooltipStyle';
+import { tooltipAppearanceSuccess } from '../appearance/tooltipSuccess';
 import { Tooltip } from '../Tooltip';
+const gallery = createComponentGallery({
+    size: tooltipAppearanceSize,
+    appearanceGroups: {
+        default: tooltipAppearanceDefault,
+        disabled: tooltipAppearanceDisabled,
+        error: tooltipAppearanceError,
+        require: tooltipAppearanceRequire,
+        success: tooltipAppearanceSuccess,
+    },
+    shape: tooltipAppearanceShape,
+    style: tooltipAppearanceStyle,
+});
 const meta = {
     title: 'Atoms / Tooltip',
     component: Tooltip,
     args: {
-        appearance: 'defaultPrimary sizeL',
-        initialIsVisible: true,
+        appearance: 'default sizeM solid rounded',
+        tier: 'Primary',
+        style: 'solid',
+        shape: 'rounded',
         title: 'Title',
         text: 'Text',
+        initialIsVisible: true,
+        isSkeleton: false,
     },
     parameters: {
         layout: 'centered',
     },
-};
-export default meta;
-export const Default = {
-    render: (args) => {
-        return _jsx(Tooltip, { ...args });
+    argTypes: {
+        appearance: gallery.argTypes.appearance,
+        tier: gallery.argTypes.tier,
+        style: gallery.argTypes.style,
+        shape: gallery.argTypes.shape,
     },
 };
-export const Skeleton = {
-    args: {
-        isSkeleton: true,
-    },
-    render: (args) => {
-        return _jsx(Tooltip, { ...args });
-    },
+export default meta;
+export const Demo = {
+    render: (args) => gallery.render(args, ({ appearance, args: storyArgs }) => (_jsx(Tooltip, { appearance: appearance, initialIsVisible: storyArgs.initialIsVisible, title: storyArgs.title, text: storyArgs.text, isSkeleton: storyArgs.isSkeleton }))),
 };

package/dist/types/components/Tooltip/stories/TooltipSize.stories.js

@@ -15,7 +15,7 @@ const meta = {
 export default meta;
 export const SizeL = {
     args: {
-        appearance: 'defaultPrimary sizeL',
+        appearance: 'defaultPrimary sizeL solid rounded',
     },
     render: (args) => {
         return _jsx(Tooltip, { ...args });
@@ -23,7 +23,7 @@ export const SizeL = {
 };
 export const SizeM = {
     args: {
-        appearance: 'defaultPrimary sizeM',
+        appearance: 'defaultPrimary sizeM solid rounded',
     },
     render: (args) => {
         return _jsx(Tooltip, { ...args });
@@ -31,7 +31,7 @@ export const SizeM = {
 };
 export const SizeS = {
     args: {
-        appearance: 'defaultPrimary sizeS',
+        appearance: 'defaultPrimary sizeS solid rounded',
     },
     render: (args) => {
         return _jsx(Tooltip, { ...args });

package/dist/types/components/Tooltip/stories/TooltipStyle.stories.js

@@ -15,7 +15,7 @@ const meta = {
 export default meta;
 export const Solid = {
     args: {
-        appearance: 'defaultPrimary sizeL solid',
+        appearance: 'defaultPrimary sizeL solid rounded',
     },
     render: (args) => {
         return _jsx(Tooltip, { ...args });
@@ -23,7 +23,7 @@ export const Solid = {
 };
 export const Outlined = {
     args: {
-        appearance: 'defaultPrimary sizeL outlined',
+        appearance: 'defaultPrimary sizeL outlined rounded',
     },
     render: (args) => {
         return _jsx(Tooltip, { ...args });
@@ -31,7 +31,7 @@ export const Outlined = {
 };
 export const Full = {
     args: {
-        appearance: 'defaultPrimary sizeL full',
+        appearance: 'defaultPrimary sizeL full rounded',
     },
     render: (args) => {
         return _jsx(Tooltip, { ...args });
@@ -39,7 +39,7 @@ export const Full = {
 };
 export const Ghost = {
     args: {
-        appearance: 'defaultPrimary sizeL ghost',
+        appearance: 'defaultPrimary sizeL ghost rounded',
     },
     render: (args) => {
         return _jsx(Tooltip, { ...args });

package/dist/types/components/Tooltip/stories/TooltipTrigger.stories.js

@@ -36,5 +36,5 @@ export const Trigger = {
         placement: 'top',
         visible: false,
     },
-    render: (args) => (_jsxs(React.Fragment, { children: [_jsx(TooltipWrapper, { appearance: "defaultPrimary sizeL", title: "Tooltip", text: "With trigger", placement: args.placement, openDelay: 0.2, isOpen: args.visible ? true : undefined, children: _jsx("button", { children: "hover trigger1" }) }), _jsx(TooltipWrapper, { appearance: "defaultPrimary sizeL", placement: args.placement, tooltipContent: _jsx("div", { children: "Tooltip with custom content" }), openDelay: 0.2, isOpen: args.visible ? true : undefined, children: _jsx("button", { children: "hover trigger2" }) })] })),
+    render: (args) => (_jsxs(React.Fragment, { children: [_jsx(TooltipWrapper, { appearance: "defaultPrimary sizeL solid rounded", title: "Tooltip", text: "With trigger", placement: args.placement, openDelay: 0.2, isOpen: args.visible ? true : undefined, children: _jsx("button", { children: "hover trigger1" }) }), _jsx(TooltipWrapper, { appearance: "defaultPrimary sizeL solid rounded", placement: args.placement, tooltipContent: _jsx("div", { children: "Tooltip with custom content" }), openDelay: 0.2, isOpen: args.visible ? true : undefined, children: _jsx("button", { children: "hover trigger2" }) })] })),
 };

package/dist/types/components/Video/__test__/VideoTest.stories.d.ts

@@ -0,0 +1,23 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Video } from '..';
+declare const meta: {
+    title: string;
+    component: typeof Video;
+    args: {
+        mp4: string;
+        ogv: string;
+        poster: string;
+        webm: string;
+        dataTestId: string;
+        width: "480px";
+        height: "270px";
+    };
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Skeleton: Story;
+export declare const Children: Story;