npm - styled-components - Versions diffs - 4.3.1 → 4.4.1 - Mend

styled-components 4.3.1 → 4.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/README.md +28 -4
package/dist/styled-components-macro.cjs.js +3 -2
package/dist/styled-components-macro.cjs.js.map +1 -1
package/dist/styled-components-macro.esm.js +3 -2
package/dist/styled-components-macro.esm.js.map +1 -1
package/dist/styled-components.browser.cjs.js +27 -24
package/dist/styled-components.browser.cjs.js.map +1 -1
package/dist/styled-components.browser.esm.js +27 -24
package/dist/styled-components.browser.esm.js.map +1 -1
package/dist/styled-components.cjs.js +27 -24
package/dist/styled-components.cjs.js.map +1 -1
package/dist/styled-components.esm.js +27 -24
package/dist/styled-components.esm.js.map +1 -1
package/dist/styled-components.js +28 -25
package/dist/styled-components.js.map +1 -1
package/dist/styled-components.min.js +1 -1
package/dist/styled-components.min.js.map +1 -1
package/native/dist/styled-components.native.cjs.js +27 -19
package/native/dist/styled-components.native.cjs.js.map +1 -1
package/native/dist/styled-components.native.esm.js +48 -39
package/native/dist/styled-components.native.esm.js.map +1 -1
package/package.json +3 -2
package/primitives/dist/styled-components-primitives.cjs.js +20 -15
package/primitives/dist/styled-components-primitives.cjs.js.map +1 -1
package/primitives/dist/styled-components-primitives.esm.js +20 -15
package/primitives/dist/styled-components-primitives.esm.js.map +1 -1

package/native/dist/styled-components.native.cjs.js CHANGED Viewed

@@ -14,8 +14,6 @@ var supportsColor = _interopDefault(require('supports-color'));
 var transformDeclPairs = _interopDefault(require('css-to-react-native'));
 var memoize = _interopDefault(require('memoize-one'));
 var merge = _interopDefault(require('merge-anything'));
-var reactNative = require('react-native');
-var reactNative__default = _interopDefault(reactNative);
 //
 // Source: https://github.com/garycourt/murmurhash-js/blob/master/murmurhash2_gc.js
@@ -172,7 +170,7 @@ var ERRORS = process.env.NODE_ENV !== 'production' ? {
   "9": "Missing document `<head>`\n\n",
   "10": "Cannot find a StyleSheet instance. Usually this happens if there are multiple copies of styled-components loaded at once. Check out this issue for how to troubleshoot and fix the common cases where this situation can happen: https://github.com/styled-components/styled-components/issues/1941#issuecomment-417862021\n\n",
   "11": "_This error was replaced with a dev-time warning, it will be deleted for v4 final._ [createGlobalStyle] received children which will not be rendered. Please use the component without passing children elements.\n\n",
-  "12": "It seems you are interpolating a keyframe declaration (%s) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\\`\\` helper (see https://www.styled-components.com/docs/api#css), which ensures the styles are injected correctly.\n\n",
+  "12": "It seems you are interpolating a keyframe declaration (%s) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\\`\\` helper which ensures the styles are injected correctly. See https://www.styled-components.com/docs/api#css\n\n",
   "13": "%s is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.\n"
 } : {};
