@gravity-ui/aikit 0.1.1 → 0.1.2

package/dist/src/components/molecules/BaseMessage/__stories__/BaseMessage.stories.js

@@ -1,66 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { BaseMessage } from '..';
-import { ContentWrapper } from '../../../../demo/ContentWrapper';
-import { Showcase } from '../../../../demo/Showcase';
-import { ShowcaseItem } from '../../../../demo/ShowcaseItem';
-import MDXDocs from './Docs.mdx';
-export default {
-    title: 'molecules/BaseMessage',
-    component: BaseMessage,
-    parameters: {
-        docs: {
-            page: MDXDocs,
-        },
-    },
-    argTypes: {
-        variant: {
-            control: 'radio',
-            options: ['user', 'assistant', 'system'],
-            description: 'Type of message',
-        },
-        showActionsOnHover: {
-            control: 'boolean',
-            description: 'Show actions on hover',
-        },
-        className: {
-            control: 'text',
-            description: 'Additional CSS class',
-        },
-        qa: {
-            control: 'text',
-            description: 'QA/test identifier',
-        },
-    },
-};
-const defaultDecorators = [
-    (Story) => (_jsx(ContentWrapper, { children: _jsx(Showcase, { children: _jsx(Story, {}) }) })),
-];
-const buttons = [
-    // eslint-disable-next-line no-console
-    { type: 'copy', onClick: () => console.log('copy') },
-    // eslint-disable-next-line no-console
-    { type: 'edit', onClick: () => console.log('edit') },
-    // eslint-disable-next-line no-console
-    { type: 'delete', onClick: () => console.log('delete') },
-    // eslint-disable-next-line no-console
-    { type: 'custom', onClick: () => console.log('custom') },
-    // eslint-disable-next-line no-console
-    { type: 'like', onClick: () => console.log('like') },
-    // eslint-disable-next-line no-console
-    { type: 'unlike', onClick: () => console.log('unlike') },
-];
-export const Playground = (args) => (_jsx(ContentWrapper, { children: _jsx(BaseMessage, Object.assign({}, args)) }));
-Playground.args = {
-    children: 'My message',
-    actions: buttons,
-    role: 'assistant',
-};
-export const Variant = {
-    render: (args) => (_jsxs(_Fragment, { children: [_jsx(ShowcaseItem, { title: "User", children: _jsx(BaseMessage, Object.assign({}, args, { actions: buttons, role: "user", children: 'My message' })) }), _jsx(ShowcaseItem, { title: "Assistant", children: _jsx(BaseMessage, Object.assign({}, args, { actions: buttons, role: "assistant", children: 'My message' })) }), _jsx(ShowcaseItem, { title: "System", children: _jsx(BaseMessage, Object.assign({}, args, { actions: buttons, role: "system", children: 'My message' })) })] })),
-    decorators: defaultDecorators,
-};
-export const ShowActionsOnHover = (args) => (_jsx(ContentWrapper, { children: _jsx(BaseMessage, Object.assign({}, args, { actions: buttons, role: "assistant", showActionsOnHover: true, children: 'My message' })) }));
-export const ShowTimestamp = {
-    render: (args) => (_jsxs(_Fragment, { children: [_jsx(ShowcaseItem, { title: "User", children: _jsx(BaseMessage, Object.assign({}, args, { actions: buttons, role: "user", showTimestamp: true, timestamp: "1705312234567", children: 'My message' })) }), _jsx(ShowcaseItem, { title: "Assistant", children: _jsx(BaseMessage, Object.assign({}, args, { actions: buttons, role: "assistant", showTimestamp: true, timestamp: "1705312234567", children: 'My message' })) })] })),
-    decorators: defaultDecorators,
-};

package/dist/src/components/molecules/BaseMessage/i18n/en.json

@@ -1,8 +0,0 @@
-{
-    "action-tooltip-copy": "Copy",
-    "action-tooltip-edit": "Edit",
-    "action-tooltip-retry": "Retry",
-    "action-tooltip-like": "Like",
-    "action-tooltip-unlike": "Dislike",
-    "action-tooltip-delete": "Delete"
-}

