styled-components 2.2.0 → 2.2.1

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file. If a contri
 
 - N/A
 
+## [v2.2.1] - 2017-10-04
+
+- Cache static classnames in browser environments, thanks to [@schwers](https://github.com/schwers) (see [#1069]https://github.com/styled-components/styled-components/pull/1069))
+- Move the list of libraries built with styled-components to [`awesome-styled-components`](https://github.com/styled-components/awesome-styled-components), thanks to [@romellogood](https://github.com/romellogood) (see [#1203](https://github.com/styled-components/styled-components/pull/1203))
+- Don't emit empty rules like from interpolations, thanks to [@wmertens](https://github.com/wmertens) (see [#1149](https://github.com/styled-components/styled-components/pull/1149))
+
 ## [v2.2.0] - 2017-09-27
 
 - Fixed downstream minification issue with replacing `process` (see [#1150](https://github.com/styled-components/styled-components/pull/1150))
@@ -280,7 +286,8 @@ All notable changes to this project will be documented in this file. If a contri
 
 - Fixed compatibility with other react-broadcast-based systems (like `react-router` v4)
 
-[Unreleased]: https://github.com/styled-components/styled-components/compare/v2.2.0...master
+[Unreleased]: https://github.com/styled-components/styled-components/compare/v2.2.1...master
+[v2.2.1]: https://github.com/styled-components/styled-components/compare/v2.2.0...v2.2.1
 [v2.2.0]: https://github.com/styled-components/styled-components/compare/v2.1.1...v2.2.0
 [v2.1.2]: https://github.com/styled-components/styled-components/compare/v2.1.1...v2.1.2
 [v2.1.1]: https://github.com/styled-components/styled-components/compare/v2.1.0...v2.1.1

package/README.md

@@ -85,86 +85,15 @@ The [`webstorm-styled-components`](https://github.com/styled-components/webstorm
 
 We could use your help to get syntax highlighting support to other editors! If you want to start working on syntax highlighting for your editor, open an issue to let us know.
 
+## Code completions and error reporting
+
+Along with sytnax highlighting, you can install the [TypeScript styled plugin](https://github.com/Microsoft/typescript-styled-plugin) to get error reporting and code completeion for styled components in your editor. The plugin supports styled components in both JavaScript and TypeScript files, and works in Visual Studio Code, Sublime, and Atom.
+
 ## Built with `styled-components`
 
-### Libraries
-- [react-aria-tooltip](https://github.com/egoens/react-aria-tooltip): Simple & accessible ReactJS tooltip component
-- [uiGradients](http://jsbros.github.io/uigradients): Generate beautiful background gradients from the [uigradients.com](http://uigradients.com) database.
-- [react-enhanced-form](https://github.com/xeonys/react-enhanced-form): The best react form component, on earth 🌍. It makes form inputs easy, finally !
-- [react-teleportation](https://github.com/xeonys/react-teleportation): Teleport your components to the foreground.
-- [reshake](https://github.com/elrumordelaluz/reshake): CSShake as a React Functional Component ([demo](https://elrumordelaluz.github.io/reshake/))
-- [last-draft](https://github.com/vacenz/last-draft): A Draft.js Editor ([demo](http://lastdraft.vace.nz))
-- [styled-components-spacing](https://github.com/jameslnewell/styled-components-spacing): Responsive margin and padding components for `styled-components`.
-- [reactour](https://github.com/elrumordelaluz/reactour): Tourist Guide into your React Components ([demo](https://elrumordelaluz.github.io/reactour/))
-- [mcs-lite-ui](https://github.com/MCS-Lite/mcs-lite): An on-premises Internet of Things cloud platform, which can be quickly built and get started with. ([demo](http://mcs-lite-ui.netlify.com/))
-- [react-progressive-bg-image](https://github.com/evenchange4/react-progressive-bg-image): 🖼 Medium style progressive background image. ([demo](http://react-progressive-bg-image.netlify.com/))
-- [react-simple-chatbot](https://github.com/LucasBassetti/react-simple-chatbot): Simple chatbot / conversational-ui React component. ([demo](https://lucasbassetti.com.br/react-simple-chatbot/))
-- [react-css-loaders](https://github.com/LucasBassetti/react-css-loaders): A collection of pure CSS React loading components. ([demo](https://lucasbassetti.com.br/react-css-loaders/))
-- [Rebass](https://github.com/jxnblk/rebass): Functional React UI component library ([demo](http://jxnblk.com/rebass))
-
-#### Grid Systems
-- [grid-styled](https://github.com/jxnblk/grid-styled): Responsive grid system ([demo](http://jxnblk.com/grid-styled/))
-- [Hedron](http://github.com/jsbros/hedron): A no-frills flex-box grid system.
-- [styled-components-grid](https://github.com/jameslnewell/styled-components-grid): Responsive grid components for `styled-components`.
-- [react-styled-flexboxgrid](https://github.com/LoicMahieu/react-styled-flexboxgrid): Grid system based on Flexbox ([demo](https://loicmahieu.github.io/react-styled-flexboxgrid/demo/index.html))
-- [react-flexa](https://github.com/aaronvanston/react-flexa): React grid system implementing the flexbox CSS API responsively.
-- [griz](https://github.com/josephrexme/griz): The simplest grid system you'd ever see. Using grids with a flexbox fallback.
-- [styled-css-grid](https://styled-css-grid.js.org/): A tiny CSS grid layout for React.
-- [neat-components](https://github.com/magicink/neat-components): A styled-components implementation of ThoughtBot's Neat grid system.
-
-#### Helpers
-- [styled-props](https://github.com/RafalFilipek/styled-props): Simple lib that allows you to set styled props in your styled-components without stress ([demos](https://github.com/RafalFilipek/styled-props#tldr-examples))
-- [styled-components-breakpoint](https://github.com/jameslnewell/styled-components-breakpoint): Utility function for using breakpoints with `styled-components`.
-- [styled-theme](https://github.com/diegohaz/styled-theme): Extensible theming system for styled-components.
-- [styled-tools](https://github.com/diegohaz/styled-tools): Useful interpolated functions for styled-components.
-- [styled-ax](https://github.com/Lokua/styled-ax): Functional theme property accessor(s)
-- [react-create-component-from-tag-prop](https://github.com/jameslnewell/react-create-component-from-tag-prop): Create a react component from a tag prop. Lets your users to choose which HTML elements get styled by your 💅 styled-components.
-- [styled-components-theme](https://github.com/erikras/styled-components-theme): A library for refering to theme colors and modifying them inline. e.g. `color: ${primary.lighten(0.3)};`
-- [styled-map](https://github.com/scf4/styled-map): Super simple lib to map props to styles with `styled-components`
-- [styled-system](https://github.com/jxnblk/styled-system): Design system utilities for styled-components – used in grid-styled and Rebass ([demo](http://jxnblk.com/styled-system/))
-- [styled-shortcuts](https://github.com/donavon/styled-shortcuts): Use simple string notation to access props. No functions necessary! Example: `font-size: ${'theme.fontSize:px'};` ([demo](https://codesandbox.io/s/jRE0XxR9v))
-- [styled-shortcut-components](https://github.com/donavon/styled-shortcut-components): A convenience package that wraps `styled-components` with `styled-shortcuts`.
-- [styled-media-query](http://github.com/morajabi/styled-media-query): Easily and beautifully use media queries with styled-component with custom breakpoints
-- [styled-by](https://github.com/brunobertolini/styled-by): Simple and powerful lib to handle styled props in your components ([demo](https://codesandbox.io/s/ElvL8EKgg))
-
-### Boilerplates
-- [react-redux-styled-hot-universal](https://github.com/krasevych/react-redux-styled-hot-universal) (SSR, Universal Webpack, Redux, React-router, Webpack 2, Babel, Styled Components and more...)
-- [ARc](https://github.com/diegohaz/arc): Atomic React App boilerplate with styled components ([demo](https://diegohaz.github.io/arc))
-- [react-boilerplate](https://github.com/mxstbr/react-boilerplate): A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices
-- [Scalable React Boilerplate](https://github.com/RyanCCollins/scalable-react-boilerplate)
-- [Scalable React TypeScript Boilerplate](https://github.com/RyanCCollins/scalable-react-ts-boilerplate)
-- [Superstylin'](https://github.com/bntzio/gatsby-starter-superstylin): A Gatsby starter with styled-components 💅 ([demo](https://superstylin.netlify.com/))
-- [Generator create-redux-app](https://github.com/jonidelv/generator-create-redux-app): Add Redux, styled-components and other useful libraries and tools like auto-generate boilerplate code, on top of the most common React starter create-react-app.
-
-### Websites
-- [PostCSS.parts](http://postcss.parts): A searchable catalog of PostCSS plugins
-- [spaceexperience.club](https://spaceexperience.club/): Brings you each day a stunning picture of our universe, Astronomy Picture of the Day. ([source](https://github.com/caspg/space-exp))
-- [sachagreif.com](http://sachagreif.com): personal homepage built with [Gatsby](https://github.com/gatsbyjs/gatsby) ([source](https://github.com/SachaG/sg2017)).
-- [ismaywolff.nl](https://ismaywolff.nl): personal portfolio with serverside rendering ([source](https://github.com/ismay/ismaywolff.nl)).
-- [Dirtyredz.com](http://dirtyredz.com): David McClain | Dirtyredz - About me, Latest projects and Contact ([source](https://github.com/dirtyredz/dirtyredz.com))
-- [Reactiflux](https://www.reactiflux.com): Reactiflux community home build with [Gatsby](https://github.com/gatsbyjs/gatsby) ([source](https://github.com/reactiflux/reactiflux.com)).
-- [michaelhsu.tw](http://michaelhsu.tw): A simple static homepage built with CRA pre-renderer ([source](https://github.com/evenchange4/michaelhsu.tw)).
-- [joeireland.com](https://joeireland.com): Portfolio of Joseph Ireland ([source](https://github.com/IamJoseph/JoesReactWebsite)).
-- [rosesdaycare.center](https://rosesdaycare.center): Marketing website with theme colors that change on refresh ([source](https://github.com/anthony2025/roses-daycare)).
-- [CodeSandbox](https://codesandbox.io/s/new): An online editor tailored for React development ([source](https://github.com/CompuIves/codesandbox-client)).
-- [Grabient.com](https://www.grabient.com): A beautiful and simple UI for generating web gradients. ([source](https://github.com/johnkorzhuk/grabient/)).
-
-### Other
-- [react-presents](https://bvaughn.github.io/react-presents/): Highly customizable React slideshow framework with syntaxt highlighting and mobile support.
-- [react-adminlte-dash](https://github.com/zksailor534/react-adminlte-dash): AdminLTE dashboard components in React ([demo](http://zksailor534.github.io/react-adminlte-dash))
-- [colors-show](https://github.com/RafalFilipek/colors-show): Present your application colors with style. ([demo](https://colors-show.now.sh/))
-
-*Built something with `styled-components`? Submit a PR and add it to this list!*
-
-## Further Reading
-
-These are some great articles and talks about related topics in case you're hungry for more:
-
-- [📝 "Scale" FUD and Style Components](https://medium.com/learnreact/scale-fud-and-style-components-c0ce87ec9772#.kzjba8lcg): Using components as low-level styling constructs
-- [🎙 The Future of Reusable CSS](https://www.youtube.com/watch?v=XR6eM_5pAb0): How component libraries should be styled, and why they're not yet
-- [📝 Rendering Khan Academy’s Learn Menu Wherever I Please](https://medium.com/@jdan/rendering-khan-academys-learn-menu-wherever-i-please-4b58d4a9432d#.w9nshye05): Documenting the move from the handlebars + less combo to react and inline styles
-- [🖥 Ryan's random thoughts about inline styles](https://www.youtube.com/watch?v=EkPcGS4TzdQ): Explaining some benefits of using styles in js
-- [🖥 Create a style guide using NPM & styled-components](https://www.youtube.com/watch?v=u6gQ48rSw-E): Jamie fumbles through creating a shareable NPM package.
+A lot of hard work goes into community libraries, projects, and guides. A lot of them make it easier to get started or help you with your next project! There’s also a whole lot of interesting apps and sites that people have built using styled-components.
+
+Make sure to head over to [awesome-styled-components](https://github.com/styled-components/awesome-styled-components) to see them all! And please contribute and add your own work to the list so others can find it.
 
 ## Alternative Installation Methods
 

package/dist/styled-components.es.js

@@ -64,7 +64,10 @@ var hyphenateStyleName_1 = hyphenateStyleName;
 
 //      
 var objToCss = function objToCss(obj, prevKey) {
-  var css = Object.keys(obj).map(function (key) {
+  var css = Object.keys(obj).filter(function (key) {
+    var chunk = obj[key];
+    return chunk !== undefined && chunk !== null && chunk !== false && chunk !== '';
+  }).map(function (key) {
     if (isPlainObject(obj[key])) return objToCss(obj[key], key);
     return hyphenateStyleName_1(key) + ': ' + obj[key] + ';';
   }).join(' ');
@@ -436,6 +439,7 @@ var StyleSheet = function () {
     classCallCheck(this, StyleSheet);
     this.hashes = {};
     this.deferredInjections = {};
+    this.stylesCacheable = typeof document !== 'undefined';
 
     this.tagConstructor = tagConstructor;
     this.tags = tags;
@@ -443,6 +447,15 @@ var StyleSheet = function () {
     this.constructComponentTagMap();
   }
 
+  // helper for `ComponentStyle` to know when it cache static styles.
+  // staticly styled-component can not safely cache styles on the server
+  // without all `ComponentStyle` instances saving a reference to the
+  // the styleSheet instance they last rendered with,
+  // or listening to creation / reset events. otherwise you might create
+  // a component with one stylesheet and render it another api response
+  // with another, losing styles on from your server-side render.
+
+
   StyleSheet.prototype.constructComponentTagMap = function constructComponentTagMap() {
     var _this = this;
 
@@ -1551,6 +1564,10 @@ ThemeProvider.contextTypes = (_ThemeProvider$contex = {}, _ThemeProvider$contex[
 var escapeRegex = /[[\].#*$><+~=|^:(),"'`]/g;
 var multiDashRegex = /--+/g;
 
+// HACK for generating all static styles without needing to allocate
+// an empty execution context every single time...
+var STATIC_EXECUTION_CONTEXT = {};
+
 var _StyledComponent = (function (ComponentStyle, constructWithOptions) {
   /* We depend on components having unique IDs */
   var identifiers = {};
@@ -1610,26 +1627,42 @@ var _StyledComponent = (function (ComponentStyle, constructWithOptions) {
 
     BaseStyledComponent.prototype.generateAndInjectStyles = function generateAndInjectStyles(theme, props) {
       var _constructor = this.constructor,
+          attrs = _constructor.attrs,
           componentStyle = _constructor.componentStyle,
           warnTooManyClasses = _constructor.warnTooManyClasses;
 
-      var executionContext = this.buildExecutionContext(theme, props);
       var styleSheet = this.context[CONTEXT_KEY] || StyleSheet.instance;
-      var className = componentStyle.generateAndInjectStyles(executionContext, styleSheet);
 
-      if (warnTooManyClasses !== undefined) warnTooManyClasses(className);
+      // staticaly styled-components don't need to build an execution context object,
+      // and shouldn't be increasing the number of class names
+      if (componentStyle.isStatic && attrs === undefined) {
+        return componentStyle.generateAndInjectStyles(STATIC_EXECUTION_CONTEXT, styleSheet);
+      } else {
+        var executionContext = this.buildExecutionContext(theme, props);
+        var className = componentStyle.generateAndInjectStyles(executionContext, styleSheet);
+
+        if (warnTooManyClasses !== undefined) warnTooManyClasses(className);
 
-      return className;
+        return className;
+      }
     };
 
     BaseStyledComponent.prototype.componentWillMount = function componentWillMount() {
       var _this2 = this;
 
-      // If there is a theme in the context, subscribe to the event emitter. This
-      // is necessary due to pure components blocking context updates, this circumvents
-      // that by updating when an event is emitted
+      var componentStyle = this.constructor.componentStyle;
+
       var styledContext = this.context[CHANNEL_NEXT];
-      if (styledContext !== undefined) {
+
+      // If this is a staticaly-styled component, we don't need to the theme
+      // to generate or build styles.
+      if (componentStyle.isStatic) {
+        var generatedClassName = this.generateAndInjectStyles(STATIC_EXECUTION_CONTEXT, this.props);
+        this.setState({ generatedClassName: generatedClassName });
+        // If there is a theme in the context, subscribe to the event emitter. This
+        // is necessary due to pure components blocking context updates, this circumvents
+        // that by updating when an event is emitted
+      } else if (styledContext !== undefined) {
         var subscribe = styledContext.subscribe;
 
         this.unsubscribeId = subscribe(function (nextTheme) {
@@ -1649,14 +1682,22 @@ var _StyledComponent = (function (ComponentStyle, constructWithOptions) {
       } else {
         // eslint-disable-next-line react/prop-types
         var theme = this.props.theme || {};
-        var generatedClassName = this.generateAndInjectStyles(theme, this.props);
-        this.setState({ theme: theme, generatedClassName: generatedClassName });
+        var _generatedClassName = this.generateAndInjectStyles(theme, this.props);
+        this.setState({ theme: theme, generatedClassName: _generatedClassName });
       }
     };
 
     BaseStyledComponent.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
       var _this3 = this;
 
+      // If this is a staticaly-styled component, we don't need to listen to
+      // props changes to update styles
+      var componentStyle = this.constructor.componentStyle;
+
+      if (componentStyle.isStatic) {
+        return;
+      }
+
       this.setState(function (oldState) {
         // Props should take precedence over ThemeProvider, which should take precedence over
         // defaultProps, but React automatically puts defaultProps on props.
@@ -1868,6 +1909,23 @@ function Umul32(n, m) {
 }
 
 //      
+var isStaticRules = function isStaticRules(rules) {
+  for (var i = 0; i < rules.length; i += 1) {
+    var rule = rules[i];
+
+    // recursive case
+    if (Array.isArray(rule) && !isStaticRules(rule)) {
+      return false;
+    } else if (typeof rule === 'function' && !isStyledComponent(rule)) {
+      // functions are allowed to be static if they're just being
+      // used to get the classname of a nested styled copmonent
+      return false;
+    }
+  }
+
+  return true;
+};
+
 /*
  ComponentStyle is all the CSS-specific stuff, not
  the React-specific stuff.
@@ -1878,6 +1936,7 @@ var _ComponentStyle = (function (nameGenerator, flatten, stringifyRules) {
       classCallCheck(this, ComponentStyle);
 
       this.rules = rules;
+      this.isStatic = isStaticRules(rules);
       this.componentId = componentId;
       if (!StyleSheet.instance.hasInjectedComponent(this.componentId)) {
         var placeholder = process.env.NODE_ENV !== 'production' ? '.' + componentId + ' {}' : '';
@@ -1893,16 +1952,36 @@ var _ComponentStyle = (function (nameGenerator, flatten, stringifyRules) {
 
 
     ComponentStyle.prototype.generateAndInjectStyles = function generateAndInjectStyles(executionContext, styleSheet) {
+      var isStatic = this.isStatic,
+          lastClassName = this.lastClassName;
+
+      if (isStatic && lastClassName !== undefined) {
+        return lastClassName;
+      }
+
       var flatCSS = flatten(this.rules, executionContext);
       var hash = doHash(this.componentId + flatCSS.join(''));
 
       var existingName = styleSheet.getName(hash);
-      if (existingName) return existingName;
+      if (existingName !== undefined) {
+        if (styleSheet.stylesCacheable) {
+          this.lastClassName = existingName;
+        }
+        return existingName;
+      }
 
       var name = nameGenerator(hash);
-      if (styleSheet.alreadyInjected(hash, name)) return name;
+      if (styleSheet.stylesCacheable) {
+        this.lastClassName = existingName;
+      }
+      if (styleSheet.alreadyInjected(hash, name)) {
+        return name;
+      }
 
       var css = '\n' + stringifyRules(flatCSS, '.' + name);
+      // NOTE: this can only be set when we inject the class-name.
+      // For some reason, presumably due to how css is stringifyRules behaves in
+      // differently between client and server, styles break.
       styleSheet.inject(this.componentId, true, css, hash, name);
       return name;
     };

package/dist/styled-components.js

@@ -210,7 +210,10 @@ var index = function isPlainObject(o) {
 
 //      
 var objToCss = function objToCss(obj, prevKey) {
-  var css = Object.keys(obj).map(function (key) {
+  var css = Object.keys(obj).filter(function (key) {
+    var chunk = obj[key];
+    return chunk !== undefined && chunk !== null && chunk !== false && chunk !== '';
+  }).map(function (key) {
     if (index(obj[key])) return objToCss(obj[key], key);
     return hyphenateStyleName_1(key) + ': ' + obj[key] + ';';
   }).join(' ');
@@ -2024,6 +2027,7 @@ var StyleSheet = function () {
     classCallCheck(this, StyleSheet);
     this.hashes = {};
     this.deferredInjections = {};
+    this.stylesCacheable = typeof document !== 'undefined';
 
     this.tagConstructor = tagConstructor;
     this.tags = tags;
@@ -2031,6 +2035,15 @@ var StyleSheet = function () {
     this.constructComponentTagMap();
   }
 
+  // helper for `ComponentStyle` to know when it cache static styles.
+  // staticly styled-component can not safely cache styles on the server
+  // without all `ComponentStyle` instances saving a reference to the
+  // the styleSheet instance they last rendered with,
+  // or listening to creation / reset events. otherwise you might create
+  // a component with one stylesheet and render it another api response
+  // with another, losing styles on from your server-side render.
+
+
   StyleSheet.prototype.constructComponentTagMap = function constructComponentTagMap() {
     var _this = this;
 
@@ -3879,6 +3892,10 @@ ThemeProvider.contextTypes = (_ThemeProvider$contex = {}, _ThemeProvider$contex[
 var escapeRegex = /[[\].#*$><+~=|^:(),"'`]/g;
 var multiDashRegex = /--+/g;
 
+// HACK for generating all static styles without needing to allocate
+// an empty execution context every single time...
+var STATIC_EXECUTION_CONTEXT = {};
+
 var _StyledComponent = (function (ComponentStyle, constructWithOptions) {
   /* We depend on components having unique IDs */
   var identifiers = {};
@@ -3938,26 +3955,42 @@ var _StyledComponent = (function (ComponentStyle, constructWithOptions) {
 
     BaseStyledComponent.prototype.generateAndInjectStyles = function generateAndInjectStyles(theme, props) {
       var _constructor = this.constructor,
+          attrs = _constructor.attrs,
           componentStyle = _constructor.componentStyle,
           warnTooManyClasses = _constructor.warnTooManyClasses;
 
-      var executionContext = this.buildExecutionContext(theme, props);
       var styleSheet = this.context[CONTEXT_KEY] || StyleSheet.instance;
-      var className = componentStyle.generateAndInjectStyles(executionContext, styleSheet);
 
-      if (warnTooManyClasses !== undefined) warnTooManyClasses(className);
+      // staticaly styled-components don't need to build an execution context object,
+      // and shouldn't be increasing the number of class names
+      if (componentStyle.isStatic && attrs === undefined) {
+        return componentStyle.generateAndInjectStyles(STATIC_EXECUTION_CONTEXT, styleSheet);
+      } else {
+        var executionContext = this.buildExecutionContext(theme, props);
+        var className = componentStyle.generateAndInjectStyles(executionContext, styleSheet);
 
-      return className;
+        if (warnTooManyClasses !== undefined) warnTooManyClasses(className);
+
+        return className;
+      }
     };
 
     BaseStyledComponent.prototype.componentWillMount = function componentWillMount() {
       var _this2 = this;
 
-      // If there is a theme in the context, subscribe to the event emitter. This
-      // is necessary due to pure components blocking context updates, this circumvents
-      // that by updating when an event is emitted
+      var componentStyle = this.constructor.componentStyle;
+
       var styledContext = this.context[CHANNEL_NEXT];
-      if (styledContext !== undefined) {
+
+      // If this is a staticaly-styled component, we don't need to the theme
+      // to generate or build styles.
+      if (componentStyle.isStatic) {
+        var generatedClassName = this.generateAndInjectStyles(STATIC_EXECUTION_CONTEXT, this.props);
+        this.setState({ generatedClassName: generatedClassName });
+        // If there is a theme in the context, subscribe to the event emitter. This
+        // is necessary due to pure components blocking context updates, this circumvents
+        // that by updating when an event is emitted
+      } else if (styledContext !== undefined) {
         var subscribe = styledContext.subscribe;
 
         this.unsubscribeId = subscribe(function (nextTheme) {
@@ -3977,14 +4010,22 @@ var _StyledComponent = (function (ComponentStyle, constructWithOptions) {
       } else {
         // eslint-disable-next-line react/prop-types
         var theme = this.props.theme || {};
-        var generatedClassName = this.generateAndInjectStyles(theme, this.props);
-        this.setState({ theme: theme, generatedClassName: generatedClassName });
+        var _generatedClassName = this.generateAndInjectStyles(theme, this.props);
+        this.setState({ theme: theme, generatedClassName: _generatedClassName });
       }
     };
 
     BaseStyledComponent.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
       var _this3 = this;
 
+      // If this is a staticaly-styled component, we don't need to listen to
+      // props changes to update styles
+      var componentStyle = this.constructor.componentStyle;
+
+      if (componentStyle.isStatic) {
+        return;
+      }
+
       this.setState(function (oldState) {
         // Props should take precedence over ThemeProvider, which should take precedence over
         // defaultProps, but React automatically puts defaultProps on props.
@@ -4196,6 +4237,23 @@ function Umul32(n, m) {
 }
 
 //      
+var isStaticRules = function isStaticRules(rules) {
+  for (var i = 0; i < rules.length; i += 1) {
+    var rule = rules[i];
+
+    // recursive case
+    if (Array.isArray(rule) && !isStaticRules(rule)) {
+      return false;
+    } else if (typeof rule === 'function' && !isStyledComponent(rule)) {
+      // functions are allowed to be static if they're just being
+      // used to get the classname of a nested styled copmonent
+      return false;
+    }
+  }
+
+  return true;
+};
+
 /*
  ComponentStyle is all the CSS-specific stuff, not
  the React-specific stuff.
@@ -4206,6 +4264,7 @@ var _ComponentStyle = (function (nameGenerator, flatten, stringifyRules) {
       classCallCheck(this, ComponentStyle);
 
       this.rules = rules;
+      this.isStatic = isStaticRules(rules);
       this.componentId = componentId;
       if (!StyleSheet.instance.hasInjectedComponent(this.componentId)) {
         var placeholder = process.env.NODE_ENV !== 'production' ? '.' + componentId + ' {}' : '';
@@ -4221,16 +4280,36 @@ var _ComponentStyle = (function (nameGenerator, flatten, stringifyRules) {
 
 
     ComponentStyle.prototype.generateAndInjectStyles = function generateAndInjectStyles(executionContext, styleSheet) {
+      var isStatic = this.isStatic,
+          lastClassName = this.lastClassName;
+
+      if (isStatic && lastClassName !== undefined) {
+        return lastClassName;
+      }
+
       var flatCSS = flatten(this.rules, executionContext);
       var hash = doHash(this.componentId + flatCSS.join(''));
 
       var existingName = styleSheet.getName(hash);
-      if (existingName) return existingName;
+      if (existingName !== undefined) {
+        if (styleSheet.stylesCacheable) {
+          this.lastClassName = existingName;
+        }
+        return existingName;
+      }
 
       var name = nameGenerator(hash);
-      if (styleSheet.alreadyInjected(hash, name)) return name;
+      if (styleSheet.stylesCacheable) {
+        this.lastClassName = existingName;
+      }
+      if (styleSheet.alreadyInjected(hash, name)) {
+        return name;
+      }
 
       var css = '\n' + stringifyRules(flatCSS, '.' + name);
+      // NOTE: this can only be set when we inject the class-name.
+      // For some reason, presumably due to how css is stringifyRules behaves in
+      // differently between client and server, styles break.
       styleSheet.inject(this.componentId, true, css, hash, name);
       return name;
     };

package/dist/styled-components.min.js

@@ -1,2 +1,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t(e.styled=e.styled||{},e.React)}(this,function(e,t){"use strict";function n(e){return e.replace(y,"-$1").toLowerCase()}function r(e){return v(e).replace(C,"-ms-")}function o(e){return!0===I(e)&&"[object Object]"===Object.prototype.toString.call(e)}function a(e,t){return t={exports:{}},e(t,t.exports),t.exports}function i(e){return function(){return e}}function s(e,t,n,r,o,a,i,s){if(te(t),!e){var c;if(void 0===t)c=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var u=[n,r,o,a,i,s],p=0;c=new Error(t.replace(/%s/g,function(){return u[p++]})),c.name="Invariant Violation"}throw c.framesToPop=1,c}}function c(e){return"string"==typeof e}function u(e){return"function"==typeof e&&"string"==typeof e.styledComponentId}function p(e){return e.displayName||e.name||"Component"}function l(e){var t=ve.call(e);return"[object Function]"===t||"function"==typeof e&&"[object RegExp]"!==t||"undefined"!=typeof window&&(e===window.setTimeout||e===window.alert||e===window.confirm||e===window.prompt)}function h(e,t){for(var n=1540483477,r=t^e.length,o=e.length,a=0;o>=4;){var i=d(e,a);i=m(i,n),i^=i>>>24,i=m(i,n),r=m(r,n),r^=i,a+=4,o-=4}switch(o){case 3:r^=f(e,a),r^=e.charCodeAt(a+2)<<16,r=m(r,n);break;case 2:r^=f(e,a),r=m(r,n);break;case 1:r^=e.charCodeAt(a),r=m(r,n)}return r^=r>>>13,r=m(r,n),(r^=r>>>15)>>>0}function d(e,t){return e.charCodeAt(t++)+(e.charCodeAt(t++)<<8)+(e.charCodeAt(t++)<<16)+(e.charCodeAt(t)<<24)}function f(e,t){return e.charCodeAt(t++)+(e.charCodeAt(t++)<<8)}function m(e,t){return e|=0,t|=0,(65535&e)*t+(((e>>>16)*t&65535)<<16)|0}var g="default"in t?t.default:t,y=/([A-Z])/g,b=n,v=b,C=/^ms-/,k=r,w="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},x=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},T=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),A=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},S=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},O=function(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n},j=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},E=function(e){return null!=e&&"object"===(void 0===e?"undefined":w(e))&&!Array.isArray(e)},I=E,P=function(e){var t,n;return!1!==o(e)&&("function"==typeof(t=e.constructor)&&(n=t.prototype,!1!==o(n)&&!1!==n.hasOwnProperty("isPrototypeOf")))},M=function e(t,n){var r=Object.keys(t).map(function(n){return P(t[n])?e(t[n],n):k(n)+": "+t[n]+";"}).join(" ");return n?n+" {\n  "+r+"\n}":r},N=function e(t,n){return t.reduce(function(t,r){return void 0===r||null===r||!1===r||""===r?t:Array.isArray(r)?[].concat(t,e(r,n)):r.hasOwnProperty("styledComponentId")?[].concat(t,["."+r.styledComponentId]):"function"==typeof r?n?t.concat.apply(t,e([r(n)],n)):t.concat(r):t.concat(P(r)?M(r):r.toString())},[])},D=a(function(e,t){!function(n){"object"===(void 0===t?"undefined":w(t))&&void 0!==e?e.exports=n():window.stylis=n()}(function e(t){function n(e,t,o,i){for(var u,p,l=0,h=0,m=0,g=0,y=0,b=0,v=0,C=0,k=0,w=0,x=0,T=0,j=0,E=0,I=0,P=0,M=0,N=0,Z=0,xe=o.length,Te=xe-1,je="",Ie="",Pe="",We="",$e="",He="";I<xe;){if(v=o.charCodeAt(I),h+g+m+l===0){if(I===Te&&(P>0&&(Ie=Ie.replace(f,"")),(Ie=Ie.trim()).length>0)){switch(v){case X:case V:case L:case q:case B:break;default:Ie+=o.charAt(I)}v=L}if(1===M)switch(v){case U:case Q:M=0;break;case V:case q:case B:case X:break;default:I--,v=L}switch(v){case U:for(Ie=Ie.trim(),y=Ie.charCodeAt(0),x=1,I++;I<xe;){switch(v=o.charCodeAt(I)){case U:x++;break;case _:x--}if(0===x)break;Pe+=o.charAt(I++)}switch(y===se&&(y=(Ie=Ie.replace(d,"").trim()).charCodeAt(0)),y){case K:switch(P>0&&(Ie=Ie.replace(f,"")),b=Ie.charCodeAt(1)){case ye:case le:case he:u=t;break;default:u=Oe}if(Pe=n(t,u,Pe,b),Z=Pe.length,Se>0&&0===Z&&(Z=Ie.length),Ee>0&&(u=r(Oe,Ie,N),p=c(Fe,Pe,u,t,ve,be,Z,b),Ie=u.join(""),void 0!==p&&0===(Z=(Pe=p.trim()).length)&&(b=0,Pe="")),Z>0)switch(b){case ye:case le:case he:Pe=Ie+"{"+Pe+"}";break;case pe:Ie=Ie.replace(A,"$1 $2"+(Le>0?_e:"")),Pe=Ie+"{"+Pe+"}",Pe="@"+(we>0?D+Pe+"@"+Pe:Pe);break;default:Pe=Ie+Pe}else Pe="";break;default:Pe=n(t,r(t,Ie,N),Pe,i)}$e+=Pe,T=0,M=0,E=0,P=0,N=0,j=0,Ie="",Pe="",I++;break;case _:case L:if(Ie=(P>0?Ie.replace(f,""):Ie).trim(),v!==_||Ie.length>0)switch(0===E&&((y=Ie.charCodeAt(0))===Y||y>96&&y<123)&&Ie.indexOf(" ")&&(Ie=Ie.replace(" ",": ")),Ee>0&&void 0!==(p=c(Ne,Ie,t,e,ve,be,We.length,i))&&0===(Ie=p.trim()).length&&(Ie="\0\0"),y=Ie.charCodeAt(0),b=Ie.charCodeAt(1),y+b){case se:break;case me:case ge:He+=Ie+o.charAt(I);break;default:We+=E>0?a(Ie,y,b,Ie.charCodeAt(2)):Ie+";"}T=0,M=0,E=0,P=0,N=0,Ie="",I++}}switch(v){case q:case B:if(h+g+m+l+Ae===0)switch(w){case K:case ie:case oe:case J:case ae:case re:case Y:case ee:case Q:case L:case U:case _:break;default:E>0&&(M=1)}h===re&&(h=0),Ee*Re>0&&c(Me,Ie,t,e,ve,be,We.length,i),be=1,ve++;break;default:if(be++,v===V)break;switch(je=o.charAt(I),v){case se:je="\\0";break;case ce:je="\\f";break;case ue:je="\\v";break;case G:g+h+l===0&&ke>0&&(N=1,P=1,je="\f"+je);break;case 108:if(g+h+l+Ce===0&&E>0)switch(I-E){case 2:C===de&&o.charCodeAt(I-3)===ee&&(Ce=C);case 8:k===fe&&(Ce=k)}break;case ee:g+h+l===0&&(E=I);break;case Q:h+m+g+l===0&&(P=1,je+="\r");break;case ne:case te:0===h&&(g=g===v?0:0===g?v:g);break;case $:g+h+m===0&&l++;break;case H:g+h+m===0&&l--;break;case W:g+h+l===0&&(I===Te&&(Te++,xe++),m--);break;case z:if(g+h+l===0){if(0===T)switch(2*C+3*k){case 533:break;default:x=0,T=1}m++}break;case K:h+m+g+l+E+j===0&&(j=1);break;case J:case re:if(g+l+m>0)break;switch(h){case 0:switch(2*v+3*o.charCodeAt(I+1)){case 235:h=re;break;case 220:h=J}break;case J:v===re&&C===J&&(je="",h=0)}}if(0===h){if(ke+g+l+j===0&&i!==pe&&v!==L)switch(v){case Q:case ie:case oe:case ae:case W:case z:if(0===T){switch(C){case V:case X:case B:case q:je+="\0";break;default:je="\0"+je+(v===Q?"":"\0")}P=1}else switch(v){case z:T=++x;break;case W:0==(T=--x)&&(P=1,je+="\0")}break;case X:switch(C){case se:case U:case _:case L:case Q:case ce:case V:case X:case B:case q:break;default:0===T&&(P=1,je+="\0")}}Ie+=je,v!==X&&(w=v)}}k=C,C=v,I++}if(Z=We.length,Se>0&&0===Z&&0===$e.length&&0===t[0].length==!1&&(i!==le||1===t.length&&(ke>0?Ue:ze)===t[0])&&(Z=t.join(",").length+2),Z>0){if(0===ke&&i!==pe&&s(t),Ee>0&&void 0!==(p=c(De,We,t,e,ve,be,Z,i))&&0===(We=p).length)return He+We+$e;if(We=t.join(",")+"{"+We+"}",we*Ce>0){switch(Ce){case fe:We=We.replace(O,":"+F+"$1")+We;break;case de:We=We.replace(S,"::"+D+"input-$1")+We.replace(S,"::"+F+"$1")+We.replace(S,":"+R+"input-$1")+We}Ce=0}}return He+We+$e}function r(e,t,n){var r=t.trim().split(k),a=r,i=r.length,s=e.length;switch(s){case 0:case 1:for(var c=0,u=0===s?"":e[0]+" ";c<i;c++)a[c]=o(u,a[c],n,s).trim();break;default:for(var c=0,p=0,a=[];c<i;c++)for(var l=0;l<s;l++)a[p++]=o(e[l]+" ",r[c],n,s).trim()}return a}function o(e,t,n,r){var o=t,a=o.charCodeAt(0);switch(a<33&&(a=(o=o.trim()).charCodeAt(0)),a){case G:switch(ke+r){case 0:case 1:if(0===e.trim().length)break;default:return o.replace(w,"$1"+e.trim())}break;case ee:switch(o.charCodeAt(1)){case 103:if(xe>0&&ke>0)return o.replace(x,"$1").replace(w,"$1"+ze);break;default:return e.trim()+o}default:if(n*ke>0&&o.indexOf("\f")>0)return o.replace(w,(e.charCodeAt(0)===ee?"":"$1")+e.trim())}return e+o}function a(e,t,n,r){var o,a=e+";",s=0,c=2*t+3*n+4*r;if(944===c)a=i(a);else if(we>0)switch(c){case 963:110===a.charCodeAt(5)&&(a=D+a+a);break;case 978:a=D+a+F+a+a;break;case 1019:case 983:a=D+a+F+a+R+a+a;break;case 883:a.charCodeAt(8)===Y&&(a=D+a+a);break;case 932:a=D+a+R+a+a;break;case 964:a=D+a+R+"flex-"+a+a;break;case 1023:o=a.substring(a.indexOf(":",15)).replace("flex-",""),a=D+"box-pack"+o+D+a+R+"flex-pack"+o+a;break;case 975:switch(s=(a=e).length-10,o=(33===a.charCodeAt(s)?a.substring(0,s):a).substring(8).trim(),c=o.charCodeAt(0)+(0|o.charCodeAt(7))){case 203:o.charCodeAt(8)>110&&(a=a.replace(o,D+o)+";"+a);break;case 207:case 102:a=a.replace(o,D+(c>102?"inline-":"")+"box")+";"+a.replace(o,D+o)+";"+a.replace(o,R+o+"box")+";"+a}a+=";";break;case 938:if(a.charCodeAt(5)===Y)switch(a.charCodeAt(6)){case 105:o=a.replace("-items",""),a=D+a+D+"box-"+o+R+"flex-"+o+a;break;case 115:a=D+a+R+"flex-item-"+a.replace("-self","")+a;break;default:a=D+a+R+"flex-line-pack"+a.replace("align-content","")+a}break;case 1005:g.test(a)&&(a=a.replace(m,": "+D)+a.replace(m,": "+F)+a);break;case 953:(s=a.indexOf("-content",9))>0&&(o=a.substring(s-3),a="width:"+D+o+"width:"+F+o+"width:"+o);break;case 962:case 1015:a=D+a+(102===a.charCodeAt(5)?R+a:"")+a,n+r===211&&105===a.charCodeAt(13)&&a.indexOf("transform",10)>0&&(a=a.substring(0,a.indexOf(";",27)+1).replace(y,"$1"+D+"$2")+a);break;case 1e3:switch(o=a.substring(13).trim(),s=o.indexOf("-")+1,o.charCodeAt(0)+o.charCodeAt(s)){case 226:o=a.replace(N,"tb");break;case 232:o=a.replace(N,"tb-rl");break;case 220:o=a.replace(N,"lr");break;default:return a}a=D+a+R+o+a}return a}function i(e){var t=e.length,n=e.indexOf(":",9)+1,r=e.substring(0,n).trim(),o=e.substring(n,t-1).trim(),a="";if(e.charCodeAt(9)!==Y)for(var i=o.split(b),s=0,n=0,t=i.length;s<t;n=0,s++){for(var c=i[s],u=c.split(v);c=u[n];){var p=c.charCodeAt(0);if(1===Le&&(p>K&&p<90||p>96&&p<123||p===Z||p===Y&&c.charCodeAt(1)!==Y))switch(isNaN(parseFloat(c))+(-1!==c.indexOf("("))){case 1:switch(c){case"infinite":case"alternate":case"backwards":case"running":case"normal":case"forwards":case"both":case"none":case"linear":case"ease":case"ease-in":case"ease-out":case"ease-in-out":case"paused":case"reversed":case"alternate-reverse":case"inherit":case"initial":case"unset":case"step-start":case"step-end":break;default:c+=_e}}u[n++]=c}a+=(0===s?"":",")+u.join(" ")}else a+=110===e.charCodeAt(10)?o+(1===Le?_e:""):o;return a=r+a+";",we>0?D+a+a:a}function s(e){for(var t,n,r=0,o=e.length;r<o;r++){for(var a=e[r].split(C),i="",s=0,c=0,u=0,p=0,l=a.length;s<l;s++)if(!(0===(c=(n=a[s]).length)&&l>1)){if(u=i.charCodeAt(i.length-1),p=n.charCodeAt(0),t="",0!==s)switch(u){case J:case ie:case oe:case ae:case X:case z:break;default:t=" "}switch(p){case G:n=t+Ue;case ie:case oe:case ae:case X:case W:case z:break;case $:n=t+n+Ue;break;case ee:switch(2*n.charCodeAt(1)+3*n.charCodeAt(2)){case 530:if(xe>0){n=t+n.substring(8,c-1);break}default:(s<1||a[s-1].length<1)&&(n=t+Ue+n)}break;case Q:t="";default:n=c>1&&n.indexOf(":")>0?t+n.replace(M,"$1"+Ue+"$2"):t+n+Ue}i+=n}e[r]=i.replace(f,"").trim()}}function c(e,t,n,r,o,a,i,s){for(var c,u=0,p=t;u<Ee;u++)switch(c=je[u].call(h,e,p,n,r,o,a,i,s)){case void 0:case!1:case!0:case null:break;default:p=c}switch(p){case void 0:case!1:case!0:case null:case t:break;default:return p}}function u(e){return e.replace(f,"").replace(j,"").replace(E,"$1").replace(I,"$1").replace(P," ")}function p(e){switch(e){case void 0:case null:Ee=je.length=0;break;default:switch(e.constructor){case Array:for(var t=0,n=e.length;t<n;t++)p(e[t]);break;case Function:je[Ee++]=e;break;case Boolean:Re=0|!!e}}return p}function l(e){for(var t in e){var n=e[t];switch(t){case"keyframe":Le=0|n;break;case"global":xe=0|n;break;case"cascade":ke=0|n;break;case"compress":Te=0|n;break;case"prefix":we=0|n;break;case"semicolon":Ae=0|n;break;case"preserve":Se=0|n}}return l}function h(t,r){if(void 0!==this&&this.constructor===h)return e(t);var o=t,a=o.charCodeAt(0);a<33&&(a=(o=o.trim()).charCodeAt(0)),Le>0&&(_e=o.replace(T,a===$?"":"-")),a=1,1===ke?ze=o:Ue=o;var i,s=[ze];Ee>0&&void 0!==(i=c(Pe,r,s,s,ve,be,0,0))&&"string"==typeof(r=i)&&(r=i);var p=n(Oe,s,r,0);return Ee>0&&void 0!==(i=c(Ie,p,s,s,ve,be,p.length,0))&&"string"!=typeof(p=i)&&(a=0),_e="",ze="",Ue="",Ce=0,ve=1,be=1,Te*a==0?p:u(p)}var d=/^\0+/g,f=/[\0\r\f]/g,m=/: */g,g=/zoo|gra/,y=/([,: ])(transform)/g,b=/,+\s*(?![^(]*[)])/g,v=/ +\s*(?![^(]*[)])/g,C=/ *[\0] */g,k=/,\r+?/g,w=/([\t\r\n ])*\f?&/g,x=/:global\(((?:[^\(\)\[\]]*|\[.*\]|\([^\(\)]*\))*)\)/g,T=/\W+/g,A=/@(k\w+)\s*(\S*)\s*/,S=/::(place)/g,O=/:(read-only)/g,j=/\s+(?=[{\];=:>])/g,E=/([[}=:>])\s+/g,I=/(\{[^{]+?);(?=\})/g,P=/\s{2,}/g,M=/([^\(])(:+) */g,N=/[svh]\w+-[tblr]{2}/,D="-webkit-",F="-moz-",R="-ms-",L=59,_=125,U=123,z=40,W=41,$=91,H=93,B=10,q=13,V=9,K=64,X=32,G=38,Y=45,Z=95,J=42,Q=44,ee=58,te=39,ne=34,re=47,oe=62,ae=43,ie=126,se=0,ce=12,ue=11,pe=107,le=109,he=115,de=112,fe=111,me=169,ge=163,ye=100,be=1,ve=1,Ce=0,ke=1,we=1,xe=1,Te=0,Ae=0,Se=0,Oe=[],je=[],Ee=0,Ie=-2,Pe=-1,Me=0,Ne=1,De=2,Fe=3,Re=0,Le=1,_e="",Ue="",ze="";return h.use=p,h.set=l,void 0!==t&&l(t),h})}),F=new D({global:!1,cascade:!0,keyframe:!1,prefix:!0,compress:!1,semicolon:!0}),R=function(e,t,n){var r=e.join("").replace(/^\s*\/\/.*$/gm,""),o=t&&n?n+" "+t+" { "+r+" }":r;return F(n||!t?"":t,o)},L="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ".split(""),_=L.length,U=function(e){var t="",n=void 0;for(n=e;n>_;n=Math.floor(n/_))t=L[n%_]+t;return L[n%_]+t},z=function(e,t){return t.reduce(function(t,n,r){return t.concat(n,e[r+1])},[e[0]])},W=function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];return N(z(e,n))},$=function(e){var t=""+(e||""),n=[];return t.replace(/^[^\S\n]*?\/\* sc-component-id:\s+(\S+)\s+\*\//gm,function(e,t,r){return n.push({componentId:t,matchIndex:r}),e}),n.map(function(e,r){var o=e.componentId,a=e.matchIndex,i=n[r+1];return{componentId:o,cssFromDOM:i?t.slice(a,i.matchIndex):t.slice(a)}})},H=function(){return"undefined"!=typeof __webpack_nonce__?__webpack_nonce__:null},B=function(){function e(t,n){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"";x(this,e),this.el=t,this.isLocal=n,this.ready=!1;var o=$(r);this.size=o.length,this.components=o.reduce(function(e,t){return e[t.componentId]=t,e},{})}return e.prototype.isFull=function(){return this.size>=40},e.prototype.addComponent=function(e){if(this.ready||this.replaceElement(),this.components[e])throw new Error("Trying to add Component '"+e+"' twice!");var t={componentId:e,textNode:document.createTextNode("")};this.el.appendChild(t.textNode),this.size+=1,this.components[e]=t},e.prototype.inject=function(e,t,n){this.ready||this.replaceElement();var r=this.components[e];if(!r)throw new Error("Must add a new component before you can inject css into it");if(""===r.textNode.data&&r.textNode.appendData("\n/* sc-component-id: "+e+" */\n"),r.textNode.appendData(t),n){var o=this.el.getAttribute(V);this.el.setAttribute(V,o?o+" "+n:n)}var a=H();a&&this.el.setAttribute("nonce",a)},e.prototype.toHTML=function(){return this.el.outerHTML},e.prototype.toReactElement=function(){throw new Error("BrowserTag doesn't implement toReactElement!")},e.prototype.clone=function(){throw new Error("BrowserTag cannot be cloned!")},e.prototype.replaceElement=function(){var e=this;if(this.ready=!0,0!==this.size){var t=this.el.cloneNode();if(t.appendChild(document.createTextNode("\n")),Object.keys(this.components).forEach(function(n){var r=e.components[n];r.textNode=document.createTextNode(r.cssFromDOM),t.appendChild(r.textNode)}),!this.el.parentNode)throw new Error("Trying to replace an element that wasn't mounted!");this.el.parentNode.replaceChild(t,this.el),this.el=t}},e}(),q={create:function(){for(var e=[],t={},n=document.querySelectorAll("["+V+"]"),r=n.length,o=0;o<r;o+=1){var a=n[o];e.push(new B(a,"true"===a.getAttribute(K),a.innerHTML));var i=a.getAttribute(V);i&&i.trim().split(/\s+/).forEach(function(e){t[e]=!0})}return new Z(function(e){var t=document.createElement("style");if(t.type="text/css",t.setAttribute(V,""),t.setAttribute(K,e?"true":"false"),!document.head)throw new Error("Missing document <head>");return document.head.appendChild(t),new B(t,e)},e,t)}},V="data-styled-components",K="data-styled-components-is-local",X="__styled-components-stylesheet__",G=null,Y=[],Z=function(){function e(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};x(this,e),this.hashes={},this.deferredInjections={},this.tagConstructor=t,this.tags=n,this.names=r,this.constructComponentTagMap()}return e.prototype.constructComponentTagMap=function(){var e=this;this.componentTags={},this.tags.forEach(function(t){Object.keys(t.components).forEach(function(n){e.componentTags[n]=t})})},e.prototype.getName=function(e){return this.hashes[e.toString()]},e.prototype.alreadyInjected=function(e,t){return!!this.names[t]&&(this.hashes[e.toString()]=t,!0)},e.prototype.hasInjectedComponent=function(e){return!!this.componentTags[e]},e.prototype.deferredInject=function(e,t,n){this===G&&Y.forEach(function(r){r.deferredInject(e,t,n)}),this.getOrCreateTag(e,t),this.deferredInjections[e]=n},e.prototype.inject=function(e,t,n,r,o){this===G&&Y.forEach(function(r){r.inject(e,t,n)});var a=this.getOrCreateTag(e,t),i=this.deferredInjections[e];i&&(a.inject(e,i),delete this.deferredInjections[e]),a.inject(e,n,o),r&&o&&(this.hashes[r.toString()]=o)},e.prototype.toHTML=function(){return this.tags.map(function(e){return e.toHTML()}).join("")},e.prototype.toReactElements=function(){return this.tags.map(function(e,t){return e.toReactElement("sc-"+t)})},e.prototype.getOrCreateTag=function(e,t){var n=this.componentTags[e];if(n)return n;var r=this.tags[this.tags.length-1],o=!r||r.isFull()||r.isLocal!==t?this.createNewTag(t):r;return this.componentTags[e]=o,o.addComponent(e),o},e.prototype.createNewTag=function(e){var t=this.tagConstructor(e);return this.tags.push(t),t},e.reset=function(t){G=e.create(t)},e.create=function(){return((arguments.length>0&&void 0!==arguments[0]?arguments[0]:"undefined"==typeof document)?le:q).create()},e.clone=function(t){var n=new e(t.tagConstructor,t.tags.map(function(e){return e.clone()}),A({},t.names));return n.hashes=A({},t.hashes),n.deferredInjections=A({},t.deferredInjections),Y.push(n),n},T(e,null,[{key:"instance",get:function(){return G||(G=e.create())}}]),e}(),J=function(){};J.thatReturns=i,J.thatReturnsFalse=i(!1),J.thatReturnsTrue=i(!0),J.thatReturnsNull=i(null),J.thatReturnsThis=function(){return this},J.thatReturnsArgument=function(e){return e};var Q,ee=J,te=function(e){},ne=s,re=ee,oe=ne,ae=function(){function e(){oe(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t};return n.checkPropTypes=re,n.PropTypes=n,n},ie=a(function(e){e.exports=ae()}),se=function(e){function t(){return x(this,t),j(this,e.apply(this,arguments))}return S(t,e),t.prototype.getChildContext=function(){var e;return e={},e[X]=this.props.sheet,e},t.prototype.render=function(){return g.Children.only(this.props.children)},t}(t.Component);se.childContextTypes=(Q={},Q[X]=ie.instanceOf(Z).isRequired,Q);var ce,ue,pe=function(){function e(t){x(this,e),this.isLocal=t,this.components={},this.size=0,this.names=[]}return e.prototype.isFull=function(){return!1},e.prototype.addComponent=function(e){if(this.components[e])throw new Error("Trying to add Component '"+e+"' twice!");this.components[e]={componentId:e,css:""},this.size+=1},e.prototype.concatenateCSS=function(){var e=this;return Object.keys(this.components).reduce(function(t,n){return t+e.components[n].css},"")},e.prototype.inject=function(e,t,n){var r=this.components[e];if(!r)throw new Error("Must add a new component before you can inject css into it");""===r.css&&(r.css="/* sc-component-id: "+e+" */\n"),r.css+=t.replace(/\n*$/,"\n"),n&&this.names.push(n)},e.prototype.toHTML=function(){var e=['type="text/css"',V+'="'+this.names.join(" ")+'"',K+'="'+(this.isLocal?"true":"false")+'"'],t=H();return t&&e.push('nonce="'+t+'"'),"<style "+e.join(" ")+">"+this.concatenateCSS()+"</style>"},e.prototype.toReactElement=function(e){var t,n=(t={},t[V]=this.names.join(" "),t[K]=this.isLocal.toString(),t),r=H();return r&&(n.nonce=r),g.createElement("style",A({key:e,type:"text/css"},n,{dangerouslySetInnerHTML:{__html:this.concatenateCSS()}}))},e.prototype.clone=function(){var t=this,n=new e(this.isLocal);return n.names=[].concat(this.names),n.size=this.size,n.components=Object.keys(this.components).reduce(function(e,n){return e[n]=A({},t.components[n]),e},{}),n},e}(),le=function(){function e(){x(this,e),this.instance=Z.clone(Z.instance)}return e.prototype.collectStyles=function(e){if(this.closed)throw new Error("Can't collect styles once you've called getStyleTags!");return g.createElement(se,{sheet:this.instance},e)},e.prototype.getStyleTags=function(){return this.closed||(Y.splice(Y.indexOf(this.instance),1),this.closed=!0),this.instance.toHTML()},e.prototype.getStyleElement=function(){return this.closed||(Y.splice(Y.indexOf(this.instance),1),this.closed=!0),this.instance.toReactElements()},e.create=function(){return new Z(function(e){return new pe(e)})},e}(),he={children:!0,dangerouslySetInnerHTML:!0,key:!0,ref:!0,autoFocus:!0,defaultValue:!0,valueLink:!0,defaultChecked:!0,checkedLink:!0,innerHTML:!0,suppressContentEditableWarning:!0,onFocusIn:!0,onFocusOut:!0,className:!0,onCopy:!0,onCut:!0,onPaste:!0,onCompositionEnd:!0,onCompositionStart:!0,onCompositionUpdate:!0,onKeyDown:!0,onKeyPress:!0,onKeyUp:!0,onFocus:!0,onBlur:!0,onChange:!0,onInput:!0,onSubmit:!0,onClick:!0,onContextMenu:!0,onDoubleClick:!0,onDrag:!0,onDragEnd:!0,onDragEnter:!0,onDragExit:!0,onDragLeave:!0,onDragOver:!0,onDragStart:!0,onDrop:!0,onMouseDown:!0,onMouseEnter:!0,onMouseLeave:!0,onMouseMove:!0,onMouseOut:!0,onMouseOver:!0,onMouseUp:!0,onSelect:!0,onTouchCancel:!0,onTouchEnd:!0,onTouchMove:!0,onTouchStart:!0,onScroll:!0,onWheel:!0,onAbort:!0,onCanPlay:!0,onCanPlayThrough:!0,onDurationChange:!0,onEmptied:!0,onEncrypted:!0,onEnded:!0,onError:!0,onLoadedData:!0,onLoadedMetadata:!0,onLoadStart:!0,onPause:!0,onPlay:!0,onPlaying:!0,onProgress:!0,onRateChange:!0,onSeeked:!0,onSeeking:!0,onStalled:!0,onSuspend:!0,onTimeUpdate:!0,onVolumeChange:!0,onWaiting:!0,onLoad:!0,onAnimationStart:!0,onAnimationEnd:!0,onAnimationIteration:!0,onTransitionEnd:!0,onCopyCapture:!0,onCutCapture:!0,onPasteCapture:!0,onCompositionEndCapture:!0,onCompositionStartCapture:!0,onCompositionUpdateCapture:!0,onKeyDownCapture:!0,onKeyPressCapture:!0,onKeyUpCapture:!0,onFocusCapture:!0,onBlurCapture:!0,onChangeCapture:!0,onInputCapture:!0,onSubmitCapture:!0,onClickCapture:!0,onContextMenuCapture:!0,onDoubleClickCapture:!0,onDragCapture:!0,onDragEndCapture:!0,onDragEnterCapture:!0,onDragExitCapture:!0,onDragLeaveCapture:!0,onDragOverCapture:!0,onDragStartCapture:!0,onDropCapture:!0,onMouseDownCapture:!0,onMouseEnterCapture:!0,onMouseLeaveCapture:!0,onMouseMoveCapture:!0,onMouseOutCapture:!0,onMouseOverCapture:!0,onMouseUpCapture:!0,onSelectCapture:!0,onTouchCancelCapture:!0,onTouchEndCapture:!0,onTouchMoveCapture:!0,onTouchStartCapture:!0,onScrollCapture:!0,onWheelCapture:!0,onAbortCapture:!0,onCanPlayCapture:!0,onCanPlayThroughCapture:!0,onDurationChangeCapture:!0,onEmptiedCapture:!0,onEncryptedCapture:!0,onEndedCapture:!0,onErrorCapture:!0,onLoadedDataCapture:!0,onLoadedMetadataCapture:!0,onLoadStartCapture:!0,onPauseCapture:!0,onPlayCapture:!0,onPlayingCapture:!0,onProgressCapture:!0,onRateChangeCapture:!0,onSeekedCapture:!0,onSeekingCapture:!0,onStalledCapture:!0,onSuspendCapture:!0,onTimeUpdateCapture:!0,onVolumeChangeCapture:!0,onWaitingCapture:!0,onLoadCapture:!0,onAnimationStartCapture:!0,onAnimationEndCapture:!0,onAnimationIterationCapture:!0,onTransitionEndCapture:!0},de={accept:!0,acceptCharset:!0,accessKey:!0,action:!0,allowFullScreen:!0,allowTransparency:!0,alt:!0,as:!0,async:!0,autoComplete:!0,autoPlay:!0,capture:!0,cellPadding:!0,cellSpacing:!0,charSet:!0,challenge:!0,checked:!0,cite:!0,classID:!0,className:!0,cols:!0,colSpan:!0,content:!0,contentEditable:!0,contextMenu:!0,controls:!0,coords:!0,crossOrigin:!0,data:!0,dateTime:!0,default:!0,defer:!0,dir:!0,disabled:!0,download:!0,draggable:!0,encType:!0,form:!0,formAction:!0,formEncType:!0,formMethod:!0,formNoValidate:!0,formTarget:!0,frameBorder:!0,headers:!0,height:!0,hidden:!0,high:!0,href:!0,hrefLang:!0,htmlFor:!0,httpEquiv:!0,icon:!0,id:!0,inputMode:!0,integrity:!0,is:!0,keyParams:!0,keyType:!0,kind:!0,label:!0,lang:!0,list:!0,loop:!0,low:!0,manifest:!0,marginHeight:!0,marginWidth:!0,max:!0,maxLength:!0,media:!0,mediaGroup:!0,method:!0,min:!0,minLength:!0,multiple:!0,muted:!0,name:!0,nonce:!0,noValidate:!0,open:!0,optimum:!0,pattern:!0,placeholder:!0,playsInline:!0,poster:!0,preload:!0,profile:!0,radioGroup:!0,readOnly:!0,referrerPolicy:!0,rel:!0,required:!0,reversed:!0,role:!0,rows:!0,rowSpan:!0,sandbox:!0,scope:!0,scoped:!0,scrolling:!0,seamless:!0,selected:!0,shape:!0,size:!0,sizes:!0,span:!0,spellCheck:!0,src:!0,srcDoc:!0,srcLang:!0,srcSet:!0,start:!0,step:!0,style:!0,summary:!0,tabIndex:!0,target:!0,title:!0,type:!0,useMap:!0,value:!0,width:!0,wmode:!0,wrap:!0,about:!0,datatype:!0,inlist:!0,prefix:!0,property:!0,resource:!0,typeof:!0,vocab:!0,autoCapitalize:!0,autoCorrect:!0,autoSave:!0,color:!0,itemProp:!0,itemScope:!0,itemType:!0,itemID:!0,itemRef:!0,results:!0,security:!0,unselectable:0},fe={accentHeight:!0,accumulate:!0,additive:!0,alignmentBaseline:!0,allowReorder:!0,alphabetic:!0,amplitude:!0,arabicForm:!0,ascent:!0,attributeName:!0,attributeType:!0,autoReverse:!0,azimuth:!0,baseFrequency:!0,baseProfile:!0,baselineShift:!0,bbox:!0,begin:!0,bias:!0,by:!0,calcMode:!0,capHeight:!0,clip:!0,clipPath:!0,clipRule:!0,clipPathUnits:!0,colorInterpolation:!0,colorInterpolationFilters:!0,colorProfile:!0,colorRendering:!0,contentScriptType:!0,contentStyleType:!0,cursor:!0,cx:!0,cy:!0,d:!0,decelerate:!0,descent:!0,diffuseConstant:!0,direction:!0,display:!0,divisor:!0,dominantBaseline:!0,dur:!0,dx:!0,dy:!0,edgeMode:!0,elevation:!0,enableBackground:!0,end:!0,exponent:!0,externalResourcesRequired:!0,fill:!0,fillOpacity:!0,fillRule:!0,filter:!0,filterRes:!0,filterUnits:!0,floodColor:!0,floodOpacity:!0,focusable:!0,fontFamily:!0,fontSize:!0,fontSizeAdjust:!0,fontStretch:!0,fontStyle:!0,fontVariant:!0,fontWeight:!0,format:!0,from:!0,fx:!0,fy:!0,g1:!0,g2:!0,glyphName:!0,glyphOrientationHorizontal:!0,glyphOrientationVertical:!0,glyphRef:!0,gradientTransform:!0,gradientUnits:!0,hanging:!0,horizAdvX:!0,horizOriginX:!0,ideographic:!0,imageRendering:!0,in:!0,in2:!0,intercept:!0,k:!0,k1:!0,k2:!0,k3:!0,k4:!0,kernelMatrix:!0,kernelUnitLength:!0,kerning:!0,keyPoints:!0,keySplines:!0,keyTimes:!0,lengthAdjust:!0,letterSpacing:!0,lightingColor:!0,limitingConeAngle:!0,local:!0,markerEnd:!0,markerMid:!0,markerStart:!0,markerHeight:!0,markerUnits:!0,markerWidth:!0,mask:!0,maskContentUnits:!0,maskUnits:!0,mathematical:!0,mode:!0,numOctaves:!0,offset:!0,opacity:!0,operator:!0,order:!0,orient:!0,orientation:!0,origin:!0,overflow:!0,overlinePosition:!0,overlineThickness:!0,paintOrder:!0,panose1:!0,pathLength:!0,patternContentUnits:!0,patternTransform:!0,patternUnits:!0,pointerEvents:!0,points:!0,pointsAtX:!0,pointsAtY:!0,pointsAtZ:!0,preserveAlpha:!0,preserveAspectRatio:!0,primitiveUnits:!0,r:!0,radius:!0,refX:!0,refY:!0,renderingIntent:!0,repeatCount:!0,repeatDur:!0,requiredExtensions:!0,requiredFeatures:!0,restart:!0,result:!0,rotate:!0,rx:!0,ry:!0,scale:!0,seed:!0,shapeRendering:!0,slope:!0,spacing:!0,specularConstant:!0,specularExponent:!0,speed:!0,spreadMethod:!0,startOffset:!0,stdDeviation:!0,stemh:!0,stemv:!0,stitchTiles:!0,stopColor:!0,stopOpacity:!0,strikethroughPosition:!0,strikethroughThickness:!0,string:!0,stroke:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeLinecap:!0,strokeLinejoin:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0,surfaceScale:!0,systemLanguage:!0,tableValues:!0,targetX:!0,targetY:!0,textAnchor:!0,textDecoration:!0,textRendering:!0,textLength:!0,to:!0,transform:!0,u1:!0,u2:!0,underlinePosition:!0,underlineThickness:!0,unicode:!0,unicodeBidi:!0,unicodeRange:!0,unitsPerEm:!0,vAlphabetic:!0,vHanging:!0,vIdeographic:!0,vMathematical:!0,values:!0,vectorEffect:!0,version:!0,vertAdvY:!0,vertOriginX:!0,vertOriginY:!0,viewBox:!0,viewTarget:!0,visibility:!0,widths:!0,wordSpacing:!0,writingMode:!0,x:!0,xHeight:!0,x1:!0,x2:!0,xChannelSelector:!0,xlinkActuate:!0,xlinkArcrole:!0,xlinkHref:!0,xlinkRole:!0,xlinkShow:!0,xlinkTitle:!0,xlinkType:!0,xmlBase:!0,xmlns:!0,xmlnsXlink:!0,xmlLang:!0,xmlSpace:!0,y:!0,y1:!0,y2:!0,yChannelSelector:!0,z:!0,zoomAndPan:!0},me=RegExp.prototype.test.bind(new RegExp("^(data|aria)-[:A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD\\-.0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040]*$")),ge={}.hasOwnProperty,ye=function(e){return ge.call(de,e)||ge.call(fe,e)||me(e.toLowerCase())||ge.call(he,e)},be=l,ve=Object.prototype.toString,Ce=function(e){function t(e){i=e;for(var t in o){var n=o[t];void 0!==n&&n(i)}}function n(e){var t=a;return o[t]=e,a+=1,e(i),t}function r(e){o[e]=void 0}var o={},a=0,i=e;return{publish:t,subscribe:n,unsubscribe:r}},ke="__styled-components__",we=ke+"next__",xe=ie.shape({getTheme:ie.func,subscribe:ie.func,unsubscribe:ie.func}),Te=function(e){var t=!1;return function(){t||(t=!0,e())}}(function(){console.error("Warning: Usage of `context."+ke+"` as a function is deprecated. It will be replaced with the object on `.context."+we+"` in a future version.")}),Ae=function(e){function t(){x(this,t);var n=j(this,e.call(this));return n.unsubscribeToOuterId=-1,n.getTheme=n.getTheme.bind(n),n}return S(t,e),t.prototype.componentWillMount=function(){var e=this,t=this.context[we];void 0!==t&&(this.unsubscribeToOuterId=t.subscribe(function(t){e.outerTheme=t})),this.broadcast=Ce(this.getTheme())},t.prototype.getChildContext=function(){var e,t=this;return A({},this.context,(e={},e[we]={getTheme:this.getTheme,subscribe:this.broadcast.subscribe,unsubscribe:this.broadcast.unsubscribe},e[ke]=function(e){Te();var n=t.broadcast.subscribe(e);return function(){return t.broadcast.unsubscribe(n)}},e))},t.prototype.componentWillReceiveProps=function(e){this.props.theme!==e.theme&&this.broadcast.publish(this.getTheme(e.theme))},t.prototype.componentWillUnmount=function(){-1!==this.unsubscribeToOuterId&&this.context[we].unsubscribe(this.unsubscribeToOuterId)},t.prototype.getTheme=function(e){var t=e||this.props.theme;if(be(t)){var n=t(this.outerTheme);if(!P(n))throw new Error("[ThemeProvider] Please return an object from your theme function, i.e. theme={() => ({})}!");return n}if(!P(t))throw new Error("[ThemeProvider] Please make your theme prop a plain object");return A({},this.outerTheme,t)},t.prototype.render=function(){return this.props.children?g.Children.only(this.props.children):null},t}(t.Component);Ae.childContextTypes=(ce={},ce[ke]=ie.func,ce[we]=xe,ce),Ae.contextTypes=(ue={},ue[we]=xe,ue)
-;var Se=["a","abbr","address","area","article","aside","audio","b","base","bdi","bdo","big","blockquote","body","br","button","canvas","caption","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dialog","div","dl","dt","em","embed","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","img","input","ins","kbd","keygen","label","legend","li","link","main","map","mark","marquee","menu","menuitem","meta","meter","nav","noscript","object","ol","optgroup","option","output","p","param","picture","pre","progress","q","rp","rt","ruby","s","samp","script","section","select","small","source","span","strong","style","sub","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","title","tr","track","u","ul","var","video","wbr","circle","clipPath","defs","ellipse","g","image","line","linearGradient","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","svg","text","tspan"],Oe=function(e){return e.replace(/\s|\\n/g,"")},je={childContextTypes:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,mixins:!0,propTypes:!0,type:!0},Ee={name:!0,length:!0,prototype:!0,caller:!0,arguments:!0,arity:!0},Ie="function"==typeof Object.getOwnPropertySymbols,Pe=function(e,t,n){if("string"!=typeof t){var r=Object.getOwnPropertyNames(t);Ie&&(r=r.concat(Object.getOwnPropertySymbols(t)));for(var o=0;o<r.length;++o)if(!(je[r[o]]||Ee[r[o]]||n&&n[r[o]]))try{e[r[o]]=t[r[o]]}catch(e){}}return e},Me=function(e){var t,n=e.displayName||e.name||"Component",r=u(e),o=function(t){function n(){var e,r,o;x(this,n);for(var a=arguments.length,i=Array(a),s=0;s<a;s++)i[s]=arguments[s];return e=r=j(this,t.call.apply(t,[this].concat(i))),r.state={},r.unsubscribeId=-1,o=e,j(r,o)}return S(n,t),n.prototype.componentWillMount=function(){var e=this,t=this.context[we];if(void 0===t)return void console.error("[withTheme] Please use ThemeProvider to be able to use withTheme");var n=t.subscribe;this.unsubscribeId=n(function(t){e.setState({theme:t})})},n.prototype.componentWillUnmount=function(){-1!==this.unsubscribeId&&this.context[we].unsubscribe(this.unsubscribeId)},n.prototype.render=function(){var t=this.props.innerRef,n=this.state.theme;return g.createElement(e,A({theme:n},this.props,{innerRef:r?t:void 0,ref:r?void 0:t}))},n}(g.Component);return o.displayName="WithTheme("+n+")",o.styledComponentId="withTheme",o.contextTypes=(t={},t[ke]=ie.func,t[we]=xe,t),Pe(o,e)},Ne=function(e,t,n){return function(){function r(e,t){if(x(this,r),this.rules=e,this.componentId=t,!Z.instance.hasInjectedComponent(this.componentId)){Z.instance.deferredInject(t,!0,"")}}return r.prototype.generateAndInjectStyles=function(r,o){var a=t(this.rules,r),i=h(this.componentId+a.join("")),s=o.getName(i);if(s)return s;var c=e(i);if(o.alreadyInjected(i,c))return c;var u="\n"+n(a,"."+c);return o.inject(this.componentId,!0,u,i,c),c},r.generateName=function(t){return e(h(t))},r}()}(U,N,R),De=function(e){return function t(n,r){var o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if("string"!=typeof r&&"function"!=typeof r)throw new Error("Cannot create styled-component for component: "+r);var a=function(t){for(var a=arguments.length,i=Array(a>1?a-1:0),s=1;s<a;s++)i[s-1]=arguments[s];return n(r,o,e.apply(void 0,[t].concat(i)))};return a.withConfig=function(e){return t(n,r,A({},o,e))},a.attrs=function(e){return t(n,r,A({},o,{attrs:A({},o.attrs||{},e)}))},a}}(W),Fe=function(e,n){var r={},o=function(t,n){var o="string"!=typeof t?"sc":t.replace(/[[\].#*$><+~=|^:(),"'`]/g,"-").replace(/--+/g,"-"),a=(r[o]||0)+1;r[o]=a;var i=e.generateName(o+a),s=o+"-"+i;return void 0!==n?n+"-"+s:s},a=function(e){function n(){var t,r,o;x(this,n);for(var a=arguments.length,i=Array(a),s=0;s<a;s++)i[s]=arguments[s];return t=r=j(this,e.call.apply(e,[this].concat(i))),r.attrs={},r.state={theme:null,generatedClassName:""},r.unsubscribeId=-1,o=t,j(r,o)}return S(n,e),n.prototype.unsubscribeFromContext=function(){-1!==this.unsubscribeId&&this.context[we].unsubscribe(this.unsubscribeId)},n.prototype.buildExecutionContext=function(e,t){var n=this.constructor.attrs,r=A({},t,{theme:e});return void 0===n?r:(this.attrs=Object.keys(n).reduce(function(e,t){var o=n[t];return e[t]="function"==typeof o?o(r):o,e},{}),A({},r,this.attrs))},n.prototype.generateAndInjectStyles=function(e,t){var n=this.constructor,r=n.componentStyle,o=n.warnTooManyClasses,a=this.buildExecutionContext(e,t),i=this.context[X]||Z.instance,s=r.generateAndInjectStyles(a,i);return void 0!==o&&o(s),s},n.prototype.componentWillMount=function(){var e=this,t=this.context[we];if(void 0!==t){var n=t.subscribe;this.unsubscribeId=n(function(t){var n=e.constructor.defaultProps,r=n&&e.props.theme===n.theme,o=e.props.theme&&!r?e.props.theme:t,a=e.generateAndInjectStyles(o,e.props);e.setState({theme:o,generatedClassName:a})})}else{var r=this.props.theme||{},o=this.generateAndInjectStyles(r,this.props);this.setState({theme:r,generatedClassName:o})}},n.prototype.componentWillReceiveProps=function(e){var t=this;this.setState(function(n){var r=t.constructor.defaultProps,o=r&&e.theme===r.theme,a=e.theme&&!o?e.theme:n.theme;return{theme:a,generatedClassName:t.generateAndInjectStyles(a,e)}})},n.prototype.componentWillUnmount=function(){this.unsubscribeFromContext()},n.prototype.render=function(){var e=this,n=this.props.innerRef,r=this.state.generatedClassName,o=this.constructor,a=o.styledComponentId,i=o.target,s=c(i),p=[this.props.className,a,this.attrs.className,r].filter(Boolean).join(" "),l=A({},this.attrs,{className:p});u(i)?l.innerRef=n:l.ref=n;var h=Object.keys(this.props).reduce(function(t,n){return"innerRef"===n||"className"===n||s&&!ye(n)||(t[n]=e.props[n]),t},l);return t.createElement(i,h)},n}(t.Component);return function t(r,i,s){var u,l=i.displayName,h=void 0===l?c(r)?"styled."+r:"Styled("+p(r)+")":l,d=i.componentId,f=void 0===d?o(i.displayName,i.parentComponentId):d,m=i.ParentComponent,g=void 0===m?a:m,y=i.rules,b=i.attrs,v=i.displayName&&i.componentId?i.displayName+"-"+i.componentId:f,C=new e(void 0===y?s:y.concat(s),v),k=function(e){function o(){return x(this,o),j(this,e.apply(this,arguments))}return S(o,e),o.withComponent=function(e){var n=i.componentId,r=O(i,["componentId"]),a=n&&n+"-"+(c(e)?e:p(e)),u=A({},r,{componentId:a,ParentComponent:o});return t(e,u,s)},T(o,null,[{key:"extend",get:function(){var e=i.rules,a=i.componentId,c=O(i,["rules","componentId"]),u=void 0===e?s:e.concat(s),p=A({},c,{rules:u,parentComponentId:a,ParentComponent:o});return n(t,r,p)}}]),o}(g);return k.contextTypes=(u={},u[ke]=ie.func,u[we]=xe,u[X]=ie.instanceOf(Z),u),k.displayName=h,k.styledComponentId=v,k.attrs=b,k.componentStyle=C,k.warnTooManyClasses=void 0,k.target=r,k}}(Ne,De),Re=function(e,t,n){return function(r){for(var o=arguments.length,a=Array(o>1?o-1:0),i=1;i<o;i++)a[i-1]=arguments[i];var s=n.apply(void 0,[r].concat(a)),c=h(Oe(JSON.stringify(s))),u=Z.instance.getName(c);if(u)return u;var p=e(c);if(Z.instance.alreadyInjected(c,p))return p;var l=t(s,p,"@keyframes");return Z.instance.inject("sc-keyframes-"+p,!0,l,c,p),p}}(U,R,W),Le=function(e,t){return function(n){for(var r=arguments.length,o=Array(r>1?r-1:0),a=1;a<r;a++)o[a-1]=arguments[a];var i=t.apply(void 0,[n].concat(o)),s=h(JSON.stringify(i)),c="sc-global-"+s;Z.instance.hasInjectedComponent(c)||Z.instance.inject(c,!1,e(i))}}(R,W),_e=function(e,t){var n=function(n){return t(e,n)};return Se.forEach(function(e){n[e]=n(e)}),n}(Fe,De);e.default=_e,e.css=W,e.keyframes=Re,e.injectGlobal=Le,e.ThemeProvider=Ae,e.withTheme=Me,e.ServerStyleSheet=le,e.StyleSheetManager=se,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t(e.styled=e.styled||{},e.React)}(this,function(e,t){"use strict";function n(e){return e.replace(g,"-$1").toLowerCase()}function r(e){return v(e).replace(C,"-ms-")}function o(e){return!0===E(e)&&"[object Object]"===Object.prototype.toString.call(e)}function a(e,t){return t={exports:{}},e(t,t.exports),t.exports}function i(e){return function(){return e}}function s(e,t,n,r,o,a,i,s){if(te(t),!e){var c;if(void 0===t)c=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var u=[n,r,o,a,i,s],l=0;c=new Error(t.replace(/%s/g,function(){return u[l++]})),c.name="Invariant Violation"}throw c.framesToPop=1,c}}function c(e){return"string"==typeof e}function u(e){return"function"==typeof e&&"string"==typeof e.styledComponentId}function l(e){return e.displayName||e.name||"Component"}function p(e){var t=ve.call(e);return"[object Function]"===t||"function"==typeof e&&"[object RegExp]"!==t||"undefined"!=typeof window&&(e===window.setTimeout||e===window.alert||e===window.confirm||e===window.prompt)}function h(e,t){for(var n=1540483477,r=t^e.length,o=e.length,a=0;o>=4;){var i=d(e,a);i=m(i,n),i^=i>>>24,i=m(i,n),r=m(r,n),r^=i,a+=4,o-=4}switch(o){case 3:r^=f(e,a),r^=e.charCodeAt(a+2)<<16,r=m(r,n);break;case 2:r^=f(e,a),r=m(r,n);break;case 1:r^=e.charCodeAt(a),r=m(r,n)}return r^=r>>>13,r=m(r,n),(r^=r>>>15)>>>0}function d(e,t){return e.charCodeAt(t++)+(e.charCodeAt(t++)<<8)+(e.charCodeAt(t++)<<16)+(e.charCodeAt(t)<<24)}function f(e,t){return e.charCodeAt(t++)+(e.charCodeAt(t++)<<8)}function m(e,t){return e|=0,t|=0,(65535&e)*t+(((e>>>16)*t&65535)<<16)|0}var y="default"in t?t.default:t,g=/([A-Z])/g,b=n,v=b,C=/^ms-/,k=r,w="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},x=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},T=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),S=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},A=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},j=function(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n},O=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},I=function(e){return null!=e&&"object"===(void 0===e?"undefined":w(e))&&!Array.isArray(e)},E=I,P=function(e){var t,n;return!1!==o(e)&&("function"==typeof(t=e.constructor)&&(n=t.prototype,!1!==o(n)&&!1!==n.hasOwnProperty("isPrototypeOf")))},M=function e(t,n){var r=Object.keys(t).filter(function(e){var n=t[e];return void 0!==n&&null!==n&&!1!==n&&""!==n}).map(function(n){return P(t[n])?e(t[n],n):k(n)+": "+t[n]+";"}).join(" ");return n?n+" {\n  "+r+"\n}":r},N=function e(t,n){return t.reduce(function(t,r){return void 0===r||null===r||!1===r||""===r?t:Array.isArray(r)?[].concat(t,e(r,n)):r.hasOwnProperty("styledComponentId")?[].concat(t,["."+r.styledComponentId]):"function"==typeof r?n?t.concat.apply(t,e([r(n)],n)):t.concat(r):t.concat(P(r)?M(r):r.toString())},[])},D=a(function(e,t){!function(n){"object"===(void 0===t?"undefined":w(t))&&void 0!==e?e.exports=n():window.stylis=n()}(function e(t){function n(e,t,o,i){for(var u,l,p=0,h=0,m=0,y=0,g=0,b=0,v=0,C=0,k=0,w=0,x=0,T=0,O=0,I=0,E=0,P=0,M=0,N=0,Z=0,xe=o.length,Te=xe-1,Oe="",Ee="",Pe="",We="",$e="",He="";E<xe;){if(v=o.charCodeAt(E),h+y+m+p===0){if(E===Te&&(P>0&&(Ee=Ee.replace(f,"")),(Ee=Ee.trim()).length>0)){switch(v){case X:case V:case L:case q:case B:break;default:Ee+=o.charAt(E)}v=L}if(1===M)switch(v){case U:case Q:M=0;break;case V:case q:case B:case X:break;default:E--,v=L}switch(v){case U:for(Ee=Ee.trim(),g=Ee.charCodeAt(0),x=1,E++;E<xe;){switch(v=o.charCodeAt(E)){case U:x++;break;case _:x--}if(0===x)break;Pe+=o.charAt(E++)}switch(g===se&&(g=(Ee=Ee.replace(d,"").trim()).charCodeAt(0)),g){case K:switch(P>0&&(Ee=Ee.replace(f,"")),b=Ee.charCodeAt(1)){case ge:case pe:case he:u=t;break;default:u=je}if(Pe=n(t,u,Pe,b),Z=Pe.length,Ae>0&&0===Z&&(Z=Ee.length),Ie>0&&(u=r(je,Ee,N),l=c(Fe,Pe,u,t,ve,be,Z,b),Ee=u.join(""),void 0!==l&&0===(Z=(Pe=l.trim()).length)&&(b=0,Pe="")),Z>0)switch(b){case ge:case pe:case he:Pe=Ee+"{"+Pe+"}";break;case le:Ee=Ee.replace(S,"$1 $2"+(Le>0?_e:"")),Pe=Ee+"{"+Pe+"}",Pe="@"+(we>0?D+Pe+"@"+Pe:Pe);break;default:Pe=Ee+Pe}else Pe="";break;default:Pe=n(t,r(t,Ee,N),Pe,i)}$e+=Pe,T=0,M=0,I=0,P=0,N=0,O=0,Ee="",Pe="",E++;break;case _:case L:if(Ee=(P>0?Ee.replace(f,""):Ee).trim(),v!==_||Ee.length>0)switch(0===I&&((g=Ee.charCodeAt(0))===Y||g>96&&g<123)&&Ee.indexOf(" ")&&(Ee=Ee.replace(" ",": ")),Ie>0&&void 0!==(l=c(Ne,Ee,t,e,ve,be,We.length,i))&&0===(Ee=l.trim()).length&&(Ee="\0\0"),g=Ee.charCodeAt(0),b=Ee.charCodeAt(1),g+b){case se:break;case me:case ye:He+=Ee+o.charAt(E);break;default:We+=I>0?a(Ee,g,b,Ee.charCodeAt(2)):Ee+";"}T=0,M=0,I=0,P=0,N=0,Ee="",E++}}switch(v){case q:case B:if(h+y+m+p+Se===0)switch(w){case K:case ie:case oe:case J:case ae:case re:case Y:case ee:case Q:case L:case U:case _:break;default:I>0&&(M=1)}h===re&&(h=0),Ie*Re>0&&c(Me,Ee,t,e,ve,be,We.length,i),be=1,ve++;break;default:if(be++,v===V)break;switch(Oe=o.charAt(E),v){case se:Oe="\\0";break;case ce:Oe="\\f";break;case ue:Oe="\\v";break;case G:y+h+p===0&&ke>0&&(N=1,P=1,Oe="\f"+Oe);break;case 108:if(y+h+p+Ce===0&&I>0)switch(E-I){case 2:C===de&&o.charCodeAt(E-3)===ee&&(Ce=C);case 8:k===fe&&(Ce=k)}break;case ee:y+h+p===0&&(I=E);break;case Q:h+m+y+p===0&&(P=1,Oe+="\r");break;case ne:case te:0===h&&(y=y===v?0:0===y?v:y);break;case $:y+h+m===0&&p++;break;case H:y+h+m===0&&p--;break;case W:y+h+p===0&&(E===Te&&(Te++,xe++),m--);break;case z:if(y+h+p===0){if(0===T)switch(2*C+3*k){case 533:break;default:x=0,T=1}m++}break;case K:h+m+y+p+I+O===0&&(O=1);break;case J:case re:if(y+p+m>0)break;switch(h){case 0:switch(2*v+3*o.charCodeAt(E+1)){case 235:h=re;break;case 220:h=J}break;case J:v===re&&C===J&&(Oe="",h=0)}}if(0===h){if(ke+y+p+O===0&&i!==le&&v!==L)switch(v){case Q:case ie:case oe:case ae:case W:case z:if(0===T){switch(C){case V:case X:case B:case q:Oe+="\0";break;default:Oe="\0"+Oe+(v===Q?"":"\0")}P=1}else switch(v){case z:T=++x;break;case W:0==(T=--x)&&(P=1,Oe+="\0")}break;case X:switch(C){case se:case U:case _:case L:case Q:case ce:case V:case X:case B:case q:break;default:0===T&&(P=1,Oe+="\0")}}Ee+=Oe,v!==X&&(w=v)}}k=C,C=v,E++}if(Z=We.length,Ae>0&&0===Z&&0===$e.length&&0===t[0].length==!1&&(i!==pe||1===t.length&&(ke>0?Ue:ze)===t[0])&&(Z=t.join(",").length+2),Z>0){if(0===ke&&i!==le&&s(t),Ie>0&&void 0!==(l=c(De,We,t,e,ve,be,Z,i))&&0===(We=l).length)return He+We+$e;if(We=t.join(",")+"{"+We+"}",we*Ce>0){switch(Ce){case fe:We=We.replace(j,":"+F+"$1")+We;break;case de:We=We.replace(A,"::"+D+"input-$1")+We.replace(A,"::"+F+"$1")+We.replace(A,":"+R+"input-$1")+We}Ce=0}}return He+We+$e}function r(e,t,n){var r=t.trim().split(k),a=r,i=r.length,s=e.length;switch(s){case 0:case 1:for(var c=0,u=0===s?"":e[0]+" ";c<i;c++)a[c]=o(u,a[c],n,s).trim();break;default:for(var c=0,l=0,a=[];c<i;c++)for(var p=0;p<s;p++)a[l++]=o(e[p]+" ",r[c],n,s).trim()}return a}function o(e,t,n,r){var o=t,a=o.charCodeAt(0);switch(a<33&&(a=(o=o.trim()).charCodeAt(0)),a){case G:switch(ke+r){case 0:case 1:if(0===e.trim().length)break;default:return o.replace(w,"$1"+e.trim())}break;case ee:switch(o.charCodeAt(1)){case 103:if(xe>0&&ke>0)return o.replace(x,"$1").replace(w,"$1"+ze);break;default:return e.trim()+o}default:if(n*ke>0&&o.indexOf("\f")>0)return o.replace(w,(e.charCodeAt(0)===ee?"":"$1")+e.trim())}return e+o}function a(e,t,n,r){var o,a=e+";",s=0,c=2*t+3*n+4*r;if(944===c)a=i(a);else if(we>0)switch(c){case 963:110===a.charCodeAt(5)&&(a=D+a+a);break;case 978:a=D+a+F+a+a;break;case 1019:case 983:a=D+a+F+a+R+a+a;break;case 883:a.charCodeAt(8)===Y&&(a=D+a+a);break;case 932:a=D+a+R+a+a;break;case 964:a=D+a+R+"flex-"+a+a;break;case 1023:o=a.substring(a.indexOf(":",15)).replace("flex-",""),a=D+"box-pack"+o+D+a+R+"flex-pack"+o+a;break;case 975:switch(s=(a=e).length-10,o=(33===a.charCodeAt(s)?a.substring(0,s):a).substring(8).trim(),c=o.charCodeAt(0)+(0|o.charCodeAt(7))){case 203:o.charCodeAt(8)>110&&(a=a.replace(o,D+o)+";"+a);break;case 207:case 102:a=a.replace(o,D+(c>102?"inline-":"")+"box")+";"+a.replace(o,D+o)+";"+a.replace(o,R+o+"box")+";"+a}a+=";";break;case 938:if(a.charCodeAt(5)===Y)switch(a.charCodeAt(6)){case 105:o=a.replace("-items",""),a=D+a+D+"box-"+o+R+"flex-"+o+a;break;case 115:a=D+a+R+"flex-item-"+a.replace("-self","")+a;break;default:a=D+a+R+"flex-line-pack"+a.replace("align-content","")+a}break;case 1005:y.test(a)&&(a=a.replace(m,": "+D)+a.replace(m,": "+F)+a);break;case 953:(s=a.indexOf("-content",9))>0&&(o=a.substring(s-3),a="width:"+D+o+"width:"+F+o+"width:"+o);break;case 962:case 1015:a=D+a+(102===a.charCodeAt(5)?R+a:"")+a,n+r===211&&105===a.charCodeAt(13)&&a.indexOf("transform",10)>0&&(a=a.substring(0,a.indexOf(";",27)+1).replace(g,"$1"+D+"$2")+a);break;case 1e3:switch(o=a.substring(13).trim(),s=o.indexOf("-")+1,o.charCodeAt(0)+o.charCodeAt(s)){case 226:o=a.replace(N,"tb");break;case 232:o=a.replace(N,"tb-rl");break;case 220:o=a.replace(N,"lr");break;default:return a}a=D+a+R+o+a}return a}function i(e){var t=e.length,n=e.indexOf(":",9)+1,r=e.substring(0,n).trim(),o=e.substring(n,t-1).trim(),a="";if(e.charCodeAt(9)!==Y)for(var i=o.split(b),s=0,n=0,t=i.length;s<t;n=0,s++){for(var c=i[s],u=c.split(v);c=u[n];){var l=c.charCodeAt(0);if(1===Le&&(l>K&&l<90||l>96&&l<123||l===Z||l===Y&&c.charCodeAt(1)!==Y))switch(isNaN(parseFloat(c))+(-1!==c.indexOf("("))){case 1:switch(c){case"infinite":case"alternate":case"backwards":case"running":case"normal":case"forwards":case"both":case"none":case"linear":case"ease":case"ease-in":case"ease-out":case"ease-in-out":case"paused":case"reversed":case"alternate-reverse":case"inherit":case"initial":case"unset":case"step-start":case"step-end":break;default:c+=_e}}u[n++]=c}a+=(0===s?"":",")+u.join(" ")}else a+=110===e.charCodeAt(10)?o+(1===Le?_e:""):o;return a=r+a+";",we>0?D+a+a:a}function s(e){for(var t,n,r=0,o=e.length;r<o;r++){for(var a=e[r].split(C),i="",s=0,c=0,u=0,l=0,p=a.length;s<p;s++)if(!(0===(c=(n=a[s]).length)&&p>1)){if(u=i.charCodeAt(i.length-1),l=n.charCodeAt(0),t="",0!==s)switch(u){case J:case ie:case oe:case ae:case X:case z:break;default:t=" "}switch(l){case G:n=t+Ue;case ie:case oe:case ae:case X:case W:case z:break;case $:n=t+n+Ue;break;case ee:switch(2*n.charCodeAt(1)+3*n.charCodeAt(2)){case 530:if(xe>0){n=t+n.substring(8,c-1);break}default:(s<1||a[s-1].length<1)&&(n=t+Ue+n)}break;case Q:t="";default:n=c>1&&n.indexOf(":")>0?t+n.replace(M,"$1"+Ue+"$2"):t+n+Ue}i+=n}e[r]=i.replace(f,"").trim()}}function c(e,t,n,r,o,a,i,s){for(var c,u=0,l=t;u<Ie;u++)switch(c=Oe[u].call(h,e,l,n,r,o,a,i,s)){case void 0:case!1:case!0:case null:break;default:l=c}switch(l){case void 0:case!1:case!0:case null:case t:break;default:return l}}function u(e){return e.replace(f,"").replace(O,"").replace(I,"$1").replace(E,"$1").replace(P," ")}function l(e){switch(e){case void 0:case null:Ie=Oe.length=0;break;default:switch(e.constructor){case Array:for(var t=0,n=e.length;t<n;t++)l(e[t]);break;case Function:Oe[Ie++]=e;break;case Boolean:Re=0|!!e}}return l}function p(e){for(var t in e){var n=e[t];switch(t){case"keyframe":Le=0|n;break;case"global":xe=0|n;break;case"cascade":ke=0|n;break;case"compress":Te=0|n;break;case"prefix":we=0|n;break;case"semicolon":Se=0|n;break;case"preserve":Ae=0|n}}return p}function h(t,r){if(void 0!==this&&this.constructor===h)return e(t);var o=t,a=o.charCodeAt(0);a<33&&(a=(o=o.trim()).charCodeAt(0)),Le>0&&(_e=o.replace(T,a===$?"":"-")),a=1,1===ke?ze=o:Ue=o;var i,s=[ze];Ie>0&&void 0!==(i=c(Pe,r,s,s,ve,be,0,0))&&"string"==typeof(r=i)&&(r=i);var l=n(je,s,r,0);return Ie>0&&void 0!==(i=c(Ee,l,s,s,ve,be,l.length,0))&&"string"!=typeof(l=i)&&(a=0),_e="",ze="",Ue="",Ce=0,ve=1,be=1,Te*a==0?l:u(l)}var d=/^\0+/g,f=/[\0\r\f]/g,m=/: */g,y=/zoo|gra/,g=/([,: ])(transform)/g,b=/,+\s*(?![^(]*[)])/g,v=/ +\s*(?![^(]*[)])/g,C=/ *[\0] */g,k=/,\r+?/g,w=/([\t\r\n ])*\f?&/g,x=/:global\(((?:[^\(\)\[\]]*|\[.*\]|\([^\(\)]*\))*)\)/g,T=/\W+/g,S=/@(k\w+)\s*(\S*)\s*/,A=/::(place)/g,j=/:(read-only)/g,O=/\s+(?=[{\];=:>])/g,I=/([[}=:>])\s+/g,E=/(\{[^{]+?);(?=\})/g,P=/\s{2,}/g,M=/([^\(])(:+) */g,N=/[svh]\w+-[tblr]{2}/,D="-webkit-",F="-moz-",R="-ms-",L=59,_=125,U=123,z=40,W=41,$=91,H=93,B=10,q=13,V=9,K=64,X=32,G=38,Y=45,Z=95,J=42,Q=44,ee=58,te=39,ne=34,re=47,oe=62,ae=43,ie=126,se=0,ce=12,ue=11,le=107,pe=109,he=115,de=112,fe=111,me=169,ye=163,ge=100,be=1,ve=1,Ce=0,ke=1,we=1,xe=1,Te=0,Se=0,Ae=0,je=[],Oe=[],Ie=0,Ee=-2,Pe=-1,Me=0,Ne=1,De=2,Fe=3,Re=0,Le=1,_e="",Ue="",ze="";return h.use=l,h.set=p,void 0!==t&&p(t),h})}),F=new D({global:!1,cascade:!0,keyframe:!1,prefix:!0,compress:!1,semicolon:!0}),R=function(e,t,n){var r=e.join("").replace(/^\s*\/\/.*$/gm,""),o=t&&n?n+" "+t+" { "+r+" }":r;return F(n||!t?"":t,o)},L="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ".split(""),_=L.length,U=function(e){var t="",n=void 0;for(n=e;n>_;n=Math.floor(n/_))t=L[n%_]+t;return L[n%_]+t},z=function(e,t){return t.reduce(function(t,n,r){return t.concat(n,e[r+1])},[e[0]])},W=function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];return N(z(e,n))},$=function(e){var t=""+(e||""),n=[];return t.replace(/^[^\S\n]*?\/\* sc-component-id:\s+(\S+)\s+\*\//gm,function(e,t,r){return n.push({componentId:t,matchIndex:r}),e}),n.map(function(e,r){var o=e.componentId,a=e.matchIndex,i=n[r+1];return{componentId:o,cssFromDOM:i?t.slice(a,i.matchIndex):t.slice(a)}})},H=function(){return"undefined"!=typeof __webpack_nonce__?__webpack_nonce__:null},B=function(){function e(t,n){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"";x(this,e),this.el=t,this.isLocal=n,this.ready=!1;var o=$(r);this.size=o.length,this.components=o.reduce(function(e,t){return e[t.componentId]=t,e},{})}return e.prototype.isFull=function(){return this.size>=40},e.prototype.addComponent=function(e){if(this.ready||this.replaceElement(),this.components[e])throw new Error("Trying to add Component '"+e+"' twice!");var t={componentId:e,textNode:document.createTextNode("")};this.el.appendChild(t.textNode),this.size+=1,this.components[e]=t},e.prototype.inject=function(e,t,n){this.ready||this.replaceElement();var r=this.components[e];if(!r)throw new Error("Must add a new component before you can inject css into it");if(""===r.textNode.data&&r.textNode.appendData("\n/* sc-component-id: "+e+" */\n"),r.textNode.appendData(t),n){var o=this.el.getAttribute(V);this.el.setAttribute(V,o?o+" "+n:n)}var a=H();a&&this.el.setAttribute("nonce",a)},e.prototype.toHTML=function(){return this.el.outerHTML},e.prototype.toReactElement=function(){throw new Error("BrowserTag doesn't implement toReactElement!")},e.prototype.clone=function(){throw new Error("BrowserTag cannot be cloned!")},e.prototype.replaceElement=function(){var e=this;if(this.ready=!0,0!==this.size){var t=this.el.cloneNode();if(t.appendChild(document.createTextNode("\n")),Object.keys(this.components).forEach(function(n){var r=e.components[n];r.textNode=document.createTextNode(r.cssFromDOM),t.appendChild(r.textNode)}),!this.el.parentNode)throw new Error("Trying to replace an element that wasn't mounted!");this.el.parentNode.replaceChild(t,this.el),this.el=t}},e}(),q={create:function(){for(var e=[],t={},n=document.querySelectorAll("["+V+"]"),r=n.length,o=0;o<r;o+=1){var a=n[o];e.push(new B(a,"true"===a.getAttribute(K),a.innerHTML));var i=a.getAttribute(V);i&&i.trim().split(/\s+/).forEach(function(e){t[e]=!0})}return new Z(function(e){var t=document.createElement("style");if(t.type="text/css",t.setAttribute(V,""),t.setAttribute(K,e?"true":"false"),!document.head)throw new Error("Missing document <head>");return document.head.appendChild(t),new B(t,e)},e,t)}},V="data-styled-components",K="data-styled-components-is-local",X="__styled-components-stylesheet__",G=null,Y=[],Z=function(){function e(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};x(this,e),this.hashes={},this.deferredInjections={},this.stylesCacheable="undefined"!=typeof document,this.tagConstructor=t,this.tags=n,this.names=r,this.constructComponentTagMap()}return e.prototype.constructComponentTagMap=function(){var e=this;this.componentTags={},this.tags.forEach(function(t){Object.keys(t.components).forEach(function(n){e.componentTags[n]=t})})},e.prototype.getName=function(e){return this.hashes[e.toString()]},e.prototype.alreadyInjected=function(e,t){return!!this.names[t]&&(this.hashes[e.toString()]=t,!0)},e.prototype.hasInjectedComponent=function(e){return!!this.componentTags[e]},e.prototype.deferredInject=function(e,t,n){this===G&&Y.forEach(function(r){r.deferredInject(e,t,n)}),this.getOrCreateTag(e,t),this.deferredInjections[e]=n},e.prototype.inject=function(e,t,n,r,o){this===G&&Y.forEach(function(r){r.inject(e,t,n)});var a=this.getOrCreateTag(e,t),i=this.deferredInjections[e];i&&(a.inject(e,i),delete this.deferredInjections[e]),a.inject(e,n,o),r&&o&&(this.hashes[r.toString()]=o)},e.prototype.toHTML=function(){return this.tags.map(function(e){return e.toHTML()}).join("")},e.prototype.toReactElements=function(){return this.tags.map(function(e,t){return e.toReactElement("sc-"+t)})},e.prototype.getOrCreateTag=function(e,t){var n=this.componentTags[e];if(n)return n;var r=this.tags[this.tags.length-1],o=!r||r.isFull()||r.isLocal!==t?this.createNewTag(t):r;return this.componentTags[e]=o,o.addComponent(e),o},e.prototype.createNewTag=function(e){var t=this.tagConstructor(e);return this.tags.push(t),t},e.reset=function(t){G=e.create(t)},e.create=function(){return((arguments.length>0&&void 0!==arguments[0]?arguments[0]:"undefined"==typeof document)?pe:q).create()},e.clone=function(t){var n=new e(t.tagConstructor,t.tags.map(function(e){return e.clone()}),S({},t.names));return n.hashes=S({},t.hashes),n.deferredInjections=S({},t.deferredInjections),Y.push(n),n},T(e,null,[{key:"instance",get:function(){return G||(G=e.create())}}]),e}(),J=function(){};J.thatReturns=i,J.thatReturnsFalse=i(!1),J.thatReturnsTrue=i(!0),J.thatReturnsNull=i(null),J.thatReturnsThis=function(){return this},J.thatReturnsArgument=function(e){return e};var Q,ee=J,te=function(e){},ne=s,re=ee,oe=ne,ae=function(){function e(){oe(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t};return n.checkPropTypes=re,n.PropTypes=n,n},ie=a(function(e){e.exports=ae()}),se=function(e){function t(){return x(this,t),O(this,e.apply(this,arguments))}return A(t,e),t.prototype.getChildContext=function(){var e;return e={},e[X]=this.props.sheet,e},t.prototype.render=function(){return y.Children.only(this.props.children)},t}(t.Component);se.childContextTypes=(Q={},Q[X]=ie.instanceOf(Z).isRequired,Q);var ce,ue,le=function(){function e(t){x(this,e),this.isLocal=t,this.components={},this.size=0,this.names=[]}return e.prototype.isFull=function(){return!1},e.prototype.addComponent=function(e){if(this.components[e])throw new Error("Trying to add Component '"+e+"' twice!");this.components[e]={componentId:e,css:""},this.size+=1},e.prototype.concatenateCSS=function(){var e=this;return Object.keys(this.components).reduce(function(t,n){return t+e.components[n].css},"")},e.prototype.inject=function(e,t,n){var r=this.components[e];if(!r)throw new Error("Must add a new component before you can inject css into it");""===r.css&&(r.css="/* sc-component-id: "+e+" */\n"),r.css+=t.replace(/\n*$/,"\n"),n&&this.names.push(n)},e.prototype.toHTML=function(){var e=['type="text/css"',V+'="'+this.names.join(" ")+'"',K+'="'+(this.isLocal?"true":"false")+'"'],t=H();return t&&e.push('nonce="'+t+'"'),"<style "+e.join(" ")+">"+this.concatenateCSS()+"</style>"},e.prototype.toReactElement=function(e){var t,n=(t={},t[V]=this.names.join(" "),t[K]=this.isLocal.toString(),t),r=H();return r&&(n.nonce=r),y.createElement("style",S({key:e,type:"text/css"},n,{dangerouslySetInnerHTML:{__html:this.concatenateCSS()}}))},e.prototype.clone=function(){var t=this,n=new e(this.isLocal);return n.names=[].concat(this.names),n.size=this.size,n.components=Object.keys(this.components).reduce(function(e,n){return e[n]=S({},t.components[n]),e},{}),n},e}(),pe=function(){function e(){x(this,e),this.instance=Z.clone(Z.instance)}return e.prototype.collectStyles=function(e){if(this.closed)throw new Error("Can't collect styles once you've called getStyleTags!");return y.createElement(se,{sheet:this.instance},e)},e.prototype.getStyleTags=function(){return this.closed||(Y.splice(Y.indexOf(this.instance),1),this.closed=!0),this.instance.toHTML()},e.prototype.getStyleElement=function(){return this.closed||(Y.splice(Y.indexOf(this.instance),1),this.closed=!0),this.instance.toReactElements()},e.create=function(){return new Z(function(e){return new le(e)})},e}(),he={children:!0,dangerouslySetInnerHTML:!0,key:!0,ref:!0,autoFocus:!0,defaultValue:!0,valueLink:!0,defaultChecked:!0,checkedLink:!0,innerHTML:!0,suppressContentEditableWarning:!0,onFocusIn:!0,onFocusOut:!0,className:!0,onCopy:!0,onCut:!0,onPaste:!0,onCompositionEnd:!0,onCompositionStart:!0,onCompositionUpdate:!0,onKeyDown:!0,onKeyPress:!0,onKeyUp:!0,onFocus:!0,onBlur:!0,onChange:!0,onInput:!0,onSubmit:!0,onClick:!0,onContextMenu:!0,onDoubleClick:!0,onDrag:!0,onDragEnd:!0,onDragEnter:!0,onDragExit:!0,onDragLeave:!0,onDragOver:!0,onDragStart:!0,onDrop:!0,onMouseDown:!0,onMouseEnter:!0,onMouseLeave:!0,onMouseMove:!0,onMouseOut:!0,onMouseOver:!0,onMouseUp:!0,onSelect:!0,onTouchCancel:!0,onTouchEnd:!0,onTouchMove:!0,onTouchStart:!0,onScroll:!0,onWheel:!0,onAbort:!0,onCanPlay:!0,onCanPlayThrough:!0,onDurationChange:!0,onEmptied:!0,onEncrypted:!0,onEnded:!0,onError:!0,onLoadedData:!0,onLoadedMetadata:!0,onLoadStart:!0,onPause:!0,onPlay:!0,onPlaying:!0,onProgress:!0,onRateChange:!0,onSeeked:!0,onSeeking:!0,onStalled:!0,onSuspend:!0,onTimeUpdate:!0,onVolumeChange:!0,onWaiting:!0,onLoad:!0,onAnimationStart:!0,onAnimationEnd:!0,onAnimationIteration:!0,onTransitionEnd:!0,onCopyCapture:!0,onCutCapture:!0,onPasteCapture:!0,onCompositionEndCapture:!0,onCompositionStartCapture:!0,onCompositionUpdateCapture:!0,onKeyDownCapture:!0,onKeyPressCapture:!0,onKeyUpCapture:!0,onFocusCapture:!0,onBlurCapture:!0,onChangeCapture:!0,onInputCapture:!0,onSubmitCapture:!0,onClickCapture:!0,onContextMenuCapture:!0,onDoubleClickCapture:!0,onDragCapture:!0,onDragEndCapture:!0,onDragEnterCapture:!0,onDragExitCapture:!0,onDragLeaveCapture:!0,onDragOverCapture:!0,onDragStartCapture:!0,onDropCapture:!0,onMouseDownCapture:!0,onMouseEnterCapture:!0,onMouseLeaveCapture:!0,onMouseMoveCapture:!0,onMouseOutCapture:!0,onMouseOverCapture:!0,onMouseUpCapture:!0,onSelectCapture:!0,onTouchCancelCapture:!0,onTouchEndCapture:!0,onTouchMoveCapture:!0,onTouchStartCapture:!0,onScrollCapture:!0,onWheelCapture:!0,onAbortCapture:!0,onCanPlayCapture:!0,onCanPlayThroughCapture:!0,onDurationChangeCapture:!0,onEmptiedCapture:!0,onEncryptedCapture:!0,onEndedCapture:!0,onErrorCapture:!0,onLoadedDataCapture:!0,onLoadedMetadataCapture:!0,onLoadStartCapture:!0,onPauseCapture:!0,onPlayCapture:!0,onPlayingCapture:!0,onProgressCapture:!0,onRateChangeCapture:!0,onSeekedCapture:!0,onSeekingCapture:!0,onStalledCapture:!0,onSuspendCapture:!0,onTimeUpdateCapture:!0,onVolumeChangeCapture:!0,onWaitingCapture:!0,onLoadCapture:!0,onAnimationStartCapture:!0,onAnimationEndCapture:!0,onAnimationIterationCapture:!0,onTransitionEndCapture:!0},de={accept:!0,acceptCharset:!0,accessKey:!0,action:!0,allowFullScreen:!0,allowTransparency:!0,alt:!0,as:!0,async:!0,autoComplete:!0,autoPlay:!0,capture:!0,cellPadding:!0,cellSpacing:!0,charSet:!0,challenge:!0,checked:!0,cite:!0,classID:!0,className:!0,cols:!0,colSpan:!0,content:!0,contentEditable:!0,contextMenu:!0,controls:!0,coords:!0,crossOrigin:!0,data:!0,dateTime:!0,default:!0,defer:!0,dir:!0,disabled:!0,download:!0,draggable:!0,encType:!0,form:!0,formAction:!0,formEncType:!0,formMethod:!0,formNoValidate:!0,formTarget:!0,frameBorder:!0,headers:!0,height:!0,hidden:!0,high:!0,href:!0,hrefLang:!0,htmlFor:!0,httpEquiv:!0,icon:!0,id:!0,inputMode:!0,integrity:!0,is:!0,keyParams:!0,keyType:!0,kind:!0,label:!0,lang:!0,list:!0,loop:!0,low:!0,manifest:!0,marginHeight:!0,marginWidth:!0,max:!0,maxLength:!0,media:!0,mediaGroup:!0,method:!0,min:!0,minLength:!0,multiple:!0,muted:!0,name:!0,nonce:!0,noValidate:!0,open:!0,optimum:!0,pattern:!0,placeholder:!0,playsInline:!0,poster:!0,preload:!0,profile:!0,radioGroup:!0,readOnly:!0,referrerPolicy:!0,rel:!0,required:!0,reversed:!0,role:!0,rows:!0,rowSpan:!0,sandbox:!0,scope:!0,scoped:!0,scrolling:!0,seamless:!0,selected:!0,shape:!0,size:!0,sizes:!0,span:!0,spellCheck:!0,src:!0,srcDoc:!0,srcLang:!0,srcSet:!0,start:!0,step:!0,style:!0,summary:!0,tabIndex:!0,target:!0,title:!0,type:!0,useMap:!0,value:!0,width:!0,wmode:!0,wrap:!0,about:!0,datatype:!0,inlist:!0,prefix:!0,property:!0,resource:!0,typeof:!0,vocab:!0,autoCapitalize:!0,autoCorrect:!0,autoSave:!0,color:!0,itemProp:!0,itemScope:!0,itemType:!0,itemID:!0,itemRef:!0,results:!0,security:!0,unselectable:0},fe={accentHeight:!0,accumulate:!0,additive:!0,alignmentBaseline:!0,allowReorder:!0,alphabetic:!0,amplitude:!0,arabicForm:!0,ascent:!0,attributeName:!0,attributeType:!0,autoReverse:!0,azimuth:!0,baseFrequency:!0,baseProfile:!0,baselineShift:!0,bbox:!0,begin:!0,bias:!0,by:!0,calcMode:!0,capHeight:!0,clip:!0,clipPath:!0,clipRule:!0,clipPathUnits:!0,colorInterpolation:!0,colorInterpolationFilters:!0,colorProfile:!0,colorRendering:!0,contentScriptType:!0,contentStyleType:!0,cursor:!0,cx:!0,cy:!0,d:!0,decelerate:!0,descent:!0,diffuseConstant:!0,direction:!0,display:!0,divisor:!0,dominantBaseline:!0,dur:!0,dx:!0,dy:!0,edgeMode:!0,elevation:!0,enableBackground:!0,end:!0,exponent:!0,externalResourcesRequired:!0,fill:!0,fillOpacity:!0,fillRule:!0,filter:!0,filterRes:!0,filterUnits:!0,floodColor:!0,floodOpacity:!0,focusable:!0,fontFamily:!0,fontSize:!0,fontSizeAdjust:!0,fontStretch:!0,fontStyle:!0,fontVariant:!0,fontWeight:!0,format:!0,from:!0,fx:!0,fy:!0,g1:!0,g2:!0,glyphName:!0,glyphOrientationHorizontal:!0,glyphOrientationVertical:!0,glyphRef:!0,gradientTransform:!0,gradientUnits:!0,hanging:!0,horizAdvX:!0,horizOriginX:!0,ideographic:!0,imageRendering:!0,in:!0,in2:!0,intercept:!0,k:!0,k1:!0,k2:!0,k3:!0,k4:!0,kernelMatrix:!0,kernelUnitLength:!0,kerning:!0,keyPoints:!0,keySplines:!0,keyTimes:!0,lengthAdjust:!0,letterSpacing:!0,lightingColor:!0,limitingConeAngle:!0,local:!0,markerEnd:!0,markerMid:!0,markerStart:!0,markerHeight:!0,markerUnits:!0,markerWidth:!0,mask:!0,maskContentUnits:!0,maskUnits:!0,mathematical:!0,mode:!0,numOctaves:!0,offset:!0,opacity:!0,operator:!0,order:!0,orient:!0,orientation:!0,origin:!0,overflow:!0,overlinePosition:!0,overlineThickness:!0,paintOrder:!0,panose1:!0,pathLength:!0,patternContentUnits:!0,patternTransform:!0,patternUnits:!0,pointerEvents:!0,points:!0,pointsAtX:!0,pointsAtY:!0,pointsAtZ:!0,preserveAlpha:!0,preserveAspectRatio:!0,primitiveUnits:!0,r:!0,radius:!0,refX:!0,refY:!0,renderingIntent:!0,repeatCount:!0,repeatDur:!0,requiredExtensions:!0,requiredFeatures:!0,restart:!0,result:!0,rotate:!0,rx:!0,ry:!0,scale:!0,seed:!0,shapeRendering:!0,slope:!0,spacing:!0,specularConstant:!0,specularExponent:!0,speed:!0,spreadMethod:!0,startOffset:!0,stdDeviation:!0,stemh:!0,stemv:!0,stitchTiles:!0,stopColor:!0,stopOpacity:!0,strikethroughPosition:!0,strikethroughThickness:!0,string:!0,stroke:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeLinecap:!0,strokeLinejoin:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0,surfaceScale:!0,systemLanguage:!0,tableValues:!0,targetX:!0,targetY:!0,textAnchor:!0,textDecoration:!0,textRendering:!0,textLength:!0,to:!0,transform:!0,u1:!0,u2:!0,underlinePosition:!0,underlineThickness:!0,unicode:!0,unicodeBidi:!0,unicodeRange:!0,unitsPerEm:!0,vAlphabetic:!0,vHanging:!0,vIdeographic:!0,vMathematical:!0,values:!0,vectorEffect:!0,version:!0,vertAdvY:!0,vertOriginX:!0,vertOriginY:!0,viewBox:!0,viewTarget:!0,visibility:!0,widths:!0,wordSpacing:!0,writingMode:!0,x:!0,xHeight:!0,x1:!0,x2:!0,xChannelSelector:!0,xlinkActuate:!0,xlinkArcrole:!0,xlinkHref:!0,xlinkRole:!0,xlinkShow:!0,xlinkTitle:!0,xlinkType:!0,xmlBase:!0,xmlns:!0,xmlnsXlink:!0,xmlLang:!0,xmlSpace:!0,y:!0,y1:!0,y2:!0,yChannelSelector:!0,z:!0,zoomAndPan:!0},me=RegExp.prototype.test.bind(new RegExp("^(data|aria)-[:A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD\\-.0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040]*$")),ye={}.hasOwnProperty,ge=function(e){return ye.call(de,e)||ye.call(fe,e)||me(e.toLowerCase())||ye.call(he,e)},be=p,ve=Object.prototype.toString,Ce=function(e){function t(e){i=e;for(var t in o){var n=o[t];void 0!==n&&n(i)}}function n(e){var t=a;return o[t]=e,a+=1,e(i),t}function r(e){o[e]=void 0}var o={},a=0,i=e;return{publish:t,subscribe:n,unsubscribe:r}},ke="__styled-components__",we=ke+"next__",xe=ie.shape({getTheme:ie.func,subscribe:ie.func,unsubscribe:ie.func}),Te=function(e){var t=!1;return function(){t||(t=!0,e())}}(function(){console.error("Warning: Usage of `context."+ke+"` as a function is deprecated. It will be replaced with the object on `.context."+we+"` in a future version.")}),Se=function(e){function t(){x(this,t);var n=O(this,e.call(this));return n.unsubscribeToOuterId=-1,n.getTheme=n.getTheme.bind(n),n}return A(t,e),t.prototype.componentWillMount=function(){var e=this,t=this.context[we];void 0!==t&&(this.unsubscribeToOuterId=t.subscribe(function(t){e.outerTheme=t})),this.broadcast=Ce(this.getTheme())},t.prototype.getChildContext=function(){var e,t=this;return S({},this.context,(e={},e[we]={getTheme:this.getTheme,subscribe:this.broadcast.subscribe,unsubscribe:this.broadcast.unsubscribe},e[ke]=function(e){Te();var n=t.broadcast.subscribe(e);return function(){return t.broadcast.unsubscribe(n)}},e))},t.prototype.componentWillReceiveProps=function(e){this.props.theme!==e.theme&&this.broadcast.publish(this.getTheme(e.theme))},t.prototype.componentWillUnmount=function(){-1!==this.unsubscribeToOuterId&&this.context[we].unsubscribe(this.unsubscribeToOuterId)},t.prototype.getTheme=function(e){var t=e||this.props.theme;if(be(t)){var n=t(this.outerTheme);if(!P(n))throw new Error("[ThemeProvider] Please return an object from your theme function, i.e. theme={() => ({})}!");return n}if(!P(t))throw new Error("[ThemeProvider] Please make your theme prop a plain object");return S({},this.outerTheme,t)},t.prototype.render=function(){return this.props.children?y.Children.only(this.props.children):null},t}(t.Component);Se.childContextTypes=(ce={},ce[ke]=ie.func,ce[we]=xe,ce),Se.contextTypes=(ue={},ue[we]=xe,ue);var Ae={},je=function e(t){for(var n=0;n<t.length;n+=1){var r=t[n];if(Array.isArray(r)&&!e(r))return!1;if("function"==typeof r&&!u(r))return!1}return!0
+},Oe=["a","abbr","address","area","article","aside","audio","b","base","bdi","bdo","big","blockquote","body","br","button","canvas","caption","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dialog","div","dl","dt","em","embed","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","img","input","ins","kbd","keygen","label","legend","li","link","main","map","mark","marquee","menu","menuitem","meta","meter","nav","noscript","object","ol","optgroup","option","output","p","param","picture","pre","progress","q","rp","rt","ruby","s","samp","script","section","select","small","source","span","strong","style","sub","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","title","tr","track","u","ul","var","video","wbr","circle","clipPath","defs","ellipse","g","image","line","linearGradient","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","svg","text","tspan"],Ie=function(e){return e.replace(/\s|\\n/g,"")},Ee={childContextTypes:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,mixins:!0,propTypes:!0,type:!0},Pe={name:!0,length:!0,prototype:!0,caller:!0,arguments:!0,arity:!0},Me="function"==typeof Object.getOwnPropertySymbols,Ne=function(e,t,n){if("string"!=typeof t){var r=Object.getOwnPropertyNames(t);Me&&(r=r.concat(Object.getOwnPropertySymbols(t)));for(var o=0;o<r.length;++o)if(!(Ee[r[o]]||Pe[r[o]]||n&&n[r[o]]))try{e[r[o]]=t[r[o]]}catch(e){}}return e},De=function(e){var t,n=e.displayName||e.name||"Component",r=u(e),o=function(t){function n(){var e,r,o;x(this,n);for(var a=arguments.length,i=Array(a),s=0;s<a;s++)i[s]=arguments[s];return e=r=O(this,t.call.apply(t,[this].concat(i))),r.state={},r.unsubscribeId=-1,o=e,O(r,o)}return A(n,t),n.prototype.componentWillMount=function(){var e=this,t=this.context[we];if(void 0===t)return void console.error("[withTheme] Please use ThemeProvider to be able to use withTheme");var n=t.subscribe;this.unsubscribeId=n(function(t){e.setState({theme:t})})},n.prototype.componentWillUnmount=function(){-1!==this.unsubscribeId&&this.context[we].unsubscribe(this.unsubscribeId)},n.prototype.render=function(){var t=this.props.innerRef,n=this.state.theme;return y.createElement(e,S({theme:n},this.props,{innerRef:r?t:void 0,ref:r?void 0:t}))},n}(y.Component);return o.displayName="WithTheme("+n+")",o.styledComponentId="withTheme",o.contextTypes=(t={},t[ke]=ie.func,t[we]=xe,t),Ne(o,e)},Fe=function(e,t,n){return function(){function r(e,t){if(x(this,r),this.rules=e,this.isStatic=je(e),this.componentId=t,!Z.instance.hasInjectedComponent(this.componentId)){Z.instance.deferredInject(t,!0,"")}}return r.prototype.generateAndInjectStyles=function(r,o){var a=this.isStatic,i=this.lastClassName;if(a&&void 0!==i)return i;var s=t(this.rules,r),c=h(this.componentId+s.join("")),u=o.getName(c);if(void 0!==u)return o.stylesCacheable&&(this.lastClassName=u),u;var l=e(c);if(o.stylesCacheable&&(this.lastClassName=u),o.alreadyInjected(c,l))return l;var p="\n"+n(s,"."+l);return o.inject(this.componentId,!0,p,c,l),l},r.generateName=function(t){return e(h(t))},r}()}(U,N,R),Re=function(e){return function t(n,r){var o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if("string"!=typeof r&&"function"!=typeof r)throw new Error("Cannot create styled-component for component: "+r);var a=function(t){for(var a=arguments.length,i=Array(a>1?a-1:0),s=1;s<a;s++)i[s-1]=arguments[s];return n(r,o,e.apply(void 0,[t].concat(i)))};return a.withConfig=function(e){return t(n,r,S({},o,e))},a.attrs=function(e){return t(n,r,S({},o,{attrs:S({},o.attrs||{},e)}))},a}}(W),Le=function(e,n){var r={},o=function(t,n){var o="string"!=typeof t?"sc":t.replace(/[[\].#*$><+~=|^:(),"'`]/g,"-").replace(/--+/g,"-"),a=(r[o]||0)+1;r[o]=a;var i=e.generateName(o+a),s=o+"-"+i;return void 0!==n?n+"-"+s:s},a=function(e){function n(){var t,r,o;x(this,n);for(var a=arguments.length,i=Array(a),s=0;s<a;s++)i[s]=arguments[s];return t=r=O(this,e.call.apply(e,[this].concat(i))),r.attrs={},r.state={theme:null,generatedClassName:""},r.unsubscribeId=-1,o=t,O(r,o)}return A(n,e),n.prototype.unsubscribeFromContext=function(){-1!==this.unsubscribeId&&this.context[we].unsubscribe(this.unsubscribeId)},n.prototype.buildExecutionContext=function(e,t){var n=this.constructor.attrs,r=S({},t,{theme:e});return void 0===n?r:(this.attrs=Object.keys(n).reduce(function(e,t){var o=n[t];return e[t]="function"==typeof o?o(r):o,e},{}),S({},r,this.attrs))},n.prototype.generateAndInjectStyles=function(e,t){var n=this.constructor,r=n.attrs,o=n.componentStyle,a=n.warnTooManyClasses,i=this.context[X]||Z.instance;if(o.isStatic&&void 0===r)return o.generateAndInjectStyles(Ae,i);var s=this.buildExecutionContext(e,t),c=o.generateAndInjectStyles(s,i);return void 0!==a&&a(c),c},n.prototype.componentWillMount=function(){var e=this,t=this.constructor.componentStyle,n=this.context[we];if(t.isStatic){var r=this.generateAndInjectStyles(Ae,this.props);this.setState({generatedClassName:r})}else if(void 0!==n){var o=n.subscribe;this.unsubscribeId=o(function(t){var n=e.constructor.defaultProps,r=n&&e.props.theme===n.theme,o=e.props.theme&&!r?e.props.theme:t,a=e.generateAndInjectStyles(o,e.props);e.setState({theme:o,generatedClassName:a})})}else{var a=this.props.theme||{},i=this.generateAndInjectStyles(a,this.props);this.setState({theme:a,generatedClassName:i})}},n.prototype.componentWillReceiveProps=function(e){var t=this;this.constructor.componentStyle.isStatic||this.setState(function(n){var r=t.constructor.defaultProps,o=r&&e.theme===r.theme,a=e.theme&&!o?e.theme:n.theme;return{theme:a,generatedClassName:t.generateAndInjectStyles(a,e)}})},n.prototype.componentWillUnmount=function(){this.unsubscribeFromContext()},n.prototype.render=function(){var e=this,n=this.props.innerRef,r=this.state.generatedClassName,o=this.constructor,a=o.styledComponentId,i=o.target,s=c(i),l=[this.props.className,a,this.attrs.className,r].filter(Boolean).join(" "),p=S({},this.attrs,{className:l});u(i)?p.innerRef=n:p.ref=n;var h=Object.keys(this.props).reduce(function(t,n){return"innerRef"===n||"className"===n||s&&!ge(n)||(t[n]=e.props[n]),t},p);return t.createElement(i,h)},n}(t.Component);return function t(r,i,s){var u,p=i.displayName,h=void 0===p?c(r)?"styled."+r:"Styled("+l(r)+")":p,d=i.componentId,f=void 0===d?o(i.displayName,i.parentComponentId):d,m=i.ParentComponent,y=void 0===m?a:m,g=i.rules,b=i.attrs,v=i.displayName&&i.componentId?i.displayName+"-"+i.componentId:f,C=new e(void 0===g?s:g.concat(s),v),k=function(e){function o(){return x(this,o),O(this,e.apply(this,arguments))}return A(o,e),o.withComponent=function(e){var n=i.componentId,r=j(i,["componentId"]),a=n&&n+"-"+(c(e)?e:l(e)),u=S({},r,{componentId:a,ParentComponent:o});return t(e,u,s)},T(o,null,[{key:"extend",get:function(){var e=i.rules,a=i.componentId,c=j(i,["rules","componentId"]),u=void 0===e?s:e.concat(s),l=S({},c,{rules:u,parentComponentId:a,ParentComponent:o});return n(t,r,l)}}]),o}(y);return k.contextTypes=(u={},u[ke]=ie.func,u[we]=xe,u[X]=ie.instanceOf(Z),u),k.displayName=h,k.styledComponentId=v,k.attrs=b,k.componentStyle=C,k.warnTooManyClasses=void 0,k.target=r,k}}(Fe,Re),_e=function(e,t,n){return function(r){for(var o=arguments.length,a=Array(o>1?o-1:0),i=1;i<o;i++)a[i-1]=arguments[i];var s=n.apply(void 0,[r].concat(a)),c=h(Ie(JSON.stringify(s))),u=Z.instance.getName(c);if(u)return u;var l=e(c);if(Z.instance.alreadyInjected(c,l))return l;var p=t(s,l,"@keyframes");return Z.instance.inject("sc-keyframes-"+l,!0,p,c,l),l}}(U,R,W),Ue=function(e,t){return function(n){for(var r=arguments.length,o=Array(r>1?r-1:0),a=1;a<r;a++)o[a-1]=arguments[a];var i=t.apply(void 0,[n].concat(o)),s=h(JSON.stringify(i)),c="sc-global-"+s;Z.instance.hasInjectedComponent(c)||Z.instance.inject(c,!1,e(i))}}(R,W),ze=function(e,t){var n=function(n){return t(e,n)};return Oe.forEach(function(e){n[e]=n(e)}),n}(Le,Re);e.default=ze,e.css=W,e.keyframes=_e,e.injectGlobal=Ue,e.ThemeProvider=Se,e.withTheme=De,e.ServerStyleSheet=pe,e.StyleSheetManager=se,Object.defineProperty(e,"__esModule",{value:!0})});

package/lib/models/ComponentStyle.js

@@ -10,6 +10,10 @@ var _StyleSheet = require('./StyleSheet');
 
 var _StyleSheet2 = _interopRequireDefault(_StyleSheet);
 
+var _isStyledComponent = require('../utils/isStyledComponent');
+
+var _isStyledComponent2 = _interopRequireDefault(_isStyledComponent);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -22,16 +26,35 @@ var babelPluginFlowReactPropTypes_proptype_NameGenerator = require('../types').b
 
 var babelPluginFlowReactPropTypes_proptype_RuleSet = require('../types').babelPluginFlowReactPropTypes_proptype_RuleSet || require('prop-types').any;
 
+var isStaticRules = function isStaticRules(rules) {
+  for (var i = 0; i < rules.length; i += 1) {
+    var rule = rules[i];
+
+    // recursive case
+    if (Array.isArray(rule) && !isStaticRules(rule)) {
+      return false;
+    } else if (typeof rule === 'function' && !(0, _isStyledComponent2.default)(rule)) {
+      // functions are allowed to be static if they're just being
+      // used to get the classname of a nested styled copmonent
+      return false;
+    }
+  }
+
+  return true;
+};
+
 /*
  ComponentStyle is all the CSS-specific stuff, not
  the React-specific stuff.
  */
+
 exports.default = function (nameGenerator, flatten, stringifyRules) {
   var ComponentStyle = function () {
     function ComponentStyle(rules, componentId) {
       _classCallCheck(this, ComponentStyle);
 
       this.rules = rules;
+      this.isStatic = isStaticRules(rules);
       this.componentId = componentId;
       if (!_StyleSheet2.default.instance.hasInjectedComponent(this.componentId)) {
         var placeholder = process.env.NODE_ENV !== 'production' ? '.' + componentId + ' {}' : '';
@@ -47,16 +70,36 @@ exports.default = function (nameGenerator, flatten, stringifyRules) {
 
 
     ComponentStyle.prototype.generateAndInjectStyles = function generateAndInjectStyles(executionContext, styleSheet) {
+      var isStatic = this.isStatic,
+          lastClassName = this.lastClassName;
+
+      if (isStatic && lastClassName !== undefined) {
+        return lastClassName;
+      }
+
       var flatCSS = flatten(this.rules, executionContext);
       var hash = (0, _hash2.default)(this.componentId + flatCSS.join(''));
 
       var existingName = styleSheet.getName(hash);
-      if (existingName) return existingName;
+      if (existingName !== undefined) {
+        if (styleSheet.stylesCacheable) {
+          this.lastClassName = existingName;
+        }
+        return existingName;
+      }
 
       var name = nameGenerator(hash);
-      if (styleSheet.alreadyInjected(hash, name)) return name;
+      if (styleSheet.stylesCacheable) {
+        this.lastClassName = existingName;
+      }
+      if (styleSheet.alreadyInjected(hash, name)) {
+        return name;
+      }
 
       var css = '\n' + stringifyRules(flatCSS, '.' + name);
+      // NOTE: this can only be set when we inject the class-name.
+      // For some reason, presumably due to how css is stringifyRules behaves in
+      // differently between client and server, styles break.
       styleSheet.inject(this.componentId, true, css, hash, name);
       return name;
     };

package/lib/models/StyleSheet.js

@@ -40,12 +40,21 @@ var StyleSheet = function () {
 
     this.hashes = {};
     this.deferredInjections = {};
+    this.stylesCacheable = typeof document !== 'undefined';
 
     this.tagConstructor = tagConstructor;
     this.tags = tags;
     this.names = names;
     this.constructComponentTagMap();
   }
+  // helper for `ComponentStyle` to know when it cache static styles.
+  // staticly styled-component can not safely cache styles on the server
+  // without all `ComponentStyle` instances saving a reference to the
+  // the styleSheet instance they last rendered with,
+  // or listening to creation / reset events. otherwise you might create
+  // a component with one stylesheet and render it another api response
+  // with another, losing styles on from your server-side render.
+
 
   StyleSheet.prototype.constructComponentTagMap = function constructComponentTagMap() {
     var _this = this;

package/lib/models/StyledComponent.js

@@ -57,6 +57,10 @@ var babelPluginFlowReactPropTypes_proptype_RuleSet = require('../types').babelPl
 var escapeRegex = /[[\].#*$><+~=|^:(),"'`]/g;
 var multiDashRegex = /--+/g;
 
+// HACK for generating all static styles without needing to allocate
+// an empty execution context every single time...
+var STATIC_EXECUTION_CONTEXT = {};
+
 exports.default = function (ComponentStyle, constructWithOptions) {
   /* We depend on components having unique IDs */
   var identifiers = {};
@@ -116,26 +120,42 @@ exports.default = function (ComponentStyle, constructWithOptions) {
 
     BaseStyledComponent.prototype.generateAndInjectStyles = function generateAndInjectStyles(theme, props) {
       var _constructor = this.constructor,
+          attrs = _constructor.attrs,
           componentStyle = _constructor.componentStyle,
           warnTooManyClasses = _constructor.warnTooManyClasses;
 
-      var executionContext = this.buildExecutionContext(theme, props);
       var styleSheet = this.context[_StyleSheet.CONTEXT_KEY] || _StyleSheet2.default.instance;
-      var className = componentStyle.generateAndInjectStyles(executionContext, styleSheet);
 
-      if (warnTooManyClasses !== undefined) warnTooManyClasses(className);
+      // staticaly styled-components don't need to build an execution context object,
+      // and shouldn't be increasing the number of class names
+      if (componentStyle.isStatic && attrs === undefined) {
+        return componentStyle.generateAndInjectStyles(STATIC_EXECUTION_CONTEXT, styleSheet);
+      } else {
+        var executionContext = this.buildExecutionContext(theme, props);
+        var className = componentStyle.generateAndInjectStyles(executionContext, styleSheet);
+
+        if (warnTooManyClasses !== undefined) warnTooManyClasses(className);
 
-      return className;
+        return className;
+      }
     };
 
     BaseStyledComponent.prototype.componentWillMount = function componentWillMount() {
       var _this2 = this;
 
-      // If there is a theme in the context, subscribe to the event emitter. This
-      // is necessary due to pure components blocking context updates, this circumvents
-      // that by updating when an event is emitted
+      var componentStyle = this.constructor.componentStyle;
+
       var styledContext = this.context[_ThemeProvider.CHANNEL_NEXT];
-      if (styledContext !== undefined) {
+
+      // If this is a staticaly-styled component, we don't need to the theme
+      // to generate or build styles.
+      if (componentStyle.isStatic) {
+        var generatedClassName = this.generateAndInjectStyles(STATIC_EXECUTION_CONTEXT, this.props);
+        this.setState({ generatedClassName: generatedClassName });
+        // If there is a theme in the context, subscribe to the event emitter. This
+        // is necessary due to pure components blocking context updates, this circumvents
+        // that by updating when an event is emitted
+      } else if (styledContext !== undefined) {
         var subscribe = styledContext.subscribe;
 
         this.unsubscribeId = subscribe(function (nextTheme) {
@@ -155,14 +175,22 @@ exports.default = function (ComponentStyle, constructWithOptions) {
       } else {
         // eslint-disable-next-line react/prop-types
         var _theme = this.props.theme || {};
-        var generatedClassName = this.generateAndInjectStyles(_theme, this.props);
-        this.setState({ theme: _theme, generatedClassName: generatedClassName });
+        var _generatedClassName = this.generateAndInjectStyles(_theme, this.props);
+        this.setState({ theme: _theme, generatedClassName: _generatedClassName });
       }
     };
 
     BaseStyledComponent.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
       var _this3 = this;
 
+      // If this is a staticaly-styled component, we don't need to listen to
+      // props changes to update styles
+      var componentStyle = this.constructor.componentStyle;
+
+      if (componentStyle.isStatic) {
+        return;
+      }
+
       this.setState(function (oldState) {
         // Props should take precedence over ThemeProvider, which should take precedence over
         // defaultProps, but React automatically puts defaultProps on props.

package/lib/utils/flatten.js

@@ -16,7 +16,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var babelPluginFlowReactPropTypes_proptype_Interpolation = require('../types').babelPluginFlowReactPropTypes_proptype_Interpolation || require('prop-types').any;
 
 var objToCss = exports.objToCss = function objToCss(obj, prevKey) {
-  var css = Object.keys(obj).map(function (key) {
+  var css = Object.keys(obj).filter(function (key) {
+    var chunk = obj[key];
+    return chunk !== undefined && chunk !== null && chunk !== false && chunk !== '';
+  }).map(function (key) {
     if ((0, _isPlainObject2.default)(obj[key])) return objToCss(obj[key], key);
     return (0, _hyphenateStyleName2.default)(key) + ': ' + obj[key] + ';';
   }).join(' ');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "styled-components",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅",
   "main": "lib/index.js",
   "typings": "typings/styled-components.d.ts",

package/src/models/ComponentStyle.js

@@ -3,6 +3,24 @@ import hashStr from '../vendor/glamor/hash'
 
 import type { RuleSet, NameGenerator, Flattener, Stringifier } from '../types'
 import StyleSheet from './StyleSheet'
+import isStyledComponent from '../utils/isStyledComponent'
+
+const isStaticRules = (rules: RuleSet): boolean => {
+  for (let i = 0; i < rules.length; i += 1) {
+    const rule = rules[i]
+
+    // recursive case
+    if (Array.isArray(rule) && !isStaticRules(rule)) {
+      return false
+    } else if (typeof rule === 'function' && !isStyledComponent(rule)) {
+      // functions are allowed to be static if they're just being
+      // used to get the classname of a nested styled copmonent
+      return false
+    }
+  }
+
+  return true
+}
 
 /*
  ComponentStyle is all the CSS-specific stuff, not
@@ -12,9 +30,13 @@ export default (nameGenerator: NameGenerator, flatten: Flattener, stringifyRules
   class ComponentStyle {
     rules: RuleSet
     componentId: string
+    isStatic: boolean
+    lastClassName: ?string
+
 
     constructor(rules: RuleSet, componentId: string) {
       this.rules = rules
+      this.isStatic = isStaticRules(rules)
       this.componentId = componentId
       if (!StyleSheet.instance.hasInjectedComponent(this.componentId)) {
         const placeholder = process.env.NODE_ENV !== 'production' ? `.${componentId} {}` : ''
@@ -28,16 +50,34 @@ export default (nameGenerator: NameGenerator, flatten: Flattener, stringifyRules
      * Returns the hash to be injected on render()
      * */
     generateAndInjectStyles(executionContext: Object, styleSheet: StyleSheet) {
+      const { isStatic, lastClassName } = this
+      if (isStatic && lastClassName !== undefined) {
+        return lastClassName
+      }
+
       const flatCSS = flatten(this.rules, executionContext)
       const hash = hashStr(this.componentId + flatCSS.join(''))
 
       const existingName = styleSheet.getName(hash)
-      if (existingName) return existingName
+      if (existingName !== undefined) {
+        if (styleSheet.stylesCacheable) {
+          this.lastClassName = existingName
+        }
+        return existingName
+      }
 
       const name = nameGenerator(hash)
-      if (styleSheet.alreadyInjected(hash, name)) return name
+      if (styleSheet.stylesCacheable) {
+        this.lastClassName = existingName
+      }
+      if (styleSheet.alreadyInjected(hash, name)) {
+        return name
+      }
 
       const css = `\n${stringifyRules(flatCSS, `.${name}`)}`
+      // NOTE: this can only be set when we inject the class-name.
+      // For some reason, presumably due to how css is stringifyRules behaves in
+      // differently between client and server, styles break.
       styleSheet.inject(this.componentId, true, css, hash, name)
       return name
     }

package/src/models/StyleSheet.js

@@ -30,6 +30,14 @@ export default class StyleSheet {
   hashes: { [string]: string } = {}
   deferredInjections: { [string]: string } = {}
   componentTags: { [string]: Tag }
+  // helper for `ComponentStyle` to know when it cache static styles.
+  // staticly styled-component can not safely cache styles on the server
+  // without all `ComponentStyle` instances saving a reference to the
+  // the styleSheet instance they last rendered with,
+  // or listening to creation / reset events. otherwise you might create
+  // a component with one stylesheet and render it another api response
+  // with another, losing styles on from your server-side render.
+  stylesCacheable = typeof document !== 'undefined'
 
   constructor(tagConstructor: (boolean) => Tag,
     tags: Array<Tag> = [],
@@ -146,6 +154,7 @@ export default class StyleSheet {
     return (isServer ? ServerStyleSheet : BrowserStyleSheet).create()
   }
 
+
   static clone(oldSheet: StyleSheet) {
     const newSheet = new StyleSheet(
       oldSheet.tagConstructor,

package/src/models/StyledComponent.js

@@ -18,6 +18,10 @@ import StyleSheet, { CONTEXT_KEY } from './StyleSheet'
 const escapeRegex = /[[\].#*$><+~=|^:(),"'`]/g
 const multiDashRegex = /--+/g
 
+// HACK for generating all static styles without needing to allocate
+// an empty execution context every single time...
+const STATIC_EXECUTION_CONTEXT = {}
+
 export default (ComponentStyle: Function, constructWithOptions: Function) => {
   /* We depend on components having unique IDs */
   const identifiers = {}
@@ -75,22 +79,39 @@ export default (ComponentStyle: Function, constructWithOptions: Function) => {
     }
 
     generateAndInjectStyles(theme: any, props: any) {
-      const { componentStyle, warnTooManyClasses } = this.constructor
-      const executionContext = this.buildExecutionContext(theme, props)
+      const { attrs, componentStyle, warnTooManyClasses } = this.constructor
       const styleSheet = this.context[CONTEXT_KEY] || StyleSheet.instance
-      const className = componentStyle.generateAndInjectStyles(executionContext, styleSheet)
 
-      if (warnTooManyClasses !== undefined) warnTooManyClasses(className)
+      // staticaly styled-components don't need to build an execution context object,
+      // and shouldn't be increasing the number of class names
+      if (componentStyle.isStatic && attrs === undefined) {
+        return componentStyle.generateAndInjectStyles(STATIC_EXECUTION_CONTEXT, styleSheet)
+      } else {
+        const executionContext = this.buildExecutionContext(theme, props)
+        const className = componentStyle.generateAndInjectStyles(executionContext, styleSheet)
+
+        if (warnTooManyClasses !== undefined) warnTooManyClasses(className)
 
-      return className
+        return className
+      }
     }
 
     componentWillMount() {
+      const { componentStyle } = this.constructor
+      const styledContext = this.context[CHANNEL_NEXT]
+
+      // If this is a staticaly-styled component, we don't need to the theme
+      // to generate or build styles.
+      if (componentStyle.isStatic) {
+        const generatedClassName = this.generateAndInjectStyles(
+          STATIC_EXECUTION_CONTEXT,
+          this.props,
+        )
+        this.setState({ generatedClassName })
       // If there is a theme in the context, subscribe to the event emitter. This
       // is necessary due to pure components blocking context updates, this circumvents
       // that by updating when an event is emitted
-      const styledContext = this.context[CHANNEL_NEXT]
-      if (styledContext !== undefined) {
+      } else if (styledContext !== undefined) {
         const { subscribe } = styledContext
         this.unsubscribeId = subscribe(nextTheme => {
           // This will be called once immediately
@@ -117,6 +138,13 @@ export default (ComponentStyle: Function, constructWithOptions: Function) => {
     }
 
     componentWillReceiveProps(nextProps: { theme?: Theme, [key: string]: any }) {
+      // If this is a staticaly-styled component, we don't need to listen to
+      // props changes to update styles
+      const { componentStyle } = this.constructor
+      if (componentStyle.isStatic) {
+        return
+      }
+
       this.setState((oldState) => {
         // Props should take precedence over ThemeProvider, which should take precedence over
         // defaultProps, but React automatically puts defaultProps on props.

package/src/test/props.test.js

@@ -19,10 +19,21 @@ describe('props', () => {
     expectCSSMatches('.sc-a {} .b { color: black; }')
   })
   it('should execute interpolations and inject props', () => {
+    const Comp = styled.div`color: ${props => props.fg || 'black'};`
+    shallow(<Comp fg="red" />)
+    expectCSSMatches('.sc-a {} .b { color: red; }')
+  })
+  it('should ignore non-0 falsy object interpolations', () => {
     const Comp = styled.div`
-      color: ${props => props.fg || 'black'};
+      ${() => ({
+        borderWidth: 0,
+        colorA: null,
+        colorB: false,
+        colorC: undefined,
+        colorD: '',
+      })};
     `
-    shallow(<Comp fg="red"/>)
-    expectCSSMatches('.sc-a {} .b { color: red; }')
+    shallow(<Comp fg="red" />)
+    expectCSSMatches('.sc-a {} .b { border-width: 0; ; ; }')
   })
 })

package/src/utils/flatten.js

@@ -5,13 +5,23 @@ import isPlainObject from 'is-plain-object'
 import type { Interpolation } from '../types'
 
 export const objToCss = (obj: Object, prevKey?: string): string => {
-  const css = Object.keys(obj).map(key => {
-    if (isPlainObject(obj[key])) return objToCss(obj[key], key)
-    return `${hyphenate(key)}: ${obj[key]};`
-  }).join(' ')
-  return prevKey ? `${prevKey} {
+  const css = Object.keys(obj)
+    .filter(key => {
+      const chunk = obj[key]
+      return (
+        chunk !== undefined && chunk !== null && chunk !== false && chunk !== ''
+      )
+    })
+    .map(key => {
+      if (isPlainObject(obj[key])) return objToCss(obj[key], key)
+      return `${hyphenate(key)}: ${obj[key]};`
+    })
+    .join(' ')
+  return prevKey
+    ? `${prevKey} {
   ${css}
-}` : css
+}`
+    : css
 }
 
 const flatten = (chunks: Array<Interpolation>, executionContext: ?Object): Array<Interpolation> => (