diff --git a/Boron.js b/Boron.js
new file mode 100644
index 0000000..6613611
--- /dev/null
+++ b/Boron.js
@@ -0,0 +1,8 @@
+module.exports = {
+    DropModal: require('./DropModal'),
+    WaveModal: require('./WaveModal'),
+    FlyModal: require('./FlyModal'),
+    FadeModal: require('./FadeModal'),
+    ScaleModal: require('./ScaleModal'),
+    OutlineModal: require('./OutlineModal'),
+}
diff --git a/DropModal.js b/DropModal.js
new file mode 100644
index 0000000..667f66c
--- /dev/null
+++ b/DropModal.js
@@ -0,0 +1,145 @@
+var modalFactory = require('./modalFactory');
+var insertKeyframesRule = require('domkit/insertKeyframesRule');
+var appendVendorPrefix = require('domkit/appendVendorPrefix');
+
+var animation = {
+    show: {
+        animationDuration: '0.4s',
+        animationTimingFunction: 'cubic-bezier(0.7,0,0.3,1)'
+    },
+
+    hide: {
+        animationDuration: '0.4s',
+        animationTimingFunction: 'cubic-bezier(0.7,0,0.3,1)'
+    },
+
+    showModalAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0,
+            transform: 'translate(-50%, -300px)'
+        },
+        '100%': {
+            opacity: 1,
+            transform: 'translate(-50%, -50%)'
+        }
+    }),
+
+    hideModalAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 1,
+            transform: 'translate(-50%, -50%)'
+        },
+        '100%': {
+            opacity: 0,
+            transform: 'translate(-50%, 100px)'
+        }
+    }),
+
+    showBackdropAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0
+        },
+        '100%': {
+            opacity: 0.9
+        }
+    }),
+
+    hideBackdropAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0.9
+        },
+        '100%': {
+            opacity: 0
+        }
+    }),
+
+    showContentAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0,
+            transform: 'translate(0, -20px)'
+        },
+        '100%': {
+            opacity: 1,
+            transform: 'translate(0, 0)'
+        }
+    }),
+
+    hideContentAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 1,
+            transform: 'translate(0, 0)'
+        },
+        '100%': {
+            opacity: 0,
+            transform: 'translate(0, 50px)'
+        }
+    })
+};
+
+var showAnimation = animation.show;
+var hideAnimation = animation.hide;
+var showModalAnimation = animation.showModalAnimation;
+var hideModalAnimation = animation.hideModalAnimation;
+var showBackdropAnimation = animation.showBackdropAnimation;
+var hideBackdropAnimation = animation.hideBackdropAnimation;
+var showContentAnimation = animation.showContentAnimation;
+var hideContentAnimation = animation.hideContentAnimation;
+
+module.exports = modalFactory({
+    getRef: function(willHidden) {
+        return 'modal';
+    },
+    getWrapperStyle: function() {
+        return appendVendorPrefix({
+            display: "block",
+            position: "fixed",
+            top: 0,
+            bottom: 0,
+            left: 0,
+            right: 0,
+            zIndex: 99999,
+            overflowY: "scroll"
+        });
+    },
+    getModalStyle: function(willHidden) {
+        return appendVendorPrefix({
+            position: "absolute",
+            width: "500px",
+            transform: "translate(-50%, -50%)",
+            top: "50%",
+            left: "50%",
+            backgroundColor: "white",
+            zIndex: 1050,
+            animationDuration: (willHidden ? hideAnimation : showAnimation).animationDuration,
+            animationFillMode: 'forwards',
+            animationName: willHidden ? hideModalAnimation : showModalAnimation,
+            animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction
+        })
+    },
+    getBackdropStyle: function(willHidden) {
+        return appendVendorPrefix({
+            position: "fixed",
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            zIndex: 1040,
+            backgroundColor: "#373A47",
+            animationDuration: (willHidden ? hideAnimation : showAnimation).animationDuration,
+            animationFillMode: 'forwards',
+            animationName: willHidden ? hideBackdropAnimation : showBackdropAnimation,
+            animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction
+        });
+    },
+    getContentStyle: function(willHidden) {
+        return appendVendorPrefix({
+            margin: 0,
+            opacity: 0,
+            animationDuration: (willHidden ? hideAnimation : showAnimation).animationDuration,
+            animationFillMode: 'forwards',
+            animationDelay: '0.25s',
+            animationName: showContentAnimation,
+            animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction
+        })
+    }
+});
diff --git a/FadeModal.js b/FadeModal.js
new file mode 100644
index 0000000..02099d8
--- /dev/null
+++ b/FadeModal.js
@@ -0,0 +1,97 @@
+var modalFactory = require('./modalFactory');
+var insertKeyframesRule = require('domkit/insertKeyframesRule');
+var appendVendorPrefix = require('domkit/appendVendorPrefix');
+
+var animation = {
+    show: {
+        animationDuration: '0.3s',
+        animationTimingFunction: 'ease-out'
+    },
+    hide: {
+        animationDuration: '0.3s',
+        animationTimingFunction: 'ease-out'
+    },
+    showContentAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0
+        },
+        '100%': {
+            opacity: 1
+        }
+    }),
+
+    hideContentAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 1
+        },
+        '100%': {
+            opacity: 0
+        }
+    }),
+
+    showBackdropAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0
+        },
+        '100%': {
+            opacity: 0.9
+        },
+    }),
+
+    hideBackdropAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0.9
+        },
+        '100%': {
+            opacity: 0
+        }
+    })
+};
+
+var showAnimation = animation.show;
+var hideAnimation = animation.hide;
+var showContentAnimation = animation.showContentAnimation;
+var hideContentAnimation = animation.hideContentAnimation;
+var showBackdropAnimation = animation.showBackdropAnimation;
+var hideBackdropAnimation = animation.hideBackdropAnimation;
+
+module.exports = modalFactory({
+    getRef: function(willHidden) {
+        return 'content';
+    },
+    getModalStyle: function(willHidden) {
+        return appendVendorPrefix({
+            zIndex: 1050,
+            position: "fixed",
+            width: "500px",
+            transform: "translate3d(-50%, -50%, 0)",
+            top: "50%",
+            left: "50%"
+        })
+    },
+    getBackdropStyle: function(willHidden) {
+        return appendVendorPrefix({
+            position: "fixed",
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            zIndex: 1040,
+            backgroundColor: "#373A47",
+            animationFillMode: 'forwards',
+            animationDuration: '0.3s',
+            animationName: willHidden ? hideBackdropAnimation : showBackdropAnimation,
+            animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction
+        });
+    },
+    getContentStyle: function(willHidden) {
+        return appendVendorPrefix({
+            margin: 0,
+            backgroundColor: "white",
+            animationDuration: (willHidden ? hideAnimation : showAnimation).animationDuration,
+            animationFillMode: 'forwards',
+            animationName: willHidden ? hideContentAnimation : showContentAnimation,
+            animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction
+        })
+    }
+});
diff --git a/FlyModal.js b/FlyModal.js
new file mode 100644
index 0000000..a0225c9
--- /dev/null
+++ b/FlyModal.js
@@ -0,0 +1,112 @@
+var modalFactory = require('./modalFactory');
+var insertKeyframesRule = require('domkit/insertKeyframesRule');
+var appendVendorPrefix = require('domkit/appendVendorPrefix');
+
+var animation = {
+    show: {
+        animationDuration: '0.5s',
+        animationTimingFunction: 'ease-out'
+    },
+    hide: {
+        animationDuration: '0.5s',
+        animationTimingFunction: 'ease-out'
+    },
+    showContentAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0,
+            transform: 'translate3d(calc(-100vw - 50%), 0, 0)'
+        },
+        '50%': {
+            opacity: 1,
+            transform: 'translate3d(100px, 0, 0)'
+        },
+        '100%': {
+            opacity: 1,
+            transform: 'translate3d(0, 0, 0)'
+        }
+    }),
+
+    hideContentAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 1,
+            transform: 'translate3d(0, 0, 0)'
+        },
+        '50%': {
+            opacity: 1,
+            transform: 'translate3d(-100px, 0, 0) scale3d(1.1, 1.1, 1)'
+        },
+        '100%': {
+            opacity: 0,
+            transform: 'translate3d(calc(100vw + 50%), 0, 0)'
+        },
+    }),
+
+    showBackdropAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0
+        },
+        '100%': {
+            opacity: 0.9
+        },
+    }),
+
+    hideBackdropAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0.9
+        },
+        '90%': {
+            opactiy: 0.9
+        },
+        '100%': {
+            opacity: 0
+        }
+    })
+};
+
+var showAnimation = animation.show;
+var hideAnimation = animation.hide;
+var showContentAnimation = animation.showContentAnimation;
+var hideContentAnimation = animation.hideContentAnimation;
+var showBackdropAnimation = animation.showBackdropAnimation;
+var hideBackdropAnimation = animation.hideBackdropAnimation;
+
+module.exports = modalFactory({
+    getRef: function(willHidden) {
+        return 'content';
+    },
+    getModalStyle: function(willHidden) {
+        return appendVendorPrefix({
+            zIndex: 1050,
+            position: "fixed",
+            width: "500px",
+            transform: "translate3d(-50%, -50%, 0)",
+            top: "50%",
+            left: "50%"
+        })
+    },
+    getBackdropStyle: function(willHidden) {
+        return appendVendorPrefix({
+            position: "fixed",
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            zIndex: 1040,
+            backgroundColor: "#373A47",
+            animationFillMode: 'forwards',
+            animationDuration: '0.3s',
+            animationName: willHidden ? hideBackdropAnimation : showBackdropAnimation,
+            animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction
+        });
+    },
+    getContentStyle: function(willHidden) {
+        return appendVendorPrefix({
+            margin: 0,
+            backgroundColor: "white",
+            animationDuration: (willHidden ? hideAnimation : showAnimation).animationDuration,
+            animationFillMode: 'forwards',
+            animationName: willHidden ? hideContentAnimation : showContentAnimation,
+            animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction
+        })
+    }
+});
diff --git a/OutlineModal.js b/OutlineModal.js
new file mode 100644
index 0000000..970ab46
--- /dev/null
+++ b/OutlineModal.js
@@ -0,0 +1,158 @@
+var React = require('react');
+var modalFactory = require('./modalFactory');
+var insertKeyframesRule = require('domkit/insertKeyframesRule');
+var appendVendorPrefix = require('domkit/appendVendorPrefix');
+
+var animation = {
+    show: {
+        animationDuration: '0.8s',
+        animationTimingFunction: 'cubic-bezier(0.6,0,0.4,1)'
+    },
+    hide: {
+        animationDuration: '0.4s',
+        animationTimingFunction: 'ease-out'
+    },
+    showContentAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0,
+        },
+        '40%':{
+            opacity: 0
+        },
+        '100%': {
+            opacity: 1,
+        }
+    }),
+
+    hideContentAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 1
+        },
+        '100%': {
+            opacity: 0,
+        }
+    }),
+
+    showBackdropAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0
+        },
+        '100%': {
+            opacity: 0.9
+        },
+    }),
+
+    hideBackdropAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0.9
+        },
+        '100%': {
+            opacity: 0
+        }
+    })
+};
+
+var showAnimation = animation.show;
+var hideAnimation = animation.hide;
+var showContentAnimation = animation.showContentAnimation;
+var hideContentAnimation = animation.hideContentAnimation;
+var showBackdropAnimation = animation.showBackdropAnimation;
+var hideBackdropAnimation = animation.hideBackdropAnimation;
+
+module.exports = modalFactory({
+    getRef: function(willHidden) {
+        return 'content';
+    },
+    getSharp: function(willHidden) {
+        var strokeDashLength = 1680;
+
+        var showSharpAnimation = insertKeyframesRule({
+            '0%': {
+                'stroke-dashoffset': strokeDashLength
+            },
+            '100%': {
+                'stroke-dashoffset': 0
+            },
+        });
+
+
+        var sharpStyle = {
+            position: 'absolute',
+            width: 'calc(100%)',
+            height: 'calc(100%)',
+            zIndex: '-1'
+        };
+
+        var rectStyle = appendVendorPrefix({
+            animationDuration: willHidden? '0.4s' :'0.8s',
+            animationFillMode: 'forwards',
+            animationName: willHidden? hideContentAnimation: showSharpAnimation,
+            stroke: '#ffffff',
+            strokeWidth: '2px',
+            strokeDasharray: strokeDashLength
+        });
+
+        return React.createElement("div", {style: sharpStyle}, 
+            React.createElement("svg", {
+                xmlns: "http://www.w3.org/2000/svg", 
+                width: "100%", 
+                height: "100%", 
+                viewBox: "0 0 496 136", 
+                preserveAspectRatio: "none"}, 
+                React.createElement("rect", {style: rectStyle, 
+                    x: "2", 
+                    y: "2", 
+                    fill: "none", 
+                    width: "492", 
+                    height: "132"})
+            )
+        )
+    },
+    getWrapperStyle: function() {
+        return appendVendorPrefix({
+            display: "block",
+            position: "fixed",
+            top: 0,
+            bottom: 0,
+            left: 0,
+            right: 0,
+            zIndex: 99999,
+            overflowY: "scroll"
+        });
+    },
+    getModalStyle: function(willHidden) {
+        return appendVendorPrefix({
+            zIndex: 1050,
+            position: "absolute",
+            width: "500px",
+            transform: "translate3d(-50%, -50%, 0)",
+            top: "50%",
+            left: "50%"
+        })
+    },
+    getBackdropStyle: function(willHidden) {
+        return appendVendorPrefix({
+            position: "fixed",
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            zIndex: 1040,
+            backgroundColor: "#373A47",
+            animationFillMode: 'forwards',
+            animationDuration: '0.4s',
+            animationName: willHidden ? hideBackdropAnimation : showBackdropAnimation,
+            animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction
+        });
+    },
+    getContentStyle: function(willHidden) {
+        return appendVendorPrefix({
+            margin: 0,
+            backgroundColor: "white",
+            animationDuration: (willHidden ? hideAnimation : showAnimation).animationDuration,
+            animationFillMode: 'forwards',
+            animationName: willHidden ? hideContentAnimation : showContentAnimation,
+            animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction
+        })
+    }
+});
diff --git a/ScaleModal.js b/ScaleModal.js
new file mode 100644
index 0000000..b945b5f
--- /dev/null
+++ b/ScaleModal.js
@@ -0,0 +1,100 @@
+var modalFactory = require('./modalFactory');
+var insertKeyframesRule = require('domkit/insertKeyframesRule');
+var appendVendorPrefix = require('domkit/appendVendorPrefix');
+
+var animation = {
+    show: {
+        animationDuration: '0.4s',
+        animationTimingFunction: 'cubic-bezier(0.6,0,0.4,1)'
+    },
+    hide: {
+        animationDuration: '0.4s',
+        animationTimingFunction: 'ease-out'
+    },
+    showContentAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0,
+            transform: 'scale3d(0, 0, 1)'
+        },
+        '100%': {
+            opacity: 1,
+            transform: 'scale3d(1, 1, 1)'
+        }
+    }),
+
+    hideContentAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 1
+        },
+        '100%': {
+            opacity: 0,
+            transform: 'scale3d(0.5, 0.5, 1)'
+        }
+    }),
+
+    showBackdropAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0
+        },
+        '100%': {
+            opacity: 0.9
+        },
+    }),
+
+    hideBackdropAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0.9
+        },
+        '100%': {
+            opacity: 0
+        }
+    })
+};
+
+var showAnimation = animation.show;
+var hideAnimation = animation.hide;
+var showContentAnimation = animation.showContentAnimation;
+var hideContentAnimation = animation.hideContentAnimation;
+var showBackdropAnimation = animation.showBackdropAnimation;
+var hideBackdropAnimation = animation.hideBackdropAnimation;
+
+module.exports = modalFactory({
+    getRef: function(willHidden) {
+        return 'content';
+    },
+    getModalStyle: function(willHidden) {
+        return appendVendorPrefix({
+            zIndex: 1050,
+            position: "fixed",
+            width: "500px",
+            transform: "translate3d(-50%, -50%, 0)",
+            top: "50%",
+            left: "50%"
+        })
+    },
+    getBackdropStyle: function(willHidden) {
+        return appendVendorPrefix({
+            position: "fixed",
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            zIndex: 1040,
+            backgroundColor: "#373A47",
+            animationFillMode: 'forwards',
+            animationDuration: '0.4s',
+            animationName: willHidden ? hideBackdropAnimation : showBackdropAnimation,
+            animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction
+        });
+    },
+    getContentStyle: function(willHidden) {
+        return appendVendorPrefix({
+            margin: 0,
+            backgroundColor: "white",
+            animationDuration: (willHidden ? hideAnimation : showAnimation).animationDuration,
+            animationFillMode: 'forwards',
+            animationName: willHidden ? hideContentAnimation : showContentAnimation,
+            animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction
+        })
+    }
+});
diff --git a/WaveModal.js b/WaveModal.js
new file mode 100644
index 0000000..54f5d3c
--- /dev/null
+++ b/WaveModal.js
@@ -0,0 +1,254 @@
+var modalFactory = require('./modalFactory');
+var insertKeyframesRule = require('domkit/insertKeyframesRule');
+var appendVendorPrefix = require('domkit/appendVendorPrefix');
+
+var animation = {
+    show: {
+        animationDuration: '1s',
+        animationTimingFunction: 'linear'
+    },
+    hide: {
+        animationDuration: '0.3s',
+        animationTimingFunction: 'ease-out'
+    },
+    showContentAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0,
+            transform: 'matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '2.083333%': {
+            transform: 'matrix3d(0.75266, 0, 0, 0, 0, 0.76342, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '4.166667%': {
+            transform: 'matrix3d(0.81071, 0, 0, 0, 0, 0.84545, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '6.25%': {
+            transform: 'matrix3d(0.86808, 0, 0, 0, 0, 0.9286, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '8.333333%': {
+            transform: 'matrix3d(0.92038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '10.416667%': {
+            transform: 'matrix3d(0.96482, 0, 0, 0, 0, 1.05202, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '12.5%': {
+            transform: 'matrix3d(1, 0, 0, 0, 0, 1.08204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '14.583333%': {
+            transform: 'matrix3d(1.02563, 0, 0, 0, 0, 1.09149, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '16.666667%': {
+            transform: 'matrix3d(1.04227, 0, 0, 0, 0, 1.08453, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '18.75%': {
+            transform: 'matrix3d(1.05102, 0, 0, 0, 0, 1.06666, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '20.833333%': {
+            transform: 'matrix3d(1.05334, 0, 0, 0, 0, 1.04355, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '22.916667%': {
+            transform: 'matrix3d(1.05078, 0, 0, 0, 0, 1.02012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '25%': {
+            transform: 'matrix3d(1.04487, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '27.083333%': {
+            transform: 'matrix3d(1.03699, 0, 0, 0, 0, 0.98534, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '29.166667%': {
+            transform: 'matrix3d(1.02831, 0, 0, 0, 0, 0.97688, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '31.25%': {
+            transform: 'matrix3d(1.01973, 0, 0, 0, 0, 0.97422, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '33.333333%': {
+            transform: 'matrix3d(1.01191, 0, 0, 0, 0, 0.97618, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '35.416667%': {
+            transform: 'matrix3d(1.00526, 0, 0, 0, 0, 0.98122, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '37.5%': {
+            transform: 'matrix3d(1, 0, 0, 0, 0, 0.98773, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '39.583333%': {
+            transform: 'matrix3d(0.99617, 0, 0, 0, 0, 0.99433, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '41.666667%': {
+            transform: 'matrix3d(0.99368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '43.75%': {
+            transform: 'matrix3d(0.99237, 0, 0, 0, 0, 1.00413, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '45.833333%': {
+            transform: 'matrix3d(0.99202, 0, 0, 0, 0, 1.00651, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '47.916667%': {
+            transform: 'matrix3d(0.99241, 0, 0, 0, 0, 1.00726, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '50%': {
+            opacity: 1,
+            transform: 'matrix3d(0.99329, 0, 0, 0, 0, 1.00671, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '52.083333%': {
+            transform: 'matrix3d(0.99447, 0, 0, 0, 0, 1.00529, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '54.166667%': {
+            transform: 'matrix3d(0.99577, 0, 0, 0, 0, 1.00346, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '56.25%': {
+            transform: 'matrix3d(0.99705, 0, 0, 0, 0, 1.0016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '58.333333%': {
+            transform: 'matrix3d(0.99822, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '60.416667%': {
+            transform: 'matrix3d(0.99921, 0, 0, 0, 0, 0.99884, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '62.5%': {
+            transform: 'matrix3d(1, 0, 0, 0, 0, 0.99816, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '64.583333%': {
+            transform: 'matrix3d(1.00057, 0, 0, 0, 0, 0.99795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '66.666667%': {
+            transform: 'matrix3d(1.00095, 0, 0, 0, 0, 0.99811, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '68.75%': {
+            transform: 'matrix3d(1.00114, 0, 0, 0, 0, 0.99851, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '70.833333%': {
+            transform: 'matrix3d(1.00119, 0, 0, 0, 0, 0.99903, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '72.916667%': {
+            transform: 'matrix3d(1.00114, 0, 0, 0, 0, 0.99955, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '75%': {
+            transform: 'matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '77.083333%': {
+            transform: 'matrix3d(1.00083, 0, 0, 0, 0, 1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '79.166667%': {
+            transform: 'matrix3d(1.00063, 0, 0, 0, 0, 1.00052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '81.25%': {
+            transform: 'matrix3d(1.00044, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '83.333333%': {
+            transform: 'matrix3d(1.00027, 0, 0, 0, 0, 1.00053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '85.416667%': {
+            transform: 'matrix3d(1.00012, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '87.5%': {
+            transform: 'matrix3d(1, 0, 0, 0, 0, 1.00027, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '89.583333%': {
+            transform: 'matrix3d(0.99991, 0, 0, 0, 0, 1.00013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '91.666667%': {
+            transform: 'matrix3d(0.99986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '93.75%': {
+            transform: 'matrix3d(0.99983, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '95.833333%': {
+            transform: 'matrix3d(0.99982, 0, 0, 0, 0, 0.99985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '97.916667%': {
+            transform: 'matrix3d(0.99983, 0, 0, 0, 0, 0.99984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '100%': {
+            opacity: 1,
+            transform: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        }
+    }),
+
+    hideContentAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 1
+        },
+        '100%': {
+            opacity: 0,
+            transform: 'scale3d(0.8, 0.8, 1)'
+        },
+    }),
+
+    showBackdropAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0
+        },
+        '100%': {
+            opacity: 0.9
+        },
+    }),
+
+    hideBackdropAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0.9
+        },
+        '100%': {
+            opacity: 0
+        }
+    })
+};
+
+var showAnimation = animation.show;
+var hideAnimation = animation.hide;
+var showContentAnimation = animation.showContentAnimation;
+var hideContentAnimation = animation.hideContentAnimation;
+var showBackdropAnimation = animation.showBackdropAnimation;
+var hideBackdropAnimation = animation.hideBackdropAnimation;
+
+module.exports = modalFactory({
+    getRef: function(willHidden) {
+        return 'content';
+    },
+    getWrapperStyle: function() {
+        return appendVendorPrefix({
+            display: "block",
+            position: "fixed",
+            top: 0,
+            bottom: 0,
+            left: 0,
+            right: 0,
+            zIndex: 99999,
+            overflowY: "scroll"
+        });
+    },
+    getModalStyle: function(willHidden) {
+        return appendVendorPrefix({
+            zIndex: 1050,
+            position: "absolute",
+            width: "500px",
+            transform: "translate3d(-50%, -50%, 0)",
+            top: "50%",
+            left: "50%"
+        })
+    },
+    getBackdropStyle: function(willHidden) {
+        return appendVendorPrefix({
+            position: "fixed",
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            zIndex: 1040,
+            backgroundColor: "#373A47",
+            animationFillMode: 'forwards',
+            animationDuration: '0.3s',
+            animationName: willHidden ? hideBackdropAnimation : showBackdropAnimation,
+            animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction
+        });
+    },
+    getContentStyle: function(willHidden) {
+        return appendVendorPrefix({
+            margin: 0,
+            backgroundColor: "white",
+            animationDuration: (willHidden ? hideAnimation : showAnimation).animationDuration,
+            animationFillMode: 'forwards',
+            animationName: willHidden ? hideContentAnimation : showContentAnimation,
+            animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction
+        })
+    }
+});
diff --git a/dist/boron.js b/dist/boron.js
new file mode 100644
index 0000000..b4ce470
--- /dev/null
+++ b/dist/boron.js
@@ -0,0 +1,1336 @@
+(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.Boron = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+'use strict';
+
+var getVendorPropertyName = require('./getVendorPropertyName');
+
+module.exports = function(target, sources) {
+  var to = Object(target);
+  var hasOwnProperty = Object.prototype.hasOwnProperty;
+
+  for (var nextIndex = 1; nextIndex < arguments.length; nextIndex++) {
+    var nextSource = arguments[nextIndex];
+    if (nextSource == null) {
+      continue;
+    }
+
+    var from = Object(nextSource);
+
+    for (var key in from) {
+      if (hasOwnProperty.call(from, key)) {
+        to[key] = from[key];
+      }
+    }
+  }
+
+  var prefixed = {};
+  for (var key in to) {
+    prefixed[getVendorPropertyName(key)] = to[key]
+  }
+
+  return prefixed
+}
+
+},{"./getVendorPropertyName":4}],2:[function(require,module,exports){
+'use strict';
+
+module.exports = document.createElement('div').style;
+
+},{}],3:[function(require,module,exports){
+'use strict';
+
+var cssVendorPrefix;
+
+module.exports = function() {
+
+  if (cssVendorPrefix) return cssVendorPrefix;
+
+  var styles = window.getComputedStyle(document.documentElement, '');
+  var pre = (Array.prototype.slice.call(styles).join('').match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o']))[1];
+
+  return cssVendorPrefix = '-' + pre + '-';
+}
+
+},{}],4:[function(require,module,exports){
+'use strict';
+
+var builtinStyle = require('./builtinStyle');
+var prefixes = ['Moz', 'Webkit', 'O', 'ms'];
+var domVendorPrefix;
+
+// Helper function to get the proper vendor property name. (transition => WebkitTransition)
+module.exports = function(prop, isSupportTest) {
+
+  var vendorProp;
+  if (prop in builtinStyle) return prop;
+
+  var UpperProp = prop.charAt(0).toUpperCase() + prop.substr(1);
+
+  if (domVendorPrefix) {
+
+    vendorProp = domVendorPrefix + UpperProp;
+    if (vendorProp in builtinStyle) {
+      return vendorProp;
+    }
+  } else {
+
+    for (var i = 0; i < prefixes.length; ++i) {
+      vendorProp = prefixes[i] + UpperProp;
+      if (vendorProp in builtinStyle) {
+        domVendorPrefix = prefixes[i];
+        return vendorProp;
+      }
+    }
+  }
+
+  // if support test, not fallback to origin prop name
+  if (!isSupportTest) {
+    return prop;
+  }
+
+}
+
+},{"./builtinStyle":2}],5:[function(require,module,exports){
+'use strict';
+
+var insertRule = require('./insertRule');
+var vendorPrefix = require('./getVendorPrefix')();
+var index = 0;
+
+module.exports = function(keyframes) {
+  // random name
+  var name = 'anim_' + (++index) + (+new Date);
+  var css = "@" + vendorPrefix + "keyframes " + name + " {";
+
+  for (var key in keyframes) {
+    css += key + " {";
+
+    for (var property in keyframes[key]) {
+      var part = ":" + keyframes[key][property] + ";";
+      // We do vendor prefix for every property
+      css += vendorPrefix + property + part;
+      css += property + part;
+    }
+
+    css += "}";
+  }
+
+  css += "}";
+
+  insertRule(css);
+
+  return name
+}
+
+},{"./getVendorPrefix":3,"./insertRule":6}],6:[function(require,module,exports){
+'use strict';
+
+var extraSheet;
+
+module.exports = function(css) {
+
+  if (!extraSheet) {
+    // First time, create an extra stylesheet for adding rules
+    extraSheet = document.createElement('style');
+    document.getElementsByTagName('head')[0].appendChild(extraSheet);
+    // Keep reference to actual StyleSheet object (`styleSheet` for IE < 9)
+    extraSheet = extraSheet.sheet || extraSheet.styleSheet;
+  }
+
+  var index = (extraSheet.cssRules || extraSheet.rules).length;
+  extraSheet.insertRule(css, index);
+
+  return extraSheet;
+}
+
+},{}],7:[function(require,module,exports){
+'use strict';
+
+/**
+ * EVENT_NAME_MAP is used to determine which event fired when a
+ * transition/animation ends, based on the style property used to
+ * define that event.
+ */
+var EVENT_NAME_MAP = {
+  transitionend: {
+    'transition': 'transitionend',
+    'WebkitTransition': 'webkitTransitionEnd',
+    'MozTransition': 'mozTransitionEnd',
+    'OTransition': 'oTransitionEnd',
+    'msTransition': 'MSTransitionEnd'
+  },
+
+  animationend: {
+    'animation': 'animationend',
+    'WebkitAnimation': 'webkitAnimationEnd',
+    'MozAnimation': 'mozAnimationEnd',
+    'OAnimation': 'oAnimationEnd',
+    'msAnimation': 'MSAnimationEnd'
+  }
+};
+
+var endEvents = [];
+
+function detectEvents() {
+  var testEl = document.createElement('div');
+  var style = testEl.style;
+
+  // On some platforms, in particular some releases of Android 4.x,
+  // the un-prefixed "animation" and "transition" properties are defined on the
+  // style object but the events that fire will still be prefixed, so we need
+  // to check if the un-prefixed events are useable, and if not remove them
+  // from the map
+  if (!('AnimationEvent' in window)) {
+    delete EVENT_NAME_MAP.animationend.animation;
+  }
+
+  if (!('TransitionEvent' in window)) {
+    delete EVENT_NAME_MAP.transitionend.transition;
+  }
+
+  for (var baseEventName in EVENT_NAME_MAP) {
+    var baseEvents = EVENT_NAME_MAP[baseEventName];
+    for (var styleName in baseEvents) {
+      if (styleName in style) {
+        endEvents.push(baseEvents[styleName]);
+        break;
+      }
+    }
+  }
+}
+
+if (typeof window !== 'undefined') {
+  detectEvents();
+}
+
+
+// We use the raw {add|remove}EventListener() call because EventListener
+// does not know how to remove event listeners and we really should
+// clean up. Also, these events are not triggered in older browsers
+// so we should be A-OK here.
+
+function addEventListener(node, eventName, eventListener) {
+  node.addEventListener(eventName, eventListener, false);
+}
+
+function removeEventListener(node, eventName, eventListener) {
+  node.removeEventListener(eventName, eventListener, false);
+}
+
+module.exports = {
+  addEndEventListener: function(node, eventListener) {
+    if (endEvents.length === 0) {
+      // If CSS transitions are not supported, trigger an "end animation"
+      // event immediately.
+      window.setTimeout(eventListener, 0);
+      return;
+    }
+    endEvents.forEach(function(endEvent) {
+      addEventListener(node, endEvent, eventListener);
+    });
+  },
+
+  removeEndEventListener: function(node, eventListener) {
+    if (endEvents.length === 0) {
+      return;
+    }
+    endEvents.forEach(function(endEvent) {
+      removeEventListener(node, endEvent, eventListener);
+    });
+  }
+};
+
+},{}],8:[function(require,module,exports){
+module.exports = {
+    DropModal: require('./DropModal'),
+    WaveModal: require('./WaveModal'),
+    FlyModal: require('./FlyModal'),
+    FadeModal: require('./FadeModal'),
+    ScaleModal: require('./ScaleModal'),
+    OutlineModal: require('./OutlineModal'),
+}
+
+},{"./DropModal":9,"./FadeModal":10,"./FlyModal":11,"./OutlineModal":12,"./ScaleModal":13,"./WaveModal":14}],9:[function(require,module,exports){
+var modalFactory = require('./modalFactory');
+var insertKeyframesRule = require('domkit/insertKeyframesRule');
+var appendVendorPrefix = require('domkit/appendVendorPrefix');
+
+var animation = {
+    show: {
+        animationDuration: '0.4s',
+        animationTimingFunction: 'cubic-bezier(0.7,0,0.3,1)'
+    },
+
+    hide: {
+        animationDuration: '0.4s',
+        animationTimingFunction: 'cubic-bezier(0.7,0,0.3,1)'
+    },
+
+    showModalAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0,
+            transform: 'translate(-50%, -300px)'
+        },
+        '100%': {
+            opacity: 1,
+            transform: 'translate(-50%, -50%)'
+        }
+    }),
+
+    hideModalAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 1,
+            transform: 'translate(-50%, -50%)'
+        },
+        '100%': {
+            opacity: 0,
+            transform: 'translate(-50%, 100px)'
+        }
+    }),
+
+    showBackdropAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0
+        },
+        '100%': {
+            opacity: 0.9
+        }
+    }),
+
+    hideBackdropAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0.9
+        },
+        '100%': {
+            opacity: 0
+        }
+    }),
+
+    showContentAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0,
+            transform: 'translate(0, -20px)'
+        },
+        '100%': {
+            opacity: 1,
+            transform: 'translate(0, 0)'
+        }
+    }),
+
+    hideContentAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 1,
+            transform: 'translate(0, 0)'
+        },
+        '100%': {
+            opacity: 0,
+            transform: 'translate(0, 50px)'
+        }
+    })
+};
+
+var showAnimation = animation.show;
+var hideAnimation = animation.hide;
+var showModalAnimation = animation.showModalAnimation;
+var hideModalAnimation = animation.hideModalAnimation;
+var showBackdropAnimation = animation.showBackdropAnimation;
+var hideBackdropAnimation = animation.hideBackdropAnimation;
+var showContentAnimation = animation.showContentAnimation;
+var hideContentAnimation = animation.hideContentAnimation;
+
+module.exports = modalFactory({
+    getRef: function(willHidden) {
+        return 'modal';
+    },
+    getWrapperStyle: function() {
+        return appendVendorPrefix({
+            display: "block",
+            position: "fixed",
+            top: 0,
+            bottom: 0,
+            left: 0,
+            right: 0,
+            zIndex: 99999,
+            overflowY: "scroll"
+        });
+    },
+    getModalStyle: function(willHidden) {
+        return appendVendorPrefix({
+            position: "absolute",
+            width: "500px",
+            transform: "translate(-50%, -50%)",
+            top: "50%",
+            left: "50%",
+            backgroundColor: "white",
+            zIndex: 1050,
+            animationDuration: (willHidden ? hideAnimation : showAnimation).animationDuration,
+            animationFillMode: 'forwards',
+            animationName: willHidden ? hideModalAnimation : showModalAnimation,
+            animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction
+        })
+    },
+    getBackdropStyle: function(willHidden) {
+        return appendVendorPrefix({
+            position: "fixed",
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            zIndex: 1040,
+            backgroundColor: "#373A47",
+            animationDuration: (willHidden ? hideAnimation : showAnimation).animationDuration,
+            animationFillMode: 'forwards',
+            animationName: willHidden ? hideBackdropAnimation : showBackdropAnimation,
+            animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction
+        });
+    },
+    getContentStyle: function(willHidden) {
+        return appendVendorPrefix({
+            margin: 0,
+            opacity: 0,
+            animationDuration: (willHidden ? hideAnimation : showAnimation).animationDuration,
+            animationFillMode: 'forwards',
+            animationDelay: '0.25s',
+            animationName: showContentAnimation,
+            animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction
+        })
+    }
+});
+
+},{"./modalFactory":15,"domkit/appendVendorPrefix":1,"domkit/insertKeyframesRule":5}],10:[function(require,module,exports){
+var modalFactory = require('./modalFactory');
+var insertKeyframesRule = require('domkit/insertKeyframesRule');
+var appendVendorPrefix = require('domkit/appendVendorPrefix');
+
+var animation = {
+    show: {
+        animationDuration: '0.3s',
+        animationTimingFunction: 'ease-out'
+    },
+    hide: {
+        animationDuration: '0.3s',
+        animationTimingFunction: 'ease-out'
+    },
+    showContentAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0
+        },
+        '100%': {
+            opacity: 1
+        }
+    }),
+
+    hideContentAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 1
+        },
+        '100%': {
+            opacity: 0
+        }
+    }),
+
+    showBackdropAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0
+        },
+        '100%': {
+            opacity: 0.9
+        },
+    }),
+
+    hideBackdropAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0.9
+        },
+        '100%': {
+            opacity: 0
+        }
+    })
+};
+
+var showAnimation = animation.show;
+var hideAnimation = animation.hide;
+var showContentAnimation = animation.showContentAnimation;
+var hideContentAnimation = animation.hideContentAnimation;
+var showBackdropAnimation = animation.showBackdropAnimation;
+var hideBackdropAnimation = animation.hideBackdropAnimation;
+
+module.exports = modalFactory({
+    getRef: function(willHidden) {
+        return 'content';
+    },
+    getModalStyle: function(willHidden) {
+        return appendVendorPrefix({
+            zIndex: 1050,
+            position: "fixed",
+            width: "500px",
+            transform: "translate3d(-50%, -50%, 0)",
+            top: "50%",
+            left: "50%"
+        })
+    },
+    getBackdropStyle: function(willHidden) {
+        return appendVendorPrefix({
+            position: "fixed",
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            zIndex: 1040,
+            backgroundColor: "#373A47",
+            animationFillMode: 'forwards',
+            animationDuration: '0.3s',
+            animationName: willHidden ? hideBackdropAnimation : showBackdropAnimation,
+            animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction
+        });
+    },
+    getContentStyle: function(willHidden) {
+        return appendVendorPrefix({
+            margin: 0,
+            backgroundColor: "white",
+            animationDuration: (willHidden ? hideAnimation : showAnimation).animationDuration,
+            animationFillMode: 'forwards',
+            animationName: willHidden ? hideContentAnimation : showContentAnimation,
+            animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction
+        })
+    }
+});
+
+},{"./modalFactory":15,"domkit/appendVendorPrefix":1,"domkit/insertKeyframesRule":5}],11:[function(require,module,exports){
+var modalFactory = require('./modalFactory');
+var insertKeyframesRule = require('domkit/insertKeyframesRule');
+var appendVendorPrefix = require('domkit/appendVendorPrefix');
+
+var animation = {
+    show: {
+        animationDuration: '0.5s',
+        animationTimingFunction: 'ease-out'
+    },
+    hide: {
+        animationDuration: '0.5s',
+        animationTimingFunction: 'ease-out'
+    },
+    showContentAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0,
+            transform: 'translate3d(calc(-100vw - 50%), 0, 0)'
+        },
+        '50%': {
+            opacity: 1,
+            transform: 'translate3d(100px, 0, 0)'
+        },
+        '100%': {
+            opacity: 1,
+            transform: 'translate3d(0, 0, 0)'
+        }
+    }),
+
+    hideContentAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 1,
+            transform: 'translate3d(0, 0, 0)'
+        },
+        '50%': {
+            opacity: 1,
+            transform: 'translate3d(-100px, 0, 0) scale3d(1.1, 1.1, 1)'
+        },
+        '100%': {
+            opacity: 0,
+            transform: 'translate3d(calc(100vw + 50%), 0, 0)'
+        },
+    }),
+
+    showBackdropAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0
+        },
+        '100%': {
+            opacity: 0.9
+        },
+    }),
+
+    hideBackdropAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0.9
+        },
+        '90%': {
+            opactiy: 0.9
+        },
+        '100%': {
+            opacity: 0
+        }
+    })
+};
+
+var showAnimation = animation.show;
+var hideAnimation = animation.hide;
+var showContentAnimation = animation.showContentAnimation;
+var hideContentAnimation = animation.hideContentAnimation;
+var showBackdropAnimation = animation.showBackdropAnimation;
+var hideBackdropAnimation = animation.hideBackdropAnimation;
+
+module.exports = modalFactory({
+    getRef: function(willHidden) {
+        return 'content';
+    },
+    getModalStyle: function(willHidden) {
+        return appendVendorPrefix({
+            zIndex: 1050,
+            position: "fixed",
+            width: "500px",
+            transform: "translate3d(-50%, -50%, 0)",
+            top: "50%",
+            left: "50%"
+        })
+    },
+    getBackdropStyle: function(willHidden) {
+        return appendVendorPrefix({
+            position: "fixed",
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            zIndex: 1040,
+            backgroundColor: "#373A47",
+            animationFillMode: 'forwards',
+            animationDuration: '0.3s',
+            animationName: willHidden ? hideBackdropAnimation : showBackdropAnimation,
+            animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction
+        });
+    },
+    getContentStyle: function(willHidden) {
+        return appendVendorPrefix({
+            margin: 0,
+            backgroundColor: "white",
+            animationDuration: (willHidden ? hideAnimation : showAnimation).animationDuration,
+            animationFillMode: 'forwards',
+            animationName: willHidden ? hideContentAnimation : showContentAnimation,
+            animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction
+        })
+    }
+});
+
+},{"./modalFactory":15,"domkit/appendVendorPrefix":1,"domkit/insertKeyframesRule":5}],12:[function(require,module,exports){
+(function (global){
+var React = (typeof window !== "undefined" ? window['React'] : typeof global !== "undefined" ? global['React'] : null);
+var modalFactory = require('./modalFactory');
+var insertKeyframesRule = require('domkit/insertKeyframesRule');
+var appendVendorPrefix = require('domkit/appendVendorPrefix');
+
+var animation = {
+    show: {
+        animationDuration: '0.8s',
+        animationTimingFunction: 'cubic-bezier(0.6,0,0.4,1)'
+    },
+    hide: {
+        animationDuration: '0.4s',
+        animationTimingFunction: 'ease-out'
+    },
+    showContentAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0,
+        },
+        '40%':{
+            opacity: 0
+        },
+        '100%': {
+            opacity: 1,
+        }
+    }),
+
+    hideContentAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 1
+        },
+        '100%': {
+            opacity: 0,
+        }
+    }),
+
+    showBackdropAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0
+        },
+        '100%': {
+            opacity: 0.9
+        },
+    }),
+
+    hideBackdropAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0.9
+        },
+        '100%': {
+            opacity: 0
+        }
+    })
+};
+
+var showAnimation = animation.show;
+var hideAnimation = animation.hide;
+var showContentAnimation = animation.showContentAnimation;
+var hideContentAnimation = animation.hideContentAnimation;
+var showBackdropAnimation = animation.showBackdropAnimation;
+var hideBackdropAnimation = animation.hideBackdropAnimation;
+
+module.exports = modalFactory({
+    getRef: function(willHidden) {
+        return 'content';
+    },
+    getSharp: function(willHidden) {
+        var strokeDashLength = 1680;
+
+        var showSharpAnimation = insertKeyframesRule({
+            '0%': {
+                'stroke-dashoffset': strokeDashLength
+            },
+            '100%': {
+                'stroke-dashoffset': 0
+            },
+        });
+
+
+        var sharpStyle = {
+            position: 'absolute',
+            width: 'calc(100%)',
+            height: 'calc(100%)',
+            zIndex: '-1'
+        };
+
+        var rectStyle = appendVendorPrefix({
+            animationDuration: willHidden? '0.4s' :'0.8s',
+            animationFillMode: 'forwards',
+            animationName: willHidden? hideContentAnimation: showSharpAnimation,
+            stroke: '#ffffff',
+            strokeWidth: '2px',
+            strokeDasharray: strokeDashLength
+        });
+
+        return React.createElement("div", {style: sharpStyle}, 
+            React.createElement("svg", {
+                xmlns: "http://www.w3.org/2000/svg", 
+                width: "100%", 
+                height: "100%", 
+                viewBox: "0 0 496 136", 
+                preserveAspectRatio: "none"}, 
+                React.createElement("rect", {style: rectStyle, 
+                    x: "2", 
+                    y: "2", 
+                    fill: "none", 
+                    width: "492", 
+                    height: "132"})
+            )
+        )
+    },
+    getWrapperStyle: function() {
+        return appendVendorPrefix({
+            display: "block",
+            position: "fixed",
+            top: 0,
+            bottom: 0,
+            left: 0,
+            right: 0,
+            zIndex: 99999,
+            overflowY: "scroll"
+        });
+    },
+    getModalStyle: function(willHidden) {
+        return appendVendorPrefix({
+            zIndex: 1050,
+            position: "absolute",
+            width: "500px",
+            transform: "translate3d(-50%, -50%, 0)",
+            top: "50%",
+            left: "50%"
+        })
+    },
+    getBackdropStyle: function(willHidden) {
+        return appendVendorPrefix({
+            position: "fixed",
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            zIndex: 1040,
+            backgroundColor: "#373A47",
+            animationFillMode: 'forwards',
+            animationDuration: '0.4s',
+            animationName: willHidden ? hideBackdropAnimation : showBackdropAnimation,
+            animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction
+        });
+    },
+    getContentStyle: function(willHidden) {
+        return appendVendorPrefix({
+            margin: 0,
+            backgroundColor: "white",
+            animationDuration: (willHidden ? hideAnimation : showAnimation).animationDuration,
+            animationFillMode: 'forwards',
+            animationName: willHidden ? hideContentAnimation : showContentAnimation,
+            animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction
+        })
+    }
+});
+
+}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
+},{"./modalFactory":15,"domkit/appendVendorPrefix":1,"domkit/insertKeyframesRule":5}],13:[function(require,module,exports){
+var modalFactory = require('./modalFactory');
+var insertKeyframesRule = require('domkit/insertKeyframesRule');
+var appendVendorPrefix = require('domkit/appendVendorPrefix');
+
+var animation = {
+    show: {
+        animationDuration: '0.4s',
+        animationTimingFunction: 'cubic-bezier(0.6,0,0.4,1)'
+    },
+    hide: {
+        animationDuration: '0.4s',
+        animationTimingFunction: 'ease-out'
+    },
+    showContentAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0,
+            transform: 'scale3d(0, 0, 1)'
+        },
+        '100%': {
+            opacity: 1,
+            transform: 'scale3d(1, 1, 1)'
+        }
+    }),
+
+    hideContentAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 1
+        },
+        '100%': {
+            opacity: 0,
+            transform: 'scale3d(0.5, 0.5, 1)'
+        }
+    }),
+
+    showBackdropAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0
+        },
+        '100%': {
+            opacity: 0.9
+        },
+    }),
+
+    hideBackdropAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0.9
+        },
+        '100%': {
+            opacity: 0
+        }
+    })
+};
+
+var showAnimation = animation.show;
+var hideAnimation = animation.hide;
+var showContentAnimation = animation.showContentAnimation;
+var hideContentAnimation = animation.hideContentAnimation;
+var showBackdropAnimation = animation.showBackdropAnimation;
+var hideBackdropAnimation = animation.hideBackdropAnimation;
+
+module.exports = modalFactory({
+    getRef: function(willHidden) {
+        return 'content';
+    },
+    getModalStyle: function(willHidden) {
+        return appendVendorPrefix({
+            zIndex: 1050,
+            position: "fixed",
+            width: "500px",
+            transform: "translate3d(-50%, -50%, 0)",
+            top: "50%",
+            left: "50%"
+        })
+    },
+    getBackdropStyle: function(willHidden) {
+        return appendVendorPrefix({
+            position: "fixed",
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            zIndex: 1040,
+            backgroundColor: "#373A47",
+            animationFillMode: 'forwards',
+            animationDuration: '0.4s',
+            animationName: willHidden ? hideBackdropAnimation : showBackdropAnimation,
+            animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction
+        });
+    },
+    getContentStyle: function(willHidden) {
+        return appendVendorPrefix({
+            margin: 0,
+            backgroundColor: "white",
+            animationDuration: (willHidden ? hideAnimation : showAnimation).animationDuration,
+            animationFillMode: 'forwards',
+            animationName: willHidden ? hideContentAnimation : showContentAnimation,
+            animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction
+        })
+    }
+});
+
+},{"./modalFactory":15,"domkit/appendVendorPrefix":1,"domkit/insertKeyframesRule":5}],14:[function(require,module,exports){
+var modalFactory = require('./modalFactory');
+var insertKeyframesRule = require('domkit/insertKeyframesRule');
+var appendVendorPrefix = require('domkit/appendVendorPrefix');
+
+var animation = {
+    show: {
+        animationDuration: '1s',
+        animationTimingFunction: 'linear'
+    },
+    hide: {
+        animationDuration: '0.3s',
+        animationTimingFunction: 'ease-out'
+    },
+    showContentAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0,
+            transform: 'matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '2.083333%': {
+            transform: 'matrix3d(0.75266, 0, 0, 0, 0, 0.76342, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '4.166667%': {
+            transform: 'matrix3d(0.81071, 0, 0, 0, 0, 0.84545, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '6.25%': {
+            transform: 'matrix3d(0.86808, 0, 0, 0, 0, 0.9286, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '8.333333%': {
+            transform: 'matrix3d(0.92038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '10.416667%': {
+            transform: 'matrix3d(0.96482, 0, 0, 0, 0, 1.05202, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '12.5%': {
+            transform: 'matrix3d(1, 0, 0, 0, 0, 1.08204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '14.583333%': {
+            transform: 'matrix3d(1.02563, 0, 0, 0, 0, 1.09149, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '16.666667%': {
+            transform: 'matrix3d(1.04227, 0, 0, 0, 0, 1.08453, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '18.75%': {
+            transform: 'matrix3d(1.05102, 0, 0, 0, 0, 1.06666, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '20.833333%': {
+            transform: 'matrix3d(1.05334, 0, 0, 0, 0, 1.04355, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '22.916667%': {
+            transform: 'matrix3d(1.05078, 0, 0, 0, 0, 1.02012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '25%': {
+            transform: 'matrix3d(1.04487, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '27.083333%': {
+            transform: 'matrix3d(1.03699, 0, 0, 0, 0, 0.98534, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '29.166667%': {
+            transform: 'matrix3d(1.02831, 0, 0, 0, 0, 0.97688, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '31.25%': {
+            transform: 'matrix3d(1.01973, 0, 0, 0, 0, 0.97422, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '33.333333%': {
+            transform: 'matrix3d(1.01191, 0, 0, 0, 0, 0.97618, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '35.416667%': {
+            transform: 'matrix3d(1.00526, 0, 0, 0, 0, 0.98122, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '37.5%': {
+            transform: 'matrix3d(1, 0, 0, 0, 0, 0.98773, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '39.583333%': {
+            transform: 'matrix3d(0.99617, 0, 0, 0, 0, 0.99433, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '41.666667%': {
+            transform: 'matrix3d(0.99368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '43.75%': {
+            transform: 'matrix3d(0.99237, 0, 0, 0, 0, 1.00413, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '45.833333%': {
+            transform: 'matrix3d(0.99202, 0, 0, 0, 0, 1.00651, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '47.916667%': {
+            transform: 'matrix3d(0.99241, 0, 0, 0, 0, 1.00726, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '50%': {
+            opacity: 1,
+            transform: 'matrix3d(0.99329, 0, 0, 0, 0, 1.00671, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '52.083333%': {
+            transform: 'matrix3d(0.99447, 0, 0, 0, 0, 1.00529, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '54.166667%': {
+            transform: 'matrix3d(0.99577, 0, 0, 0, 0, 1.00346, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '56.25%': {
+            transform: 'matrix3d(0.99705, 0, 0, 0, 0, 1.0016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '58.333333%': {
+            transform: 'matrix3d(0.99822, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '60.416667%': {
+            transform: 'matrix3d(0.99921, 0, 0, 0, 0, 0.99884, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '62.5%': {
+            transform: 'matrix3d(1, 0, 0, 0, 0, 0.99816, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '64.583333%': {
+            transform: 'matrix3d(1.00057, 0, 0, 0, 0, 0.99795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '66.666667%': {
+            transform: 'matrix3d(1.00095, 0, 0, 0, 0, 0.99811, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '68.75%': {
+            transform: 'matrix3d(1.00114, 0, 0, 0, 0, 0.99851, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '70.833333%': {
+            transform: 'matrix3d(1.00119, 0, 0, 0, 0, 0.99903, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '72.916667%': {
+            transform: 'matrix3d(1.00114, 0, 0, 0, 0, 0.99955, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '75%': {
+            transform: 'matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '77.083333%': {
+            transform: 'matrix3d(1.00083, 0, 0, 0, 0, 1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '79.166667%': {
+            transform: 'matrix3d(1.00063, 0, 0, 0, 0, 1.00052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '81.25%': {
+            transform: 'matrix3d(1.00044, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '83.333333%': {
+            transform: 'matrix3d(1.00027, 0, 0, 0, 0, 1.00053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '85.416667%': {
+            transform: 'matrix3d(1.00012, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '87.5%': {
+            transform: 'matrix3d(1, 0, 0, 0, 0, 1.00027, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '89.583333%': {
+            transform: 'matrix3d(0.99991, 0, 0, 0, 0, 1.00013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '91.666667%': {
+            transform: 'matrix3d(0.99986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '93.75%': {
+            transform: 'matrix3d(0.99983, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '95.833333%': {
+            transform: 'matrix3d(0.99982, 0, 0, 0, 0, 0.99985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '97.916667%': {
+            transform: 'matrix3d(0.99983, 0, 0, 0, 0, 0.99984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        },
+        '100%': {
+            opacity: 1,
+            transform: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+        }
+    }),
+
+    hideContentAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 1
+        },
+        '100%': {
+            opacity: 0,
+            transform: 'scale3d(0.8, 0.8, 1)'
+        },
+    }),
+
+    showBackdropAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0
+        },
+        '100%': {
+            opacity: 0.9
+        },
+    }),
+
+    hideBackdropAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0.9
+        },
+        '100%': {
+            opacity: 0
+        }
+    })
+};
+
+var showAnimation = animation.show;
+var hideAnimation = animation.hide;
+var showContentAnimation = animation.showContentAnimation;
+var hideContentAnimation = animation.hideContentAnimation;
+var showBackdropAnimation = animation.showBackdropAnimation;
+var hideBackdropAnimation = animation.hideBackdropAnimation;
+
+module.exports = modalFactory({
+    getRef: function(willHidden) {
+        return 'content';
+    },
+    getWrapperStyle: function() {
+        return appendVendorPrefix({
+            display: "block",
+            position: "fixed",
+            top: 0,
+            bottom: 0,
+            left: 0,
+            right: 0,
+            zIndex: 99999,
+            overflowY: "scroll"
+        });
+    },
+    getModalStyle: function(willHidden) {
+        return appendVendorPrefix({
+            zIndex: 1050,
+            position: "absolute",
+            width: "500px",
+            transform: "translate3d(-50%, -50%, 0)",
+            top: "50%",
+            left: "50%"
+        })
+    },
+    getBackdropStyle: function(willHidden) {
+        return appendVendorPrefix({
+            position: "fixed",
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            zIndex: 1040,
+            backgroundColor: "#373A47",
+            animationFillMode: 'forwards',
+            animationDuration: '0.3s',
+            animationName: willHidden ? hideBackdropAnimation : showBackdropAnimation,
+            animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction
+        });
+    },
+    getContentStyle: function(willHidden) {
+        return appendVendorPrefix({
+            margin: 0,
+            backgroundColor: "white",
+            animationDuration: (willHidden ? hideAnimation : showAnimation).animationDuration,
+            animationFillMode: 'forwards',
+            animationName: willHidden ? hideContentAnimation : showContentAnimation,
+            animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction
+        })
+    }
+});
+
+},{"./modalFactory":15,"domkit/appendVendorPrefix":1,"domkit/insertKeyframesRule":5}],15:[function(require,module,exports){
+(function (global){
+var React = (typeof window !== "undefined" ? window['React'] : typeof global !== "undefined" ? global['React'] : null);
+var transitionEvents = require('domkit/transitionEvents');
+var appendVendorPrefix = require('domkit/appendVendorPrefix');
+
+module.exports = function(animation){
+
+    return React.createClass({
+        propTypes: {
+            className: React.PropTypes.string,
+            // Close the modal when esc is pressed? Defaults to true.
+            keyboard: React.PropTypes.bool,
+            onShow: React.PropTypes.func,
+            onHide: React.PropTypes.func,
+            animation: React.PropTypes.object,
+            backdrop: React.PropTypes.bool,
+            closeOnClick: React.PropTypes.bool,
+            modalStyle: React.PropTypes.object,
+            backdropStyle: React.PropTypes.object,
+            contentStyle: React.PropTypes.object,
+            wrapperStyle: React.PropTypes.object,
+        },
+
+        getDefaultProps: function() {
+            return {
+                className: "",
+                onShow: function(){},
+                onHide: function(){},
+                animation: animation,
+                keyboard: true,
+                backdrop: true,
+                closeOnClick: true,
+                modalStyle: {},
+                backdropStyle: {},
+                contentStyle: {},
+                wrapperStyle: {},
+            };
+        },
+
+        getInitialState: function(){
+            return {
+                willHidden: false,
+                hidden: true
+            };
+        },
+
+        hasHidden: function(){
+            return this.state.hidden;
+        },
+
+        addTransitionListener: function(node, handle){
+            if (node) {
+              var endListener = function(e) {
+                  if (e && e.target !== node) {
+                      return;
+                  }
+                  transitionEvents.removeEndEventListener(node, endListener);
+                  handle();
+              };
+              transitionEvents.addEndEventListener(node, endListener);
+            }
+        },
+
+        handleBackdropClick: function() {
+            if (this.props.closeOnClick) {
+                this.hide("backdrop");
+            }
+        },
+
+        render: function() {
+
+            var hidden = this.hasHidden();
+            if (hidden) return null;
+
+            var willHidden = this.state.willHidden;
+            var animation = this.props.animation;
+            var modalStyle = animation.getModalStyle(willHidden);
+            var backdropStyle = animation.getBackdropStyle(willHidden);
+            var contentStyle = animation.getContentStyle(willHidden);
+            var wrapperStyle = animation.getWrapperStyle();
+            var ref = animation.getRef(willHidden);
+            var sharp = animation.getSharp && animation.getSharp(willHidden);
+
+            // Apply custom style properties
+            if (this.props.modalStyle) {
+                var prefixedModalStyle = appendVendorPrefix(this.props.modalStyle);
+                for (var style in prefixedModalStyle) {
+                    modalStyle[style] = prefixedModalStyle[style];
+                }
+            }
+
+            if (this.props.backdropStyle) {
+              var prefixedBackdropStyle = appendVendorPrefix(this.props.backdropStyle);
+                for (var style in prefixedBackdropStyle) {
+                    backdropStyle[style] = prefixedBackdropStyle[style];
+                }
+            }
+
+            if (this.props.contentStyle) {
+              var prefixedContentStyle = appendVendorPrefix(this.props.contentStyle);
+                for (var style in prefixedContentStyle) {
+                    contentStyle[style] = prefixedContentStyle[style];
+                }
+            }
+
+            if (this.props.wrapperStyle) {
+              var prefixedWrapperStyle = appendVendorPrefix(this.props.wrapperStyle);
+                for (var style in prefixedWrapperStyle) {
+                    wrapperStyle[style] = prefixedWrapperStyle[style];
+                }
+            }
+
+            var backdrop = this.props.backdrop? React.createElement("div", {style: backdropStyle, onClick: this.props.closeOnClick? this.handleBackdropClick: null}): undefined;
+
+            if(willHidden) {
+                var node = this.refs[ref];
+                this.addTransitionListener(node, this.leave);
+            }
+
+            return (React.createElement("span", {style: wrapperStyle}, 
+                React.createElement("div", {ref: "modal", style: modalStyle, className: this.props.className}, 
+                    sharp, 
+                    React.createElement("div", {ref: "content", tabIndex: "-1", style: contentStyle}, 
+                        this.props.children
+                    )
+                ), 
+                backdrop
+             ))
+            ;
+        },
+
+        leave: function(){
+            this.setState({
+                hidden: true
+            });
+            this.props.onHide(this.state.hideSource);
+        },
+
+        enter: function(){
+            this.props.onShow();
+        },
+
+        show: function(){
+            if (!this.hasHidden()) return;
+
+            this.setState({
+                willHidden: false,
+                hidden: false
+            });
+
+            setTimeout(function(){
+              var ref = this.props.animation.getRef();
+              var node = this.refs[ref];
+              this.addTransitionListener(node, this.enter);
+            }.bind(this), 0);
+        },
+
+        hide: function(source){
+            if (this.hasHidden()) return;
+
+            if (!source) {
+                source = "hide";
+            }
+
+            this.setState({
+                hideSource: source,
+                willHidden: true
+            });
+        },
+
+        toggle: function(){
+            if (this.hasHidden())
+                this.show();
+            else
+                this.hide("toggle");
+        },
+
+        listenKeyboard: function(event) {
+            (typeof(this.props.keyboard)=="function")
+                ?this.props.keyboard(event)
+                :this.closeOnEsc(event);
+        },
+
+        closeOnEsc: function(event){
+            if (this.props.keyboard &&
+                    (event.key === "Escape" ||
+                     event.keyCode === 27)) {
+                this.hide("keyboard");
+            }
+        },
+
+        componentDidMount: function(){
+            window.addEventListener("keydown", this.listenKeyboard, true);
+        },
+
+        componentWillUnmount: function() {
+            window.removeEventListener("keydown", this.listenKeyboard, true);
+        }
+    });
+};
+
+}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
+},{"domkit/appendVendorPrefix":1,"domkit/transitionEvents":7}]},{},[8])(8)
+});
\ No newline at end of file
diff --git a/dist/boron.min.js b/dist/boron.min.js
new file mode 100644
index 0000000..e411221
--- /dev/null
+++ b/dist/boron.min.js
@@ -0,0 +1 @@
+!function(n){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=n();else if("function"==typeof define&&define.amd)define([],n);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.Boron=n()}}(function(){return function n(t,i,o){function a(r,d){if(!i[r]){if(!t[r]){var s="function"==typeof require&&require;if(!d&&s)return s(r,!0);if(e)return e(r,!0);var m=new Error("Cannot find module '"+r+"'");throw m.code="MODULE_NOT_FOUND",m}var c=i[r]={exports:{}};t[r][0].call(c.exports,function(n){var i=t[r][1][n];return a(i?i:n)},c,c.exports,n,t,i,o)}return i[r].exports}for(var e="function"==typeof require&&require,r=0;r<o.length;r++)a(o[r]);return a}({1:[function(n,t,i){"use strict";var o=n("./getVendorPropertyName");t.exports=function(n,t){for(var i=Object(n),a=Object.prototype.hasOwnProperty,e=1;e<arguments.length;e++){var r=arguments[e];if(null!=r){var d=Object(r);for(var s in d)a.call(d,s)&&(i[s]=d[s])}}var m={};for(var s in i)m[o(s)]=i[s];return m}},{"./getVendorPropertyName":4}],2:[function(n,t,i){"use strict";t.exports=document.createElement("div").style},{}],3:[function(n,t,i){"use strict";var o;t.exports=function(){if(o)return o;var n=window.getComputedStyle(document.documentElement,""),t=(Array.prototype.slice.call(n).join("").match(/-(moz|webkit|ms)-/)||""===n.OLink&&["","o"])[1];return o="-"+t+"-"}},{}],4:[function(n,t,i){"use strict";var o,a=n("./builtinStyle"),e=["Moz","Webkit","O","ms"];t.exports=function(n,t){var i;if(n in a)return n;var r=n.charAt(0).toUpperCase()+n.substr(1);if(o){if(i=o+r,i in a)return i}else for(var d=0;d<e.length;++d)if(i=e[d]+r,i in a)return o=e[d],i;return t?void 0:n}},{"./builtinStyle":2}],5:[function(n,t,i){"use strict";var o=n("./insertRule"),a=n("./getVendorPrefix")(),e=0;t.exports=function(n){var t="anim_"+ ++e+ +new Date,i="@"+a+"keyframes "+t+" {";for(var r in n){i+=r+" {";for(var d in n[r]){var s=":"+n[r][d]+";";i+=a+d+s,i+=d+s}i+="}"}return i+="}",o(i),t}},{"./getVendorPrefix":3,"./insertRule":6}],6:[function(n,t,i){"use strict";var o;t.exports=function(n){o||(o=document.createElement("style"),document.getElementsByTagName("head")[0].appendChild(o),o=o.sheet||o.styleSheet);var t=(o.cssRules||o.rules).length;return o.insertRule(n,t),o}},{}],7:[function(n,t,i){"use strict";function o(){var n=document.createElement("div"),t=n.style;"AnimationEvent"in window||delete r.animationend.animation,"TransitionEvent"in window||delete r.transitionend.transition;for(var i in r){var o=r[i];for(var a in o)if(a in t){d.push(o[a]);break}}}function a(n,t,i){n.addEventListener(t,i,!1)}function e(n,t,i){n.removeEventListener(t,i,!1)}var r={transitionend:{transition:"transitionend",WebkitTransition:"webkitTransitionEnd",MozTransition:"mozTransitionEnd",OTransition:"oTransitionEnd",msTransition:"MSTransitionEnd"},animationend:{animation:"animationend",WebkitAnimation:"webkitAnimationEnd",MozAnimation:"mozAnimationEnd",OAnimation:"oAnimationEnd",msAnimation:"MSAnimationEnd"}},d=[];"undefined"!=typeof window&&o(),t.exports={addEndEventListener:function(n,t){return 0===d.length?void window.setTimeout(t,0):void d.forEach(function(i){a(n,i,t)})},removeEndEventListener:function(n,t){0!==d.length&&d.forEach(function(i){e(n,i,t)})}}},{}],8:[function(n,t,i){t.exports={DropModal:n("./DropModal"),WaveModal:n("./WaveModal"),FlyModal:n("./FlyModal"),FadeModal:n("./FadeModal"),ScaleModal:n("./ScaleModal"),OutlineModal:n("./OutlineModal")}},{"./DropModal":9,"./FadeModal":10,"./FlyModal":11,"./OutlineModal":12,"./ScaleModal":13,"./WaveModal":14}],9:[function(n,t,i){var o=n("./modalFactory"),a=n("domkit/insertKeyframesRule"),e=n("domkit/appendVendorPrefix"),r={show:{animationDuration:"0.4s",animationTimingFunction:"cubic-bezier(0.7,0,0.3,1)"},hide:{animationDuration:"0.4s",animationTimingFunction:"cubic-bezier(0.7,0,0.3,1)"},showModalAnimation:a({"0%":{opacity:0,transform:"translate(-50%, -300px)"},"100%":{opacity:1,transform:"translate(-50%, -50%)"}}),hideModalAnimation:a({"0%":{opacity:1,transform:"translate(-50%, -50%)"},"100%":{opacity:0,transform:"translate(-50%, 100px)"}}),showBackdropAnimation:a({"0%":{opacity:0},"100%":{opacity:.9}}),hideBackdropAnimation:a({"0%":{opacity:.9},"100%":{opacity:0}}),showContentAnimation:a({"0%":{opacity:0,transform:"translate(0, -20px)"},"100%":{opacity:1,transform:"translate(0, 0)"}}),hideContentAnimation:a({"0%":{opacity:1,transform:"translate(0, 0)"},"100%":{opacity:0,transform:"translate(0, 50px)"}})},d=r.show,s=r.hide,m=r.showModalAnimation,c=r.hideModalAnimation,l=r.showBackdropAnimation,f=r.hideBackdropAnimation,p=r.showContentAnimation;r.hideContentAnimation;t.exports=o({getRef:function(n){return"modal"},getWrapperStyle:function(){return e({display:"block",position:"fixed",top:0,bottom:0,left:0,right:0,zIndex:99999,overflowY:"scroll"})},getModalStyle:function(n){return e({position:"absolute",width:"500px",transform:"translate(-50%, -50%)",top:"50%",left:"50%",backgroundColor:"white",zIndex:1050,animationDuration:(n?s:d).animationDuration,animationFillMode:"forwards",animationName:n?c:m,animationTimingFunction:(n?s:d).animationTimingFunction})},getBackdropStyle:function(n){return e({position:"fixed",top:0,right:0,bottom:0,left:0,zIndex:1040,backgroundColor:"#373A47",animationDuration:(n?s:d).animationDuration,animationFillMode:"forwards",animationName:n?f:l,animationTimingFunction:(n?s:d).animationTimingFunction})},getContentStyle:function(n){return e({margin:0,opacity:0,animationDuration:(n?s:d).animationDuration,animationFillMode:"forwards",animationDelay:"0.25s",animationName:p,animationTimingFunction:(n?s:d).animationTimingFunction})}})},{"./modalFactory":15,"domkit/appendVendorPrefix":1,"domkit/insertKeyframesRule":5}],10:[function(n,t,i){var o=n("./modalFactory"),a=n("domkit/insertKeyframesRule"),e=n("domkit/appendVendorPrefix"),r={show:{animationDuration:"0.3s",animationTimingFunction:"ease-out"},hide:{animationDuration:"0.3s",animationTimingFunction:"ease-out"},showContentAnimation:a({"0%":{opacity:0},"100%":{opacity:1}}),hideContentAnimation:a({"0%":{opacity:1},"100%":{opacity:0}}),showBackdropAnimation:a({"0%":{opacity:0},"100%":{opacity:.9}}),hideBackdropAnimation:a({"0%":{opacity:.9},"100%":{opacity:0}})},d=r.show,s=r.hide,m=r.showContentAnimation,c=r.hideContentAnimation,l=r.showBackdropAnimation,f=r.hideBackdropAnimation;t.exports=o({getRef:function(n){return"content"},getModalStyle:function(n){return e({zIndex:1050,position:"fixed",width:"500px",transform:"translate3d(-50%, -50%, 0)",top:"50%",left:"50%"})},getBackdropStyle:function(n){return e({position:"fixed",top:0,right:0,bottom:0,left:0,zIndex:1040,backgroundColor:"#373A47",animationFillMode:"forwards",animationDuration:"0.3s",animationName:n?f:l,animationTimingFunction:(n?s:d).animationTimingFunction})},getContentStyle:function(n){return e({margin:0,backgroundColor:"white",animationDuration:(n?s:d).animationDuration,animationFillMode:"forwards",animationName:n?c:m,animationTimingFunction:(n?s:d).animationTimingFunction})}})},{"./modalFactory":15,"domkit/appendVendorPrefix":1,"domkit/insertKeyframesRule":5}],11:[function(n,t,i){var o=n("./modalFactory"),a=n("domkit/insertKeyframesRule"),e=n("domkit/appendVendorPrefix"),r={show:{animationDuration:"0.5s",animationTimingFunction:"ease-out"},hide:{animationDuration:"0.5s",animationTimingFunction:"ease-out"},showContentAnimation:a({"0%":{opacity:0,transform:"translate3d(calc(-100vw - 50%), 0, 0)"},"50%":{opacity:1,transform:"translate3d(100px, 0, 0)"},"100%":{opacity:1,transform:"translate3d(0, 0, 0)"}}),hideContentAnimation:a({"0%":{opacity:1,transform:"translate3d(0, 0, 0)"},"50%":{opacity:1,transform:"translate3d(-100px, 0, 0) scale3d(1.1, 1.1, 1)"},"100%":{opacity:0,transform:"translate3d(calc(100vw + 50%), 0, 0)"}}),showBackdropAnimation:a({"0%":{opacity:0},"100%":{opacity:.9}}),hideBackdropAnimation:a({"0%":{opacity:.9},"90%":{opactiy:.9},"100%":{opacity:0}})},d=r.show,s=r.hide,m=r.showContentAnimation,c=r.hideContentAnimation,l=r.showBackdropAnimation,f=r.hideBackdropAnimation;t.exports=o({getRef:function(n){return"content"},getModalStyle:function(n){return e({zIndex:1050,position:"fixed",width:"500px",transform:"translate3d(-50%, -50%, 0)",top:"50%",left:"50%"})},getBackdropStyle:function(n){return e({position:"fixed",top:0,right:0,bottom:0,left:0,zIndex:1040,backgroundColor:"#373A47",animationFillMode:"forwards",animationDuration:"0.3s",animationName:n?f:l,animationTimingFunction:(n?s:d).animationTimingFunction})},getContentStyle:function(n){return e({margin:0,backgroundColor:"white",animationDuration:(n?s:d).animationDuration,animationFillMode:"forwards",animationName:n?c:m,animationTimingFunction:(n?s:d).animationTimingFunction})}})},{"./modalFactory":15,"domkit/appendVendorPrefix":1,"domkit/insertKeyframesRule":5}],12:[function(n,t,i){(function(i){var o="undefined"!=typeof window?window.React:"undefined"!=typeof i?i.React:null,a=n("./modalFactory"),e=n("domkit/insertKeyframesRule"),r=n("domkit/appendVendorPrefix"),d={show:{animationDuration:"0.8s",animationTimingFunction:"cubic-bezier(0.6,0,0.4,1)"},hide:{animationDuration:"0.4s",animationTimingFunction:"ease-out"},showContentAnimation:e({"0%":{opacity:0},"40%":{opacity:0},"100%":{opacity:1}}),hideContentAnimation:e({"0%":{opacity:1},"100%":{opacity:0}}),showBackdropAnimation:e({"0%":{opacity:0},"100%":{opacity:.9}}),hideBackdropAnimation:e({"0%":{opacity:.9},"100%":{opacity:0}})},s=d.show,m=d.hide,c=d.showContentAnimation,l=d.hideContentAnimation,f=d.showBackdropAnimation,p=d.hideBackdropAnimation;t.exports=a({getRef:function(n){return"content"},getSharp:function(n){var t=1680,i=e({"0%":{"stroke-dashoffset":t},"100%":{"stroke-dashoffset":0}}),a={position:"absolute",width:"calc(100%)",height:"calc(100%)",zIndex:"-1"},d=r({animationDuration:n?"0.4s":"0.8s",animationFillMode:"forwards",animationName:n?l:i,stroke:"#ffffff",strokeWidth:"2px",strokeDasharray:t});return o.createElement("div",{style:a},o.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"100%",viewBox:"0 0 496 136",preserveAspectRatio:"none"},o.createElement("rect",{style:d,x:"2",y:"2",fill:"none",width:"492",height:"132"})))},getWrapperStyle:function(){return r({display:"block",position:"fixed",top:0,bottom:0,left:0,right:0,zIndex:99999,overflowY:"scroll"})},getModalStyle:function(n){return r({zIndex:1050,position:"absolute",width:"500px",transform:"translate3d(-50%, -50%, 0)",top:"50%",left:"50%"})},getBackdropStyle:function(n){return r({position:"fixed",top:0,right:0,bottom:0,left:0,zIndex:1040,backgroundColor:"#373A47",animationFillMode:"forwards",animationDuration:"0.4s",animationName:n?p:f,animationTimingFunction:(n?m:s).animationTimingFunction})},getContentStyle:function(n){return r({margin:0,backgroundColor:"white",animationDuration:(n?m:s).animationDuration,animationFillMode:"forwards",animationName:n?l:c,animationTimingFunction:(n?m:s).animationTimingFunction})}})}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./modalFactory":15,"domkit/appendVendorPrefix":1,"domkit/insertKeyframesRule":5}],13:[function(n,t,i){var o=n("./modalFactory"),a=n("domkit/insertKeyframesRule"),e=n("domkit/appendVendorPrefix"),r={show:{animationDuration:"0.4s",animationTimingFunction:"cubic-bezier(0.6,0,0.4,1)"},hide:{animationDuration:"0.4s",animationTimingFunction:"ease-out"},showContentAnimation:a({"0%":{opacity:0,transform:"scale3d(0, 0, 1)"},"100%":{opacity:1,transform:"scale3d(1, 1, 1)"}}),hideContentAnimation:a({"0%":{opacity:1},"100%":{opacity:0,transform:"scale3d(0.5, 0.5, 1)"}}),showBackdropAnimation:a({"0%":{opacity:0},"100%":{opacity:.9}}),hideBackdropAnimation:a({"0%":{opacity:.9},"100%":{opacity:0}})},d=r.show,s=r.hide,m=r.showContentAnimation,c=r.hideContentAnimation,l=r.showBackdropAnimation,f=r.hideBackdropAnimation;t.exports=o({getRef:function(n){return"content"},getModalStyle:function(n){return e({zIndex:1050,position:"fixed",width:"500px",transform:"translate3d(-50%, -50%, 0)",top:"50%",left:"50%"})},getBackdropStyle:function(n){return e({position:"fixed",top:0,right:0,bottom:0,left:0,zIndex:1040,backgroundColor:"#373A47",animationFillMode:"forwards",animationDuration:"0.4s",animationName:n?f:l,animationTimingFunction:(n?s:d).animationTimingFunction})},getContentStyle:function(n){return e({margin:0,backgroundColor:"white",animationDuration:(n?s:d).animationDuration,animationFillMode:"forwards",animationName:n?c:m,animationTimingFunction:(n?s:d).animationTimingFunction})}})},{"./modalFactory":15,"domkit/appendVendorPrefix":1,"domkit/insertKeyframesRule":5}],14:[function(n,t,i){var o=n("./modalFactory"),a=n("domkit/insertKeyframesRule"),e=n("domkit/appendVendorPrefix"),r={show:{animationDuration:"1s",animationTimingFunction:"linear"},hide:{animationDuration:"0.3s",animationTimingFunction:"ease-out"},showContentAnimation:a({"0%":{opacity:0,transform:"matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"2.083333%":{transform:"matrix3d(0.75266, 0, 0, 0, 0, 0.76342, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"4.166667%":{transform:"matrix3d(0.81071, 0, 0, 0, 0, 0.84545, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"6.25%":{transform:"matrix3d(0.86808, 0, 0, 0, 0, 0.9286, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"8.333333%":{transform:"matrix3d(0.92038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"10.416667%":{transform:"matrix3d(0.96482, 0, 0, 0, 0, 1.05202, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"12.5%":{transform:"matrix3d(1, 0, 0, 0, 0, 1.08204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"14.583333%":{transform:"matrix3d(1.02563, 0, 0, 0, 0, 1.09149, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"16.666667%":{transform:"matrix3d(1.04227, 0, 0, 0, 0, 1.08453, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"18.75%":{transform:"matrix3d(1.05102, 0, 0, 0, 0, 1.06666, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"20.833333%":{transform:"matrix3d(1.05334, 0, 0, 0, 0, 1.04355, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"22.916667%":{transform:"matrix3d(1.05078, 0, 0, 0, 0, 1.02012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"25%":{transform:"matrix3d(1.04487, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"27.083333%":{transform:"matrix3d(1.03699, 0, 0, 0, 0, 0.98534, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"29.166667%":{transform:"matrix3d(1.02831, 0, 0, 0, 0, 0.97688, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"31.25%":{transform:"matrix3d(1.01973, 0, 0, 0, 0, 0.97422, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"33.333333%":{transform:"matrix3d(1.01191, 0, 0, 0, 0, 0.97618, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"35.416667%":{transform:"matrix3d(1.00526, 0, 0, 0, 0, 0.98122, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"37.5%":{transform:"matrix3d(1, 0, 0, 0, 0, 0.98773, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"39.583333%":{transform:"matrix3d(0.99617, 0, 0, 0, 0, 0.99433, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"41.666667%":{transform:"matrix3d(0.99368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"43.75%":{transform:"matrix3d(0.99237, 0, 0, 0, 0, 1.00413, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"45.833333%":{transform:"matrix3d(0.99202, 0, 0, 0, 0, 1.00651, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"47.916667%":{transform:"matrix3d(0.99241, 0, 0, 0, 0, 1.00726, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"50%":{opacity:1,transform:"matrix3d(0.99329, 0, 0, 0, 0, 1.00671, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"52.083333%":{transform:"matrix3d(0.99447, 0, 0, 0, 0, 1.00529, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"54.166667%":{transform:"matrix3d(0.99577, 0, 0, 0, 0, 1.00346, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"56.25%":{transform:"matrix3d(0.99705, 0, 0, 0, 0, 1.0016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"58.333333%":{transform:"matrix3d(0.99822, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"60.416667%":{transform:"matrix3d(0.99921, 0, 0, 0, 0, 0.99884, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"62.5%":{transform:"matrix3d(1, 0, 0, 0, 0, 0.99816, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"64.583333%":{transform:"matrix3d(1.00057, 0, 0, 0, 0, 0.99795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"66.666667%":{transform:"matrix3d(1.00095, 0, 0, 0, 0, 0.99811, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"68.75%":{transform:"matrix3d(1.00114, 0, 0, 0, 0, 0.99851, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"70.833333%":{transform:"matrix3d(1.00119, 0, 0, 0, 0, 0.99903, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"72.916667%":{transform:"matrix3d(1.00114, 0, 0, 0, 0, 0.99955, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"75%":{transform:"matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"77.083333%":{transform:"matrix3d(1.00083, 0, 0, 0, 0, 1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"79.166667%":{transform:"matrix3d(1.00063, 0, 0, 0, 0, 1.00052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"81.25%":{transform:"matrix3d(1.00044, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"83.333333%":{transform:"matrix3d(1.00027, 0, 0, 0, 0, 1.00053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"85.416667%":{transform:"matrix3d(1.00012, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"87.5%":{transform:"matrix3d(1, 0, 0, 0, 0, 1.00027, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"89.583333%":{transform:"matrix3d(0.99991, 0, 0, 0, 0, 1.00013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"91.666667%":{transform:"matrix3d(0.99986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"93.75%":{transform:"matrix3d(0.99983, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"95.833333%":{transform:"matrix3d(0.99982, 0, 0, 0, 0, 0.99985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"97.916667%":{transform:"matrix3d(0.99983, 0, 0, 0, 0, 0.99984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"},"100%":{opacity:1,transform:"matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"}}),hideContentAnimation:a({"0%":{opacity:1},"100%":{opacity:0,transform:"scale3d(0.8, 0.8, 1)"}}),showBackdropAnimation:a({"0%":{opacity:0},"100%":{opacity:.9}}),hideBackdropAnimation:a({"0%":{opacity:.9},"100%":{opacity:0}})},d=r.show,s=r.hide,m=r.showContentAnimation,c=r.hideContentAnimation,l=r.showBackdropAnimation,f=r.hideBackdropAnimation;t.exports=o({getRef:function(n){return"content"},getWrapperStyle:function(){return e({display:"block",position:"fixed",top:0,bottom:0,left:0,right:0,zIndex:99999,overflowY:"scroll"})},getModalStyle:function(n){return e({zIndex:1050,position:"absolute",width:"500px",transform:"translate3d(-50%, -50%, 0)",top:"50%",left:"50%"})},getBackdropStyle:function(n){return e({position:"fixed",top:0,right:0,bottom:0,left:0,zIndex:1040,backgroundColor:"#373A47",animationFillMode:"forwards",animationDuration:"0.3s",animationName:n?f:l,animationTimingFunction:(n?s:d).animationTimingFunction})},getContentStyle:function(n){return e({margin:0,backgroundColor:"white",animationDuration:(n?s:d).animationDuration,animationFillMode:"forwards",animationName:n?c:m,animationTimingFunction:(n?s:d).animationTimingFunction})}})},{"./modalFactory":15,"domkit/appendVendorPrefix":1,"domkit/insertKeyframesRule":5}],15:[function(n,t,i){(function(i){var o="undefined"!=typeof window?window.React:"undefined"!=typeof i?i.React:null,a=n("domkit/transitionEvents"),e=n("domkit/appendVendorPrefix");t.exports=function(n){return o.createClass({propTypes:{className:o.PropTypes.string,keyboard:o.PropTypes.bool,onShow:o.PropTypes.func,onHide:o.PropTypes.func,animation:o.PropTypes.object,backdrop:o.PropTypes.bool,closeOnClick:o.PropTypes.bool,modalStyle:o.PropTypes.object,backdropStyle:o.PropTypes.object,contentStyle:o.PropTypes.object,wrapperStyle:o.PropTypes.object},getDefaultProps:function(){return{className:"",onShow:function(){},onHide:function(){},animation:n,keyboard:!0,backdrop:!0,closeOnClick:!0,modalStyle:{},backdropStyle:{},contentStyle:{},wrapperStyle:{}}},getInitialState:function(){return{willHidden:!1,hidden:!0}},hasHidden:function(){return this.state.hidden},addTransitionListener:function(n,t){if(n){var i=function(o){o&&o.target!==n||(a.removeEndEventListener(n,i),t())};a.addEndEventListener(n,i)}},handleBackdropClick:function(){this.props.closeOnClick&&this.hide("backdrop")},render:function(){var n=this.hasHidden();if(n)return null;var t=this.state.willHidden,i=this.props.animation,a=i.getModalStyle(t),r=i.getBackdropStyle(t),d=i.getContentStyle(t),s=i.getWrapperStyle(),m=i.getRef(t),c=i.getSharp&&i.getSharp(t);if(this.props.modalStyle){var l=e(this.props.modalStyle);for(var f in l)a[f]=l[f]}if(this.props.backdropStyle){var p=e(this.props.backdropStyle);for(var f in p)r[f]=p[f]}if(this.props.contentStyle){var u=e(this.props.contentStyle);for(var f in u)d[f]=u[f]}if(this.props.wrapperStyle){var h=e(this.props.wrapperStyle);for(var f in h)s[f]=h[f]}var y=this.props.backdrop?o.createElement("div",{style:r,onClick:this.props.closeOnClick?this.handleBackdropClick:null}):void 0;if(t){var g=this.refs[m];this.addTransitionListener(g,this.leave)}return o.createElement("span",{style:s},o.createElement("div",{ref:"modal",style:a,className:this.props.className},c,o.createElement("div",{ref:"content",tabIndex:"-1",style:d},this.props.children)),y)},leave:function(){this.setState({hidden:!0}),this.props.onHide(this.state.hideSource)},enter:function(){this.props.onShow()},show:function(){this.hasHidden()&&(this.setState({willHidden:!1,hidden:!1}),setTimeout(function(){var n=this.props.animation.getRef(),t=this.refs[n];this.addTransitionListener(t,this.enter)}.bind(this),0))},hide:function(n){this.hasHidden()||(n||(n="hide"),this.setState({hideSource:n,willHidden:!0}))},toggle:function(){this.hasHidden()?this.show():this.hide("toggle")},listenKeyboard:function(n){"function"==typeof this.props.keyboard?this.props.keyboard(n):this.closeOnEsc(n)},closeOnEsc:function(n){!this.props.keyboard||"Escape"!==n.key&&27!==n.keyCode||this.hide("keyboard")},componentDidMount:function(){window.addEventListener("keydown",this.listenKeyboard,!0)},componentWillUnmount:function(){window.removeEventListener("keydown",this.listenKeyboard,!0)}})}}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"domkit/appendVendorPrefix":1,"domkit/transitionEvents":7}]},{},[8])(8)});
\ No newline at end of file
diff --git a/modalFactory.js b/modalFactory.js
new file mode 100644
index 0000000..3ba61e4
--- /dev/null
+++ b/modalFactory.js
@@ -0,0 +1,199 @@
+var React = require('react');
+var transitionEvents = require('domkit/transitionEvents');
+var appendVendorPrefix = require('domkit/appendVendorPrefix');
+
+module.exports = function(animation){
+
+    return React.createClass({
+        propTypes: {
+            className: React.PropTypes.string,
+            // Close the modal when esc is pressed? Defaults to true.
+            keyboard: React.PropTypes.bool,
+            onShow: React.PropTypes.func,
+            onHide: React.PropTypes.func,
+            animation: React.PropTypes.object,
+            backdrop: React.PropTypes.bool,
+            closeOnClick: React.PropTypes.bool,
+            modalStyle: React.PropTypes.object,
+            backdropStyle: React.PropTypes.object,
+            contentStyle: React.PropTypes.object,
+            wrapperStyle: React.PropTypes.object,
+        },
+
+        getDefaultProps: function() {
+            return {
+                className: "",
+                onShow: function(){},
+                onHide: function(){},
+                animation: animation,
+                keyboard: true,
+                backdrop: true,
+                closeOnClick: true,
+                modalStyle: {},
+                backdropStyle: {},
+                contentStyle: {},
+                wrapperStyle: {},
+            };
+        },
+
+        getInitialState: function(){
+            return {
+                willHidden: false,
+                hidden: true
+            };
+        },
+
+        hasHidden: function(){
+            return this.state.hidden;
+        },
+
+        addTransitionListener: function(node, handle){
+            if (node) {
+              var endListener = function(e) {
+                  if (e && e.target !== node) {
+                      return;
+                  }
+                  transitionEvents.removeEndEventListener(node, endListener);
+                  handle();
+              };
+              transitionEvents.addEndEventListener(node, endListener);
+            }
+        },
+
+        handleBackdropClick: function() {
+            if (this.props.closeOnClick) {
+                this.hide("backdrop");
+            }
+        },
+
+        render: function() {
+
+            var hidden = this.hasHidden();
+            if (hidden) return null;
+
+            var willHidden = this.state.willHidden;
+            var animation = this.props.animation;
+            var modalStyle = animation.getModalStyle(willHidden);
+            var backdropStyle = animation.getBackdropStyle(willHidden);
+            var contentStyle = animation.getContentStyle(willHidden);
+            var wrapperStyle = animation.getWrapperStyle();
+            var ref = animation.getRef(willHidden);
+            var sharp = animation.getSharp && animation.getSharp(willHidden);
+
+            // Apply custom style properties
+            if (this.props.modalStyle) {
+                var prefixedModalStyle = appendVendorPrefix(this.props.modalStyle);
+                for (var style in prefixedModalStyle) {
+                    modalStyle[style] = prefixedModalStyle[style];
+                }
+            }
+
+            if (this.props.backdropStyle) {
+              var prefixedBackdropStyle = appendVendorPrefix(this.props.backdropStyle);
+                for (var style in prefixedBackdropStyle) {
+                    backdropStyle[style] = prefixedBackdropStyle[style];
+                }
+            }
+
+            if (this.props.contentStyle) {
+              var prefixedContentStyle = appendVendorPrefix(this.props.contentStyle);
+                for (var style in prefixedContentStyle) {
+                    contentStyle[style] = prefixedContentStyle[style];
+                }
+            }
+
+            if (this.props.wrapperStyle) {
+              var prefixedWrapperStyle = appendVendorPrefix(this.props.wrapperStyle);
+                for (var style in prefixedWrapperStyle) {
+                    wrapperStyle[style] = prefixedWrapperStyle[style];
+                }
+            }
+
+            var backdrop = this.props.backdrop? React.createElement("div", {style: backdropStyle, onClick: this.props.closeOnClick? this.handleBackdropClick: null}): undefined;
+
+            if(willHidden) {
+                var node = this.refs[ref];
+                this.addTransitionListener(node, this.leave);
+            }
+
+            return (React.createElement("span", {style: wrapperStyle}, 
+                React.createElement("div", {ref: "modal", style: modalStyle, className: this.props.className}, 
+                    sharp, 
+                    React.createElement("div", {ref: "content", tabIndex: "-1", style: contentStyle}, 
+                        this.props.children
+                    )
+                ), 
+                backdrop
+             ))
+            ;
+        },
+
+        leave: function(){
+            this.setState({
+                hidden: true
+            });
+            this.props.onHide(this.state.hideSource);
+        },
+
+        enter: function(){
+            this.props.onShow();
+        },
+
+        show: function(){
+            if (!this.hasHidden()) return;
+
+            this.setState({
+                willHidden: false,
+                hidden: false
+            });
+
+            setTimeout(function(){
+              var ref = this.props.animation.getRef();
+              var node = this.refs[ref];
+              this.addTransitionListener(node, this.enter);
+            }.bind(this), 0);
+        },
+
+        hide: function(source){
+            if (this.hasHidden()) return;
+
+            if (!source) {
+                source = "hide";
+            }
+
+            this.setState({
+                hideSource: source,
+                willHidden: true
+            });
+        },
+
+        toggle: function(){
+            if (this.hasHidden())
+                this.show();
+            else
+                this.hide("toggle");
+        },
+
+        listenKeyboard: function(event) {
+            (typeof(this.props.keyboard)=="function")
+                ?this.props.keyboard(event)
+                :this.closeOnEsc(event);
+        },
+
+        closeOnEsc: function(event){
+            if (this.props.keyboard &&
+                    (event.key === "Escape" ||
+                     event.keyCode === 27)) {
+                this.hide("keyboard");
+            }
+        },
+
+        componentDidMount: function(){
+            window.addEventListener("keydown", this.listenKeyboard, true);
+        },
+
+        componentWillUnmount: function() {
+            window.removeEventListener("keydown", this.listenKeyboard, true);
+        }
+    });
+};
diff --git a/package.json b/package.json
index 280a480..ce2017f 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
   "devDependencies": {
     "react-dom": ">=0.14.0",
     "reactify": "^0.17.0",
-    "browserify": "^6.3.3",
+    "browserify": "^14.4.0",
     "browserify-shim": "^3.8.0",
     "chalk": "^0.5.1",
     "codemirror": "^5.0.0",
diff --git a/src/DropModal.js b/src/DropModal.js
index f271777..667f66c 100644
--- a/src/DropModal.js
+++ b/src/DropModal.js
@@ -89,9 +89,21 @@ module.exports = modalFactory({
     getRef: function(willHidden) {
         return 'modal';
     },
-    getModalStyle: function(willHidden) {
+    getWrapperStyle: function() {
         return appendVendorPrefix({
+            display: "block",
             position: "fixed",
+            top: 0,
+            bottom: 0,
+            left: 0,
+            right: 0,
+            zIndex: 99999,
+            overflowY: "scroll"
+        });
+    },
+    getModalStyle: function(willHidden) {
+        return appendVendorPrefix({
+            position: "absolute",
             width: "500px",
             transform: "translate(-50%, -50%)",
             top: "50%",
diff --git a/src/OutlineModal.js b/src/OutlineModal.js
index b50a5fe..c0341df 100644
--- a/src/OutlineModal.js
+++ b/src/OutlineModal.js
@@ -108,10 +108,22 @@ module.exports = modalFactory({
             </svg>
         </div>
     },
+    getWrapperStyle: function() {
+        return appendVendorPrefix({
+            display: "block",
+            position: "fixed",
+            top: 0,
+            bottom: 0,
+            left: 0,
+            right: 0,
+            zIndex: 99999,
+            overflowY: "scroll"
+        });
+    },
     getModalStyle: function(willHidden) {
         return appendVendorPrefix({
             zIndex: 1050,
-            position: "fixed",
+            position: "absolute",
             width: "500px",
             transform: "translate3d(-50%, -50%, 0)",
             top: "50%",
diff --git a/src/WaveModal.js b/src/WaveModal.js
index 987b9c5..54f5d3c 100644
--- a/src/WaveModal.js
+++ b/src/WaveModal.js
@@ -204,10 +204,22 @@ module.exports = modalFactory({
     getRef: function(willHidden) {
         return 'content';
     },
+    getWrapperStyle: function() {
+        return appendVendorPrefix({
+            display: "block",
+            position: "fixed",
+            top: 0,
+            bottom: 0,
+            left: 0,
+            right: 0,
+            zIndex: 99999,
+            overflowY: "scroll"
+        });
+    },
     getModalStyle: function(willHidden) {
         return appendVendorPrefix({
             zIndex: 1050,
-            position: "fixed",
+            position: "absolute",
             width: "500px",
             transform: "translate3d(-50%, -50%, 0)",
             top: "50%",
diff --git a/src/modalFactory.js b/src/modalFactory.js
index 95e3134..b340e07 100644
--- a/src/modalFactory.js
+++ b/src/modalFactory.js
@@ -17,6 +17,7 @@ module.exports = function(animation){
             modalStyle: React.PropTypes.object,
             backdropStyle: React.PropTypes.object,
             contentStyle: React.PropTypes.object,
+            wrapperStyle: React.PropTypes.object,
         },
 
         getDefaultProps: function() {
@@ -31,6 +32,7 @@ module.exports = function(animation){
                 modalStyle: {},
                 backdropStyle: {},
                 contentStyle: {},
+                wrapperStyle: {},
             };
         },
 
@@ -74,6 +76,7 @@ module.exports = function(animation){
             var modalStyle = animation.getModalStyle(willHidden);
             var backdropStyle = animation.getBackdropStyle(willHidden);
             var contentStyle = animation.getContentStyle(willHidden);
+            var wrapperStyle = animation.getWrapperStyle();
             var ref = animation.getRef(willHidden);
             var sharp = animation.getSharp && animation.getSharp(willHidden);
 
@@ -99,6 +102,13 @@ module.exports = function(animation){
                 }
             }
 
+            if (this.props.wrapperStyle) {
+              var prefixedWrapperStyle = appendVendorPrefix(this.props.wrapperStyle);
+                for (var style in prefixedWrapperStyle) {
+                    wrapperStyle[style] = prefixedWrapperStyle[style];
+                }
+            }
+
             var backdrop = this.props.backdrop? <div style={backdropStyle} onClick={this.props.closeOnClick? this.handleBackdropClick: null} />: undefined;
 
             if(willHidden) {
@@ -106,7 +116,7 @@ module.exports = function(animation){
                 this.addTransitionListener(node, this.leave);
             }
 
-            return (<span>
+            return (<span style={wrapperStyle}>
                 <div ref="modal" style={modalStyle} className={this.props.className}>
                     {sharp}
                     <div ref="content" tabIndex="-1" style={contentStyle}>