package/dist/src/components/molecules/BaseMessage/i18n/ru.json

@@ -1,8 +0,0 @@
-{
-    "action-tooltip-copy": "Копировать",
-    "action-tooltip-edit": "Редактировать",
-    "action-tooltip-retry": "Повторить",
-    "action-tooltip-like": "Нравится",
-    "action-tooltip-unlike": "Не нравится",
-    "action-tooltip-delete": "Удалить"
-}

package/dist/src/components/molecules/ButtonGroup/__stories__/ButtonGroup.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryFn, StoryObj } from '@storybook/react-webpack5';
-import { type ButtonGroupProps } from '..';
-declare const _default: Meta;
-export default _default;
-export declare const Playground: StoryFn<ButtonGroupProps>;
-export declare const Orientation: StoryObj<ButtonGroupProps>;

package/dist/src/components/molecules/ButtonGroup/__stories__/ButtonGroup.stories.js

@@ -1,44 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from '@gravity-ui/uikit';
-import { ButtonGroup } from '..';
-import { ContentWrapper } from '../../../../demo/ContentWrapper';
-import { Showcase } from '../../../../demo/Showcase';
-import { ShowcaseItem } from '../../../../demo/ShowcaseItem';
-import MDXDocs from './Docs.mdx';
-export default {
-    title: 'molecules/ButtonGroup',
-    component: ButtonGroup,
-    parameters: {
-        docs: {
-            page: MDXDocs,
-        },
-    },
-    argTypes: {
-        orientation: {
-            control: 'radio',
-            options: ['horizontal', 'vertical'],
-            description: 'Orientation of buttons',
-        },
-        className: {
-            control: 'text',
-            description: 'Additional CSS class',
-        },
-        qa: {
-            control: 'text',
-            description: 'QA/test identifier',
-        },
-    },
-};
-const defaultDecorators = [
-    (Story) => (_jsx(ContentWrapper, { children: _jsx(Showcase, { children: _jsx(Story, {}) }) })),
-];
-const buttonChildren = (_jsxs(_Fragment, { children: [_jsx(Button, { children: "Button 1" }), _jsx(Button, { children: "Button 2" }), _jsx(Button, { children: "Button 3" })] }));
-export const Playground = (args) => (_jsx(ContentWrapper, { children: _jsx(ButtonGroup, Object.assign({}, args)) }));
-Playground.args = {
-    children: buttonChildren,
-    orientation: 'horizontal',
-};
-export const Orientation = {
-    render: (args) => (_jsxs(_Fragment, { children: [_jsx(ShowcaseItem, { title: "Horizontal", children: _jsx(ButtonGroup, Object.assign({}, args, { orientation: "horizontal", children: buttonChildren })) }), _jsx(ShowcaseItem, { title: "Vertical", children: _jsx(ButtonGroup, Object.assign({}, args, { orientation: "vertical", children: buttonChildren })) })] })),
-    decorators: defaultDecorators,
-};

package/dist/src/components/molecules/PromptInputBody/__stories__/PromptInputBody.stories.d.ts

@@ -1,11 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { PromptInputBody } from '..';
-declare const _default: Meta;
-export default _default;
-type Story = StoryObj<typeof PromptInputBody>;
-export declare const Playground: Story;
-export declare const WithValue: Story;
-export declare const MultiLine: Story;
-export declare const WithMaxLength: Story;
-export declare const WithCustomContent: Story;
-export declare const Disabled: Story;

package/dist/src/components/molecules/PromptInputBody/__stories__/PromptInputBody.stories.js