@@ -390,9 +388,9 @@ var sheetForTag = function sheetForTag(tag) {
   if (tag.sheet) return tag.sheet;
   /* Firefox quirk requires us to step through all stylesheets to find one owned by the given tag */
-  var size = document.styleSheets.length;
+  var size = tag.ownerDocument.styleSheets.length;
   for (var i = 0; i < size; i += 1) {
-    var sheet = document.styleSheets[i];
+    var sheet = tag.ownerDocument.styleSheets[i];
     // $FlowFixMe
     if (sheet.ownerNode === tag) return sheet;
   }
@@ -446,9 +444,12 @@ var addUpUntilIndex = function addUpUntilIndex(sizes, index) {
 /* create a new style tag after lastEl */
 var makeStyleTag = function makeStyleTag(target, tagEl, insertBefore) {
-  var el = document.createElement('style');
+  var targetDocument = document;
+  if (target) targetDocument = target.ownerDocument;else if (tagEl) targetDocument = tagEl.ownerDocument;
+  var el = targetDocument.createElement('style');
   el.setAttribute(SC_ATTR, '');
-  el.setAttribute(SC_VERSION_ATTR, "4.3.1");
+  el.setAttribute(SC_VERSION_ATTR, "4.4.1");
   var nonce = getNonce();
   if (nonce) {
@@ -456,7 +457,7 @@ var makeStyleTag = function makeStyleTag(target, tagEl, insertBefore) {
   }
   /* Work around insertRule quirk in EdgeHTML */
-  el.appendChild(document.createTextNode(''));
+  el.appendChild(targetDocument.createTextNode(''));
   if (target && !tagEl) {
     /* Append to target when no previous element was passed */
@@ -477,7 +478,7 @@ var makeStyleTag = function makeStyleTag(target, tagEl, insertBefore) {
 var wrapAsHtmlTag = function wrapAsHtmlTag(css, names) {
   return function (additionalAttrs) {
     var nonce = getNonce();
-    var attrs = [nonce && 'nonce="' + nonce + '"', SC_ATTR + '="' + stringifyNames(names) + '"', SC_VERSION_ATTR + '="' + "4.3.1" + '"', additionalAttrs];
+    var attrs = [nonce && 'nonce="' + nonce + '"', SC_ATTR + '="' + stringifyNames(names) + '"', SC_VERSION_ATTR + '="' + "4.4.1" + '"', additionalAttrs];
     var htmlAttr = attrs.filter(Boolean).join(' ');
     return '<style ' + htmlAttr + '>' + css() + '</style>';
@@ -489,7 +490,7 @@ var wrapAsElement = function wrapAsElement(css, names) {
   return function () {
     var _props;
-    var props = (_props = {}, _props[SC_ATTR] = stringifyNames(names), _props[SC_VERSION_ATTR] = "4.3.1", _props);
+    var props = (_props = {}, _props[SC_ATTR] = stringifyNames(names), _props[SC_VERSION_ATTR] = "4.4.1", _props);
     var nonce = getNonce();
     if (nonce) {
@@ -564,6 +565,8 @@ var makeSpeedyTag = function makeSpeedyTag(el, getImportRuleTag) {
   var removeRules = function removeRules(id) {
     var marker = markers[id];
     if (marker === undefined) return;
+    // $FlowFixMe
+    if (el.isConnected === false) return;
     var size = sizes[marker];
     var sheet = sheetForTag(el);
@@ -619,8 +622,8 @@ var makeSpeedyTag = function makeSpeedyTag(el, getImportRuleTag) {
   };
 };
-var makeTextNode = function makeTextNode(id) {
-  return document.createTextNode(makeTextMarker(id));
+var makeTextNode = function makeTextNode(targetDocument, id) {
+  return targetDocument.createTextNode(makeTextMarker(id));
 };
 var makeBrowserTag = function makeBrowserTag(el, getImportRuleTag) {
@@ -638,7 +641,7 @@ var makeBrowserTag = function makeBrowserTag(el, getImportRuleTag) {
       return prev;
     }
-    markers[id] = makeTextNode(id);
+    markers[id] = makeTextNode(el.ownerDocument, id);
     el.appendChild(markers[id]);
     names[id] = Object.create(null);
@@ -676,7 +679,7 @@ var makeBrowserTag = function makeBrowserTag(el, getImportRuleTag) {
     if (marker === undefined) return;
     /* create new empty text node and replace the current one */
-    var newMarker = makeTextNode(id);
+    var newMarker = makeTextNode(el.ownerDocument, id);
     el.replaceChild(newMarker, marker);
     markers[id] = newMarker;
     resetIdNames(names, id);
@@ -896,7 +899,7 @@ var StyleSheet = function () {
     var isStreamed = false;
     /* retrieve all of our SSR style elements from the DOM */
-    var nodes = document.querySelectorAll('style[' + SC_ATTR + '][' + SC_VERSION_ATTR + '="' + "4.3.1" + '"]');
+    var nodes = document.querySelectorAll('style[' + SC_ATTR + '][' + SC_VERSION_ATTR + '="' + "4.4.1" + '"]');
     var nodesSize = nodes.length;
@@ -6131,7 +6134,7 @@ var ThemeProvider = function (_Component) {
     return React__default.createElement(
       ThemeContext.Provider,
       { value: context },
-      React__default.Children.only(this.props.children)
+      this.props.children
     );
   };
@@ -6227,7 +6230,7 @@ var StyledNativeComponent = function (_Component) {
         var generatedStyles = _this2.generateAndInjectStyles(determineTheme(_this2.props, theme, defaultProps) || EMPTY_OBJECT, _this2.props);
-        var propsForElement = _extends({}, _this2.attrs, props, {
+        var propsForElement = _extends({}, props, _this2.attrs, {
           style: [generatedStyles].concat(style)
         });
@@ -6492,7 +6495,12 @@ var withTheme = (function (Component) {
 //
-var InlineStyle = _InlineStyle(reactNative.StyleSheet);
+var reactNative = require('react-native');
+var StyleSheet$1 = reactNative.StyleSheet;
+var InlineStyle = _InlineStyle(StyleSheet$1);
 var StyledNativeComponent$1 = _StyledNativeComponent(InlineStyle);
 var styled = function styled(tag) {
   return constructWithOptions(StyledNativeComponent$1, tag);
@@ -6509,7 +6517,7 @@ aliases.split(/\s+/m).forEach(function (alias) {
     enumerable: true,
     configurable: false,
     get: function get() {
-      return styled(reactNative__default[alias]);
+      return styled(reactNative[alias]);
     }
   });
 });

package/native/dist/styled-components.native.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styled-components.native.cjs.js","sources":["../../src/models/StyleTags.js","../../src/models/InlineStyle.js","../../src/models/ThemeProvider.js","../../src/models/StyledNativeComponent.js"],"sourcesContent":["// @flow\n/* eslint-disable flowtype/object-type-delimiter /\n/ eslint-disable react/prop-types /\n\nimport React, { type Element } from 'react';\nimport { IS_BROWSER, DISABLE_SPEEDY, SC_ATTR, SC_VERSION_ATTR } from '../constants';\nimport StyledError from '../utils/error';\nimport { type ExtractedComp } from '../utils/extractCompsFromCSS';\nimport { splitByRules } from '../utils/stringifyRules';\nimport getNonce from '../utils/nonce';\n\nimport {\n type Names,\n addNameForId,\n resetIdNames,\n hasNameForId,\n stringifyNames,\n cloneNames,\n} from '../utils/styleNames';\n\nimport { sheetForTag, safeInsertRule, deleteRules } from '../utils/insertRuleHelpers';\n\ndeclare var __VERSION__: string;\n\nexport interface Tag<T> {\n // $FlowFixMe: Doesn't seem to accept any combination w/ HTMLStyleElement for some reason\n styleTag: HTMLStyleElement \| null;\n / lists all ids of the tag /\n getIds(): string[];\n / checks whether `name` is already injected for `id` /\n hasNameForId(id: string, name: string): boolean;\n / inserts a marker to ensure the id's correct position in the sheet /\n insertMarker(id: string): T;\n / inserts rules according to the ids markers /\n insertRules(id: string, cssRules: string[], name: ?string): void;\n / removes all rules belonging to the id, keeping the marker around /\n removeRules(id: string): void;\n css(): string;\n toHTML(additionalAttrs: ?string): string;\n toElement(): Element<>;\n clone(): Tag<T>;\n /* used in server side rendering to indicate that the rules in the tag have been flushed to HTML /\n sealed: boolean;\n}\n\n/ this marker separates component styles and is important for rehydration /\nconst makeTextMarker = id => `\\n/ sc-component-id: ${id} /\\n`;\n\n/ add up all numbers in array up until and including the index /\nconst addUpUntilIndex = (sizes: number[], index: number): number => {\n let totalUpToIndex = 0;\n for (let i = 0; i <= index; i += 1) {\n totalUpToIndex += sizes[i];\n }\n\n return totalUpToIndex;\n};\n\n/ create a new style tag after lastEl /\nconst makeStyleTag = (target: ?HTMLElement, tagEl: ?Node, insertBefore: ?boolean) => {\n const el = document.createElement('style');\n el.setAttribute(SC_ATTR, '');\n el.setAttribute(SC_VERSION_ATTR, __VERSION__);\n\n const nonce = getNonce();\n if (nonce) {\n el.setAttribute('nonce', nonce);\n }\n\n / Work around insertRule quirk in EdgeHTML /\n el.appendChild(document.createTextNode(''));\n\n if (target && !tagEl) {\n / Append to target when no previous element was passed /\n target.appendChild(el);\n } else {\n if (!tagEl \|\| !target \|\| !tagEl.parentNode) {\n throw new StyledError(6);\n }\n\n / Insert new style tag after the previous one /\n tagEl.parentNode.insertBefore(el, insertBefore ? tagEl : tagEl.nextSibling);\n }\n\n return el;\n};\n\n/ takes a css factory function and outputs an html styled tag factory /\nconst wrapAsHtmlTag = (css: () => string, names: Names) => (additionalAttrs: ?string): string => {\n const nonce = getNonce();\n const attrs = [\n nonce && `nonce=\"${nonce}\"`,\n `${SC_ATTR}=\"${stringifyNames(names)}\"`,\n `${SC_VERSION_ATTR}=\"${__VERSION__}\"`,\n additionalAttrs,\n ];\n\n const htmlAttr = attrs.filter(Boolean).join(' ');\n return `<style ${htmlAttr}>${css()}</style>`;\n};\n\n/ takes a css factory function and outputs an element factory /\nconst wrapAsElement = (css: () => string, names: Names) => () => {\n const props = {\n [SC_ATTR]: stringifyNames(names),\n [SC_VERSION_ATTR]: __VERSION__,\n };\n\n const nonce = getNonce();\n if (nonce) {\n // $FlowFixMe\n props.nonce = nonce;\n }\n\n // eslint-disable-next-line react/no-danger\n return <style {...props} dangerouslySetInnerHTML={{ __html: css() }} />;\n};\n\nconst getIdsFromMarkersFactory = (markers: Object) => (): string[] => Object.keys(markers);\n\n/ speedy tags utilise insertRule /\nconst makeSpeedyTag = (el: HTMLStyleElement, getImportRuleTag: ?() => Tag<any>): Tag<number> => {\n const names: Names = (Object.create(null): Object);\n const markers = Object.create(null);\n const sizes: number[] = [];\n\n const extractImport = getImportRuleTag !== undefined;\n / indicates whether getImportRuleTag was called /\n let usedImportRuleTag = false;\n\n const insertMarker = id => {\n const prev = markers[id];\n if (prev !== undefined) {\n return prev;\n }\n\n markers[id] = sizes.length;\n sizes.push(0);\n resetIdNames(names, id);\n\n return markers[id];\n };\n\n const insertRules = (id, cssRules, name) => {\n const marker = insertMarker(id);\n const sheet = sheetForTag(el);\n const insertIndex = addUpUntilIndex(sizes, marker);\n\n let injectedRules = 0;\n const importRules = [];\n const cssRulesSize = cssRules.length;\n\n for (let i = 0; i < cssRulesSize; i += 1) {\n const cssRule = cssRules[i];\n let mayHaveImport = extractImport; / @import rules are reordered to appear first /\n if (mayHaveImport && cssRule.indexOf('@import') !== -1) {\n importRules.push(cssRule);\n } else if (safeInsertRule(sheet, cssRule, insertIndex + injectedRules)) {\n mayHaveImport = false;\n injectedRules += 1;\n }\n }\n\n if (extractImport && importRules.length > 0) {\n usedImportRuleTag = true;\n // $FlowFixMe\n getImportRuleTag().insertRules(`${id}-import`, importRules);\n }\n\n sizes[marker] += injectedRules; / add up no of injected rules /\n addNameForId(names, id, name);\n };\n\n const removeRules = id => {\n const marker = markers[id];\n if (marker === undefined) return;\n\n const size = sizes[marker];\n const sheet = sheetForTag(el);\n const removalIndex = addUpUntilIndex(sizes, marker) - 1;\n deleteRules(sheet, removalIndex, size);\n sizes[marker] = 0;\n resetIdNames(names, id);\n\n if (extractImport && usedImportRuleTag) {\n // $FlowFixMe\n getImportRuleTag().removeRules(`${id}-import`);\n }\n };\n\n const css = () => {\n const { cssRules } = sheetForTag(el);\n let str = '';\n\n // eslint-disable-next-line guard-for-in\n for (const id in markers) {\n str += makeTextMarker(id);\n const marker = markers[id];\n const end = addUpUntilIndex(sizes, marker);\n const size = sizes[marker];\n for (let i = end - size; i < end; i += 1) {\n const rule = cssRules[i];\n if (rule !== undefined) {\n str += rule.cssText;\n }\n }\n }\n\n return str;\n };\n\n return {\n clone() {\n throw new StyledError(5);\n },\n css,\n getIds: getIdsFromMarkersFactory(markers),\n hasNameForId: hasNameForId(names),\n insertMarker,\n insertRules,\n removeRules,\n sealed: false,\n styleTag: el,\n toElement: wrapAsElement(css, names),\n toHTML: wrapAsHtmlTag(css, names),\n };\n};\n\nconst makeTextNode = id => document.createTextNode(makeTextMarker(id));\n\nconst makeBrowserTag = (el: HTMLStyleElement, getImportRuleTag: ?() => Tag<any>): Tag<Text> => {\n const names = (Object.create(null): Object);\n const markers = Object.create(null);\n\n const extractImport = getImportRuleTag !== undefined;\n\n / indicates whether getImportRuleTag was called /\n let usedImportRuleTag = false;\n\n const insertMarker = id => {\n const prev = markers[id];\n if (prev !== undefined) {\n return prev;\n }\n\n markers[id] = makeTextNode(id);\n el.appendChild(markers[id]);\n names[id] = Object.create(null);\n\n return markers[id];\n };\n\n const insertRules = (id, cssRules, name) => {\n const marker = insertMarker(id);\n const importRules = [];\n const cssRulesSize = cssRules.length;\n\n for (let i = 0; i < cssRulesSize; i += 1) {\n const rule = cssRules[i];\n let mayHaveImport = extractImport;\n if (mayHaveImport && rule.indexOf('@import') !== -1) {\n importRules.push(rule);\n } else {\n mayHaveImport = false;\n const separator = i === cssRulesSize - 1 ? '' : ' ';\n marker.appendData(`${rule}${separator}`);\n }\n }\n\n addNameForId(names, id, name);\n\n if (extractImport && importRules.length > 0) {\n usedImportRuleTag = true;\n // $FlowFixMe\n getImportRuleTag().insertRules(`${id}-import`, importRules);\n }\n };\n\n const removeRules = id => {\n const marker = markers[id];\n if (marker === undefined) return;\n\n / create new empty text node and replace the current one /\n const newMarker = makeTextNode(id);\n el.replaceChild(newMarker, marker);\n markers[id] = newMarker;\n resetIdNames(names, id);\n\n if (extractImport && usedImportRuleTag) {\n // $FlowFixMe\n getImportRuleTag().removeRules(`${id}-import`);\n }\n };\n\n const css = () => {\n let str = '';\n\n // eslint-disable-next-line guard-for-in\n for (const id in markers) {\n str += markers[id].data;\n }\n\n return str;\n };\n\n return {\n clone() {\n throw new StyledError(5);\n },\n css,\n getIds: getIdsFromMarkersFactory(markers),\n hasNameForId: hasNameForId(names),\n insertMarker,\n insertRules,\n removeRules,\n sealed: false,\n styleTag: el,\n toElement: wrapAsElement(css, names),\n toHTML: wrapAsHtmlTag(css, names),\n };\n};\n\nconst makeServerTag = (namesArg, markersArg): Tag<[string]> => {\n const names = namesArg === undefined ? (Object.create(null): Object) : namesArg;\n const markers = markersArg === undefined ? Object.create(null) : markersArg;\n\n const insertMarker = id => {\n const prev = markers[id];\n if (prev !== undefined) {\n return prev;\n }\n\n return (markers[id] = ['']);\n };\n\n const insertRules = (id, cssRules, name) => {\n const marker = insertMarker(id);\n marker[0] += cssRules.join(' ');\n addNameForId(names, id, name);\n };\n\n const removeRules = id => {\n const marker = markers[id];\n if (marker === undefined) return;\n marker[0] = '';\n resetIdNames(names, id);\n };\n\n const css = () => {\n let str = '';\n // eslint-disable-next-line guard-for-in\n for (const id in markers) {\n const cssForId = markers[id][0];\n if (cssForId) {\n str += makeTextMarker(id) + cssForId;\n }\n }\n return str;\n };\n\n const clone = () => {\n const namesClone = cloneNames(names);\n const markersClone = Object.create(null);\n\n // eslint-disable-next-line guard-for-in\n for (const id in markers) {\n markersClone[id] = [markers[id][0]];\n }\n\n return makeServerTag(namesClone, markersClone);\n };\n\n const tag = {\n clone,\n css,\n getIds: getIdsFromMarkersFactory(markers),\n hasNameForId: hasNameForId(names),\n insertMarker,\n insertRules,\n removeRules,\n sealed: false,\n styleTag: null,\n toElement: wrapAsElement(css, names),\n toHTML: wrapAsHtmlTag(css, names),\n };\n\n return tag;\n};\n\nexport const makeTag = (\n target: ?HTMLElement,\n tagEl: ?HTMLStyleElement,\n forceServer?: boolean,\n insertBefore?: boolean,\n getImportRuleTag?: () => Tag<any>\n): Tag<any> => {\n if (IS_BROWSER && !forceServer) {\n const el = makeStyleTag(target, tagEl, insertBefore);\n\n if (DISABLE_SPEEDY) {\n return makeBrowserTag(el, getImportRuleTag);\n } else {\n return makeSpeedyTag(el, getImportRuleTag);\n }\n }\n\n return makeServerTag();\n};\n\nexport const rehydrate = (\n tag: Tag<any>,\n els: HTMLStyleElement[],\n extracted: ExtractedComp[]\n): void => {\n / add all extracted components to the new tag /\n for (let i = 0, len = extracted.length; i < len; i += 1) {\n const { componentId, cssFromDOM } = extracted[i];\n const cssRules = splitByRules(cssFromDOM);\n tag.insertRules(componentId, cssRules);\n }\n\n / remove old HTMLStyleElements, since they have been rehydrated /\n for (let i = 0, len = els.length; i < len; i += 1) {\n const el = els[i];\n if (el.parentNode) {\n el.parentNode.removeChild(el);\n }\n }\n};\n","// @flow\n/ eslint-disable import/no-unresolved /\nimport transformDeclPairs from 'css-to-react-native';\n\n// $FlowFixMe\nimport hashStr from '../vendor/glamor/hash';\nimport type { RuleSet, StyleSheet } from '../types';\nimport flatten from '../utils/flatten';\n// $FlowFixMe\nimport parse from '../vendor/postcss-safe-parser/parse';\n\nlet generated = {};\n\nexport const resetStyleCache = () => {\n generated = {};\n};\n\n/\n InlineStyle takes arbitrary CSS and generates a flat object\n /\nexport default (styleSheet: StyleSheet) => {\n class InlineStyle {\n rules: RuleSet;\n\n constructor(rules: RuleSet) {\n this.rules = rules;\n }\n\n generateStyleObject(executionContext: Object) {\n const flatCSS = flatten(this.rules, executionContext).join('');\n\n const hash = hashStr(flatCSS);\n if (!generated[hash]) {\n const root = parse(flatCSS);\n const declPairs = [];\n root.each(node => {\n if (node.type === 'decl') {\n declPairs.push([node.prop, node.value]);\n } else if (process.env.NODE_ENV !== 'production' && node.type !== 'comment') {\n / eslint-disable no-console /\n console.warn(`Node of type ${node.type} not supported as an inline style`);\n }\n });\n // RN currently does not support differing values for the corner radii of Image\n // components (but does for View). It is almost impossible to tell whether we'll have\n // support, so we'll just disable multiple values here.\n // https://github.com/styled-components/css-to-react-native/issues/11\n const styleObject = transformDeclPairs(declPairs, [\n 'borderRadius',\n 'borderWidth',\n 'borderColor',\n 'borderStyle',\n ]);\n const styles = styleSheet.create({\n generated: styleObject,\n });\n generated[hash] = styles.generated;\n }\n return generated[hash];\n }\n }\n\n return InlineStyle;\n};\n","// @flow\nimport React, { createContext, Component, type Element } from 'react';\nimport memoize from 'memoize-one';\nimport StyledError from '../utils/error';\nimport isFunction from '../utils/isFunction';\n\nexport type Theme = { [key: string]: mixed };\n\ntype Props = {\n children?: Element<any>,\n theme: Theme \| ((outerTheme: Theme) => void),\n};\n\nexport const ThemeContext = createContext();\n\nexport const ThemeConsumer = ThemeContext.Consumer;\n\n/\n Provide a theme to an entire react component tree via context\n /\nexport default class ThemeProvider extends Component<Props> {\n getContext: (theme: Theme \| ((outerTheme: Theme) => void), outerTheme?: Theme) => Theme;\n\n renderInner: Function;\n\n constructor(props: Props) {\n super(props);\n this.getContext = memoize(this.getContext.bind(this));\n this.renderInner = this.renderInner.bind(this);\n }\n\n render() {\n if (!this.props.children) return null;\n\n return <ThemeContext.Consumer>{this.renderInner}</ThemeContext.Consumer>;\n }\n\n renderInner(outerTheme?: Theme) {\n const context = this.getContext(this.props.theme, outerTheme);\n\n return (\n <ThemeContext.Provider value={context}>\n {React.Children.only(this.props.children)}\n </ThemeContext.Provider>\n );\n }\n\n /\n Get the theme from the props, supporting both (outerTheme) => {}\n * as well as object notation\n /\n getTheme(theme: (outerTheme: ?Theme) => void, outerTheme: ?Theme) {\n if (isFunction(theme)) {\n const mergedTheme = theme(outerTheme);\n\n if (\n process.env.NODE_ENV !== 'production' &&\n (mergedTheme === null \|\| Array.isArray(mergedTheme) \|\| typeof mergedTheme !== 'object')\n ) {\n throw new StyledError(7);\n }\n\n return mergedTheme;\n }\n\n if (theme === null \|\| Array.isArray(theme) \|\| typeof theme !== 'object') {\n throw new StyledError(8);\n }\n\n return { ...outerTheme, ...theme };\n }\n\n getContext(theme: (outerTheme: ?Theme) => void, outerTheme?: Theme) {\n return this.getTheme(theme, outerTheme);\n }\n}\n","// @flow\nimport merge from 'merge-anything';\nimport React, { createElement, Component } from 'react';\nimport determineTheme from '../utils/determineTheme';\nimport { EMPTY_ARRAY, EMPTY_OBJECT } from '../utils/empties';\nimport generateDisplayName from '../utils/generateDisplayName';\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 { ThemeConsumer } from './ThemeProvider';\n\nimport type { Theme } from './ThemeProvider';\nimport type { Attrs, RuleSet, Target } from '../types';\n\nclass StyledNativeComponent extends Component<, > {\n root: ?Object;\n\n warnInnerRef: Function;\n\n warnAttrsFnObjectKeyDeprecated: Function;\n\n warnNonStyledComponentAttrsObjectKey: Function;\n\n attrs = {};\n\n constructor(props) {\n super(props);\n\n if (process.env.NODE_ENV !== 'production') {\n this.warnInnerRef = once(displayName =>\n // eslint-disable-next-line no-console\n console.warn(\n `The \"innerRef\" API has been removed in styled-components v4 in favor of React 16 ref forwarding, use \"ref\" instead like a typical component. \"innerRef\" was detected on component \"${displayName}\".`\n )\n );\n\n this.warnAttrsFnObjectKeyDeprecated = once(\n (key, displayName): void =>\n // eslint-disable-next-line no-console\n console.warn(\n `Functions as object-form attrs({}) keys are now deprecated and will be removed in a future version of styled-components. Switch to the new attrs(props => ({})) syntax instead for easier and more powerful composition. The attrs key in question is \"${key}\" on component \"${displayName}\".`,\n `\\n ${new Error().stack}`\n )\n );\n\n this.warnNonStyledComponentAttrsObjectKey = once(\n (key, displayName): void =>\n // eslint-disable-next-line no-console\n console.warn(\n `It looks like you've used a non styled-component as the value for the \"${key}\" prop in an object-form attrs constructor of \"${displayName}\".\\n` +\n 'You should use the new function-form attrs constructor which avoids this issue: attrs(props => ({ yourStuff }))\\n' +\n \"To continue using the deprecated object syntax, you'll need to wrap your component prop in a function to make it available inside the styled component (you'll still get the deprecation warning though.)\\n\" +\n `For example, { ${key}: () => InnerComponent } instead of { ${key}: InnerComponent }`\n )\n );\n }\n }\n\n render() {\n return (\n <ThemeConsumer>\n {(theme?: Theme) => {\n const {\n as: renderAs,\n forwardedAs,\n forwardedComponent,\n forwardedRef,\n innerRef,\n style = [],\n ...props\n } = this.props;\n\n const { defaultProps, displayName, target } = forwardedComponent;\n\n const generatedStyles = this.generateAndInjectStyles(\n determineTheme(this.props, theme, defaultProps) \|\| EMPTY_OBJECT,\n this.props\n );\n\n const propsForElement = {\n ...this.attrs,\n ...props,\n style: [generatedStyles].concat(style),\n };\n\n if (forwardedAs) propsForElement.as = forwardedAs;\n if (forwardedRef) propsForElement.ref = forwardedRef;\n\n if (process.env.NODE_ENV !== 'production' && innerRef) {\n this.warnInnerRef(displayName);\n }\n\n return createElement(renderAs \|\| target, propsForElement);\n }}\n </ThemeConsumer>\n );\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 resolvedAttrDef = resolvedAttrDef(context);\n attrDefWasFn = true;\n }\n\n / eslint-disable guard-for-in /\n for (key in resolvedAttrDef) {\n attr = resolvedAttrDef[key];\n\n if (!attrDefWasFn) {\n if (isFunction(attr) && !isDerivedReactComponent(attr) && !isStyledComponent(attr)) {\n if (process.env.NODE_ENV !== 'production') {\n this.warnAttrsFnObjectKeyDeprecated(key, this.props.forwardedComponent.displayName);\n }\n\n attr = attr(context);\n\n if (process.env.NODE_ENV !== 'production' && React.isValidElement(attr)) {\n this.warnNonStyledComponentAttrsObjectKey(\n key,\n this.props.forwardedComponent.displayName\n );\n }\n }\n }\n\n this.attrs[key] = attr;\n context[key] = attr;\n }\n / eslint-enable /\n });\n\n return context;\n }\n\n generateAndInjectStyles(theme: any, props: any) {\n const { inlineStyle } = props.forwardedComponent;\n\n const executionContext = this.buildExecutionContext(\n theme,\n props,\n props.forwardedComponent.attrs\n );\n\n return inlineStyle.generateStyleObject(executionContext);\n }\n\n setNativeProps(nativeProps: Object) {\n if (this.root !== undefined) {\n // $FlowFixMe\n this.root.setNativeProps(nativeProps);\n } else if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line no-console\n console.warn(\n 'setNativeProps was called on a Styled Component wrapping a stateless functional component.'\n );\n }\n }\n}\n\nexport default (InlineStyle: Function) => {\n const createStyledNativeComponent = (target: Target, options: Object, rules: RuleSet) => {\n const {\n attrs = EMPTY_ARRAY,\n displayName = generateDisplayName(target),\n ParentComponent = StyledNativeComponent,\n } = options;\n\n const isClass = !isTag(target);\n const isTargetStyledComp = isStyledComponent(target);\n\n // $FlowFixMe\n const WrappedStyledNativeComponent = React.forwardRef((props, ref) => (\n <ParentComponent\n {...props}\n forwardedComponent={WrappedStyledNativeComponent}\n forwardedRef={ref}\n />\n ));\n\n const finalAttrs =\n // $FlowFixMe\n isTargetStyledComp && target.attrs\n ? Array.prototype.concat(target.attrs, attrs).filter(Boolean)\n : attrs;\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\n // $FlowFixMe\n WrappedStyledNativeComponent.attrs = finalAttrs;\n\n WrappedStyledNativeComponent.displayName = displayName;\n\n // $FlowFixMe\n WrappedStyledNativeComponent.inlineStyle = new InlineStyle(\n // $FlowFixMe\n isTargetStyledComp ? target.inlineStyle.rules.concat(rules) : rules\n );\n\n // $FlowFixMe\n WrappedStyledNativeComponent.styledComponentId = 'StyledNativeComponent';\n\n // $FlowFixMe\n WrappedStyledNativeComponent.target = isTargetStyledComp\n ? // $FlowFixMe\n target.target\n : target;\n\n // $FlowFixMe\n WrappedStyledNativeComponent.withComponent = function withComponent(tag: Target) {\n const { displayName: _, componentId: __, ...optionsToCopy } = options;\n const newOptions = {\n ...optionsToCopy,\n attrs: finalAttrs,\n ParentComponent,\n };\n\n return createStyledNativeComponent(tag, newOptions, rules);\n };\n\n // $FlowFixMe\n Object.defineProperty(WrappedStyledNativeComponent, 'defaultProps', {\n get() {\n return this._foldedDefaultProps;\n },\n\n set(obj) {\n // $FlowFixMe\n this._foldedDefaultProps = isTargetStyledComp ? merge(target.defaultProps, obj) : obj;\n },\n });\n\n if (isClass) {\n hoist(WrappedStyledNativeComponent, target, {\n // all SC-specific things should not be hoisted\n attrs: true,\n displayName: true,\n inlineStyle: true,\n styledComponentId: true,\n target: true,\n withComponent: true,\n });\n }\n\n return WrappedStyledNativeComponent;\n };\n\n return createStyledNativeComponent;\n};\n"],"names":["__VERSION__","i","attrs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CC;;CAAA;;;;;;;;;;;;;;;;mCAgBgDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iEA2DO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wDAoSnD;;WAEMC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8BCtYP;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACXF;;;;;;;;;;;8BAUA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sCCCA;;;;;UAFAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6FAiIkCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"styled-components.native.cjs.js","sources":["../../src/models/StyleTags.js","../../src/models/InlineStyle.js","../../src/models/ThemeProvider.js","../../src/models/StyledNativeComponent.js"],"sourcesContent":["// @flow\n/* eslint-disable flowtype/object-type-delimiter /\n/ eslint-disable react/prop-types /\n\nimport React, { type Element } from 'react';\nimport { IS_BROWSER, DISABLE_SPEEDY, SC_ATTR, SC_VERSION_ATTR } from '../constants';\nimport StyledError from '../utils/error';\nimport { type ExtractedComp } from '../utils/extractCompsFromCSS';\nimport { splitByRules } from '../utils/stringifyRules';\nimport getNonce from '../utils/nonce';\n\nimport {\n type Names,\n addNameForId,\n resetIdNames,\n hasNameForId,\n stringifyNames,\n cloneNames,\n} from '../utils/styleNames';\n\nimport { sheetForTag, safeInsertRule, deleteRules } from '../utils/insertRuleHelpers';\n\ndeclare var __VERSION__: string;\n\nexport interface Tag<T> {\n // $FlowFixMe: Doesn't seem to accept any combination w/ HTMLStyleElement for some reason\n styleTag: HTMLStyleElement \| null;\n / lists all ids of the tag /\n getIds(): string[];\n / checks whether `name` is already injected for `id` /\n hasNameForId(id: string, name: string): boolean;\n / inserts a marker to ensure the id's correct position in the sheet /\n insertMarker(id: string): T;\n / inserts rules according to the ids markers /\n insertRules(id: string, cssRules: string[], name: ?string): void;\n / removes all rules belonging to the id, keeping the marker around /\n removeRules(id: string): void;\n css(): string;\n toHTML(additionalAttrs: ?string): string;\n toElement(): Element<>;\n clone(): Tag<T>;\n /* used in server side rendering to indicate that the rules in the tag have been flushed to HTML /\n sealed: boolean;\n}\n\n/ this marker separates component styles and is important for rehydration /\nconst makeTextMarker = id => `\\n/ sc-component-id: ${id} /\\n`;\n\n/ add up all numbers in array up until and including the index /\nconst addUpUntilIndex = (sizes: number[], index: number): number => {\n let totalUpToIndex = 0;\n for (let i = 0; i <= index; i += 1) {\n totalUpToIndex += sizes[i];\n }\n\n return totalUpToIndex;\n};\n\n/ create a new style tag after lastEl /\nconst makeStyleTag = (target: ?HTMLElement, tagEl: ?Node, insertBefore: ?boolean) => {\n let targetDocument = document;\n if(target) targetDocument = target.ownerDocument;\n else if(tagEl) targetDocument = tagEl.ownerDocument;\n\n const el = targetDocument.createElement('style');\n el.setAttribute(SC_ATTR, '');\n el.setAttribute(SC_VERSION_ATTR, __VERSION__);\n\n const nonce = getNonce();\n if (nonce) {\n el.setAttribute('nonce', nonce);\n }\n\n / Work around insertRule quirk in EdgeHTML /\n el.appendChild(targetDocument.createTextNode(''));\n\n if (target && !tagEl) {\n / Append to target when no previous element was passed /\n target.appendChild(el);\n } else {\n if (!tagEl \|\| !target \|\| !tagEl.parentNode) {\n throw new StyledError(6);\n }\n\n / Insert new style tag after the previous one /\n tagEl.parentNode.insertBefore(el, insertBefore ? tagEl : tagEl.nextSibling);\n }\n\n return el;\n};\n\n/ takes a css factory function and outputs an html styled tag factory /\nconst wrapAsHtmlTag = (css: () => string, names: Names) => (additionalAttrs: ?string): string => {\n const nonce = getNonce();\n const attrs = [\n nonce && `nonce=\"${nonce}\"`,\n `${SC_ATTR}=\"${stringifyNames(names)}\"`,\n `${SC_VERSION_ATTR}=\"${__VERSION__}\"`,\n additionalAttrs,\n ];\n\n const htmlAttr = attrs.filter(Boolean).join(' ');\n return `<style ${htmlAttr}>${css()}</style>`;\n};\n\n/ takes a css factory function and outputs an element factory /\nconst wrapAsElement = (css: () => string, names: Names) => () => {\n const props = {\n [SC_ATTR]: stringifyNames(names),\n [SC_VERSION_ATTR]: __VERSION__,\n };\n\n const nonce = getNonce();\n if (nonce) {\n // $FlowFixMe\n props.nonce = nonce;\n }\n\n // eslint-disable-next-line react/no-danger\n return <style {...props} dangerouslySetInnerHTML={{ __html: css() }} />;\n};\n\nconst getIdsFromMarkersFactory = (markers: Object) => (): string[] => Object.keys(markers);\n\n/ speedy tags utilise insertRule /\nconst makeSpeedyTag = (el: HTMLStyleElement, getImportRuleTag: ?() => Tag<any>): Tag<number> => {\n const names: Names = (Object.create(null): Object);\n const markers = Object.create(null);\n const sizes: number[] = [];\n\n const extractImport = getImportRuleTag !== undefined;\n / indicates whether getImportRuleTag was called /\n let usedImportRuleTag = false;\n\n const insertMarker = id => {\n const prev = markers[id];\n if (prev !== undefined) {\n return prev;\n }\n\n markers[id] = sizes.length;\n sizes.push(0);\n resetIdNames(names, id);\n\n return markers[id];\n };\n\n const insertRules = (id, cssRules, name) => {\n const marker = insertMarker(id);\n const sheet = sheetForTag(el);\n const insertIndex = addUpUntilIndex(sizes, marker);\n\n let injectedRules = 0;\n const importRules = [];\n const cssRulesSize = cssRules.length;\n\n for (let i = 0; i < cssRulesSize; i += 1) {\n const cssRule = cssRules[i];\n let mayHaveImport = extractImport; / @import rules are reordered to appear first /\n if (mayHaveImport && cssRule.indexOf('@import') !== -1) {\n importRules.push(cssRule);\n } else if (safeInsertRule(sheet, cssRule, insertIndex + injectedRules)) {\n mayHaveImport = false;\n injectedRules += 1;\n }\n }\n\n if (extractImport && importRules.length > 0) {\n usedImportRuleTag = true;\n // $FlowFixMe\n getImportRuleTag().insertRules(`${id}-import`, importRules);\n }\n\n sizes[marker] += injectedRules; / add up no of injected rules /\n addNameForId(names, id, name);\n };\n\n const removeRules = id => {\n const marker = markers[id];\n if (marker === undefined) return;\n // $FlowFixMe\n if (el.isConnected === false) return;\n\n const size = sizes[marker];\n const sheet = sheetForTag(el);\n const removalIndex = addUpUntilIndex(sizes, marker) - 1;\n deleteRules(sheet, removalIndex, size);\n sizes[marker] = 0;\n resetIdNames(names, id);\n\n if (extractImport && usedImportRuleTag) {\n // $FlowFixMe\n getImportRuleTag().removeRules(`${id}-import`);\n }\n };\n\n const css = () => {\n const { cssRules } = sheetForTag(el);\n let str = '';\n\n // eslint-disable-next-line guard-for-in\n for (const id in markers) {\n str += makeTextMarker(id);\n const marker = markers[id];\n const end = addUpUntilIndex(sizes, marker);\n const size = sizes[marker];\n for (let i = end - size; i < end; i += 1) {\n const rule = cssRules[i];\n if (rule !== undefined) {\n str += rule.cssText;\n }\n }\n }\n\n return str;\n };\n\n return {\n clone() {\n throw new StyledError(5);\n },\n css,\n getIds: getIdsFromMarkersFactory(markers),\n hasNameForId: hasNameForId(names),\n insertMarker,\n insertRules,\n removeRules,\n sealed: false,\n styleTag: el,\n toElement: wrapAsElement(css, names),\n toHTML: wrapAsHtmlTag(css, names),\n };\n};\n\nconst makeTextNode = (targetDocument, id) => targetDocument.createTextNode(makeTextMarker(id));\n\nconst makeBrowserTag = (el: HTMLStyleElement, getImportRuleTag: ?() => Tag<any>): Tag<Text> => {\n const names = (Object.create(null): Object);\n const markers = Object.create(null);\n\n const extractImport = getImportRuleTag !== undefined;\n\n / indicates whether getImportRuleTag was called /\n let usedImportRuleTag = false;\n\n const insertMarker = id => {\n const prev = markers[id];\n if (prev !== undefined) {\n return prev;\n }\n\n markers[id] = makeTextNode(el.ownerDocument, id);\n el.appendChild(markers[id]);\n names[id] = Object.create(null);\n\n return markers[id];\n };\n\n const insertRules = (id, cssRules, name) => {\n const marker = insertMarker(id);\n const importRules = [];\n const cssRulesSize = cssRules.length;\n\n for (let i = 0; i < cssRulesSize; i += 1) {\n const rule = cssRules[i];\n let mayHaveImport = extractImport;\n if (mayHaveImport && rule.indexOf('@import') !== -1) {\n importRules.push(rule);\n } else {\n mayHaveImport = false;\n const separator = i === cssRulesSize - 1 ? '' : ' ';\n marker.appendData(`${rule}${separator}`);\n }\n }\n\n addNameForId(names, id, name);\n\n if (extractImport && importRules.length > 0) {\n usedImportRuleTag = true;\n // $FlowFixMe\n getImportRuleTag().insertRules(`${id}-import`, importRules);\n }\n };\n\n const removeRules = id => {\n const marker = markers[id];\n if (marker === undefined) return;\n\n / create new empty text node and replace the current one /\n const newMarker = makeTextNode(el.ownerDocument, id);\n el.replaceChild(newMarker, marker);\n markers[id] = newMarker;\n resetIdNames(names, id);\n\n if (extractImport && usedImportRuleTag) {\n // $FlowFixMe\n getImportRuleTag().removeRules(`${id}-import`);\n }\n };\n\n const css = () => {\n let str = '';\n\n // eslint-disable-next-line guard-for-in\n for (const id in markers) {\n str += markers[id].data;\n }\n\n return str;\n };\n\n return {\n clone() {\n throw new StyledError(5);\n },\n css,\n getIds: getIdsFromMarkersFactory(markers),\n hasNameForId: hasNameForId(names),\n insertMarker,\n insertRules,\n removeRules,\n sealed: false,\n styleTag: el,\n toElement: wrapAsElement(css, names),\n toHTML: wrapAsHtmlTag(css, names),\n };\n};\n\nconst makeServerTag = (namesArg, markersArg): Tag<[string]> => {\n const names = namesArg === undefined ? (Object.create(null): Object) : namesArg;\n const markers = markersArg === undefined ? Object.create(null) : markersArg;\n\n const insertMarker = id => {\n const prev = markers[id];\n if (prev !== undefined) {\n return prev;\n }\n\n return (markers[id] = ['']);\n };\n\n const insertRules = (id, cssRules, name) => {\n const marker = insertMarker(id);\n marker[0] += cssRules.join(' ');\n addNameForId(names, id, name);\n };\n\n const removeRules = id => {\n const marker = markers[id];\n if (marker === undefined) return;\n marker[0] = '';\n resetIdNames(names, id);\n };\n\n const css = () => {\n let str = '';\n // eslint-disable-next-line guard-for-in\n for (const id in markers) {\n const cssForId = markers[id][0];\n if (cssForId) {\n str += makeTextMarker(id) + cssForId;\n }\n }\n return str;\n };\n\n const clone = () => {\n const namesClone = cloneNames(names);\n const markersClone = Object.create(null);\n\n // eslint-disable-next-line guard-for-in\n for (const id in markers) {\n markersClone[id] = [markers[id][0]];\n }\n\n return makeServerTag(namesClone, markersClone);\n };\n\n const tag = {\n clone,\n css,\n getIds: getIdsFromMarkersFactory(markers),\n hasNameForId: hasNameForId(names),\n insertMarker,\n insertRules,\n removeRules,\n sealed: false,\n styleTag: null,\n toElement: wrapAsElement(css, names),\n toHTML: wrapAsHtmlTag(css, names),\n };\n\n return tag;\n};\n\nexport const makeTag = (\n target: ?HTMLElement,\n tagEl: ?HTMLStyleElement,\n forceServer?: boolean,\n insertBefore?: boolean,\n getImportRuleTag?: () => Tag<any>\n): Tag<any> => {\n if (IS_BROWSER && !forceServer) {\n const el = makeStyleTag(target, tagEl, insertBefore);\n\n if (DISABLE_SPEEDY) {\n return makeBrowserTag(el, getImportRuleTag);\n } else {\n return makeSpeedyTag(el, getImportRuleTag);\n }\n }\n\n return makeServerTag();\n};\n\nexport const rehydrate = (\n tag: Tag<any>,\n els: HTMLStyleElement[],\n extracted: ExtractedComp[]\n): void => {\n / add all extracted components to the new tag /\n for (let i = 0, len = extracted.length; i < len; i += 1) {\n const { componentId, cssFromDOM } = extracted[i];\n const cssRules = splitByRules(cssFromDOM);\n tag.insertRules(componentId, cssRules);\n }\n\n / remove old HTMLStyleElements, since they have been rehydrated /\n for (let i = 0, len = els.length; i < len; i += 1) {\n const el = els[i];\n if (el.parentNode) {\n el.parentNode.removeChild(el);\n }\n }\n};\n","// @flow\n/ eslint-disable import/no-unresolved /\nimport transformDeclPairs from 'css-to-react-native';\n\n// $FlowFixMe\nimport hashStr from '../vendor/glamor/hash';\nimport type { RuleSet, StyleSheet } from '../types';\nimport flatten from '../utils/flatten';\n// $FlowFixMe\nimport parse from '../vendor/postcss-safe-parser/parse';\n\nlet generated = {};\n\nexport const resetStyleCache = () => {\n generated = {};\n};\n\n/\n InlineStyle takes arbitrary CSS and generates a flat object\n /\nexport default (styleSheet: StyleSheet) => {\n class InlineStyle {\n rules: RuleSet;\n\n constructor(rules: RuleSet) {\n this.rules = rules;\n }\n\n generateStyleObject(executionContext: Object) {\n const flatCSS = flatten(this.rules, executionContext).join('');\n\n const hash = hashStr(flatCSS);\n if (!generated[hash]) {\n const root = parse(flatCSS);\n const declPairs = [];\n root.each(node => {\n if (node.type === 'decl') {\n declPairs.push([node.prop, node.value]);\n } else if (process.env.NODE_ENV !== 'production' && node.type !== 'comment') {\n / eslint-disable no-console /\n console.warn(`Node of type ${node.type} not supported as an inline style`);\n }\n });\n // RN currently does not support differing values for the corner radii of Image\n // components (but does for View). It is almost impossible to tell whether we'll have\n // support, so we'll just disable multiple values here.\n // https://github.com/styled-components/css-to-react-native/issues/11\n const styleObject = transformDeclPairs(declPairs, [\n 'borderRadius',\n 'borderWidth',\n 'borderColor',\n 'borderStyle',\n ]);\n const styles = styleSheet.create({\n generated: styleObject,\n });\n generated[hash] = styles.generated;\n }\n return generated[hash];\n }\n }\n\n return InlineStyle;\n};\n","// @flow\nimport React, { createContext, Component, type Element } from 'react';\nimport memoize from 'memoize-one';\nimport StyledError from '../utils/error';\nimport isFunction from '../utils/isFunction';\n\nexport type Theme = { [key: string]: mixed };\n\ntype Props = {\n children?: Element<any>,\n theme: Theme \| ((outerTheme: Theme) => void),\n};\n\nexport const ThemeContext = createContext();\n\nexport const ThemeConsumer = ThemeContext.Consumer;\n\n/\n Provide a theme to an entire react component tree via context\n /\nexport default class ThemeProvider extends Component<Props> {\n getContext: (theme: Theme \| ((outerTheme: Theme) => void), outerTheme?: Theme) => Theme;\n\n renderInner: Function;\n\n constructor(props: Props) {\n super(props);\n this.getContext = memoize(this.getContext.bind(this));\n this.renderInner = this.renderInner.bind(this);\n }\n\n render() {\n if (!this.props.children) return null;\n\n return <ThemeContext.Consumer>{this.renderInner}</ThemeContext.Consumer>;\n }\n\n renderInner(outerTheme?: Theme) {\n const context = this.getContext(this.props.theme, outerTheme);\n\n return (\n <ThemeContext.Provider value={context}>\n {this.props.children}\n </ThemeContext.Provider>\n );\n }\n\n /\n Get the theme from the props, supporting both (outerTheme) => {}\n * as well as object notation\n /\n getTheme(theme: (outerTheme: ?Theme) => void, outerTheme: ?Theme) {\n if (isFunction(theme)) {\n const mergedTheme = theme(outerTheme);\n\n if (\n process.env.NODE_ENV !== 'production' &&\n (mergedTheme === null \|\| Array.isArray(mergedTheme) \|\| typeof mergedTheme !== 'object')\n ) {\n throw new StyledError(7);\n }\n\n return mergedTheme;\n }\n\n if (theme === null \|\| Array.isArray(theme) \|\| typeof theme !== 'object') {\n throw new StyledError(8);\n }\n\n return { ...outerTheme, ...theme };\n }\n\n getContext(theme: (outerTheme: ?Theme) => void, outerTheme?: Theme) {\n return this.getTheme(theme, outerTheme);\n }\n}\n","// @flow\nimport merge from 'merge-anything';\nimport React, { createElement, Component } from 'react';\nimport determineTheme from '../utils/determineTheme';\nimport { EMPTY_ARRAY, EMPTY_OBJECT } from '../utils/empties';\nimport generateDisplayName from '../utils/generateDisplayName';\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 { ThemeConsumer } from './ThemeProvider';\n\nimport type { Theme } from './ThemeProvider';\nimport type { Attrs, RuleSet, Target } from '../types';\n\nclass StyledNativeComponent extends Component<, > {\n root: ?Object;\n\n warnInnerRef: Function;\n\n warnAttrsFnObjectKeyDeprecated: Function;\n\n warnNonStyledComponentAttrsObjectKey: Function;\n\n attrs = {};\n\n constructor(props) {\n super(props);\n\n if (process.env.NODE_ENV !== 'production') {\n this.warnInnerRef = once(displayName =>\n // eslint-disable-next-line no-console\n console.warn(\n `The \"innerRef\" API has been removed in styled-components v4 in favor of React 16 ref forwarding, use \"ref\" instead like a typical component. \"innerRef\" was detected on component \"${displayName}\".`\n )\n );\n\n this.warnAttrsFnObjectKeyDeprecated = once(\n (key, displayName): void =>\n // eslint-disable-next-line no-console\n console.warn(\n `Functions as object-form attrs({}) keys are now deprecated and will be removed in a future version of styled-components. Switch to the new attrs(props => ({})) syntax instead for easier and more powerful composition. The attrs key in question is \"${key}\" on component \"${displayName}\".`,\n `\\n ${new Error().stack}`\n )\n );\n\n this.warnNonStyledComponentAttrsObjectKey = once(\n (key, displayName): void =>\n // eslint-disable-next-line no-console\n console.warn(\n `It looks like you've used a non styled-component as the value for the \"${key}\" prop in an object-form attrs constructor of \"${displayName}\".\\n` +\n 'You should use the new function-form attrs constructor which avoids this issue: attrs(props => ({ yourStuff }))\\n' +\n \"To continue using the deprecated object syntax, you'll need to wrap your component prop in a function to make it available inside the styled component (you'll still get the deprecation warning though.)\\n\" +\n `For example, { ${key}: () => InnerComponent } instead of { ${key}: InnerComponent }`\n )\n );\n }\n }\n\n render() {\n return (\n <ThemeConsumer>\n {(theme?: Theme) => {\n const {\n as: renderAs,\n forwardedAs,\n forwardedComponent,\n forwardedRef,\n innerRef,\n style = [],\n ...props\n } = this.props;\n\n const { defaultProps, displayName, target } = forwardedComponent;\n\n const generatedStyles = this.generateAndInjectStyles(\n determineTheme(this.props, theme, defaultProps) \|\| EMPTY_OBJECT,\n this.props\n );\n\n const propsForElement = {\n ...props,\n ...this.attrs,\n style: [generatedStyles].concat(style),\n };\n\n if (forwardedAs) propsForElement.as = forwardedAs;\n if (forwardedRef) propsForElement.ref = forwardedRef;\n\n if (process.env.NODE_ENV !== 'production' && innerRef) {\n this.warnInnerRef(displayName);\n }\n\n return createElement(renderAs \|\| target, propsForElement);\n }}\n </ThemeConsumer>\n );\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 resolvedAttrDef = resolvedAttrDef(context);\n attrDefWasFn = true;\n }\n\n / eslint-disable guard-for-in /\n for (key in resolvedAttrDef) {\n attr = resolvedAttrDef[key];\n\n if (!attrDefWasFn) {\n if (isFunction(attr) && !isDerivedReactComponent(attr) && !isStyledComponent(attr)) {\n if (process.env.NODE_ENV !== 'production') {\n this.warnAttrsFnObjectKeyDeprecated(key, this.props.forwardedComponent.displayName);\n }\n\n attr = attr(context);\n\n if (process.env.NODE_ENV !== 'production' && React.isValidElement(attr)) {\n this.warnNonStyledComponentAttrsObjectKey(\n key,\n this.props.forwardedComponent.displayName\n );\n }\n }\n }\n\n this.attrs[key] = attr;\n context[key] = attr;\n }\n / eslint-enable /\n });\n\n return context;\n }\n\n generateAndInjectStyles(theme: any, props: any) {\n const { inlineStyle } = props.forwardedComponent;\n\n const executionContext = this.buildExecutionContext(\n theme,\n props,\n props.forwardedComponent.attrs\n );\n\n return inlineStyle.generateStyleObject(executionContext);\n }\n\n setNativeProps(nativeProps: Object) {\n if (this.root !== undefined) {\n // $FlowFixMe\n this.root.setNativeProps(nativeProps);\n } else if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line no-console\n console.warn(\n 'setNativeProps was called on a Styled Component wrapping a stateless functional component.'\n );\n }\n }\n}\n\nexport default (InlineStyle: Function) => {\n const createStyledNativeComponent = (target: Target, options: Object, rules: RuleSet) => {\n const {\n attrs = EMPTY_ARRAY,\n displayName = generateDisplayName(target),\n ParentComponent = StyledNativeComponent,\n } = options;\n\n const isClass = !isTag(target);\n const isTargetStyledComp = isStyledComponent(target);\n\n // $FlowFixMe\n const WrappedStyledNativeComponent = React.forwardRef((props, ref) => (\n <ParentComponent\n {...props}\n forwardedComponent={WrappedStyledNativeComponent}\n forwardedRef={ref}\n />\n ));\n\n const finalAttrs =\n // $FlowFixMe\n isTargetStyledComp && target.attrs\n ? Array.prototype.concat(target.attrs, attrs).filter(Boolean)\n : attrs;\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\n // $FlowFixMe\n WrappedStyledNativeComponent.attrs = finalAttrs;\n\n WrappedStyledNativeComponent.displayName = displayName;\n\n // $FlowFixMe\n WrappedStyledNativeComponent.inlineStyle = new InlineStyle(\n // $FlowFixMe\n isTargetStyledComp ? target.inlineStyle.rules.concat(rules) : rules\n );\n\n // $FlowFixMe\n WrappedStyledNativeComponent.styledComponentId = 'StyledNativeComponent';\n\n // $FlowFixMe\n WrappedStyledNativeComponent.target = isTargetStyledComp\n ? // $FlowFixMe\n target.target\n : target;\n\n // $FlowFixMe\n WrappedStyledNativeComponent.withComponent = function withComponent(tag: Target) {\n const { displayName: _, componentId: __, ...optionsToCopy } = options;\n const newOptions = {\n ...optionsToCopy,\n attrs: finalAttrs,\n ParentComponent,\n };\n\n return createStyledNativeComponent(tag, newOptions, rules);\n };\n\n // $FlowFixMe\n Object.defineProperty(WrappedStyledNativeComponent, 'defaultProps', {\n get() {\n return this._foldedDefaultProps;\n },\n\n set(obj) {\n // $FlowFixMe\n this._foldedDefaultProps = isTargetStyledComp ? merge(target.defaultProps, obj) : obj;\n },\n });\n\n if (isClass) {\n hoist(WrappedStyledNativeComponent, target, {\n // all SC-specific things should not be hoisted\n attrs: true,\n displayName: true,\n inlineStyle: true,\n styledComponentId: true,\n target: true,\n withComponent: true,\n });\n }\n\n return WrappedStyledNativeComponent;\n };\n\n return createStyledNativeComponent;\n};\n"],"names":["i","attrs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CC;;CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iEA+EuD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wDAsSnD;;WAEMA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8BC5YP;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACXF;;;;;;;;;;;8BAUA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sCCCA;;;;;UAFAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6FAiIkCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/native/dist/styled-components.native.esm.js CHANGED Viewed

@@ -7,7 +7,6 @@ import supportsColor from 'supports-color';
 import transformDeclPairs from 'css-to-react-native';
 import memoize from 'memoize-one';
 import merge from 'merge-anything';
-import reactNative, { StyleSheet } from 'react-native';
 //
 // Source: https://github.com/garycourt/murmurhash-js/blob/master/murmurhash2_gc.js
@@ -164,7 +163,7 @@ var ERRORS = process.env.NODE_ENV !== 'production' ? {
   "9": "Missing document `<head>`\n\n",
   "10": "Cannot find a StyleSheet instance. Usually this happens if there are multiple copies of styled-components loaded at once. Check out this issue for how to troubleshoot and fix the common cases where this situation can happen: https://github.com/styled-components/styled-components/issues/1941#issuecomment-417862021\n\n",
   "11": "_This error was replaced with a dev-time warning, it will be deleted for v4 final._ [createGlobalStyle] received children which will not be rendered. Please use the component without passing children elements.\n\n",
-  "12": "It seems you are interpolating a keyframe declaration (%s) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\\`\\` helper (see https://www.styled-components.com/docs/api#css), which ensures the styles are injected correctly.\n\n",
+  "12": "It seems you are interpolating a keyframe declaration (%s) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\\`\\` helper which ensures the styles are injected correctly. See https://www.styled-components.com/docs/api#css\n\n",
   "13": "%s is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.\n"
 } : {};
@@ -382,9 +381,9 @@ var sheetForTag = function sheetForTag(tag) {
   if (tag.sheet) return tag.sheet;
   /* Firefox quirk requires us to step through all stylesheets to find one owned by the given tag */
-  var size = document.styleSheets.length;
+  var size = tag.ownerDocument.styleSheets.length;
   for (var i = 0; i < size; i += 1) {
-    var sheet = document.styleSheets[i];
+    var sheet = tag.ownerDocument.styleSheets[i];
     // $FlowFixMe
     if (sheet.ownerNode === tag) return sheet;
   }
@@ -438,9 +437,12 @@ var addUpUntilIndex = function addUpUntilIndex(sizes, index) {
 /* create a new style tag after lastEl */
 var makeStyleTag = function makeStyleTag(target, tagEl, insertBefore) {
-  var el = document.createElement('style');
+  var targetDocument = document;
+  if (target) targetDocument = target.ownerDocument;else if (tagEl) targetDocument = tagEl.ownerDocument;
+  var el = targetDocument.createElement('style');
   el.setAttribute(SC_ATTR, '');
-  el.setAttribute(SC_VERSION_ATTR, "4.3.1");
+  el.setAttribute(SC_VERSION_ATTR, "4.4.1");
   var nonce = getNonce();
   if (nonce) {
@@ -448,7 +450,7 @@ var makeStyleTag = function makeStyleTag(target, tagEl, insertBefore) {
   }
   /* Work around insertRule quirk in EdgeHTML */
-  el.appendChild(document.createTextNode(''));
+  el.appendChild(targetDocument.createTextNode(''));
   if (target && !tagEl) {
     /* Append to target when no previous element was passed */
@@ -469,7 +471,7 @@ var makeStyleTag = function makeStyleTag(target, tagEl, insertBefore) {
 var wrapAsHtmlTag = function wrapAsHtmlTag(css, names) {
   return function (additionalAttrs) {
     var nonce = getNonce();
-    var attrs = [nonce && 'nonce="' + nonce + '"', SC_ATTR + '="' + stringifyNames(names) + '"', SC_VERSION_ATTR + '="' + "4.3.1" + '"', additionalAttrs];
+    var attrs = [nonce && 'nonce="' + nonce + '"', SC_ATTR + '="' + stringifyNames(names) + '"', SC_VERSION_ATTR + '="' + "4.4.1" + '"', additionalAttrs];
     var htmlAttr = attrs.filter(Boolean).join(' ');
     return '<style ' + htmlAttr + '>' + css() + '</style>';
@@ -481,7 +483,7 @@ var wrapAsElement = function wrapAsElement(css, names) {
   return function () {
     var _props;
-    var props = (_props = {}, _props[SC_ATTR] = stringifyNames(names), _props[SC_VERSION_ATTR] = "4.3.1", _props);
+    var props = (_props = {}, _props[SC_ATTR] = stringifyNames(names), _props[SC_VERSION_ATTR] = "4.4.1", _props);
     var nonce = getNonce();
     if (nonce) {
@@ -556,6 +558,8 @@ var makeSpeedyTag = function makeSpeedyTag(el, getImportRuleTag) {
   var removeRules = function removeRules(id) {
     var marker = markers[id];
     if (marker === undefined) return;
+    // $FlowFixMe
+    if (el.isConnected === false) return;
     var size = sizes[marker];
     var sheet = sheetForTag(el);
@@ -611,8 +615,8 @@ var makeSpeedyTag = function makeSpeedyTag(el, getImportRuleTag) {
   };
 };
-var makeTextNode = function makeTextNode(id) {
-  return document.createTextNode(makeTextMarker(id));
+var makeTextNode = function makeTextNode(targetDocument, id) {
+  return targetDocument.createTextNode(makeTextMarker(id));
 };
 var makeBrowserTag = function makeBrowserTag(el, getImportRuleTag) {
@@ -630,7 +634,7 @@ var makeBrowserTag = function makeBrowserTag(el, getImportRuleTag) {
       return prev;
     }
-    markers[id] = makeTextNode(id);
+    markers[id] = makeTextNode(el.ownerDocument, id);
     el.appendChild(markers[id]);
     names[id] = Object.create(null);
@@ -668,7 +672,7 @@ var makeBrowserTag = function makeBrowserTag(el, getImportRuleTag) {
     if (marker === undefined) return;
     /* create new empty text node and replace the current one */
-    var newMarker = makeTextNode(id);
+    var newMarker = makeTextNode(el.ownerDocument, id);
     el.replaceChild(newMarker, marker);
     markers[id] = newMarker;
     resetIdNames(names, id);
@@ -826,7 +830,7 @@ if (IS_BROWSER) {
 var sheetRunningId = 0;
 var master = void 0;
-var StyleSheet$1 = function () {
+var StyleSheet = function () {
   /* a map from ids to tags */
@@ -844,12 +848,12 @@ var StyleSheet$1 = function () {
   /* children (aka clones) of this StyleSheet inheriting all and future injections */
-  function StyleSheet$$1() {
+  function StyleSheet() {
     var _this = this;
     var target = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : IS_BROWSER ? document.head : null;
     var forceServer = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    classCallCheck(this, StyleSheet$$1);
+    classCallCheck(this, StyleSheet);
     this.getImportRuleTag = function () {
       var importRuleTag = _this.importRuleTag;
@@ -880,7 +884,7 @@ var StyleSheet$1 = function () {
   /* rehydrate all SSR'd style tags */
-  StyleSheet$$1.prototype.rehydrate = function rehydrate$$1() {
+  StyleSheet.prototype.rehydrate = function rehydrate$$1() {
     if (!IS_BROWSER || this.forceServer) return this;
     var els = [];
@@ -888,7 +892,7 @@ var StyleSheet$1 = function () {
     var isStreamed = false;
     /* retrieve all of our SSR style elements from the DOM */
-    var nodes = document.querySelectorAll('style[' + SC_ATTR + '][' + SC_VERSION_ATTR + '="' + "4.3.1" + '"]');
+    var nodes = document.querySelectorAll('style[' + SC_ATTR + '][' + SC_VERSION_ATTR + '="' + "4.4.1" + '"]');
     var nodesSize = nodes.length;
@@ -944,18 +948,18 @@ var StyleSheet$1 = function () {
   /* reset the internal "master" instance */
-  StyleSheet$$1.reset = function reset() {
+  StyleSheet.reset = function reset() {
     var forceServer = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-    master = new StyleSheet$$1(undefined, forceServer).rehydrate();
+    master = new StyleSheet(undefined, forceServer).rehydrate();
   };
   /* adds "children" to the StyleSheet that inherit all of the parents' rules
    * while their own rules do not affect the parent */
-  StyleSheet$$1.prototype.clone = function clone() {
-    var sheet = new StyleSheet$$1(this.target, this.forceServer);
+  StyleSheet.prototype.clone = function clone() {
+    var sheet = new StyleSheet(this.target, this.forceServer);
     /* add to clone array */
     this.clones.push(sheet);
@@ -983,7 +987,7 @@ var StyleSheet$1 = function () {
   /* force StyleSheet to create a new tag on the next injection */
-  StyleSheet$$1.prototype.sealAllTags = function sealAllTags() {
+  StyleSheet.prototype.sealAllTags = function sealAllTags() {
     this.capacity = 1;
     this.tags.forEach(function (tag) {
@@ -992,7 +996,7 @@ var StyleSheet$1 = function () {
     });
   };
-  StyleSheet$$1.prototype.makeTag = function makeTag$$1(tag) {
+  StyleSheet.prototype.makeTag = function makeTag$$1(tag) {
     var lastEl = tag ? tag.styleTag : null;
     var insertBefore = false;
@@ -1000,7 +1004,7 @@ var StyleSheet$1 = function () {
   };
   /* get a tag for a given componentId, assign the componentId to one, or shard */
-  StyleSheet$$1.prototype.getTagForId = function getTagForId(id) {
+  StyleSheet.prototype.getTagForId = function getTagForId(id) {
     /* simply return a tag, when the componentId was already assigned one */
     var prev = this.tagMap[id];
     if (prev !== undefined && !prev.sealed) {
@@ -1024,14 +1028,14 @@ var StyleSheet$1 = function () {
   /* mainly for createGlobalStyle to check for its id */
-  StyleSheet$$1.prototype.hasId = function hasId(id) {
+  StyleSheet.prototype.hasId = function hasId(id) {
     return this.tagMap[id] !== undefined;
   };
   /* caching layer checking id+name to already have a corresponding tag and injected rules */
-  StyleSheet$$1.prototype.hasNameForId = function hasNameForId(id, name) {
+  StyleSheet.prototype.hasNameForId = function hasNameForId(id, name) {
     /* exception for rehydrated names which are checked separately */
     if (this.ignoreRehydratedNames[id] === undefined && this.rehydratedNames[name]) {
       return true;
@@ -1044,7 +1048,7 @@ var StyleSheet$1 = function () {
   /* registers a componentId and registers it on its tag */
-  StyleSheet$$1.prototype.deferredInject = function deferredInject(id, cssRules) {
+  StyleSheet.prototype.deferredInject = function deferredInject(id, cssRules) {
     /* don't inject when the id is already registered */
     if (this.tagMap[id] !== undefined) return;
@@ -1061,7 +1065,7 @@ var StyleSheet$1 = function () {
   /* injects rules for a given id with a name that will need to be cached */
-  StyleSheet$$1.prototype.inject = function inject(id, cssRules, name) {
+  StyleSheet.prototype.inject = function inject(id, cssRules, name) {
     var clones = this.clones;
@@ -1088,7 +1092,7 @@ var StyleSheet$1 = function () {
   /* removes all rules for a given id, which doesn't remove its marker but resets it */
-  StyleSheet$$1.prototype.remove = function remove(id) {
+  StyleSheet.prototype.remove = function remove(id) {
     var tag = this.tagMap[id];
     if (tag === undefined) return;
@@ -1108,13 +1112,13 @@ var StyleSheet$1 = function () {
     this.deferred[id] = undefined;
   };
-  StyleSheet$$1.prototype.toHTML = function toHTML() {
+  StyleSheet.prototype.toHTML = function toHTML() {
     return this.tags.map(function (tag) {
       return tag.toHTML();
     }).join('');
   };
-  StyleSheet$$1.prototype.toReactElements = function toReactElements() {
+  StyleSheet.prototype.toReactElements = function toReactElements() {
     var id = this.id;
@@ -1124,10 +1128,10 @@ var StyleSheet$1 = function () {
     });
   };
-  createClass(StyleSheet$$1, null, [{
+  createClass(StyleSheet, null, [{
     key: 'master',
     get: function get$$1() {
-      return master || (master = new StyleSheet$$1().rehydrate());
+      return master || (master = new StyleSheet().rehydrate());
     }
     /* NOTE: This is just for backwards-compatibility with jest-styled-components */
@@ -1135,10 +1139,10 @@ var StyleSheet$1 = function () {
   }, {
     key: 'instance',
     get: function get$$1() {
-      return StyleSheet$$1.master;
+      return StyleSheet.master;
     }
   }]);
-  return StyleSheet$$1;
+  return StyleSheet;
 }();
 //
@@ -6123,7 +6127,7 @@ var ThemeProvider = function (_Component) {
     return React.createElement(
       ThemeContext.Provider,
       { value: context },
-      React.Children.only(this.props.children)
+      this.props.children
     );
   };
@@ -6219,7 +6223,7 @@ var StyledNativeComponent = function (_Component) {
         var generatedStyles = _this2.generateAndInjectStyles(determineTheme(_this2.props, theme, defaultProps) || EMPTY_OBJECT, _this2.props);
-        var propsForElement = _extends({}, _this2.attrs, props, {
+        var propsForElement = _extends({}, props, _this2.attrs, {
           style: [generatedStyles].concat(style)
         });
@@ -6484,7 +6488,12 @@ var withTheme = (function (Component$$1) {
 //
-var InlineStyle = _InlineStyle(StyleSheet);
+var reactNative = require('react-native');
+var StyleSheet$1 = reactNative.StyleSheet;
+var InlineStyle = _InlineStyle(StyleSheet$1);
 var StyledNativeComponent$1 = _StyledNativeComponent(InlineStyle);
 var styled = function styled(tag) {
   return constructWithOptions(StyledNativeComponent$1, tag);