From 97e64f88f996ad7b689c0a9e011431695e1223dc Mon Sep 17 00:00:00 2001
From: Zephraph <zephraph@gmail.com>
Date: Mon, 18 Jun 2018 18:32:58 -0400
Subject: [PATCH 1/9] Add initial styles

---
 types/styled-system/index.d.ts             | 596 +++++++++++++++++++++
 types/styled-system/styled-system-tests.ts |   0
 types/styled-system/tsconfig.json          |  22 +
 types/styled-system/tslint.json            |   1 +
 4 files changed, 619 insertions(+)
 create mode 100644 types/styled-system/index.d.ts
 create mode 100644 types/styled-system/styled-system-tests.ts
 create mode 100644 types/styled-system/tsconfig.json
 create mode 100644 types/styled-system/tslint.json

diff --git a/types/styled-system/index.d.ts b/types/styled-system/index.d.ts
new file mode 100644
index 0000000000..3659bd1fb2
--- /dev/null
+++ b/types/styled-system/index.d.ts
@@ -0,0 +1,596 @@
+// Type definitions for styled-system 2.3
+// Project: https://github.com/jxnblk/styled-system#readme
+// Definitions by: Artsy <https://github.com/artsy>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+/**
+ * Original Author: https://gist.github.com/maxdeviant/cfed775121829eb02283347083915383
+ */
+
+declare module "styled-system" {
+    /**
+     * Core
+     */
+
+    export type GlobalStyleValues = "inherit" | "initial" | "unset";
+
+    export interface BaseTheme {
+        breakpoints?: number[];
+        space?: number[];
+        fontSizes?: number[];
+        colors?: {
+            [name: string]: string;
+        };
+    }
+
+    /**
+     * Space
+     */
+
+    type ResponsiveValue<T> = T | Array<T | null>;
+
+    export type SpaceValue = number | string;
+    export type ResponsiveSpaceValue = ResponsiveValue<SpaceValue>;
+
+    export interface SpaceProps {
+        m?: ResponsiveSpaceValue;
+        mt?: ResponsiveSpaceValue;
+        mr?: ResponsiveSpaceValue;
+        mb?: ResponsiveSpaceValue;
+        ml?: ResponsiveSpaceValue;
+        mx?: ResponsiveSpaceValue;
+        my?: ResponsiveSpaceValue;
+        p?: ResponsiveSpaceValue;
+        pt?: ResponsiveSpaceValue;
+        pr?: ResponsiveSpaceValue;
+        pb?: ResponsiveSpaceValue;
+        pl?: ResponsiveSpaceValue;
+        px?: ResponsiveSpaceValue;
+        py?: ResponsiveSpaceValue;
+    }
+
+    export function space(...args: any[]): any;
+
+    /**
+     * Width
+     */
+
+    export type WidthValue = number | string;
+    export type ResponsiveWidthValue = ResponsiveValue<WidthValue>;
+
+    export interface WidthProps {
+        width?: ResponsiveWidthValue;
+    }
+
+    export interface MinWidthProps {
+        minWidth?: ResponsiveWidthValue;
+    }
+
+    export interface MaxWidthProps {
+        maxWidth?: ResponsiveWidthValue;
+    }
+
+    export function width(...args: any[]): any;
+    export function minWidth(...args: any[]): any;
+    export function maxWidth(...args: any[]): any;
+
+    /**
+     * Height
+     */
+
+    export type HeightValue = number | string;
+    export type ResponsiveHeightValue = ResponsiveValue<HeightValue>;
+
+    export interface HeightProps {
+        height?: ResponsiveHeightValue;
+    }
+
+    export interface MinHeightProps {
+        minHeight?: ResponsiveHeightValue;
+    }
+
+    export interface MaxHeightProps {
+        maxHeight?: ResponsiveHeightValue;
+    }
+
+    export function height(...args: any[]): any;
+    export function minHeight(...args: any[]): any;
+    export function maxHeight(...args: any[]): any;
+
+    /**
+     * Font Size
+     */
+
+    export type FontSizeValue = number | string;
+    export type ResponsiveFontSizeValue = ResponsiveValue<FontSizeValue>;
+
+    export interface FontSizeProps {
+        fontSize?: ResponsiveFontSizeValue;
+    }
+
+    export function fontSize(...args: any[]): any;
+
+    /**
+     * Color
+     */
+    export type ColorValue = string;
+    export type ResponsiveColorValue = ResponsiveValue<ColorValue>;
+
+    export function color(...args: any[]): any;
+
+    /**
+     * Typography
+     */
+    export interface FontFamilyProps {
+        fontFamily?: string;
+    }
+    export function fontFamily(...args: any[]): any;
+
+    export type TextAlignValue =
+        | "left"
+        | "right"
+        | "center"
+        | "justify"
+        | "justify-all"
+        | "start"
+        | "end"
+        | "match-parent";
+    export type ResponsiveTextAlignValue = ResponsiveValue<TextAlignValue>;
+
+    export interface TextAlignProps {
+        align?: ResponsiveTextAlignValue;
+    }
+
+    export function textAlign(...args: any[]): any;
+
+    export type LineHeightValue = number | string;
+    export type ResponsiveLineHeightValue = ResponsiveValue<LineHeightValue>;
+    export interface LineHeightProps {
+        lineHeight?: ResponsiveLineHeightValue;
+    }
+    export function lineHeight(...args: any[]): any;
+
+    export type FontWeightValue =
+        | GlobalStyleValues
+        | "normal"
+        | "bold"
+        | "lighter"
+        | "bolder"
+        | number;
+
+    export interface FontWeightProps {
+        fontWeight?: FontWeightValue;
+    }
+
+    export function fontWeight(...args: any[]): any;
+
+    export type LetterSpacingValue = number | string;
+    export type ResponsiveLetterSpacingValue = ResponsiveValue<
+        LetterSpacingValue
+    >;
+    export interface LetterSpacingProps {
+        letterSpacing?: ResponsiveLetterSpacingValue;
+    }
+    export function letterSpacing(...args: any[]): any;
+
+    /**
+     * Layout
+     */
+
+    export type DisplayValue =
+        | "inline"
+        | "block"
+        | "contents"
+        | "flex"
+        | "grid"
+        | "inline-block";
+
+    export interface DisplayProps {
+        display?: DisplayValue;
+    }
+
+    export function display(...args: any[]): any;
+
+    export interface SizeProps {
+        size?: ResponsiveWidthValue | ResponsiveHeightValue;
+    }
+
+    export function size(...args: any[]): any;
+
+    export type RatioValue = SpaceValue;
+
+    export interface RatioProps {
+        ratio?: RatioValue;
+    }
+
+    export function ratio(...args: any[]): any;
+
+    /**
+     * Flexbox
+     */
+
+    export type AlignItemsValue =
+        | "normal"
+        | "stretch"
+        | "center"
+        | "start"
+        | "end"
+        | "flex-start"
+        | "flex-end"
+        | "self-start"
+        | "self-end"
+        | "left"
+        | "right"
+        | "baseline"
+        | "first baseline"
+        | "last baseline"
+        | "safe center"
+        | "unsafe center";
+    export type ResponsiveAlignItemsValue = ResponsiveValue<AlignItemsValue>;
+
+    export interface AlignItemsProps {
+        align?: ResponsiveAlignItemsValue;
+        alignItems?: ResponsiveAlignItemsValue;
+    }
+
+    export function alignItems(...args: any[]): any;
+
+    export type JustifyContentValue =
+        | "center"
+        | "start"
+        | "end"
+        | "flex-start"
+        | "flex-end"
+        | "left"
+        | "right"
+        | "baseline"
+        | "first baseline"
+        | "last baseline"
+        | "space-between"
+        | "space-around"
+        | "space-evenly"
+        | "stretch"
+        | "safe center"
+        | "unsafe center";
+    export type ResponsiveJustifyContentValue = ResponsiveValue<
+        JustifyContentValue
+    >;
+
+    export interface JustifyContentProps {
+        justify?: ResponsiveJustifyContentValue;
+        justifyContent?: ResponsiveJustifyContentValue;
+    }
+
+    export function justifyContent(...args: any[]): any;
+
+    export type FlexWrapValue = true | "nowrap" | "wrap" | "wrap-reverse";
+
+    export interface FlexWrapProps {
+        wrap?: FlexWrapValue;
+    }
+
+    export function flexWrap(...args: any[]): any;
+
+    export type FlexDirectionValue =
+        | GlobalStyleValues
+        | "row"
+        | "row-reverse"
+        | "column"
+        | "column-reverse";
+
+    export type ResponsiveFlexDirectionValue = ResponsiveValue<
+        FlexDirectionValue
+    >;
+
+    export interface FlexDirectionProps {
+        flexDirection?: ResponsiveFlexDirectionValue;
+    }
+
+    export function flexDirection(...args: any[]): any;
+
+    export type FlexValue = number | string;
+    export type ResponsiveFlexValue = ResponsiveValue<FlexValue>;
+
+    export interface FlexProps {
+        flex?: ResponsiveFlexValue;
+    }
+
+    export function flex(...args: any[]): any;
+
+    export type AlignContentValue =
+        | GlobalStyleValues
+        | "center"
+        | "start"
+        | "end"
+        | "flex-start"
+        | "flex-end"
+        | "normal"
+        | "baseline"
+        | "first baseline"
+        | "last baseline"
+        | "space-between"
+        | "space-around"
+        | "space-evenly"
+        | "stretch"
+        | "safe center"
+        | "unsafe center";
+    export type ResponsiveAlignContentValue = ResponsiveValue<
+        AlignContentValue
+    >;
+
+    export interface AlignContentProps {
+        alignContent?: ResponsiveAlignItemsValue;
+    }
+
+    export function alignContent(...args: any[]): any;
+
+    export type JustifySelfValue =
+        | GlobalStyleValues
+        | "auto"
+        | "normal"
+        | "stretch"
+        | "center"
+        | "start"
+        | "end"
+        | "flex-start"
+        | "flex-end"
+        | "self-start"
+        | "self-end"
+        | "left"
+        | "right"
+        | "baseline"
+        | "first baseline"
+        | "last baseline"
+        | "safe center"
+        | "unsafe center";
+
+    export type ResponsiveJustifySelfValue = ResponsiveValue<JustifySelfValue>;
+
+    export interface JustifySelfProps {
+        justifySelf?: ResponsiveJustifySelfValue;
+    }
+
+    export function justifySelf(...args: any[]): any;
+
+    export type AlignSelfValue =
+        | "auto"
+        | "normal"
+        | "center"
+        | "start"
+        | "end"
+        | "self-start"
+        | "self-end"
+        | "flex-start"
+        | "flex-end"
+        | "left"
+        | "right"
+        | "baseline"
+        | "first baseline"
+        | "last baseline"
+        | "stretch"
+        | "safe center"
+        | "unsafe center";
+    export type ResponsiveAlignSelfValue = ResponsiveValue<AlignSelfValue>;
+
+    export interface AlignSelfProps {
+        alignSelf?: ResponsiveAlignSelfValue;
+    }
+
+    export function alignSelf(...args: any[]): any;
+
+    export type OrderValue = GlobalStyleValues | number;
+    export type ResponsiveOrderValue = ResponsiveValue<OrderValue>;
+
+    export interface OrderProps {
+        order?: ResponsiveOrderValue;
+    }
+
+    export function order(...args: any[]): any;
+
+    export type FlexBasisValue =
+        | GlobalStyleValues
+        | "auto"
+        | "fill"
+        | "max-content"
+        | "min-content"
+        | "fit-content"
+        | "content";
+
+    export interface FlexBasisProps {
+        // TODO: The FlexBasisValue currently really only exists for documentation
+        //       purposes, because flex-basis also accepts `Nem` and `Npx` strings.
+        //       Not sure there’s a way to still have the union values show up as
+        //       auto-completion results.
+        flexBasis?: FlexBasisValue | string;
+    }
+
+    export function flexBasis(...args: any[]): any;
+
+    /**
+     * Grid Layout
+     */
+
+    /**
+     * Background
+     * // TODO: Flesh out these values more
+     */
+
+    export type BackgroundValue = string;
+    export interface BackgroundProps {
+        background?: BackgroundValue;
+    }
+
+    export function background(...args: any[]): any;
+
+    export type BackgroundImageValue = string;
+    export interface BackgroundImageProps {
+        /**
+         * Value will be wrapped in url()
+         */
+        backgroundImage?: BackgroundImageValue;
+    }
+
+    export function backgroundImage(...args: any[]): any;
+
+    export type BackgroundSizeValue = string;
+    export interface BackgroundSizeProps {
+        backgroundImage?: BackgroundSizeValue;
+    }
+
+    export function backgroundSize(...args: any[]): any;
+
+    export type BackgroundPositionValue = string;
+    export interface BackgroundPositionProps {
+        backgroundImage?: BackgroundPositionValue;
+    }
+
+    export function backgroundPosition(...args: any[]): any;
+
+    export type BackgroundRepeatValue = string;
+    export interface BackgroundRepeatProps {
+        backgroundImage?: BackgroundRepeatValue;
+    }
+
+    export function backgroundRepeat(...args: any[]): any;
+
+    /**
+     * Misc
+     */
+
+    export type BorderRadiusValue = string | number;
+    export interface BorderRadiusProps {
+        borderRadius?: BorderRadiusValue;
+    }
+    export function borderRadius(...args: any[]): any;
+
+    export type BorderColorValue = string;
+    export interface BorderColorProps {
+        borderColor?: BorderColorValue;
+    }
+    export function borderColor(...args: any[]): any;
+
+    export type BorderValue = string | number;
+    export type ResponsiveBorderValue = ResponsiveValue<BorderValue>;
+    export interface BorderProps {
+        border?: ResponsiveBorderValue;
+        borderTop?: ResponsiveBorderValue;
+        borderRight?: ResponsiveBorderValue;
+        borderBottom?: ResponsiveBorderValue;
+        borderLeft?: ResponsiveBorderValue;
+    }
+    export function borders(...args: any[]): any;
+
+    export type BoxShadowValue = string;
+    export interface BoxShadowProps {
+        boxShadow?: BoxShadowValue;
+    }
+    export function boxShadow(...arg: any[]): any;
+
+    /**
+     * Position
+     */
+
+    export type PositionValue =
+        | "static"
+        | "relative"
+        | "absolute"
+        | "sticky"
+        | "fixed";
+    export type ResponsivePositionValue = ResponsiveValue<PositionValue>;
+    export interface PositionProps {
+        position?: ResponsivePositionValue;
+    }
+    export function position(...args: any[]): any;
+
+    export type TopValue = string | number;
+    export type ResponsiveTopValue = ResponsiveValue<TopValue>;
+    export interface TopProps {
+        top?: ResponsiveTopValue;
+    }
+    export function top(...args: any[]): any;
+
+    export type RightValue = string | number;
+    export type ResponsiveRightValue = ResponsiveValue<RightValue>;
+    export interface RightProps {
+        right?: ResponsiveRightValue;
+    }
+    export function right(...args: any[]): any;
+
+    export type BottomValue = string | number;
+    export type ResponsiveBottomValue = ResponsiveValue<BottomValue>;
+    export interface BottomProps {
+        bottom?: ResponsiveBottomValue;
+    }
+    export function bottom(...args: any[]): any;
+
+    export type LeftValue = string | number;
+    export type ResponsiveLeftValue = ResponsiveValue<LeftValue>;
+    export interface LeftProps {
+        left?: ResponsiveLeftValue;
+    }
+    export function left(...args: any[]): any;
+
+    /**
+     * Pseudo-classes
+     */
+
+    export type PseudoStyleValue = {
+        color?: string;
+        backgroundColor?: string;
+        borderColor?: string;
+        boxShadow?: number;
+    };
+    export type HoverValue = PseudoStyleValue;
+    export interface HoverProps {
+        hover?: HoverValue;
+    }
+    export function hover(...args: any[]): any;
+
+    export type FocusValue = PseudoStyleValue;
+    export interface FocusProps {
+        focus?: FocusValue;
+    }
+    export function focus(...args: any[]): any;
+
+    export type ActiveValue = PseudoStyleValue;
+    export interface ActiveProps {
+        active?: ActiveValue;
+    }
+    export function active(...args: any[]): any;
+
+    export type DisabledValue = PseudoStyleValue;
+    export interface DisabledProps {
+        disabledStyle?: DisabledValue;
+    }
+    export function disabled(...args: any[]): any;
+
+    // TODO: Continue from here
+
+    /**
+     * Utilities
+     */
+
+    export function theme(keys: string): any;
+    export function themeGet(keys: string): any;
+
+    export function cleanElement(component: any): any;
+
+    export function removeProps(props: any): any;
+
+    /**
+     * Low-level style functions
+     */
+
+    export interface LowLevelStyleFunctionArguments {
+        prop: string;
+        cssProperty?: string;
+        key?: string;
+        numberToPx?: boolean;
+    }
+
+    export function style(args: LowLevelStyleFunctionArguments): any;
+
+    export function responsiveStyle(args: LowLevelStyleFunctionArguments): any;
+
+    export function pseudoStyle(args: LowLevelStyleFunctionArguments): any;
+}
diff --git a/types/styled-system/styled-system-tests.ts b/types/styled-system/styled-system-tests.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/types/styled-system/tsconfig.json b/types/styled-system/tsconfig.json
new file mode 100644
index 0000000000..cbbfcbb662
--- /dev/null
+++ b/types/styled-system/tsconfig.json
@@ -0,0 +1,22 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+        "index.d.ts",
+        "styled-system-tests.ts"
+    ]
+}
diff --git a/types/styled-system/tslint.json b/types/styled-system/tslint.json
new file mode 100644
index 0000000000..3db14f85ea
--- /dev/null
+++ b/types/styled-system/tslint.json
@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }

From 13dbf7e7b547ea598770be563841e235ba74e885 Mon Sep 17 00:00:00 2001
From: Zephraph <zephraph@gmail.com>
Date: Mon, 18 Jun 2018 18:35:02 -0400
Subject: [PATCH 2/9] Add alias

---
 types/styled-system/index.d.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/types/styled-system/index.d.ts b/types/styled-system/index.d.ts
index 3659bd1fb2..cd99b16a63 100644
--- a/types/styled-system/index.d.ts
+++ b/types/styled-system/index.d.ts
@@ -586,6 +586,7 @@ declare module "styled-system" {
         cssProperty?: string;
         key?: string;
         numberToPx?: boolean;
+        alias?: string;
     }
 
     export function style(args: LowLevelStyleFunctionArguments): any;

From 8603ea1b69d25e2d0107ab9a36cf04f5cd83ad3e Mon Sep 17 00:00:00 2001
From: Zephraph <zephraph@gmail.com>
Date: Mon, 18 Jun 2018 18:56:42 -0400
Subject: [PATCH 3/9] Update attribution

---
 types/styled-system/index.d.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/types/styled-system/index.d.ts b/types/styled-system/index.d.ts
index cd99b16a63..b16bbd0ec6 100644
--- a/types/styled-system/index.d.ts
+++ b/types/styled-system/index.d.ts
@@ -1,6 +1,10 @@
 // Type definitions for styled-system 2.3
 // Project: https://github.com/jxnblk/styled-system#readme
-// Definitions by: Artsy <https://github.com/artsy>
+// Definitions by: Marshall Bowers <https://github.com/maxdeviant>
+//                 Ben McCormick   <https://github.com/phobon>
+//                 Justin Bennett  <https://github.com/zephraph>
+//                 Christopher Pappas <https://github.com/damassi>
+//                 Eloy Durán      <https://github.com/alloy>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 
 /**

From b96f67dab13a4d028fee7800225aa125f3208fc3 Mon Sep 17 00:00:00 2001
From: Zephraph <zephraph@gmail.com>
Date: Mon, 18 Jun 2018 19:12:12 -0400
Subject: [PATCH 4/9] Fix most lint errors

---
 types/styled-system/index.d.ts    | 1156 ++++++++++++++---------------
 types/styled-system/tsconfig.json |   14 +-
 2 files changed, 573 insertions(+), 597 deletions(-)

diff --git a/types/styled-system/index.d.ts b/types/styled-system/index.d.ts
index b16bbd0ec6..aeccbe4423 100644
--- a/types/styled-system/index.d.ts
+++ b/types/styled-system/index.d.ts
@@ -7,595 +7,577 @@
 //                 Eloy Durán      <https://github.com/alloy>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 
+// TypeScript Version: 2.1
+
 /**
- * Original Author: https://gist.github.com/maxdeviant/cfed775121829eb02283347083915383
+ * Core
  */
 