@@ -1,62 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
-import { PromptInputBody } from '..';
-import { ContentWrapper } from '../../../../demo/ContentWrapper';
-import { SwapArea } from '../../../../demo/SwapArea';
-import MDXDocs from './Docs.mdx';
-export default {
-    title: 'molecules/PromptInputBody',
-    component: PromptInputBody,
-    parameters: {
-        docs: {
-            page: MDXDocs,
-        },
-    },
-};
-const defaultDecorators = [
-    (Story) => (_jsx(ContentWrapper, { width: "450px", children: _jsx(Story, {}) })),
-];
-export const Playground = {
-    args: {
-        placeholder: 'Plan, code, build and test anything',
-    },
-    decorators: defaultDecorators,
-};
-export const WithValue = {
-    render: (args) => {
-        const [value, setValue] = useState('Hello, this is a test message!');
-        return (_jsx(PromptInputBody, Object.assign({}, args, { value: value, onChange: setValue, placeholder: "Plan, code, build and test anything" })));
-    },
-    decorators: defaultDecorators,
-};
-export const MultiLine = {
-    render: (args) => {
-        const [value, setValue] = useState('This is a multi-line\ntext input\nwith several lines\nof content');
-        return (_jsx(PromptInputBody, Object.assign({}, args, { value: value, onChange: setValue, placeholder: "Plan, code, build and test anything", minRows: 3, maxRows: 10 })));
-    },
-    decorators: defaultDecorators,
-};
-export const WithMaxLength = {
-    render: (args) => {
-        const [value, setValue] = useState('');
-        return (_jsxs(_Fragment, { children: [_jsx(PromptInputBody, Object.assign({}, args, { value: value, onChange: setValue, placeholder: "Maximum 100 characters", maxLength: 100 })), _jsxs("div", { style: {
-                        marginTop: '8px',
-                        fontSize: '12px',
-                        color: 'var(--g-color-text-secondary)',
-                    }, children: [value.length, " / 100 characters"] })] }));
-    },
-    decorators: defaultDecorators,
-};
-export const WithCustomContent = {
-    args: {
-        children: _jsx(SwapArea, {}),
-    },
-    decorators: defaultDecorators,
-};
-export const Disabled = {
-    render: (args) => {
-        const [value, setValue] = useState('This input is disabled');
-        return (_jsx(PromptInputBody, Object.assign({}, args, { value: value, onChange: setValue, placeholder: "Plan, code, build and test anything", disabledInput: true })));
-    },
-    decorators: defaultDecorators,
-};

package/dist/src/components/molecules/PromptInputFooter/__stories__/PromptInputFooter.stories.d.ts

@@ -1,11 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { PromptInputFooter } from '..';
-declare const _default: Meta;
-export default _default;
-type Story = StoryObj<typeof PromptInputFooter>;
-export declare const Playground: Story;
-export declare const WithAllIcons: Story;
-export declare const DisabledButton: Story;
-export declare const LoadingButton: Story;
-export declare const CancelableButton: Story;
-export declare const WithCustomContent: Story;

package/dist/src/components/molecules/PromptInputFooter/__stories__/PromptInputFooter.stories.js

@@ -1,96 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { PromptInputFooter } from '..';
-import { ContentWrapper } from '../../../../demo/ContentWrapper';
-import { SwapArea } from '../../../../demo/SwapArea';
-import MDXDocs from './Docs.mdx';
-export default {
-    title: 'molecules/PromptInputFooter',
-    component: PromptInputFooter,
-    parameters: {
-        docs: {
-            page: MDXDocs,
-        },
-    },
-};
-const defaultDecorators = [
-    (Story) => (_jsx(ContentWrapper, { width: "450px", children: _jsx(Story, {}) })),
-];
-export const Playground = {
-    args: {
-        submitButton: {
-            // eslint-disable-next-line no-console
-            onClick: async () => console.log('Submit clicked'),
-            state: 'enabled',
-        },
-    },
-    decorators: defaultDecorators,
-};
-export const WithAllIcons = {
-    args: {
-        submitButton: {
-            // eslint-disable-next-line no-console
-            onClick: async () => console.log('Submit clicked'),
-            state: 'enabled',
-        },
-        showSettings: true,
-        showAttachment: true,
-        showMicrophone: true,
-        // eslint-disable-next-line no-console
-        onSettingsClick: () => console.log('Settings clicked'),
-        // eslint-disable-next-line no-console
-        onAttachmentClick: () => console.log('Attachment clicked'),
-        // eslint-disable-next-line no-console
-        onMicrophoneClick: () => console.log('Microphone clicked'),
-    },
-    decorators: defaultDecorators,
-};
-export const DisabledButton = {
-    args: {
-        submitButton: {
-            // eslint-disable-next-line no-console
-            onClick: async () => console.log('Submit clicked'),
-            state: 'disabled',
-        },
-        showSettings: true,
-        showAttachment: true,
-        showMicrophone: true,
-    },
-    decorators: defaultDecorators,
-};
-export const LoadingButton = {
-    args: {
-        submitButton: {
-            // eslint-disable-next-line no-console
-            onClick: async () => console.log('Submit clicked'),
-            state: 'loading',
-        },
-        showSettings: true,
-        showAttachment: true,
-        showMicrophone: true,
-    },
-    decorators: defaultDecorators,
-};
-export const CancelableButton = {
-    args: {
-        submitButton: {
-            // eslint-disable-next-line no-console
-            onClick: async () => console.log('Cancel clicked'),
-            state: 'cancelable',
-        },
-        showSettings: true,
-        showAttachment: true,
-        showMicrophone: true,
-    },
-    decorators: defaultDecorators,
-};
-export const WithCustomContent = {
-    args: {
-        submitButton: {
-            // eslint-disable-next-line no-console
-            onClick: async () => console.log('Submit clicked'),
-            state: 'enabled',
-        },
-        children: _jsx(SwapArea, {}),
-    },
-    decorators: defaultDecorators,
-};

