@laerdal/life-react-components 3.5.1-dev.11 → 3.5.1-dev.13

package/dist/stories/Tile.stories.js

@@ -0,0 +1,1618 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import { Size, Tile, COLORS, SystemIcons } from '../src/index';
+import styled from 'styled-components';
+import { LargeListItemsDemo, MediumListItemsDemo, SmallListItemsDemo } from './List.stories';
+var meta = {
+    title: 'Components/Tile',
+    component: Tile,
+    decorators: [],
+    tags: ['autodocs'],
+    parameters: {},
+};
+export default meta;
+export var Primary = {
+    args: {},
+};
+var ContentContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: ", ";\n  width: 100%;\n  height: 100%;\n"], ["\n  flex: 1;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: ", ";\n  width: 100%;\n  height: 100%;\n"])), COLORS.neutral_100);
+var ScrollableContentContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: ", ";\n  width: 100%;\n  height: 600px;\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: ", ";\n  width: 100%;\n  height: 600px;\n"])), COLORS.neutral_100);
+var dropdownItemsWithIcon = [
+    { value: 'Item 1', icon: React.createElement(SystemIcons.Download, null) },
+    { value: 'Item 2', icon: React.createElement(SystemIcons.Dashboard, null) },
+    { value: 'Item 3', icon: React.createElement(SystemIcons.Edit, null) },
+    { value: 'Item 4', icon: React.createElement(SystemIcons.Export, null) },
+    { value: 'Item 5', icon: React.createElement(SystemIcons.ExportCVS, null) },
+];
+var footerButtons = [
+    {
+        componentType: 'icon', icon: React.createElement(SystemIcons.Download, null), variant: 'primary', shape: 'circular', action: function () {
+        }
+    },
+    {
+        componentType: 'icon', icon: React.createElement(SystemIcons.Print, null), variant: 'secondary', shape: 'square', action: function () {
+        }
+    },
+    {
+        componentType: 'icon', icon: React.createElement(SystemIcons.Share, null), variant: 'primary', shape: 'square', action: function () {
+        }
+    },
+];
+export var Small = function () {
+    return (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '24px' } },
+        React.createElement("div", { style: { display: 'flex', gap: '24px' } },
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, size: Size.Small },
+                    React.createElement(ContentContainer, null, "Content"))),
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, size: Size.Small },
+                    React.createElement(ScrollableContentContainer, null, "Content")))),
+        React.createElement("div", { style: { display: 'flex', gap: '24px' } },
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: { title: 'Title' }, size: Size.Small },
+                    React.createElement(ContentContainer, null, "Content"))),
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: { title: 'Title' }, size: Size.Small },
+                    React.createElement(ScrollableContentContainer, null, "Content")))),
+        React.createElement("div", { style: { display: 'flex', gap: '24px' } },
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: { title: 'Title', subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null) }, size: Size.Small },
+                    React.createElement(ContentContainer, null, "Content"))),
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: { title: 'Title', subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null) }, size: Size.Small },
+                    React.createElement(ScrollableContentContainer, null, "Content")))),
+        React.createElement("div", { style: { display: 'flex', gap: '24px' } },
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        tag: { label: 'label', variant: 'positive' }
+                    }, size: Size.Small },
+                    React.createElement(ContentContainer, null, "Content"))),
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        tag: { label: 'label', variant: 'positive' }
+                    }, size: Size.Small },
+                    React.createElement(ScrollableContentContainer, null, "Content")))),
+        React.createElement("div", { style: { display: 'flex', gap: '24px' } },
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle',
+                        subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        tooltip: 'tooltip'
+                    }, size: Size.Small },
+                    React.createElement(ContentContainer, null, "Content"))),
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle',
+                        subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        tooltip: 'tooltip'
+                    }, size: Size.Small },
+                    React.createElement(ScrollableContentContainer, null, "Content")))),
+        React.createElement("div", { style: { display: 'flex', gap: '24px' } },
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon',
+                                icon: React.createElement(SystemIcons.ArrowLineDown, null),
+                                action: function () {
+                                },
+                                tooltip: { label: 'Down' }
+                            },
+                            {
+                                componentType: 'icon',
+                                icon: React.createElement(SystemIcons.ArrowLineUp, null),
+                                action: function () {
+                                },
+                                tooltip: { label: 'Up' }
+                            },
+                            {
+                                componentType: 'toggle',
+                                active: false,
+                                defaultState: { icon: React.createElement(SystemIcons.Fullscreen, null) },
+                                activeState: { icon: React.createElement(SystemIcons.FullscreenExit, null) }
+                            }
+                        ]
+                    }, size: Size.Small },
+                    React.createElement(ContentContainer, null, "Content with tooltips"))),
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'toggle',
+                                active: false,
+                                defaultState: { icon: React.createElement(SystemIcons.Fullscreen, null) },
+                                activeState: { icon: React.createElement(SystemIcons.FullscreenExit, null) }
+                            }
+                        ]
+                    }, size: Size.Small },
+                    React.createElement(ScrollableContentContainer, null, "Content")))),
+        React.createElement("div", { style: { display: 'flex', gap: '24px' } },
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'toggle',
+                                active: false,
+                                defaultState: { icon: React.createElement(SystemIcons.Fullscreen, null) },
+                                activeState: { icon: React.createElement(SystemIcons.FullscreenExit, null) }
+                            }
+                        ]
+                    }, footer: {
+                        leftItem: {
+                            componentType: 'note',
+                            noteText: 'Note',
+                            noteIcon: React.createElement(SystemIcons.Information, null)
+                        },
+                    }, size: Size.Small },
+                    React.createElement(ContentContainer, null, "Content"))),
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'toggle',
+                                active: false,
+                                defaultState: { icon: React.createElement(SystemIcons.Fullscreen, null) },
+                                activeState: { icon: React.createElement(SystemIcons.FullscreenExit, null) }
+                            }
+                        ]
+                    }, footer: {
+                        leftItem: {
+                            componentType: 'note',
+                            noteText: 'Note',
+                            noteIcon: React.createElement(SystemIcons.Information, null)
+                        },
+                    }, size: Size.Small },
+                    React.createElement(ScrollableContentContainer, null, "Content")))),
+        React.createElement("div", { style: { display: 'flex', gap: '24px' } },
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'toggle',
+                                active: false,
+                                defaultState: { icon: React.createElement(SystemIcons.Fullscreen, null) },
+                                activeState: { icon: React.createElement(SystemIcons.FullscreenExit, null) }
+                            }
+                        ]
+                    }, footer: {
+                        leftItem: {
+                            componentType: 'link',
+                            variant: 'default',
+                            href: '#',
+                            linkText: 'link',
+                            linkIcon: React.createElement(SystemIcons.OpenNewWindow, null)
+                        },
+                    }, size: Size.Small },
+                    React.createElement(ContentContainer, null, "Content"))),
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'toggle',
+                                active: false,
+                                defaultState: { icon: React.createElement(SystemIcons.Fullscreen, null) },
+                                activeState: { icon: React.createElement(SystemIcons.FullscreenExit, null) }
+                            }
+                        ]
+                    }, footer: {
+                        leftItem: {
+                            componentType: 'link',
+                            variant: 'default',
+                            href: '#',
+                            linkText: 'link',
+                            linkIcon: React.createElement(SystemIcons.OpenNewWindow, null)
+                        },
+                    }, size: Size.Small },
+                    React.createElement(ScrollableContentContainer, null, "Content")))),
+        React.createElement("div", { style: { display: 'flex', gap: '24px' } },
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'toggle',
+                                active: false,
+                                defaultState: { icon: React.createElement(SystemIcons.Fullscreen, null) },
+                                activeState: { icon: React.createElement(SystemIcons.FullscreenExit, null) }
+                            }
+                        ]
+                    }, footer: {
+                        leftItem: {
+                            componentType: 'button',
+                            variant: 'secondary',
+                            buttonText: 'button',
+                            onClick: function () {
+                            }
+                        },
+                    }, size: Size.Small },
+                    React.createElement(ContentContainer, null, "Content"))),
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'toggle',
+                                active: false,
+                                defaultState: { icon: React.createElement(SystemIcons.Fullscreen, null) },
+                                activeState: { icon: React.createElement(SystemIcons.FullscreenExit, null) }
+                            }
+                        ]
+                    }, footer: {
+                        leftItem: {
+                            componentType: 'button',
+                            variant: 'secondary',
+                            buttonText: 'button',
+                            onClick: function () {
+                            }
+                        },
+                    }, size: Size.Small },
+                    React.createElement(ScrollableContentContainer, null, "Content")))),
+        React.createElement("div", { style: { display: 'flex', gap: '24px' } },
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'toggle',
+                                active: false,
+                                defaultState: { icon: React.createElement(SystemIcons.Fullscreen, null) },
+                                activeState: { icon: React.createElement(SystemIcons.FullscreenExit, null) }
+                            }
+                        ]
+                    }, footer: {
+                        leftItem: {
+                            componentType: 'button',
+                            variant: 'secondary',
+                            buttonText: 'button',
+                            onClick: function () {
+                            }
+                        },
+                        buttons: footerButtons
+                    }, size: Size.Small },
+                    React.createElement(ContentContainer, null, "Content"))),
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'toggle',
+                                active: false,
+                                defaultState: { icon: React.createElement(SystemIcons.Fullscreen, null) },
+                                activeState: { icon: React.createElement(SystemIcons.FullscreenExit, null) }
+                            }
+                        ]
+                    }, footer: {
+                        leftItem: {
+                            componentType: 'button',
+                            variant: 'secondary',
+                            buttonText: 'button',
+                            onClick: function () {
+                            }
+                        },
+                        buttons: footerButtons
+                    }, size: Size.Small },
+                    React.createElement(ScrollableContentContainer, null, "Content")))),
+        React.createElement("div", { style: { display: 'flex', gap: '24px' } },
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'toggle',
+                                active: false,
+                                defaultState: { icon: React.createElement(SystemIcons.Fullscreen, null) },
+                                activeState: { icon: React.createElement(SystemIcons.FullscreenExit, null) }
+                            }
+                        ]
+                    }, footer: {
+                        buttons: [
+                            {
+                                componentType: 'icon',
+                                icon: React.createElement(SystemIcons.OpenNewWindow, null),
+                                action: function () {
+                                },
+                            },
+                        ]
+                    }, size: Size.Small },
+                    React.createElement(ContentContainer, null, "Content"))),
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'toggle',
+                                active: false,
+                                defaultState: { icon: React.createElement(SystemIcons.Fullscreen, null) },
+                                activeState: { icon: React.createElement(SystemIcons.FullscreenExit, null) }
+                            }
+                        ]
+                    }, footer: {
+                        buttons: [
+                            {
+                                componentType: 'icon',
+                                icon: React.createElement(SystemIcons.OpenNewWindow, null),
+                                action: function () {
+                                },
+                            },
+                        ]
+                    }, size: Size.Small },
+                    React.createElement(ScrollableContentContainer, null, "Content")))),
+        React.createElement("div", { style: { display: 'flex', gap: '24px' } },
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'toggle',
+                                active: false,
+                                defaultState: { icon: React.createElement(SystemIcons.Fullscreen, null) },
+                                activeState: { icon: React.createElement(SystemIcons.FullscreenExit, null) }
+                            }
+                        ]
+                    }, footer: {}, size: Size.Small },
+                    React.createElement(ContentContainer, null, "Content"))),
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'toggle',
+                                active: false,
+                                defaultState: { icon: React.createElement(SystemIcons.Fullscreen, null) },
+                                activeState: { icon: React.createElement(SystemIcons.FullscreenExit, null) }
+                            }
+                        ]
+                    }, footer: {}, size: Size.Small },
+                    React.createElement(ScrollableContentContainer, null, "Content")))),
+        React.createElement("div", { style: { display: 'flex', gap: '24px' } },
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', flex: 1 } },
+                React.createElement(Tile, { header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'dropdown',
+                                items: dropdownItemsWithIcon,
+                                itemsType: 'normal',
+                                onClick: function () {
+                                },
+                                icon: React.createElement(SystemIcons.GearSettings, null)
+                            }
+                        ]
+                    }, footer: {
+                        buttons: [
+                            {
+                                componentType: 'icon',
+                                icon: React.createElement(SystemIcons.OpenNewWindow, null),
+                                action: function () {
+                                },
+                            },
+                        ]
+                    }, size: Size.Small },
+                    React.createElement(SmallListItemsDemo, null))),
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', flex: 1 } },
+                React.createElement(Tile, { style: { maxHeight: '400px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'dropdown',
+                                items: dropdownItemsWithIcon,
+                                itemsType: 'normal',
+                                onClick: function () {
+                                },
+                                icon: React.createElement(SystemIcons.GearSettings, null)
+                            }
+                        ]
+                    }, footer: {
+                        buttons: [
+                            {
+                                componentType: 'icon',
+                                icon: React.createElement(SystemIcons.OpenNewWindow, null),
+                                action: function () {
+                                },
+                            },
+                        ]
+                    }, size: Size.Small },
+                    React.createElement(SmallListItemsDemo, null))))));
+};
+export var Medium = function () {
+    return (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '24px' } },
+        React.createElement("div", { style: { display: 'flex', gap: '24px' } },
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, size: Size.Medium },
+                    React.createElement(ContentContainer, null, "Content"))),
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, size: Size.Medium },
+                    React.createElement(ScrollableContentContainer, null, "Content")))),
+        React.createElement("div", { style: { display: 'flex', gap: '24px' } },
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: { title: 'Title' }, size: Size.Medium },
+                    React.createElement(ContentContainer, null, "Content"))),
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: { title: 'Title' }, size: Size.Medium },
+                    React.createElement(ScrollableContentContainer, null, "Content")))),
+        React.createElement("div", { style: { display: 'flex', gap: '24px' } },
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: { title: 'Title', subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null) }, size: Size.Medium },
+                    React.createElement(ContentContainer, null, "Content"))),
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: { title: 'Title', subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null) }, size: Size.Medium },
+                    React.createElement(ScrollableContentContainer, null, "Content")))),
+        React.createElement("div", { style: { display: 'flex', gap: '24px' } },
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle',
+                        subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        tooltip: 'tooltip'
+                    }, size: Size.Medium },
+                    React.createElement(ContentContainer, null, "Content"))),
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle',
+                        subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        tooltip: 'tooltip'
+                    }, size: Size.Medium },
+                    React.createElement(ScrollableContentContainer, null, "Content")))),
+        React.createElement("div", { style: { display: 'flex', gap: '24px' } },
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'toggle',
+                                active: false,
+                                defaultState: { icon: React.createElement(SystemIcons.Fullscreen, null) },
+                                activeState: { icon: React.createElement(SystemIcons.FullscreenExit, null) }
+                            }
+                        ]
+                    }, size: Size.Medium },
+                    React.createElement(ContentContainer, null, "Content"))),
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'toggle',
+                                active: false,
+                                defaultState: { icon: React.createElement(SystemIcons.Fullscreen, null) },
+                                activeState: { icon: React.createElement(SystemIcons.FullscreenExit, null) }
+                            }
+                        ]
+                    }, size: Size.Medium },
+                    React.createElement(ScrollableContentContainer, null, "Content")))),
+        React.createElement("div", { style: { display: 'flex', gap: '24px' } },
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'toggle',
+                                active: false,
+                                defaultState: { icon: React.createElement(SystemIcons.Fullscreen, null) },
+                                activeState: { icon: React.createElement(SystemIcons.FullscreenExit, null) }
+                            }
+                        ]
+                    }, footer: {
+                        leftItem: {
+                            componentType: 'note',
+                            noteText: 'Note',
+                            noteIcon: React.createElement(SystemIcons.Information, null)
+                        },
+                    }, size: Size.Medium },
+                    React.createElement(ContentContainer, null, "Content"))),
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'toggle',
+                                active: false,
+                                defaultState: { icon: React.createElement(SystemIcons.Fullscreen, null) },
+                                activeState: { icon: React.createElement(SystemIcons.FullscreenExit, null) }
+                            }
+                        ]
+                    }, footer: {
+                        leftItem: {
+                            componentType: 'note',
+                            noteText: 'Note',
+                            noteIcon: React.createElement(SystemIcons.Information, null)
+                        },
+                    }, size: Size.Medium },
+                    React.createElement(ScrollableContentContainer, null, "Content")))),
+        React.createElement("div", { style: { display: 'flex', gap: '24px' } },
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'toggle',
+                                active: false,
+                                defaultState: { icon: React.createElement(SystemIcons.Fullscreen, null) },
+                                activeState: { icon: React.createElement(SystemIcons.FullscreenExit, null) }
+                            }
+                        ]
+                    }, footer: {
+                        leftItem: {
+                            componentType: 'link',
+                            variant: 'default',
+                            href: '#',
+                            linkText: 'link',
+                            linkIcon: React.createElement(SystemIcons.OpenNewWindow, null)
+                        },
+                    }, size: Size.Medium },
+                    React.createElement(ContentContainer, null, "Content"))),
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'toggle',
+                                active: false,
+                                defaultState: { icon: React.createElement(SystemIcons.Fullscreen, null) },
+                                activeState: { icon: React.createElement(SystemIcons.FullscreenExit, null) }
+                            }
+                        ]
+                    }, footer: {
+                        leftItem: {
+                            componentType: 'link',
+                            variant: 'default',
+                            href: '#',
+                            linkText: 'link',
+                            linkIcon: React.createElement(SystemIcons.OpenNewWindow, null)
+                        },
+                    }, size: Size.Medium },
+                    React.createElement(ScrollableContentContainer, null, "Content")))),
+        React.createElement("div", { style: { display: 'flex', gap: '24px' } },
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'toggle',
+                                active: false,
+                                defaultState: { icon: React.createElement(SystemIcons.Fullscreen, null) },
+                                activeState: { icon: React.createElement(SystemIcons.FullscreenExit, null) }
+                            }
+                        ]
+                    }, footer: {
+                        leftItem: {
+                            componentType: 'button',
+                            variant: 'secondary',
+                            buttonText: 'button',
+                            onClick: function () {
+                            }
+                        },
+                    }, size: Size.Medium },
+                    React.createElement(ContentContainer, null, "Content"))),
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'toggle',
+                                active: false,
+                                defaultState: { icon: React.createElement(SystemIcons.Fullscreen, null) },
+                                activeState: { icon: React.createElement(SystemIcons.FullscreenExit, null) }
+                            }
+                        ]
+                    }, footer: {
+                        leftItem: {
+                            componentType: 'button',
+                            variant: 'secondary',
+                            buttonText: 'button',
+                            onClick: function () {
+                            }
+                        },
+                    }, size: Size.Medium },
+                    React.createElement(ScrollableContentContainer, null, "Content")))),
+        React.createElement("div", { style: { display: 'flex', gap: '24px' } },
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'toggle',
+                                active: false,
+                                defaultState: { icon: React.createElement(SystemIcons.Fullscreen, null) },
+                                activeState: { icon: React.createElement(SystemIcons.FullscreenExit, null) }
+                            }
+                        ]
+                    }, footer: {
+                        leftItem: {
+                            componentType: 'button',
+                            variant: 'secondary',
+                            buttonText: 'button',
+                            onClick: function () {
+                            }
+                        },
+                        buttons: footerButtons
+                    }, size: Size.Medium },
+                    React.createElement(ContentContainer, null, "Content"))),
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'toggle',
+                                active: false,
+                                defaultState: { icon: React.createElement(SystemIcons.Fullscreen, null) },
+                                activeState: { icon: React.createElement(SystemIcons.FullscreenExit, null) }
+                            }
+                        ]
+                    }, footer: {
+                        leftItem: {
+                            componentType: 'button',
+                            variant: 'secondary',
+                            buttonText: 'button',
+                            onClick: function () {
+                            }
+                        },
+                        buttons: footerButtons
+                    }, size: Size.Medium },
+                    React.createElement(ScrollableContentContainer, null, "Content")))),
+        React.createElement("div", { style: { display: 'flex', gap: '24px' } },
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'toggle',
+                                active: false,
+                                defaultState: { icon: React.createElement(SystemIcons.Fullscreen, null) },
+                                activeState: { icon: React.createElement(SystemIcons.FullscreenExit, null) }
+                            }
+                        ]
+                    }, footer: {
+                        buttons: [
+                            {
+                                componentType: 'icon',
+                                icon: React.createElement(SystemIcons.OpenNewWindow, null),
+                                action: function () {
+                                },
+                            },
+                        ]
+                    }, size: Size.Medium },
+                    React.createElement(ContentContainer, null, "Content"))),
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'toggle',
+                                active: false,
+                                defaultState: { icon: React.createElement(SystemIcons.Fullscreen, null) },
+                                activeState: { icon: React.createElement(SystemIcons.FullscreenExit, null) }
+                            }
+                        ]
+                    }, footer: {
+                        buttons: [
+                            {
+                                componentType: 'icon',
+                                icon: React.createElement(SystemIcons.OpenNewWindow, null),
+                                action: function () {
+                                },
+                            },
+                        ]
+                    }, size: Size.Medium },
+                    React.createElement(ScrollableContentContainer, null, "Content")))),
+        React.createElement("div", { style: { display: 'flex', gap: '24px' } },
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'toggle',
+                                active: false,
+                                defaultState: { icon: React.createElement(SystemIcons.Fullscreen, null) },
+                                activeState: { icon: React.createElement(SystemIcons.FullscreenExit, null) }
+                            }
+                        ]
+                    }, footer: {}, size: Size.Medium },
+                    React.createElement(ContentContainer, null, "Content"))),
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'toggle',
+                                active: false,
+                                defaultState: { icon: React.createElement(SystemIcons.Fullscreen, null) },
+                                activeState: { icon: React.createElement(SystemIcons.FullscreenExit, null) }
+                            }
+                        ]
+                    }, footer: {}, size: Size.Medium },
+                    React.createElement(ScrollableContentContainer, null, "Content")))),
+        React.createElement("div", { style: { display: 'flex', gap: '24px' } },
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'toggle',
+                                active: false,
+                                defaultState: { icon: React.createElement(SystemIcons.Fullscreen, null) },
+                                activeState: { icon: React.createElement(SystemIcons.FullscreenExit, null) }
+                            }
+                        ]
+                    }, footer: {}, size: Size.Medium },
+                    React.createElement(ContentContainer, null, "Content"))),
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'toggle',
+                                active: false,
+                                defaultState: { icon: React.createElement(SystemIcons.Fullscreen, null) },
+                                activeState: { icon: React.createElement(SystemIcons.FullscreenExit, null) }
+                            }
+                        ]
+                    }, footer: {}, size: Size.Medium },
+                    React.createElement(ScrollableContentContainer, null, "Content")))),
+        React.createElement("div", { style: { display: 'flex', gap: '24px' } },
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', flex: 1 } },
+                React.createElement(Tile, { header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'dropdown',
+                                items: dropdownItemsWithIcon,
+                                itemsType: 'normal',
+                                onClick: function () {
+                                },
+                                icon: React.createElement(SystemIcons.GearSettings, null)
+                            }
+                        ]
+                    }, footer: {
+                        buttons: [
+                            {
+                                componentType: 'icon',
+                                icon: React.createElement(SystemIcons.OpenNewWindow, null),
+                                action: function () {
+                                },
+                            },
+                        ]
+                    }, size: Size.Medium },
+                    React.createElement(MediumListItemsDemo, null))),
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', flex: 1 } },
+                React.createElement(Tile, { style: { maxHeight: '400px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'dropdown',
+                                items: dropdownItemsWithIcon,
+                                itemsType: 'normal',
+                                onClick: function () {
+                                },
+                                icon: React.createElement(SystemIcons.GearSettings, null)
+                            }
+                        ]
+                    }, footer: {
+                        buttons: [
+                            {
+                                componentType: 'icon',
+                                icon: React.createElement(SystemIcons.OpenNewWindow, null),
+                                action: function () {
+                                },
+                            },
+                        ]
+                    }, size: Size.Medium },
+                    React.createElement(MediumListItemsDemo, null))))));
+};
+export var Large = function () {
+    return (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '24px' } },
+        React.createElement("div", { style: { display: 'flex', gap: '24px' } },
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, size: Size.Large },
+                    React.createElement(ContentContainer, null, "Content"))),
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, size: Size.Large },
+                    React.createElement(ScrollableContentContainer, null, "Content")))),
+        React.createElement("div", { style: { display: 'flex', gap: '24px' } },
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: { title: 'Title' }, size: Size.Large },
+                    React.createElement(ContentContainer, null, "Content"))),
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: { title: 'Title' }, size: Size.Large },
+                    React.createElement(ScrollableContentContainer, null, "Content")))),
+        React.createElement("div", { style: { display: 'flex', gap: '24px' } },
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: { title: 'Title', subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null) }, size: Size.Large },
+                    React.createElement(ContentContainer, null, "Content"))),
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: { title: 'Title', subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null) }, size: Size.Large },
+                    React.createElement(ScrollableContentContainer, null, "Content")))),
+        React.createElement("div", { style: { display: 'flex', gap: '24px' } },
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle',
+                        subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        tooltip: 'tooltip'
+                    }, size: Size.Large },
+                    React.createElement(ContentContainer, null, "Content"))),
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle',
+                        subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        tooltip: 'tooltip'
+                    }, size: Size.Large },
+                    React.createElement(ScrollableContentContainer, null, "Content")))),
+        React.createElement("div", { style: { display: 'flex', gap: '24px' } },
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'toggle',
+                                active: false,
+                                defaultState: { icon: React.createElement(SystemIcons.Fullscreen, null) },
+                                activeState: { icon: React.createElement(SystemIcons.FullscreenExit, null) }
+                            }
+                        ]
+                    }, size: Size.Large },
+                    React.createElement(ContentContainer, null, "Content"))),
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'toggle',
+                                active: false,
+                                defaultState: { icon: React.createElement(SystemIcons.Fullscreen, null) },
+                                activeState: { icon: React.createElement(SystemIcons.FullscreenExit, null) }
+                            }
+                        ]
+                    }, size: Size.Large },
+                    React.createElement(ScrollableContentContainer, null, "Content")))),
+        React.createElement("div", { style: { display: 'flex', gap: '24px' } },
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'toggle',
+                                active: false,
+                                defaultState: { icon: React.createElement(SystemIcons.Fullscreen, null) },
+                                activeState: { icon: React.createElement(SystemIcons.FullscreenExit, null) }
+                            }
+                        ]
+                    }, footer: {
+                        leftItem: {
+                            componentType: 'note',
+                            noteText: 'Note',
+                            noteIcon: React.createElement(SystemIcons.Information, null)
+                        },
+                    }, size: Size.Large },
+                    React.createElement(ContentContainer, null, "Content"))),
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'toggle',
+                                active: false,
+                                defaultState: { icon: React.createElement(SystemIcons.Fullscreen, null) },
+                                activeState: { icon: React.createElement(SystemIcons.FullscreenExit, null) }
+                            }
+                        ]
+                    }, footer: {
+                        leftItem: {
+                            componentType: 'note',
+                            noteText: 'Note',
+                            noteIcon: React.createElement(SystemIcons.Information, null)
+                        },
+                    }, size: Size.Large },
+                    React.createElement(ScrollableContentContainer, null, "Content")))),
+        React.createElement("div", { style: { display: 'flex', gap: '24px' } },
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'toggle',
+                                active: false,
+                                defaultState: { icon: React.createElement(SystemIcons.Fullscreen, null) },
+                                activeState: { icon: React.createElement(SystemIcons.FullscreenExit, null) }
+                            }
+                        ]
+                    }, footer: {
+                        leftItem: {
+                            componentType: 'link',
+                            variant: 'default',
+                            href: '#',
+                            linkText: 'link',
+                            linkIcon: React.createElement(SystemIcons.OpenNewWindow, null)
+                        },
+                    }, size: Size.Large },
+                    React.createElement(ContentContainer, null, "Content"))),
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'toggle',
+                                active: false,
+                                defaultState: { icon: React.createElement(SystemIcons.Fullscreen, null) },
+                                activeState: { icon: React.createElement(SystemIcons.FullscreenExit, null) }
+                            }
+                        ]
+                    }, footer: {
+                        leftItem: {
+                            componentType: 'link',
+                            variant: 'default',
+                            href: '#',
+                            linkText: 'link',
+                            linkIcon: React.createElement(SystemIcons.OpenNewWindow, null)
+                        },
+                    }, size: Size.Large },
+                    React.createElement(ScrollableContentContainer, null, "Content")))),
+        React.createElement("div", { style: { display: 'flex', gap: '24px' } },
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'toggle',
+                                active: false,
+                                defaultState: { icon: React.createElement(SystemIcons.Fullscreen, null) },
+                                activeState: { icon: React.createElement(SystemIcons.FullscreenExit, null) }
+                            }
+                        ]
+                    }, footer: {
+                        leftItem: {
+                            componentType: 'button',
+                            variant: 'secondary',
+                            buttonText: 'button',
+                            onClick: function () {
+                            }
+                        },
+                    }, size: Size.Large },
+                    React.createElement(ContentContainer, null, "Content"))),
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'toggle',
+                                active: false,
+                                defaultState: { icon: React.createElement(SystemIcons.Fullscreen, null) },
+                                activeState: { icon: React.createElement(SystemIcons.FullscreenExit, null) }
+                            }
+                        ]
+                    }, footer: {
+                        leftItem: {
+                            componentType: 'button',
+                            variant: 'secondary',
+                            buttonText: 'button',
+                            onClick: function () {
+                            }
+                        },
+                    }, size: Size.Large },
+                    React.createElement(ScrollableContentContainer, null, "Content")))),
+        React.createElement("div", { style: { display: 'flex', gap: '24px' } },
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'toggle',
+                                active: false,
+                                defaultState: { icon: React.createElement(SystemIcons.Fullscreen, null) },
+                                activeState: { icon: React.createElement(SystemIcons.FullscreenExit, null) }
+                            }
+                        ]
+                    }, footer: {
+                        leftItem: {
+                            componentType: 'button',
+                            variant: 'secondary',
+                            buttonText: 'button',
+                            onClick: function () {
+                            }
+                        },
+                        buttons: footerButtons
+                    }, size: Size.Large },
+                    React.createElement(ContentContainer, null, "Content"))),
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'toggle',
+                                active: false,
+                                defaultState: { icon: React.createElement(SystemIcons.Fullscreen, null) },
+                                activeState: { icon: React.createElement(SystemIcons.FullscreenExit, null) }
+                            }
+                        ]
+                    }, footer: {
+                        leftItem: {
+                            componentType: 'button',
+                            variant: 'secondary',
+                            buttonText: 'button',
+                            onClick: function () {
+                            }
+                        },
+                        buttons: footerButtons
+                    }, size: Size.Large },
+                    React.createElement(ScrollableContentContainer, null, "Content")))),
+        React.createElement("div", { style: { display: 'flex', gap: '24px' } },
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'toggle',
+                                active: false,
+                                defaultState: { icon: React.createElement(SystemIcons.Fullscreen, null) },
+                                activeState: { icon: React.createElement(SystemIcons.FullscreenExit, null) }
+                            }
+                        ]
+                    }, footer: {
+                        buttons: [
+                            {
+                                componentType: 'icon',
+                                icon: React.createElement(SystemIcons.OpenNewWindow, null),
+                                action: function () {
+                                },
+                            },
+                        ]
+                    }, size: Size.Large },
+                    React.createElement(ContentContainer, null, "Content"))),
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'toggle',
+                                active: false,
+                                defaultState: { icon: React.createElement(SystemIcons.Fullscreen, null) },
+                                activeState: { icon: React.createElement(SystemIcons.FullscreenExit, null) }
+                            }
+                        ]
+                    }, footer: {
+                        buttons: [
+                            {
+                                componentType: 'icon',
+                                icon: React.createElement(SystemIcons.OpenNewWindow, null),
+                                action: function () {
+                                },
+                            },
+                        ]
+                    }, size: Size.Large },
+                    React.createElement(ScrollableContentContainer, null, "Content")))),
+        React.createElement("div", { style: { display: 'flex', gap: '24px' } },
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'toggle',
+                                active: false,
+                                defaultState: { icon: React.createElement(SystemIcons.Fullscreen, null) },
+                                activeState: { icon: React.createElement(SystemIcons.FullscreenExit, null) }
+                            }
+                        ]
+                    }, footer: {}, size: Size.Large },
+                    React.createElement(ContentContainer, null, "Content"))),
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                React.createElement(Tile, { style: { width: '360px', height: '240px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'toggle',
+                                active: false,
+                                defaultState: { icon: React.createElement(SystemIcons.Fullscreen, null) },
+                                activeState: { icon: React.createElement(SystemIcons.FullscreenExit, null) }
+                            }
+                        ]
+                    }, footer: {}, size: Size.Large },
+                    React.createElement(ScrollableContentContainer, null, "Content")))),
+        React.createElement("div", { style: { display: 'flex', gap: '24px' } },
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', flex: 1 } },
+                React.createElement(Tile, { header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'dropdown',
+                                items: dropdownItemsWithIcon,
+                                itemsType: 'normal',
+                                onClick: function () {
+                                },
+                                icon: React.createElement(SystemIcons.GearSettings, null)
+                            }
+                        ]
+                    }, footer: {
+                        buttons: [
+                            {
+                                componentType: 'icon',
+                                icon: React.createElement(SystemIcons.OpenNewWindow, null),
+                                action: function () {
+                                },
+                            },
+                        ]
+                    }, size: Size.Large },
+                    React.createElement(LargeListItemsDemo, null))),
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', flex: 1 } },
+                React.createElement(Tile, { style: { maxHeight: '400px' }, header: {
+                        title: 'Title',
+                        subtitle: 'Subtitle', subtitleIcon: React.createElement(SystemIcons.Document, null),
+                        buttons: [
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineDown, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'icon', icon: React.createElement(SystemIcons.ArrowLineUp, null), action: function () {
+                                }
+                            },
+                            {
+                                componentType: 'dropdown',
+                                items: dropdownItemsWithIcon,
+                                itemsType: 'normal',
+                                onClick: function () {
+                                },
+                                icon: React.createElement(SystemIcons.GearSettings, null)
+                            }
+                        ]
+                    }, footer: {
+                        buttons: [
+                            {
+                                componentType: 'icon',
+                                icon: React.createElement(SystemIcons.OpenNewWindow, null),
+                                action: function () {
+                                },
+                            },
+                        ]
+                    }, size: Size.Large },
+                    React.createElement(MediumListItemsDemo, null))))));
+};
+var templateObject_1, templateObject_2;