@dtdot/lego 0.14.0

package/build/components/Form/Form.stories.js

@@ -0,0 +1,21 @@
+import React, { useState } from 'react';
+import { Button, ControlGroup, Form, Input } from '../..';
+/* eslint-disable @typescript-eslint/no-empty-function */
+export const Standard = () => {
+    const [value, setValue] = useState({ name: 'Frightened Kangaroo', colour: 'Red' });
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Form, { value: value, onChange: setValue },
+            React.createElement(ControlGroup, { variation: 'submission' },
+                React.createElement(Input, { name: 'name', placeholder: 'name' }),
+                React.createElement(Input, { name: 'colour', placeholder: 'colour' }),
+                React.createElement(ControlGroup.Spacer, null),
+                React.createElement(Button, null, "Next"))),
+        React.createElement("br", null),
+        React.createElement("br", null),
+        React.createElement("br", null),
+        React.createElement("div", null, JSON.stringify(value))));
+};
+export default {
+    title: 'Components/Form',
+    component: Form,
+};

package/build/components/Form/FormState.context.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface FormStateContextProps {
+    value: Record<string, any>;
+    onChange?: (key: string, value: any) => void;
+}
+declare const FormStateContext: import("react").Context<FormStateContextProps>;
+export default FormStateContext;

package/build/components/Form/FormState.context.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+const FormStateContext = createContext({
+    value: {},
+    onChange: undefined,
+});
+export default FormStateContext;

package/build/components/Form/useFormNode.hook.d.ts

@@ -0,0 +1,5 @@
+declare function useFormNode(key: string): {
+    value: any;
+    onChange: (_value: any) => void;
+};
+export default useFormNode;

package/build/components/Form/useFormNode.hook.js

@@ -0,0 +1,16 @@
+import { useContext } from 'react';
+import FormStateContext from './FormState.context';
+function useFormNode(key) {
+    const { value, onChange } = useContext(FormStateContext);
+    const internalOnChange = (_value) => {
+        if (onChange) {
+            onChange(key, _value);
+        }
+    };
+    const internalValue = value[key];
+    return {
+        value: internalValue,
+        onChange: internalOnChange,
+    };
+}
+export default useFormNode;

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

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

package/build/components/Heading/Heading.component.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import styled from 'styled-components';
+const HeadingContainer = styled.h2 `
+  font-family: ${(props) => props.theme.fonts.heading.family};
+  font-size: ${(props) => props.theme.fonts.heading.size};
+  font-weight: ${(props) => props.theme.fonts.heading.weight};
+
+  color: ${(props) => props.theme.colours.defaultFont};
+
+  margin: 0;
+`;
+const Heading = ({ children }) => React.createElement(HeadingContainer, null, children);
+export default Heading;

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

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

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare type ImageUploadMode = 'fill' | 'form';
+interface ImageUploadProps {
+    name: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    onSearch?: () => void;
+    uploadFn?: (file: File) => Promise<string>;
+}
+declare const ImageUpload: ({ name, value, onChange, onSearch }: ImageUploadProps) => JSX.Element;
+export default ImageUpload;

package/build/components/ImageUpload/ImageUpload.component.js