package/dist/src/components/molecules/PromptInputFooter/i18n/en.json

@@ -1,5 +0,0 @@
-{
-    "tooltip-settings": "Settings",
-    "tooltip-attachment": "Attach file",
-    "tooltip-microphone": "Voice input"
-}

package/dist/src/components/molecules/PromptInputFooter/i18n/ru.json

@@ -1,5 +0,0 @@
-{
-    "tooltip-settings": "Настройки",
-    "tooltip-attachment": "Прикрепить файл",
-    "tooltip-microphone": "Голосовой ввод"
-}

package/dist/src/components/molecules/PromptInputHeader/__stories__/PromptInputHeader.stories.d.ts

@@ -1,13 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { PromptInputHeader } from '..';
-declare const _default: Meta;
-export default _default;
-type Story = StoryObj<typeof PromptInputHeader>;
-export declare const Playground: Story;
-export declare const WithContextItems: Story;
-export declare const WithSingleContextItem: Story;
-export declare const WithManyContextItems: Story;
-export declare const WithContextItemsAndIndicator: Story;
-export declare const WithContextIndicator: Story;
-export declare const WithContextIndicatorNumber: Story;
-export declare const WithCustomContent: Story;

package/dist/src/components/molecules/PromptInputHeader/__stories__/PromptInputHeader.stories.js

