@dtdot/lego 0.14.0

package/build/components/Modal/_ModalBody.component.d.ts

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

package/build/components/Modal/_ModalBody.component.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+const ModalBody = styled.div `
+  padding: 16px;
+`;
+export default ModalBody;

package/build/components/Modal/_ModalHeader.component.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface ModalHeaderProps {
+    header: string;
+    subHeader?: string;
+}
+declare const ModalHeader: ({ header, subHeader }: ModalHeaderProps) => JSX.Element;
+export default ModalHeader;

package/build/components/Modal/_ModalHeader.component.js

@@ -0,0 +1,54 @@
+import React, { useContext } from 'react';
+import styled from 'styled-components';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import ModalContext from './_Modal.context';
+const HeaderContainer = styled.div `
+  display: flex;
+  justify-content: space-between;
+`;
+const TextContainer = styled.div `
+  padding: 16px;
+`;
+const HeaderText = styled.div `
+  color: ${(props) => props.theme.colours.defaultFont};
+  font-family: ${(props) => props.theme.fonts.subHeading.family};
+  font-size: ${(props) => props.theme.fonts.subHeading.size};
+  font-weight: ${(props) => props.theme.fonts.subHeading.weight};
+`;
+const SubHeaderText = styled.div `
+  margin-top: 4px;
+
+  color: ${(props) => props.theme.colours.defaultFont};
+  font-family: ${(props) => props.theme.fonts.default.family};
+  font-size: ${(props) => props.theme.fonts.default.size};
+  font-weight: ${(props) => props.theme.fonts.default.weight};
+`;
+const IconContainer = styled.div `
+  padding: 12px;
+  padding-right: 16px;
+`;
+const IconClickableArea = styled.div `
+  font-size: 24px;
+  font-weight: 400;
+
+  padding: 4px;
+  cursor: pointer;
+
+  color: ${(props) => props.theme.colours.secondaryFont};
+
+  &:hover {
+    color: ${(props) => props.theme.colours.secondaryFontHover};
+  }
+`;
+const ModalHeader = ({ header, subHeader }) => {
+    const { onClose } = useContext(ModalContext);
+    return (React.createElement(HeaderContainer, null,
+        React.createElement(TextContainer, null,
+            React.createElement(HeaderText, null, header),
+            SubHeaderText && React.createElement(SubHeaderText, null, subHeader)),
+        React.createElement(IconContainer, null,
+            React.createElement(IconClickableArea, { onClick: onClose },
+                React.createElement(FontAwesomeIcon, { icon: faTimes })))));
+};
+export default ModalHeader;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { AlertProps } from '../Alert/Alert.component';
+interface NotificationProps extends AlertProps {
+}
+declare const Notification: (props: NotificationProps) => JSX.Element;
+export default Notification;

package/build/components/Notification/Notification.component.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import styled from 'styled-components';
+import responsive from '../../responsive/responsive';
+import Alert, { AlertContainer } from '../Alert/Alert.component';
+const NotificationContainer = styled.div `
+  ${AlertContainer} {
+    ${responsive.useStylesFor('tablet').andLarger(`
+       max-width: 320px;
+       width: 320px;
+  `)}
+  }
+`;
+const Notification = (props) => (React.createElement(NotificationContainer, null,
+    React.createElement(Alert, Object.assign({}, props))));
+export default Notification;

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

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

