styled-components 6.0.0-beta.9 → 6.0.0-rc.1

package/dist/styled-components.js

@@ -4,22 +4,24 @@
     (global = global || self, global.styled = factory(global.React));
 })(this, (function (React) { 'use strict';
 
-    var SC_ATTR = (typeof process !== 'undefined' && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR)) ||
+    var SC_ATTR = (typeof process !== 'undefined' && typeof process.env !== '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 = "6.0.0-beta.9";
+    var SC_VERSION = "6.0.0-rc.1";
     var SPLITTER = '/*!sc*/\n';
     var IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;
     var DISABLE_SPEEDY = Boolean(typeof SC_DISABLE_SPEEDY === 'boolean'
         ? SC_DISABLE_SPEEDY
         : typeof process !== 'undefined' &&
+            typeof process.env !== 'undefined' &&
             typeof process.env.REACT_APP_SC_DISABLE_SPEEDY !== 'undefined' &&
             process.env.REACT_APP_SC_DISABLE_SPEEDY !== ''
             ? process.env.REACT_APP_SC_DISABLE_SPEEDY === 'false'
                 ? false
                 : process.env.REACT_APP_SC_DISABLE_SPEEDY
             : typeof process !== 'undefined' &&
+                typeof process.env !== 'undefined' &&
                 typeof process.env.SC_DISABLE_SPEEDY !== 'undefined' &&
                 process.env.SC_DISABLE_SPEEDY !== ''
                 ? process.env.SC_DISABLE_SPEEDY === 'false'
@@ -158,17 +160,10 @@
                 }
             }
             var ruleIndex = this.indexOfGroup(group + 1);
-            if (Array.isArray(rules)) {
-                for (var i = 0, l = rules.length; i < l; i++) {
-                    if (this.tag.insertRule(ruleIndex, rules[i])) {
-                        this.groupSizes[group]++;
-                        ruleIndex++;
-                    }
-                }
-            }
-            else {
-                if (this.tag.insertRule(ruleIndex, rules)) {
+            for (var i = 0, l = rules.length; i < l; i++) {
+                if (this.tag.insertRule(ruleIndex, rules[i])) {
                     this.groupSizes[group]++;
+                    ruleIndex++;
                 }
             }
         };
@@ -262,7 +257,6 @@
         var names = content.split(',');
         var name;
         for (var i = 0, l = names.length; i < l; i++) {
-            // eslint-disable-next-line
             if ((name = names[i])) {
                 sheet.registerName(id, name);
             }
@@ -371,10 +365,10 @@
     };
     var CSSOMTag = /** @class */ (function () {
         function CSSOMTag(target) {
-            var element = (this.element = makeStyleTag(target));
+            this.element = makeStyleTag(target);
             // Avoid Edge bug where empty style elements don't create sheets
-            element.appendChild(document.createTextNode(''));
-            this.sheet = getSheet(element);
+            this.element.appendChild(document.createTextNode(''));
+            this.sheet = getSheet(this.element);
             this.length = 0;
         }
         CSSOMTag.prototype.insertRule = function (index, rule) {
@@ -394,7 +388,7 @@
         CSSOMTag.prototype.getRule = function (index) {
             var rule = this.sheet.cssRules[index];
             // Avoid IE11 quirk where cssText is inaccessible on some invalid rules
-            if (rule !== undefined && typeof rule.cssText === 'string') {
+            if (rule && rule.cssText) {
                 return rule.cssText;
             }
             else {
@@ -406,8 +400,8 @@
     /** A Tag that emulates the CSSStyleSheet API but uses text nodes */
     var TextTag = /** @class */ (function () {
         function TextTag(target) {
-            var element = (this.element = makeStyleTag(target));
-            this.nodes = element.childNodes;
+            this.element = makeStyleTag(target);
+            this.nodes = this.element.childNodes;
             this.length = 0;
         }
         TextTag.prototype.insertRule = function (index, rule) {
@@ -594,7 +588,7 @@
       return true;
     };
 
-    var e="-ms-";var r="-moz-";var a="-webkit-";var n="comm";var c="rule";var s="decl";var i="@import";var h="@keyframes";var $=Math.abs;var k=String.fromCharCode;var g=Object.assign;function m(e,r){return C(e,0)^45?(((r<<2^C(e,0))<<2^C(e,1))<<2^C(e,2))<<2^C(e,3):0}function x(e){return e.trim()}function y(e,r){return (e=r.exec(e))?e[0]:e}function j(e,r,a){return e.replace(r,a)}function z(e,r){return e.indexOf(r)}function C(e,r){return e.charCodeAt(r)|0}function O(e,r,a){return e.slice(r,a)}function A(e){return e.length}function M(e){return e.length}function S(e,r){return r.push(e),e}function q(e,r){return e.map(r).join("")}var B=1;var D=1;var E=0;var F=0;var G=0;var H="";function I(e,r,a,n,c,s,t){return {value:e,root:r,parent:a,type:n,props:c,children:s,line:B,column:D,length:t,return:""}}function J(e,r){return g(I("",null,null,"",null,null,0),e,{length:-e.length},r)}function K(){return G}function L(){G=F>0?C(H,--F):0;if(D--,G===10)D=1,B--;return G}function N(){G=F<E?C(H,F++):0;if(D++,G===10)D=1,B++;return G}function P(){return C(H,F)}function Q(){return F}function R(e,r){return O(H,e,r)}function T(e){switch(e){case 0:case 9:case 10:case 13:case 32:return 5;case 33:case 43:case 44:case 47:case 62:case 64:case 126:case 59:case 123:case 125:return 4;case 58:return 3;case 34:case 39:case 40:case 91:return 2;case 41:case 93:return 1}return 0}function U(e){return B=D=1,E=A(H=e),F=0,[]}function V(e){return H="",e}function W(e){return x(R(F-1,ee(e===91?e+2:e===40?e+1:e)))}function Y(e){while(G=P())if(G<33)N();else break;return T(e)>2||T(G)>3?"":" "}function _(e,r){while(--r&&N())if(G<48||G>102||G>57&&G<65||G>70&&G<97)break;return R(e,Q()+(r<6&&P()==32&&N()==32))}function ee(e){while(N())switch(G){case e:return F;case 34:case 39:if(e!==34&&e!==39)ee(G);break;case 40:if(e===41)ee(e);break;case 92:N();break}return F}function re(e,r){while(N())if(e+G===47+10)break;else if(e+G===42+42&&P()===47)break;return "/*"+R(r,F-1)+"*"+k(e===47?e:N())}function ae(e){while(!T(P()))N();return R(e,F)}function ne(e){return V(ce("",null,null,null,[""],e=U(e),0,[0],e))}function ce(e,r,a,n,c,s,t,u,i){var f=0;var o=0;var l=t;var v=0;var p=0;var h=0;var b=1;var w=1;var d=1;var $=0;var g="";var m=c;var x=s;var y=n;var O=g;while(w)switch(h=$,$=N()){case 40:if(h!=108&&C(O,l-1)==58){if(z(O+=j(W($),"&","&\f"),"&\f")!=-1)d=-1;break}case 34:case 39:case 91:O+=W($);break;case 9:case 10:case 13:case 32:O+=Y(h);break;case 92:O+=_(Q()-1,7);continue;case 47:switch(P()){case 42:case 47:S(te(re(N(),Q()),r,a),i);break;default:O+="/";}break;case 123*b:u[f++]=A(O)*d;case 125*b:case 59:case 0:switch($){case 0:case 125:w=0;case 59+o:if(p>0&&A(O)-l)S(p>32?ue(O+";",n,a,l-1):ue(j(O," ","")+";",n,a,l-2),i);break;case 59:O+=";";default:S(y=se(O,r,a,f,o,c,u,g,m=[],x=[],l),s);if($===123)if(o===0)ce(O,r,y,y,m,s,l,u,x);else switch(v===99&&C(O,3)===110?100:v){case 100:case 109:case 115:ce(e,y,y,n&&S(se(e,y,y,0,0,c,u,g,c,m=[],l),x),c,x,l,u,n?m:x);break;default:ce(O,y,y,y,[""],x,0,u,x);}}f=o=p=0,b=d=1,g=O="",l=t;break;case 58:l=1+A(O),p=h;default:if(b<1)if($==123)--b;else if($==125&&b++==0&&L()==125)continue;switch(O+=k($),$*b){case 38:d=o>0?1:(O+="\f",-1);break;case 44:u[f++]=(A(O)-1)*d,d=1;break;case 64:if(P()===45)O+=W(N());v=P(),o=l=A(g=O+=ae(Q())),$++;break;case 45:if(h===45&&A(O)==2)b=0;}}return s}function se(e,r,a,n,s,t,u,i,f,o,l){var v=s-1;var p=s===0?t:[""];var h=M(p);for(var b=0,w=0,d=0;b<n;++b)for(var k=0,g=O(e,v+1,v=$(w=u[b])),m=e;k<h;++k)if(m=x(w>0?p[k]+" "+g:j(g,/&\f/g,p[k])))f[d++]=m;return I(e,r,a,s===0?c:i,f,o,l)}function te(e,r,a){return I(e,r,a,n,k(K()),O(e,2,-2),0)}function ue(e,r,a,n){return I(e,r,a,s,O(e,0,n),O(e,n+1,-1),n)}function ie(n,c,s){switch(m(n,c)){case 5103:return a+"print-"+n+n;case 5737:case 4201:case 3177:case 3433:case 1641:case 4457:case 2921:case 5572:case 6356:case 5844:case 3191:case 6645:case 3005:case 6391:case 5879:case 5623:case 6135:case 4599:case 4855:case 4215:case 6389:case 5109:case 5365:case 5621:case 3829:return a+n+n;case 4789:return r+n+n;case 5349:case 4246:case 4810:case 6968:case 2756:return a+n+r+n+e+n+n;case 5936:switch(C(n,c+11)){case 114:return a+n+e+j(n,/[svh]\w+-[tblr]{2}/,"tb")+n;case 108:return a+n+e+j(n,/[svh]\w+-[tblr]{2}/,"tb-rl")+n;case 45:return a+n+e+j(n,/[svh]\w+-[tblr]{2}/,"lr")+n}case 6828:case 4268:case 2903:return a+n+e+n+n;case 6165:return a+n+e+"flex-"+n+n;case 5187:return a+n+j(n,/(\w+).+(:[^]+)/,a+"box-$1$2"+e+"flex-$1$2")+n;case 5443:return a+n+e+"flex-item-"+j(n,/flex-|-self/g,"")+(!y(n,/flex-|baseline/)?e+"grid-row-"+j(n,/flex-|-self/g,""):"")+n;case 4675:return a+n+e+"flex-line-pack"+j(n,/align-content|flex-|-self/g,"")+n;case 5548:return a+n+e+j(n,"shrink","negative")+n;case 5292:return a+n+e+j(n,"basis","preferred-size")+n;case 6060:return a+"box-"+j(n,"-grow","")+a+n+e+j(n,"grow","positive")+n;case 4554:return a+j(n,/([^-])(transform)/g,"$1"+a+"$2")+n;case 6187:return j(j(j(n,/(zoom-|grab)/,a+"$1"),/(image-set)/,a+"$1"),n,"")+n;case 5495:case 3959:return j(n,/(image-set\([^]*)/,a+"$1"+"$`$1");case 4968:return j(j(n,/(.+:)(flex-)?(.*)/,a+"box-pack:$3"+e+"flex-pack:$3"),/s.+-b[^;]+/,"justify")+a+n+n;case 4200:if(!y(n,/flex-|baseline/))return e+"grid-column-align"+O(n,c)+n;break;case 2592:case 3360:return e+j(n,"template-","")+n;case 4384:case 3616:if(s&&s.some((function(e,r){return c=r,y(e.props,/grid-\w+-end/)}))){return ~z(n+(s=s[c].value),"span")?n:e+j(n,"-start","")+n+e+"grid-row-span:"+(~z(s,"span")?y(s,/\d+/):+y(s,/\d+/)-+y(n,/\d+/))+";"}return e+j(n,"-start","")+n;case 4896:case 4128:return s&&s.some((function(e){return y(e.props,/grid-\w+-start/)}))?n:e+j(j(n,"-end","-span"),"span ","")+n;case 4095:case 3583:case 4068:case 2532:return j(n,/(.+)-inline(.+)/,a+"$1$2")+n;case 8116:case 7059:case 5753:case 5535:case 5445:case 5701:case 4933:case 4677:case 5533:case 5789:case 5021:case 4765:if(A(n)-1-c>6)switch(C(n,c+1)){case 109:if(C(n,c+4)!==45)break;case 102:return j(n,/(.+:)(.+)-([^]+)/,"$1"+a+"$2-$3"+"$1"+r+(C(n,c+3)==108?"$3":"$2-$3"))+n;case 115:return ~z(n,"stretch")?ie(j(n,"stretch","fill-available"),c,s)+n:n}break;case 5152:case 5920:return j(n,/(.+?):(\d+)(\s*\/\s*(span)?\s*(\d+))?(.*)/,(function(r,a,c,s,t,u,i){return e+a+":"+c+i+(s?e+a+"-span:"+(t?u:+u-+c)+i:"")+n}));case 4949:if(C(n,c+6)===121)return j(n,":",":"+a)+n;break;case 6444:switch(C(n,C(n,14)===45?18:11)){case 120:return j(n,/(.+:)([^;\s!]+)(;|(\s+)?!.+)?/,"$1"+a+(C(n,14)===45?"inline-":"")+"box$3"+"$1"+a+"$2$3"+"$1"+e+"$2box$3")+n;case 100:return j(n,":",":"+e)+n}break;case 5719:case 2647:case 2135:case 3927:case 2391:return j(n,"scroll-","scroll-snap-")+n}return n}function fe(e,r){var a="";var n=M(e);for(var c=0;c<n;c++)a+=r(e[c],c,e,r)||"";return a}function oe(e,r,a,t){switch(e.type){case i:case s:return e.return=e.return||e.value;case n:return "";case h:return e.return=e.value+"{"+fe(e.children,t)+"}";case c:e.value=e.props.join(",");}return A(a=fe(e.children,t))?e.return=e.value+"{"+a+"}":""}function le(e){var r=M(e);return function(a,n,c,s){var t="";for(var u=0;u<r;u++)t+=e[u](a,n,c,s)||"";return t}}function pe(n,t,u,i){if(n.length>-1)if(!n.return)switch(n.type){case s:n.return=ie(n.value,n.length,u);return;case h:return fe([J(n,{value:j(n.value,"@","@"+a)})],i);case c:if(n.length)return q(n.props,(function(c){switch(y(c,/(::plac\w+|:read-\w+)/)){case":read-only":case":read-write":return fe([J(n,{props:[j(c,/:(read-\w+)/,":"+r+"$1")]})],i);case"::placeholder":return fe([J(n,{props:[j(c,/:(plac\w+)/,":"+a+"input-$1")]}),J(n,{props:[j(c,/:(plac\w+)/,":"+r+"$1")]}),J(n,{props:[j(c,/:(plac\w+)/,e+"input-$1")]})],i)}return ""}))}}
+    var e="-ms-";var r="-moz-";var a="-webkit-";var n="comm";var c="rule";var s="decl";var i="@import";var h="@keyframes";var $="@layer";var g=Math.abs;var k=String.fromCharCode;var m=Object.assign;function x(e,r){return O(e,0)^45?(((r<<2^O(e,0))<<2^O(e,1))<<2^O(e,2))<<2^O(e,3):0}function y(e){return e.trim()}function j(e,r){return (e=r.exec(e))?e[0]:e}function z(e,r,a){return e.replace(r,a)}function C(e,r){return e.indexOf(r)}function O(e,r){return e.charCodeAt(r)|0}function A(e,r,a){return e.slice(r,a)}function M(e){return e.length}function S(e){return e.length}function q(e,r){return r.push(e),e}function B(e,r){return e.map(r).join("")}var D=1;var E=1;var F=0;var G=0;var H=0;var I="";function J(e,r,a,n,c,s,t){return {value:e,root:r,parent:a,type:n,props:c,children:s,line:D,column:E,length:t,return:""}}function K(e,r){return m(J("",null,null,"",null,null,0),e,{length:-e.length},r)}function L(){return H}function N(){H=G>0?O(I,--G):0;if(E--,H===10)E=1,D--;return H}function P(){H=G<F?O(I,G++):0;if(E++,H===10)E=1,D++;return H}function Q(){return O(I,G)}function R(){return G}function T(e,r){return A(I,e,r)}function U(e){switch(e){case 0:case 9:case 10:case 13:case 32:return 5;case 33:case 43:case 44:case 47:case 62:case 64:case 126:case 59:case 123:case 125:return 4;case 58:return 3;case 34:case 39:case 40:case 91:return 2;case 41:case 93:return 1}return 0}function V(e){return D=E=1,F=M(I=e),G=0,[]}function W(e){return I="",e}function X(e){return y(T(G-1,re(e===91?e+2:e===40?e+1:e)))}function Z(e){while(H=Q())if(H<33)P();else break;return U(e)>2||U(H)>3?"":" "}function ee(e,r){while(--r&&P())if(H<48||H>102||H>57&&H<65||H>70&&H<97)break;return T(e,R()+(r<6&&Q()==32&&P()==32))}function re(e){while(P())switch(H){case e:return G;case 34:case 39:if(e!==34&&e!==39)re(H);break;case 40:if(e===41)re(e);break;case 92:P();break}return G}function ae(e,r){while(P())if(e+H===47+10)break;else if(e+H===42+42&&Q()===47)break;return "/*"+T(r,G-1)+"*"+k(e===47?e:P())}function ne(e){while(!U(Q()))P();return T(e,G)}function ce(e){return W(se("",null,null,null,[""],e=V(e),0,[0],e))}function se(e,r,a,n,c,s,t,u,i){var f=0;var o=0;var l=t;var v=0;var p=0;var h=0;var b=1;var w=1;var d=1;var $=0;var g="";var m=c;var x=s;var y=n;var j=g;while(w)switch(h=$,$=P()){case 40:if(h!=108&&O(j,l-1)==58){if(C(j+=z(X($),"&","&\f"),"&\f")!=-1)d=-1;break}case 34:case 39:case 91:j+=X($);break;case 9:case 10:case 13:case 32:j+=Z(h);break;case 92:j+=ee(R()-1,7);continue;case 47:switch(Q()){case 42:case 47:q(ue(ae(P(),R()),r,a),i);break;default:j+="/";}break;case 123*b:u[f++]=M(j)*d;case 125*b:case 59:case 0:switch($){case 0:case 125:w=0;case 59+o:if(d==-1)j=z(j,/\f/g,"");if(p>0&&M(j)-l)q(p>32?ie(j+";",n,a,l-1):ie(z(j," ","")+";",n,a,l-2),i);break;case 59:j+=";";default:q(y=te(j,r,a,f,o,c,u,g,m=[],x=[],l),s);if($===123)if(o===0)se(j,r,y,y,m,s,l,u,x);else switch(v===99&&O(j,3)===110?100:v){case 100:case 108:case 109:case 115:se(e,y,y,n&&q(te(e,y,y,0,0,c,u,g,c,m=[],l),x),c,x,l,u,n?m:x);break;default:se(j,y,y,y,[""],x,0,u,x);}}f=o=p=0,b=d=1,g=j="",l=t;break;case 58:l=1+M(j),p=h;default:if(b<1)if($==123)--b;else if($==125&&b++==0&&N()==125)continue;switch(j+=k($),$*b){case 38:d=o>0?1:(j+="\f",-1);break;case 44:u[f++]=(M(j)-1)*d,d=1;break;case 64:if(Q()===45)j+=X(P());v=Q(),o=l=M(g=j+=ne(R())),$++;break;case 45:if(h===45&&M(j)==2)b=0;}}return s}function te(e,r,a,n,s,t,u,i,f,o,l){var v=s-1;var p=s===0?t:[""];var h=S(p);for(var b=0,w=0,d=0;b<n;++b)for(var $=0,k=A(e,v+1,v=g(w=u[b])),m=e;$<h;++$)if(m=y(w>0?p[$]+" "+k:z(k,/&\f/g,p[$])))f[d++]=m;return J(e,r,a,s===0?c:i,f,o,l)}function ue(e,r,a){return J(e,r,a,n,k(L()),A(e,2,-2),0)}function ie(e,r,a,n){return J(e,r,a,s,A(e,0,n),A(e,n+1,-1),n)}function fe(n,c,s){switch(x(n,c)){case 5103:return a+"print-"+n+n;case 5737:case 4201:case 3177:case 3433:case 1641:case 4457:case 2921:case 5572:case 6356:case 5844:case 3191:case 6645:case 3005:case 6391:case 5879:case 5623:case 6135:case 4599:case 4855:case 4215:case 6389:case 5109:case 5365:case 5621:case 3829:return a+n+n;case 4789:return r+n+n;case 5349:case 4246:case 4810:case 6968:case 2756:return a+n+r+n+e+n+n;case 5936:switch(O(n,c+11)){case 114:return a+n+e+z(n,/[svh]\w+-[tblr]{2}/,"tb")+n;case 108:return a+n+e+z(n,/[svh]\w+-[tblr]{2}/,"tb-rl")+n;case 45:return a+n+e+z(n,/[svh]\w+-[tblr]{2}/,"lr")+n}case 6828:case 4268:case 2903:return a+n+e+n+n;case 6165:return a+n+e+"flex-"+n+n;case 5187:return a+n+z(n,/(\w+).+(:[^]+)/,a+"box-$1$2"+e+"flex-$1$2")+n;case 5443:return a+n+e+"flex-item-"+z(n,/flex-|-self/g,"")+(!j(n,/flex-|baseline/)?e+"grid-row-"+z(n,/flex-|-self/g,""):"")+n;case 4675:return a+n+e+"flex-line-pack"+z(n,/align-content|flex-|-self/g,"")+n;case 5548:return a+n+e+z(n,"shrink","negative")+n;case 5292:return a+n+e+z(n,"basis","preferred-size")+n;case 6060:return a+"box-"+z(n,"-grow","")+a+n+e+z(n,"grow","positive")+n;case 4554:return a+z(n,/([^-])(transform)/g,"$1"+a+"$2")+n;case 6187:return z(z(z(n,/(zoom-|grab)/,a+"$1"),/(image-set)/,a+"$1"),n,"")+n;case 5495:case 3959:return z(n,/(image-set\([^]*)/,a+"$1"+"$`$1");case 4968:return z(z(n,/(.+:)(flex-)?(.*)/,a+"box-pack:$3"+e+"flex-pack:$3"),/s.+-b[^;]+/,"justify")+a+n+n;case 4200:if(!j(n,/flex-|baseline/))return e+"grid-column-align"+A(n,c)+n;break;case 2592:case 3360:return e+z(n,"template-","")+n;case 4384:case 3616:if(s&&s.some((function(e,r){return c=r,j(e.props,/grid-\w+-end/)}))){return ~C(n+(s=s[c].value),"span")?n:e+z(n,"-start","")+n+e+"grid-row-span:"+(~C(s,"span")?j(s,/\d+/):+j(s,/\d+/)-+j(n,/\d+/))+";"}return e+z(n,"-start","")+n;case 4896:case 4128:return s&&s.some((function(e){return j(e.props,/grid-\w+-start/)}))?n:e+z(z(n,"-end","-span"),"span ","")+n;case 4095:case 3583:case 4068:case 2532:return z(n,/(.+)-inline(.+)/,a+"$1$2")+n;case 8116:case 7059:case 5753:case 5535:case 5445:case 5701:case 4933:case 4677:case 5533:case 5789:case 5021:case 4765:if(M(n)-1-c>6)switch(O(n,c+1)){case 109:if(O(n,c+4)!==45)break;case 102:return z(n,/(.+:)(.+)-([^]+)/,"$1"+a+"$2-$3"+"$1"+r+(O(n,c+3)==108?"$3":"$2-$3"))+n;case 115:return ~C(n,"stretch")?fe(z(n,"stretch","fill-available"),c,s)+n:n}break;case 5152:case 5920:return z(n,/(.+?):(\d+)(\s*\/\s*(span)?\s*(\d+))?(.*)/,(function(r,a,c,s,t,u,i){return e+a+":"+c+i+(s?e+a+"-span:"+(t?u:+u-+c)+i:"")+n}));case 4949:if(O(n,c+6)===121)return z(n,":",":"+a)+n;break;case 6444:switch(O(n,O(n,14)===45?18:11)){case 120:return z(n,/(.+:)([^;\s!]+)(;|(\s+)?!.+)?/,"$1"+a+(O(n,14)===45?"inline-":"")+"box$3"+"$1"+a+"$2$3"+"$1"+e+"$2box$3")+n;case 100:return z(n,":",":"+e)+n}break;case 5719:case 2647:case 2135:case 3927:case 2391:return z(n,"scroll-","scroll-snap-")+n}return n}function oe(e,r){var a="";var n=S(e);for(var c=0;c<n;c++)a+=r(e[c],c,e,r)||"";return a}function le(e,r,a,t){switch(e.type){case $:if(e.children.length)break;case i:case s:return e.return=e.return||e.value;case n:return "";case h:return e.return=e.value+"{"+oe(e.children,t)+"}";case c:e.value=e.props.join(",");}return M(a=oe(e.children,t))?e.return=e.value+"{"+a+"}":""}function ve(e){var r=S(e);return function(a,n,c,s){var t="";for(var u=0;u<r;u++)t+=e[u](a,n,c,s)||"";return t}}function he(n,t,u,i){if(n.length>-1)if(!n.return)switch(n.type){case s:n.return=fe(n.value,n.length,u);return;case h:return oe([K(n,{value:z(n.value,"@","@"+a)})],i);case c:if(n.length)return B(n.props,(function(c){switch(j(c,/(::plac\w+|:read-\w+)/)){case":read-only":case":read-write":return oe([K(n,{props:[z(c,/:(read-\w+)/,":"+r+"$1")]})],i);case"::placeholder":return oe([K(n,{props:[z(c,/:(plac\w+)/,":"+a+"input-$1")]}),K(n,{props:[z(c,/:(plac\w+)/,":"+r+"$1")]}),K(n,{props:[z(c,/:(plac\w+)/,e+"input-$1")]})],i)}return ""}))}}
 
     var SEED$1 = 5381;
     // When we have separate strings it's useful to run a progressive
@@ -612,26 +606,60 @@
         return phash(SEED$1, x);
     };
 
+    var AMP_REGEX = /&/g;
     var COMMENT_REGEX = /^\s*\/\/.*$/gm;
-    var COMPLEX_SELECTOR_PREFIX = [':', '[', '.', '#'];
     /**
      * Serialize stylis output as an array of css strings. It is important that rules are
      * separated when using CSSOM injection.
      */
     function serialize(children, callback) {
-        return children.map(function (c, i) { return callback(c, i, children, callback); }).filter(Boolean);
+        var ret = [];
+        for (var i = 0, result = void 0; i < children.length; i += 1) {
+            result = callback(children[i], i, children, callback);
+            if (result)
+                ret.push(result);
+        }
+        return ret;
+    }
+    /**
+     * Takes an element and recurses through it's rules added the namespace to the start of each selector.
+     * Takes into account media queries by recursing through child rules if they are present.
+     */
+    function recursivelySetNamepace(compiled, namespace) {
+        return compiled.map(function (rule) {
+            if (rule.type === 'rule') {
+                // add the namespace to the start
+                rule.value = "".concat(namespace, " ").concat(rule.value);
+                // add the namespace after each comma for subsequent selectors.
+                // @ts-expect-error we target modern browsers but intentionally transpile to ES5 for speed
+                rule.value = rule.value.replaceAll(',', ",".concat(namespace, " "));
+                rule.props = rule.props.map(function (prop) {
+                    return "".concat(namespace, " ").concat(prop);
+                });
+            }
+            if (Array.isArray(rule.children) && rule.type !== '@keyframes') {
+                rule.children = recursivelySetNamepace(rule.children, namespace);
+            }
+            return rule;
+        });
     }
     function createStylisInstance(_a) {
         var _b = _a === void 0 ? EMPTY_OBJECT : _a, _c = _b.options, options = _c === void 0 ? EMPTY_OBJECT : _c, _d = _b.plugins, plugins = _d === void 0 ? EMPTY_ARRAY : _d;
         var _componentId;
         var _selector;
         var _selectorRegexp;
-        var _consecutiveSelfRefRegExp;
         var selfReferenceReplacer = function (match, offset, string) {
             if (
-            // do not replace the first occurrence if it is complex (has a modifier)
-            (offset === 0 ? !COMPLEX_SELECTOR_PREFIX.includes(string[_selector.length]) : true) && // no consecutive self refs (.b.b); that is a precedence boost and treated differently
-                !string.match(_consecutiveSelfRefRegExp)) {
+            /**
+             * We only want to refer to the static class directly in the following scenarios:
+             *
+             * 1. The selector is alone on the line `& { color: red; }`
+             * 2. The selector is part of a self-reference selector `& + & { color: red; }`
+             */
+            string === _selector ||
+                (string.startsWith(_selector) &&
+                    string.endsWith(_selector) &&
+                    string.replaceAll(_selector, '').length > 0)) {
                 return ".".concat(_componentId);
             }
             return match;
@@ -650,10 +678,20 @@
          */
         var selfReferenceReplacementPlugin = function (element) {
             if (element.type === c && element.value.includes('&')) {
-                var props = element.props;
-                props[0] = props[0].replace(_selectorRegexp, selfReferenceReplacer);
+                element.props[0] = element.props[0]
+                    // catch any hanging references that stylis missed
+                    .replace(AMP_REGEX, _selector)
+                    .replace(_selectorRegexp, selfReferenceReplacer);
             }
         };
+        var middlewares = plugins.slice();
+        /**
+         * Enables automatic vendor-prefixing for styles.
+         */
+        if (options.prefix) {
+            middlewares.unshift(he);
+        }
+        middlewares.push(selfReferenceReplacementPlugin, le);
         var stringifyRules = function (css, selector, 
         /**
          * This "prefix" referes to a _selector_ prefix.
@@ -662,25 +700,18 @@
             if (selector === void 0) { selector = ''; }
             if (prefix === void 0) { prefix = ''; }
             if (componentId === void 0) { componentId = '&'; }
-            var flatCSS = css.replace(COMMENT_REGEX, '');
             // stylis has no concept of state to be passed to plugins
             // but since JS is single-threaded, we can rely on that to ensure
             // these properties stay in sync with the current stylis run
             _componentId = componentId;
             _selector = selector;
             _selectorRegexp = new RegExp("\\".concat(_selector, "\\b"), 'g');
-            _consecutiveSelfRefRegExp = new RegExp("(\\".concat(_selector, "\\b){2,}"));
-            var middlewares = plugins.slice();
-            /**
-             * Enables automatic vendor-prefixing for styles.
-             */
-            if (options.prefix || options.prefix === undefined) {
-                middlewares.unshift(pe);
+            var flatCSS = css.replace(COMMENT_REGEX, '');
+            var compiled = ce(prefix || selector ? "".concat(prefix, " ").concat(selector, " { ").concat(flatCSS, " }") : flatCSS);
+            if (options.namespace) {
+                compiled = recursivelySetNamepace(compiled, options.namespace);
             }
-            middlewares.push(selfReferenceReplacementPlugin, oe);
-            return serialize(ne(options.namespace || prefix || selector
-                ? "".concat(options.namespace ? options.namespace + ' ' : '').concat(prefix, " ").concat(selector, " { ").concat(flatCSS, " }")
-                : flatCSS), le(middlewares));
+            return serialize(compiled, ve(middlewares));
         };
         stringifyRules.hash = plugins.length
             ? plugins
@@ -695,24 +726,24 @@
         return stringifyRules;
     }
 
-    var StyleSheetContext = React.createContext(undefined);
-    var StyleSheetConsumer = StyleSheetContext.Consumer;
-    var StylisContext = React.createContext(undefined);
     var mainSheet = new StyleSheet();
     var mainStylis = createStylisInstance();
-    function useStyleSheet() {
-        return React.useContext(StyleSheetContext) || mainSheet;
-    }
-    function useStylis() {
-        return React.useContext(StylisContext) || mainStylis;
+    var StyleSheetContext = React.createContext({
+        shouldForwardProp: undefined,
+        styleSheet: mainSheet,
+        stylis: mainStylis,
+    });
+    var StyleSheetConsumer = StyleSheetContext.Consumer;
+    var StylisContext = React.createContext(undefined);
+    function useStyleSheetContext() {
+        return React.useContext(StyleSheetContext);
     }
     function StyleSheetManager(props) {
         var _a = React.useState(props.stylisPlugins), plugins = _a[0], setPlugins = _a[1];
-        var contextStyleSheet = useStyleSheet();
-        var styleSheet = React.useMemo(function () {
-            var sheet = contextStyleSheet;
+        var styleSheet = useStyleSheetContext().styleSheet;
+        var resolvedStyleSheet = React.useMemo(function () {
+            var sheet = styleSheet;
             if (props.sheet) {
-                // eslint-disable-next-line prefer-destructuring
                 sheet = props.sheet;
             }
             else if (props.target) {
@@ -722,20 +753,19 @@
                 sheet = sheet.reconstructWithOptions({ useCSSOMInjection: false });
             }
             return sheet;
-        }, [props.disableCSSOMInjection, props.sheet, props.target]);
+        }, [props.disableCSSOMInjection, props.sheet, props.target, styleSheet]);
         var stylis = React.useMemo(function () {
             return createStylisInstance({
-                options: { namespace: props.namespace, prefix: !props.disableVendorPrefixes },
+                options: { namespace: props.namespace, prefix: props.enableVendorPrefixes },
                 plugins: plugins,
             });
-        }, [props.disableVendorPrefixes, props.namespace, plugins]);
+        }, [props.enableVendorPrefixes, props.namespace, plugins]);
         React.useEffect(function () {
             if (!shallowequal(plugins, props.stylisPlugins))
                 setPlugins(props.stylisPlugins);
         }, [props.stylisPlugins]);
-        return (React.createElement(StyleSheetContext.Provider, { value: styleSheet },
-            React.createElement(StylisContext.Provider, { value: stylis }, React.Children.only(props.children)
-                )));
+        return (React.createElement(StyleSheetContext.Provider, { value: { shouldForwardProp: props.shouldForwardProp, styleSheet: resolvedStyleSheet, stylis: stylis } },
+            React.createElement(StylisContext.Provider, { value: stylis }, props.children)));
     }
 
     var Keyframes = /** @class */ (function () {
@@ -817,8 +847,8 @@
         if (value == null || typeof value === 'boolean' || value === '') {
             return '';
         }
-        if (typeof value === 'number' && value !== 0 && !(name in unitlessKeys)) {
-            return "".concat(value, "px"); // Presumes implicit 'px' suffix for unitless numbers
+        if (typeof value === 'number' && value !== 0 && !(name in unitlessKeys) && !name.startsWith('--')) {
+            return "".concat(value, "px"); // Presumes implicit 'px' suffix for unitless numbers except for CSS variables
         }
         return String(value).trim();
     }
@@ -830,14 +860,7 @@
             'Component');
     }
 
-    /**
-     * inlined version of
-     * https://github.com/facebook/fbjs/blob/master/packages/fbjs/src/core/hyphenateStyleName.js
-     */
-    var uppercaseCheck = /[A-Z]/;
-    var uppercasePattern = /[A-Z]/g;
-    var msPattern = /^ms-/;
-    var prefixAndLowerCase = function (char) { return "-".concat(char.toLowerCase()); };
+    var isUpper = function (c) { return c >= 'A' && c <= 'Z'; };
     /**
      * Hyphenates a camelcased CSS property name, for example:
      *
@@ -852,9 +875,21 @@
      * is converted to `-ms-`.
      */
     function hyphenateStyleName(string) {
-        return uppercaseCheck.test(string) && !string.startsWith('--')
-            ? string.replace(uppercasePattern, prefixAndLowerCase).replace(msPattern, '-ms-')
-            : string;
+        var output = '';
+        for (var i = 0; i < string.length; i++) {
+            var c = string[i];
+            // Check for CSS variable prefix
+            if (i === 1 && c === '-' && string[0] === '-') {
+                return string;
+            }
+            if (isUpper(c)) {
+                output += '-' + c.toLowerCase();
+            }
+            else {
+                output += c;
+            }
+        }
+        return output.startsWith('ms-') ? '-' + output : output;
     }
 
     function isFunction(test) {
@@ -864,16 +899,13 @@
     function isPlainObject(x) {
         return (x !== null &&
             typeof x === 'object' &&
-            /* a check for empty prototype would be more typical, but that
-               doesn't play well with objects created in different vm contexts */
-            (!x.constructor || x.constructor.name === 'Object') &&
-            (x.toString ? x.toString() : Object.prototype.toString.call(x)) === '[object Object]' &&
+            x.constructor.name === Object.name &&
             /* check for reasonable markers that the object isn't an element for react & preact/compat */
-            !('props' in x && (x.$$typeof || x.constructor === undefined)));
+            !('props' in x && x.$$typeof));
     }
 
     function isStatelessFunction(test) {
-        return typeof test === 'function' && !(test.prototype && test.prototype.isReactComponent);
+        return isFunction(test) && !(test.prototype && test.prototype.isReactComponent);
     }
 
     function isStyledComponent(target) {
@@ -886,34 +918,26 @@
     var isFalsish = function (chunk) {
         return chunk === undefined || chunk === null || chunk === false || chunk === '';
     };
-    var objToCssArray = function (obj, prevKey) {
+    var objToCssArray = function (obj) {
         var rules = [];
         for (var key in obj) {
-            if (!obj.hasOwnProperty(key) || isFalsish(obj[key]))
+            var val = obj[key];
+            if (!obj.hasOwnProperty(key) || isFalsish(val))
                 continue;
-            if ((Array.isArray(obj[key]) && obj[key].isCss) || isFunction(obj[key])) {
-                rules.push("".concat(hyphenateStyleName(key), ":"), obj[key], ';');
+            // @ts-expect-error Property 'isCss' does not exist on type 'any[]'
+            if ((Array.isArray(val) && val.isCss) || isFunction(val)) {
+                rules.push("".concat(hyphenateStyleName(key), ":"), val, ';');
             }
-            else if (isPlainObject(obj[key])) {
-                rules.push.apply(rules, objToCssArray(obj[key], key));
+            else if (isPlainObject(val)) {
+                rules.push.apply(rules, __spreadArray(__spreadArray(["".concat(key, " {")], objToCssArray(val), false), ['}'], false));
             }
             else {
-                rules.push("".concat(hyphenateStyleName(key), ": ").concat(addUnitIfNeeded(key, obj[key]), ";"));
+                rules.push("".concat(hyphenateStyleName(key), ": ").concat(addUnitIfNeeded(key, val), ";"));
             }
         }
-        return prevKey ? __spreadArray(__spreadArray(["".concat(prevKey, " {")], rules, true), ['}'], false) : rules;
+        return rules;
     };
     function flatten(chunk, executionContext, styleSheet, stylisInstance) {
-        if (Array.isArray(chunk)) {
-            var ruleSet = [];
-            for (var i = 0, len = chunk.length, result = void 0; i < len; i += 1) {
-                result = flatten(chunk[i], executionContext, styleSheet, stylisInstance);
-                if (result.length === 0)
-                    continue;
-                ruleSet.push.apply(ruleSet, result);
-            }
-            return ruleSet;
-        }
         if (isFalsish(chunk)) {
             return [];
         }
@@ -924,14 +948,13 @@
         /* Either execute or defer the function */
         if (isFunction(chunk)) {
             if (isStatelessFunction(chunk) && executionContext) {
-                var chunkFn = chunk;
-                var result = chunkFn(executionContext);
+                var result = chunk(executionContext);
                 if (typeof result === 'object' &&
                     !Array.isArray(result) &&
                     !(result instanceof Keyframes) &&
-                    !isPlainObject(result)) {
-                    // eslint-disable-next-line no-console
-                    console.error("".concat(getComponentName(chunkFn), " 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."));
+                    !isPlainObject(result) &&
+                    result !== null) {
+                    console.error("".concat(getComponentName(chunk), " 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."));
                 }
                 return flatten(result, executionContext, styleSheet, stylisInstance);
             }
@@ -949,7 +972,16 @@
             }
         }
         /* Handle objects */
-        return isPlainObject(chunk) ? objToCssArray(chunk) : [chunk.toString()];
+        if (isPlainObject(chunk)) {
+            return objToCssArray(chunk);
+        }
+        if (!Array.isArray(chunk)) {
+            return [chunk.toString()];
+        }
+        /* Handle objects */
+        return chunk.flatMap(function (chunklet) {
+            return flatten(chunklet, executionContext, styleSheet, stylisInstance);
+        });
     }
 
     function isStaticRules(rules) {
@@ -964,6 +996,23 @@
         return true;
     }
 
+    /**
+     * Convenience function for joining strings to form className chains
+     */
+    function joinStrings(a, b) {
+        return a && b ? "".concat(a, " ").concat(b) : a || b || '';
+    }
+    function joinStringArray(arr, sep) {
+        if (arr.length === 0) {
+            return '';
+        }
+        var result = arr[0];
+        for (var i = 1; i < arr.length; i++) {
+            result += sep ? sep + arr[i] : arr[i];
+        }
+        return result;
+    }
+
     var GlobalStyle = /** @class */ (function () {
         function GlobalStyle(rules, componentId) {
             this.rules = rules;
@@ -974,8 +1023,8 @@
             StyleSheet.registerId(this.componentId + 1);
         }
         GlobalStyle.prototype.createStyles = function (instance, executionContext, styleSheet, stylis) {
-            var flatCSS = flatten(this.rules, executionContext, styleSheet, stylis);
-            var css = stylis(flatCSS.join(''), '');
+            var flatCSS = joinStringArray(flatten(this.rules, executionContext, styleSheet, stylis));
+            var css = stylis(flatCSS, '');
             var id = this.componentId + instance;
             // NOTE: We use the id as a name as well, since these rules never change
             styleSheet.insertRules(id, id, css);
@@ -1012,11 +1061,14 @@
         }
         return outerTheme ? __assign(__assign({}, outerTheme), theme) : theme;
     }
+    function useTheme() {
+        return React.useContext(ThemeContext);
+    }
     /**
      * Provide a theme to an entire react component tree via context
      */
     function ThemeProvider(props) {
-        var outerTheme = React.useContext(ThemeContext);
+        var outerTheme = useTheme();
         var themeContext = React.useMemo(function () { return mergeTheme(props.theme, outerTheme); }, [props.theme, outerTheme]);
         if (!props.children) {
             return null;
@@ -1056,10 +1108,8 @@
                 };
                 // 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 (didNotCallInvalidHook_1 && !seen.has(message_1)) {
-                    // eslint-disable-next-line no-console
                     console.warn(message_1);
                     seen.add(message_1);
                 }
@@ -1151,31 +1201,27 @@
             checkDynamicCreation(styledComponentId);
         }
         var GlobalStyleComponent = function (props) {
-            var styleSheet = useStyleSheet();
-            var stylis = useStylis();
-            var theme = React.useContext(ThemeContext);
-            var instanceRef = React.useRef(styleSheet.allocateGSInstance(styledComponentId));
+            var ssc = useStyleSheetContext();
+            var theme = useTheme();
+            var instanceRef = React.useRef(ssc.styleSheet.allocateGSInstance(styledComponentId));
             var instance = instanceRef.current;
             if (React.Children.count(props.children)) {
-                // eslint-disable-next-line no-console
                 console.warn("The global style component ".concat(styledComponentId, " was given child JSX. createGlobalStyle does not render children."));
             }
             if (rules.some(function (rule) { return typeof rule === 'string' && rule.indexOf('@import') !== -1; })) {
-                // eslint-disable-next-line no-console
                 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 (styleSheet.server) {
-                renderStyles(instance, props, styleSheet, theme, stylis);
+            if (ssc.styleSheet.server) {
+                renderStyles(instance, props, ssc.styleSheet, theme, ssc.stylis);
             }
             {
-                // eslint-disable-next-line react-hooks/rules-of-hooks
                 // @ts-expect-error still using React 17 types for the time being
                 (React.useInsertionEffect || React.useLayoutEffect)(function () {
-                    if (!styleSheet.server) {
-                        renderStyles(instance, props, styleSheet, theme, stylis);
-                        return function () { return globalStyle.removeStyles(instance, styleSheet); };
+                    if (!ssc.styleSheet.server) {
+                        renderStyles(instance, props, ssc.styleSheet, theme, ssc.stylis);
+                        return function () { return globalStyle.removeStyles(instance, ssc.styleSheet); };
                     }
-                }, [instance, props, styleSheet, theme, stylis]);
+                }, [instance, props, ssc.styleSheet, theme, ssc.stylis]);
             }
             return null;
         };
@@ -1199,10 +1245,9 @@
         /* Warning if you've used keyframes on React Native */
         if (typeof navigator !== 'undefined' &&
             navigator.product === 'ReactNative') {
-            // eslint-disable-next-line no-console
             console.warn('`keyframes` cannot be used on ReactNative, only on the web. To do animation in ReactNative please use Animated.');
         }
-        var rules = css.apply(void 0, __spreadArray([strings], interpolations, false)).join('');
+        var rules = joinStringArray(css.apply(void 0, __spreadArray([strings], interpolations, false)));
         var name = generateComponentId(rules);
         return new Keyframes(name, rules);
     }
@@ -1314,10 +1359,9 @@
 
     function withTheme(Component) {
         var WithTheme = React.forwardRef(function (props, ref) {
-            var theme = React.useContext(ThemeContext);
+            var theme = useTheme();
             var themeProp = determineTheme(props, theme, Component.defaultProps);
             if (themeProp === undefined) {
-                // eslint-disable-next-line no-console
                 console.warn("[withTheme] You are not using a ThemeProvider nor passing a theme prop or a theme in defaultProps in component class \"".concat(getComponentName(Component), "\""));
             }
             return React.createElement(Component, __assign({}, props, { theme: themeProp, ref: ref }));
@@ -1326,8 +1370,6 @@
         return hoistNonReactStatics(WithTheme, Component);
     }
 
-    var useTheme = function () { return React.useContext(ThemeContext); };
-
     var ServerStyleSheet = /** @class */ (function () {
         function ServerStyleSheet() {
             var _this = this;
@@ -1339,7 +1381,7 @@
                     "".concat(SC_ATTR, "=\"true\""),
                     "".concat(SC_ATTR_VERSION, "=\"").concat(SC_VERSION, "\""),
                 ];
-                var htmlAttr = attrs.filter(Boolean).join(' ');
+                var htmlAttr = joinStringArray(attrs.filter(Boolean), ' ');
                 return "<style ".concat(htmlAttr, ">").concat(css, "</style>");
             };
             this.getStyleTags = function () {
@@ -1379,7 +1421,6 @@
             }
             return React.createElement(StyleSheetManager, { sheet: this.instance }, children);
         };
-        // eslint-disable-next-line consistent-return
         // @ts-expect-error alternate return types are not possible due to code transformation
         ServerStyleSheet.prototype.interleaveWithNodeStream = function (input) {
             {
@@ -1389,7 +1430,6 @@
         return ServerStyleSheet;
     }());
 
-    /* eslint-disable */
     var __PRIVATE__ = {
         StyleSheet: StyleSheet,
         mainSheet: mainSheet,
@@ -1399,30 +1439,23 @@
     /* Warning if you've imported this file on React Native */
     if (typeof navigator !== 'undefined' &&
         navigator.product === 'ReactNative') {
-        // eslint-disable-next-line no-console
-        console.warn("It looks like you've imported 'styled-components' on React Native.\n" +
-            "Perhaps you're looking to import 'styled-components/native'?\n" +
-            'Read more about this at https://www.styled-components.com/docs/basics#react-native');
+        console.warn("It looks like you've imported 'styled-components' on React Native.\nPerhaps you're looking to import 'styled-components/native'?\nRead more about this at https://www.styled-components.com/docs/basics#react-native");
     }
+    var windowGlobalKey = "__sc-".concat(SC_ATTR, "__");
     /* Warning if there are several instances of styled-components */
     if (typeof window !== 'undefined') {
-        window['__styled-components-init__'] || (window['__styled-components-init__'] = 0);
-        if (window['__styled-components-init__'] === 1) {
-            // eslint-disable-next-line no-console
-            console.warn("It looks like there are several instances of 'styled-components' initialized in this application. " +
-                'This may cause dynamic styles to not render properly, errors during the rehydration process, ' +
-                'a missing theme prop, and makes your application bigger without good reason.\n\n' +
-                'See https://s-c.sh/2BAXzed for more info.');
-        }
-        window['__styled-components-init__'] += 1;
+        // @ts-expect-error dynamic key not in window object
+        window[windowGlobalKey] || (window[windowGlobalKey] = 0);
+        // @ts-expect-error dynamic key not in window object
+        if (window[windowGlobalKey] === 1) {
+            console.warn("It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles to not render properly, errors during the rehydration process, a missing theme prop, and makes your application bigger without good reason.\n\nSee https://s-c.sh/2BAXzed for more info.");
+        }
+        // @ts-expect-error dynamic key not in window object
+        window[windowGlobalKey] += 1;
     }
 
     var secondary = /*#__PURE__*/Object.freeze({
         __proto__: null,
-        createGlobalStyle: createGlobalStyle,
-        css: css,
-        isStyledComponent: isStyledComponent,
-        keyframes: keyframes,
         ServerStyleSheet: ServerStyleSheet,
         StyleSheetConsumer: StyleSheetConsumer,
         StyleSheetContext: StyleSheetContext,
@@ -1430,10 +1463,14 @@
         ThemeConsumer: ThemeConsumer,
         ThemeContext: ThemeContext,
         ThemeProvider: ThemeProvider,
+        __PRIVATE__: __PRIVATE__,
+        createGlobalStyle: createGlobalStyle,
+        css: css,
+        isStyledComponent: isStyledComponent,
+        keyframes: keyframes,
         useTheme: useTheme,
         version: SC_VERSION,
-        withTheme: withTheme,
-        __PRIVATE__: __PRIVATE__
+        withTheme: withTheme
     });
 
     var LIMIT = 200;
@@ -1445,7 +1482,6 @@
                 generatedClasses[className] = true;
                 if (Object.keys(generatedClasses).length >= LIMIT) {
                     // Unable to find latestRule in test environment.
-                    /* eslint-disable no-console, prefer-template */
                     var parsedIdString = componentId ? " with the id of \"".concat(componentId, "\"") : '';
                     console.warn("Over ".concat(LIMIT, " classes were generated for component ").concat(displayName).concat(parsedIdString, ".\n") +
                         'Consider using the attrs method, together with a style object for frequently changed styles.\n' +
@@ -1464,7 +1500,7 @@
     });
 
     // Thanks to ReactDOMFactories for this handy list!
-    var domElements = [
+    var domElements = new Set([
         'a',
         'abbr',
         'address',
@@ -1600,7 +1636,7 @@
         'svg',
         'text',
         'tspan',
-    ];
+    ]);
 
     // Source: https://www.w3.org/TR/cssom-1/#serialize-an-identifier
     // Control characters and non-letter first symbols are not supported
@@ -1626,17 +1662,6 @@
         return isTag(target) ? "styled.".concat(target) : "Styled(".concat(getComponentName(target), ")");
     }
 
-    /**
-     * Convenience function for joining strings to form className chains
-     */
-    function joinStrings() {
-        var args = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            args[_i] = arguments[_i];
-        }
-        return args.filter(Boolean).join(' ');
-    }
-
     function mixinRecursively(target, source, forceMerge) {
         if (forceMerge === void 0) { forceMerge = false; }
         /* only merge into POJOs, Arrays, but for top level objects only
@@ -1679,74 +1704,61 @@
      */
     var ComponentStyle = /** @class */ (function () {
         function ComponentStyle(rules, componentId, baseStyle) {
-            this.names = [];
             this.rules = rules;
             this.staticRulesId = '';
             this.isStatic =
                 "development" === 'production'  ;
             this.componentId = componentId;
-            // SC_VERSION gives us isolation between multiple runtimes on the page at once
-            // this is improved further with use of the babel plugin "namespace" feature
             this.baseHash = phash(SEED, componentId);
             this.baseStyle = baseStyle;
             // NOTE: This registers the componentId, which ensures a consistent order
             // for this component's styles compared to others
             StyleSheet.registerId(componentId);
         }
-        /*
-         * Flattens a rule set into valid CSS
-         * Hashes it, wraps the whole chunk in a .hash1234 {}
-         * Returns the hash to be injected on render()
-         * */
         ComponentStyle.prototype.generateAndInjectStyles = function (executionContext, styleSheet, stylis) {
-            var componentId = this.componentId;
-            this.names.length = 0;
-            if (this.baseStyle) {
-                this.names.push(this.baseStyle.generateAndInjectStyles(executionContext, styleSheet, stylis));
-            }
+            var names = this.baseStyle
+                ? this.baseStyle.generateAndInjectStyles(executionContext, styleSheet, stylis)
+                : '';
             // force dynamic classnames if user-supplied stylis plugins are in use
             if (this.isStatic && !stylis.hash) {
-                if (this.staticRulesId && styleSheet.hasNameForId(componentId, this.staticRulesId)) {
-                    this.names.push(this.staticRulesId);
+                if (this.staticRulesId && styleSheet.hasNameForId(this.componentId, this.staticRulesId)) {
+                    names = joinStrings(names, this.staticRulesId);
                 }
                 else {
-                    var cssStatic = flatten(this.rules, executionContext, styleSheet, stylis).join('');
+                    var cssStatic = joinStringArray(flatten(this.rules, executionContext, styleSheet, stylis));
                     var name_1 = generateAlphabeticName(phash(this.baseHash, cssStatic) >>> 0);
-                    if (!styleSheet.hasNameForId(componentId, name_1)) {
-                        var cssStaticFormatted = stylis(cssStatic, ".".concat(name_1), undefined, componentId);
-                        styleSheet.insertRules(componentId, name_1, cssStaticFormatted);
+                    if (!styleSheet.hasNameForId(this.componentId, name_1)) {
+                        var cssStaticFormatted = stylis(cssStatic, ".".concat(name_1), undefined, this.componentId);
+                        styleSheet.insertRules(this.componentId, name_1, cssStaticFormatted);
                     }
-                    this.names.push(name_1);
+                    names = joinStrings(names, name_1);
                     this.staticRulesId = name_1;
                 }
             }
             else {
-                var length_1 = this.rules.length;
                 var dynamicHash = phash(this.baseHash, stylis.hash);
                 var css = '';
-                for (var i = 0; i < length_1; i++) {
+                for (var i = 0; i < this.rules.length; i++) {
                     var partRule = this.rules[i];
                     if (typeof partRule === 'string') {
                         css += partRule;
                         dynamicHash = phash(dynamicHash, partRule);
                     }
                     else if (partRule) {
-                        var partChunk = flatten(partRule, executionContext, styleSheet, stylis);
-                        var partString = Array.isArray(partChunk) ? partChunk.join('') : partChunk;
+                        var partString = joinStringArray(flatten(partRule, executionContext, styleSheet, stylis));
                         dynamicHash = phash(dynamicHash, partString);
                         css += partString;
                     }
                 }
                 if (css) {
                     var name_2 = generateAlphabeticName(dynamicHash >>> 0);
-                    if (!styleSheet.hasNameForId(componentId, name_2)) {
-                        var cssFormatted = stylis(css, ".".concat(name_2), undefined, componentId);
-                        styleSheet.insertRules(componentId, name_2, cssFormatted);
+                    if (!styleSheet.hasNameForId(this.componentId, name_2)) {
+                        styleSheet.insertRules(this.componentId, name_2, stylis(css, ".".concat(name_2), undefined, this.componentId));
                     }
-                    this.names.push(name_2);
+                    names = joinStrings(names, name_2);
                 }
             }
-            return this.names.join(' ');
+            return names;
         };
         return ComponentStyle;
     }());
@@ -1763,67 +1775,75 @@
         SC_VERSION + name + identifiers[name]));
         return parentComponentId ? "".concat(parentComponentId, "-").concat(componentId) : componentId;
     }
-    function useInjectedStyle(componentStyle, isStatic, resolvedAttrs, warnTooManyClasses) {
-        var styleSheet = useStyleSheet();
-        var stylis = useStylis();
-        var className = componentStyle.generateAndInjectStyles(isStatic ? EMPTY_OBJECT : resolvedAttrs, styleSheet, stylis);
-        // eslint-disable-next-line react-hooks/rules-of-hooks
+    function useInjectedStyle(componentStyle, isStatic, resolvedAttrs) {
+        var ssc = useStyleSheetContext();
+        var className = componentStyle.generateAndInjectStyles(isStatic ? EMPTY_OBJECT : resolvedAttrs, ssc.styleSheet, ssc.stylis);
         React.useDebugValue(className);
-        if (!isStatic && warnTooManyClasses) {
-            warnTooManyClasses(className);
-        }
         return className;
     }
-    function useStyledComponentImpl(forwardedComponent, props, forwardedRef, isStatic) {
-        var componentAttrs = forwardedComponent.attrs, componentStyle = forwardedComponent.componentStyle, defaultProps = forwardedComponent.defaultProps, foldedComponentIds = forwardedComponent.foldedComponentIds, shouldForwardProp = forwardedComponent.shouldForwardProp, styledComponentId = forwardedComponent.styledComponentId, target = forwardedComponent.target;
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        React.useDebugValue(styledComponentId);
-        // NOTE: the non-hooks version only subscribes to this when !componentStyle.isStatic,
-        // but that'd be against the rules-of-hooks. We could be naughty and do it anyway as it
-        // should be an immutable value, but behave for now.
-        var theme = determineTheme(props, React.useContext(ThemeContext), defaultProps) || EMPTY_OBJECT;
-        var context = componentAttrs.reduce(function (p, attrDef) {
-            var resolvedAttrDef = typeof attrDef === 'function' ? attrDef(p) : attrDef;
-            /* eslint-disable guard-for-in */
+    function resolveContext(attrs, props, theme) {
+        var context = __assign(__assign({}, props), { 
+            // unset, add `props.className` back at the end so props always "wins"
+            className: undefined, theme: theme });
+        var attrDef;
+        for (var i = 0; i < attrs.length; i += 1) {
+            attrDef = attrs[i];
+            var resolvedAttrDef = isFunction(attrDef) ? attrDef(context) : attrDef;
             for (var key in resolvedAttrDef) {
                 // @ts-expect-error bad types
-                p[key] =
+                context[key] =
                     key === 'className'
-                        ? joinStrings(p[key], resolvedAttrDef[key])
+                        ? joinStrings(context[key], resolvedAttrDef[key])
                         : key === 'style'
-                            ? __assign(__assign({}, p[key]), resolvedAttrDef[key]) : resolvedAttrDef[key];
+                            ? __assign(__assign({}, context[key]), resolvedAttrDef[key]) : resolvedAttrDef[key];
             }
-            /* eslint-enable guard-for-in */
-            return p;
-        }, __assign(__assign({}, props), { theme: theme }));
-        var generatedClassName = useInjectedStyle(componentStyle, isStatic, context, forwardedComponent.warnTooManyClasses );
-        var refToForward = forwardedRef;
+        }
+        if (props.className) {
+            context.className = joinStrings(context.className, props.className);
+        }
+        return context;
+    }
+    function useStyledComponentImpl(forwardedComponent, props, forwardedRef, isStatic) {
+        var componentAttrs = forwardedComponent.attrs, componentStyle = forwardedComponent.componentStyle, defaultProps = forwardedComponent.defaultProps, foldedComponentIds = forwardedComponent.foldedComponentIds, styledComponentId = forwardedComponent.styledComponentId, target = forwardedComponent.target;
+        var contextTheme = useTheme();
+        var ssc = useStyleSheetContext();
+        var shouldForwardProp = forwardedComponent.shouldForwardProp || ssc.shouldForwardProp;
+        React.useDebugValue(styledComponentId);
+        // NOTE: the non-hooks version only subscribes to this when !componentStyle.isStatic,
+        // but that'd be against the rules-of-hooks. We could be naughty and do it anyway as it
+        // should be an immutable value, but behave for now.
+        var theme = determineTheme(props, contextTheme, defaultProps) || EMPTY_OBJECT;
+        var context = resolveContext(componentAttrs, props, theme);
         var elementToBeCreated = context.as || target;
-        var isTargetTag = isTag(elementToBeCreated);
         var propsForElement = {};
-        // eslint-disable-next-line guard-for-in
         for (var key in context) {
-            // @ts-expect-error for..in iterates strings instead of keyof
             if (context[key] === undefined) ;
             else if (key[0] === '$' || key === 'as' || key === 'theme') ;
             else if (key === 'forwardedAs') {
                 propsForElement.as = context.forwardedAs;
             }
             else if (!shouldForwardProp || shouldForwardProp(key, elementToBeCreated)) {
-                // @ts-expect-error for..in iterates strings instead of keyof
                 propsForElement[key] = context[key];
             }
         }
+        var generatedClassName = useInjectedStyle(componentStyle, isStatic, context);
+        if (!isStatic && forwardedComponent.warnTooManyClasses) {
+            forwardedComponent.warnTooManyClasses(generatedClassName);
+        }
+        var classString = joinStrings(foldedComponentIds, styledComponentId);
+        if (generatedClassName) {
+            classString += ' ' + generatedClassName;
+        }
+        if (context.className) {
+            classString += ' ' + context.className;
+        }
         propsForElement[
         // handle custom elements which React doesn't properly alias
-        isTargetTag &&
-            domElements.indexOf(elementToBeCreated) === -1
+        isTag(elementToBeCreated) &&
+            !domElements.has(elementToBeCreated)
             ? 'class'
-            : 'className'] = foldedComponentIds
-            .concat(styledComponentId, generatedClassName !== styledComponentId ? generatedClassName : '', context.className || '')
-            .filter(Boolean)
-            .join(' ');
-        propsForElement.ref = refToForward;
+            : 'className'] = classString;
+        propsForElement.ref = forwardedRef;
         return React.createElement(elementToBeCreated, propsForElement);
     }
     function createStyledComponent(target, options, rules) {
@@ -1836,9 +1856,7 @@
             : options.componentId || componentId;
         // fold the underlying StyledComponent attrs up (implicit extend)
         var finalAttrs = isTargetStyledComp && styledComponentTarget.attrs
-            ? styledComponentTarget.attrs
-                .concat(attrs)
-                .filter(Boolean)
+            ? styledComponentTarget.attrs.concat(attrs).filter(Boolean)
             : attrs;
         var shouldForwardProp = options.shouldForwardProp;
         if (isTargetStyledComp && styledComponentTarget.shouldForwardProp) {
@@ -1860,7 +1878,6 @@
         // and shouldn't be increasing the number of class names
         var isStatic = componentStyle.isStatic && attrs.length === 0;
         function forwardRef(props, ref) {
-            // eslint-disable-next-line
             return useStyledComponentImpl(WrappedStyledComponent, props, ref, isStatic);
         }
         forwardRef.displayName = displayName;
@@ -1876,8 +1893,8 @@
         // 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
-            ? styledComponentTarget.foldedComponentIds.concat(styledComponentTarget.styledComponentId)
-            : EMPTY_ARRAY;
+            ? joinStrings(styledComponentTarget.foldedComponentIds, styledComponentTarget.styledComponentId)
+            : '';
         WrappedStyledComponent.styledComponentId = styledComponentId;
         // fold the underlying StyledComponent target up since we folded the styles
         WrappedStyledComponent.target = isTargetStyledComp ? styledComponentTarget.target : target;
@@ -1895,7 +1912,13 @@
             checkDynamicCreation(displayName, styledComponentId);
             WrappedStyledComponent.warnTooManyClasses = createWarnTooManyClasses(displayName, styledComponentId);
         }
-        WrappedStyledComponent.toString = function () { return ".".concat(WrappedStyledComponent.styledComponentId); };
+        // If the Object prototype is frozen, the "toString" property is non-writable. This means that any objects which inherit this property
+        // cannot have the property changed using an assignment. If using strict mode, attempting that will cause an error. If not using strict
+        // mode, attempting that will be silently ignored.
+        // However, we can still explicitly shadow the prototype's "toString" property by defining a new "toString" property on this object.
+        Object.defineProperty(WrappedStyledComponent, 'toString', {
+            value: function () { return ".".concat(WrappedStyledComponent.styledComponentId); },
+        });
         if (isCompositeComponent) {
             var compositeComponentTarget = target;
             hoistNonReactStatics(WrappedStyledComponent, compositeComponentTarget, {