@@ -1,103 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import { PromptInputHeader } from '..';
-import { ContentWrapper } from '../../../../demo/ContentWrapper';
-import { SwapArea } from '../../../../demo/SwapArea';
-import MDXDocs from './Docs.mdx';
-export default {
-    title: 'molecules/PromptInputHeader',
-    component: PromptInputHeader,
-    parameters: {
-        docs: {
-            page: MDXDocs,
-        },
-    },
-};
-const defaultDecorators = [
-    (Story) => (_jsx(ContentWrapper, { width: "450px", children: _jsx(Story, {}) })),
-];
-export const Playground = {
-    args: {},
-    decorators: defaultDecorators,
-};
-export const WithContextItems = {
-    render: (args) => {
-        const [items, setItems] = useState([
-            { id: '1', content: 'file.tsx', onRemove: () => { } },
-            { id: '2', content: 'component.tsx', onRemove: () => { } },
-            { id: '3', content: 'utils.ts', onRemove: () => { } },
-        ]);
-        const handleRemove = (id) => {
-            setItems(items.filter((item) => item.id !== id));
-        };
-        return (_jsx(PromptInputHeader, Object.assign({}, args, { contextItems: items.map((item) => (Object.assign(Object.assign({}, item), { onRemove: () => handleRemove(item.id) }))) })));
-    },
-    decorators: defaultDecorators,
-};
-export const WithSingleContextItem = {
-    args: {
-        contextItems: [
-            {
-                id: '1',
-                content: 'README.md',
-                onRemove: () => {
-                    // Handle remove
-                },
-            },
-        ],
-    },
-    decorators: defaultDecorators,
-};
-export const WithManyContextItems = {
-    args: {
-        contextItems: [
-            { id: '1', content: 'file1.tsx', onRemove: () => { } },
-            { id: '2', content: 'file2.tsx', onRemove: () => { } },
-            { id: '3', content: 'file3.tsx', onRemove: () => { } },
-            { id: '4', content: 'file4.tsx', onRemove: () => { } },
-            { id: '5', content: 'file5.tsx', onRemove: () => { } },
-        ],
-    },
-    decorators: defaultDecorators,
-};
-export const WithContextItemsAndIndicator = {
-    args: {
-        contextItems: [
-            { id: '1', content: 'file.tsx', onRemove: () => { } },
-            { id: '2', content: 'component.tsx', onRemove: () => { } },
-        ],
-        showContextIndicator: true,
-        contextIndicatorProps: {
-            type: 'percent',
-            usedContext: 75,
-        },
-    },
-    decorators: defaultDecorators,
-};
-export const WithContextIndicator = {
-    args: {
-        showContextIndicator: true,
-        contextIndicatorProps: {
-            type: 'percent',
-            usedContext: 24,
-        },
-    },
-    decorators: defaultDecorators,
-};
-export const WithContextIndicatorNumber = {
-    args: {
-        showContextIndicator: true,
-        contextIndicatorProps: {
-            type: 'number',
-            usedContext: 2400,
-            maxContext: 10000,
-        },
-    },
-    decorators: defaultDecorators,
-};
-export const WithCustomContent = {
-    args: {
-        children: _jsx(SwapArea, {}),
-    },
-    decorators: defaultDecorators,
-};

package/dist/src/components/molecules/PromptInputPanel/__stories__/PromptInputPanel.stories.d.ts

@@ -1,8 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { PromptInputPanel } from '..';
-declare const _default: Meta;
-export default _default;
-type Story = StoryObj<typeof PromptInputPanel>;
-export declare const Playground: Story;
-export declare const WithSwapArea: Story;
-export declare const WithContentAndCloseButton: Story;

package/dist/src/components/molecules/PromptInputPanel/__stories__/PromptInputPanel.stories.js

@@ -1,38 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Xmark } from '@gravity-ui/icons';
-import { Button, Icon } from '@gravity-ui/uikit';
-import { PromptInputPanel } from '..';
-import { ContentWrapper } from '../../../../demo/ContentWrapper';
-import { SwapArea } from '../../../../demo/SwapArea';
-import { ActionButton } from '../../../atoms/ActionButton';
-import MDXDocs from './Docs.mdx';
-export default {
-    title: 'molecules/PromptInputPanel',
-    component: PromptInputPanel,
-    parameters: {
-        docs: {
-            page: MDXDocs,
-        },
-    },
-};
-const defaultDecorators = [
-    (Story) => (_jsx(ContentWrapper, { children: _jsx(Story, {}) })),
-];
-export const Playground = {
-    args: {
-        children: 'This is the panel content',
-    },
-    decorators: defaultDecorators,
-};
-export const WithSwapArea = {
-    args: {
-        children: _jsx(SwapArea, {}),
-    },
-    decorators: defaultDecorators,
-};
-export const WithContentAndCloseButton = {
-    args: {
-        children: (_jsxs(_Fragment, { children: [_jsx("div", { style: { flex: 1 }, children: _jsx("span", { children: "Upgrade your plan to Business to unlock all features" }) }), _jsx(Button, { view: "action", size: "m", children: "Upgrade" }), _jsx(ActionButton, { view: "flat", size: "m", onClick: () => { }, children: _jsx(Icon, { data: Xmark, size: 16 }) })] })),
-    },
-    decorators: defaultDecorators,
-};

package/dist/src/components/molecules/Suggestions/__stories__/Suggestions.stories.d.ts

