styled-components 4.3.1 → 4.4.1

package/README.md

@@ -20,19 +20,43 @@
 <br />
 
 > ⚠️ **CANARY:** This is the `canary` branch of `styled-components`. It is published under the
-> `@canary` tag on npm and contains new features and changes for the next major version.
+> `@beta` tag on npm and contains new features and changes for the next major version.
 
 Utilising [tagged template literals](https://www.styled-components.com/docs/advanced#tagged-template-literals) (a recent addition to JavaScript) and the [power of CSS](https://www.styled-components.com/docs/api#supported-css), `styled-components` allows you to write actual CSS code to style your components. It also removes the mapping between components and styles – using components as a low-level styling construct could not be easier!
 
+```jsx
+const Button = styled.button`
+  color: grey;
+`;
+```
+
+Alternatively, you may use [style objects](https://www.styled-components.com/docs/advanced#style-objects). This allows for easy porting of CSS from inline styles, while still supporting the more advanced styled-components capabilities like component selectors and media queries.
+
+```jsx
+const Button = styled.button({
+  color: 'grey',
+});
+```
+
+Equivalent to:
+
+```jsx
+const Button = styled.button`
+  color: grey;
+`;
+```
+
 `styled-components` is compatible with both React (for web) and React Native – meaning it's the perfect choice even for truly universal apps! See the [documentation about React Native](https://www.styled-components.com/docs/basics#react-native) for more information.
 
 _Supported by [Front End Center](https://frontend.center). Thank you for making this possible!_
 
 ## Upgrading from v4
 
-1. Update `react`, `react-dom`, and `react-is` to latest versions to enable hooks support
-2. ??
-3. Profit!
+1. `npm install styled-components@beta react@^16.8 react-dom@^16.8 react-is@^16.8`
+1. ??
+1. Profit!
+
+> Note that integrations like `jest-styled-components` that make use of internals will need to be updated to work with v5 and likely will not work properly during the alpha/beta period.
 
 ## [Docs](https://www.styled-components.com/docs)
 

package/dist/styled-components-macro.cjs.js

@@ -4,9 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
+var helperModuleImports = require('@babel/helper-module-imports');
+var traverse = _interopDefault(require('@babel/traverse'));
 var babelPluginMacros = require('babel-plugin-macros');
 var babelPlugin = _interopDefault(require('babel-plugin-styled-components'));
-var helperModuleImports = require('@babel/helper-module-imports');
 
 var _extends = Object.assign || function (target) {
   for (var i = 1; i < arguments.length; i++) {
@@ -56,7 +57,7 @@ function styledComponentsMacro(_ref) {
 
   // SECOND STEP : apply babel-plugin-styled-components to the file
   var stateWithOpts = _extends({}, state, { opts: config, customImportName: customImportName });
-  program.traverse(babelPlugin({ types: t }).visitor, stateWithOpts);
+  traverse(program.parent, babelPlugin({ types: t }).visitor, undefined, stateWithOpts);
 }
 
 var configName = 'styledComponents';

package/dist/styled-components-macro.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled-components-macro.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"styled-components-macro.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/styled-components-macro.esm.js

@@ -1,6 +1,7 @@
+import { addDefault, addNamed } from '@babel/helper-module-imports';
+import traverse from '@babel/traverse';
 import { createMacro } from 'babel-plugin-macros';
 import babelPlugin from 'babel-plugin-styled-components';
-import { addDefault, addNamed } from '@babel/helper-module-imports';
 
 var _extends = Object.assign || function (target) {
   for (var i = 1; i < arguments.length; i++) {
@@ -50,7 +51,7 @@ function styledComponentsMacro(_ref) {
 
   // SECOND STEP : apply babel-plugin-styled-components to the file
   var stateWithOpts = _extends({}, state, { opts: config, customImportName: customImportName });
-  program.traverse(babelPlugin({ types: t }).visitor, stateWithOpts);
+  traverse(program.parent, babelPlugin({ types: t }).visitor, undefined, stateWithOpts);
 }
 
 var configName = 'styledComponents';

package/dist/styled-components-macro.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled-components-macro.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"styled-components-macro.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/styled-components.browser.cjs.js

@@ -170,7 +170,7 @@ var ERRORS = process.env.NODE_ENV !== 'production' ? {
   "9": "Missing document `<head>`\n\n",
   "10": "Cannot find a StyleSheet instance. Usually this happens if there are multiple copies of styled-components loaded at once. Check out this issue for how to troubleshoot and fix the common cases where this situation can happen: https://github.com/styled-components/styled-components/issues/1941#issuecomment-417862021\n\n",
   "11": "_This error was replaced with a dev-time warning, it will be deleted for v4 final._ [createGlobalStyle] received children which will not be rendered. Please use the component without passing children elements.\n\n",
-  "12": "It seems you are interpolating a keyframe declaration (%s) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\\`\\` helper (see https://www.styled-components.com/docs/api#css), which ensures the styles are injected correctly.\n\n",
+  "12": "It seems you are interpolating a keyframe declaration (%s) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\\`\\` helper which ensures the styles are injected correctly. See https://www.styled-components.com/docs/api#css\n\n",
   "13": "%s is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.\n"
 } : {};
 
@@ -407,9 +407,9 @@ var sheetForTag = function sheetForTag(tag) {
   if (tag.sheet) return tag.sheet;
 
   /* Firefox quirk requires us to step through all stylesheets to find one owned by the given tag */
-  var size = document.styleSheets.length;
+  var size = tag.ownerDocument.styleSheets.length;
   for (var i = 0; i < size; i += 1) {
-    var sheet = document.styleSheets[i];
+    var sheet = tag.ownerDocument.styleSheets[i];
     // $FlowFixMe
     if (sheet.ownerNode === tag) return sheet;
   }
@@ -463,9 +463,12 @@ var addUpUntilIndex = function addUpUntilIndex(sizes, index) {
 
 /* create a new style tag after lastEl */
 var makeStyleTag = function makeStyleTag(target, tagEl, insertBefore) {
-  var el = document.createElement('style');
+  var targetDocument = document;
+  if (target) targetDocument = target.ownerDocument;else if (tagEl) targetDocument = tagEl.ownerDocument;
+
+  var el = targetDocument.createElement('style');
   el.setAttribute(SC_ATTR, '');
-  el.setAttribute(SC_VERSION_ATTR, "4.3.1");
+  el.setAttribute(SC_VERSION_ATTR, "4.4.1");
 
   var nonce = getNonce();
   if (nonce) {
@@ -473,7 +476,7 @@ var makeStyleTag = function makeStyleTag(target, tagEl, insertBefore) {
   }
 
   /* Work around insertRule quirk in EdgeHTML */
-  el.appendChild(document.createTextNode(''));
+  el.appendChild(targetDocument.createTextNode(''));
 
   if (target && !tagEl) {
     /* Append to target when no previous element was passed */
@@ -494,7 +497,7 @@ var makeStyleTag = function makeStyleTag(target, tagEl, insertBefore) {
 var wrapAsHtmlTag = function wrapAsHtmlTag(css, names) {
   return function (additionalAttrs) {
     var nonce = getNonce();
-    var attrs = [nonce && 'nonce="' + nonce + '"', SC_ATTR + '="' + stringifyNames(names) + '"', SC_VERSION_ATTR + '="' + "4.3.1" + '"', additionalAttrs];
+    var attrs = [nonce && 'nonce="' + nonce + '"', SC_ATTR + '="' + stringifyNames(names) + '"', SC_VERSION_ATTR + '="' + "4.4.1" + '"', additionalAttrs];
 
     var htmlAttr = attrs.filter(Boolean).join(' ');
     return '<style ' + htmlAttr + '>' + css() + '</style>';
@@ -506,7 +509,7 @@ var wrapAsElement = function wrapAsElement(css, names) {
   return function () {
     var _props;
 
-    var props = (_props = {}, _props[SC_ATTR] = stringifyNames(names), _props[SC_VERSION_ATTR] = "4.3.1", _props);
+    var props = (_props = {}, _props[SC_ATTR] = stringifyNames(names), _props[SC_VERSION_ATTR] = "4.4.1", _props);
 
     var nonce = getNonce();
     if (nonce) {
@@ -581,6 +584,8 @@ var makeSpeedyTag = function makeSpeedyTag(el, getImportRuleTag) {
   var removeRules = function removeRules(id) {
     var marker = markers[id];
     if (marker === undefined) return;
+    // $FlowFixMe
+    if (el.isConnected === false) return;
 
     var size = sizes[marker];
     var sheet = sheetForTag(el);
@@ -636,8 +641,8 @@ var makeSpeedyTag = function makeSpeedyTag(el, getImportRuleTag) {
   };
 };
 
-var makeTextNode = function makeTextNode(id) {
-  return document.createTextNode(makeTextMarker(id));
+var makeTextNode = function makeTextNode(targetDocument, id) {
+  return targetDocument.createTextNode(makeTextMarker(id));
 };
 
 var makeBrowserTag = function makeBrowserTag(el, getImportRuleTag) {
@@ -655,7 +660,7 @@ var makeBrowserTag = function makeBrowserTag(el, getImportRuleTag) {
       return prev;
     }
 
-    markers[id] = makeTextNode(id);
+    markers[id] = makeTextNode(el.ownerDocument, id);
     el.appendChild(markers[id]);
     names[id] = Object.create(null);
 
@@ -693,7 +698,7 @@ var makeBrowserTag = function makeBrowserTag(el, getImportRuleTag) {
     if (marker === undefined) return;
 
     /* create new empty text node and replace the current one */
-    var newMarker = makeTextNode(id);
+    var newMarker = makeTextNode(el.ownerDocument, id);
     el.replaceChild(newMarker, marker);
     markers[id] = newMarker;
     resetIdNames(names, id);
@@ -913,7 +918,7 @@ var StyleSheet = function () {
     var isStreamed = false;
 
     /* retrieve all of our SSR style elements from the DOM */
-    var nodes = document.querySelectorAll('style[' + SC_ATTR + '][' + SC_VERSION_ATTR + '="' + "4.3.1" + '"]');
+    var nodes = document.querySelectorAll('style[' + SC_ATTR + '][' + SC_VERSION_ATTR + '="' + "4.4.1" + '"]');
 
     var nodesSize = nodes.length;
 
@@ -1449,8 +1454,6 @@ function isStaticRules(rules, attrs) {
 
 // 
 
-var isHMREnabled = process.env.NODE_ENV !== 'production' && typeof module !== 'undefined' && module.hot;
-
 /* combines hashStr (murmurhash) and nameGenerator for convenience */
 var hasher = function hasher(str) {
   return generateAlphabeticName(murmurhash(str));
@@ -1466,7 +1469,7 @@ var ComponentStyle = function () {
     classCallCheck(this, ComponentStyle);
 
     this.rules = rules;
-    this.isStatic = !isHMREnabled && isStaticRules(rules, attrs);
+    this.isStatic = process.env.NODE_ENV === 'production' && isStaticRules(rules, attrs);
     this.componentId = componentId;
 
     if (!StyleSheet.master.hasId(componentId)) {
@@ -1475,10 +1478,10 @@ var ComponentStyle = function () {
   }
 
   /*
-     * Flattens a rule set into valid CSS
-     * Hashes it, wraps the whole chunk in a .hash1234 {}
-     * Returns the hash to be injected on render()
-     * */
+   * Flattens a rule set into valid CSS
+   * Hashes it, wraps the whole chunk in a .hash1234 {}
+   * Returns the hash to be injected on render()
+   * */
 
 
   ComponentStyle.prototype.generateAndInjectStyles = function generateAndInjectStyles(executionContext, styleSheet) {
@@ -1521,7 +1524,7 @@ var createWarnTooManyClasses = (function (displayName) {
       if (Object.keys(generatedClasses).length >= LIMIT) {
         // Unable to find latestRule in test environment.
         /* eslint-disable no-console, prefer-template */
-        console.warn('Over ' + LIMIT + ' classes were generated for component ' + displayName + '. \n' + 'Consider using the attrs method, together with a style object for frequently changed styles.\n' + 'Example:\n' + '  const Component = styled.div.attrs({\n' + '    style: ({ background }) => ({\n' + '      background,\n' + '    }),\n' + '  })`width: 100%;`\n\n' + '  <Component />');
+        console.warn('Over ' + LIMIT + ' classes were generated for component ' + displayName + '. \n' + 'Consider using the attrs method, together with a style object for frequently changed styles.\n' + 'Example:\n' + '  const Component = styled.div.attrs(props => ({\n' + '    style: {\n' + '      background: props.background,\n' + '    },\n' + '  }))`width: 100%;`\n\n' + '  <Component />');
         warningSeen = true;
         generatedClasses = {};
       }
@@ -1721,7 +1724,7 @@ var ThemeProvider = function (_Component) {
     return React__default.createElement(
       ThemeContext.Provider,
       { value: context },
-      React__default.Children.only(this.props.children)
+      this.props.children
     );
   };
 
@@ -2021,7 +2024,7 @@ var StyledComponent = function (_Component) {
     var isTargetTag = isTag(elementToBeCreated);
 
     var propsForElement = {};
-    var computedProps = _extends({}, this.attrs, this.props);
+    var computedProps = _extends({}, this.props, this.attrs);
 
     var key = void 0;
     // eslint-disable-next-line guard-for-in
@@ -2042,7 +2045,7 @@ var StyledComponent = function (_Component) {
       propsForElement.style = _extends({}, this.attrs.style, this.props.style);
     }
 
-    propsForElement.className = Array.prototype.concat(foldedComponentIds, this.props.className, styledComponentId, this.attrs.className, generatedClassName).filter(Boolean).join(' ');
+    propsForElement.className = Array.prototype.concat(foldedComponentIds, styledComponentId, generatedClassName !== styledComponentId ? generatedClassName : null, this.props.className, this.attrs.className).filter(Boolean).join(' ');
 
     return React.createElement(elementToBeCreated, propsForElement);
   };

package/dist/styled-components.browser.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled-components.browser.cjs.js","sources":["../src/models/StyleTags.js","../src/models/ThemeProvider.js","../src/models/StyleSheetManager.js","../src/models/StyledComponent.js","../src/models/GlobalStyle.js"],"sourcesContent":["// @flow\n/* eslint-disable flowtype/object-type-delimiter */\n/* eslint-disable react/prop-types */\n\nimport React, { type Element } from 'react';\nimport { IS_BROWSER, DISABLE_SPEEDY, SC_ATTR, SC_VERSION_ATTR } from '../constants';\nimport StyledError from '../utils/error';\nimport { type ExtractedComp } from '../utils/extractCompsFromCSS';\nimport { splitByRules } from '../utils/stringifyRules';\nimport getNonce from '../utils/nonce';\n\nimport {\n  type Names,\n  addNameForId,\n  resetIdNames,\n  hasNameForId,\n  stringifyNames,\n  cloneNames,\n} from '../utils/styleNames';\n\nimport { sheetForTag, safeInsertRule, deleteRules } from '../utils/insertRuleHelpers';\n\ndeclare var __VERSION__: string;\n\nexport interface Tag<T> {\n  // $FlowFixMe: Doesn't seem to accept any combination w/ HTMLStyleElement for some reason\n  styleTag: HTMLStyleElement | null;\n  /* lists all ids of the tag */\n  getIds(): string[];\n  /* checks whether `name` is already injected for `id` */\n  hasNameForId(id: string, name: string): boolean;\n  /* inserts a marker to ensure the id's correct position in the sheet */\n  insertMarker(id: string): T;\n  /* inserts rules according to the ids markers */\n  insertRules(id: string, cssRules: string[], name: ?string): void;\n  /* removes all rules belonging to the id, keeping the marker around */\n  removeRules(id: string): void;\n  css(): string;\n  toHTML(additionalAttrs: ?string): string;\n  toElement(): Element<*>;\n  clone(): Tag<T>;\n  /* used in server side rendering to indicate that the rules in the tag have been flushed to HTML */\n  sealed: boolean;\n}\n\n/* this marker separates component styles and is important for rehydration */\nconst makeTextMarker = id => `\\n/* sc-component-id: ${id} */\\n`;\n\n/* add up all numbers in array up until and including the index */\nconst addUpUntilIndex = (sizes: number[], index: number): number => {\n  let totalUpToIndex = 0;\n  for (let i = 0; i <= index; i += 1) {\n    totalUpToIndex += sizes[i];\n  }\n\n  return totalUpToIndex;\n};\n\n/* create a new style tag after lastEl */\nconst makeStyleTag = (target: ?HTMLElement, tagEl: ?Node, insertBefore: ?boolean) => {\n  const el = document.createElement('style');\n  el.setAttribute(SC_ATTR, '');\n  el.setAttribute(SC_VERSION_ATTR, __VERSION__);\n\n  const nonce = getNonce();\n  if (nonce) {\n    el.setAttribute('nonce', nonce);\n  }\n\n  /* Work around insertRule quirk in EdgeHTML */\n  el.appendChild(document.createTextNode(''));\n\n  if (target && !tagEl) {\n    /* Append to target when no previous element was passed */\n    target.appendChild(el);\n  } else {\n    if (!tagEl || !target || !tagEl.parentNode) {\n      throw new StyledError(6);\n    }\n\n    /* Insert new style tag after the previous one */\n    tagEl.parentNode.insertBefore(el, insertBefore ? tagEl : tagEl.nextSibling);\n  }\n\n  return el;\n};\n\n/* takes a css factory function and outputs an html styled tag factory */\nconst wrapAsHtmlTag = (css: () => string, names: Names) => (additionalAttrs: ?string): string => {\n  const nonce = getNonce();\n  const attrs = [\n    nonce && `nonce=\"${nonce}\"`,\n    `${SC_ATTR}=\"${stringifyNames(names)}\"`,\n    `${SC_VERSION_ATTR}=\"${__VERSION__}\"`,\n    additionalAttrs,\n  ];\n\n  const htmlAttr = attrs.filter(Boolean).join(' ');\n  return `<style ${htmlAttr}>${css()}</style>`;\n};\n\n/* takes a css factory function and outputs an element factory */\nconst wrapAsElement = (css: () => string, names: Names) => () => {\n  const props = {\n    [SC_ATTR]: stringifyNames(names),\n    [SC_VERSION_ATTR]: __VERSION__,\n  };\n\n  const nonce = getNonce();\n  if (nonce) {\n    // $FlowFixMe\n    props.nonce = nonce;\n  }\n\n  // eslint-disable-next-line react/no-danger\n  return <style {...props} dangerouslySetInnerHTML={{ __html: css() }} />;\n};\n\nconst getIdsFromMarkersFactory = (markers: Object) => (): string[] => Object.keys(markers);\n\n/* speedy tags utilise insertRule */\nconst makeSpeedyTag = (el: HTMLStyleElement, getImportRuleTag: ?() => Tag<any>): Tag<number> => {\n  const names: Names = (Object.create(null): Object);\n  const markers = Object.create(null);\n  const sizes: number[] = [];\n\n  const extractImport = getImportRuleTag !== undefined;\n  /* indicates whether getImportRuleTag was called */\n  let usedImportRuleTag = false;\n\n  const insertMarker = id => {\n    const prev = markers[id];\n    if (prev !== undefined) {\n      return prev;\n    }\n\n    markers[id] = sizes.length;\n    sizes.push(0);\n    resetIdNames(names, id);\n\n    return markers[id];\n  };\n\n  const insertRules = (id, cssRules, name) => {\n    const marker = insertMarker(id);\n    const sheet = sheetForTag(el);\n    const insertIndex = addUpUntilIndex(sizes, marker);\n\n    let injectedRules = 0;\n    const importRules = [];\n    const cssRulesSize = cssRules.length;\n\n    for (let i = 0; i < cssRulesSize; i += 1) {\n      const cssRule = cssRules[i];\n      let mayHaveImport = extractImport; /* @import rules are reordered to appear first */\n      if (mayHaveImport && cssRule.indexOf('@import') !== -1) {\n        importRules.push(cssRule);\n      } else if (safeInsertRule(sheet, cssRule, insertIndex + injectedRules)) {\n        mayHaveImport = false;\n        injectedRules += 1;\n      }\n    }\n\n    if (extractImport && importRules.length > 0) {\n      usedImportRuleTag = true;\n      // $FlowFixMe\n      getImportRuleTag().insertRules(`${id}-import`, importRules);\n    }\n\n    sizes[marker] += injectedRules; /* add up no of injected rules */\n    addNameForId(names, id, name);\n  };\n\n  const removeRules = id => {\n    const marker = markers[id];\n    if (marker === undefined) return;\n\n    const size = sizes[marker];\n    const sheet = sheetForTag(el);\n    const removalIndex = addUpUntilIndex(sizes, marker) - 1;\n    deleteRules(sheet, removalIndex, size);\n    sizes[marker] = 0;\n    resetIdNames(names, id);\n\n    if (extractImport && usedImportRuleTag) {\n      // $FlowFixMe\n      getImportRuleTag().removeRules(`${id}-import`);\n    }\n  };\n\n  const css = () => {\n    const { cssRules } = sheetForTag(el);\n    let str = '';\n\n    // eslint-disable-next-line guard-for-in\n    for (const id in markers) {\n      str += makeTextMarker(id);\n      const marker = markers[id];\n      const end = addUpUntilIndex(sizes, marker);\n      const size = sizes[marker];\n      for (let i = end - size; i < end; i += 1) {\n        const rule = cssRules[i];\n        if (rule !== undefined) {\n          str += rule.cssText;\n        }\n      }\n    }\n\n    return str;\n  };\n\n  return {\n    clone() {\n      throw new StyledError(5);\n    },\n    css,\n    getIds: getIdsFromMarkersFactory(markers),\n    hasNameForId: hasNameForId(names),\n    insertMarker,\n    insertRules,\n    removeRules,\n    sealed: false,\n    styleTag: el,\n    toElement: wrapAsElement(css, names),\n    toHTML: wrapAsHtmlTag(css, names),\n  };\n};\n\nconst makeTextNode = id => document.createTextNode(makeTextMarker(id));\n\nconst makeBrowserTag = (el: HTMLStyleElement, getImportRuleTag: ?() => Tag<any>): Tag<Text> => {\n  const names = (Object.create(null): Object);\n  const markers = Object.create(null);\n\n  const extractImport = getImportRuleTag !== undefined;\n\n  /* indicates whether getImportRuleTag was called */\n  let usedImportRuleTag = false;\n\n  const insertMarker = id => {\n    const prev = markers[id];\n    if (prev !== undefined) {\n      return prev;\n    }\n\n    markers[id] = makeTextNode(id);\n    el.appendChild(markers[id]);\n    names[id] = Object.create(null);\n\n    return markers[id];\n  };\n\n  const insertRules = (id, cssRules, name) => {\n    const marker = insertMarker(id);\n    const importRules = [];\n    const cssRulesSize = cssRules.length;\n\n    for (let i = 0; i < cssRulesSize; i += 1) {\n      const rule = cssRules[i];\n      let mayHaveImport = extractImport;\n      if (mayHaveImport && rule.indexOf('@import') !== -1) {\n        importRules.push(rule);\n      } else {\n        mayHaveImport = false;\n        const separator = i === cssRulesSize - 1 ? '' : ' ';\n        marker.appendData(`${rule}${separator}`);\n      }\n    }\n\n    addNameForId(names, id, name);\n\n    if (extractImport && importRules.length > 0) {\n      usedImportRuleTag = true;\n      // $FlowFixMe\n      getImportRuleTag().insertRules(`${id}-import`, importRules);\n    }\n  };\n\n  const removeRules = id => {\n    const marker = markers[id];\n    if (marker === undefined) return;\n\n    /* create new empty text node and replace the current one */\n    const newMarker = makeTextNode(id);\n    el.replaceChild(newMarker, marker);\n    markers[id] = newMarker;\n    resetIdNames(names, id);\n\n    if (extractImport && usedImportRuleTag) {\n      // $FlowFixMe\n      getImportRuleTag().removeRules(`${id}-import`);\n    }\n  };\n\n  const css = () => {\n    let str = '';\n\n    // eslint-disable-next-line guard-for-in\n    for (const id in markers) {\n      str += markers[id].data;\n    }\n\n    return str;\n  };\n\n  return {\n    clone() {\n      throw new StyledError(5);\n    },\n    css,\n    getIds: getIdsFromMarkersFactory(markers),\n    hasNameForId: hasNameForId(names),\n    insertMarker,\n    insertRules,\n    removeRules,\n    sealed: false,\n    styleTag: el,\n    toElement: wrapAsElement(css, names),\n    toHTML: wrapAsHtmlTag(css, names),\n  };\n};\n\nconst makeServerTag = (namesArg, markersArg): Tag<[string]> => {\n  const names = namesArg === undefined ? (Object.create(null): Object) : namesArg;\n  const markers = markersArg === undefined ? Object.create(null) : markersArg;\n\n  const insertMarker = id => {\n    const prev = markers[id];\n    if (prev !== undefined) {\n      return prev;\n    }\n\n    return (markers[id] = ['']);\n  };\n\n  const insertRules = (id, cssRules, name) => {\n    const marker = insertMarker(id);\n    marker[0] += cssRules.join(' ');\n    addNameForId(names, id, name);\n  };\n\n  const removeRules = id => {\n    const marker = markers[id];\n    if (marker === undefined) return;\n    marker[0] = '';\n    resetIdNames(names, id);\n  };\n\n  const css = () => {\n    let str = '';\n    // eslint-disable-next-line guard-for-in\n    for (const id in markers) {\n      const cssForId = markers[id][0];\n      if (cssForId) {\n        str += makeTextMarker(id) + cssForId;\n      }\n    }\n    return str;\n  };\n\n  const clone = () => {\n    const namesClone = cloneNames(names);\n    const markersClone = Object.create(null);\n\n    // eslint-disable-next-line guard-for-in\n    for (const id in markers) {\n      markersClone[id] = [markers[id][0]];\n    }\n\n    return makeServerTag(namesClone, markersClone);\n  };\n\n  const tag = {\n    clone,\n    css,\n    getIds: getIdsFromMarkersFactory(markers),\n    hasNameForId: hasNameForId(names),\n    insertMarker,\n    insertRules,\n    removeRules,\n    sealed: false,\n    styleTag: null,\n    toElement: wrapAsElement(css, names),\n    toHTML: wrapAsHtmlTag(css, names),\n  };\n\n  return tag;\n};\n\nexport const makeTag = (\n  target: ?HTMLElement,\n  tagEl: ?HTMLStyleElement,\n  forceServer?: boolean,\n  insertBefore?: boolean,\n  getImportRuleTag?: () => Tag<any>\n): Tag<any> => {\n  if (IS_BROWSER && !forceServer) {\n    const el = makeStyleTag(target, tagEl, insertBefore);\n\n    if (DISABLE_SPEEDY) {\n      return makeBrowserTag(el, getImportRuleTag);\n    } else {\n      return makeSpeedyTag(el, getImportRuleTag);\n    }\n  }\n\n  return makeServerTag();\n};\n\nexport const rehydrate = (\n  tag: Tag<any>,\n  els: HTMLStyleElement[],\n  extracted: ExtractedComp[]\n): void => {\n  /* add all extracted components to the new tag */\n  for (let i = 0, len = extracted.length; i < len; i += 1) {\n    const { componentId, cssFromDOM } = extracted[i];\n    const cssRules = splitByRules(cssFromDOM);\n    tag.insertRules(componentId, cssRules);\n  }\n\n  /* remove old HTMLStyleElements, since they have been rehydrated */\n  for (let i = 0, len = els.length; i < len; i += 1) {\n    const el = els[i];\n    if (el.parentNode) {\n      el.parentNode.removeChild(el);\n    }\n  }\n};\n","// @flow\nimport React, { createContext, Component, type Element } from 'react';\nimport memoize from 'memoize-one';\nimport StyledError from '../utils/error';\nimport isFunction from '../utils/isFunction';\n\nexport type Theme = { [key: string]: mixed };\n\ntype Props = {\n  children?: Element<any>,\n  theme: Theme | ((outerTheme: Theme) => void),\n};\n\nexport const ThemeContext = createContext();\n\nexport const ThemeConsumer = ThemeContext.Consumer;\n\n/**\n * Provide a theme to an entire react component tree via context\n */\nexport default class ThemeProvider extends Component<Props> {\n  getContext: (theme: Theme | ((outerTheme: Theme) => void), outerTheme?: Theme) => Theme;\n\n  renderInner: Function;\n\n  constructor(props: Props) {\n    super(props);\n    this.getContext = memoize(this.getContext.bind(this));\n    this.renderInner = this.renderInner.bind(this);\n  }\n\n  render() {\n    if (!this.props.children) return null;\n\n    return <ThemeContext.Consumer>{this.renderInner}</ThemeContext.Consumer>;\n  }\n\n  renderInner(outerTheme?: Theme) {\n    const context = this.getContext(this.props.theme, outerTheme);\n\n    return (\n      <ThemeContext.Provider value={context}>\n        {React.Children.only(this.props.children)}\n      </ThemeContext.Provider>\n    );\n  }\n\n  /**\n   * Get the theme from the props, supporting both (outerTheme) => {}\n   * as well as object notation\n   */\n  getTheme(theme: (outerTheme: ?Theme) => void, outerTheme: ?Theme) {\n    if (isFunction(theme)) {\n      const mergedTheme = theme(outerTheme);\n\n      if (\n        process.env.NODE_ENV !== 'production' &&\n        (mergedTheme === null || Array.isArray(mergedTheme) || typeof mergedTheme !== 'object')\n      ) {\n        throw new StyledError(7);\n      }\n\n      return mergedTheme;\n    }\n\n    if (theme === null || Array.isArray(theme) || typeof theme !== 'object') {\n      throw new StyledError(8);\n    }\n\n    return { ...outerTheme, ...theme };\n  }\n\n  getContext(theme: (outerTheme: ?Theme) => void, outerTheme?: Theme) {\n    return this.getTheme(theme, outerTheme);\n  }\n}\n","// @flow\nimport React, { createContext, Component, type Element } from 'react';\nimport PropTypes from 'prop-types';\nimport memoize from 'memoize-one';\nimport StyleSheet from './StyleSheet';\nimport ServerStyleSheet from './ServerStyleSheet';\nimport StyledError from '../utils/error';\n\ntype Props = {\n  children?: Element<any>,\n  sheet?: StyleSheet,\n  target?: HTMLElement,\n};\n\nexport const StyleSheetContext = createContext();\nexport const StyleSheetConsumer = StyleSheetContext.Consumer;\n\nexport default class StyleSheetManager extends Component<Props> {\n  static propTypes = {\n    sheet: PropTypes.oneOfType([\n      PropTypes.instanceOf(StyleSheet),\n      PropTypes.instanceOf(ServerStyleSheet),\n    ]),\n\n    target: PropTypes.shape({\n      appendChild: PropTypes.func.isRequired,\n    }),\n  };\n\n  getContext: (sheet: ?StyleSheet, target: ?HTMLElement) => StyleSheet;\n\n  constructor(props: Props) {\n    super(props);\n    this.getContext = memoize(this.getContext);\n  }\n\n  getContext(sheet: ?StyleSheet, target: ?HTMLElement) {\n    if (sheet) {\n      return sheet;\n    } else if (target) {\n      return new StyleSheet(target);\n    } else {\n      throw new StyledError(4);\n    }\n  }\n\n  render() {\n    const { children, sheet, target } = this.props;\n\n    return (\n      <StyleSheetContext.Provider value={this.getContext(sheet, target)}>\n        {process.env.NODE_ENV !== 'production' ? React.Children.only(children) : children}\n      </StyleSheetContext.Provider>\n    );\n  }\n}\n","// @flow\nimport validAttr from '@emotion/is-prop-valid';\nimport merge from 'merge-anything';\nimport React, { createElement, Component } from 'react';\nimport ComponentStyle from './ComponentStyle';\nimport createWarnTooManyClasses from '../utils/createWarnTooManyClasses';\nimport determineTheme from '../utils/determineTheme';\nimport escape from '../utils/escape';\nimport generateDisplayName from '../utils/generateDisplayName';\nimport getComponentName from '../utils/getComponentName';\nimport hoist from '../utils/hoist';\nimport isFunction from '../utils/isFunction';\nimport isTag from '../utils/isTag';\nimport isDerivedReactComponent from '../utils/isDerivedReactComponent';\nimport isStyledComponent from '../utils/isStyledComponent';\nimport once from '../utils/once';\nimport StyleSheet from './StyleSheet';\nimport { ThemeConsumer, type Theme } from './ThemeProvider';\nimport { StyleSheetConsumer } from './StyleSheetManager';\nimport { EMPTY_ARRAY, EMPTY_OBJECT } from '../utils/empties';\n\nimport type { Attrs, RuleSet, Target } from '../types';\n\nconst identifiers = {};\n\n/* We depend on components having unique IDs */\nfunction generateId(_ComponentStyle: Function, _displayName: string, parentComponentId: string) {\n  const displayName = typeof _displayName !== 'string' ? 'sc' : escape(_displayName);\n\n  /**\n   * This ensures uniqueness if two components happen to share\n   * the same displayName.\n   */\n  const nr = (identifiers[displayName] || 0) + 1;\n  identifiers[displayName] = nr;\n\n  const componentId = `${displayName}-${_ComponentStyle.generateName(displayName + nr)}`;\n\n  return parentComponentId ? `${parentComponentId}-${componentId}` : componentId;\n}\n\n// $FlowFixMe\nclass StyledComponent extends Component<*> {\n  renderOuter: Function;\n\n  renderInner: Function;\n\n  styleSheet: ?StyleSheet;\n\n  warnInnerRef: Function;\n\n  warnAttrsFnObjectKeyDeprecated: Function;\n\n  warnNonStyledComponentAttrsObjectKey: Function;\n\n  attrs = {};\n\n  constructor() {\n    super();\n    this.renderOuter = this.renderOuter.bind(this);\n    this.renderInner = this.renderInner.bind(this);\n\n    if (process.env.NODE_ENV !== 'production') {\n      this.warnInnerRef = once(displayName =>\n        // eslint-disable-next-line no-console\n        console.warn(\n          `The \"innerRef\" API has been removed in styled-components v4 in favor of React 16 ref forwarding, use \"ref\" instead like a typical component. \"innerRef\" was detected on component \"${displayName}\".`\n        )\n      );\n\n      this.warnAttrsFnObjectKeyDeprecated = once(\n        (key, displayName): void =>\n          // eslint-disable-next-line no-console\n          console.warn(\n            `Functions as object-form attrs({}) keys are now deprecated and will be removed in a future version of styled-components. Switch to the new attrs(props => ({})) syntax instead for easier and more powerful composition. The attrs key in question is \"${key}\" on component \"${displayName}\".`,\n            `\\n ${new Error().stack}`\n          )\n      );\n\n      this.warnNonStyledComponentAttrsObjectKey = once(\n        (key, displayName): void =>\n          // eslint-disable-next-line no-console\n          console.warn(\n            `It looks like you've used a non styled-component as the value for the \"${key}\" prop in an object-form attrs constructor of \"${displayName}\".\\n` +\n              'You should use the new function-form attrs constructor which avoids this issue: attrs(props => ({ yourStuff }))\\n' +\n              \"To continue using the deprecated object syntax, you'll need to wrap your component prop in a function to make it available inside the styled component (you'll still get the deprecation warning though.)\\n\" +\n              `For example, { ${key}: () => InnerComponent } instead of { ${key}: InnerComponent }`\n          )\n      );\n    }\n  }\n\n  render() {\n    return <StyleSheetConsumer>{this.renderOuter}</StyleSheetConsumer>;\n  }\n\n  renderOuter(styleSheet?: StyleSheet = StyleSheet.master) {\n    this.styleSheet = styleSheet;\n\n    // No need to subscribe a static component to theme changes, it won't change anything\n    if (this.props.forwardedComponent.componentStyle.isStatic) return this.renderInner();\n\n    return <ThemeConsumer>{this.renderInner}</ThemeConsumer>;\n  }\n\n  renderInner(theme?: Theme) {\n    const {\n      componentStyle,\n      defaultProps,\n      displayName,\n      foldedComponentIds,\n      styledComponentId,\n      target,\n    } = this.props.forwardedComponent;\n\n    let generatedClassName;\n    if (componentStyle.isStatic) {\n      generatedClassName = this.generateAndInjectStyles(EMPTY_OBJECT, this.props);\n    } else {\n      generatedClassName = this.generateAndInjectStyles(\n        determineTheme(this.props, theme, defaultProps) || EMPTY_OBJECT,\n        this.props\n      );\n    }\n\n    const elementToBeCreated = this.props.as || this.attrs.as || target;\n    const isTargetTag = isTag(elementToBeCreated);\n\n    const propsForElement = {};\n    const computedProps = { ...this.attrs, ...this.props };\n\n    let key;\n    // eslint-disable-next-line guard-for-in\n    for (key in computedProps) {\n      if (process.env.NODE_ENV !== 'production' && key === 'innerRef' && isTargetTag) {\n        this.warnInnerRef(displayName);\n      }\n\n      if (key === 'forwardedComponent' || key === 'as') {\n        continue;\n      } else if (key === 'forwardedRef') propsForElement.ref = computedProps[key];\n      else if (key === 'forwardedAs') propsForElement.as = computedProps[key];\n      else if (!isTargetTag || validAttr(key)) {\n        // Don't pass through non HTML tags through to HTML elements\n        propsForElement[key] = computedProps[key];\n      }\n    }\n\n    if (this.props.style && this.attrs.style) {\n      propsForElement.style = { ...this.attrs.style, ...this.props.style };\n    }\n\n    propsForElement.className = Array.prototype\n      .concat(\n        foldedComponentIds,\n        this.props.className,\n        styledComponentId,\n        this.attrs.className,\n        generatedClassName\n      )\n      .filter(Boolean)\n      .join(' ');\n\n    return createElement(elementToBeCreated, propsForElement);\n  }\n\n  buildExecutionContext(theme: ?Object, props: Object, attrs: Attrs) {\n    const context = { ...props, theme };\n\n    if (!attrs.length) return context;\n\n    this.attrs = {};\n\n    attrs.forEach(attrDef => {\n      let resolvedAttrDef = attrDef;\n      let attrDefWasFn = false;\n      let attr;\n      let key;\n\n      if (isFunction(resolvedAttrDef)) {\n        // $FlowFixMe\n        resolvedAttrDef = resolvedAttrDef(context);\n        attrDefWasFn = true;\n      }\n\n      /* eslint-disable guard-for-in */\n      // $FlowFixMe\n      for (key in resolvedAttrDef) {\n        attr = resolvedAttrDef[key];\n\n        if (!attrDefWasFn) {\n          if (isFunction(attr) && !isDerivedReactComponent(attr) && !isStyledComponent(attr)) {\n            if (process.env.NODE_ENV !== 'production') {\n              this.warnAttrsFnObjectKeyDeprecated(key, props.forwardedComponent.displayName);\n            }\n\n            attr = attr(context);\n\n            if (process.env.NODE_ENV !== 'production' && React.isValidElement(attr)) {\n              this.warnNonStyledComponentAttrsObjectKey(key, props.forwardedComponent.displayName);\n            }\n          }\n        }\n\n        this.attrs[key] = attr;\n        context[key] = attr;\n      }\n      /* eslint-enable */\n    });\n\n    return context;\n  }\n\n  generateAndInjectStyles(theme: any, props: any) {\n    const { attrs, componentStyle, warnTooManyClasses } = props.forwardedComponent;\n\n    // statically styled-components don't need to build an execution context object,\n    // and shouldn't be increasing the number of class names\n    if (componentStyle.isStatic && !attrs.length) {\n      return componentStyle.generateAndInjectStyles(EMPTY_OBJECT, this.styleSheet);\n    }\n\n    const className = componentStyle.generateAndInjectStyles(\n      this.buildExecutionContext(theme, props, attrs),\n      this.styleSheet\n    );\n\n    if (process.env.NODE_ENV !== 'production' && warnTooManyClasses) warnTooManyClasses(className);\n\n    return className;\n  }\n}\n\nexport default function createStyledComponent(target: Target, options: Object, rules: RuleSet) {\n  const isTargetStyledComp = isStyledComponent(target);\n  const isClass = !isTag(target);\n\n  const {\n    displayName = generateDisplayName(target),\n    componentId = generateId(ComponentStyle, options.displayName, options.parentComponentId),\n    ParentComponent = StyledComponent,\n    attrs = EMPTY_ARRAY,\n  } = options;\n\n  const styledComponentId =\n    options.displayName && options.componentId\n      ? `${escape(options.displayName)}-${options.componentId}`\n      : options.componentId || componentId;\n\n  // fold the underlying StyledComponent attrs up (implicit extend)\n  const finalAttrs =\n    // $FlowFixMe\n    isTargetStyledComp && target.attrs\n      ? Array.prototype.concat(target.attrs, attrs).filter(Boolean)\n      : attrs;\n\n  const componentStyle = new ComponentStyle(\n    isTargetStyledComp\n      ? // fold the underlying StyledComponent rules up (implicit extend)\n        // $FlowFixMe\n        target.componentStyle.rules.concat(rules)\n      : rules,\n    finalAttrs,\n    styledComponentId\n  );\n\n  /**\n   * forwardRef creates a new interim component, which we'll take advantage of\n   * instead of extending ParentComponent to create _another_ interim class\n   */\n  let WrappedStyledComponent;\n  const forwardRef = (props, ref) => (\n    <ParentComponent {...props} forwardedComponent={WrappedStyledComponent} forwardedRef={ref} />\n  );\n  forwardRef.displayName = displayName;\n  WrappedStyledComponent = React.forwardRef(forwardRef);\n  WrappedStyledComponent.displayName = displayName;\n\n  // $FlowFixMe\n  WrappedStyledComponent.attrs = finalAttrs;\n  // $FlowFixMe\n  WrappedStyledComponent.componentStyle = componentStyle;\n\n  // $FlowFixMe\n  WrappedStyledComponent.foldedComponentIds = isTargetStyledComp\n    ? // $FlowFixMe\n      Array.prototype.concat(target.foldedComponentIds, target.styledComponentId)\n    : EMPTY_ARRAY;\n\n  // $FlowFixMe\n  WrappedStyledComponent.styledComponentId = styledComponentId;\n\n  // fold the underlying StyledComponent target up since we folded the styles\n  // $FlowFixMe\n  WrappedStyledComponent.target = isTargetStyledComp ? target.target : target;\n\n  // $FlowFixMe\n  WrappedStyledComponent.withComponent = function withComponent(tag: Target) {\n    const { componentId: previousComponentId, ...optionsToCopy } = options;\n\n    const newComponentId =\n      previousComponentId &&\n      `${previousComponentId}-${isTag(tag) ? tag : escape(getComponentName(tag))}`;\n\n    const newOptions = {\n      ...optionsToCopy,\n      attrs: finalAttrs,\n      componentId: newComponentId,\n      ParentComponent,\n    };\n\n    return createStyledComponent(tag, newOptions, rules);\n  };\n\n  // $FlowFixMe\n  Object.defineProperty(WrappedStyledComponent, 'defaultProps', {\n    get() {\n      return this._foldedDefaultProps;\n    },\n\n    set(obj) {\n      // $FlowFixMe\n      this._foldedDefaultProps = isTargetStyledComp ? merge(target.defaultProps, obj) : obj;\n    },\n  });\n\n  if (process.env.NODE_ENV !== 'production') {\n    // $FlowFixMe\n    WrappedStyledComponent.warnTooManyClasses = createWarnTooManyClasses(displayName);\n  }\n\n  // $FlowFixMe\n  WrappedStyledComponent.toString = () => `.${WrappedStyledComponent.styledComponentId}`;\n\n  if (isClass) {\n    hoist(WrappedStyledComponent, target, {\n      // all SC-specific things should not be hoisted\n      attrs: true,\n      componentStyle: true,\n      displayName: true,\n      foldedComponentIds: true,\n      styledComponentId: true,\n      target: true,\n      withComponent: true,\n    });\n  }\n\n  return WrappedStyledComponent;\n}\n","// @flow\nimport { EMPTY_ARRAY } from '../utils/empties';\nimport flatten from '../utils/flatten';\nimport isStaticRules from '../utils/isStaticRules';\nimport stringifyRules from '../utils/stringifyRules';\nimport StyleSheet from './StyleSheet';\n\nimport type { RuleSet } from '../types';\n\nexport default class GlobalStyle {\n  componentId: string;\n\n  isStatic: boolean;\n\n  rules: RuleSet;\n\n  constructor(rules: RuleSet, componentId: string) {\n    this.rules = rules;\n    this.componentId = componentId;\n    this.isStatic = isStaticRules(rules, EMPTY_ARRAY);\n\n    if (!StyleSheet.master.hasId(componentId)) {\n      StyleSheet.master.deferredInject(componentId, []);\n    }\n  }\n\n  createStyles(executionContext: Object, styleSheet: StyleSheet) {\n    const flatCSS = flatten(this.rules, executionContext, styleSheet);\n    const css = stringifyRules(flatCSS, '');\n\n    styleSheet.inject(this.componentId, css);\n  }\n\n  removeStyles(styleSheet: StyleSheet) {\n    const { componentId } = this;\n    if (styleSheet.hasId(componentId)) {\n      styleSheet.remove(componentId);\n    }\n  }\n\n  // TODO: overwrite in-place instead of remove+create?\n  renderStyles(executionContext: Object, styleSheet: StyleSheet) {\n    this.removeStyles(styleSheet);\n    this.createStyles(executionContext, styleSheet);\n  }\n}\n"],"names":["__VERSION__","i"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CC;;CAAA;;;;;;;;;;;;;;;;mCAgBgDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iEA2DO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wDAoSnD;;WAEMC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACjZT;;;;;;;;;;;8BAUA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kCCQA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qCCyI2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4BC1J3B,aAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"styled-components.browser.cjs.js","sources":["../src/models/StyleTags.js","../src/models/ThemeProvider.js","../src/models/StyleSheetManager.js","../src/models/StyledComponent.js","../src/models/GlobalStyle.js"],"sourcesContent":["// @flow\n/* eslint-disable flowtype/object-type-delimiter */\n/* eslint-disable react/prop-types */\n\nimport React, { type Element } from 'react';\nimport { IS_BROWSER, DISABLE_SPEEDY, SC_ATTR, SC_VERSION_ATTR } from '../constants';\nimport StyledError from '../utils/error';\nimport { type ExtractedComp } from '../utils/extractCompsFromCSS';\nimport { splitByRules } from '../utils/stringifyRules';\nimport getNonce from '../utils/nonce';\n\nimport {\n  type Names,\n  addNameForId,\n  resetIdNames,\n  hasNameForId,\n  stringifyNames,\n  cloneNames,\n} from '../utils/styleNames';\n\nimport { sheetForTag, safeInsertRule, deleteRules } from '../utils/insertRuleHelpers';\n\ndeclare var __VERSION__: string;\n\nexport interface Tag<T> {\n  // $FlowFixMe: Doesn't seem to accept any combination w/ HTMLStyleElement for some reason\n  styleTag: HTMLStyleElement | null;\n  /* lists all ids of the tag */\n  getIds(): string[];\n  /* checks whether `name` is already injected for `id` */\n  hasNameForId(id: string, name: string): boolean;\n  /* inserts a marker to ensure the id's correct position in the sheet */\n  insertMarker(id: string): T;\n  /* inserts rules according to the ids markers */\n  insertRules(id: string, cssRules: string[], name: ?string): void;\n  /* removes all rules belonging to the id, keeping the marker around */\n  removeRules(id: string): void;\n  css(): string;\n  toHTML(additionalAttrs: ?string): string;\n  toElement(): Element<*>;\n  clone(): Tag<T>;\n  /* used in server side rendering to indicate that the rules in the tag have been flushed to HTML */\n  sealed: boolean;\n}\n\n/* this marker separates component styles and is important for rehydration */\nconst makeTextMarker = id => `\\n/* sc-component-id: ${id} */\\n`;\n\n/* add up all numbers in array up until and including the index */\nconst addUpUntilIndex = (sizes: number[], index: number): number => {\n  let totalUpToIndex = 0;\n  for (let i = 0; i <= index; i += 1) {\n    totalUpToIndex += sizes[i];\n  }\n\n  return totalUpToIndex;\n};\n\n/* create a new style tag after lastEl */\nconst makeStyleTag = (target: ?HTMLElement, tagEl: ?Node, insertBefore: ?boolean) => {\n  let targetDocument = document;\n  if(target) targetDocument = target.ownerDocument;\n  else if(tagEl) targetDocument = tagEl.ownerDocument;\n\n  const el = targetDocument.createElement('style');\n  el.setAttribute(SC_ATTR, '');\n  el.setAttribute(SC_VERSION_ATTR, __VERSION__);\n\n  const nonce = getNonce();\n  if (nonce) {\n    el.setAttribute('nonce', nonce);\n  }\n\n  /* Work around insertRule quirk in EdgeHTML */\n  el.appendChild(targetDocument.createTextNode(''));\n\n  if (target && !tagEl) {\n    /* Append to target when no previous element was passed */\n    target.appendChild(el);\n  } else {\n    if (!tagEl || !target || !tagEl.parentNode) {\n      throw new StyledError(6);\n    }\n\n    /* Insert new style tag after the previous one */\n    tagEl.parentNode.insertBefore(el, insertBefore ? tagEl : tagEl.nextSibling);\n  }\n\n  return el;\n};\n\n/* takes a css factory function and outputs an html styled tag factory */\nconst wrapAsHtmlTag = (css: () => string, names: Names) => (additionalAttrs: ?string): string => {\n  const nonce = getNonce();\n  const attrs = [\n    nonce && `nonce=\"${nonce}\"`,\n    `${SC_ATTR}=\"${stringifyNames(names)}\"`,\n    `${SC_VERSION_ATTR}=\"${__VERSION__}\"`,\n    additionalAttrs,\n  ];\n\n  const htmlAttr = attrs.filter(Boolean).join(' ');\n  return `<style ${htmlAttr}>${css()}</style>`;\n};\n\n/* takes a css factory function and outputs an element factory */\nconst wrapAsElement = (css: () => string, names: Names) => () => {\n  const props = {\n    [SC_ATTR]: stringifyNames(names),\n    [SC_VERSION_ATTR]: __VERSION__,\n  };\n\n  const nonce = getNonce();\n  if (nonce) {\n    // $FlowFixMe\n    props.nonce = nonce;\n  }\n\n  // eslint-disable-next-line react/no-danger\n  return <style {...props} dangerouslySetInnerHTML={{ __html: css() }} />;\n};\n\nconst getIdsFromMarkersFactory = (markers: Object) => (): string[] => Object.keys(markers);\n\n/* speedy tags utilise insertRule */\nconst makeSpeedyTag = (el: HTMLStyleElement, getImportRuleTag: ?() => Tag<any>): Tag<number> => {\n  const names: Names = (Object.create(null): Object);\n  const markers = Object.create(null);\n  const sizes: number[] = [];\n\n  const extractImport = getImportRuleTag !== undefined;\n  /* indicates whether getImportRuleTag was called */\n  let usedImportRuleTag = false;\n\n  const insertMarker = id => {\n    const prev = markers[id];\n    if (prev !== undefined) {\n      return prev;\n    }\n\n    markers[id] = sizes.length;\n    sizes.push(0);\n    resetIdNames(names, id);\n\n    return markers[id];\n  };\n\n  const insertRules = (id, cssRules, name) => {\n    const marker = insertMarker(id);\n    const sheet = sheetForTag(el);\n    const insertIndex = addUpUntilIndex(sizes, marker);\n\n    let injectedRules = 0;\n    const importRules = [];\n    const cssRulesSize = cssRules.length;\n\n    for (let i = 0; i < cssRulesSize; i += 1) {\n      const cssRule = cssRules[i];\n      let mayHaveImport = extractImport; /* @import rules are reordered to appear first */\n      if (mayHaveImport && cssRule.indexOf('@import') !== -1) {\n        importRules.push(cssRule);\n      } else if (safeInsertRule(sheet, cssRule, insertIndex + injectedRules)) {\n        mayHaveImport = false;\n        injectedRules += 1;\n      }\n    }\n\n    if (extractImport && importRules.length > 0) {\n      usedImportRuleTag = true;\n      // $FlowFixMe\n      getImportRuleTag().insertRules(`${id}-import`, importRules);\n    }\n\n    sizes[marker] += injectedRules; /* add up no of injected rules */\n    addNameForId(names, id, name);\n  };\n\n  const removeRules = id => {\n    const marker = markers[id];\n    if (marker === undefined) return;\n    // $FlowFixMe\n    if (el.isConnected === false) return;\n\n    const size = sizes[marker];\n    const sheet = sheetForTag(el);\n    const removalIndex = addUpUntilIndex(sizes, marker) - 1;\n    deleteRules(sheet, removalIndex, size);\n    sizes[marker] = 0;\n    resetIdNames(names, id);\n\n    if (extractImport && usedImportRuleTag) {\n      // $FlowFixMe\n      getImportRuleTag().removeRules(`${id}-import`);\n    }\n  };\n\n  const css = () => {\n    const { cssRules } = sheetForTag(el);\n    let str = '';\n\n    // eslint-disable-next-line guard-for-in\n    for (const id in markers) {\n      str += makeTextMarker(id);\n      const marker = markers[id];\n      const end = addUpUntilIndex(sizes, marker);\n      const size = sizes[marker];\n      for (let i = end - size; i < end; i += 1) {\n        const rule = cssRules[i];\n        if (rule !== undefined) {\n          str += rule.cssText;\n        }\n      }\n    }\n\n    return str;\n  };\n\n  return {\n    clone() {\n      throw new StyledError(5);\n    },\n    css,\n    getIds: getIdsFromMarkersFactory(markers),\n    hasNameForId: hasNameForId(names),\n    insertMarker,\n    insertRules,\n    removeRules,\n    sealed: false,\n    styleTag: el,\n    toElement: wrapAsElement(css, names),\n    toHTML: wrapAsHtmlTag(css, names),\n  };\n};\n\nconst makeTextNode = (targetDocument, id) => targetDocument.createTextNode(makeTextMarker(id));\n\nconst makeBrowserTag = (el: HTMLStyleElement, getImportRuleTag: ?() => Tag<any>): Tag<Text> => {\n  const names = (Object.create(null): Object);\n  const markers = Object.create(null);\n\n  const extractImport = getImportRuleTag !== undefined;\n\n  /* indicates whether getImportRuleTag was called */\n  let usedImportRuleTag = false;\n\n  const insertMarker = id => {\n    const prev = markers[id];\n    if (prev !== undefined) {\n      return prev;\n    }\n\n    markers[id] = makeTextNode(el.ownerDocument, id);\n    el.appendChild(markers[id]);\n    names[id] = Object.create(null);\n\n    return markers[id];\n  };\n\n  const insertRules = (id, cssRules, name) => {\n    const marker = insertMarker(id);\n    const importRules = [];\n    const cssRulesSize = cssRules.length;\n\n    for (let i = 0; i < cssRulesSize; i += 1) {\n      const rule = cssRules[i];\n      let mayHaveImport = extractImport;\n      if (mayHaveImport && rule.indexOf('@import') !== -1) {\n        importRules.push(rule);\n      } else {\n        mayHaveImport = false;\n        const separator = i === cssRulesSize - 1 ? '' : ' ';\n        marker.appendData(`${rule}${separator}`);\n      }\n    }\n\n    addNameForId(names, id, name);\n\n    if (extractImport && importRules.length > 0) {\n      usedImportRuleTag = true;\n      // $FlowFixMe\n      getImportRuleTag().insertRules(`${id}-import`, importRules);\n    }\n  };\n\n  const removeRules = id => {\n    const marker = markers[id];\n    if (marker === undefined) return;\n\n    /* create new empty text node and replace the current one */\n    const newMarker = makeTextNode(el.ownerDocument, id);\n    el.replaceChild(newMarker, marker);\n    markers[id] = newMarker;\n    resetIdNames(names, id);\n\n    if (extractImport && usedImportRuleTag) {\n      // $FlowFixMe\n      getImportRuleTag().removeRules(`${id}-import`);\n    }\n  };\n\n  const css = () => {\n    let str = '';\n\n    // eslint-disable-next-line guard-for-in\n    for (const id in markers) {\n      str += markers[id].data;\n    }\n\n    return str;\n  };\n\n  return {\n    clone() {\n      throw new StyledError(5);\n    },\n    css,\n    getIds: getIdsFromMarkersFactory(markers),\n    hasNameForId: hasNameForId(names),\n    insertMarker,\n    insertRules,\n    removeRules,\n    sealed: false,\n    styleTag: el,\n    toElement: wrapAsElement(css, names),\n    toHTML: wrapAsHtmlTag(css, names),\n  };\n};\n\nconst makeServerTag = (namesArg, markersArg): Tag<[string]> => {\n  const names = namesArg === undefined ? (Object.create(null): Object) : namesArg;\n  const markers = markersArg === undefined ? Object.create(null) : markersArg;\n\n  const insertMarker = id => {\n    const prev = markers[id];\n    if (prev !== undefined) {\n      return prev;\n    }\n\n    return (markers[id] = ['']);\n  };\n\n  const insertRules = (id, cssRules, name) => {\n    const marker = insertMarker(id);\n    marker[0] += cssRules.join(' ');\n    addNameForId(names, id, name);\n  };\n\n  const removeRules = id => {\n    const marker = markers[id];\n    if (marker === undefined) return;\n    marker[0] = '';\n    resetIdNames(names, id);\n  };\n\n  const css = () => {\n    let str = '';\n    // eslint-disable-next-line guard-for-in\n    for (const id in markers) {\n      const cssForId = markers[id][0];\n      if (cssForId) {\n        str += makeTextMarker(id) + cssForId;\n      }\n    }\n    return str;\n  };\n\n  const clone = () => {\n    const namesClone = cloneNames(names);\n    const markersClone = Object.create(null);\n\n    // eslint-disable-next-line guard-for-in\n    for (const id in markers) {\n      markersClone[id] = [markers[id][0]];\n    }\n\n    return makeServerTag(namesClone, markersClone);\n  };\n\n  const tag = {\n    clone,\n    css,\n    getIds: getIdsFromMarkersFactory(markers),\n    hasNameForId: hasNameForId(names),\n    insertMarker,\n    insertRules,\n    removeRules,\n    sealed: false,\n    styleTag: null,\n    toElement: wrapAsElement(css, names),\n    toHTML: wrapAsHtmlTag(css, names),\n  };\n\n  return tag;\n};\n\nexport const makeTag = (\n  target: ?HTMLElement,\n  tagEl: ?HTMLStyleElement,\n  forceServer?: boolean,\n  insertBefore?: boolean,\n  getImportRuleTag?: () => Tag<any>\n): Tag<any> => {\n  if (IS_BROWSER && !forceServer) {\n    const el = makeStyleTag(target, tagEl, insertBefore);\n\n    if (DISABLE_SPEEDY) {\n      return makeBrowserTag(el, getImportRuleTag);\n    } else {\n      return makeSpeedyTag(el, getImportRuleTag);\n    }\n  }\n\n  return makeServerTag();\n};\n\nexport const rehydrate = (\n  tag: Tag<any>,\n  els: HTMLStyleElement[],\n  extracted: ExtractedComp[]\n): void => {\n  /* add all extracted components to the new tag */\n  for (let i = 0, len = extracted.length; i < len; i += 1) {\n    const { componentId, cssFromDOM } = extracted[i];\n    const cssRules = splitByRules(cssFromDOM);\n    tag.insertRules(componentId, cssRules);\n  }\n\n  /* remove old HTMLStyleElements, since they have been rehydrated */\n  for (let i = 0, len = els.length; i < len; i += 1) {\n    const el = els[i];\n    if (el.parentNode) {\n      el.parentNode.removeChild(el);\n    }\n  }\n};\n","// @flow\nimport React, { createContext, Component, type Element } from 'react';\nimport memoize from 'memoize-one';\nimport StyledError from '../utils/error';\nimport isFunction from '../utils/isFunction';\n\nexport type Theme = { [key: string]: mixed };\n\ntype Props = {\n  children?: Element<any>,\n  theme: Theme | ((outerTheme: Theme) => void),\n};\n\nexport const ThemeContext = createContext();\n\nexport const ThemeConsumer = ThemeContext.Consumer;\n\n/**\n * Provide a theme to an entire react component tree via context\n */\nexport default class ThemeProvider extends Component<Props> {\n  getContext: (theme: Theme | ((outerTheme: Theme) => void), outerTheme?: Theme) => Theme;\n\n  renderInner: Function;\n\n  constructor(props: Props) {\n    super(props);\n    this.getContext = memoize(this.getContext.bind(this));\n    this.renderInner = this.renderInner.bind(this);\n  }\n\n  render() {\n    if (!this.props.children) return null;\n\n    return <ThemeContext.Consumer>{this.renderInner}</ThemeContext.Consumer>;\n  }\n\n  renderInner(outerTheme?: Theme) {\n    const context = this.getContext(this.props.theme, outerTheme);\n\n    return (\n      <ThemeContext.Provider value={context}>\n        {this.props.children}\n      </ThemeContext.Provider>\n    );\n  }\n\n  /**\n   * Get the theme from the props, supporting both (outerTheme) => {}\n   * as well as object notation\n   */\n  getTheme(theme: (outerTheme: ?Theme) => void, outerTheme: ?Theme) {\n    if (isFunction(theme)) {\n      const mergedTheme = theme(outerTheme);\n\n      if (\n        process.env.NODE_ENV !== 'production' &&\n        (mergedTheme === null || Array.isArray(mergedTheme) || typeof mergedTheme !== 'object')\n      ) {\n        throw new StyledError(7);\n      }\n\n      return mergedTheme;\n    }\n\n    if (theme === null || Array.isArray(theme) || typeof theme !== 'object') {\n      throw new StyledError(8);\n    }\n\n    return { ...outerTheme, ...theme };\n  }\n\n  getContext(theme: (outerTheme: ?Theme) => void, outerTheme?: Theme) {\n    return this.getTheme(theme, outerTheme);\n  }\n}\n","// @flow\nimport React, { createContext, Component, type Element } from 'react';\nimport PropTypes from 'prop-types';\nimport memoize from 'memoize-one';\nimport StyleSheet from './StyleSheet';\nimport ServerStyleSheet from './ServerStyleSheet';\nimport StyledError from '../utils/error';\n\ntype Props = {\n  children?: Element<any>,\n  sheet?: StyleSheet,\n  target?: HTMLElement,\n};\n\nexport const StyleSheetContext = createContext();\nexport const StyleSheetConsumer = StyleSheetContext.Consumer;\n\nexport default class StyleSheetManager extends Component<Props> {\n  static propTypes = {\n    sheet: PropTypes.oneOfType([\n      PropTypes.instanceOf(StyleSheet),\n      PropTypes.instanceOf(ServerStyleSheet),\n    ]),\n\n    target: PropTypes.shape({\n      appendChild: PropTypes.func.isRequired,\n    }),\n  };\n\n  getContext: (sheet: ?StyleSheet, target: ?HTMLElement) => StyleSheet;\n\n  constructor(props: Props) {\n    super(props);\n    this.getContext = memoize(this.getContext);\n  }\n\n  getContext(sheet: ?StyleSheet, target: ?HTMLElement) {\n    if (sheet) {\n      return sheet;\n    } else if (target) {\n      return new StyleSheet(target);\n    } else {\n      throw new StyledError(4);\n    }\n  }\n\n  render() {\n    const { children, sheet, target } = this.props;\n\n    return (\n      <StyleSheetContext.Provider value={this.getContext(sheet, target)}>\n        {process.env.NODE_ENV !== 'production' ? React.Children.only(children) : children}\n      </StyleSheetContext.Provider>\n    );\n  }\n}\n","// @flow\nimport validAttr from '@emotion/is-prop-valid';\nimport merge from 'merge-anything';\nimport React, { createElement, Component } from 'react';\nimport ComponentStyle from './ComponentStyle';\nimport createWarnTooManyClasses from '../utils/createWarnTooManyClasses';\nimport determineTheme from '../utils/determineTheme';\nimport escape from '../utils/escape';\nimport generateDisplayName from '../utils/generateDisplayName';\nimport getComponentName from '../utils/getComponentName';\nimport hoist from '../utils/hoist';\nimport isFunction from '../utils/isFunction';\nimport isTag from '../utils/isTag';\nimport isDerivedReactComponent from '../utils/isDerivedReactComponent';\nimport isStyledComponent from '../utils/isStyledComponent';\nimport once from '../utils/once';\nimport StyleSheet from './StyleSheet';\nimport { ThemeConsumer, type Theme } from './ThemeProvider';\nimport { StyleSheetConsumer } from './StyleSheetManager';\nimport { EMPTY_ARRAY, EMPTY_OBJECT } from '../utils/empties';\n\nimport type { Attrs, RuleSet, Target } from '../types';\n\nconst identifiers = {};\n\n/* We depend on components having unique IDs */\nfunction generateId(_ComponentStyle: Function, _displayName: string, parentComponentId: string) {\n  const displayName = typeof _displayName !== 'string' ? 'sc' : escape(_displayName);\n\n  /**\n   * This ensures uniqueness if two components happen to share\n   * the same displayName.\n   */\n  const nr = (identifiers[displayName] || 0) + 1;\n  identifiers[displayName] = nr;\n\n  const componentId = `${displayName}-${_ComponentStyle.generateName(displayName + nr)}`;\n\n  return parentComponentId ? `${parentComponentId}-${componentId}` : componentId;\n}\n\n// $FlowFixMe\nclass StyledComponent extends Component<*> {\n  renderOuter: Function;\n\n  renderInner: Function;\n\n  styleSheet: ?StyleSheet;\n\n  warnInnerRef: Function;\n\n  warnAttrsFnObjectKeyDeprecated: Function;\n\n  warnNonStyledComponentAttrsObjectKey: Function;\n\n  attrs = {};\n\n  constructor() {\n    super();\n    this.renderOuter = this.renderOuter.bind(this);\n    this.renderInner = this.renderInner.bind(this);\n\n    if (process.env.NODE_ENV !== 'production') {\n      this.warnInnerRef = once(displayName =>\n        // eslint-disable-next-line no-console\n        console.warn(\n          `The \"innerRef\" API has been removed in styled-components v4 in favor of React 16 ref forwarding, use \"ref\" instead like a typical component. \"innerRef\" was detected on component \"${displayName}\".`\n        )\n      );\n\n      this.warnAttrsFnObjectKeyDeprecated = once(\n        (key, displayName): void =>\n          // eslint-disable-next-line no-console\n          console.warn(\n            `Functions as object-form attrs({}) keys are now deprecated and will be removed in a future version of styled-components. Switch to the new attrs(props => ({})) syntax instead for easier and more powerful composition. The attrs key in question is \"${key}\" on component \"${displayName}\".`,\n            `\\n ${new Error().stack}`\n          )\n      );\n\n      this.warnNonStyledComponentAttrsObjectKey = once(\n        (key, displayName): void =>\n          // eslint-disable-next-line no-console\n          console.warn(\n            `It looks like you've used a non styled-component as the value for the \"${key}\" prop in an object-form attrs constructor of \"${displayName}\".\\n` +\n              'You should use the new function-form attrs constructor which avoids this issue: attrs(props => ({ yourStuff }))\\n' +\n              \"To continue using the deprecated object syntax, you'll need to wrap your component prop in a function to make it available inside the styled component (you'll still get the deprecation warning though.)\\n\" +\n              `For example, { ${key}: () => InnerComponent } instead of { ${key}: InnerComponent }`\n          )\n      );\n    }\n  }\n\n  render() {\n    return <StyleSheetConsumer>{this.renderOuter}</StyleSheetConsumer>;\n  }\n\n  renderOuter(styleSheet?: StyleSheet = StyleSheet.master) {\n    this.styleSheet = styleSheet;\n\n    // No need to subscribe a static component to theme changes, it won't change anything\n    if (this.props.forwardedComponent.componentStyle.isStatic) return this.renderInner();\n\n    return <ThemeConsumer>{this.renderInner}</ThemeConsumer>;\n  }\n\n  renderInner(theme?: Theme) {\n    const {\n      componentStyle,\n      defaultProps,\n      displayName,\n      foldedComponentIds,\n      styledComponentId,\n      target,\n    } = this.props.forwardedComponent;\n\n    let generatedClassName;\n    if (componentStyle.isStatic) {\n      generatedClassName = this.generateAndInjectStyles(EMPTY_OBJECT, this.props);\n    } else {\n      generatedClassName = this.generateAndInjectStyles(\n        determineTheme(this.props, theme, defaultProps) || EMPTY_OBJECT,\n        this.props\n      );\n    }\n\n    const elementToBeCreated = this.props.as || this.attrs.as || target;\n    const isTargetTag = isTag(elementToBeCreated);\n\n    const propsForElement = {};\n    const computedProps = { ...this.props, ...this.attrs };\n\n    let key;\n    // eslint-disable-next-line guard-for-in\n    for (key in computedProps) {\n      if (process.env.NODE_ENV !== 'production' && key === 'innerRef' && isTargetTag) {\n        this.warnInnerRef(displayName);\n      }\n\n      if (key === 'forwardedComponent' || key === 'as') {\n        continue;\n      } else if (key === 'forwardedRef') propsForElement.ref = computedProps[key];\n      else if (key === 'forwardedAs') propsForElement.as = computedProps[key];\n      else if (!isTargetTag || validAttr(key)) {\n        // Don't pass through non HTML tags through to HTML elements\n        propsForElement[key] = computedProps[key];\n      }\n    }\n\n    if (this.props.style && this.attrs.style) {\n      propsForElement.style = { ...this.attrs.style, ...this.props.style };\n    }\n\n    propsForElement.className = Array.prototype\n      .concat(\n        foldedComponentIds,\n        styledComponentId,\n        generatedClassName !== styledComponentId ? generatedClassName : null,\n        this.props.className,\n        this.attrs.className\n      )\n      .filter(Boolean)\n      .join(' ');\n\n    return createElement(elementToBeCreated, propsForElement);\n  }\n\n  buildExecutionContext(theme: ?Object, props: Object, attrs: Attrs) {\n    const context = { ...props, theme };\n\n    if (!attrs.length) return context;\n\n    this.attrs = {};\n\n    attrs.forEach(attrDef => {\n      let resolvedAttrDef = attrDef;\n      let attrDefWasFn = false;\n      let attr;\n      let key;\n\n      if (isFunction(resolvedAttrDef)) {\n        // $FlowFixMe\n        resolvedAttrDef = resolvedAttrDef(context);\n        attrDefWasFn = true;\n      }\n\n      /* eslint-disable guard-for-in */\n      // $FlowFixMe\n      for (key in resolvedAttrDef) {\n        attr = resolvedAttrDef[key];\n\n        if (!attrDefWasFn) {\n          if (isFunction(attr) && !isDerivedReactComponent(attr) && !isStyledComponent(attr)) {\n            if (process.env.NODE_ENV !== 'production') {\n              this.warnAttrsFnObjectKeyDeprecated(key, props.forwardedComponent.displayName);\n            }\n\n            attr = attr(context);\n\n            if (process.env.NODE_ENV !== 'production' && React.isValidElement(attr)) {\n              this.warnNonStyledComponentAttrsObjectKey(key, props.forwardedComponent.displayName);\n            }\n          }\n        }\n\n        this.attrs[key] = attr;\n        context[key] = attr;\n      }\n      /* eslint-enable */\n    });\n\n    return context;\n  }\n\n  generateAndInjectStyles(theme: any, props: any) {\n    const { attrs, componentStyle, warnTooManyClasses } = props.forwardedComponent;\n\n    // statically styled-components don't need to build an execution context object,\n    // and shouldn't be increasing the number of class names\n    if (componentStyle.isStatic && !attrs.length) {\n      return componentStyle.generateAndInjectStyles(EMPTY_OBJECT, this.styleSheet);\n    }\n\n    const className = componentStyle.generateAndInjectStyles(\n      this.buildExecutionContext(theme, props, attrs),\n      this.styleSheet\n    );\n\n    if (process.env.NODE_ENV !== 'production' && warnTooManyClasses) warnTooManyClasses(className);\n\n    return className;\n  }\n}\n\nexport default function createStyledComponent(target: Target, options: Object, rules: RuleSet) {\n  const isTargetStyledComp = isStyledComponent(target);\n  const isClass = !isTag(target);\n\n  const {\n    displayName = generateDisplayName(target),\n    componentId = generateId(ComponentStyle, options.displayName, options.parentComponentId),\n    ParentComponent = StyledComponent,\n    attrs = EMPTY_ARRAY,\n  } = options;\n\n  const styledComponentId =\n    options.displayName && options.componentId\n      ? `${escape(options.displayName)}-${options.componentId}`\n      : options.componentId || componentId;\n\n  // fold the underlying StyledComponent attrs up (implicit extend)\n  const finalAttrs =\n    // $FlowFixMe\n    isTargetStyledComp && target.attrs\n      ? Array.prototype.concat(target.attrs, attrs).filter(Boolean)\n      : attrs;\n\n  const componentStyle = new ComponentStyle(\n    isTargetStyledComp\n      ? // fold the underlying StyledComponent rules up (implicit extend)\n        // $FlowFixMe\n        target.componentStyle.rules.concat(rules)\n      : rules,\n    finalAttrs,\n    styledComponentId\n  );\n\n  /**\n   * forwardRef creates a new interim component, which we'll take advantage of\n   * instead of extending ParentComponent to create _another_ interim class\n   */\n  let WrappedStyledComponent;\n  const forwardRef = (props, ref) => (\n    <ParentComponent {...props} forwardedComponent={WrappedStyledComponent} forwardedRef={ref} />\n  );\n  forwardRef.displayName = displayName;\n  WrappedStyledComponent = React.forwardRef(forwardRef);\n  WrappedStyledComponent.displayName = displayName;\n\n  // $FlowFixMe\n  WrappedStyledComponent.attrs = finalAttrs;\n  // $FlowFixMe\n  WrappedStyledComponent.componentStyle = componentStyle;\n\n  // $FlowFixMe\n  WrappedStyledComponent.foldedComponentIds = isTargetStyledComp\n    ? // $FlowFixMe\n      Array.prototype.concat(target.foldedComponentIds, target.styledComponentId)\n    : EMPTY_ARRAY;\n\n  // $FlowFixMe\n  WrappedStyledComponent.styledComponentId = styledComponentId;\n\n  // fold the underlying StyledComponent target up since we folded the styles\n  // $FlowFixMe\n  WrappedStyledComponent.target = isTargetStyledComp ? target.target : target;\n\n  // $FlowFixMe\n  WrappedStyledComponent.withComponent = function withComponent(tag: Target) {\n    const { componentId: previousComponentId, ...optionsToCopy } = options;\n\n    const newComponentId =\n      previousComponentId &&\n      `${previousComponentId}-${isTag(tag) ? tag : escape(getComponentName(tag))}`;\n\n    const newOptions = {\n      ...optionsToCopy,\n      attrs: finalAttrs,\n      componentId: newComponentId,\n      ParentComponent,\n    };\n\n    return createStyledComponent(tag, newOptions, rules);\n  };\n\n  // $FlowFixMe\n  Object.defineProperty(WrappedStyledComponent, 'defaultProps', {\n    get() {\n      return this._foldedDefaultProps;\n    },\n\n    set(obj) {\n      // $FlowFixMe\n      this._foldedDefaultProps = isTargetStyledComp ? merge(target.defaultProps, obj) : obj;\n    },\n  });\n\n  if (process.env.NODE_ENV !== 'production') {\n    // $FlowFixMe\n    WrappedStyledComponent.warnTooManyClasses = createWarnTooManyClasses(displayName);\n  }\n\n  // $FlowFixMe\n  WrappedStyledComponent.toString = () => `.${WrappedStyledComponent.styledComponentId}`;\n\n  if (isClass) {\n    hoist(WrappedStyledComponent, target, {\n      // all SC-specific things should not be hoisted\n      attrs: true,\n      componentStyle: true,\n      displayName: true,\n      foldedComponentIds: true,\n      styledComponentId: true,\n      target: true,\n      withComponent: true,\n    });\n  }\n\n  return WrappedStyledComponent;\n}\n","// @flow\nimport { EMPTY_ARRAY } from '../utils/empties';\nimport flatten from '../utils/flatten';\nimport isStaticRules from '../utils/isStaticRules';\nimport stringifyRules from '../utils/stringifyRules';\nimport StyleSheet from './StyleSheet';\n\nimport type { RuleSet } from '../types';\n\nexport default class GlobalStyle {\n  componentId: string;\n\n  isStatic: boolean;\n\n  rules: RuleSet;\n\n  constructor(rules: RuleSet, componentId: string) {\n    this.rules = rules;\n    this.componentId = componentId;\n    this.isStatic = isStaticRules(rules, EMPTY_ARRAY);\n\n    if (!StyleSheet.master.hasId(componentId)) {\n      StyleSheet.master.deferredInject(componentId, []);\n    }\n  }\n\n  createStyles(executionContext: Object, styleSheet: StyleSheet) {\n    const flatCSS = flatten(this.rules, executionContext, styleSheet);\n    const css = stringifyRules(flatCSS, '');\n\n    styleSheet.inject(this.componentId, css);\n  }\n\n  removeStyles(styleSheet: StyleSheet) {\n    const { componentId } = this;\n    if (styleSheet.hasId(componentId)) {\n      styleSheet.remove(componentId);\n    }\n  }\n\n  // TODO: overwrite in-place instead of remove+create?\n  renderStyles(executionContext: Object, styleSheet: StyleSheet) {\n    this.removeStyles(styleSheet);\n    this.createStyles(executionContext, styleSheet);\n  }\n}\n"],"names":["i"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CC;;CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iEA+EuD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wDAsSnD;;WAEMA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACvZT;;;;;;;;;;;8BAUA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kCCQA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qCCyI2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4BC1J3B,aAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/styled-components.browser.esm.js

@@ -163,7 +163,7 @@ var ERRORS = process.env.NODE_ENV !== 'production' ? {
   "9": "Missing document `<head>`\n\n",
   "10": "Cannot find a StyleSheet instance. Usually this happens if there are multiple copies of styled-components loaded at once. Check out this issue for how to troubleshoot and fix the common cases where this situation can happen: https://github.com/styled-components/styled-components/issues/1941#issuecomment-417862021\n\n",
   "11": "_This error was replaced with a dev-time warning, it will be deleted for v4 final._ [createGlobalStyle] received children which will not be rendered. Please use the component without passing children elements.\n\n",
-  "12": "It seems you are interpolating a keyframe declaration (%s) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\\`\\` helper (see https://www.styled-components.com/docs/api#css), which ensures the styles are injected correctly.\n\n",
+  "12": "It seems you are interpolating a keyframe declaration (%s) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\\`\\` helper which ensures the styles are injected correctly. See https://www.styled-components.com/docs/api#css\n\n",
   "13": "%s is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.\n"
 } : {};
 
@@ -400,9 +400,9 @@ var sheetForTag = function sheetForTag(tag) {
   if (tag.sheet) return tag.sheet;
 
   /* Firefox quirk requires us to step through all stylesheets to find one owned by the given tag */
-  var size = document.styleSheets.length;
+  var size = tag.ownerDocument.styleSheets.length;
   for (var i = 0; i < size; i += 1) {
-    var sheet = document.styleSheets[i];
+    var sheet = tag.ownerDocument.styleSheets[i];
     // $FlowFixMe
     if (sheet.ownerNode === tag) return sheet;
   }
@@ -456,9 +456,12 @@ var addUpUntilIndex = function addUpUntilIndex(sizes, index) {
 
 /* create a new style tag after lastEl */
 var makeStyleTag = function makeStyleTag(target, tagEl, insertBefore) {
-  var el = document.createElement('style');
+  var targetDocument = document;
+  if (target) targetDocument = target.ownerDocument;else if (tagEl) targetDocument = tagEl.ownerDocument;
+
+  var el = targetDocument.createElement('style');
   el.setAttribute(SC_ATTR, '');
-  el.setAttribute(SC_VERSION_ATTR, "4.3.1");
+  el.setAttribute(SC_VERSION_ATTR, "4.4.1");
 
   var nonce = getNonce();
   if (nonce) {
@@ -466,7 +469,7 @@ var makeStyleTag = function makeStyleTag(target, tagEl, insertBefore) {
   }
 
   /* Work around insertRule quirk in EdgeHTML */
-  el.appendChild(document.createTextNode(''));
+  el.appendChild(targetDocument.createTextNode(''));
 
   if (target && !tagEl) {
     /* Append to target when no previous element was passed */
@@ -487,7 +490,7 @@ var makeStyleTag = function makeStyleTag(target, tagEl, insertBefore) {
 var wrapAsHtmlTag = function wrapAsHtmlTag(css, names) {
   return function (additionalAttrs) {
     var nonce = getNonce();
-    var attrs = [nonce && 'nonce="' + nonce + '"', SC_ATTR + '="' + stringifyNames(names) + '"', SC_VERSION_ATTR + '="' + "4.3.1" + '"', additionalAttrs];
+    var attrs = [nonce && 'nonce="' + nonce + '"', SC_ATTR + '="' + stringifyNames(names) + '"', SC_VERSION_ATTR + '="' + "4.4.1" + '"', additionalAttrs];
 
     var htmlAttr = attrs.filter(Boolean).join(' ');
     return '<style ' + htmlAttr + '>' + css() + '</style>';
@@ -499,7 +502,7 @@ var wrapAsElement = function wrapAsElement(css, names) {
   return function () {
     var _props;
 
-    var props = (_props = {}, _props[SC_ATTR] = stringifyNames(names), _props[SC_VERSION_ATTR] = "4.3.1", _props);
+    var props = (_props = {}, _props[SC_ATTR] = stringifyNames(names), _props[SC_VERSION_ATTR] = "4.4.1", _props);
 
     var nonce = getNonce();
     if (nonce) {
@@ -574,6 +577,8 @@ var makeSpeedyTag = function makeSpeedyTag(el, getImportRuleTag) {
   var removeRules = function removeRules(id) {
     var marker = markers[id];
     if (marker === undefined) return;
+    // $FlowFixMe
+    if (el.isConnected === false) return;
 
     var size = sizes[marker];
     var sheet = sheetForTag(el);
@@ -629,8 +634,8 @@ var makeSpeedyTag = function makeSpeedyTag(el, getImportRuleTag) {
   };
 };
 
-var makeTextNode = function makeTextNode(id) {
-  return document.createTextNode(makeTextMarker(id));
+var makeTextNode = function makeTextNode(targetDocument, id) {
+  return targetDocument.createTextNode(makeTextMarker(id));
 };
 
 var makeBrowserTag = function makeBrowserTag(el, getImportRuleTag) {
@@ -648,7 +653,7 @@ var makeBrowserTag = function makeBrowserTag(el, getImportRuleTag) {
       return prev;
     }
 
-    markers[id] = makeTextNode(id);
+    markers[id] = makeTextNode(el.ownerDocument, id);
     el.appendChild(markers[id]);
     names[id] = Object.create(null);
 
@@ -686,7 +691,7 @@ var makeBrowserTag = function makeBrowserTag(el, getImportRuleTag) {
     if (marker === undefined) return;
 
     /* create new empty text node and replace the current one */
-    var newMarker = makeTextNode(id);
+    var newMarker = makeTextNode(el.ownerDocument, id);
     el.replaceChild(newMarker, marker);
     markers[id] = newMarker;
     resetIdNames(names, id);
@@ -906,7 +911,7 @@ var StyleSheet = function () {
     var isStreamed = false;
 
     /* retrieve all of our SSR style elements from the DOM */
-    var nodes = document.querySelectorAll('style[' + SC_ATTR + '][' + SC_VERSION_ATTR + '="' + "4.3.1" + '"]');
+    var nodes = document.querySelectorAll('style[' + SC_ATTR + '][' + SC_VERSION_ATTR + '="' + "4.4.1" + '"]');
 
     var nodesSize = nodes.length;
 
@@ -1442,8 +1447,6 @@ function isStaticRules(rules, attrs) {
 
 // 
 
-var isHMREnabled = process.env.NODE_ENV !== 'production' && typeof module !== 'undefined' && module.hot;
-
 /* combines hashStr (murmurhash) and nameGenerator for convenience */
 var hasher = function hasher(str) {
   return generateAlphabeticName(murmurhash(str));
@@ -1459,7 +1462,7 @@ var ComponentStyle = function () {
     classCallCheck(this, ComponentStyle);
 
     this.rules = rules;
-    this.isStatic = !isHMREnabled && isStaticRules(rules, attrs);
+    this.isStatic = process.env.NODE_ENV === 'production' && isStaticRules(rules, attrs);
     this.componentId = componentId;
 
     if (!StyleSheet.master.hasId(componentId)) {
@@ -1468,10 +1471,10 @@ var ComponentStyle = function () {
   }
 
   /*
-     * Flattens a rule set into valid CSS
-     * Hashes it, wraps the whole chunk in a .hash1234 {}
-     * Returns the hash to be injected on render()
-     * */
+   * Flattens a rule set into valid CSS
+   * Hashes it, wraps the whole chunk in a .hash1234 {}
+   * Returns the hash to be injected on render()
+   * */
 
 
   ComponentStyle.prototype.generateAndInjectStyles = function generateAndInjectStyles(executionContext, styleSheet) {
@@ -1514,7 +1517,7 @@ var createWarnTooManyClasses = (function (displayName) {
       if (Object.keys(generatedClasses).length >= LIMIT) {
         // Unable to find latestRule in test environment.
         /* eslint-disable no-console, prefer-template */
-        console.warn('Over ' + LIMIT + ' classes were generated for component ' + displayName + '. \n' + 'Consider using the attrs method, together with a style object for frequently changed styles.\n' + 'Example:\n' + '  const Component = styled.div.attrs({\n' + '    style: ({ background }) => ({\n' + '      background,\n' + '    }),\n' + '  })`width: 100%;`\n\n' + '  <Component />');
+        console.warn('Over ' + LIMIT + ' classes were generated for component ' + displayName + '. \n' + 'Consider using the attrs method, together with a style object for frequently changed styles.\n' + 'Example:\n' + '  const Component = styled.div.attrs(props => ({\n' + '    style: {\n' + '      background: props.background,\n' + '    },\n' + '  }))`width: 100%;`\n\n' + '  <Component />');
         warningSeen = true;
         generatedClasses = {};
       }
@@ -1714,7 +1717,7 @@ var ThemeProvider = function (_Component) {
     return React.createElement(
       ThemeContext.Provider,
       { value: context },
-      React.Children.only(this.props.children)
+      this.props.children
     );
   };
 
@@ -2014,7 +2017,7 @@ var StyledComponent = function (_Component) {
     var isTargetTag = isTag(elementToBeCreated);
 
     var propsForElement = {};
-    var computedProps = _extends({}, this.attrs, this.props);
+    var computedProps = _extends({}, this.props, this.attrs);
 
     var key = void 0;
     // eslint-disable-next-line guard-for-in
@@ -2035,7 +2038,7 @@ var StyledComponent = function (_Component) {
       propsForElement.style = _extends({}, this.attrs.style, this.props.style);
     }
 
-    propsForElement.className = Array.prototype.concat(foldedComponentIds, this.props.className, styledComponentId, this.attrs.className, generatedClassName).filter(Boolean).join(' ');
+    propsForElement.className = Array.prototype.concat(foldedComponentIds, styledComponentId, generatedClassName !== styledComponentId ? generatedClassName : null, this.props.className, this.attrs.className).filter(Boolean).join(' ');
 
     return createElement(elementToBeCreated, propsForElement);
   };