package/build/components/Notification/Notification.stories.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Notification } from '../..';
+/* eslint-disable no-alert */
+export const Standard = () => (React.createElement(React.Fragment, null,
+    React.createElement(Notification, { variant: 'info', message: 'This is a base notification' }),
+    React.createElement("br", null),
+    React.createElement(Notification, { variant: 'info', message: 'This is a base notification with quite a bit of content. It may wrap around to the next line...' })));
+export const Variants = () => (React.createElement(React.Fragment, null,
+    React.createElement(Notification, { variant: 'info', message: 'This is an info notification' }),
+    React.createElement("br", null),
+    React.createElement(Notification, { variant: 'success', message: 'This is a success notification' }),
+    React.createElement("br", null),
+    React.createElement(Notification, { variant: 'warn', message: 'This is a warn notification' }),
+    React.createElement("br", null),
+    React.createElement(Notification, { variant: 'danger', message: 'This is a danger notification' })));
+export const WithCount = () => (React.createElement(React.Fragment, null,
+    React.createElement(Notification, { variant: 'info', count: 5, message: 'This is a notification with a count' }),
+    React.createElement("br", null),
+    React.createElement(Notification, { variant: 'success', count: 5, message: 'This is a notification with a count' }),
+    React.createElement("br", null),
+    React.createElement(Notification, { variant: 'warn', count: 5, message: 'This is a notification with a count' }),
+    React.createElement("br", null),
+    React.createElement(Notification, { variant: 'danger', count: 5, message: 'This is a notification with a count' })));
+export const WithAction = () => (React.createElement(Notification, { variant: 'info', message: 'This is a notification with an action', action: 'Undo', onAction: () => alert('Undoing...') }));
+export default {
+    title: 'Components/Notification',
+    component: Notification,
+};

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export declare type NotificationVariant = 'info' | 'success' | 'warn' | 'danger';
+export interface INotification {
+    id: string;
+    variant: NotificationVariant;
+    message: string;
+    count?: number;
+    action?: string;
+    onAction?: () => void;
+}
+interface NotificationsProps {
+    notifications: INotification[];
+}
+declare const Notifications: ({ notifications }: NotificationsProps) => JSX.Element;
+export default Notifications;

package/build/components/Notifications/Notifications.component.js

@@ -0,0 +1,37 @@
+// eslint-disable-next-line @typescript-eslint/no-use-before-define
+import React from 'react';
+import styled from 'styled-components';
+import { animated, useTransition } from 'react-spring';
+import { Notification, Spacer } from '../..';
+import responsive from '../../responsive/responsive';
+import zIndexConstants from '../../constants/zIndex.constants';
+const NotificationContainer = styled.div `
+  position: fixed;
+  bottom: 20px;
+  left: 270px;
+
+  z-index: ${zIndexConstants.notifications};
+
+  ${responsive.useStylesFor('mobile').andSmaller(`
+    bottom: 80px;
+    left: 20px;
+
+    width: calc(100% - 40px);
+  `)}
+`;
+const Notifications = ({ notifications }) => {
+    const transitions = useTransition(notifications, (item) => item.id, {
+        from: { transform: 'translateX(-300px)', opacity: 0 },
+        enter: { transform: 'translateX(0px)', opacity: 1 },
+        leave: { transform: 'translateX(300px)', opacity: 0 },
+        config: {
+            tension: 280,
+            mass: 0.2,
+            friction: 10,
+        },
+    });
+    return (React.createElement(NotificationContainer, null, transitions.map(({ item, props, key }) => (React.createElement(animated.div, { key: key, style: props },
+        React.createElement(Spacer, { size: '1x' }),
+        React.createElement(Notification, { variant: item.variant, message: item.message, action: item.action, onAction: item.onAction, count: item.count }))))));
+};
+export default Notifications;

package/build/components/Notifications/Notifications.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 Interactive: () => JSX.Element;
+export declare const OverModal: () => JSX.Element;
+declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
+export default _default;

package/build/components/Notifications/Notifications.stories.js