@@ -1,19 +0,0 @@
-import { Meta, StoryFn } from '@storybook/react-webpack5';
-import { SuggestionsProps } from '..';
-declare const _default: Meta;
-export default _default;
-export declare const Playground: StoryFn<SuggestionsProps>;
-export declare const ListLayout: StoryFn<SuggestionsProps>;
-export declare const ListLayoutWithContainer: StoryFn<SuggestionsProps>;
-export declare const GridLayout: StoryFn<SuggestionsProps>;
-export declare const GridLayoutWithContainer: StoryFn<SuggestionsProps>;
-export declare const WithoutIds: StoryFn<SuggestionsProps>;
-export declare const SingleItem: StoryFn<SuggestionsProps>;
-export declare const TextAlignLeft: StoryFn<SuggestionsProps>;
-export declare const TextAlignCenter: StoryFn<SuggestionsProps>;
-export declare const TextAlignRight: StoryFn<SuggestionsProps>;
-export declare const WithLeftIcon: StoryFn<SuggestionsProps>;
-export declare const WithRightIcon: StoryFn<SuggestionsProps>;
-export declare const WithMixedIcons: StoryFn<SuggestionsProps>;
-export declare const IconsWithContainer: StoryFn<SuggestionsProps>;
-export declare const WithIconsInGridLayout: StoryFn<SuggestionsProps>;

package/dist/src/components/molecules/Suggestions/__stories__/Suggestions.stories.js

