From 0b9c1d2fda2121bbd36f49601418cf606e3a1bab Mon Sep 17 00:00:00 2001
From: roger yee <ryee.epicodus@gmail.com>
Date: Thu, 27 Sep 2018 15:46:13 -0700
Subject: [PATCH 1/3] updates the rebass syntax to the most recent version

---
 types/rebass/index.d.ts       | 588 +++++--------------------------
 types/rebass/rebass-tests.tsx | 634 ----------------------------------
 types/rebass/tsconfig.json    |   5 +-
 3 files changed, 80 insertions(+), 1147 deletions(-)
 delete mode 100644 types/rebass/rebass-tests.tsx

diff --git a/types/rebass/index.d.ts b/types/rebass/index.d.ts
index f209bed8ac..fdfc66418a 100644
--- a/types/rebass/index.d.ts
+++ b/types/rebass/index.d.ts
@@ -1,541 +1,109 @@
-// Type definitions for Rebass 0.2.6
+// Type definitions for Rebass 0.3.6
 // Project: https://github.com/jxnblk/rebass
 // Definitions by: rhysd <https://rhysd.github.io>
+//                 ryee-dev <https://github.com/ryee-dev>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 
-///<reference types="react" />
-
 import * as React from "react";
 
-export interface BaseProps<C> extends React.Props<C> {
-    tagName?: string;
+export interface BaseProps<C> extends React.ClassAttributes<C> {
+  className?: string;
+  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;
+}
+
+export interface BoxProps extends BaseProps<BoxClass> {
     className?: string;
+    width?: number | number[];
     fontSize?: number | number[];
-    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;
+    css?: Object;
     color?: string;
-    backgroundColor?: string;
-    inverted?: boolean;
-    rounded?: boolean | "top" | "right" | "bottom" | "left";
-    circle?: boolean;
-    pill?: boolean;
+    bg?: string;
 }
+type BoxClass = React.StatelessComponent<BoxProps>;
+export declare const Box: BoxClass;
 
-export interface ArrowProps extends BaseProps<ArrowClass> {
-    direction?: "up" | "down";
+export interface ButtonProps extends BaseProps<ButtonClass> {
+  fontWeight?: string;
+  border?: boolean;
+  borderColor?: string;
+  borderRadius?: number;
+  variant?: string;
 }
-type ArrowClass = React.StatelessComponent<ArrowProps>
-export declare const Arrow: ArrowClass;
+type ButtonClass = React.StatelessComponent<ButtonProps>;
+export declare const Button: ButtonClass;
 
-export interface AvatarProps extends BaseProps<AvatarClass> {
-    size?: number;
-    src?: string;
+export interface CardProps extends BaseProps<CardClass> {
+  border?: boolean;
+  borderColor?: string;
+  borderRadius?: number;
+  boxShadow?: string;
+  backgroundImage?: string;
+  backgroundSize?: string;
+  backgroundPosition?: string;
+  backgroundRepeat?: string;
+  opacity?: number;
 }
-type AvatarClass = React.StatelessComponent<AvatarProps>
-export declare const Avatar: AvatarClass;
+type CardClass = React.StatelessComponent<CardProps>;
+export declare const Card: CardClass;
+
+export interface FlexProps extends BaseProps<FlexClass> {
+  height?: number;
+  borderRadius?: number;
+  src?: string;
+  alt?: string;
+}
+type FlexClass = React.StatelessComponent<FlexProps>
+export declare const Flex: FlexClass;
+
+export interface HeadingProps extends BaseProps<ImageClass> {
+  fontSize?: number | number[];
+  fontWeight?: string;
+  color?: string;
+  fontFamily?: string;
+  textAlign?: string;
+  lineHeight?: number;
+  letterSpacing?: number;
+}
+type HeadingClass = React.StatelessComponent<HeadingProps>
+export declare const Heading: HeadingClass;
 
 export interface ImageProps extends BaseProps<ImageClass> {
-    size?: number;
+    height?: number;
+    borderRadius?: number;
     src?: string;
     alt?: string;
 }
 type ImageClass = React.StatelessComponent<ImageProps>
 export declare const Image: ImageClass;
 
-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 declare const Badge: BadgeClass;
-
-export interface BannerProps extends BaseProps<BannerClass> {
-    align?: "left" | "center" | "right";
-    backgroundImage: string;
-}
-type BannerClass = React.StatelessComponent<BannerProps>
-export declare 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 declare const Block: BlockClass;
-
-export interface BlockquoteProps extends BaseProps<BlockquoteClass> {
-    source: string;
-    href: string;
-}
-type BlockquoteClass = React.StatelessComponent<BlockquoteProps>
-export declare const Blockquote: BlockquoteClass;
-
-export interface BreadcrumbsProps extends BaseProps<BreadcrumbsClass> {
-    links: {
-        children: any;
-        href: string;
-    }[];
-}
-type BreadcrumbsClass = React.StatelessComponent<BreadcrumbsProps>
-export declare 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 declare 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 declare 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 declare const ButtonOutline: ButtonOutlineClass;
-
-export interface CardProps extends BaseProps<CardClass> {
-    width?: number | string;
-}
-type CardClass = React.StatelessComponent<CardProps>
-export declare const Card: CardClass;
-
-export interface CardImageProps extends BaseProps<CardImageClass> {
-    src?: string;
-}
-type CardImageClass = React.StatelessComponent<CardImageProps>
-export declare 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 declare const Checkbox: CheckboxClass;
-
-export interface CloseProps extends BaseProps<CloseClass> {
-}
-type CloseClass = React.StatelessComponent<CloseProps>
-export declare const Close: CloseClass;
-
-export interface ContainerProps extends BaseProps<ContainerClass> {
-}
-type ContainerClass = React.StatelessComponent<ContainerProps>
-export declare const Container: ContainerClass;
-
-export interface DividerProps extends BaseProps<DividerClass> {
-    width?: number;
-}
-type DividerClass = React.StatelessComponent<DividerProps>
-export declare const Divider: DividerClass;
-
-export interface DonutProps extends BaseProps<DonutClass> {
-    value?: number;
-    size?: number;
-    strokeWidth?: number;
-    color?: string;
-}
-type DonutClass = React.StatelessComponent<DonutProps>
-export declare const Donut: DonutClass;
-
-export interface DotIndicatorProps extends BaseProps<DotIndicatorClass> {
-    length?: number;
-    active?: number;
-    onClick?: Function;
-}
-type DotIndicatorClass = React.StatelessComponent<DotIndicatorProps>
-export declare 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 declare const Drawer: DrawerClass;
-
-export interface DropdownProps extends BaseProps<DropdownClass> {
-}
-type DropdownClass = React.StatelessComponent<DropdownProps>
-export declare const Dropdown: DropdownClass;
-
-export interface DropdownMenuProps extends BaseProps<DropdownMenuClass> {
-    open?: boolean;
-    right?: boolean;
-    top?: boolean;
-    onDismiss?: Function;
-}
-type DropdownMenuClass = React.StatelessComponent<DropdownMenuProps>
-export declare const DropdownMenu: DropdownMenuClass;
-
-export interface EmbedProps extends BaseProps<EmbedClass> {
-    ratio?: number;
-}
-type EmbedClass = React.StatelessComponent<EmbedProps>
-export declare 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 declare const Fixed: FixedClass;
-
-export interface FooterProps extends BaseProps<FooterClass> {
-}
-type FooterClass = React.StatelessComponent<FooterProps>
-export declare const Footer: FooterClass;
-
-export interface HeadingProps extends BaseProps<HeadingClass> {
-    big?: boolean;
-    level?: number;
-    size?: number;
-    alt?: boolean;
-}
-type HeadingClass = React.StatelessComponent<HeadingProps>
-export declare const Heading: HeadingClass;
-
-export interface HeadingLinkProps extends BaseProps<HeadingLinkClass> {
-    level?: number;
-    size?: number;
-    href?: string;
-}
-type HeadingLinkClass = React.StatelessComponent<HeadingLinkProps>
-export declare const HeadingLink: HeadingLinkClass;
-
 export interface LinkProps extends BaseProps<LinkClass> {
-    is?: string | Object | Function;
-    href?: string;
+  href?: string;
 }
 type LinkClass = React.StatelessComponent<LinkProps>
 export declare const Link: LinkClass;
 
-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 declare 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 declare const Input: InputClass;
-
-export interface LabelProps extends BaseProps<LabelClass> {
-    hide?: boolean;
-}
-type LabelClass = React.StatelessComponent<LabelProps>
-export declare const Label: LabelClass;
-
-export interface LinkBlockProps extends BaseProps<LinkBlockClass> {
-    is?: string | Object | Function;
-    href?: string;
-}
-type LinkBlockClass = React.StatelessComponent<LinkBlockProps>
-export declare const LinkBlock: LinkBlockClass;
-
-export interface MediaProps extends BaseProps<MediaClass> {
-    img?: string;
-    right?: boolean;
-    align?: "top" | "center" | "bottom";
-}
-type MediaClass = React.StatelessComponent<MediaProps>
-export declare const Media: MediaClass;
-
-export interface MenuProps extends BaseProps<MenuClass> {
-}
-type MenuClass = React.StatelessComponent<MenuProps>
-export declare const Menu: MenuClass;
-
-export interface MessageProps extends BaseProps<MessageClass> {
-    theme?: "primary" | "secondary" | "default" | "info" | "success" | "warning" | "error";
-}
-type MessageClass = React.StatelessComponent<MessageProps>
-export declare const Message: MessageClass;
-
-export interface NavItemProps extends BaseProps<NavItemClass> {
-    small?: boolean;
-    is?: string | Object | Function;
-}
-type NavItemClass = React.StatelessComponent<NavItemProps>
-export declare 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 declare const Overlay: OverlayClass;
-
-export interface PageHeaderProps extends BaseProps<PageHeaderClass> {
-    heading?: string;
-    description?: string;
-}
-type PageHeaderClass = React.StatelessComponent<PageHeaderProps>
-export declare const PageHeader: PageHeaderClass;
-
-export interface PanelProps extends BaseProps<PanelClass> {
-    theme?: "primary" | "secondary" | "default" | "info" | "success" | "warning" | "error";
-}
-type PanelClass = React.StatelessComponent<PanelProps>
-export declare const Panel: PanelClass;
-
-export interface PanelFooterProps extends BaseProps<PanelFooterClass> {
-    theme?: "primary" | "secondary" | "default" | "info" | "success" | "warning" | "error";
-}
-type PanelFooterClass = React.StatelessComponent<PanelFooterProps>
-export declare const PanelFooter: PanelFooterClass;
-
-export interface PanelHeaderProps extends BaseProps<PanelHeaderClass> {
-    theme?: "primary" | "secondary" | "default" | "info" | "success" | "warning" | "error";
-}
-type PanelHeaderClass = React.StatelessComponent<PanelHeaderProps>
-export declare const PanelHeader: PanelHeaderClass;
-
-export interface PreProps extends BaseProps<PreClass> {
-}
-type PreClass = React.StatelessComponent<PreProps>
-export declare const Pre: PreClass;
-
-export interface ProgressProps extends BaseProps<ProgressClass> {
-    value?: number;
-    color?: string;
-}
-type ProgressClass = React.StatelessComponent<ProgressProps>
-export declare 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 declare const Radio: RadioClass;
-
-export interface RatingProps extends BaseProps<RatingClass> {
-    value?: number;
-    onClick?: Function;
-}
-type RatingClass = React.StatelessComponent<RatingProps>
-export declare const Rating: RatingClass;
-
-export interface SectionProps extends BaseProps<SectionClass> {
-}
-type SectionClass = React.StatelessComponent<SectionProps>
-export declare const Section: SectionClass;
-
-export interface SectionHeaderProps extends BaseProps<SectionHeaderClass> {
-    heading?: string;
-    href?: string;
-    description?: string;
-}
-type SectionHeaderClass = React.StatelessComponent<SectionHeaderProps>
-export declare 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 declare const Select: SelectClass;
-
-export interface SequenceMapProps extends BaseProps<SequenceMapClass> {
-    steps?: {
-        children: any;
-        href: string;
-    }[];
-    active?: number;
-}
-type SequenceMapClass = React.StatelessComponent<SequenceMapProps>
-export declare const SequenceMap: SequenceMapClass;
-
-export interface SequenceMapStepProps extends BaseProps<SequenceMapStepClass> {
-    width?: string;
-    first?: boolean;
-    active?: boolean;
-}
-type SequenceMapStepClass = React.StatelessComponent<SequenceMapStepProps>
-export declare 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 declare const Slider: SliderClass;
-
-export interface SpaceProps extends BaseProps<SpaceClass> {
-    x?: number;
-    auto?: boolean;
-}
-type SpaceClass = React.StatelessComponent<SpaceProps>
-export declare const Space: SpaceClass;
-
-export interface StatProps extends BaseProps<StatClass> {
-    value?: number | string;
-    unit?: string;
-    label?: string;
-    topLabel?: boolean;
-}
-type StatClass = React.StatelessComponent<StatProps>
-export declare const Stat: StatClass;
-
-export interface SwitchProps extends BaseProps<SwitchClass> {
-    checked?: boolean;
-}
-type SwitchClass = React.StatelessComponent<SwitchProps>
-export declare const Switch: SwitchClass;
-
-export interface TableProps extends BaseProps<TableClass> {
-    headings?: any[];
-    data?: any[][];
-}
-type TableClass = React.StatelessComponent<TableProps>
-export declare const Table: TableClass;
-
-export interface TextProps extends BaseProps<TextClass> {
-    small?: boolean;
-    bold?: boolean;
+export interface TextProps extends BaseProps<ImageClass> {
+  fontSize?: number | number[];
+  fontWeight?: string;
+  color?: string;
+  fontFamily?: string;
+  textAlign?: string;
+  lineHeight?: number;
+  letterSpacing?: number;
 }
 type TextClass = React.StatelessComponent<TextProps>
 export declare const Text: TextClass;
-
-export interface TextareaProps extends BaseProps<TextareaClass> {
-    label?: string;
-    name?: string;
-    message?: string;
-    hideLabel?: boolean;
-}
-type TextareaClass = React.StatelessComponent<TextareaProps>
-export declare const Textarea: TextareaClass;
-
-export interface ToolbarProps extends BaseProps<ToolbarClass> {
-}
-type ToolbarClass = React.StatelessComponent<ToolbarProps>
-export declare const Toolbar: ToolbarClass;
-
-export interface TooltipProps extends BaseProps<TooltipClass> {
-    text?: string;
-    title?: string;
-}
-type TooltipClass = React.StatelessComponent<TooltipProps>
-export declare const Tooltip: TooltipClass;
-
-export interface FontWeights {
-    normal?: number;
-    bold?: number;
-}
-
-export interface Fonts {
-    [0]?: string;
-    sans?: string;
-    mono?: string;
-}
-
-export interface Theme {
-    breakpoints?: string[];
-    space?: number[];
-    fontSizes?: number[];
-    fontWeights?: FontWeights;
-    fonts?: Fonts;
-    shadows?: string[];
-    radii?: number[];
-}
-
-export interface ProviderProps {
-    theme?: Theme;
-}
-
-type ProviderClass = React.StatelessComponent<ProviderProps>;
-export const Provider: ProviderClass;
\ No newline at end of file
diff --git a/types/rebass/rebass-tests.tsx b/types/rebass/rebass-tests.tsx
deleted file mode 100644
index 814c11a523..0000000000
--- a/types/rebass/rebass-tests.tsx
+++ /dev/null
@@ -1,634 +0,0 @@
-
-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
-  , Provider
-  , 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>
-          <Text fontSize={32}>
-            This is a large font
-          </Text>
-          <Text fontSize={[14, 18, 24]}>
-            A set of fonts!
-          </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>
-      <Tooltip text="Whoa There!" />
-
-      <Provider />
-    </div>;
-  }
-}
-
diff --git a/types/rebass/tsconfig.json b/types/rebass/tsconfig.json
index 080a1661b3..c3853b93ab 100644
--- a/types/rebass/tsconfig.json
+++ b/types/rebass/tsconfig.json
@@ -19,7 +19,6 @@
         "forceConsistentCasingInFileNames": true
     },
     "files": [
-        "index.d.ts",
-        "rebass-tests.tsx"
+        "index.d.ts"
     ]
-}
\ No newline at end of file
+}

