styled-components - npm Package Compare versions

Comparing version 2.0.0-6 to 2.0.0-7

CHANGELOG.md

@@ -15,2 +15,4 @@ # Change Log
 - Added `attrs` constructor for passing extra attributes to the underlying element
+- Added warnings for components generating a lot of classes, thanks to [@vdanchenkov](https://github.com/vdanchenkov). (see [#268](https://github.com/styled-components/styled-components/pull/268))
+- Standardised `styled(Comp)` to work the same in all cases, rather than a special extension case where `Comp` is another Styled Component. `Comp.extend` now covers that case. (see [#518](https://github.com/styled-components/styled-components/pull/518)).
 
@@ -17,0 +19,0 @@ ## [Unreleased]

dist/styled-components.min.js

@@ -1,1 +0,1 @@
-!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(/([A-Z])/g,"-$1").toLowerCase()}function r(e){return y(e).replace(/^ms-/,"-ms-")}function o(e){return E(e)===!0&&"[object Object]"===Object.prototype.toString.call(e)}function i(e){return e&&e.__esModule?e.default:e}function a(e,t){return t={exports:{}},e(t,t.exports),t.exports}function s(e){return e[e.length-1]}function l(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 c(e){return"string"==typeof e}function p(e){var t=Y.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 h="default"in t?t.default:t,d="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ".split(""),f=function e(t){var n=d[t%d.length];return t>d.length?""+e(Math.floor(t/d.length))+n:n},g=function(e,t){return t.reduce(function(t,n,r){return t.concat(n,e[r+1])},[e[0]])},m=n,y=m,v=r,b="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},C=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},x=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}}(),k=function(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e},A=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},S=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)},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},T=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":b(e))&&!Array.isArray(e)},E=O,j=function(e){var t,n;return o(e)!==!1&&(t=e.constructor,"function"==typeof t&&(n=t.prototype,o(n)!==!1&&n.hasOwnProperty("isPrototypeOf")!==!1))},P=function e(t,n){var r=Object.keys(t).map(function(n){return j(t[n])?e(t[n],n):v(n)+": "+t[n]+";"}).join(" ");return n?n+" {\n  "+r+"\n}":r},R=function e(t,n){return t.reduce(function(t,r){return void 0===r||null===r||r===!1||""===r?t:Array.isArray(r)?[].concat(T(t),T(e(r,n))):r.hasOwnProperty("styledComponentId")?[].concat(T(t),["."+r.styledComponentId]):"function"==typeof r?n?t.concat.apply(t,T(e([r(n)],n))):t.concat(r):t.concat(j(r)?P(r):r.toString())},[])},M=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 R(g(e,n))},D="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},F=a(function(e,t){!function(n){"object"===(void 0===t?"undefined":b(t))&&void 0!==e?e.exports=n(D):window.stylis=n(window)}(function(e){function t(e,n,r,o,i){e+="";var a,s,l,u,c,p="",h="",d=e.charCodeAt(0);91===d?(l=e.substring(1,e.length-1).split("="),a=(h=l[1]).charCodeAt(0),34!==a&&39!==a||(h=h.substring(1,h.length-1)),p="["+l[0]+'="'+h+'"]'):h=35===d||46===d||62===d?(p=e).substring(1):p=e,d=0,void 0==r||r===!0?(r=!0,u=h):(u="",r=!1);var f=null!=i,g=t.plugins,m=g.length;f&&(c=(void 0===i?"undefined":b(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,l=g.length;s<l;s++)a=g[s](e,a,n,r,o,i)||a;if(a!==t)return a},f=!0);var y,v,C,x,k,A,S,w,T,O,E,j,P,R,M,D,F,L,_,I,N="-ms-",U="-webkit-",W="",z="",B="",H=0,q=0,$=0,V=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,le="";re<se;){if(H=n.charCodeAt(re),0!==G||0!==X||0!==ee||123!==H&&125!==H&&59!==H)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&&(A=i(7,D,ae,ie,p,le.length),null!=A&&(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++}else{if(W+=n.charAt(re),f&&125!==H&&f&&(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),null!=A&&(W=123===H?A+" {":A)),T=W.charCodeAt(0),32===T&&(T=(W=W.trim()).charCodeAt(0)),O=W.charCodeAt(1),E=W.charCodeAt(2),64===T){if(1===J&&0!==B.length&&(J=0,B=p+" {"+B+"}",f&&(A=i(4,B,ae,ie,p,le.length),null!=A&&(B=A)),le+=B,B=""),59!==H)if(107===O||103===O)107===O?(P=W.substring(1,11)+(0===Y?u:"")+W.substring(11),W="@"+U+P,d=1):(Y=1,W="");else if(109===O)if(o===!0&&105===E)void 0===_&&(_={}),P=(I=W.substring(7,W.indexOf("{"))+" ").trim(),I=I.substring(0,I.indexOf(" ")).trim(),_[I]={key:P.trim(),body:""},d=3,W="",P="";else if(101===E)if(0!==oe){for(re++,ie++,void 0===k&&(k=""),A="",v="",C=S.split(t.regex.split),V=1;re<se&&(a=n.charCodeAt(re),123===a?V++:125===a&&V--,0!==V);)v+=n.charAt(re++),ie=13===a||10===a?(ae++,0):ie+1;m=C.length;for(var ue=0;ue<m;ue++)e=C[ue],A+=t((ue===m-1?e.substring(0,e.length-1):e).trim(),v,r,o,i);k+=W+A+"}",W="",1,d=4}else d=2,M=W,W="";else d=6;if(105===O){if(o===!0&&110===E)if(W=W.substring(9,W.length-1),w=W.indexOf("("),w!==-1){var ce=W.substring(0,w),pe=_[ce],he=W.substring(ce.length+1,W.length-1).split(","),de=pe.key.replace(ce,"").replace(/\(|\)/g,"").trim().split(",");W=pe.body,m=he.length;for(var ue=0;ue<m;ue++){var fe=de[ue].trim();void 0!==fe&&(W=W.replace(new RegExp("var\\(~~"+fe+"\\)","g"),he[ue].trim()))}n+=W,se+=W.length,W=""}else W=_[W].body,0===oe&&(n+=W,se+=W.length,W="");else if(109===E&&f){var ge=/@import.*?(["'`][^\.\n\r]*?["'`];|["'`][^:\r\n]*?\.[^c].*?["'`])/g.exec(W);null!==ge&&(W=i(5,ge[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!==O&&103!==O&&109!==O&&(d=5),$=-1,q++)}else if(o===!0&&126===T&&126===O&&59===H&&(y=W.indexOf(":"))!==-1)void 0===L&&(F=[],L=0),F[L++]=[W.substring(0,y),W.substring(y+1,W.length-1).trim()],W="";else{if(97===T&&110===O&&105===E){if(W=W.substring(0,W.length-1),y=W.indexOf(":")+1,x=W.substring(0,y),r===!0&&45!==W.charCodeAt(9)){var me=W.substring(y).trim().split(",");m=me.length;for(var ye=0;ye<m;ye++){for(var ve=me[ye],be=ve.split(" "),Ce=0,xe=be.length;Ce<xe;Ce++){var ke=be[Ce].trim(),Ae=ke.charCodeAt(0),Se=ke.charCodeAt(2),we=ke.length,Te=ke.charCodeAt(we-1);41===Te||0===we||105===Ae&&102===Se&&101===Te&&8===we||108===Ae&&110===Se&&114===Te&&6===we||97===Ae&&116===Se&&101===Te&&(9===we||17===we)||110===Ae&&114===Se&&108===Te&&6===we||98===Ae&&99===Se&&115===Te&&9===we||102===Ae&&114===Se&&115===Te&&8===we||98===Ae&&116===Se&&104===Te&&4===we||110===Ae&&110===Se&&101===Te&&4===we||114===Ae&&110===Se&&103===Te&&7===we||112===Ae&&117===Se&&100===Te&&6===we||114===Ae&&118===Se&&100===Te&&8===we||115===Ae&&101===Se&&(116===Te&&10===we||100===Te&&8===we)||101===Ae&&115===Se&&(101===Te&&4===we||(11===we||7===we||8===we)&&45===ke.charCodeAt(4))||!isNaN(parseFloat(ke))||ke.indexOf("(")!==-1||(be[Ce]=u+ke)}x+=(0===ye?"":",")+be.join(" ").trim()}}else x+=(110!==W.charCodeAt(10)?"":u)+W.substring(y).trim().trim();W=U+x+";"+x+";"}else if(97===T&&112===O&&112===E)W=U+W+"-moz-"+W+W;else if(100===T&&105===O&&115===E)(w=W.indexOf("flex"))!==-1&&(A=101===W.charCodeAt(w-2)?"inline-":"",W="display: "+U+A+"box;display: "+U+A+"flex;display: "+N+"flexbox;display: "+A+"flex"+(125===H?"}":";"));else if(116===T&&114===O&&97===E)W=U+W+(102===W.charCodeAt(5)?N+W:"")+W;else if(104===T&&121===O&&112===E||117===T&&115===O&&101===E)W=U+W+"-moz-"+W+N+W+W;else if(102===T&&108===O&&101===E)W=U+W+N+W+W;else if(111===T&&114===O&&100===E)W=U+W+N+"flex-"+W+W;else if(97===T&&108===O&&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 if(99===T&&117===O&&114===E&&null!==/zoo|gra/.exec(W))W=W.replace(/: +/g,": "+U)+W.replace(/: +/g,": -moz-")+W;else if(123===H)if(oe++,1===J&&0!==B.length&&(J=0,B=p+" {"+B+"}",f&&(A=i(4,B,ae,ie,p,le.length),null!=A&&(B=A)),le+=B,B=""),2===oe){re++,ie++,v="";var Oe=W.substring(0,W.length-1).split(t.regex.split),Ee=S.substring(0,S.length-1).split(t.regex.split);for(V=1;re<se&&(a=n.charCodeAt(re),123===a?V++:125===a&&V--,0!==V);)v+=n.charAt(re++),ie=13===a||10===a?(ae++,0):ie+1;m=Ee.length;for(var ye=0;ye<m;ye++){A=Ee[ye],w=A.indexOf(p),Ee[ye]="";for(var Ce=0,xe=Oe.length;Ce<xe;Ce++)e=w>0?":global()"+A.trim():A.replace(p,"&").trim(),j=Oe[Ce].trim(),e=j.indexOf(" &")>0?j.replace("&","").trim()+" "+e:null!==t.regex.global[0].exec(j)?j:e+" "+j,Ee[ye]+=e.replace(/ +&/,"").trim()+(Ce===xe-1?"":",")}void 0===R&&(R=""),R+="\n"+Ee.join(",").replace(t.regex.global[1]," $1")+" {"+v+"}",K=1,W="",oe--}else if(0!==Y||0!==q&&2!==d)S=W;else{C=W.split(t.regex.split),x="",m=C.length;for(var ye=0;ye<m;ye++){if(a=(e=C[ye]).charCodeAt(0),32===a&&(a=(e=e.trim()).charCodeAt(0)),38===a)e=58===a&&103===e.charCodeAt(2)?e.substring(1).replace(t.regex.global[0],"$1").replace(t.regex.and,p):p+e.substring(1).replace(t.regex.and,p);else if((w=e.indexOf(" &"))>0&&(a=58,Z=2,0!==e.indexOf(":global()")&&(e=":global("+e.substring(0,w)+")"+e.substring(w))),58===a){var je=e.charCodeAt(1);if(104===je&&116===e.charCodeAt(4)){var Pe=e.charCodeAt(5);e=40===Pe?p+e.replace(/:host\((.*)\)/g,"$1").replace(t.regex.and,p):45===Pe?e.replace(/:host-context\((.*)\)/g,"$1 "+p).replace(t.regex.and,p):p+e.substring(5)}else 103===je?(2!==Z&&(Z=1),e=e.replace(t.regex.global[0],"$1").replace(t.regex.and,p)):e=p+e}else e=p+" "+e;f&&(A=i(1.5,ye===m-1?e.substring(0,e.length-1).trim():e,ae,ie,p,le.length),null!=A&&(e=ye===m-1?A+" {":A)),x+=0===ye?e:","+e}W=x,1!==Z?S=x:(S=":global()"+x,Z=0)}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,$++),125!==T&&32===W.charCodeAt(W.length-2)&&(W=W.substring(0,W.length-1).trim()+"}")),0!==q?(125===H?$++:123===H&&0!==$&&$--,1!==Q||123!==H&&0!==$||0===B.length||(Q=0,W=p+" {"+B+"}"+W,B=""),0===$?(0===d?(Y=0,W=""):1===d?(W="}@"+P+"}",P=""):3===d&&(_[I].body=P,I="",W="",P=""),d=0,$--,q--):1===d||3===d?(P+=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&&(A=i(3,z,ae,ie,p,le.length),null!=A&&(z=A)),void 0!==M?(M+=z,125===M.charCodeAt(M.length-2)&&(le+=M,M=void 0)):le+=z),z=""),W=""}re++}if(void 0!==B&&0!==B.length&&(B=p+" {"+B+"}",f&&(A=i(4,B,ae,ie,p,le.length),null!=A&&(B=A)),le+=B),o&&void 0!==F)for(var ue=0;ue<L;ue++)le=le.replace(new RegExp("var\\("+F[ue][0]+"\\)","g"),F[ue][1]);return f&&(A=i(6,le,ae,ie,p,le.length),null!=A&&(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 l=e instanceof RegExp?e:new RegExp(e+"\\([ \\t\\r\\n]*([^\\0]*?)[ \\t\\r\\n]*\\)","g"),u=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(l,u)}}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})}),L="undefined"!=typeof document,_=function(e){return!1}("production"),I=function(){if(L){var e=document.createElement("div");return e.innerHTML="<!--[if lt IE 10]><i></i><![endif]-->",1===e.getElementsByTagName("i").length}}(),N=function(){function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=t.speedy,r=void 0===n?!_&&!0:n,o=t.maxLength,i=void 0===o?L&&I?4e3:65e3:o;C(this,e),this.isSpeedy=r,this.sheet=void 0,this.tags=[],this.maxLength=i,this.ctr=0}return x(e,[{key:"inject",value:function(){var e=this;if(this.injected)throw new Error("already injected stylesheet!");L?(this.tags[0]=u(),this.sheet=l(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){_&&console.warn("whoops, illegal rule inserted",e)}}},{key:"insert",value:function(e){var t=void 0;if(L)if(this.isSpeedy&&this.sheet.insertRule)this._insert(e);else{var n=document.createTextNode(e);s(this.tags).appendChild(n),t={textNode:n,appendRule:function(e){return n.appendData(e)}},this.isSpeedy||(this.sheet=l(s(this.tags)))}else t=this.sheet.insertRule(e);return this.ctr++,L&&this.ctr%this.maxLength===0&&(this.tags.push(u()),this.sheet=l(s(this.tags))),t}},{key:"flush",value:function(){L?(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(!L)return this.sheet.cssRules;var e=[];return this.tags.forEach(function(t){return e.splice.apply(e,[e.length,0].concat(T(Array.from(l(t).cssRules))))}),e}}]),e}(),U=function(){function e(){C(this,e),this.styleSheet=new N({speedy:!1,maxLength:40})}return x(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:"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}(),W=new U,z=function(){function e(t,n){C(this,e),this.rules=t,this.selector=n}return x(e,[{key:"generateAndInject",value:function(){W.injected||W.inject();var e=R(this.rules).join(""),t=this.selector?this.selector+" { "+e+" }":e,n=F("",t,!1,!1);W.insert(n)}}]),e}(),B=function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];new z(M.apply(void 0,[e].concat(n))).generateAndInject()},H={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},q={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},$={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},V=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]*$")),K={}.hasOwnProperty,X=function(e){return K.call(q,e)||K.call($,e)||V(e.toLowerCase())||K.call(H,e)},G=p,Y=Object.prototype.toString,Z=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})}}}},J="__styled-components__",Q=function(e){function t(){C(this,t);var e=w(this,(t.__proto__||Object.getPrototypeOf(t)).call(this));return e.getTheme=e.getTheme.bind(e),e}return S(t,e),x(t,[{key:"componentWillMount",value:function(){var e=this;if(this.context[J]){var t=this.context[J];this.unsubscribeToOuter=t(function(t){e.outerTheme=t})}this.broadcast=Z(this.getTheme())}},{key:"getChildContext",value:function(){return A({},this.context,k({},J,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[J]&&this.unsubscribeToOuter()}},{key:"getTheme",value:function(e){var t=e||this.props.theme;if(G(t)){var n=t(this.outerTheme);if(!j(n))throw new Error("[ThemeProvider] Please return an object from your theme function, i.e. theme={() => ({})}!");return n}if(!j(t))throw new Error("[ThemeProvider] Please make your theme prop a plain object");return A({},this.outerTheme,t)}},{key:"render",value:function(){return this.props.children?h.Children.only(this.props.children):null}}]),t}(t.Component);Q.childContextTypes=k({},J,t.PropTypes.func.isRequired),Q.contextTypes=k({},J,t.PropTypes.func);var ee=function(e){function t(){return C(this,t),w(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return S(t,e),t}(t.Component);ee.contextTypes=k({},J,t.PropTypes.func);var te=function(e){var n={},r=function(t){var r=t.replace(/[[\].#*$><+~=|^:(),"'`]/g,"-").replace(/--+/g,"-"),o=(n[r]||0)+1;return n[r]=o,r+"-"+e.generateName(r+o)};return function n(o,i,a,s){var l=ee.isPrototypeOf(o);if(!c(o)&&l)return n(o.target,i,o.rules.concat(a),o);var u=i.displayName,p=void 0===u?c(o)?"styled."+o:"Styled("+o.displayName+")":u,h=i.componentId,d=void 0===h?r(i.displayName||"sc"):h,f=i.attrs,g=void 0===f?{}:f,m=new e(a,d),y=s||ee,v=function(e){function n(){C(this,n);var e=w(this,(n.__proto__||Object.getPrototypeOf(n)).call(this));return e.attrs={},e.state={theme:null,generatedClassName:""},e}return S(n,e),x(n,[{key:"buildExecutionContext",value:function(e,t){var n=A({},t,{theme:e});return this.attrs=Object.keys(g).reduce(function(e,t){return A({},e,k({},t,"function"==typeof g[t]?g[t](n):g[t]))},{}),A({},n,this.attrs)}},{key:"generateAndInjectStyles",value:function(e,t){var n=this.buildExecutionContext(e,t);return m.generateAndInjectStyles(n)}},{key:"componentWillMount",value:function(){var e=this;if(this.context[J]){var t=this.context[J];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=e.theme||n.theme;return{theme:r,generatedClassName:t.generateAndInjectStyles(r,e)}})}},{key:"componentWillUnmount",value:function(){this.unsubscribe&&this.unsubscribe()}},{key:"render",value:function(){var e=this,n=this.props,r=n.className,i=n.children,a=n.innerRef,s=this.state.generatedClassName,l=A({},this.attrs);return Object.keys(this.props).filter(function(e){return!c(o)||X(e)}).forEach(function(t){l[t]=e.props[t]}),l.className=[r,d,this.attrs.className,s].filter(function(e){return e}).join(" "),a&&(l.ref=a,delete l.innerRef),t.createElement(o,l,i)}}]),n}(y);return v.displayName=p,v.styledComponentId=d,v.target=o,v.rules=a,v}},ne=function e(t,n){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},o=function(e){for(var o=arguments.length,i=Array(o>1?o-1:0),a=1;a<o;a++)i[a-1]=arguments[a];return t(n,r,M.apply(void 0,[e].concat(i)))};return o.withConfig=function(o){return e(t,n,A({},r,o))},o.attrs=function(o){return e(t,n,A({},r,{attrs:o}))},o},re=["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"],oe=function(e){var t=function(t){return ne(e,t)};return re.forEach(function(e){t[e]=t(e)}),t},ie=a(function(e,t){function n(e,t){for(var n=1540483477,a=t^e.length,s=e.length,l=0;s>=4;){var u=r(e,l);u=i(u,n),u^=u>>>24,u=i(u,n),a=i(a,n),a^=u,l+=4,s-=4}switch(s){case 3:a^=o(e,l),a^=e.charCodeAt(l+2)<<16,a=i(a,n);break;case 2:a^=o(e,l),a=i(a,n);break;case 1:a^=e.charCodeAt(l),a=i(a,n)}return a^=a>>>13,a=i(a,n),a^=a>>>15,a>>>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}),ae=i(ie),se=function(e){return e.replace(/\s|\\n/g,"")},le=function(e){return function(t){for(var n=arguments.length,r=Array(n>1?n-1:0),o=1;o<n;o++)r[o-1]=arguments[o];var i=M.apply(void 0,[t].concat(r)),a=ae(se(JSON.stringify(i))),s=e(a);return new z(i,"@keyframes "+s).generateAndInject(),s}},ue=function(e){var t={};return function(){function n(e,t){C(this,n),this.rules=e,this.componentId=t,W.injected||W.inject(),this.insertedRule=W.insert("."+t+" {}")}return x(n,[{key:"generateAndInjectStyles",value:function(n){var r=R(this.rules,n).join("").replace(/^\s*\/\/.*$/gm,""),o=ae(this.componentId+r);if(!t[o]){var i=e(o);t[o]=i;var a=F("."+i,r,!1,!1);this.insertedRule.appendRule(a)}return t[o]}}],[{key:"generateName",value:function(t){return e(ae(t))}}]),n}()},ce=function(e){var t,n;return n=t=function(t){function n(){var e,t,r,o;C(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 S(n,t),x(n,[{key:"componentWillMount",value:function(){var e=this;if(!this.context[J])throw new Error("[withTheme] Please use ThemeProvider to be able to use withTheme");var t=this.context[J];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 h.createElement(e,A({theme:t},this.props))}}]),n}(h.Component),t.contextTypes=k({},J,h.PropTypes.func),n},pe=le(f),he=oe(te(ue(f)));e.default=he,e.css=M,e.keyframes=pe,e.injectGlobal=B,e.ThemeProvider=Q,e.withTheme=ce,e.styleSheet=W,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(m,"-$1").toLowerCase()}function r(e){return v(e).replace(b,"-ms-")}function o(e){return R(e)===!0&&"[object Object]"===Object.prototype.toString.call(e)}function i(e){return e&&e.__esModule?e.default:e}function a(e,t){return t={exports:{}},e(t,t.exports),t.exports}function s(e){return e[e.length-1]}function u(e){for(var t=0;t<document.styleSheets.length;t++)if(document.styleSheets[t].ownerNode===e)return document.styleSheets[t]}function l(){var e=document.createElement("style");return e.type="text/css",e.appendChild(document.createTextNode("")),(document.head||document.getElementsByTagName("head")[0]).appendChild(e),e}function c(e){return"string"==typeof e}function p(e){var t=ne.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 h="default"in t?t.default:t,d="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ".split(""),f=function e(t){var n=d[t%d.length];return t>d.length?""+e(Math.floor(t/d.length))+n:n},g=function(e,t){return t.reduce(function(t,n,r){return t.concat(n,e[r+1])},[e[0]])},m=/([A-Z])/g,y=n,v=y,b=/^ms-/,C=r,x="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},k=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},A=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}}(),S=function(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e},w=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},T=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)},O=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},E=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},j=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)},P=function(e){return null!=e&&"object"===("undefined"==typeof e?"undefined":x(e))&&!Array.isArray(e)},R=P,M=function(e){var t,n;return o(e)!==!1&&(t=e.constructor,"function"==typeof t&&(n=t.prototype,o(n)!==!1&&n.hasOwnProperty("isPrototypeOf")!==!1))},D=function e(t,n){var r=Object.keys(t).map(function(n){return M(t[n])?e(t[n],n):C(n)+": "+t[n]+";"}).join(" ");return n?n+" {\n  "+r+"\n}":r},F=function e(t,n){return t.reduce(function(t,r){return void 0===r||null===r||r===!1||""===r?t:Array.isArray(r)?[].concat(j(t),j(e(r,n))):r.hasOwnProperty("styledComponentId")?[].concat(j(t),["."+r.styledComponentId]):"function"==typeof r?n?t.concat.apply(t,j(e([r(n)],n))):t.concat(r):t.concat(M(r)?D(r):r.toString())},[])},L=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 F(g(e,n))},I="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},_=a(function(e,t){!function(n){"object"===("undefined"==typeof t?"undefined":x(t))&&"undefined"!=typeof e?e.exports=n(I):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=("undefined"==typeof i?"undefined":x(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 y,v,b,C,k,A,S,w,T,O,E,j,P,R,M,D,F,L,I,_,N="-moz-",U="-ms-",W="-webkit-",z="",B="",H="",q=0,$=0,V=0,K=0,X=0,G=0,Y=0,Z=0,J=0,Q=0,ee=0,te=0,ne=0,re=0,oe=0;f&&(A=i(0,n,ue,se,p,0),null!=A&&(n=A),D="");for(var ie=0,ae=0,se=0,ue=1,le=n.length,ce="";ie<le;){if(q=n.charCodeAt(ie),0!==Z||0!==G||0!==ne||123!==q&&125!==q&&59!==q)if(13===q||10===q)1===oe?(ne=oe=0,z=z.substring(0,z.indexOf("//"))):f&&0===ne&&0!==(m=(D=D.trim()).length)&&47!==D.charCodeAt(0)&&(0!==z.length&&(A=i(7,D,ue,se,p,ce.length),null!=A&&(z=z.replace(new RegExp(D+"$"),A))),D=""),se=0,ue++;else{if(9!==q)switch(s=n.charAt(ie),f&&0===ne&&(D+=s),z+=s,q){case 34:0===ne&&(Z=34===Z?0:39===Z?39:34);break;case 39:0===ne&&(Z=39===Z?0:34===Z?34:39);break;case 40:0===Z&&0===ne&&(G=1);break;case 41:0===Z&&0===ne&&(G=0);break;case 47:0===Z&&0===G&&(a=n.charCodeAt(ie-1),0===re&&47===a?ne=oe=1:42===a&&(ne=re=0,z=z.substring(0,z.indexOf("/*"))));break;case 42:0===Z&&0===G&&0===oe&&0===re&&47===n.charCodeAt(ie-1)&&(ne=re=1)}se++}else{if(z+=n.charAt(ie),f&&125!==q&&f&&(A=123===q?i(1,z.substring(0,z.length-1).trim(),ue,se,p,ce.length):i(2,z,ue,se,p,ce.length),null!=A&&(z=123===q?A+" {":A)),T=z.charCodeAt(0),32===T&&(T=(z=z.trim()).charCodeAt(0)),O=z.charCodeAt(1),E=z.charCodeAt(2),64===T){if(1===ee&&0!==H.length&&(ee=0,H=p+" {"+H+"}",f&&(A=i(4,H,ue,se,p,ce.length),null!=A&&(H=A)),ce+=H,H=""),59!==q)if(107===O||103===O)107===O?(P=z.substring(1,11)+(0===J?l:"")+z.substring(11),z="@"+W+P,d=1):(J=1,z="");else if(109===O)if(o===!0&&105===E)void 0===I&&(I={}),P=(_=z.substring(7,z.indexOf("{"))+" ").trim(),_=_.substring(0,_.indexOf(" ")).trim(),I[_]={key:P.trim(),body:""},d=3,z="",P="";else if(101===E)if(0!==ae){for(ie++,se++,void 0===k&&(k=""),A="",v="",b=S.split(t.regex.split),K=1;ie<le&&(a=n.charCodeAt(ie),123===a?K++:125===a&&K--,0!==K);)v+=n.charAt(ie++),se=13===a||10===a?(ue++,0):se+1;m=b.length;for(var pe=0;pe<m;pe++)e=b[pe],A+=t((pe===m-1?e.substring(0,e.length-1):e).trim(),v,r,o,i);k+=z+A+"}",z="",Y=1,d=4}else d=2,M=z,z="";else d=6;if(105===O){if(o===!0&&110===E)if(z=z.substring(9,z.length-1),w=z.indexOf("("),w!==-1){var he=z.substring(0,w),de=I[he],fe=z.substring(he.length+1,z.length-1).split(","),ge=de.key.replace(he,"").replace(/\(|\)/g,"").trim().split(",");z=de.body,m=fe.length;for(var pe=0;pe<m;pe++){var me=ge[pe].trim();void 0!==me&&(z=z.replace(new RegExp("var\\(~~"+me+"\\)","g"),fe[pe].trim()))}n+=z,le+=z.length,z=""}else z=I[z].body,0===ae&&(n+=z,le+=z.length,z="");else if(109===E&&f){var ye=/@import.*?(["'`][^\.\n\r]*?["'`];|["'`][^:\r\n]*?\.[^c].*?["'`])/g.exec(z);null!==ye&&(z=i(5,ye[1].replace(/['"; ]/g,""),ue,se,p,ce.length)||"",z&&(n=n.substring(0,ie+1)+z+n.substring(ie+1),le+=z.length),z="")}}else 4!==d&&59!==q&&(107!==O&&103!==O&&109!==O&&(d=5),V=-1,$++)}else if(o===!0&&126===T&&126===O&&59===q&&(y=z.indexOf(":"))!==-1)void 0===L&&(F=[],L=0),F[L++]=[z.substring(0,y),z.substring(y+1,z.length-1).trim()],z="";else{if(97===T&&110===O&&105===E){if(z=z.substring(0,z.length-1),y=z.indexOf(":")+1,C=z.substring(0,y),r===!0&&45!==z.charCodeAt(9)){var ve=z.substring(y).trim().split(",");m=ve.length;for(var be=0;be<m;be++){for(var Ce=ve[be],xe=Ce.split(" "),ke=0,Ae=xe.length;ke<Ae;ke++){var Se=xe[ke].trim(),we=Se.charCodeAt(0),Te=Se.charCodeAt(2),Oe=Se.length,Ee=Se.charCodeAt(Oe-1);41===Ee||0===Oe||105===we&&102===Te&&101===Ee&&8===Oe||108===we&&110===Te&&114===Ee&&6===Oe||97===we&&116===Te&&101===Ee&&(9===Oe||17===Oe)||110===we&&114===Te&&108===Ee&&6===Oe||98===we&&99===Te&&115===Ee&&9===Oe||102===we&&114===Te&&115===Ee&&8===Oe||98===we&&116===Te&&104===Ee&&4===Oe||110===we&&110===Te&&101===Ee&&4===Oe||114===we&&110===Te&&103===Ee&&7===Oe||112===we&&117===Te&&100===Ee&&6===Oe||114===we&&118===Te&&100===Ee&&8===Oe||115===we&&101===Te&&(116===Ee&&10===Oe||100===Ee&&8===Oe)||101===we&&115===Te&&(101===Ee&&4===Oe||(11===Oe||7===Oe||8===Oe)&&45===Se.charCodeAt(4))||!isNaN(parseFloat(Se))||Se.indexOf("(")!==-1||(xe[ke]=l+Se)}C+=(0===be?"":",")+xe.join(" ").trim()}}else C+=(110!==z.charCodeAt(10)?"":l)+z.substring(y).trim().trim();z=W+C+";"+C+";"}else if(97===T&&112===O&&112===E)z=W+z+N+z+z;else if(100===T&&105===O&&115===E)(w=z.indexOf("flex"))!==-1&&(A=101===z.charCodeAt(w-2)?"inline-":"",z="display: "+W+A+"box;display: "+W+A+"flex;display: "+U+"flexbox;display: "+A+"flex"+(125===q?"}":";"));else if(116===T&&114===O&&97===E)z=W+z+(102===z.charCodeAt(5)?U+z:"")+z;else if(104===T&&121===O&&112===E||117===T&&115===O&&101===E)z=W+z+N+z+U+z+z;else if(102===T&&108===O&&101===E)z=W+z+U+z+z;else if(111===T&&114===O&&100===E)z=W+z+U+"flex-"+z+z;else if(97===T&&108===O&&105===E&&45===z.charCodeAt(5))switch(z.charCodeAt(6)){case 105:A=z.replace("-items",""),z=W+"box-"+A+U+"flex-"+A+z;break;case 115:z=U+"flex-item-"+z.replace("-self","")+z;break;default:z=U+"flex-line-pack"+z.replace("align-content","")+z}else if(99===T&&117===O&&114===E&&null!==/zoo|gra/.exec(z))z=z.replace(/: +/g,": "+W)+z.replace(/: +/g,": "+N)+z;else if(123===q)if(ae++,1===ee&&0!==H.length&&(ee=0,H=p+" {"+H+"}",f&&(A=i(4,H,ue,se,p,ce.length),null!=A&&(H=A)),ce+=H,H=""),2===ae){ie++,se++,v="";var je=z.substring(0,z.length-1).split(t.regex.split),Pe=S.substring(0,S.length-1).split(t.regex.split);for(K=1;ie<le&&(a=n.charCodeAt(ie),123===a?K++:125===a&&K--,0!==K);)v+=n.charAt(ie++),se=13===a||10===a?(ue++,0):se+1;m=Pe.length;for(var be=0;be<m;be++){A=Pe[be],w=A.indexOf(p),Pe[be]="";for(var ke=0,Ae=je.length;ke<Ae;ke++)e=w>0?":global()"+A.trim():A.replace(p,"&").trim(),j=je[ke].trim(),e=j.indexOf(" &")>0?j.replace("&","").trim()+" "+e:null!==t.regex.global[0].exec(j)?j:e+" "+j,Pe[be]+=e.replace(/ +&/,"").trim()+(ke===Ae-1?"":",")}void 0===R&&(R=""),R+="\n"+Pe.join(",").replace(t.regex.global[1]," $1")+" {"+v+"}",X=1,z="",ae--}else if(0!==J||0!==$&&2!==d)S=z;else{b=z.split(t.regex.split),C="",m=b.length;for(var be=0;be<m;be++){if(a=(e=b[be]).charCodeAt(0),32===a&&(a=(e=e.trim()).charCodeAt(0)),38===a)e=58===a&&103===e.charCodeAt(2)?e.substring(1).replace(t.regex.global[0],"$1").replace(t.regex.and,p):p+e.substring(1).replace(t.regex.and,p);else if((w=e.indexOf(" &"))>0&&(a=58,Q=2,0!==e.indexOf(":global()")&&(e=":global("+e.substring(0,w)+")"+e.substring(w))),58===a){var Re=e.charCodeAt(1);if(104===Re&&116===e.charCodeAt(4)){var Me=e.charCodeAt(5);e=40===Me?p+e.replace(/:host\((.*)\)/g,"$1").replace(t.regex.and,p):45===Me?e.replace(/:host-context\((.*)\)/g,"$1 "+p).replace(t.regex.and,p):p+e.substring(5)}else 103===Re?(2!==Q&&(Q=1),e=e.replace(t.regex.global[0],"$1").replace(t.regex.and,p)):e=p+e}else e=p+" "+e;f&&(A=i(1.5,be===m-1?e.substring(0,e.length-1).trim():e,ue,se,p,ce.length),null!=A&&(e=be===m-1?A+" {":A)),C+=0===be?e:","+e}z=C,1!==Q?S=C:(S=":global()"+C,Q=0)}125===q&&(0!==ae&&ae--,0===ae&&1===X&&(n=n.substring(0,ie+1)+R+n.substring(ie+1),le+=R.length,R="",X=0,V++),125!==T&&32===z.charCodeAt(z.length-2)&&(z=z.substring(0,z.length-1).trim()+"}")),0!==$?(125===q?V++:123===q&&0!==V&&V--,1!==te||123!==q&&0!==V||0===H.length||(te=0,z=p+" {"+H+"}"+z,H=""),0===V?(0===d?(J=0,z=""):1===d?(z="}@"+P+"}",P=""):3===d&&(I[_].body=P,_="",z="",P=""),d=0,V--,$--):1===d||3===d?(P+=z,3===d&&(z="")):2===d&&0===ae&&(125!==q&&(0===te&&(H=""),H+=z,z=""),te=1)):0===ae&&125!==q&&(ee=1,H=void 0===H?z:H+z,z="")}B+=z,125!==q||0!==d&&2!==d&&4!==d||(a=B.charCodeAt(B.length-2),4===d&&(d=0),void 0!==k&&0!==k.length&&(B=123===a?k:B+k,k="",a=B.charCodeAt(B.length-2)),123!==a&&(f&&(A=i(3,B,ue,se,p,ce.length),null!=A&&(B=A)),void 0!==M?(M+=B,125===M.charCodeAt(M.length-2)&&(ce+=M,M=void 0)):ce+=B),B=""),z=""}ie++}if(void 0!==H&&0!==H.length&&(H=p+" {"+H+"}",f&&(A=i(4,H,ue,se,p,ce.length),null!=A&&(H=A)),ce+=H),o&&void 0!==F)for(var pe=0;pe<L;pe++)ce=ce.replace(new RegExp("var\\("+F[pe][0]+"\\)","g"),F[pe][1]);return f&&(A=i(6,ce,ue,se,p,ce.length),null!=A&&(ce=A)),ce}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=/[ \t\r\n]*,[ \t\r\n]*/g,c=function(e,t){var r=t.replace(l,",").split(","),o=n.apply(null,r);return null!=o?o:e};r[o]=function(e,t){if(6===e)return t.replace(u,c)}}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})}),N="undefined"!=typeof document,U=function(e){return"development"===e||!e}("production"),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;k(this,e),this.isSpeedy=r,this.sheet=void 0,this.tags=[],this.maxLength=i,this.ctr=0}return A(e,[{key:"inject",value:function(){var e=this;if(this.injected)throw new Error("already injected stylesheet!");N?(this.tags[0]=l(),this.sheet=u(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=this,n=void 0;return N?this.isSpeedy&&this.sheet.insertRule?this._insert(e):!function(){var r=document.createTextNode(e);s(t.tags).appendChild(r),n={textNode:r,appendRule:function(e){return r.appendData(e)}},t.isSpeedy||(t.sheet=u(s(t.tags)))}():n=this.sheet.insertRule(e),this.ctr++,N&&this.ctr%this.maxLength===0&&(this.tags.push(l()),this.sheet=u(s(this.tags))),n}},{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(j(Array.from(u(t).cssRules))))}),e}}]),e}(),H=function(){function e(){k(this,e),this.styleSheet=new B({speedy:!1,maxLength:40})}return A(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:"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,$=function(){function e(t,n){k(this,e),this.rules=t,this.selector=n}return A(e,[{key:"generateAndInject",value:function(){q.injected||q.inject();var e=F(this.rules).join(""),t=this.selector?this.selector+" { "+e+" }":e,n=_("",t,!1,!1);q.insert(n)}}]),e}(),V=function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];var o=new $(L.apply(void 0,[e].concat(n)));o.generateAndInject()},K={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},X={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},G={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},Y=":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",Z=Y+"\\-.0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040",J=RegExp.prototype.test.bind(new RegExp("^(data|aria)-["+Z+"]*$")),Q={}.hasOwnProperty,ee=function(e){return Q.call(X,e)||Q.call(G,e)||J(e.toLowerCase())||Q.call(K,e)},te=p,ne=Object.prototype.toString,re=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})}}}},oe="__styled-components__",ie=function(e){function t(){k(this,t);var e=E(this,(t.__proto__||Object.getPrototypeOf(t)).call(this));return e.getTheme=e.getTheme.bind(e),e}return T(t,e),A(t,[{key:"componentWillMount",value:function(){var e=this;if(this.context[oe]){var t=this.context[oe];this.unsubscribeToOuter=t(function(t){e.outerTheme=t})}this.broadcast=re(this.getTheme())}},{key:"getChildContext",value:function(){return w({},this.context,S({},oe,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[oe]&&this.unsubscribeToOuter()}},{key:"getTheme",value:function(e){var t=e||this.props.theme;if(te(t)){var n=t(this.outerTheme);if(!M(n))throw new Error("[ThemeProvider] Please return an object from your theme function, i.e. theme={() => ({})}!");return n}if(!M(t))throw new Error("[ThemeProvider] Please make your theme prop a plain object");return w({},this.outerTheme,t)}},{key:"render",value:function(){return this.props.children?h.Children.only(this.props.children):null}}]),t}(t.Component);ie.childContextTypes=S({},oe,t.PropTypes.func.isRequired),ie.contextTypes=S({},oe,t.PropTypes.func);var ae=function(e){function t(){return k(this,t),E(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return T(t,e),t}(t.Component);ae.contextTypes=S({},oe,t.PropTypes.func);var se=function e(t,n){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},o=function e(o){for(var i=arguments.length,a=Array(i>1?i-1:0),s=1;s<i;s++)a[s-1]=arguments[s];return t(n,r,L.apply(void 0,[o].concat(a)),e)};return o.withConfig=function(o){return e(t,n,w({},r,o))},o.attrs=function(o){return e(t,n,w({},r,{attrs:w({},r.attrs||{},o)}))},o},ue=function(e){var n={},r=function(t){var r=t.replace(/[[\].#*$><+~=|^:(),"'`]/g,"-").replace(/--+/g,"-"),o=(n[r]||0)+1;n[r]=o;var i=e.generateName(r+o);return r+"-"+i},o=function n(o,i,a){var s=i.displayName,u=void 0===s?c(o)?"styled."+o:"Styled("+o.displayName+")":s,l=i.componentId,p=void 0===l?r(i.displayName||"sc"):l,h=i.attrs,d=void 0===h?{}:h,f=i.rules,g=void 0===f?[]:f,m=i.ParentComponent,y=void 0===m?ae:m,v=new e([].concat(j(g),j(a)),p);"undefined"!=typeof process,1;var b=function(e){function n(){k(this,n);var e=E(this,(n.__proto__||Object.getPrototypeOf(n)).call(this));return e.attrs={},e.state={theme:null,generatedClassName:""},e}return T(n,e),A(n,[{key:"buildExecutionContext",value:function(e,t){var n=w({},t,{theme:e});return this.attrs=Object.keys(d).reduce(function(e,t){return w({},e,S({},t,"function"==typeof d[t]?d[t](n):d[t]))},{}),w({},n,this.attrs)}},{key:"generateAndInjectStyles",value:function(e,t){var n=this.buildExecutionContext(e,t);return v.generateAndInjectStyles(n)}},{key:"componentWillMount",value:function(){var e=this;if(this.context[oe]){var t=this.context[oe];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=e.theme||n.theme,o=t.generateAndInjectStyles(r,e);return{theme:r,generatedClassName:o}})}},{key:"componentWillUnmount",value:function(){this.unsubscribe&&this.unsubscribe()}},{key:"render",value:function(){var e=this,n=this.props,r=n.className,i=n.children,a=n.innerRef,s=this.state.generatedClassName,u=w({},this.attrs);return Object.keys(this.props).filter(function(e){return!c(o)||ee(e)}).forEach(function(t){u[t]=e.props[t]}),u.className=[r,p,this.attrs.className,s].filter(function(e){return e}).join(" "),a&&(u.ref=a,delete u.innerRef),"undefined"!=typeof process,1,t.createElement(o,u,i)}}],[{key:"extend",get:function(){return n.extendWith(o)}}]),n}(y);return b.displayName=u,b.styledComponentId=p,b.extendWith=function(e){var t=(i.displayName,i.componentId,O(i,["displayName","componentId"]));return se(n,e,w({},t,{rules:a,ParentComponent:b}))},b};return o},le=["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"],ce=function(e){var t=function(t){return se(e,t)};return le.forEach(function(e){t[e]=t(e)}),t},pe=a(function(e,t){function n(e,t){for(var n=1540483477,a=24,s=t^e.length,u=e.length,l=0;u>=4;){var c=r(e,l);c=i(c,n),c^=c>>>a,c=i(c,n),s=i(s,n),s^=c,l+=4,u-=4}switch(u){case 3:s^=o(e,l),s^=e.charCodeAt(l+2)<<16,s=i(s,n);break;case 2:s^=o(e,l),s=i(s,n);break;case 1:s^=e.charCodeAt(l),s=i(s,n)}return s^=s>>>13,s=i(s,n),s^=s>>>15,s>>>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){e|=0,t|=0;var n=65535&e,r=e>>>16,o=n*t+((r*t&65535)<<16)|0;return o}Object.defineProperty(t,"__esModule",{value:!0}),t.default=n}),he=i(pe),de=function(e){return e.replace(/\s|\\n/g,"")},fe=function(e){return function(t){for(var n=arguments.length,r=Array(n>1?n-1:0),o=1;o<n;o++)r[o-1]=arguments[o];var i=L.apply(void 0,[t].concat(r)),a=he(de(JSON.stringify(i))),s=e(a),u=new $(i,"@keyframes "+s);return u.generateAndInject(),s}},ge=function(e){var t={},n=function(){function n(e,t){k(this,n),this.rules=e,this.componentId=t,q.injected||q.inject(),this.insertedRule=q.insert("."+t+" {}")}return A(n,[{key:"generateAndInjectStyles",value:function(n){var r=F(this.rules,n).join("").replace(/^\s*\/\/.*$/gm,""),o=he(this.componentId+r);if(!t[o]){var i=e(o);t[o]=i;var a=_("."+i,r,!1,!1);this.insertedRule.appendRule(a)}return t[o]}}],[{key:"generateName",value:function(t){return e(he(t))}}]),n}();return n},me=function(e){var t,n;return n=t=function(t){function n(){var e,t,r,o;k(this,n);for(var i=arguments.length,a=Array(i),s=0;s<i;s++)a[s]=arguments[s];return t=r=E(this,(e=n.__proto__||Object.getPrototypeOf(n)).call.apply(e,[this].concat(a))),r.state={},o=t,E(r,o)}return T(n,t),A(n,[{key:"componentWillMount",value:function(){var e=this;if(!this.context[oe])throw new Error("[withTheme] Please use ThemeProvider to be able to use withTheme");var t=this.context[oe];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 h.createElement(e,w({theme:t},this.props))}}]),n}(h.Component),t.contextTypes=S({},oe,h.PropTypes.func),n},ye=fe(f),ve=ce(ue(ge(f)));e.default=ve,e.css=L,e.keyframes=ye,e.injectGlobal=V,e.ThemeProvider=ie,e.withTheme=me,e.styleSheet=q,Object.defineProperty(e,"__esModule",{value:!0})});

lib/constructors/constructWithOptions.js

@@ -28,3 +28,3 @@ 'use strict';
 
-    return componentConstructor(tag, options, _css2.default.apply(undefined, [strings].concat(interpolations)));
+    return componentConstructor(tag, options, _css2.default.apply(undefined, [strings].concat(interpolations)), templateFunction);
   };
@@ -37,3 +37,4 @@
   templateFunction.attrs = function (attrs) {
-    return constructWithOptions(componentConstructor, tag, _extends({}, options, { attrs: attrs }));
+    return constructWithOptions(componentConstructor, tag, _extends({}, options, {
+      attrs: _extends({}, options.attrs || {}, attrs) }));
   };
@@ -40,0 +41,0 @@

lib/models/InlineStyle.js

@@ -59,21 +59,23 @@ 'use strict';
       if (!generated[hash]) {
-        var root = (0, _parse2.default)(flatCSS);
-        var declPairs = [];
-        root.each(function (node) {
-          if (node.type === 'decl') {
-            declPairs.push([node.prop, node.value]);
-          } else {
-            /* eslint-disable no-console */
-            console.warn('Node of type ' + node.type + ' not supported as an inline style');
-          }
-        });
-        // RN currently does not support differing values for the corner radii of Image
-        // components (but does for View). It is almost impossible to tell whether we'll have
-        // support, so we'll just disable multiple values here.
-        // https://github.com/styled-components/css-to-react-native/issues/11
-        var styleObject = (0, _cssToReactNative2.default)(declPairs, ['borderRadius', 'borderWidth', 'borderColor', 'borderStyle']);
-        var styles = _reactNative.StyleSheet.create({
-          generated: styleObject
-        });
-        generated[hash] = styles.generated;
+        (function () {
+          var root = (0, _parse2.default)(flatCSS);
+          var declPairs = [];
+          root.each(function (node) {
+            if (node.type === 'decl') {
+              declPairs.push([node.prop, node.value]);
+            } else {
+              /* eslint-disable no-console */
+              console.warn('Node of type ' + node.type + ' not supported as an inline style');
+            }
+          });
+          // RN currently does not support differing values for the corner radii of Image
+          // components (but does for View). It is almost impossible to tell whether we'll have
+          // support, so we'll just disable multiple values here.
+          // https://github.com/styled-components/css-to-react-native/issues/11
+          var styleObject = (0, _cssToReactNative2.default)(declPairs, ['borderRadius', 'borderWidth', 'borderColor', 'borderStyle']);
+          var styles = _reactNative.StyleSheet.create({
+            generated: styleObject
+          });
+          generated[hash] = styles.generated;
+        })();
       }
@@ -80,0 +82,0 @@ return generated[hash];

lib/models/StyledComponent.js

@@ -13,2 +13,6 @@ 'use strict';
 
+var _createWarnTooManyClasses = require('../utils/createWarnTooManyClasses');
+
+var _createWarnTooManyClasses2 = _interopRequireDefault(_createWarnTooManyClasses);
+
 var _validAttr = require('../utils/validAttr');
@@ -28,4 +32,10 @@
 
+var _constructWithOptions = require('../constructors/constructWithOptions');
+
+var _constructWithOptions2 = _interopRequireDefault(_constructWithOptions);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 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; }
@@ -39,2 +49,4 @@
 
+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;
@@ -58,9 +70,3 @@
 
-  var createStyledComponent = function createStyledComponent(target, options, rules, parent) {
-    /* Handle styled(OtherStyledComponent) differently */
-    var isStyledComponent = _AbstractStyledComponent2.default.isPrototypeOf(target);
-    if (!(0, _isTag2.default)(target) && isStyledComponent) {
-      return createStyledComponent(target.target, options, target.rules.concat(rules), target);
-    }
-
+  var createStyledComponent = function createStyledComponent(target, options, rules) {
     var _options$displayName = options.displayName,
@@ -71,7 +77,15 @@ displayName = _options$displayName === undefined ? (0, _isTag2.default)(target) ? 'styled.' + target : 'Styled(' + target.displayName + ')' : _options$displayName,
         _options$attrs = options.attrs,
-        attrs = _options$attrs === undefined ? {} : _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 componentStyle = new ComponentStyle(rules, componentId);
-    var ParentComponent = parent || _AbstractStyledComponent2.default;
+    var componentStyle = new ComponentStyle([].concat(_toConsumableArray(extendingRules), _toConsumableArray(rules)), componentId);
 
+    var warnTooManyClasses = void 0;
+    if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production') {
+      warnTooManyClasses = (0, _createWarnTooManyClasses2.default)();
+    }
+
     var StyledComponent = function (_ParentComponent) {
@@ -182,4 +196,12 @@ _inherits(StyledComponent, _ParentComponent);
 
+          if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && generatedClassName) {
+            warnTooManyClasses(generatedClassName, StyledComponent.displayName);
+          }
           return (0, _react.createElement)(target, propsForElement, children);
         }
+      }], [{
+        key: 'extend',
+        get: function get() {
+          return StyledComponent.extendWith(target);
+        }
       }]);
@@ -192,5 +214,10 @@
     StyledComponent.styledComponentId = componentId;
-    StyledComponent.target = target;
-    StyledComponent.rules = rules;
+    StyledComponent.extendWith = function (tag) {
+      var _ = options.displayName,
+          __ = options.componentId,
+          optionsToCopy = _objectWithoutProperties(options, ['displayName', 'componentId']);
 
+      return (0, _constructWithOptions2.default)(createStyledComponent, tag, _extends({}, optionsToCopy, { rules: rules, ParentComponent: StyledComponent }));
+    };
+
     return StyledComponent;
@@ -197,0 +224,0 @@ };

lib/models/StyledNativeComponent.js

@@ -27,4 +27,10 @@ 'use strict';
 
+var _constructWithOptions = require('../constructors/constructWithOptions');
+
+var _constructWithOptions2 = _interopRequireDefault(_constructWithOptions);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -36,2 +42,4 @@
 
+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;
@@ -43,17 +51,12 @@
 
-var createStyledNativeComponent = function createStyledNativeComponent(target, options, rules, parent) {
-  /* Handle styled(OtherStyledNativeComponent) differently */
-  var isStyledNativeComponent = _AbstractStyledComponent2.default.isPrototypeOf(target);
-  if (isStyledNativeComponent && !(0, _isTag2.default)(target)) {
-    return createStyledNativeComponent(target.target, options, target.rules.concat(rules), target);
-  }
-
+var createStyledNativeComponent = function createStyledNativeComponent(target, options, rules) {
   var _options$displayName = options.displayName,
-      displayName = _options$displayName === undefined ? (0, _isTag2.default)(target) ? 'styled.' + target : 'Styled(' + target.displayName + ')' : _options$displayName;
+      displayName = _options$displayName === undefined ? (0, _isTag2.default)(target) ? 'styled.' + target : 'Styled(' + target.displayName + ')' : _options$displayName,
+      _options$rules = options.rules,
+      extendingRules = _options$rules === undefined ? [] : _options$rules,
+      _options$ParentCompon = options.ParentComponent,
+      ParentComponent = _options$ParentCompon === undefined ? _AbstractStyledComponent2.default : _options$ParentCompon;
 
-  var inlineStyle = new _InlineStyle2.default(rules);
-  var ParentComponent = parent || _AbstractStyledComponent2.default;
+  var inlineStyle = new _InlineStyle2.default([].concat(_toConsumableArray(extendingRules), _toConsumableArray(rules)));
 
-  // $FlowFixMe need to convince flow that ParentComponent can't be string here
-
   var StyledNativeComponent = function (_ParentComponent) {
@@ -146,2 +149,7 @@ _inherits(StyledNativeComponent, _ParentComponent);
       }
+    }], [{
+      key: 'extend',
+      get: function get() {
+        return StyledNativeComponent.extendWith(target);
+      }
     }]);