@@ -0,0 +1,99 @@
+import React, { useState } from 'react';
+import { Button, FocusLayout, Menu, Modal, Notifications, PaddedLayout, Text } from '../..';
+/* eslint-disable no-alert, no-console */
+export const Standard = () => {
+    const notifications = [
+        {
+            id: '123',
+            message: 'User saved!',
+            variant: 'success',
+        },
+        {
+            id: '456',
+            message: 'Error validating form',
+            variant: 'danger',
+        },
+    ];
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Notifications, { notifications: notifications }),
+        React.createElement(Menu, null,
+            React.createElement(Menu.Heading, null, "Something Tasty")),
+        React.createElement(Menu.Page, null,
+            React.createElement(FocusLayout, null,
+                React.createElement(Text, null, "Content...")))));
+};
+export const Interactive = () => {
+    const [notifications, setNotifications] = useState([]);
+    const successNotification = {
+        id: '123',
+        message: 'User saved!',
+        variant: 'success',
+        count: 1,
+    };
+    const errorNotification = {
+        id: '456',
+        message: 'Error validating form',
+        variant: 'danger',
+        count: 1,
+    };
+    const addNotification = (notification) => {
+        const exists = notifications.find((n) => n.id === notification.id);
+        if (exists) {
+            const newNotifications = notifications.map((n) => n.id === notification.id
+                ? {
+                    ...n,
+                    count: (n.count || 1) + 1,
+                }
+                : n);
+            setNotifications(newNotifications);
+            return;
+        }
+        setNotifications([...notifications, notification]);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Notifications, { notifications: notifications }),
+        React.createElement(Menu, null,
+            React.createElement(Menu.Heading, null, "Something Tasty")),
+        React.createElement(Menu.Page, null,
+            React.createElement(FocusLayout, null,
+                React.createElement(Button, { onClick: () => addNotification(successNotification) }, "Save user"),
+                React.createElement("br", null),
+                React.createElement("br", null),
+                React.createElement(Button, { onClick: () => addNotification(errorNotification) }, "Validate Form"),
+                React.createElement("br", null),
+                React.createElement("br", null),
+                React.createElement(Button, { variant: 'secondary', onClick: () => setNotifications(notifications.slice(1)) }, "Clear")))));
+};
+export const OverModal = () => {
+    const notifications = [
+        {
+            id: '123',
+            message: 'User saved!',
+            variant: 'success',
+        },
+        {
+            id: '456',
+            message: 'Error validating form',
+            variant: 'danger',
+        },
+    ];
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Notifications, { notifications: notifications }),
+        React.createElement(Menu, null,
+            React.createElement(Menu.Heading, null, "Something Tasty")),
+        React.createElement(Menu.Page, null,
+            React.createElement(Modal, { onClose: () => {
+                    console.log('close..');
+                } },
+                React.createElement(Modal.Header, { header: 'A test modal' }),
+                React.createElement(Modal.Body, null,
+                    React.createElement(PaddedLayout, null,
+                        React.createElement(Text, null, "Some text...")))))));
+};
+export default {
+    title: 'Components/Notifications',
+    component: Notifications,
+    parameters: {
+        layout: 'fullscreen',
+    },
+};

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface ProfileImageProps {
+    name?: string;
+    image?: string;
+}
+declare const ProfileImage: ({ name, image }: ProfileImageProps) => JSX.Element;
+export default ProfileImage;

package/build/components/ProfileImage/ProfileImage.component.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import styled from 'styled-components';
+import IdenticonObj from 'identicon.js';
+import colours from '../../colours/colours';
+import SparkMD5 from 'spark-md5';
+const ImageContainer = styled.div `
+  height: 36px;
+  width: 36px;
+  border-radius: 4px;
+
+  border: thin solid ${(props) => props.theme.colours.defaultBorder};
+`;
+const Image = styled.img `
+  height: 34px;
+  width: 34px;
+  border-radius: 4px;
+  object-fit: cover;
+`;
+const hexToRgb = (hex) => {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result
+        ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16),
+        }
+        : null;
+};
+const Identicon = ({ value }) => {
+    const hexColours = [colours.red, colours.green, colours.blue, colours.yellow];
+    const convertedColours = hexColours.map((hex) => {
+        const rgb = hexToRgb(hex);
+        return [rgb === null || rgb === void 0 ? void 0 : rgb.r, rgb === null || rgb === void 0 ? void 0 : rgb.g, rgb === null || rgb === void 0 ? void 0 : rgb.b, 255];
+    });
+    const hash = SparkMD5.hash(value || 'unknown user');
+    const colourIndex = Math.floor(Math.random() * 4);
+    const data = new IdenticonObj(hash, {
+        foreground: convertedColours[colourIndex] || [0, 0, 0, 255],
+        background: [255, 255, 255, 255],
+        margin: 0,
+        size: 34,
+    }).toString();
+    return React.createElement(Image, { src: `data:image/png;base64,${data}` });
+};
+const ProfileImage = ({ name, image }) => {
+    if (image) {
+        return (React.createElement(ImageContainer, null,
+            React.createElement(Image, { src: image })));
+    }
+    return (React.createElement(ImageContainer, null,
+        React.createElement(Identicon, { value: name })));
+};
+export default ProfileImage;

