From 29db5e426cb068704694d53505f17da22e0d8f8f Mon Sep 17 00:00:00 2001
From: Linda_pp <rhysd@users.noreply.github.com>
Date: Wed, 13 Apr 2016 00:03:52 +0900
Subject: [PATCH] Add rebass (#8925)

* Add type definitions for 'rebass' module

https://github.com/jxnblk/rebass

* Add tests for rebass.d.ts
---
 rebass/rebass-tests.tsx | 625 ++++++++++++++++++++++++++++++++++++++++
 rebass/rebass.d.ts      | 497 ++++++++++++++++++++++++++++++++
 2 files changed, 1122 insertions(+)
 create mode 100644 rebass/rebass-tests.tsx
 create mode 100644 rebass/rebass.d.ts

diff --git a/rebass/rebass-tests.tsx b/rebass/rebass-tests.tsx
new file mode 100644
index 000000000..e933d3c43
--- /dev/null
+++ b/rebass/rebass-tests.tsx
@@ -0,0 +1,625 @@
+///<reference path='rebass.d.ts' />
+
+import * as React from "react";
+import {
+    Arrow
+  , Avatar
+  , Badge
+  , Banner
+  , Block
+  , Blockquote
+  , Breadcrumbs
+  , Button
+  , ButtonCircle
+  , ButtonOutline
+  , Card
+  , CardImage
+  , Checkbox
+  , Close
+  , Container
+  , Divider
+  , Donut
+  , DotIndicator
+  , Drawer
+  , Dropdown
+  , DropdownMenu
+  , Embed
+  , Fixed
+  , Footer
+  , Heading
+  , HeadingLink
+  , InlineForm
+  , Input
+  , Label
+  , LinkBlock
+  , Media
+  , Menu
+  , Message
+  , NavItem
+  , Overlay
+  , PageHeader
+  , Panel
+  , PanelFooter
+  , PanelHeader
+  , Pre
+  , Progress
+  , Radio
+  , Rating
+  , Section
+  , SectionHeader
+  , Select
+  , SequenceMap
+  , SequenceMapStep
+  , Slider
+  , Space
+  , Stat
+  , Switch
+  , Table
+  , Text
+  , Textarea
+  , Toolbar
+  , Tooltip
+} from "rebass";
+
+interface IconProps extends React.Props<Icon> {
+  fill: string;
+  height: string;
+  name: string;
+  width: string;
+}
+
+class Icon extends React.Component<IconProps, {}> {
+  render() {
+    return <div></div>;
+  }
+}
+
+class RebassTest extends React.Component<{}, {}> {
+  render() {
+    return <div>
+      <Button
+        backgroundColor="primary"
+        color="white"
+        inverted={true}
+        rounded={true}
+      >
+        Arrow
+        <Arrow direction="down" />
+      </Button>
+
+      <Avatar
+        circle={true}
+        size={48}
+        src="http://lorempixel.com/64/64/cats"
+      />
+
+      <div>
+        <Heading level={4}>
+          Rebass
+        </Heading>
+        <Space x={1} />
+        <Badge
+          rounded={true}
+          theme="info"
+        >
+          0.2.0
+        </Badge>
+        <Space x={2} />
+        <Heading level={4}>
+          Pill
+        </Heading>
+        <Space x={1} />
+        <Badge
+          pill={true}
+          rounded={true}
+          theme="info"
+        >
+          Pill
+        </Badge>
+        <Space x={2} />
+        <Heading level={4}>
+          Circular
+        </Heading>
+        <Space x={1} />
+        <Badge
+          circle={true}
+          rounded={true}
+          theme="error"
+        >
+          4
+        </Badge>
+      </div>
+
+      <Banner
+        align="center"
+        backgroundImage="https://d262ilb51hltx0.cloudfront.net/max/2000/1*DZwdGMaeu-rvTroJYui6Uw.jpeg"
+      >
+        <Heading
+          level={2}
+          size={0}
+        >
+          Rebass
+        </Heading>
+      </Banner>
+
+      <Block
+        borderLeft={true}
+        color="blue"
+        px={2}
+      >
+        <Media img="http://placehold.it/128/08e/fff">
+          <Heading
+            level={2}
+            size={0}
+          >
+            Block
+          </Heading>
+          <Text>
+            Generic box for containing things
+          </Text>
+        </Media>
+      </Block>
+
+      <Blockquote
+        href="http://webtypography.net/3.1.1"
+        source="Robert Bringhurst"
+      >
+        In the sixteenth century, a series of common sizes developed among European typographers, and the series survived with little change and few additions for 400 years. […] Use the old familiar scale, or use new scales of your own devising, but limit yourself, at first, to a modest set of distinct and related intervals.
+      </Blockquote>
+
+      <Breadcrumbs links={[{children: 'Jxnblk', href: '#!'}, {children: 'Rebass', href: '#!'}, {children: 'Breadcrumbs', href: '#!'}]} />
+
+      <div>
+        <Button
+          backgroundColor="primary"
+          color="white"
+          inverted={true}
+          rounded={true}
+        >
+          Button
+        </Button>
+      </div>
+
+      <div>
+        <ButtonCircle title="Like">
+          <Icon
+            fill="currentColor"
+            height="1em"
+            name="heart"
+            width="1em"
+          />
+        </ButtonCircle>
+        <ButtonCircle title="Comment">
+          <Icon
+            fill="currentColor"
+            height="1em"
+            name="chat"
+            width="1em"
+          />
+        </ButtonCircle>
+        <ButtonCircle title="Repost">
+          <Icon
+            fill="currentColor"
+            height="1em"
+            name="repost"
+            width="1em"
+          />
+        </ButtonCircle>
+        <ButtonCircle title="Bookmark">
+          <Icon
+            fill="currentColor"
+            height="1em"
+            name="bookmark"
+            width="1em"
+          />
+        </ButtonCircle>
+        <ButtonCircle title="Tag">
+          <Icon
+            fill="currentColor"
+            height="1em"
+            name="tag"
+            width="1em"
+          />
+        </ButtonCircle>
+        <Text small={true}>
+          Example Icon component from react-geomicons
+        </Text>
+      </div>
+
+      <div>
+        <ButtonOutline
+          color="primary"
+          inverted={false}
+          rounded="left"
+        >
+          Button
+        </ButtonOutline>
+        <ButtonOutline
+          color="primary"
+          inverted={false}
+          rounded={false}
+          style={{marginLeft: -1}}
+        >
+          Group
+        </ButtonOutline>
+        <Button
+          backgroundColor="primary"
+          color="white"
+          inverted={true}
+          rounded="right"
+          style={{marginLeft: -1}}
+        >
+          Button
+        </Button>
+      </div>
+
+      <Card
+        rounded={true}
+        width={256}
+      >
+        <CardImage src="http://placehold.it/320/08e/fff" />
+        <Heading
+          level={2}
+          size={3}
+        >
+          Card
+        </Heading>
+        <Text>
+          Cats like cards too
+        </Text>
+      </Card>
+
+      <div style={{maxWidth: 192}}>
+        <CardImage src="http://placehold.it/320/08e/fff" />
+      </div>
+
+      <div>
+        <Checkbox
+          label="Checkbox"
+          name="checkbox_1"
+        />
+        <Checkbox
+          checked={true}
+          label="Checkbox"
+          name="checkbox_1"
+          readOnly={true}
+          theme="success"
+        />
+      </div>
+
+      <Close />
+
+      <Container>
+        Container
+      </Container>
+
+      <div>
+        <Divider />
+        <Divider
+          ml={0}
+          width={128}
+        />
+      </div>
+
+      <div>
+        <Donut
+          color="primary"
+          size={256}
+          strokeWidth={32}
+          value={0.5625}
+        />
+        <Donut
+          color="primary"
+          size={128}
+          strokeWidth={8}
+          value={0.5625}
+        >
+          9/16
+        </Donut>
+        <Donut
+          color="primary"
+          size={128}
+          strokeWidth={8}
+          value={0.625}
+        />
+        <Donut
+          color="primary"
+          size={128}
+          strokeWidth={8}
+          value={0.125}
+        />
+      </div>
+
+      <div>
+        <DotIndicator
+          active={0}
+          length={3}
+          onClick={function noRefCheck() {}}
+        />
+      </div>
+
+      <Dropdown>
+        <Button
+          backgroundColor="primary"
+          color="white"
+          inverted={true}
+          rounded={true}
+        >
+          Dropdown
+          <Arrow direction="down" />
+        </Button>
+        <DropdownMenu
+          onDismiss={function noRefCheck() {}}
+          open={false}
+        >
+          <NavItem is="a">
+            Hello
+          </NavItem>
+          <NavItem is="a">
+            Hi
+          </NavItem>
+        </DropdownMenu>
+      </Dropdown>
+
+      <Embed ratio={0.5625}>
+        <iframe
+          allowFullScreen={true}
+          src="https://www.youtube.com/embed/KO_3Qgib6RQ"
+        />
+      </Embed>
+
+      <Footer>
+        Footer™ ©2016 Jxnblk
+      </Footer>
+
+      <InlineForm
+        buttonLabel="Go"
+        label="InlineForm"
+        name="inline_form"
+        onChange={function noRefCheck() {}}
+        onClick={function noRefCheck() {}}
+      />
+
+      <Input
+        label="Input"
+        name="input_example"
+        placeholder="Placeholder"
+        rounded={true}
+        type="text"
+      />
+
+      <Label>
+        Label for form elements
+      </Label>
+
+      <LinkBlock
+        href="#LinkBlock"
+        is="a"
+      >
+        <Media
+          align="center"
+          img="http://placehold.it/96/08e/fff"
+        >
+          <Heading level={3}>
+            LinkBlock
+          </Heading>
+        </Media>
+      </LinkBlock>
+
+      <Media
+        align="center"
+        img="http://placehold.it/128/08e/fff"
+      >
+        <Heading level={3}>
+          Media Object
+        </Heading>
+        <Text>
+          With alignment options
+        </Text>
+      </Media>
+
+      <Menu rounded={true}>
+        <NavItem is="a">
+          Menu
+        </NavItem>
+        <NavItem is="a">
+          NavItem
+        </NavItem>
+        <NavItem is="a">
+          NavItem
+        </NavItem>
+      </Menu>
+
+      <Message
+        inverted={true}
+        rounded={true}
+        theme="success"
+      >
+        Hello Message!
+        <Space
+          auto={true}
+          x={1}
+        />
+        <Close />
+      </Message>
+
+      <PageHeader
+        description="Description about the page"
+        heading="Page Header"
+      />
+
+      <Panel theme="info">
+        <PanelHeader
+          inverted={true}
+          theme="default"
+        >
+          Panel
+        </PanelHeader>
+        <Text>
+          Panels are great for visually separating UI, content, or data from the rest of the page.
+        </Text>
+        <PanelFooter theme="default">
+          The footer is a good place for less important information
+        </PanelFooter>
+      </Panel>
+
+      <Pre>
+        this is text
+        this is text
+        this is text
+      </Pre>
+
+      <Progress
+        color="primary"
+        value={0.25}
+      />
+
+      <div>
+        <Radio
+          checked={true}
+          circle={true}
+          group="radios"
+          label="Radio"
+          name="radio_1"
+          readOnly={true}
+        />
+        <Radio
+          circle={true}
+          group="radios"
+          label="Radio"
+          name="radio_2"
+        />
+      </div>
+
+      <Rating
+        color="orange"
+        value={3.5}
+      />
+
+      <Section>
+        Section
+      </Section>
+
+      <Section>
+        <SectionHeader
+          description="With linked header"
+          heading="Section Header"
+        />
+        Section
+      </Section>
+
+      <Select
+        label="Select"
+        name="select_example"
+        options={[{children: 'Two', value: 2}, {children: 'Four', value: 4}, {children: 'Eight', value: 8}, {children: 'Sixteen', value: 16}, {children: 'Thirty-Two', value: 32}, {children: 'Sixty-Four', value: 64}]}
+        rounded={true}
+      />
+
+      <SequenceMap
+        active={1}
+        steps={[{children: 'Sign In', href: '#!'}, {children: 'Shipping Address', href: '#!'}, {children: 'Payment Method', href: '#!'}, {children: 'Place Order', href: '#!'}]}
+      />
+
+      <div>
+        <Slider
+          defaultValue={37.5}
+          label="Slider"
+          name="slider_1"
+        />
+        <Slider
+          color="blue"
+          fill={true}
+          label="Slider with color and fill"
+          name="slider_2"
+          readOnly={true}
+          value={62.5}
+        />
+      </div>
+
+      <div>
+        <Button
+          backgroundColor="primary"
+          color="white"
+          inverted={true}
+          rounded={true}
+        >
+          Button
+        </Button>
+        <Space x={1} />
+        <Button
+          backgroundColor="primary"
+          color="white"
+          inverted={true}
+          rounded={true}
+        >
+          With
+        </Button>
+        <Space x={4} />
+        <Button
+          backgroundColor="primary"
+          color="white"
+          inverted={true}
+          rounded={true}
+        >
+          Space
+        </Button>
+      </div>
+
+      <div>
+        <Stat
+          label="Memory"
+          unit="GB"
+          value="512"
+        />
+        <Stat
+          label="PetaFLOPS"
+          value="32"
+        />
+        <Stat
+          label="Upload"
+          unit="Mbps"
+          value="512"
+        />
+        <Stat
+          label="Download"
+          unit="Mbps"
+          value="1,024"
+        />
+      </div>
+
+      <Switch checked={false}/>
+
+      <Table
+        data={[['Hamburger', 'Beef', 'Onion', 'Bun'], ['Pizza', 'Pork', 'Tomato', 'Crust'], ['Corndog', 'Pork', 'Corn', 'Cornbread'], ['Hot Dog', 'Pork', 'Peppers', 'Bun']]}
+        headings={['Name', 'Meat', 'Vegetable', 'Carb']}
+      />
+
+      <Toolbar>
+        <NavItem is="a">
+          Toolbar
+        </NavItem>
+        <NavItem is="a">
+          NavItem
+        </NavItem>
+        <Space
+          auto={true}
+          x={1}
+        />
+        <NavItem is="a">
+          NavItem
+        </NavItem>
+      </Toolbar>
+
+      <Tooltip
+        inverted={true}
+        rounded={true}
+        title="Hello!"
+      >
+        <Heading level={3}>
+          Tooltip
+        </Heading>
+      </Tooltip>
+    </div>;
+  }
+}
+
diff --git a/rebass/rebass.d.ts b/rebass/rebass.d.ts
new file mode 100644
index 000000000..e774b6f18
--- /dev/null
+++ b/rebass/rebass.d.ts
@@ -0,0 +1,497 @@
+// Type definitions for Rebass 0.2.5
+// Project: https://github.com/jxnblk/rebass
+// Definitions by: rhysd <https://rhysd.github.io>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+///<reference path='../react/react.d.ts' />
+
+declare module "rebass" {
+	export import React = __React;
+
+	export interface BaseProps<C> extends React.Props<C> {
+		tagName?: string;
+		className?: string;
+		baseStyle?: Object;
+		style?: Object;
+		m?: number;
+		mt?: number;
+		mr?: number;
+		mb?: number;
+		ml?: number;
+		mx?: number;
+		my?: number;
+		p?: number;
+		pt?: number;
+		pr?: number;
+		pb?: number;
+		pl?: number;
+		px?: number;
+		py?: number;
+		color?: string;
+		backgroundColor?: string;
+		inverted?: boolean;
+		rounded?: boolean | "top" | "right" | "bottom" | "left";
+		circle?: boolean;
+		pill?: boolean;
+	}
+
+	export interface ArrowProps extends BaseProps<ArrowClass> {
+		direction?: "up" | "down";
+	}
+	type ArrowClass = React.StatelessComponent<ArrowProps>
+	export const Arrow: ArrowClass;
+
+	export interface AvatarProps extends BaseProps<AvatarClass> {
+		size?: number;
+		src?: string;
+	}
+	type AvatarClass = React.StatelessComponent<AvatarProps>
+	export const Avatar: AvatarClass;
+
+	export interface BadgeProps extends BaseProps<BadgeClass> {
+		theme?: "primary" | "secondary" | "default" | "info" | "success" | "warning" | "error";
+		rounded?: boolean | "top" | "right" | "bottom" | "left";
+		pill?: boolean;
+		circle?: boolean;
+	}
+	type BadgeClass = React.StatelessComponent<BadgeProps>
+	export const Badge: BadgeClass;
+
+	export interface BannerProps extends BaseProps<BannerClass> {
+		align?: "left" | "center" | "right";
+		backgroundImage: string;
+	}
+	type BannerClass = React.StatelessComponent<BannerProps>
+	export const Banner: BannerClass;
+
+	export interface BlockProps extends BaseProps<BlockClass> {
+		m?: number;
+		mt?: number;
+		mr?: number;
+		mb?: number;
+		ml?: number;
+		mx?: number;
+		my?: number;
+		p?: number;
+		pt?: number;
+		pr?: number;
+		pb?: number;
+		pl?: number;
+		px?: number;
+		py?: number;
+		color?: string;
+		backgroundColor?: string;
+		borderColor?: string;
+		border?: boolean;
+		borderTop?: boolean;
+		borderRight?: boolean;
+		borderBottom?: boolean;
+		borderLeft?: boolean;
+		rounded?: boolean | "top" | "right" | "bottom" | "left";
+	}
+	type BlockClass = React.StatelessComponent<BlockProps>
+	export const Block: BlockClass;
+
+	export interface BlockquoteProps extends BaseProps<BlockquoteClass> {
+		source: string;
+		href: string;
+	}
+	type BlockquoteClass = React.StatelessComponent<BlockquoteProps>
+	export const Blockquote: BlockquoteClass;
+
+	export interface BreadcrumbsProps extends BaseProps<BreadcrumbsClass> {
+		links: {
+			children: any;
+			href: string;
+		}[];
+	}
+	type BreadcrumbsClass = React.StatelessComponent<BreadcrumbsProps>
+	export const Breadcrumbs: BreadcrumbsClass;
+
+	export interface ButtonProps extends BaseProps<ButtonClass> {
+		href?: string;
+		color?: string;
+		backgroundColor?: string;
+		rounded?: boolean | "top" | "right" | "bottom" | "left";
+		pill?: boolean;
+		big?: boolean;
+		theme?: "primary" | "secondary" | "default" | "info" | "success" | "warning" | "error";
+	}
+	type ButtonClass = React.StatelessComponent<ButtonProps>
+	export const Button: ButtonClass;
+
+	export interface ButtonCircleProps extends BaseProps<ButtonCircleClass> {
+		title?: string;
+		href?: string;
+		color?: string;
+		backgroundColor?: string;
+		size?: number;
+	}
+	type ButtonCircleClass = React.StatelessComponent<ButtonCircleProps>
+	export const ButtonCircle: ButtonCircleClass;
+
+	export interface ButtonOutlineProps extends BaseProps<ButtonOutlineClass> {
+		href?: string;
+		color?: string;
+		rounded?: boolean | "top" | "right" | "bottom" | "left";
+		pill?: boolean;
+		big?: boolean;
+	}
+	type ButtonOutlineClass = React.StatelessComponent<ButtonOutlineProps>
+	export const ButtonOutline: ButtonOutlineClass;
+
+	export interface CardProps extends BaseProps<CardClass> {
+		width?: number | string;
+	}
+	type CardClass = React.StatelessComponent<CardProps>
+	export const Card: CardClass;
+
+	export interface CardImageProps extends BaseProps<CardImageClass> {
+		src?: string;
+	}
+	type CardImageClass = React.StatelessComponent<CardImageProps>
+	export const CardImage: CardImageClass;
+
+	export interface CheckboxProps extends BaseProps<CheckboxClass> {
+		label?: string;
+		checked?: boolean;
+		name?: string;
+		readOnly?: boolean;
+		theme?: "primary" | "secondary" | "default" | "info" | "success" | "warning" | "error";
+	}
+	type CheckboxClass = React.StatelessComponent<CheckboxProps>
+	export const Checkbox: CheckboxClass;
+
+	export interface CloseProps extends BaseProps<CloseClass> {
+	}
+	type CloseClass = React.StatelessComponent<CloseProps>
+	export const Close: CloseClass;
+
+	export interface ContainerProps extends BaseProps<ContainerClass> {
+	}
+	type ContainerClass = React.StatelessComponent<ContainerProps>
+	export const Container: ContainerClass;
+
+	export interface DividerProps extends BaseProps<DividerClass> {
+		width?: number;
+	}
+	type DividerClass = React.StatelessComponent<DividerProps>
+	export const Divider: DividerClass;
+
+	export interface DonutProps extends BaseProps<DonutClass> {
+		value?: number;
+		size?: number;
+		strokeWidth?: number;
+		color?: string;
+	}
+	type DonutClass = React.StatelessComponent<DonutProps>
+	export const Donut: DonutClass;
+
+	export interface DotIndicatorProps extends BaseProps<DotIndicatorClass> {
+		length?: number;
+		active?: number;
+		onClick?: Function;
+	}
+	type DotIndicatorClass = React.StatelessComponent<DotIndicatorProps>
+	export const DotIndicator: DotIndicatorClass;
+
+	export interface DrawerProps extends BaseProps<DrawerClass> {
+		size?: number;
+		open?: boolean;
+		position?: "top" | "right" | "bottom" | "left";
+		onDismiss?: Function;
+	}
+	type DrawerClass = React.StatelessComponent<DrawerProps>
+	export const Drawer: DrawerClass;
+
+	export interface DropdownProps extends BaseProps<DropdownClass> {
+	}
+	type DropdownClass = React.StatelessComponent<DropdownProps>
+	export const Dropdown: DropdownClass;
+
+	export interface DropdownMenuProps extends BaseProps<DropdownMenuClass> {
+		open?: boolean;
+		right?: boolean;
+		top?: boolean;
+		onDismiss?: Function;
+	}
+	type DropdownMenuClass = React.StatelessComponent<DropdownMenuProps>
+	export const DropdownMenu: DropdownMenuClass;
+
+	export interface EmbedProps extends BaseProps<EmbedClass> {
+		ratio?: number;
+	}
+	type EmbedClass = React.StatelessComponent<EmbedProps>
+	export const Embed: EmbedClass;
+
+	export interface FixedProps extends BaseProps<FixedClass> {
+		top?: boolean;
+		right?: boolean;
+		bottom?: boolean;
+		left?: boolean;
+		zIndex?: number;
+	}
+	type FixedClass = React.StatelessComponent<FixedProps>
+	export const Fixed: FixedClass;
+
+	export interface FooterProps extends BaseProps<FooterClass> {
+	}
+	type FooterClass = React.StatelessComponent<FooterProps>
+	export const Footer: FooterClass;
+
+	export interface HeadingProps extends BaseProps<HeadingClass> {
+		big?: boolean;
+		level?: number;
+		size?: number;
+		alt?: boolean;
+	}
+	type HeadingClass = React.StatelessComponent<HeadingProps>
+	export const Heading: HeadingClass;
+
+	export interface HeadingLinkProps extends BaseProps<HeadingLinkClass> {
+		level?: number;
+		size?: number;
+		href?: string;
+	}
+	type HeadingLinkClass = React.StatelessComponent<HeadingLinkProps>
+	export const HeadingLink: HeadingLinkClass;
+
+	export interface InlineFormProps extends BaseProps<InlineFormClass> {
+		label?: string;
+		name?: string;
+		value?: number | string;
+		placeholder?: string;
+		onChange?: Function;
+		buttonLabel?: string;
+		onClick?: Function;
+	}
+	type InlineFormClass = React.StatelessComponent<InlineFormProps>
+	export const InlineForm: InlineFormClass;
+
+	export interface InputProps extends BaseProps<InputClass> {
+		label?: string;
+		name?: string;
+		type?: string;
+		message?: string;
+		hideLabel?: boolean;
+		rounded?: boolean | "top" | "right" | "bottom" | "left";
+		placeholder?: string;
+	}
+	type InputClass = React.StatelessComponent<InputProps>
+	export const Input: InputClass;
+
+	export interface LabelProps extends BaseProps<LabelClass> {
+		hide?: boolean;
+	}
+	type LabelClass = React.StatelessComponent<LabelProps>
+	export const Label: LabelClass;
+
+	export interface LinkBlockProps extends BaseProps<LinkBlockClass> {
+		is?: string | Object | Function;
+		href?: string;
+	}
+	type LinkBlockClass = React.StatelessComponent<LinkBlockProps>
+	export const LinkBlock: LinkBlockClass;
+
+	export interface MediaProps extends BaseProps<MediaClass> {
+		img?: string;
+		right?: boolean;
+		align?: "top" | "center" | "bottom";
+	}
+	type MediaClass = React.StatelessComponent<MediaProps>
+	export const Media: MediaClass;
+
+	export interface MenuProps extends BaseProps<MenuClass> {
+	}
+	type MenuClass = React.StatelessComponent<MenuProps>
+	export const Menu: MenuClass;
+
+	export interface MessageProps extends BaseProps<MessageClass> {
+		theme?: "primary" | "secondary" | "default" | "info" | "success" | "warning" | "error";
+	}
+	type MessageClass = React.StatelessComponent<MessageProps>
+	export const Message: MessageClass;
+
+	export interface NavItemProps extends BaseProps<NavItemClass> {
+		small?: boolean;
+		is?: string | Object | Function;
+	}
+	type NavItemClass = React.StatelessComponent<NavItemProps>
+	export const NavItem: NavItemClass;
+
+	export interface OverlayProps extends BaseProps<OverlayClass> {
+		open?: boolean;
+		dark?: boolean;
+		box?: boolean;
+		fullWidth?: boolean;
+		onDismiss?: Function;
+	}
+	type OverlayClass = React.StatelessComponent<OverlayProps>
+	export const Overlay: OverlayClass;
+
+	export interface PageHeaderProps extends BaseProps<PageHeaderClass> {
+		heading?: string;
+		description?: string;
+	}
+	type PageHeaderClass = React.StatelessComponent<PageHeaderProps>
+	export const PageHeader: PageHeaderClass;
+
+	export interface PanelProps extends BaseProps<PanelClass> {
+		theme?: "primary" | "secondary" | "default" | "info" | "success" | "warning" | "error";
+	}
+	type PanelClass = React.StatelessComponent<PanelProps>
+	export const Panel: PanelClass;
+
+	export interface PanelFooterProps extends BaseProps<PanelFooterClass> {
+		theme?: "primary" | "secondary" | "default" | "info" | "success" | "warning" | "error";
+	}
+	type PanelFooterClass = React.StatelessComponent<PanelFooterProps>
+	export const PanelFooter: PanelFooterClass;
+
+	export interface PanelHeaderProps extends BaseProps<PanelHeaderClass> {
+		theme?: "primary" | "secondary" | "default" | "info" | "success" | "warning" | "error";
+	}
+	type PanelHeaderClass = React.StatelessComponent<PanelHeaderProps>
+	export const PanelHeader: PanelHeaderClass;
+
+	export interface PreProps extends BaseProps<PreClass> {
+	}
+	type PreClass = React.StatelessComponent<PreProps>
+	export const Pre: PreClass;
+
+	export interface ProgressProps extends BaseProps<ProgressClass> {
+		value?: number;
+		color?: string;
+	}
+	type ProgressClass = React.StatelessComponent<ProgressProps>
+	export const Progress: ProgressClass;
+
+	export interface RadioProps extends BaseProps<RadioClass> {
+		checked?: boolean;
+		group?: string;
+		label?: string;
+		name?: string;
+		readOnly?: boolean;
+	}
+	type RadioClass = React.StatelessComponent<RadioProps>
+	export const Radio: RadioClass;
+
+	export interface RatingProps extends BaseProps<RatingClass> {
+		value?: number;
+		onClick?: Function;
+	}
+	type RatingClass = React.StatelessComponent<RatingProps>
+	export const Rating: RatingClass;
+
+	export interface SectionProps extends BaseProps<SectionClass> {
+	}
+	type SectionClass = React.StatelessComponent<SectionProps>
+	export const Section: SectionClass;
+
+	export interface SectionHeaderProps extends BaseProps<SectionHeaderClass> {
+		heading?: string;
+		href?: string;
+		description?: string;
+	}
+	type SectionHeaderClass = React.StatelessComponent<SectionHeaderProps>
+	export const SectionHeader: SectionHeaderClass;
+
+	export interface SelectProps extends BaseProps<SelectClass> {
+		label?: string;
+		name?: string;
+		options?: {
+			children: any;
+			value: any;
+		}[];
+		message?: string;
+		hideLabel?: boolean;
+	}
+	type SelectClass = React.StatelessComponent<SelectProps>
+	export const Select: SelectClass;
+
+	export interface SequenceMapProps extends BaseProps<SequenceMapClass> {
+		steps?: {
+			children: any;
+			href: string;
+		}[];
+		active?: number;
+	}
+	type SequenceMapClass = React.StatelessComponent<SequenceMapProps>
+	export const SequenceMap: SequenceMapClass;
+
+	export interface SequenceMapStepProps extends BaseProps<SequenceMapStepClass> {
+		width?: string;
+		first?: boolean;
+		active?: boolean;
+	}
+	type SequenceMapStepClass = React.StatelessComponent<SequenceMapStepProps>
+	export const SequenceMapStep: SequenceMapStepClass;
+
+	export interface SliderProps extends BaseProps<SliderClass> {
+		label?: string;
+		name?: string;
+		fill?: boolean;
+		hideLabel?: boolean;
+		value?: number;
+		defaultValue?: number;
+		readOnly?: boolean;
+	}
+	type SliderClass = React.StatelessComponent<SliderProps>
+	export const Slider: SliderClass;
+
+	export interface SpaceProps extends BaseProps<SpaceClass> {
+		x?: number;
+		auto?: boolean;
+	}
+	type SpaceClass = React.StatelessComponent<SpaceProps>
+	export const Space: SpaceClass;
+
+	export interface StatProps extends BaseProps<StatClass> {
+		value?: number | string;
+		unit?: string;
+		label?: string;
+		topLabel?: boolean;
+	}
+	type StatClass = React.StatelessComponent<StatProps>
+	export const Stat: StatClass;
+
+	export interface SwitchProps extends BaseProps<SwitchClass> {
+		checked?: boolean;
+	}
+	type SwitchClass = React.StatelessComponent<SwitchProps>
+	export const Switch: SwitchClass;
+
+	export interface TableProps extends BaseProps<TableClass> {
+		headings?: any[];
+		data?: any[][];
+	}
+	type TableClass = React.StatelessComponent<TableProps>
+	export const Table: TableClass;
+
+	export interface TextProps extends BaseProps<TextClass> {
+		small?: boolean;
+		bold?: boolean;
+	}
+	type TextClass = React.StatelessComponent<TextProps>
+	export const Text: TextClass;
+
+	export interface TextareaProps extends BaseProps<TextareaClass> {
+		label?: string;
+		name?: string;
+		message?: string;
+		hideLabel?: boolean;
+	}
+	type TextareaClass = React.StatelessComponent<TextareaProps>
+	export const Textarea: TextareaClass;
+
+	export interface ToolbarProps extends BaseProps<ToolbarClass> {
+	}
+	type ToolbarClass = React.StatelessComponent<ToolbarProps>
+	export const Toolbar: ToolbarClass;
+
+	export interface TooltipProps extends BaseProps<TooltipClass> {
+		title?: string;
+	}
+	type TooltipClass = React.StatelessComponent<TooltipProps>
+	export const Tooltip: TooltipClass;
+}