styled-system: Fix spelling of Vertical

types/styled-system/dist/styles.d.ts

@@ -192,7 +192,7 @@ export interface RatioProps {
 
 export function ratio(...args: any[]): any;
 
-export type VerticleAlignValue =
+export type VerticalAlignValue =
     | "baseline"
     | "sub"
     | "super"
@@ -203,13 +203,13 @@ export type VerticleAlignValue =
     | "bottom"
     | string
     | number;
-export type ResponsiveVerticleAlignValue = ResponsiveValue<VerticleAlignValue>;
+export type ResponsiveVerticalAlignValue = ResponsiveValue<VerticalAlignValue>;
 
-export interface VerticleAlignProps {
-    verticalAlign?: ResponsiveVerticleAlignValue;
+export interface VerticalAlignProps {
+    verticalAlign?: ResponsiveVerticalAlignValue;
 }
 
-export function verticleAlign(...args: any[]): any;
+export function verticalAlign(...args: any[]): any;
 
 /**
  * Flexbox

types/styled-system/index.d.ts

@@ -7,6 +7,7 @@
 //                 Eloy Durán <https://github.com/alloy>
 //                 Matthieu Vachon <https://github.com/maoueh>
 //                 Adam Lavin <https://github.com/lavoaster>
+//                 Joachim Schuler <https://github.com/jschuler>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 

types/styled-system/styled-system-tests.tsx

@@ -121,6 +121,8 @@ import {
     VariantArgs,
     ButtonStyleProps,
     MixedProps,
+    VerticalAlignProps,
+    verticalAlign
 } from "styled-system";
 
 // tslint:disable-next-line:strict-export-declare-modifiers
@@ -166,7 +168,8 @@ interface BoxProps
         BackgroundSizeProps,
         ColorStyleProps,
         TextStyleProps,
-        MixedProps {
+        MixedProps,
+        VerticalAlignProps {
             boxStyle?: string;
         }
 const Box: React.ComponentType<BoxProps> = styled`
@@ -213,6 +216,7 @@ const Box: React.ComponentType<BoxProps> = styled`
   ${textStyle}
   ${colorStyle}
   ${mixed}
+  ${verticalAlign}
 `;
 
 Box.defaultProps = {
@@ -449,6 +453,8 @@ const test = () => (
             backgroundPosition="center"
             backgroundRepeat="repeat-x"
         />
+        // verticalAlign
+        <Box verticalAlign="middle" />
 
         <TestButton variant="primary" m={2} />
     </div>