@dtdot/lego 0.14.0

package/build/components/Table/Table.stories.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react/types-6-0';
+export declare const Standard: () => JSX.Element;
+export declare const InCard: () => JSX.Element;
+export declare const InContentCard: () => JSX.Element;
+declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
+export default _default;

package/build/components/Table/Table.stories.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Card, ProfileImage, Table } from '../..';
+export const Standard = () => (React.createElement(Table, null,
+    React.createElement(Table.Row, null,
+        React.createElement(Table.Cell, { variant: 'tight' },
+            React.createElement(ProfileImage, { name: 'Hungry Caterpillar' })),
+        React.createElement(Table.Cell, { width: '100%' }, "Hungry Caterpillar"),
+        React.createElement(Table.Cell, null, "Ready")),
+    React.createElement(Table.Row, null,
+        React.createElement(Table.Cell, { variant: 'tight' },
+            React.createElement(ProfileImage, { name: 'Fainting Lama' })),
+        React.createElement(Table.Cell, { width: '100%' }, "Fainting Lama"),
+        React.createElement(Table.Cell, null, "Pending"))));
+export const InCard = () => (React.createElement(Card, { padded: true, size: 'sm' },
+    React.createElement(Table, null,
+        React.createElement(Table.Row, null,
+            React.createElement(Table.Cell, { variant: 'tight' },
+                React.createElement(ProfileImage, { name: 'Hungry Caterpillar' })),
+            React.createElement(Table.Cell, null, "Hungry Caterpillar"),
+            React.createElement(Table.Cell, null, "Ready")),
+        React.createElement(Table.Row, null,
+            React.createElement(Table.Cell, { variant: 'tight' },
+                React.createElement(ProfileImage, { name: 'Fainting Lama' })),
+            React.createElement(Table.Cell, null, "Fainting Lama"),
+            React.createElement(Table.Cell, null, "Pending")))));
+export const InContentCard = () => (React.createElement(Card, { size: 'sm' },
+    React.createElement(Card.Header, { heading: 'Sed do eiusmod', subHeading: 'Labore et dolore magna' }),
+    React.createElement(Card.Content, null,
+        React.createElement(Table, { variant: 'soft' },
+            React.createElement(Table.Row, null,
+                React.createElement(Table.Cell, null, "Hungry Caterpillar"),
+                React.createElement(Table.Cell, null, "Ready")),
+            React.createElement(Table.Row, null,
+                React.createElement(Table.Cell, null, "Fainting Lama"),
+                React.createElement(Table.Cell, null, "Pending"))))));
+export default {
+    title: 'Components/Table',
+    component: Table,
+};

package/build/components/Table/_Table.context.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare type TableVariant = 'regular' | 'soft';
+export interface TableContextProps {
+    variant: TableVariant;
+}
+declare const TableContext: import("react").Context<TableContextProps>;
+export default TableContext;

package/build/components/Table/_Table.context.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+const TableContext = createContext({
+    variant: 'regular',
+});
+export default TableContext;

package/build/components/Table/_TableRow.component.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface TableRowProps {
+    children: React.ReactNode;
+}
+declare const TableRow: ({ children }: TableRowProps) => JSX.Element;
+export default TableRow;

package/build/components/Table/_TableRow.component.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useContext } from 'react';
+import styled from 'styled-components';
+import TableContext from './_Table.context';
+const StyledRow = styled.tr `
+  box-shadow: 0px 1px 0px 0px
+    ${(props) => (props.variant === 'regular' ? props.theme.colours.defaultBorder : props.theme.colours.faintBorder)};
+
+  &:last-child {
+    box-shadow: none;
+  }
+`;
+const TableRow = ({ children }) => {
+    const { variant } = useContext(TableContext);
+    return React.createElement(StyledRow, { variant: variant }, children);
+};
+export default TableRow;

package/build/components/Text/Text.component.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare type TextVariant = 'primary' | 'secondary';
+export interface TextProps {
+    children: React.ReactNode;
+    variant?: TextVariant;
+}
+declare const Text: ({ children, variant }: TextProps) => JSX.Element;
+export default Text;

package/build/components/Text/Text.component.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+const TextContainer = styled.span `
+  font-family: ${(props) => props.theme.fonts.default.family};
+  font-size: ${(props) => props.theme.fonts.default.size};
+  font-weight: ${(props) => props.theme.fonts.default.weight};
+
+  color: ${(props) => props.theme.colours.defaultFont};
+`;
+const TextContainerSecondary = styled.span `
+  font-family: ${(props) => props.theme.fonts.default.family};
+  font-size: ${(props) => props.theme.fonts.default.size};
+  font-weight: ${(props) => props.theme.fonts.default.weight};
+
+  color: ${(props) => props.theme.colours.secondaryFont};
+`;
+const Text = ({ children, variant = 'primary' }) => {
+    switch (variant) {
+        case 'secondary':
+            return React.createElement(TextContainerSecondary, null, children);
+        case 'primary':
+        default:
+            return React.createElement(TextContainer, null, children);
+    }
+};
+export default Text;