@@ -1,143 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Suggestions } from '..';
-import { ContentWrapper } from '../../../../demo/ContentWrapper';
-import MDXDocs from './Docs.mdx';
-export default {
-    title: 'molecules/Suggestions',
-    component: Suggestions,
-    parameters: {
-        docs: {
-            page: MDXDocs,
-        },
-    },
-    argTypes: {
-        items: {
-            control: 'object',
-            description: 'Array of suggestion items to display',
-        },
-        onClick: {
-            action: 'clicked',
-            description: 'Callback function called when a suggestion is clicked',
-        },
-        layout: {
-            control: 'select',
-            options: ['grid', 'list'],
-            description: 'Layout orientation: grid for horizontal, list for vertical',
-        },
-        textAlign: {
-            control: 'select',
-            options: ['left', 'center', 'right'],
-            description: 'Text alignment inside buttons',
-        },
-        className: {
-            control: 'text',
-            description: 'Additional CSS class',
-        },
-        qa: {
-            control: 'text',
-            description: 'QA/test identifier',
-        },
-    },
-};
-export const Playground = (args) => (_jsx(ContentWrapper, { children: _jsx(Suggestions, Object.assign({}, args)) }));
-Playground.args = {
-    items: [
-        { id: '1', title: 'First suggestion' },
-        { id: '2', title: 'Second suggestion' },
-        { id: '3', title: 'Third suggestion' },
-    ],
-    onClick: () => {
-        // onClick handler
-    },
-    layout: 'list',
-};
-export const ListLayout = (args) => (_jsx(ContentWrapper, { children: _jsx(Suggestions, Object.assign({}, args, { items: [
-            { id: '1', title: 'Example suggestion' },
-            { id: '2', title: 'Another one suggestion' },
-            { id: '3', title: 'Looooooong suggestion for testing' },
-        ], layout: "list", onClick: () => {
-            // onClick handler
-        } })) }));
-export const ListLayoutWithContainer = (args) => (_jsx(ContentWrapper, { width: "200px", children: _jsx(Suggestions, Object.assign({}, args, { items: [
-            { id: '1', title: 'Example suggestion' },
-            { id: '2', title: 'Another one suggestion' },
-            { id: '3', title: 'Looooooong suggestion for testing' },
-        ], layout: "list", onClick: () => {
-            // onClick handler
-        } })) }));
-export const GridLayout = (args) => (_jsx(ContentWrapper, { children: _jsx(Suggestions, Object.assign({}, args, { items: [
-            { id: '1', title: 'Option 1' },
-            { id: '2', title: 'Option 2' },
-            { id: '3', title: 'Option 3' },
-            { id: '4', title: 'Option 4' },
-        ], layout: "grid", onClick: () => {
-            // onClick handler
-        } })) }));
-export const GridLayoutWithContainer = (args) => (_jsx(ContentWrapper, { width: "300px", children: _jsx(Suggestions, Object.assign({}, args, { items: [
-            { id: '1', title: 'Option 1' },
-            { id: '2', title: 'Option 2' },
-            { id: '3', title: 'Option 3' },
-            { id: '4', title: 'Option 4' },
-        ], layout: "grid", onClick: () => {
-            // onClick handler
-        } })) }));
-export const WithoutIds = (args) => (_jsx(ContentWrapper, { children: _jsx(Suggestions, Object.assign({}, args, { items: [{ title: 'First item' }, { title: 'Second item' }, { title: 'Third item' }], onClick: () => {
-            // onClick handler
-        } })) }));
-export const SingleItem = (args) => (_jsx(ContentWrapper, { children: _jsx(Suggestions, Object.assign({}, args, { items: [{ id: '1', title: 'Only one suggestion' }], onClick: () => {
-            // onClick handler
-        } })) }));
-export const TextAlignLeft = (args) => (_jsx(ContentWrapper, { children: _jsx(Suggestions, Object.assign({}, args, { items: [
-            { id: '1', title: 'Left aligned text' },
-            { id: '2', title: 'Another left aligned suggestion' },
-        ], textAlign: "left", onClick: () => {
-            // onClick handler
-        } })) }));
-export const TextAlignCenter = (args) => (_jsx(ContentWrapper, { children: _jsx(Suggestions, Object.assign({}, args, { items: [
-            { id: '1', title: 'Center aligned text' },
-            { id: '2', title: 'Another centered suggestion' },
-        ], textAlign: "center", onClick: () => {
-            // onClick handler
-        } })) }));
-export const TextAlignRight = (args) => (_jsx(ContentWrapper, { children: _jsx(Suggestions, Object.assign({}, args, { items: [
-            { id: '1', title: 'Right aligned text' },
-            { id: '2', title: 'Another right aligned suggestion' },
-        ], textAlign: "right", onClick: () => {
-            // onClick handler
-        } })) }));
-export const WithLeftIcon = (args) => (_jsx(ContentWrapper, { children: _jsx(Suggestions, Object.assign({}, args, { items: [
-            { id: '1', title: 'Previous page', icon: 'left' },
-            { id: '2', title: 'Go back', icon: 'left' },
-            { id: '3', title: 'Return to start', icon: 'left' },
-        ], onClick: () => {
-            // onClick handler
-        } })) }));
-export const WithRightIcon = (args) => (_jsx(ContentWrapper, { children: _jsx(Suggestions, Object.assign({}, args, { items: [
-            { id: '1', title: 'Next page', icon: 'right' },
-            { id: '2', title: 'Continue', icon: 'right' },
-            { id: '3', title: 'Go forward', icon: 'right' },
-        ], onClick: () => {
-            // onClick handler
-        } })) }));
-export const WithMixedIcons = (args) => (_jsx(ContentWrapper, { children: _jsx(Suggestions, Object.assign({}, args, { items: [
-            { id: '1', title: 'Previous', icon: 'left' },
-            { id: '2', title: 'No action' },
-            { id: '3', title: 'Next', icon: 'right' },
-        ], layout: "grid", onClick: () => {
-            // onClick handler
-        } })) }));
-export const IconsWithContainer = (args) => (_jsx(ContentWrapper, { width: "200px", children: _jsx(Suggestions, Object.assign({}, args, { items: [
-            { id: '1', title: 'Example suggestion', icon: 'right' },
-            { id: '2', title: 'Another one suggestion', icon: 'right' },
-            { id: '3', title: 'Looooooong suggestion for testing', icon: 'right' },
-        ], layout: "list", onClick: () => {
-            // onClick handler
-        } })) }));
-export const WithIconsInGridLayout = (args) => (_jsx(ContentWrapper, { children: _jsx(Suggestions, Object.assign({}, args, { items: [
-            { id: '1', title: 'Back', icon: 'left' },
-            { id: '2', title: 'Home' },
-            { id: '3', title: 'Settings' },
-            { id: '4', title: 'Forward', icon: 'right' },
-        ], layout: "grid", onClick: () => {
-            // onClick handler
-        } })) }));