styled-components 4.2.1 → 4.3.2

package/dist/styled-components.js

@@ -436,7 +436,7 @@
 
   // 
 
-  var SC_ATTR = typeof process !== 'undefined' && process.env.SC_ATTR || 'data-styled';
+  var SC_ATTR = typeof process !== 'undefined' && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR) || 'data-styled';
 
   var SC_VERSION_ATTR = 'data-styled-version';
 
@@ -444,7 +444,7 @@
 
   var IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;
 
-  var DISABLE_SPEEDY = typeof SC_DISABLE_SPEEDY === 'boolean' && SC_DISABLE_SPEEDY || "development" !== 'production';
+  var DISABLE_SPEEDY = typeof SC_DISABLE_SPEEDY === 'boolean' && SC_DISABLE_SPEEDY || typeof process !== 'undefined' && (process.env.REACT_APP_SC_DISABLE_SPEEDY || process.env.SC_DISABLE_SPEEDY) || "development" !== 'production';
 
   // Shared empty execution context when generating static styles
   var STATIC_EXECUTION_CONTEXT = {};
@@ -814,7 +814,7 @@
   var makeStyleTag = function makeStyleTag(target, tagEl, insertBefore) {
     var el = document.createElement('style');
     el.setAttribute(SC_ATTR, '');
-    el.setAttribute(SC_VERSION_ATTR, "4.2.1");
+    el.setAttribute(SC_VERSION_ATTR, "4.3.2");
 
     var nonce = getNonce();
     if (nonce) {
@@ -843,7 +843,7 @@
   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.2.1" + '"', additionalAttrs];
+      var attrs = [nonce && 'nonce="' + nonce + '"', SC_ATTR + '="' + stringifyNames(names) + '"', SC_VERSION_ATTR + '="' + "4.3.2" + '"', additionalAttrs];
 
       var htmlAttr = attrs.filter(Boolean).join(' ');
       return '<style ' + htmlAttr + '>' + css() + '</style>';
@@ -855,7 +855,7 @@
     return function () {
       var _props;
 
-      var props = (_props = {}, _props[SC_ATTR] = stringifyNames(names), _props[SC_VERSION_ATTR] = "4.2.1", _props);
+      var props = (_props = {}, _props[SC_ATTR] = stringifyNames(names), _props[SC_VERSION_ATTR] = "4.3.2", _props);
 
       var nonce = getNonce();
       if (nonce) {
@@ -1262,7 +1262,7 @@
       var isStreamed = false;
 
       /* retrieve all of our SSR style elements from the DOM */
-      var nodes = document.querySelectorAll('style[' + SC_ATTR + '][' + SC_VERSION_ATTR + '="' + "4.2.1" + '"]');
+      var nodes = document.querySelectorAll('style[' + SC_ATTR + '][' + SC_VERSION_ATTR + '="' + "4.3.2" + '"]');
 
       var nodesSize = nodes.length;
 
@@ -3237,7 +3237,7 @@
     };
   }
 
-  var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|default|defer|dir|disabled|download|draggable|encType|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|itemProp|itemScope|itemType|itemID|itemRef|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23
+  var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|download|draggable|encType|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|itemProp|itemScope|itemType|itemID|itemRef|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23
 
   var index$1 = memoize(function (prop) {
     return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111
@@ -3249,6 +3249,111 @@
   /* Z+1 */
   );
 
+  /**
+   * Returns the object type of the given payload
+   *
+   * @param {*} payload
+   * @returns {string}
+   */
+  function getType(payload) {
+      return Object.prototype.toString.call(payload).slice(8, -1);
+  }
+  /**
+   * Returns whether the payload is a plain JavaScript object (excluding special classes or objects with other prototypes)
+   *
+   * @param {*} payload
+   * @returns {payload is {[key: string]: any}}
+   */
+  function isPlainObject$1(payload) {
+      if (getType(payload) !== 'Object')
+          return false;
+      return (payload.constructor === Object && Object.getPrototypeOf(payload) === Object.prototype);
+  }
+  /**
+   * Returns whether the payload is an array
+   *
+   * @param {*} payload
+   * @returns {payload is undefined}
+   */
+  function isArray(payload) {
+      return getType(payload) === 'Array';
+  }
+
+  function mergeRecursively(origin, newComer, extensions) {
+      // work directly on newComer if its not an object
+      if (!isPlainObject$1(newComer)) {
+          // extend merge rules
+          if (extensions && isArray(extensions)) {
+              extensions.forEach(function (extend) {
+                  newComer = extend(origin, newComer);
+              });
+          }
+          return newComer;
+      }
+      // define newObject to merge all values upon
+      var newObject = (isPlainObject$1(origin))
+          ? Object.keys(origin)
+              .reduce(function (carry, key) {
+              var targetVal = origin[key];
+              // @ts-ignore
+              if (!Object.keys(newComer).includes(key))
+                  carry[key] = targetVal;
+              return carry;
+          }, {})
+          : {};
+      return Object.keys(newComer)
+          .reduce(function (carry, key) {
+          // re-define the origin and newComer as targetVal and newVal
+          var newVal = newComer[key];
+          var targetVal = (isPlainObject$1(origin))
+              ? origin[key]
+              : undefined;
+          // extend merge rules
+          if (extensions && isArray(extensions)) {
+              extensions.forEach(function (extend) {
+                  newVal = extend(targetVal, newVal);
+              });
+          }
+          // early return when targetVal === undefined
+          if (targetVal === undefined) {
+              carry[key] = newVal;
+              return carry;
+          }
+          // When newVal is an object do the merge recursively
+          if (isPlainObject$1(newVal)) {
+              carry[key] = mergeRecursively(targetVal, newVal, extensions);
+              return carry;
+          }
+          // all the rest
+          carry[key] = newVal;
+          return carry;
+      }, newObject);
+  }
+  /**
+   * Merge anything recursively.
+   * Objects get merged, special objects (classes etc.) are re-assigned "as is".
+   * Basic types overwrite objects or other basic types.
+   *
+   * @param {(IConfig | any)} origin
+   * @param {...any[]} newComers
+   * @returns the result
+   */
+  function index$2 (origin) {
+      var newComers = [];
+      for (var _i = 1; _i < arguments.length; _i++) {
+          newComers[_i - 1] = arguments[_i];
+      }
+      var extensions = null;
+      var base = origin;
+      if (isPlainObject$1(origin) && origin.extensions && Object.keys(origin).length === 1) {
+          base = {};
+          extensions = origin.extensions;
+      }
+      return newComers.reduce(function (result, newComer) {
+          return mergeRecursively(result, newComer, extensions);
+      }, base);
+  }
+
   // 
 
   var isHMREnabled = typeof module !== 'undefined' && module.hot;
@@ -3475,10 +3580,8 @@
       var generatedClassName = void 0;
       if (componentStyle.isStatic) {
         generatedClassName = this.generateAndInjectStyles(EMPTY_OBJECT, this.props);
-      } else if (theme !== undefined) {
-        generatedClassName = this.generateAndInjectStyles(determineTheme(this.props, theme, defaultProps), this.props);
       } else {
-        generatedClassName = this.generateAndInjectStyles(this.props.theme || EMPTY_OBJECT, this.props);
+        generatedClassName = this.generateAndInjectStyles(determineTheme(this.props, theme, defaultProps) || EMPTY_OBJECT, this.props);
       }
 
       var elementToBeCreated = this.props.as || this.attrs.as || target;
@@ -3496,7 +3599,7 @@
 
         if (key === 'forwardedComponent' || key === 'as') {
           continue;
-        } else if (key === 'forwardedRef') propsForElement.ref = computedProps[key];else if (!isTargetTag || index$1(key)) {
+        } else if (key === 'forwardedRef') propsForElement.ref = computedProps[key];else if (key === 'forwardedAs') propsForElement.as = computedProps[key];else if (!isTargetTag || index$1(key)) {
           // Don't pass through non HTML tags through to HTML elements
           propsForElement[key] = computedProps[key];
         }
@@ -3653,6 +3756,17 @@
       return createStyledComponent(tag, newOptions, rules);
     };
 
+    // $FlowFixMe
+    Object.defineProperty(WrappedStyledComponent, 'defaultProps', {
+      get: function get$$1() {
+        return this._foldedDefaultProps;
+      },
+      set: function set$$1(obj) {
+        // $FlowFixMe
+        this._foldedDefaultProps = isTargetStyledComp ? index$2(target.defaultProps, obj) : obj;
+      }
+    });
+
     {
       // $FlowFixMe
       WrappedStyledComponent.warnTooManyClasses = createWarnTooManyClasses(displayName);

package/dist/styled-components.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled-components.js","sources":["../src/models/StyleTags.js","../src/models/StyleSheet.js","../src/models/GlobalStyle.js","../src/models/ServerStyleSheet.js","../src/models/StyleSheetManager.js","../src/models/ThemeProvider.js","../src/constructors/createGlobalStyle.js","../src/models/StyledComponent.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 { cloneElement } from 'react';\nimport { IS_BROWSER, DISABLE_SPEEDY, SC_ATTR, SC_VERSION_ATTR, SC_STREAM_ATTR } from '../constants';\nimport { makeTag, rehydrate, type Tag } from './StyleTags';\nimport extractComps from '../utils/extractCompsFromCSS';\n\ndeclare var __VERSION__: string;\n\nconst SPLIT_REGEX = /\\s+/;\n\n/* determine the maximum number of components before tags are sharded */\nlet MAX_SIZE;\nif (IS_BROWSER) {\n  /* in speedy mode we can keep a lot more rules in a sheet before a slowdown can be expected */\n  MAX_SIZE = DISABLE_SPEEDY ? 40 : 1000;\n} else {\n  /* for servers we do not need to shard at all */\n  MAX_SIZE = -1;\n}\n\nlet sheetRunningId = 0;\nlet master;\n\nexport default class StyleSheet {\n  id: number;\n\n  forceServer: boolean;\n\n  target: ?HTMLElement;\n\n  /* a map from ids to tags */\n  tagMap: { [string]: Tag<any> };\n\n  /* deferred rules for a given id */\n  deferred: { [string]: string[] | void };\n\n  /* this is used for not reinjecting rules via hasNameForId() */\n  rehydratedNames: { [string]: boolean };\n\n  /* when rules for an id are removed using remove() we have to ignore rehydratedNames for it */\n  ignoreRehydratedNames: { [string]: boolean };\n\n  /* a list of tags belonging to this StyleSheet */\n  tags: Tag<any>[];\n\n  /* a tag for import rules */\n  importRuleTag: Tag<any>;\n\n  /* current capacity until a new tag must be created */\n  capacity: number;\n\n  /* children (aka clones) of this StyleSheet inheriting all and future injections */\n  clones: StyleSheet[];\n\n  constructor(\n    target: ?HTMLElement = IS_BROWSER ? document.head : null,\n    forceServer?: boolean = false\n  ) {\n    sheetRunningId += 1;\n    this.id = sheetRunningId;\n    this.forceServer = forceServer;\n    this.target = forceServer ? null : target;\n    this.tagMap = {};\n    this.deferred = {};\n    this.rehydratedNames = {};\n    this.ignoreRehydratedNames = {};\n    this.tags = [];\n    this.capacity = 1;\n    this.clones = [];\n  }\n\n  /* rehydrate all SSR'd style tags */\n  rehydrate() {\n    if (!IS_BROWSER || this.forceServer) return this;\n\n    const els = [];\n    const names = [];\n    const extracted = [];\n    let isStreamed = false;\n\n    /* retrieve all of our SSR style elements from the DOM */\n    const nodes: NodeList<HTMLStyleElement> = (document.querySelectorAll(\n      `style[${SC_ATTR}][${SC_VERSION_ATTR}=\"${__VERSION__}\"]`\n    ): any);\n\n    const nodesSize = nodes.length;\n\n    /* abort rehydration if no previous style tags were found */\n    if (!nodesSize) return this;\n\n    for (let i = 0; i < nodesSize; i += 1) {\n      const el = (nodes[i]: HTMLStyleElement);\n\n      /* check if style tag is a streamed tag */\n      if (!isStreamed) isStreamed = !!el.getAttribute(SC_STREAM_ATTR);\n\n      /* retrieve all component names */\n      const elNames = (el.getAttribute(SC_ATTR) || '').trim().split(SPLIT_REGEX);\n      const elNamesSize = elNames.length;\n      for (let j = 0, name; j < elNamesSize; j += 1) {\n        name = elNames[j];\n        /* add rehydrated name to sheet to avoid re-adding styles */\n        this.rehydratedNames[name] = true;\n        names.push(name);\n      }\n\n      /* extract all components and their CSS */\n      extracted.push(...extractComps(el.textContent));\n\n      /* store original HTMLStyleElement */\n      els.push(el);\n    }\n\n    /* abort rehydration if nothing was extracted */\n    const extractedSize = extracted.length;\n    if (!extractedSize) return this;\n\n    /* create a tag to be used for rehydration */\n    const tag = this.makeTag(null);\n\n    rehydrate(tag, els, extracted);\n\n    /* reset capacity and adjust MAX_SIZE by the initial size of the rehydration */\n    this.capacity = Math.max(1, MAX_SIZE - extractedSize);\n    this.tags.push(tag);\n\n    /* retrieve all component ids */\n    for (let j = 0; j < extractedSize; j += 1) {\n      this.tagMap[extracted[j].componentId] = tag;\n    }\n\n    return this;\n  }\n\n  /* retrieve a \"master\" instance of StyleSheet which is typically used when no other is available\n   * The master StyleSheet is targeted by createGlobalStyle, keyframes, and components outside of any\n    * StyleSheetManager's context */\n  static get master(): StyleSheet {\n    return master || (master = new StyleSheet().rehydrate());\n  }\n\n  /* NOTE: This is just for backwards-compatibility with jest-styled-components */\n  static get instance(): StyleSheet {\n    return StyleSheet.master;\n  }\n\n  /* reset the internal \"master\" instance */\n  static reset(forceServer?: boolean = false) {\n    master = new StyleSheet(undefined, forceServer).rehydrate();\n  }\n\n  /* adds \"children\" to the StyleSheet that inherit all of the parents' rules\n   * while their own rules do not affect the parent */\n  clone() {\n    const sheet = new StyleSheet(this.target, this.forceServer);\n\n    /* add to clone array */\n    this.clones.push(sheet);\n\n    /* clone all tags */\n    sheet.tags = this.tags.map(tag => {\n      const ids = tag.getIds();\n      const newTag = tag.clone();\n\n      /* reconstruct tagMap */\n      for (let i = 0; i < ids.length; i += 1) {\n        sheet.tagMap[ids[i]] = newTag;\n      }\n\n      return newTag;\n    });\n\n    /* clone other maps */\n    sheet.rehydratedNames = { ...this.rehydratedNames };\n    sheet.deferred = { ...this.deferred };\n\n    return sheet;\n  }\n\n  /* force StyleSheet to create a new tag on the next injection */\n  sealAllTags() {\n    this.capacity = 1;\n\n    this.tags.forEach(tag => {\n      // eslint-disable-next-line no-param-reassign\n      tag.sealed = true;\n    });\n  }\n\n  makeTag(tag: ?Tag<any>): Tag<any> {\n    const lastEl = tag ? tag.styleTag : null;\n    const insertBefore = false;\n\n    return makeTag(this.target, lastEl, this.forceServer, insertBefore, this.getImportRuleTag);\n  }\n\n  getImportRuleTag = (): Tag<any> => {\n    const { importRuleTag } = this;\n    if (importRuleTag !== undefined) {\n      return importRuleTag;\n    }\n\n    const firstTag = this.tags[0];\n    const insertBefore = true;\n\n    return (this.importRuleTag = makeTag(\n      this.target,\n      firstTag ? firstTag.styleTag : null,\n      this.forceServer,\n      insertBefore\n    ));\n  };\n\n  /* get a tag for a given componentId, assign the componentId to one, or shard */\n  getTagForId(id: string): Tag<any> {\n    /* simply return a tag, when the componentId was already assigned one */\n    const prev = this.tagMap[id];\n    if (prev !== undefined && !prev.sealed) {\n      return prev;\n    }\n\n    let tag = this.tags[this.tags.length - 1];\n\n    /* shard (create a new tag) if the tag is exhausted (See MAX_SIZE) */\n    this.capacity -= 1;\n\n    if (this.capacity === 0) {\n      this.capacity = MAX_SIZE;\n      tag = this.makeTag(tag);\n      this.tags.push(tag);\n    }\n\n    return (this.tagMap[id] = tag);\n  }\n\n  /* mainly for createGlobalStyle to check for its id */\n  hasId(id: string) {\n    return this.tagMap[id] !== undefined;\n  }\n\n  /* caching layer checking id+name to already have a corresponding tag and injected rules */\n  hasNameForId(id: string, name: string) {\n    /* exception for rehydrated names which are checked separately */\n    if (this.ignoreRehydratedNames[id] === undefined && this.rehydratedNames[name]) {\n      return true;\n    }\n\n    const tag = this.tagMap[id];\n    return tag !== undefined && tag.hasNameForId(id, name);\n  }\n\n  /* registers a componentId and registers it on its tag */\n  deferredInject(id: string, cssRules: string[]) {\n    /* don't inject when the id is already registered */\n    if (this.tagMap[id] !== undefined) return;\n\n    const { clones } = this;\n    for (let i = 0; i < clones.length; i += 1) {\n      clones[i].deferredInject(id, cssRules);\n    }\n\n    this.getTagForId(id).insertMarker(id);\n    this.deferred[id] = cssRules;\n  }\n\n  /* injects rules for a given id with a name that will need to be cached */\n  inject(id: string, cssRules: string[], name?: string) {\n    const { clones } = this;\n\n    for (let i = 0; i < clones.length; i += 1) {\n      clones[i].inject(id, cssRules, name);\n    }\n\n    const tag = this.getTagForId(id);\n\n    /* add deferred rules for component */\n    if (this.deferred[id] !== undefined) {\n      // Combine passed cssRules with previously deferred CSS rules\n      // NOTE: We cannot mutate the deferred array itself as all clones\n      // do the same (see clones[i].inject)\n      const rules = this.deferred[id].concat(cssRules);\n      tag.insertRules(id, rules, name);\n\n      this.deferred[id] = undefined;\n    } else {\n      tag.insertRules(id, cssRules, name);\n    }\n  }\n\n  /* removes all rules for a given id, which doesn't remove its marker but resets it */\n  remove(id: string) {\n    const tag = this.tagMap[id];\n    if (tag === undefined) return;\n\n    const { clones } = this;\n    for (let i = 0; i < clones.length; i += 1) {\n      clones[i].remove(id);\n    }\n\n    /* remove all rules from the tag */\n    tag.removeRules(id);\n\n    /* ignore possible rehydrated names */\n    this.ignoreRehydratedNames[id] = true;\n\n    /* delete possible deferred rules */\n    this.deferred[id] = undefined;\n  }\n\n  toHTML() {\n    return this.tags.map(tag => tag.toHTML()).join('');\n  }\n\n  toReactElements(): Array<*> {\n    const { id } = this;\n\n    return this.tags.map((tag, i) => {\n      const key = `sc-${id}-${i}`;\n      return cloneElement(tag.toElement(), { key });\n    });\n  }\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","// @flow\n/* eslint-disable no-underscore-dangle */\nimport React from 'react';\nimport stream from 'stream';\n\nimport { IS_BROWSER, SC_STREAM_ATTR } from '../constants';\nimport StyledError from '../utils/error';\nimport StyleSheet from './StyleSheet';\nimport StyleSheetManager from './StyleSheetManager';\n\ndeclare var __SERVER__: boolean;\n\nconst CLOSING_TAG_R = /^\\s*<\\/[a-z]/i;\n\nexport default class ServerStyleSheet {\n  instance: StyleSheet;\n\n  masterSheet: StyleSheet;\n\n  sealed: boolean;\n\n  constructor() {\n    /* The master sheet might be reset, so keep a reference here */\n    this.masterSheet = StyleSheet.master;\n    this.instance = this.masterSheet.clone();\n    this.sealed = false;\n  }\n\n  /**\n   * Mark the ServerStyleSheet as being fully emitted and manually GC it from the\n   * StyleSheet singleton.\n   */\n  seal() {\n    if (!this.sealed) {\n      /* Remove sealed StyleSheets from the master sheet */\n      const index = this.masterSheet.clones.indexOf(this.instance);\n      this.masterSheet.clones.splice(index, 1);\n      this.sealed = true;\n    }\n  }\n\n  collectStyles(children: any) {\n    if (this.sealed) {\n      throw new StyledError(2);\n    }\n\n    return <StyleSheetManager sheet={this.instance}>{children}</StyleSheetManager>;\n  }\n\n  getStyleTags(): string {\n    this.seal();\n    return this.instance.toHTML();\n  }\n\n  getStyleElement() {\n    this.seal();\n    return this.instance.toReactElements();\n  }\n\n  interleaveWithNodeStream(readableStream: stream.Readable) {\n    if (!__SERVER__ || IS_BROWSER) {\n      throw new StyledError(3);\n    }\n\n    /* the tag index keeps track of which tags have already been emitted */\n    const { instance } = this;\n    let instanceTagIndex = 0;\n\n    const streamAttr = `${SC_STREAM_ATTR}=\"true\"`;\n\n    const transformer = new stream.Transform({\n      transform: function appendStyleChunks(chunk, /* encoding */ _, callback) {\n        const { tags } = instance;\n        let html = '';\n\n        /* retrieve html for each new style tag */\n        for (; instanceTagIndex < tags.length; instanceTagIndex += 1) {\n          const tag = tags[instanceTagIndex];\n          html += tag.toHTML(streamAttr);\n        }\n\n        /* force our StyleSheets to emit entirely new tags */\n        instance.sealAllTags();\n\n        const renderedHtml = chunk.toString();\n\n        /* prepend style html to chunk, unless the start of the chunk is a closing tag in which case append right after that */\n        if (CLOSING_TAG_R.test(renderedHtml)) {\n          const endOfClosingTag = renderedHtml.indexOf('>');\n\n          this.push(\n            renderedHtml.slice(0, endOfClosingTag + 1) +\n              html +\n              renderedHtml.slice(endOfClosingTag + 1)\n          );\n        } else this.push(html + renderedHtml);\n\n        callback();\n      },\n    });\n\n    readableStream.on('end', () => this.seal());\n\n    readableStream.on('error', err => {\n      this.seal();\n\n      // forward the error to the transform stream\n      transformer.emit('error', err);\n    });\n\n    return readableStream.pipe(transformer);\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 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 from 'react';\nimport { IS_BROWSER, STATIC_EXECUTION_CONTEXT } from '../constants';\nimport GlobalStyle from '../models/GlobalStyle';\nimport StyleSheet from '../models/StyleSheet';\nimport { StyleSheetConsumer } from '../models/StyleSheetManager';\nimport determineTheme from '../utils/determineTheme';\nimport { ThemeConsumer, type Theme } from '../models/ThemeProvider';\n// $FlowFixMe\nimport hashStr from '../vendor/glamor/hash';\nimport css from './css';\n\nimport type { Interpolation } from '../types';\n\ntype GlobalStyleComponentPropsType = Object;\n\n// place our cache into shared context so it'll persist between HMRs\nif (IS_BROWSER) {\n  window.scCGSHMRCache = {};\n}\n\nexport default function createGlobalStyle(\n  strings: Array<string>,\n  ...interpolations: Array<Interpolation>\n) {\n  const rules = css(strings, ...interpolations);\n  const id = `sc-global-${hashStr(JSON.stringify(rules))}`;\n  const style = new GlobalStyle(rules, id);\n\n  class GlobalStyleComponent extends React.Component<GlobalStyleComponentPropsType, *> {\n    styleSheet: Object;\n\n    static globalStyle = style;\n\n    static styledComponentId = id;\n\n    constructor(props: GlobalStyleComponentPropsType) {\n      super(props);\n\n      const { globalStyle, styledComponentId } = this.constructor;\n\n      if (IS_BROWSER) {\n        window.scCGSHMRCache[styledComponentId] =\n          (window.scCGSHMRCache[styledComponentId] || 0) + 1;\n      }\n\n      /**\n       * This fixes HMR compatibility. Don't ask me why, but this combination of\n       * caching the closure variables via statics and then persisting the statics in\n       * state works across HMR where no other combination did. ¯\\_(ツ)_/¯\n       */\n      this.state = {\n        globalStyle,\n        styledComponentId,\n      };\n    }\n\n    componentWillUnmount() {\n      if (window.scCGSHMRCache[this.state.styledComponentId]) {\n        window.scCGSHMRCache[this.state.styledComponentId] -= 1;\n      }\n      /**\n       * Depending on the order \"render\" is called this can cause the styles to be lost\n       * until the next render pass of the remaining instance, which may\n       * not be immediate.\n       */\n      if (window.scCGSHMRCache[this.state.styledComponentId] === 0) {\n        this.state.globalStyle.removeStyles(this.styleSheet);\n      }\n    }\n\n    render() {\n      if (process.env.NODE_ENV !== 'production' && React.Children.count(this.props.children)) {\n        // eslint-disable-next-line no-console\n        console.warn(\n          `The global style component ${\n            this.state.styledComponentId\n          } was given child JSX. createGlobalStyle does not render children.`\n        );\n      }\n\n      return (\n        <StyleSheetConsumer>\n          {(styleSheet?: StyleSheet) => {\n            this.styleSheet = styleSheet || StyleSheet.master;\n\n            const { globalStyle } = this.state;\n\n            if (globalStyle.isStatic) {\n              globalStyle.renderStyles(STATIC_EXECUTION_CONTEXT, this.styleSheet);\n\n              return null;\n            } else {\n              return (\n                <ThemeConsumer>\n                  {(theme?: Theme) => {\n                    // $FlowFixMe\n                    const { defaultProps } = this.constructor;\n\n                    const context = {\n                      ...this.props,\n                    };\n\n                    if (typeof theme !== 'undefined') {\n                      context.theme = determineTheme(this.props, theme, defaultProps);\n                    }\n\n                    globalStyle.renderStyles(context, this.styleSheet);\n\n                    return null;\n                  }}\n                </ThemeConsumer>\n              );\n            }\n          }}\n        </StyleSheetConsumer>\n      );\n    }\n  }\n\n  return GlobalStyleComponent;\n}\n","// @flow\nimport validAttr from '@emotion/is-prop-valid';\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 if (theme !== undefined) {\n      generatedClassName = this.generateAndInjectStyles(\n        determineTheme(this.props, theme, defaultProps),\n        this.props\n      );\n    } else {\n      generatedClassName = this.generateAndInjectStyles(\n        this.props.theme || 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 (!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  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"],"names":["__VERSION__","i"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2CC;;GAAA;;;;;;;;;;;;;;;;qCAgBgDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mEA2DO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0DAoSnD;;aAEMC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EClYT;;EAEA;;;;;;EAMA;;;;;;EAMA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EC5BA,4BAAA,aAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECKA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECYA,kCAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AClBA;;;;;;;;;;;EAUA,8BAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECP0C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uCC2Jf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"styled-components.js","sources":["../src/models/StyleTags.js","../src/models/StyleSheet.js","../src/models/GlobalStyle.js","../src/models/ServerStyleSheet.js","../src/models/StyleSheetManager.js","../src/models/ThemeProvider.js","../src/constructors/createGlobalStyle.js","../src/models/StyledComponent.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 { cloneElement } from 'react';\nimport { IS_BROWSER, DISABLE_SPEEDY, SC_ATTR, SC_VERSION_ATTR, SC_STREAM_ATTR } from '../constants';\nimport { makeTag, rehydrate, type Tag } from './StyleTags';\nimport extractComps from '../utils/extractCompsFromCSS';\n\ndeclare var __VERSION__: string;\n\nconst SPLIT_REGEX = /\\s+/;\n\n/* determine the maximum number of components before tags are sharded */\nlet MAX_SIZE;\nif (IS_BROWSER) {\n  /* in speedy mode we can keep a lot more rules in a sheet before a slowdown can be expected */\n  MAX_SIZE = DISABLE_SPEEDY ? 40 : 1000;\n} else {\n  /* for servers we do not need to shard at all */\n  MAX_SIZE = -1;\n}\n\nlet sheetRunningId = 0;\nlet master;\n\nexport default class StyleSheet {\n  id: number;\n\n  forceServer: boolean;\n\n  target: ?HTMLElement;\n\n  /* a map from ids to tags */\n  tagMap: { [string]: Tag<any> };\n\n  /* deferred rules for a given id */\n  deferred: { [string]: string[] | void };\n\n  /* this is used for not reinjecting rules via hasNameForId() */\n  rehydratedNames: { [string]: boolean };\n\n  /* when rules for an id are removed using remove() we have to ignore rehydratedNames for it */\n  ignoreRehydratedNames: { [string]: boolean };\n\n  /* a list of tags belonging to this StyleSheet */\n  tags: Tag<any>[];\n\n  /* a tag for import rules */\n  importRuleTag: Tag<any>;\n\n  /* current capacity until a new tag must be created */\n  capacity: number;\n\n  /* children (aka clones) of this StyleSheet inheriting all and future injections */\n  clones: StyleSheet[];\n\n  constructor(\n    target: ?HTMLElement = IS_BROWSER ? document.head : null,\n    forceServer?: boolean = false\n  ) {\n    sheetRunningId += 1;\n    this.id = sheetRunningId;\n    this.forceServer = forceServer;\n    this.target = forceServer ? null : target;\n    this.tagMap = {};\n    this.deferred = {};\n    this.rehydratedNames = {};\n    this.ignoreRehydratedNames = {};\n    this.tags = [];\n    this.capacity = 1;\n    this.clones = [];\n  }\n\n  /* rehydrate all SSR'd style tags */\n  rehydrate() {\n    if (!IS_BROWSER || this.forceServer) return this;\n\n    const els = [];\n    const names = [];\n    const extracted = [];\n    let isStreamed = false;\n\n    /* retrieve all of our SSR style elements from the DOM */\n    const nodes: NodeList<HTMLStyleElement> = (document.querySelectorAll(\n      `style[${SC_ATTR}][${SC_VERSION_ATTR}=\"${__VERSION__}\"]`\n    ): any);\n\n    const nodesSize = nodes.length;\n\n    /* abort rehydration if no previous style tags were found */\n    if (!nodesSize) return this;\n\n    for (let i = 0; i < nodesSize; i += 1) {\n      const el = (nodes[i]: HTMLStyleElement);\n\n      /* check if style tag is a streamed tag */\n      if (!isStreamed) isStreamed = !!el.getAttribute(SC_STREAM_ATTR);\n\n      /* retrieve all component names */\n      const elNames = (el.getAttribute(SC_ATTR) || '').trim().split(SPLIT_REGEX);\n      const elNamesSize = elNames.length;\n      for (let j = 0, name; j < elNamesSize; j += 1) {\n        name = elNames[j];\n        /* add rehydrated name to sheet to avoid re-adding styles */\n        this.rehydratedNames[name] = true;\n        names.push(name);\n      }\n\n      /* extract all components and their CSS */\n      extracted.push(...extractComps(el.textContent));\n\n      /* store original HTMLStyleElement */\n      els.push(el);\n    }\n\n    /* abort rehydration if nothing was extracted */\n    const extractedSize = extracted.length;\n    if (!extractedSize) return this;\n\n    /* create a tag to be used for rehydration */\n    const tag = this.makeTag(null);\n\n    rehydrate(tag, els, extracted);\n\n    /* reset capacity and adjust MAX_SIZE by the initial size of the rehydration */\n    this.capacity = Math.max(1, MAX_SIZE - extractedSize);\n    this.tags.push(tag);\n\n    /* retrieve all component ids */\n    for (let j = 0; j < extractedSize; j += 1) {\n      this.tagMap[extracted[j].componentId] = tag;\n    }\n\n    return this;\n  }\n\n  /* retrieve a \"master\" instance of StyleSheet which is typically used when no other is available\n   * The master StyleSheet is targeted by createGlobalStyle, keyframes, and components outside of any\n    * StyleSheetManager's context */\n  static get master(): StyleSheet {\n    return master || (master = new StyleSheet().rehydrate());\n  }\n\n  /* NOTE: This is just for backwards-compatibility with jest-styled-components */\n  static get instance(): StyleSheet {\n    return StyleSheet.master;\n  }\n\n  /* reset the internal \"master\" instance */\n  static reset(forceServer?: boolean = false) {\n    master = new StyleSheet(undefined, forceServer).rehydrate();\n  }\n\n  /* adds \"children\" to the StyleSheet that inherit all of the parents' rules\n   * while their own rules do not affect the parent */\n  clone() {\n    const sheet = new StyleSheet(this.target, this.forceServer);\n\n    /* add to clone array */\n    this.clones.push(sheet);\n\n    /* clone all tags */\n    sheet.tags = this.tags.map(tag => {\n      const ids = tag.getIds();\n      const newTag = tag.clone();\n\n      /* reconstruct tagMap */\n      for (let i = 0; i < ids.length; i += 1) {\n        sheet.tagMap[ids[i]] = newTag;\n      }\n\n      return newTag;\n    });\n\n    /* clone other maps */\n    sheet.rehydratedNames = { ...this.rehydratedNames };\n    sheet.deferred = { ...this.deferred };\n\n    return sheet;\n  }\n\n  /* force StyleSheet to create a new tag on the next injection */\n  sealAllTags() {\n    this.capacity = 1;\n\n    this.tags.forEach(tag => {\n      // eslint-disable-next-line no-param-reassign\n      tag.sealed = true;\n    });\n  }\n\n  makeTag(tag: ?Tag<any>): Tag<any> {\n    const lastEl = tag ? tag.styleTag : null;\n    const insertBefore = false;\n\n    return makeTag(this.target, lastEl, this.forceServer, insertBefore, this.getImportRuleTag);\n  }\n\n  getImportRuleTag = (): Tag<any> => {\n    const { importRuleTag } = this;\n    if (importRuleTag !== undefined) {\n      return importRuleTag;\n    }\n\n    const firstTag = this.tags[0];\n    const insertBefore = true;\n\n    return (this.importRuleTag = makeTag(\n      this.target,\n      firstTag ? firstTag.styleTag : null,\n      this.forceServer,\n      insertBefore\n    ));\n  };\n\n  /* get a tag for a given componentId, assign the componentId to one, or shard */\n  getTagForId(id: string): Tag<any> {\n    /* simply return a tag, when the componentId was already assigned one */\n    const prev = this.tagMap[id];\n    if (prev !== undefined && !prev.sealed) {\n      return prev;\n    }\n\n    let tag = this.tags[this.tags.length - 1];\n\n    /* shard (create a new tag) if the tag is exhausted (See MAX_SIZE) */\n    this.capacity -= 1;\n\n    if (this.capacity === 0) {\n      this.capacity = MAX_SIZE;\n      tag = this.makeTag(tag);\n      this.tags.push(tag);\n    }\n\n    return (this.tagMap[id] = tag);\n  }\n\n  /* mainly for createGlobalStyle to check for its id */\n  hasId(id: string) {\n    return this.tagMap[id] !== undefined;\n  }\n\n  /* caching layer checking id+name to already have a corresponding tag and injected rules */\n  hasNameForId(id: string, name: string) {\n    /* exception for rehydrated names which are checked separately */\n    if (this.ignoreRehydratedNames[id] === undefined && this.rehydratedNames[name]) {\n      return true;\n    }\n\n    const tag = this.tagMap[id];\n    return tag !== undefined && tag.hasNameForId(id, name);\n  }\n\n  /* registers a componentId and registers it on its tag */\n  deferredInject(id: string, cssRules: string[]) {\n    /* don't inject when the id is already registered */\n    if (this.tagMap[id] !== undefined) return;\n\n    const { clones } = this;\n    for (let i = 0; i < clones.length; i += 1) {\n      clones[i].deferredInject(id, cssRules);\n    }\n\n    this.getTagForId(id).insertMarker(id);\n    this.deferred[id] = cssRules;\n  }\n\n  /* injects rules for a given id with a name that will need to be cached */\n  inject(id: string, cssRules: string[], name?: string) {\n    const { clones } = this;\n\n    for (let i = 0; i < clones.length; i += 1) {\n      clones[i].inject(id, cssRules, name);\n    }\n\n    const tag = this.getTagForId(id);\n\n    /* add deferred rules for component */\n    if (this.deferred[id] !== undefined) {\n      // Combine passed cssRules with previously deferred CSS rules\n      // NOTE: We cannot mutate the deferred array itself as all clones\n      // do the same (see clones[i].inject)\n      const rules = this.deferred[id].concat(cssRules);\n      tag.insertRules(id, rules, name);\n\n      this.deferred[id] = undefined;\n    } else {\n      tag.insertRules(id, cssRules, name);\n    }\n  }\n\n  /* removes all rules for a given id, which doesn't remove its marker but resets it */\n  remove(id: string) {\n    const tag = this.tagMap[id];\n    if (tag === undefined) return;\n\n    const { clones } = this;\n    for (let i = 0; i < clones.length; i += 1) {\n      clones[i].remove(id);\n    }\n\n    /* remove all rules from the tag */\n    tag.removeRules(id);\n\n    /* ignore possible rehydrated names */\n    this.ignoreRehydratedNames[id] = true;\n\n    /* delete possible deferred rules */\n    this.deferred[id] = undefined;\n  }\n\n  toHTML() {\n    return this.tags.map(tag => tag.toHTML()).join('');\n  }\n\n  toReactElements(): Array<*> {\n    const { id } = this;\n\n    return this.tags.map((tag, i) => {\n      const key = `sc-${id}-${i}`;\n      return cloneElement(tag.toElement(), { key });\n    });\n  }\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","// @flow\n/* eslint-disable no-underscore-dangle */\nimport React from 'react';\nimport stream, { type Readable } from 'stream';\n\nimport { IS_BROWSER, SC_STREAM_ATTR } from '../constants';\nimport StyledError from '../utils/error';\nimport StyleSheet from './StyleSheet';\nimport StyleSheetManager from './StyleSheetManager';\n\ndeclare var __SERVER__: boolean;\n\nconst CLOSING_TAG_R = /^\\s*<\\/[a-z]/i;\n\nexport default class ServerStyleSheet {\n  instance: StyleSheet;\n\n  masterSheet: StyleSheet;\n\n  sealed: boolean;\n\n  constructor() {\n    /* The master sheet might be reset, so keep a reference here */\n    this.masterSheet = StyleSheet.master;\n    this.instance = this.masterSheet.clone();\n    this.sealed = false;\n  }\n\n  /**\n   * Mark the ServerStyleSheet as being fully emitted and manually GC it from the\n   * StyleSheet singleton.\n   */\n  seal() {\n    if (!this.sealed) {\n      /* Remove sealed StyleSheets from the master sheet */\n      const index = this.masterSheet.clones.indexOf(this.instance);\n      this.masterSheet.clones.splice(index, 1);\n      this.sealed = true;\n    }\n  }\n\n  collectStyles(children: any) {\n    if (this.sealed) {\n      throw new StyledError(2);\n    }\n\n    return <StyleSheetManager sheet={this.instance}>{children}</StyleSheetManager>;\n  }\n\n  getStyleTags(): string {\n    this.seal();\n    return this.instance.toHTML();\n  }\n\n  getStyleElement() {\n    this.seal();\n    return this.instance.toReactElements();\n  }\n\n  interleaveWithNodeStream(readableStream: Readable) {\n    if (!__SERVER__ || IS_BROWSER) {\n      throw new StyledError(3);\n    }\n\n    /* the tag index keeps track of which tags have already been emitted */\n    const { instance } = this;\n    let instanceTagIndex = 0;\n\n    const streamAttr = `${SC_STREAM_ATTR}=\"true\"`;\n\n    const transformer = new stream.Transform({\n      transform: function appendStyleChunks(chunk, /* encoding */ _, callback) {\n        const { tags } = instance;\n        let html = '';\n\n        /* retrieve html for each new style tag */\n        for (; instanceTagIndex < tags.length; instanceTagIndex += 1) {\n          const tag = tags[instanceTagIndex];\n          html += tag.toHTML(streamAttr);\n        }\n\n        /* force our StyleSheets to emit entirely new tags */\n        instance.sealAllTags();\n\n        const renderedHtml = chunk.toString();\n\n        /* prepend style html to chunk, unless the start of the chunk is a closing tag in which case append right after that */\n        if (CLOSING_TAG_R.test(renderedHtml)) {\n          const endOfClosingTag = renderedHtml.indexOf('>');\n\n          this.push(\n            renderedHtml.slice(0, endOfClosingTag + 1) +\n              html +\n              renderedHtml.slice(endOfClosingTag + 1)\n          );\n        } else this.push(html + renderedHtml);\n\n        callback();\n      },\n    });\n\n    readableStream.on('end', () => this.seal());\n\n    readableStream.on('error', err => {\n      this.seal();\n\n      // forward the error to the transform stream\n      transformer.emit('error', err);\n    });\n\n    return readableStream.pipe(transformer);\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 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 from 'react';\nimport { IS_BROWSER, STATIC_EXECUTION_CONTEXT } from '../constants';\nimport GlobalStyle from '../models/GlobalStyle';\nimport StyleSheet from '../models/StyleSheet';\nimport { StyleSheetConsumer } from '../models/StyleSheetManager';\nimport determineTheme from '../utils/determineTheme';\nimport { ThemeConsumer, type Theme } from '../models/ThemeProvider';\n// $FlowFixMe\nimport hashStr from '../vendor/glamor/hash';\nimport css from './css';\n\nimport type { Interpolation } from '../types';\n\ntype GlobalStyleComponentPropsType = Object;\n\n// place our cache into shared context so it'll persist between HMRs\nif (IS_BROWSER) {\n  window.scCGSHMRCache = {};\n}\n\nexport default function createGlobalStyle(\n  strings: Array<string>,\n  ...interpolations: Array<Interpolation>\n) {\n  const rules = css(strings, ...interpolations);\n  const id = `sc-global-${hashStr(JSON.stringify(rules))}`;\n  const style = new GlobalStyle(rules, id);\n\n  class GlobalStyleComponent extends React.Component<GlobalStyleComponentPropsType, *> {\n    styleSheet: Object;\n\n    static globalStyle = style;\n\n    static styledComponentId = id;\n\n    constructor(props: GlobalStyleComponentPropsType) {\n      super(props);\n\n      const { globalStyle, styledComponentId } = this.constructor;\n\n      if (IS_BROWSER) {\n        window.scCGSHMRCache[styledComponentId] =\n          (window.scCGSHMRCache[styledComponentId] || 0) + 1;\n      }\n\n      /**\n       * This fixes HMR compatibility. Don't ask me why, but this combination of\n       * caching the closure variables via statics and then persisting the statics in\n       * state works across HMR where no other combination did. ¯\\_(ツ)_/¯\n       */\n      this.state = {\n        globalStyle,\n        styledComponentId,\n      };\n    }\n\n    componentWillUnmount() {\n      if (window.scCGSHMRCache[this.state.styledComponentId]) {\n        window.scCGSHMRCache[this.state.styledComponentId] -= 1;\n      }\n      /**\n       * Depending on the order \"render\" is called this can cause the styles to be lost\n       * until the next render pass of the remaining instance, which may\n       * not be immediate.\n       */\n      if (window.scCGSHMRCache[this.state.styledComponentId] === 0) {\n        this.state.globalStyle.removeStyles(this.styleSheet);\n      }\n    }\n\n    render() {\n      if (process.env.NODE_ENV !== 'production' && React.Children.count(this.props.children)) {\n        // eslint-disable-next-line no-console\n        console.warn(\n          `The global style component ${\n            this.state.styledComponentId\n          } was given child JSX. createGlobalStyle does not render children.`\n        );\n      }\n\n      return (\n        <StyleSheetConsumer>\n          {(styleSheet?: StyleSheet) => {\n            this.styleSheet = styleSheet || StyleSheet.master;\n\n            const { globalStyle } = this.state;\n\n            if (globalStyle.isStatic) {\n              globalStyle.renderStyles(STATIC_EXECUTION_CONTEXT, this.styleSheet);\n\n              return null;\n            } else {\n              return (\n                <ThemeConsumer>\n                  {(theme?: Theme) => {\n                    // $FlowFixMe\n                    const { defaultProps } = this.constructor;\n\n                    const context = {\n                      ...this.props,\n                    };\n\n                    if (typeof theme !== 'undefined') {\n                      context.theme = determineTheme(this.props, theme, defaultProps);\n                    }\n\n                    globalStyle.renderStyles(context, this.styleSheet);\n\n                    return null;\n                  }}\n                </ThemeConsumer>\n              );\n            }\n          }}\n        </StyleSheetConsumer>\n      );\n    }\n  }\n\n  return GlobalStyleComponent;\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"],"names":["__VERSION__","i"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2CC;;GAAA;;;;;;;;;;;;;;;;qCAgBgDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mEA2DO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0DAoSnD;;aAEMC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EClYT;;EAEA;;;;;;EAMA;;;;;;EAMA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EC5BA,4BAAA,aAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECKA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECYA,kCAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AClBA;;;;;;;;;;;EAUA,8BAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECP0C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uCCwJf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}