-declare module "styled-system" {
-    /**
-     * Core
-     */
-
-    export type GlobalStyleValues = "inherit" | "initial" | "unset";
-
-    export interface BaseTheme {
-        breakpoints?: number[];
-        space?: number[];
-        fontSizes?: number[];
-        colors?: {
-            [name: string]: string;
-        };
-    }
-
-    /**
-     * Space
-     */
-
-    type ResponsiveValue<T> = T | Array<T | null>;
-
-    export type SpaceValue = number | string;
-    export type ResponsiveSpaceValue = ResponsiveValue<SpaceValue>;
-
-    export interface SpaceProps {
-        m?: ResponsiveSpaceValue;
-        mt?: ResponsiveSpaceValue;
-        mr?: ResponsiveSpaceValue;
-        mb?: ResponsiveSpaceValue;
-        ml?: ResponsiveSpaceValue;
-        mx?: ResponsiveSpaceValue;
-        my?: ResponsiveSpaceValue;
-        p?: ResponsiveSpaceValue;
-        pt?: ResponsiveSpaceValue;
-        pr?: ResponsiveSpaceValue;
-        pb?: ResponsiveSpaceValue;
-        pl?: ResponsiveSpaceValue;
-        px?: ResponsiveSpaceValue;
-        py?: ResponsiveSpaceValue;
-    }
-
-    export function space(...args: any[]): any;
-
-    /**
-     * Width
-     */
-
-    export type WidthValue = number | string;
-    export type ResponsiveWidthValue = ResponsiveValue<WidthValue>;
-
-    export interface WidthProps {
-        width?: ResponsiveWidthValue;
-    }
-
-    export interface MinWidthProps {
-        minWidth?: ResponsiveWidthValue;
-    }
-
-    export interface MaxWidthProps {
-        maxWidth?: ResponsiveWidthValue;
-    }
-
-    export function width(...args: any[]): any;
-    export function minWidth(...args: any[]): any;
-    export function maxWidth(...args: any[]): any;
-
-    /**
-     * Height
-     */
-
-    export type HeightValue = number | string;
-    export type ResponsiveHeightValue = ResponsiveValue<HeightValue>;
-
-    export interface HeightProps {
-        height?: ResponsiveHeightValue;
-    }
-
-    export interface MinHeightProps {
-        minHeight?: ResponsiveHeightValue;
-    }
-
-    export interface MaxHeightProps {
-        maxHeight?: ResponsiveHeightValue;
-    }
-
-    export function height(...args: any[]): any;
-    export function minHeight(...args: any[]): any;
-    export function maxHeight(...args: any[]): any;
-
-    /**
-     * Font Size
-     */
-
-    export type FontSizeValue = number | string;
-    export type ResponsiveFontSizeValue = ResponsiveValue<FontSizeValue>;
-
-    export interface FontSizeProps {
-        fontSize?: ResponsiveFontSizeValue;
-    }
-
-    export function fontSize(...args: any[]): any;
-
-    /**
-     * Color
-     */
-    export type ColorValue = string;
-    export type ResponsiveColorValue = ResponsiveValue<ColorValue>;
-
-    export function color(...args: any[]): any;
-
-    /**
-     * Typography
-     */
-    export interface FontFamilyProps {
-        fontFamily?: string;
-    }
-    export function fontFamily(...args: any[]): any;
-
-    export type TextAlignValue =
-        | "left"
-        | "right"
-        | "center"
-        | "justify"
-        | "justify-all"
-        | "start"
-        | "end"
-        | "match-parent";
-    export type ResponsiveTextAlignValue = ResponsiveValue<TextAlignValue>;
-
-    export interface TextAlignProps {
-        align?: ResponsiveTextAlignValue;
-    }
-
-    export function textAlign(...args: any[]): any;
-
-    export type LineHeightValue = number | string;
-    export type ResponsiveLineHeightValue = ResponsiveValue<LineHeightValue>;
-    export interface LineHeightProps {
-        lineHeight?: ResponsiveLineHeightValue;
-    }
-    export function lineHeight(...args: any[]): any;
-
-    export type FontWeightValue =
-        | GlobalStyleValues
-        | "normal"
-        | "bold"
-        | "lighter"
-        | "bolder"
-        | number;
-
-    export interface FontWeightProps {
-        fontWeight?: FontWeightValue;
-    }
-
-    export function fontWeight(...args: any[]): any;
-
-    export type LetterSpacingValue = number | string;
-    export type ResponsiveLetterSpacingValue = ResponsiveValue<
-        LetterSpacingValue
-    >;
-    export interface LetterSpacingProps {
-        letterSpacing?: ResponsiveLetterSpacingValue;
-    }
-    export function letterSpacing(...args: any[]): any;
-
-    /**
-     * Layout
-     */
-
-    export type DisplayValue =
-        | "inline"
-        | "block"
-        | "contents"
-        | "flex"
-        | "grid"
-        | "inline-block";
-
-    export interface DisplayProps {
-        display?: DisplayValue;
-    }
-
-    export function display(...args: any[]): any;
-
-    export interface SizeProps {
-        size?: ResponsiveWidthValue | ResponsiveHeightValue;
-    }
-
-    export function size(...args: any[]): any;
-
-    export type RatioValue = SpaceValue;
-
-    export interface RatioProps {
-        ratio?: RatioValue;
-    }
-
-    export function ratio(...args: any[]): any;
-
-    /**
-     * Flexbox
-     */
-
-    export type AlignItemsValue =
-        | "normal"
-        | "stretch"
-        | "center"
-        | "start"
-        | "end"
-        | "flex-start"
-        | "flex-end"
-        | "self-start"
-        | "self-end"
-        | "left"
-        | "right"
-        | "baseline"
-        | "first baseline"
-        | "last baseline"
-        | "safe center"
-        | "unsafe center";
-    export type ResponsiveAlignItemsValue = ResponsiveValue<AlignItemsValue>;
-
-    export interface AlignItemsProps {
-        align?: ResponsiveAlignItemsValue;
-        alignItems?: ResponsiveAlignItemsValue;
-    }
-
-    export function alignItems(...args: any[]): any;
-
-    export type JustifyContentValue =
-        | "center"
-        | "start"
-        | "end"
-        | "flex-start"
-        | "flex-end"
-        | "left"
-        | "right"
-        | "baseline"
-        | "first baseline"
-        | "last baseline"
-        | "space-between"
-        | "space-around"
-        | "space-evenly"
-        | "stretch"
-        | "safe center"
-        | "unsafe center";
-    export type ResponsiveJustifyContentValue = ResponsiveValue<
-        JustifyContentValue
-    >;
-
-    export interface JustifyContentProps {
-        justify?: ResponsiveJustifyContentValue;
-        justifyContent?: ResponsiveJustifyContentValue;
-    }
-
-    export function justifyContent(...args: any[]): any;
-
-    export type FlexWrapValue = true | "nowrap" | "wrap" | "wrap-reverse";
-
-    export interface FlexWrapProps {
-        wrap?: FlexWrapValue;
-    }
-
-    export function flexWrap(...args: any[]): any;
-
-    export type FlexDirectionValue =
-        | GlobalStyleValues
-        | "row"
-        | "row-reverse"
-        | "column"
-        | "column-reverse";
-
-    export type ResponsiveFlexDirectionValue = ResponsiveValue<
-        FlexDirectionValue
-    >;
-
-    export interface FlexDirectionProps {
-        flexDirection?: ResponsiveFlexDirectionValue;
-    }
-
-    export function flexDirection(...args: any[]): any;
-
-    export type FlexValue = number | string;
-    export type ResponsiveFlexValue = ResponsiveValue<FlexValue>;
-
-    export interface FlexProps {
-        flex?: ResponsiveFlexValue;
-    }
-
-    export function flex(...args: any[]): any;
-
-    export type AlignContentValue =
-        | GlobalStyleValues
-        | "center"
-        | "start"
-        | "end"
-        | "flex-start"
-        | "flex-end"
-        | "normal"
-        | "baseline"
-        | "first baseline"
-        | "last baseline"
-        | "space-between"
-        | "space-around"
-        | "space-evenly"
-        | "stretch"
-        | "safe center"
-        | "unsafe center";
-    export type ResponsiveAlignContentValue = ResponsiveValue<
-        AlignContentValue
-    >;
-
-    export interface AlignContentProps {
-        alignContent?: ResponsiveAlignItemsValue;
-    }
-
-    export function alignContent(...args: any[]): any;
-
-    export type JustifySelfValue =
-        | GlobalStyleValues
-        | "auto"
-        | "normal"
-        | "stretch"
-        | "center"
-        | "start"
-        | "end"
-        | "flex-start"
-        | "flex-end"
-        | "self-start"
-        | "self-end"
-        | "left"
-        | "right"
-        | "baseline"
-        | "first baseline"
-        | "last baseline"
-        | "safe center"
-        | "unsafe center";
-
-    export type ResponsiveJustifySelfValue = ResponsiveValue<JustifySelfValue>;
-
-    export interface JustifySelfProps {
-        justifySelf?: ResponsiveJustifySelfValue;
-    }
-
-    export function justifySelf(...args: any[]): any;
-
-    export type AlignSelfValue =
-        | "auto"
-        | "normal"
-        | "center"
-        | "start"
-        | "end"
-        | "self-start"
-        | "self-end"
-        | "flex-start"
-        | "flex-end"
-        | "left"
-        | "right"
-        | "baseline"
-        | "first baseline"
-        | "last baseline"
-        | "stretch"
-        | "safe center"
-        | "unsafe center";
-    export type ResponsiveAlignSelfValue = ResponsiveValue<AlignSelfValue>;
-
-    export interface AlignSelfProps {
-        alignSelf?: ResponsiveAlignSelfValue;
-    }
-
-    export function alignSelf(...args: any[]): any;
-
-    export type OrderValue = GlobalStyleValues | number;
-    export type ResponsiveOrderValue = ResponsiveValue<OrderValue>;
-
-    export interface OrderProps {
-        order?: ResponsiveOrderValue;
-    }
-
-    export function order(...args: any[]): any;
-
-    export type FlexBasisValue =
-        | GlobalStyleValues
-        | "auto"
-        | "fill"
-        | "max-content"
-        | "min-content"
-        | "fit-content"
-        | "content";
-
-    export interface FlexBasisProps {
-        // TODO: The FlexBasisValue currently really only exists for documentation
-        //       purposes, because flex-basis also accepts `Nem` and `Npx` strings.
-        //       Not sure there’s a way to still have the union values show up as
-        //       auto-completion results.
-        flexBasis?: FlexBasisValue | string;
-    }
-
-    export function flexBasis(...args: any[]): any;
-
-    /**
-     * Grid Layout
-     */
-
-    /**
-     * Background
-     * // TODO: Flesh out these values more
-     */
-
-    export type BackgroundValue = string;
-    export interface BackgroundProps {
-        background?: BackgroundValue;
-    }
-
-    export function background(...args: any[]): any;
-
-    export type BackgroundImageValue = string;
-    export interface BackgroundImageProps {
-        /**
-         * Value will be wrapped in url()
-         */
-        backgroundImage?: BackgroundImageValue;
-    }
-
-    export function backgroundImage(...args: any[]): any;
-
-    export type BackgroundSizeValue = string;
-    export interface BackgroundSizeProps {
-        backgroundImage?: BackgroundSizeValue;
-    }
-
-    export function backgroundSize(...args: any[]): any;
-
-    export type BackgroundPositionValue = string;
-    export interface BackgroundPositionProps {
-        backgroundImage?: BackgroundPositionValue;
-    }
-
-    export function backgroundPosition(...args: any[]): any;
-
-    export type BackgroundRepeatValue = string;
-    export interface BackgroundRepeatProps {
-        backgroundImage?: BackgroundRepeatValue;
-    }
-
-    export function backgroundRepeat(...args: any[]): any;
-
-    /**
-     * Misc
-     */
-
-    export type BorderRadiusValue = string | number;
-    export interface BorderRadiusProps {
-        borderRadius?: BorderRadiusValue;
-    }
-    export function borderRadius(...args: any[]): any;
-
-    export type BorderColorValue = string;
-    export interface BorderColorProps {
-        borderColor?: BorderColorValue;
-    }
-    export function borderColor(...args: any[]): any;
-
-    export type BorderValue = string | number;
-    export type ResponsiveBorderValue = ResponsiveValue<BorderValue>;
-    export interface BorderProps {
-        border?: ResponsiveBorderValue;
-        borderTop?: ResponsiveBorderValue;
-        borderRight?: ResponsiveBorderValue;
-        borderBottom?: ResponsiveBorderValue;
-        borderLeft?: ResponsiveBorderValue;
-    }
-    export function borders(...args: any[]): any;
-
-    export type BoxShadowValue = string;
-    export interface BoxShadowProps {
-        boxShadow?: BoxShadowValue;
-    }
-    export function boxShadow(...arg: any[]): any;
-
-    /**
-     * Position
-     */
-
-    export type PositionValue =
-        | "static"
-        | "relative"
-        | "absolute"
-        | "sticky"
-        | "fixed";
-    export type ResponsivePositionValue = ResponsiveValue<PositionValue>;
-    export interface PositionProps {
-        position?: ResponsivePositionValue;
-    }
-    export function position(...args: any[]): any;
-
-    export type TopValue = string | number;
-    export type ResponsiveTopValue = ResponsiveValue<TopValue>;
-    export interface TopProps {
-        top?: ResponsiveTopValue;
-    }
-    export function top(...args: any[]): any;
-
-    export type RightValue = string | number;
-    export type ResponsiveRightValue = ResponsiveValue<RightValue>;
-    export interface RightProps {
-        right?: ResponsiveRightValue;
-    }
-    export function right(...args: any[]): any;
-
-    export type BottomValue = string | number;
-    export type ResponsiveBottomValue = ResponsiveValue<BottomValue>;
-    export interface BottomProps {
-        bottom?: ResponsiveBottomValue;
-    }
-    export function bottom(...args: any[]): any;
-
-    export type LeftValue = string | number;
-    export type ResponsiveLeftValue = ResponsiveValue<LeftValue>;
-    export interface LeftProps {
-        left?: ResponsiveLeftValue;
-    }
-    export function left(...args: any[]): any;
-
-    /**
-     * Pseudo-classes
-     */
-
-    export type PseudoStyleValue = {
-        color?: string;
-        backgroundColor?: string;
-        borderColor?: string;
-        boxShadow?: number;
+type GlobalStyleValues = "inherit" | "initial" | "unset";
+
+interface BaseTheme {
+    breakpoints?: number[];
+    space?: number[];
+    fontSizes?: number[];
+    colors?: {
+        [name: string]: string;
     };
-    export type HoverValue = PseudoStyleValue;
-    export interface HoverProps {
-        hover?: HoverValue;
-    }
-    export function hover(...args: any[]): any;
-
-    export type FocusValue = PseudoStyleValue;
-    export interface FocusProps {
-        focus?: FocusValue;
-    }
-    export function focus(...args: any[]): any;
-
-    export type ActiveValue = PseudoStyleValue;
-    export interface ActiveProps {
-        active?: ActiveValue;
-    }
-    export function active(...args: any[]): any;
-
-    export type DisabledValue = PseudoStyleValue;
-    export interface DisabledProps {
-        disabledStyle?: DisabledValue;
-    }
-    export function disabled(...args: any[]): any;
-
-    // TODO: Continue from here
-
-    /**
-     * Utilities
-     */
-
-    export function theme(keys: string): any;
-    export function themeGet(keys: string): any;
-
-    export function cleanElement(component: any): any;
-
-    export function removeProps(props: any): any;
-
-    /**
-     * Low-level style functions
-     */
-
-    export interface LowLevelStyleFunctionArguments {
-        prop: string;
-        cssProperty?: string;
-        key?: string;
-        numberToPx?: boolean;
-        alias?: string;
-    }
-
-    export function style(args: LowLevelStyleFunctionArguments): any;
-
-    export function responsiveStyle(args: LowLevelStyleFunctionArguments): any;
-
-    export function pseudoStyle(args: LowLevelStyleFunctionArguments): any;
 }
+
+/**
+ * Space
+ */
+
+type ResponsiveValue<T> = T | Array<T | null>;
+
+type SpaceValue = number | string;
+type ResponsiveSpaceValue = ResponsiveValue<SpaceValue>;
+
+interface SpaceProps {
+    m?: ResponsiveSpaceValue;
+    mt?: ResponsiveSpaceValue;
+    mr?: ResponsiveSpaceValue;
+    mb?: ResponsiveSpaceValue;
+    ml?: ResponsiveSpaceValue;
+    mx?: ResponsiveSpaceValue;
+    my?: ResponsiveSpaceValue;
+    p?: ResponsiveSpaceValue;
+    pt?: ResponsiveSpaceValue;
+    pr?: ResponsiveSpaceValue;
+    pb?: ResponsiveSpaceValue;
+    pl?: ResponsiveSpaceValue;
+    px?: ResponsiveSpaceValue;
+    py?: ResponsiveSpaceValue;
+}
+
+declare function space(...args: any[]): any;
+
+/**
+ * Width
+ */
+
+type WidthValue = number | string;
+type ResponsiveWidthValue = ResponsiveValue<WidthValue>;
+
+interface WidthProps {
+    width?: ResponsiveWidthValue;
+}
+
+interface MinWidthProps {
+    minWidth?: ResponsiveWidthValue;
+}
+
+interface MaxWidthProps {
+    maxWidth?: ResponsiveWidthValue;
+}
+
+declare function width(...args: any[]): any;
+declare function minWidth(...args: any[]): any;
+declare function maxWidth(...args: any[]): any;
+
+/**
+ * Height
+ */
+
+type HeightValue = number | string;
+type ResponsiveHeightValue = ResponsiveValue<HeightValue>;
+
+interface HeightProps {
+    height?: ResponsiveHeightValue;
+}
+
+interface MinHeightProps {
+    minHeight?: ResponsiveHeightValue;
+}
+
+interface MaxHeightProps {
+    maxHeight?: ResponsiveHeightValue;
+}
+
+declare function height(...args: any[]): any;
+declare function minHeight(...args: any[]): any;
+declare function maxHeight(...args: any[]): any;
+
+/**
+ * Font Size
+ */
+
+type FontSizeValue = number | string;
+type ResponsiveFontSizeValue = ResponsiveValue<FontSizeValue>;
+
+interface FontSizeProps {
+    fontSize?: ResponsiveFontSizeValue;
+}
+
+declare function fontSize(...args: any[]): any;
+
+/**
+ * Color
+ */
+type ColorValue = string;
+type ResponsiveColorValue = ResponsiveValue<ColorValue>;
+
+declare function color(...args: any[]): any;
+
+/**
+ * Typography
+ */
+interface FontFamilyProps {
+    fontFamily?: string;
+}
+declare function fontFamily(...args: any[]): any;
+
+type TextAlignValue =
+    | "left"
+    | "right"
+    | "center"
+    | "justify"
+    | "justify-all"
+    | "start"
+    | "end"
+    | "match-parent";
+type ResponsiveTextAlignValue = ResponsiveValue<TextAlignValue>;
+
+interface TextAlignProps {
+    align?: ResponsiveTextAlignValue;
+}
+
+declare function textAlign(...args: any[]): any;
+
+type LineHeightValue = number | string;
+type ResponsiveLineHeightValue = ResponsiveValue<LineHeightValue>;
+interface LineHeightProps {
+    lineHeight?: ResponsiveLineHeightValue;
+}
+declare function lineHeight(...args: any[]): any;
+
+type FontWeightValue =
+    | GlobalStyleValues
+    | "normal"
+    | "bold"
+    | "lighter"
+    | "bolder"
+    | number;
+
+interface FontWeightProps {
+    fontWeight?: FontWeightValue;
+}
+
+declare function fontWeight(...args: any[]): any;
+
+type LetterSpacingValue = number | string;
+type ResponsiveLetterSpacingValue = ResponsiveValue<LetterSpacingValue>;
+interface LetterSpacingProps {
+    letterSpacing?: ResponsiveLetterSpacingValue;
+}
+declare function letterSpacing(...args: any[]): any;
+
+/**
+ * Layout
+ */
+
+type DisplayValue =
+    | "inline"
+    | "block"
+    | "contents"
+    | "flex"
+    | "grid"
+    | "inline-block";
+
+interface DisplayProps {
+    display?: DisplayValue;
+}
+
+declare function display(...args: any[]): any;
+
+interface SizeProps {
+    size?: ResponsiveWidthValue | ResponsiveHeightValue;
+}
+
+declare function size(...args: any[]): any;
+
+type RatioValue = SpaceValue;
+
+interface RatioProps {
+    ratio?: RatioValue;
+}
+
+declare function ratio(...args: any[]): any;
+
+/**
+ * Flexbox
+ */
+
+type AlignItemsValue =
+    | "normal"
+    | "stretch"
+    | "center"
+    | "start"
+    | "end"
+    | "flex-start"
+    | "flex-end"
+    | "self-start"
+    | "self-end"
+    | "left"
+    | "right"
+    | "baseline"
+    | "first baseline"
+    | "last baseline"
+    | "safe center"
+    | "unsafe center";
+type ResponsiveAlignItemsValue = ResponsiveValue<AlignItemsValue>;
+
+interface AlignItemsProps {
+    align?: ResponsiveAlignItemsValue;
+    alignItems?: ResponsiveAlignItemsValue;
+}
+
+declare function alignItems(...args: any[]): any;
+
+type JustifyContentValue =
+    | "center"
+    | "start"
+    | "end"
+    | "flex-start"
+    | "flex-end"
+    | "left"
+    | "right"
+    | "baseline"
+    | "first baseline"
+    | "last baseline"
+    | "space-between"
+    | "space-around"
+    | "space-evenly"
+    | "stretch"
+    | "safe center"
+    | "unsafe center";
+type ResponsiveJustifyContentValue = ResponsiveValue<JustifyContentValue>;
+
+interface JustifyContentProps {
+    justify?: ResponsiveJustifyContentValue;
+    justifyContent?: ResponsiveJustifyContentValue;
+}
+
+declare function justifyContent(...args: any[]): any;
+
+type FlexWrapValue = true | "nowrap" | "wrap" | "wrap-reverse";
+
+interface FlexWrapProps {
+    wrap?: FlexWrapValue;
+}
+
+declare function flexWrap(...args: any[]): any;
+
+type FlexDirectionValue =
+    | GlobalStyleValues
+    | "row"
+    | "row-reverse"
+    | "column"
+    | "column-reverse";
+
+type ResponsiveFlexDirectionValue = ResponsiveValue<FlexDirectionValue>;
+
+interface FlexDirectionProps {
+    flexDirection?: ResponsiveFlexDirectionValue;
+}
+
+declare function flexDirection(...args: any[]): any;
+
+type FlexValue = number | string;
+type ResponsiveFlexValue = ResponsiveValue<FlexValue>;
+
+interface FlexProps {
+    flex?: ResponsiveFlexValue;
+}
+
+declare function flex(...args: any[]): any;
+
+type AlignContentValue =
+    | GlobalStyleValues
+    | "center"
+    | "start"
+    | "end"
+    | "flex-start"
+    | "flex-end"
+    | "normal"
+    | "baseline"
+    | "first baseline"
+    | "last baseline"
+    | "space-between"
+    | "space-around"
+    | "space-evenly"
+    | "stretch"
+    | "safe center"
+    | "unsafe center";
+type ResponsiveAlignContentValue = ResponsiveValue<AlignContentValue>;
+
+interface AlignContentProps {
+    alignContent?: ResponsiveAlignItemsValue;
+}
+
+declare function alignContent(...args: any[]): any;
+
+type JustifySelfValue =
+    | GlobalStyleValues
+    | "auto"
+    | "normal"
+    | "stretch"
+    | "center"
+    | "start"
+    | "end"
+    | "flex-start"
+    | "flex-end"
+    | "self-start"
+    | "self-end"
+    | "left"
+    | "right"
+    | "baseline"
+    | "first baseline"
+    | "last baseline"
+    | "safe center"
+    | "unsafe center";
+
+type ResponsiveJustifySelfValue = ResponsiveValue<JustifySelfValue>;
+
+interface JustifySelfProps {
+    justifySelf?: ResponsiveJustifySelfValue;
+}
+
+declare function justifySelf(...args: any[]): any;
+
+type AlignSelfValue =
+    | "auto"
+    | "normal"
+    | "center"
+    | "start"
+    | "end"
+    | "self-start"
+    | "self-end"
+    | "flex-start"
+    | "flex-end"
+    | "left"
+    | "right"
+    | "baseline"
+    | "first baseline"
+    | "last baseline"
+    | "stretch"
+    | "safe center"
+    | "unsafe center";
+type ResponsiveAlignSelfValue = ResponsiveValue<AlignSelfValue>;
+
+interface AlignSelfProps {
+    alignSelf?: ResponsiveAlignSelfValue;
+}
+
+declare function alignSelf(...args: any[]): any;
+
+type OrderValue = GlobalStyleValues | number;
+type ResponsiveOrderValue = ResponsiveValue<OrderValue>;
+
+interface OrderProps {
+    order?: ResponsiveOrderValue;
+}
+
+declare function order(...args: any[]): any;
+
+type FlexBasisValue =
+    | GlobalStyleValues
+    | "auto"
+    | "fill"
+    | "max-content"
+    | "min-content"
+    | "fit-content"
+    | "content";
+
+interface FlexBasisProps {
+    // TODO: The FlexBasisValue currently really only exists for documentation
+    //       purposes, because flex-basis also accepts `Nem` and `Npx` strings.
+    //       Not sure there’s a way to still have the union values show up as
+    //       auto-completion results.
+    flexBasis?: FlexBasisValue | string;
+}
+
+declare function flexBasis(...args: any[]): any;
+
+/**
+ * Grid Layout
+ */
+
+// TODO: Add grid values
+
+/**
+ * Background
+ */
+
+type BackgroundValue = string;
+interface BackgroundProps {
+    background?: BackgroundValue;
+}
+
+declare function background(...args: any[]): any;
+
+type BackgroundImageValue = string;
+interface BackgroundImageProps {
+    /**
+     * Value will be wrapped in url()
+     */
+    backgroundImage?: BackgroundImageValue;
+}
+
+declare function backgroundImage(...args: any[]): any;
+
+type BackgroundSizeValue = string;
+interface BackgroundSizeProps {
+    backgroundImage?: BackgroundSizeValue;
+}
+
+declare function backgroundSize(...args: any[]): any;
+
+type BackgroundPositionValue = string;
+interface BackgroundPositionProps {
+    backgroundImage?: BackgroundPositionValue;
+}
+
+declare function backgroundPosition(...args: any[]): any;
+
+type BackgroundRepeatValue = string;
+interface BackgroundRepeatProps {
+    backgroundImage?: BackgroundRepeatValue;
+}
+
+declare function backgroundRepeat(...args: any[]): any;
+
+/**
+ * Misc
+ */
+
+type BorderRadiusValue = string | number;
+interface BorderRadiusProps {
+    borderRadius?: BorderRadiusValue;
+}
+declare function borderRadius(...args: any[]): any;
+
+type BorderColorValue = string;
+interface BorderColorProps {
+    borderColor?: BorderColorValue;
+}
+declare function borderColor(...args: any[]): any;
+
+type BorderValue = string | number;
+type ResponsiveBorderValue = ResponsiveValue<BorderValue>;
+interface BorderProps {
+    border?: ResponsiveBorderValue;
+    borderTop?: ResponsiveBorderValue;
+    borderRight?: ResponsiveBorderValue;
+    borderBottom?: ResponsiveBorderValue;
+    borderLeft?: ResponsiveBorderValue;
+}
+declare function borders(...args: any[]): any;
+
+type BoxShadowValue = string;
+interface BoxShadowProps {
+    boxShadow?: BoxShadowValue;
+}
+declare function boxShadow(...arg: any[]): any;
+
+/**
+ * Position
+ */
+
+type PositionValue = "static" | "relative" | "absolute" | "sticky" | "fixed";
+type ResponsivePositionValue = ResponsiveValue<PositionValue>;
+interface PositionProps {
+    position?: ResponsivePositionValue;
+}
+declare function position(...args: any[]): any;
+
+type TopValue = string | number;
+type ResponsiveTopValue = ResponsiveValue<TopValue>;
+interface TopProps {
+    top?: ResponsiveTopValue;
+}
+declare function top(...args: any[]): any;
+
+type RightValue = string | number;
+type ResponsiveRightValue = ResponsiveValue<RightValue>;
+interface RightProps {
+    right?: ResponsiveRightValue;
+}
+declare function right(...args: any[]): any;
+
+type BottomValue = string | number;
+type ResponsiveBottomValue = ResponsiveValue<BottomValue>;
+interface BottomProps {
+    bottom?: ResponsiveBottomValue;
+}
+declare function bottom(...args: any[]): any;
+
+type LeftValue = string | number;
+type ResponsiveLeftValue = ResponsiveValue<LeftValue>;
+interface LeftProps {
+    left?: ResponsiveLeftValue;
+}
+declare function left(...args: any[]): any;
+
+/**
+ * Pseudo-classes
+ */
+
+interface PseudoStyleValue {
+    color?: string;
+    backgroundColor?: string;
+    borderColor?: string;
+    boxShadow?: number;
+}
+type HoverValue = PseudoStyleValue;
+interface HoverProps {
+    hover?: HoverValue;
+}
+declare function hover(...args: any[]): any;
+
+type FocusValue = PseudoStyleValue;
+interface FocusProps {
+    focus?: FocusValue;
+}
+declare function focus(...args: any[]): any;
+
+type ActiveValue = PseudoStyleValue;
+interface ActiveProps {
+    active?: ActiveValue;
+}
+declare function active(...args: any[]): any;
+
+type DisabledValue = PseudoStyleValue;
+interface DisabledProps {
+    disabledStyle?: DisabledValue;
+}
+declare function disabled(...args: any[]): any;
+
+/**
+ * Utilities
+ */
+
+declare function theme(keys: string): any;
+declare function themeGet(keys: string): any;
+
+declare function cleanElement(component: any): any;
+
+declare function removeProps(props: any): any;
+
+/**
+ * Low-level style declare functions
+ */
+
+interface LowLevelStylefunctionArguments {
+    prop: string;
+    cssProperty?: string;
+    key?: string;
+    numberToPx?: boolean;
+    alias?: string;
+}
+
+declare function style(args: LowLevelStylefunctionArguments): any;
+
+declare function responsiveStyle(args: LowLevelStylefunctionArguments): any;
+
+declare function pseudoStyle(args: LowLevelStylefunctionArguments): any;
diff --git a/types/styled-system/tsconfig.json b/types/styled-system/tsconfig.json
index cbbfcbb662..12bdc137c0 100644
--- a/types/styled-system/tsconfig.json
+++ b/types/styled-system/tsconfig.json
@@ -1,22 +1,16 @@
 {
     "compilerOptions": {
         "module": "commonjs",
-        "lib": [
-            "es6"
-        ],
+        "lib": ["es6"],
         "noImplicitAny": true,
         "noImplicitThis": true,
         "strictNullChecks": true,
+        "strictFunctionTypes": true,
         "baseUrl": "../",
-        "typeRoots": [
-            "../"
-        ],
+        "typeRoots": ["../"],
         "types": [],
         "noEmit": true,
         "forceConsistentCasingInFileNames": true
     },
-    "files": [
-        "index.d.ts",
-        "styled-system-tests.ts"
-    ]
+    "files": ["index.d.ts", "styled-system-tests.ts"]
 }

From 56dddff23588718bf6d3a91dc9350e95401ecbfa Mon Sep 17 00:00:00 2001
From: Zephraph <zephraph@gmail.com>
Date: Tue, 19 Jun 2018 08:48:04 -0400
Subject: [PATCH 5/9] Add getter for style function

---
 types/styled-system/index.d.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/types/styled-system/index.d.ts b/types/styled-system/index.d.ts
index aeccbe4423..b26b81488d 100644
--- a/types/styled-system/index.d.ts
+++ b/types/styled-system/index.d.ts
@@ -574,6 +574,7 @@ interface LowLevelStylefunctionArguments {
     key?: string;
     numberToPx?: boolean;
     alias?: string;
+    getter?: Function;
 }
 
 declare function style(args: LowLevelStylefunctionArguments): any;

From 25f9ceec54defc8102ce2184ac66ea44d3cb5943 Mon Sep 17 00:00:00 2001
From: Zephraph <zephraph@gmail.com>
Date: Tue, 19 Jun 2018 17:51:22 -0400
Subject: [PATCH 6/9] Update getter definition

---
 types/styled-system/index.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/types/styled-system/index.d.ts b/types/styled-system/index.d.ts
index b26b81488d..958169831e 100644
--- a/types/styled-system/index.d.ts
+++ b/types/styled-system/index.d.ts
@@ -574,7 +574,7 @@ interface LowLevelStylefunctionArguments {
     key?: string;
     numberToPx?: boolean;
     alias?: string;
-    getter?: Function;
+    getter?: () => any;
 }
 
 declare function style(args: LowLevelStylefunctionArguments): any;

From 53e501a2921a604a7eaa774da57d44f22fbf6310 Mon Sep 17 00:00:00 2001
From: Zephraph <zephraph@gmail.com>
Date: Wed, 20 Jun 2018 12:47:06 -0400
Subject: [PATCH 7/9] Add tests, fixed some type issues

---
 types/styled-system/index.d.ts              | 370 +++++++++++---------
 types/styled-system/package.json            |   6 +
 types/styled-system/styled-system-tests.ts  |   0
 types/styled-system/styled-system-tests.tsx | 351 +++++++++++++++++++
 types/styled-system/tsconfig.json           |   3 +-
 5 files changed, 554 insertions(+), 176 deletions(-)
 create mode 100644 types/styled-system/package.json
 delete mode 100644 types/styled-system/styled-system-tests.ts
 create mode 100644 types/styled-system/styled-system-tests.tsx

diff --git a/types/styled-system/index.d.ts b/types/styled-system/index.d.ts
index 958169831e..1ca193f899 100644
--- a/types/styled-system/index.d.ts
+++ b/types/styled-system/index.d.ts
@@ -7,15 +7,15 @@
 //                 Eloy Durán      <https://github.com/alloy>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 
-// TypeScript Version: 2.1
+// TypeScript Version: 2.2
 
 /**
  * Core
  */
 
-type GlobalStyleValues = "inherit" | "initial" | "unset";
+export type GlobalStyleValues = "inherit" | "initial" | "unset";
 
-interface BaseTheme {
+export interface BaseTheme {
     breakpoints?: number[];
     space?: number[];
     fontSizes?: number[];
@@ -28,12 +28,12 @@ interface BaseTheme {
  * Space
  */
 
-type ResponsiveValue<T> = T | Array<T | null>;
+export type ResponsiveValue<T> = T | Array<T | null>;
 
-type SpaceValue = number | string;
-type ResponsiveSpaceValue = ResponsiveValue<SpaceValue>;
+export type SpaceValue = number | string;
+export type ResponsiveSpaceValue = ResponsiveValue<SpaceValue>;
 
-interface SpaceProps {
+export interface SpaceProps {
     m?: ResponsiveSpaceValue;
     mt?: ResponsiveSpaceValue;
     mr?: ResponsiveSpaceValue;
@@ -50,84 +50,88 @@ interface SpaceProps {
     py?: ResponsiveSpaceValue;
 }
 
-declare function space(...args: any[]): any;
+export function space(...args: any[]): any;
 
 /**
  * Width
  */
 
-type WidthValue = number | string;
-type ResponsiveWidthValue = ResponsiveValue<WidthValue>;
+export type WidthValue = number | string;
+export type ResponsiveWidthValue = ResponsiveValue<WidthValue>;
 
-interface WidthProps {
+export interface WidthProps {
     width?: ResponsiveWidthValue;
 }
 
-interface MinWidthProps {
+export interface MinWidthProps {
     minWidth?: ResponsiveWidthValue;
 }
 
-interface MaxWidthProps {
+export interface MaxWidthProps {
     maxWidth?: ResponsiveWidthValue;
 }
 
-declare function width(...args: any[]): any;
-declare function minWidth(...args: any[]): any;
-declare function maxWidth(...args: any[]): any;
+export function width(...args: any[]): any;
+export function minWidth(...args: any[]): any;
+export function maxWidth(...args: any[]): any;
 
 /**
  * Height
  */
 
-type HeightValue = number | string;
-type ResponsiveHeightValue = ResponsiveValue<HeightValue>;
+export type HeightValue = number | string;
+export type ResponsiveHeightValue = ResponsiveValue<HeightValue>;
 
-interface HeightProps {
+export interface HeightProps {
     height?: ResponsiveHeightValue;
 }
 
-interface MinHeightProps {
+export interface MinHeightProps {
     minHeight?: ResponsiveHeightValue;
 }
 
-interface MaxHeightProps {
+export interface MaxHeightProps {
     maxHeight?: ResponsiveHeightValue;
 }
 
-declare function height(...args: any[]): any;
-declare function minHeight(...args: any[]): any;
-declare function maxHeight(...args: any[]): any;
+export function height(...args: any[]): any;
+export function minHeight(...args: any[]): any;
+export function maxHeight(...args: any[]): any;
 
 /**
  * Font Size
  */
 
-type FontSizeValue = number | string;
-type ResponsiveFontSizeValue = ResponsiveValue<FontSizeValue>;
+export type FontSizeValue = number | string;
+export type ResponsiveFontSizeValue = ResponsiveValue<FontSizeValue>;
 
-interface FontSizeProps {
+export interface FontSizeProps {
     fontSize?: ResponsiveFontSizeValue;
 }
 
-declare function fontSize(...args: any[]): any;
+export function fontSize(...args: any[]): any;
 
 /**
  * Color
  */
-type ColorValue = string;
-type ResponsiveColorValue = ResponsiveValue<ColorValue>;
+export type ColorValue = string;
+export type ResponsiveColorValue = ResponsiveValue<ColorValue>;
 
-declare function color(...args: any[]): any;
+export interface ColorProps {
+    color?: ResponsiveColorValue;
+}
+
+export function color(...args: any[]): any;
 
 /**
  * Typography
  */
-interface FontFamilyProps {
+export interface FontFamilyProps {
     fontFamily?: string;
 }
-declare function fontFamily(...args: any[]): any;
+export function fontFamily(...args: any[]): any;
 
-type TextAlignValue =
+export type TextAlignValue =
     | "left"
     | "right"
     | "center"
@@ -136,22 +140,22 @@ type TextAlignValue =
     | "start"
     | "end"
     | "match-parent";
-type ResponsiveTextAlignValue = ResponsiveValue<TextAlignValue>;
+export type ResponsiveTextAlignValue = ResponsiveValue<TextAlignValue>;
 
-interface TextAlignProps {
-    align?: ResponsiveTextAlignValue;
+export interface TextAlignProps {
+    textAlign?: ResponsiveTextAlignValue;
 }
 
-declare function textAlign(...args: any[]): any;
+export function textAlign(...args: any[]): any;
 
-type LineHeightValue = number | string;
-type ResponsiveLineHeightValue = ResponsiveValue<LineHeightValue>;
-interface LineHeightProps {
+export type LineHeightValue = number | string;
+export type ResponsiveLineHeightValue = ResponsiveValue<LineHeightValue>;
+export interface LineHeightProps {
     lineHeight?: ResponsiveLineHeightValue;
 }
-declare function lineHeight(...args: any[]): any;
+export function lineHeight(...args: any[]): any;
 
-type FontWeightValue =
+export type FontWeightValue =
     | GlobalStyleValues
     | "normal"
     | "bold"
@@ -159,56 +163,56 @@ type FontWeightValue =
     | "bolder"
     | number;
 
-interface FontWeightProps {
+export interface FontWeightProps {
     fontWeight?: FontWeightValue;
 }
 
-declare function fontWeight(...args: any[]): any;
+export function fontWeight(...args: any[]): any;
 
-type LetterSpacingValue = number | string;
-type ResponsiveLetterSpacingValue = ResponsiveValue<LetterSpacingValue>;
-interface LetterSpacingProps {
+export type LetterSpacingValue = number | string;
+export type ResponsiveLetterSpacingValue = ResponsiveValue<LetterSpacingValue>;
+export interface LetterSpacingProps {
     letterSpacing?: ResponsiveLetterSpacingValue;
 }
-declare function letterSpacing(...args: any[]): any;
+export function letterSpacing(...args: any[]): any;
 
 /**
  * Layout
  */
 
-type DisplayValue =
+export type DisplayValue =
     | "inline"
     | "block"
     | "contents"
     | "flex"
     | "grid"
     | "inline-block";
-
-interface DisplayProps {
-    display?: DisplayValue;
+export type ResponsiveDisplayValue = ResponsiveValue<DisplayValue>;
+export interface DisplayProps {
+    display?: ResponsiveDisplayValue;
 }
 
-declare function display(...args: any[]): any;
+export function display(...args: any[]): any;
 
-interface SizeProps {
+export interface SizeProps {
     size?: ResponsiveWidthValue | ResponsiveHeightValue;
 }
 
-declare function size(...args: any[]): any;
+export function size(...args: any[]): any;
 
-type RatioValue = SpaceValue;
+export type RatioValue = SpaceValue;
 
-interface RatioProps {
+export interface RatioProps {
     ratio?: RatioValue;
 }
 
-declare function ratio(...args: any[]): any;
+export function ratio(...args: any[]): any;
 
 /**
  * Flexbox
  */
 
-type AlignItemsValue =
+export type AlignItemsValue =
     | "normal"
     | "stretch"
     | "center"
@@ -225,16 +229,16 @@ type AlignItemsValue =
     | "last baseline"
     | "safe center"
     | "unsafe center";
-type ResponsiveAlignItemsValue = ResponsiveValue<AlignItemsValue>;
+export type ResponsiveAlignItemsValue = ResponsiveValue<AlignItemsValue>;
 
-interface AlignItemsProps {
+export interface AlignItemsProps {
     align?: ResponsiveAlignItemsValue;
     alignItems?: ResponsiveAlignItemsValue;
 }
 
-declare function alignItems(...args: any[]): any;
+export function alignItems(...args: any[]): any;
 
-type JustifyContentValue =
+export type JustifyContentValue =
     | "center"
     | "start"
     | "end"
@@ -251,48 +255,50 @@ type JustifyContentValue =
     | "stretch"
     | "safe center"
     | "unsafe center";
-type ResponsiveJustifyContentValue = ResponsiveValue<JustifyContentValue>;
+export type ResponsiveJustifyContentValue = ResponsiveValue<
+    JustifyContentValue
+>;
 
-interface JustifyContentProps {
+export interface JustifyContentProps {
     justify?: ResponsiveJustifyContentValue;
     justifyContent?: ResponsiveJustifyContentValue;
 }
 
-declare function justifyContent(...args: any[]): any;
+export function justifyContent(...args: any[]): any;
 
-type FlexWrapValue = true | "nowrap" | "wrap" | "wrap-reverse";
+export type FlexWrapValue = true | "nowrap" | "wrap" | "wrap-reverse";
 
-interface FlexWrapProps {
-    wrap?: FlexWrapValue;
+export interface FlexWrapProps {
+    flexWrap?: FlexWrapValue;
 }
 
-declare function flexWrap(...args: any[]): any;
+export function flexWrap(...args: any[]): any;
 
-type FlexDirectionValue =
+export type FlexDirectionValue =
     | GlobalStyleValues
     | "row"
     | "row-reverse"
     | "column"
     | "column-reverse";
 
-type ResponsiveFlexDirectionValue = ResponsiveValue<FlexDirectionValue>;
+export type ResponsiveFlexDirectionValue = ResponsiveValue<FlexDirectionValue>;
 
-interface FlexDirectionProps {
+export interface FlexDirectionProps {
     flexDirection?: ResponsiveFlexDirectionValue;
 }
 
-declare function flexDirection(...args: any[]): any;
+export function flexDirection(...args: any[]): any;
 
-type FlexValue = number | string;
-type ResponsiveFlexValue = ResponsiveValue<FlexValue>;
+export type FlexValue = number | string;
+export type ResponsiveFlexValue = ResponsiveValue<FlexValue>;
 
-interface FlexProps {
+export interface FlexProps {
     flex?: ResponsiveFlexValue;
 }
 
-declare function flex(...args: any[]): any;
+export function flex(...args: any[]): any;
 
-type AlignContentValue =
+export type AlignContentValue =
     | GlobalStyleValues
     | "center"
     | "start"
@@ -309,15 +315,15 @@ type AlignContentValue =
     | "stretch"
     | "safe center"
     | "unsafe center";
-type ResponsiveAlignContentValue = ResponsiveValue<AlignContentValue>;
+export type ResponsiveAlignContentValue = ResponsiveValue<AlignContentValue>;
 
-interface AlignContentProps {
+export interface AlignContentProps {
     alignContent?: ResponsiveAlignItemsValue;
 }
 
-declare function alignContent(...args: any[]): any;
+export function alignContent(...args: any[]): any;
 
-type JustifySelfValue =
+export type JustifySelfValue =
     | GlobalStyleValues
     | "auto"
     | "normal"
@@ -337,15 +343,15 @@ type JustifySelfValue =
     | "safe center"
     | "unsafe center";
 
-type ResponsiveJustifySelfValue = ResponsiveValue<JustifySelfValue>;
+export type ResponsiveJustifySelfValue = ResponsiveValue<JustifySelfValue>;
 
-interface JustifySelfProps {
+export interface JustifySelfProps {
     justifySelf?: ResponsiveJustifySelfValue;
 }
 
-declare function justifySelf(...args: any[]): any;
+export function justifySelf(...args: any[]): any;
 
-type AlignSelfValue =
+export type AlignSelfValue =
     | "auto"
     | "normal"
     | "center"
@@ -363,24 +369,24 @@ type AlignSelfValue =
     | "stretch"
     | "safe center"
     | "unsafe center";
-type ResponsiveAlignSelfValue = ResponsiveValue<AlignSelfValue>;
+export type ResponsiveAlignSelfValue = ResponsiveValue<AlignSelfValue>;
 
-interface AlignSelfProps {
+export interface AlignSelfProps {
     alignSelf?: ResponsiveAlignSelfValue;
 }
 
-declare function alignSelf(...args: any[]): any;
+export function alignSelf(...args: any[]): any;
 
-type OrderValue = GlobalStyleValues | number;
-type ResponsiveOrderValue = ResponsiveValue<OrderValue>;
+export type OrderValue = GlobalStyleValues | number;
+export type ResponsiveOrderValue = ResponsiveValue<OrderValue>;
 
-interface OrderProps {
+export interface OrderProps {
     order?: ResponsiveOrderValue;
 }
 
-declare function order(...args: any[]): any;
+export function order(...args: any[]): any;
 
-type FlexBasisValue =
+export type FlexBasisValue =
     | GlobalStyleValues
     | "auto"
     | "fill"
@@ -389,7 +395,7 @@ type FlexBasisValue =
     | "fit-content"
     | "content";
 
-interface FlexBasisProps {
+export interface FlexBasisProps {
     // TODO: The FlexBasisValue currently really only exists for documentation
     //       purposes, because flex-basis also accepts `Nem` and `Npx` strings.
     //       Not sure there’s a way to still have the union values show up as
@@ -397,7 +403,7 @@ interface FlexBasisProps {
     flexBasis?: FlexBasisValue | string;
 }
 
-declare function flexBasis(...args: any[]): any;
+export function flexBasis(...args: any[]): any;
 
 /**
  * Grid Layout
@@ -409,166 +415,180 @@ declare function flexBasis(...args: any[]): any;
  * Background
  */
 
-type BackgroundValue = string;
-interface BackgroundProps {
+export type BackgroundValue = string;
+export interface BackgroundProps {
     background?: BackgroundValue;
+    bg?: BackgroundValue;
 }
 
-declare function background(...args: any[]): any;
+export function background(...args: any[]): any;
 
-type BackgroundImageValue = string;
-interface BackgroundImageProps {
+export type BackgroundImageValue = string;
+export interface BackgroundImageProps {
     /**
      * Value will be wrapped in url()
      */
     backgroundImage?: BackgroundImageValue;
 }
 
-declare function backgroundImage(...args: any[]): any;
+export function backgroundImage(...args: any[]): any;
 
-type BackgroundSizeValue = string;
-interface BackgroundSizeProps {
-    backgroundImage?: BackgroundSizeValue;
+export type BackgroundSizeValue = string;
+export interface BackgroundSizeProps {
+    backgroundSize?: BackgroundSizeValue;
 }
 
-declare function backgroundSize(...args: any[]): any;
+export function backgroundSize(...args: any[]): any;
 
-type BackgroundPositionValue = string;
-interface BackgroundPositionProps {
-    backgroundImage?: BackgroundPositionValue;
+export type BackgroundPositionValue = string;
+export interface BackgroundPositionProps {
+    backgroundPosition?: BackgroundPositionValue;
 }
 
-declare function backgroundPosition(...args: any[]): any;
+export function backgroundPosition(...args: any[]): any;
 
-type BackgroundRepeatValue = string;
-interface BackgroundRepeatProps {
-    backgroundImage?: BackgroundRepeatValue;
+export type BackgroundRepeatValue = string;
+export interface BackgroundRepeatProps {
+    backgroundRepeat?: BackgroundRepeatValue;
 }
 
-declare function backgroundRepeat(...args: any[]): any;
+export function backgroundRepeat(...args: any[]): any;
 
 /**
  * Misc
  */
 
-type BorderRadiusValue = string | number;
-interface BorderRadiusProps {
+export type BorderRadiusValue = string | number;
+export interface BorderRadiusProps {
     borderRadius?: BorderRadiusValue;
 }
-declare function borderRadius(...args: any[]): any;
+export function borderRadius(...args: any[]): any;
 
-type BorderColorValue = string;
-interface BorderColorProps {
+export type BorderColorValue = string;
+export interface BorderColorProps {
     borderColor?: BorderColorValue;
 }
-declare function borderColor(...args: any[]): any;
+export function borderColor(...args: any[]): any;
 
-type BorderValue = string | number;
-type ResponsiveBorderValue = ResponsiveValue<BorderValue>;
-interface BorderProps {
+export type BorderValue = string | number;
+export type ResponsiveBorderValue = ResponsiveValue<BorderValue>;
+export interface BorderProps {
     border?: ResponsiveBorderValue;
     borderTop?: ResponsiveBorderValue;
     borderRight?: ResponsiveBorderValue;
     borderBottom?: ResponsiveBorderValue;
     borderLeft?: ResponsiveBorderValue;
 }
-declare function borders(...args: any[]): any;
+export function borders(...args: any[]): any;
 
-type BoxShadowValue = string;
-interface BoxShadowProps {
+export type BoxShadowValue = string | number;
+export interface BoxShadowProps {
     boxShadow?: BoxShadowValue;
 }
-declare function boxShadow(...arg: any[]): any;
+export function boxShadow(...arg: any[]): any;
 
 /**
  * Position
  */
 
-type PositionValue = "static" | "relative" | "absolute" | "sticky" | "fixed";
-type ResponsivePositionValue = ResponsiveValue<PositionValue>;
-interface PositionProps {
+export type PositionValue =
+    | "static"
+    | "relative"
+    | "absolute"
+    | "sticky"
+    | "fixed";
+export type ResponsivePositionValue = ResponsiveValue<PositionValue>;
+export interface PositionProps {
     position?: ResponsivePositionValue;
 }
-declare function position(...args: any[]): any;
+export function position(...args: any[]): any;
 
-type TopValue = string | number;
-type ResponsiveTopValue = ResponsiveValue<TopValue>;
-interface TopProps {
+export type ZIndexValue = GlobalStyleValues | "auto" | number;
+
+export interface ZIndexProps {
+    zIndex?: ZIndexValue;
+}
+export function zIndex(...args: any[]): any;
+
+export type TopValue = string | number;
+export type ResponsiveTopValue = ResponsiveValue<TopValue>;
+export interface TopProps {
     top?: ResponsiveTopValue;
 }
-declare function top(...args: any[]): any;
+export function top(...args: any[]): any;
 
-type RightValue = string | number;
-type ResponsiveRightValue = ResponsiveValue<RightValue>;
-interface RightProps {
+export type RightValue = string | number;
+export type ResponsiveRightValue = ResponsiveValue<RightValue>;
+export interface RightProps {
     right?: ResponsiveRightValue;
 }
-declare function right(...args: any[]): any;
+export function right(...args: any[]): any;
 
-type BottomValue = string | number;
-type ResponsiveBottomValue = ResponsiveValue<BottomValue>;
-interface BottomProps {
+export type BottomValue = string | number;
+export type ResponsiveBottomValue = ResponsiveValue<BottomValue>;
+export interface BottomProps {
     bottom?: ResponsiveBottomValue;
 }
-declare function bottom(...args: any[]): any;
+export function bottom(...args: any[]): any;
 
-type LeftValue = string | number;
-type ResponsiveLeftValue = ResponsiveValue<LeftValue>;
-interface LeftProps {
+export type LeftValue = string | number;
+export type ResponsiveLeftValue = ResponsiveValue<LeftValue>;
+export interface LeftProps {
     left?: ResponsiveLeftValue;
 }
-declare function left(...args: any[]): any;
+export function left(...args: any[]): any;
 
 /**
  * Pseudo-classes
  */
 
-interface PseudoStyleValue {
-    color?: string;
-    backgroundColor?: string;
-    borderColor?: string;
-    boxShadow?: number;
+export interface PseudoStyleValue {
+    color?: ColorValue;
+    backgroundColor?: ColorValue;
+    borderColor?: BorderColorValue;
+    boxShadow?: BoxShadowValue;
+    textDecoration?: string;
 }
-type HoverValue = PseudoStyleValue;
-interface HoverProps {
+export type HoverValue = PseudoStyleValue;
+export interface HoverProps {
     hover?: HoverValue;
 }
-declare function hover(...args: any[]): any;
+export function hover(...args: any[]): any;
 
-type FocusValue = PseudoStyleValue;
-interface FocusProps {
+export type FocusValue = PseudoStyleValue;
+export interface FocusProps {
     focus?: FocusValue;
 }
-declare function focus(...args: any[]): any;
+export function focus(...args: any[]): any;
 
-type ActiveValue = PseudoStyleValue;
-interface ActiveProps {
+export type ActiveValue = PseudoStyleValue;
+export interface ActiveProps {
     active?: ActiveValue;
 }
-declare function active(...args: any[]): any;
+export function active(...args: any[]): any;
 
-type DisabledValue = PseudoStyleValue;
-interface DisabledProps {
+export type DisabledValue = PseudoStyleValue;
+export interface DisabledProps {
     disabledStyle?: DisabledValue;
 }
-declare function disabled(...args: any[]): any;
+export function disabled(...args: any[]): any;
 
 /**
  * Utilities
  */
 
-declare function theme(keys: string): any;
-declare function themeGet(keys: string): any;
+export function theme(keys: string): any;
+export function themeGet(keys: string, fallback?: string): any;
 
-declare function cleanElement(component: any): any;
+export function cleanElement(component: any): any;
 
-declare function removeProps(props: any): any;
+export function removeProps(props: any): any;
 
 /**
- * Low-level style declare functions
+ * Low-level style export functions
  */
 
-interface LowLevelStylefunctionArguments {
+export interface LowLevelStylefunctionArguments {
     prop: string;
     cssProperty?: string;
     key?: string;
@@ -577,8 +597,8 @@ interface LowLevelStylefunctionArguments {
     getter?: () => any;
 }
 
-declare function style(args: LowLevelStylefunctionArguments): any;
+export function style(args: LowLevelStylefunctionArguments): any;
 
-declare function responsiveStyle(args: LowLevelStylefunctionArguments): any;
+export function responsiveStyle(args: LowLevelStylefunctionArguments): any;
 
-declare function pseudoStyle(args: LowLevelStylefunctionArguments): any;
+export function pseudoStyle(args: LowLevelStylefunctionArguments): any;
diff --git a/types/styled-system/package.json b/types/styled-system/package.json
new file mode 100644
index 0000000000..da1a3181d0
--- /dev/null
+++ b/types/styled-system/package.json
@@ -0,0 +1,6 @@
+{
+    "private": true,
+    "dependencies": {
+        "styled-components": "^3.3.2"
+    }
+}
diff --git a/types/styled-system/styled-system-tests.ts b/types/styled-system/styled-system-tests.ts
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/types/styled-system/styled-system-tests.tsx b/types/styled-system/styled-system-tests.tsx
new file mode 100644
index 0000000000..78340eb3d8
--- /dev/null
+++ b/types/styled-system/styled-system-tests.tsx
@@ -0,0 +1,351 @@
+// Example uses styled-components, but styled-system works with most other css-in-js libraries as well
+import * as React from "react";
+import styled from "styled-components";
+import {
+    themeGet,
+    space,
+    width,
+    fontSize,
+    color,
+    fontFamily,
+    display,
+    SpaceProps,
+    WidthProps,
+    ColorProps,
+    DisplayProps,
+    FontSizeProps,
+    FontFamilyProps,
+    textAlign,
+    TextAlignProps,
+    background,
+    BackgroundProps,
+    maxWidth,
+    MaxWidthProps,
+    lineHeight,
+    LineHeightProps,
+    FontWeightProps,
+    fontWeight,
+    letterSpacing,
+    LetterSpacingProps,
+    minWidth,
+    MinWidthProps,
+    HeightProps,
+    height,
+    MaxHeightProps,
+    maxHeight,
+    minHeight,
+    MinHeightProps,
+    size,
+    SizeProps,
+    RatioProps,
+    ratio,
+    alignItems,
+    AlignItemsProps,
+    AlignContentProps,
+    alignContent,
+    justifyContent,
+    JustifyContentProps,
+    FlexWrapProps,
+    flexWrap,
+    flexBasis,
+    FlexBasisProps,
+    borderColor,
+    BorderColorProps,
+    flexDirection,
+    FlexDirectionProps,
+    flex,
+    FlexProps,
+    justifySelf,
+    JustifySelfProps,
+    alignSelf,
+    AlignSelfProps,
+    borders,
+    BorderProps,
+    borderRadius,
+    BorderRadiusProps,
+    position,
+    PositionProps,
+    zIndex,
+    ZIndexProps,
+    top,
+    bottom,
+    left,
+    right,
+    TopProps,
+    BottomProps,
+    LeftProps,
+    RightProps,
+    boxShadow,
+    BoxShadowProps,
+    backgroundImage,
+    backgroundPosition,
+    backgroundRepeat,
+    backgroundSize,
+    BackgroundImageProps,
+    BackgroundPositionProps,
+    BackgroundRepeatProps,
+    BackgroundSizeProps,
+    hover,
+    HoverProps,
+    focus,
+    FocusProps,
+    active,
+    ActiveProps,
+    disabled,
+    DisabledProps
+} from "styled-system";
+
+interface BoxProps
+    extends SpaceProps,
+        WidthProps,
+        FontSizeProps,
+        ColorProps,
+        DisplayProps,
+        BackgroundProps,
+        MaxWidthProps,
+        MinWidthProps,
+        HeightProps,
+        MaxHeightProps,
+        MinHeightProps,
+        SizeProps,
+        RatioProps,
+        BorderColorProps,
+        FlexProps,
+        JustifySelfProps,
+        AlignSelfProps,
+        BorderProps,
+        BorderRadiusProps,
+        PositionProps,
+        ZIndexProps,
+        TopProps,
+        BottomProps,
+        LeftProps,
+        RightProps,
+        BoxShadowProps,
+        BackgroundImageProps,
+        BackgroundPositionProps,
+        BackgroundRepeatProps,
+        BackgroundSizeProps,
+        HoverProps,
+        FocusProps,
+        ActiveProps,
+        DisabledProps {}
+const Box = styled.div.attrs<BoxProps>({})`
+
+border-radius: ${themeGet("radii.small", "4px")};
+  ${space}
+  ${width}
+  ${fontSize}
+  ${color}
+  ${display}
+  ${background}
+  ${maxWidth}
+  ${minWidth}
+  ${height}
+  ${maxHeight}
+  ${minHeight}
+  ${size}
+  ${ratio}
+  ${borderColor}
+  ${flex}
+  ${justifySelf}
+  ${alignSelf}
+  ${borders}
+  ${borderRadius}
+  ${position}
+  ${zIndex}
+  ${top}
+  ${bottom}
+  ${left}
+  ${right}
+  ${boxShadow}
+  ${backgroundImage}
+  ${backgroundPosition}
+  ${backgroundRepeat}
+  ${backgroundSize}
+  ${hover}
+  ${focus}
+  ${active}
+  ${disabled}
+`;
+
+interface TextProps
+    extends FontSizeProps,
+        FontFamilyProps,
+        TextAlignProps,
+        LineHeightProps,
+        FontWeightProps,
+        LetterSpacingProps {}
+const Text = styled.div.attrs<TextProps>({})`
+    ${fontSize};
+    ${fontFamily};
+    ${textAlign};
+    ${lineHeight};
+    ${fontWeight};
+    ${letterSpacing};
+`;
+
+interface FlexComponentProps
+    extends AlignItemsProps,
+        AlignContentProps,
+        JustifyContentProps,
+        FlexWrapProps,
+        FlexBasisProps,
+        FlexDirectionProps {}
+const Flex = styled.div.attrs<FlexComponentProps>({})`
+    ${alignItems};
+    ${alignContent};
+    ${justifyContent};
+    ${flexWrap};
+    ${flexBasis};
+    ${flexDirection};
+`;
+
+const test = () => (
+    <div>
+        // width: 50%
+        <Box width={1 / 2} />
+        // font-size: 20px (theme.fontSizes[4])
+        <Box fontSize={4} />
+        // margin: 16px (theme.space[2])
+        <Box m={2} />
+        // padding: 32px (theme.space[3])
+        <Box p={3} />
+        // color
+        <Box color="tomato" />
+        // color: #333 (theme.colors.gray[0])
+        <Box color="grays.0" />
+        // background color
+        <Box bg="tomato" />
+        // responsive width
+        <Box width={[1, 1 / 2, 1 / 4]} />
+        // responsive font-size
+        <Box fontSize={[2, 3, 4]} />
+        // responsive margin
+        <Box m={[1, 2, 3]} />
+        // responsive padding
+        <Box p={[1, 2, 3]} />
+        // examples (margin prop) // sets margin value of `theme.space[2]`
+        <Box m={2} />
+        // sets margin value of `-1 * theme.space[2]`
+        <Box m={-2} />
+        // sets a margin value of `16px` since it's greater than
+        `theme.space.length`
+        <Box m={16} />
+        // sets margin `'auto'`
+        <Box m="auto" />
+        // sets margin `8px` on all viewports and `16px` from the smallest
+        breakpoint and up
+        <Box m={[1, 2]} />
+        // examples // width `50%`
+        <Box width={1 / 2} />
+        // width `256px`
+        <Box width={256} />
+        // width `'2em'`
+        <Box width="2em" />
+        // width `100%` on all viewports and `50%` from the smallest breakpoint
+        and up
+        <Box width={[1, 1 / 2]} />
+        // examples // font-size of `theme.fontSizes[3]`
+        <Text fontSize={3} />
+        // font-size `32px`
+        <Text fontSize={32} />
+        // font-size `'2em'`
+        <Text fontSize="2em" />
+        // font-size `10px` on all viewports and `12px` from the smallest
+        breakpoint and up
+        <Text fontSize={[10, 12]} />
+        // examples // picks the value defined in `theme.colors['blue']`
+        <Box color="blue" />
+        // picks up a nested color value using dot notation //
+        `theme.colors['gray'][0]`
+        <Box color="gray.0" />
+        // raw CSS color value
+        <Box color="#f00" />
+        // fontFamily
+        <Text fontFamily="mono" />
+        // textAlign (responsive)
+        <Text textAlign="center" />
+        <Text textAlign={["center", "left"]} />
+        // lineHeight
+        <Text lineHeight="1.25" />
+        // fontWeight
+        <Text fontWeight="bold" />
+        // letterSpacing
+        <Text letterSpacing="0.1em" />
+        // display (responsive)
+        <Box display="inline-block" />
+        <Box display={["block", "inline-block"]} />
+        // maxWidth (responsive)
+        <Box maxWidth={1024} />
+        <Box maxWidth={[768, null, null, 1024]} />
+        // minWidth (responsive)
+        <Box minWidth={128} />
+        <Box minWidth={[96, 128]} />
+        // height (responsive)
+        <Box height={64} />
+        <Box height={[48, 64]} />
+        // maxHeight (responsive)
+        <Box maxHeight={512} />
+        <Box maxHeight={[384, 512]} />
+        // minHeight (responsive)
+        <Box minHeight={512} />
+        <Box minHeight={[384, 512]} />
+        // size (responsive, width & height)
+        <Box size={32} />
+        <Box size={[32, 48]} />
+        // ratio (height: 0 & paddingBottom)
+        <Box ratio={3 / 4} />
+        // alignItems (responsive)
+        <Flex alignItems="center" />
+        // alignContent (responsive)
+        <Flex alignContent="center" />
+        // justifyContent (responsive)
+        <Flex justifyContent="center" />
+        // flexWrap (responsive)
+        <Flex flexWrap="wrap" />
+        // flexBasis (responsive)
+        <Flex flexBasis="auto" />
+        // flexDirection (responsive)
+        <Flex flexDirection="column" />
+        // flex (responsive)
+        <Box flex="1 1 auto" />
+        // justifySelf (responsive)
+        <Box justifySelf="center" />
+        // alignSelf (responsive)
+        <Box alignSelf="center" />
+        <Box border="1px solid" />
+        <Box borderTop="1px solid" />
+        <Box borderRight="1px solid" />
+        <Box borderBottom="1px solid" />
+        <Box borderLeft="1px solid" />
+        // borderColor
+        <Box borderColor="blue" />
+        // borderRadius
+        <Box borderRadius={4} />
+        // position (responsive)
+        <Box position="absolute" />
+        // zIndex
+        <Box zIndex={2} />
+        // top, right, bottom, left (responsive)
+        <Box top="0" right="0" bottom="0" left="0" />
+        // boxShadow
+        <Box boxShadow={1} />
+        // backgroundImage, backgroundSize, backgroundPosition, backgroundRepeat
+        <Box
+            backgroundImage="kitten.png"
+            backgroundSize="cover"
+            backgroundPosition="center"
+            backgroundRepeat="repeat-x"
+        />
+        <Box
+            hover={{
+                textDecoration: "underline",
+                color: "blue"
+            }}
+        />
+        <Box focus={{ color: "blue" }} />
+        <Box active={{ color: "navy" }} />
+        <Box disabledStyle={{ color: "gray" }} />
+    </div>
+);
diff --git a/types/styled-system/tsconfig.json b/types/styled-system/tsconfig.json
index 12bdc137c0..2cc754217f 100644
--- a/types/styled-system/tsconfig.json
+++ b/types/styled-system/tsconfig.json
@@ -2,6 +2,7 @@
     "compilerOptions": {
         "module": "commonjs",
         "lib": ["es6"],
+        "jsx": "react",
         "noImplicitAny": true,
         "noImplicitThis": true,
         "strictNullChecks": true,
@@ -12,5 +13,5 @@
         "noEmit": true,
         "forceConsistentCasingInFileNames": true
     },
-    "files": ["index.d.ts", "styled-system-tests.ts"]
+    "files": ["index.d.ts", "styled-system-tests.tsx"]
 }

From 19afb78d47eac647c3a4cf9758911ea984ec5ec9 Mon Sep 17 00:00:00 2001
From: Zephraph <zephraph@gmail.com>
Date: Wed, 20 Jun 2018 13:36:56 -0400
Subject: [PATCH 8/9] Update ts version to match react

---
 types/styled-system/index.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/types/styled-system/index.d.ts b/types/styled-system/index.d.ts
index 1ca193f899..8d19fe6463 100644
--- a/types/styled-system/index.d.ts
+++ b/types/styled-system/index.d.ts
@@ -7,7 +7,7 @@
 //                 Eloy Durán      <https://github.com/alloy>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 
-// TypeScript Version: 2.2
+// TypeScript Version: 2.6
 
 /**
  * Core

From 236da6bdb2cb7aa5c00ab144f1a5d0471f2b0672 Mon Sep 17 00:00:00 2001
From: Zephraph <zephraph@gmail.com>
Date: Wed, 20 Jun 2018 13:48:21 -0400
Subject: [PATCH 9/9] Try to remove newline to see if that resolves react
 version conflict....

---
 types/styled-system/index.d.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/types/styled-system/index.d.ts b/types/styled-system/index.d.ts
index 8d19fe6463..ea6fdc03db 100644
--- a/types/styled-system/index.d.ts
+++ b/types/styled-system/index.d.ts
@@ -6,7 +6,6 @@
 //                 Christopher Pappas <https://github.com/damassi>
 //                 Eloy Durán      <https://github.com/alloy>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
-
 // TypeScript Version: 2.6
 
 /**