npm - styled-components - Versions diffs - 5.2.0-test.6 → 5.2.0 - Mend

styled-components 5.2.0-test.6 → 5.2.0

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

Files changed (21) hide show

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

@@ -1,2 +1,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react-is"),n=require("react"),r=e(n),o=e(require("shallowequal")),s=e(require("@emotion/stylis")),i=e(require("@emotion/unitless")),a=e(require("@emotion/is-prop-valid")),u=e(require("hoist-non-react-statics"));function c(){return(c=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}).apply(this,arguments)}var l=function(e,t){for(var n=[e[0]],r=0,o=t.length;r<o;r+=1)n.push(t[r],e[r+1]);return n},h=function(e){return null!==e&&"object"==typeof e&&"[object Object]"===(e.toString?e.toString():Object.prototype.toString.call(e))&&!t.typeOf(e)},d=Object.freeze([]),p=Object.freeze({});function f(e){return"function"==typeof e}function m(e){return"production"!==process.env.NODE_ENV&&("string"==typeof e&&e)||e.displayName||e.name||"Component"}function y(e){return e&&"string"==typeof e.styledComponentId}var v="undefined"!=typeof process&&(process.env.REACT_APP_SC_ATTR||process.env.SC_ATTR)||"data-styled",g="5.2.0-test.6",S="undefined"!=typeof window&&"HTMLElement"in window,w="boolean"==typeof SC_DISABLE_SPEEDY&&SC_DISABLE_SPEEDY||"undefined"!=typeof process&&(process.env.REACT_APP_SC_DISABLE_SPEEDY||process.env.SC_DISABLE_SPEEDY)||"production"!==process.env.NODE_ENV,b={},E=function(){return"undefined"!=typeof __webpack_nonce__?__webpack_nonce__:null},N="production"!==process.env.NODE_ENV?{1:"Cannot create styled-component for component: %s.\n\n",2:"Can't collect styles once you've consumed a `ServerStyleSheet`'s styles! `ServerStyleSheet` is a one off instance for each server-side render cycle.\n\n- Are you trying to reuse it across renders?\n- Are you accidentally calling collectStyles twice?\n\n",3:"Streaming SSR is only supported in a Node.js environment; Please do not try to call this method in the browser.\n\n",4:"The `StyleSheetManager` expects a valid target or sheet prop!\n\n- Does this error occur on the client and is your target falsy?\n- Does this error occur on the server and is the sheet falsy?\n\n",5:"The clone method cannot be used on the client!\n\n- Are you running in a client-like environment on the server?\n- Are you trying to run SSR on the client?\n\n",6:"Trying to insert a new style tag, but the given Node is unmounted!\n\n- Are you using a custom target that isn't mounted?\n- Does your document not have a valid head element?\n- Have you accidentally removed a style tag manually?\n\n",7:'ThemeProvider: Please return an object from your "theme" prop function, e.g.\n\n```js\ntheme={() => ({})}\n```\n\n',8:'ThemeProvider: Please make your "theme" prop an object.\n\n',9:"Missing document `<head>`\n\n",10:"Cannot find a StyleSheet instance. Usually this happens if there are multiple copies of styled-components loaded at once. Check out this issue for how to troubleshoot and fix the common cases where this situation can happen: https://github.com/styled-components/styled-components/issues/1941#issuecomment-417862021\n\n",11:"_This error was replaced with a dev-time warning, it will be deleted for v4 final._ [createGlobalStyle] received children which will not be rendered. Please use the component without passing children elements.\n\n",12:"It seems you are interpolating a keyframe declaration (%s) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\\`\\` helper which ensures the styles are injected correctly. See https://www.styled-components.com/docs/api#css\n\n",13:"%s is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.\n\n",14:'ThemeProvider: "theme" prop is required.\n\n',15:"A stylis plugin has been supplied that is not named. We need a name for each plugin to be able to prevent styling collisions between different stylis configurations within the same app. Before you pass your plugin to `<StyleSheetManager stylisPlugins={[]}>`, please make sure each plugin is uniquely-named, e.g.\n\n```js\nObject.defineProperty(importedPlugin, 'name', { value: 'some-unique-name' });\n```\n\n",16:"Reached the limit of how many styled components may be created at group %s.\nYou may only create up to 1,073,741,824 components. If you're creating components dynamically,\nas for instance in your render method then you may be running into this limitation.\n\n",17:"CSSStyleSheet could not be found on HTMLStyleElement.\nHas styled-components' style tag been unmounted or altered by another script?\n"}:{};function C(){for(var e=arguments.length<=0?void 0:arguments[0],t=[],n=1,r=arguments.length;n<r;n+=1)t.push(n<0||arguments.length<=n?void 0:arguments[n]);return t.forEach((function(t){e=e.replace(/%[a-z]/,t)})),e}function _(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];throw"production"===process.env.NODE_ENV?new Error("An error occurred. See https://git.io/JUIaE#"+e+" for more information."+(n.length>0?" Args: "+n.join(", "):"")):new Error(C.apply(void 0,[N[e]].concat(n)).trim())}var I=function(e){var t=document.head,n=e||t,r=document.createElement("style"),o=function(e){for(var t=e.childNodes,n=t.length;n>=0;n--){var r=t[n];if(r&&1===r.nodeType&&r.hasAttribute(v))return r}}(n),s=void 0!==o?o.nextSibling:null;r.setAttribute(v,"active"),r.setAttribute("data-styled-version",g);var i=E();return i&&r.setAttribute("nonce",i),n.insertBefore(r,s),r},A=function(){function e(e){var t=this.element=I(e);t.appendChild(document.createTextNode("")),this.sheet=function(e){if(e.sheet)return e.sheet;for(var t=document.styleSheets,n=0,r=t.length;n<r;n++){var o=t[n];if(o.ownerNode===e)return o}_(17)}(t),this.length=0}var t=e.prototype;return t.insertRule=function(e,t){try{return this.sheet.insertRule(t,e),this.length++,!0}catch(e){return!1}},t.deleteRule=function(e){this.sheet.deleteRule(e),this.length--},t.getRule=function(e){var t=this.sheet.cssRules[e];return void 0!==t&&"string"==typeof t.cssText?t.cssText:""},e}(),x=function(){function e(e){var t=this.element=I(e);this.nodes=t.childNodes,this.length=0}var t=e.prototype;return t.insertRule=function(e,t){if(e<=this.length&&e>=0){var n=document.createTextNode(t),r=this.nodes[e];return this.element.insertBefore(n,r||null),this.length++,!0}return!1},t.deleteRule=function(e){this.element.removeChild(this.nodes[e]),this.length--},t.getRule=function(e){return e<this.length?this.nodes[e].textContent:""},e}(),O=function(){function e(e){this.rules=[],this.length=0}var t=e.prototype;return t.insertRule=function(e,t){return e<=this.length&&(this.rules.splice(e,0,t),this.length++,!0)},t.deleteRule=function(e){this.rules.splice(e,1),this.length--},t.getRule=function(e){return e<this.length?this.rules[e]:""},e}(),P=function(){function e(e){this.groupSizes=new Uint32Array(512),this.length=512,this.tag=e}var t=e.prototype;return t.indexOfGroup=function(e){for(var t=0,n=0;n<e;n++)t+=this.groupSizes[n];return t},t.insertRules=function(e,t){if(e>=this.groupSizes.length){for(var n=this.groupSizes,r=n.length,o=r;e>=o;)(o<<=1)<0&&_(16,""+e);this.groupSizes=new Uint32Array(o),this.groupSizes.set(n),this.length=o;for(var s=r;s<o;s++)this.groupSizes[s]=0}for(var i=this.indexOfGroup(e+1),a=0,u=t.length;a<u;a++)this.tag.insertRule(i,t[a])&&(this.groupSizes[e]++,i++)},t.clearGroup=function(e){if(e<this.length){var t=this.groupSizes[e],n=this.indexOfGroup(e),r=n+t;this.groupSizes[e]=0;for(var o=n;o<r;o++)this.tag.deleteRule(n)}},t.getGroup=function(e){var t="";if(e>=this.length||0===this.groupSizes[e])return t;for(var n=this.groupSizes[e],r=this.indexOfGroup(e),o=r+n,s=r;s<o;s++)t+=this.tag.getRule(s)+"/*!sc*/\n";return t},e}(),R=new Map,j=new Map,T=1,D=function(e){if(R.has(e))return R.get(e);var t=T++;return"production"!==process.env.NODE_ENV&&((0|t)<0||t>1<<30)&&_(16,""+t),R.set(e,t),j.set(t,e),t},k=function(e){return j.get(e)},V=function(e,t){t>=T&&(T=t+1),R.set(e,t),j.set(t,e)},M="style["+v+'][data-styled-version="'+g+'"]',q=new RegExp("^"+v+'\\.g(\\d+)\\[id="([\\w\\d-]+)"\\].*?"([^"]*)'),G=function(e,t,n){for(var r,o=n.split(","),s=0,i=o.length;s<i;s++)(r=o[s])&&e.registerName(t,r)},z=function(e,t){for(var n=t.innerHTML.split("/*!sc*/\n"),r=[],o=0,s=n.length;o<s;o++){var i=n[o].trim();if(i){var a=i.match(q);if(a){var u=0|parseInt(a[1],10),c=a[2];0!==u&&(V(c,u),G(e,c,a[3]),e.getTag().insertRules(u,r)),r.length=0}else r.push(i)}}},F=S,B={isServer:!S,useCSSOMInjection:!w},L=function(){function e(e,t,n){void 0===e&&(e=B),void 0===t&&(t={}),this.options=c({},B,{},e),this.gs=t,this.names=new Map(n),!this.options.isServer&&S&&F&&(F=!1,function(e){for(var t=document.querySelectorAll(M),n=0,r=t.length;n<r;n++){var o=t[n];o&&"active"!==o.getAttribute(v)&&(z(e,o),o.parentNode&&o.parentNode.removeChild(o))}}(this))}e.registerId=function(e){return D(e)};var t=e.prototype;return t.reconstructWithOptions=function(t,n){return void 0===n&&(n=!0),new e(c({},this.options,{},t),this.gs,n&&this.names||void 0)},t.allocateGSInstance=function(e){return this.gs[e]=(this.gs[e]||0)+1},t.getTag=function(){return this.tag||(this.tag=(t=this.options,n=t.isServer,r=t.useCSSOMInjection,o=t.target,e=n?new O(o):r?new A(o):new x(o),new P(e)));var e,t,n,r,o},t.hasNameForId=function(e,t){return this.names.has(e)&&this.names.get(e).has(t)},t.registerName=function(e,t){if(D(e),this.names.has(e))this.names.get(e).add(t);else{var n=new Set;n.add(t),this.names.set(e,n)}},t.insertRules=function(e,t,n){this.registerName(e,t),this.getTag().insertRules(D(e),n)},t.clearNames=function(e){this.names.has(e)&&this.names.get(e).clear()},t.clearRules=function(e){this.getTag().clearGroup(D(e)),this.clearNames(e)},t.clearTag=function(){this.tag=void 0},t.toString=function(){return function(e){for(var t=e.getTag(),n=t.length,r="",o=0;o<n;o++){var s=k(o);if(void 0!==s){var i=e.names.get(s),a=t.getGroup(o);if(void 0!==i&&0!==a.length){var u=v+".g"+o+'[id="'+s+'"]',c="";void 0!==i&&i.forEach((function(e){e.length>0&&(c+=e+",")})),r+=""+a+u+'{content:"'+c+'"}/*!sc*/\n'}}}return r}(this)},e}(),H=function(e,t){for(var n=t.length;n;)e=33*e^t.charCodeAt(--n);return e},$=function(e){return H(5381,e)};var Y=/^\s*\/\/.*$/gm,W=[":","[",".","#"];function U(e){var t,n,r,o,i=void 0===e?p:e,a=i.options,u=void 0===a?p:a,c=i.plugins,l=void 0===c?d:c,h=new s(u),f=[],m=function(e){function t(t){if(t)try{e(t+"}")}catch(e){}}return function(n,r,o,s,i,a,u,c,l,h){switch(n){case 1:if(0===l&&64===r.charCodeAt(0))return e(r+";"),"";break;case 2:if(0===c)return r+"/*|*/";break;case 3:switch(c){case 102:case 112:return e(o[0]+r),"";default:return r+(0===h?"/*|*/":"")}case-2:r.split("/*|*/}").forEach(t)}}}((function(e){f.push(e)})),y=function(e,r,s){return 0===r&&W.includes(s[n.length])||s.match(o)?e:"."+t};function v(e,s,i,a){void 0===a&&(a="&");var u=e.replace(Y,""),c=s&&i?i+" "+s+" { "+u+" }":u;return t=a,n=s,r=new RegExp("\\"+n+"\\b","g"),o=new RegExp("(\\"+n+"\\b){2,}"),h(i||!s?"":s,c)}return h.use([].concat(l,[function(e,t,o){2===e&&o.length&&o[0].lastIndexOf(n)>0&&(o[0]=o[0].replace(r,y))},m,function(e){if(-2===e){var t=f;return f=[],t}}])),v.hash=l.length?l.reduce((function(e,t){return t.name||_(15),H(e,t.name)}),5381).toString():"",v}var J=r.createContext(),X=J.Consumer,Z=r.createContext(),K=(Z.Consumer,new L),Q=U();function ee(){return n.useContext(J)||K}function te(){return n.useContext(Z)||Q}function ne(e){var t=n.useState(e.stylisPlugins),s=t[0],i=t[1],a=ee(),u=n.useMemo((function(){var t=a;return e.sheet?t=e.sheet:e.target&&(t=t.reconstructWithOptions({target:e.target},!1)),e.disableCSSOMInjection&&(t=t.reconstructWithOptions({useCSSOMInjection:!1})),t}),[e.disableCSSOMInjection,e.sheet,e.target]),c=n.useMemo((function(){return U({options:{prefix:!e.disableVendorPrefixes},plugins:s})}),[e.disableVendorPrefixes,s]);return n.useEffect((function(){o(s,e.stylisPlugins)||i(e.stylisPlugins)}),[e.stylisPlugins]),r.createElement(J.Provider,{value:u},r.createElement(Z.Provider,{value:c},"production"!==process.env.NODE_ENV?r.Children.only(e.children):e.children))}var re=function(){function e(e,t){var n=this;this.inject=function(e,t){void 0===t&&(t=Q);var r=n.name+t.hash;e.hasNameForId(n.id,r)||e.insertRules(n.id,r,t(n.rules,r,"@keyframes"))},this.toString=function(){return _(12,String(n.name))},this.name=e,this.id="sc-keyframes-"+e,this.rules=t}return e.prototype.getName=function(e){return void 0===e&&(e=Q),this.name+e.hash},e}(),oe=/([A-Z])/g,se=/^ms-/;function ie(e){return e.replace(oe,"-$1").toLowerCase().replace(se,"-ms-")}var ae=function(e){return null==e||!1===e||""===e};function ue(e,n,r,o){if(Array.isArray(e)){for(var s,a=[],u=0,c=e.length;u<c;u+=1)""!==(s=ue(e[u],n,r,o))&&(Array.isArray(s)?a.push.apply(a,s):a.push(s));return a}if(ae(e))return"";if(y(e))return"."+e.styledComponentId;if(f(e)){if("function"!=typeof(d=e)||d.prototype&&d.prototype.isReactComponent||!n)return e;var l=e(n);return"production"!==process.env.NODE_ENV&&t.isElement(l)&&console.warn(m(e)+" is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details."),ue(l,n,r,o)}var d;return e instanceof re?r?(e.inject(r,o),e.getName(o)):e:h(e)?function e(t,n){var r,o,s=[];for(var a in t)t.hasOwnProperty(a)&&!ae(t[a])&&(h(t[a])?s.push.apply(s,e(t[a],a)):f(t[a])?s.push(ie(a)+":",t[a],";"):s.push(ie(a)+": "+(r=a,null==(o=t[a])||"boolean"==typeof o||""===o?"":"number"!=typeof o||0===o||r in i?String(o).trim():o+"px")+";"));return n?[n+" {"].concat(s,["}"]):s}(e):e.toString()}function ce(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];return f(e)||h(e)?ue(l(d,[e].concat(n))):0===n.length&&1===e.length&&"string"==typeof e[0]?e:ue(l(e,n))}var le=function(e){return"function"==typeof e||"object"==typeof e&&null!==e&&!Array.isArray(e)},he=function(e){return"__proto__"!==e&&"constructor"!==e&&"prototype"!==e};function de(e,t,n){var r=e[n];le(t)&&le(r)?pe(r,t):e[n]=t}function pe(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];for(var o=0,s=n;o<s.length;o++){var i=s[o];if(le(i))for(var a in i)he(a)&&de(e,i[a],a)}return e}var fe=/(a)(d)/gi,me=function(e){return String.fromCharCode(e+(e>25?39:97))};function ye(e){var t,n="";for(t=Math.abs(e);t>52;t=t/52|0)n=me(t%52)+n;return(me(t%52)+n).replace(fe,"$1-$2")}function ve(e){for(var t=0;t<e.length;t+=1){var n=e[t];if(f(n)&&!y(n))return!1}return!0}var ge=$(g),Se=function(){function e(e,t,n){this.rules=e,this.staticRulesId="",this.isStatic="production"===process.env.NODE_ENV&&ve(e),this.componentId=t,this.baseHash=H(ge,t),this.baseStyle=n,L.registerId(t)}return e.prototype.generateAndInjectStyles=function(e,t,n){var r=this.componentId,o=[];if(this.baseStyle&&o.push(this.baseStyle.generateAndInjectStyles(e,t,n)),this.isStatic&&!n.hash)if(this.staticRulesId&&t.hasNameForId(r,this.staticRulesId))o.push(this.staticRulesId);else{var s=ue(this.rules,e,t,n).join(""),i=ye(H(this.baseHash,s.length)>>>0);if(!t.hasNameForId(r,i)){var a=n(s,"."+i,void 0,r);t.insertRules(r,i,a)}o.push(i),this.staticRulesId=i}else{for(var u=this.rules.length,c=H(this.baseHash,n.hash),l="",h=0;h<u;h++){var d=this.rules[h];if("string"==typeof d)l+=d,"production"!==process.env.NODE_ENV&&(c=H(c,d+h));else if(d){var p=ue(d,e,t,n),f=Array.isArray(p)?p.join(""):p;c=H(c,f+h),l+=f}}if(l){var m=ye(c>>>0);if(!t.hasNameForId(r,m)){var y=n(l,"."+m,void 0,r);t.insertRules(r,m,y)}o.push(m)}}return o.join(" ")},e}(),we=/invalid hook call/i,be=new Set,Ee=function(e,t){if("production"!==process.env.NODE_ENV){var r="The component "+e+(t?' with the id of "'+t+'"':"")+" has been created dynamically.\nYou may see this warning because you've called styled inside another component.\nTo resolve this only create new StyledComponents outside of any render method and function component.";try{n.useRef(),be.has(r)||(console.warn(r),be.add(r))}catch(e){we.test(e.message)&&be.delete(r)}}},Ne=function(e,t,n){return void 0===n&&(n=p),e.theme!==n.theme&&e.theme||t||n.theme},Ce=/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~-]+/g,_e=/(^-|-$)/g;function Ie(e){return e.replace(Ce,"-").replace(_e,"")}function Ae(e){return"string"==typeof e&&("production"===process.env.NODE_ENV||e.charAt(0)===e.charAt(0).toLowerCase())}var xe=function(e){return ye($(e)>>>0)};var Oe=r.createContext(),Pe=Oe.Consumer;var Re={};function je(e,t,r){var o=e.attrs,s=e.componentStyle,i=e.defaultProps,u=e.foldedComponentIds,l=e.shouldForwardProp,h=e.styledComponentId,d=e.target;"production"!==process.env.NODE_ENV&&n.useDebugValue(h);var m=function(e,t,n){void 0===e&&(e=p);var r=c({},t,{theme:e}),o={};return n.forEach((function(e){var t,n,s,i=e;for(t in f(i)&&(i=i(r)),i)r[t]=o[t]="className"===t?(n=o[t],s=i[t],n&&s?n+" "+s:n||s):i[t]})),[r,o]}(Ne(t,n.useContext(Oe),i)||p,t,o),y=m[0],v=m[1],g=function(e,t,r,o){var s=ee(),i=te(),a=e.isStatic&&!t,u=a?e.generateAndInjectStyles(p,s,i):e.generateAndInjectStyles(r,s,i);return"production"!==process.env.NODE_ENV&&n.useDebugValue(u),"production"!==process.env.NODE_ENV&&!a&&o&&o(u),u}(s,o.length>0,y,"production"!==process.env.NODE_ENV?e.warnTooManyClasses:void 0),S=r,w=v.$as||t.$as||v.as||t.as||d,b=Ae(w),E=v!==t?c({},t,{},v):t,N=l||b&&a,C={};for(var _ in E)"$"!==_[0]&&"as"!==_&&("forwardedAs"===_?C.as=E[_]:N&&!N(_,a)||(C[_]=E[_]));return t.style&&v.style!==t.style&&(C.style=c({},t.style,{},v.style)),C.className=Array.prototype.concat(u,h,g!==h?g:null,t.className,v.className).filter(Boolean).join(" "),C.ref=S,n.createElement(w,C)}function Te(e,t,n){var o=y(e),s=!Ae(e),i=t.displayName,a=void 0===i?function(e){return Ae(e)?"styled."+e:"Styled("+m(e)+")"}(e):i,l=t.componentId,h=void 0===l?function(e,t){var n="string"!=typeof e?"sc":Ie(e);Re[n]=(Re[n]||0)+1;var r=n+"-"+xe(g+n+Re[n]);return t?t+"-"+r:r}(t.displayName,t.parentComponentId):l,p=t.attrs,f=void 0===p?d:p,v=t.displayName&&t.componentId?Ie(t.displayName)+"-"+t.componentId:t.componentId||h,S=o&&e.attrs?Array.prototype.concat(e.attrs,f).filter(Boolean):f,w=t.shouldForwardProp;o&&e.shouldForwardProp&&(w=w?function(n,r){return e.shouldForwardProp(n,r)&&t.shouldForwardProp(n,r)}:e.shouldForwardProp);var b,E=new Se(n,v,o?e.componentStyle:void 0),N=function(e,t){return je(b,e,t)};return N.displayName=a,(b=r.forwardRef(N)).attrs=S,b.componentStyle=E,b.displayName=a,b.shouldForwardProp=w,b.foldedComponentIds=o?Array.prototype.concat(e.foldedComponentIds,e.styledComponentId):d,b.styledComponentId=v,b.target=o?e.target:e,b.withComponent=function(e){var r=t.componentId,o=function(e,t){if(null==e)return{};var n,r,o={},s=Object.keys(e);for(r=0;r<s.length;r++)n=s[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(t,["componentId"]),s=r&&r+"-"+(Ae(e)?e:Ie(m(e)));return Te(e,c({},o,{attrs:S,componentId:s}),n)},Object.defineProperty(b,"defaultProps",{get:function(){return this._foldedDefaultProps},set:function(t){this._foldedDefaultProps=o?pe({},e.defaultProps,t):t}}),"production"!==process.env.NODE_ENV&&(Ee(a,v),b.warnTooManyClasses=function(e,t){var n={},r=!1;return function(o){if(!r&&(n[o]=!0,Object.keys(n).length>=200)){var s=t?' with the id of "'+t+'"':"";console.warn("Over 200 classes were generated for component "+e+s+".\nConsider using the attrs method, together with a style object for frequently changed styles.\nExample:\n  const Component = styled.div.attrs(props => ({\n    style: {\n      background: props.background,\n    },\n  }))`width: 100%;`\n\n  <Component />"),r=!0,n={}}}}(a,v)),b.toString=function(){return"."+b.styledComponentId},s&&u(b,e,{attrs:!0,componentStyle:!0,displayName:!0,foldedComponentIds:!0,shouldForwardProp:!0,self:!0,styledComponentId:!0,target:!0,withComponent:!0}),b}var De=function(e){return function e(n,r,o){if(void 0===o&&(o=p),!t.isValidElementType(r))return _(1,String(r));var s=function(){return n(r,o,ce.apply(void 0,arguments))};return s.withConfig=function(t){return e(n,r,c({},o,{},t))},s.attrs=function(t){return e(n,r,c({},o,{attrs:Array.prototype.concat(o.attrs,t).filter(Boolean)}))},s}(Te,e)};["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","marquee","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","foreignObject","g","image","line","linearGradient","marker","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","svg","text","tspan"].forEach((function(e){De[e]=De(e)}));var ke=function(){function e(e,t){this.rules=e,this.componentId=t,this.isStatic=ve(e)}var t=e.prototype;return t.createStyles=function(e,t,n,r){var o=r(ue(this.rules,t,n,r).join(""),""),s=this.componentId+e;n.insertRules(s,s,o)},t.removeStyles=function(e,t){t.clearRules(this.componentId+e)},t.renderStyles=function(e,t,n,r){L.registerId(this.componentId+e),this.removeStyles(e,n),this.createStyles(e,t,n,r)},e}();var Ve=function(){function e(){var e=this;this._emitSheetCSS=function(){var t=e.instance.toString(),n=E();return"<style "+[n&&'nonce="'+n+'"',v+'="true"','data-styled-version="5.2.0-test.6"'].filter(Boolean).join(" ")+">"+t+"</style>"},this.getStyleTags=function(){return e.sealed?_(2):e._emitSheetCSS()},this.getStyleElement=function(){var t;if(e.sealed)return _(2);var n=((t={})[v]="",t["data-styled-version"]=g,t.dangerouslySetInnerHTML={__html:e.instance.toString()},t),o=E();return o&&(n.nonce=o),[r.createElement("style",c({},n,{key:"sc-0-0"}))]},this.seal=function(){e.sealed=!0},this.instance=new L({isServer:!0}),this.sealed=!1}var t=e.prototype;return t.collectStyles=function(e){return this.sealed?_(2):r.createElement(ne,{sheet:this.instance},e)},t.interleaveWithNodeStream=function(e){return _(3)},e}(),Me={StyleSheet:L,masterSheet:K};exports.ServerStyleSheet=Ve,exports.StyleSheetConsumer=X,exports.StyleSheetContext=J,exports.StyleSheetManager=ne,exports.ThemeConsumer=Pe,exports.ThemeContext=Oe,exports.ThemeProvider=function(e){var t=n.useContext(Oe),o=n.useMemo((function(){return function(e,t){if(!e)return _(14);if(f(e)){var n=e(t);return"production"===process.env.NODE_ENV||null!==n&&!Array.isArray(n)&&"object"==typeof n?n:_(7)}return Array.isArray(e)||"object"!=typeof e?_(8):t?c({},t,{},e):e}(e.theme,t)}),[e.theme,t]);return e.children?r.createElement(Oe.Provider,{value:o},e.children):null},exports.__PRIVATE__=Me,exports.createGlobalStyle=function(e){for(var t=arguments.length,o=new Array(t>1?t-1:0),s=1;s<t;s++)o[s-1]=arguments[s];var i=ce.apply(void 0,[e].concat(o)),a="sc-global-"+xe(JSON.stringify(i)),u=new ke(i,a);function l(e){var t=ee(),o=te(),s=n.useContext(Oe),h=n.useRef(null);null===h.current&&(h.current=t.allocateGSInstance(a));var p=h.current;if("production"!==process.env.NODE_ENV&&r.Children.count(e.children)&&console.warn("The global style component "+a+" was given child JSX. createGlobalStyle does not render children."),"production"!==process.env.NODE_ENV&&i.some((function(e){return"string"==typeof e&&-1!==e.indexOf("@import")}))&&console.warn("Please do not use @import CSS syntax in createGlobalStyle at this time, as the CSSOM APIs we use in production do not handle it well. Instead, we recommend using a library such as react-helmet to inject a typical <link> meta tag to the stylesheet, or simply embedding it manually in your index.html <head> section for a simpler app."),u.isStatic)u.renderStyles(p,b,t,o);else{var f=c({},e,{theme:Ne(e,s,l.defaultProps)});u.renderStyles(p,f,t,o)}return n.useEffect((function(){return function(){return u.removeStyles(p,t)}}),d),null}return"production"!==process.env.NODE_ENV&&Ee(a),r.memo(l)},exports.css=ce,exports.default=De,exports.isStyledComponent=y,exports.keyframes=function(e){"production"!==process.env.NODE_ENV&&"undefined"!=typeof navigator&&"ReactNative"===navigator.product&&console.warn("`keyframes` cannot be used on ReactNative, only on the web. To do animation in ReactNative please use Animated.");for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];var o=ce.apply(void 0,[e].concat(n)).join(""),s=xe(o);return new re(s,o)},exports.useTheme=function(){return n.useContext(Oe)},exports.version=g,exports.withTheme=function(e){var t=r.forwardRef((function(t,o){var s=n.useContext(Oe),i=e.defaultProps,a=Ne(t,s,i);return"production"!==process.env.NODE_ENV&&void 0===a&&console.warn('[withTheme] You are not using a ThemeProvider nor passing a theme prop or a theme in defaultProps in component class "'+m(e)+'"'),r.createElement(e,c({},t,{theme:a,ref:o}))}));return u(t,e),t.displayName="WithTheme("+m(e)+")",t};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react-is"),n=require("react"),r=e(n),o=e(require("shallowequal")),s=e(require("@emotion/stylis")),i=e(require("@emotion/unitless")),a=e(require("@emotion/is-prop-valid")),u=e(require("hoist-non-react-statics"));function c(){return(c=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}).apply(this,arguments)}var l=function(e,t){for(var n=[e[0]],r=0,o=t.length;r<o;r+=1)n.push(t[r],e[r+1]);return n},d=function(e){return null!==e&&"object"==typeof e&&"[object Object]"===(e.toString?e.toString():Object.prototype.toString.call(e))&&!t.typeOf(e)},h=Object.freeze([]),p=Object.freeze({});function f(e){return"function"==typeof e}function m(e){return"production"!==process.env.NODE_ENV&&"string"==typeof e&&e||e.displayName||e.name||"Component"}function y(e){return e&&"string"==typeof e.styledComponentId}var g="undefined"!=typeof process&&(process.env.REACT_APP_SC_ATTR||process.env.SC_ATTR)||"data-styled",v="undefined"!=typeof window&&"HTMLElement"in window,S="boolean"==typeof SC_DISABLE_SPEEDY&&SC_DISABLE_SPEEDY||"undefined"!=typeof process&&(process.env.REACT_APP_SC_DISABLE_SPEEDY||process.env.SC_DISABLE_SPEEDY)||"production"!==process.env.NODE_ENV,w={},b=function(){return"undefined"!=typeof __webpack_nonce__?__webpack_nonce__:null},E="production"!==process.env.NODE_ENV?{1:"Cannot create styled-component for component: %s.\n\n",2:"Can't collect styles once you've consumed a `ServerStyleSheet`'s styles! `ServerStyleSheet` is a one off instance for each server-side render cycle.\n\n- Are you trying to reuse it across renders?\n- Are you accidentally calling collectStyles twice?\n\n",3:"Streaming SSR is only supported in a Node.js environment; Please do not try to call this method in the browser.\n\n",4:"The `StyleSheetManager` expects a valid target or sheet prop!\n\n- Does this error occur on the client and is your target falsy?\n- Does this error occur on the server and is the sheet falsy?\n\n",5:"The clone method cannot be used on the client!\n\n- Are you running in a client-like environment on the server?\n- Are you trying to run SSR on the client?\n\n",6:"Trying to insert a new style tag, but the given Node is unmounted!\n\n- Are you using a custom target that isn't mounted?\n- Does your document not have a valid head element?\n- Have you accidentally removed a style tag manually?\n\n",7:'ThemeProvider: Please return an object from your "theme" prop function, e.g.\n\n```js\ntheme={() => ({})}\n```\n\n',8:'ThemeProvider: Please make your "theme" prop an object.\n\n',9:"Missing document `<head>`\n\n",10:"Cannot find a StyleSheet instance. Usually this happens if there are multiple copies of styled-components loaded at once. Check out this issue for how to troubleshoot and fix the common cases where this situation can happen: https://github.com/styled-components/styled-components/issues/1941#issuecomment-417862021\n\n",11:"_This error was replaced with a dev-time warning, it will be deleted for v4 final._ [createGlobalStyle] received children which will not be rendered. Please use the component without passing children elements.\n\n",12:"It seems you are interpolating a keyframe declaration (%s) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\\`\\` helper which ensures the styles are injected correctly. See https://www.styled-components.com/docs/api#css\n\n",13:"%s is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.\n\n",14:'ThemeProvider: "theme" prop is required.\n\n',15:"A stylis plugin has been supplied that is not named. We need a name for each plugin to be able to prevent styling collisions between different stylis configurations within the same app. Before you pass your plugin to `<StyleSheetManager stylisPlugins={[]}>`, please make sure each plugin is uniquely-named, e.g.\n\n```js\nObject.defineProperty(importedPlugin, 'name', { value: 'some-unique-name' });\n```\n\n",16:"Reached the limit of how many styled components may be created at group %s.\nYou may only create up to 1,073,741,824 components. If you're creating components dynamically,\nas for instance in your render method then you may be running into this limitation.\n\n",17:"CSSStyleSheet could not be found on HTMLStyleElement.\nHas styled-components' style tag been unmounted or altered by another script?\n"}:{};function N(){for(var e=arguments.length<=0?void 0:arguments[0],t=[],n=1,r=arguments.length;n<r;n+=1)t.push(n<0||arguments.length<=n?void 0:arguments[n]);return t.forEach((function(t){e=e.replace(/%[a-z]/,t)})),e}function _(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];throw"production"===process.env.NODE_ENV?new Error("An error occurred. See https://git.io/JUIaE#"+e+" for more information."+(n.length>0?" Args: "+n.join(", "):"")):new Error(N.apply(void 0,[E[e]].concat(n)).trim())}var C=function(e){var t=document.head,n=e||t,r=document.createElement("style"),o=function(e){for(var t=e.childNodes,n=t.length;n>=0;n--){var r=t[n];if(r&&1===r.nodeType&&r.hasAttribute(g))return r}}(n),s=void 0!==o?o.nextSibling:null;r.setAttribute(g,"active"),r.setAttribute("data-styled-version","5.2.0");var i=b();return i&&r.setAttribute("nonce",i),n.insertBefore(r,s),r},I=function(){function e(e){var t=this.element=C(e);t.appendChild(document.createTextNode("")),this.sheet=function(e){if(e.sheet)return e.sheet;for(var t=document.styleSheets,n=0,r=t.length;n<r;n++){var o=t[n];if(o.ownerNode===e)return o}_(17)}(t),this.length=0}var t=e.prototype;return t.insertRule=function(e,t){try{return this.sheet.insertRule(t,e),this.length++,!0}catch(e){return!1}},t.deleteRule=function(e){this.sheet.deleteRule(e),this.length--},t.getRule=function(e){var t=this.sheet.cssRules[e];return void 0!==t&&"string"==typeof t.cssText?t.cssText:""},e}(),A=function(){function e(e){var t=this.element=C(e);this.nodes=t.childNodes,this.length=0}var t=e.prototype;return t.insertRule=function(e,t){if(e<=this.length&&e>=0){var n=document.createTextNode(t),r=this.nodes[e];return this.element.insertBefore(n,r||null),this.length++,!0}return!1},t.deleteRule=function(e){this.element.removeChild(this.nodes[e]),this.length--},t.getRule=function(e){return e<this.length?this.nodes[e].textContent:""},e}(),O=function(){function e(e){this.rules=[],this.length=0}var t=e.prototype;return t.insertRule=function(e,t){return e<=this.length&&(this.rules.splice(e,0,t),this.length++,!0)},t.deleteRule=function(e){this.rules.splice(e,1),this.length--},t.getRule=function(e){return e<this.length?this.rules[e]:""},e}(),x=function(){function e(e){this.groupSizes=new Uint32Array(512),this.length=512,this.tag=e}var t=e.prototype;return t.indexOfGroup=function(e){for(var t=0,n=0;n<e;n++)t+=this.groupSizes[n];return t},t.insertRules=function(e,t){if(e>=this.groupSizes.length){for(var n=this.groupSizes,r=n.length,o=r;e>=o;)(o<<=1)<0&&_(16,""+e);this.groupSizes=new Uint32Array(o),this.groupSizes.set(n),this.length=o;for(var s=r;s<o;s++)this.groupSizes[s]=0}for(var i=this.indexOfGroup(e+1),a=0,u=t.length;a<u;a++)this.tag.insertRule(i,t[a])&&(this.groupSizes[e]++,i++)},t.clearGroup=function(e){if(e<this.length){var t=this.groupSizes[e],n=this.indexOfGroup(e),r=n+t;this.groupSizes[e]=0;for(var o=n;o<r;o++)this.tag.deleteRule(n)}},t.getGroup=function(e){var t="";if(e>=this.length||0===this.groupSizes[e])return t;for(var n=this.groupSizes[e],r=this.indexOfGroup(e),o=r+n,s=r;s<o;s++)t+=this.tag.getRule(s)+"/*!sc*/\n";return t},e}(),P=new Map,R=new Map,j=1,T=function(e){if(P.has(e))return P.get(e);var t=j++;return"production"!==process.env.NODE_ENV&&((0|t)<0||t>1<<30)&&_(16,""+t),P.set(e,t),R.set(t,e),t},D=function(e){return R.get(e)},k=function(e,t){t>=j&&(j=t+1),P.set(e,t),R.set(t,e)},V="style["+g+'][data-styled-version="5.2.0"]',M=new RegExp("^"+g+'\\.g(\\d+)\\[id="([\\w\\d-]+)"\\].*?"([^"]*)'),z=function(e,t,n){for(var r,o=n.split(","),s=0,i=o.length;s<i;s++)(r=o[s])&&e.registerName(t,r)},q=function(e,t){for(var n=t.innerHTML.split("/*!sc*/\n"),r=[],o=0,s=n.length;o<s;o++){var i=n[o].trim();if(i){var a=i.match(M);if(a){var u=0|parseInt(a[1],10),c=a[2];0!==u&&(k(c,u),z(e,c,a[3]),e.getTag().insertRules(u,r)),r.length=0}else r.push(i)}}},G=v,F={isServer:!v,useCSSOMInjection:!S},B=function(){function e(e,t,n){void 0===e&&(e=F),void 0===t&&(t={}),this.options=c({},F,{},e),this.gs=t,this.names=new Map(n),!this.options.isServer&&v&&G&&(G=!1,function(e){for(var t=document.querySelectorAll(V),n=0,r=t.length;n<r;n++){var o=t[n];o&&"active"!==o.getAttribute(g)&&(q(e,o),o.parentNode&&o.parentNode.removeChild(o))}}(this))}e.registerId=function(e){return T(e)};var t=e.prototype;return t.reconstructWithOptions=function(t,n){return void 0===n&&(n=!0),new e(c({},this.options,{},t),this.gs,n&&this.names||void 0)},t.allocateGSInstance=function(e){return this.gs[e]=(this.gs[e]||0)+1},t.getTag=function(){return this.tag||(this.tag=(n=(t=this.options).isServer,r=t.useCSSOMInjection,o=t.target,e=n?new O(o):r?new I(o):new A(o),new x(e)));var e,t,n,r,o},t.hasNameForId=function(e,t){return this.names.has(e)&&this.names.get(e).has(t)},t.registerName=function(e,t){if(T(e),this.names.has(e))this.names.get(e).add(t);else{var n=new Set;n.add(t),this.names.set(e,n)}},t.insertRules=function(e,t,n){this.registerName(e,t),this.getTag().insertRules(T(e),n)},t.clearNames=function(e){this.names.has(e)&&this.names.get(e).clear()},t.clearRules=function(e){this.getTag().clearGroup(T(e)),this.clearNames(e)},t.clearTag=function(){this.tag=void 0},t.toString=function(){return function(e){for(var t=e.getTag(),n=t.length,r="",o=0;o<n;o++){var s=D(o);if(void 0!==s){var i=e.names.get(s),a=t.getGroup(o);if(void 0!==i&&0!==a.length){var u=g+".g"+o+'[id="'+s+'"]',c="";void 0!==i&&i.forEach((function(e){e.length>0&&(c+=e+",")})),r+=""+a+u+'{content:"'+c+'"}/*!sc*/\n'}}}return r}(this)},e}(),L=function(e,t){for(var n=t.length;n;)e=33*e^t.charCodeAt(--n);return e},H=function(e){return L(5381,e)},$=/^\s*\/\/.*$/gm,Y=[":","[",".","#"];function W(e){var t,n,r,o,i=void 0===e?p:e,a=i.options,u=void 0===a?p:a,c=i.plugins,l=void 0===c?h:c,d=new s(u),f=[],m=function(e){function t(t){if(t)try{e(t+"}")}catch(e){}}return function(n,r,o,s,i,a,u,c,l,d){switch(n){case 1:if(0===l&&64===r.charCodeAt(0))return e(r+";"),"";break;case 2:if(0===c)return r+"/*|*/";break;case 3:switch(c){case 102:case 112:return e(o[0]+r),"";default:return r+(0===d?"/*|*/":"")}case-2:r.split("/*|*/}").forEach(t)}}}((function(e){f.push(e)})),y=function(e,r,s){return 0===r&&Y.includes(s[n.length])||s.match(o)?e:"."+t};function g(e,s,i,a){void 0===a&&(a="&");var u=e.replace($,""),c=s&&i?i+" "+s+" { "+u+" }":u;return t=a,n=s,r=new RegExp("\\"+n+"\\b","g"),o=new RegExp("(\\"+n+"\\b){2,}"),d(i||!s?"":s,c)}return d.use([].concat(l,[function(e,t,o){2===e&&o.length&&o[0].lastIndexOf(n)>0&&(o[0]=o[0].replace(r,y))},m,function(e){if(-2===e){var t=f;return f=[],t}}])),g.hash=l.length?l.reduce((function(e,t){return t.name||_(15),L(e,t.name)}),5381).toString():"",g}var U=r.createContext(),J=U.Consumer,X=r.createContext(),Z=(X.Consumer,new B),K=W();function Q(){return n.useContext(U)||Z}function ee(){return n.useContext(X)||K}function te(e){var t=n.useState(e.stylisPlugins),s=t[0],i=t[1],a=Q(),u=n.useMemo((function(){var t=a;return e.sheet?t=e.sheet:e.target&&(t=t.reconstructWithOptions({target:e.target},!1)),e.disableCSSOMInjection&&(t=t.reconstructWithOptions({useCSSOMInjection:!1})),t}),[e.disableCSSOMInjection,e.sheet,e.target]),c=n.useMemo((function(){return W({options:{prefix:!e.disableVendorPrefixes},plugins:s})}),[e.disableVendorPrefixes,s]);return n.useEffect((function(){o(s,e.stylisPlugins)||i(e.stylisPlugins)}),[e.stylisPlugins]),r.createElement(U.Provider,{value:u},r.createElement(X.Provider,{value:c},"production"!==process.env.NODE_ENV?r.Children.only(e.children):e.children))}var ne=function(){function e(e,t){var n=this;this.inject=function(e,t){void 0===t&&(t=K);var r=n.name+t.hash;e.hasNameForId(n.id,r)||e.insertRules(n.id,r,t(n.rules,r,"@keyframes"))},this.toString=function(){return _(12,String(n.name))},this.name=e,this.id="sc-keyframes-"+e,this.rules=t}return e.prototype.getName=function(e){return void 0===e&&(e=K),this.name+e.hash},e}(),re=/([A-Z])/,oe=new RegExp(re,"g"),se=/^ms-/,ie=function(e){return"-"+e.toLowerCase()};function ae(e){return re.test(e)?e.replace(oe,ie).replace(se,"-ms-"):e}var ue=function(e){return null==e||!1===e||""===e};function ce(e,n,r,o){if(Array.isArray(e)){for(var s,a=[],u=0,c=e.length;u<c;u+=1)""!==(s=ce(e[u],n,r,o))&&(Array.isArray(s)?a.push.apply(a,s):a.push(s));return a}if(ue(e))return"";if(y(e))return"."+e.styledComponentId;if(f(e)){if("function"!=typeof(h=e)||h.prototype&&h.prototype.isReactComponent||!n)return e;var l=e(n);return"production"!==process.env.NODE_ENV&&t.isElement(l)&&console.warn(m(e)+" is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details."),ce(l,n,r,o)}var h;return e instanceof ne?r?(e.inject(r,o),e.getName(o)):e:d(e)?function e(t,n){var r,o,s=[];for(var a in t)t.hasOwnProperty(a)&&!ue(t[a])&&(d(t[a])?s.push.apply(s,e(t[a],a)):f(t[a])?s.push(ae(a)+":",t[a],";"):s.push(ae(a)+": "+(r=a,null==(o=t[a])||"boolean"==typeof o||""===o?"":"number"!=typeof o||0===o||r in i?String(o).trim():o+"px")+";"));return n?[n+" {"].concat(s,["}"]):s}(e):e.toString()}function le(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];return f(e)||d(e)?ce(l(h,[e].concat(n))):0===n.length&&1===e.length&&"string"==typeof e[0]?e:ce(l(e,n))}var de=function(e){return"function"==typeof e||"object"==typeof e&&null!==e&&!Array.isArray(e)},he=function(e){return"__proto__"!==e&&"constructor"!==e&&"prototype"!==e};function pe(e,t,n){var r=e[n];de(t)&&de(r)?fe(r,t):e[n]=t}function fe(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];for(var o=0,s=n;o<s.length;o++){var i=s[o];if(de(i))for(var a in i)he(a)&&pe(e,i[a],a)}return e}var me=/(a)(d)/gi,ye=function(e){return String.fromCharCode(e+(e>25?39:97))};function ge(e){var t,n="";for(t=Math.abs(e);t>52;t=t/52|0)n=ye(t%52)+n;return(ye(t%52)+n).replace(me,"$1-$2")}function ve(e){for(var t=0;t<e.length;t+=1){var n=e[t];if(f(n)&&!y(n))return!1}return!0}var Se=H("5.2.0"),we=function(){function e(e,t,n){this.rules=e,this.staticRulesId="",this.isStatic="production"===process.env.NODE_ENV&&(void 0===n||n.isStatic)&&ve(e),this.componentId=t,this.baseHash=L(Se,t),this.baseStyle=n,B.registerId(t)}return e.prototype.generateAndInjectStyles=function(e,t,n){var r=this.componentId,o=[];if(this.baseStyle&&o.push(this.baseStyle.generateAndInjectStyles(e,t,n)),this.isStatic&&!n.hash)if(this.staticRulesId&&t.hasNameForId(r,this.staticRulesId))o.push(this.staticRulesId);else{var s=ce(this.rules,e,t,n).join(""),i=ge(L(this.baseHash,s.length)>>>0);if(!t.hasNameForId(r,i)){var a=n(s,"."+i,void 0,r);t.insertRules(r,i,a)}o.push(i),this.staticRulesId=i}else{for(var u=this.rules.length,c=L(this.baseHash,n.hash),l="",d=0;d<u;d++){var h=this.rules[d];if("string"==typeof h)l+=h,"production"!==process.env.NODE_ENV&&(c=L(c,h+d));else if(h){var p=ce(h,e,t,n),f=Array.isArray(p)?p.join(""):p;c=L(c,f+d),l+=f}}if(l){var m=ge(c>>>0);if(!t.hasNameForId(r,m)){var y=n(l,"."+m,void 0,r);t.insertRules(r,m,y)}o.push(m)}}return o.join(" ")},e}(),be=/invalid hook call/i,Ee=new Set,Ne=function(e,t){if("production"!==process.env.NODE_ENV){var r="The component "+e+(t?' with the id of "'+t+'"':"")+" has been created dynamically.\nYou may see this warning because you've called styled inside another component.\nTo resolve this only create new StyledComponents outside of any render method and function component.";try{n.useRef(),Ee.has(r)||(console.warn(r),Ee.add(r))}catch(e){be.test(e.message)&&Ee.delete(r)}}},_e=function(e,t,n){return void 0===n&&(n=p),e.theme!==n.theme&&e.theme||t||n.theme},Ce=/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~-]+/g,Ie=/(^-|-$)/g;function Ae(e){return e.replace(Ce,"-").replace(Ie,"")}function Oe(e){return"string"==typeof e&&("production"===process.env.NODE_ENV||e.charAt(0)===e.charAt(0).toLowerCase())}var xe=function(e){return ge(H(e)>>>0)},Pe=r.createContext(),Re=Pe.Consumer,je={};function Te(e,t,o){var s=y(e),i=!Oe(e),l=t.displayName,d=void 0===l?function(e){return Oe(e)?"styled."+e:"Styled("+m(e)+")"}(e):l,g=t.componentId,v=void 0===g?function(e,t){var n="string"!=typeof e?"sc":Ae(e);je[n]=(je[n]||0)+1;var r=n+"-"+xe("5.2.0"+n+je[n]);return t?t+"-"+r:r}(t.displayName,t.parentComponentId):g,S=t.attrs,w=void 0===S?h:S,b=t.displayName&&t.componentId?Ae(t.displayName)+"-"+t.componentId:t.componentId||v,E=s&&e.attrs?Array.prototype.concat(e.attrs,w).filter(Boolean):w,N=t.shouldForwardProp;s&&e.shouldForwardProp&&(N=N?function(n,r){return e.shouldForwardProp(n,r)&&t.shouldForwardProp(n,r)}:e.shouldForwardProp);var _,C=new we(o,b,s?e.componentStyle:void 0),I=function(e,t){return function(e,t,r){var o=e.attrs,s=e.componentStyle,i=e.defaultProps,u=e.foldedComponentIds,l=e.shouldForwardProp,d=e.styledComponentId,h=e.target;"production"!==process.env.NODE_ENV&&n.useDebugValue(d);var m=function(e,t,n){void 0===e&&(e=p);var r=c({},t,{theme:e}),o={};return n.forEach((function(e){var t,n,s,i=e;for(t in f(i)&&(i=i(r)),i)r[t]=o[t]="className"===t?(n=o[t],s=i[t],n&&s?n+" "+s:n||s):i[t]})),[r,o]}(_e(t,n.useContext(Pe),i)||p,t,o),y=m[0],g=m[1],v=function(e,t,r,o){var s=Q(),i=ee(),a=e.isStatic&&!t,u=a?e.generateAndInjectStyles(p,s,i):e.generateAndInjectStyles(r,s,i);return"production"!==process.env.NODE_ENV&&n.useDebugValue(u),"production"!==process.env.NODE_ENV&&!a&&o&&o(u),u}(s,o.length>0,y,"production"!==process.env.NODE_ENV?e.warnTooManyClasses:void 0),S=r,w=g.$as||t.$as||g.as||t.as||h,b=Oe(w),E=g!==t?c({},t,{},g):t,N=l||b&&a,_={};for(var C in E)"$"!==C[0]&&"as"!==C&&("forwardedAs"===C?_.as=E[C]:N&&!N(C,a)||(_[C]=E[C]));return t.style&&g.style!==t.style&&(_.style=c({},t.style,{},g.style)),_.className=Array.prototype.concat(u,d,v!==d?v:null,t.className,g.className).filter(Boolean).join(" "),_.ref=S,n.createElement(w,_)}(_,e,t)};return I.displayName=d,(_=r.forwardRef(I)).attrs=E,_.componentStyle=C,_.displayName=d,_.shouldForwardProp=N,_.foldedComponentIds=s?Array.prototype.concat(e.foldedComponentIds,e.styledComponentId):h,_.styledComponentId=b,_.target=s?e.target:e,_.withComponent=function(e){var n=t.componentId,r=function(e,t){if(null==e)return{};var n,r,o={},s=Object.keys(e);for(r=0;r<s.length;r++)n=s[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(t,["componentId"]),s=n&&n+"-"+(Oe(e)?e:Ae(m(e)));return Te(e,c({},r,{attrs:E,componentId:s}),o)},Object.defineProperty(_,"defaultProps",{get:function(){return this._foldedDefaultProps},set:function(t){this._foldedDefaultProps=s?fe({},e.defaultProps,t):t}}),"production"!==process.env.NODE_ENV&&(Ne(d,b),_.warnTooManyClasses=function(e,t){var n={},r=!1;return function(o){if(!r&&(n[o]=!0,Object.keys(n).length>=200)){var s=t?' with the id of "'+t+'"':"";console.warn("Over 200 classes were generated for component "+e+s+".\nConsider using the attrs method, together with a style object for frequently changed styles.\nExample:\n  const Component = styled.div.attrs(props => ({\n    style: {\n      background: props.background,\n    },\n  }))`width: 100%;`\n\n  <Component />"),r=!0,n={}}}}(d,b)),_.toString=function(){return"."+_.styledComponentId},i&&u(_,e,{attrs:!0,componentStyle:!0,displayName:!0,foldedComponentIds:!0,shouldForwardProp:!0,self:!0,styledComponentId:!0,target:!0,withComponent:!0}),_}var De=function(e){return function e(n,r,o){if(void 0===o&&(o=p),!t.isValidElementType(r))return _(1,String(r));var s=function(){return n(r,o,le.apply(void 0,arguments))};return s.withConfig=function(t){return e(n,r,c({},o,{},t))},s.attrs=function(t){return e(n,r,c({},o,{attrs:Array.prototype.concat(o.attrs,t).filter(Boolean)}))},s}(Te,e)};["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","marquee","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","foreignObject","g","image","line","linearGradient","marker","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","svg","text","tspan"].forEach((function(e){De[e]=De(e)}));var ke=function(){function e(e,t){this.rules=e,this.componentId=t,this.isStatic=ve(e),B.registerId(this.componentId+1)}var t=e.prototype;return t.createStyles=function(e,t,n,r){var o=r(ce(this.rules,t,n,r).join(""),""),s=this.componentId+e;n.insertRules(s,s,o)},t.removeStyles=function(e,t){t.clearRules(this.componentId+e)},t.renderStyles=function(e,t,n,r){e>2&&B.registerId(this.componentId+e),this.removeStyles(e,n),this.createStyles(e,t,n,r)},e}(),Ve=function(){function e(){var e=this;this._emitSheetCSS=function(){var t=e.instance.toString(),n=b();return"<style "+[n&&'nonce="'+n+'"',g+'="true"','data-styled-version="5.2.0"'].filter(Boolean).join(" ")+">"+t+"</style>"},this.getStyleTags=function(){return e.sealed?_(2):e._emitSheetCSS()},this.getStyleElement=function(){var t;if(e.sealed)return _(2);var n=((t={})[g]="",t["data-styled-version"]="5.2.0",t.dangerouslySetInnerHTML={__html:e.instance.toString()},t),o=b();return o&&(n.nonce=o),[r.createElement("style",c({},n,{key:"sc-0-0"}))]},this.seal=function(){e.sealed=!0},this.instance=new B({isServer:!0}),this.sealed=!1}var t=e.prototype;return t.collectStyles=function(e){return this.sealed?_(2):r.createElement(te,{sheet:this.instance},e)},t.interleaveWithNodeStream=function(e){return _(3)},e}(),Me={StyleSheet:B,masterSheet:Z};"production"!==process.env.NODE_ENV&&"undefined"!=typeof navigator&&"ReactNative"===navigator.product&&console.warn("It looks like you've imported 'styled-components' on React Native.\nPerhaps you're looking to import 'styled-components/native'?\nRead more about this at https://www.styled-components.com/docs/basics#react-native"),"production"!==process.env.NODE_ENV&&"test"!==process.env.NODE_ENV&&(window["__styled-components-init__"]=window["__styled-components-init__"]||0,1===window["__styled-components-init__"]&&console.warn("It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles not rendering properly, errors happening during rehydration process, missing theme prop, and makes your application bigger without a good reason.\n\nSee https://s-c.sh/2BAXzed for more info."),window["__styled-components-init__"]+=1),exports.ServerStyleSheet=Ve,exports.StyleSheetConsumer=J,exports.StyleSheetContext=U,exports.StyleSheetManager=te,exports.ThemeConsumer=Re,exports.ThemeContext=Pe,exports.ThemeProvider=function(e){var t=n.useContext(Pe),o=n.useMemo((function(){return function(e,t){if(!e)return _(14);if(f(e)){var n=e(t);return"production"===process.env.NODE_ENV||null!==n&&!Array.isArray(n)&&"object"==typeof n?n:_(7)}return Array.isArray(e)||"object"!=typeof e?_(8):t?c({},t,{},e):e}(e.theme,t)}),[e.theme,t]);return e.children?r.createElement(Pe.Provider,{value:o},e.children):null},exports.__PRIVATE__=Me,exports.createGlobalStyle=function(e){for(var t=arguments.length,o=new Array(t>1?t-1:0),s=1;s<t;s++)o[s-1]=arguments[s];var i=le.apply(void 0,[e].concat(o)),a="sc-global-"+xe(JSON.stringify(i)),u=new ke(i,a);function l(e){var t=Q(),o=ee(),s=n.useContext(Pe),c=n.useRef(t.allocateGSInstance(a)).current;return"production"!==process.env.NODE_ENV&&r.Children.count(e.children)&&console.warn("The global style component "+a+" was given child JSX. createGlobalStyle does not render children."),"production"!==process.env.NODE_ENV&&i.some((function(e){return"string"==typeof e&&-1!==e.indexOf("@import")}))&&console.warn("Please do not use @import CSS syntax in createGlobalStyle at this time, as the CSSOM APIs we use in production do not handle it well. Instead, we recommend using a library such as react-helmet to inject a typical <link> meta tag to the stylesheet, or simply embedding it manually in your index.html <head> section for a simpler app."),n.useLayoutEffect((function(){return d(c,e,t,s,o),function(){return u.removeStyles(c,t)}}),[c,e,t,s,o]),null}function d(e,t,n,r,o){if(u.isStatic)u.renderStyles(e,w,n,o);else{var s=c({},t,{theme:_e(t,r,l.defaultProps)});u.renderStyles(e,s,n,o)}}return"production"!==process.env.NODE_ENV&&Ne(a),r.memo(l)},exports.css=le,exports.default=De,exports.isStyledComponent=y,exports.keyframes=function(e){"production"!==process.env.NODE_ENV&&"undefined"!=typeof navigator&&"ReactNative"===navigator.product&&console.warn("`keyframes` cannot be used on ReactNative, only on the web. To do animation in ReactNative please use Animated.");for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];var o=le.apply(void 0,[e].concat(n)).join(""),s=xe(o);return new ne(s,o)},exports.useTheme=function(){return n.useContext(Pe)},exports.version="5.2.0",exports.withTheme=function(e){var t=r.forwardRef((function(t,o){var s=n.useContext(Pe),i=e.defaultProps,a=_e(t,s,i);return"production"!==process.env.NODE_ENV&&void 0===a&&console.warn('[withTheme] You are not using a ThemeProvider nor passing a theme prop or a theme in defaultProps in component class "'+m(e)+'"'),r.createElement(e,c({},t,{theme:a,ref:o}))}));return u(t,e),t.displayName="WithTheme("+m(e)+")",t};
 //# sourceMappingURL=styled-components.browser.cjs.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"styled-components.browser.cjs.js","sources":["../src/constants.js","../src/sheet/Tag.js","../src/sheet/Sheet.js","../src/models/StyleSheetManager.js","../src/models/Keyframes.js","../src/utils/isStaticRules.js","../src/models/StyledComponent.js","../src/models/GlobalStyle.js","../src/models/ServerStyleSheet.js"],"sourcesContent":["// @flow\n\ndeclare var SC_DISABLE_SPEEDY: ?boolean;\ndeclare var __VERSION__: string;\n\nexport const SC_ATTR =\n (typeof process !== 'undefined' && (process.env.REACT_APP_SC_ATTR \|\| process.env.SC_ATTR)) \|\|\n 'data-styled';\n\nexport const SC_ATTR_ACTIVE = 'active';\nexport const SC_ATTR_VERSION = 'data-styled-version';\nexport const SC_VERSION = __VERSION__;\nexport const SPLITTER = '/!sc/\\n';\n\nexport const IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;\n\nexport const DISABLE_SPEEDY =\n (typeof SC_DISABLE_SPEEDY === 'boolean' && SC_DISABLE_SPEEDY) \|\|\n (typeof process !== 'undefined' &&\n (process.env.REACT_APP_SC_DISABLE_SPEEDY \|\| process.env.SC_DISABLE_SPEEDY)) \|\|\n process.env.NODE_ENV !== 'production';\n\n// Shared empty execution context when generating static styles\nexport const STATIC_EXECUTION_CONTEXT = {};\n","// @flow\n/* eslint-disable no-use-before-define /\n\nimport { makeStyleTag, getSheet } from './dom';\nimport type { SheetOptions, Tag } from './types';\n\n/* Create a CSSStyleSheet-like tag depending on the environment /\nexport const makeTag = ({ isServer, useCSSOMInjection, target }: SheetOptions): Tag => {\n if (isServer) {\n return new VirtualTag(target);\n } else if (useCSSOMInjection) {\n return new CSSOMTag(target);\n } else {\n return new TextTag(target);\n }\n};\n\nexport class CSSOMTag implements Tag {\n element: HTMLStyleElement;\n\n sheet: CSSStyleSheet;\n\n length: number;\n\n constructor(target?: HTMLElement) {\n const element = (this.element = makeStyleTag(target));\n\n // Avoid Edge bug where empty style elements don't create sheets\n element.appendChild(document.createTextNode(''));\n\n this.sheet = getSheet(element);\n this.length = 0;\n }\n\n insertRule(index: number, rule: string): boolean {\n try {\n this.sheet.insertRule(rule, index);\n this.length++;\n return true;\n } catch (_error) {\n return false;\n }\n }\n\n deleteRule(index: number): void {\n this.sheet.deleteRule(index);\n this.length--;\n }\n\n getRule(index: number): string {\n const rule = this.sheet.cssRules[index];\n // Avoid IE11 quirk where cssText is inaccessible on some invalid rules\n if (rule !== undefined && typeof rule.cssText === 'string') {\n return rule.cssText;\n } else {\n return '';\n }\n }\n}\n\n/* A Tag that emulates the CSSStyleSheet API but uses text nodes /\nexport class TextTag implements Tag {\n element: HTMLStyleElement;\n\n nodes: NodeList<Node>;\n\n length: number;\n\n constructor(target?: HTMLElement) {\n const element = (this.element = makeStyleTag(target));\n this.nodes = element.childNodes;\n this.length = 0;\n }\n\n insertRule(index: number, rule: string): boolean {\n if (index <= this.length && index >= 0) {\n const node = document.createTextNode(rule);\n const refNode = this.nodes[index];\n this.element.insertBefore(node, refNode \|\| null);\n this.length++;\n return true;\n } else {\n return false;\n }\n }\n\n deleteRule(index: number): void {\n this.element.removeChild(this.nodes[index]);\n this.length--;\n }\n\n getRule(index: number): string {\n if (index < this.length) {\n return this.nodes[index].textContent;\n } else {\n return '';\n }\n }\n}\n\n/* A completely virtual (server-side) Tag that doesn't manipulate the DOM /\nexport class VirtualTag implements Tag {\n rules: string[];\n\n length: number;\n\n constructor(_target?: HTMLElement) {\n this.rules = [];\n this.length = 0;\n }\n\n insertRule(index: number, rule: string): boolean {\n if (index <= this.length) {\n this.rules.splice(index, 0, rule);\n this.length++;\n return true;\n } else {\n return false;\n }\n }\n\n deleteRule(index: number): void {\n this.rules.splice(index, 1);\n this.length--;\n }\n\n getRule(index: number): string {\n if (index < this.length) {\n return this.rules[index];\n } else {\n return '';\n }\n }\n}\n","// @flow\nimport { DISABLE_SPEEDY, IS_BROWSER } from '../constants';\nimport type { GroupedTag, Sheet, SheetOptions } from './types';\nimport { makeTag } from './Tag';\nimport { makeGroupedTag } from './GroupedTag';\nimport { getGroupForId } from './GroupIDAllocator';\nimport { outputSheet, rehydrateSheet } from './Rehydration';\n\nlet SHOULD_REHYDRATE = IS_BROWSER;\n\ntype SheetConstructorArgs = {\n isServer?: boolean,\n useCSSOMInjection?: boolean,\n target?: HTMLElement,\n};\n\ntype GlobalStylesAllocationMap = { [key: string]: number };\ntype NamesAllocationMap = Map<string, Set<string>>;\n\nconst defaultOptions = {\n isServer: !IS_BROWSER,\n useCSSOMInjection: !DISABLE_SPEEDY,\n};\n\n/* Contains the main stylesheet logic for stringification and caching /\nexport default class StyleSheet implements Sheet {\n gs: GlobalStylesAllocationMap;\n\n names: NamesAllocationMap;\n\n options: SheetOptions;\n\n tag: void \| GroupedTag;\n\n /* Register a group ID to give it an index /\n static registerId(id: string): number {\n return getGroupForId(id);\n }\n\n constructor(\n options: SheetConstructorArgs = defaultOptions,\n globalStyles?: GlobalStylesAllocationMap = {},\n names?: NamesAllocationMap\n ) {\n this.options = {\n ...defaultOptions,\n ...options,\n };\n\n this.gs = globalStyles;\n this.names = new Map(names);\n\n // We rehydrate only once and use the sheet that is created first\n if (!this.options.isServer && IS_BROWSER && SHOULD_REHYDRATE) {\n SHOULD_REHYDRATE = false;\n rehydrateSheet(this);\n }\n }\n\n reconstructWithOptions(options: SheetConstructorArgs, withNames?: boolean = true) {\n return new StyleSheet(\n { ...this.options, ...options },\n this.gs,\n (withNames && this.names) \|\| undefined\n );\n }\n\n allocateGSInstance(id: string) {\n return (this.gs[id] = (this.gs[id] \|\| 0) + 1);\n }\n\n /* Lazily initialises a GroupedTag for when it's actually needed /\n getTag(): GroupedTag {\n return this.tag \|\| (this.tag = makeGroupedTag(makeTag(this.options)));\n }\n\n /* Check whether a name is known for caching /\n hasNameForId(id: string, name: string): boolean {\n return this.names.has(id) && (this.names.get(id): any).has(name);\n }\n\n /* Mark a group's name as known for caching /\n registerName(id: string, name: string) {\n getGroupForId(id);\n\n if (!this.names.has(id)) {\n const groupNames = new Set();\n groupNames.add(name);\n this.names.set(id, groupNames);\n } else {\n (this.names.get(id): any).add(name);\n }\n }\n\n /* Insert new rules which also marks the name as known /\n insertRules(id: string, name: string, rules: string[]) {\n this.registerName(id, name);\n this.getTag().insertRules(getGroupForId(id), rules);\n }\n\n /* Clears all cached names for a given group ID /\n clearNames(id: string) {\n if (this.names.has(id)) {\n (this.names.get(id): any).clear();\n }\n }\n\n /* Clears all rules for a given group ID /\n clearRules(id: string) {\n this.getTag().clearGroup(getGroupForId(id));\n this.clearNames(id);\n }\n\n /* Clears the entire tag which deletes all rules but not its names /\n clearTag() {\n // NOTE: This does not clear the names, since it's only used during SSR\n // so that we can continuously output only new rules\n this.tag = undefined;\n }\n\n /* Outputs the current sheet as a CSS string with markers for SSR /\n toString(): string {\n return outputSheet(this);\n }\n}\n","// @flow\nimport React, { useContext, useEffect, useMemo, useState, type Node, type Context } from 'react';\nimport shallowequal from 'shallowequal';\nimport StyleSheet from '../sheet';\nimport createStylisInstance, { type Stringifier } from '../utils/stylis';\n\ntype Props = {\n children?: Node,\n disableCSSOMInjection?: boolean,\n disableVendorPrefixes?: boolean,\n sheet?: StyleSheet,\n stylisPlugins?: Array<Function>,\n target?: HTMLElement,\n};\n\nexport const StyleSheetContext: Context<StyleSheet \| void> = React.createContext();\nexport const StyleSheetConsumer = StyleSheetContext.Consumer;\nexport const StylisContext: Context<Stringifier \| void> = React.createContext();\nexport const StylisConsumer = StylisContext.Consumer;\n\nexport const masterSheet: StyleSheet = new StyleSheet();\nexport const masterStylis: Stringifier = createStylisInstance();\n\nexport function useStyleSheet(): StyleSheet {\n return useContext(StyleSheetContext) \|\| masterSheet;\n}\n\nexport function useStylis(): Stringifier {\n return useContext(StylisContext) \|\| masterStylis;\n}\n\nexport default function StyleSheetManager(props: Props) {\n const [plugins, setPlugins] = useState(props.stylisPlugins);\n const contextStyleSheet = useStyleSheet();\n\n const styleSheet = useMemo(() => {\n let sheet = contextStyleSheet;\n\n if (props.sheet) {\n // eslint-disable-next-line prefer-destructuring\n sheet = props.sheet;\n } else if (props.target) {\n sheet = sheet.reconstructWithOptions({ target: props.target }, false);\n }\n\n if (props.disableCSSOMInjection) {\n sheet = sheet.reconstructWithOptions({ useCSSOMInjection: false });\n }\n\n return sheet;\n }, [props.disableCSSOMInjection, props.sheet, props.target]);\n\n const stylis = useMemo(\n () =>\n createStylisInstance({\n options: { prefix: !props.disableVendorPrefixes },\n plugins,\n }),\n [props.disableVendorPrefixes, plugins]\n );\n\n useEffect(() => {\n if (!shallowequal(plugins, props.stylisPlugins)) setPlugins(props.stylisPlugins);\n }, [props.stylisPlugins]);\n\n return (\n <StyleSheetContext.Provider value={styleSheet}>\n <StylisContext.Provider value={stylis}>\n {process.env.NODE_ENV !== 'production'\n ? React.Children.only(props.children)\n : props.children}\n </StylisContext.Provider>\n </StyleSheetContext.Provider>\n );\n}\n","// @flow\nimport StyleSheet from '../sheet';\nimport { type Stringifier } from '../types';\nimport throwStyledError from '../utils/error';\nimport { masterStylis } from './StyleSheetManager';\n\nexport default class Keyframes {\n id: string;\n\n name: string;\n\n rules: string;\n\n constructor(name: string, rules: string) {\n this.name = name;\n this.id = `sc-keyframes-${name}`;\n this.rules = rules;\n }\n\n inject = (styleSheet: StyleSheet, stylisInstance: Stringifier = masterStylis) => {\n const resolvedName = this.name + stylisInstance.hash;\n\n if (!styleSheet.hasNameForId(this.id, resolvedName)) {\n styleSheet.insertRules(\n this.id,\n resolvedName,\n stylisInstance(this.rules, resolvedName, '@keyframes')\n );\n }\n };\n\n toString = () => {\n return throwStyledError(12, String(this.name));\n };\n\n getName(stylisInstance: Stringifier = masterStylis) {\n return this.name + stylisInstance.hash;\n }\n}\n","// @flow\nimport isFunction from './isFunction';\nimport isStyledComponent from './isStyledComponent';\nimport type { RuleSet } from '../types';\n\nexport default function isStaticRules(rules: RuleSet): boolean {\n for (let i = 0; i < rules.length; i += 1) {\n const rule = rules[i];\n\n if (isFunction(rule) && !isStyledComponent(rule)) {\n // functions are allowed to be static if they're just being\n // used to get the classname of a nested styled component\n return false;\n }\n }\n\n return true;\n}\n","// @flow\nimport validAttr from '@emotion/is-prop-valid';\nimport React, {\n createElement,\n useContext,\n useDebugValue,\n type AbstractComponent,\n type Ref,\n} from 'react';\nimport hoist from 'hoist-non-react-statics';\nimport { SC_VERSION } from '../constants';\nimport merge from '../utils/mixinDeep';\nimport ComponentStyle from './ComponentStyle';\nimport createWarnTooManyClasses from '../utils/createWarnTooManyClasses';\nimport { checkDynamicCreation } from '../utils/checkDynamicCreation';\nimport determineTheme from '../utils/determineTheme';\nimport escape from '../utils/escape';\nimport generateDisplayName from '../utils/generateDisplayName';\nimport getComponentName from '../utils/getComponentName';\nimport generateComponentId from '../utils/generateComponentId';\nimport isFunction from '../utils/isFunction';\nimport isStyledComponent from '../utils/isStyledComponent';\nimport isTag from '../utils/isTag';\nimport joinStrings from '../utils/joinStrings';\nimport { ThemeContext } from './ThemeProvider';\nimport { useStyleSheet, useStylis } from './StyleSheetManager';\nimport { EMPTY_ARRAY, EMPTY_OBJECT } from '../utils/empties';\n\nimport type { Attrs, RuleSet, Target } from '../types';\n\n/ global $Call /\n\nconst identifiers = {};\n\n/ We depend on components having unique IDs /\nfunction generateId(displayName: string, parentComponentId: string) {\n const name = typeof displayName !== 'string' ? 'sc' : escape(displayName);\n // Ensure that no displayName can lead to duplicate componentIds\n identifiers[name] = (identifiers[name] \|\| 0) + 1;\n\n const componentId = `${name}-${generateComponentId(\n // SC_VERSION gives us isolation between multiple runtimes on the page at once\n // this is improved further with use of the babel plugin \"namespace\" feature\n SC_VERSION + name + identifiers[name]\n )}`;\n\n return parentComponentId ? `${parentComponentId}-${componentId}` : componentId;\n}\n\nfunction useResolvedAttrs<Config>(theme: any = EMPTY_OBJECT, props: Config, attrs: Attrs) {\n // NOTE: can't memoize this\n // returns [context, resolvedAttrs]\n // where resolvedAttrs is only the things injected by the attrs themselves\n const context = { ...props, theme };\n const resolvedAttrs = {};\n\n attrs.forEach(attrDef => {\n let resolvedAttrDef = attrDef;\n let key;\n\n if (isFunction(resolvedAttrDef)) {\n resolvedAttrDef = resolvedAttrDef(context);\n }\n\n / eslint-disable guard-for-in /\n for (key in resolvedAttrDef) {\n context[key] = resolvedAttrs[key] =\n key === 'className'\n ? joinStrings(resolvedAttrs[key], resolvedAttrDef[key])\n : resolvedAttrDef[key];\n }\n / eslint-enable guard-for-in /\n });\n\n return [context, resolvedAttrs];\n}\n\ninterface StyledComponentWrapperProperties {\n attrs: Attrs;\n componentStyle: ComponentStyle;\n displayName: string;\n foldedComponentIds: Array<string>;\n target: Target;\n shouldForwardProp: ?(prop: string, isValidAttr: (prop: string) => boolean) => boolean;\n styledComponentId: string;\n warnTooManyClasses: $Call<typeof createWarnTooManyClasses, string, string>;\n}\n\ntype StyledComponentWrapper<Config, Instance> = AbstractComponent<Config, Instance> &\n StyledComponentWrapperProperties;\n\nfunction useInjectedStyle<T>(\n componentStyle: ComponentStyle,\n hasAttrs: boolean,\n resolvedAttrs: T,\n warnTooManyClasses?: $Call<typeof createWarnTooManyClasses, string, string>\n) {\n const styleSheet = useStyleSheet();\n const stylis = useStylis();\n\n // statically styled-components don't need to build an execution context object,\n // and shouldn't be increasing the number of class names\n const isStatic = componentStyle.isStatic && !hasAttrs;\n\n const className = isStatic\n ? componentStyle.generateAndInjectStyles(EMPTY_OBJECT, styleSheet, stylis)\n : componentStyle.generateAndInjectStyles(resolvedAttrs, styleSheet, stylis);\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n if (process.env.NODE_ENV !== 'production') useDebugValue(className);\n\n if (process.env.NODE_ENV !== 'production' && !isStatic && warnTooManyClasses) {\n warnTooManyClasses(className);\n }\n\n return className;\n}\n\nfunction useStyledComponentImpl<Config: {}, Instance>(\n forwardedComponent: StyledComponentWrapper<Config, Instance>,\n props: Object,\n forwardedRef: Ref<any>\n) {\n const {\n attrs: componentAttrs,\n componentStyle,\n // $FlowFixMe\n defaultProps,\n foldedComponentIds,\n // $FlowFixMe\n shouldForwardProp,\n styledComponentId,\n target,\n } = forwardedComponent;\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n if (process.env.NODE_ENV !== 'production') useDebugValue(styledComponentId);\n\n // NOTE: the non-hooks version only subscribes to this when !componentStyle.isStatic,\n // but that'd be against the rules-of-hooks. We could be naughty and do it anyway as it\n // should be an immutable value, but behave for now.\n const theme = determineTheme(props, useContext(ThemeContext), defaultProps);\n\n const [context, attrs] = useResolvedAttrs(theme \|\| EMPTY_OBJECT, props, componentAttrs);\n\n const generatedClassName = useInjectedStyle(\n componentStyle,\n componentAttrs.length > 0,\n context,\n process.env.NODE_ENV !== 'production' ? forwardedComponent.warnTooManyClasses : undefined\n );\n\n const refToForward = forwardedRef;\n\n const elementToBeCreated: Target = attrs.$as \|\| props.$as \|\| attrs.as \|\| props.as \|\| target;\n\n const isTargetTag = isTag(elementToBeCreated);\n const computedProps = attrs !== props ? { ...props, ...attrs } : props;\n const propFilterFn = shouldForwardProp \|\| (isTargetTag && validAttr);\n const propsForElement = {};\n\n // eslint-disable-next-line guard-for-in\n for (const key in computedProps) {\n if (key[0] === '$' \|\| key === 'as') continue;\n else if (key === 'forwardedAs') {\n propsForElement.as = computedProps[key];\n } else if (!propFilterFn \|\| propFilterFn(key, validAttr)) {\n // Don't pass through non HTML tags through to HTML elements\n propsForElement[key] = computedProps[key];\n }\n }\n\n if (props.style && attrs.style !== props.style) {\n propsForElement.style = { ...props.style, ...attrs.style };\n }\n\n propsForElement.className = Array.prototype\n .concat(\n foldedComponentIds,\n styledComponentId,\n generatedClassName !== styledComponentId ? generatedClassName : null,\n props.className,\n attrs.className\n )\n .filter(Boolean)\n .join(' ');\n\n propsForElement.ref = refToForward;\n\n return createElement(elementToBeCreated, propsForElement);\n}\n\nexport default function createStyledComponent(\n target: Target \| StyledComponentWrapper<, >,\n options: Object,\n rules: RuleSet\n) {\n const isTargetStyledComp = isStyledComponent(target);\n const isCompositeComponent = !isTag(target);\n\n const {\n displayName = generateDisplayName(target),\n componentId = generateId(options.displayName, options.parentComponentId),\n attrs = EMPTY_ARRAY,\n } = options;\n\n const styledComponentId =\n options.displayName && options.componentId\n ? `${escape(options.displayName)}-${options.componentId}`\n : options.componentId \|\| componentId;\n\n // fold the underlying StyledComponent attrs up (implicit extend)\n const finalAttrs =\n // $FlowFixMe\n isTargetStyledComp && target.attrs\n ? Array.prototype.concat(target.attrs, attrs).filter(Boolean)\n : attrs;\n\n // eslint-disable-next-line prefer-destructuring\n let shouldForwardProp = options.shouldForwardProp;\n\n // $FlowFixMe\n if (isTargetStyledComp && target.shouldForwardProp) {\n if (shouldForwardProp) {\n // compose nested shouldForwardProp calls\n shouldForwardProp = (prop, filterFn) =>\n // $FlowFixMe\n target.shouldForwardProp(prop, filterFn) && options.shouldForwardProp(prop, filterFn);\n } else {\n // eslint-disable-next-line prefer-destructuring\n shouldForwardProp = target.shouldForwardProp;\n }\n }\n\n const componentStyle = new ComponentStyle(\n rules,\n styledComponentId,\n isTargetStyledComp ? ((target: Object).componentStyle: ComponentStyle) : undefined\n );\n\n /\n forwardRef creates a new interim component, which we'll take advantage of\n * instead of extending ParentComponent to create _another_ interim class\n /\n let WrappedStyledComponent;\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const forwardRef = (props, ref) => useStyledComponentImpl(WrappedStyledComponent, props, ref);\n\n forwardRef.displayName = displayName;\n\n // $FlowFixMe this is a forced cast to merge it StyledComponentWrapperProperties\n WrappedStyledComponent = (React.forwardRef(forwardRef): StyledComponentWrapper<, >);\n\n WrappedStyledComponent.attrs = finalAttrs;\n WrappedStyledComponent.componentStyle = componentStyle;\n WrappedStyledComponent.displayName = displayName;\n WrappedStyledComponent.shouldForwardProp = shouldForwardProp;\n\n // this static is used to preserve the cascade of static classes for component selector\n // purposes; this is especially important with usage of the css prop\n WrappedStyledComponent.foldedComponentIds = isTargetStyledComp\n ? // $FlowFixMe\n Array.prototype.concat(target.foldedComponentIds, target.styledComponentId)\n : EMPTY_ARRAY;\n\n WrappedStyledComponent.styledComponentId = styledComponentId;\n\n // fold the underlying StyledComponent target up since we folded the styles\n WrappedStyledComponent.target = isTargetStyledComp\n ? // $FlowFixMe\n target.target\n : target;\n\n // $FlowFixMe\n WrappedStyledComponent.withComponent = function withComponent(tag: Target) {\n const { componentId: previousComponentId, ...optionsToCopy } = options;\n\n const newComponentId =\n previousComponentId &&\n `${previousComponentId}-${isTag(tag) ? tag : escape(getComponentName(tag))}`;\n\n const newOptions = {\n ...optionsToCopy,\n attrs: finalAttrs,\n componentId: newComponentId,\n };\n\n return createStyledComponent(tag, newOptions, rules);\n };\n\n // $FlowFixMe\n Object.defineProperty(WrappedStyledComponent, 'defaultProps', {\n get() {\n return this._foldedDefaultProps;\n },\n\n set(obj) {\n // $FlowFixMe\n this._foldedDefaultProps = isTargetStyledComp ? merge({}, target.defaultProps, obj) : obj;\n },\n });\n\n if (process.env.NODE_ENV !== 'production') {\n checkDynamicCreation(displayName, styledComponentId);\n\n WrappedStyledComponent.warnTooManyClasses = createWarnTooManyClasses(\n displayName,\n styledComponentId\n );\n }\n\n // $FlowFixMe\n WrappedStyledComponent.toString = () => `.${WrappedStyledComponent.styledComponentId}`;\n\n if (isCompositeComponent) {\n hoist(WrappedStyledComponent, (target: any), {\n // all SC-specific things should not be hoisted\n attrs: true,\n componentStyle: true,\n displayName: true,\n foldedComponentIds: true,\n shouldForwardProp: true,\n self: true,\n styledComponentId: true,\n target: true,\n withComponent: true,\n });\n }\n\n return WrappedStyledComponent;\n}\n","// @flow\nimport flatten from '../utils/flatten';\nimport isStaticRules from '../utils/isStaticRules';\nimport StyleSheet from '../sheet';\n\nimport type { RuleSet, Stringifier } from '../types';\n\nexport default class GlobalStyle {\n componentId: string;\n\n isStatic: boolean;\n\n rules: RuleSet;\n\n constructor(rules: RuleSet, componentId: string) {\n this.rules = rules;\n this.componentId = componentId;\n this.isStatic = isStaticRules(rules);\n }\n\n createStyles(\n instance: number,\n executionContext: Object,\n styleSheet: StyleSheet,\n stylis: Stringifier\n ) {\n const flatCSS = flatten(this.rules, executionContext, styleSheet, stylis);\n const css = stylis(flatCSS.join(''), '');\n const id = this.componentId + instance;\n\n // NOTE: We use the id as a name as well, since these rules never change\n styleSheet.insertRules(id, id, css);\n }\n\n removeStyles(instance: number, styleSheet: StyleSheet) {\n styleSheet.clearRules(this.componentId + instance);\n }\n\n renderStyles(\n instance: number,\n executionContext: Object,\n styleSheet: StyleSheet,\n stylis: Stringifier\n ) {\n StyleSheet.registerId(this.componentId + instance);\n\n // NOTE: Remove old styles, then inject the new ones\n this.removeStyles(instance, styleSheet);\n this.createStyles(instance, executionContext, styleSheet, stylis);\n }\n}\n","// @flow\n/ eslint-disable no-underscore-dangle /\nimport React from 'react';\nimport { IS_BROWSER, SC_ATTR, SC_ATTR_VERSION, SC_VERSION } from '../constants';\nimport throwStyledError from '../utils/error';\nimport getNonce from '../utils/nonce';\nimport StyleSheet from '../sheet';\nimport StyleSheetManager from './StyleSheetManager';\n\ndeclare var __SERVER__: boolean;\n\nconst CLOSING_TAG_R = /^\\s<\\/[a-z]/i;\n\nexport default class ServerStyleSheet {\n isStreaming: boolean;\n\n instance: StyleSheet;\n\n sealed: boolean;\n\n constructor() {\n this.instance = new StyleSheet({ isServer: true });\n this.sealed = false;\n }\n\n _emitSheetCSS = (): string => {\n const css = this.instance.toString();\n const nonce = getNonce();\n const attrs = [nonce && `nonce=\"${nonce}\"`, `${SC_ATTR}=\"true\"`, `${SC_ATTR_VERSION}=\"${SC_VERSION}\"`];\n const htmlAttr = attrs.filter(Boolean).join(' ');\n\n return `<style ${htmlAttr}>${css}</style>`;\n };\n\n collectStyles(children: any) {\n if (this.sealed) {\n return throwStyledError(2);\n }\n\n return <StyleSheetManager sheet={this.instance}>{children}</StyleSheetManager>;\n }\n\n getStyleTags = (): string => {\n if (this.sealed) {\n return throwStyledError(2);\n }\n\n return this._emitSheetCSS();\n };\n\n getStyleElement = () => {\n if (this.sealed) {\n return throwStyledError(2);\n }\n\n const props = {\n [SC_ATTR]: '',\n [SC_ATTR_VERSION]: SC_VERSION,\n dangerouslySetInnerHTML: {\n __html: this.instance.toString(),\n },\n };\n\n const nonce = getNonce();\n if (nonce) {\n (props: any).nonce = nonce;\n }\n\n // v4 returned an array for this fn, so we'll do the same for v5 for backward compat\n return [<style {...props} key=\"sc-0-0\" />];\n };\n\n // eslint-disable-next-line consistent-return\n interleaveWithNodeStream(input: any) {\n if (!__SERVER__ \|\| IS_BROWSER) {\n return throwStyledError(3);\n } else if (this.sealed) {\n return throwStyledError(2);\n }\n\n if (__SERVER__) {\n this.seal();\n\n // eslint-disable-next-line global-require\n const { Readable, Transform } = require('stream');\n\n const readableStream: Readable = input;\n const { instance: sheet, _emitSheetCSS } = this;\n\n const transformer = new Transform({\n transform: function appendStyleChunks(chunk, /* encoding */ _, callback) {\n // Get the chunk and retrieve the sheet's CSS as an HTML chunk,\n // then reset its rules so we get only new ones for the next chunk\n const renderedHtml = chunk.toString();\n const html = _emitSheetCSS();\n\n sheet.clearTag();\n\n // prepend style html to chunk, unless the start of the chunk is a\n // closing tag in which case append right after that\n if (CLOSING_TAG_R.test(renderedHtml)) {\n const endOfClosingTag = renderedHtml.indexOf('>') + 1;\n const before = renderedHtml.slice(0, endOfClosingTag);\n const after = renderedHtml.slice(endOfClosingTag);\n\n this.push(before + html + after);\n } else {\n this.push(html + renderedHtml);\n }\n\n callback();\n },\n });\n\n readableStream.on('error', err => {\n // forward the error to the transform stream\n transformer.emit('error', err);\n });\n\n return readableStream.pipe(transformer);\n }\n }\n\n seal = () => {\n this.sealed = true;\n };\n}\n"],"names":["nodes","insertRule","names","id","stylisPlugins","isCompositeComponent","flatten","React"],"mappings":"2iCAGgC,w9KCmFNA,gHAgBxBC,WAAA,+8DC5DQC,yxBAmC8BC,iOAkBVA,sxDChEiBC,iwBCZGD,isECdG,mwFCqJ3B,sUAuClBE,4lHC3KYC,kCAEVH,2tBCyCEI"}