@@ -0,0 +1,92 @@
+import React, { useContext, useRef } from 'react';
+import { faCloudUploadAlt, faSearch } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import styled from 'styled-components';
+import { motion } from 'framer-motion';
+import FileContext from '../../contexts/File.context';
+import useFormNode from '../Form/useFormNode.hook';
+const UploadContainer = styled.div `
+  position: relative;
+  min-height: 144px;
+  background-color: ${(props) => props.theme.colours.uploadBackground};
+
+  height: 100%;
+  width: 100%;
+
+  font-size: 48px;
+  color: ${(props) => props.theme.colours.uploadIcon};
+`;
+const UploadInnerContainer = styled.div `
+  height: 100%;
+  min-height: 144px;
+  width: 100%;
+  display: flex;
+  justify-content: space-evenly;
+`;
+const IconContainer = styled(motion.div) `
+  flex-grow: 1;
+  margin: 8px;
+
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  cursor: pointer;
+`;
+const UploadVerticalDivider = styled.div `
+  margin: 8px 0;
+  width: 2px;
+  height: calc(100% - 16px);
+  min-height: calc(144px - 16px);
+  top: 10%;
+  background-color: ${(props) => props.theme.colours.uploadIcon};
+`;
+const HiddenInput = styled.input `
+  width: 0;
+  height: 0;
+  visibility: none;
+
+  position: fixed;
+  left: -99999;
+  top: -99999;
+`;
+const Image = styled.img `
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+`;
+const ImageUpload = ({ name, value, onChange, onSearch }) => {
+    const { upload, getUrl } = useContext(FileContext);
+    const { value: contextValue, onChange: contextOnChange } = useFormNode(name);
+    const inputRef = useRef();
+    const handleUploadClicked = () => {
+        if (inputRef && inputRef.current) {
+            inputRef.current.click();
+        }
+    };
+    const handleUpload = async (event) => {
+        if (event.target.files && upload) {
+            const file = event.target.files[0];
+            const url = await upload(file);
+            if (onChange) {
+                onChange(url);
+            }
+            if (contextOnChange) {
+                contextOnChange({ target: { value: url } });
+            }
+        }
+    };
+    const internalValue = value ? value : contextValue;
+    if (!internalValue) {
+        return (React.createElement(UploadContainer, null,
+            React.createElement(UploadInnerContainer, null,
+                React.createElement(IconContainer, { whileHover: { scale: 1.05 }, onClick: handleUploadClicked },
+                    React.createElement(FontAwesomeIcon, { icon: faCloudUploadAlt })),
+                onSearch && (React.createElement(React.Fragment, null,
+                    React.createElement(UploadVerticalDivider, null),
+                    React.createElement(IconContainer, { whileHover: { scale: 1.05 }, onClick: onSearch },
+                        React.createElement(FontAwesomeIcon, { icon: faSearch }))))),
+            React.createElement(HiddenInput, { value: '', ref: inputRef, type: 'file', onChange: handleUpload })));
+    }
+    return React.createElement(Image, { src: getUrl(internalValue) });
+};
+export default ImageUpload;

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

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

package/build/components/ImageUpload/ImageUpload.stories.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Button, Card, CardGroup, ControlGroup, FocusLayout, Heading, ImageUpload, LiveInput, Spacer, Text, } from '../..';
+import colours from '../../colours/colours';
+import FileContext from '../../contexts/File.context';
+const CentreContainer = styled.div `
+  display: flex;
+  width: 100%;
+  justify-content: center;
+`;
+const InnerContainer = styled.div `
+  width: 200px;
+  height: 200px;
+`;
+export const FillMode = () => (React.createElement(React.Fragment, null,
+    React.createElement("div", { style: { width: '600px', height: '300px', padding: '30px', backgroundColor: colours.grey20 } },
+        React.createElement(ImageUpload, { name: 'profile' }))));
+export const WithAnImage = () => (React.createElement(React.Fragment, null,
+    React.createElement("div", { style: { width: '600px', height: '300px', padding: '30px', backgroundColor: colours.grey20 } },
+        React.createElement(FileContext.Provider, { value: { upload: async () => 'done', getUrl: (url) => url } },
+            React.createElement(ImageUpload, { name: 'profile', value: 'https://www.jotform.com/blog/wp-content/uploads/2012/07/mario-luigi-yoschi-figures-163036.jpeg' })))));
+export const InALayout = () => (React.createElement(FocusLayout, null,
+    React.createElement(Heading, null, "Lets get setup.."),
+    React.createElement(Spacer, { size: '4x' }),
+    React.createElement(ControlGroup, { variation: 'submission' },
+        React.createElement(Text, null, "Lets upload your profile image. This will be the first thing that people see when connecting with you."),
+        React.createElement(ControlGroup.Spacer, null),
+        React.createElement(CentreContainer, null,
+            React.createElement(InnerContainer, null,
+                React.createElement(ImageUpload, { name: 'profile' }))),
+        React.createElement(ControlGroup.Spacer, null),
+        React.createElement(Button, null, "Next"))));
+export const InACard = () => (React.createElement(CardGroup, null,
+    React.createElement(Card, { size: 'sm' },
+        React.createElement(Card.Media, null,
+            React.createElement(ImageUpload, { name: 'profile' })),
+        React.createElement(Card.Content, null,
+            React.createElement(LiveInput, { name: 'name', placeholder: 'Name' }))),
+    React.createElement(Card, { size: 'sm' },
+        React.createElement(Card.Media, null,
+            React.createElement(ImageUpload, { name: 'profile', onSearch: () => {
+                    console.log('search');
+                } })),
+        React.createElement(Card.Content, null,
+            React.createElement(LiveInput, { name: 'name', placeholder: 'Name' })))));
+export default {
+    title: 'Components/ImageUpload',
+    component: ImageUpload,
+};

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

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface InlineCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+declare const InlineCard: {
+    ({ children, onClick }: InlineCardProps): JSX.Element;
+    Media: ({ children }: import("./_InlineCardMedia.component").InlineCardMediaProps) => JSX.Element;
+    Content: ({ children }: import("./_InlineCardContent.component").InlineCardContentProps) => JSX.Element;
+};
+export default InlineCard;