package/build/components/Text/Text.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react/types-6-0';
+export declare const Standard: () => JSX.Element;
+export declare const Secondary: () => JSX.Element;
+declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
+export default _default;

package/build/components/Text/Text.stories.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Text } from '../..';
+export const Standard = () => React.createElement(Text, null, "test 1");
+export const Secondary = () => (React.createElement(React.Fragment, null,
+    React.createElement(Text, null, "This is not a drill"),
+    " ",
+    React.createElement(Text, { variant: 'secondary' }, "(no really!)")));
+export default {
+    title: 'Components/Text',
+    component: Text,
+};

package/build/constants/zIndex.constants.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    modalOverlay: number;
+    modalContent: number;
+    notifications: number;
+};
+export default _default;

package/build/constants/zIndex.constants.js

@@ -0,0 +1,5 @@
+export default {
+    modalOverlay: 100,
+    modalContent: 110,
+    notifications: 120,
+};

package/build/contexts/File.context.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface FileContextProps {
+    upload: (file: File) => Promise<string>;
+    getUrl: (key: string) => string;
+}
+declare const FileContext: import("react").Context<FileContextProps>;
+export default FileContext;

package/build/contexts/File.context.js

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+const FileContext = createContext({
+    // eslint-disable-next-line
+    upload: (file) => { throw new Error('ERROR: Upload function must be bound in a context'); },
+    // eslint-disable-next-line
+    getUrl: (key) => { throw new Error('ERROR: Get URL function must be bound in a context'); },
+});
+export default FileContext;

package/build/examples/Modal.stories.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react/types-6-0';
+export declare const Standard: () => JSX.Element;
+declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
+export default _default;

package/build/examples/Modal.stories.js

@@ -0,0 +1,37 @@
+import React, { useState } from 'react';
+import { Button, FancyCheckbox, Form, Input, Modal } from '../';
+import ControlGroup from '../components/ControlGroup/ControlGroup.component';
+/* eslint-disable @typescript-eslint/no-empty-function */
+const options = [
+    {
+        value: 'fireball',
+        label: 'Chinese Fireball',
+    },
+    {
+        value: 'longhorn',
+        label: 'Romanian Longhorn',
+    },
+    {
+        value: 'ridgeback',
+        label: 'Norwegian Ridgeback',
+    },
+    {
+        value: 'horntail',
+        label: 'Hungarian Horntail',
+    },
+];
+export const Standard = () => {
+    const [value, setValue] = useState({ dragon: '' });
+    return (React.createElement(Modal, { onClose: () => { } },
+        React.createElement(Modal.Header, { header: 'Add Dragon' }),
+        React.createElement(Modal.Body, null,
+            React.createElement(Form, { value: value, onChange: setValue },
+                React.createElement(ControlGroup, { variation: 'comfortable' },
+                    React.createElement(Input, { name: 'name', label: 'Name' }),
+                    React.createElement(FancyCheckbox, { name: 'dragon', label: 'Type', options: options }),
+                    React.createElement(Button, null, "Submit"))))));
+};
+export default {
+    title: 'Examples/Modals',
+    component: FancyCheckbox,
+};

package/build/global/BodyStyle.component.d.ts

@@ -0,0 +1,2 @@
+declare const BodyStyle: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
+export default BodyStyle;

package/build/global/BodyStyle.component.js

@@ -0,0 +1,16 @@
+import { createGlobalStyle } from 'styled-components';
+const BodyStyle = createGlobalStyle `
+  body {
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
+      'Droid Sans', 'Helvetica Neue', sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    background-color: #f6f7f9;
+
+    * {
+      box-sizing: border-box;
+    }
+  }
+`;
+export default BodyStyle;

package/build/hooks/useForm.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare const useForm: <T>(callback: (data: T) => void, initial: T) => {
+    handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    handleSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
+    values: T;
+};
+export default useForm;

package/build/hooks/useForm.js

@@ -0,0 +1,20 @@
+import { useState } from 'react';
+const useForm = (callback, initial) => {
+    const [values, setValues] = useState(initial);
+    const handleSubmit = (event) => {
+        if (event) {
+            event.preventDefault();
+        }
+        callback(values);
+    };
+    const handleChange = (event) => {
+        event.persist();
+        setValues((v) => ({ ...v, [event.target.name]: event.target.value }));
+    };
+    return {
+        handleChange,
+        handleSubmit,
+        values,
+    };
+};
+export default useForm;