package/build/components/ProfileImage/ProfileImage.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 Generated: () => JSX.Element;
+declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
+export default _default;

package/build/components/ProfileImage/ProfileImage.stories.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ProfileImage } from '../..';
+export const Standard = () => (React.createElement(ProfileImage, { name: 'Hungry Bear', image: 'https://i.guim.co.uk/img/media/86c3481516dce247943ac2978b4f48d16a3ac265/0_170_5120_3074/master/5120.jpg?width=1200&height=1200&quality=85&auto=format&fit=crop&s=637dc5731d52754675ef36344a6af3c8' }));
+export const Generated = () => React.createElement(ProfileImage, { name: 'Hungry Bear' });
+export default {
+    title: 'Components/ProfileImage',
+    component: ProfileImage,
+};

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface QrCodeProps {
+    value: string;
+}
+declare const QrCode: ({ value }: QrCodeProps) => JSX.Element;
+export default QrCode;

package/build/components/QrCode/QrCode.component.js

@@ -0,0 +1,71 @@
+import React, { useEffect, useRef, useState } from 'react';
+import QRCode from 'qrcode';
+import styled from 'styled-components';
+import Text from '../Text/Text.component';
+const StyledCanvas = styled.canvas `
+  cursor: pointer;
+`;
+const Container = styled.div `
+  position: relative;
+  height: 132px;
+  width: 132px;
+`;
+const ToastContainer = styled.div `
+  position: absolute;
+  bottom: -12px;
+
+  width: 100%;
+
+  display: flex;
+  justify-content: center;
+
+  pointer-events: none;
+  touch-action: none;
+`;
+const Toast = styled.div `
+  background-color: ${(props) => props.theme.colours.secondary.main};
+  padding: 2px 8px;
+  border-radius: 4px;
+`;
+const StyledText = styled(Text) `
+  color: ${(props) => props.theme.colours.secondary.contrastText};
+`;
+const CopyInput = styled.input `
+  opacity: 0;
+  position: absolute;
+  left: -9999px;
+  top: -9999px;
+`;
+const QrCode = ({ value }) => {
+    const ref = useRef(null);
+    const inputRef = useRef(null);
+    const hintTimeoutRef = useRef();
+    const [copiedHint, setCopiedHint] = useState(false);
+    const showHint = async () => {
+        if (hintTimeoutRef.current) {
+            window.clearTimeout(hintTimeoutRef.current);
+        }
+        if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) {
+            inputRef.current.select();
+            document.execCommand('copy');
+        }
+        setCopiedHint(true);
+        hintTimeoutRef.current = setTimeout(() => {
+            setCopiedHint(false);
+        }, 2000);
+    };
+    useEffect(() => {
+        if (ref.current) {
+            QRCode.toCanvas(ref.current, value, {
+                width: 132,
+            });
+        }
+    }, [value]);
+    return (React.createElement(Container, { onClick: () => showHint() },
+        copiedHint && (React.createElement(ToastContainer, null,
+            React.createElement(Toast, null,
+                React.createElement(StyledText, null, "Copied!")))),
+        React.createElement(CopyInput, { readOnly: true, ref: inputRef, value: value }),
+        React.createElement(StyledCanvas, { ref: ref })));
+};
+export default QrCode;

package/build/components/QrCode/QrCode.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/components/QrCode/QrCode.stories.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { QrCode } from '../..';
+export const Standard = () => (React.createElement(React.Fragment, null,
+    React.createElement(QrCode, { value: 'http://www.google.com' })));
+export default {
+    title: 'Components/QrCode',
+    component: QrCode,
+};

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare type SpacerSize = '0.5x' | '1x' | '2x' | '4x' | '6x';
+export interface SpacerProps {
+    size: SpacerSize;
+}
+declare const Spacer: ({ size }: SpacerProps) => JSX.Element;
+export default Spacer;