package/build/components/InlineCard/InlineCard.component.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import styled from 'styled-components';
+import InlineCardContent from './_InlineCardContent.component';
+import InlineCardMedia from './_InlineCardMedia.component';
+const CardOuter = styled.div `
+  height: 64px;
+  width: 100%;
+  display: flex;
+
+  cursor: ${(props) => (props.usePointer ? 'pointer' : '')};
+
+  background-color: ${(props) => props.theme.colours.cardBackground};
+  box-shadow: ${(props) => props.theme.shadows.small};
+`;
+const InlineCard = ({ children, onClick }) => {
+    return (React.createElement(CardOuter, { usePointer: !!onClick, onClick: onClick }, children));
+};
+InlineCard.Media = InlineCardMedia;
+InlineCard.Content = InlineCardContent;
+export default InlineCard;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { InlineCard, InlineCardGroup } from '../..';
+export const Standard = () => (React.createElement(InlineCardGroup, null,
+    React.createElement(InlineCard, null,
+        React.createElement(InlineCard.Content, null, "Some content")),
+    React.createElement(InlineCard, null,
+        React.createElement(InlineCard.Media, null,
+            React.createElement("img", { src: 'https://www.jotform.com/blog/wp-content/uploads/2012/07/mario-luigi-yoschi-figures-163036.jpeg' })),
+        React.createElement(InlineCard.Content, null, "Some more content")),
+    React.createElement(InlineCard, { onClick: () => {
+            console.log('Clicked');
+        } },
+        React.createElement(InlineCard.Content, null, "Clickable card"))));
+export default {
+    title: 'Components/InlineCard',
+    component: InlineCard,
+};

package/build/components/InlineCard/InlineCardGroup.component.d.ts

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