@@ -152,9 +160,10 @@
 
-  /* Used for inheritance */
+  StyledNativeComponent.displayName = displayName;
+  StyledNativeComponent.extendWith = function (tag) {
+    var _ = options.displayName,
+        optionsToCopy = _objectWithoutProperties(options, ['displayName']);
 
+    return (0, _constructWithOptions2.default)(createStyledNativeComponent, tag, _extends({}, optionsToCopy, { rules: rules, ParentComponent: StyledNativeComponent }));
+  };
 
-  StyledNativeComponent.rules = rules;
-  StyledNativeComponent.target = target;
-  StyledNativeComponent.displayName = displayName;
-
   return StyledNativeComponent;
@@ -161,0 +170,0 @@ };

lib/test/attrs.test.js

@@ -97,2 +97,23 @@ 'use strict';
 
+  it('merge attrs', function () {
+    var Comp = styled.button.attrs({
+      type: 'button',
+      tabIndex: 0
+    }).attrs({
+      type: 'submit'
+    })(_templateObject);
+    (0, _expect2.default)((0, _enzyme.shallow)(_react2.default.createElement(Comp, null)).html()).toEqual('<button type="submit" tabindex="0" class="sc-a b"></button>');
+  });
+
+  it('merge attrs when inheriting SC', function () {
+    var Parent = styled.button.attrs({
+      type: 'button',
+      tabIndex: 0
+    })(_templateObject);
+    var Child = Parent.extend.attrs({
+      type: 'submit'
+    })(_templateObject);
+    (0, _expect2.default)((0, _enzyme.shallow)(_react2.default.createElement(Child, null)).html()).toEqual('<button type="submit" tabindex="0" class="sc-b c"></button>');
+  });
+
   it('pass attrs to style block', function () {
@@ -99,0 +120,0 @@ /* Would be a React Router Link in IRL */

lib/test/extending.test.js

@@ -40,3 +40,3 @@ 'use strict';
     var Parent = styled.div(_templateObject);
-    var Child = styled(Parent)(_templateObject);
+    var Child = Parent.extend(_templateObject);
 
@@ -51,3 +51,3 @@ (0, _enzyme.shallow)(_react2.default.createElement(Parent, null));
     var Parent = styled.div(_templateObject2);
-    var Child = styled(Parent)(_templateObject);
+    var Child = Parent.extend(_templateObject);
 
@@ -62,3 +62,3 @@ (0, _enzyme.shallow)(_react2.default.createElement(Parent, null));
     var Parent = styled.div(_templateObject);
-    var Child = styled(Parent)(_templateObject2);
+    var Child = Parent.extend(_templateObject2);
 
@@ -73,3 +73,3 @@ (0, _enzyme.shallow)(_react2.default.createElement(Parent, null));
     var Parent = styled.div(_templateObject2);
-    var Child = styled(Parent)(_templateObject3);
+    var Child = Parent.extend(_templateObject3);
 
@@ -83,3 +83,3 @@ (0, _enzyme.shallow)(_react2.default.createElement(Child, null));
     var Parent = styled.div(_templateObject2);
-    var Child = styled(Parent)(_templateObject3);
+    var Child = Parent.extend(_templateObject3);
 
@@ -94,3 +94,3 @@ (0, _enzyme.shallow)(_react2.default.createElement(Parent, null));
     var Parent = styled.div(_templateObject4);
-    var Child = styled(Parent)(_templateObject3);
+    var Child = Parent.extend(_templateObject3);
 
@@ -111,3 +111,3 @@ (0, _enzyme.shallow)(_react2.default.createElement(Parent, null));
 
-    var Child = styled(Parent)(_templateObject6);
+    var Child = Parent.extend(_templateObject6);
 
@@ -128,3 +128,3 @@ (0, _enzyme.shallow)(_react2.default.createElement(Parent, null));
 
-    var Child = styled(Parent)(_templateObject6);
+    var Child = Parent.extend(_templateObject6);
 
@@ -141,3 +141,3 @@ (0, _expect2.default)(Child.propTypes).toEqual(Parent.propTypes);
 
-    var Child = styled(Parent)(_templateObject7);
+    var Child = Parent.extend(_templateObject7);
 
@@ -154,4 +154,4 @@ (0, _expect2.default)(Child.fetchData).toExist();
 
-    var Parent = styled(GrandParent)(_templateObject3);
-    var Child = styled(Parent)(_templateObject8);
+    var Parent = GrandParent.extend(_templateObject3);
+    var Child = Parent.extend(_templateObject8);
 
@@ -161,2 +161,9 @@ (0, _expect2.default)(Child.fetchData).toExist();
   });
