styled-components - npm Package Compare versions

Comparing version 2.0.0-10 to 2.0.0-11

CHANGELOG.md

@@ -19,2 +19,3 @@ # Change Log
 - Fix defaultProps used instead of ThemeProvider on first render [@k15a](https://github.com/k15a), restored.
+- Refactor StyledComponent for performance optimization.
 
@@ -21,0 +22,0 @@ ## [Unreleased]

dist/styled-components.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t(e.styled=e.styled||{},e.React)}(this,function(e,t){"use strict";function n(e){return e.replace(h,"-$1").toLowerCase()}function r(e){return f(e).replace(g,"-ms-")}function o(e){return T(e)===!0&&"[object Object]"===Object.prototype.toString.call(e)}function i(e,t){return t={exports:{}},e(t,t.exports),t.exports}function a(e){return e[e.length-1]}function s(e){for(var t=0;t<document.styleSheets.length;t++)if(document.styleSheets[t].ownerNode===e)return document.styleSheets[t]}function u(){var e=document.createElement("style");return e.type="text/css",e.appendChild(document.createTextNode("")),(document.head||document.getElementsByTagName("head")[0]).appendChild(e),e}function l(e){return"string"==typeof e}function c(e){var t=J.call(e);return"[object Function]"===t||"function"==typeof e&&"[object RegExp]"!==t||"undefined"!=typeof window&&(e===window.setTimeout||e===window.alert||e===window.confirm||e===window.prompt)}var p="default"in t?t.default:t,h=/([A-Z])/g,d=n,f=d,g=/^ms-/,m=r,y="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},v=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},b=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),C=function(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e},x=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},k=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},A=function(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n},w=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},S=function(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)},O=function(e){return null!=e&&"object"===(void 0===e?"undefined":y(e))&&!Array.isArray(e)},T=O,E=function(e){var t,n;return o(e)!==!1&&("function"==typeof(t=e.constructor)&&(n=t.prototype,o(n)!==!1&&n.hasOwnProperty("isPrototypeOf")!==!1))},P=function e(t,n){var r=Object.keys(t).map(function(n){return E(t[n])?e(t[n],n):m(n)+": "+t[n]+";"}).join(" ");return n?n+" {\n  "+r+"\n}":r},j=function e(t,n){return t.reduce(function(t,r){return void 0===r||null===r||r===!1||""===r?t:Array.isArray(r)?[].concat(S(t),S(e(r,n))):r.hasOwnProperty("styledComponentId")?[].concat(S(t),["."+r.styledComponentId]):"function"==typeof r?n?t.concat.apply(t,S(e([r(n)],n))):t.concat(r):t.concat(E(r)?P(r):r.toString())},[])},R="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},M=i(function(e,t){!function(n){"object"===(void 0===t?"undefined":y(t))&&void 0!==e?e.exports=n(R):window.stylis=n(window)}(function(e){function t(e,n,r,o,i){e+="";var a,s,u,l,c,p="",h="",d=e.charCodeAt(0);91===d?(u=e.substring(1,e.length-1).split("="),a=(h=u[1]).charCodeAt(0),34!==a&&39!==a||(h=h.substring(1,h.length-1)),p="["+u[0]+'="'+h+'"]'):h=35===d||46===d||62===d?(p=e).substring(1):p=e,d=0,void 0==r||r===!0?(r=!0,l=h):(l="",r=!1);var f=null!=i,g=t.plugins,m=g.length;f&&(c=(void 0===i?"undefined":y(i)).charCodeAt(0),111===c?t.use(i,null):102===c?g[m++]=i:f=!1),0!==m&&(i=1===m?g[0]:function(e,t,n,r,o,i){for(var a=t,s=0,u=g.length;s<u;s++)a=g[s](e,a,n,r,o,i)||a;if(a!==t)return a},f=!0);var v,b,C,x,k,A,w,S,O,T,E,P,j,R,M,D,F,L,I,_,N="-ms-",U="-webkit-",W="",z="",B="",H=0,q=0,V=0,$=0,K=0,X=0,G=0,Y=0,Z=0,J=0,Q=0,ee=0,te=0,ne=0;f&&(A=i(0,n,ae,ie,p,0),null!=A&&(n=A),D="");for(var re=0,oe=0,ie=0,ae=1,se=n.length,ue=se-1,le="";re<se;){if(H=n.charCodeAt(re),0===G&&0===X&&0===ee&&(123===H||125===H||59===H||re===se-1&&0!==W.length)){if(W+=n.charAt(re),f&&125!==H&&f&&null!=(A=123===H?i(1,W.substring(0,W.length-1).trim(),ae,ie,p,le.length):i(2,W,ae,ie,p,le.length))&&(W=123===H?A+" {":A),O=W.charCodeAt(0),32===O&&(O=(W=W.trim()).charCodeAt(0)),T=W.charCodeAt(1),E=W.charCodeAt(2),64===O){if(1===J&&0!==B.length&&(J=0,B=p+" {"+B+"}",f&&null!=(A=i(4,B,ae,ie,p,le.length))&&(B=A),le+=B,B=""),59!==H)if(107===T||103===T)107===T?(j=W.substring(1,11)+(0===Y?l:"")+W.substring(11),W="@"+U+j,d=1):(Y=1,W="");else if(109===T)if(o===!0&&105===E)void 0===I&&(I={}),j=(_=W.substring(7,W.indexOf("{"))+" ").trim(),_=_.substring(0,_.indexOf(" ")).trim(),I[_]={key:j.trim(),body:""},d=3,W="",j="";else if(101===E)if(0!==oe){for(re++,ie++,void 0===k&&(k=""),A="",b="",C=w.split(t.regex.split),$=1;re<se&&(a=n.charCodeAt(re),123===a?$++:125===a&&$--,0!==$);)b+=n.charAt(re++),ie=13===a||10===a?(ae++,0):ie+1;m=C.length;for(var ce=0;ce<m;ce++)e=C[ce],A+=t((ce===m-1?e.substring(0,e.length-1):e).trim(),b,r,o,i);k+=W+A+"}",W="",1,d=4}else d=2,M=W,W="";else d=6;if(105===T){if(o===!0&&110===E)if(W=W.substring(9,W.length-1),(S=W.indexOf("("))!==-1){var pe=W.substring(0,S),he=I[pe],de=W.substring(pe.length+1,W.length-1).split(","),fe=he.key.replace(pe,"").replace(/\(|\)/g,"").trim().split(",");W=he.body,m=de.length;for(var ce=0;ce<m;ce++){var ge=fe[ce].trim();void 0!==ge&&(W=W.replace(new RegExp("var\\(~~"+ge+"\\)","g"),de[ce].trim()))}n+=W,se+=W.length,W=""}else W=I[W].body,0===oe&&(n+=W,se+=W.length,W="");else if(109===E&&f){var me=/@import.*?(["'`][^\.\n\r]*?["'`];|["'`][^:\r\n]*?\.[^c].*?["'`])/g.exec(W);null!==me&&(W=i(5,me[1].replace(/['"; ]/g,""),ae,ie,p,le.length)||"",W&&(n=n.substring(0,re+1)+W+n.substring(re+1),se+=W.length),W="")}}else 4!==d&&59!==H&&(107!==T&&103!==T&&109!==T&&(d=5),V=-1,q++)}else if(o===!0&&126===O&&126===T&&59===H&&(v=W.indexOf(":"))!==-1)void 0===L&&(F=[],L=0),F[L++]=[W.substring(0,v),W.substring(v+1,W.length-1).trim()],W="";else{if(123===H)if(oe++,1===J&&0!==B.length&&(J=0,B=p+" {"+B+"}",f&&null!=(A=i(4,B,ae,ie,p,le.length))&&(B=A),le+=B,B=""),2===oe){re++,ie++,b="";var ye=W.substring(0,W.length-1).split(t.regex.split),ve=w.substring(0,w.length-1).split(t.regex.split);for($=1;re<se&&(a=n.charCodeAt(re),123===a?$++:125===a&&$--,0!==$);)b+=n.charAt(re++),ie=13===a||10===a?(ae++,0):ie+1;m=ve.length;for(var be=0;be<m;be++){A=ve[be],S=A.indexOf(p),ve[be]="";for(var Ce=0,xe=ye.length;Ce<xe;Ce++)e=S>0?":global()"+A.trim():A.replace(p,"&").trim(),P=ye[Ce].trim(),e=P.indexOf(" &")>0?P.replace("&","").trim()+" "+e:null!==t.regex.global[0].exec(P)?P:e+" "+P,ve[be]+=e.replace(/ +&/,"").trim()+(Ce===xe-1?"":",")}void 0===R&&(R=""),R+="\n"+ve.join(",").replace(t.regex.global[1]," $1")+" {"+b+"}",K=1,W="",oe--}else if(0!==Y||0!==q&&2!==d)w=W;else{C=W.split(t.regex.split),x="",w="",m=C.length;for(var be=0;be<m;be++){if(a=(e=C[be]).charCodeAt(0),32===a&&(a=(e=e.trim()).charCodeAt(0)),38===a)e=p+e.substring(1).replace(t.regex.and,p);else if((S=e.indexOf(" &"))>0&&(Z=2,0!==e.indexOf(":global()")&&(e=":global("+e.substring(0,S)+")"+e.substring(S)),a=58),58===a){var ke=e.charCodeAt(1);if(104===ke&&116===e.charCodeAt(4)){var Ae=e.charCodeAt(5);e=40===Ae?p+e.replace(/:host\((.*)\)/g,"$1").replace(t.regex.and,p):45===Ae?e.replace(/:host-context\((.*)\)/g,"$1 "+p).replace(t.regex.and,p):p+e.substring(5)}else 103===ke?(2!==Z&&(Z=1),e=e.replace(t.regex.global[0],"$1").replace(t.regex.and,p)):e=p+e}else 0===Z&&(e=p+" "+e);f&&null!=(A=i(1.5,be===m-1?e.substring(0,e.length-1).trim():e,ae,ie,p,le.length))&&(e=be===m-1?A+" {":A),w+=(0!==be?",":"")+(1!==Z?e:":global()"+e),x+=0!==be?","+e:e,Z=0}W=x}else if((125===H&&1===W.length)==!1){if(59!==H&&(W=(125===H?W.substring(0,W.length-1):W.trim())+";"),97===O&&110===T&&105===E){if(W=W.substring(0,W.length-1),v=W.indexOf(":")+1,x=W.substring(0,v),r===!0&&45!==W.charCodeAt(9)){var we=W.substring(v).trim().split(",");m=we.length;for(var be=0;be<m;be++){for(var Se=we[be],Oe=Se.split(" "),Ce=0,xe=Oe.length;Ce<xe;Ce++){var Te=Oe[Ce].trim(),Ee=Te.charCodeAt(0),Pe=Te.charCodeAt(2),je=Te.length,ue=Te.charCodeAt(je-1);41===ue||0===je||105===Ee&&102===Pe&&101===ue&&8===je||108===Ee&&110===Pe&&114===ue&&6===je||97===Ee&&116===Pe&&101===ue&&(9===je||17===je)||110===Ee&&114===Pe&&108===ue&&6===je||98===Ee&&99===Pe&&115===ue&&9===je||102===Ee&&114===Pe&&115===ue&&8===je||98===Ee&&116===Pe&&104===ue&&4===je||110===Ee&&110===Pe&&101===ue&&4===je||114===Ee&&110===Pe&&103===ue&&7===je||112===Ee&&117===Pe&&100===ue&&6===je||114===Ee&&118===Pe&&100===ue&&8===je||115===Ee&&101===Pe&&(116===ue&&10===je||100===ue&&8===je)||101===Ee&&115===Pe&&(101===ue&&4===je||(11===je||7===je||8===je)&&45===Te.charCodeAt(4))||!isNaN(parseFloat(Te))||Te.indexOf("(")!==-1||(Oe[Ce]=l+Te)}x+=(0===be?"":",")+Oe.join(" ").trim()}}else x+=(110!==W.charCodeAt(10)?"":l)+W.substring(v).trim().trim();W=U+x+";"+x+(125===H?";}":";")}else if(97===O&&112===T&&112===E)W=U+W+"-moz-"+W+W;else if(100===O&&105===T&&115===E)(S=W.indexOf("flex"))!==-1&&(A=101===W.charCodeAt(S-2)?"inline-":"",W="display: "+U+A+"box;display: "+U+A+"flex;display: "+N+"flexbox;display: "+A+"flex;");else if(116===O&&114===T&&97===E)W=U+W+(102===W.charCodeAt(5)?N+W:"")+W;else if(104===O&&121===T&&112===E||117===O&&115===T&&101===E)W=U+W+"-moz-"+W+N+W+W;else if(102===O&&108===T&&101===E)W=U+W+N+W+W;else if(111===O&&114===T&&100===E)W=U+W+N+"flex-"+W+W;else if(97===O&&108===T&&105===E&&45===W.charCodeAt(5))switch(W.charCodeAt(6)){case 105:A=W.replace("-items",""),W=U+"box-"+A+N+"flex-"+A+W;break;case 115:W=N+"flex-item-"+W.replace("-self","")+W;break;default:W=N+"flex-line-pack"+W.replace("align-content","")+W}else 99===O&&117===T&&114===E&&null!==/zoo|gra/.exec(W)?W=W.replace(/: +/g,": "+U)+W.replace(/: +/g,": -moz-")+W:119===O&&105===T&&100===E&&(S=W.indexOf("-content"))!==-1&&(A=W.substring(S-3),W="width: -webkit-"+A+"width: -moz-"+A+"width: "+A);59!==H&&(W=W.substring(0,W.length-1),125===H&&(W+="}"))}125===H&&(0!==oe&&oe--,0===oe&&1===K&&(n=n.substring(0,re+1)+R+n.substring(re+1),se+=R.length,R="",K=0,V++),125!==O&&32===W.charCodeAt(W.length-2)&&(W=W.substring(0,W.length-1).trim()+"}")),0!==q?(125===H?V++:123===H&&0!==V&&V--,1!==Q||123!==H&&0!==V||0===B.length||(Q=0,W=p+" {"+B+"}"+W,B=""),0===V?(0===d?(Y=0,W=""):1===d?(W="}@"+j+"}",j=""):3===d&&(I[_].body=j,_="",W="",j=""),d=0,V--,q--):1===d||3===d?(j+=W,3===d&&(W="")):2===d&&0===oe&&(125!==H&&(0===Q&&(B=""),B+=W,W=""),Q=1)):0===oe&&125!==H&&(J=1,B=void 0===B?W:B+W,W="")}z+=W,125!==H||0!==d&&2!==d&&4!==d||(a=z.charCodeAt(z.length-2),4===d&&(d=0),void 0!==k&&0!==k.length&&(z=123===a?k:z+k,k="",a=z.charCodeAt(z.length-2)),123!==a&&(f&&null!=(A=i(3,z,ae,ie,p,le.length))&&(z=A),void 0!==M?(M+=z,125===M.charCodeAt(M.length-2)&&(le+=M,M=void 0)):le+=z),z=""),W=""}else if(13===H||10===H)1===ne?(ee=ne=0,W=W.substring(0,W.indexOf("//"))):f&&0===ee&&0!==(m=(D=D.trim()).length)&&47!==D.charCodeAt(0)&&(0!==W.length&&null!=(A=i(7,D,ae,ie,p,le.length))&&(W=W.replace(new RegExp(D+"$"),A)),D=""),ie=0,ae++;else{if(9!==H)switch(s=n.charAt(re),f&&0===ee&&(D+=s),W+=s,H){case 34:0===ee&&(G=34===G?0:39===G?39:34);break;case 39:0===ee&&(G=39===G?0:34===G?34:39);break;case 40:0===G&&0===ee&&(X=1);break;case 41:0===G&&0===ee&&(X=0);break;case 47:0===G&&0===X&&(a=n.charCodeAt(re-1),0===te&&47===a?ee=ne=1:42===a&&(ee=te=0,W=W.substring(0,W.indexOf("/*"))));break;case 42:0===G&&0===X&&0===ne&&0===te&&47===n.charCodeAt(re-1)&&(ee=te=1)}ie++}re++}if(void 0!==B&&0!==B.length&&(B=p+" {"+B+"}",f&&null!=(A=i(4,B,ae,ie,p,le.length))&&(B=A),le+=B),o&&void 0!==F)for(var ce=0;ce<L;ce++)le=le.replace(new RegExp("var\\("+F[ce][0]+"\\)","g"),F[ce][1]);return f&&null!=(A=i(6,le,ae,ie,p,le.length))&&(le=A),le}return t.use=function(e,n){var r=t.plugins,o=r.length;if(null==n&&(n=e,e=void 0),null!=n)if(n.constructor===Object)for(var i in n)t.use(i,n[i]);else if(n.constructor===Array)for(var a=0,s=n.length;a<s;a++)r[o++]=n[a];else if(null==e)r[o]=n;else{var u=e instanceof RegExp?e:new RegExp(e+"\\([ \\t\\r\\n]*([^\\0]*?)[ \\t\\r\\n]*\\)","g"),l=function(e,t){var r=t.replace(/[ \t\r\n]*,[ \t\r\n]*/g,",").split(","),o=n.apply(null,r);return null!=o?o:e};r[o]=function(e,t){if(6===e)return t.replace(u,l)}}return t},t.plugins=[],t.regex={and:/&/g,split:/,[\s]*(?![^\r\n\[]*[\]\)])/g,import:/@import.*?(["'`][^\.\n\r]*?["'`];|["'`][^:\r\n]*?\.[^c].*?["'`])/g,global:[/:global\(((?:[^\(\)\[\]]*|\[.*\]|\([^\(\)]*\))*)\)/g,/(?:&| ):global\(((?:[^\(\)\[\]]*|\[.*\]|\([^\(\)]*\))*)\)/g]},t})}),D=function(e,t,n){var r=e.join("").replace(/^\s*\/\/.*$/gm,""),o=t&&n?n+" "+t+" { "+r+" }":r;return M(n||!t?"":t,o,!1,!1)},F="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ".split(""),L=function e(t){var n=F[t%F.length];return t>F.length?""+e(Math.floor(t/F.length))+n:n},I=function(e,t){return t.reduce(function(t,n,r){return t.concat(n,e[r+1])},[e[0]])},_=function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];return j(I(e,n))},N="undefined"!=typeof document,U=!1,W=!1,z=function(){if(N){var e=document.createElement("div");return e.innerHTML="<!--[if lt IE 10]><i></i><![endif]-->",1===e.getElementsByTagName("i").length}}(),B=function(){function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=t.speedy,r=void 0===n?!U&&!W:n,o=t.maxLength,i=void 0===o?N&&z?4e3:65e3:o;v(this,e),this.isSpeedy=r,this.sheet=void 0,this.tags=[],this.maxLength=i,this.ctr=0}return b(e,[{key:"inject",value:function(){var e=this;if(this.injected)throw new Error("already injected stylesheet!");N?(this.tags[0]=u(),this.sheet=s(this.tags[0])):this.sheet={cssRules:[],insertRule:function(t){var n={cssText:t};return e.sheet.cssRules.push(n),{serverRule:n,appendRule:function(e){return n.cssText+=e}}}},this.injected=!0}},{key:"speedy",value:function(e){if(0!==this.ctr)throw new Error("cannot change speedy mode after inserting any rule to sheet. Either call speedy("+e+") earlier in your app, or call flush() before speedy("+e+")");this.isSpeedy=!!e}},{key:"_insert",value:function(e){try{this.sheet.insertRule(e,this.sheet.cssRules.length)}catch(t){U&&console.warn("whoops, illegal rule inserted",e)}}},{key:"insert",value:function(e){var t=void 0;if(N)if(this.isSpeedy&&this.sheet.insertRule)this._insert(e);else{var n=document.createTextNode(e);a(this.tags).appendChild(n),t={textNode:n,appendRule:function(e){return n.appendData(e)}},this.isSpeedy||(this.sheet=s(a(this.tags)))}else t=this.sheet.insertRule(e);return this.ctr++,N&&this.ctr%this.maxLength==0&&(this.tags.push(u()),this.sheet=s(a(this.tags))),t}},{key:"flush",value:function(){N?(this.tags.forEach(function(e){return e.parentNode.removeChild(e)}),this.tags=[],this.sheet=null,this.ctr=0):this.sheet.cssRules=[],this.injected=!1}},{key:"rules",value:function(){if(!N)return this.sheet.cssRules;var e=[];return this.tags.forEach(function(t){return e.splice.apply(e,[e.length,0].concat(S(Array.from(s(t).cssRules))))}),e}}]),e}(),H=function(){function e(){v(this,e),this.styleSheet=new B({speedy:!1,maxLength:40})}return b(e,[{key:"inject",value:function(){return this.styleSheet.inject()}},{key:"insert",value:function(e){return this.styleSheet.insert(e)}},{key:"reset",value:function(){this.styleSheet.sheet&&this.styleSheet.flush()}},{key:"rules",value:function(){return this.styleSheet.rules()}},{key:"getCSS",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.min,n=void 0===t||t;return this.styleSheet.sheet?this.styleSheet.rules().map(function(e){return e.cssText}).join(n?"":"\n"):""}},{key:"injected",get:function(){return this.styleSheet.injected}}]),e}(),q=new H,V={children:!0,dangerouslySetInnerHTML:!0,key:!0,ref:!0,autoFocus:!0,defaultValue:!0,valueLink:!0,defaultChecked:!0,checkedLink:!0,innerHTML:!0,suppressContentEditableWarning:!0,onFocusIn:!0,onFocusOut:!0,className:!0,onCopy:!0,onCut:!0,onPaste:!0,onCompositionEnd:!0,onCompositionStart:!0,onCompositionUpdate:!0,onKeyDown:!0,onKeyPress:!0,onKeyUp:!0,onFocus:!0,onBlur:!0,onChange:!0,onInput:!0,onSubmit:!0,onClick:!0,onContextMenu:!0,onDoubleClick:!0,onDrag:!0,onDragEnd:!0,onDragEnter:!0,onDragExit:!0,onDragLeave:!0,onDragOver:!0,onDragStart:!0,onDrop:!0,onMouseDown:!0,onMouseEnter:!0,onMouseLeave:!0,onMouseMove:!0,onMouseOut:!0,onMouseOver:!0,onMouseUp:!0,onSelect:!0,onTouchCancel:!0,onTouchEnd:!0,onTouchMove:!0,onTouchStart:!0,onScroll:!0,onWheel:!0,onAbort:!0,onCanPlay:!0,onCanPlayThrough:!0,onDurationChange:!0,onEmptied:!0,onEncrypted:!0,onEnded:!0,onError:!0,onLoadedData:!0,onLoadedMetadata:!0,onLoadStart:!0,onPause:!0,onPlay:!0,onPlaying:!0,onProgress:!0,onRateChange:!0,onSeeked:!0,onSeeking:!0,onStalled:!0,onSuspend:!0,onTimeUpdate:!0,onVolumeChange:!0,onWaiting:!0,onLoad:!0,onAnimationStart:!0,onAnimationEnd:!0,onAnimationIteration:!0,onTransitionEnd:!0,onCopyCapture:!0,onCutCapture:!0,onPasteCapture:!0,onCompositionEndCapture:!0,onCompositionStartCapture:!0,onCompositionUpdateCapture:!0,onKeyDownCapture:!0,onKeyPressCapture:!0,onKeyUpCapture:!0,onFocusCapture:!0,onBlurCapture:!0,onChangeCapture:!0,onInputCapture:!0,onSubmitCapture:!0,onClickCapture:!0,onContextMenuCapture:!0,onDoubleClickCapture:!0,onDragCapture:!0,onDragEndCapture:!0,onDragEnterCapture:!0,onDragExitCapture:!0,onDragLeaveCapture:!0,onDragOverCapture:!0,onDragStartCapture:!0,onDropCapture:!0,onMouseDownCapture:!0,onMouseEnterCapture:!0,onMouseLeaveCapture:!0,onMouseMoveCapture:!0,onMouseOutCapture:!0,onMouseOverCapture:!0,onMouseUpCapture:!0,onSelectCapture:!0,onTouchCancelCapture:!0,onTouchEndCapture:!0,onTouchMoveCapture:!0,onTouchStartCapture:!0,onScrollCapture:!0,onWheelCapture:!0,onAbortCapture:!0,onCanPlayCapture:!0,onCanPlayThroughCapture:!0,onDurationChangeCapture:!0,onEmptiedCapture:!0,onEncryptedCapture:!0,onEndedCapture:!0,onErrorCapture:!0,onLoadedDataCapture:!0,onLoadedMetadataCapture:!0,onLoadStartCapture:!0,onPauseCapture:!0,onPlayCapture:!0,onPlayingCapture:!0,onProgressCapture:!0,onRateChangeCapture:!0,onSeekedCapture:!0,onSeekingCapture:!0,onStalledCapture:!0,onSuspendCapture:!0,onTimeUpdateCapture:!0,onVolumeChangeCapture:!0,onWaitingCapture:!0,onLoadCapture:!0,onAnimationStartCapture:!0,onAnimationEndCapture:!0,onAnimationIterationCapture:!0,onTransitionEndCapture:!0},$={accept:!0,acceptCharset:!0,accessKey:!0,action:!0,allowFullScreen:!0,allowTransparency:!0,alt:!0,as:!0,async:!0,autoComplete:!0,autoPlay:!0,capture:!0,cellPadding:!0,cellSpacing:!0,charSet:!0,challenge:!0,checked:!0,cite:!0,classID:!0,className:!0,cols:!0,colSpan:!0,content:!0,contentEditable:!0,contextMenu:!0,controls:!0,coords:!0,crossOrigin:!0,data:!0,dateTime:!0,default:!0,defer:!0,dir:!0,disabled:!0,download:!0,draggable:!0,encType:!0,form:!0,formAction:!0,formEncType:!0,formMethod:!0,formNoValidate:!0,formTarget:!0,frameBorder:!0,headers:!0,height:!0,hidden:!0,high:!0,href:!0,hrefLang:!0,htmlFor:!0,httpEquiv:!0,icon:!0,id:!0,inputMode:!0,integrity:!0,is:!0,keyParams:!0,keyType:!0,kind:!0,label:!0,lang:!0,list:!0,loop:!0,low:!0,manifest:!0,marginHeight:!0,marginWidth:!0,max:!0,maxLength:!0,media:!0,mediaGroup:!0,method:!0,min:!0,minLength:!0,multiple:!0,muted:!0,name:!0,nonce:!0,noValidate:!0,open:!0,optimum:!0,pattern:!0,placeholder:!0,playsInline:!0,poster:!0,preload:!0,profile:!0,radioGroup:!0,readOnly:!0,referrerPolicy:!0,rel:!0,required:!0,reversed:!0,role:!0,rows:!0,rowSpan:!0,sandbox:!0,scope:!0,scoped:!0,scrolling:!0,seamless:!0,selected:!0,shape:!0,size:!0,sizes:!0,span:!0,spellCheck:!0,src:!0,srcDoc:!0,srcLang:!0,srcSet:!0,start:!0,step:!0,style:!0,summary:!0,tabIndex:!0,target:!0,title:!0,type:!0,useMap:!0,value:!0,width:!0,wmode:!0,wrap:!0,about:!0,datatype:!0,inlist:!0,prefix:!0,property:!0,resource:!0,typeof:!0,vocab:!0,autoCapitalize:!0,autoCorrect:!0,autoSave:!0,color:!0,itemProp:!0,itemScope:!0,itemType:!0,itemID:!0,itemRef:!0,results:!0,security:!0,unselectable:0},K={accentHeight:!0,accumulate:!0,additive:!0,alignmentBaseline:!0,allowReorder:!0,alphabetic:!0,amplitude:!0,arabicForm:!0,ascent:!0,attributeName:!0,attributeType:!0,autoReverse:!0,azimuth:!0,baseFrequency:!0,baseProfile:!0,baselineShift:!0,bbox:!0,begin:!0,bias:!0,by:!0,calcMode:!0,capHeight:!0,clip:!0,clipPath:!0,clipRule:!0,clipPathUnits:!0,colorInterpolation:!0,colorInterpolationFilters:!0,colorProfile:!0,colorRendering:!0,contentScriptType:!0,contentStyleType:!0,cursor:!0,cx:!0,cy:!0,d:!0,decelerate:!0,descent:!0,diffuseConstant:!0,direction:!0,display:!0,divisor:!0,dominantBaseline:!0,dur:!0,dx:!0,dy:!0,edgeMode:!0,elevation:!0,enableBackground:!0,end:!0,exponent:!0,externalResourcesRequired:!0,fill:!0,fillOpacity:!0,fillRule:!0,filter:!0,filterRes:!0,filterUnits:!0,floodColor:!0,floodOpacity:!0,focusable:!0,fontFamily:!0,fontSize:!0,fontSizeAdjust:!0,fontStretch:!0,fontStyle:!0,fontVariant:!0,fontWeight:!0,format:!0,from:!0,fx:!0,fy:!0,g1:!0,g2:!0,glyphName:!0,glyphOrientationHorizontal:!0,glyphOrientationVertical:!0,glyphRef:!0,gradientTransform:!0,gradientUnits:!0,hanging:!0,horizAdvX:!0,horizOriginX:!0,ideographic:!0,imageRendering:!0,in:!0,in2:!0,intercept:!0,k:!0,k1:!0,k2:!0,k3:!0,k4:!0,kernelMatrix:!0,kernelUnitLength:!0,kerning:!0,keyPoints:!0,keySplines:!0,keyTimes:!0,lengthAdjust:!0,letterSpacing:!0,lightingColor:!0,limitingConeAngle:!0,local:!0,markerEnd:!0,markerMid:!0,markerStart:!0,markerHeight:!0,markerUnits:!0,markerWidth:!0,mask:!0,maskContentUnits:!0,maskUnits:!0,mathematical:!0,mode:!0,numOctaves:!0,offset:!0,opacity:!0,operator:!0,order:!0,orient:!0,orientation:!0,origin:!0,overflow:!0,overlinePosition:!0,overlineThickness:!0,paintOrder:!0,panose1:!0,pathLength:!0,patternContentUnits:!0,patternTransform:!0,patternUnits:!0,pointerEvents:!0,points:!0,pointsAtX:!0,pointsAtY:!0,pointsAtZ:!0,preserveAlpha:!0,preserveAspectRatio:!0,primitiveUnits:!0,r:!0,radius:!0,refX:!0,refY:!0,renderingIntent:!0,repeatCount:!0,repeatDur:!0,requiredExtensions:!0,requiredFeatures:!0,restart:!0,result:!0,rotate:!0,rx:!0,ry:!0,scale:!0,seed:!0,shapeRendering:!0,slope:!0,spacing:!0,specularConstant:!0,specularExponent:!0,speed:!0,spreadMethod:!0,startOffset:!0,stdDeviation:!0,stemh:!0,stemv:!0,stitchTiles:!0,stopColor:!0,stopOpacity:!0,strikethroughPosition:!0,strikethroughThickness:!0,string:!0,stroke:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeLinecap:!0,strokeLinejoin:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0,surfaceScale:!0,systemLanguage:!0,tableValues:!0,targetX:!0,targetY:!0,textAnchor:!0,textDecoration:!0,textRendering:!0,textLength:!0,to:!0,transform:!0,u1:!0,u2:!0,underlinePosition:!0,underlineThickness:!0,unicode:!0,unicodeBidi:!0,unicodeRange:!0,unitsPerEm:!0,vAlphabetic:!0,vHanging:!0,vIdeographic:!0,vMathematical:!0,values:!0,vectorEffect:!0,version:!0,vertAdvY:!0,vertOriginX:!0,vertOriginY:!0,viewBox:!0,viewTarget:!0,visibility:!0,widths:!0,wordSpacing:!0,writingMode:!0,x:!0,xHeight:!0,x1:!0,x2:!0,xChannelSelector:!0,xlinkActuate:!0,xlinkArcrole:!0,xlinkHref:!0,xlinkRole:!0,xlinkShow:!0,xlinkTitle:!0,xlinkType:!0,xmlBase:!0,xmlns:!0,xmlnsXlink:!0,xmlLang:!0,xmlSpace:!0,y:!0,y1:!0,y2:!0,yChannelSelector:!0,z:!0,zoomAndPan:!0},X=RegExp.prototype.test.bind(new RegExp("^(data|aria)-[:A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD\\-.0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040]*$")),G={}.hasOwnProperty,Y=function(e){return G.call($,e)||G.call(K,e)||X(e.toLowerCase())||G.call(V,e)},Z=c,J=Object.prototype.toString,Q=function(e){var t=[],n=e;return{publish:function(e){n=e,t.forEach(function(e){return e(n)})},subscribe:function(e){return t.push(e),e(n),function(){t=t.filter(function(t){return t!==e})}}}},ee="__styled-components__",te=function(e){function t(){v(this,t);var e=w(this,(t.__proto__||Object.getPrototypeOf(t)).call(this));return e.getTheme=e.getTheme.bind(e),e}return k(t,e),b(t,[{key:"componentWillMount",value:function(){var e=this;if(this.context[ee]){var t=this.context[ee];this.unsubscribeToOuter=t(function(t){e.outerTheme=t})}this.broadcast=Q(this.getTheme())}},{key:"getChildContext",value:function(){return x({},this.context,C({},ee,this.broadcast.subscribe))}},{key:"componentWillReceiveProps",value:function(e){this.props.theme!==e.theme&&this.broadcast.publish(this.getTheme(e.theme))}},{key:"componentWillUnmount",value:function(){this.context[ee]&&this.unsubscribeToOuter()}},{key:"getTheme",value:function(e){var t=e||this.props.theme;if(Z(t)){var n=t(this.outerTheme);if(!E(n))throw new Error("[ThemeProvider] Please return an object from your theme function, i.e. theme={() => ({})}!");return n}if(!E(t))throw new Error("[ThemeProvider] Please make your theme prop a plain object");return x({},this.outerTheme,t)}},{key:"render",value:function(){return this.props.children?p.Children.only(this.props.children):null}}]),t}(t.Component);te.childContextTypes=C({},ee,t.PropTypes.func.isRequired),te.contextTypes=C({},ee,t.PropTypes.func);var ne=function(e){function t(){return v(this,t),w(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return k(t,e),t}(t.Component);ne.contextTypes=C({},ee,t.PropTypes.func);var re=i(function(e,t){function n(e,t){for(var n=1540483477,a=t^e.length,s=e.length,u=0;s>=4;){var l=r(e,u);l=i(l,n),l^=l>>>24,l=i(l,n),a=i(a,n),a^=l,u+=4,s-=4}switch(s){case 3:a^=o(e,u),a^=e.charCodeAt(u+2)<<16,a=i(a,n);break;case 2:a^=o(e,u),a=i(a,n);break;case 1:a^=e.charCodeAt(u),a=i(a,n)}return a^=a>>>13,a=i(a,n),(a^=a>>>15)>>>0}function r(e,t){return e.charCodeAt(t++)+(e.charCodeAt(t++)<<8)+(e.charCodeAt(t++)<<16)+(e.charCodeAt(t)<<24)}function o(e,t){return e.charCodeAt(t++)+(e.charCodeAt(t++)<<8)}function i(e,t){return e|=0,t|=0,(65535&e)*t+(((e>>>16)*t&65535)<<16)|0}Object.defineProperty(t,"__esModule",{value:!0}),t.default=n}),oe=function(e){return e&&e.__esModule?e.default:e}(re),ie=["a","abbr","address","area","article","aside","audio","b","base","bdi","bdo","big","blockquote","body","br","button","canvas","caption","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dialog","div","dl","dt","em","embed","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","img","input","ins","kbd","keygen","label","legend","li","link","main","map","mark","menu","menuitem","meta","meter","nav","noscript","object","ol","optgroup","option","output","p","param","picture","pre","progress","q","rp","rt","ruby","s","samp","script","section","select","small","source","span","strong","style","sub","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","title","tr","track","u","ul","var","video","wbr","circle","clipPath","defs","ellipse","g","image","line","linearGradient","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","svg","text","tspan"],ae=function(e){return e.replace(/\s|\\n/g,"")},se=function(e){var t,n;return n=t=function(t){function n(){var e,t,r,o;v(this,n);for(var i=arguments.length,a=Array(i),s=0;s<i;s++)a[s]=arguments[s];return t=r=w(this,(e=n.__proto__||Object.getPrototypeOf(n)).call.apply(e,[this].concat(a))),r.state={},o=t,w(r,o)}return k(n,t),b(n,[{key:"componentWillMount",value:function(){var e=this;if(!this.context[ee])throw new Error("[withTheme] Please use ThemeProvider to be able to use withTheme");var t=this.context[ee];this.unsubscribe=t(function(t){e.setState({theme:t})})}},{key:"componentWillUnmount",value:function(){"function"==typeof this.unsubscribe&&this.unsubscribe()}},{key:"render",value:function(){var t=this.state.theme;return p.createElement(e,x({theme:t},this.props))}}]),n}(p.Component),t.contextTypes=C({},ee,p.PropTypes.func),n},ue=function(e,t){return function(){function n(e,t,r){v(this,n),this.rules=e,this.selector=t,this.prefix=r}return b(n,[{key:"generateAndInject",value:function(){q.injected||q.inject();var n=e(this.rules),r=t(n,this.selector,this.prefix);q.insert(r)}}]),n}()}(j,D),le=function(e,t,n){var r={};return function(){function o(e,t){v(this,o),this.rules=e,this.componentId=t,q.injected||q.inject(),this.insertedRule=q.insert("."+t+" {}")}return b(o,[{key:"generateAndInjectStyles",value:function(o){var i=t(this.rules,o),a=oe(this.componentId+i.join(""));if(!r[a]){var s=e(a);r[a]=s;var u=n(i,"."+s);this.insertedRule.appendRule(u)}return r[a]}}],[{key:"generateName",value:function(t){return e(oe(t))}}]),o}()}(L,j,D),ce=function(e){return function t(n,r){var o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},i=function t(i){for(var a=arguments.length,s=Array(a>1?a-1:0),u=1;u<a;u++)s[u-1]=arguments[u];return n(r,o,e.apply(void 0,[i].concat(s)),t)};return i.withConfig=function(e){return t(n,r,x({},o,e))},i.attrs=function(e){return t(n,r,x({},o,{attrs:x({},o.attrs||{},e)}))},i}}(_),pe=function(e,n){var r={},o=function(t){var n=t.replace(/[[\].#*$><+~=|^:(),"'`]/g,"-").replace(/--+/g,"-"),o=(r[n]||0)+1;return r[n]=o,n+"-"+e.generateName(n+o)};return function r(i,a,s){var u=a.displayName,c=void 0===u?l(i)?"styled."+i:"Styled("+i.displayName+")":u,p=a.componentId,h=void 0===p?o(a.displayName||"sc"):p,d=a.attrs,f=void 0===d?{}:d,g=a.rules,m=void 0===g?[]:g,y=a.ParentComponent,O=void 0===y?ne:y,T=new e([].concat(S(m),S(s)),h),E=function(e){function n(){var e,t,r,o;v(this,n);for(var i=arguments.length,a=Array(i),s=0;s<i;s++)a[s]=arguments[s];return t=r=w(this,(e=n.__proto__||Object.getPrototypeOf(n)).call.apply(e,[this].concat(a))),r.attrs={},r.state={theme:null,generatedClassName:""},o=t,w(r,o)}return k(n,e),b(n,[{key:"buildExecutionContext",value:function(e,t){var n=x({},t,{theme:e});return this.attrs=Object.keys(f).reduce(function(e,t){return x({},e,C({},t,"function"==typeof f[t]?f[t](n):f[t]))},{}),x({},n,this.attrs)}},{key:"generateAndInjectStyles",value:function(e,t){var n=this.buildExecutionContext(e,t);return T.generateAndInjectStyles(n)}},{key:"componentWillMount",value:function(){var e=this;if(this.context[ee]){var t=this.context[ee];this.unsubscribe=t(function(t){var n=e.constructor.defaultProps,r=n&&e.props.theme===n.theme,o=e.props.theme&&!r?e.props.theme:t,i=e.generateAndInjectStyles(o,e.props);e.setState({theme:o,generatedClassName:i})})}else{var n=this.props.theme||{},r=this.generateAndInjectStyles(n,this.props);this.setState({theme:n,generatedClassName:r})}}},{key:"componentWillReceiveProps",value:function(e){var t=this;this.setState(function(n){var r=t.constructor.defaultProps,o=r&&e.theme===r.theme,i=e.theme&&!o?e.theme:n.theme;return{theme:i,generatedClassName:t.generateAndInjectStyles(i,e)}})}},{key:"componentWillUnmount",value:function(){this.unsubscribe&&this.unsubscribe()}},{key:"render",value:function(){var e=this,n=this.props,r=n.className,o=n.children,a=n.innerRef,s=this.state.generatedClassName,u=x({},this.attrs);return Object.keys(this.props).filter(function(e){return!l(i)||Y(e)}).forEach(function(t){u[t]=e.props[t]}),u.className=[r,h,this.attrs.className,s].filter(function(e){return e}).join(" "),a&&(u.ref=a,delete u.innerRef),t.createElement(i,u,o)}}],[{key:"extend",get:function(){return n.extendWith(i)}}]),n}(O);return E.displayName=c,E.styledComponentId=h,E.extendWith=function(e){var t=(a.displayName,a.componentId,A(a,["displayName","componentId"]));return n(r,e,x({},t,{rules:s,ParentComponent:E}))},E}}(le,ce),he=function(e,t,n){return function(r){for(var o=arguments.length,i=Array(o>1?o-1:0),a=1;a<o;a++)i[a-1]=arguments[a];var s=n.apply(void 0,[r].concat(i)),u=oe(ae(JSON.stringify(s))),l=e(u);return new t(s,l,"@keyframes").generateAndInject(),l}
-}(L,ue,_),de=function(e,t){return function(n){for(var r=arguments.length,o=Array(r>1?r-1:0),i=1;i<r;i++)o[i-1]=arguments[i];new e(t.apply(void 0,[n].concat(o))).generateAndInject()}}(ue,_),fe=function(e,t){var n=function(n){return t(e,n)};return ie.forEach(function(e){n[e]=n(e)}),n}(pe,ce);e.default=fe,e.css=_,e.keyframes=he,e.injectGlobal=de,e.ThemeProvider=te,e.withTheme=se,e.styleSheet=q,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t(e.styled=e.styled||{},e.React)}(this,function(e,t){"use strict";function n(e){return e.replace(h,"-$1").toLowerCase()}function r(e){return f(e).replace(g,"-ms-")}function o(e){return T(e)===!0&&"[object Object]"===Object.prototype.toString.call(e)}function i(e,t){return t={exports:{}},e(t,t.exports),t.exports}function a(e){return e[e.length-1]}function s(e){for(var t=0;t<document.styleSheets.length;t++)if(document.styleSheets[t].ownerNode===e)return document.styleSheets[t]}function u(){var e=document.createElement("style");return e.type="text/css",e.appendChild(document.createTextNode("")),(document.head||document.getElementsByTagName("head")[0]).appendChild(e),e}function l(e){return"string"==typeof e}function c(e){var t=Q.call(e);return"[object Function]"===t||"function"==typeof e&&"[object RegExp]"!==t||"undefined"!=typeof window&&(e===window.setTimeout||e===window.alert||e===window.confirm||e===window.prompt)}var p="default"in t?t.default:t,h=/([A-Z])/g,d=n,f=d,g=/^ms-/,m=r,y="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},v=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},b=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),C=function(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e},x=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},k=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},A=function(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n},w=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},S=function(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)},O=function(e){return null!=e&&"object"===(void 0===e?"undefined":y(e))&&!Array.isArray(e)},T=O,P=function(e){var t,n;return o(e)!==!1&&("function"==typeof(t=e.constructor)&&(n=t.prototype,o(n)!==!1&&n.hasOwnProperty("isPrototypeOf")!==!1))},j=function e(t,n){var r=Object.keys(t).map(function(n){return P(t[n])?e(t[n],n):m(n)+": "+t[n]+";"}).join(" ");return n?n+" {\n  "+r+"\n}":r},E=function e(t,n){return t.reduce(function(t,r){return void 0===r||null===r||r===!1||""===r?t:Array.isArray(r)?[].concat(S(t),S(e(r,n))):r.hasOwnProperty("styledComponentId")?[].concat(S(t),["."+r.styledComponentId]):"function"==typeof r?n?t.concat.apply(t,S(e([r(n)],n))):t.concat(r):t.concat(P(r)?j(r):r.toString())},[])},R="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},M=i(function(e,t){!function(n){"object"===(void 0===t?"undefined":y(t))&&void 0!==e?e.exports=n(R):window.stylis=n(window)}(function(e){function t(e,n,r,o,i){e+="";var a,s,u,l,c,p="",h="",d=e.charCodeAt(0);91===d?(u=e.substring(1,e.length-1).split("="),a=(h=u[1]).charCodeAt(0),34!==a&&39!==a||(h=h.substring(1,h.length-1)),p="["+u[0]+'="'+h+'"]'):h=35===d||46===d||62===d?(p=e).substring(1):p=e,d=0,void 0==r||r===!0?(r=!0,l=h):(l="",r=!1);var f=null!=i,g=t.plugins,m=g.length;f&&(c=(void 0===i?"undefined":y(i)).charCodeAt(0),111===c?t.use(i,null):102===c?g[m++]=i:f=!1),0!==m&&(i=1===m?g[0]:function(e,t,n,r,o,i){for(var a=t,s=0,u=g.length;s<u;s++)a=g[s](e,a,n,r,o,i)||a;if(a!==t)return a},f=!0);var v,b,C,x,k,A,w,S,O,T,P,j,E,R,M,D,F,_,I,L,N="-ms-",U="-webkit-",W="",z="",B="",H=0,q=0,V=0,$=0,K=0,X=0,G=0,Y=0,Z=0,J=0,Q=0,ee=0,te=0,ne=0;f&&(A=i(0,n,ae,ie,p,0),null!=A&&(n=A),D="");for(var re=0,oe=0,ie=0,ae=1,se=n.length,ue=se-1,le="";re<se;){if(H=n.charCodeAt(re),0===G&&0===X&&0===ee&&(123===H||125===H||59===H||re===se-1&&0!==W.length)){if(W+=n.charAt(re),f&&125!==H&&f&&null!=(A=123===H?i(1,W.substring(0,W.length-1).trim(),ae,ie,p,le.length):i(2,W,ae,ie,p,le.length))&&(W=123===H?A+" {":A),O=W.charCodeAt(0),32===O&&(O=(W=W.trim()).charCodeAt(0)),T=W.charCodeAt(1),P=W.charCodeAt(2),64===O){if(1===J&&0!==B.length&&(J=0,B=p+" {"+B+"}",f&&null!=(A=i(4,B,ae,ie,p,le.length))&&(B=A),le+=B,B=""),59!==H)if(107===T||103===T)107===T?(E=W.substring(1,11)+(0===Y?l:"")+W.substring(11),W="@"+U+E,d=1):(Y=1,W="");else if(109===T)if(o===!0&&105===P)void 0===I&&(I={}),E=(L=W.substring(7,W.indexOf("{"))+" ").trim(),L=L.substring(0,L.indexOf(" ")).trim(),I[L]={key:E.trim(),body:""},d=3,W="",E="";else if(101===P)if(0!==oe){for(re++,ie++,void 0===k&&(k=""),A="",b="",C=w.split(t.regex.split),$=1;re<se&&(a=n.charCodeAt(re),123===a?$++:125===a&&$--,0!==$);)b+=n.charAt(re++),ie=13===a||10===a?(ae++,0):ie+1;m=C.length;for(var ce=0;ce<m;ce++)e=C[ce],A+=t((ce===m-1?e.substring(0,e.length-1):e).trim(),b,r,o,i);k+=W+A+"}",W="",1,d=4}else d=2,M=W,W="";else d=6;if(105===T){if(o===!0&&110===P)if(W=W.substring(9,W.length-1),(S=W.indexOf("("))!==-1){var pe=W.substring(0,S),he=I[pe],de=W.substring(pe.length+1,W.length-1).split(","),fe=he.key.replace(pe,"").replace(/\(|\)/g,"").trim().split(",");W=he.body,m=de.length;for(var ce=0;ce<m;ce++){var ge=fe[ce].trim();void 0!==ge&&(W=W.replace(new RegExp("var\\(~~"+ge+"\\)","g"),de[ce].trim()))}n+=W,se+=W.length,W=""}else W=I[W].body,0===oe&&(n+=W,se+=W.length,W="");else if(109===P&&f){var me=/@import.*?(["'`][^\.\n\r]*?["'`];|["'`][^:\r\n]*?\.[^c].*?["'`])/g.exec(W);null!==me&&(W=i(5,me[1].replace(/['"; ]/g,""),ae,ie,p,le.length)||"",W&&(n=n.substring(0,re+1)+W+n.substring(re+1),se+=W.length),W="")}}else 4!==d&&59!==H&&(107!==T&&103!==T&&109!==T&&(d=5),V=-1,q++)}else if(o===!0&&126===O&&126===T&&59===H&&(v=W.indexOf(":"))!==-1)void 0===_&&(F=[],_=0),F[_++]=[W.substring(0,v),W.substring(v+1,W.length-1).trim()],W="";else{if(123===H)if(oe++,1===J&&0!==B.length&&(J=0,B=p+" {"+B+"}",f&&null!=(A=i(4,B,ae,ie,p,le.length))&&(B=A),le+=B,B=""),2===oe){re++,ie++,b="";var ye=W.substring(0,W.length-1).split(t.regex.split),ve=w.substring(0,w.length-1).split(t.regex.split);for($=1;re<se&&(a=n.charCodeAt(re),123===a?$++:125===a&&$--,0!==$);)b+=n.charAt(re++),ie=13===a||10===a?(ae++,0):ie+1;m=ve.length;for(var be=0;be<m;be++){A=ve[be],S=A.indexOf(p),ve[be]="";for(var Ce=0,xe=ye.length;Ce<xe;Ce++)e=S>0?":global()"+A.trim():A.replace(p,"&").trim(),j=ye[Ce].trim(),e=j.indexOf(" &")>0?j.replace("&","").trim()+" "+e:null!==t.regex.global[0].exec(j)?j:e+" "+j,ve[be]+=e.replace(/ +&/,"").trim()+(Ce===xe-1?"":",")}void 0===R&&(R=""),R+="\n"+ve.join(",").replace(t.regex.global[1]," $1")+" {"+b+"}",K=1,W="",oe--}else if(0!==Y||0!==q&&2!==d)w=W;else{C=W.split(t.regex.split),x="",w="",m=C.length;for(var be=0;be<m;be++){if(a=(e=C[be]).charCodeAt(0),32===a&&(a=(e=e.trim()).charCodeAt(0)),38===a)e=p+e.substring(1).replace(t.regex.and,p);else if((S=e.indexOf(" &"))>0&&(Z=2,0!==e.indexOf(":global()")&&(e=":global("+e.substring(0,S)+")"+e.substring(S)),a=58),58===a){var ke=e.charCodeAt(1);if(104===ke&&116===e.charCodeAt(4)){var Ae=e.charCodeAt(5);e=40===Ae?p+e.replace(/:host\((.*)\)/g,"$1").replace(t.regex.and,p):45===Ae?e.replace(/:host-context\((.*)\)/g,"$1 "+p).replace(t.regex.and,p):p+e.substring(5)}else 103===ke?(2!==Z&&(Z=1),e=e.replace(t.regex.global[0],"$1").replace(t.regex.and,p)):e=p+e}else 0===Z&&(e=p+" "+e);f&&null!=(A=i(1.5,be===m-1?e.substring(0,e.length-1).trim():e,ae,ie,p,le.length))&&(e=be===m-1?A+" {":A),w+=(0!==be?",":"")+(1!==Z?e:":global()"+e),x+=0!==be?","+e:e,Z=0}W=x}else if((125===H&&1===W.length)==!1){if(59!==H&&(W=(125===H?W.substring(0,W.length-1):W.trim())+";"),97===O&&110===T&&105===P){if(W=W.substring(0,W.length-1),v=W.indexOf(":")+1,x=W.substring(0,v),r===!0&&45!==W.charCodeAt(9)){var we=W.substring(v).trim().split(",");m=we.length;for(var be=0;be<m;be++){for(var Se=we[be],Oe=Se.split(" "),Ce=0,xe=Oe.length;Ce<xe;Ce++){var Te=Oe[Ce].trim(),Pe=Te.charCodeAt(0),je=Te.charCodeAt(2),Ee=Te.length,ue=Te.charCodeAt(Ee-1);41===ue||0===Ee||105===Pe&&102===je&&101===ue&&8===Ee||108===Pe&&110===je&&114===ue&&6===Ee||97===Pe&&116===je&&101===ue&&(9===Ee||17===Ee)||110===Pe&&114===je&&108===ue&&6===Ee||98===Pe&&99===je&&115===ue&&9===Ee||102===Pe&&114===je&&115===ue&&8===Ee||98===Pe&&116===je&&104===ue&&4===Ee||110===Pe&&110===je&&101===ue&&4===Ee||114===Pe&&110===je&&103===ue&&7===Ee||112===Pe&&117===je&&100===ue&&6===Ee||114===Pe&&118===je&&100===ue&&8===Ee||115===Pe&&101===je&&(116===ue&&10===Ee||100===ue&&8===Ee)||101===Pe&&115===je&&(101===ue&&4===Ee||(11===Ee||7===Ee||8===Ee)&&45===Te.charCodeAt(4))||!isNaN(parseFloat(Te))||Te.indexOf("(")!==-1||(Oe[Ce]=l+Te)}x+=(0===be?"":",")+Oe.join(" ").trim()}}else x+=(110!==W.charCodeAt(10)?"":l)+W.substring(v).trim().trim();W=U+x+";"+x+(125===H?";}":";")}else if(97===O&&112===T&&112===P)W=U+W+"-moz-"+W+W;else if(100===O&&105===T&&115===P)(S=W.indexOf("flex"))!==-1&&(A=101===W.charCodeAt(S-2)?"inline-":"",W="display: "+U+A+"box;display: "+U+A+"flex;display: "+N+"flexbox;display: "+A+"flex;");else if(116===O&&114===T&&97===P)W=U+W+(102===W.charCodeAt(5)?N+W:"")+W;else if(104===O&&121===T&&112===P||117===O&&115===T&&101===P)W=U+W+"-moz-"+W+N+W+W;else if(102===O&&108===T&&101===P)W=U+W+N+W+W;else if(111===O&&114===T&&100===P)W=U+W+N+"flex-"+W+W;else if(97===O&&108===T&&105===P&&45===W.charCodeAt(5))switch(W.charCodeAt(6)){case 105:A=W.replace("-items",""),W=U+"box-"+A+N+"flex-"+A+W;break;case 115:W=N+"flex-item-"+W.replace("-self","")+W;break;default:W=N+"flex-line-pack"+W.replace("align-content","")+W}else 99===O&&117===T&&114===P&&null!==/zoo|gra/.exec(W)?W=W.replace(/: +/g,": "+U)+W.replace(/: +/g,": -moz-")+W:119===O&&105===T&&100===P&&(S=W.indexOf("-content"))!==-1&&(A=W.substring(S-3),W="width: -webkit-"+A+"width: -moz-"+A+"width: "+A);59!==H&&(W=W.substring(0,W.length-1),125===H&&(W+="}"))}125===H&&(0!==oe&&oe--,0===oe&&1===K&&(n=n.substring(0,re+1)+R+n.substring(re+1),se+=R.length,R="",K=0,V++),125!==O&&32===W.charCodeAt(W.length-2)&&(W=W.substring(0,W.length-1).trim()+"}")),0!==q?(125===H?V++:123===H&&0!==V&&V--,1!==Q||123!==H&&0!==V||0===B.length||(Q=0,W=p+" {"+B+"}"+W,B=""),0===V?(0===d?(Y=0,W=""):1===d?(W="}@"+E+"}",E=""):3===d&&(I[L].body=E,L="",W="",E=""),d=0,V--,q--):1===d||3===d?(E+=W,3===d&&(W="")):2===d&&0===oe&&(125!==H&&(0===Q&&(B=""),B+=W,W=""),Q=1)):0===oe&&125!==H&&(J=1,B=void 0===B?W:B+W,W="")}z+=W,125!==H||0!==d&&2!==d&&4!==d||(a=z.charCodeAt(z.length-2),4===d&&(d=0),void 0!==k&&0!==k.length&&(z=123===a?k:z+k,k="",a=z.charCodeAt(z.length-2)),123!==a&&(f&&null!=(A=i(3,z,ae,ie,p,le.length))&&(z=A),void 0!==M?(M+=z,125===M.charCodeAt(M.length-2)&&(le+=M,M=void 0)):le+=z),z=""),W=""}else if(13===H||10===H)1===ne?(ee=ne=0,W=W.substring(0,W.indexOf("//"))):f&&0===ee&&0!==(m=(D=D.trim()).length)&&47!==D.charCodeAt(0)&&(0!==W.length&&null!=(A=i(7,D,ae,ie,p,le.length))&&(W=W.replace(new RegExp(D+"$"),A)),D=""),ie=0,ae++;else{if(9!==H)switch(s=n.charAt(re),f&&0===ee&&(D+=s),W+=s,H){case 34:0===ee&&(G=34===G?0:39===G?39:34);break;case 39:0===ee&&(G=39===G?0:34===G?34:39);break;case 40:0===G&&0===ee&&(X=1);break;case 41:0===G&&0===ee&&(X=0);break;case 47:0===G&&0===X&&(a=n.charCodeAt(re-1),0===te&&47===a?ee=ne=1:42===a&&(ee=te=0,W=W.substring(0,W.indexOf("/*"))));break;case 42:0===G&&0===X&&0===ne&&0===te&&47===n.charCodeAt(re-1)&&(ee=te=1)}ie++}re++}if(void 0!==B&&0!==B.length&&(B=p+" {"+B+"}",f&&null!=(A=i(4,B,ae,ie,p,le.length))&&(B=A),le+=B),o&&void 0!==F)for(var ce=0;ce<_;ce++)le=le.replace(new RegExp("var\\("+F[ce][0]+"\\)","g"),F[ce][1]);return f&&null!=(A=i(6,le,ae,ie,p,le.length))&&(le=A),le}return t.use=function(e,n){var r=t.plugins,o=r.length;if(null==n&&(n=e,e=void 0),null!=n)if(n.constructor===Object)for(var i in n)t.use(i,n[i]);else if(n.constructor===Array)for(var a=0,s=n.length;a<s;a++)r[o++]=n[a];else if(null==e)r[o]=n;else{var u=e instanceof RegExp?e:new RegExp(e+"\\([ \\t\\r\\n]*([^\\0]*?)[ \\t\\r\\n]*\\)","g"),l=function(e,t){var r=t.replace(/[ \t\r\n]*,[ \t\r\n]*/g,",").split(","),o=n.apply(null,r);return null!=o?o:e};r[o]=function(e,t){if(6===e)return t.replace(u,l)}}return t},t.plugins=[],t.regex={and:/&/g,split:/,[\s]*(?![^\r\n\[]*[\]\)])/g,import:/@import.*?(["'`][^\.\n\r]*?["'`];|["'`][^:\r\n]*?\.[^c].*?["'`])/g,global:[/:global\(((?:[^\(\)\[\]]*|\[.*\]|\([^\(\)]*\))*)\)/g,/(?:&| ):global\(((?:[^\(\)\[\]]*|\[.*\]|\([^\(\)]*\))*)\)/g]},t})}),D=function(e,t,n){var r=e.join("").replace(/^\s*\/\/.*$/gm,""),o=t&&n?n+" "+t+" { "+r+" }":r;return M(n||!t?"":t,o,!1,!1)},F="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ".split(""),_=F.length,I=function(e){var t="",n=void 0;for(n=e;n>_;n=Math.floor(n/F.length))t=F[n%_]+t;return F[n%_]+t},L=function(e,t){return t.reduce(function(t,n,r){return t.concat(n,e[r+1])},[e[0]])},N=function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];return E(L(e,n))},U="undefined"!=typeof document,W=!1,z=!1,B=function(){if(U){var e=document.createElement("div");return e.innerHTML="<!--[if lt IE 10]><i></i><![endif]-->",1===e.getElementsByTagName("i").length}}(),H=function(){function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=t.speedy,r=void 0===n?!W&&!z:n,o=t.maxLength,i=void 0===o?U&&B?4e3:65e3:o;v(this,e),this.isSpeedy=r,this.sheet=void 0,this.tags=[],this.maxLength=i,this.ctr=0}return b(e,[{key:"inject",value:function(){var e=this;if(this.injected)throw new Error("already injected stylesheet!");U?(this.tags[0]=u(),this.sheet=s(this.tags[0])):this.sheet={cssRules:[],insertRule:function(t){var n={cssText:t};return e.sheet.cssRules.push(n),{serverRule:n,appendRule:function(e){return n.cssText+=e}}}},this.injected=!0}},{key:"speedy",value:function(e){if(0!==this.ctr)throw new Error("cannot change speedy mode after inserting any rule to sheet. Either call speedy("+e+") earlier in your app, or call flush() before speedy("+e+")");this.isSpeedy=!!e}},{key:"_insert",value:function(e){try{this.sheet.insertRule(e,this.sheet.cssRules.length)}catch(t){W&&console.warn("whoops, illegal rule inserted",e)}}},{key:"insert",value:function(e){var t=void 0;if(U)if(this.isSpeedy&&this.sheet.insertRule)this._insert(e);else{var n=document.createTextNode(e);a(this.tags).appendChild(n),t={textNode:n,appendRule:function(e){return n.appendData(e)}},this.isSpeedy||(this.sheet=s(a(this.tags)))}else t=this.sheet.insertRule(e);return this.ctr++,U&&this.ctr%this.maxLength==0&&(this.tags.push(u()),this.sheet=s(a(this.tags))),t}},{key:"flush",value:function(){U?(this.tags.forEach(function(e){return e.parentNode.removeChild(e)}),this.tags=[],this.sheet=null,this.ctr=0):this.sheet.cssRules=[],this.injected=!1}},{key:"rules",value:function(){if(!U)return this.sheet.cssRules;var e=[];return this.tags.forEach(function(t){return e.splice.apply(e,[e.length,0].concat(S(Array.from(s(t).cssRules))))}),e}}]),e}(),q=function(){function e(){v(this,e),this.styleSheet=new H({speedy:!1,maxLength:40})}return b(e,[{key:"inject",value:function(){return this.styleSheet.inject()}},{key:"insert",value:function(e){return this.styleSheet.insert(e)}},{key:"reset",value:function(){this.styleSheet.sheet&&this.styleSheet.flush()}},{key:"rules",value:function(){return this.styleSheet.rules()}},{key:"getCSS",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.min,n=void 0===t||t;return this.styleSheet.sheet?this.styleSheet.rules().map(function(e){return e.cssText}).join(n?"":"\n"):""}},{key:"injected",get:function(){return this.styleSheet.injected}}]),e}(),V=new q,$={children:!0,dangerouslySetInnerHTML:!0,key:!0,ref:!0,autoFocus:!0,defaultValue:!0,valueLink:!0,defaultChecked:!0,checkedLink:!0,innerHTML:!0,suppressContentEditableWarning:!0,onFocusIn:!0,onFocusOut:!0,className:!0,onCopy:!0,onCut:!0,onPaste:!0,onCompositionEnd:!0,onCompositionStart:!0,onCompositionUpdate:!0,onKeyDown:!0,onKeyPress:!0,onKeyUp:!0,onFocus:!0,onBlur:!0,onChange:!0,onInput:!0,onSubmit:!0,onClick:!0,onContextMenu:!0,onDoubleClick:!0,onDrag:!0,onDragEnd:!0,onDragEnter:!0,onDragExit:!0,onDragLeave:!0,onDragOver:!0,onDragStart:!0,onDrop:!0,onMouseDown:!0,onMouseEnter:!0,onMouseLeave:!0,onMouseMove:!0,onMouseOut:!0,onMouseOver:!0,onMouseUp:!0,onSelect:!0,onTouchCancel:!0,onTouchEnd:!0,onTouchMove:!0,onTouchStart:!0,onScroll:!0,onWheel:!0,onAbort:!0,onCanPlay:!0,onCanPlayThrough:!0,onDurationChange:!0,onEmptied:!0,onEncrypted:!0,onEnded:!0,onError:!0,onLoadedData:!0,onLoadedMetadata:!0,onLoadStart:!0,onPause:!0,onPlay:!0,onPlaying:!0,onProgress:!0,onRateChange:!0,onSeeked:!0,onSeeking:!0,onStalled:!0,onSuspend:!0,onTimeUpdate:!0,onVolumeChange:!0,onWaiting:!0,onLoad:!0,onAnimationStart:!0,onAnimationEnd:!0,onAnimationIteration:!0,onTransitionEnd:!0,onCopyCapture:!0,onCutCapture:!0,onPasteCapture:!0,onCompositionEndCapture:!0,onCompositionStartCapture:!0,onCompositionUpdateCapture:!0,onKeyDownCapture:!0,onKeyPressCapture:!0,onKeyUpCapture:!0,onFocusCapture:!0,onBlurCapture:!0,onChangeCapture:!0,onInputCapture:!0,onSubmitCapture:!0,onClickCapture:!0,onContextMenuCapture:!0,onDoubleClickCapture:!0,onDragCapture:!0,onDragEndCapture:!0,onDragEnterCapture:!0,onDragExitCapture:!0,onDragLeaveCapture:!0,onDragOverCapture:!0,onDragStartCapture:!0,onDropCapture:!0,onMouseDownCapture:!0,onMouseEnterCapture:!0,onMouseLeaveCapture:!0,onMouseMoveCapture:!0,onMouseOutCapture:!0,onMouseOverCapture:!0,onMouseUpCapture:!0,onSelectCapture:!0,onTouchCancelCapture:!0,onTouchEndCapture:!0,onTouchMoveCapture:!0,onTouchStartCapture:!0,onScrollCapture:!0,onWheelCapture:!0,onAbortCapture:!0,onCanPlayCapture:!0,onCanPlayThroughCapture:!0,onDurationChangeCapture:!0,onEmptiedCapture:!0,onEncryptedCapture:!0,onEndedCapture:!0,onErrorCapture:!0,onLoadedDataCapture:!0,onLoadedMetadataCapture:!0,onLoadStartCapture:!0,onPauseCapture:!0,onPlayCapture:!0,onPlayingCapture:!0,onProgressCapture:!0,onRateChangeCapture:!0,onSeekedCapture:!0,onSeekingCapture:!0,onStalledCapture:!0,onSuspendCapture:!0,onTimeUpdateCapture:!0,onVolumeChangeCapture:!0,onWaitingCapture:!0,onLoadCapture:!0,onAnimationStartCapture:!0,onAnimationEndCapture:!0,onAnimationIterationCapture:!0,onTransitionEndCapture:!0},K={accept:!0,acceptCharset:!0,accessKey:!0,action:!0,allowFullScreen:!0,allowTransparency:!0,alt:!0,as:!0,async:!0,autoComplete:!0,autoPlay:!0,capture:!0,cellPadding:!0,cellSpacing:!0,charSet:!0,challenge:!0,checked:!0,cite:!0,classID:!0,className:!0,cols:!0,colSpan:!0,content:!0,contentEditable:!0,contextMenu:!0,controls:!0,coords:!0,crossOrigin:!0,data:!0,dateTime:!0,default:!0,defer:!0,dir:!0,disabled:!0,download:!0,draggable:!0,encType:!0,form:!0,formAction:!0,formEncType:!0,formMethod:!0,formNoValidate:!0,formTarget:!0,frameBorder:!0,headers:!0,height:!0,hidden:!0,high:!0,href:!0,hrefLang:!0,htmlFor:!0,httpEquiv:!0,icon:!0,id:!0,inputMode:!0,integrity:!0,is:!0,keyParams:!0,keyType:!0,kind:!0,label:!0,lang:!0,list:!0,loop:!0,low:!0,manifest:!0,marginHeight:!0,marginWidth:!0,max:!0,maxLength:!0,media:!0,mediaGroup:!0,method:!0,min:!0,minLength:!0,multiple:!0,muted:!0,name:!0,nonce:!0,noValidate:!0,open:!0,optimum:!0,pattern:!0,placeholder:!0,playsInline:!0,poster:!0,preload:!0,profile:!0,radioGroup:!0,readOnly:!0,referrerPolicy:!0,rel:!0,required:!0,reversed:!0,role:!0,rows:!0,rowSpan:!0,sandbox:!0,scope:!0,scoped:!0,scrolling:!0,seamless:!0,selected:!0,shape:!0,size:!0,sizes:!0,span:!0,spellCheck:!0,src:!0,srcDoc:!0,srcLang:!0,srcSet:!0,start:!0,step:!0,style:!0,summary:!0,tabIndex:!0,target:!0,title:!0,type:!0,useMap:!0,value:!0,width:!0,wmode:!0,wrap:!0,about:!0,datatype:!0,inlist:!0,prefix:!0,property:!0,resource:!0,typeof:!0,vocab:!0,autoCapitalize:!0,autoCorrect:!0,autoSave:!0,color:!0,itemProp:!0,itemScope:!0,itemType:!0,itemID:!0,itemRef:!0,results:!0,security:!0,unselectable:0},X={accentHeight:!0,accumulate:!0,additive:!0,alignmentBaseline:!0,allowReorder:!0,alphabetic:!0,amplitude:!0,arabicForm:!0,ascent:!0,attributeName:!0,attributeType:!0,autoReverse:!0,azimuth:!0,baseFrequency:!0,baseProfile:!0,baselineShift:!0,bbox:!0,begin:!0,bias:!0,by:!0,calcMode:!0,capHeight:!0,clip:!0,clipPath:!0,clipRule:!0,clipPathUnits:!0,colorInterpolation:!0,colorInterpolationFilters:!0,colorProfile:!0,colorRendering:!0,contentScriptType:!0,contentStyleType:!0,cursor:!0,cx:!0,cy:!0,d:!0,decelerate:!0,descent:!0,diffuseConstant:!0,direction:!0,display:!0,divisor:!0,dominantBaseline:!0,dur:!0,dx:!0,dy:!0,edgeMode:!0,elevation:!0,enableBackground:!0,end:!0,exponent:!0,externalResourcesRequired:!0,fill:!0,fillOpacity:!0,fillRule:!0,filter:!0,filterRes:!0,filterUnits:!0,floodColor:!0,floodOpacity:!0,focusable:!0,fontFamily:!0,fontSize:!0,fontSizeAdjust:!0,fontStretch:!0,fontStyle:!0,fontVariant:!0,fontWeight:!0,format:!0,from:!0,fx:!0,fy:!0,g1:!0,g2:!0,glyphName:!0,glyphOrientationHorizontal:!0,glyphOrientationVertical:!0,glyphRef:!0,gradientTransform:!0,gradientUnits:!0,hanging:!0,horizAdvX:!0,horizOriginX:!0,ideographic:!0,imageRendering:!0,in:!0,in2:!0,intercept:!0,k:!0,k1:!0,k2:!0,k3:!0,k4:!0,kernelMatrix:!0,kernelUnitLength:!0,kerning:!0,keyPoints:!0,keySplines:!0,keyTimes:!0,lengthAdjust:!0,letterSpacing:!0,lightingColor:!0,limitingConeAngle:!0,local:!0,markerEnd:!0,markerMid:!0,markerStart:!0,markerHeight:!0,markerUnits:!0,markerWidth:!0,mask:!0,maskContentUnits:!0,maskUnits:!0,mathematical:!0,mode:!0,numOctaves:!0,offset:!0,opacity:!0,operator:!0,order:!0,orient:!0,orientation:!0,origin:!0,overflow:!0,overlinePosition:!0,overlineThickness:!0,paintOrder:!0,panose1:!0,pathLength:!0,patternContentUnits:!0,patternTransform:!0,patternUnits:!0,pointerEvents:!0,points:!0,pointsAtX:!0,pointsAtY:!0,pointsAtZ:!0,preserveAlpha:!0,preserveAspectRatio:!0,primitiveUnits:!0,r:!0,radius:!0,refX:!0,refY:!0,renderingIntent:!0,repeatCount:!0,repeatDur:!0,requiredExtensions:!0,requiredFeatures:!0,restart:!0,result:!0,rotate:!0,rx:!0,ry:!0,scale:!0,seed:!0,shapeRendering:!0,slope:!0,spacing:!0,specularConstant:!0,specularExponent:!0,speed:!0,spreadMethod:!0,startOffset:!0,stdDeviation:!0,stemh:!0,stemv:!0,stitchTiles:!0,stopColor:!0,stopOpacity:!0,strikethroughPosition:!0,strikethroughThickness:!0,string:!0,stroke:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeLinecap:!0,strokeLinejoin:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0,surfaceScale:!0,systemLanguage:!0,tableValues:!0,targetX:!0,targetY:!0,textAnchor:!0,textDecoration:!0,textRendering:!0,textLength:!0,to:!0,transform:!0,u1:!0,u2:!0,underlinePosition:!0,underlineThickness:!0,unicode:!0,unicodeBidi:!0,unicodeRange:!0,unitsPerEm:!0,vAlphabetic:!0,vHanging:!0,vIdeographic:!0,vMathematical:!0,values:!0,vectorEffect:!0,version:!0,vertAdvY:!0,vertOriginX:!0,vertOriginY:!0,viewBox:!0,viewTarget:!0,visibility:!0,widths:!0,wordSpacing:!0,writingMode:!0,x:!0,xHeight:!0,x1:!0,x2:!0,xChannelSelector:!0,xlinkActuate:!0,xlinkArcrole:!0,xlinkHref:!0,xlinkRole:!0,xlinkShow:!0,xlinkTitle:!0,xlinkType:!0,xmlBase:!0,xmlns:!0,xmlnsXlink:!0,xmlLang:!0,xmlSpace:!0,y:!0,y1:!0,y2:!0,yChannelSelector:!0,z:!0,zoomAndPan:!0},G=RegExp.prototype.test.bind(new RegExp("^(data|aria)-[:A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD\\-.0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040]*$")),Y={}.hasOwnProperty,Z=function(e){return Y.call(K,e)||Y.call(X,e)||G(e.toLowerCase())||Y.call($,e)},J=c,Q=Object.prototype.toString,ee=function(e){var t=[],n=e;return{publish:function(e){n=e,t.forEach(function(e){return e(n)})},subscribe:function(e){return t.push(e),e(n),function(){t=t.filter(function(t){return t!==e})}}}},te="__styled-components__",ne=function(e){function t(){v(this,t);var e=w(this,(t.__proto__||Object.getPrototypeOf(t)).call(this));return e.getTheme=e.getTheme.bind(e),e}return k(t,e),b(t,[{key:"componentWillMount",value:function(){var e=this;if(this.context[te]){var t=this.context[te];this.unsubscribeToOuter=t(function(t){e.outerTheme=t})}this.broadcast=ee(this.getTheme())}},{key:"getChildContext",value:function(){return x({},this.context,C({},te,this.broadcast.subscribe))}},{key:"componentWillReceiveProps",value:function(e){this.props.theme!==e.theme&&this.broadcast.publish(this.getTheme(e.theme))}},{key:"componentWillUnmount",value:function(){this.context[te]&&this.unsubscribeToOuter()}},{key:"getTheme",value:function(e){var t=e||this.props.theme;if(J(t)){var n=t(this.outerTheme);if(!P(n))throw new Error("[ThemeProvider] Please return an object from your theme function, i.e. theme={() => ({})}!");return n}if(!P(t))throw new Error("[ThemeProvider] Please make your theme prop a plain object");return x({},this.outerTheme,t)}},{key:"render",value:function(){return this.props.children?p.Children.only(this.props.children):null}}]),t}(t.Component);ne.childContextTypes=C({},te,t.PropTypes.func.isRequired),ne.contextTypes=C({},te,t.PropTypes.func);var re=function(e){function t(){return v(this,t),w(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return k(t,e),t}(t.Component);re.contextTypes=C({},te,t.PropTypes.func);var oe=i(function(e,t){function n(e,t){for(var n=1540483477,a=t^e.length,s=e.length,u=0;s>=4;){var l=r(e,u);l=i(l,n),l^=l>>>24,l=i(l,n),a=i(a,n),a^=l,u+=4,s-=4}switch(s){case 3:a^=o(e,u),a^=e.charCodeAt(u+2)<<16,a=i(a,n);break;case 2:a^=o(e,u),a=i(a,n);break;case 1:a^=e.charCodeAt(u),a=i(a,n)}return a^=a>>>13,a=i(a,n),(a^=a>>>15)>>>0}function r(e,t){return e.charCodeAt(t++)+(e.charCodeAt(t++)<<8)+(e.charCodeAt(t++)<<16)+(e.charCodeAt(t)<<24)}function o(e,t){return e.charCodeAt(t++)+(e.charCodeAt(t++)<<8)}function i(e,t){return e|=0,t|=0,(65535&e)*t+(((e>>>16)*t&65535)<<16)|0}Object.defineProperty(t,"__esModule",{value:!0}),t.default=n}),ie=function(e){return e&&e.__esModule?e.default:e}(oe),ae=["a","abbr","address","area","article","aside","audio","b","base","bdi","bdo","big","blockquote","body","br","button","canvas","caption","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dialog","div","dl","dt","em","embed","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","img","input","ins","kbd","keygen","label","legend","li","link","main","map","mark","menu","menuitem","meta","meter","nav","noscript","object","ol","optgroup","option","output","p","param","picture","pre","progress","q","rp","rt","ruby","s","samp","script","section","select","small","source","span","strong","style","sub","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","title","tr","track","u","ul","var","video","wbr","circle","clipPath","defs","ellipse","g","image","line","linearGradient","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","svg","text","tspan"],se=function(e){return e.replace(/\s|\\n/g,"")},ue=function(e){var t,n;return n=t=function(t){function n(){var e,t,r,o;v(this,n);for(var i=arguments.length,a=Array(i),s=0;s<i;s++)a[s]=arguments[s];return t=r=w(this,(e=n.__proto__||Object.getPrototypeOf(n)).call.apply(e,[this].concat(a))),r.state={},o=t,w(r,o)}return k(n,t),b(n,[{key:"componentWillMount",value:function(){var e=this;if(!this.context[te])throw new Error("[withTheme] Please use ThemeProvider to be able to use withTheme");var t=this.context[te];this.unsubscribe=t(function(t){e.setState({theme:t})})}},{key:"componentWillUnmount",value:function(){"function"==typeof this.unsubscribe&&this.unsubscribe()}},{key:"render",value:function(){var t=this.state.theme;return p.createElement(e,x({theme:t},this.props))}}]),n}(p.Component),t.contextTypes=C({},te,p.PropTypes.func),n},le=function(e,t){return function(){function n(e,t,r){v(this,n),this.rules=e,this.selector=t,this.prefix=r}return b(n,[{key:"generateAndInject",value:function(){V.injected||V.inject();var n=e(this.rules),r=t(n,this.selector,this.prefix);V.insert(r)}}]),n}()}(E,D),ce=function(e,t,n){var r={};return function(){function o(e,t){v(this,o),this.rules=e,this.componentId=t,this.insertedRule=void 0,V.injected||V.inject()}return b(o,[{key:"insertRule",value:function(e){this.insertedRule?this.insertedRule.appendRule(e):this.insertedRule=V.insert("."+this.componentId+" {}"+e)}},{key:"generateAndInjectStyles",value:function(o){var i=t(this.rules,o),a=ie(this.componentId+i.join(""));if(void 0===r[a]){var s=e(a);r[a]=s;var u=n(i,"."+s);this.insertRule(u)}return r[a]}}],[{key:"generateName",value:function(t){return e(ie(t))}}]),o}()}(I,E,D),pe=function(e){return function t(n,r){var o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},i=function t(i){for(var a=arguments.length,s=Array(a>1?a-1:0),u=1;u<a;u++)s[u-1]=arguments[u];return n(r,o,e.apply(void 0,[i].concat(s)),t)};return i.withConfig=function(e){return t(n,r,x({},o,e))},i.attrs=function(e){return t(n,r,x({},o,{attrs:x({},o.attrs||{},e)}))},i}}(N),he=function(e,n){var r={},o=function(t){var n="string"!=typeof t?"sc":t.replace(/[[\].#*$><+~=|^:(),"'`]/g,"-").replace(/--+/g,"-"),o=(r[n]||0)+1;return r[n]=o,n+"-"+e.generateName(n+o)},i=function(e){function n(){var e,t,r,o;v(this,n);for(var i=arguments.length,a=Array(i),s=0;s<i;s++)a[s]=arguments[s];return t=r=w(this,(e=n.__proto__||Object.getPrototypeOf(n)).call.apply(e,[this].concat(a))),r.attrs={},r.state={theme:null,generatedClassName:""},o=t,w(r,o)}return k(n,e),b(n,[{key:"buildExecutionContext",value:function(e,t){var n=this.constructor.attrs,r=x({},t,{theme:e});return void 0===n?r:(this.attrs=Object.keys(n).reduce(function(e,t){var o=n[t];return e[t]="function"==typeof o?o(r):o,e},{}),x({},r,this.attrs))}},{key:"generateAndInjectStyles",value:function(e,t){var n=this.constructor,r=n.componentStyle,o=n.warnTooManyClasses,i=this.buildExecutionContext(e,t),a=r.generateAndInjectStyles(i);return void 0!==o&&o(a),a}},{key:"componentWillMount",value:function(){var e=this;if(this.context[te]){var t=this.context[te];this.unsubscribe=t(function(t){var n=e.constructor.defaultProps,r=n&&e.props.theme===n.theme,o=e.props.theme&&!r?e.props.theme:t,i=e.generateAndInjectStyles(o,e.props);e.setState({theme:o,generatedClassName:i})})}else{var n=this.props.theme||{},r=this.generateAndInjectStyles(n,this.props);this.setState({theme:n,generatedClassName:r})}}},{key:"componentWillReceiveProps",value:function(e){var t=this;this.setState(function(n){var r=t.constructor.defaultProps,o=r&&e.theme===r.theme,i=e.theme&&!o?e.theme:n.theme;return{theme:i,generatedClassName:t.generateAndInjectStyles(i,e)}})}},{key:"componentWillUnmount",value:function(){this.unsubscribe&&this.unsubscribe()}},{key:"render",value:function(){var e=this,n=this.props,r=n.children,o=n.innerRef,i=this.state.generatedClassName,a=this.constructor,s=a.styledComponentId,u=a.target,c=l(u),p=[this.props.className,s,this.attrs.className,i].filter(Boolean).join(" "),h=Object.keys(this.props).reduce(function(t,n){return(!c||Z(n)&&"className"!==n&&"innerRef"!==n)&&(t[n]=e.props[n]),t},x({},this.attrs,{className:p,ref:o,innerRef:void 0}));return t.createElement(u,h,r)}}]),n}(re);return function t(r,a,s){var u=a.displayName,c=void 0===u?l(r)?"styled."+r:"Styled("+r.displayName+")":u,p=a.componentId,h=void 0===p?o(a.displayName):p,d=a.ParentComponent,f=void 0===d?i:d,g=a.rules,m=a.attrs,y=void 0,C=new e(void 0===g?s:g.concat(s),h),S=function(e){function o(){return v(this,o),w(this,(o.__proto__||Object.getPrototypeOf(o)).apply(this,arguments))}return k(o,e),b(o,null,[{key:"extendWith",value:function(e){
+var r=(a.displayName,a.componentId,A(a,["displayName","componentId"])),i=x({},r,{rules:s,ParentComponent:o});return n(t,e,i)}},{key:"extend",get:function(){return o.extendWith(r)}}]),o}(f);return S.displayName=c,S.styledComponentId=h,S.attrs=m,S.componentStyle=C,S.warnTooManyClasses=y,S.target=r,S}}(ce,pe),de=function(e,t,n){return function(r){for(var o=arguments.length,i=Array(o>1?o-1:0),a=1;a<o;a++)i[a-1]=arguments[a];var s=n.apply(void 0,[r].concat(i)),u=ie(se(JSON.stringify(s))),l=e(u);return new t(s,l,"@keyframes").generateAndInject(),l}}(I,le,N),fe=function(e,t){return function(n){for(var r=arguments.length,o=Array(r>1?r-1:0),i=1;i<r;i++)o[i-1]=arguments[i];new e(t.apply(void 0,[n].concat(o))).generateAndInject()}}(le,N),ge=function(e,t){var n=function(n){return t(e,n)};return ae.forEach(function(e){n[e]=n(e)}),n}(he,pe);e.default=ge,e.css=N,e.keyframes=de,e.injectGlobal=fe,e.ThemeProvider=ne,e.withTheme=ue,e.styleSheet=V,Object.defineProperty(e,"__esModule",{value:!0})});

lib/models/ComponentStyle.js

@@ -42,10 +42,21 @@ 'use strict';
       this.componentId = componentId;
+      this.insertedRule = undefined;
+
       if (!_StyleSheet2.default.injected) _StyleSheet2.default.inject();
-      this.insertedRule = _StyleSheet2.default.insert('.' + componentId + ' {}');
+
+      if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production') {
+        this.insertedRule = _StyleSheet2.default.insert('.' + componentId + ' {}');
+      }
     }
 
     _createClass(ComponentStyle, [{
-      key: 'generateAndInjectStyles',
+      key: 'insertRule',
+      value: function insertRule(css) {
+        if (!this.insertedRule) {
+          this.insertedRule = _StyleSheet2.default.insert('.' + this.componentId + ' {}' + css);
+        } else {
+          this.insertedRule.appendRule(css);
+        }
+      }
 
-
       /*
@@ -57,2 +68,5 @@ * Flattens a rule set into valid CSS
        * */
+
+    }, {
+      key: 'generateAndInjectStyles',
       value: function generateAndInjectStyles(executionContext) {
@@ -62,3 +76,3 @@ var flatCSS = flatten(this.rules, executionContext);
 
-        if (!inserted[hash]) {
+        if (inserted[hash] === undefined) {
           var selector = nameGenerator(hash);
@@ -68,3 +82,3 @@ inserted[hash] = selector;
           var css = stringifyRules(flatCSS, '.' + selector);
-          this.insertedRule.appendRule(css);
+          this.insertRule(css);
         }
@@ -71,0 +85,0 @@

lib/models/StyledComponent.js

@@ -35,4 +35,2 @@ 'use strict';
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -44,4 +42,2 @@
 
-function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
-
 var babelPluginFlowReactPropTypes_proptype_Theme = require('./ThemeProvider').babelPluginFlowReactPropTypes_proptype_Theme || require('react').PropTypes.any;
@@ -53,2 +49,5 @@
 
+var escapeRegex = /[[\].#*$><+~=|^:(),"'`]/g;
+var multiDashRegex = /--+/g;
+
 exports.default = function (ComponentStyle, constructWithOptions) {
@@ -58,6 +57,8 @@ /* We depend on components having unique IDs */
   var generateId = function generateId(_displayName) {
-    var displayName = _displayName.replace(/[[\].#*$><+~=|^:(),"'`]/g, '-') // Replace all possible CSS selectors
-    .replace(/--+/g, '-'); // Replace multiple -- with single -
+    var displayName = typeof _displayName !== 'string' ? 'sc' : _displayName.replace(escapeRegex, '-') // Replace all possible CSS selectors
+    .replace(multiDashRegex, '-'); // Replace multiple -- with single -
+
     var nr = (identifiers[displayName] || 0) + 1;
     identifiers[displayName] = nr;
+
     var hash = ComponentStyle.generateName(displayName + nr);
@@ -67,141 +68,186 @@ return displayName + '-' + hash;
 
-  var createStyledComponent = function createStyledComponent(target, options, rules) {
-    var _options$displayName = options.displayName,
-        displayName = _options$displayName === undefined ? (0, _isTag2.default)(target) ? 'styled.' + target : 'Styled(' + target.displayName + ')' : _options$displayName,
-        _options$componentId = options.componentId,
-        componentId = _options$componentId === undefined ? generateId(options.displayName || 'sc') : _options$componentId,
-        _options$attrs = options.attrs,
-        attrs = _options$attrs === undefined ? {} : _options$attrs,
-        _options$rules = options.rules,
-        extendingRules = _options$rules === undefined ? [] : _options$rules,
-        _options$ParentCompon = options.ParentComponent,
-        ParentComponent = _options$ParentCompon === undefined ? _AbstractStyledComponent2.default : _options$ParentCompon;
+  var BaseStyledComponent = function (_AbstractStyledCompon) {
+    _inherits(BaseStyledComponent, _AbstractStyledCompon);
 
-    var componentStyle = new ComponentStyle([].concat(_toConsumableArray(extendingRules), _toConsumableArray(rules)), componentId);
+    function BaseStyledComponent() {
+      var _ref;
 
-    var warnTooManyClasses = void 0;
-    if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production') {
-      warnTooManyClasses = (0, _createWarnTooManyClasses2.default)();
-    }
+      var _temp, _this, _ret;
 
-    var StyledComponent = function (_ParentComponent) {
-      _inherits(StyledComponent, _ParentComponent);
+      _classCallCheck(this, BaseStyledComponent);
 
-      function StyledComponent() {
-        var _ref;
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
 
-        var _temp, _this, _ret;
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = BaseStyledComponent.__proto__ || Object.getPrototypeOf(BaseStyledComponent)).call.apply(_ref, [this].concat(args))), _this), _this.attrs = {}, _this.state = {
+        theme: null,
+        generatedClassName: ''
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
 
-        _classCallCheck(this, StyledComponent);
+    _createClass(BaseStyledComponent, [{
+      key: 'buildExecutionContext',
+      value: function buildExecutionContext(theme, props) {
+        var attrs = this.constructor.attrs;
 
-        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-          args[_key] = arguments[_key];
+        var context = _extends({}, props, { theme: theme });
+        if (attrs === undefined) {
+          return context;
         }
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = StyledComponent.__proto__ || Object.getPrototypeOf(StyledComponent)).call.apply(_ref, [this].concat(args))), _this), _this.attrs = {}, _this.state = {
-          theme: null,
-          generatedClassName: ''
-        }, _temp), _possibleConstructorReturn(_this, _ret);
+        this.attrs = Object.keys(attrs).reduce(function (acc, key) {
+          var attr = attrs[key];
+          // eslint-disable-next-line no-param-reassign
+          acc[key] = typeof attr === 'function' ? attr(context) : attr;
+          return acc;
+        }, {});
+
+        return _extends({}, context, this.attrs);
       }
+    }, {
+      key: 'generateAndInjectStyles',
+      value: function generateAndInjectStyles(theme, props) {
+        var _constructor = this.constructor,
+            componentStyle = _constructor.componentStyle,
+            warnTooManyClasses = _constructor.warnTooManyClasses;
 
-      _createClass(StyledComponent, [{
-        key: 'buildExecutionContext',
-        value: function buildExecutionContext(theme, props) {
-          var context = _extends({}, props, { theme: theme });
-          this.attrs = Object.keys(attrs).reduce(function (accum, key) {
-            return _extends({}, accum, _defineProperty({}, key, typeof attrs[key] === 'function' ? attrs[key](context) : attrs[key]));
-          }, {});
-          return _extends({}, context, this.attrs);
+        var executionContext = this.buildExecutionContext(theme, props);
+        var className = componentStyle.generateAndInjectStyles(executionContext);
+
+        if (warnTooManyClasses !== undefined) {
+          warnTooManyClasses(className);
         }
-      }, {
-        key: 'generateAndInjectStyles',
-        value: function generateAndInjectStyles(theme, props) {
-          var executionContext = this.buildExecutionContext(theme, props);
-          return componentStyle.generateAndInjectStyles(executionContext);
-        }
-      }, {
-        key: 'componentWillMount',
-        value: function componentWillMount() {
-          var _this2 = this;
 
-          // If there is a theme in the context, subscribe to the event emitter. This
-          // is necessary due to pure components blocking context updates, this circumvents
-          // that by updating when an event is emitted
-          if (this.context[_ThemeProvider.CHANNEL]) {
-            var subscribe = this.context[_ThemeProvider.CHANNEL];
-            this.unsubscribe = subscribe(function (nextTheme) {
-              // This will be called once immediately
+        return className;
+      }
+    }, {
+      key: 'componentWillMount',
+      value: function componentWillMount() {
+        var _this2 = this;
 
-              // Props should take precedence over ThemeProvider, which should take precedence over
-              // defaultProps, but React automatically puts defaultProps on props.
-              var defaultProps = _this2.constructor.defaultProps;
+        // If there is a theme in the context, subscribe to the event emitter. This
+        // is necessary due to pure components blocking context updates, this circumvents
+        // that by updating when an event is emitted
+        if (this.context[_ThemeProvider.CHANNEL]) {
+          var subscribe = this.context[_ThemeProvider.CHANNEL];
+          this.unsubscribe = subscribe(function (nextTheme) {
+            // This will be called once immediately
 
-              var isDefaultTheme = defaultProps && _this2.props.theme === defaultProps.theme;
-              var theme = _this2.props.theme && !isDefaultTheme ? _this2.props.theme : nextTheme;
-              var generatedClassName = _this2.generateAndInjectStyles(theme, _this2.props);
-              _this2.setState({ theme: theme, generatedClassName: generatedClassName });
-            });
-          } else {
-            var _theme = this.props.theme || {};
-            var generatedClassName = this.generateAndInjectStyles(_theme, this.props);
-            this.setState({ theme: _theme, generatedClassName: generatedClassName });
-          }
-        }
-      }, {
-        key: 'componentWillReceiveProps',
-        value: function componentWillReceiveProps(nextProps) {
-          var _this3 = this;
-
-          this.setState(function (oldState) {
             // Props should take precedence over ThemeProvider, which should take precedence over
             // defaultProps, but React automatically puts defaultProps on props.
-            var defaultProps = _this3.constructor.defaultProps;
+            var defaultProps = _this2.constructor.defaultProps;
 
-            var isDefaultTheme = defaultProps && nextProps.theme === defaultProps.theme;
-            var theme = nextProps.theme && !isDefaultTheme ? nextProps.theme : oldState.theme;
-            var generatedClassName = _this3.generateAndInjectStyles(theme, nextProps);
-
-            return { theme: theme, generatedClassName: generatedClassName };
+            var isDefaultTheme = defaultProps && _this2.props.theme === defaultProps.theme;
+            var theme = _this2.props.theme && !isDefaultTheme ? _this2.props.theme : nextTheme;
+            var generatedClassName = _this2.generateAndInjectStyles(theme, _this2.props);
+            _this2.setState({ theme: theme, generatedClassName: generatedClassName });
           });
+        } else {
+          var _theme = this.props.theme || {};
+          var generatedClassName = this.generateAndInjectStyles(_theme, this.props);
+          this.setState({ theme: _theme, generatedClassName: generatedClassName });
         }
-      }, {
-        key: 'componentWillUnmount',
-        value: function componentWillUnmount() {
-          if (this.unsubscribe) {
-            this.unsubscribe();
-          }
+      }
+    }, {
+      key: 'componentWillReceiveProps',
+      value: function componentWillReceiveProps(nextProps) {
+        var _this3 = this;
+
+        this.setState(function (oldState) {
+          // Props should take precedence over ThemeProvider, which should take precedence over
+          // defaultProps, but React automatically puts defaultProps on props.
+          var defaultProps = _this3.constructor.defaultProps;
+
+          var isDefaultTheme = defaultProps && nextProps.theme === defaultProps.theme;
+          var theme = nextProps.theme && !isDefaultTheme ? nextProps.theme : oldState.theme;
+          var generatedClassName = _this3.generateAndInjectStyles(theme, nextProps);
+
+          return { theme: theme, generatedClassName: generatedClassName };
+        });
+      }
+    }, {
+      key: 'componentWillUnmount',
+      value: function componentWillUnmount() {
+        if (this.unsubscribe) {
+          this.unsubscribe();
         }
-      }, {
-        key: 'render',
-        value: function render() {
-          var _this4 = this;
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        var _this4 = this;
 
-          var _props = this.props,
-              className = _props.className,
-              children = _props.children,
-              innerRef = _props.innerRef;
-          var generatedClassName = this.state.generatedClassName;
+        var _props = this.props,
+            children = _props.children,
+            innerRef = _props.innerRef;
+        var generatedClassName = this.state.generatedClassName;
+        var _constructor2 = this.constructor,
+            styledComponentId = _constructor2.styledComponentId,
+            target = _constructor2.target;
 
 
-          var propsForElement = _extends({}, this.attrs);
-          /* Don't pass through non HTML tags through to HTML elements */
-          Object.keys(this.props).filter(function (propName) {
-            return !(0, _isTag2.default)(target) || (0, _validAttr2.default)(propName);
-          }).forEach(function (propName) {
-            propsForElement[propName] = _this4.props[propName];
-          });
-          propsForElement.className = [className, componentId, this.attrs.className, generatedClassName].filter(function (x) {
-            return x;
-          }).join(' ');
-          if (innerRef) {
-            propsForElement.ref = innerRef;
-            delete propsForElement.innerRef;
+        var isTargetTag = (0, _isTag2.default)(target);
+
+        var className = [this.props.className, styledComponentId, this.attrs.className, generatedClassName].filter(Boolean).join(' ');
+
+        var propsForElement = Object.keys(this.props).reduce(function (acc, propName) {
+          // Don't pass through non HTML tags through to HTML elements
+          if (!isTargetTag || (0, _validAttr2.default)(propName) && propName !== 'className' && propName !== 'innerRef') {
+            // eslint-disable-next-line no-param-reassign
+            acc[propName] = _this4.props[propName];
           }
 
-          if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && generatedClassName) {
-            warnTooManyClasses(generatedClassName, StyledComponent.displayName);
-          }
-          return (0, _react.createElement)(target, propsForElement, children);
+          return acc;
+        }, _extends({}, this.attrs, {
+          className: className,
+          ref: innerRef,
+          innerRef: undefined
+        }));
+
+        return (0, _react.createElement)(target, propsForElement, children);
+      }
+    }]);
+
+    return BaseStyledComponent;
+  }(_AbstractStyledComponent2.default);
+
+  var createStyledComponent = function createStyledComponent(target, options, rules) {
+    var _options$displayName = options.displayName,
+        displayName = _options$displayName === undefined ? (0, _isTag2.default)(target) ? 'styled.' + target : 'Styled(' + target.displayName + ')' : _options$displayName,
+        _options$componentId = options.componentId,
+        componentId = _options$componentId === undefined ? generateId(options.displayName) : _options$componentId,
+        _options$ParentCompon = options.ParentComponent,
+        ParentComponent = _options$ParentCompon === undefined ? BaseStyledComponent : _options$ParentCompon,
+        extendingRules = options.rules,
+        attrs = options.attrs;
+
+
+    var warnTooManyClasses = void 0;
+    if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production') {
+      warnTooManyClasses = (0, _createWarnTooManyClasses2.default)(displayName);
+    }
+
+    var componentStyle = new ComponentStyle(extendingRules === undefined ? rules : extendingRules.concat(rules), componentId);
+
+    var StyledComponent = function (_ParentComponent) {
+      _inherits(StyledComponent, _ParentComponent);
+
+      function StyledComponent() {
+        _classCallCheck(this, StyledComponent);
+
+        return _possibleConstructorReturn(this, (StyledComponent.__proto__ || Object.getPrototypeOf(StyledComponent)).apply(this, arguments));
+      }
+
+      _createClass(StyledComponent, null, [{
+        key: 'extendWith',
+        value: function extendWith(tag) {
+          var _ = options.displayName,
+              __ = options.componentId,
+              optionsToCopy = _objectWithoutProperties(options, ['displayName', 'componentId']);
+
+          var newOptions = _extends({}, optionsToCopy, { rules: rules, ParentComponent: StyledComponent });
+          return constructWithOptions(createStyledComponent, tag, newOptions);
         }
-      }], [{
+      }, {
         key: 'extend',
@@ -218,9 +264,7 @@ get: function get() {
     StyledComponent.styledComponentId = componentId;
-    StyledComponent.extendWith = function (tag) {
-      var _ = options.displayName,
-          __ = options.componentId,
-          optionsToCopy = _objectWithoutProperties(options, ['displayName', 'componentId']);
+    StyledComponent.attrs = attrs;
+    StyledComponent.componentStyle = componentStyle;
+    StyledComponent.warnTooManyClasses = warnTooManyClasses;
+    StyledComponent.target = target;
 
-      return constructWithOptions(createStyledComponent, tag, _extends({}, optionsToCopy, { rules: rules, ParentComponent: StyledComponent }));
-    };
 
@@ -227,0 +271,0 @@ return StyledComponent;

lib/utils/createWarnTooManyClasses.js

@@ -15,7 +15,7 @@ 'use strict';
 
-exports.default = function () {
+exports.default = function (displayName) {
   var generatedClasses = {};
   var warningSeen = false;
 
-  return function (className, displayName) {
+  return function (className) {
     if (!warningSeen) {
@@ -22,0 +22,0 @@ generatedClasses[className] = true;

lib/utils/generateAlphabeticName.js

@@ -7,7 +7,14 @@ 'use strict';
 var chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
+var charsLength = chars.length;
 
 /* Some high number, usually 9-digit base-10. Map it to base-😎 */
 var generateAlphabeticName = function generateAlphabeticName(code) {
-  var lastDigit = chars[code % chars.length];
-  return code > chars.length ? '' + generateAlphabeticName(Math.floor(code / chars.length)) + lastDigit : lastDigit;
+  var name = '';
+  var x = void 0;
+
+  for (x = code; x > charsLength; x = Math.floor(x / chars.length)) {
+    name = chars[x % charsLength] + name;
+  }
+
+  return chars[x % charsLength] + name;
 };
@@ -14,0 +21,0 @@

package.json

 {
   "name": "styled-components",
-  "version": "2.0.0-10",
+  "version": "2.0.0-11",
   "description": "Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -12,5 +12,12 @@ <a href="https://github.com/styled-components/styled-components">
 
-[![npm](https://img.shields.io/npm/v/styled-components.svg)](https://www.npmjs.com/package/styled-components) [![Travis Build Status](https://travis-ci.org/styled-components/styled-components.svg?branch=master)](https://travis-ci.org/styled-components/styled-components) [![AppVeyor Build Status](https://ci.appveyor.com/api/projects/status/github/gruntjs/grunt?branch=master&svg=true)](https://ci.appveyor.com/project/mxstbr/styled-components) [![Supported by Thinkmill](https://thinkmill.github.io/badge/heart.svg)](http://thinkmill.com.au/?utm_source=github&utm_medium=badge&utm_campaign=styled-components)
+[![npm](https://img.shields.io/npm/v/styled-components.svg)](https://www.npmjs.com/package/styled-components)
+[![Travis Build Status](https://travis-ci.org/styled-components/styled-components.svg?branch=master)](https://travis-ci.org/styled-components/styled-components)
+[![AppVeyor Build Status](https://ci.appveyor.com/api/projects/status/github/gruntjs/grunt?branch=master&svg=true)](https://ci.appveyor.com/project/mxstbr/styled-components)
+[![Supported by Thinkmill](https://thinkmill.github.io/badge/heart.svg)](http://thinkmill.com.au/?utm_source=github&utm_medium=badge&utm_campaign=styled-components)
 [![gitter](https://camo.githubusercontent.com/54dc79dc7da6b76b17bc8013342da9b4266d993c/68747470733a2f2f6261646765732e6769747465722e696d2f6d78737462722f72656163742d626f696c6572706c6174652e737667)](https://gitter.im/styled-components/styled-components)
 
+![gzip size](http://img.badgesize.io/https://unpkg.com/styled-components@next/dist/styled-components.min.js?compression=gzip&label=gzip%20size)
+![size](http://img.badgesize.io/https://unpkg.com/styled-components@next/dist/styled-components.min.js?label=size)
+![module formats: umd, cjs, esm](https://img.shields.io/badge/module%20formats-umd%2C%20cjs%2C%20esm-green.svg)
+
 Utilising [tagged template literals](./docs/tagged-template-literals.md) (a recent addition to JavaScript) and the [power of CSS](./docs/css-we-support.md), `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!
@@ -17,0 +24,0 @@

src/models/ComponentStyle.js

@@ -17,3 +17,3 @@ // @flow
     componentId: string
-    insertedRule: Object
+    insertedRule: ?Object
 
@@ -23,4 +23,9 @@ constructor(rules: RuleSet, componentId: string) {
       this.componentId = componentId
+      this.insertedRule = undefined
+
       if (!styleSheet.injected) styleSheet.inject()
-      this.insertedRule = styleSheet.insert(`.${componentId} {}`)
+
+      if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production') {
+        this.insertedRule = styleSheet.insert(`.${componentId} {}`)
+      }
     }
@@ -32,2 +37,10 @@
 
+    insertRule(css: string) {
+      if (!this.insertedRule) {
+        this.insertedRule = styleSheet.insert(`.${this.componentId} {}${css}`)
+      } else {
+        this.insertedRule.appendRule(css)
+      }
+    }
+
     /*
@@ -43,3 +56,3 @@ * Flattens a rule set into valid CSS
 
-      if (!inserted[hash]) {
+      if (inserted[hash] === undefined) {
         const selector = nameGenerator(hash)
@@ -49,3 +62,3 @@ inserted[hash] = selector
         const css = stringifyRules(flatCSS, `.${selector}`)
-        this.insertedRule.appendRule(css)
+        this.insertRule(css)
       }
@@ -52,0 +65,0 @@

src/models/StyledComponent.js

@@ -15,2 +15,5 @@ // @flow
 
+const escapeRegex = /[[\].#*$><+~=|^:(),"'`]/g
+const multiDashRegex = /--+/g
+
 export default (ComponentStyle: Function, constructWithOptions: Function) => {
@@ -20,7 +23,10 @@ /* We depend on components having unique IDs */
   const generateId = (_displayName: string) => {
-    const displayName = _displayName
-      .replace(/[[\].#*$><+~=|^:(),"'`]/g, '-') // Replace all possible CSS selectors
-      .replace(/--+/g, '-') // Replace multiple -- with single -
+    const displayName = typeof _displayName !== 'string' ?
+      'sc' : _displayName
+        .replace(escapeRegex, '-') // Replace all possible CSS selectors
+        .replace(multiDashRegex, '-') // Replace multiple -- with single -
+
     const nr = (identifiers[displayName] || 0) + 1
     identifiers[displayName] = nr
+
     const hash = ComponentStyle.generateName(displayName + nr)
@@ -30,110 +36,166 @@ return `${displayName}-${hash}`
 
-  const createStyledComponent = (target: Target,
-                                 options: Object,
-                                 rules: RuleSet) => {
-    const {
-      displayName = isTag(target) ? `styled.${target}` : `Styled(${target.displayName})`,
-      componentId = generateId(options.displayName || 'sc'),
-      attrs = {},
-      rules: extendingRules = [],
-      ParentComponent = AbstractStyledComponent,
-    } = options
-    const componentStyle = new ComponentStyle([...extendingRules, ...rules], componentId)
+  class BaseStyledComponent extends AbstractStyledComponent {
+    static target: Target
+    static styledComponentId: string
+    static attrs: Object
+    static componentStyle: Object
+    static warnTooManyClasses: Function
 
-    let warnTooManyClasses
-    if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production') {
-      warnTooManyClasses = createWarnTooManyClasses()
+    attrs = {}
+    state = {
+      theme: null,
+      generatedClassName: '',
     }
 
-    class StyledComponent extends ParentComponent {
-      static styledComponentId: string
-      static extend: Function
-      static extendWith: Function
-
-      attrs = {}
-      state = {
-        theme: null,
-        generatedClassName: '',
+    buildExecutionContext(theme: any, props: any) {
+      const { attrs } = this.constructor
+      const context = { ...props, theme }
+      if (attrs === undefined) {
+        return context
       }
 
-      buildExecutionContext(theme: any, props: any) {
-        const context = { ...props, theme }
-        this.attrs = Object.keys(attrs).reduce((accum, key) => (
-          { ...accum, [key]: typeof attrs[key] === 'function' ? attrs[key](context) : attrs[key] }
-        ), {})
-        return { ...context, ...this.attrs }
-      }
+      this.attrs = Object.keys(attrs).reduce((acc, key) => {
+        const attr = attrs[key]
+        // eslint-disable-next-line no-param-reassign
+        acc[key] = typeof attr === 'function' ? attr(context) : attr
+        return acc
+      }, {})
 
-      generateAndInjectStyles(theme: any, props: any) {
-        const executionContext = this.buildExecutionContext(theme, props)
-        return componentStyle.generateAndInjectStyles(executionContext)
-      }
+      return { ...context, ...this.attrs }
+    }
 
-      componentWillMount() {
-        // If there is a theme in the context, subscribe to the event emitter. This
-        // is necessary due to pure components blocking context updates, this circumvents
-        // that by updating when an event is emitted
-        if (this.context[CHANNEL]) {
-          const subscribe = this.context[CHANNEL]
-          this.unsubscribe = subscribe(nextTheme => {
-            // This will be called once immediately
+    generateAndInjectStyles(theme: any, props: any) {
+      const { componentStyle, warnTooManyClasses } = this.constructor
+      const executionContext = this.buildExecutionContext(theme, props)
+      const className = componentStyle.generateAndInjectStyles(executionContext)
 
-            // Props should take precedence over ThemeProvider, which should take precedence over
-            // defaultProps, but React automatically puts defaultProps on props.
-            const { defaultProps } = this.constructor
-            const isDefaultTheme = defaultProps && this.props.theme === defaultProps.theme
-            const theme = this.props.theme && !isDefaultTheme ? this.props.theme : nextTheme
-            const generatedClassName = this.generateAndInjectStyles(theme, this.props)
-            this.setState({ theme, generatedClassName })
-          })
-        } else {
-          const theme = this.props.theme || {}
-          const generatedClassName = this.generateAndInjectStyles(
-            theme,
-            this.props,
-          )
-          this.setState({ theme, generatedClassName })
-        }
+      if (warnTooManyClasses !== undefined) {
+        warnTooManyClasses(className)
       }
 
-      componentWillReceiveProps(nextProps: { theme?: Theme, [key: string]: any }) {
-        this.setState((oldState) => {
+      return className
+    }
+
+    componentWillMount() {
+      // If there is a theme in the context, subscribe to the event emitter. This
+      // is necessary due to pure components blocking context updates, this circumvents
+      // that by updating when an event is emitted
+      if (this.context[CHANNEL]) {
+        const subscribe = this.context[CHANNEL]
+        this.unsubscribe = subscribe(nextTheme => {
+          // This will be called once immediately
+
           // Props should take precedence over ThemeProvider, which should take precedence over
           // defaultProps, but React automatically puts defaultProps on props.
           const { defaultProps } = this.constructor
-          const isDefaultTheme = defaultProps && nextProps.theme === defaultProps.theme
-          const theme = nextProps.theme && !isDefaultTheme ? nextProps.theme : oldState.theme
-          const generatedClassName = this.generateAndInjectStyles(theme, nextProps)
-
-          return { theme, generatedClassName }
+          const isDefaultTheme = defaultProps && this.props.theme === defaultProps.theme
+          const theme = this.props.theme && !isDefaultTheme ? this.props.theme : nextTheme
+          const generatedClassName = this.generateAndInjectStyles(theme, this.props)
+          this.setState({ theme, generatedClassName })
         })
+      } else {
+        const theme = this.props.theme || {}
+        const generatedClassName = this.generateAndInjectStyles(
+          theme,
+          this.props,
+        )
+        this.setState({ theme, generatedClassName })
       }
+    }
 
-      componentWillUnmount() {
-        if (this.unsubscribe) {
-          this.unsubscribe()
-        }
+    componentWillReceiveProps(nextProps: { theme?: Theme, [key: string]: any }) {
+      this.setState((oldState) => {
+        // Props should take precedence over ThemeProvider, which should take precedence over
+        // defaultProps, but React automatically puts defaultProps on props.
+        const { defaultProps } = this.constructor
+        const isDefaultTheme = defaultProps && nextProps.theme === defaultProps.theme
+        const theme = nextProps.theme && !isDefaultTheme ? nextProps.theme : oldState.theme
+        const generatedClassName = this.generateAndInjectStyles(theme, nextProps)
+
+        return { theme, generatedClassName }
+      })
+    }
+
+    componentWillUnmount() {
+      if (this.unsubscribe) {
+        this.unsubscribe()
       }
+    }
 
-      render() {
-        const { className, children, innerRef } = this.props
-        const { generatedClassName } = this.state
+    render() {
+      const { children, innerRef } = this.props
+      const { generatedClassName } = this.state
+      const { styledComponentId, target } = this.constructor
 
-        const propsForElement = { ...this.attrs }
-        /* Don't pass through non HTML tags through to HTML elements */
-        Object.keys(this.props)
-          .filter(propName => !isTag(target) || validAttr(propName))
-          .forEach(propName => {
-            propsForElement[propName] = this.props[propName]
-          })
-        propsForElement.className = [className, componentId, this.attrs.className, generatedClassName].filter(x => x).join(' ')
-        if (innerRef) {
-          propsForElement.ref = innerRef
-          delete propsForElement.innerRef
-        }
+      const isTargetTag = isTag(target)
 
-        if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && generatedClassName) {
-          warnTooManyClasses(generatedClassName, StyledComponent.displayName)
-        }
-        return createElement(target, propsForElement, children)
+      const className = [
+        this.props.className,
+        styledComponentId,
+        this.attrs.className,
+        generatedClassName,
+      ].filter(Boolean).join(' ')
+
+      const propsForElement = Object
+        .keys(this.props)
+        .reduce((acc, propName) => {
+          // Don't pass through non HTML tags through to HTML elements
+          if (
+            !isTargetTag || (
+              validAttr(propName) &&
+              propName !== 'className' &&
+              propName !== 'innerRef'
+            )
+          ) {
+            // eslint-disable-next-line no-param-reassign
+            acc[propName] = this.props[propName]
+          }
+
+          return acc
+        }, {
+          ...this.attrs,
+          className,
+          ref: innerRef,
+          innerRef: undefined,
+        })
+
+      return createElement(target, propsForElement, children)
+    }
+  }
+
+  const createStyledComponent = (
+    target: Target,
+    options: Object,
+    rules: RuleSet,
+  ) => {
+    const {
+      displayName = isTag(target) ? `styled.${target}` : `Styled(${target.displayName})`,
+      componentId = generateId(options.displayName),
+      ParentComponent = BaseStyledComponent,
+      rules: extendingRules,
+      attrs,
+    } = options
+
+    let warnTooManyClasses
+    if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production') {
+      warnTooManyClasses = createWarnTooManyClasses(displayName)
+    }
+
+    const componentStyle = new ComponentStyle(
+      extendingRules === undefined ? rules : extendingRules.concat(rules),
+      componentId,
+    )
+
+    class StyledComponent extends ParentComponent {
+      static displayName = displayName
+      static styledComponentId = componentId
+      static attrs = attrs
+      static componentStyle = componentStyle
+      static warnTooManyClasses = warnTooManyClasses
+      static target = target
+
+      static extendWith(tag) {
+        const { displayName: _, componentId: __, ...optionsToCopy } = options
+        const newOptions = { ...optionsToCopy, rules, ParentComponent: StyledComponent }
+        return constructWithOptions(createStyledComponent, tag, newOptions)
       }
@@ -146,10 +208,2 @@
 
-    StyledComponent.displayName = displayName
-    StyledComponent.styledComponentId = componentId
-    StyledComponent.extendWith = tag => {
-      const { displayName: _, componentId: __, ...optionsToCopy } = options
-      return constructWithOptions(createStyledComponent, tag,
-        { ...optionsToCopy, rules, ParentComponent: StyledComponent })
-    }
-
     return StyledComponent
@@ -156,0 +210,0 @@ }

src/utils/createWarnTooManyClasses.js

@@ -7,7 +7,7 @@ // @flow
 
-export default () => {
+export default (displayName: string) => {
   let generatedClasses = {}
   let warningSeen = false
 
-  return (className: string, displayName: string) => {
+  return (className: string) => {
     if (!warningSeen) {
@@ -14,0 +14,0 @@ generatedClasses[className] = true

src/utils/generateAlphabeticName.js

 // @flow
 const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')
+const charsLength = chars.length
 
 /* Some high number, usually 9-digit base-10. Map it to base-😎 */
 const generateAlphabeticName = (code: number): string => {
-  const lastDigit = chars[code % chars.length]
-  return code > chars.length
-    ? `${generateAlphabeticName(Math.floor(code / chars.length))}${lastDigit}`
-    : lastDigit
+  let name = ''
+  let x
+
+  for (
+    x = code;
+    x > charsLength;
+    x = Math.floor(x / chars.length)
+  ) {
+    name = chars[x % charsLength] + name
+  }
+
+  return chars[x % charsLength] + name
 }
 
 export default generateAlphabeticName

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1854011

increased by0.66%

Number of package files

310

increased by0.32%

Lines of code

32911

increased by0.61%

Number of lines in readme file

526

increased by1.35%

Number of low supply chain risk alerts

4

decreased by-20%

No dependency changes