1	+ {"version":3,"file":"styled-components.browser.cjs.js","sources":["../src/constants.js","../src/sheet/Tag.js","../src/sheet/Sheet.js","../src/models/StyleSheetManager.js","../src/models/Keyframes.js","../src/utils/isStaticRules.js","../src/models/StyledComponent.js","../src/models/GlobalStyle.js","../src/models/ServerStyleSheet.js"],"sourcesContent":["// @flow\n\ndeclare var SC_DISABLE_SPEEDY: ?boolean;\ndeclare var __VERSION__: string;\n\nexport const SC_ATTR =\n (typeof process !== 'undefined' && (process.env.REACT_APP_SC_ATTR \|\| process.env.SC_ATTR)) \|\|\n 'data-styled';\n\nexport const SC_ATTR_ACTIVE = 'active';\nexport const SC_ATTR_VERSION = 'data-styled-version';\nexport const SC_VERSION = __VERSION__;\nexport const SPLITTER = '/!sc/\\n';\n\nexport const IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;\n\nexport const DISABLE_SPEEDY =\n (typeof SC_DISABLE_SPEEDY === 'boolean' && SC_DISABLE_SPEEDY) \|\|\n (typeof process !== 'undefined' &&\n (process.env.REACT_APP_SC_DISABLE_SPEEDY \|\| process.env.SC_DISABLE_SPEEDY)) \|\|\n process.env.NODE_ENV !== 'production';\n\n// Shared empty execution context when generating static styles\nexport const STATIC_EXECUTION_CONTEXT = {};\n","// @flow\n/* eslint-disable no-use-before-define /\n\nimport { makeStyleTag, getSheet } from './dom';\nimport type { SheetOptions, Tag } from './types';\n\n/* Create a CSSStyleSheet-like tag depending on the environment /\nexport const makeTag = ({ isServer, useCSSOMInjection, target }: SheetOptions): Tag => {\n if (isServer) {\n return new VirtualTag(target);\n } else if (useCSSOMInjection) {\n return new CSSOMTag(target);\n } else {\n return new TextTag(target);\n }\n};\n\nexport class CSSOMTag implements Tag {\n element: HTMLStyleElement;\n\n sheet: CSSStyleSheet;\n\n length: number;\n\n constructor(target?: HTMLElement) {\n const element = (this.element = makeStyleTag(target));\n\n // Avoid Edge bug where empty style elements don't create sheets\n element.appendChild(document.createTextNode(''));\n\n this.sheet = getSheet(element);\n this.length = 0;\n }\n\n insertRule(index: number, rule: string): boolean {\n try {\n this.sheet.insertRule(rule, index);\n this.length++;\n return true;\n } catch (_error) {\n return false;\n }\n }\n\n deleteRule(index: number): void {\n this.sheet.deleteRule(index);\n this.length--;\n }\n\n getRule(index: number): string {\n const rule = this.sheet.cssRules[index];\n // Avoid IE11 quirk where cssText is inaccessible on some invalid rules\n if (rule !== undefined && typeof rule.cssText === 'string') {\n return rule.cssText;\n } else {\n return '';\n }\n }\n}\n\n/* A Tag that emulates the CSSStyleSheet API but uses text nodes /\nexport class TextTag implements Tag {\n element: HTMLStyleElement;\n\n nodes: NodeList<Node>;\n\n length: number;\n\n constructor(target?: HTMLElement) {\n const element = (this.element = makeStyleTag(target));\n this.nodes = element.childNodes;\n this.length = 0;\n }\n\n insertRule(index: number, rule: string): boolean {\n if (index <= this.length && index >= 0) {\n const node = document.createTextNode(rule);\n const refNode = this.nodes[index];\n this.element.insertBefore(node, refNode \|\| null);\n this.length++;\n return true;\n } else {\n return false;\n }\n }\n\n deleteRule(index: number): void {\n this.element.removeChild(this.nodes[index]);\n this.length--;\n }\n\n getRule(index: number): string {\n if (index < this.length) {\n return this.nodes[index].textContent;\n } else {\n return '';\n }\n }\n}\n\n/* A completely virtual (server-side) Tag that doesn't manipulate the DOM /\nexport class VirtualTag implements Tag {\n rules: string[];\n\n length: number;\n\n constructor(_target?: HTMLElement) {\n this.rules = [];\n this.length = 0;\n }\n\n insertRule(index: number, rule: string): boolean {\n if (index <= this.length) {\n this.rules.splice(index, 0, rule);\n this.length++;\n return true;\n } else {\n return false;\n }\n }\n\n deleteRule(index: number): void {\n this.rules.splice(index, 1);\n this.length--;\n }\n\n getRule(index: number): string {\n if (index < this.length) {\n return this.rules[index];\n } else {\n return '';\n }\n }\n}\n","// @flow\nimport { DISABLE_SPEEDY, IS_BROWSER } from '../constants';\nimport type { GroupedTag, Sheet, SheetOptions } from './types';\nimport { makeTag } from './Tag';\nimport { makeGroupedTag } from './GroupedTag';\nimport { getGroupForId } from './GroupIDAllocator';\nimport { outputSheet, rehydrateSheet } from './Rehydration';\n\nlet SHOULD_REHYDRATE = IS_BROWSER;\n\ntype SheetConstructorArgs = {\n isServer?: boolean,\n useCSSOMInjection?: boolean,\n target?: HTMLElement,\n};\n\ntype GlobalStylesAllocationMap = { [key: string]: number };\ntype NamesAllocationMap = Map<string, Set<string>>;\n\nconst defaultOptions = {\n isServer: !IS_BROWSER,\n useCSSOMInjection: !DISABLE_SPEEDY,\n};\n\n/* Contains the main stylesheet logic for stringification and caching /\nexport default class StyleSheet implements Sheet {\n gs: GlobalStylesAllocationMap;\n\n names: NamesAllocationMap;\n\n options: SheetOptions;\n\n tag: void \| GroupedTag;\n\n /* Register a group ID to give it an index /\n static registerId(id: string): number {\n return getGroupForId(id);\n }\n\n constructor(\n options: SheetConstructorArgs = defaultOptions,\n globalStyles?: GlobalStylesAllocationMap = {},\n names?: NamesAllocationMap\n ) {\n this.options = {\n ...defaultOptions,\n ...options,\n };\n\n this.gs = globalStyles;\n this.names = new Map(names);\n\n // We rehydrate only once and use the sheet that is created first\n if (!this.options.isServer && IS_BROWSER && SHOULD_REHYDRATE) {\n SHOULD_REHYDRATE = false;\n rehydrateSheet(this);\n }\n }\n\n reconstructWithOptions(options: SheetConstructorArgs, withNames?: boolean = true) {\n return new StyleSheet(\n { ...this.options, ...options },\n this.gs,\n (withNames && this.names) \|\| undefined\n );\n }\n\n allocateGSInstance(id: string) {\n return (this.gs[id] = (this.gs[id] \|\| 0) + 1);\n }\n\n /* Lazily initialises a GroupedTag for when it's actually needed /\n getTag(): GroupedTag {\n return this.tag \|\| (this.tag = makeGroupedTag(makeTag(this.options)));\n }\n\n /* Check whether a name is known for caching /\n hasNameForId(id: string, name: string): boolean {\n return this.names.has(id) && (this.names.get(id): any).has(name);\n }\n\n /* Mark a group's name as known for caching /\n registerName(id: string, name: string) {\n getGroupForId(id);\n\n if (!this.names.has(id)) {\n const groupNames = new Set();\n groupNames.add(name);\n this.names.set(id, groupNames);\n } else {\n (this.names.get(id): any).add(name);\n }\n }\n\n /* Insert new rules which also marks the name as known /\n insertRules(id: string, name: string, rules: string[]) {\n this.registerName(id, name);\n this.getTag().insertRules(getGroupForId(id), rules);\n }\n\n /* Clears all cached names for a given group ID /\n clearNames(id: string) {\n if (this.names.has(id)) {\n (this.names.get(id): any).clear();\n }\n }\n\n /* Clears all rules for a given group ID /\n clearRules(id: string) {\n this.getTag().clearGroup(getGroupForId(id));\n this.clearNames(id);\n }\n\n /* Clears the entire tag which deletes all rules but not its names /\n clearTag() {\n // NOTE: This does not clear the names, since it's only used during SSR\n // so that we can continuously output only new rules\n this.tag = undefined;\n }\n\n /* Outputs the current sheet as a CSS string with markers for SSR /\n toString(): string {\n return outputSheet(this);\n }\n}\n","// @flow\nimport React, { useContext, useEffect, useMemo, useState, type Node, type Context } from 'react';\nimport shallowequal from 'shallowequal';\nimport StyleSheet from '../sheet';\nimport createStylisInstance, { type Stringifier } from '../utils/stylis';\n\ntype Props = {\n children?: Node,\n disableCSSOMInjection?: boolean,\n disableVendorPrefixes?: boolean,\n sheet?: StyleSheet,\n stylisPlugins?: Array<Function>,\n target?: HTMLElement,\n};\n\nexport const StyleSheetContext: Context<StyleSheet \| void> = React.createContext();\nexport const StyleSheetConsumer = StyleSheetContext.Consumer;\nexport const StylisContext: Context<Stringifier \| void> = React.createContext();\nexport const StylisConsumer = StylisContext.Consumer;\n\nexport const masterSheet: StyleSheet = new StyleSheet();\nexport const masterStylis: Stringifier = createStylisInstance();\n\nexport function useStyleSheet(): StyleSheet {\n return useContext(StyleSheetContext) \|\| masterSheet;\n}\n\nexport function useStylis(): Stringifier {\n return useContext(StylisContext) \|\| masterStylis;\n}\n\nexport default function StyleSheetManager(props: Props) {\n const [plugins, setPlugins] = useState(props.stylisPlugins);\n const contextStyleSheet = useStyleSheet();\n\n const styleSheet = useMemo(() => {\n let sheet = contextStyleSheet;\n\n if (props.sheet) {\n // eslint-disable-next-line prefer-destructuring\n sheet = props.sheet;\n } else if (props.target) {\n sheet = sheet.reconstructWithOptions({ target: props.target }, false);\n }\n\n if (props.disableCSSOMInjection) {\n sheet = sheet.reconstructWithOptions({ useCSSOMInjection: false });\n }\n\n return sheet;\n }, [props.disableCSSOMInjection, props.sheet, props.target]);\n\n const stylis = useMemo(\n () =>\n createStylisInstance({\n options: { prefix: !props.disableVendorPrefixes },\n plugins,\n }),\n [props.disableVendorPrefixes, plugins]\n );\n\n useEffect(() => {\n if (!shallowequal(plugins, props.stylisPlugins)) setPlugins(props.stylisPlugins);\n }, [props.stylisPlugins]);\n\n return (\n <StyleSheetContext.Provider value={styleSheet}>\n <StylisContext.Provider value={stylis}>\n {process.env.NODE_ENV !== 'production'\n ? React.Children.only(props.children)\n : props.children}\n </StylisContext.Provider>\n </StyleSheetContext.Provider>\n );\n}\n","// @flow\nimport StyleSheet from '../sheet';\nimport { type Stringifier } from '../types';\nimport throwStyledError from '../utils/error';\nimport { masterStylis } from './StyleSheetManager';\n\nexport default class Keyframes {\n id: string;\n\n name: string;\n\n rules: string;\n\n constructor(name: string, rules: string) {\n this.name = name;\n this.id = `sc-keyframes-${name}`;\n this.rules = rules;\n }\n\n inject = (styleSheet: StyleSheet, stylisInstance: Stringifier = masterStylis) => {\n const resolvedName = this.name + stylisInstance.hash;\n\n if (!styleSheet.hasNameForId(this.id, resolvedName)) {\n styleSheet.insertRules(\n this.id,\n resolvedName,\n stylisInstance(this.rules, resolvedName, '@keyframes')\n );\n }\n };\n\n toString = () => {\n return throwStyledError(12, String(this.name));\n };\n\n getName(stylisInstance: Stringifier = masterStylis) {\n return this.name + stylisInstance.hash;\n }\n}\n","// @flow\nimport isFunction from './isFunction';\nimport isStyledComponent from './isStyledComponent';\nimport type { RuleSet } from '../types';\n\nexport default function isStaticRules(rules: RuleSet): boolean {\n for (let i = 0; i < rules.length; i += 1) {\n const rule = rules[i];\n\n if (isFunction(rule) && !isStyledComponent(rule)) {\n // functions are allowed to be static if they're just being\n // used to get the classname of a nested styled component\n return false;\n }\n }\n\n return true;\n}\n","// @flow\nimport validAttr from '@emotion/is-prop-valid';\nimport React, {\n createElement,\n useContext,\n useDebugValue,\n type AbstractComponent,\n type Ref,\n} from 'react';\nimport hoist from 'hoist-non-react-statics';\nimport { SC_VERSION } from '../constants';\nimport merge from '../utils/mixinDeep';\nimport ComponentStyle from './ComponentStyle';\nimport createWarnTooManyClasses from '../utils/createWarnTooManyClasses';\nimport { checkDynamicCreation } from '../utils/checkDynamicCreation';\nimport determineTheme from '../utils/determineTheme';\nimport escape from '../utils/escape';\nimport generateDisplayName from '../utils/generateDisplayName';\nimport getComponentName from '../utils/getComponentName';\nimport generateComponentId from '../utils/generateComponentId';\nimport isFunction from '../utils/isFunction';\nimport isStyledComponent from '../utils/isStyledComponent';\nimport isTag from '../utils/isTag';\nimport joinStrings from '../utils/joinStrings';\nimport { ThemeContext } from './ThemeProvider';\nimport { useStyleSheet, useStylis } from './StyleSheetManager';\nimport { EMPTY_ARRAY, EMPTY_OBJECT } from '../utils/empties';\n\nimport type { Attrs, RuleSet, Target } from '../types';\n\n/ global $Call /\n\nconst identifiers = {};\n\n/ We depend on components having unique IDs /\nfunction generateId(displayName: string, parentComponentId: string) {\n const name = typeof displayName !== 'string' ? 'sc' : escape(displayName);\n // Ensure that no displayName can lead to duplicate componentIds\n identifiers[name] = (identifiers[name] \|\| 0) + 1;\n\n const componentId = `${name}-${generateComponentId(\n // SC_VERSION gives us isolation between multiple runtimes on the page at once\n // this is improved further with use of the babel plugin \"namespace\" feature\n SC_VERSION + name + identifiers[name]\n )}`;\n\n return parentComponentId ? `${parentComponentId}-${componentId}` : componentId;\n}\n\nfunction useResolvedAttrs<Config>(theme: any = EMPTY_OBJECT, props: Config, attrs: Attrs) {\n // NOTE: can't memoize this\n // returns [context, resolvedAttrs]\n // where resolvedAttrs is only the things injected by the attrs themselves\n const context = { ...props, theme };\n const resolvedAttrs = {};\n\n attrs.forEach(attrDef => {\n let resolvedAttrDef = attrDef;\n let key;\n\n if (isFunction(resolvedAttrDef)) {\n resolvedAttrDef = resolvedAttrDef(context);\n }\n\n / eslint-disable guard-for-in /\n for (key in resolvedAttrDef) {\n context[key] = resolvedAttrs[key] =\n key === 'className'\n ? joinStrings(resolvedAttrs[key], resolvedAttrDef[key])\n : resolvedAttrDef[key];\n }\n / eslint-enable guard-for-in /\n });\n\n return [context, resolvedAttrs];\n}\n\ninterface StyledComponentWrapperProperties {\n attrs: Attrs;\n componentStyle: ComponentStyle;\n displayName: string;\n foldedComponentIds: Array<string>;\n target: Target;\n shouldForwardProp: ?(prop: string, isValidAttr: (prop: string) => boolean) => boolean;\n styledComponentId: string;\n warnTooManyClasses: $Call<typeof createWarnTooManyClasses, string, string>;\n}\n\ntype StyledComponentWrapper<Config, Instance> = AbstractComponent<Config, Instance> &\n StyledComponentWrapperProperties;\n\nfunction useInjectedStyle<T>(\n componentStyle: ComponentStyle,\n hasAttrs: boolean,\n resolvedAttrs: T,\n warnTooManyClasses?: $Call<typeof createWarnTooManyClasses, string, string>\n) {\n const styleSheet = useStyleSheet();\n const stylis = useStylis();\n\n // statically styled-components don't need to build an execution context object,\n // and shouldn't be increasing the number of class names\n const isStatic = componentStyle.isStatic && !hasAttrs;\n\n const className = isStatic\n ? componentStyle.generateAndInjectStyles(EMPTY_OBJECT, styleSheet, stylis)\n : componentStyle.generateAndInjectStyles(resolvedAttrs, styleSheet, stylis);\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n if (process.env.NODE_ENV !== 'production') useDebugValue(className);\n\n if (process.env.NODE_ENV !== 'production' && !isStatic && warnTooManyClasses) {\n warnTooManyClasses(className);\n }\n\n return className;\n}\n\nfunction useStyledComponentImpl<Config: {}, Instance>(\n forwardedComponent: StyledComponentWrapper<Config, Instance>,\n props: Object,\n forwardedRef: Ref<any>\n) {\n const {\n attrs: componentAttrs,\n componentStyle,\n // $FlowFixMe\n defaultProps,\n foldedComponentIds,\n // $FlowFixMe\n shouldForwardProp,\n styledComponentId,\n target,\n } = forwardedComponent;\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n if (process.env.NODE_ENV !== 'production') useDebugValue(styledComponentId);\n\n // NOTE: the non-hooks version only subscribes to this when !componentStyle.isStatic,\n // but that'd be against the rules-of-hooks. We could be naughty and do it anyway as it\n // should be an immutable value, but behave for now.\n const theme = determineTheme(props, useContext(ThemeContext), defaultProps);\n\n const [context, attrs] = useResolvedAttrs(theme \|\| EMPTY_OBJECT, props, componentAttrs);\n\n const generatedClassName = useInjectedStyle(\n componentStyle,\n componentAttrs.length > 0,\n context,\n process.env.NODE_ENV !== 'production' ? forwardedComponent.warnTooManyClasses : undefined\n );\n\n const refToForward = forwardedRef;\n\n const elementToBeCreated: Target = attrs.$as \|\| props.$as \|\| attrs.as \|\| props.as \|\| target;\n\n const isTargetTag = isTag(elementToBeCreated);\n const computedProps = attrs !== props ? { ...props, ...attrs } : props;\n const propFilterFn = shouldForwardProp \|\| (isTargetTag && validAttr);\n const propsForElement = {};\n\n // eslint-disable-next-line guard-for-in\n for (const key in computedProps) {\n if (key[0] === '$' \|\| key === 'as') continue;\n else if (key === 'forwardedAs') {\n propsForElement.as = computedProps[key];\n } else if (!propFilterFn \|\| propFilterFn(key, validAttr)) {\n // Don't pass through non HTML tags through to HTML elements\n propsForElement[key] = computedProps[key];\n }\n }\n\n if (props.style && attrs.style !== props.style) {\n propsForElement.style = { ...props.style, ...attrs.style };\n }\n\n propsForElement.className = Array.prototype\n .concat(\n foldedComponentIds,\n styledComponentId,\n generatedClassName !== styledComponentId ? generatedClassName : null,\n props.className,\n attrs.className\n )\n .filter(Boolean)\n .join(' ');\n\n propsForElement.ref = refToForward;\n\n return createElement(elementToBeCreated, propsForElement);\n}\n\nexport default function createStyledComponent(\n target: Target \| StyledComponentWrapper<, >,\n options: Object,\n rules: RuleSet\n) {\n const isTargetStyledComp = isStyledComponent(target);\n const isCompositeComponent = !isTag(target);\n\n const {\n displayName = generateDisplayName(target),\n componentId = generateId(options.displayName, options.parentComponentId),\n attrs = EMPTY_ARRAY,\n } = options;\n\n const styledComponentId =\n options.displayName && options.componentId\n ? `${escape(options.displayName)}-${options.componentId}`\n : options.componentId \|\| componentId;\n\n // fold the underlying StyledComponent attrs up (implicit extend)\n const finalAttrs =\n // $FlowFixMe\n isTargetStyledComp && target.attrs\n ? Array.prototype.concat(target.attrs, attrs).filter(Boolean)\n : attrs;\n\n // eslint-disable-next-line prefer-destructuring\n let shouldForwardProp = options.shouldForwardProp;\n\n // $FlowFixMe\n if (isTargetStyledComp && target.shouldForwardProp) {\n if (shouldForwardProp) {\n // compose nested shouldForwardProp calls\n shouldForwardProp = (prop, filterFn) =>\n // $FlowFixMe\n target.shouldForwardProp(prop, filterFn) && options.shouldForwardProp(prop, filterFn);\n } else {\n // eslint-disable-next-line prefer-destructuring\n shouldForwardProp = target.shouldForwardProp;\n }\n }\n\n const componentStyle = new ComponentStyle(\n rules,\n styledComponentId,\n isTargetStyledComp ? ((target: Object).componentStyle: ComponentStyle) : undefined\n );\n\n /\n forwardRef creates a new interim component, which we'll take advantage of\n * instead of extending ParentComponent to create _another_ interim class\n /\n let WrappedStyledComponent;\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const forwardRef = (props, ref) => useStyledComponentImpl(WrappedStyledComponent, props, ref);\n\n forwardRef.displayName = displayName;\n\n // $FlowFixMe this is a forced cast to merge it StyledComponentWrapperProperties\n WrappedStyledComponent = (React.forwardRef(forwardRef): StyledComponentWrapper<, >);\n\n WrappedStyledComponent.attrs = finalAttrs;\n WrappedStyledComponent.componentStyle = componentStyle;\n WrappedStyledComponent.displayName = displayName;\n WrappedStyledComponent.shouldForwardProp = shouldForwardProp;\n\n // this static is used to preserve the cascade of static classes for component selector\n // purposes; this is especially important with usage of the css prop\n WrappedStyledComponent.foldedComponentIds = isTargetStyledComp\n ? // $FlowFixMe\n Array.prototype.concat(target.foldedComponentIds, target.styledComponentId)\n : EMPTY_ARRAY;\n\n WrappedStyledComponent.styledComponentId = styledComponentId;\n\n // fold the underlying StyledComponent target up since we folded the styles\n WrappedStyledComponent.target = isTargetStyledComp\n ? // $FlowFixMe\n target.target\n : target;\n\n // $FlowFixMe\n WrappedStyledComponent.withComponent = function withComponent(tag: Target) {\n const { componentId: previousComponentId, ...optionsToCopy } = options;\n\n const newComponentId =\n previousComponentId &&\n `${previousComponentId}-${isTag(tag) ? tag : escape(getComponentName(tag))}`;\n\n const newOptions = {\n ...optionsToCopy,\n attrs: finalAttrs,\n componentId: newComponentId,\n };\n\n return createStyledComponent(tag, newOptions, rules);\n };\n\n // $FlowFixMe\n Object.defineProperty(WrappedStyledComponent, 'defaultProps', {\n get() {\n return this._foldedDefaultProps;\n },\n\n set(obj) {\n // $FlowFixMe\n this._foldedDefaultProps = isTargetStyledComp ? merge({}, target.defaultProps, obj) : obj;\n },\n });\n\n if (process.env.NODE_ENV !== 'production') {\n checkDynamicCreation(displayName, styledComponentId);\n\n WrappedStyledComponent.warnTooManyClasses = createWarnTooManyClasses(\n displayName,\n styledComponentId\n );\n }\n\n // $FlowFixMe\n WrappedStyledComponent.toString = () => `.${WrappedStyledComponent.styledComponentId}`;\n\n if (isCompositeComponent) {\n hoist(WrappedStyledComponent, (target: any), {\n // all SC-specific things should not be hoisted\n attrs: true,\n componentStyle: true,\n displayName: true,\n foldedComponentIds: true,\n shouldForwardProp: true,\n self: true,\n styledComponentId: true,\n target: true,\n withComponent: true,\n });\n }\n\n return WrappedStyledComponent;\n}\n","// @flow\nimport StyleSheet from '../sheet';\nimport type { RuleSet, Stringifier } from '../types';\nimport flatten from '../utils/flatten';\nimport isStaticRules from '../utils/isStaticRules';\n\nexport default class GlobalStyle {\n componentId: string;\n\n isStatic: boolean;\n\n rules: RuleSet;\n\n constructor(rules: RuleSet, componentId: string) {\n this.rules = rules;\n this.componentId = componentId;\n this.isStatic = isStaticRules(rules);\n\n // pre-register the first instance to ensure global styles\n // load before component ones\n StyleSheet.registerId(this.componentId + 1);\n }\n\n createStyles(\n instance: number,\n executionContext: Object,\n styleSheet: StyleSheet,\n stylis: Stringifier\n ) {\n const flatCSS = flatten(this.rules, executionContext, styleSheet, stylis);\n const css = stylis(flatCSS.join(''), '');\n const id = this.componentId + instance;\n\n // NOTE: We use the id as a name as well, since these rules never change\n styleSheet.insertRules(id, id, css);\n }\n\n removeStyles(instance: number, styleSheet: StyleSheet) {\n styleSheet.clearRules(this.componentId + instance);\n }\n\n renderStyles(\n instance: number,\n executionContext: Object,\n styleSheet: StyleSheet,\n stylis: Stringifier\n ) {\n if (instance > 2) StyleSheet.registerId(this.componentId + instance);\n\n // NOTE: Remove old styles, then inject the new ones\n this.removeStyles(instance, styleSheet);\n this.createStyles(instance, executionContext, styleSheet, stylis);\n }\n}\n","// @flow\n/ eslint-disable no-underscore-dangle /\nimport React from 'react';\nimport { IS_BROWSER, SC_ATTR, SC_ATTR_VERSION, SC_VERSION } from '../constants';\nimport throwStyledError from '../utils/error';\nimport getNonce from '../utils/nonce';\nimport StyleSheet from '../sheet';\nimport StyleSheetManager from './StyleSheetManager';\n\ndeclare var __SERVER__: boolean;\n\nconst CLOSING_TAG_R = /^\\s<\\/[a-z]/i;\n\nexport default class ServerStyleSheet {\n isStreaming: boolean;\n\n instance: StyleSheet;\n\n sealed: boolean;\n\n constructor() {\n this.instance = new StyleSheet({ isServer: true });\n this.sealed = false;\n }\n\n _emitSheetCSS = (): string => {\n const css = this.instance.toString();\n const nonce = getNonce();\n const attrs = [nonce && `nonce=\"${nonce}\"`, `${SC_ATTR}=\"true\"`, `${SC_ATTR_VERSION}=\"${SC_VERSION}\"`];\n const htmlAttr = attrs.filter(Boolean).join(' ');\n\n return `<style ${htmlAttr}>${css}</style>`;\n };\n\n collectStyles(children: any) {\n if (this.sealed) {\n return throwStyledError(2);\n }\n\n return <StyleSheetManager sheet={this.instance}>{children}</StyleSheetManager>;\n }\n\n getStyleTags = (): string => {\n if (this.sealed) {\n return throwStyledError(2);\n }\n\n return this._emitSheetCSS();\n };\n\n getStyleElement = () => {\n if (this.sealed) {\n return throwStyledError(2);\n }\n\n const props = {\n [SC_ATTR]: '',\n [SC_ATTR_VERSION]: SC_VERSION,\n dangerouslySetInnerHTML: {\n __html: this.instance.toString(),\n },\n };\n\n const nonce = getNonce();\n if (nonce) {\n (props: any).nonce = nonce;\n }\n\n // v4 returned an array for this fn, so we'll do the same for v5 for backward compat\n return [<style {...props} key=\"sc-0-0\" />];\n };\n\n // eslint-disable-next-line consistent-return\n interleaveWithNodeStream(input: any) {\n if (!__SERVER__ \|\| IS_BROWSER) {\n return throwStyledError(3);\n } else if (this.sealed) {\n return throwStyledError(2);\n }\n\n if (__SERVER__) {\n this.seal();\n\n // eslint-disable-next-line global-require\n const { Readable, Transform } = require('stream');\n\n const readableStream: Readable = input;\n const { instance: sheet, _emitSheetCSS } = this;\n\n const transformer = new Transform({\n transform: function appendStyleChunks(chunk, /* encoding */ _, callback) {\n // Get the chunk and retrieve the sheet's CSS as an HTML chunk,\n // then reset its rules so we get only new ones for the next chunk\n const renderedHtml = chunk.toString();\n const html = _emitSheetCSS();\n\n sheet.clearTag();\n\n // prepend style html to chunk, unless the start of the chunk is a\n // closing tag in which case append right after that\n if (CLOSING_TAG_R.test(renderedHtml)) {\n const endOfClosingTag = renderedHtml.indexOf('>') + 1;\n const before = renderedHtml.slice(0, endOfClosingTag);\n const after = renderedHtml.slice(endOfClosingTag);\n\n this.push(before + html + after);\n } else {\n this.push(html + renderedHtml);\n }\n\n callback();\n },\n });\n\n readableStream.on('error', err => {\n // forward the error to the transform stream\n transformer.emit('error', err);\n });\n\n return readableStream.pipe(transformer);\n }\n }\n\n seal = () => {\n this.sealed = true;\n };\n}\n"],"names":["nodes","insertRule","names","id","stylisPlugins","isCompositeComponent","flatten","React"],"mappings":"yiCAGgC,68KCmFNA,gHAgBxBC,WAAA,+8DC5DQC,yxBAmC8BC,iOAkBVA,ixDChEiBC,gwBCZGD,4vECdG,69DC4L7CE,6/CAvCkB,owGCjINC,kCAEVH,2tBCsCEI"}

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

