styled-components 5.0.0-testgrouplimit.0 → 5.1.0

package/README.md

@@ -0,0 +1,180 @@
+<div align="center">
+  <a href="https://www.styled-components.com">
+    <img alt="styled-components" src="https://raw.githubusercontent.com/styled-components/brand/master/styled-components.png" height="150px" />
+  </a>
+</div>
+
+<br />
+
+<div align="center">
+  <strong>Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅</strong>
+  <br />
+  <br />
+  <a href="https://www.npmjs.com/package/styled-components"><img src="https://www.styled-components.com/proxy/downloads.svg" alt="downloads: 600k/month"></a>
+  <a href="#backers" alt="sponsors on Open Collective"><img src="https://opencollective.com/styled-components/backers/badge.svg" /></a> <a href="#sponsors" alt="Sponsors on Open Collective"><img src="https://opencollective.com/styled-components/sponsors/badge.svg" /></a> <a href="https://spectrum.chat/styled-components"><img src="https://withspectrum.github.io/badge/badge.svg" alt="Join the community on Spectrum"></a>
+  <a href="https://bundlephobia.com/result?p=styled-components" title="styled-components latest minified+gzip size"><img src="https://badgen.net/bundlephobia/minzip/styled-components" alt="gzip size"></a>
+  <a href="#alternative-installation-methods"><img src="https://img.shields.io/badge/module%20formats-umd%2C%20cjs%2C%20esm-green.svg" alt="module formats: umd, cjs, esm"></a>
+</div>
+
+<br />
+<br />
+
+Utilising [tagged template literals](https://www.styled-components.com/docs/advanced#tagged-template-literals) (a recent addition to JavaScript) and the [power of CSS](https://www.styled-components.com/docs/api#supported-css), `styled-components` allows you to write actual CSS code to style your components. It also removes the mapping between components and styles – using components as a low-level styling construct could not be easier!
+
+```jsx
+const Button = styled.button`
+  color: grey;
+`;
+```
+
+Alternatively, you may use [style objects](https://www.styled-components.com/docs/advanced#style-objects). This allows for easy porting of CSS from inline styles, while still supporting the more advanced styled-components capabilities like component selectors and media queries.
+
+```jsx
+const Button = styled.button({
+  color: 'grey',
+});
+```
+
+Equivalent to:
+
+```jsx
+const Button = styled.button`
+  color: grey;
+`;
+```
+
+`styled-components` is compatible with both React (for web) and React Native – meaning it's the perfect choice even for truly universal apps! See the [documentation about React Native](https://www.styled-components.com/docs/basics#react-native) for more information.
+
+_Supported by [Front End Center](https://frontend.center). Thank you for making this possible!_
+
+## Upgrading from v4
+
+1. `npm install styled-components@^5.0.0 react@^16.8 react-dom@^16.8 react-is@^16.8`
+1. ??
+1. Profit!
+
+> If you use jest-styled-components, make sure you update that too.
+
+## [Docs](https://www.styled-components.com/docs)
+
+**See the documentation at [styled-components.com/docs](https://www.styled-components.com/docs)** for more information about using `styled-components`!
+
+Quicklinks to some of the most-visited pages:
+
+- [**Getting started**](https://www.styled-components.com/docs/basics)
+- [API Reference](https://styled-components.com/docs/api)
+- [Theming](https://www.styled-components.com/docs/advanced#theming)
+- [Server-side rendering](https://www.styled-components.com/docs/advanced#server-side-rendering)
+- [Tagged Template Literals explained](https://www.styled-components.com/docs/advanced#tagged-template-literals)
+
+## Example
+
+<!-- prettier-ignore -->
+```JSX
+import React from 'react';
+
+import styled from 'styled-components';
+
+// Create a <Title> react component that renders an <h1> which is
+// centered, palevioletred and sized at 1.5em
+const Title = styled.h1`
+  font-size: 1.5em;
+  text-align: center;
+  color: palevioletred;
+`;
+
+// Create a <Wrapper> react component that renders a <section> with
+// some padding and a papayawhip background
+const Wrapper = styled.section`
+  padding: 4em;
+  background: papayawhip;
+`;
+
+// Use them like any other React component – except they're styled!
+<Wrapper>
+  <Title>Hello World, this is my first styled component!</Title>
+</Wrapper>
+```
+
+This is what you'll see in your browser:
+
+<div align="center">
+  <a href="https://styled-components.com">
+    <img alt="Screenshot of the above code ran in a browser" src="http://i.imgur.com/wUJpcjY.jpg" />
+  </a>
+</div>
+
+## Babel Macro
+
+If you're using tooling that has babel-plugin-macros set up, you can switch to the `styled-components/macro` import path instead to gain the effects of the babel plugin without further setup.
+
+```js
+import styled from 'styled-components/macro';
+
+// A static className will be generated for Title (important for SSR)
+const Title = styled.h1`
+  font-size: 1.5em;
+  text-align: center;
+  color: palevioletred;
+`;
+```
+
+If you wish to provide configuration options to the babel plugin similar to how you would in a `.babelrc`, [see this guide](https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/author.md#config-experimental). The config name is `"styledComponents"`.
+
+## Built with `styled-components`
+
+A lot of hard work goes into community libraries, projects, and guides. A lot of them make it easier to get started or help you with your next project! There’s also a whole lot of interesting apps and sites that people have built using styled-components.
+
+Make sure to head over to [awesome-styled-components](https://github.com/styled-components/awesome-styled-components) to see them all! And please contribute and add your own work to the list so others can find it.
+
+## Contributing
+
+If you want to contribute to `styled-components` please see our [contributing and community guidelines](./CONTRIBUTING.md), they'll help you get set up locally and explain the whole process.
+
+Please also note that all repositories under the `styled-components` organization follow our [Code of Conduct](./CODE_OF_CONDUCT.md), make sure to review and follow it.
+
+## Badge
+
+Let everyone know you're using _styled-components_ → [![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)
+
+```md
+[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)
+```
+
+## Contributors
+
+This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
+<a href="https://github.com/styled-components/styled-components/graphs/contributors"><img src="https://opencollective.com/styled-components/contributors.svg?width=890" /></a>
+
+## Backers
+
+Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/styled-components#backer)]
+
+<a href="https://opencollective.com/styled-components#backers" target="_blank"><img src="https://opencollective.com/styled-components/backers.svg?width=890"></a>
+
+## Sponsors
+
+Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/styled-components#sponsor)]
+
+<a href="https://opencollective.com/styled-components/sponsor/0/website" target="_blank"><img src="https://opencollective.com/styled-components/sponsor/0/avatar.svg"></a>
+<a href="https://opencollective.com/styled-components/sponsor/1/website" target="_blank"><img src="https://opencollective.com/styled-components/sponsor/1/avatar.svg"></a>
+<a href="https://opencollective.com/styled-components/sponsor/2/website" target="_blank"><img src="https://opencollective.com/styled-components/sponsor/2/avatar.svg"></a>
+<a href="https://opencollective.com/styled-components/sponsor/3/website" target="_blank"><img src="https://opencollective.com/styled-components/sponsor/3/avatar.svg"></a>
+<a href="https://opencollective.com/styled-components/sponsor/4/website" target="_blank"><img src="https://opencollective.com/styled-components/sponsor/4/avatar.svg"></a>
+<a href="https://opencollective.com/styled-components/sponsor/5/website" target="_blank"><img src="https://opencollective.com/styled-components/sponsor/5/avatar.svg"></a>
+<a href="https://opencollective.com/styled-components/sponsor/6/website" target="_blank"><img src="https://opencollective.com/styled-components/sponsor/6/avatar.svg"></a>
+<a href="https://opencollective.com/styled-components/sponsor/7/website" target="_blank"><img src="https://opencollective.com/styled-components/sponsor/7/avatar.svg"></a>
+<a href="https://opencollective.com/styled-components/sponsor/8/website" target="_blank"><img src="https://opencollective.com/styled-components/sponsor/8/avatar.svg"></a>
+<a href="https://opencollective.com/styled-components/sponsor/9/website" target="_blank"><img src="https://opencollective.com/styled-components/sponsor/9/avatar.svg"></a>
+
+## License
+
+Licensed under the MIT License, Copyright © 2016-present Glen Maddern and Maximilian Stoiber.
+
+See [LICENSE](./LICENSE) for more information.
+
+## Acknowledgements
+
+This project builds on a long line of earlier work by clever folks all around the world. We'd like to thank Charlie Somerville, Nik Graf, Sunil Pai, Michael Chan, Andrey Popp, Jed Watson & Andrey Sitnik who contributed ideas, code or inspiration.
+
+Special thanks to [@okonet](https://github.com/okonet) for the fantastic logo.

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

@@ -59,7 +59,7 @@ var interleave = (function (strings, interpolations) {
 
 // 
 var isPlainObject = (function (x) {
-  return typeof x === 'object' && x.constructor === Object;
+  return x !== null && typeof x === 'object' && (x.toString ? x.toString() : Object.prototype.toString.call(x)) === '[object Object]' && !reactIs.typeOf(x);
 });
 
 // 
@@ -92,7 +92,8 @@ function isStyledComponent(target) {
 var SC_ATTR = typeof process !== 'undefined' && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR) || 'data-styled';
 var SC_ATTR_ACTIVE = 'active';
 var SC_ATTR_VERSION = 'data-styled-version';
-var SC_VERSION = "5.0.0-testgrouplimit.0";
+var SC_VERSION = "5.1.0";
+var SPLITTER = '/*!sc*/\n';
 var IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;
 var DISABLE_SPEEDY = typeof SC_DISABLE_SPEEDY === 'boolean' && SC_DISABLE_SPEEDY || typeof process !== 'undefined' && (process.env.REACT_APP_SC_DISABLE_SPEEDY || process.env.SC_DISABLE_SPEEDY) || process.env.NODE_ENV !== 'production'; // Shared empty execution context when generating static styles
 
@@ -236,9 +237,7 @@ var makeTag = function makeTag(_ref) {
     return new TextTag(target);
   }
 };
-var CSSOMTag =
-/*#__PURE__*/
-function () {
+var CSSOMTag = /*#__PURE__*/function () {
   function CSSOMTag(target) {
     var element = this.element = makeStyleTag(target); // Avoid Edge bug where empty style elements don't create sheets
 
@@ -278,9 +277,7 @@ function () {
 }();
 /** A Tag that emulates the CSSStyleSheet API but uses text nodes */
 
-var TextTag =
-/*#__PURE__*/
-function () {
+var TextTag = /*#__PURE__*/function () {
   function TextTag(target) {
     var element = this.element = makeStyleTag(target);
     this.nodes = element.childNodes;
@@ -318,9 +315,7 @@ function () {
 }();
 /** A completely virtual (server-side) Tag that doesn't manipulate the DOM */
 
-var VirtualTag =
-/*#__PURE__*/
-function () {
+var VirtualTag = /*#__PURE__*/function () {
   function VirtualTag(_target) {
     this.rules = [];
     this.length = 0;
@@ -362,9 +357,7 @@ var makeGroupedTag = function makeGroupedTag(tag) {
 };
 var BASE_SIZE = 1 << 9;
 
-var DefaultGroupedTag =
-/*#__PURE__*/
-function () {
+var DefaultGroupedTag = /*#__PURE__*/function () {
   function DefaultGroupedTag(tag) {
     this.groupSizes = new Uint32Array(BASE_SIZE);
     this.length = BASE_SIZE;
@@ -441,7 +434,7 @@ function () {
     var endIndex = startIndex + length;
 
     for (var i = startIndex; i < endIndex; i++) {
-      css += this.tag.getRule(i) + "\n";
+      css += "" + this.tag.getRule(i) + SPLITTER;
     }
 
     return css;
@@ -484,8 +477,7 @@ var setGroupForId = function setGroupForId(id, group) {
 
 // 
 var SELECTOR = "style[" + SC_ATTR + "][" + SC_ATTR_VERSION + "=\"" + SC_VERSION + "\"]";
-var RULE_RE = /(?:\s*)?(.*?){((?:{[^}]*}|(?!{).*?)*)}/g;
-var MARKER_RE = new RegExp("^" + SC_ATTR + "\\.g(\\d+)\\[id=\"([\\w\\d-]+)\"\\]");
+var MARKER_RE = new RegExp("^" + SC_ATTR + "\\.g(\\d+)\\[id=\"([\\w\\d-]+)\"\\].*?\"([^\"]*)");
 var outputSheet = function outputSheet(sheet) {
   var tag = sheet.getTag();
   var length = tag.length;
@@ -510,7 +502,7 @@ var outputSheet = function outputSheet(sheet) {
     // after the actual rules to simplify the rehydration
 
 
-    css += "" + rules + selector + "{content:\"" + content + "\"}\n";
+    css += "" + rules + selector + "{content:\"" + content + "\"}" + SPLITTER;
   }
 
   return css;
@@ -529,13 +521,13 @@ var rehydrateNamesFromContent = function rehydrateNamesFromContent(sheet, id, co
 };
 
 var rehydrateSheetFromTag = function rehydrateSheetFromTag(sheet, style) {
-  var rawHTML = style.innerHTML;
+  var parts = style.innerHTML.split(SPLITTER);
   var rules = [];
-  var parts; // parts = [match, selector, content]
-  // eslint-disable-next-line no-cond-assign
 
-  while (parts = RULE_RE.exec(rawHTML)) {
-    var marker = parts[1].match(MARKER_RE);
+  for (var i = 0, l = parts.length; i < l; i++) {
+    var part = parts[i].trim();
+    if (!part) continue;
+    var marker = part.match(MARKER_RE);
 
     if (marker) {
       var group = parseInt(marker[1], 10) | 0;
@@ -546,13 +538,13 @@ var rehydrateSheetFromTag = function rehydrateSheetFromTag(sheet, style) {
         setGroupForId(id, group); // Rehydrate names and rules
         // looks like: data-styled.g11[id="idA"]{content:"nameA,"}
 
-        rehydrateNamesFromContent(sheet, id, parts[2].split('"')[1]);
+        rehydrateNamesFromContent(sheet, id, marker[3]);
         sheet.getTag().insertRules(group, rules);
       }
 
       rules.length = 0;
     } else {
-      rules.push(parts[0].trim());
+      rules.push(part);
     }
   }
 };
@@ -580,9 +572,7 @@ var defaultOptions = {
 };
 /** Contains the main stylesheet logic for stringification and caching */
 
-var StyleSheet =
-/*#__PURE__*/
-function () {
+var StyleSheet = /*#__PURE__*/function () {
   /** Register a group ID to give it an index */
   StyleSheet.registerId = function registerId(id) {
     return getGroupForId(id);
@@ -910,18 +900,16 @@ function StyleSheetManager(props) {
   React.useEffect(function () {
     if (!shallowequal(plugins, props.stylisPlugins)) setPlugins(props.stylisPlugins);
   }, [props.stylisPlugins]);
-  return React__default.createElement(StyleSheetContext.Provider, {
+  return /*#__PURE__*/React__default.createElement(StyleSheetContext.Provider, {
     value: styleSheet
-  }, React__default.createElement(StylisContext.Provider, {
+  }, /*#__PURE__*/React__default.createElement(StylisContext.Provider, {
     value: stylis
   }, process.env.NODE_ENV !== 'production' ? React__default.Children.only(props.children) : props.children));
 }
 
 // 
 
-var Keyframes =
-/*#__PURE__*/
-function () {
+var Keyframes = /*#__PURE__*/function () {
   function Keyframes(name, stringifyArgs) {
     var _this = this;
 
@@ -1240,9 +1228,7 @@ function isStaticRules(rules) {
  the React-specific stuff.
  */
 
-var ComponentStyle =
-/*#__PURE__*/
-function () {
+var ComponentStyle = /*#__PURE__*/function () {
   function ComponentStyle(rules, componentId) {
     this.rules = rules;
     this.staticRulesId = '';
@@ -1335,6 +1321,36 @@ var createWarnTooManyClasses = (function (displayName, componentId) {
   };
 });
 
+// 
+var invalidHookCallRe = /invalid hook call/i;
+var seen = new Set();
+var checkDynamicCreation = function checkDynamicCreation(displayName, componentId) {
+  if (process.env.NODE_ENV !== 'production') {
+    var parsedIdString = componentId ? " with the id of \"" + componentId + "\"" : '';
+    var message = "The component " + displayName + parsedIdString + " has been created dynamically.\n" + 'You may see this warning because you\'ve called styled inside another component.\n' + 'To resolve this only create new StyledComponents outside of any render method and function component.';
+
+    try {
+      // We purposefully call `useRef` outside of a component and expect it to throw
+      // If it doesn't, then we're inside another component.
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      React.useRef();
+
+      if (!seen.has(message)) {
+        // eslint-disable-next-line no-console
+        console.warn(message);
+        seen.add(message);
+      }
+    } catch (error) {
+      // The error here is expected, since we're expecting anything that uses `checkDynamicCreation` to
+      // be called outside of a React component.
+      if (invalidHookCallRe.test(error.message)) {
+        // This shouldn't happen, but resets `warningSeen` if we had this error happen intermittently
+        seen["delete"](message);
+      }
+    }
+  }
+};
+
 // 
 var determineTheme = (function (props, providedTheme, defaultProps) {
   if (defaultProps === void 0) {
@@ -1420,7 +1436,7 @@ function ThemeProvider(props) {
     return null;
   }
 
-  return React__default.createElement(ThemeContext.Provider, {
+  return /*#__PURE__*/React__default.createElement(ThemeContext.Provider, {
     value: themeContext
   }, props.children);
 }
@@ -1491,6 +1507,7 @@ function useStyledComponentImpl(forwardedComponent, props, forwardedRef) {
       componentStyle = forwardedComponent.componentStyle,
       defaultProps = forwardedComponent.defaultProps,
       foldedComponentIds = forwardedComponent.foldedComponentIds,
+      shouldForwardProp = forwardedComponent.shouldForwardProp,
       styledComponentId = forwardedComponent.styledComponentId,
       target = forwardedComponent.target;
   React.useDebugValue(styledComponentId); // NOTE: the non-hooks version only subscribes to this when !componentStyle.isStatic,
@@ -1505,21 +1522,18 @@ function useStyledComponentImpl(forwardedComponent, props, forwardedRef) {
 
   var generatedClassName = useInjectedStyle(componentStyle, componentAttrs.length > 0, context, process.env.NODE_ENV !== 'production' ? forwardedComponent.warnTooManyClasses : undefined);
   var refToForward = forwardedRef;
-  var elementToBeCreated = attrs.as || props.as || target;
+  var elementToBeCreated = attrs.$as || props.$as || attrs.as || props.as || target;
   var isTargetTag = isTag(elementToBeCreated);
   var computedProps = attrs !== props ? _extends({}, props, {}, attrs) : props;
-  var shouldFilterProps = isTargetTag || 'as' in computedProps || 'forwardedAs' in computedProps;
-  var propsForElement = shouldFilterProps ? {} : _extends({}, computedProps);
-
-  if (shouldFilterProps) {
-    // eslint-disable-next-line guard-for-in
-    for (var key in computedProps) {
-      if (key === 'forwardedAs') {
-        propsForElement.as = computedProps[key];
-      } else if (key !== 'as' && key !== 'forwardedAs' && (!isTargetTag || validAttr(key))) {
-        // Don't pass through non HTML tags through to HTML elements
-        propsForElement[key] = computedProps[key];
-      }
+  var propFilterFn = shouldForwardProp || isTargetTag && validAttr;
+  var propsForElement = {}; // eslint-disable-next-line guard-for-in
+
+  for (var key in computedProps) {
+    if (key[0] === '$' || key === 'as') continue;else if (key === 'forwardedAs') {
+      propsForElement.as = computedProps[key];
+    } else if (!propFilterFn || propFilterFn(key, validAttr)) {
+      // Don't pass through non HTML tags through to HTML elements
+      propsForElement[key] = computedProps[key];
     }
   }
 
@@ -1544,7 +1558,24 @@ function createStyledComponent(target, options, rules) {
   var styledComponentId = options.displayName && options.componentId ? escape(options.displayName) + "-" + options.componentId : options.componentId || componentId; // fold the underlying StyledComponent attrs up (implicit extend)
 
   var finalAttrs = // $FlowFixMe
-  isTargetStyledComp && target.attrs ? Array.prototype.concat(target.attrs, attrs).filter(Boolean) : attrs;
+  isTargetStyledComp && target.attrs ? Array.prototype.concat(target.attrs, attrs).filter(Boolean) : attrs; // eslint-disable-next-line prefer-destructuring
+
+  var shouldForwardProp = options.shouldForwardProp; // $FlowFixMe
+
+  if (isTargetStyledComp && target.shouldForwardProp) {
+    if (shouldForwardProp) {
+      // compose nested shouldForwardProp calls
+      shouldForwardProp = function shouldForwardProp(prop, filterFn) {
+        return (// $FlowFixMe
+          target.shouldForwardProp(prop, filterFn) && options.shouldForwardProp(prop, filterFn)
+        );
+      };
+    } else {
+      // eslint-disable-next-line prefer-destructuring
+      shouldForwardProp = target.shouldForwardProp;
+    }
+  }
+
   var componentStyle = new ComponentStyle(isTargetStyledComp ? // fold the underlying StyledComponent rules up (implicit extend)
   // $FlowFixMe
   target.componentStyle.rules.concat(rules) : rules, styledComponentId);
@@ -1564,7 +1595,8 @@ function createStyledComponent(target, options, rules) {
   WrappedStyledComponent = React__default.forwardRef(forwardRef);
   WrappedStyledComponent.attrs = finalAttrs;
   WrappedStyledComponent.componentStyle = componentStyle;
-  WrappedStyledComponent.displayName = displayName; // this static is used to preserve the cascade of static classes for component selector
+  WrappedStyledComponent.displayName = displayName;
+  WrappedStyledComponent.shouldForwardProp = shouldForwardProp; // this static is used to preserve the cascade of static classes for component selector
   // purposes; this is especially important with usage of the css prop
 
   WrappedStyledComponent.foldedComponentIds = isTargetStyledComp ? // $FlowFixMe
@@ -1600,6 +1632,7 @@ function createStyledComponent(target, options, rules) {
   });
 
   if (process.env.NODE_ENV !== 'production') {
+    checkDynamicCreation(displayName, styledComponentId);
     WrappedStyledComponent.warnTooManyClasses = createWarnTooManyClasses(displayName, styledComponentId);
   } // $FlowFixMe
 
@@ -1615,6 +1648,7 @@ function createStyledComponent(target, options, rules) {
       componentStyle: true,
       displayName: true,
       foldedComponentIds: true,
+      shouldForwardProp: true,
       self: true,
       styledComponentId: true,
       target: true,
@@ -1643,9 +1677,7 @@ domElements.forEach(function (domElement) {
 
 // 
 
-var GlobalStyle =
-/*#__PURE__*/
-function () {
+var GlobalStyle = /*#__PURE__*/function () {
   function GlobalStyle(rules, componentId) {
     this.rules = rules;
     this.componentId = componentId;
@@ -1685,6 +1717,10 @@ function createGlobalStyle(strings) {
   var styledComponentId = "sc-global-" + generateComponentId(JSON.stringify(rules));
   var globalStyle = new GlobalStyle(rules, styledComponentId);
 
+  if (process.env.NODE_ENV !== 'production') {
+    checkDynamicCreation(styledComponentId);
+  }
+
   function GlobalStyleComponent(props) {
     var styleSheet = useStyleSheet();
     var stylis = useStylis();
@@ -1702,6 +1738,12 @@ function createGlobalStyle(strings) {
       console.warn("The global style component " + styledComponentId + " was given child JSX. createGlobalStyle does not render children.");
     }
 
+    if (process.env.NODE_ENV !== 'production' && rules.some(function (rule) {
+      return typeof rule === 'string' && rule.indexOf('@import') !== -1;
+    })) {
+      console.warn("Please do not use @import CSS syntax in createGlobalStyle at this time, as the CSSOM APIs we use in production do not handle it well. Instead, we recommend using a library such as react-helmet to inject a typical <link> meta tag to the stylesheet, or simply embedding it manually in your index.html <head> section for a simpler app.");
+    }
+
     if (globalStyle.isStatic) {
       globalStyle.renderStyles(instance, STATIC_EXECUTION_CONTEXT, styleSheet, stylis);
     } else {
@@ -1741,9 +1783,7 @@ function keyframes(strings) {
   return new Keyframes(name, [rules, name, '@keyframes']);
 }
 
-var ServerStyleSheet =
-/*#__PURE__*/
-function () {
+var ServerStyleSheet = /*#__PURE__*/function () {
   function ServerStyleSheet() {
     var _this = this;
 
@@ -1781,7 +1821,7 @@ function () {
       } // v4 returned an array for this fn, so we'll do the same for v5 for backward compat
 
 
-      return [React__default.createElement("style", _extends({}, props, {
+      return [/*#__PURE__*/React__default.createElement("style", _extends({}, props, {
         key: "sc-0-0"
       }))];
     };
@@ -1803,7 +1843,7 @@ function () {
       return throwStyledComponentsError(2);
     }
 
-    return React__default.createElement(StyleSheetManager, {
+    return /*#__PURE__*/React__default.createElement(StyleSheetManager, {
       sheet: this.instance
     }, children);
   };
@@ -1837,7 +1877,7 @@ var withTheme = (function (Component) {
       console.warn("[withTheme] You are not using a ThemeProvider nor passing a theme prop or a theme in defaultProps in component class \"" + getComponentName(Component) + "\"");
     }
 
-    return React__default.createElement(Component, _extends({}, props, {
+    return /*#__PURE__*/React__default.createElement(Component, _extends({}, props, {
       theme: themeProp,
       ref: ref
     }));
@@ -1862,7 +1902,7 @@ var __PRIVATE__ = {
 // 
 /* Define bundle version for export */
 
-var version = "5.0.0-testgrouplimit.0";
+var version = "5.1.0";
 /* Warning if you've imported this file on React Native */
 
 if (process.env.NODE_ENV !== 'production' && typeof navigator !== 'undefined' && navigator.product === 'ReactNative') {