package/build/index.d.ts

@@ -0,0 +1,47 @@
+export { default as BodyStyle } from './global/BodyStyle.component';
+export { default as ActionMessage } from './components/ActionMessage/ActionMessage.component';
+export { default as Alert } from './components/Alert/Alert.component';
+export { default as Badge } from './components/Badge/Badge.component';
+export { default as Button } from './components/Button/Button.component';
+export { default as ButtonGroup } from './components/ButtonGroup/ButtonGroup.component';
+export { default as Card } from './components/Card/Card.component';
+export { default as CardGroup } from './components/Card/CardGroup.component';
+export { default as ControlGroup } from './components/ControlGroup/ControlGroup.component';
+export { default as FancyCheckbox } from './components/FancyCheckbox/FancyCheckbox.component';
+export { default as Form } from './components/Form/Form.component';
+export { default as Notification } from './components/Notification/Notification.component';
+export { default as Notifications } from './components/Notifications/Notifications.component';
+export { default as ImageUpload } from './components/ImageUpload/ImageUpload.component';
+export { default as InlineCard } from './components/InlineCard/InlineCard.component';
+export { default as InlineCardGroup } from './components/InlineCard/InlineCardGroup.component';
+export { default as Input } from './components/Input/Input.component';
+export { default as Heading } from './components/Heading/Heading.component';
+export { default as LiveInput } from './components/LiveInput/LiveInput.component';
+export { default as Loader } from './components/Loader/Loader.component';
+export { default as Menu } from './components/Menu/Menu.component';
+export { default as Modal } from './components/Modal/Modal.component';
+export { default as ProfileImage } from './components/ProfileImage/ProfileImage.component';
+export { default as QrCode } from './components/QrCode/QrCode.component';
+export { default as SubHeading } from './components/SubHeading/SubHeading.component';
+export { default as Spacer } from './components/Spacer/Spacer.component';
+export { default as SquareButton } from './components/SquareButton/SquareButton.component';
+export { default as Table } from './components/Table/Table.component';
+export { default as Text } from './components/Text/Text.component';
+export { default as LoginScreen } from './screens/Login/Login.screen';
+export { default as RegisterScreen } from './screens/Register/Register.screen';
+export { default as VerificationScreen } from './screens/Verification/Verification.screen';
+export { default as ActionLayout } from './layouts/Action/Action.layout';
+export { default as CenteredLayout } from './layouts/Centered/Centered.layout';
+export { default as ColumnLayout } from './layouts/Column/Column.layout';
+export { default as ContentLayout } from './layouts/Content/Content.layout';
+export { default as EmphasisLayout } from './layouts/Emphasis/Emphasis.layout';
+export { default as FocusLayout } from './layouts/Focus/Focus.layout';
+export { default as PaddedLayout } from './layouts/Padded/Padded.layout';
+export { default as Themes } from './theme/themes';
+export { RegisterData } from './screens/Register/Register.screen';
+export { LoginData } from './screens/Login/Login.screen';
+export { VerificationData } from './screens/Verification/Verification.screen';
+export { default as FileContext } from './contexts/File.context';
+export { ButtonProps as ButtonProps } from './components/Button/Button.component';
+export { default as menuHelpers } from './components/Menu/menu.helpers';
+export { default as responsive } from './responsive/responsive';

package/build/index.js