package/build/components/Spacer/Spacer.component.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import styled from 'styled-components';
+const getSpacing = (size) => {
+    switch (size) {
+        case '0.5x':
+            return '4px';
+        case '1x':
+            return '8px';
+        case '2x':
+            return '16px';
+        case '4x':
+            return '32px';
+        case '6x':
+            return '48px';
+        default:
+            return 0;
+    }
+};
+const SpacerInternal = styled.div `
+  width: 0;
+  visibility: hidden;
+  height: ${(props) => getSpacing(props.size)};
+`;
+const Spacer = ({ size }) => React.createElement(SpacerInternal, { size: size });
+export default Spacer;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ColourVariant } from '../../theme/theme.types';
+export interface SquareButtonProps {
+    children: React.ReactChild;
+    variant?: ColourVariant;
+    onClick?: () => void;
+}
+declare const SquareButton: ({ children, variant, onClick }: SquareButtonProps) => JSX.Element;
+export default SquareButton;

package/build/components/SquareButton/SquareButton.component.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import styled from 'styled-components';
+import getThemeVariantColours from '../../theme/helpers/getThemeVariantColours';
+const StyledButton = styled.button `
+  height: 128px;
+  width: 128px;
+
+  outline: none;
+  box-shadow: none;
+  border: none;
+
+  cursor: pointer;
+
+  padding: 0 24px;
+
+  font-size: ${(props) => props.theme.fonts.default.size};
+  font: ${(props) => props.theme.fonts.default.family};
+
+  color: ${(props) => getThemeVariantColours(props.variant, props.theme).contrastText};
+  background-color: ${(props) => getThemeVariantColours(props.variant, props.theme).main};
+
+  border-radius: 2px;
+
+  &:hover {
+    background-color: ${(props) => getThemeVariantColours(props.variant, props.theme).hover};
+  }
+`;
+const SquareButton = ({ children, variant = 'primary', onClick }) => {
+    return (React.createElement(StyledButton, { variant: variant, onClick: onClick }, children));
+};
+export default SquareButton;

package/build/components/SquareButton/SquareButton.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/components/SquareButton/SquareButton.stories.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { SquareButton } from '../..';
+export const Standard = () => (React.createElement(React.Fragment, null,
+    React.createElement(SquareButton, null, "Primary"),
+    React.createElement("br", null),
+    React.createElement("br", null),
+    React.createElement(SquareButton, { variant: 'secondary' }, "A Secondary Button"),
+    React.createElement("br", null),
+    React.createElement("br", null),
+    React.createElement(SquareButton, { variant: 'tertiary' }, "A Tertiary Square Button")));
+export default {
+    title: 'Components/SquareButton',
+    component: SquareButton,
+};

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

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

package/build/components/SubHeading/SubHeading.component.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+const SubHeading = styled.h2 `
+  font-family: ${(props) => props.theme.fonts.subHeading.family};
+  font-size: ${(props) => props.theme.fonts.subHeading.size};
+  font-weight: ${(props) => props.theme.fonts.subHeading.weight};
+
+  color: ${(props) => props.theme.colours.defaultFont};
+
+  margin: 0;
+`;
+export default SubHeading;

package/build/components/SubHeading/SubHeading.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/components/SubHeading/SubHeading.stories.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { SubHeading } from '../..';
+export const Standard = () => React.createElement(SubHeading, null, "A Standard Subheading");
+export default {
+    title: 'Components/SubHeading',
+    component: SubHeading,
+};

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { TableVariant } from './_Table.context';
+export declare type TableCellVariant = 'tight';
+export interface TableProps {
+    children: React.ReactNode;
+    variant?: TableVariant;
+}
+export interface TableCellProps {
+    variant?: TableCellVariant;
+}
+declare const Table: {
+    ({ children, variant }: TableProps): JSX.Element;
+    Row: ({ children }: import("./_TableRow.component").TableRowProps) => JSX.Element;
+    Cell: import("styled-components").StyledComponent<"td", import("styled-components").DefaultTheme, TableCellProps, never>;
+};
+export default Table;

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+import TableContext from './_Table.context';
+import TableRow from './_TableRow.component';
+const StyledTable = styled.table `
+  width: 100%;
+`;
+const TableCell = styled.td `
+  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};
+
+  padding: ${(props) => (props.variant === 'tight' ? '0' : '0 16px')};
+  height: 36px;
+`;
+const Table = ({ children, variant = 'regular' }) => {
+    return (React.createElement(TableContext.Provider, { value: { variant } },
+        React.createElement(StyledTable, null, children)));
+};
+Table.Row = TableRow;
+Table.Cell = TableCell;
+export default Table;