package/build/components/InlineCard/InlineCardGroup.component.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import styled from 'styled-components';
+const InlineGroup = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  & > * {
+    margin-bottom: 8px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+`;
+const InlineCardGroup = ({ children }) => React.createElement(InlineGroup, null, children);
+export default InlineCardGroup;

package/build/components/InlineCard/_InlineCardContent.component.d.ts

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

package/build/components/InlineCard/_InlineCardContent.component.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import styled from 'styled-components';
+const ContentContainer = styled.div `
+  height: 100%;
+  padding: 8px;
+
+  font-family: ${(props) => props.theme.fonts.default.family};
+  font-weight: ${(props) => props.theme.fonts.default.weight};
+  font-size: ${(props) => props.theme.fonts.default.size};
+  color: ${(props) => props.theme.colours.defaultFont};
+`;
+const InlineCardContent = ({ children }) => {
+    return React.createElement(ContentContainer, null, children);
+};
+export default InlineCardContent;

package/build/components/InlineCard/_InlineCardMedia.component.d.ts

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

package/build/components/InlineCard/_InlineCardMedia.component.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import styled from 'styled-components';
+const MediaContainer = styled.div `
+  width: 128px;
+  min-width: 128px;
+  height: 64px;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+`;
+const InlineCardMedia = ({ children }) => {
+    return React.createElement(MediaContainer, null, children);
+};
+export default InlineCardMedia;

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export interface IInputProps {
+    name: string;
+    label?: string;
+    placeholder?: string;
+    type?: string;
+    value?: string;
+    onChange?: (value: any) => void;
+}
+declare const Input: ({ label, name, placeholder, type, value, onChange }: IInputProps) => JSX.Element;
+export default Input;

package/build/components/Input/Input.component.js

@@ -0,0 +1,57 @@
+// eslint-disable-next-line @typescript-eslint/no-use-before-define
+import React from 'react';
+import styled from 'styled-components';
+import getThemeControlColours from '../../theme/helpers/getThemeControlColours';
+import useFormNode from '../Form/useFormNode.hook';
+const InputLabel = styled.label `
+  display: block;
+  padding-bottom: 8px;
+
+  color: ${(props) => getThemeControlColours(props.theme).font};
+  font-family: ${(props) => props.theme.fonts.default.family};
+  font-size: ${(props) => props.theme.fonts.default.size};
+`;
+const StyledInput = styled.input `
+  outline: none;
+  box-shadow: none;
+
+  width: 100%;
+  height: 48px;
+  padding: 0 12px;
+
+  font-family: ${(props) => props.theme.fonts.default.family};
+  font-size: ${(props) => props.theme.fonts.default.size};
+
+  color: ${(props) => getThemeControlColours(props.theme).font};
+  background-color: ${(props) => getThemeControlColours(props.theme).background};
+
+  border: 1px solid ${(props) => getThemeControlColours(props.theme).border};
+  border-radius: 2px;
+
+  &:hover {
+    border: 1px solid ${(props) => getThemeControlColours(props.theme).borderHover};
+  }
+
+  &:focus {
+    border: 1px solid ${(props) => getThemeControlColours(props.theme).borderFocus};
+  }
+
+  &::placeholder {
+    color: ${(props) => getThemeControlColours(props.theme).placeholder};
+  }
+`;
+const Input = ({ label, name, placeholder, type = 'text', value, onChange }) => {
+    const { value: contextValue, onChange: contextOnChange } = useFormNode(name);
+    const handleChange = (e) => {
+        if (onChange) {
+            onChange(e.target.value);
+        }
+        if (contextOnChange) {
+            contextOnChange(e.target.value);
+        }
+    };
+    return (React.createElement("div", null,
+        label && React.createElement(InputLabel, { htmlFor: name }, label),
+        React.createElement(StyledInput, { type: type, name: name, placeholder: placeholder, value: value || contextValue, onChange: handleChange })));
+};
+export default Input;

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

package/build/components/Input/Input.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Input, ControlGroup } from '../..';
+export const Standard = () => (React.createElement(ControlGroup, null,
+    React.createElement(Input, { name: 'one', label: 'A standard input' }),
+    React.createElement(Input, { name: 'two', label: 'Another input' })));
+export const WithoutLabels = () => (React.createElement(ControlGroup, null,
+    React.createElement(Input, { name: 'one', placeholder: 'A standard input' }),
+    React.createElement(Input, { name: 'two', placeholder: 'Another input' })));
+export default {
+    title: 'Components/Input',
+    component: Input,
+};

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

@@ -0,0 +1,10 @@
+import React from 'react';
+interface LiveInputProps {
+    name: string;
+    placeholder: string;
+    type?: string;
+    value?: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+declare const LiveInput: ({ name, type, placeholder, value, onChange }: LiveInputProps) => JSX.Element;
+export default LiveInput;

package/build/components/LiveInput/LiveInput.component.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import styled from 'styled-components';
+import useFormNode from '../Form/useFormNode.hook';
+const StyledInput = styled.input `
+  height: 18px;
+  font-size: 18px;
+  background-color: transparent;
+
+  border: none;
+  outline: none;
+  color: ${(props) => props.theme.colours.defaultFont};
+
+  &::placeholder {
+    color: ${(props) => props.theme.colours.controlPlaceholder};
+  }
+`;
+const LiveInput = ({ name, type = 'text', placeholder, value, onChange }) => {
+    const { value: contextValue, onChange: contextOnChange } = useFormNode(name);
+    return (React.createElement("div", null,
+        React.createElement(StyledInput, { name: name, type: type, value: value || contextValue, placeholder: placeholder, onChange: onChange || contextOnChange })));
+};
+export default LiveInput;

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

package/build/components/LiveInput/LiveInput.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { LiveInput, ControlGroup } from '../..';
+export const Standard = () => (React.createElement(ControlGroup, null,
+    React.createElement(LiveInput, { name: 'one', placeholder: 'Some text..' }),
+    React.createElement(LiveInput, { name: 'two', placeholder: 'Some text..' })));
+export const WithoutLabels = () => (React.createElement(ControlGroup, null,
+    React.createElement(LiveInput, { name: 'one', placeholder: 'A standard input' }),
+    React.createElement(LiveInput, { name: 'two', placeholder: 'Another input' })));
+export default {
+    title: 'Components/LiveInput',
+    component: LiveInput,
+};

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const Loader: () => JSX.Element;
+export default Loader;

package/build/components/Loader/Loader.component.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import colours from '../../colours/colours';
+const loadingContainer = {
+    width: '40px',
+    height: '26px',
+    display: 'flex',
+    justifyContent: 'space-around',
+};
+const loadingCircle = {
+    display: 'block',
+    width: '10px',
+    height: '10px',
+    backgroundColor: colours.grey30,
+    borderRadius: '5px',
+};
+const loadingContainerVariants = {
+    start: {
+        transition: {
+            staggerChildren: 0.2,
+        },
+    },
+    end: {
+        transition: {
+            staggerChildren: 0.2,
+        },
+    },
+};
+const loadingCircleVariants = {
+    start: {
+        y: '0%',
+    },
+    end: {
+        y: '150%',
+    },
+};
+const loadingCircleTransition = {
+    duration: 0.5,
+    yoyo: Infinity,
+    ease: 'easeInOut',
+};
+const Loader = () => {
+    return (React.createElement(motion.div, { style: loadingContainer, variants: loadingContainerVariants, initial: 'start', animate: 'end' },
+        React.createElement(motion.span, { style: loadingCircle, variants: loadingCircleVariants, transition: loadingCircleTransition }),
+        React.createElement(motion.span, { style: loadingCircle, variants: loadingCircleVariants, transition: loadingCircleTransition }),
+        React.createElement(motion.span, { style: loadingCircle, variants: loadingCircleVariants, transition: loadingCircleTransition })));
+};
+export default Loader;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Loader } from '../..';
+export const Standard = () => {
+    return React.createElement(Loader, null);
+};
+export default {
+    title: 'Components/Loader',
+    component: Loader,
+};

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

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface MenuProps {
+    children: React.ReactNode;
+}
+declare const Menu: {
+    ({ children }: MenuProps): JSX.Element;
+    Page: ({ children }: import("./_MenuPage.component").MenuPageProps) => JSX.Element;
+    Heading: ({ children }: import("./_MenuHeading.component").MenuHeadingProps) => JSX.Element;
+    Item: ({ children, icon, active, onClick }: import("./_MenuItem.component").MenuItemProps) => JSX.Element;
+    Content: ({ panelSize, independentScroll, children }: import("./_MenuContent.component").MenuContentProps) => JSX.Element;
+    Panel: ({ children }: import("./_MenuPanel.component").MenuPanelProps) => JSX.Element;
+};
+export default Menu;