@@ -0,0 +1,43 @@
+export { default as BodyStyle } from './global/BodyStyle.component';
+export { default as ActionMessage } from './components/ActionMessage/ActionMessage.component';
+export { default as Alert } from './components/Alert/Alert.component';
+export { default as Badge } from './components/Badge/Badge.component';
+export { default as Button } from './components/Button/Button.component';
+export { default as ButtonGroup } from './components/ButtonGroup/ButtonGroup.component';
+export { default as Card } from './components/Card/Card.component';
+export { default as CardGroup } from './components/Card/CardGroup.component';
+export { default as ControlGroup } from './components/ControlGroup/ControlGroup.component';
+export { default as FancyCheckbox } from './components/FancyCheckbox/FancyCheckbox.component';
+export { default as Form } from './components/Form/Form.component';
+export { default as Notification } from './components/Notification/Notification.component';
+export { default as Notifications } from './components/Notifications/Notifications.component';
+export { default as ImageUpload } from './components/ImageUpload/ImageUpload.component';
+export { default as InlineCard } from './components/InlineCard/InlineCard.component';
+export { default as InlineCardGroup } from './components/InlineCard/InlineCardGroup.component';
+export { default as Input } from './components/Input/Input.component';
+export { default as Heading } from './components/Heading/Heading.component';
+export { default as LiveInput } from './components/LiveInput/LiveInput.component';
+export { default as Loader } from './components/Loader/Loader.component';
+export { default as Menu } from './components/Menu/Menu.component';
+export { default as Modal } from './components/Modal/Modal.component';
+export { default as ProfileImage } from './components/ProfileImage/ProfileImage.component';
+export { default as QrCode } from './components/QrCode/QrCode.component';
+export { default as SubHeading } from './components/SubHeading/SubHeading.component';
+export { default as Spacer } from './components/Spacer/Spacer.component';
+export { default as SquareButton } from './components/SquareButton/SquareButton.component';
+export { default as Table } from './components/Table/Table.component';
+export { default as Text } from './components/Text/Text.component';
+export { default as LoginScreen } from './screens/Login/Login.screen';
+export { default as RegisterScreen } from './screens/Register/Register.screen';
+export { default as VerificationScreen } from './screens/Verification/Verification.screen';
+export { default as ActionLayout } from './layouts/Action/Action.layout';
+export { default as CenteredLayout } from './layouts/Centered/Centered.layout';
+export { default as ColumnLayout } from './layouts/Column/Column.layout';
+export { default as ContentLayout } from './layouts/Content/Content.layout';
+export { default as EmphasisLayout } from './layouts/Emphasis/Emphasis.layout';
+export { default as FocusLayout } from './layouts/Focus/Focus.layout';
+export { default as PaddedLayout } from './layouts/Padded/Padded.layout';
+export { default as Themes } from './theme/themes';
+export { default as FileContext } from './contexts/File.context';
+export { default as menuHelpers } from './components/Menu/menu.helpers';
+export { default as responsive } from './responsive/responsive';

package/build/layouts/Action/Action.layout.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface ActionLayoutProps {
+    children: React.ReactNode;
+}
+export interface ActionLayoutTextProps {
+    children: React.ReactNode;
+}
+export interface ActionLayoutContentProps {
+    children: React.ReactNode;
+    left?: boolean;
+}
+declare const ActionLayout: {
+    (props: ActionLayoutProps): JSX.Element;
+    Text: (props: ActionLayoutTextProps) => JSX.Element;
+    Content: (props: ActionLayoutContentProps) => JSX.Element;
+};
+export default ActionLayout;

package/build/layouts/Action/Action.layout.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import styled from 'styled-components';
+import Text from '../../components/Text/Text.component';
+import responsive from '../../responsive/responsive';
+const ActionLayoutContainer = styled.div `
+  padding: 32px 16px;
+
+  ${responsive.useStylesFor('tablet').andLarger `
+    display: flex;
+    justify-content: center;
+  `}
+`;
+const ActionLayoutInner = styled.div `
+  ${responsive.useStylesFor('tablet').andLarger `
+    width: 100%;
+    max-width: 600px;
+  `}
+`;
+const ActionLayoutTextContainer = styled.div `
+  ${responsive.useStylesFor('tablet').andLarger `
+    margin-right: 128px;
+  `}
+`;
+const ActionLayoutContentOuter = styled.div `
+  margin-top: 32px;
+
+  ${(props) => props.left
+    ? ''
+    : `
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+  `}
+`;
+const ActionLayoutText = (props) => (React.createElement(ActionLayoutTextContainer, null,
+    React.createElement(Text, null, props.children)));
+const ActionLayoutContent = (props) => {
+    const { left, children } = props;
+    return React.createElement(ActionLayoutContentOuter, { left: left }, children);
+};
+const ActionLayout = (props) => (React.createElement(ActionLayoutContainer, null,
+    React.createElement(ActionLayoutInner, null, props.children)));
+ActionLayout.Text = ActionLayoutText;
+ActionLayout.Content = ActionLayoutContent;
+export default ActionLayout;

package/build/layouts/Action/Action.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react/types-6-0';
+export declare const Standard: () => JSX.Element;
+export declare const LeftAligned: () => JSX.Element;
+declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
+export default _default;

package/build/layouts/Action/Action.stories.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ActionLayout, Button } from '../..';
+export const Standard = () => (React.createElement(ActionLayout, null,
+    React.createElement(ActionLayout.Text, null, "Lets find something to eat..."),
+    React.createElement(ActionLayout.Content, null,
+        React.createElement(Button, { variant: 'secondary' }, "Get Started"))));
+export const LeftAligned = () => (React.createElement(ActionLayout, null,
+    React.createElement(ActionLayout.Text, null, "Lets find something to eat..."),
+    React.createElement(ActionLayout.Content, { left: true },
+        React.createElement(Button, { variant: 'secondary' }, "Get Started"))));
+export default {
+    title: 'Layouts/Action',
+    component: ActionLayout,
+};

package/build/layouts/Centered/Centered.layout.d.ts

@@ -0,0 +1,2 @@
+declare const CenteredLayout: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export default CenteredLayout;