From 83347f13f5600db20dc700827dbad24cbf628e7c Mon Sep 17 00:00:00 2001
From: roger yee <ryee.epicodus@gmail.com>
Date: Thu, 27 Sep 2018 16:19:49 -0700
Subject: [PATCH 2/3] adds a few missing prop typing

---
 types/rebass/index.d.ts       | 16 ++++++++++++----
 types/rebass/rebass-tests.tsx | 30 ++++++++++++++++++++++++++++++
 2 files changed, 42 insertions(+), 4 deletions(-)
 create mode 100644 types/rebass/rebass-tests.tsx

diff --git a/types/rebass/index.d.ts b/types/rebass/index.d.ts
index fdfc66418a..e732d8bcaf 100644
--- a/types/rebass/index.d.ts
+++ b/types/rebass/index.d.ts
@@ -42,6 +42,8 @@ export interface ButtonProps extends BaseProps<ButtonClass> {
   borderColor?: string;
   borderRadius?: number;
   variant?: string;
+  bg?: string;
+  color?: string;
 }
 type ButtonClass = React.StatelessComponent<ButtonProps>;
 export declare const Button: ButtonClass;
@@ -51,20 +53,25 @@ export interface CardProps extends BaseProps<CardClass> {
   borderColor?: string;
   borderRadius?: number;
   boxShadow?: string;
+  bg?: string;
   backgroundImage?: string;
   backgroundSize?: string;
   backgroundPosition?: string;
   backgroundRepeat?: string;
   opacity?: number;
+  fontSize?: number | number[];
+  fontWeight?: string;
+  width?: number | number[];
 }
 type CardClass = React.StatelessComponent<CardProps>;
 export declare const Card: CardClass;
 
 export interface FlexProps extends BaseProps<FlexClass> {
-  height?: number;
-  borderRadius?: number;
-  src?: string;
-  alt?: string;
+  alignItems?: string;
+  justifyContent?: string,
+  flexDirection?: string,
+  flexWrap?: string,
+  width?: number | number[];
 }
 type FlexClass = React.StatelessComponent<FlexProps>
 export declare const Flex: FlexClass;