@@ -1,2 +1,2 @@
-import{typeOf as e,isElement as t,isValidElementType as n}from"react-is";import r,{useState as o,useContext as i,useMemo as s,useEffect as a,useRef as c,createElement as u,useDebugValue as l}from"react";import d from"shallowequal";import h from"@emotion/stylis";import p from"@emotion/unitless";import f from"@emotion/is-prop-valid";import m from"hoist-non-react-statics";function y(){return(y=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}).apply(this,arguments)}var v=function(e,t){for(var n=[e[0]],r=0,o=t.length;r<o;r+=1)n.push(t[r],e[r+1]);return n},g=function(t){return null!==t&&"object"==typeof t&&"[object Object]"===(t.toString?t.toString():Object.prototype.toString.call(t))&&!e(t)},S=Object.freeze([]),w=Object.freeze({});function b(e){return"function"==typeof e}function N(e){return"production"!==process.env.NODE_ENV&&("string"==typeof e&&e)||e.displayName||e.name||"Component"}function E(e){return e&&"string"==typeof e.styledComponentId}var C="undefined"!=typeof process&&(process.env.REACT_APP_SC_ATTR||process.env.SC_ATTR)||"data-styled",I="5.2.0-test.6",A="undefined"!=typeof window&&"HTMLElement"in window,_="boolean"==typeof SC_DISABLE_SPEEDY&&SC_DISABLE_SPEEDY||"undefined"!=typeof process&&(process.env.REACT_APP_SC_DISABLE_SPEEDY||process.env.SC_DISABLE_SPEEDY)||"production"!==process.env.NODE_ENV,O={},P=function(){return"undefined"!=typeof __webpack_nonce__?__webpack_nonce__:null},R="production"!==process.env.NODE_ENV?{1:"Cannot create styled-component for component: %s.\n\n",2:"Can't collect styles once you've consumed a `ServerStyleSheet`'s styles! `ServerStyleSheet` is a one off instance for each server-side render cycle.\n\n- Are you trying to reuse it across renders?\n- Are you accidentally calling collectStyles twice?\n\n",3:"Streaming SSR is only supported in a Node.js environment; Please do not try to call this method in the browser.\n\n",4:"The `StyleSheetManager` expects a valid target or sheet prop!\n\n- Does this error occur on the client and is your target falsy?\n- Does this error occur on the server and is the sheet falsy?\n\n",5:"The clone method cannot be used on the client!\n\n- Are you running in a client-like environment on the server?\n- Are you trying to run SSR on the client?\n\n",6:"Trying to insert a new style tag, but the given Node is unmounted!\n\n- Are you using a custom target that isn't mounted?\n- Does your document not have a valid head element?\n- Have you accidentally removed a style tag manually?\n\n",7:'ThemeProvider: Please return an object from your "theme" prop function, e.g.\n\n```js\ntheme={() => ({})}\n```\n\n',8:'ThemeProvider: Please make your "theme" prop an object.\n\n',9:"Missing document `<head>`\n\n",10:"Cannot find a StyleSheet instance. Usually this happens if there are multiple copies of styled-components loaded at once. Check out this issue for how to troubleshoot and fix the common cases where this situation can happen: https://github.com/styled-components/styled-components/issues/1941#issuecomment-417862021\n\n",11:"_This error was replaced with a dev-time warning, it will be deleted for v4 final._ [createGlobalStyle] received children which will not be rendered. Please use the component without passing children elements.\n\n",12:"It seems you are interpolating a keyframe declaration (%s) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\\`\\` helper which ensures the styles are injected correctly. See https://www.styled-components.com/docs/api#css\n\n",13:"%s is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.\n\n",14:'ThemeProvider: "theme" prop is required.\n\n',15:"A stylis plugin has been supplied that is not named. We need a name for each plugin to be able to prevent styling collisions between different stylis configurations within the same app. Before you pass your plugin to `<StyleSheetManager stylisPlugins={[]}>`, please make sure each plugin is uniquely-named, e.g.\n\n```js\nObject.defineProperty(importedPlugin, 'name', { value: 'some-unique-name' });\n```\n\n",16:"Reached the limit of how many styled components may be created at group %s.\nYou may only create up to 1,073,741,824 components. If you're creating components dynamically,\nas for instance in your render method then you may be running into this limitation.\n\n",17:"CSSStyleSheet could not be found on HTMLStyleElement.\nHas styled-components' style tag been unmounted or altered by another script?\n"}:{};function j(){for(var e=arguments.length<=0?void 0:arguments[0],t=[],n=1,r=arguments.length;n<r;n+=1)t.push(n<0||arguments.length<=n?void 0:arguments[n]);return t.forEach((function(t){e=e.replace(/%[a-z]/,t)})),e}function T(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];throw"production"===process.env.NODE_ENV?new Error("An error occurred. See https://git.io/JUIaE#"+e+" for more information."+(n.length>0?" Args: "+n.join(", "):"")):new Error(j.apply(void 0,[R[e]].concat(n)).trim())}var D=function(e){var t=document.head,n=e||t,r=document.createElement("style"),o=function(e){for(var t=e.childNodes,n=t.length;n>=0;n--){var r=t[n];if(r&&1===r.nodeType&&r.hasAttribute(C))return r}}(n),i=void 0!==o?o.nextSibling:null;r.setAttribute(C,"active"),r.setAttribute("data-styled-version",I);var s=P();return s&&r.setAttribute("nonce",s),n.insertBefore(r,i),r},x=function(){function e(e){var t=this.element=D(e);t.appendChild(document.createTextNode("")),this.sheet=function(e){if(e.sheet)return e.sheet;for(var t=document.styleSheets,n=0,r=t.length;n<r;n++){var o=t[n];if(o.ownerNode===e)return o}T(17)}(t),this.length=0}var t=e.prototype;return t.insertRule=function(e,t){try{return this.sheet.insertRule(t,e),this.length++,!0}catch(e){return!1}},t.deleteRule=function(e){this.sheet.deleteRule(e),this.length--},t.getRule=function(e){var t=this.sheet.cssRules[e];return void 0!==t&&"string"==typeof t.cssText?t.cssText:""},e}(),k=function(){function e(e){var t=this.element=D(e);this.nodes=t.childNodes,this.length=0}var t=e.prototype;return t.insertRule=function(e,t){if(e<=this.length&&e>=0){var n=document.createTextNode(t),r=this.nodes[e];return this.element.insertBefore(n,r||null),this.length++,!0}return!1},t.deleteRule=function(e){this.element.removeChild(this.nodes[e]),this.length--},t.getRule=function(e){return e<this.length?this.nodes[e].textContent:""},e}(),V=function(){function e(e){this.rules=[],this.length=0}var t=e.prototype;return t.insertRule=function(e,t){return e<=this.length&&(this.rules.splice(e,0,t),this.length++,!0)},t.deleteRule=function(e){this.rules.splice(e,1),this.length--},t.getRule=function(e){return e<this.length?this.rules[e]:""},e}(),M=function(){function e(e){this.groupSizes=new Uint32Array(512),this.length=512,this.tag=e}var t=e.prototype;return t.indexOfGroup=function(e){for(var t=0,n=0;n<e;n++)t+=this.groupSizes[n];return t},t.insertRules=function(e,t){if(e>=this.groupSizes.length){for(var n=this.groupSizes,r=n.length,o=r;e>=o;)(o<<=1)<0&&T(16,""+e);this.groupSizes=new Uint32Array(o),this.groupSizes.set(n),this.length=o;for(var i=r;i<o;i++)this.groupSizes[i]=0}for(var s=this.indexOfGroup(e+1),a=0,c=t.length;a<c;a++)this.tag.insertRule(s,t[a])&&(this.groupSizes[e]++,s++)},t.clearGroup=function(e){if(e<this.length){var t=this.groupSizes[e],n=this.indexOfGroup(e),r=n+t;this.groupSizes[e]=0;for(var o=n;o<r;o++)this.tag.deleteRule(n)}},t.getGroup=function(e){var t="";if(e>=this.length||0===this.groupSizes[e])return t;for(var n=this.groupSizes[e],r=this.indexOfGroup(e),o=r+n,i=r;i<o;i++)t+=this.tag.getRule(i)+"/*!sc*/\n";return t},e}(),z=new Map,G=new Map,F=1,B=function(e){if(z.has(e))return z.get(e);var t=F++;return"production"!==process.env.NODE_ENV&&((0|t)<0||t>1<<30)&&T(16,""+t),z.set(e,t),G.set(t,e),t},L=function(e){return G.get(e)},q=function(e,t){t>=F&&(F=t+1),z.set(e,t),G.set(t,e)},H="style["+C+'][data-styled-version="'+I+'"]',$=new RegExp("^"+C+'\\.g(\\d+)\\[id="([\\w\\d-]+)"\\].*?"([^"]*)'),Y=function(e,t,n){for(var r,o=n.split(","),i=0,s=o.length;i<s;i++)(r=o[i])&&e.registerName(t,r)},W=function(e,t){for(var n=t.innerHTML.split("/*!sc*/\n"),r=[],o=0,i=n.length;o<i;o++){var s=n[o].trim();if(s){var a=s.match($);if(a){var c=0|parseInt(a[1],10),u=a[2];0!==c&&(q(u,c),Y(e,u,a[3]),e.getTag().insertRules(c,r)),r.length=0}else r.push(s)}}},U=A,J={isServer:!A,useCSSOMInjection:!_},X=function(){function e(e,t,n){void 0===e&&(e=J),void 0===t&&(t={}),this.options=y({},J,{},e),this.gs=t,this.names=new Map(n),!this.options.isServer&&A&&U&&(U=!1,function(e){for(var t=document.querySelectorAll(H),n=0,r=t.length;n<r;n++){var o=t[n];o&&"active"!==o.getAttribute(C)&&(W(e,o),o.parentNode&&o.parentNode.removeChild(o))}}(this))}e.registerId=function(e){return B(e)};var t=e.prototype;return t.reconstructWithOptions=function(t,n){return void 0===n&&(n=!0),new e(y({},this.options,{},t),this.gs,n&&this.names||void 0)},t.allocateGSInstance=function(e){return this.gs[e]=(this.gs[e]||0)+1},t.getTag=function(){return this.tag||(this.tag=(t=this.options,n=t.isServer,r=t.useCSSOMInjection,o=t.target,e=n?new V(o):r?new x(o):new k(o),new M(e)));var e,t,n,r,o},t.hasNameForId=function(e,t){return this.names.has(e)&&this.names.get(e).has(t)},t.registerName=function(e,t){if(B(e),this.names.has(e))this.names.get(e).add(t);else{var n=new Set;n.add(t),this.names.set(e,n)}},t.insertRules=function(e,t,n){this.registerName(e,t),this.getTag().insertRules(B(e),n)},t.clearNames=function(e){this.names.has(e)&&this.names.get(e).clear()},t.clearRules=function(e){this.getTag().clearGroup(B(e)),this.clearNames(e)},t.clearTag=function(){this.tag=void 0},t.toString=function(){return function(e){for(var t=e.getTag(),n=t.length,r="",o=0;o<n;o++){var i=L(o);if(void 0!==i){var s=e.names.get(i),a=t.getGroup(o);if(void 0!==s&&0!==a.length){var c=C+".g"+o+'[id="'+i+'"]',u="";void 0!==s&&s.forEach((function(e){e.length>0&&(u+=e+",")})),r+=""+a+c+'{content:"'+u+'"}/*!sc*/\n'}}}return r}(this)},e}(),Z=function(e,t){for(var n=t.length;n;)e=33*e^t.charCodeAt(--n);return e},K=function(e){return Z(5381,e)};var Q=/^\s*\/\/.*$/gm,ee=[":","[",".","#"];function te(e){var t,n,r,o,i=void 0===e?w:e,s=i.options,a=void 0===s?w:s,c=i.plugins,u=void 0===c?S:c,l=new h(a),d=[],p=function(e){function t(t){if(t)try{e(t+"}")}catch(e){}}return function(n,r,o,i,s,a,c,u,l,d){switch(n){case 1:if(0===l&&64===r.charCodeAt(0))return e(r+";"),"";break;case 2:if(0===u)return r+"/*|*/";break;case 3:switch(u){case 102:case 112:return e(o[0]+r),"";default:return r+(0===d?"/*|*/":"")}case-2:r.split("/*|*/}").forEach(t)}}}((function(e){d.push(e)})),f=function(e,r,i){return 0===r&&ee.includes(i[n.length])||i.match(o)?e:"."+t};function m(e,i,s,a){void 0===a&&(a="&");var c=e.replace(Q,""),u=i&&s?s+" "+i+" { "+c+" }":c;return t=a,n=i,r=new RegExp("\\"+n+"\\b","g"),o=new RegExp("(\\"+n+"\\b){2,}"),l(s||!i?"":i,u)}return l.use([].concat(u,[function(e,t,o){2===e&&o.length&&o[0].lastIndexOf(n)>0&&(o[0]=o[0].replace(r,f))},p,function(e){if(-2===e){var t=d;return d=[],t}}])),m.hash=u.length?u.reduce((function(e,t){return t.name||T(15),Z(e,t.name)}),5381).toString():"",m}var ne=r.createContext(),re=ne.Consumer,oe=r.createContext(),ie=(oe.Consumer,new X),se=te();function ae(){return i(ne)||ie}function ce(){return i(oe)||se}function ue(e){var t=o(e.stylisPlugins),n=t[0],i=t[1],c=ae(),u=s((function(){var t=c;return e.sheet?t=e.sheet:e.target&&(t=t.reconstructWithOptions({target:e.target},!1)),e.disableCSSOMInjection&&(t=t.reconstructWithOptions({useCSSOMInjection:!1})),t}),[e.disableCSSOMInjection,e.sheet,e.target]),l=s((function(){return te({options:{prefix:!e.disableVendorPrefixes},plugins:n})}),[e.disableVendorPrefixes,n]);return a((function(){d(n,e.stylisPlugins)||i(e.stylisPlugins)}),[e.stylisPlugins]),r.createElement(ne.Provider,{value:u},r.createElement(oe.Provider,{value:l},"production"!==process.env.NODE_ENV?r.Children.only(e.children):e.children))}var le=function(){function e(e,t){var n=this;this.inject=function(e,t){void 0===t&&(t=se);var r=n.name+t.hash;e.hasNameForId(n.id,r)||e.insertRules(n.id,r,t(n.rules,r,"@keyframes"))},this.toString=function(){return T(12,String(n.name))},this.name=e,this.id="sc-keyframes-"+e,this.rules=t}return e.prototype.getName=function(e){return void 0===e&&(e=se),this.name+e.hash},e}(),de=/([A-Z])/g,he=/^ms-/;function pe(e){return e.replace(de,"-$1").toLowerCase().replace(he,"-ms-")}var fe=function(e){return null==e||!1===e||""===e};function me(e,n,r,o){if(Array.isArray(e)){for(var i,s=[],a=0,c=e.length;a<c;a+=1)""!==(i=me(e[a],n,r,o))&&(Array.isArray(i)?s.push.apply(s,i):s.push(i));return s}if(fe(e))return"";if(E(e))return"."+e.styledComponentId;if(b(e)){if("function"!=typeof(l=e)||l.prototype&&l.prototype.isReactComponent||!n)return e;var u=e(n);return"production"!==process.env.NODE_ENV&&t(u)&&console.warn(N(e)+" is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details."),me(u,n,r,o)}var l;return e instanceof le?r?(e.inject(r,o),e.getName(o)):e:g(e)?function e(t,n){var r,o,i=[];for(var s in t)t.hasOwnProperty(s)&&!fe(t[s])&&(g(t[s])?i.push.apply(i,e(t[s],s)):b(t[s])?i.push(pe(s)+":",t[s],";"):i.push(pe(s)+": "+(r=s,null==(o=t[s])||"boolean"==typeof o||""===o?"":"number"!=typeof o||0===o||r in p?String(o).trim():o+"px")+";"));return n?[n+" {"].concat(i,["}"]):i}(e):e.toString()}function ye(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];return b(e)||g(e)?me(v(S,[e].concat(n))):0===n.length&&1===e.length&&"string"==typeof e[0]?e:me(v(e,n))}var ve=function(e){return"function"==typeof e||"object"==typeof e&&null!==e&&!Array.isArray(e)},ge=function(e){return"__proto__"!==e&&"constructor"!==e&&"prototype"!==e};function Se(e,t,n){var r=e[n];ve(t)&&ve(r)?we(r,t):e[n]=t}function we(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];for(var o=0,i=n;o<i.length;o++){var s=i[o];if(ve(s))for(var a in s)ge(a)&&Se(e,s[a],a)}return e}var be=/(a)(d)/gi,Ne=function(e){return String.fromCharCode(e+(e>25?39:97))};function Ee(e){var t,n="";for(t=Math.abs(e);t>52;t=t/52|0)n=Ne(t%52)+n;return(Ne(t%52)+n).replace(be,"$1-$2")}function Ce(e){for(var t=0;t<e.length;t+=1){var n=e[t];if(b(n)&&!E(n))return!1}return!0}var Ie=K(I),Ae=function(){function e(e,t,n){this.rules=e,this.staticRulesId="",this.isStatic="production"===process.env.NODE_ENV&&Ce(e),this.componentId=t,this.baseHash=Z(Ie,t),this.baseStyle=n,X.registerId(t)}return e.prototype.generateAndInjectStyles=function(e,t,n){var r=this.componentId,o=[];if(this.baseStyle&&o.push(this.baseStyle.generateAndInjectStyles(e,t,n)),this.isStatic&&!n.hash)if(this.staticRulesId&&t.hasNameForId(r,this.staticRulesId))o.push(this.staticRulesId);else{var i=me(this.rules,e,t,n).join(""),s=Ee(Z(this.baseHash,i.length)>>>0);if(!t.hasNameForId(r,s)){var a=n(i,"."+s,void 0,r);t.insertRules(r,s,a)}o.push(s),this.staticRulesId=s}else{for(var c=this.rules.length,u=Z(this.baseHash,n.hash),l="",d=0;d<c;d++){var h=this.rules[d];if("string"==typeof h)l+=h,"production"!==process.env.NODE_ENV&&(u=Z(u,h+d));else if(h){var p=me(h,e,t,n),f=Array.isArray(p)?p.join(""):p;u=Z(u,f+d),l+=f}}if(l){var m=Ee(u>>>0);if(!t.hasNameForId(r,m)){var y=n(l,"."+m,void 0,r);t.insertRules(r,m,y)}o.push(m)}}return o.join(" ")},e}(),_e=/invalid hook call/i,Oe=new Set,Pe=function(e,t){if("production"!==process.env.NODE_ENV){var n="The component "+e+(t?' with the id of "'+t+'"':"")+" has been created dynamically.\nYou may see this warning because you've called styled inside another component.\nTo resolve this only create new StyledComponents outside of any render method and function component.";try{c(),Oe.has(n)||(console.warn(n),Oe.add(n))}catch(e){_e.test(e.message)&&Oe.delete(n)}}},Re=function(e,t,n){return void 0===n&&(n=w),e.theme!==n.theme&&e.theme||t||n.theme},je=/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~-]+/g,Te=/(^-|-$)/g;function De(e){return e.replace(je,"-").replace(Te,"")}function xe(e){return"string"==typeof e&&("production"===process.env.NODE_ENV||e.charAt(0)===e.charAt(0).toLowerCase())}var ke=function(e){return Ee(K(e)>>>0)};var Ve=r.createContext(),Me=Ve.Consumer;function ze(e){var t=i(Ve),n=s((function(){return function(e,t){if(!e)return T(14);if(b(e)){var n=e(t);return"production"===process.env.NODE_ENV||null!==n&&!Array.isArray(n)&&"object"==typeof n?n:T(7)}return Array.isArray(e)||"object"!=typeof e?T(8):t?y({},t,{},e):e}(e.theme,t)}),[e.theme,t]);return e.children?r.createElement(Ve.Provider,{value:n},e.children):null}var Ge={};function Fe(e,t,n){var r=e.attrs,o=e.componentStyle,s=e.defaultProps,a=e.foldedComponentIds,c=e.shouldForwardProp,d=e.styledComponentId,h=e.target;"production"!==process.env.NODE_ENV&&l(d);var p=function(e,t,n){void 0===e&&(e=w);var r=y({},t,{theme:e}),o={};return n.forEach((function(e){var t,n,i,s=e;for(t in b(s)&&(s=s(r)),s)r[t]=o[t]="className"===t?(n=o[t],i=s[t],n&&i?n+" "+i:n||i):s[t]})),[r,o]}(Re(t,i(Ve),s)||w,t,r),m=p[0],v=p[1],g=function(e,t,n,r){var o=ae(),i=ce(),s=e.isStatic&&!t,a=s?e.generateAndInjectStyles(w,o,i):e.generateAndInjectStyles(n,o,i);return"production"!==process.env.NODE_ENV&&l(a),"production"!==process.env.NODE_ENV&&!s&&r&&r(a),a}(o,r.length>0,m,"production"!==process.env.NODE_ENV?e.warnTooManyClasses:void 0),S=n,N=v.$as||t.$as||v.as||t.as||h,E=xe(N),C=v!==t?y({},t,{},v):t,I=c||E&&f,A={};for(var _ in C)"$"!==_[0]&&"as"!==_&&("forwardedAs"===_?A.as=C[_]:I&&!I(_,f)||(A[_]=C[_]));return t.style&&v.style!==t.style&&(A.style=y({},t.style,{},v.style)),A.className=Array.prototype.concat(a,d,g!==d?g:null,t.className,v.className).filter(Boolean).join(" "),A.ref=S,u(N,A)}function Be(e,t,n){var o=E(e),i=!xe(e),s=t.displayName,a=void 0===s?function(e){return xe(e)?"styled."+e:"Styled("+N(e)+")"}(e):s,c=t.componentId,u=void 0===c?function(e,t){var n="string"!=typeof e?"sc":De(e);Ge[n]=(Ge[n]||0)+1;var r=n+"-"+ke(I+n+Ge[n]);return t?t+"-"+r:r}(t.displayName,t.parentComponentId):c,l=t.attrs,d=void 0===l?S:l,h=t.displayName&&t.componentId?De(t.displayName)+"-"+t.componentId:t.componentId||u,p=o&&e.attrs?Array.prototype.concat(e.attrs,d).filter(Boolean):d,f=t.shouldForwardProp;o&&e.shouldForwardProp&&(f=f?function(n,r){return e.shouldForwardProp(n,r)&&t.shouldForwardProp(n,r)}:e.shouldForwardProp);var v,g=new Ae(n,h,o?e.componentStyle:void 0),w=function(e,t){return Fe(v,e,t)};return w.displayName=a,(v=r.forwardRef(w)).attrs=p,v.componentStyle=g,v.displayName=a,v.shouldForwardProp=f,v.foldedComponentIds=o?Array.prototype.concat(e.foldedComponentIds,e.styledComponentId):S,v.styledComponentId=h,v.target=o?e.target:e,v.withComponent=function(e){var r=t.componentId,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(t,["componentId"]),i=r&&r+"-"+(xe(e)?e:De(N(e)));return Be(e,y({},o,{attrs:p,componentId:i}),n)},Object.defineProperty(v,"defaultProps",{get:function(){return this._foldedDefaultProps},set:function(t){this._foldedDefaultProps=o?we({},e.defaultProps,t):t}}),"production"!==process.env.NODE_ENV&&(Pe(a,h),v.warnTooManyClasses=function(e,t){var n={},r=!1;return function(o){if(!r&&(n[o]=!0,Object.keys(n).length>=200)){var i=t?' with the id of "'+t+'"':"";console.warn("Over 200 classes were generated for component "+e+i+".\nConsider using the attrs method, together with a style object for frequently changed styles.\nExample:\n  const Component = styled.div.attrs(props => ({\n    style: {\n      background: props.background,\n    },\n  }))`width: 100%;`\n\n  <Component />"),r=!0,n={}}}}(a,h)),v.toString=function(){return"."+v.styledComponentId},i&&m(v,e,{attrs:!0,componentStyle:!0,displayName:!0,foldedComponentIds:!0,shouldForwardProp:!0,self:!0,styledComponentId:!0,target:!0,withComponent:!0}),v}var Le=function(e){return function e(t,r,o){if(void 0===o&&(o=w),!n(r))return T(1,String(r));var i=function(){return t(r,o,ye.apply(void 0,arguments))};return i.withConfig=function(n){return e(t,r,y({},o,{},n))},i.attrs=function(n){return e(t,r,y({},o,{attrs:Array.prototype.concat(o.attrs,n).filter(Boolean)}))},i}(Be,e)};["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","marquee","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","foreignObject","g","image","line","linearGradient","marker","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","svg","text","tspan"].forEach((function(e){Le[e]=Le(e)}));var qe=function(){function e(e,t){this.rules=e,this.componentId=t,this.isStatic=Ce(e)}var t=e.prototype;return t.createStyles=function(e,t,n,r){var o=r(me(this.rules,t,n,r).join(""),""),i=this.componentId+e;n.insertRules(i,i,o)},t.removeStyles=function(e,t){t.clearRules(this.componentId+e)},t.renderStyles=function(e,t,n,r){X.registerId(this.componentId+e),this.removeStyles(e,n),this.createStyles(e,t,n,r)},e}();function He(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),o=1;o<t;o++)n[o-1]=arguments[o];var s=ye.apply(void 0,[e].concat(n)),u="sc-global-"+ke(JSON.stringify(s)),l=new qe(s,u);function d(e){var t=ae(),n=ce(),o=i(Ve),h=c(null);null===h.current&&(h.current=t.allocateGSInstance(u));var p=h.current;if("production"!==process.env.NODE_ENV&&r.Children.count(e.children)&&console.warn("The global style component "+u+" was given child JSX. createGlobalStyle does not render children."),"production"!==process.env.NODE_ENV&&s.some((function(e){return"string"==typeof e&&-1!==e.indexOf("@import")}))&&console.warn("Please do not use @import CSS syntax in createGlobalStyle at this time, as the CSSOM APIs we use in production do not handle it well. Instead, we recommend using a library such as react-helmet to inject a typical <link> meta tag to the stylesheet, or simply embedding it manually in your index.html <head> section for a simpler app."),l.isStatic)l.renderStyles(p,O,t,n);else{var f=y({},e,{theme:Re(e,o,d.defaultProps)});l.renderStyles(p,f,t,n)}return a((function(){return function(){return l.removeStyles(p,t)}}),S),null}return"production"!==process.env.NODE_ENV&&Pe(u),r.memo(d)}function $e(e){"production"!==process.env.NODE_ENV&&"undefined"!=typeof navigator&&"ReactNative"===navigator.product&&console.warn("`keyframes` cannot be used on ReactNative, only on the web. To do animation in ReactNative please use Animated.");for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];var o=ye.apply(void 0,[e].concat(n)).join(""),i=ke(o);return new le(i,o)}var Ye=function(){function e(){var e=this;this._emitSheetCSS=function(){var t=e.instance.toString(),n=P();return"<style "+[n&&'nonce="'+n+'"',C+'="true"','data-styled-version="5.2.0-test.6"'].filter(Boolean).join(" ")+">"+t+"</style>"},this.getStyleTags=function(){return e.sealed?T(2):e._emitSheetCSS()},this.getStyleElement=function(){var t;if(e.sealed)return T(2);var n=((t={})[C]="",t["data-styled-version"]=I,t.dangerouslySetInnerHTML={__html:e.instance.toString()},t),o=P();return o&&(n.nonce=o),[r.createElement("style",y({},n,{key:"sc-0-0"}))]},this.seal=function(){e.sealed=!0},this.instance=new X({isServer:!0}),this.sealed=!1}var t=e.prototype;return t.collectStyles=function(e){return this.sealed?T(2):r.createElement(ue,{sheet:this.instance},e)},t.interleaveWithNodeStream=function(e){return T(3)},e}(),We=function(e){var t=r.forwardRef((function(t,n){var o=i(Ve),s=e.defaultProps,a=Re(t,o,s);return"production"!==process.env.NODE_ENV&&void 0===a&&console.warn('[withTheme] You are not using a ThemeProvider nor passing a theme prop or a theme in defaultProps in component class "'+N(e)+'"'),r.createElement(e,y({},t,{theme:a,ref:n}))}));return m(t,e),t.displayName="WithTheme("+N(e)+")",t},Ue=function(){return i(Ve)},Je={StyleSheet:X,masterSheet:ie};export default Le;export{Ye as ServerStyleSheet,re as StyleSheetConsumer,ne as StyleSheetContext,ue as StyleSheetManager,Me as ThemeConsumer,Ve as ThemeContext,ze as ThemeProvider,Je as __PRIVATE__,He as createGlobalStyle,ye as css,E as isStyledComponent,$e as keyframes,Ue as useTheme,I as version,We as withTheme};
+import{typeOf as e,isElement as t,isValidElementType as n}from"react-is";import r,{useState as o,useContext as i,useMemo as s,useEffect as a,useRef as c,createElement as u,useDebugValue as l,useLayoutEffect as d}from"react";import h from"shallowequal";import p from"@emotion/stylis";import f from"@emotion/unitless";import m from"@emotion/is-prop-valid";import y from"hoist-non-react-statics";function v(){return(v=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}).apply(this,arguments)}var g=function(e,t){for(var n=[e[0]],r=0,o=t.length;r<o;r+=1)n.push(t[r],e[r+1]);return n},S=function(t){return null!==t&&"object"==typeof t&&"[object Object]"===(t.toString?t.toString():Object.prototype.toString.call(t))&&!e(t)},w=Object.freeze([]),b=Object.freeze({});function N(e){return"function"==typeof e}function E(e){return"production"!==process.env.NODE_ENV&&"string"==typeof e&&e||e.displayName||e.name||"Component"}function _(e){return e&&"string"==typeof e.styledComponentId}var I="undefined"!=typeof process&&(process.env.REACT_APP_SC_ATTR||process.env.SC_ATTR)||"data-styled",C="5.2.0",A="undefined"!=typeof window&&"HTMLElement"in window,O="boolean"==typeof SC_DISABLE_SPEEDY&&SC_DISABLE_SPEEDY||"undefined"!=typeof process&&(process.env.REACT_APP_SC_DISABLE_SPEEDY||process.env.SC_DISABLE_SPEEDY)||"production"!==process.env.NODE_ENV,P={},R=function(){return"undefined"!=typeof __webpack_nonce__?__webpack_nonce__:null},j="production"!==process.env.NODE_ENV?{1:"Cannot create styled-component for component: %s.\n\n",2:"Can't collect styles once you've consumed a `ServerStyleSheet`'s styles! `ServerStyleSheet` is a one off instance for each server-side render cycle.\n\n- Are you trying to reuse it across renders?\n- Are you accidentally calling collectStyles twice?\n\n",3:"Streaming SSR is only supported in a Node.js environment; Please do not try to call this method in the browser.\n\n",4:"The `StyleSheetManager` expects a valid target or sheet prop!\n\n- Does this error occur on the client and is your target falsy?\n- Does this error occur on the server and is the sheet falsy?\n\n",5:"The clone method cannot be used on the client!\n\n- Are you running in a client-like environment on the server?\n- Are you trying to run SSR on the client?\n\n",6:"Trying to insert a new style tag, but the given Node is unmounted!\n\n- Are you using a custom target that isn't mounted?\n- Does your document not have a valid head element?\n- Have you accidentally removed a style tag manually?\n\n",7:'ThemeProvider: Please return an object from your "theme" prop function, e.g.\n\n```js\ntheme={() => ({})}\n```\n\n',8:'ThemeProvider: Please make your "theme" prop an object.\n\n',9:"Missing document `<head>`\n\n",10:"Cannot find a StyleSheet instance. Usually this happens if there are multiple copies of styled-components loaded at once. Check out this issue for how to troubleshoot and fix the common cases where this situation can happen: https://github.com/styled-components/styled-components/issues/1941#issuecomment-417862021\n\n",11:"_This error was replaced with a dev-time warning, it will be deleted for v4 final._ [createGlobalStyle] received children which will not be rendered. Please use the component without passing children elements.\n\n",12:"It seems you are interpolating a keyframe declaration (%s) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\\`\\` helper which ensures the styles are injected correctly. See https://www.styled-components.com/docs/api#css\n\n",13:"%s is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.\n\n",14:'ThemeProvider: "theme" prop is required.\n\n',15:"A stylis plugin has been supplied that is not named. We need a name for each plugin to be able to prevent styling collisions between different stylis configurations within the same app. Before you pass your plugin to `<StyleSheetManager stylisPlugins={[]}>`, please make sure each plugin is uniquely-named, e.g.\n\n```js\nObject.defineProperty(importedPlugin, 'name', { value: 'some-unique-name' });\n```\n\n",16:"Reached the limit of how many styled components may be created at group %s.\nYou may only create up to 1,073,741,824 components. If you're creating components dynamically,\nas for instance in your render method then you may be running into this limitation.\n\n",17:"CSSStyleSheet could not be found on HTMLStyleElement.\nHas styled-components' style tag been unmounted or altered by another script?\n"}:{};function T(){for(var e=arguments.length<=0?void 0:arguments[0],t=[],n=1,r=arguments.length;n<r;n+=1)t.push(n<0||arguments.length<=n?void 0:arguments[n]);return t.forEach((function(t){e=e.replace(/%[a-z]/,t)})),e}function D(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];throw"production"===process.env.NODE_ENV?new Error("An error occurred. See https://git.io/JUIaE#"+e+" for more information."+(n.length>0?" Args: "+n.join(", "):"")):new Error(T.apply(void 0,[j[e]].concat(n)).trim())}var k=function(e){var t=document.head,n=e||t,r=document.createElement("style"),o=function(e){for(var t=e.childNodes,n=t.length;n>=0;n--){var r=t[n];if(r&&1===r.nodeType&&r.hasAttribute(I))return r}}(n),i=void 0!==o?o.nextSibling:null;r.setAttribute(I,"active"),r.setAttribute("data-styled-version","5.2.0");var s=R();return s&&r.setAttribute("nonce",s),n.insertBefore(r,i),r},x=function(){function e(e){var t=this.element=k(e);t.appendChild(document.createTextNode("")),this.sheet=function(e){if(e.sheet)return e.sheet;for(var t=document.styleSheets,n=0,r=t.length;n<r;n++){var o=t[n];if(o.ownerNode===e)return o}D(17)}(t),this.length=0}var t=e.prototype;return t.insertRule=function(e,t){try{return this.sheet.insertRule(t,e),this.length++,!0}catch(e){return!1}},t.deleteRule=function(e){this.sheet.deleteRule(e),this.length--},t.getRule=function(e){var t=this.sheet.cssRules[e];return void 0!==t&&"string"==typeof t.cssText?t.cssText:""},e}(),V=function(){function e(e){var t=this.element=k(e);this.nodes=t.childNodes,this.length=0}var t=e.prototype;return t.insertRule=function(e,t){if(e<=this.length&&e>=0){var n=document.createTextNode(t),r=this.nodes[e];return this.element.insertBefore(n,r||null),this.length++,!0}return!1},t.deleteRule=function(e){this.element.removeChild(this.nodes[e]),this.length--},t.getRule=function(e){return e<this.length?this.nodes[e].textContent:""},e}(),M=function(){function e(e){this.rules=[],this.length=0}var t=e.prototype;return t.insertRule=function(e,t){return e<=this.length&&(this.rules.splice(e,0,t),this.length++,!0)},t.deleteRule=function(e){this.rules.splice(e,1),this.length--},t.getRule=function(e){return e<this.length?this.rules[e]:""},e}(),z=function(){function e(e){this.groupSizes=new Uint32Array(512),this.length=512,this.tag=e}var t=e.prototype;return t.indexOfGroup=function(e){for(var t=0,n=0;n<e;n++)t+=this.groupSizes[n];return t},t.insertRules=function(e,t){if(e>=this.groupSizes.length){for(var n=this.groupSizes,r=n.length,o=r;e>=o;)(o<<=1)<0&&D(16,""+e);this.groupSizes=new Uint32Array(o),this.groupSizes.set(n),this.length=o;for(var i=r;i<o;i++)this.groupSizes[i]=0}for(var s=this.indexOfGroup(e+1),a=0,c=t.length;a<c;a++)this.tag.insertRule(s,t[a])&&(this.groupSizes[e]++,s++)},t.clearGroup=function(e){if(e<this.length){var t=this.groupSizes[e],n=this.indexOfGroup(e),r=n+t;this.groupSizes[e]=0;for(var o=n;o<r;o++)this.tag.deleteRule(n)}},t.getGroup=function(e){var t="";if(e>=this.length||0===this.groupSizes[e])return t;for(var n=this.groupSizes[e],r=this.indexOfGroup(e),o=r+n,i=r;i<o;i++)t+=this.tag.getRule(i)+"/*!sc*/\n";return t},e}(),G=new Map,F=new Map,B=1,L=function(e){if(G.has(e))return G.get(e);var t=B++;return"production"!==process.env.NODE_ENV&&((0|t)<0||t>1<<30)&&D(16,""+t),G.set(e,t),F.set(t,e),t},q=function(e){return F.get(e)},H=function(e,t){t>=B&&(B=t+1),G.set(e,t),F.set(t,e)},$="style["+I+'][data-styled-version="5.2.0"]',Y=new RegExp("^"+I+'\\.g(\\d+)\\[id="([\\w\\d-]+)"\\].*?"([^"]*)'),W=function(e,t,n){for(var r,o=n.split(","),i=0,s=o.length;i<s;i++)(r=o[i])&&e.registerName(t,r)},U=function(e,t){for(var n=t.innerHTML.split("/*!sc*/\n"),r=[],o=0,i=n.length;o<i;o++){var s=n[o].trim();if(s){var a=s.match(Y);if(a){var c=0|parseInt(a[1],10),u=a[2];0!==c&&(H(u,c),W(e,u,a[3]),e.getTag().insertRules(c,r)),r.length=0}else r.push(s)}}},J=A,X={isServer:!A,useCSSOMInjection:!O},Z=function(){function e(e,t,n){void 0===e&&(e=X),void 0===t&&(t={}),this.options=v({},X,{},e),this.gs=t,this.names=new Map(n),!this.options.isServer&&A&&J&&(J=!1,function(e){for(var t=document.querySelectorAll($),n=0,r=t.length;n<r;n++){var o=t[n];o&&"active"!==o.getAttribute(I)&&(U(e,o),o.parentNode&&o.parentNode.removeChild(o))}}(this))}e.registerId=function(e){return L(e)};var t=e.prototype;return t.reconstructWithOptions=function(t,n){return void 0===n&&(n=!0),new e(v({},this.options,{},t),this.gs,n&&this.names||void 0)},t.allocateGSInstance=function(e){return this.gs[e]=(this.gs[e]||0)+1},t.getTag=function(){return this.tag||(this.tag=(n=(t=this.options).isServer,r=t.useCSSOMInjection,o=t.target,e=n?new M(o):r?new x(o):new V(o),new z(e)));var e,t,n,r,o},t.hasNameForId=function(e,t){return this.names.has(e)&&this.names.get(e).has(t)},t.registerName=function(e,t){if(L(e),this.names.has(e))this.names.get(e).add(t);else{var n=new Set;n.add(t),this.names.set(e,n)}},t.insertRules=function(e,t,n){this.registerName(e,t),this.getTag().insertRules(L(e),n)},t.clearNames=function(e){this.names.has(e)&&this.names.get(e).clear()},t.clearRules=function(e){this.getTag().clearGroup(L(e)),this.clearNames(e)},t.clearTag=function(){this.tag=void 0},t.toString=function(){return function(e){for(var t=e.getTag(),n=t.length,r="",o=0;o<n;o++){var i=q(o);if(void 0!==i){var s=e.names.get(i),a=t.getGroup(o);if(void 0!==s&&0!==a.length){var c=I+".g"+o+'[id="'+i+'"]',u="";void 0!==s&&s.forEach((function(e){e.length>0&&(u+=e+",")})),r+=""+a+c+'{content:"'+u+'"}/*!sc*/\n'}}}return r}(this)},e}(),K=function(e,t){for(var n=t.length;n;)e=33*e^t.charCodeAt(--n);return e},Q=function(e){return K(5381,e)},ee=/^\s*\/\/.*$/gm,te=[":","[",".","#"];function ne(e){var t,n,r,o,i=void 0===e?b:e,s=i.options,a=void 0===s?b:s,c=i.plugins,u=void 0===c?w:c,l=new p(a),d=[],h=function(e){function t(t){if(t)try{e(t+"}")}catch(e){}}return function(n,r,o,i,s,a,c,u,l,d){switch(n){case 1:if(0===l&&64===r.charCodeAt(0))return e(r+";"),"";break;case 2:if(0===u)return r+"/*|*/";break;case 3:switch(u){case 102:case 112:return e(o[0]+r),"";default:return r+(0===d?"/*|*/":"")}case-2:r.split("/*|*/}").forEach(t)}}}((function(e){d.push(e)})),f=function(e,r,i){return 0===r&&te.includes(i[n.length])||i.match(o)?e:"."+t};function m(e,i,s,a){void 0===a&&(a="&");var c=e.replace(ee,""),u=i&&s?s+" "+i+" { "+c+" }":c;return t=a,n=i,r=new RegExp("\\"+n+"\\b","g"),o=new RegExp("(\\"+n+"\\b){2,}"),l(s||!i?"":i,u)}return l.use([].concat(u,[function(e,t,o){2===e&&o.length&&o[0].lastIndexOf(n)>0&&(o[0]=o[0].replace(r,f))},h,function(e){if(-2===e){var t=d;return d=[],t}}])),m.hash=u.length?u.reduce((function(e,t){return t.name||D(15),K(e,t.name)}),5381).toString():"",m}var re=r.createContext(),oe=re.Consumer,ie=r.createContext(),se=(ie.Consumer,new Z),ae=ne();function ce(){return i(re)||se}function ue(){return i(ie)||ae}function le(e){var t=o(e.stylisPlugins),n=t[0],i=t[1],c=ce(),u=s((function(){var t=c;return e.sheet?t=e.sheet:e.target&&(t=t.reconstructWithOptions({target:e.target},!1)),e.disableCSSOMInjection&&(t=t.reconstructWithOptions({useCSSOMInjection:!1})),t}),[e.disableCSSOMInjection,e.sheet,e.target]),l=s((function(){return ne({options:{prefix:!e.disableVendorPrefixes},plugins:n})}),[e.disableVendorPrefixes,n]);return a((function(){h(n,e.stylisPlugins)||i(e.stylisPlugins)}),[e.stylisPlugins]),r.createElement(re.Provider,{value:u},r.createElement(ie.Provider,{value:l},"production"!==process.env.NODE_ENV?r.Children.only(e.children):e.children))}var de=function(){function e(e,t){var n=this;this.inject=function(e,t){void 0===t&&(t=ae);var r=n.name+t.hash;e.hasNameForId(n.id,r)||e.insertRules(n.id,r,t(n.rules,r,"@keyframes"))},this.toString=function(){return D(12,String(n.name))},this.name=e,this.id="sc-keyframes-"+e,this.rules=t}return e.prototype.getName=function(e){return void 0===e&&(e=ae),this.name+e.hash},e}(),he=/([A-Z])/,pe=new RegExp(he,"g"),fe=/^ms-/,me=function(e){return"-"+e.toLowerCase()};function ye(e){return he.test(e)?e.replace(pe,me).replace(fe,"-ms-"):e}var ve=function(e){return null==e||!1===e||""===e};function ge(e,n,r,o){if(Array.isArray(e)){for(var i,s=[],a=0,c=e.length;a<c;a+=1)""!==(i=ge(e[a],n,r,o))&&(Array.isArray(i)?s.push.apply(s,i):s.push(i));return s}if(ve(e))return"";if(_(e))return"."+e.styledComponentId;if(N(e)){if("function"!=typeof(l=e)||l.prototype&&l.prototype.isReactComponent||!n)return e;var u=e(n);return"production"!==process.env.NODE_ENV&&t(u)&&console.warn(E(e)+" is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details."),ge(u,n,r,o)}var l;return e instanceof de?r?(e.inject(r,o),e.getName(o)):e:S(e)?function e(t,n){var r,o,i=[];for(var s in t)t.hasOwnProperty(s)&&!ve(t[s])&&(S(t[s])?i.push.apply(i,e(t[s],s)):N(t[s])?i.push(ye(s)+":",t[s],";"):i.push(ye(s)+": "+(r=s,null==(o=t[s])||"boolean"==typeof o||""===o?"":"number"!=typeof o||0===o||r in f?String(o).trim():o+"px")+";"));return n?[n+" {"].concat(i,["}"]):i}(e):e.toString()}function Se(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];return N(e)||S(e)?ge(g(w,[e].concat(n))):0===n.length&&1===e.length&&"string"==typeof e[0]?e:ge(g(e,n))}var we=function(e){return"function"==typeof e||"object"==typeof e&&null!==e&&!Array.isArray(e)},be=function(e){return"__proto__"!==e&&"constructor"!==e&&"prototype"!==e};function Ne(e,t,n){var r=e[n];we(t)&&we(r)?Ee(r,t):e[n]=t}function Ee(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];for(var o=0,i=n;o<i.length;o++){var s=i[o];if(we(s))for(var a in s)be(a)&&Ne(e,s[a],a)}return e}var _e=/(a)(d)/gi,Ie=function(e){return String.fromCharCode(e+(e>25?39:97))};function Ce(e){var t,n="";for(t=Math.abs(e);t>52;t=t/52|0)n=Ie(t%52)+n;return(Ie(t%52)+n).replace(_e,"$1-$2")}function Ae(e){for(var t=0;t<e.length;t+=1){var n=e[t];if(N(n)&&!_(n))return!1}return!0}var Oe=Q("5.2.0"),Pe=function(){function e(e,t,n){this.rules=e,this.staticRulesId="",this.isStatic="production"===process.env.NODE_ENV&&(void 0===n||n.isStatic)&&Ae(e),this.componentId=t,this.baseHash=K(Oe,t),this.baseStyle=n,Z.registerId(t)}return e.prototype.generateAndInjectStyles=function(e,t,n){var r=this.componentId,o=[];if(this.baseStyle&&o.push(this.baseStyle.generateAndInjectStyles(e,t,n)),this.isStatic&&!n.hash)if(this.staticRulesId&&t.hasNameForId(r,this.staticRulesId))o.push(this.staticRulesId);else{var i=ge(this.rules,e,t,n).join(""),s=Ce(K(this.baseHash,i.length)>>>0);if(!t.hasNameForId(r,s)){var a=n(i,"."+s,void 0,r);t.insertRules(r,s,a)}o.push(s),this.staticRulesId=s}else{for(var c=this.rules.length,u=K(this.baseHash,n.hash),l="",d=0;d<c;d++){var h=this.rules[d];if("string"==typeof h)l+=h,"production"!==process.env.NODE_ENV&&(u=K(u,h+d));else if(h){var p=ge(h,e,t,n),f=Array.isArray(p)?p.join(""):p;u=K(u,f+d),l+=f}}if(l){var m=Ce(u>>>0);if(!t.hasNameForId(r,m)){var y=n(l,"."+m,void 0,r);t.insertRules(r,m,y)}o.push(m)}}return o.join(" ")},e}(),Re=/invalid hook call/i,je=new Set,Te=function(e,t){if("production"!==process.env.NODE_ENV){var n="The component "+e+(t?' with the id of "'+t+'"':"")+" has been created dynamically.\nYou may see this warning because you've called styled inside another component.\nTo resolve this only create new StyledComponents outside of any render method and function component.";try{c(),je.has(n)||(console.warn(n),je.add(n))}catch(e){Re.test(e.message)&&je.delete(n)}}},De=function(e,t,n){return void 0===n&&(n=b),e.theme!==n.theme&&e.theme||t||n.theme},ke=/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~-]+/g,xe=/(^-|-$)/g;function Ve(e){return e.replace(ke,"-").replace(xe,"")}function Me(e){return"string"==typeof e&&("production"===process.env.NODE_ENV||e.charAt(0)===e.charAt(0).toLowerCase())}var ze=function(e){return Ce(Q(e)>>>0)},Ge=r.createContext(),Fe=Ge.Consumer;function Be(e){var t=i(Ge),n=s((function(){return function(e,t){if(!e)return D(14);if(N(e)){var n=e(t);return"production"===process.env.NODE_ENV||null!==n&&!Array.isArray(n)&&"object"==typeof n?n:D(7)}return Array.isArray(e)||"object"!=typeof e?D(8):t?v({},t,{},e):e}(e.theme,t)}),[e.theme,t]);return e.children?r.createElement(Ge.Provider,{value:n},e.children):null}var Le={};function qe(e,t,n){var o=_(e),s=!Me(e),a=t.displayName,c=void 0===a?function(e){return Me(e)?"styled."+e:"Styled("+E(e)+")"}(e):a,d=t.componentId,h=void 0===d?function(e,t){var n="string"!=typeof e?"sc":Ve(e);Le[n]=(Le[n]||0)+1;var r=n+"-"+ze("5.2.0"+n+Le[n]);return t?t+"-"+r:r}(t.displayName,t.parentComponentId):d,p=t.attrs,f=void 0===p?w:p,g=t.displayName&&t.componentId?Ve(t.displayName)+"-"+t.componentId:t.componentId||h,S=o&&e.attrs?Array.prototype.concat(e.attrs,f).filter(Boolean):f,I=t.shouldForwardProp;o&&e.shouldForwardProp&&(I=I?function(n,r){return e.shouldForwardProp(n,r)&&t.shouldForwardProp(n,r)}:e.shouldForwardProp);var C,A=new Pe(n,g,o?e.componentStyle:void 0),O=function(e,t){return function(e,t,n){var r=e.attrs,o=e.componentStyle,s=e.defaultProps,a=e.foldedComponentIds,c=e.shouldForwardProp,d=e.styledComponentId,h=e.target;"production"!==process.env.NODE_ENV&&l(d);var p=function(e,t,n){void 0===e&&(e=b);var r=v({},t,{theme:e}),o={};return n.forEach((function(e){var t,n,i,s=e;for(t in N(s)&&(s=s(r)),s)r[t]=o[t]="className"===t?(n=o[t],i=s[t],n&&i?n+" "+i:n||i):s[t]})),[r,o]}(De(t,i(Ge),s)||b,t,r),f=p[0],y=p[1],g=function(e,t,n,r){var o=ce(),i=ue(),s=e.isStatic&&!t,a=s?e.generateAndInjectStyles(b,o,i):e.generateAndInjectStyles(n,o,i);return"production"!==process.env.NODE_ENV&&l(a),"production"!==process.env.NODE_ENV&&!s&&r&&r(a),a}(o,r.length>0,f,"production"!==process.env.NODE_ENV?e.warnTooManyClasses:void 0),S=n,w=y.$as||t.$as||y.as||t.as||h,E=Me(w),_=y!==t?v({},t,{},y):t,I=c||E&&m,C={};for(var A in _)"$"!==A[0]&&"as"!==A&&("forwardedAs"===A?C.as=_[A]:I&&!I(A,m)||(C[A]=_[A]));return t.style&&y.style!==t.style&&(C.style=v({},t.style,{},y.style)),C.className=Array.prototype.concat(a,d,g!==d?g:null,t.className,y.className).filter(Boolean).join(" "),C.ref=S,u(w,C)}(C,e,t)};return O.displayName=c,(C=r.forwardRef(O)).attrs=S,C.componentStyle=A,C.displayName=c,C.shouldForwardProp=I,C.foldedComponentIds=o?Array.prototype.concat(e.foldedComponentIds,e.styledComponentId):w,C.styledComponentId=g,C.target=o?e.target:e,C.withComponent=function(e){var r=t.componentId,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(t,["componentId"]),i=r&&r+"-"+(Me(e)?e:Ve(E(e)));return qe(e,v({},o,{attrs:S,componentId:i}),n)},Object.defineProperty(C,"defaultProps",{get:function(){return this._foldedDefaultProps},set:function(t){this._foldedDefaultProps=o?Ee({},e.defaultProps,t):t}}),"production"!==process.env.NODE_ENV&&(Te(c,g),C.warnTooManyClasses=function(e,t){var n={},r=!1;return function(o){if(!r&&(n[o]=!0,Object.keys(n).length>=200)){var i=t?' with the id of "'+t+'"':"";console.warn("Over 200 classes were generated for component "+e+i+".\nConsider using the attrs method, together with a style object for frequently changed styles.\nExample:\n  const Component = styled.div.attrs(props => ({\n    style: {\n      background: props.background,\n    },\n  }))`width: 100%;`\n\n  <Component />"),r=!0,n={}}}}(c,g)),C.toString=function(){return"."+C.styledComponentId},s&&y(C,e,{attrs:!0,componentStyle:!0,displayName:!0,foldedComponentIds:!0,shouldForwardProp:!0,self:!0,styledComponentId:!0,target:!0,withComponent:!0}),C}var He=function(e){return function e(t,r,o){if(void 0===o&&(o=b),!n(r))return D(1,String(r));var i=function(){return t(r,o,Se.apply(void 0,arguments))};return i.withConfig=function(n){return e(t,r,v({},o,{},n))},i.attrs=function(n){return e(t,r,v({},o,{attrs:Array.prototype.concat(o.attrs,n).filter(Boolean)}))},i}(qe,e)};["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","marquee","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","foreignObject","g","image","line","linearGradient","marker","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","svg","text","tspan"].forEach((function(e){He[e]=He(e)}));var $e=function(){function e(e,t){this.rules=e,this.componentId=t,this.isStatic=Ae(e),Z.registerId(this.componentId+1)}var t=e.prototype;return t.createStyles=function(e,t,n,r){var o=r(ge(this.rules,t,n,r).join(""),""),i=this.componentId+e;n.insertRules(i,i,o)},t.removeStyles=function(e,t){t.clearRules(this.componentId+e)},t.renderStyles=function(e,t,n,r){e>2&&Z.registerId(this.componentId+e),this.removeStyles(e,n),this.createStyles(e,t,n,r)},e}();function Ye(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),o=1;o<t;o++)n[o-1]=arguments[o];var s=Se.apply(void 0,[e].concat(n)),a="sc-global-"+ze(JSON.stringify(s)),u=new $e(s,a);function l(e){var t=ce(),n=ue(),o=i(Ge),l=c(t.allocateGSInstance(a)).current;return"production"!==process.env.NODE_ENV&&r.Children.count(e.children)&&console.warn("The global style component "+a+" was given child JSX. createGlobalStyle does not render children."),"production"!==process.env.NODE_ENV&&s.some((function(e){return"string"==typeof e&&-1!==e.indexOf("@import")}))&&console.warn("Please do not use @import CSS syntax in createGlobalStyle at this time, as the CSSOM APIs we use in production do not handle it well. Instead, we recommend using a library such as react-helmet to inject a typical <link> meta tag to the stylesheet, or simply embedding it manually in your index.html <head> section for a simpler app."),d((function(){return h(l,e,t,o,n),function(){return u.removeStyles(l,t)}}),[l,e,t,o,n]),null}function h(e,t,n,r,o){if(u.isStatic)u.renderStyles(e,P,n,o);else{var i=v({},t,{theme:De(t,r,l.defaultProps)});u.renderStyles(e,i,n,o)}}return"production"!==process.env.NODE_ENV&&Te(a),r.memo(l)}function We(e){"production"!==process.env.NODE_ENV&&"undefined"!=typeof navigator&&"ReactNative"===navigator.product&&console.warn("`keyframes` cannot be used on ReactNative, only on the web. To do animation in ReactNative please use Animated.");for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];var o=Se.apply(void 0,[e].concat(n)).join(""),i=ze(o);return new de(i,o)}var Ue=function(){function e(){var e=this;this._emitSheetCSS=function(){var t=e.instance.toString(),n=R();return"<style "+[n&&'nonce="'+n+'"',I+'="true"','data-styled-version="5.2.0"'].filter(Boolean).join(" ")+">"+t+"</style>"},this.getStyleTags=function(){return e.sealed?D(2):e._emitSheetCSS()},this.getStyleElement=function(){var t;if(e.sealed)return D(2);var n=((t={})[I]="",t["data-styled-version"]="5.2.0",t.dangerouslySetInnerHTML={__html:e.instance.toString()},t),o=R();return o&&(n.nonce=o),[r.createElement("style",v({},n,{key:"sc-0-0"}))]},this.seal=function(){e.sealed=!0},this.instance=new Z({isServer:!0}),this.sealed=!1}var t=e.prototype;return t.collectStyles=function(e){return this.sealed?D(2):r.createElement(le,{sheet:this.instance},e)},t.interleaveWithNodeStream=function(e){return D(3)},e}(),Je=function(e){var t=r.forwardRef((function(t,n){var o=i(Ge),s=e.defaultProps,a=De(t,o,s);return"production"!==process.env.NODE_ENV&&void 0===a&&console.warn('[withTheme] You are not using a ThemeProvider nor passing a theme prop or a theme in defaultProps in component class "'+E(e)+'"'),r.createElement(e,v({},t,{theme:a,ref:n}))}));return y(t,e),t.displayName="WithTheme("+E(e)+")",t},Xe=function(){return i(Ge)},Ze={StyleSheet:Z,masterSheet:se};"production"!==process.env.NODE_ENV&&"undefined"!=typeof navigator&&"ReactNative"===navigator.product&&console.warn("It looks like you've imported 'styled-components' on React Native.\nPerhaps you're looking to import 'styled-components/native'?\nRead more about this at https://www.styled-components.com/docs/basics#react-native"),"production"!==process.env.NODE_ENV&&"test"!==process.env.NODE_ENV&&(window["__styled-components-init__"]=window["__styled-components-init__"]||0,1===window["__styled-components-init__"]&&console.warn("It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles not rendering properly, errors happening during rehydration process, missing theme prop, and makes your application bigger without a good reason.\n\nSee https://s-c.sh/2BAXzed for more info."),window["__styled-components-init__"]+=1);export default He;export{Ue as ServerStyleSheet,oe as StyleSheetConsumer,re as StyleSheetContext,le as StyleSheetManager,Fe as ThemeConsumer,Ge as ThemeContext,Be as ThemeProvider,Ze as __PRIVATE__,Ye as createGlobalStyle,Se as css,_ as isStyledComponent,We as keyframes,Xe as useTheme,C as version,Je as withTheme};
 //# sourceMappingURL=styled-components.browser.esm.js.map