+
+  it('should allow changing component', function () {
+    var Parent = styled.div(_templateObject3);
+    var Child = Parent.extendWith('span')(_templateObject);
+
+    (0, _expect2.default)((0, _enzyme.shallow)(_react2.default.createElement(Child, null)).html()).toEqual('<span class="sc-b c"></span>');
+  });
 });

lib/vendor/glamor/sheet.js

@@ -145,2 +145,4 @@ 'use strict';
     value: function insert(rule) {
+      var _this2 = this;
+
       var insertedRule = void 0;
@@ -153,12 +155,14 @@
         } else {
-          var textNode = document.createTextNode(rule);
-          last(this.tags).appendChild(textNode);
-          insertedRule = { textNode: textNode, appendRule: function appendRule(newCss) {
-              return textNode.appendData(newCss);
-            } };
+          (function () {
+            var textNode = document.createTextNode(rule);
+            last(_this2.tags).appendChild(textNode);
+            insertedRule = { textNode: textNode, appendRule: function appendRule(newCss) {
+                return textNode.appendData(newCss);
+              } };
 
-          if (!this.isSpeedy) {
-            // sighhh
-            this.sheet = sheetForTag(last(this.tags));
-          }
+            if (!_this2.isSpeedy) {
+              // sighhh
+              _this2.sheet = sheetForTag(last(_this2.tags));
+            }
+          })();
         }