@@ -86,6 +93,7 @@ export interface ImageProps extends BaseProps<ImageClass> {
     borderRadius?: number;
     src?: string;
     alt?: string;
+    width?: number | number[];
 }
 type ImageClass = React.StatelessComponent<ImageProps>
 export declare const Image: ImageClass;
diff --git a/types/rebass/rebass-tests.tsx b/types/rebass/rebass-tests.tsx
new file mode 100644
index 0000000000..cc701a5c71
--- /dev/null
+++ b/types/rebass/rebass-tests.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { Box, Flex, Text, Heading, Button, Link, Image, Card } from 'rebass';
+
+const RebassTests = () => (
+  <Box width={1} css={{ height: '100vh' }}>
+    <Flex width={1} alignItems="center" justifyContent="center">
+      <Heading fontSize={5} fontWeight="bold">Hi, I'm a heading.</Heading>
+      <Text fontSize={3}>Hi, I'm text.</Text>
+      <Card
+        fontSize={6}
+        fontWeight='bold'
+        width={[ 1, 1, 1/2 ]}
+        p={5}
+        my={5}
+        bg='#f6f6ff'
+        borderRadius={8}
+        boxShadow='0 2px 16px rgba(0, 0, 0, 0.25)'
+      >
+        Card
+      </Card>
+      <Image
+        width={[ 1, 1, 1/2 ]}
+        src='https://source.unsplash.com/random/1280x720'
+        borderRadius={8}
+      />
+      <Link href='https://rebassjs.org'>Link</Link>
+      <Button bg='magenta'>Button</Button>
+    </Flex>
+  </Box>
+);

From bb27ad28b51e1e820788a9da481464cc77446951 Mon Sep 17 00:00:00 2001
From: roger yee <ryee.epicodus@gmail.com>
Date: Thu, 27 Sep 2018 16:26:59 -0700
Subject: [PATCH 3/3] forgot to add test into tsconfig

---
 types/rebass/tsconfig.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/types/rebass/tsconfig.json b/types/rebass/tsconfig.json
index c3853b93ab..ee7dc750f7 100644
--- a/types/rebass/tsconfig.json
+++ b/types/rebass/tsconfig.json
@@ -19,6 +19,7 @@
         "forceConsistentCasingInFileNames": true
     },
     "files": [
-        "index.d.ts"
+        "index.d.ts",
+        "rebass-tests.tsx"
     ]
 }