package/dist/styled-components.browser.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styled-components.browser.esm.js","sources":["../src/constants.js","../src/sheet/Tag.js","../src/sheet/Sheet.js","../src/models/StyleSheetManager.js","../src/models/Keyframes.js","../src/utils/isStaticRules.js","../src/models/StyledComponent.js","../src/models/GlobalStyle.js","../src/models/ServerStyleSheet.js"],"sourcesContent":["// @flow\n\ndeclare var SC_DISABLE_SPEEDY: ?boolean;\ndeclare var __VERSION__: string;\n\nexport const SC_ATTR =\n (typeof process !== 'undefined' && (process.env.REACT_APP_SC_ATTR \|\| process.env.SC_ATTR)) \|\|\n 'data-styled';\n\nexport const SC_ATTR_ACTIVE = 'active';\nexport const SC_ATTR_VERSION = 'data-styled-version';\nexport const SC_VERSION = __VERSION__;\nexport const SPLITTER = '/!sc/\\n';\n\nexport const IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;\n\nexport const DISABLE_SPEEDY =\n (typeof SC_DISABLE_SPEEDY === 'boolean' && SC_DISABLE_SPEEDY) \|\|\n (typeof process !== 'undefined' &&\n (process.env.REACT_APP_SC_DISABLE_SPEEDY \|\| process.env.SC_DISABLE_SPEEDY)) \|\|\n process.env.NODE_ENV !== 'production';\n\n// Shared empty execution context when generating static styles\nexport const STATIC_EXECUTION_CONTEXT = {};\n","// @flow\n/* eslint-disable no-use-before-define /\n\nimport { makeStyleTag, getSheet } from './dom';\nimport type { SheetOptions, Tag } from './types';\n\n/* Create a CSSStyleSheet-like tag depending on the environment /\nexport const makeTag = ({ isServer, useCSSOMInjection, target }: SheetOptions): Tag => {\n if (isServer) {\n return new VirtualTag(target);\n } else if (useCSSOMInjection) {\n return new CSSOMTag(target);\n } else {\n return new TextTag(target);\n }\n};\n\nexport class CSSOMTag implements Tag {\n element: HTMLStyleElement;\n\n sheet: CSSStyleSheet;\n\n length: number;\n\n constructor(target?: HTMLElement) {\n const element = (this.element = makeStyleTag(target));\n\n // Avoid Edge bug where empty style elements don't create sheets\n element.appendChild(document.createTextNode(''));\n\n this.sheet = getSheet(element);\n this.length = 0;\n }\n\n insertRule(index: number, rule: string): boolean {\n try {\n this.sheet.insertRule(rule, index);\n this.length++;\n return true;\n } catch (_error) {\n return false;\n }\n }\n\n deleteRule(index: number): void {\n this.sheet.deleteRule(index);\n this.length--;\n }\n\n getRule(index: number): string {\n const rule = this.sheet.cssRules[index];\n // Avoid IE11 quirk where cssText is inaccessible on some invalid rules\n if (rule !== undefined && typeof rule.cssText === 'string') {\n return rule.cssText;\n } else {\n return '';\n }\n }\n}\n\n/* A Tag that emulates the CSSStyleSheet API but uses text nodes /\nexport class TextTag implements Tag {\n element: HTMLStyleElement;\n\n nodes: NodeList<Node>;\n\n length: number;\n\n constructor(target?: HTMLElement) {\n const element = (this.element = makeStyleTag(target));\n this.nodes = element.childNodes;\n this.length = 0;\n }\n\n insertRule(index: number, rule: string): boolean {\n if (index <= this.length && index >= 0) {\n const node = document.createTextNode(rule);\n const refNode = this.nodes[index];\n this.element.insertBefore(node, refNode \|\| null);\n this.length++;\n return true;\n } else {\n return false;\n }\n }\n\n deleteRule(index: number): void {\n this.element.removeChild(this.nodes[index]);\n this.length--;\n }\n\n getRule(index: number): string {\n if (index < this.length) {\n return this.nodes[index].textContent;\n } else {\n return '';\n }\n }\n}\n\n/* A completely virtual (server-side) Tag that doesn't manipulate the DOM /\nexport class VirtualTag implements Tag {\n rules: string[];\n\n length: number;\n\n constructor(_target?: HTMLElement) {\n this.rules = [];\n this.length = 0;\n }\n\n insertRule(index: number, rule: string): boolean {\n if (index <= this.length) {\n this.rules.splice(index, 0, rule);\n this.length++;\n return true;\n } else {\n return false;\n }\n }\n\n deleteRule(index: number): void {\n this.rules.splice(index, 1);\n this.length--;\n }\n\n getRule(index: number): string {\n if (index < this.length) {\n return this.rules[index];\n } else {\n return '';\n }\n }\n}\n","// @flow\nimport { DISABLE_SPEEDY, IS_BROWSER } from '../constants';\nimport type { GroupedTag, Sheet, SheetOptions } from './types';\nimport { makeTag } from './Tag';\nimport { makeGroupedTag } from './GroupedTag';\nimport { getGroupForId } from './GroupIDAllocator';\nimport { outputSheet, rehydrateSheet } from './Rehydration';\n\nlet SHOULD_REHYDRATE = IS_BROWSER;\n\ntype SheetConstructorArgs = {\n isServer?: boolean,\n useCSSOMInjection?: boolean,\n target?: HTMLElement,\n};\n\ntype GlobalStylesAllocationMap = { [key: string]: number };\ntype NamesAllocationMap = Map<string, Set<string>>;\n\nconst defaultOptions = {\n isServer: !IS_BROWSER,\n useCSSOMInjection: !DISABLE_SPEEDY,\n};\n\n/* Contains the main stylesheet logic for stringification and caching /\nexport default class StyleSheet implements Sheet {\n gs: GlobalStylesAllocationMap;\n\n names: NamesAllocationMap;\n\n options: SheetOptions;\n\n tag: void \| GroupedTag;\n\n /* Register a group ID to give it an index /\n static registerId(id: string): number {\n return getGroupForId(id);\n }\n\n constructor(\n options: SheetConstructorArgs = defaultOptions,\n globalStyles?: GlobalStylesAllocationMap = {},\n names?: NamesAllocationMap\n ) {\n this.options = {\n ...defaultOptions,\n ...options,\n };\n\n this.gs = globalStyles;\n this.names = new Map(names);\n\n // We rehydrate only once and use the sheet that is created first\n if (!this.options.isServer && IS_BROWSER && SHOULD_REHYDRATE) {\n SHOULD_REHYDRATE = false;\n rehydrateSheet(this);\n }\n }\n\n reconstructWithOptions(options: SheetConstructorArgs, withNames?: boolean = true) {\n return new StyleSheet(\n { ...this.options, ...options },\n this.gs,\n (withNames && this.names) \|\| undefined\n );\n }\n\n allocateGSInstance(id: string) {\n return (this.gs[id] = (this.gs[id] \|\| 0) + 1);\n }\n\n /* Lazily initialises a GroupedTag for when it's actually needed /\n getTag(): GroupedTag {\n return this.tag \|\| (this.tag = makeGroupedTag(makeTag(this.options)));\n }\n\n /* Check whether a name is known for caching /\n hasNameForId(id: string, name: string): boolean {\n return this.names.has(id) && (this.names.get(id): any).has(name);\n }\n\n /* Mark a group's name as known for caching /\n registerName(id: string, name: string) {\n getGroupForId(id);\n\n if (!this.names.has(id)) {\n const groupNames = new Set();\n groupNames.add(name);\n this.names.set(id, groupNames);\n } else {\n (this.names.get(id): any).add(name);\n }\n }\n\n /* Insert new rules which also marks the name as known /\n insertRules(id: string, name: string, rules: string[]) {\n this.registerName(id, name);\n this.getTag().insertRules(getGroupForId(id), rules);\n }\n\n /* Clears all cached names for a given group ID /\n clearNames(id: string) {\n if (this.names.has(id)) {\n (this.names.get(id): any).clear();\n }\n }\n\n /* Clears all rules for a given group ID /\n clearRules(id: string) {\n this.getTag().clearGroup(getGroupForId(id));\n this.clearNames(id);\n }\n\n /* Clears the entire tag which deletes all rules but not its names /\n clearTag() {\n // NOTE: This does not clear the names, since it's only used during SSR\n // so that we can continuously output only new rules\n this.tag = undefined;\n }\n\n /* Outputs the current sheet as a CSS string with markers for SSR /\n toString(): string {\n return outputSheet(this);\n }\n}\n","// @flow\nimport React, { useContext, useEffect, useMemo, useState, type Node, type Context } from 'react';\nimport shallowequal from 'shallowequal';\nimport StyleSheet from '../sheet';\nimport createStylisInstance, { type Stringifier } from '../utils/stylis';\n\ntype Props = {\n children?: Node,\n disableCSSOMInjection?: boolean,\n disableVendorPrefixes?: boolean,\n sheet?: StyleSheet,\n stylisPlugins?: Array<Function>,\n target?: HTMLElement,\n};\n\nexport const StyleSheetContext: Context<StyleSheet \| void> = React.createContext();\nexport const StyleSheetConsumer = StyleSheetContext.Consumer;\nexport const StylisContext: Context<Stringifier \| void> = React.createContext();\nexport const StylisConsumer = StylisContext.Consumer;\n\nexport const masterSheet: StyleSheet = new StyleSheet();\nexport const masterStylis: Stringifier = createStylisInstance();\n\nexport function useStyleSheet(): StyleSheet {\n return useContext(StyleSheetContext) \|\| masterSheet;\n}\n\nexport function useStylis(): Stringifier {\n return useContext(StylisContext) \|\| masterStylis;\n}\n\nexport default function StyleSheetManager(props: Props) {\n const [plugins, setPlugins] = useState(props.stylisPlugins);\n const contextStyleSheet = useStyleSheet();\n\n const styleSheet = useMemo(() => {\n let sheet = contextStyleSheet;\n\n if (props.sheet) {\n // eslint-disable-next-line prefer-destructuring\n sheet = props.sheet;\n } else if (props.target) {\n sheet = sheet.reconstructWithOptions({ target: props.target }, false);\n }\n\n if (props.disableCSSOMInjection) {\n sheet = sheet.reconstructWithOptions({ useCSSOMInjection: false });\n }\n\n return sheet;\n }, [props.disableCSSOMInjection, props.sheet, props.target]);\n\n const stylis = useMemo(\n () =>\n createStylisInstance({\n options: { prefix: !props.disableVendorPrefixes },\n plugins,\n }),\n [props.disableVendorPrefixes, plugins]\n );\n\n useEffect(() => {\n if (!shallowequal(plugins, props.stylisPlugins)) setPlugins(props.stylisPlugins);\n }, [props.stylisPlugins]);\n\n return (\n <StyleSheetContext.Provider value={styleSheet}>\n <StylisContext.Provider value={stylis}>\n {process.env.NODE_ENV !== 'production'\n ? React.Children.only(props.children)\n : props.children}\n </StylisContext.Provider>\n </StyleSheetContext.Provider>\n );\n}\n","// @flow\nimport StyleSheet from '../sheet';\nimport { type Stringifier } from '../types';\nimport throwStyledError from '../utils/error';\nimport { masterStylis } from './StyleSheetManager';\n\nexport default class Keyframes {\n id: string;\n\n name: string;\n\n rules: string;\n\n constructor(name: string, rules: string) {\n this.name = name;\n this.id = `sc-keyframes-${name}`;\n this.rules = rules;\n }\n\n inject = (styleSheet: StyleSheet, stylisInstance: Stringifier = masterStylis) => {\n const resolvedName = this.name + stylisInstance.hash;\n\n if (!styleSheet.hasNameForId(this.id, resolvedName)) {\n styleSheet.insertRules(\n this.id,\n resolvedName,\n stylisInstance(this.rules, resolvedName, '@keyframes')\n );\n }\n };\n\n toString = () => {\n return throwStyledError(12, String(this.name));\n };\n\n getName(stylisInstance: Stringifier = masterStylis) {\n return this.name + stylisInstance.hash;\n }\n}\n","// @flow\nimport isFunction from './isFunction';\nimport isStyledComponent from './isStyledComponent';\nimport type { RuleSet } from '../types';\n\nexport default function isStaticRules(rules: RuleSet): boolean {\n for (let i = 0; i < rules.length; i += 1) {\n const rule = rules[i];\n\n if (isFunction(rule) && !isStyledComponent(rule)) {\n // functions are allowed to be static if they're just being\n // used to get the classname of a nested styled component\n return false;\n }\n }\n\n return true;\n}\n","// @flow\nimport validAttr from '@emotion/is-prop-valid';\nimport React, {\n createElement,\n useContext,\n useDebugValue,\n type AbstractComponent,\n type Ref,\n} from 'react';\nimport hoist from 'hoist-non-react-statics';\nimport { SC_VERSION } from '../constants';\nimport merge from '../utils/mixinDeep';\nimport ComponentStyle from './ComponentStyle';\nimport createWarnTooManyClasses from '../utils/createWarnTooManyClasses';\nimport { checkDynamicCreation } from '../utils/checkDynamicCreation';\nimport determineTheme from '../utils/determineTheme';\nimport escape from '../utils/escape';\nimport generateDisplayName from '../utils/generateDisplayName';\nimport getComponentName from '../utils/getComponentName';\nimport generateComponentId from '../utils/generateComponentId';\nimport isFunction from '../utils/isFunction';\nimport isStyledComponent from '../utils/isStyledComponent';\nimport isTag from '../utils/isTag';\nimport joinStrings from '../utils/joinStrings';\nimport { ThemeContext } from './ThemeProvider';\nimport { useStyleSheet, useStylis } from './StyleSheetManager';\nimport { EMPTY_ARRAY, EMPTY_OBJECT } from '../utils/empties';\n\nimport type { Attrs, RuleSet, Target } from '../types';\n\n/ global $Call /\n\nconst identifiers = {};\n\n/ We depend on components having unique IDs /\nfunction generateId(displayName: string, parentComponentId: string) {\n const name = typeof displayName !== 'string' ? 'sc' : escape(displayName);\n // Ensure that no displayName can lead to duplicate componentIds\n identifiers[name] = (identifiers[name] \|\| 0) + 1;\n\n const componentId = `${name}-${generateComponentId(\n // SC_VERSION gives us isolation between multiple runtimes on the page at once\n // this is improved further with use of the babel plugin \"namespace\" feature\n SC_VERSION + name + identifiers[name]\n )}`;\n\n return parentComponentId ? `${parentComponentId}-${componentId}` : componentId;\n}\n\nfunction useResolvedAttrs<Config>(theme: any = EMPTY_OBJECT, props: Config, attrs: Attrs) {\n // NOTE: can't memoize this\n // returns [context, resolvedAttrs]\n // where resolvedAttrs is only the things injected by the attrs themselves\n const context = { ...props, theme };\n const resolvedAttrs = {};\n\n attrs.forEach(attrDef => {\n let resolvedAttrDef = attrDef;\n let key;\n\n if (isFunction(resolvedAttrDef)) {\n resolvedAttrDef = resolvedAttrDef(context);\n }\n\n / eslint-disable guard-for-in /\n for (key in resolvedAttrDef) {\n context[key] = resolvedAttrs[key] =\n key === 'className'\n ? joinStrings(resolvedAttrs[key], resolvedAttrDef[key])\n : resolvedAttrDef[key];\n }\n / eslint-enable guard-for-in /\n });\n\n return [context, resolvedAttrs];\n}\n\ninterface StyledComponentWrapperProperties {\n attrs: Attrs;\n componentStyle: ComponentStyle;\n displayName: string;\n foldedComponentIds: Array<string>;\n target: Target;\n shouldForwardProp: ?(prop: string, isValidAttr: (prop: string) => boolean) => boolean;\n styledComponentId: string;\n warnTooManyClasses: $Call<typeof createWarnTooManyClasses, string, string>;\n}\n\ntype StyledComponentWrapper<Config, Instance> = AbstractComponent<Config, Instance> &\n StyledComponentWrapperProperties;\n\nfunction useInjectedStyle<T>(\n componentStyle: ComponentStyle,\n hasAttrs: boolean,\n resolvedAttrs: T,\n warnTooManyClasses?: $Call<typeof createWarnTooManyClasses, string, string>\n) {\n const styleSheet = useStyleSheet();\n const stylis = useStylis();\n\n // statically styled-components don't need to build an execution context object,\n // and shouldn't be increasing the number of class names\n const isStatic = componentStyle.isStatic && !hasAttrs;\n\n const className = isStatic\n ? componentStyle.generateAndInjectStyles(EMPTY_OBJECT, styleSheet, stylis)\n : componentStyle.generateAndInjectStyles(resolvedAttrs, styleSheet, stylis);\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n if (process.env.NODE_ENV !== 'production') useDebugValue(className);\n\n if (process.env.NODE_ENV !== 'production' && !isStatic && warnTooManyClasses) {\n warnTooManyClasses(className);\n }\n\n return className;\n}\n\nfunction useStyledComponentImpl<Config: {}, Instance>(\n forwardedComponent: StyledComponentWrapper<Config, Instance>,\n props: Object,\n forwardedRef: Ref<any>\n) {\n const {\n attrs: componentAttrs,\n componentStyle,\n // $FlowFixMe\n defaultProps,\n foldedComponentIds,\n // $FlowFixMe\n shouldForwardProp,\n styledComponentId,\n target,\n } = forwardedComponent;\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n if (process.env.NODE_ENV !== 'production') useDebugValue(styledComponentId);\n\n // NOTE: the non-hooks version only subscribes to this when !componentStyle.isStatic,\n // but that'd be against the rules-of-hooks. We could be naughty and do it anyway as it\n // should be an immutable value, but behave for now.\n const theme = determineTheme(props, useContext(ThemeContext), defaultProps);\n\n const [context, attrs] = useResolvedAttrs(theme \|\| EMPTY_OBJECT, props, componentAttrs);\n\n const generatedClassName = useInjectedStyle(\n componentStyle,\n componentAttrs.length > 0,\n context,\n process.env.NODE_ENV !== 'production' ? forwardedComponent.warnTooManyClasses : undefined\n );\n\n const refToForward = forwardedRef;\n\n const elementToBeCreated: Target = attrs.$as \|\| props.$as \|\| attrs.as \|\| props.as \|\| target;\n\n const isTargetTag = isTag(elementToBeCreated);\n const computedProps = attrs !== props ? { ...props, ...attrs } : props;\n const propFilterFn = shouldForwardProp \|\| (isTargetTag && validAttr);\n const propsForElement = {};\n\n // eslint-disable-next-line guard-for-in\n for (const key in computedProps) {\n if (key[0] === '$' \|\| key === 'as') continue;\n else if (key === 'forwardedAs') {\n propsForElement.as = computedProps[key];\n } else if (!propFilterFn \|\| propFilterFn(key, validAttr)) {\n // Don't pass through non HTML tags through to HTML elements\n propsForElement[key] = computedProps[key];\n }\n }\n\n if (props.style && attrs.style !== props.style) {\n propsForElement.style = { ...props.style, ...attrs.style };\n }\n\n propsForElement.className = Array.prototype\n .concat(\n foldedComponentIds,\n styledComponentId,\n generatedClassName !== styledComponentId ? generatedClassName : null,\n props.className,\n attrs.className\n )\n .filter(Boolean)\n .join(' ');\n\n propsForElement.ref = refToForward;\n\n return createElement(elementToBeCreated, propsForElement);\n}\n\nexport default function createStyledComponent(\n target: Target \| StyledComponentWrapper<, >,\n options: Object,\n rules: RuleSet\n) {\n const isTargetStyledComp = isStyledComponent(target);\n const isCompositeComponent = !isTag(target);\n\n const {\n displayName = generateDisplayName(target),\n componentId = generateId(options.displayName, options.parentComponentId),\n attrs = EMPTY_ARRAY,\n } = options;\n\n const styledComponentId =\n options.displayName && options.componentId\n ? `${escape(options.displayName)}-${options.componentId}`\n : options.componentId \|\| componentId;\n\n // fold the underlying StyledComponent attrs up (implicit extend)\n const finalAttrs =\n // $FlowFixMe\n isTargetStyledComp && target.attrs\n ? Array.prototype.concat(target.attrs, attrs).filter(Boolean)\n : attrs;\n\n // eslint-disable-next-line prefer-destructuring\n let shouldForwardProp = options.shouldForwardProp;\n\n // $FlowFixMe\n if (isTargetStyledComp && target.shouldForwardProp) {\n if (shouldForwardProp) {\n // compose nested shouldForwardProp calls\n shouldForwardProp = (prop, filterFn) =>\n // $FlowFixMe\n target.shouldForwardProp(prop, filterFn) && options.shouldForwardProp(prop, filterFn);\n } else {\n // eslint-disable-next-line prefer-destructuring\n shouldForwardProp = target.shouldForwardProp;\n }\n }\n\n const componentStyle = new ComponentStyle(\n rules,\n styledComponentId,\n isTargetStyledComp ? ((target: Object).componentStyle: ComponentStyle) : undefined\n );\n\n /\n forwardRef creates a new interim component, which we'll take advantage of\n * instead of extending ParentComponent to create _another_ interim class\n /\n let WrappedStyledComponent;\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const forwardRef = (props, ref) => useStyledComponentImpl(WrappedStyledComponent, props, ref);\n\n forwardRef.displayName = displayName;\n\n // $FlowFixMe this is a forced cast to merge it StyledComponentWrapperProperties\n WrappedStyledComponent = (React.forwardRef(forwardRef): StyledComponentWrapper<, >);\n\n WrappedStyledComponent.attrs = finalAttrs;\n WrappedStyledComponent.componentStyle = componentStyle;\n WrappedStyledComponent.displayName = displayName;\n WrappedStyledComponent.shouldForwardProp = shouldForwardProp;\n\n // this static is used to preserve the cascade of static classes for component selector\n // purposes; this is especially important with usage of the css prop\n WrappedStyledComponent.foldedComponentIds = isTargetStyledComp\n ? // $FlowFixMe\n Array.prototype.concat(target.foldedComponentIds, target.styledComponentId)\n : EMPTY_ARRAY;\n\n WrappedStyledComponent.styledComponentId = styledComponentId;\n\n // fold the underlying StyledComponent target up since we folded the styles\n WrappedStyledComponent.target = isTargetStyledComp\n ? // $FlowFixMe\n target.target\n : target;\n\n // $FlowFixMe\n WrappedStyledComponent.withComponent = function withComponent(tag: Target) {\n const { componentId: previousComponentId, ...optionsToCopy } = options;\n\n const newComponentId =\n previousComponentId &&\n `${previousComponentId}-${isTag(tag) ? tag : escape(getComponentName(tag))}`;\n\n const newOptions = {\n ...optionsToCopy,\n attrs: finalAttrs,\n componentId: newComponentId,\n };\n\n return createStyledComponent(tag, newOptions, rules);\n };\n\n // $FlowFixMe\n Object.defineProperty(WrappedStyledComponent, 'defaultProps', {\n get() {\n return this._foldedDefaultProps;\n },\n\n set(obj) {\n // $FlowFixMe\n this._foldedDefaultProps = isTargetStyledComp ? merge({}, target.defaultProps, obj) : obj;\n },\n });\n\n if (process.env.NODE_ENV !== 'production') {\n checkDynamicCreation(displayName, styledComponentId);\n\n WrappedStyledComponent.warnTooManyClasses = createWarnTooManyClasses(\n displayName,\n styledComponentId\n );\n }\n\n // $FlowFixMe\n WrappedStyledComponent.toString = () => `.${WrappedStyledComponent.styledComponentId}`;\n\n if (isCompositeComponent) {\n hoist(WrappedStyledComponent, (target: any), {\n // all SC-specific things should not be hoisted\n attrs: true,\n componentStyle: true,\n displayName: true,\n foldedComponentIds: true,\n shouldForwardProp: true,\n self: true,\n styledComponentId: true,\n target: true,\n withComponent: true,\n });\n }\n\n return WrappedStyledComponent;\n}\n","// @flow\nimport flatten from '../utils/flatten';\nimport isStaticRules from '../utils/isStaticRules';\nimport StyleSheet from '../sheet';\n\nimport type { RuleSet, Stringifier } from '../types';\n\nexport default class GlobalStyle {\n componentId: string;\n\n isStatic: boolean;\n\n rules: RuleSet;\n\n constructor(rules: RuleSet, componentId: string) {\n this.rules = rules;\n this.componentId = componentId;\n this.isStatic = isStaticRules(rules);\n }\n\n createStyles(\n instance: number,\n executionContext: Object,\n styleSheet: StyleSheet,\n stylis: Stringifier\n ) {\n const flatCSS = flatten(this.rules, executionContext, styleSheet, stylis);\n const css = stylis(flatCSS.join(''), '');\n const id = this.componentId + instance;\n\n // NOTE: We use the id as a name as well, since these rules never change\n styleSheet.insertRules(id, id, css);\n }\n\n removeStyles(instance: number, styleSheet: StyleSheet) {\n styleSheet.clearRules(this.componentId + instance);\n }\n\n renderStyles(\n instance: number,\n executionContext: Object,\n styleSheet: StyleSheet,\n stylis: Stringifier\n ) {\n StyleSheet.registerId(this.componentId + instance);\n\n // NOTE: Remove old styles, then inject the new ones\n this.removeStyles(instance, styleSheet);\n this.createStyles(instance, executionContext, styleSheet, stylis);\n }\n}\n","// @flow\n/ eslint-disable no-underscore-dangle /\nimport React from 'react';\nimport { IS_BROWSER, SC_ATTR, SC_ATTR_VERSION, SC_VERSION } from '../constants';\nimport throwStyledError from '../utils/error';\nimport getNonce from '../utils/nonce';\nimport StyleSheet from '../sheet';\nimport StyleSheetManager from './StyleSheetManager';\n\ndeclare var __SERVER__: boolean;\n\nconst CLOSING_TAG_R = /^\\s<\\/[a-z]/i;\n\nexport default class ServerStyleSheet {\n isStreaming: boolean;\n\n instance: StyleSheet;\n\n sealed: boolean;\n\n constructor() {\n this.instance = new StyleSheet({ isServer: true });\n this.sealed = false;\n }\n\n _emitSheetCSS = (): string => {\n const css = this.instance.toString();\n const nonce = getNonce();\n const attrs = [nonce && `nonce=\"${nonce}\"`, `${SC_ATTR}=\"true\"`, `${SC_ATTR_VERSION}=\"${SC_VERSION}\"`];\n const htmlAttr = attrs.filter(Boolean).join(' ');\n\n return `<style ${htmlAttr}>${css}</style>`;\n };\n\n collectStyles(children: any) {\n if (this.sealed) {\n return throwStyledError(2);\n }\n\n return <StyleSheetManager sheet={this.instance}>{children}</StyleSheetManager>;\n }\n\n getStyleTags = (): string => {\n if (this.sealed) {\n return throwStyledError(2);\n }\n\n return this._emitSheetCSS();\n };\n\n getStyleElement = () => {\n if (this.sealed) {\n return throwStyledError(2);\n }\n\n const props = {\n [SC_ATTR]: '',\n [SC_ATTR_VERSION]: SC_VERSION,\n dangerouslySetInnerHTML: {\n __html: this.instance.toString(),\n },\n };\n\n const nonce = getNonce();\n if (nonce) {\n (props: any).nonce = nonce;\n }\n\n // v4 returned an array for this fn, so we'll do the same for v5 for backward compat\n return [<style {...props} key=\"sc-0-0\" />];\n };\n\n // eslint-disable-next-line consistent-return\n interleaveWithNodeStream(input: any) {\n if (!__SERVER__ \|\| IS_BROWSER) {\n return throwStyledError(3);\n } else if (this.sealed) {\n return throwStyledError(2);\n }\n\n if (__SERVER__) {\n this.seal();\n\n // eslint-disable-next-line global-require\n const { Readable, Transform } = require('stream');\n\n const readableStream: Readable = input;\n const { instance: sheet, _emitSheetCSS } = this;\n\n const transformer = new Transform({\n transform: function appendStyleChunks(chunk, /* encoding */ _, callback) {\n // Get the chunk and retrieve the sheet's CSS as an HTML chunk,\n // then reset its rules so we get only new ones for the next chunk\n const renderedHtml = chunk.toString();\n const html = _emitSheetCSS();\n\n sheet.clearTag();\n\n // prepend style html to chunk, unless the start of the chunk is a\n // closing tag in which case append right after that\n if (CLOSING_TAG_R.test(renderedHtml)) {\n const endOfClosingTag = renderedHtml.indexOf('>') + 1;\n const before = renderedHtml.slice(0, endOfClosingTag);\n const after = renderedHtml.slice(endOfClosingTag);\n\n this.push(before + html + after);\n } else {\n this.push(html + renderedHtml);\n }\n\n callback();\n },\n });\n\n readableStream.on('error', err => {\n // forward the error to the transform stream\n transformer.emit('error', err);\n });\n\n return readableStream.pipe(transformer);\n }\n }\n\n seal = () => {\n this.sealed = true;\n };\n}\n"],"names":["nodes","insertRule","names","id","stylisPlugins","isCompositeComponent","flatten","React"],"mappings":"4iCAGgC,w9KCmFNA,gHAgBxBC,WAAA,+8DC5DQC,yxBAmC8BC,iOAkBVA,swDChEiBC,2uBCZGD,wrECdG,okGCqJ3B,wTAuClBE,ykHC3KYC,kCAEVH,wxECyCEI"}
1	+ {"version":3,"file":"styled-components.browser.esm.js","sources":["../src/constants.js","../src/sheet/Tag.js","../src/sheet/Sheet.js","../src/models/StyleSheetManager.js","../src/models/Keyframes.js","../src/utils/isStaticRules.js","../src/models/StyledComponent.js","../src/models/GlobalStyle.js","../src/models/ServerStyleSheet.js"],"sourcesContent":["// @flow\n\ndeclare var SC_DISABLE_SPEEDY: ?boolean;\ndeclare var __VERSION__: string;\n\nexport const SC_ATTR =\n (typeof process !== 'undefined' && (process.env.REACT_APP_SC_ATTR \|\| process.env.SC_ATTR)) \|\|\n 'data-styled';\n\nexport const SC_ATTR_ACTIVE = 'active';\nexport const SC_ATTR_VERSION = 'data-styled-version';\nexport const SC_VERSION = __VERSION__;\nexport const SPLITTER = '/!sc/\\n';\n\nexport const IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;\n\nexport const DISABLE_SPEEDY =\n (typeof SC_DISABLE_SPEEDY === 'boolean' && SC_DISABLE_SPEEDY) \|\|\n (typeof process !== 'undefined' &&\n (process.env.REACT_APP_SC_DISABLE_SPEEDY \|\| process.env.SC_DISABLE_SPEEDY)) \|\|\n process.env.NODE_ENV !== 'production';\n\n// Shared empty execution context when generating static styles\nexport const STATIC_EXECUTION_CONTEXT = {};\n","// @flow\n/* eslint-disable no-use-before-define /\n\nimport { makeStyleTag, getSheet } from './dom';\nimport type { SheetOptions, Tag } from './types';\n\n/* Create a CSSStyleSheet-like tag depending on the environment /\nexport const makeTag = ({ isServer, useCSSOMInjection, target }: SheetOptions): Tag => {\n if (isServer) {\n return new VirtualTag(target);\n } else if (useCSSOMInjection) {\n return new CSSOMTag(target);\n } else {\n return new TextTag(target);\n }\n};\n\nexport class CSSOMTag implements Tag {\n element: HTMLStyleElement;\n\n sheet: CSSStyleSheet;\n\n length: number;\n\n constructor(target?: HTMLElement) {\n const element = (this.element = makeStyleTag(target));\n\n // Avoid Edge bug where empty style elements don't create sheets\n element.appendChild(document.createTextNode(''));\n\n this.sheet = getSheet(element);\n this.length = 0;\n }\n\n insertRule(index: number, rule: string): boolean {\n try {\n this.sheet.insertRule(rule, index);\n this.length++;\n return true;\n } catch (_error) {\n return false;\n }\n }\n\n deleteRule(index: number): void {\n this.sheet.deleteRule(index);\n this.length--;\n }\n\n getRule(index: number): string {\n const rule = this.sheet.cssRules[index];\n // Avoid IE11 quirk where cssText is inaccessible on some invalid rules\n if (rule !== undefined && typeof rule.cssText === 'string') {\n return rule.cssText;\n } else {\n return '';\n }\n }\n}\n\n/* A Tag that emulates the CSSStyleSheet API but uses text nodes /\nexport class TextTag implements Tag {\n element: HTMLStyleElement;\n\n nodes: NodeList<Node>;\n\n length: number;\n\n constructor(target?: HTMLElement) {\n const element = (this.element = makeStyleTag(target));\n this.nodes = element.childNodes;\n this.length = 0;\n }\n\n insertRule(index: number, rule: string): boolean {\n if (index <= this.length && index >= 0) {\n const node = document.createTextNode(rule);\n const refNode = this.nodes[index];\n this.element.insertBefore(node, refNode \|\| null);\n this.length++;\n return true;\n } else {\n return false;\n }\n }\n\n deleteRule(index: number): void {\n this.element.removeChild(this.nodes[index]);\n this.length--;\n }\n\n getRule(index: number): string {\n if (index < this.length) {\n return this.nodes[index].textContent;\n } else {\n return '';\n }\n }\n}\n\n/* A completely virtual (server-side) Tag that doesn't manipulate the DOM /\nexport class VirtualTag implements Tag {\n rules: string[];\n\n length: number;\n\n constructor(_target?: HTMLElement) {\n this.rules = [];\n this.length = 0;\n }\n\n insertRule(index: number, rule: string): boolean {\n if (index <= this.length) {\n this.rules.splice(index, 0, rule);\n this.length++;\n return true;\n } else {\n return false;\n }\n }\n\n deleteRule(index: number): void {\n this.rules.splice(index, 1);\n this.length--;\n }\n\n getRule(index: number): string {\n if (index < this.length) {\n return this.rules[index];\n } else {\n return '';\n }\n }\n}\n","// @flow\nimport { DISABLE_SPEEDY, IS_BROWSER } from '../constants';\nimport type { GroupedTag, Sheet, SheetOptions } from './types';\nimport { makeTag } from './Tag';\nimport { makeGroupedTag } from './GroupedTag';\nimport { getGroupForId } from './GroupIDAllocator';\nimport { outputSheet, rehydrateSheet } from './Rehydration';\n\nlet SHOULD_REHYDRATE = IS_BROWSER;\n\ntype SheetConstructorArgs = {\n isServer?: boolean,\n useCSSOMInjection?: boolean,\n target?: HTMLElement,\n};\n\ntype GlobalStylesAllocationMap = { [key: string]: number };\ntype NamesAllocationMap = Map<string, Set<string>>;\n\nconst defaultOptions = {\n isServer: !IS_BROWSER,\n useCSSOMInjection: !DISABLE_SPEEDY,\n};\n\n/* Contains the main stylesheet logic for stringification and caching /\nexport default class StyleSheet implements Sheet {\n gs: GlobalStylesAllocationMap;\n\n names: NamesAllocationMap;\n\n options: SheetOptions;\n\n tag: void \| GroupedTag;\n\n /* Register a group ID to give it an index /\n static registerId(id: string): number {\n return getGroupForId(id);\n }\n\n constructor(\n options: SheetConstructorArgs = defaultOptions,\n globalStyles?: GlobalStylesAllocationMap = {},\n names?: NamesAllocationMap\n ) {\n this.options = {\n ...defaultOptions,\n ...options,\n };\n\n this.gs = globalStyles;\n this.names = new Map(names);\n\n // We rehydrate only once and use the sheet that is created first\n if (!this.options.isServer && IS_BROWSER && SHOULD_REHYDRATE) {\n SHOULD_REHYDRATE = false;\n rehydrateSheet(this);\n }\n }\n\n reconstructWithOptions(options: SheetConstructorArgs, withNames?: boolean = true) {\n return new StyleSheet(\n { ...this.options, ...options },\n this.gs,\n (withNames && this.names) \|\| undefined\n );\n }\n\n allocateGSInstance(id: string) {\n return (this.gs[id] = (this.gs[id] \|\| 0) + 1);\n }\n\n /* Lazily initialises a GroupedTag for when it's actually needed /\n getTag(): GroupedTag {\n return this.tag \|\| (this.tag = makeGroupedTag(makeTag(this.options)));\n }\n\n /* Check whether a name is known for caching /\n hasNameForId(id: string, name: string): boolean {\n return this.names.has(id) && (this.names.get(id): any).has(name);\n }\n\n /* Mark a group's name as known for caching /\n registerName(id: string, name: string) {\n getGroupForId(id);\n\n if (!this.names.has(id)) {\n const groupNames = new Set();\n groupNames.add(name);\n this.names.set(id, groupNames);\n } else {\n (this.names.get(id): any).add(name);\n }\n }\n\n /* Insert new rules which also marks the name as known /\n insertRules(id: string, name: string, rules: string[]) {\n this.registerName(id, name);\n this.getTag().insertRules(getGroupForId(id), rules);\n }\n\n /* Clears all cached names for a given group ID /\n clearNames(id: string) {\n if (this.names.has(id)) {\n (this.names.get(id): any).clear();\n }\n }\n\n /* Clears all rules for a given group ID /\n clearRules(id: string) {\n this.getTag().clearGroup(getGroupForId(id));\n this.clearNames(id);\n }\n\n /* Clears the entire tag which deletes all rules but not its names /\n clearTag() {\n // NOTE: This does not clear the names, since it's only used during SSR\n // so that we can continuously output only new rules\n this.tag = undefined;\n }\n\n /* Outputs the current sheet as a CSS string with markers for SSR /\n toString(): string {\n return outputSheet(this);\n }\n}\n","// @flow\nimport React, { useContext, useEffect, useMemo, useState, type Node, type Context } from 'react';\nimport shallowequal from 'shallowequal';\nimport StyleSheet from '../sheet';\nimport createStylisInstance, { type Stringifier } from '../utils/stylis';\n\ntype Props = {\n children?: Node,\n disableCSSOMInjection?: boolean,\n disableVendorPrefixes?: boolean,\n sheet?: StyleSheet,\n stylisPlugins?: Array<Function>,\n target?: HTMLElement,\n};\n\nexport const StyleSheetContext: Context<StyleSheet \| void> = React.createContext();\nexport const StyleSheetConsumer = StyleSheetContext.Consumer;\nexport const StylisContext: Context<Stringifier \| void> = React.createContext();\nexport const StylisConsumer = StylisContext.Consumer;\n\nexport const masterSheet: StyleSheet = new StyleSheet();\nexport const masterStylis: Stringifier = createStylisInstance();\n\nexport function useStyleSheet(): StyleSheet {\n return useContext(StyleSheetContext) \|\| masterSheet;\n}\n\nexport function useStylis(): Stringifier {\n return useContext(StylisContext) \|\| masterStylis;\n}\n\nexport default function StyleSheetManager(props: Props) {\n const [plugins, setPlugins] = useState(props.stylisPlugins);\n const contextStyleSheet = useStyleSheet();\n\n const styleSheet = useMemo(() => {\n let sheet = contextStyleSheet;\n\n if (props.sheet) {\n // eslint-disable-next-line prefer-destructuring\n sheet = props.sheet;\n } else if (props.target) {\n sheet = sheet.reconstructWithOptions({ target: props.target }, false);\n }\n\n if (props.disableCSSOMInjection) {\n sheet = sheet.reconstructWithOptions({ useCSSOMInjection: false });\n }\n\n return sheet;\n }, [props.disableCSSOMInjection, props.sheet, props.target]);\n\n const stylis = useMemo(\n () =>\n createStylisInstance({\n options: { prefix: !props.disableVendorPrefixes },\n plugins,\n }),\n [props.disableVendorPrefixes, plugins]\n );\n\n useEffect(() => {\n if (!shallowequal(plugins, props.stylisPlugins)) setPlugins(props.stylisPlugins);\n }, [props.stylisPlugins]);\n\n return (\n <StyleSheetContext.Provider value={styleSheet}>\n <StylisContext.Provider value={stylis}>\n {process.env.NODE_ENV !== 'production'\n ? React.Children.only(props.children)\n : props.children}\n </StylisContext.Provider>\n </StyleSheetContext.Provider>\n );\n}\n","// @flow\nimport StyleSheet from '../sheet';\nimport { type Stringifier } from '../types';\nimport throwStyledError from '../utils/error';\nimport { masterStylis } from './StyleSheetManager';\n\nexport default class Keyframes {\n id: string;\n\n name: string;\n\n rules: string;\n\n constructor(name: string, rules: string) {\n this.name = name;\n this.id = `sc-keyframes-${name}`;\n this.rules = rules;\n }\n\n inject = (styleSheet: StyleSheet, stylisInstance: Stringifier = masterStylis) => {\n const resolvedName = this.name + stylisInstance.hash;\n\n if (!styleSheet.hasNameForId(this.id, resolvedName)) {\n styleSheet.insertRules(\n this.id,\n resolvedName,\n stylisInstance(this.rules, resolvedName, '@keyframes')\n );\n }\n };\n\n toString = () => {\n return throwStyledError(12, String(this.name));\n };\n\n getName(stylisInstance: Stringifier = masterStylis) {\n return this.name + stylisInstance.hash;\n }\n}\n","// @flow\nimport isFunction from './isFunction';\nimport isStyledComponent from './isStyledComponent';\nimport type { RuleSet } from '../types';\n\nexport default function isStaticRules(rules: RuleSet): boolean {\n for (let i = 0; i < rules.length; i += 1) {\n const rule = rules[i];\n\n if (isFunction(rule) && !isStyledComponent(rule)) {\n // functions are allowed to be static if they're just being\n // used to get the classname of a nested styled component\n return false;\n }\n }\n\n return true;\n}\n","// @flow\nimport validAttr from '@emotion/is-prop-valid';\nimport React, {\n createElement,\n useContext,\n useDebugValue,\n type AbstractComponent,\n type Ref,\n} from 'react';\nimport hoist from 'hoist-non-react-statics';\nimport { SC_VERSION } from '../constants';\nimport merge from '../utils/mixinDeep';\nimport ComponentStyle from './ComponentStyle';\nimport createWarnTooManyClasses from '../utils/createWarnTooManyClasses';\nimport { checkDynamicCreation } from '../utils/checkDynamicCreation';\nimport determineTheme from '../utils/determineTheme';\nimport escape from '../utils/escape';\nimport generateDisplayName from '../utils/generateDisplayName';\nimport getComponentName from '../utils/getComponentName';\nimport generateComponentId from '../utils/generateComponentId';\nimport isFunction from '../utils/isFunction';\nimport isStyledComponent from '../utils/isStyledComponent';\nimport isTag from '../utils/isTag';\nimport joinStrings from '../utils/joinStrings';\nimport { ThemeContext } from './ThemeProvider';\nimport { useStyleSheet, useStylis } from './StyleSheetManager';\nimport { EMPTY_ARRAY, EMPTY_OBJECT } from '../utils/empties';\n\nimport type { Attrs, RuleSet, Target } from '../types';\n\n/ global $Call /\n\nconst identifiers = {};\n\n/ We depend on components having unique IDs /\nfunction generateId(displayName: string, parentComponentId: string) {\n const name = typeof displayName !== 'string' ? 'sc' : escape(displayName);\n // Ensure that no displayName can lead to duplicate componentIds\n identifiers[name] = (identifiers[name] \|\| 0) + 1;\n\n const componentId = `${name}-${generateComponentId(\n // SC_VERSION gives us isolation between multiple runtimes on the page at once\n // this is improved further with use of the babel plugin \"namespace\" feature\n SC_VERSION + name + identifiers[name]\n )}`;\n\n return parentComponentId ? `${parentComponentId}-${componentId}` : componentId;\n}\n\nfunction useResolvedAttrs<Config>(theme: any = EMPTY_OBJECT, props: Config, attrs: Attrs) {\n // NOTE: can't memoize this\n // returns [context, resolvedAttrs]\n // where resolvedAttrs is only the things injected by the attrs themselves\n const context = { ...props, theme };\n const resolvedAttrs = {};\n\n attrs.forEach(attrDef => {\n let resolvedAttrDef = attrDef;\n let key;\n\n if (isFunction(resolvedAttrDef)) {\n resolvedAttrDef = resolvedAttrDef(context);\n }\n\n / eslint-disable guard-for-in /\n for (key in resolvedAttrDef) {\n context[key] = resolvedAttrs[key] =\n key === 'className'\n ? joinStrings(resolvedAttrs[key], resolvedAttrDef[key])\n : resolvedAttrDef[key];\n }\n / eslint-enable guard-for-in /\n });\n\n return [context, resolvedAttrs];\n}\n\ninterface StyledComponentWrapperProperties {\n attrs: Attrs;\n componentStyle: ComponentStyle;\n displayName: string;\n foldedComponentIds: Array<string>;\n target: Target;\n shouldForwardProp: ?(prop: string, isValidAttr: (prop: string) => boolean) => boolean;\n styledComponentId: string;\n warnTooManyClasses: $Call<typeof createWarnTooManyClasses, string, string>;\n}\n\ntype StyledComponentWrapper<Config, Instance> = AbstractComponent<Config, Instance> &\n StyledComponentWrapperProperties;\n\nfunction useInjectedStyle<T>(\n componentStyle: ComponentStyle,\n hasAttrs: boolean,\n resolvedAttrs: T,\n warnTooManyClasses?: $Call<typeof createWarnTooManyClasses, string, string>\n) {\n const styleSheet = useStyleSheet();\n const stylis = useStylis();\n\n // statically styled-components don't need to build an execution context object,\n // and shouldn't be increasing the number of class names\n const isStatic = componentStyle.isStatic && !hasAttrs;\n\n const className = isStatic\n ? componentStyle.generateAndInjectStyles(EMPTY_OBJECT, styleSheet, stylis)\n : componentStyle.generateAndInjectStyles(resolvedAttrs, styleSheet, stylis);\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n if (process.env.NODE_ENV !== 'production') useDebugValue(className);\n\n if (process.env.NODE_ENV !== 'production' && !isStatic && warnTooManyClasses) {\n warnTooManyClasses(className);\n }\n\n return className;\n}\n\nfunction useStyledComponentImpl<Config: {}, Instance>(\n forwardedComponent: StyledComponentWrapper<Config, Instance>,\n props: Object,\n forwardedRef: Ref<any>\n) {\n const {\n attrs: componentAttrs,\n componentStyle,\n // $FlowFixMe\n defaultProps,\n foldedComponentIds,\n // $FlowFixMe\n shouldForwardProp,\n styledComponentId,\n target,\n } = forwardedComponent;\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n if (process.env.NODE_ENV !== 'production') useDebugValue(styledComponentId);\n\n // NOTE: the non-hooks version only subscribes to this when !componentStyle.isStatic,\n // but that'd be against the rules-of-hooks. We could be naughty and do it anyway as it\n // should be an immutable value, but behave for now.\n const theme = determineTheme(props, useContext(ThemeContext), defaultProps);\n\n const [context, attrs] = useResolvedAttrs(theme \|\| EMPTY_OBJECT, props, componentAttrs);\n\n const generatedClassName = useInjectedStyle(\n componentStyle,\n componentAttrs.length > 0,\n context,\n process.env.NODE_ENV !== 'production' ? forwardedComponent.warnTooManyClasses : undefined\n );\n\n const refToForward = forwardedRef;\n\n const elementToBeCreated: Target = attrs.$as \|\| props.$as \|\| attrs.as \|\| props.as \|\| target;\n\n const isTargetTag = isTag(elementToBeCreated);\n const computedProps = attrs !== props ? { ...props, ...attrs } : props;\n const propFilterFn = shouldForwardProp \|\| (isTargetTag && validAttr);\n const propsForElement = {};\n\n // eslint-disable-next-line guard-for-in\n for (const key in computedProps) {\n if (key[0] === '$' \|\| key === 'as') continue;\n else if (key === 'forwardedAs') {\n propsForElement.as = computedProps[key];\n } else if (!propFilterFn \|\| propFilterFn(key, validAttr)) {\n // Don't pass through non HTML tags through to HTML elements\n propsForElement[key] = computedProps[key];\n }\n }\n\n if (props.style && attrs.style !== props.style) {\n propsForElement.style = { ...props.style, ...attrs.style };\n }\n\n propsForElement.className = Array.prototype\n .concat(\n foldedComponentIds,\n styledComponentId,\n generatedClassName !== styledComponentId ? generatedClassName : null,\n props.className,\n attrs.className\n )\n .filter(Boolean)\n .join(' ');\n\n propsForElement.ref = refToForward;\n\n return createElement(elementToBeCreated, propsForElement);\n}\n\nexport default function createStyledComponent(\n target: Target \| StyledComponentWrapper<, >,\n options: Object,\n rules: RuleSet\n) {\n const isTargetStyledComp = isStyledComponent(target);\n const isCompositeComponent = !isTag(target);\n\n const {\n displayName = generateDisplayName(target),\n componentId = generateId(options.displayName, options.parentComponentId),\n attrs = EMPTY_ARRAY,\n } = options;\n\n const styledComponentId =\n options.displayName && options.componentId\n ? `${escape(options.displayName)}-${options.componentId}`\n : options.componentId \|\| componentId;\n\n // fold the underlying StyledComponent attrs up (implicit extend)\n const finalAttrs =\n // $FlowFixMe\n isTargetStyledComp && target.attrs\n ? Array.prototype.concat(target.attrs, attrs).filter(Boolean)\n : attrs;\n\n // eslint-disable-next-line prefer-destructuring\n let shouldForwardProp = options.shouldForwardProp;\n\n // $FlowFixMe\n if (isTargetStyledComp && target.shouldForwardProp) {\n if (shouldForwardProp) {\n // compose nested shouldForwardProp calls\n shouldForwardProp = (prop, filterFn) =>\n // $FlowFixMe\n target.shouldForwardProp(prop, filterFn) && options.shouldForwardProp(prop, filterFn);\n } else {\n // eslint-disable-next-line prefer-destructuring\n shouldForwardProp = target.shouldForwardProp;\n }\n }\n\n const componentStyle = new ComponentStyle(\n rules,\n styledComponentId,\n isTargetStyledComp ? ((target: Object).componentStyle: ComponentStyle) : undefined\n );\n\n /\n forwardRef creates a new interim component, which we'll take advantage of\n * instead of extending ParentComponent to create _another_ interim class\n /\n let WrappedStyledComponent;\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const forwardRef = (props, ref) => useStyledComponentImpl(WrappedStyledComponent, props, ref);\n\n forwardRef.displayName = displayName;\n\n // $FlowFixMe this is a forced cast to merge it StyledComponentWrapperProperties\n WrappedStyledComponent = (React.forwardRef(forwardRef): StyledComponentWrapper<, >);\n\n WrappedStyledComponent.attrs = finalAttrs;\n WrappedStyledComponent.componentStyle = componentStyle;\n WrappedStyledComponent.displayName = displayName;\n WrappedStyledComponent.shouldForwardProp = shouldForwardProp;\n\n // this static is used to preserve the cascade of static classes for component selector\n // purposes; this is especially important with usage of the css prop\n WrappedStyledComponent.foldedComponentIds = isTargetStyledComp\n ? // $FlowFixMe\n Array.prototype.concat(target.foldedComponentIds, target.styledComponentId)\n : EMPTY_ARRAY;\n\n WrappedStyledComponent.styledComponentId = styledComponentId;\n\n // fold the underlying StyledComponent target up since we folded the styles\n WrappedStyledComponent.target = isTargetStyledComp\n ? // $FlowFixMe\n target.target\n : target;\n\n // $FlowFixMe\n WrappedStyledComponent.withComponent = function withComponent(tag: Target) {\n const { componentId: previousComponentId, ...optionsToCopy } = options;\n\n const newComponentId =\n previousComponentId &&\n `${previousComponentId}-${isTag(tag) ? tag : escape(getComponentName(tag))}`;\n\n const newOptions = {\n ...optionsToCopy,\n attrs: finalAttrs,\n componentId: newComponentId,\n };\n\n return createStyledComponent(tag, newOptions, rules);\n };\n\n // $FlowFixMe\n Object.defineProperty(WrappedStyledComponent, 'defaultProps', {\n get() {\n return this._foldedDefaultProps;\n },\n\n set(obj) {\n // $FlowFixMe\n this._foldedDefaultProps = isTargetStyledComp ? merge({}, target.defaultProps, obj) : obj;\n },\n });\n\n if (process.env.NODE_ENV !== 'production') {\n checkDynamicCreation(displayName, styledComponentId);\n\n WrappedStyledComponent.warnTooManyClasses = createWarnTooManyClasses(\n displayName,\n styledComponentId\n );\n }\n\n // $FlowFixMe\n WrappedStyledComponent.toString = () => `.${WrappedStyledComponent.styledComponentId}`;\n\n if (isCompositeComponent) {\n hoist(WrappedStyledComponent, (target: any), {\n // all SC-specific things should not be hoisted\n attrs: true,\n componentStyle: true,\n displayName: true,\n foldedComponentIds: true,\n shouldForwardProp: true,\n self: true,\n styledComponentId: true,\n target: true,\n withComponent: true,\n });\n }\n\n return WrappedStyledComponent;\n}\n","// @flow\nimport StyleSheet from '../sheet';\nimport type { RuleSet, Stringifier } from '../types';\nimport flatten from '../utils/flatten';\nimport isStaticRules from '../utils/isStaticRules';\n\nexport default class GlobalStyle {\n componentId: string;\n\n isStatic: boolean;\n\n rules: RuleSet;\n\n constructor(rules: RuleSet, componentId: string) {\n this.rules = rules;\n this.componentId = componentId;\n this.isStatic = isStaticRules(rules);\n\n // pre-register the first instance to ensure global styles\n // load before component ones\n StyleSheet.registerId(this.componentId + 1);\n }\n\n createStyles(\n instance: number,\n executionContext: Object,\n styleSheet: StyleSheet,\n stylis: Stringifier\n ) {\n const flatCSS = flatten(this.rules, executionContext, styleSheet, stylis);\n const css = stylis(flatCSS.join(''), '');\n const id = this.componentId + instance;\n\n // NOTE: We use the id as a name as well, since these rules never change\n styleSheet.insertRules(id, id, css);\n }\n\n removeStyles(instance: number, styleSheet: StyleSheet) {\n styleSheet.clearRules(this.componentId + instance);\n }\n\n renderStyles(\n instance: number,\n executionContext: Object,\n styleSheet: StyleSheet,\n stylis: Stringifier\n ) {\n if (instance > 2) StyleSheet.registerId(this.componentId + instance);\n\n // NOTE: Remove old styles, then inject the new ones\n this.removeStyles(instance, styleSheet);\n this.createStyles(instance, executionContext, styleSheet, stylis);\n }\n}\n","// @flow\n/ eslint-disable no-underscore-dangle /\nimport React from 'react';\nimport { IS_BROWSER, SC_ATTR, SC_ATTR_VERSION, SC_VERSION } from '../constants';\nimport throwStyledError from '../utils/error';\nimport getNonce from '../utils/nonce';\nimport StyleSheet from '../sheet';\nimport StyleSheetManager from './StyleSheetManager';\n\ndeclare var __SERVER__: boolean;\n\nconst CLOSING_TAG_R = /^\\s<\\/[a-z]/i;\n\nexport default class ServerStyleSheet {\n isStreaming: boolean;\n\n instance: StyleSheet;\n\n sealed: boolean;\n\n constructor() {\n this.instance = new StyleSheet({ isServer: true });\n this.sealed = false;\n }\n\n _emitSheetCSS = (): string => {\n const css = this.instance.toString();\n const nonce = getNonce();\n const attrs = [nonce && `nonce=\"${nonce}\"`, `${SC_ATTR}=\"true\"`, `${SC_ATTR_VERSION}=\"${SC_VERSION}\"`];\n const htmlAttr = attrs.filter(Boolean).join(' ');\n\n return `<style ${htmlAttr}>${css}</style>`;\n };\n\n collectStyles(children: any) {\n if (this.sealed) {\n return throwStyledError(2);\n }\n\n return <StyleSheetManager sheet={this.instance}>{children}</StyleSheetManager>;\n }\n\n getStyleTags = (): string => {\n if (this.sealed) {\n return throwStyledError(2);\n }\n\n return this._emitSheetCSS();\n };\n\n getStyleElement = () => {\n if (this.sealed) {\n return throwStyledError(2);\n }\n\n const props = {\n [SC_ATTR]: '',\n [SC_ATTR_VERSION]: SC_VERSION,\n dangerouslySetInnerHTML: {\n __html: this.instance.toString(),\n },\n };\n\n const nonce = getNonce();\n if (nonce) {\n (props: any).nonce = nonce;\n }\n\n // v4 returned an array for this fn, so we'll do the same for v5 for backward compat\n return [<style {...props} key=\"sc-0-0\" />];\n };\n\n // eslint-disable-next-line consistent-return\n interleaveWithNodeStream(input: any) {\n if (!__SERVER__ \|\| IS_BROWSER) {\n return throwStyledError(3);\n } else if (this.sealed) {\n return throwStyledError(2);\n }\n\n if (__SERVER__) {\n this.seal();\n\n // eslint-disable-next-line global-require\n const { Readable, Transform } = require('stream');\n\n const readableStream: Readable = input;\n const { instance: sheet, _emitSheetCSS } = this;\n\n const transformer = new Transform({\n transform: function appendStyleChunks(chunk, /* encoding */ _, callback) {\n // Get the chunk and retrieve the sheet's CSS as an HTML chunk,\n // then reset its rules so we get only new ones for the next chunk\n const renderedHtml = chunk.toString();\n const html = _emitSheetCSS();\n\n sheet.clearTag();\n\n // prepend style html to chunk, unless the start of the chunk is a\n // closing tag in which case append right after that\n if (CLOSING_TAG_R.test(renderedHtml)) {\n const endOfClosingTag = renderedHtml.indexOf('>') + 1;\n const before = renderedHtml.slice(0, endOfClosingTag);\n const after = renderedHtml.slice(endOfClosingTag);\n\n this.push(before + html + after);\n } else {\n this.push(html + renderedHtml);\n }\n\n callback();\n },\n });\n\n readableStream.on('error', err => {\n // forward the error to the transform stream\n transformer.emit('error', err);\n });\n\n return readableStream.pipe(transformer);\n }\n }\n\n seal = () => {\n this.sealed = true;\n };\n}\n"],"names":["nodes","insertRule","names","id","stylisPlugins","isCompositeComponent","flatten","React"],"mappings":"+jCAGgC,u9KCmFNA,gHAgBxBC,WAAA,+8DC5DQC,yxBAmC8BC,iOAkBVA,owDChEiBC,2uBCZGD,mvECdG,y0EC4L7CE,u9CAvCkB,muGCjINC,kCAEVH,8xECsCEI"}