package/build/layouts/Centered/Centered.layout.js

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+const CenteredLayout = styled.div `
+  display: flex;
+  justify-content: center;
+`;
+export default CenteredLayout;

package/build/layouts/Centered/Centered.stories.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react/types-6-0';
+export declare const Standard: () => JSX.Element;
+declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
+export default _default;

package/build/layouts/Centered/Centered.stories.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { CenteredLayout } from '../..';
+export const Standard = () => (React.createElement("div", { style: { backgroundColor: 'white' } },
+    React.createElement(CenteredLayout, null, "some content....")));
+export default {
+    title: 'Layouts/Centered',
+    component: CenteredLayout,
+};

package/build/layouts/Column/Column.layout.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface ColumnLayoutProps {
+    children: React.ReactNode;
+}
+declare const ColumnLayout: ({ children }: ColumnLayoutProps) => JSX.Element;
+export default ColumnLayout;

package/build/layouts/Column/Column.layout.js

@@ -0,0 +1,5 @@
+import React from 'react';
+const ColumnLayout = ({ children }) => {
+    return React.createElement("div", null, children);
+};
+export default ColumnLayout;

package/build/layouts/Column/Column.stories.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react/types-6-0';
+export declare const Standard: () => JSX.Element;
+declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
+export default _default;

package/build/layouts/Column/Column.stories.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ColumnLayout } from '../..';
+export const Standard = () => (React.createElement("div", { style: { backgroundColor: 'white' } },
+    React.createElement(ColumnLayout, null, "some content....")));
+export default {
+    title: 'Layouts/Column',
+    component: ColumnLayout,
+};

package/build/layouts/Content/Content.layout.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface ContentLayoutProps {
+    children: React.ReactNode;
+}
+declare const ContentLayout: {
+    ({ children }: ContentLayoutProps): JSX.Element;
+    Header: ({ children, actions }: import("./_ContentHeader.component").ContentHeaderActions) => JSX.Element;
+    Content: ({ children, size }: import("./_ContentContent.component").ContentContentActions) => JSX.Element;
+};
+export default ContentLayout;

package/build/layouts/Content/Content.layout.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import styled from 'styled-components';
+import ContentHeader from './_ContentHeader.component';
+import ContentContent from './_ContentContent.component';
+const ContentContainer = styled.div ``;
+const ContentLayout = ({ children }) => {
+    return React.createElement(ContentContainer, null, children);
+};
+ContentLayout.Header = ContentHeader;
+ContentLayout.Content = ContentContent;
+export default ContentLayout;

package/build/layouts/Content/Content.stories.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react/types-6-0';
+export declare const Standard: () => JSX.Element;
+export declare const Small: () => JSX.Element;
+export declare const Medium: () => JSX.Element;
+export declare const Large: () => JSX.Element;
+export declare const Full: () => JSX.Element;
+declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
+export default _default;