@@ -165,0 +169,0 @@ } else {

lib/vendor/postcss/lazy-result.js

@@ -205,17 +205,19 @@ 'use strict';
             try {
-                var plugin = this.processor.plugins[this.plugin];
-                var promise = this.run(plugin);
-                this.plugin += 1;
+                (function () {
+                    var plugin = _this.processor.plugins[_this.plugin];
+                    var promise = _this.run(plugin);
+                    _this.plugin += 1;
 
-                if (isPromise(promise)) {
-                    promise.then(function () {
+                    if (isPromise(promise)) {
+                        promise.then(function () {
+                            _this.asyncTick(resolve, reject);
+                        }).catch(function (error) {
+                            _this.handleError(error, plugin);
+                            _this.processed = true;
+                            reject(error);
+                        });
+                    } else {
                         _this.asyncTick(resolve, reject);
-                    }).catch(function (error) {
-                        _this.handleError(error, plugin);
-                        _this.processed = true;
-                        reject(error);
-                    });
-                } else {
-                    this.asyncTick(resolve, reject);
-                }
+                    }
+                })();
             } catch (error) {
@@ -222,0 +224,0 @@ this.processed = true;

package.json

 {
   "name": "styled-components",
-  "version": "2.0.0-6",
+  "version": "2.0.0-7",
   "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

@@ -142,4 +142,40 @@ <a href="https://github.com/styled-components/styled-components">
 
-### Overriding component styles
+#### Styling Components instead of Elements
 
+`styled` also works perfectly for styling your own or third-party components, like a `react-router` `<Link />`!
+
+```JS
+import styled from 'styled-components';
+import { Link } from 'react-router';
+
+const StyledLink = styled(Link)`
+  color: palevioletred;
+  display: block;
+  margin: 0.5em 0;
+  font-family: Helvetica, Arial, sans-serif;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+```
+
+```JSX
+<Link to="/">Standard, unstyled Link</Link>
+<StyledLink to="/">This Link is styled!</StyledLink>
+```
+
+<div align="center">
+  <a href="http://www.webpackbin.com/NJFAAC4SM">
+    <img alt="Screenshot of the above code ran in a browser" src="http://imgur.com/JJw4MdX.jpg" />
+    <div><em>Live demo</em></div>
+  </a>
+</div>
+
+> **Note:** `styled-components` generate a real stylesheet with classes. The class names are then passed to the react component (including third party components) via the `className` prop. For the styles to be applied, third-party components must attach the passed-in `className` prop to a DOM node. See [Using `styled-components` with existing CSS](./docs/existing-css.md) for more information!
+>
+> You can also pass tag names into the `styled()` call, like so: `styled('div')`. In fact, the styled.tagname helpers are just aliases of `styled('tagname')`!
+
+### Extending styles
+
 Taking the `Button` component from above and removing the primary rules, this is what we're left with – just a normal button:
@@ -165,3 +201,3 @@
 
-To do this in an easier way you can call `styled` as a function and pass in the previous component. You style that like any other styled-component. It overrides duplicate styles from the initial component and keeps the others around:
+To do this in an easier way you can call `extend` on the component to generate another. You style it like any other styled-component. It overrides duplicate styles from the initial component and keeps the others around:
 
@@ -176,3 +212,3 @@ ```JSX
 
-const TomatoButton = styled(Button)`
+const TomatoButton = Button.extend`
   color: tomato;
@@ -196,38 +232,2 @@ border-color: tomato;
 
-> **Note:** You can also pass tag names into the `styled()` call, like so: `styled('div')`. In fact, the styled.tagname helpers are just aliases of `styled('tagname')`!
-
-#### Third-party components
-
-The above also works perfectly for styling third-party components, like a `react-router` `<Link />`!
-
-```JS
-import styled from 'styled-components';
-import { Link } from 'react-router';
-
-const StyledLink = styled(Link)`
-  color: palevioletred;
-  display: block;
-  margin: 0.5em 0;
-  font-family: Helvetica, Arial, sans-serif;
-
-  &:hover {
-    text-decoration: underline;
-  }
-`;
-```
-
-```JSX
-<Link to="/">Standard, unstyled Link</Link>
-<StyledLink to="/">This Link is styled!</StyledLink>
-```
-
-<div align="center">
-  <a href="http://www.webpackbin.com/NJFAAC4SM">
-    <img alt="Screenshot of the above code ran in a browser" src="http://imgur.com/JJw4MdX.jpg" />
-    <div><em>Live demo</em></div>
-  </a>
-</div>
-
-> **Note:** `styled-components` generate a real stylesheet with classes. The class names are then passed to the react component (including third party components) via the `className` prop. For the styles to be applied, third-party components must attach the passed-in `className` prop to a DOM node. See [Using `styled-components` with existing CSS](./docs/existing-css.md) for more information!
-
 ### Animations
@@ -234,0 +234,0 @@

src/constructors/constructWithOptions.js

@@ -11,3 +11,3 @@ // @flow
     (strings: Array<string>, ...interpolations: Array<Interpolation>) =>
-      componentConstructor(tag, options, css(strings, ...interpolations))
+      componentConstructor(tag, options, css(strings, ...interpolations), templateFunction)
 
@@ -18,3 +18,4 @@ /* If config methods are called, wrap up a new template function and merge options */
   templateFunction.attrs = attrs =>
-    constructWithOptions(componentConstructor, tag, { ...options, attrs })
+    constructWithOptions(componentConstructor, tag, { ...options,
+      attrs: { ...(options.attrs || {}), ...attrs } })
 
@@ -21,0 +22,0 @@ return templateFunction

src/models/StyledComponent.js

@@ -6,2 +6,3 @@ // @flow
 import type { Theme } from './ThemeProvider'
+import createWarnTooManyClasses from '../utils/createWarnTooManyClasses'
 
@@ -14,2 +15,3 @@ import validAttr from '../utils/validAttr'
 import { CHANNEL } from './ThemeProvider'
+import constructWithOptions from '../constructors/constructWithOptions'
 
@@ -31,11 +33,3 @@ export default (ComponentStyle: Function) => {
                                  options: Object,
-                                 rules: RuleSet,
-                                 // eslint-disable-next-line no-undef
-                                 parent?: ReactClass<*>) => {
-    /* Handle styled(OtherStyledComponent) differently */
-    const isStyledComponent = AbstractStyledComponent.isPrototypeOf(target)
-    if (!isTag(target) && isStyledComponent) {
-      return createStyledComponent(target.target, options, target.rules.concat(rules), target)
-    }
-
+                                 rules: RuleSet) => {
     const {
@@ -45,11 +39,16 @@ displayName = isTag(target) ? `styled.${target}` : `Styled(${target.displayName})`,
       attrs = {},
+      rules: extendingRules = [],
+      ParentComponent = AbstractStyledComponent,
     } = options
-    const componentStyle = new ComponentStyle(rules, componentId)
-    const ParentComponent = parent || AbstractStyledComponent
+    const componentStyle = new ComponentStyle([...extendingRules, ...rules], componentId)
 
+    let warnTooManyClasses
+    if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production') {
+      warnTooManyClasses = createWarnTooManyClasses()
+    }
+
     class StyledComponent extends ParentComponent {
-      static rules: RuleSet
-      static target: Target
       static styledComponentId: string
-      static attrs: Object
+      static extend: Function
+      static extendWith: Function
       attrs = {}
@@ -136,4 +135,11 @@
 
+        if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && generatedClassName) {
+          warnTooManyClasses(generatedClassName, StyledComponent.displayName)
+        }
         return createElement(target, propsForElement, children)
       }
+
+      static get extend() {
+        return StyledComponent.extendWith(target)
+      }
     }
@@ -143,4 +149,7 @@
     StyledComponent.styledComponentId = componentId
-    StyledComponent.target = target
-    StyledComponent.rules = rules
+    StyledComponent.extendWith = tag => {
+      const { displayName: _, componentId: __, ...optionsToCopy } = options
+      return constructWithOptions(createStyledComponent, tag,
+        { ...optionsToCopy, rules, ParentComponent: StyledComponent })
+    }
 
@@ -147,0 +156,0 @@ return StyledComponent

src/models/StyledNativeComponent.js

@@ -12,23 +12,17 @@ // @flow
 import AbstractStyledComponent from './AbstractStyledComponent'
+import constructWithOptions from '../constructors/constructWithOptions'
 
 const createStyledNativeComponent = (target: Target,
                                      options: Object,
-                                     rules: RuleSet,
-                                     parent?: Target) => {
-  /* Handle styled(OtherStyledNativeComponent) differently */
-  const isStyledNativeComponent = AbstractStyledComponent.isPrototypeOf(target)
-  if (isStyledNativeComponent && !isTag(target)) {
-    return createStyledNativeComponent(target.target, options, target.rules.concat(rules), target)
-  }
-
+                                     rules: RuleSet) => {
   const {
     displayName = isTag(target) ? `styled.${target}` : `Styled(${target.displayName})`,
+    rules: extendingRules = [],
+    ParentComponent = AbstractStyledComponent,
   } = options
-  const inlineStyle = new InlineStyle(rules)
-  const ParentComponent = parent || AbstractStyledComponent
+  const inlineStyle = new InlineStyle([...extendingRules, ...rules])
 
-  // $FlowFixMe need to convince flow that ParentComponent can't be string here
   class StyledNativeComponent extends ParentComponent {
-    static rules: RuleSet
-    static target: Target
+    static extend: Function
+    static extendWith: Function
 
@@ -101,8 +95,14 @@ constructor() {
     }
+
+    static get extend() {
+      return StyledNativeComponent.extendWith(target)
+    }
   }
 
-  /* Used for inheritance */
-  StyledNativeComponent.rules = rules
-  StyledNativeComponent.target = target
   StyledNativeComponent.displayName = displayName
+  StyledNativeComponent.extendWith = tag => {
+    const { displayName: _, ...optionsToCopy } = options
+    return constructWithOptions(createStyledNativeComponent, tag,
+      { ...optionsToCopy, rules, ParentComponent: StyledNativeComponent })
+  }
 
@@ -109,0 +109,0 @@ return StyledNativeComponent

src/test/attrs.test.js

@@ -87,3 +87,23 @@ // @flow
 
+  it('merge attrs', () => {
+    const Comp = styled.button.attrs({
+      type: 'button',
+      tabIndex: 0
+    }).attrs({
+      type: 'submit'
+    })``
+    expect(shallow(<Comp />).html()).toEqual('<button type="submit" tabindex="0" class="sc-a b"></button>')
+  })
 
+  it('merge attrs when inheriting SC', () => {
+    const Parent = styled.button.attrs({
+      type: 'button',
+      tabIndex: 0
+    })``
+    const Child = Parent.extend.attrs({
+      type: 'submit'
+    })``
+    expect(shallow(<Child />).html()).toEqual('<button type="submit" tabindex="0" class="sc-b c"></button>')
+  })
+
   it('pass attrs to style block', () => {
@@ -90,0 +110,0 @@ /* Would be a React Router Link in IRL */

src/test/extending.test.js

@@ -20,3 +20,3 @@ // @flow
     const Parent = styled.div``
-    const Child = styled(Parent)``
+    const Child = Parent.extend``
 
@@ -31,3 +31,3 @@ shallow(<Parent />)
     const Parent = styled.div`color: blue;`
-    const Child = styled(Parent)``
+    const Child = Parent.extend``
 
@@ -42,3 +42,3 @@ shallow(<Parent />)
     const Parent = styled.div``
-    const Child = styled(Parent)`color: blue;`
+    const Child = Parent.extend`color: blue;`
 
@@ -53,3 +53,3 @@ shallow(<Parent />)
     const Parent = styled.div`color: blue;`
-    const Child = styled(Parent)`color: red;`
+    const Child = Parent.extend`color: red;`
 
@@ -63,3 +63,3 @@ shallow(<Child />)
     const Parent = styled.div`color: blue;`
-    const Child = styled(Parent)`color: red;`
+    const Child = Parent.extend`color: red;`
 
@@ -77,3 +77,3 @@ shallow(<Parent />)
     `
-    const Child = styled(Parent)`color: red;`
+    const Child = Parent.extend`color: red;`
 
@@ -102,3 +102,3 @@ shallow(<Parent />)
 
-    const Child = styled(Parent)`background-color: green;`
+    const Child = Parent.extend`background-color: green;`
 
@@ -122,3 +122,3 @@ shallow(<Parent />)
 
-    const Child = styled(Parent)`background-color: green;`
+    const Child = Parent.extend`background-color: green;`
 
@@ -133,3 +133,3 @@ expect(Child.propTypes).toEqual(Parent.propTypes)
 
-    const Child = styled(Parent)`color: green;`
+    const Child = Parent.extend`color: green;`
 
@@ -144,4 +144,4 @@ expect(Child.fetchData).toExist()
 
-    const Parent = styled(GrandParent)`color: red;`
-    const Child = styled(Parent)`color:red;`
+    const Parent = GrandParent.extend`color: red;`
+    const Child = Parent.extend`color:red;`
 
@@ -151,2 +151,9 @@ expect(Child.fetchData).toExist()
   })
+
+  it('should allow changing component', () => {
+    const Parent = styled.div`color: red;`
+    const Child = Parent.extendWith('span')``
+
+    expect(shallow(<Child />).html()).toEqual('<span class="sc-b c"></span>')
+  })
 })

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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

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

1879026

increased by5.5%

Number of package files

297

increased by5.69%

Lines of code

31824

increased by1.11%

Worsened metrics

Number of low supply chain risk alerts

5

increased by400%

No dependency changes