{"id":"../node_modules/styled-components/dist/styled-components.browser.esm.js","dependencies":[{"name":"/Users/kylepeacock/code/react-controlled-dialog/node_modules/styled-components/dist/styled-components.browser.esm.js.map","includedInParent":true,"mtime":1542064388000},{"name":"/Users/kylepeacock/code/react-controlled-dialog/package.json","includedInParent":true,"mtime":1543272905037},{"name":"/Users/kylepeacock/code/react-controlled-dialog/.babelrc","includedInParent":true,"mtime":1543269169411},{"name":"/Users/kylepeacock/code/react-controlled-dialog/node_modules/styled-components/package.json","includedInParent":true,"mtime":1543272801839},{"name":"stylis/stylis.min","loc":{"line":1,"column":19},"parent":"/Users/kylepeacock/code/react-controlled-dialog/node_modules/styled-components/dist/styled-components.browser.esm.js","resolved":"/Users/kylepeacock/code/react-controlled-dialog/node_modules/stylis/stylis.min.js"},{"name":"stylis-rule-sheet","loc":{"line":2,"column":30},"parent":"/Users/kylepeacock/code/react-controlled-dialog/node_modules/styled-components/dist/styled-components.browser.esm.js","resolved":"/Users/kylepeacock/code/react-controlled-dialog/node_modules/stylis-rule-sheet/index.js"},{"name":"react","loc":{"line":3,"column":77},"parent":"/Users/kylepeacock/code/react-controlled-dialog/node_modules/styled-components/dist/styled-components.browser.esm.js","resolved":"/Users/kylepeacock/code/react-controlled-dialog/node_modules/react/index.js"},{"name":"@emotion/unitless","loc":{"line":4,"column":21},"parent":"/Users/kylepeacock/code/react-controlled-dialog/node_modules/styled-components/dist/styled-components.browser.esm.js","resolved":"/Users/kylepeacock/code/react-controlled-dialog/node_modules/@emotion/unitless/dist/unitless.browser.esm.js"},{"name":"react-is","loc":{"line":5,"column":58},"parent":"/Users/kylepeacock/code/react-controlled-dialog/node_modules/styled-components/dist/styled-components.browser.esm.js","resolved":"/Users/kylepeacock/code/react-controlled-dialog/node_modules/react-is/index.js"},{"name":"memoize-one","loc":{"line":6,"column":20},"parent":"/Users/kylepeacock/code/react-controlled-dialog/node_modules/styled-components/dist/styled-components.browser.esm.js","resolved":"/Users/kylepeacock/code/react-controlled-dialog/node_modules/memoize-one/dist/memoize-one.esm.js"},{"name":"prop-types","loc":{"line":7,"column":22},"parent":"/Users/kylepeacock/code/react-controlled-dialog/node_modules/styled-components/dist/styled-components.browser.esm.js","resolved":"/Users/kylepeacock/code/react-controlled-dialog/node_modules/prop-types/index.js"},{"name":"react-dom","loc":{"line":8,"column":21},"parent":"/Users/kylepeacock/code/react-controlled-dialog/node_modules/styled-components/dist/styled-components.browser.esm.js","resolved":"/Users/kylepeacock/code/react-controlled-dialog/node_modules/react-dom/index.js"},{"name":"@emotion/is-prop-valid","loc":{"line":9,"column":22},"parent":"/Users/kylepeacock/code/react-controlled-dialog/node_modules/styled-components/dist/styled-components.browser.esm.js","resolved":"/Users/kylepeacock/code/react-controlled-dialog/node_modules/@emotion/is-prop-valid/dist/is-prop-valid.esm.js"},{"name":"process","parent":"/Users/kylepeacock/code/react-controlled-dialog/node_modules/styled-components/dist/styled-components.browser.esm.js","resolved":"/Users/kylepeacock/code/react-controlled-dialog/node_modules/process/browser.js"}],"generated":{"js":"var process = require(\"process\");\n\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.css = css;\nexports.keyframes = keyframes;\nexports.createGlobalStyle = createGlobalStyle;\nexports.isStyledComponent = isStyledComponent;\nexports.__DO_NOT_USE_OR_YOU_WILL_BE_HAUNTED_BY_SPOOKY_GHOSTS = exports.StyleSheetManager = exports.ServerStyleSheet = exports.withTheme = exports.ThemeProvider = exports.ThemeContext = exports.ThemeConsumer = exports.default = void 0;\n\nvar _stylis = _interopRequireDefault(require(\"stylis/stylis.min\"));\n\nvar _stylisRuleSheet = _interopRequireDefault(require(\"stylis-rule-sheet\"));\n\nvar _react = _interopRequireWildcard(require(\"react\"));\n\nvar _unitless = _interopRequireDefault(require(\"@emotion/unitless\"));\n\nvar _reactIs = require(\"react-is\");\n\nvar _memoizeOne = _interopRequireDefault(require(\"memoize-one\"));\n\nvar _propTypes = _interopRequireDefault(require(\"prop-types\"));\n\nvar _reactDom = _interopRequireDefault(require(\"react-dom\"));\n\nvar _isPropValid = _interopRequireDefault(require(\"@emotion/is-prop-valid\"));\n\nfunction _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n// \nvar interleave = function (strings, interpolations) {\n  var result = [strings[0]];\n\n  for (var i = 0, len = interpolations.length; i < len; i += 1) {\n    result.push(interpolations[i], strings[i + 1]);\n  }\n\n  return result;\n};\n\nvar _typeof = typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\" ? function (obj) {\n  return typeof obj;\n} : function (obj) {\n  return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj;\n};\n\nvar classCallCheck = function (instance, Constructor) {\n  if (!(instance instanceof Constructor)) {\n    throw new TypeError(\"Cannot call a class as a function\");\n  }\n};\n\nvar createClass = function () {\n  function defineProperties(target, props) {\n    for (var i = 0; i < props.length; i++) {\n      var descriptor = props[i];\n      descriptor.enumerable = descriptor.enumerable || false;\n      descriptor.configurable = true;\n      if (\"value\" in descriptor) descriptor.writable = true;\n      Object.defineProperty(target, descriptor.key, descriptor);\n    }\n  }\n\n  return function (Constructor, protoProps, staticProps) {\n    if (protoProps) defineProperties(Constructor.prototype, protoProps);\n    if (staticProps) defineProperties(Constructor, staticProps);\n    return Constructor;\n  };\n}();\n\nvar _extends = Object.assign || function (target) {\n  for (var i = 1; i < arguments.length; i++) {\n    var source = arguments[i];\n\n    for (var key in source) {\n      if (Object.prototype.hasOwnProperty.call(source, key)) {\n        target[key] = source[key];\n      }\n    }\n  }\n\n  return target;\n};\n\nvar inherits = function (subClass, superClass) {\n  if (typeof superClass !== \"function\" && superClass !== null) {\n    throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass);\n  }\n\n  subClass.prototype = Object.create(superClass && superClass.prototype, {\n    constructor: {\n      value: subClass,\n      enumerable: false,\n      writable: true,\n      configurable: true\n    }\n  });\n  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;\n};\n\nvar objectWithoutProperties = function (obj, keys) {\n  var target = {};\n\n  for (var i in obj) {\n    if (keys.indexOf(i) >= 0) continue;\n    if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;\n    target[i] = obj[i];\n  }\n\n  return target;\n};\n\nvar possibleConstructorReturn = function (self, call) {\n  if (!self) {\n    throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n  }\n\n  return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self;\n}; // \n\n\nvar isPlainObject = function (x) {\n  return (typeof x === 'undefined' ? 'undefined' : _typeof(x)) === 'object' && x.constructor === Object;\n}; // \n\n\nvar EMPTY_ARRAY = Object.freeze([]);\nvar EMPTY_OBJECT = Object.freeze({}); // \n\nfunction isFunction(test) {\n  return typeof test === 'function';\n} // \n\n\nfunction getComponentName(target) {\n  return target.displayName || target.name || 'Component';\n} // \n\n\nfunction isStyledComponent(target) {\n  return target && typeof target.styledComponentId === 'string';\n} // \n\n\nvar SC_ATTR = typeof process !== 'undefined' && undefined || 'data-styled';\nvar SC_VERSION_ATTR = 'data-styled-version';\nvar SC_STREAM_ATTR = 'data-styled-streamed';\nvar IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;\nvar DISABLE_SPEEDY = typeof SC_DISABLE_SPEEDY === 'boolean' && SC_DISABLE_SPEEDY || \"development\" !== 'production'; // Shared empty execution context when generating static styles\n\nvar STATIC_EXECUTION_CONTEXT = {}; // \n\n/**\n * Parse errors.md and turn it into a simple hash of code: message\n */\n\nvar ERRORS = \"development\" !== 'production' ? {\n  \"1\": \"Cannot create styled-component for component: %s.\\n\\n\",\n  \"2\": \"Can't collect styles once you've consumed a `ServerStyleSheet`'s styles! `ServerStyleSheet` is a one off instance for each server-side render cycle.\\n\\n- Are you trying to reuse it across renders?\\n- Are you accidentally calling collectStyles twice?\\n\\n\",\n  \"3\": \"Streaming SSR is only supported in a Node.js environment; Please do not try to call this method in the browser.\\n\\n\",\n  \"4\": \"The `StyleSheetManager` expects a valid target or sheet prop!\\n\\n- Does this error occur on the client and is your target falsy?\\n- Does this error occur on the server and is the sheet falsy?\\n\\n\",\n  \"5\": \"The clone method cannot be used on the client!\\n\\n- Are you running in a client-like environment on the server?\\n- Are you trying to run SSR on the client?\\n\\n\",\n  \"6\": \"Trying to insert a new style tag, but the given Node is unmounted!\\n\\n- Are you using a custom target that isn't mounted?\\n- Does your document not have a valid head element?\\n- Have you accidentally removed a style tag manually?\\n\\n\",\n  \"7\": \"ThemeProvider: Please return an object from your \\\"theme\\\" prop function, e.g.\\n\\n```js\\ntheme={() => ({})}\\n```\\n\\n\",\n  \"8\": \"ThemeProvider: Please make your \\\"theme\\\" prop an object.\\n\\n\",\n  \"9\": \"Missing document `<head>`\\n\\n\",\n  \"10\": \"Cannot find a StyleSheet instance. Usually this happens if there are multiple copies of styled-components loaded at once. Check out this issue for how to troubleshoot and fix the common cases where this situation can happen: https://github.com/styled-components/styled-components/issues/1941#issuecomment-417862021\\n\\n\",\n  \"11\": \"_This error was replaced with a dev-time warning, it will be deleted for v4 final._ [createGlobalStyle] received children which will not be rendered. Please use the component without passing children elements.\\n\\n\",\n  \"12\": \"It seems you are interpolating a keyframe declaration (%s) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\\\\`\\\\` helper (see https://www.styled-components.com/docs/api#css), which ensures the styles are injected correctly.\\n\\n\",\n  \"13\": \"%s is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.\\n\"\n} : {};\n/**\n * super basic version of sprintf\n */\n\nfunction format() {\n  var a = arguments.length <= 0 ? undefined : arguments[0];\n  var b = [];\n\n  for (var c = 1, len = arguments.length; c < len; c += 1) {\n    b.push(arguments.length <= c ? undefined : arguments[c]);\n  }\n\n  b.forEach(function (d) {\n    a = a.replace(/%[a-z]/, d);\n  });\n  return a;\n}\n/**\n * Create an error file out of errors.md for development and a simple web link to the full errors\n * in production mode.\n */\n\n\nvar StyledComponentsError = function (_Error) {\n  inherits(StyledComponentsError, _Error);\n\n  function StyledComponentsError(code) {\n    classCallCheck(this, StyledComponentsError);\n\n    for (var _len = arguments.length, interpolations = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n      interpolations[_key - 1] = arguments[_key];\n    }\n\n    if (\"development\" === 'production') {\n      var _this = possibleConstructorReturn(this, _Error.call(this, 'An error occurred. See https://github.com/styled-components/styled-components/blob/master/src/utils/errors.md#' + code + ' for more information. ' + (interpolations ? 'Additional arguments: ' + interpolations.join(', ') : '')));\n    } else {\n      var _this = possibleConstructorReturn(this, _Error.call(this, format.apply(undefined, [ERRORS[code]].concat(interpolations)).trim()));\n    }\n\n    return possibleConstructorReturn(_this);\n  }\n\n  return StyledComponentsError;\n}(Error); // \n\n\nvar SC_COMPONENT_ID = /^[^\\S\\n]*?\\/\\* sc-component-id:\\s*(\\S+)\\s+\\*\\//gm;\n\nvar extractComps = function (maybeCSS) {\n  var css = '' + (maybeCSS || ''); // Definitely a string, and a clone\n\n  var existingComponents = [];\n  css.replace(SC_COMPONENT_ID, function (match, componentId, matchIndex) {\n    existingComponents.push({\n      componentId: componentId,\n      matchIndex: matchIndex\n    });\n    return match;\n  });\n  return existingComponents.map(function (_ref, i) {\n    var componentId = _ref.componentId,\n        matchIndex = _ref.matchIndex;\n    var nextComp = existingComponents[i + 1];\n    var cssFromDOM = nextComp ? css.slice(matchIndex, nextComp.matchIndex) : css.slice(matchIndex);\n    return {\n      componentId: componentId,\n      cssFromDOM: cssFromDOM\n    };\n  });\n}; // \n\n\nvar COMMENT_REGEX = /^\\s*\\/\\/.*$/gm; // NOTE: This stylis instance is only used to split rules from SSR'd style tags\n\nvar stylisSplitter = new _stylis.default({\n  global: false,\n  cascade: true,\n  keyframe: false,\n  prefix: false,\n  compress: false,\n  semicolon: true\n});\nvar stylis = new _stylis.default({\n  global: false,\n  cascade: true,\n  keyframe: false,\n  prefix: true,\n  compress: false,\n  semicolon: false // NOTE: This means \"autocomplete missing semicolons\"\n\n}); // Wrap `insertRulePlugin to build a list of rules,\n// and then make our own plugin to return the rules. This\n// makes it easier to hook into the existing SSR architecture\n\nvar parsingRules = []; // eslint-disable-next-line consistent-return\n\nvar returnRulesPlugin = function returnRulesPlugin(context) {\n  if (context === -2) {\n    var parsedRules = parsingRules;\n    parsingRules = [];\n    return parsedRules;\n  }\n};\n\nvar parseRulesPlugin = (0, _stylisRuleSheet.default)(function (rule) {\n  parsingRules.push(rule);\n});\n\nvar _componentId = void 0;\n\nvar _selector = void 0;\n\nvar _selectorRegexp = void 0;\n\nvar selfReferenceReplacer = function selfReferenceReplacer(match, offset, string) {\n  if ( // the first self-ref is always untouched\n  offset > 0 && // there should be at least two self-refs to do a replacement (.b > .b)\n  string.slice(0, offset).indexOf(_selector) !== -1 && // no consecutive self refs (.b.b); that is a precedence boost and treated differently\n  string.slice(offset - _selector.length, offset) !== _selector) {\n    return '.' + _componentId;\n  }\n\n  return match;\n};\n/**\n * When writing a style like\n *\n * & + & {\n *   color: red;\n * }\n *\n * The second ampersand should be a reference to the static component class. stylis\n * has no knowledge of static class so we have to intelligently replace the base selector.\n */\n\n\nvar selfReferenceReplacementPlugin = function selfReferenceReplacementPlugin(context, _, selectors) {\n  if (context === 2 && selectors.length && selectors[0].lastIndexOf(_selector) > 0) {\n    // eslint-disable-next-line no-param-reassign\n    selectors[0] = selectors[0].replace(_selectorRegexp, selfReferenceReplacer);\n  }\n};\n\nstylis.use([selfReferenceReplacementPlugin, parseRulesPlugin, returnRulesPlugin]);\nstylisSplitter.use([parseRulesPlugin, returnRulesPlugin]);\n\nvar splitByRules = function splitByRules(css) {\n  return stylisSplitter('', css);\n};\n\nfunction stringifyRules(rules, selector, prefix) {\n  var componentId = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '&';\n  var flatCSS = rules.join('').replace(COMMENT_REGEX, ''); // replace JS comments\n\n  var cssStr = selector && prefix ? prefix + ' ' + selector + ' { ' + flatCSS + ' }' : flatCSS; // stylis has no concept of state to be passed to plugins\n  // but since JS is single=threaded, we can rely on that to ensure\n  // these properties stay in sync with the current stylis run\n\n  _componentId = componentId;\n  _selector = selector;\n  _selectorRegexp = new RegExp('\\\\' + _selector + '\\\\b', 'g');\n  return stylis(prefix || !selector ? '' : selector, cssStr);\n} // \n\n/* eslint-disable camelcase, no-undef */\n\n\nvar getNonce = function () {\n  return typeof __webpack_nonce__ !== 'undefined' ? __webpack_nonce__ : null;\n}; // \n\n/* These are helpers for the StyleTags to keep track of the injected\n * rule names for each (component) ID that they're keeping track of.\n * They're crucial for detecting whether a name has already been\n * injected.\n * (This excludes rehydrated names) */\n\n/* adds a new ID:name pairing to a names dictionary */\n\n\nvar addNameForId = function addNameForId(names, id, name) {\n  if (name) {\n    // eslint-disable-next-line no-param-reassign\n    var namesForId = names[id] || (names[id] = Object.create(null));\n    namesForId[name] = true;\n  }\n};\n/* resets an ID entirely by overwriting it in the dictionary */\n\n\nvar resetIdNames = function resetIdNames(names, id) {\n  // eslint-disable-next-line no-param-reassign\n  names[id] = Object.create(null);\n};\n/* factory for a names dictionary checking the existance of an ID:name pairing */\n\n\nvar hasNameForId = function hasNameForId(names) {\n  return function (id, name) {\n    return names[id] !== undefined && names[id][name];\n  };\n};\n/* stringifies names for the html/element output */\n\n\nvar stringifyNames = function stringifyNames(names) {\n  var str = ''; // eslint-disable-next-line guard-for-in\n\n  for (var id in names) {\n    str += Object.keys(names[id]).join(' ') + ' ';\n  }\n\n  return str.trim();\n};\n/* clones the nested names dictionary */\n\n\nvar cloneNames = function cloneNames(names) {\n  var clone = Object.create(null); // eslint-disable-next-line guard-for-in\n\n  for (var id in names) {\n    clone[id] = _extends({}, names[id]);\n  }\n\n  return clone;\n}; // \n\n/* These are helpers that deal with the insertRule (aka speedy) API\n * They are used in the StyleTags and specifically the speedy tag\n */\n\n/* retrieve a sheet for a given style tag */\n\n\nvar sheetForTag = function sheetForTag(tag) {\n  // $FlowFixMe\n  if (tag.sheet) return tag.sheet;\n  /* Firefox quirk requires us to step through all stylesheets to find one owned by the given tag */\n\n  var size = document.styleSheets.length;\n\n  for (var i = 0; i < size; i += 1) {\n    var sheet = document.styleSheets[i]; // $FlowFixMe\n\n    if (sheet.ownerNode === tag) return sheet;\n  }\n  /* we should always be able to find a tag */\n\n\n  throw new StyledComponentsError(10);\n};\n/* insert a rule safely and return whether it was actually injected */\n\n\nvar safeInsertRule = function safeInsertRule(sheet, cssRule, index) {\n  /* abort early if cssRule string is falsy */\n  if (!cssRule) return false;\n  var maxIndex = sheet.cssRules.length;\n\n  try {\n    /* use insertRule and cap passed index with maxIndex (no of cssRules) */\n    sheet.insertRule(cssRule, index <= maxIndex ? index : maxIndex);\n  } catch (err) {\n    /* any error indicates an invalid rule */\n    return false;\n  }\n\n  return true;\n};\n/* deletes `size` rules starting from `removalIndex` */\n\n\nvar deleteRules = function deleteRules(sheet, removalIndex, size) {\n  var lowerBound = removalIndex - size;\n\n  for (var i = removalIndex; i > lowerBound; i -= 1) {\n    sheet.deleteRule(i);\n  }\n}; // \n\n/* this marker separates component styles and is important for rehydration */\n\n\nvar makeTextMarker = function makeTextMarker(id) {\n  return '\\n/* sc-component-id: ' + id + ' */\\n';\n};\n/* add up all numbers in array up until and including the index */\n\n\nvar addUpUntilIndex = function addUpUntilIndex(sizes, index) {\n  var totalUpToIndex = 0;\n\n  for (var i = 0; i <= index; i += 1) {\n    totalUpToIndex += sizes[i];\n  }\n\n  return totalUpToIndex;\n};\n/* create a new style tag after lastEl */\n\n\nvar makeStyleTag = function makeStyleTag(target, tagEl, insertBefore) {\n  var el = document.createElement('style');\n  el.setAttribute(SC_ATTR, '');\n  el.setAttribute(SC_VERSION_ATTR, \"4.1.1\");\n  var nonce = getNonce();\n\n  if (nonce) {\n    el.setAttribute('nonce', nonce);\n  }\n  /* Work around insertRule quirk in EdgeHTML */\n\n\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 StyledComponentsError(6);\n    }\n    /* Insert new style tag after the previous one */\n\n\n    tagEl.parentNode.insertBefore(el, insertBefore ? tagEl : tagEl.nextSibling);\n  }\n\n  return el;\n};\n/* takes a css factory function and outputs an html styled tag factory */\n\n\nvar wrapAsHtmlTag = function wrapAsHtmlTag(css, names) {\n  return function (additionalAttrs) {\n    var nonce = getNonce();\n    var attrs = [nonce && 'nonce=\"' + nonce + '\"', SC_ATTR + '=\"' + stringifyNames(names) + '\"', SC_VERSION_ATTR + '=\"' + \"4.1.1\" + '\"', additionalAttrs];\n    var htmlAttr = attrs.filter(Boolean).join(' ');\n    return '<style ' + htmlAttr + '>' + css() + '</style>';\n  };\n};\n/* takes a css factory function and outputs an element factory */\n\n\nvar wrapAsElement = function wrapAsElement(css, names) {\n  return function () {\n    var _props;\n\n    var props = (_props = {}, _props[SC_ATTR] = stringifyNames(names), _props[SC_VERSION_ATTR] = \"4.1.1\", _props);\n    var nonce = getNonce();\n\n    if (nonce) {\n      // $FlowFixMe\n      props.nonce = nonce;\n    } // eslint-disable-next-line react/no-danger\n\n\n    return _react.default.createElement('style', _extends({}, props, {\n      dangerouslySetInnerHTML: {\n        __html: css()\n      }\n    }));\n  };\n};\n\nvar getIdsFromMarkersFactory = function getIdsFromMarkersFactory(markers) {\n  return function () {\n    return Object.keys(markers);\n  };\n};\n/* speedy tags utilise insertRule */\n\n\nvar makeSpeedyTag = function makeSpeedyTag(el, getImportRuleTag) {\n  var names = Object.create(null);\n  var markers = Object.create(null);\n  var sizes = [];\n  var extractImport = getImportRuleTag !== undefined;\n  /* indicates whther getImportRuleTag was called */\n\n  var usedImportRuleTag = false;\n\n  var insertMarker = function insertMarker(id) {\n    var prev = markers[id];\n\n    if (prev !== undefined) {\n      return prev;\n    }\n\n    markers[id] = sizes.length;\n    sizes.push(0);\n    resetIdNames(names, id);\n    return markers[id];\n  };\n\n  var insertRules = function insertRules(id, cssRules, name) {\n    var marker = insertMarker(id);\n    var sheet = sheetForTag(el);\n    var insertIndex = addUpUntilIndex(sizes, marker);\n    var injectedRules = 0;\n    var importRules = [];\n    var cssRulesSize = cssRules.length;\n\n    for (var i = 0; i < cssRulesSize; i += 1) {\n      var cssRule = cssRules[i];\n      var mayHaveImport = extractImport;\n      /* @import rules are reordered to appear first */\n\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; // $FlowFixMe\n\n      getImportRuleTag().insertRules(id + '-import', importRules);\n    }\n\n    sizes[marker] += injectedRules;\n    /* add up no of injected rules */\n\n    addNameForId(names, id, name);\n  };\n\n  var removeRules = function removeRules(id) {\n    var marker = markers[id];\n    if (marker === undefined) return;\n    var size = sizes[marker];\n    var sheet = sheetForTag(el);\n    var 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  var css = function css() {\n    var _sheetForTag = sheetForTag(el),\n        cssRules = _sheetForTag.cssRules;\n\n    var str = ''; // eslint-disable-next-line guard-for-in\n\n    for (var id in markers) {\n      str += makeTextMarker(id);\n      var marker = markers[id];\n      var end = addUpUntilIndex(sizes, marker);\n      var size = sizes[marker];\n\n      for (var i = end - size; i < end; i += 1) {\n        var rule = cssRules[i];\n\n        if (rule !== undefined) {\n          str += rule.cssText;\n        }\n      }\n    }\n\n    return str;\n  };\n\n  return {\n    clone: function clone() {\n      throw new StyledComponentsError(5);\n    },\n    css: css,\n    getIds: getIdsFromMarkersFactory(markers),\n    hasNameForId: hasNameForId(names),\n    insertMarker: insertMarker,\n    insertRules: insertRules,\n    removeRules: removeRules,\n    sealed: false,\n    styleTag: el,\n    toElement: wrapAsElement(css, names),\n    toHTML: wrapAsHtmlTag(css, names)\n  };\n};\n\nvar makeTextNode = function makeTextNode(id) {\n  return document.createTextNode(makeTextMarker(id));\n};\n\nvar makeBrowserTag = function makeBrowserTag(el, getImportRuleTag) {\n  var names = Object.create(null);\n  var markers = Object.create(null);\n  var extractImport = getImportRuleTag !== undefined;\n  /* indicates whther getImportRuleTag was called */\n\n  var usedImportRuleTag = false;\n\n  var insertMarker = function insertMarker(id) {\n    var prev = markers[id];\n\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    return markers[id];\n  };\n\n  var insertRules = function insertRules(id, cssRules, name) {\n    var marker = insertMarker(id);\n    var importRules = [];\n    var cssRulesSize = cssRules.length;\n\n    for (var i = 0; i < cssRulesSize; i += 1) {\n      var rule = cssRules[i];\n      var mayHaveImport = extractImport;\n\n      if (mayHaveImport && rule.indexOf('@import') !== -1) {\n        importRules.push(rule);\n      } else {\n        mayHaveImport = false;\n        var 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; // $FlowFixMe\n\n      getImportRuleTag().insertRules(id + '-import', importRules);\n    }\n  };\n\n  var removeRules = function removeRules(id) {\n    var marker = markers[id];\n    if (marker === undefined) return;\n    /* create new empty text node and replace the current one */\n\n    var 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  var css = function css() {\n    var str = ''; // eslint-disable-next-line guard-for-in\n\n    for (var id in markers) {\n      str += markers[id].data;\n    }\n\n    return str;\n  };\n\n  return {\n    clone: function clone() {\n      throw new StyledComponentsError(5);\n    },\n    css: css,\n    getIds: getIdsFromMarkersFactory(markers),\n    hasNameForId: hasNameForId(names),\n    insertMarker: insertMarker,\n    insertRules: insertRules,\n    removeRules: removeRules,\n    sealed: false,\n    styleTag: el,\n    toElement: wrapAsElement(css, names),\n    toHTML: wrapAsHtmlTag(css, names)\n  };\n};\n\nvar makeServerTag = function makeServerTag(namesArg, markersArg) {\n  var names = namesArg === undefined ? Object.create(null) : namesArg;\n  var markers = markersArg === undefined ? Object.create(null) : markersArg;\n\n  var insertMarker = function insertMarker(id) {\n    var prev = markers[id];\n\n    if (prev !== undefined) {\n      return prev;\n    }\n\n    return markers[id] = [''];\n  };\n\n  var insertRules = function insertRules(id, cssRules, name) {\n    var marker = insertMarker(id);\n    marker[0] += cssRules.join(' ');\n    addNameForId(names, id, name);\n  };\n\n  var removeRules = function removeRules(id) {\n    var marker = markers[id];\n    if (marker === undefined) return;\n    marker[0] = '';\n    resetIdNames(names, id);\n  };\n\n  var css = function css() {\n    var str = ''; // eslint-disable-next-line guard-for-in\n\n    for (var id in markers) {\n      var cssForId = markers[id][0];\n\n      if (cssForId) {\n        str += makeTextMarker(id) + cssForId;\n      }\n    }\n\n    return str;\n  };\n\n  var clone = function clone() {\n    var namesClone = cloneNames(names);\n    var markersClone = Object.create(null); // eslint-disable-next-line guard-for-in\n\n    for (var id in markers) {\n      markersClone[id] = [markers[id][0]];\n    }\n\n    return makeServerTag(namesClone, markersClone);\n  };\n\n  var tag = {\n    clone: clone,\n    css: css,\n    getIds: getIdsFromMarkersFactory(markers),\n    hasNameForId: hasNameForId(names),\n    insertMarker: insertMarker,\n    insertRules: insertRules,\n    removeRules: removeRules,\n    sealed: false,\n    styleTag: null,\n    toElement: wrapAsElement(css, names),\n    toHTML: wrapAsHtmlTag(css, names)\n  };\n  return tag;\n};\n\nvar makeTag = function makeTag(target, tagEl, forceServer, insertBefore, getImportRuleTag) {\n  if (IS_BROWSER && !forceServer) {\n    var 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\nvar rehydrate = function rehydrate(tag, els, extracted) {\n  /* add all extracted components to the new tag */\n  for (var i = 0, len = extracted.length; i < len; i += 1) {\n    var _extracted$i = extracted[i],\n        componentId = _extracted$i.componentId,\n        cssFromDOM = _extracted$i.cssFromDOM;\n    var cssRules = splitByRules(cssFromDOM);\n    tag.insertRules(componentId, cssRules);\n  }\n  /* remove old HTMLStyleElements, since they have been rehydrated */\n\n\n  for (var _i = 0, _len = els.length; _i < _len; _i += 1) {\n    var el = els[_i];\n\n    if (el.parentNode) {\n      el.parentNode.removeChild(el);\n    }\n  }\n}; // \n\n\nvar SPLIT_REGEX = /\\s+/;\n/* determine the maximum number of components before tags are sharded */\n\nvar MAX_SIZE = void 0;\n\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\nvar sheetRunningId = 0;\nvar master = void 0;\n\nvar StyleSheet = function () {\n  /* a map from ids to tags */\n\n  /* deferred rules for a given id */\n\n  /* this is used for not reinjecting rules via hasNameForId() */\n\n  /* when rules for an id are removed using remove() we have to ignore rehydratedNames for it */\n\n  /* a list of tags belonging to this StyleSheet */\n\n  /* a tag for import rules */\n\n  /* current capacity until a new tag must be created */\n\n  /* children (aka clones) of this StyleSheet inheriting all and future injections */\n  function StyleSheet() {\n    var _this = this;\n\n    var target = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : IS_BROWSER ? document.head : null;\n    var forceServer = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n    classCallCheck(this, StyleSheet);\n\n    this.getImportRuleTag = function () {\n      var importRuleTag = _this.importRuleTag;\n\n      if (importRuleTag !== undefined) {\n        return importRuleTag;\n      }\n\n      var firstTag = _this.tags[0];\n      var insertBefore = true;\n      return _this.importRuleTag = makeTag(_this.target, firstTag ? firstTag.styleTag : null, _this.forceServer, insertBefore);\n    };\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  /* rehydrate all SSR'd style tags */\n\n\n  StyleSheet.prototype.rehydrate = function rehydrate$$1() {\n    if (!IS_BROWSER || this.forceServer) return this;\n    var els = [];\n    var extracted = [];\n    var isStreamed = false;\n    /* retrieve all of our SSR style elements from the DOM */\n\n    var nodes = document.querySelectorAll('style[' + SC_ATTR + '][' + SC_VERSION_ATTR + '=\"' + \"4.1.1\" + '\"]');\n    var nodesSize = nodes.length;\n    /* abort rehydration if no previous style tags were found */\n\n    if (!nodesSize) return this;\n\n    for (var i = 0; i < nodesSize; i += 1) {\n      var el = nodes[i];\n      /* check if style tag is a streamed tag */\n\n      if (!isStreamed) isStreamed = !!el.getAttribute(SC_STREAM_ATTR);\n      /* retrieve all component names */\n\n      var elNames = (el.getAttribute(SC_ATTR) || '').trim().split(SPLIT_REGEX);\n      var elNamesSize = elNames.length;\n\n      for (var j = 0, name; j < elNamesSize; j += 1) {\n        name = elNames[j];\n        /* add rehydrated name to sheet to avoid re-adding styles */\n\n        this.rehydratedNames[name] = true;\n      }\n      /* extract all components and their CSS */\n\n\n      extracted.push.apply(extracted, extractComps(el.textContent));\n      /* store original HTMLStyleElement */\n\n      els.push(el);\n    }\n    /* abort rehydration if nothing was extracted */\n\n\n    var extractedSize = extracted.length;\n    if (!extractedSize) return this;\n    /* create a tag to be used for rehydration */\n\n    var tag = this.makeTag(null);\n    rehydrate(tag, els, extracted);\n    /* reset capacity and adjust MAX_SIZE by the initial size of the rehydration */\n\n    this.capacity = Math.max(1, MAX_SIZE - extractedSize);\n    this.tags.push(tag);\n    /* retrieve all component ids */\n\n    for (var _j = 0; _j < extractedSize; _j += 1) {\n      this.tagMap[extracted[_j].componentId] = tag;\n    }\n\n    return this;\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\n  /* reset the internal \"master\" instance */\n\n\n  StyleSheet.reset = function reset() {\n    var forceServer = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;\n    master = new StyleSheet(undefined, forceServer).rehydrate();\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\n\n  StyleSheet.prototype.clone = function clone() {\n    var sheet = new StyleSheet(this.target, this.forceServer);\n    /* add to clone array */\n\n    this.clones.push(sheet);\n    /* clone all tags */\n\n    sheet.tags = this.tags.map(function (tag) {\n      var ids = tag.getIds();\n      var newTag = tag.clone();\n      /* reconstruct tagMap */\n\n      for (var i = 0; i < ids.length; i += 1) {\n        sheet.tagMap[ids[i]] = newTag;\n      }\n\n      return newTag;\n    });\n    /* clone other maps */\n\n    sheet.rehydratedNames = _extends({}, this.rehydratedNames);\n    sheet.deferred = _extends({}, this.deferred);\n    return sheet;\n  };\n  /* force StyleSheet to create a new tag on the next injection */\n\n\n  StyleSheet.prototype.sealAllTags = function sealAllTags() {\n    this.capacity = 1;\n    this.tags.forEach(function (tag) {\n      // eslint-disable-next-line no-param-reassign\n      tag.sealed = true;\n    });\n  };\n\n  StyleSheet.prototype.makeTag = function makeTag$$1(tag) {\n    var lastEl = tag ? tag.styleTag : null;\n    var insertBefore = false;\n    return makeTag(this.target, lastEl, this.forceServer, insertBefore, this.getImportRuleTag);\n  };\n  /* get a tag for a given componentId, assign the componentId to one, or shard */\n\n\n  StyleSheet.prototype.getTagForId = function getTagForId(id) {\n    /* simply return a tag, when the componentId was already assigned one */\n    var prev = this.tagMap[id];\n\n    if (prev !== undefined && !prev.sealed) {\n      return prev;\n    }\n\n    var tag = this.tags[this.tags.length - 1];\n    /* shard (create a new tag) if the tag is exhausted (See MAX_SIZE) */\n\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  /* mainly for createGlobalStyle to check for its id */\n\n\n  StyleSheet.prototype.hasId = function hasId(id) {\n    return this.tagMap[id] !== undefined;\n  };\n  /* caching layer checking id+name to already have a corresponding tag and injected rules */\n\n\n  StyleSheet.prototype.hasNameForId = function hasNameForId(id, name) {\n    /* exception for rehydrated names which are checked separately */\n    if (this.ignoreRehydratedNames[id] === undefined && this.rehydratedNames[name]) {\n      return true;\n    }\n\n    var tag = this.tagMap[id];\n    return tag !== undefined && tag.hasNameForId(id, name);\n  };\n  /* registers a componentId and registers it on its tag */\n\n\n  StyleSheet.prototype.deferredInject = function deferredInject(id, cssRules) {\n    /* don't inject when the id is already registered */\n    if (this.tagMap[id] !== undefined) return;\n    var clones = this.clones;\n\n    for (var 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  /* injects rules for a given id with a name that will need to be cached */\n\n\n  StyleSheet.prototype.inject = function inject(id, cssRules, name) {\n    var clones = this.clones;\n\n    for (var i = 0; i < clones.length; i += 1) {\n      clones[i].inject(id, cssRules, name);\n    }\n\n    var tag = this.getTagForId(id);\n    /* add deferred rules for component */\n\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      var rules = this.deferred[id].concat(cssRules);\n      tag.insertRules(id, rules, name);\n      this.deferred[id] = undefined;\n    } else {\n      tag.insertRules(id, cssRules, name);\n    }\n  };\n  /* removes all rules for a given id, which doesn't remove its marker but resets it */\n\n\n  StyleSheet.prototype.remove = function remove(id) {\n    var tag = this.tagMap[id];\n    if (tag === undefined) return;\n    var clones = this.clones;\n\n    for (var i = 0; i < clones.length; i += 1) {\n      clones[i].remove(id);\n    }\n    /* remove all rules from the tag */\n\n\n    tag.removeRules(id);\n    /* ignore possible rehydrated names */\n\n    this.ignoreRehydratedNames[id] = true;\n    /* delete possible deferred rules */\n\n    this.deferred[id] = undefined;\n  };\n\n  StyleSheet.prototype.toHTML = function toHTML() {\n    return this.tags.map(function (tag) {\n      return tag.toHTML();\n    }).join('');\n  };\n\n  StyleSheet.prototype.toReactElements = function toReactElements() {\n    var id = this.id;\n    return this.tags.map(function (tag, i) {\n      var key = 'sc-' + id + '-' + i;\n      return (0, _react.cloneElement)(tag.toElement(), {\n        key: key\n      });\n    });\n  };\n\n  createClass(StyleSheet, null, [{\n    key: 'master',\n    get: function get$$1() {\n      return master || (master = new StyleSheet().rehydrate());\n    }\n    /* NOTE: This is just for backwards-compatibility with jest-styled-components */\n\n  }, {\n    key: 'instance',\n    get: function get$$1() {\n      return StyleSheet.master;\n    }\n  }]);\n  return StyleSheet;\n}(); // \n\n\nvar Keyframes = function () {\n  function Keyframes(name, rules) {\n    var _this = this;\n\n    classCallCheck(this, Keyframes);\n\n    this.inject = function (styleSheet) {\n      if (!styleSheet.hasNameForId(_this.id, _this.name)) {\n        styleSheet.inject(_this.id, _this.rules, _this.name);\n      }\n    };\n\n    this.toString = function () {\n      throw new StyledComponentsError(12, String(_this.name));\n    };\n\n    this.name = name;\n    this.rules = rules;\n    this.id = 'sc-keyframes-' + name;\n  }\n\n  Keyframes.prototype.getName = function getName() {\n    return this.name;\n  };\n\n  return Keyframes;\n}(); // \n\n/**\n * inlined version of\n * https://github.com/facebook/fbjs/blob/master/packages/fbjs/src/core/hyphenateStyleName.js\n */\n\n\nvar uppercasePattern = /([A-Z])/g;\nvar msPattern = /^ms-/;\n/**\n * Hyphenates a camelcased CSS property name, for example:\n *\n *   > hyphenateStyleName('backgroundColor')\n *   < \"background-color\"\n *   > hyphenateStyleName('MozTransition')\n *   < \"-moz-transition\"\n *   > hyphenateStyleName('msTransition')\n *   < \"-ms-transition\"\n *\n * As Modernizr suggests (http://modernizr.com/docs/#prefixed), an `ms` prefix\n * is converted to `-ms-`.\n *\n * @param {string} string\n * @return {string}\n */\n\nfunction hyphenateStyleName(string) {\n  return string.replace(uppercasePattern, '-$1').toLowerCase().replace(msPattern, '-ms-');\n} // \n// Taken from https://github.com/facebook/react/blob/b87aabdfe1b7461e7331abb3601d9e6bb27544bc/packages/react-dom/src/shared/dangerousStyleValue.js\n\n\nfunction addUnitIfNeeded(name, value) {\n  // https://github.com/amilajack/eslint-plugin-flowtype-errors/issues/133\n  // $FlowFixMe\n  if (value == null || typeof value === 'boolean' || value === '') {\n    return '';\n  }\n\n  if (typeof value === 'number' && value !== 0 && !(name in _unitless.default)) {\n    return value + 'px'; // Presumes implicit 'px' suffix for unitless numbers\n  }\n\n  return String(value).trim();\n} // \n\n/**\n * It's falsish not falsy because 0 is allowed.\n */\n\n\nvar isFalsish = function isFalsish(chunk) {\n  return chunk === undefined || chunk === null || chunk === false || chunk === '';\n};\n\nvar objToCss = function objToCss(obj, prevKey) {\n  var css = Object.keys(obj).filter(function (key) {\n    return !isFalsish(obj[key]);\n  }).map(function (key) {\n    if (isPlainObject(obj[key])) return objToCss(obj[key], key);\n    return hyphenateStyleName(key) + ': ' + addUnitIfNeeded(key, obj[key]) + ';';\n  }).join(' ');\n  return prevKey ? prevKey + ' {\\n  ' + css + '\\n}' : css;\n};\n\nfunction flatten(chunk, executionContext, styleSheet) {\n  if (Array.isArray(chunk)) {\n    var ruleSet = [];\n\n    for (var i = 0, len = chunk.length, result; i < len; i += 1) {\n      result = flatten(chunk[i], executionContext, styleSheet);\n      if (result === null) continue;else if (Array.isArray(result)) ruleSet.push.apply(ruleSet, result);else ruleSet.push(result);\n    }\n\n    return ruleSet;\n  }\n\n  if (isFalsish(chunk)) {\n    return null;\n  }\n  /* Handle other components */\n\n\n  if (isStyledComponent(chunk)) {\n    return '.' + chunk.styledComponentId;\n  }\n  /* Either execute or defer the function */\n\n\n  if (isFunction(chunk)) {\n    if (executionContext) {\n      var shouldThrow = false;\n\n      try {\n        // eslint-disable-next-line new-cap\n        if ((0, _reactIs.isElement)(new chunk(executionContext))) {\n          shouldThrow = true;\n        }\n      } catch (e) {\n        /* */\n      }\n\n      if (shouldThrow) {\n        throw new StyledComponentsError(13, getComponentName(chunk));\n      }\n\n      return flatten(chunk(executionContext), executionContext, styleSheet);\n    } else return chunk;\n  }\n\n  if (chunk instanceof Keyframes) {\n    if (styleSheet) {\n      chunk.inject(styleSheet);\n      return chunk.getName();\n    } else return chunk;\n  }\n  /* Handle objects */\n\n\n  return isPlainObject(chunk) ? objToCss(chunk) : chunk.toString();\n} // \n\n\nfunction css(styles) {\n  for (var _len = arguments.length, interpolations = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n    interpolations[_key - 1] = arguments[_key];\n  }\n\n  if (isFunction(styles) || isPlainObject(styles)) {\n    // $FlowFixMe\n    return flatten(interleave(EMPTY_ARRAY, [styles].concat(interpolations)));\n  } // $FlowFixMe\n\n\n  return flatten(interleave(styles, interpolations));\n} // \n\n\nfunction constructWithOptions(componentConstructor, tag) {\n  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : EMPTY_OBJECT;\n\n  if (!(0, _reactIs.isValidElementType)(tag)) {\n    throw new StyledComponentsError(1, String(tag));\n  }\n  /* This is callable directly as a template function */\n  // $FlowFixMe: Not typed to avoid destructuring arguments\n\n\n  var templateFunction = function templateFunction() {\n    return componentConstructor(tag, options, css.apply(undefined, arguments));\n  };\n  /* If config methods are called, wrap up a new template function and merge options */\n\n\n  templateFunction.withConfig = function (config) {\n    return constructWithOptions(componentConstructor, tag, _extends({}, options, config));\n  };\n  /* Modify/inject new props at runtime */\n\n\n  templateFunction.attrs = function (attrs) {\n    return constructWithOptions(componentConstructor, tag, _extends({}, options, {\n      attrs: Array.prototype.concat(options.attrs, attrs).filter(Boolean)\n    }));\n  };\n\n  return templateFunction;\n} // \n// Source: https://github.com/garycourt/murmurhash-js/blob/master/murmurhash2_gc.js\n\n\nfunction murmurhash(c) {\n  for (var e = c.length | 0, a = e | 0, d = 0, b; e >= 4;) {\n    b = c.charCodeAt(d) & 255 | (c.charCodeAt(++d) & 255) << 8 | (c.charCodeAt(++d) & 255) << 16 | (c.charCodeAt(++d) & 255) << 24, b = 1540483477 * (b & 65535) + ((1540483477 * (b >>> 16) & 65535) << 16), b ^= b >>> 24, b = 1540483477 * (b & 65535) + ((1540483477 * (b >>> 16) & 65535) << 16), a = 1540483477 * (a & 65535) + ((1540483477 * (a >>> 16) & 65535) << 16) ^ b, e -= 4, ++d;\n  }\n\n  switch (e) {\n    case 3:\n      a ^= (c.charCodeAt(d + 2) & 255) << 16;\n\n    case 2:\n      a ^= (c.charCodeAt(d + 1) & 255) << 8;\n\n    case 1:\n      a ^= c.charCodeAt(d) & 255, a = 1540483477 * (a & 65535) + ((1540483477 * (a >>> 16) & 65535) << 16);\n  }\n\n  a ^= a >>> 13;\n  a = 1540483477 * (a & 65535) + ((1540483477 * (a >>> 16) & 65535) << 16);\n  return (a ^ a >>> 15) >>> 0;\n} // \n\n/* eslint-disable no-bitwise */\n\n/* This is the \"capacity\" of our alphabet i.e. 2x26 for all letters plus their capitalised\n * counterparts */\n\n\nvar charsLength = 52;\n/* start at 75 for 'a' until 'z' (25) and then start at 65 for capitalised letters */\n\nvar getAlphabeticChar = function getAlphabeticChar(code) {\n  return String.fromCharCode(code + (code > 25 ? 39 : 97));\n};\n/* input a number, usually a hash and convert it to base-52 */\n\n\nfunction generateAlphabeticName(code) {\n  var name = '';\n  var x = void 0;\n  /* get a char and divide by alphabet-length */\n\n  for (x = code; x > charsLength; x = Math.floor(x / charsLength)) {\n    name = getAlphabeticChar(x % charsLength) + name;\n  }\n\n  return getAlphabeticChar(x % charsLength) + name;\n} // \n\n\nfunction hasFunctionObjectKey(obj) {\n  // eslint-disable-next-line guard-for-in, no-restricted-syntax\n  for (var key in obj) {\n    if (isFunction(obj[key])) {\n      return true;\n    }\n  }\n\n  return false;\n}\n\nfunction isStaticRules(rules, attrs) {\n  for (var i = 0; i < rules.length; i += 1) {\n    var rule = rules[i]; // recursive case\n\n    if (Array.isArray(rule) && !isStaticRules(rule, attrs)) {\n      return false;\n    } else if (isFunction(rule) && !isStyledComponent(rule)) {\n      // functions are allowed to be static if they're just being\n      // used to get the classname of a nested styled component\n      return false;\n    }\n  }\n\n  if (attrs.some(function (x) {\n    return isFunction(x) || hasFunctionObjectKey(x);\n  })) return false;\n  return true;\n} // \n\n\nvar isHMREnabled = \"development\" !== 'production' && typeof module !== 'undefined' && module.hot;\n/* combines hashStr (murmurhash) and nameGenerator for convenience */\n\nvar hasher = function hasher(str) {\n  return generateAlphabeticName(murmurhash(str));\n};\n/*\n ComponentStyle is all the CSS-specific stuff, not\n the React-specific stuff.\n */\n\n\nvar ComponentStyle = function () {\n  function ComponentStyle(rules, attrs, componentId) {\n    classCallCheck(this, ComponentStyle);\n    this.rules = rules;\n    this.isStatic = !isHMREnabled && isStaticRules(rules, attrs);\n    this.componentId = componentId;\n\n    if (!StyleSheet.master.hasId(componentId)) {\n      StyleSheet.master.deferredInject(componentId, []);\n    }\n  }\n  /*\n     * Flattens a rule set into valid CSS\n     * Hashes it, wraps the whole chunk in a .hash1234 {}\n     * Returns the hash to be injected on render()\n     * */\n\n\n  ComponentStyle.prototype.generateAndInjectStyles = function generateAndInjectStyles(executionContext, styleSheet) {\n    var isStatic = this.isStatic,\n        componentId = this.componentId,\n        lastClassName = this.lastClassName;\n\n    if (IS_BROWSER && isStatic && typeof lastClassName === 'string' && styleSheet.hasNameForId(componentId, lastClassName)) {\n      return lastClassName;\n    }\n\n    var flatCSS = flatten(this.rules, executionContext, styleSheet);\n    var name = hasher(this.componentId + flatCSS.join(''));\n\n    if (!styleSheet.hasNameForId(componentId, name)) {\n      styleSheet.inject(this.componentId, stringifyRules(flatCSS, '.' + name, undefined, componentId), name);\n    }\n\n    this.lastClassName = name;\n    return name;\n  };\n\n  ComponentStyle.generateName = function generateName(str) {\n    return hasher(str);\n  };\n\n  return ComponentStyle;\n}(); // \n\n\nvar LIMIT = 200;\n\nvar createWarnTooManyClasses = function (displayName) {\n  var generatedClasses = {};\n  var warningSeen = false;\n  return function (className) {\n    if (!warningSeen) {\n      generatedClasses[className] = true;\n\n      if (Object.keys(generatedClasses).length >= LIMIT) {\n        // Unable to find latestRule in test environment.\n\n        /* eslint-disable no-console, prefer-template */\n        console.warn('Over ' + LIMIT + ' classes were generated for component ' + displayName + '. \\n' + 'Consider using the attrs method, together with a style object for frequently changed styles.\\n' + 'Example:\\n' + '  const Component = styled.div.attrs({\\n' + '    style: ({ background }) => ({\\n' + '      background,\\n' + '    }),\\n' + '  })`width: 100%;`\\n\\n' + '  <Component />');\n        warningSeen = true;\n        generatedClasses = {};\n      }\n    }\n  };\n}; // \n\n\nvar determineTheme = function (props, fallbackTheme) {\n  var defaultProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : EMPTY_OBJECT; // Props should take precedence over ThemeProvider, which should take precedence over\n  // defaultProps, but React automatically puts defaultProps on props.\n\n  /* eslint-disable react/prop-types, flowtype-errors/show-errors */\n\n  var isDefaultTheme = defaultProps ? props.theme === defaultProps.theme : false;\n  var theme = props.theme && !isDefaultTheme ? props.theme : fallbackTheme || defaultProps.theme;\n  /* eslint-enable */\n\n  return theme;\n}; // \n\n\nvar escapeRegex = /[[\\].#*$><+~=|^:(),\"'`-]+/g;\nvar dashesAtEnds = /(^-|-$)/g;\n/**\n * TODO: Explore using CSS.escape when it becomes more available\n * in evergreen browsers.\n */\n\nfunction escape(str) {\n  return str // Replace all possible CSS selectors\n  .replace(escapeRegex, '-') // Remove extraneous hyphens at the start and end\n  .replace(dashesAtEnds, '');\n} // \n\n\nfunction isTag(target)\n/* : %checks */\n{\n  return typeof target === 'string';\n} // \n\n\nfunction generateDisplayName(target) {\n  return isTag(target) ? 'styled.' + target : 'Styled(' + getComponentName(target) + ')';\n}\n\nvar _TYPE_STATICS;\n\nvar REACT_STATICS = {\n  childContextTypes: true,\n  contextTypes: true,\n  defaultProps: true,\n  displayName: true,\n  getDerivedStateFromProps: true,\n  propTypes: true,\n  type: true\n};\nvar KNOWN_STATICS = {\n  name: true,\n  length: true,\n  prototype: true,\n  caller: true,\n  callee: true,\n  arguments: true,\n  arity: true\n};\nvar TYPE_STATICS = (_TYPE_STATICS = {}, _TYPE_STATICS[_reactIs.ForwardRef] = {\n  $$typeof: true,\n  render: true\n}, _TYPE_STATICS);\nvar defineProperty$1 = Object.defineProperty,\n    getOwnPropertyNames = Object.getOwnPropertyNames,\n    _Object$getOwnPropert = Object.getOwnPropertySymbols,\n    getOwnPropertySymbols = _Object$getOwnPropert === undefined ? function () {\n  return [];\n} : _Object$getOwnPropert,\n    getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor,\n    getPrototypeOf = Object.getPrototypeOf,\n    objectPrototype = Object.prototype;\nvar arrayPrototype = Array.prototype;\n\nfunction hoistNonReactStatics(targetComponent, sourceComponent, blacklist) {\n  if (typeof sourceComponent !== 'string') {\n    // don't hoist over string (html) components\n    var inheritedComponent = getPrototypeOf(sourceComponent);\n\n    if (inheritedComponent && inheritedComponent !== objectPrototype) {\n      hoistNonReactStatics(targetComponent, inheritedComponent, blacklist);\n    }\n\n    var keys = arrayPrototype.concat(getOwnPropertyNames(sourceComponent), // $FlowFixMe\n    getOwnPropertySymbols(sourceComponent));\n    var targetStatics = TYPE_STATICS[targetComponent.$$typeof] || REACT_STATICS;\n    var sourceStatics = TYPE_STATICS[sourceComponent.$$typeof] || REACT_STATICS;\n    var i = keys.length;\n    var descriptor = void 0;\n    var key = void 0; // eslint-disable-next-line no-plusplus\n\n    while (i--) {\n      key = keys[i];\n\n      if ( // $FlowFixMe\n      !KNOWN_STATICS[key] && !(blacklist && blacklist[key]) && !(sourceStatics && sourceStatics[key]) && // $FlowFixMe\n      !(targetStatics && targetStatics[key])) {\n        descriptor = getOwnPropertyDescriptor(sourceComponent, key);\n\n        if (descriptor) {\n          try {\n            // Avoid failures from read-only properties\n            defineProperty$1(targetComponent, key, descriptor);\n          } catch (e) {\n            /* fail silently */\n          }\n        }\n      }\n    }\n\n    return targetComponent;\n  }\n\n  return targetComponent;\n} // \n\n\nfunction isDerivedReactComponent(fn) {\n  return !!(fn && fn.prototype && fn.prototype.isReactComponent);\n} // \n// Helper to call a given function, only once\n\n\nvar once = function (cb) {\n  var called = false;\n  return function () {\n    if (!called) {\n      called = true;\n      cb.apply(undefined, arguments);\n    }\n  };\n}; // \n\n\nvar ThemeContext = (0, _react.createContext)();\nexports.ThemeContext = ThemeContext;\nvar ThemeConsumer = ThemeContext.Consumer;\n/**\n * Provide a theme to an entire react component tree via context\n */\n\nexports.ThemeConsumer = ThemeConsumer;\n\nvar ThemeProvider = function (_Component) {\n  inherits(ThemeProvider, _Component);\n\n  function ThemeProvider(props) {\n    classCallCheck(this, ThemeProvider);\n\n    var _this = possibleConstructorReturn(this, _Component.call(this, props));\n\n    _this.getContext = (0, _memoizeOne.default)(_this.getContext.bind(_this));\n    _this.renderInner = _this.renderInner.bind(_this);\n    return _this;\n  }\n\n  ThemeProvider.prototype.render = function render() {\n    if (!this.props.children) return null;\n    return _react.default.createElement(ThemeContext.Consumer, null, this.renderInner);\n  };\n\n  ThemeProvider.prototype.renderInner = function renderInner(outerTheme) {\n    var context = this.getContext(this.props.theme, outerTheme);\n    return _react.default.createElement(ThemeContext.Provider, {\n      value: context\n    }, _react.default.Children.only(this.props.children));\n  };\n  /**\n   * Get the theme from the props, supporting both (outerTheme) => {}\n   * as well as object notation\n   */\n\n\n  ThemeProvider.prototype.getTheme = function getTheme(theme, outerTheme) {\n    if (isFunction(theme)) {\n      var mergedTheme = theme(outerTheme);\n\n      if (\"development\" !== 'production' && (mergedTheme === null || Array.isArray(mergedTheme) || (typeof mergedTheme === 'undefined' ? 'undefined' : _typeof(mergedTheme)) !== 'object')) {\n        throw new StyledComponentsError(7);\n      }\n\n      return mergedTheme;\n    }\n\n    if (theme === null || Array.isArray(theme) || (typeof theme === 'undefined' ? 'undefined' : _typeof(theme)) !== 'object') {\n      throw new StyledComponentsError(8);\n    }\n\n    return _extends({}, outerTheme, theme);\n  };\n\n  ThemeProvider.prototype.getContext = function getContext(theme, outerTheme) {\n    return this.getTheme(theme, outerTheme);\n  };\n\n  return ThemeProvider;\n}(_react.Component); // \n\n\nexports.ThemeProvider = ThemeProvider;\n\nvar ServerStyleSheet = function () {\n  function ServerStyleSheet() {\n    classCallCheck(this, ServerStyleSheet);\n    /* The master sheet might be reset, so keep a reference here */\n\n    this.masterSheet = StyleSheet.master;\n    this.instance = this.masterSheet.clone();\n    this.sealed = false;\n  }\n  /**\n   * Mark the ServerStyleSheet as being fully emitted and manually GC it from the\n   * StyleSheet singleton.\n   */\n\n\n  ServerStyleSheet.prototype.seal = function seal() {\n    if (!this.sealed) {\n      /* Remove sealed StyleSheets from the master sheet */\n      var index = this.masterSheet.clones.indexOf(this.instance);\n      this.masterSheet.clones.splice(index, 1);\n      this.sealed = true;\n    }\n  };\n\n  ServerStyleSheet.prototype.collectStyles = function collectStyles(children) {\n    if (this.sealed) {\n      throw new StyledComponentsError(2);\n    }\n\n    return _react.default.createElement(StyleSheetManager, {\n      sheet: this.instance\n    }, children);\n  };\n\n  ServerStyleSheet.prototype.getStyleTags = function getStyleTags() {\n    this.seal();\n    return this.instance.toHTML();\n  };\n\n  ServerStyleSheet.prototype.getStyleElement = function getStyleElement() {\n    this.seal();\n    return this.instance.toReactElements();\n  };\n\n  ServerStyleSheet.prototype.interleaveWithNodeStream = function interleaveWithNodeStream(readableStream) {\n    var _this = this;\n\n    {\n      throw new StyledComponentsError(3);\n    }\n    /* the tag index keeps track of which tags have already been emitted */\n\n    var instance = this.instance;\n    var instanceTagIndex = 0;\n    var streamAttr = SC_STREAM_ATTR + '=\"true\"';\n    var transformer = new stream.Transform({\n      transform: function appendStyleChunks(chunk,\n      /* encoding */\n      _, callback) {\n        var tags = instance.tags;\n        var html = '';\n        /* retrieve html for each new style tag */\n\n        for (; instanceTagIndex < tags.length; instanceTagIndex += 1) {\n          var tag = tags[instanceTagIndex];\n          html += tag.toHTML(streamAttr);\n        }\n        /* force our StyleSheets to emit entirely new tags */\n\n\n        instance.sealAllTags();\n        /* prepend style html to chunk */\n\n        this.push(html + chunk);\n        callback();\n      }\n    });\n    readableStream.on('end', function () {\n      return _this.seal();\n    });\n    readableStream.on('error', function (err) {\n      _this.seal(); // forward the error to the transform stream\n\n\n      transformer.emit('error', err);\n    });\n    return readableStream.pipe(transformer);\n  };\n\n  return ServerStyleSheet;\n}(); // \n\n\nexports.ServerStyleSheet = ServerStyleSheet;\nvar StyleSheetContext = (0, _react.createContext)();\nvar StyleSheetConsumer = StyleSheetContext.Consumer;\n\nvar StyleSheetManager = function (_Component) {\n  inherits(StyleSheetManager, _Component);\n\n  function StyleSheetManager(props) {\n    classCallCheck(this, StyleSheetManager);\n\n    var _this = possibleConstructorReturn(this, _Component.call(this, props));\n\n    _this.getContext = (0, _memoizeOne.default)(_this.getContext);\n    return _this;\n  }\n\n  StyleSheetManager.prototype.getContext = function getContext(sheet, target) {\n    if (sheet) {\n      return sheet;\n    } else if (target) {\n      return new StyleSheet(target);\n    } else {\n      throw new StyledComponentsError(4);\n    }\n  };\n\n  StyleSheetManager.prototype.render = function render() {\n    var _props = this.props,\n        children = _props.children,\n        sheet = _props.sheet,\n        target = _props.target;\n    return _react.default.createElement(StyleSheetContext.Provider, {\n      value: this.getContext(sheet, target)\n    }, \"development\" !== 'production' ? _react.default.Children.only(children) : children);\n  };\n\n  return StyleSheetManager;\n}(_react.Component);\n\nexports.StyleSheetManager = StyleSheetManager;\n\"development\" !== \"production\" ? StyleSheetManager.propTypes = {\n  sheet: _propTypes.default.oneOfType([_propTypes.default.instanceOf(StyleSheet), _propTypes.default.instanceOf(ServerStyleSheet)]),\n  target: _propTypes.default.shape({\n    appendChild: _propTypes.default.func.isRequired\n  })\n} : void 0; // \n\nvar didWarnAboutClassNameUsage = new Set();\n\nvar classNameUsageCheckInjector = function (target) {\n  var elementClassName = '';\n  var targetCDM = target.componentDidMount; // eslint-disable-next-line no-param-reassign\n\n  target.componentDidMount = function componentDidMount() {\n    if (typeof targetCDM === 'function') {\n      targetCDM.call(this);\n    }\n\n    var forwardTarget = this.props.forwardedClass.target;\n\n    if (target.props && target.props.suppressClassNameWarning || target.attrs && target.attrs.suppressClassNameWarning || didWarnAboutClassNameUsage.has(forwardTarget)) {\n      return;\n    }\n\n    didWarnAboutClassNameUsage.add(forwardTarget);\n    var classNames = elementClassName.replace(/ +/g, ' ').trim().split(' '); // eslint-disable-next-line react/no-find-dom-node\n\n    var node = _reactDom.default.findDOMNode(this);\n\n    var selector = classNames.map(function (s) {\n      return '.' + s;\n    }).join('');\n\n    if (node && node.nodeType === 1 && !classNames.every(function (className) {\n      return node.classList && node.classList.contains(className);\n    }) && !node.querySelector(selector)) {\n      console.warn('It looks like you\\'ve wrapped styled() around your React component (' + getComponentName(forwardTarget) + '), but the className prop is not being passed down to a child. No styles will be rendered unless className is composed within your React component.');\n    }\n  };\n\n  var prevRenderInner = target.renderInner; // eslint-disable-next-line no-param-reassign\n\n  target.renderInner = function renderInner() {\n    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {\n      args[_key] = arguments[_key];\n    }\n\n    var element = prevRenderInner.apply(this, args);\n    elementClassName = element.props.className;\n    return element;\n  };\n}; // \n\n\nvar identifiers = {};\n/* We depend on components having unique IDs */\n\nfunction generateId(_ComponentStyle, _displayName, parentComponentId) {\n  var displayName = typeof _displayName !== 'string' ? 'sc' : escape(_displayName);\n  /**\n   * This ensures uniqueness if two components happen to share\n   * the same displayName.\n   */\n\n  var nr = (identifiers[displayName] || 0) + 1;\n  identifiers[displayName] = nr;\n\n  var componentId = displayName + '-' + _ComponentStyle.generateName(displayName + nr);\n\n  return parentComponentId ? parentComponentId + '-' + componentId : componentId;\n}\n\nvar warnInnerRef = once(function () {\n  return (// eslint-disable-next-line no-console\n    console.warn('The \"innerRef\" API has been removed in styled-components v4 in favor of React 16 ref forwarding, use \"ref\" instead like a typical component.')\n  );\n});\nvar warnAttrsFnObjectKeyDeprecated = once(function (key, displayName) {\n  return (// eslint-disable-next-line no-console\n    console.warn('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});\nvar warnNonStyledComponentAttrsObjectKey = once(function (key, displayName) {\n  return (// eslint-disable-next-line no-console\n    console.warn('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' + 'You should use the new function-form attrs constructor which avoids this issue: attrs(props => ({ yourStuff }))\\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\" + ('For example, { ' + key + ': () => InnerComponent } instead of { ' + key + ': InnerComponent }'))\n  );\n}); // $FlowFixMe\n\nvar StyledComponent = function (_Component) {\n  inherits(StyledComponent, _Component);\n\n  function StyledComponent() {\n    classCallCheck(this, StyledComponent);\n\n    var _this = possibleConstructorReturn(this, _Component.call(this));\n\n    _this.attrs = {};\n    _this.renderOuter = _this.renderOuter.bind(_this);\n    _this.renderInner = _this.renderInner.bind(_this);\n\n    if (\"development\" !== 'production' && IS_BROWSER) {\n      classNameUsageCheckInjector(_this);\n    }\n\n    return _this;\n  }\n\n  StyledComponent.prototype.render = function render() {\n    return _react.default.createElement(StyleSheetConsumer, null, this.renderOuter);\n  };\n\n  StyledComponent.prototype.renderOuter = function renderOuter(styleSheet) {\n    this.styleSheet = styleSheet;\n    var componentStyle = this.props.forwardedClass.componentStyle; // No need to subscribe a static component to theme changes, it won't change anything\n\n    if (componentStyle.isStatic) return this.renderInner();\n    return _react.default.createElement(ThemeConsumer, null, this.renderInner);\n  };\n\n  StyledComponent.prototype.renderInner = function renderInner(theme) {\n    var _props$forwardedClass = this.props.forwardedClass,\n        componentStyle = _props$forwardedClass.componentStyle,\n        defaultProps = _props$forwardedClass.defaultProps,\n        styledComponentId = _props$forwardedClass.styledComponentId,\n        target = _props$forwardedClass.target;\n    var generatedClassName = void 0;\n\n    if (componentStyle.isStatic) {\n      generatedClassName = this.generateAndInjectStyles(EMPTY_OBJECT, this.props, this.styleSheet);\n    } else if (theme !== undefined) {\n      generatedClassName = this.generateAndInjectStyles(determineTheme(this.props, theme, defaultProps), this.props, this.styleSheet);\n    } else {\n      generatedClassName = this.generateAndInjectStyles(this.props.theme || EMPTY_OBJECT, this.props, this.styleSheet);\n    }\n\n    var elementToBeCreated = this.props.as || this.attrs.as || target;\n    var isTargetTag = isTag(elementToBeCreated);\n    var propsForElement = {};\n\n    var computedProps = _extends({}, this.attrs, this.props);\n\n    var key = void 0; // eslint-disable-next-line guard-for-in\n\n    for (key in computedProps) {\n      if (\"development\" !== 'production' && key === 'innerRef') {\n        warnInnerRef();\n      }\n\n      if (key === 'forwardedClass' || key === 'as') continue;else if (key === 'forwardedRef') propsForElement.ref = computedProps[key];else if (!isTargetTag || (0, _isPropValid.default)(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 = _extends({}, this.attrs.style, this.props.style);\n    }\n\n    propsForElement.className = [this.props.className, styledComponentId, this.attrs.className, generatedClassName].filter(Boolean).join(' ');\n    return (0, _react.createElement)(elementToBeCreated, propsForElement);\n  };\n\n  StyledComponent.prototype.buildExecutionContext = function buildExecutionContext(theme, props, attrs) {\n    var _this2 = this;\n\n    var context = _extends({}, props, {\n      theme: theme\n    });\n\n    if (!attrs.length) return context;\n    this.attrs = {};\n    attrs.forEach(function (attrDef) {\n      var resolvedAttrDef = attrDef;\n      var attrDefWasFn = false;\n      var attr = void 0;\n      var key = void 0;\n\n      if (isFunction(resolvedAttrDef)) {\n        // $FlowFixMe\n        resolvedAttrDef = resolvedAttrDef(props);\n        attrDefWasFn = true;\n      }\n      /* eslint-disable guard-for-in */\n      // $FlowFixMe\n\n\n      for (key in resolvedAttrDef) {\n        attr = resolvedAttrDef[key];\n\n        if (!attrDefWasFn) {\n          if (isFunction(attr) && !isDerivedReactComponent(attr) && !isStyledComponent(attr)) {\n            if (\"development\" !== 'production' && warnAttrsFnObjectKeyDeprecated) {\n              warnAttrsFnObjectKeyDeprecated(key, props.forwardedClass.displayName);\n            }\n\n            attr = attr(context);\n\n            if (\"development\" !== 'production' && _react.default.isValidElement(attr) && warnNonStyledComponentAttrsObjectKey) {\n              warnNonStyledComponentAttrsObjectKey(key, props.forwardedClass.displayName);\n            }\n          }\n        }\n\n        _this2.attrs[key] = attr;\n        context[key] = attr;\n      }\n      /* eslint-enable */\n\n    });\n    return context;\n  };\n\n  StyledComponent.prototype.generateAndInjectStyles = function generateAndInjectStyles(theme, props) {\n    var styleSheet = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : StyleSheet.master;\n    var _props$forwardedClass2 = props.forwardedClass,\n        attrs = _props$forwardedClass2.attrs,\n        componentStyle = _props$forwardedClass2.componentStyle,\n        warnTooManyClasses = _props$forwardedClass2.warnTooManyClasses; // statically styled-components don't need to build an execution context object,\n    // and shouldn't be increasing the number of class names\n\n    if (componentStyle.isStatic && !attrs.length) {\n      return componentStyle.generateAndInjectStyles(EMPTY_OBJECT, styleSheet);\n    }\n\n    var className = componentStyle.generateAndInjectStyles(this.buildExecutionContext(theme, props, attrs), styleSheet);\n    if (\"development\" !== 'production' && warnTooManyClasses) warnTooManyClasses(className);\n    return className;\n  };\n\n  return StyledComponent;\n}(_react.Component);\n\nfunction createStyledComponent(target, options, rules) {\n  var isTargetStyledComp = isStyledComponent(target);\n  var isClass = !isTag(target);\n  var _options$displayName = options.displayName,\n      displayName = _options$displayName === undefined ? generateDisplayName(target) : _options$displayName,\n      _options$componentId = options.componentId,\n      componentId = _options$componentId === undefined ? generateId(ComponentStyle, options.displayName, options.parentComponentId) : _options$componentId,\n      _options$ParentCompon = options.ParentComponent,\n      ParentComponent = _options$ParentCompon === undefined ? StyledComponent : _options$ParentCompon,\n      _options$attrs = options.attrs,\n      attrs = _options$attrs === undefined ? EMPTY_ARRAY : _options$attrs;\n  var styledComponentId = options.displayName && options.componentId ? escape(options.displayName) + '-' + options.componentId : options.componentId || componentId; // fold the underlying StyledComponent attrs up (implicit extend)\n\n  var finalAttrs = // $FlowFixMe\n  isTargetStyledComp && target.attrs ? Array.prototype.concat(target.attrs, attrs).filter(Boolean) : attrs;\n  var componentStyle = new ComponentStyle(isTargetStyledComp ? // fold the underlying StyledComponent rules up (implicit extend)\n  // $FlowFixMe\n  target.componentStyle.rules.concat(rules) : rules, finalAttrs, styledComponentId);\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\n  var WrappedStyledComponent = _react.default.forwardRef(function (props, ref) {\n    return _react.default.createElement(ParentComponent, _extends({}, props, {\n      forwardedClass: WrappedStyledComponent,\n      forwardedRef: ref\n    }));\n  }); // $FlowFixMe\n\n\n  WrappedStyledComponent.attrs = finalAttrs; // $FlowFixMe\n\n  WrappedStyledComponent.componentStyle = componentStyle;\n  WrappedStyledComponent.displayName = displayName; // $FlowFixMe\n\n  WrappedStyledComponent.styledComponentId = styledComponentId; // fold the underlying StyledComponent target up since we folded the styles\n  // $FlowFixMe\n\n  WrappedStyledComponent.target = isTargetStyledComp ? target.target : target; // $FlowFixMe\n\n  WrappedStyledComponent.withComponent = function withComponent(tag) {\n    var previousComponentId = options.componentId,\n        optionsToCopy = objectWithoutProperties(options, ['componentId']);\n    var newComponentId = previousComponentId && previousComponentId + '-' + (isTag(tag) ? tag : escape(getComponentName(tag)));\n\n    var newOptions = _extends({}, optionsToCopy, {\n      attrs: finalAttrs,\n      componentId: newComponentId,\n      ParentComponent: ParentComponent\n    });\n\n    return createStyledComponent(tag, newOptions, rules);\n  };\n\n  if (\"development\" !== 'production') {\n    // $FlowFixMe\n    WrappedStyledComponent.warnTooManyClasses = createWarnTooManyClasses(displayName);\n  } // $FlowFixMe\n\n\n  WrappedStyledComponent.toString = function () {\n    return '.' + WrappedStyledComponent.styledComponentId;\n  };\n\n  if (isClass) {\n    hoistNonReactStatics(WrappedStyledComponent, target, {\n      // all SC-specific things should not be hoisted\n      attrs: true,\n      componentStyle: true,\n      displayName: true,\n      styledComponentId: true,\n      target: true,\n      withComponent: true\n    });\n  }\n\n  return WrappedStyledComponent;\n} // \n// Thanks to ReactDOMFactories for this handy list!\n\n\nvar domElements = ['a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'big', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'cite', 'code', 'col', 'colgroup', 'data', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meta', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'section', 'select', 'small', 'source', 'span', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video', 'wbr', // SVG\n'circle', 'clipPath', 'defs', 'ellipse', 'foreignObject', 'g', 'image', 'line', 'linearGradient', 'mask', 'path', 'pattern', 'polygon', 'polyline', 'radialGradient', 'rect', 'stop', 'svg', 'text', 'tspan']; // \n\nvar styled = function styled(tag) {\n  return constructWithOptions(createStyledComponent, tag);\n}; // Shorthands for all valid HTML Elements\n\n\ndomElements.forEach(function (domElement) {\n  styled[domElement] = styled(domElement);\n}); // \n\nvar GlobalStyle = function () {\n  function GlobalStyle(rules, componentId) {\n    classCallCheck(this, GlobalStyle);\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  GlobalStyle.prototype.createStyles = function createStyles(executionContext, styleSheet) {\n    var flatCSS = flatten(this.rules, executionContext, styleSheet);\n    var css = stringifyRules(flatCSS, '');\n    styleSheet.inject(this.componentId, css);\n  };\n\n  GlobalStyle.prototype.removeStyles = function removeStyles(styleSheet) {\n    var componentId = this.componentId;\n\n    if (styleSheet.hasId(componentId)) {\n      styleSheet.remove(componentId);\n    }\n  }; // TODO: overwrite in-place instead of remove+create?\n\n\n  GlobalStyle.prototype.renderStyles = function renderStyles(executionContext, styleSheet) {\n    this.removeStyles(styleSheet);\n    this.createStyles(executionContext, styleSheet);\n  };\n\n  return GlobalStyle;\n}(); // \n// place our cache into shared context so it'll persist between HMRs\n\n\nif (IS_BROWSER) {\n  window.scCGSHMRCache = {};\n}\n\nfunction createGlobalStyle(strings) {\n  for (var _len = arguments.length, interpolations = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n    interpolations[_key - 1] = arguments[_key];\n  }\n\n  var rules = css.apply(undefined, [strings].concat(interpolations));\n  var id = 'sc-global-' + murmurhash(JSON.stringify(rules));\n  var style = new GlobalStyle(rules, id);\n\n  var GlobalStyleComponent = function (_React$Component) {\n    inherits(GlobalStyleComponent, _React$Component);\n\n    function GlobalStyleComponent() {\n      classCallCheck(this, GlobalStyleComponent);\n\n      var _this = possibleConstructorReturn(this, _React$Component.call(this));\n\n      var _this$constructor = _this.constructor,\n          globalStyle = _this$constructor.globalStyle,\n          styledComponentId = _this$constructor.styledComponentId;\n\n      if (IS_BROWSER) {\n        window.scCGSHMRCache[styledComponentId] = (window.scCGSHMRCache[styledComponentId] || 0) + 1;\n      }\n      /**\n       * This fixes HMR compatiblility. 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\n\n      _this.state = {\n        globalStyle: globalStyle,\n        styledComponentId: styledComponentId\n      };\n      return _this;\n    }\n\n    GlobalStyleComponent.prototype.componentDidMount = function componentDidMount() {\n      if (\"development\" !== 'production' && IS_BROWSER && window.scCGSHMRCache[this.state.styledComponentId] > 1 && !this.props.suppressMultiMountWarning) {\n        console.warn('The global style component ' + this.state.styledComponentId + ' was composed and rendered multiple times in your React component tree. Only the last-rendered copy will have its styles remain in <head> (or your StyleSheetManager target.)');\n      }\n    };\n\n    GlobalStyleComponent.prototype.componentWillUnmount = function 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\n\n      if (window.scCGSHMRCache[this.state.styledComponentId] === 0) {\n        this.state.globalStyle.removeStyles(this.styleSheet);\n      }\n    };\n\n    GlobalStyleComponent.prototype.render = function render() {\n      var _this2 = this;\n\n      if (\"development\" !== 'production' && _react.default.Children.count(this.props.children)) {\n        console.warn('The global style component ' + this.state.styledComponentId + ' was given child JSX. createGlobalStyle does not render children.');\n      }\n\n      return _react.default.createElement(StyleSheetConsumer, null, function (styleSheet) {\n        _this2.styleSheet = styleSheet || StyleSheet.master;\n        var globalStyle = _this2.state.globalStyle;\n\n        if (globalStyle.isStatic) {\n          globalStyle.renderStyles(STATIC_EXECUTION_CONTEXT, _this2.styleSheet);\n          return null;\n        } else {\n          return _react.default.createElement(ThemeConsumer, null, function (theme) {\n            var defaultProps = _this2.constructor.defaultProps;\n\n            var context = _extends({}, _this2.props);\n\n            if (typeof theme !== 'undefined') {\n              context.theme = determineTheme(_this2.props, theme, defaultProps);\n            }\n\n            globalStyle.renderStyles(context, _this2.styleSheet);\n            return null;\n          });\n        }\n      });\n    };\n\n    return GlobalStyleComponent;\n  }(_react.default.Component);\n\n  GlobalStyleComponent.defaultProps = {\n    suppressMultiMountWarning: false\n  };\n  GlobalStyleComponent.globalStyle = style;\n  GlobalStyleComponent.styledComponentId = id;\n  \"development\" !== \"production\" ? GlobalStyleComponent.propTypes = {\n    suppressMultiMountWarning: _propTypes.default.bool\n  } : void 0;\n  return GlobalStyleComponent;\n} // \n\n\nvar replaceWhitespace = function replaceWhitespace(str) {\n  return str.replace(/\\s|\\\\n/g, '');\n};\n\nfunction keyframes(strings) {\n  /* Warning if you've used keyframes on React Native */\n  if (\"development\" !== 'production' && typeof navigator !== 'undefined' && navigator.product === 'ReactNative') {\n    console.warn('`keyframes` cannot be used on ReactNative, only on the web. To do animation in ReactNative please use Animated.');\n  }\n\n  for (var _len = arguments.length, interpolations = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n    interpolations[_key - 1] = arguments[_key];\n  }\n\n  var rules = css.apply(undefined, [strings].concat(interpolations));\n  var name = generateAlphabeticName(murmurhash(replaceWhitespace(JSON.stringify(rules))));\n  return new Keyframes(name, stringifyRules(rules, name, '@keyframes'));\n} // \n\n\nvar withTheme = function (Component$$1) {\n  var WithTheme = _react.default.forwardRef(function (props, ref) {\n    return _react.default.createElement(ThemeConsumer, null, function (theme) {\n      // $FlowFixMe\n      var defaultProps = Component$$1.defaultProps;\n      var themeProp = determineTheme(props, theme, defaultProps);\n\n      if (\"development\" !== 'production' && themeProp === undefined) {\n        // eslint-disable-next-line no-console\n        console.warn('[withTheme] You are not using a ThemeProvider nor passing a theme prop or a theme in defaultProps in component class \"' + getComponentName(Component$$1) + '\"');\n      }\n\n      return _react.default.createElement(Component$$1, _extends({}, props, {\n        theme: themeProp,\n        ref: ref\n      }));\n    });\n  });\n\n  hoistNonReactStatics(WithTheme, Component$$1);\n  WithTheme.displayName = 'WithTheme(' + getComponentName(Component$$1) + ')';\n  return WithTheme;\n}; // \n\n/* eslint-disable */\n\n\nexports.withTheme = withTheme;\nvar __DO_NOT_USE_OR_YOU_WILL_BE_HAUNTED_BY_SPOOKY_GHOSTS = {\n  StyleSheet: StyleSheet\n}; // \n\n/* Warning if you've imported this file on React Native */\n\nexports.__DO_NOT_USE_OR_YOU_WILL_BE_HAUNTED_BY_SPOOKY_GHOSTS = __DO_NOT_USE_OR_YOU_WILL_BE_HAUNTED_BY_SPOOKY_GHOSTS;\n\nif (\"development\" !== 'production' && typeof navigator !== 'undefined' && navigator.product === 'ReactNative') {\n  // eslint-disable-next-line no-console\n  console.warn(\"It looks like you've imported 'styled-components' on React Native.\\n\" + \"Perhaps you're looking to import 'styled-components/native'?\\n\" + 'Read more about this at https://www.styled-components.com/docs/basics#react-native');\n}\n/* Warning if there are several instances of styled-components */\n\n\nif (\"development\" !== 'production' && \"development\" !== 'test' && typeof window !== 'undefined' && typeof navigator !== 'undefined' && typeof navigator.userAgent === 'string' && navigator.userAgent.indexOf('Node.js') === -1 && navigator.userAgent.indexOf('jsdom') === -1) {\n  window['__styled-components-init__'] = window['__styled-components-init__'] || 0;\n\n  if (window['__styled-components-init__'] === 1) {\n    // eslint-disable-next-line no-console\n    console.warn(\"It looks like there are several instances of 'styled-components' initialized in this application. \" + 'This may cause dynamic styles not rendering properly, errors happening during rehydration process ' + 'and makes your application bigger without a good reason.\\n\\n' + 'See https://s-c.sh/2BAXzed for more info.');\n  }\n\n  window['__styled-components-init__'] += 1;\n} //\n\n\nvar _default = styled;\nexports.default = _default;","map":{"mappings":[{"source":"../src/models/StyleTags.js","name":null,"original":{"line":44,"column":1},"generated":{"line":460,"column":0}},{"source":"../src/models/StyleTags.js","name":null,"original":{"line":44,"column":1},"generated":{"line":460,"column":4}},{"source":"../src/models/StyleTags.js","name":null,"original":{"line":44,"column":1},"generated":{"line":460,"column":18}},{"source":"../src/models/StyleTags.js","name":null,"original":{"line":44,"column":1},"generated":{"line":460,"column":21}},{"source":"../src/models/StyleTags.js","name":null,"original":{"line":44,"column":1},"generated":{"line":460,"column":30}},{"source":"../src/models/StyleTags.js","name":null,"original":{"line":44,"column":1},"generated":{"line":460,"column":44}},{"source":"../src/models/StyleTags.js","name":null,"original":{"line":44,"column":1},"generated":{"line":460,"column":45}},{"source":"../src/models/StyleTags.js","name":null,"original":{"line":44,"column":1},"generated":{"line":460,"column":47}},{"source":"../src/models/StyleTags.js","name":null,"original":{"line":44,"column":1},"generated":{"line":460,"column":49}},{"source":"../src/models/StyleTags.js","name":null,"original":{"line":44,"column":1},"generated":{"line":462,"column":0}},{"source":"../src/models/StyleTags.js","name":null,"original":{"line":44,"column":1},"generated":{"line":462,"column":1}},{"source":"../src/models/StyleTags.js","name":"__VERSION__","original":{"line":60,"column":49},"generated":{"line":481,"column":35}},{"source":"../src/models/StyleTags.js","name":null,"original":{"line":119,"column":56},"generated":{"line":550,"column":65}},{"source":"../src/models/StyleTags.js","name":null,"original":{"line":411,"column":5},"generated":{"line":839,"column":56}},{"source":"../src/models/StyleTags.js","name":"i","original":{"line":413,"column":11},"generated":{"line":841,"column":11}},{"source":"../src/models/StyleTags.js","name":"i","original":{"line":413,"column":11},"generated":{"line":841,"column":12}},{"source":"../src/models/StyleTags.js","name":"i","original":{"line":413,"column":11},"generated":{"line":841,"column":15}},{"source":"../src/models/StyleTags.js","name":"i","original":{"line":413,"column":11},"generated":{"line":841,"column":18}},{"source":"../src/models/StyleTags.js","name":"i","original":{"line":413,"column":11},"generated":{"line":841,"column":21}},{"source":"../src/models/StyleTags.js","name":"i","original":{"line":413,"column":11},"generated":{"line":841,"column":24}},{"source":"../src/models/StyleTags.js","name":"i","original":{"line":413,"column":11},"generated":{"line":841,"column":33}},{"source":"../src/models/StyleTags.js","name":"i","original":{"line":413,"column":11},"generated":{"line":841,"column":34}},{"source":"../src/models/StyleTags.js","name":"i","original":{"line":413,"column":11},"generated":{"line":841,"column":42}},{"source":"../src/models/StyleTags.js","name":"i","original":{"line":413,"column":11},"generated":{"line":841,"column":43}},{"source":"../src/models/StyleTags.js","name":"i","original":{"line":413,"column":11},"generated":{"line":841,"column":46}},{"source":"../src/models/StyleTags.js","name":"i","original":{"line":413,"column":11},"generated":{"line":841,"column":51}},{"source":"../src/models/StyleTags.js","name":"i","original":{"line":413,"column":11},"generated":{"line":841,"column":52}},{"source":"../src/models/StyleTags.js","name":"i","original":{"line":413,"column":11},"generated":{"line":841,"column":56}},{"source":"../src/models/StyleTags.js","name":"i","original":{"line":413,"column":11},"generated":{"line":841,"column":59}},{"source":"../src/models/ThemeProvider.js","name":null,"original":{"line":12,"column":2},"generated":{"line":1669,"column":0}},{"source":"../src/models/ThemeProvider.js","name":null,"original":{"line":12,"column":2},"generated":{"line":1669,"column":4}},{"source":"../src/models/ThemeProvider.js","name":null,"original":{"line":12,"column":2},"generated":{"line":1669,"column":16}},{"source":"../src/models/ThemeProvider.js","name":null,"original":{"line":12,"column":2},"generated":{"line":1669,"column":19}},{"source":"../src/models/ThemeProvider.js","name":null,"original":{"line":12,"column":2},"generated":{"line":1669,"column":46}},{"source":"../src/models/ThemeProvider.js","name":null,"original":{"line":22,"column":2},"generated":{"line":1681,"column":32}},{"source":"../src/models/StyleSheetManager.js","name":null,"original":{"line":31,"column":2},"generated":{"line":1836,"column":36}},{"source":"../src/models/StyledComponent.js","name":"attrs","original":{"line":73,"column":2},"generated":{"line":1965,"column":10}},{"source":"../src/models/StyledComponent.js","name":"attrs","original":{"line":73,"column":2},"generated":{"line":1965,"column":18}},{"source":"../src/models/GlobalStyle.js","name":null,"original":{"line":13,"column":2},"generated":{"line":2196,"column":30}},{"source":"../src/models/GlobalStyle.js","name":null,"original":{"line":13,"column":2},"generated":{"line":2196,"column":43}}],"sources":{"../src/models/StyleTags.js":"// @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 whther 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 whther 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","../src/models/ThemeProvider.js":"// @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","../src/models/StyleSheetManager.js":"// @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\nconst StyleSheetContext = createContext();\n\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","../src/models/StyledComponent.js":"// @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';\nimport classNameUsageCheckInjector from '../utils/classNameUsageCheckInjector';\n\nimport type { Attrs, RuleSet, Target } from '../types';\nimport { IS_BROWSER } from '../constants';\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\nconst warnInnerRef = once(() =>\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.'\n  )\n);\n\nconst 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);\n\nconst 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// $FlowFixMe\nclass StyledComponent extends Component<*> {\n  renderOuter: Function;\n\n  renderInner: Function;\n\n  styleSheet: ?StyleSheet;\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' && IS_BROWSER) {\n      classNameUsageCheckInjector(this);\n    }\n  }\n\n  render() {\n    return <StyleSheetConsumer>{this.renderOuter}</StyleSheetConsumer>;\n  }\n\n  renderOuter(styleSheet?: StyleSheet) {\n    this.styleSheet = styleSheet;\n    const { componentStyle } = this.props.forwardedClass;\n\n    // No need to subscribe a static component to theme changes, it won't change anything\n    if (componentStyle.isStatic) return this.renderInner();\n\n    return <ThemeConsumer>{this.renderInner}</ThemeConsumer>;\n  }\n\n  renderInner(theme?: Theme) {\n    const { componentStyle, defaultProps, styledComponentId, target } = this.props.forwardedClass;\n\n    let generatedClassName;\n    if (componentStyle.isStatic) {\n      generatedClassName = this.generateAndInjectStyles(EMPTY_OBJECT, this.props, this.styleSheet);\n    } else if (theme !== undefined) {\n      generatedClassName = this.generateAndInjectStyles(\n        determineTheme(this.props, theme, defaultProps),\n        this.props,\n        this.styleSheet\n      );\n    } else {\n      generatedClassName = this.generateAndInjectStyles(\n        this.props.theme || EMPTY_OBJECT,\n        this.props,\n        this.styleSheet\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') {\n        warnInnerRef();\n      }\n\n      if (key === 'forwardedClass' || key === 'as') 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 = [\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(props);\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' && warnAttrsFnObjectKeyDeprecated) {\n              warnAttrsFnObjectKeyDeprecated(key, props.forwardedClass.displayName);\n            }\n\n            attr = attr(context);\n\n            if (\n              process.env.NODE_ENV !== 'production' &&\n              React.isValidElement(attr) &&\n              warnNonStyledComponentAttrsObjectKey\n            ) {\n              warnNonStyledComponentAttrsObjectKey(key, props.forwardedClass.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, styleSheet: ?StyleSheet = StyleSheet.master) {\n    const { attrs, componentStyle, warnTooManyClasses } = props.forwardedClass;\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, styleSheet);\n    }\n\n    const className = componentStyle.generateAndInjectStyles(\n      this.buildExecutionContext(theme, props, attrs),\n      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  const WrappedStyledComponent = React.forwardRef((props, ref) => (\n    <ParentComponent {...props} forwardedClass={WrappedStyledComponent} forwardedRef={ref} />\n  ));\n\n  // $FlowFixMe\n  WrappedStyledComponent.attrs = finalAttrs;\n  // $FlowFixMe\n  WrappedStyledComponent.componentStyle = componentStyle;\n  WrappedStyledComponent.displayName = displayName;\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      styledComponentId: true,\n      target: true,\n      withComponent: true,\n    });\n  }\n\n  return WrappedStyledComponent;\n}\n","../src/models/GlobalStyle.js":"// @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"},"lineCount":null}},"hash":"700fab8305f1eb99c974abb6556196d8","cacheData":{"env":{"NODE_ENV":"development"}}}