package/build/layouts/Content/Content.stories.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { ContentLayout, Card, CardGroup, Heading, Button, Text } from '../..';
+export const Standard = () => (React.createElement(ContentLayout, null,
+    React.createElement(ContentLayout.Header, { actions: React.createElement(Button, null, "Add") },
+        React.createElement(Heading, null, "Some content...")),
+    React.createElement(ContentLayout.Content, null,
+        React.createElement(CardGroup, null,
+            React.createElement(Card, null,
+                React.createElement(Card.Content, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")),
+            React.createElement(Card, null,
+                React.createElement(Card.Content, null, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")),
+            React.createElement(Card, null,
+                React.createElement(Card.Content, null, "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."))))));
+export const Small = () => (React.createElement(ContentLayout, null,
+    React.createElement(ContentLayout.Header, null,
+        React.createElement(Heading, null, "A small content section")),
+    React.createElement(ContentLayout.Content, { size: 'sm' },
+        React.createElement(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget odio vitae elit sodales cursus. Phasellus a consequat leo. Ut elit metus, bibendum et consequat quis, facilisis nec ex. Curabitur ex magna, tempor a pretium eu, hendrerit ut erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce id lectus varius, lacinia metus et, egestas magna. Pellentesque egestas massa nec hendrerit tempus. Aliquam laoreet elit aliquet orci semper, eget finibus neque volutpat. Ut dignissim in neque quis lobortis. Vivamus bibendum mauris eu est aliquam efficitur. Vestibulum finibus condimentum lacus, vitae congue metus faucibus at. Aliquam et lacus eu turpis blandit commodo sit amet nec ligula. Proin tristique porttitor iaculis. Nunc efficitur justo et justo rutrum gravida. Cras accumsan ipsum vitae cursus consequat. Sed at nunc at risus dictum hendrerit. Pellentesque vel felis convallis, pellentesque enim in, suscipit urna. Aenean eu tristique lectus. Sed convallis at velit eget maximus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed eget erat eget ligula lacinia ultricies a non ex. In efficitur purus non cursus tincidunt. Quisque lobortis feugiat ipsum, non mollis sapien aliquam in. Sed dictum libero id neque dictum pellentesque. In sed molestie nibh, volutpat fringilla leo. Phasellus at scelerisque enim. Donec nulla enim, dapibus quis tempor at, cursus eget mi. Vivamus ac consectetur tortor, ut egestas felis. Quisque ultricies, ligula sit amet vestibulum vulputate, erat lacus volutpat urna, nec tempor lacus nisl vitae lectus. Sed rhoncus lorem id tempus posuere. Vestibulum quis tellus dui. Suspendisse finibus placerat vestibulum. Suspendisse potenti. Nam sollicitudin nec velit non efficitur. In hac habitasse platea dictumst. Ut ut placerat nibh. Vestibulum felis enim, volutpat eget urna a, dapibus fringilla est. Vivamus rhoncus quis leo vel porta. In sit amet neque accumsan ligula varius aliquet eu ut nisi. Nunc bibendum elementum urna a blandit. Maecenas ultrices eros ac lacus eleifend, sit amet posuere erat iaculis. Nam hendrerit ipsum sed leo mattis ultrices. Aliquam tincidunt dui eget tincidunt pharetra. Aenean efficitur magna nunc, vitae luctus turpis placerat id. Aliquam quis rutrum purus. Proin tortor mauris, fermentum et pharetra vel, vulputate id dui. Nam pharetra risus odio. Etiam quis erat a mauris semper dignissim. Praesent a sollicitudin nunc. Integer scelerisque eget leo in pellentesque. Vivamus felis augue, condimentum nec auctor tincidunt, maximus nec nunc. Etiam vel imperdiet nisl, vel iaculis felis. Etiam tempor dolor ac ultrices luctus. Ut id nulla vestibulum, convallis sapien at, ultrices est. Mauris finibus est vitae fringilla placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum tincidunt sem, eu dignissim purus viverra in. Curabitur libero felis, eleifend sit amet bibendum at, ornare in lacus. Curabitur ac mattis ligula. Nulla dignissim pharetra urna at eleifend. Ut vitae auctor nibh. Nulla facilisi. Maecenas bibendum nibh nec dui posuere, eu vulputate arcu mollis. Sed auctor, diam sit amet scelerisque fringilla, nunc risus tristique libero, et ornare lorem augue eu mauris. Donec hendrerit, sapien ac semper vehicula, nunc ex bibendum lacus, vel ultricies sapien purus eget libero."))));
+export const Medium = () => (React.createElement(ContentLayout, null,
+    React.createElement(ContentLayout.Header, null,
+        React.createElement(Heading, null, "A medium content section")),
+    React.createElement(ContentLayout.Content, { size: 'md' },
+        React.createElement(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget odio vitae elit sodales cursus. Phasellus a consequat leo. Ut elit metus, bibendum et consequat quis, facilisis nec ex. Curabitur ex magna, tempor a pretium eu, hendrerit ut erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce id lectus varius, lacinia metus et, egestas magna. Pellentesque egestas massa nec hendrerit tempus. Aliquam laoreet elit aliquet orci semper, eget finibus neque volutpat. Ut dignissim in neque quis lobortis. Vivamus bibendum mauris eu est aliquam efficitur. Vestibulum finibus condimentum lacus, vitae congue metus faucibus at. Aliquam et lacus eu turpis blandit commodo sit amet nec ligula. Proin tristique porttitor iaculis. Nunc efficitur justo et justo rutrum gravida. Cras accumsan ipsum vitae cursus consequat. Sed at nunc at risus dictum hendrerit. Pellentesque vel felis convallis, pellentesque enim in, suscipit urna. Aenean eu tristique lectus. Sed convallis at velit eget maximus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed eget erat eget ligula lacinia ultricies a non ex. In efficitur purus non cursus tincidunt. Quisque lobortis feugiat ipsum, non mollis sapien aliquam in. Sed dictum libero id neque dictum pellentesque. In sed molestie nibh, volutpat fringilla leo. Phasellus at scelerisque enim. Donec nulla enim, dapibus quis tempor at, cursus eget mi. Vivamus ac consectetur tortor, ut egestas felis. Quisque ultricies, ligula sit amet vestibulum vulputate, erat lacus volutpat urna, nec tempor lacus nisl vitae lectus. Sed rhoncus lorem id tempus posuere. Vestibulum quis tellus dui. Suspendisse finibus placerat vestibulum. Suspendisse potenti. Nam sollicitudin nec velit non efficitur. In hac habitasse platea dictumst. Ut ut placerat nibh. Vestibulum felis enim, volutpat eget urna a, dapibus fringilla est. Vivamus rhoncus quis leo vel porta. In sit amet neque accumsan ligula varius aliquet eu ut nisi. Nunc bibendum elementum urna a blandit. Maecenas ultrices eros ac lacus eleifend, sit amet posuere erat iaculis. Nam hendrerit ipsum sed leo mattis ultrices. Aliquam tincidunt dui eget tincidunt pharetra. Aenean efficitur magna nunc, vitae luctus turpis placerat id. Aliquam quis rutrum purus. Proin tortor mauris, fermentum et pharetra vel, vulputate id dui. Nam pharetra risus odio. Etiam quis erat a mauris semper dignissim. Praesent a sollicitudin nunc. Integer scelerisque eget leo in pellentesque. Vivamus felis augue, condimentum nec auctor tincidunt, maximus nec nunc. Etiam vel imperdiet nisl, vel iaculis felis. Etiam tempor dolor ac ultrices luctus. Ut id nulla vestibulum, convallis sapien at, ultrices est. Mauris finibus est vitae fringilla placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum tincidunt sem, eu dignissim purus viverra in. Curabitur libero felis, eleifend sit amet bibendum at, ornare in lacus. Curabitur ac mattis ligula. Nulla dignissim pharetra urna at eleifend. Ut vitae auctor nibh. Nulla facilisi. Maecenas bibendum nibh nec dui posuere, eu vulputate arcu mollis. Sed auctor, diam sit amet scelerisque fringilla, nunc risus tristique libero, et ornare lorem augue eu mauris. Donec hendrerit, sapien ac semper vehicula, nunc ex bibendum lacus, vel ultricies sapien purus eget libero."))));
+export const Large = () => (React.createElement(ContentLayout, null,
+    React.createElement(ContentLayout.Header, null,
+        React.createElement(Heading, null, "A large content section")),
+    React.createElement(ContentLayout.Content, { size: 'lg' },
+        React.createElement(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget odio vitae elit sodales cursus. Phasellus a consequat leo. Ut elit metus, bibendum et consequat quis, facilisis nec ex. Curabitur ex magna, tempor a pretium eu, hendrerit ut erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce id lectus varius, lacinia metus et, egestas magna. Pellentesque egestas massa nec hendrerit tempus. Aliquam laoreet elit aliquet orci semper, eget finibus neque volutpat. Ut dignissim in neque quis lobortis. Vivamus bibendum mauris eu est aliquam efficitur. Vestibulum finibus condimentum lacus, vitae congue metus faucibus at. Aliquam et lacus eu turpis blandit commodo sit amet nec ligula. Proin tristique porttitor iaculis. Nunc efficitur justo et justo rutrum gravida. Cras accumsan ipsum vitae cursus consequat. Sed at nunc at risus dictum hendrerit. Pellentesque vel felis convallis, pellentesque enim in, suscipit urna. Aenean eu tristique lectus. Sed convallis at velit eget maximus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed eget erat eget ligula lacinia ultricies a non ex. In efficitur purus non cursus tincidunt. Quisque lobortis feugiat ipsum, non mollis sapien aliquam in. Sed dictum libero id neque dictum pellentesque. In sed molestie nibh, volutpat fringilla leo. Phasellus at scelerisque enim. Donec nulla enim, dapibus quis tempor at, cursus eget mi. Vivamus ac consectetur tortor, ut egestas felis. Quisque ultricies, ligula sit amet vestibulum vulputate, erat lacus volutpat urna, nec tempor lacus nisl vitae lectus. Sed rhoncus lorem id tempus posuere. Vestibulum quis tellus dui. Suspendisse finibus placerat vestibulum. Suspendisse potenti. Nam sollicitudin nec velit non efficitur. In hac habitasse platea dictumst. Ut ut placerat nibh. Vestibulum felis enim, volutpat eget urna a, dapibus fringilla est. Vivamus rhoncus quis leo vel porta. In sit amet neque accumsan ligula varius aliquet eu ut nisi. Nunc bibendum elementum urna a blandit. Maecenas ultrices eros ac lacus eleifend, sit amet posuere erat iaculis. Nam hendrerit ipsum sed leo mattis ultrices. Aliquam tincidunt dui eget tincidunt pharetra. Aenean efficitur magna nunc, vitae luctus turpis placerat id. Aliquam quis rutrum purus. Proin tortor mauris, fermentum et pharetra vel, vulputate id dui. Nam pharetra risus odio. Etiam quis erat a mauris semper dignissim. Praesent a sollicitudin nunc. Integer scelerisque eget leo in pellentesque. Vivamus felis augue, condimentum nec auctor tincidunt, maximus nec nunc. Etiam vel imperdiet nisl, vel iaculis felis. Etiam tempor dolor ac ultrices luctus. Ut id nulla vestibulum, convallis sapien at, ultrices est. Mauris finibus est vitae fringilla placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum tincidunt sem, eu dignissim purus viverra in. Curabitur libero felis, eleifend sit amet bibendum at, ornare in lacus. Curabitur ac mattis ligula. Nulla dignissim pharetra urna at eleifend. Ut vitae auctor nibh. Nulla facilisi. Maecenas bibendum nibh nec dui posuere, eu vulputate arcu mollis. Sed auctor, diam sit amet scelerisque fringilla, nunc risus tristique libero, et ornare lorem augue eu mauris. Donec hendrerit, sapien ac semper vehicula, nunc ex bibendum lacus, vel ultricies sapien purus eget libero."))));
+export const Full = () => (React.createElement(ContentLayout, null,
+    React.createElement(ContentLayout.Header, null,
+        React.createElement(Heading, null, "A full content section")),
+    React.createElement(ContentLayout.Content, { size: 'full' },
+        React.createElement(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget odio vitae elit sodales cursus. Phasellus a consequat leo. Ut elit metus, bibendum et consequat quis, facilisis nec ex. Curabitur ex magna, tempor a pretium eu, hendrerit ut erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce id lectus varius, lacinia metus et, egestas magna. Pellentesque egestas massa nec hendrerit tempus. Aliquam laoreet elit aliquet orci semper, eget finibus neque volutpat. Ut dignissim in neque quis lobortis. Vivamus bibendum mauris eu est aliquam efficitur. Vestibulum finibus condimentum lacus, vitae congue metus faucibus at. Aliquam et lacus eu turpis blandit commodo sit amet nec ligula. Proin tristique porttitor iaculis. Nunc efficitur justo et justo rutrum gravida. Cras accumsan ipsum vitae cursus consequat. Sed at nunc at risus dictum hendrerit. Pellentesque vel felis convallis, pellentesque enim in, suscipit urna. Aenean eu tristique lectus. Sed convallis at velit eget maximus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed eget erat eget ligula lacinia ultricies a non ex. In efficitur purus non cursus tincidunt. Quisque lobortis feugiat ipsum, non mollis sapien aliquam in. Sed dictum libero id neque dictum pellentesque. In sed molestie nibh, volutpat fringilla leo. Phasellus at scelerisque enim. Donec nulla enim, dapibus quis tempor at, cursus eget mi. Vivamus ac consectetur tortor, ut egestas felis. Quisque ultricies, ligula sit amet vestibulum vulputate, erat lacus volutpat urna, nec tempor lacus nisl vitae lectus. Sed rhoncus lorem id tempus posuere. Vestibulum quis tellus dui. Suspendisse finibus placerat vestibulum. Suspendisse potenti. Nam sollicitudin nec velit non efficitur. In hac habitasse platea dictumst. Ut ut placerat nibh. Vestibulum felis enim, volutpat eget urna a, dapibus fringilla est. Vivamus rhoncus quis leo vel porta. In sit amet neque accumsan ligula varius aliquet eu ut nisi. Nunc bibendum elementum urna a blandit. Maecenas ultrices eros ac lacus eleifend, sit amet posuere erat iaculis. Nam hendrerit ipsum sed leo mattis ultrices. Aliquam tincidunt dui eget tincidunt pharetra. Aenean efficitur magna nunc, vitae luctus turpis placerat id. Aliquam quis rutrum purus. Proin tortor mauris, fermentum et pharetra vel, vulputate id dui. Nam pharetra risus odio. Etiam quis erat a mauris semper dignissim. Praesent a sollicitudin nunc. Integer scelerisque eget leo in pellentesque. Vivamus felis augue, condimentum nec auctor tincidunt, maximus nec nunc. Etiam vel imperdiet nisl, vel iaculis felis. Etiam tempor dolor ac ultrices luctus. Ut id nulla vestibulum, convallis sapien at, ultrices est. Mauris finibus est vitae fringilla placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum tincidunt sem, eu dignissim purus viverra in. Curabitur libero felis, eleifend sit amet bibendum at, ornare in lacus. Curabitur ac mattis ligula. Nulla dignissim pharetra urna at eleifend. Ut vitae auctor nibh. Nulla facilisi. Maecenas bibendum nibh nec dui posuere, eu vulputate arcu mollis. Sed auctor, diam sit amet scelerisque fringilla, nunc risus tristique libero, et ornare lorem augue eu mauris. Donec hendrerit, sapien ac semper vehicula, nunc ex bibendum lacus, vel ultricies sapien purus eget libero."))));
+export default {
+    title: 'Layouts/Content',
+    component: ContentLayout,
+};