styled-components 6.0.0-beta.1 → 6.0.0-beta.2

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

@@ -1,2 +1,1830 @@
-import{__spreadArray as e,__assign as t,__rest as n}from"tslib";import o from"@emotion/is-prop-valid";import r,{useRef as i,useState as s,useContext as a,useMemo as c,useEffect as u,createElement as l,useDebugValue as p}from"react";import d from"shallowequal";import{prefixer as h,stringify as f,middleware as m,compile as y,RULESET as v}from"stylis";import g from"@emotion/unitless";var S="undefined"!=typeof process&&(process.env.REACT_APP_SC_ATTR||process.env.SC_ATTR)||"data-styled",w="6.0.0-beta.1",b="undefined"!=typeof window&&"HTMLElement"in window,E=Boolean("boolean"==typeof SC_DISABLE_SPEEDY?SC_DISABLE_SPEEDY:"undefined"!=typeof process&&void 0!==process.env.REACT_APP_SC_DISABLE_SPEEDY&&""!==process.env.REACT_APP_SC_DISABLE_SPEEDY?"false"!==process.env.REACT_APP_SC_DISABLE_SPEEDY&&process.env.REACT_APP_SC_DISABLE_SPEEDY:"undefined"!=typeof process&&void 0!==process.env.SC_DISABLE_SPEEDY&&""!==process.env.SC_DISABLE_SPEEDY?"false"!==process.env.SC_DISABLE_SPEEDY&&process.env.SC_DISABLE_SPEEDY:"production"!==process.env.NODE_ENV),N={},_=/invalid hook call/i,C=new Set,A=function(t,n){if("production"!==process.env.NODE_ENV){var o=n?' with the id of "'.concat(n,'"'):"",r="The component ".concat(t).concat(o," has been created dynamically.\n")+"You 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.",s=console.error;try{var a=!0;console.error=function(t){for(var n=[],o=1;o<arguments.length;o++)n[o-1]=arguments[o];_.test(t)?(a=!1,C.delete(r)):s.apply(void 0,e([t],n,!1))},i(),a&&!C.has(r)&&(console.warn(r),C.add(r))}catch(e){_.test(e.message)&&C.delete(r)}finally{console.error=s}}},P=Object.freeze([]),I=Object.freeze({});function O(e,t,n){return void 0===n&&(n=I),e.theme!==n.theme&&e.theme||t||n.theme}var D=["a","abbr","address","area","article","aside","audio","b","base","bdi","bdo","big","blockquote","body","br","button","canvas","caption","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dialog","div","dl","dt","em","embed","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","img","input","ins","kbd","keygen","label","legend","li","link","main","map","mark","menu","menuitem","meta","meter","nav","noscript","object","ol","optgroup","option","output","p","param","picture","pre","progress","q","rp","rt","ruby","s","samp","script","section","select","small","source","span","strong","style","sub","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","title","tr","track","u","ul","var","video","wbr","circle","clipPath","defs","ellipse","foreignObject","g","image","line","linearGradient","marker","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","svg","text","tspan"],R=/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~-]+/g,j=/(^-|-$)/g;function T(e){return e.replace(R,"-").replace(j,"")}var x=/(a)(d)/gi,k=function(e){return String.fromCharCode(e+(e>25?39:97))};function V(e){var t,n="";for(t=Math.abs(e);t>52;t=t/52|0)n=k(t%52)+n;return(k(t%52)+n).replace(x,"$1-$2")}var B,$=function(e,t){for(var n=t.length;n;)e=33*e^t.charCodeAt(--n);return e},z=function(e){return $(5381,e)};function M(e){return V(z(e)>>>0)}function L(e){return"production"!==process.env.NODE_ENV&&"string"==typeof e&&e||e.displayName||e.name||"Component"}function F(e){return"string"==typeof e&&("production"===process.env.NODE_ENV||e.charAt(0)===e.charAt(0).toLowerCase())}var G="function"==typeof Symbol&&Symbol.for,Y=G?Symbol.for("react.memo"):60115,q=G?Symbol.for("react.forward_ref"):60112,H={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},W={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},U={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},J=((B={})[q]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},B[Y]=U,B);function X(e){return("type"in(t=e)&&t.type.$$typeof)===Y?U:"$$typeof"in e?J[e.$$typeof]:H;var t}var Z=Object.defineProperty,K=Object.getOwnPropertyNames,Q=Object.getOwnPropertySymbols,ee=Object.getOwnPropertyDescriptor,te=Object.getPrototypeOf,ne=Object.prototype;function oe(e,t,n){if("string"!=typeof t){if(ne){var o=te(t);o&&o!==ne&&oe(e,o,n)}var r=K(t);Q&&(r=r.concat(Q(t)));for(var i=X(e),s=X(t),a=0;a<r.length;++a){var c=r[a];if(!(c in W||n&&n[c]||s&&c in s||i&&c in i)){var u=ee(t,c);try{Z(e,c,u)}catch(e){}}}}return e}function re(e){return"object"==typeof e&&"styledComponentId"in e}function ie(e){return!(null===e||"object"!=typeof e||e.constructor&&"Object"!==e.constructor.name||"[object Object]"!==(e.toString?e.toString():Object.prototype.toString.call(e))||"props"in e&&(e.$$typeof||void 0===e.constructor))}function se(e,t,n){if(void 0===n&&(n=!1),!n&&!ie(e)&&!Array.isArray(e))return t;if(Array.isArray(t))for(var o=0;o<t.length;o++)e[o]=se(e[o],t[o]);else if(ie(t))for(var o in t)e[o]=se(e[o],t[o]);return e}var ae="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 ce(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];for(var n=e[0],o=[],r=1,i=e.length;r<i;r+=1)o.push(e[r]);return o.forEach(function(e){n=n.replace(/%[a-z]/,e)}),n}function ue(t){for(var n=[],o=1;o<arguments.length;o++)n[o-1]=arguments[o];return"production"===process.env.NODE_ENV?new Error("An error occurred. See https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#".concat(t," for more information.").concat(n.length>0?" Args: ".concat(n.join(", ")):"")):new Error(ce.apply(void 0,e([ae[t]],n,!1)).trim())}var le=function(){function e(e){this.groupSizes=new Uint32Array(512),this.length=512,this.tag=e}return e.prototype.indexOfGroup=function(e){for(var t=0,n=0;n<e;n++)t+=this.groupSizes[n];return t},e.prototype.insertRules=function(e,t){if(e>=this.groupSizes.length){for(var n=this.groupSizes,o=n.length,r=o;e>=r;)if((r<<=1)<0)throw ue(16,"".concat(e));this.groupSizes=new Uint32Array(r),this.groupSizes.set(n),this.length=r;for(var i=o;i<r;i++)this.groupSizes[i]=0}var s=this.indexOfGroup(e+1);if(Array.isArray(t)){i=0;for(var a=t.length;i<a;i++)this.tag.insertRule(s,t[i])&&(this.groupSizes[e]++,s++)}else this.tag.insertRule(s,t)&&this.groupSizes[e]++},e.prototype.clearGroup=function(e){if(e<this.length){var t=this.groupSizes[e],n=this.indexOfGroup(e),o=n+t;this.groupSizes[e]=0;for(var r=n;r<o;r++)this.tag.deleteRule(n)}},e.prototype.getGroup=function(e){var t="";if(e>=this.length||0===this.groupSizes[e])return t;for(var n=this.groupSizes[e],o=this.indexOfGroup(e),r=o+n,i=o;i<r;i++)t+="".concat(this.tag.getRule(i)).concat("/*!sc*/\n");return t},e}(),pe=new Map,de=new Map,he=1,fe=function(e){if(pe.has(e))return pe.get(e);for(;de.has(he);)he++;var t=he++;if("production"!==process.env.NODE_ENV&&((0|t)<0||t>1073741824))throw ue(16,"".concat(t));return pe.set(e,t),de.set(t,e),t},me=function(e,t){pe.set(e,t),de.set(t,e)},ye="style[".concat(S,"][").concat("data-styled-version",'="').concat(w,'"]'),ve=new RegExp("^".concat(S,'\\.g(\\d+)\\[id="([\\w\\d-]+)"\\].*?"([^"]*)')),ge=function(e,t,n){for(var o,r=n.split(","),i=0,s=r.length;i<s;i++)(o=r[i])&&e.registerName(t,o)},Se=function(e,t){for(var n,o=(null!==(n=t.textContent)&&void 0!==n?n:"").split("/*!sc*/\n"),r=[],i=0,s=o.length;i<s;i++){var a=o[i].trim();if(a){var c=a.match(ve);if(c){var u=0|parseInt(c[1],10),l=c[2];0!==u&&(me(l,u),ge(e,l,c[3]),e.getTag().insertRules(u,r)),r.length=0}else r.push(a)}}};function we(){return"undefined"!=typeof __webpack_nonce__?__webpack_nonce__:null}var be=function(e){var t=document.head,n=e||t,o=document.createElement("style"),r=function(e){for(var t=e.childNodes,n=t.length;n>=0;n--){var o=t[n];if(o&&1===o.nodeType&&o.hasAttribute(S))return o}}(n),i=void 0!==r?r.nextSibling:null;o.setAttribute(S,"active"),o.setAttribute("data-styled-version",w);var s=we();return s&&o.setAttribute("nonce",s),n.insertBefore(o,i),o},Ee=function(){function e(e){var t=this.element=be(e);t.appendChild(document.createTextNode("")),this.sheet=function(e){if(e.sheet)return e.sheet;for(var t=document.styleSheets,n=0,o=t.length;n<o;n++){var r=t[n];if(r.ownerNode===e)return r}throw ue(17)}(t),this.length=0}return e.prototype.insertRule=function(e,t){try{return this.sheet.insertRule(t,e),this.length++,!0}catch(e){return!1}},e.prototype.deleteRule=function(e){this.sheet.deleteRule(e),this.length--},e.prototype.getRule=function(e){var t=this.sheet.cssRules[e];return void 0!==t&&"string"==typeof t.cssText?t.cssText:""},e}(),Ne=function(){function e(e){var t=this.element=be(e);this.nodes=t.childNodes,this.length=0}return e.prototype.insertRule=function(e,t){if(e<=this.length&&e>=0){var n=document.createTextNode(t);return this.element.insertBefore(n,this.nodes[e]||null),this.length++,!0}return!1},e.prototype.deleteRule=function(e){this.element.removeChild(this.nodes[e]),this.length--},e.prototype.getRule=function(e){return e<this.length?this.nodes[e].textContent:""},e}(),_e=function(){function e(e){this.rules=[],this.length=0}return e.prototype.insertRule=function(e,t){return e<=this.length&&(this.rules.splice(e,0,t),this.length++,!0)},e.prototype.deleteRule=function(e){this.rules.splice(e,1),this.length--},e.prototype.getRule=function(e){return e<this.length?this.rules[e]:""},e}(),Ce=b,Ae={isServer:!b,useCSSOMInjection:!E},Pe=function(){function e(e,n,o){void 0===e&&(e=I),void 0===n&&(n={}),this.options=t(t({},Ae),e),this.gs=n,this.names=new Map(o),this.server=!!e.isServer,!this.server&&b&&Ce&&(Ce=!1,function(e){for(var t=document.querySelectorAll(ye),n=0,o=t.length;n<o;n++){var r=t[n];r&&"active"!==r.getAttribute(S)&&(Se(e,r),r.parentNode&&r.parentNode.removeChild(r))}}(this))}return e.registerId=function(e){return fe(e)},e.prototype.reconstructWithOptions=function(n,o){return void 0===o&&(o=!0),new e(t(t({},this.options),n),this.gs,o&&this.names||void 0)},e.prototype.allocateGSInstance=function(e){return this.gs[e]=(this.gs[e]||0)+1},e.prototype.getTag=function(){return this.tag||(this.tag=(e=function(e){var t=e.useCSSOMInjection,n=e.target;return e.isServer?new _e(n):t?new Ee(n):new Ne(n)}(this.options),new le(e)));var e},e.prototype.hasNameForId=function(e,t){return this.names.has(e)&&this.names.get(e).has(t)},e.prototype.registerName=function(e,t){if(fe(e),this.names.has(e))this.names.get(e).add(t);else{var n=new Set;n.add(t),this.names.set(e,n)}},e.prototype.insertRules=function(e,t,n){this.registerName(e,t),this.getTag().insertRules(fe(e),n)},e.prototype.clearNames=function(e){this.names.has(e)&&this.names.get(e).clear()},e.prototype.clearRules=function(e){this.getTag().clearGroup(fe(e)),this.clearNames(e)},e.prototype.clearTag=function(){this.tag=void 0},e.prototype.toString=function(){return function(e){for(var t=e.getTag(),n=t.length,o="",r=function(n){var r=function(e){return de.get(e)}(n);if(void 0===r)return"continue";var i=e.names.get(r),s=t.getGroup(n);if(void 0===i||0===s.length)return"continue";var a="".concat(S,".g").concat(n,'[id="').concat(r,'"]'),c="";void 0!==i&&i.forEach(function(e){e.length>0&&(c+="".concat(e,","))}),o+="".concat(s).concat(a,'{content:"').concat(c,'"}').concat("/*!sc*/\n")},i=0;i<n;i++)r(i);return o}(this)},e}(),Ie=/^\s*\/\/.*$/gm,Oe=[":","[",".","#"];function De(e){var t,n,o,r,i=void 0===e?I:e,s=i.options,a=void 0===s?I:s,c=i.plugins,u=void 0===c?P:c,l=function(e,o,i){return 0===o&&Oe.includes(i[n.length])||i.match(r)?e:".".concat(t)},p=function(e){if(e.type===v&&e.value.includes("&")){var t=e.props;t[0]=t[0].replace(o,l)}},d=function(e,i,s,c){void 0===i&&(i=""),void 0===s&&(s=""),void 0===c&&(c="&");var l=e.replace(Ie,"");t=c,n=i,o=new RegExp("\\".concat(n,"\\b"),"g"),r=new RegExp("(\\".concat(n,"\\b){2,}"));var d,v,g=u.slice();return(a.prefix||void 0===a.prefix)&&g.unshift(h),g.push(p,f),d=y(s||i?"".concat(s," ").concat(i," { ").concat(l," }"):l),v=m(g),d.map(function(e,t){return v(e,t,d,v)}).filter(Boolean)};return d.hash=u.length?u.reduce(function(e,t){return t.name||ue(15),$(e,t.name)},5381).toString():"",d}var Re=r.createContext(void 0),je=Re.Consumer,Te=r.createContext(void 0),xe=new Pe,ke=De();function Ve(){return a(Re)||xe}function Be(){return a(Te)||ke}function $e(e){var t=s(e.stylisPlugins),n=t[0],o=t[1],i=Ve(),a=c(function(){var t=i;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=c(function(){return De({options:{prefix:!e.disableVendorPrefixes},plugins:n})},[e.disableVendorPrefixes,n]);return u(function(){d(n,e.stylisPlugins)||o(e.stylisPlugins)},[e.stylisPlugins]),r.createElement(Re.Provider,{value:a},r.createElement(Te.Provider,{value:l},"production"!==process.env.NODE_ENV?r.Children.only(e.children):e.children))}var ze=function(){function e(e,t){var n=this;this.inject=function(e,t){void 0===t&&(t=ke);var o=n.name+t.hash;e.hasNameForId(n.id,o)||e.insertRules(n.id,o,t(n.rules,o,"@keyframes"))},this.toString=function(){throw ue(12,String(n.name))},this.name=e,this.id="sc-keyframes-".concat(e),this.rules=t}return e.prototype.getName=function(e){return void 0===e&&(e=ke),this.name+e.hash},e}(),Me=/([A-Z])/,Le=/([A-Z])/g,Fe=/^ms-/,Ge=function(e){return"-".concat(e.toLowerCase())};function Ye(e){return Me.test(e)?e.replace(Le,Ge).replace(Fe,"-ms-"):e}function qe(e){return"function"==typeof e}var He=function(e){return null==e||!1===e||""===e},We=function(t,n){var o,r=[];for(var i in t)t.hasOwnProperty(i)&&!He(t[i])&&(Array.isArray(t[i])&&t[i].isCss||qe(t[i])?r.push("".concat(Ye(i),":"),t[i],";"):ie(t[i])?r.push.apply(r,We(t[i],i)):r.push("".concat(Ye(i),": ").concat(null==(o=t[i])||"boolean"==typeof o||""===o?"":"number"!=typeof o||0===o||i in g?String(o).trim():"".concat(o,"px"),";")));return n?e(e(["".concat(n," {")],r,!0),["}"],!1):r};function Ue(e,t,n,o){if(Array.isArray(e)){for(var r=[],i=0,s=e.length,a=void 0;i<s;i+=1)""!==(a=Ue(e[i],t,n,o))&&(Array.isArray(a)?r.push.apply(r,a):r.push(a));return r}if(He(e))return"";if(re(e))return".".concat(e.styledComponentId);if(qe(e)){if("function"!=typeof(u=e)||u.prototype&&u.prototype.isReactComponent||!t)return e;var c=e;return a=c(t),"production"===process.env.NODE_ENV||"object"!=typeof a||Array.isArray(a)||a instanceof ze||ie(a)||console.error("".concat(L(c)," 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(a,t,n,o)}var u;return e instanceof ze?n?(e.inject(n,o),e.getName(o)):e:ie(e)?We(e):e.toString()}function Je(e){for(var t=0;t<e.length;t+=1){var n=e[t];if(qe(n)&&!re(n))return!1}return!0}var Xe=z(w),Ze=function(){function e(e,t,n){this.names=[],this.rules=e,this.staticRulesId="",this.isStatic="production"===process.env.NODE_ENV&&(void 0===n||n.isStatic)&&Je(e),this.componentId=t,this.baseHash=$(Xe,t),this.baseStyle=n,Pe.registerId(t)}return e.prototype.generateAndInjectStyles=function(e,t,n){var o=this.componentId;if(this.names.length=0,this.baseStyle&&this.names.push(this.baseStyle.generateAndInjectStyles(e,t,n)),this.isStatic&&!n.hash)if(this.staticRulesId&&t.hasNameForId(o,this.staticRulesId))this.names.push(this.staticRulesId);else{var r=Ue(this.rules,e,t,n).join(""),i=V($(this.baseHash,r)>>>0);if(!t.hasNameForId(o,i)){var s=n(r,".".concat(i),void 0,o);t.insertRules(o,i,s)}this.names.push(i),this.staticRulesId=i}else{for(var a=this.rules.length,c=$(this.baseHash,n.hash),u="",l=0;l<a;l++){var p=this.rules[l];if("string"==typeof p)u+=p,"production"!==process.env.NODE_ENV&&(c=$(c,p));else if(p){var d=Ue(p,e,t,n),h=Array.isArray(d)?d.join(""):d;c=$(c,h),u+=h}}if(u){var f=V(c>>>0);if(!t.hasNameForId(o,f)){var m=n(u,".".concat(f),void 0,o);t.insertRules(o,f,m)}this.names.push(f)}}return this.names.join(" ")},e}(),Ke=r.createContext(void 0),Qe=Ke.Consumer;function et(e){var n=a(Ke),o=c(function(){return function(e,n){if(!e)throw ue(14);if(qe(e)){var o=e(n);if("production"!==process.env.NODE_ENV&&(null===o||Array.isArray(o)||"object"!=typeof o))throw ue(7);return o}if(Array.isArray(e)||"object"!=typeof e)throw ue(8);return n?t(t({},n),e):e}(e.theme,n)},[e.theme,n]);return e.children?r.createElement(Ke.Provider,{value:o},e.children):null}var tt={};function nt(e,i,s){var c=re(e),u=e,d=!F(e),h=i.attrs,f=void 0===h?P:h,m=i.componentId,y=void 0===m?function(e,t){var n="string"!=typeof e?"sc":T(e);tt[n]=(tt[n]||0)+1;var o="".concat(n,"-").concat(M(w+n+tt[n]));return t?"".concat(t,"-").concat(o):o}(i.displayName,i.parentComponentId):m,v=i.displayName,g=void 0===v?function(e){return F(e)?"styled.".concat(e):"Styled(".concat(L(e),")")}(e):v,S=i.displayName&&i.componentId?"".concat(T(i.displayName),"-").concat(i.componentId):i.componentId||y,b=c&&u.attrs?u.attrs.concat(f).filter(Boolean):f,E=i.shouldForwardProp;if(c&&u.shouldForwardProp){var N=u.shouldForwardProp;if(i.shouldForwardProp){var _=i.shouldForwardProp;E=function(e,t,n){return N(e,t,n)&&_(e,t,n)}}else E=N}var C=new Ze(s,S,c?u.componentStyle:void 0),R=C.isStatic&&0===f.length;function j(e,n){return function(e,n,r,i){var s=e.attrs,c=e.componentStyle,u=e.defaultProps,d=e.foldedComponentIds,h=e.shouldForwardProp,f=e.styledComponentId,m=e.target;"production"!==process.env.NODE_ENV&&p(f);var y=function(e,n,o){void 0===e&&(e=I);var r=t(t({},n),{theme:e});return o.forEach(function(e){var n,o,i,s="function"==typeof e?e(r):e;for(n in s)r[n]="className"===n?(i=s[n],(o=r[n])&&i?"".concat(o," ").concat(i):o||i):"style"===n?t(t({},r[n]),s[n]):s[n]}),r}(O(n,a(Ke),u)||I,n,s),v=function(e,t,n,o){var r=Ve(),i=Be(),s=e.generateAndInjectStyles(t?I:n,r,i);return"production"!==process.env.NODE_ENV&&p(s),"production"!==process.env.NODE_ENV&&!t&&o&&o(s),s}(c,i,y,"production"!==process.env.NODE_ENV?e.warnTooManyClasses:void 0),g=r,S=y.$as||y.as||m,w=F(S),b={};for(var E in y)"$"!==E[0]&&"as"!==E&&"theme"!==E&&("forwardedAs"===E?b.as=y[E]:(h?h(E,o,S):!w||o(E))&&(b[E]=y[E]));return b[w&&-1===D.indexOf(S)?"class":"className"]=d.concat(f,v!==f?v:null,y.className).filter(Boolean).join(" "),b.ref=g,l(S,b)}(x,e,n,R)}j.displayName=g;var x=r.forwardRef(j);return x.attrs=b,x.componentStyle=C,x.displayName=g,x.shouldForwardProp=E,x.foldedComponentIds=c?u.foldedComponentIds.concat(u.styledComponentId):P,x.styledComponentId=S,x.target=c?u.target:e,x.withComponent=function(e){var o=i.componentId,r=n(i,["componentId"]),a=o&&"".concat(o,"-").concat(F(e)?e:T(L(e)));return nt(e,t(t({},r),{attrs:b,componentId:a}),s)},Object.defineProperty(x,"defaultProps",{get:function(){return this._foldedDefaultProps},set:function(e){this._foldedDefaultProps=c?function(e){void 0===e&&(e={});for(var t=[],n=1;n<arguments.length;n++)t[n-1]=arguments[n];for(var o=0,r=t;o<r.length;o++)se(e,r[o],!0);return e}({},u.defaultProps,e):e}}),"production"!==process.env.NODE_ENV&&(A(g,S),x.warnTooManyClasses=function(e,t){var n={},o=!1;return function(r){if(!o&&(n[r]=!0,Object.keys(n).length>=200)){var i=t?' with the id of "'.concat(t,'"'):"";console.warn("Over ".concat(200," classes were generated for component ").concat(e).concat(i,".\n")+"Consider 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 />"),o=!0,n={}}}}(g,S)),x.toString=function(){return".".concat(x.styledComponentId)},d&&oe(x,e,{attrs:!0,componentStyle:!0,displayName:!0,foldedComponentIds:!0,shouldForwardProp:!0,styledComponentId:!0,target:!0,withComponent:!0}),x}function ot(e,t){for(var n=[e[0]],o=0,r=t.length;o<r;o+=1)n.push(t[o],e[o+1]);return n}var rt=function(e){return Array.isArray(e)&&(e.isCss=!0),e};function it(t){for(var n=[],o=1;o<arguments.length;o++)n[o-1]=arguments[o];if(qe(t)||ie(t)){var r=t;return rt(Ue(ot(P,e([r],n,!0))))}var i=t;return 0===n.length&&1===i.length&&"string"==typeof i[0]?i:rt(Ue(ot(i,n)))}function st(n,o,r){if(void 0===r&&(r=I),!o)throw ue(1,o);var i=function(t){for(var i=[],s=1;s<arguments.length;s++)i[s-1]=arguments[s];return n(o,r,it.apply(void 0,e([t],i,!1)))};return i.attrs=function(e){return st(n,o,t(t({},r),{attrs:Array.prototype.concat(r.attrs,e).filter(Boolean)}))},i.withConfig=function(e){return st(n,o,t(t({},r),e))},i}var at=function(e){return st(nt,e)},ct=at;D.forEach(function(e){ct[e]=at(e)});var ut=function(){function e(e,t){this.rules=e,this.componentId=t,this.isStatic=Je(e),Pe.registerId(this.componentId+1)}return e.prototype.createStyles=function(e,t,n,o){var r=o(Ue(this.rules,t,n,o).join(""),""),i=this.componentId+e;n.insertRules(i,i,r)},e.prototype.removeStyles=function(e,t){t.clearRules(this.componentId+e)},e.prototype.renderStyles=function(e,t,n,o){e>2&&Pe.registerId(this.componentId+e),this.removeStyles(e,n),this.createStyles(e,t,n,o)},e}();function lt(n){for(var o=[],i=1;i<arguments.length;i++)o[i-1]=arguments[i];var s=it.apply(void 0,e([n],o,!1)),a="sc-global-".concat(M(JSON.stringify(s))),c=new ut(s,a);"production"!==process.env.NODE_ENV&&A(a);var u=function(e){var t=Ve(),n=Be(),o=r.useContext(Ke),i=r.useRef(t.allocateGSInstance(a)).current;return"production"!==process.env.NODE_ENV&&r.Children.count(e.children)&&console.warn("The global style component ".concat(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."),t.server&&l(i,e,t,o,n),(r.useInsertionEffect||r.useLayoutEffect)(function(){if(!t.server)return l(i,e,t,o,n),function(){return c.removeStyles(i,t)}},[i,e,t,o,n]),null};function l(e,n,o,r,i){if(c.isStatic)c.renderStyles(e,N,o,i);else{var s=t(t({},n),{theme:O(n,r,u.defaultProps)});c.renderStyles(e,s,o,i)}}return r.memo(u)}function pt(t){for(var n=[],o=1;o<arguments.length;o++)n[o-1]=arguments[o];"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.");var r=it.apply(void 0,e([t],n,!1)).join(""),i=M(r);return new ze(i,r)}function dt(e){var n=r.forwardRef(function(n,o){var i=O(n,r.useContext(Ke),e.defaultProps);return"production"!==process.env.NODE_ENV&&void 0===i&&console.warn('[withTheme] You are not using a ThemeProvider nor passing a theme prop or a theme in defaultProps in component class "'.concat(L(e),'"')),r.createElement(e,t({},n,{theme:i,ref:o}))});return n.displayName="WithTheme(".concat(L(e),")"),oe(n,e)}var ht=function(){return a(Ke)},ft=function(){function e(){var e=this;this._emitSheetCSS=function(){var t=e.instance.toString(),n=we(),o=[n&&'nonce="'.concat(n,'"'),"".concat(S,'="true"'),"".concat("data-styled-version",'="').concat(w,'"')].filter(Boolean).join(" ");return"<style ".concat(o,">").concat(t,"</style>")},this.getStyleTags=function(){if(e.sealed)throw ue(2);return e._emitSheetCSS()},this.getStyleElement=function(){var n;if(e.sealed)throw ue(2);var o=((n={})[S]="",n["data-styled-version"]=w,n.dangerouslySetInnerHTML={__html:e.instance.toString()},n),i=we();return i&&(o.nonce=i),[r.createElement("style",t({},o,{key:"sc-0-0"}))]},this.seal=function(){e.sealed=!0},this.instance=new Pe({isServer:!0}),this.sealed=!1}return e.prototype.collectStyles=function(e){if(this.sealed)throw ue(2);return r.createElement($e,{sheet:this.instance},e)},e.prototype.interleaveWithNodeStream=function(e){throw ue(3)},e}(),mt={StyleSheet:Pe,mainSheet:xe};"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&&"undefined"!=typeof window&&(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 to not render properly, errors during the rehydration process, a missing theme prop, and makes your application bigger without good reason.\n\nSee https://s-c.sh/2BAXzed for more info."),window["__styled-components-init__"]+=1);export{ft as ServerStyleSheet,je as StyleSheetConsumer,Re as StyleSheetContext,$e as StyleSheetManager,Qe as ThemeConsumer,Ke as ThemeContext,et as ThemeProvider,mt as __PRIVATE__,lt as createGlobalStyle,it as css,ct as default,re as isStyledComponent,pt as keyframes,ht as useTheme,w as version,dt as withTheme};
+import { __spreadArray, __assign, __rest } from 'tslib';
+import React, { useRef, useState, useContext, useMemo, useEffect, createElement, useDebugValue } from 'react';
+import shallowequal from 'shallowequal';
+import { prefixer, stringify, middleware, compile, RULESET } from 'stylis';
+import unitless from '@emotion/unitless';
+
+var SC_ATTR = (typeof process !== 'undefined' && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR)) ||
+    'data-styled';
+var SC_ATTR_ACTIVE = 'active';
+var SC_ATTR_VERSION = 'data-styled-version';
+var SC_VERSION = "6.0.0-beta.2";
+var SPLITTER = '/*!sc*/\n';
+var IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;
+var DISABLE_SPEEDY = Boolean(typeof SC_DISABLE_SPEEDY === 'boolean'
+    ? SC_DISABLE_SPEEDY
+    : typeof process !== 'undefined' &&
+        typeof process.env.REACT_APP_SC_DISABLE_SPEEDY !== 'undefined' &&
+        process.env.REACT_APP_SC_DISABLE_SPEEDY !== ''
+        ? process.env.REACT_APP_SC_DISABLE_SPEEDY === 'false'
+            ? false
+            : process.env.REACT_APP_SC_DISABLE_SPEEDY
+        : typeof process !== 'undefined' &&
+            typeof process.env.SC_DISABLE_SPEEDY !== 'undefined' &&
+            process.env.SC_DISABLE_SPEEDY !== ''
+            ? process.env.SC_DISABLE_SPEEDY === 'false'
+                ? false
+                : process.env.SC_DISABLE_SPEEDY
+            : process.env.NODE_ENV !== 'production');
+// Shared empty execution context when generating static styles
+var STATIC_EXECUTION_CONTEXT = {};
+
+var invalidHookCallRe = /invalid hook call/i;
+var seen = new Set();
+var checkDynamicCreation = function (displayName, componentId) {
+    if (process.env.NODE_ENV !== 'production') {
+        var parsedIdString = componentId ? " with the id of \"".concat(componentId, "\"") : '';
+        var message_1 = "The component ".concat(displayName).concat(parsedIdString, " has been created dynamically.\n") +
+            "You may see this warning because you've called styled inside another component.\n" +
+            'To resolve this only create new StyledComponents outside of any render method and function component.';
+        // If a hook is called outside of a component:
+        // React 17 and earlier throw an error
+        // React 18 and above use console.error
+        var originalConsoleError_1 = console.error;
+        try {
+            var didNotCallInvalidHook_1 = true;
+            console.error = function (consoleErrorMessage) {
+                var consoleErrorArgs = [];
+                for (var _i = 1; _i < arguments.length; _i++) {
+                    consoleErrorArgs[_i - 1] = arguments[_i];
+                }
+                // The error here is expected, since we're expecting anything that uses `checkDynamicCreation` to
+                // be called outside of a React component.
+                if (invalidHookCallRe.test(consoleErrorMessage)) {
+                    didNotCallInvalidHook_1 = false;
+                    // This shouldn't happen, but resets `warningSeen` if we had this error happen intermittently
+                    seen.delete(message_1);
+                }
+                else {
+                    originalConsoleError_1.apply(void 0, __spreadArray([consoleErrorMessage], consoleErrorArgs, false));
+                }
+            };
+            // We purposefully call `useRef` outside of a component and expect it to throw
+            // If it doesn't, then we're inside another component.
+            // eslint-disable-next-line react-hooks/rules-of-hooks
+            useRef();
+            if (didNotCallInvalidHook_1 && !seen.has(message_1)) {
+                // eslint-disable-next-line no-console
+                console.warn(message_1);
+                seen.add(message_1);
+            }
+        }
+        catch (error) {
+            // The error here is expected, since we're expecting anything that uses `checkDynamicCreation` to
+            // be called outside of a React component.
+            if (invalidHookCallRe.test(error.message)) {
+                // This shouldn't happen, but resets `warningSeen` if we had this error happen intermittently
+                seen.delete(message_1);
+            }
+        }
+        finally {
+            console.error = originalConsoleError_1;
+        }
+    }
+};
+
+var LIMIT = 200;
+var createWarnTooManyClasses = (function (displayName, componentId) {
+    var generatedClasses = {};
+    var warningSeen = false;
+    return function (className) {
+        if (!warningSeen) {
+            generatedClasses[className] = true;
+            if (Object.keys(generatedClasses).length >= LIMIT) {
+                // Unable to find latestRule in test environment.
+                /* eslint-disable no-console, prefer-template */
+                var parsedIdString = componentId ? " with the id of \"".concat(componentId, "\"") : '';
+                console.warn("Over ".concat(LIMIT, " classes were generated for component ").concat(displayName).concat(parsedIdString, ".\n") +
+                    'Consider using the attrs method, together with a style object for frequently changed styles.\n' +
+                    'Example:\n' +
+                    '  const Component = styled.div.attrs(props => ({\n' +
+                    '    style: {\n' +
+                    '      background: props.background,\n' +
+                    '    },\n' +
+                    '  }))`width: 100%;`\n\n' +
+                    '  <Component />');
+                warningSeen = true;
+                generatedClasses = {};
+            }
+        }
+    };
+});
+
+var EMPTY_ARRAY = Object.freeze([]);
+var EMPTY_OBJECT = Object.freeze({});
+
+function determineTheme(props, providedTheme, defaultProps) {
+    if (defaultProps === void 0) { defaultProps = EMPTY_OBJECT; }
+    return (props.theme !== defaultProps.theme && props.theme) || providedTheme || defaultProps.theme;
+}
+
+// Thanks to ReactDOMFactories for this handy list!
+var domElements = [
+    'a',
+    'abbr',
+    'address',
+    'area',
+    'article',
+    'aside',
+    'audio',
+    'b',
+    'base',
+    'bdi',
+    'bdo',
+    'big',
+    'blockquote',
+    'body',
+    'br',
+    'button',
+    'canvas',
+    'caption',
+    'cite',
+    'code',
+    'col',
+    'colgroup',
+    'data',
+    'datalist',
+    'dd',
+    'del',
+    'details',
+    'dfn',
+    'dialog',
+    'div',
+    'dl',
+    'dt',
+    'em',
+    'embed',
+    'fieldset',
+    'figcaption',
+    'figure',
+    'footer',
+    'form',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'head',
+    'header',
+    'hgroup',
+    'hr',
+    'html',
+    'i',
+    'iframe',
+    'img',
+    'input',
+    'ins',
+    'kbd',
+    'keygen',
+    'label',
+    'legend',
+    'li',
+    'link',
+    'main',
+    'map',
+    'mark',
+    'menu',
+    'menuitem',
+    'meta',
+    'meter',
+    'nav',
+    'noscript',
+    'object',
+    'ol',
+    'optgroup',
+    'option',
+    'output',
+    'p',
+    'param',
+    'picture',
+    'pre',
+    'progress',
+    'q',
+    'rp',
+    'rt',
+    'ruby',
+    's',
+    'samp',
+    'script',
+    'section',
+    'select',
+    'small',
+    'source',
+    'span',
+    'strong',
+    'style',
+    'sub',
+    'summary',
+    'sup',
+    'table',
+    'tbody',
+    'td',
+    'textarea',
+    'tfoot',
+    'th',
+    'thead',
+    'time',
+    'title',
+    'tr',
+    'track',
+    'u',
+    'ul',
+    'var',
+    'video',
+    'wbr',
+    'circle',
+    'clipPath',
+    'defs',
+    'ellipse',
+    'foreignObject',
+    'g',
+    'image',
+    'line',
+    'linearGradient',
+    'marker',
+    'mask',
+    'path',
+    'pattern',
+    'polygon',
+    'polyline',
+    'radialGradient',
+    'rect',
+    'stop',
+    'svg',
+    'text',
+    'tspan',
+];
+
+// Source: https://www.w3.org/TR/cssom-1/#serialize-an-identifier
+// Control characters and non-letter first symbols are not supported
+var escapeRegex = /[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~-]+/g;
+var dashesAtEnds = /(^-|-$)/g;
+/**
+ * TODO: Explore using CSS.escape when it becomes more available
+ * in evergreen browsers.
+ */
+function escape(str) {
+    return str // Replace all possible CSS selectors
+        .replace(escapeRegex, '-') // Remove extraneous hyphens at the start and end
+        .replace(dashesAtEnds, '');
+}
+
+var AD_REPLACER_R = /(a)(d)/gi;
+/* This is the "capacity" of our alphabet i.e. 2x26 for all letters plus their capitalised
+ * counterparts */
+var charsLength = 52;
+/* start at 75 for 'a' until 'z' (25) and then start at 65 for capitalised letters */
+var getAlphabeticChar = function (code) { return String.fromCharCode(code + (code > 25 ? 39 : 97)); };
+/* input a number, usually a hash and convert it to base-52 */
+function generateAlphabeticName(code) {
+    var name = '';
+    var x;
+    /* get a char and divide by alphabet-length */
+    for (x = Math.abs(code); x > charsLength; x = (x / charsLength) | 0) {
+        name = getAlphabeticChar(x % charsLength) + name;
+    }
+    return (getAlphabeticChar(x % charsLength) + name).replace(AD_REPLACER_R, '$1-$2');
+}
+
+var SEED$1 = 5381;
+// When we have separate strings it's useful to run a progressive
+// version of djb2 where we pretend that we're still looping over
+// the same string
+var phash = function (h, x) {
+    var i = x.length;
+    while (i) {
+        h = (h * 33) ^ x.charCodeAt(--i);
+    }
+    return h;
+};
+// This is a djb2 hashing function
+var hash = function (x) {
+    return phash(SEED$1, x);
+};
+
+function generateComponentId(str) {
+    return generateAlphabeticName(hash(str) >>> 0);
+}
+
+function getComponentName(target) {
+    return ((process.env.NODE_ENV !== 'production' ? typeof target === 'string' && target : false) ||
+        target.displayName ||
+        target.name ||
+        'Component');
+}
+
+function isTag(target) {
+    return (typeof target === 'string' &&
+        (process.env.NODE_ENV !== 'production'
+            ? target.charAt(0) === target.charAt(0).toLowerCase()
+            : true));
+}
+
+function generateDisplayName(target) {
+    return isTag(target) ? "styled.".concat(target) : "Styled(".concat(getComponentName(target), ")");
+}
+
+var _a;
+var hasSymbol = typeof Symbol === 'function' && Symbol.for;
+// copied from react-is
+var REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
+var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
+/**
+ * Adapted from hoist-non-react-statics to avoid the react-is dependency.
+ */
+var REACT_STATICS = {
+    childContextTypes: true,
+    contextType: true,
+    contextTypes: true,
+    defaultProps: true,
+    displayName: true,
+    getDefaultProps: true,
+    getDerivedStateFromError: true,
+    getDerivedStateFromProps: true,
+    mixins: true,
+    propTypes: true,
+    type: true,
+};
+var KNOWN_STATICS = {
+    name: true,
+    length: true,
+    prototype: true,
+    caller: true,
+    callee: true,
+    arguments: true,
+    arity: true,
+};
+var FORWARD_REF_STATICS = {
+    $$typeof: true,
+    render: true,
+    defaultProps: true,
+    displayName: true,
+    propTypes: true,
+};
+var MEMO_STATICS = {
+    $$typeof: true,
+    compare: true,
+    defaultProps: true,
+    displayName: true,
+    propTypes: true,
+    type: true,
+};
+var TYPE_STATICS = (_a = {},
+    _a[REACT_FORWARD_REF_TYPE] = FORWARD_REF_STATICS,
+    _a[REACT_MEMO_TYPE] = MEMO_STATICS,
+    _a);
+// adapted from react-is
+function isMemo(object) {
+    var $$typeofType = 'type' in object && object.type.$$typeof;
+    return $$typeofType === REACT_MEMO_TYPE;
+}
+function getStatics(component) {
+    // React v16.11 and below
+    if (isMemo(component)) {
+        return MEMO_STATICS;
+    }
+    // React v16.12 and above
+    return '$$typeof' in component
+        ? TYPE_STATICS[component['$$typeof']]
+        : REACT_STATICS;
+}
+var defineProperty = Object.defineProperty;
+var getOwnPropertyNames = Object.getOwnPropertyNames;
+var getOwnPropertySymbols = Object.getOwnPropertySymbols;
+var getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
+var getPrototypeOf = Object.getPrototypeOf;
+var objectPrototype = Object.prototype;
+function hoistNonReactStatics(targetComponent, sourceComponent, excludelist) {
+    if (typeof sourceComponent !== 'string') {
+        // don't hoist over string (html) components
+        if (objectPrototype) {
+            var inheritedComponent = getPrototypeOf(sourceComponent);
+            if (inheritedComponent && inheritedComponent !== objectPrototype) {
+                hoistNonReactStatics(targetComponent, inheritedComponent, excludelist);
+            }
+        }
+        var keys = getOwnPropertyNames(sourceComponent);
+        if (getOwnPropertySymbols) {
+            keys = keys.concat(getOwnPropertySymbols(sourceComponent));
+        }
+        var targetStatics = getStatics(targetComponent);
+        var sourceStatics = getStatics(sourceComponent);
+        for (var i = 0; i < keys.length; ++i) {
+            var key = keys[i];
+            if (!(key in KNOWN_STATICS) &&
+                !(excludelist && excludelist[key]) &&
+                !(sourceStatics && key in sourceStatics) &&
+                !(targetStatics && key in targetStatics)) {
+                var descriptor = getOwnPropertyDescriptor(sourceComponent, key);
+                try {
+                    // Avoid failures from read-only properties
+                    defineProperty(targetComponent, key, descriptor);
+                }
+                catch (e) {
+                    /* ignore */
+                }
+            }
+        }
+    }
+    return targetComponent;
+}
+
+function isStyledComponent(target) {
+    return typeof target === 'object' && 'styledComponentId' in target;
+}
+
+/**
+ * Convenience function for joining strings to form className chains
+ */
+function joinStrings(a, b) {
+    return a && b ? "".concat(a, " ").concat(b) : a || b;
+}
+
+function isPlainObject(x) {
+    return (x !== null &&
+        typeof x === 'object' &&
+        /* a check for empty prototype would be more typical, but that
+           doesn't play well with objects created in different vm contexts */
+        (!x.constructor || x.constructor.name === 'Object') &&
+        (x.toString ? x.toString() : Object.prototype.toString.call(x)) === '[object Object]' &&
+        /* check for reasonable markers that the object isn't an element for react & preact/compat */
+        !('props' in x && (x.$$typeof || x.constructor === undefined)));
+}
+
+function mixinRecursively(target, source, forceMerge) {
+    if (forceMerge === void 0) { forceMerge = false; }
+    /* only merge into POJOs, Arrays, but for top level objects only
+     * allow to merge into anything by passing forceMerge = true */
+    if (!forceMerge && !isPlainObject(target) && !Array.isArray(target)) {
+        return source;
+    }
+    if (Array.isArray(source)) {
+        for (var key = 0; key < source.length; key++) {
+            target[key] = mixinRecursively(target[key], source[key]);
+        }
+    }
+    else if (isPlainObject(source)) {
+        for (var key in source) {
+            target[key] = mixinRecursively(target[key], source[key]);
+        }
+    }
+    return target;
+}
+/**
+ * Arrays & POJOs merged recursively, other objects and value types are overridden
+ * If target is not a POJO or an Array, it will get source properties injected via shallow merge
+ * Source objects applied left to right.  Mutates & returns target.  Similar to lodash merge.
+ */
+function mixinDeep(target) {
+    if (target === void 0) { target = {}; }
+    var sources = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        sources[_i - 1] = arguments[_i];
+    }
+    for (var _a = 0, sources_1 = sources; _a < sources_1.length; _a++) {
+        var source = sources_1[_a];
+        mixinRecursively(target, source, true);
+    }
+    return target;
+}
+
+var errorMap = {
+    '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",
+};
+
+var ERRORS = process.env.NODE_ENV !== 'production' ? errorMap : {};
+/**
+ * super basic version of sprintf
+ */
+function format() {
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+    }
+    var a = args[0];
+    var b = [];
+    for (var c = 1, len = args.length; c < len; c += 1) {
+        b.push(args[c]);
+    }
+    b.forEach(function (d) {
+        a = a.replace(/%[a-z]/, d);
+    });
+    return a;
+}
+/**
+ * Create an error file out of errors.md for development and a simple web link to the full errors
+ * in production mode.
+ */
+function throwStyledComponentsError(code) {
+    var interpolations = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        interpolations[_i - 1] = arguments[_i];
+    }
+    if (process.env.NODE_ENV === 'production') {
+        return new Error("An error occurred. See https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#".concat(code, " for more information.").concat(interpolations.length > 0 ? " Args: ".concat(interpolations.join(', ')) : ''));
+    }
+    else {
+        return new Error(format.apply(void 0, __spreadArray([ERRORS[code]], interpolations, false)).trim());
+    }
+}
+
+/** Create a GroupedTag with an underlying Tag implementation */
+var makeGroupedTag = function (tag) {
+    return new DefaultGroupedTag(tag);
+};
+var BASE_SIZE = 1 << 9;
+var DefaultGroupedTag = /** @class */ (function () {
+    function DefaultGroupedTag(tag) {
+        this.groupSizes = new Uint32Array(BASE_SIZE);
+        this.length = BASE_SIZE;
+        this.tag = tag;
+    }
+    DefaultGroupedTag.prototype.indexOfGroup = function (group) {
+        var index = 0;
+        for (var i = 0; i < group; i++) {
+            index += this.groupSizes[i];
+        }
+        return index;
+    };
+    DefaultGroupedTag.prototype.insertRules = function (group, rules) {
+        if (group >= this.groupSizes.length) {
+            var oldBuffer = this.groupSizes;
+            var oldSize = oldBuffer.length;
+            var newSize = oldSize;
+            while (group >= newSize) {
+                newSize <<= 1;
+                if (newSize < 0) {
+                    throw throwStyledComponentsError(16, "".concat(group));
+                }
+            }
+            this.groupSizes = new Uint32Array(newSize);
+            this.groupSizes.set(oldBuffer);
+            this.length = newSize;
+            for (var i = oldSize; i < newSize; i++) {
+                this.groupSizes[i] = 0;
+            }
+        }
+        var ruleIndex = this.indexOfGroup(group + 1);
+        if (Array.isArray(rules)) {
+            for (var i = 0, l = rules.length; i < l; i++) {
+                if (this.tag.insertRule(ruleIndex, rules[i])) {
+                    this.groupSizes[group]++;
+                    ruleIndex++;
+                }
+            }
+        }
+        else {
+            if (this.tag.insertRule(ruleIndex, rules)) {
+                this.groupSizes[group]++;
+            }
+        }
+    };
+    DefaultGroupedTag.prototype.clearGroup = function (group) {
+        if (group < this.length) {
+            var length_1 = this.groupSizes[group];
+            var startIndex = this.indexOfGroup(group);
+            var endIndex = startIndex + length_1;
+            this.groupSizes[group] = 0;
+            for (var i = startIndex; i < endIndex; i++) {
+                this.tag.deleteRule(startIndex);
+            }
+        }
+    };
+    DefaultGroupedTag.prototype.getGroup = function (group) {
+        var css = '';
+        if (group >= this.length || this.groupSizes[group] === 0) {
+            return css;
+        }
+        var length = this.groupSizes[group];
+        var startIndex = this.indexOfGroup(group);
+        var endIndex = startIndex + length;
+        for (var i = startIndex; i < endIndex; i++) {
+            css += "".concat(this.tag.getRule(i)).concat(SPLITTER);
+        }
+        return css;
+    };
+    return DefaultGroupedTag;
+}());
+
+var MAX_SMI = 1 << (31 - 1);
+var groupIDRegister = new Map();
+var reverseRegister = new Map();
+var nextFreeGroup = 1;
+var getGroupForId = function (id) {
+    if (groupIDRegister.has(id)) {
+        return groupIDRegister.get(id);
+    }
+    while (reverseRegister.has(nextFreeGroup)) {
+        nextFreeGroup++;
+    }
+    var group = nextFreeGroup++;
+    if (process.env.NODE_ENV !== 'production' && ((group | 0) < 0 || group > MAX_SMI)) {
+        throw throwStyledComponentsError(16, "".concat(group));
+    }
+    groupIDRegister.set(id, group);
+    reverseRegister.set(group, id);
+    return group;
+};
+var getIdForGroup = function (group) {
+    return reverseRegister.get(group);
+};
+var setGroupForId = function (id, group) {
+    groupIDRegister.set(id, group);
+    reverseRegister.set(group, id);
+};
+
+var SELECTOR = "style[".concat(SC_ATTR, "][").concat(SC_ATTR_VERSION, "=\"").concat(SC_VERSION, "\"]");
+var MARKER_RE = new RegExp("^".concat(SC_ATTR, "\\.g(\\d+)\\[id=\"([\\w\\d-]+)\"\\].*?\"([^\"]*)"));
+var outputSheet = function (sheet) {
+    var tag = sheet.getTag();
+    var length = tag.length;
+    var css = '';
+    var _loop_1 = function (group) {
+        var id = getIdForGroup(group);
+        if (id === undefined)
+            return "continue";
+        var names = sheet.names.get(id);
+        var rules = tag.getGroup(group);
+        if (names === undefined || rules.length === 0)
+            return "continue";
+        var selector = "".concat(SC_ATTR, ".g").concat(group, "[id=\"").concat(id, "\"]");
+        var content = '';
+        if (names !== undefined) {
+            names.forEach(function (name) {
+                if (name.length > 0) {
+                    content += "".concat(name, ",");
+                }
+            });
+        }
+        // NOTE: It's easier to collect rules and have the marker
+        // after the actual rules to simplify the rehydration
+        css += "".concat(rules).concat(selector, "{content:\"").concat(content, "\"}").concat(SPLITTER);
+    };
+    for (var group = 0; group < length; group++) {
+        _loop_1(group);
+    }
+    return css;
+};
+var rehydrateNamesFromContent = function (sheet, id, content) {
+    var names = content.split(',');
+    var name;
+    for (var i = 0, l = names.length; i < l; i++) {
+        // eslint-disable-next-line
+        if ((name = names[i])) {
+            sheet.registerName(id, name);
+        }
+    }
+};
+var rehydrateSheetFromTag = function (sheet, style) {
+    var _a;
+    var parts = ((_a = style.textContent) !== null && _a !== void 0 ? _a : '').split(SPLITTER);
+    var rules = [];
+    for (var i = 0, l = parts.length; i < l; i++) {
+        var part = parts[i].trim();
+        if (!part)
+            continue;
+        var marker = part.match(MARKER_RE);
+        if (marker) {
+            var group = parseInt(marker[1], 10) | 0;
+            var id = marker[2];
+            if (group !== 0) {
+                // Rehydrate componentId to group index mapping
+                setGroupForId(id, group);
+                // Rehydrate names and rules
+                // looks like: data-styled.g11[id="idA"]{content:"nameA,"}
+                rehydrateNamesFromContent(sheet, id, marker[3]);
+                sheet.getTag().insertRules(group, rules);
+            }
+            rules.length = 0;
+        }
+        else {
+            rules.push(part);
+        }
+    }
+};
+var rehydrateSheet = function (sheet) {
+    var nodes = document.querySelectorAll(SELECTOR);
+    for (var i = 0, l = nodes.length; i < l; i++) {
+        var node = nodes[i];
+        if (node && node.getAttribute(SC_ATTR) !== SC_ATTR_ACTIVE) {
+            rehydrateSheetFromTag(sheet, node);
+            if (node.parentNode) {
+                node.parentNode.removeChild(node);
+            }
+        }
+    }
+};
+
+function getNonce() {
+    return typeof __webpack_nonce__ !== 'undefined' ? __webpack_nonce__ : null;
+}
+
+var ELEMENT_TYPE = 1;
+/* Node.ELEMENT_TYPE */
+/** Find last style element if any inside target */
+var findLastStyleTag = function (target) {
+    var childNodes = target.childNodes;
+    for (var i = childNodes.length; i >= 0; i--) {
+        var child = childNodes[i];
+        if (child && child.nodeType === ELEMENT_TYPE && child.hasAttribute(SC_ATTR)) {
+            return child;
+        }
+    }
+    return undefined;
+};
+/** Create a style element inside `target` or <head> after the last */
+var makeStyleTag = function (target) {
+    var head = document.head;
+    var parent = target || head;
+    var style = document.createElement('style');
+    var prevStyle = findLastStyleTag(parent);
+    var nextSibling = prevStyle !== undefined ? prevStyle.nextSibling : null;
+    style.setAttribute(SC_ATTR, SC_ATTR_ACTIVE);
+    style.setAttribute(SC_ATTR_VERSION, SC_VERSION);
+    var nonce = getNonce();
+    if (nonce)
+        style.setAttribute('nonce', nonce);
+    parent.insertBefore(style, nextSibling);
+    return style;
+};
+/** Get the CSSStyleSheet instance for a given style element */
+var getSheet = function (tag) {
+    if (tag.sheet) {
+        return tag.sheet;
+    }
+    // Avoid Firefox quirk where the style element might not have a sheet property
+    var styleSheets = document.styleSheets;
+    for (var i = 0, l = styleSheets.length; i < l; i++) {
+        var sheet = styleSheets[i];
+        if (sheet.ownerNode === tag) {
+            return sheet;
+        }
+    }
+    throw throwStyledComponentsError(17);
+};
+
+/** Create a CSSStyleSheet-like tag depending on the environment */
+var makeTag = function (_a) {
+    var isServer = _a.isServer, useCSSOMInjection = _a.useCSSOMInjection, target = _a.target;
+    if (isServer) {
+        return new VirtualTag(target);
+    }
+    else if (useCSSOMInjection) {
+        return new CSSOMTag(target);
+    }
+    else {
+        return new TextTag(target);
+    }
+};
+var CSSOMTag = /** @class */ (function () {
+    function CSSOMTag(target) {
+        var element = (this.element = makeStyleTag(target));
+        // Avoid Edge bug where empty style elements don't create sheets
+        element.appendChild(document.createTextNode(''));
+        this.sheet = getSheet(element);
+        this.length = 0;
+    }
+    CSSOMTag.prototype.insertRule = function (index, rule) {
+        try {
+            this.sheet.insertRule(rule, index);
+            this.length++;
+            return true;
+        }
+        catch (_error) {
+            return false;
+        }
+    };
+    CSSOMTag.prototype.deleteRule = function (index) {
+        this.sheet.deleteRule(index);
+        this.length--;
+    };
+    CSSOMTag.prototype.getRule = function (index) {
+        var rule = this.sheet.cssRules[index];
+        // Avoid IE11 quirk where cssText is inaccessible on some invalid rules
+        if (rule !== undefined && typeof rule.cssText === 'string') {
+            return rule.cssText;
+        }
+        else {
+            return '';
+        }
+    };
+    return CSSOMTag;
+}());
+/** A Tag that emulates the CSSStyleSheet API but uses text nodes */
+var TextTag = /** @class */ (function () {
+    function TextTag(target) {
+        var element = (this.element = makeStyleTag(target));
+        this.nodes = element.childNodes;
+        this.length = 0;
+    }
+    TextTag.prototype.insertRule = function (index, rule) {
+        if (index <= this.length && index >= 0) {
+            var node = document.createTextNode(rule);
+            var refNode = this.nodes[index];
+            this.element.insertBefore(node, refNode || null);
+            this.length++;
+            return true;
+        }
+        else {
+            return false;
+        }
+    };
+    TextTag.prototype.deleteRule = function (index) {
+        this.element.removeChild(this.nodes[index]);
+        this.length--;
+    };
+    TextTag.prototype.getRule = function (index) {
+        if (index < this.length) {
+            return this.nodes[index].textContent;
+        }
+        else {
+            return '';
+        }
+    };
+    return TextTag;
+}());
+/** A completely virtual (server-side) Tag that doesn't manipulate the DOM */
+var VirtualTag = /** @class */ (function () {
+    function VirtualTag(_target) {
+        this.rules = [];
+        this.length = 0;
+    }
+    VirtualTag.prototype.insertRule = function (index, rule) {
+        if (index <= this.length) {
+            this.rules.splice(index, 0, rule);
+            this.length++;
+            return true;
+        }
+        else {
+            return false;
+        }
+    };
+    VirtualTag.prototype.deleteRule = function (index) {
+        this.rules.splice(index, 1);
+        this.length--;
+    };
+    VirtualTag.prototype.getRule = function (index) {
+        if (index < this.length) {
+            return this.rules[index];
+        }
+        else {
+            return '';
+        }
+    };
+    return VirtualTag;
+}());
+
+var SHOULD_REHYDRATE = IS_BROWSER;
+var defaultOptions = {
+    isServer: !IS_BROWSER,
+    useCSSOMInjection: !DISABLE_SPEEDY,
+};
+/** Contains the main stylesheet logic for stringification and caching */
+var StyleSheet = /** @class */ (function () {
+    function StyleSheet(options, globalStyles, names) {
+        if (options === void 0) { options = EMPTY_OBJECT; }
+        if (globalStyles === void 0) { globalStyles = {}; }
+        this.options = __assign(__assign({}, defaultOptions), options);
+        this.gs = globalStyles;
+        this.names = new Map(names);
+        this.server = !!options.isServer;
+        // We rehydrate only once and use the sheet that is created first
+        if (!this.server && IS_BROWSER && SHOULD_REHYDRATE) {
+            SHOULD_REHYDRATE = false;
+            rehydrateSheet(this);
+        }
+    }
+    /** Register a group ID to give it an index */
+    StyleSheet.registerId = function (id) {
+        return getGroupForId(id);
+    };
+    StyleSheet.prototype.reconstructWithOptions = function (options, withNames) {
+        if (withNames === void 0) { withNames = true; }
+        return new StyleSheet(__assign(__assign({}, this.options), options), this.gs, (withNames && this.names) || undefined);
+    };
+    StyleSheet.prototype.allocateGSInstance = function (id) {
+        return (this.gs[id] = (this.gs[id] || 0) + 1);
+    };
+    /** Lazily initialises a GroupedTag for when it's actually needed */
+    StyleSheet.prototype.getTag = function () {
+        return this.tag || (this.tag = makeGroupedTag(makeTag(this.options)));
+    };
+    /** Check whether a name is known for caching */
+    StyleSheet.prototype.hasNameForId = function (id, name) {
+        return this.names.has(id) && this.names.get(id).has(name);
+    };
+    /** Mark a group's name as known for caching */
+    StyleSheet.prototype.registerName = function (id, name) {
+        getGroupForId(id);
+        if (!this.names.has(id)) {
+            var groupNames = new Set();
+            groupNames.add(name);
+            this.names.set(id, groupNames);
+        }
+        else {
+            this.names.get(id).add(name);
+        }
+    };
+    /** Insert new rules which also marks the name as known */
+    StyleSheet.prototype.insertRules = function (id, name, rules) {
+        this.registerName(id, name);
+        this.getTag().insertRules(getGroupForId(id), rules);
+    };
+    /** Clears all cached names for a given group ID */
+    StyleSheet.prototype.clearNames = function (id) {
+        if (this.names.has(id)) {
+            this.names.get(id).clear();
+        }
+    };
+    /** Clears all rules for a given group ID */
+    StyleSheet.prototype.clearRules = function (id) {
+        this.getTag().clearGroup(getGroupForId(id));
+        this.clearNames(id);
+    };
+    /** Clears the entire tag which deletes all rules but not its names */
+    StyleSheet.prototype.clearTag = function () {
+        // NOTE: This does not clear the names, since it's only used during SSR
+        // so that we can continuously output only new rules
+        this.tag = undefined;
+    };
+    /** Outputs the current sheet as a CSS string with markers for SSR */
+    StyleSheet.prototype.toString = function () {
+        return outputSheet(this);
+    };
+    return StyleSheet;
+}());
+
+var COMMENT_REGEX = /^\s*\/\/.*$/gm;
+var COMPLEX_SELECTOR_PREFIX = [':', '[', '.', '#'];
+/**
+ * Serialize stylis output as an array of css strings. It is important that rules are
+ * separated when using CSSOM injection.
+ */
+function serialize(children, callback) {
+    return children.map(function (c, i) { return callback(c, i, children, callback); }).filter(Boolean);
+}
+function createStylisInstance(_a) {
+    var _b = _a === void 0 ? EMPTY_OBJECT : _a, _c = _b.options, options = _c === void 0 ? EMPTY_OBJECT : _c, _d = _b.plugins, plugins = _d === void 0 ? EMPTY_ARRAY : _d;
+    var _componentId;
+    var _selector;
+    var _selectorRegexp;
+    var _consecutiveSelfRefRegExp;
+    var selfReferenceReplacer = function (match, offset, string) {
+        if (
+        // do not replace the first occurrence if it is complex (has a modifier)
+        (offset === 0 ? !COMPLEX_SELECTOR_PREFIX.includes(string[_selector.length]) : true) && // no consecutive self refs (.b.b); that is a precedence boost and treated differently
+            !string.match(_consecutiveSelfRefRegExp)) {
+            return ".".concat(_componentId);
+        }
+        return match;
+    };
+    /**
+     * When writing a style like
+     *
+     * & + & {
+     *   color: red;
+     * }
+     *
+     * The second ampersand should be a reference to the static component class. stylis
+     * has no knowledge of static class so we have to intelligently replace the base selector.
+     *
+     * https://github.com/thysultan/stylis.js/tree/v4.0.2#abstract-syntax-structure
+     */
+    var selfReferenceReplacementPlugin = function (element) {
+        if (element.type === RULESET && element.value.includes('&')) {
+            var props = element.props;
+            props[0] = props[0].replace(_selectorRegexp, selfReferenceReplacer);
+        }
+    };
+    var stringifyRules = function (css, selector, prefix, componentId) {
+        if (selector === void 0) { selector = ''; }
+        if (prefix === void 0) { prefix = ''; }
+        if (componentId === void 0) { componentId = '&'; }
+        var flatCSS = css.replace(COMMENT_REGEX, '');
+        // stylis has no concept of state to be passed to plugins
+        // but since JS is single-threaded, we can rely on that to ensure
+        // these properties stay in sync with the current stylis run
+        _componentId = componentId;
+        _selector = selector;
+        _selectorRegexp = new RegExp("\\".concat(_selector, "\\b"), 'g');
+        _consecutiveSelfRefRegExp = new RegExp("(\\".concat(_selector, "\\b){2,}"));
+        var middlewares = plugins.slice();
+        if (options.prefix || options.prefix === undefined) {
+            middlewares.unshift(prefixer);
+        }
+        middlewares.push(selfReferenceReplacementPlugin, stringify);
+        return serialize(compile(prefix || selector ? "".concat(prefix, " ").concat(selector, " { ").concat(flatCSS, " }") : flatCSS), middleware(middlewares));
+    };
+    stringifyRules.hash = plugins.length
+        ? plugins
+            .reduce(function (acc, plugin) {
+            if (!plugin.name) {
+                throwStyledComponentsError(15);
+            }
+            return phash(acc, plugin.name);
+        }, SEED$1)
+            .toString()
+        : '';
+    return stringifyRules;
+}
+
+var StyleSheetContext = React.createContext(undefined);
+var StyleSheetConsumer = StyleSheetContext.Consumer;
+var StylisContext = React.createContext(undefined);
+StylisContext.Consumer;
+var mainSheet = new StyleSheet();
+var mainStylis = createStylisInstance();
+function useStyleSheet() {
+    return useContext(StyleSheetContext) || mainSheet;
+}
+function useStylis() {
+    return useContext(StylisContext) || mainStylis;
+}
+function StyleSheetManager(props) {
+    var _a = useState(props.stylisPlugins), plugins = _a[0], setPlugins = _a[1];
+    var contextStyleSheet = useStyleSheet();
+    var styleSheet = useMemo(function () {
+        var sheet = contextStyleSheet;
+        if (props.sheet) {
+            // eslint-disable-next-line prefer-destructuring
+            sheet = props.sheet;
+        }
+        else if (props.target) {
+            sheet = sheet.reconstructWithOptions({ target: props.target }, false);
+        }
+        if (props.disableCSSOMInjection) {
+            sheet = sheet.reconstructWithOptions({ useCSSOMInjection: false });
+        }
+        return sheet;
+    }, [props.disableCSSOMInjection, props.sheet, props.target]);
+    var stylis = useMemo(function () {
+        return createStylisInstance({
+            options: { prefix: !props.disableVendorPrefixes },
+            plugins: plugins,
+        });
+    }, [props.disableVendorPrefixes, plugins]);
+    useEffect(function () {
+        if (!shallowequal(plugins, props.stylisPlugins))
+            setPlugins(props.stylisPlugins);
+    }, [props.stylisPlugins]);
+    return (React.createElement(StyleSheetContext.Provider, { value: styleSheet },
+        React.createElement(StylisContext.Provider, { value: stylis }, process.env.NODE_ENV !== 'production'
+            ? React.Children.only(props.children)
+            : props.children)));
+}
+
+var Keyframes = /** @class */ (function () {
+    function Keyframes(name, rules) {
+        var _this = this;
+        this.inject = function (styleSheet, stylisInstance) {
+            if (stylisInstance === void 0) { stylisInstance = mainStylis; }
+            var resolvedName = _this.name + stylisInstance.hash;
+            if (!styleSheet.hasNameForId(_this.id, resolvedName)) {
+                styleSheet.insertRules(_this.id, resolvedName, stylisInstance(_this.rules, resolvedName, '@keyframes'));
+            }
+        };
+        this.toString = function () {
+            throw throwStyledComponentsError(12, String(_this.name));
+        };
+        this.name = name;
+        this.id = "sc-keyframes-".concat(name);
+        this.rules = rules;
+    }
+    Keyframes.prototype.getName = function (stylisInstance) {
+        if (stylisInstance === void 0) { stylisInstance = mainStylis; }
+        return this.name + stylisInstance.hash;
+    };
+    return Keyframes;
+}());
+
+// Taken from https://github.com/facebook/react/blob/b87aabdfe1b7461e7331abb3601d9e6bb27544bc/packages/react-dom/src/shared/dangerousStyleValue.js
+function addUnitIfNeeded(name, value) {
+    // https://github.com/amilajack/eslint-plugin-flowtype-errors/issues/133
+    if (value == null || typeof value === 'boolean' || value === '') {
+        return '';
+    }
+    if (typeof value === 'number' && value !== 0 && !(name in unitless)) {
+        return "".concat(value, "px"); // Presumes implicit 'px' suffix for unitless numbers
+    }
+    return String(value).trim();
+}
+
+/**
+ * inlined version of
+ * https://github.com/facebook/fbjs/blob/master/packages/fbjs/src/core/hyphenateStyleName.js
+ */
+var uppercaseCheck = /([A-Z])/;
+var uppercasePattern = /([A-Z])/g;
+var msPattern = /^ms-/;
+var prefixAndLowerCase = function (char) { return "-".concat(char.toLowerCase()); };
+/**
+ * Hyphenates a camelcased CSS property name, for example:
+ *
+ *   > hyphenateStyleName('backgroundColor')
+ *   < "background-color"
+ *   > hyphenateStyleName('MozTransition')
+ *   < "-moz-transition"
+ *   > hyphenateStyleName('msTransition')
+ *   < "-ms-transition"
+ *
+ * As Modernizr suggests (http://modernizr.com/docs/#prefixed), an `ms` prefix
+ * is converted to `-ms-`.
+ */
+function hyphenateStyleName(string) {
+    return uppercaseCheck.test(string)
+        ? string.replace(uppercasePattern, prefixAndLowerCase).replace(msPattern, '-ms-')
+        : string;
+}
+
+function isFunction(test) {
+    return typeof test === 'function';
+}
+
+function isStatelessFunction(test) {
+    return typeof test === 'function' && !(test.prototype && test.prototype.isReactComponent);
+}
+
+/**
+ * It's falsish not falsy because 0 is allowed.
+ */
+var isFalsish = function (chunk) {
+    return chunk === undefined || chunk === null || chunk === false || chunk === '';
+};
+var objToCssArray = function (obj, prevKey) {
+    var rules = [];
+    for (var key in obj) {
+        if (!obj.hasOwnProperty(key) || isFalsish(obj[key]))
+            continue;
+        if ((Array.isArray(obj[key]) && obj[key].isCss) || isFunction(obj[key])) {
+            rules.push("".concat(hyphenateStyleName(key), ":"), obj[key], ';');
+        }
+        else if (isPlainObject(obj[key])) {
+            rules.push.apply(rules, objToCssArray(obj[key], key));
+        }
+        else {
+            rules.push("".concat(hyphenateStyleName(key), ": ").concat(addUnitIfNeeded(key, obj[key]), ";"));
+        }
+    }
+    return prevKey ? __spreadArray(__spreadArray(["".concat(prevKey, " {")], rules, true), ['}'], false) : rules;
+};
+function flatten(chunk, executionContext, styleSheet, stylisInstance) {
+    if (Array.isArray(chunk)) {
+        var ruleSet = [];
+        for (var i = 0, len = chunk.length, result = void 0; i < len; i += 1) {
+            result = flatten(chunk[i], executionContext, styleSheet, stylisInstance);
+            if (result === '')
+                continue;
+            else if (Array.isArray(result))
+                ruleSet.push.apply(ruleSet, result);
+            else
+                ruleSet.push(result);
+        }
+        return ruleSet;
+    }
+    if (isFalsish(chunk)) {
+        return '';
+    }
+    /* Handle other components */
+    if (isStyledComponent(chunk)) {
+        return ".".concat(chunk.styledComponentId);
+    }
+    /* Either execute or defer the function */
+    if (isFunction(chunk)) {
+        if (isStatelessFunction(chunk) && executionContext) {
+            var chunkFn = chunk;
+            var result = chunkFn(executionContext);
+            if (process.env.NODE_ENV !== 'production' &&
+                typeof result === 'object' &&
+                !Array.isArray(result) &&
+                !(result instanceof Keyframes) &&
+                !isPlainObject(result)) {
+                // eslint-disable-next-line no-console
+                console.error("".concat(getComponentName(chunkFn), " is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details."));
+            }
+            return flatten(result, executionContext, styleSheet, stylisInstance);
+        }
+        else
+            return chunk;
+    }
+    if (chunk instanceof Keyframes) {
+        if (styleSheet) {
+            chunk.inject(styleSheet, stylisInstance);
+            return chunk.getName(stylisInstance);
+        }
+        else
+            return chunk;
+    }
+    /* Handle objects */
+    return isPlainObject(chunk) ? objToCssArray(chunk) : chunk.toString();
+}
+
+function isStaticRules(rules) {
+    for (var i = 0; i < rules.length; i += 1) {
+        var rule = rules[i];
+        if (isFunction(rule) &&
+            !isStyledComponent(rule)) {
+            // functions are allowed to be static if they're just being
+            // used to get the classname of a nested styled component
+            return false;
+        }
+    }
+    return true;
+}
+
+var SEED = hash(SC_VERSION);
+/**
+ * ComponentStyle is all the CSS-specific stuff, not the React-specific stuff.
+ */
+var ComponentStyle = /** @class */ (function () {
+    function ComponentStyle(rules, componentId, baseStyle) {
+        this.names = [];
+        this.rules = rules;
+        this.staticRulesId = '';
+        this.isStatic =
+            process.env.NODE_ENV === 'production' &&
+                (baseStyle === undefined || baseStyle.isStatic) &&
+                isStaticRules(rules);
+        this.componentId = componentId;
+        // SC_VERSION gives us isolation between multiple runtimes on the page at once
+        // this is improved further with use of the babel plugin "namespace" feature
+        this.baseHash = phash(SEED, componentId);
+        this.baseStyle = baseStyle;
+        // NOTE: This registers the componentId, which ensures a consistent order
+        // for this component's styles compared to others
+        StyleSheet.registerId(componentId);
+    }
+    /*
+     * Flattens a rule set into valid CSS
+     * Hashes it, wraps the whole chunk in a .hash1234 {}
+     * Returns the hash to be injected on render()
+     * */
+    ComponentStyle.prototype.generateAndInjectStyles = function (executionContext, styleSheet, stylis) {
+        var componentId = this.componentId;
+        this.names.length = 0;
+        if (this.baseStyle) {
+            this.names.push(this.baseStyle.generateAndInjectStyles(executionContext, styleSheet, stylis));
+        }
+        // force dynamic classnames if user-supplied stylis plugins are in use
+        if (this.isStatic && !stylis.hash) {
+            if (this.staticRulesId && styleSheet.hasNameForId(componentId, this.staticRulesId)) {
+                this.names.push(this.staticRulesId);
+            }
+            else {
+                var cssStatic = flatten(this.rules, executionContext, styleSheet, stylis).join('');
+                var name_1 = generateAlphabeticName(phash(this.baseHash, cssStatic) >>> 0);
+                if (!styleSheet.hasNameForId(componentId, name_1)) {
+                    var cssStaticFormatted = stylis(cssStatic, ".".concat(name_1), undefined, componentId);
+                    styleSheet.insertRules(componentId, name_1, cssStaticFormatted);
+                }
+                this.names.push(name_1);
+                this.staticRulesId = name_1;
+            }
+        }
+        else {
+            var length_1 = this.rules.length;
+            var dynamicHash = phash(this.baseHash, stylis.hash);
+            var css = '';
+            for (var i = 0; i < length_1; i++) {
+                var partRule = this.rules[i];
+                if (typeof partRule === 'string') {
+                    css += partRule;
+                    if (process.env.NODE_ENV !== 'production')
+                        dynamicHash = phash(dynamicHash, partRule);
+                }
+                else if (partRule) {
+                    var partChunk = flatten(partRule, executionContext, styleSheet, stylis);
+                    var partString = Array.isArray(partChunk) ? partChunk.join('') : partChunk;
+                    dynamicHash = phash(dynamicHash, partString);
+                    css += partString;
+                }
+            }
+            if (css) {
+                var name_2 = generateAlphabeticName(dynamicHash >>> 0);
+                if (!styleSheet.hasNameForId(componentId, name_2)) {
+                    var cssFormatted = stylis(css, ".".concat(name_2), undefined, componentId);
+                    styleSheet.insertRules(componentId, name_2, cssFormatted);
+                }
+                this.names.push(name_2);
+            }
+        }
+        return this.names.join(' ');
+    };
+    return ComponentStyle;
+}());
+
+var ThemeContext = React.createContext(undefined);
+var ThemeConsumer = ThemeContext.Consumer;
+function mergeTheme(theme, outerTheme) {
+    if (!theme) {
+        throw throwStyledComponentsError(14);
+    }
+    if (isFunction(theme)) {
+        var themeFn = theme;
+        var mergedTheme = themeFn(outerTheme);
+        if (process.env.NODE_ENV !== 'production' &&
+            (mergedTheme === null || Array.isArray(mergedTheme) || typeof mergedTheme !== 'object')) {
+            throw throwStyledComponentsError(7);
+        }
+        return mergedTheme;
+    }
+    if (Array.isArray(theme) || typeof theme !== 'object') {
+        throw throwStyledComponentsError(8);
+    }
+    return outerTheme ? __assign(__assign({}, outerTheme), theme) : theme;
+}
+/**
+ * Provide a theme to an entire react component tree via context
+ */
+function ThemeProvider(props) {
+    var outerTheme = useContext(ThemeContext);
+    var themeContext = useMemo(function () { return mergeTheme(props.theme, outerTheme); }, [props.theme, outerTheme]);
+    if (!props.children) {
+        return null;
+    }
+    return React.createElement(ThemeContext.Provider, { value: themeContext }, props.children);
+}
+
+var identifiers = {};
+/* We depend on components having unique IDs */
+function generateId(displayName, parentComponentId) {
+    var name = typeof displayName !== 'string' ? 'sc' : escape(displayName);
+    // Ensure that no displayName can lead to duplicate componentIds
+    identifiers[name] = (identifiers[name] || 0) + 1;
+    var componentId = "".concat(name, "-").concat(generateComponentId(
+    // SC_VERSION gives us isolation between multiple runtimes on the page at once
+    // this is improved further with use of the babel plugin "namespace" feature
+    SC_VERSION + name + identifiers[name]));
+    return parentComponentId ? "".concat(parentComponentId, "-").concat(componentId) : componentId;
+}
+function useResolvedAttrs(theme, props, attrs) {
+    if (theme === void 0) { theme = EMPTY_OBJECT; }
+    // NOTE: can't memoize this
+    // returns [context, resolvedAttrs]
+    // where resolvedAttrs is only the things injected by the attrs themselves
+    var context = __assign(__assign({}, props), { theme: theme });
+    attrs.forEach(function (attrDef) {
+        // @ts-expect-error narrowing isn't working properly for some reason
+        var resolvedAttrDef = typeof attrDef === 'function' ? attrDef(context) : attrDef;
+        var key;
+        /* eslint-disable guard-for-in */
+        for (key in resolvedAttrDef) {
+            // @ts-expect-error bad types
+            context[key] =
+                key === 'className'
+                    ? joinStrings(context[key], resolvedAttrDef[key])
+                    : key === 'style'
+                        ? __assign(__assign({}, context[key]), resolvedAttrDef[key]) : resolvedAttrDef[key];
+        }
+        /* eslint-enable guard-for-in */
+    });
+    return context;
+}
+function useInjectedStyle(componentStyle, isStatic, resolvedAttrs, warnTooManyClasses) {
+    var styleSheet = useStyleSheet();
+    var stylis = useStylis();
+    var className = isStatic
+        ? componentStyle.generateAndInjectStyles(EMPTY_OBJECT, styleSheet, stylis)
+        : componentStyle.generateAndInjectStyles(resolvedAttrs, styleSheet, stylis);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    if (process.env.NODE_ENV !== 'production')
+        useDebugValue(className);
+    if (process.env.NODE_ENV !== 'production' && !isStatic && warnTooManyClasses) {
+        warnTooManyClasses(className);
+    }
+    return className;
+}
+function useStyledComponentImpl(forwardedComponent, props, forwardedRef, isStatic) {
+    var componentAttrs = forwardedComponent.attrs, componentStyle = forwardedComponent.componentStyle, defaultProps = forwardedComponent.defaultProps, foldedComponentIds = forwardedComponent.foldedComponentIds, shouldForwardProp = forwardedComponent.shouldForwardProp, styledComponentId = forwardedComponent.styledComponentId, target = forwardedComponent.target;
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    if (process.env.NODE_ENV !== 'production')
+        useDebugValue(styledComponentId);
+    // NOTE: the non-hooks version only subscribes to this when !componentStyle.isStatic,
+    // but that'd be against the rules-of-hooks. We could be naughty and do it anyway as it
+    // should be an immutable value, but behave for now.
+    var theme = determineTheme(props, useContext(ThemeContext), defaultProps);
+    var context = useResolvedAttrs(theme || EMPTY_OBJECT, props, componentAttrs);
+    var generatedClassName = useInjectedStyle(componentStyle, isStatic, context, process.env.NODE_ENV !== 'production' ? forwardedComponent.warnTooManyClasses : undefined);
+    var refToForward = forwardedRef;
+    var elementToBeCreated = context.$as || context.as || target;
+    var isTargetTag = isTag(elementToBeCreated);
+    var propsForElement = {};
+    // eslint-disable-next-line guard-for-in
+    for (var key in context) {
+        if (key[0] === '$' || key === 'as' || key === 'theme')
+            continue;
+        else if (key === 'forwardedAs') {
+            propsForElement.as = context[key];
+        }
+        else if (shouldForwardProp ? shouldForwardProp(key, elementToBeCreated) : true) {
+            // Don't pass through non HTML tags through to HTML elements
+            propsForElement[key] = context[key];
+        }
+    }
+    propsForElement[
+    // handle custom elements which React doesn't properly alias
+    isTargetTag &&
+        domElements.indexOf(elementToBeCreated) === -1
+        ? 'class'
+        : 'className'] = foldedComponentIds
+        .concat(styledComponentId, (generatedClassName !== styledComponentId ? generatedClassName : null), context.className)
+        .filter(Boolean)
+        .join(' ');
+    propsForElement.ref = refToForward;
+    return createElement(elementToBeCreated, propsForElement);
+}
+function createStyledComponent(target, options, rules) {
+    var isTargetStyledComp = isStyledComponent(target);
+    var styledComponentTarget = target;
+    var isCompositeComponent = !isTag(target);
+    var _a = options.attrs, attrs = _a === void 0 ? EMPTY_ARRAY : _a, _b = options.componentId, componentId = _b === void 0 ? generateId(options.displayName, options.parentComponentId) : _b, _c = options.displayName, displayName = _c === void 0 ? generateDisplayName(target) : _c;
+    var styledComponentId = options.displayName && options.componentId
+        ? "".concat(escape(options.displayName), "-").concat(options.componentId)
+        : options.componentId || componentId;
+    // fold the underlying StyledComponent attrs up (implicit extend)
+    var finalAttrs = isTargetStyledComp && styledComponentTarget.attrs
+        ? styledComponentTarget.attrs.concat(attrs).filter(Boolean)
+        : attrs;
+    var shouldForwardProp = options.shouldForwardProp;
+    if (isTargetStyledComp && styledComponentTarget.shouldForwardProp) {
+        var shouldForwardPropFn_1 = styledComponentTarget.shouldForwardProp;
+        if (options.shouldForwardProp) {
+            var passedShouldForwardPropFn_1 = options.shouldForwardProp;
+            // compose nested shouldForwardProp calls
+            shouldForwardProp = function (prop, elementToBeCreated) {
+                return shouldForwardPropFn_1(prop, elementToBeCreated) &&
+                    passedShouldForwardPropFn_1(prop, elementToBeCreated);
+            };
+        }
+        else {
+            shouldForwardProp = shouldForwardPropFn_1;
+        }
+    }
+    var componentStyle = new ComponentStyle(rules, styledComponentId, isTargetStyledComp ? styledComponentTarget.componentStyle : undefined);
+    // statically styled-components don't need to build an execution context object,
+    // and shouldn't be increasing the number of class names
+    var isStatic = componentStyle.isStatic && attrs.length === 0;
+    function forwardRef(props, ref) {
+        // eslint-disable-next-line
+        return useStyledComponentImpl(WrappedStyledComponent, props, ref, isStatic);
+    }
+    forwardRef.displayName = displayName;
+    /**
+     * forwardRef creates a new interim component, which we'll take advantage of
+     * instead of extending ParentComponent to create _another_ interim class
+     */
+    var WrappedStyledComponent = React.forwardRef(forwardRef);
+    WrappedStyledComponent.attrs = finalAttrs;
+    WrappedStyledComponent.componentStyle = componentStyle;
+    WrappedStyledComponent.displayName = displayName;
+    WrappedStyledComponent.shouldForwardProp = shouldForwardProp;
+    // this static is used to preserve the cascade of static classes for component selector
+    // purposes; this is especially important with usage of the css prop
+    WrappedStyledComponent.foldedComponentIds = isTargetStyledComp
+        ? styledComponentTarget.foldedComponentIds.concat(styledComponentTarget.styledComponentId)
+        : EMPTY_ARRAY;
+    WrappedStyledComponent.styledComponentId = styledComponentId;
+    // fold the underlying StyledComponent target up since we folded the styles
+    WrappedStyledComponent.target = isTargetStyledComp ? styledComponentTarget.target : target;
+    WrappedStyledComponent.withComponent = function withComponent(tag) {
+        var previousComponentId = options.componentId, optionsToCopy = __rest(options, ["componentId"]);
+        var newComponentId = previousComponentId &&
+            "".concat(previousComponentId, "-").concat(isTag(tag) ? tag : escape(getComponentName(tag)));
+        var newOptions = __assign(__assign({}, optionsToCopy), { attrs: finalAttrs, componentId: newComponentId });
+        return createStyledComponent(tag, newOptions, rules);
+    };
+    Object.defineProperty(WrappedStyledComponent, 'defaultProps', {
+        get: function () {
+            return this._foldedDefaultProps;
+        },
+        set: function (obj) {
+            this._foldedDefaultProps = isTargetStyledComp
+                ? mixinDeep({}, styledComponentTarget.defaultProps, obj)
+                : obj;
+        },
+    });
+    if (process.env.NODE_ENV !== 'production') {
+        checkDynamicCreation(displayName, styledComponentId);
+        WrappedStyledComponent.warnTooManyClasses = createWarnTooManyClasses(displayName, styledComponentId);
+    }
+    WrappedStyledComponent.toString = function () { return ".".concat(WrappedStyledComponent.styledComponentId); };
+    if (isCompositeComponent) {
+        var compositeComponentTarget = target;
+        hoistNonReactStatics(WrappedStyledComponent, compositeComponentTarget, {
+            // all SC-specific things should not be hoisted
+            attrs: true,
+            componentStyle: true,
+            displayName: true,
+            foldedComponentIds: true,
+            shouldForwardProp: true,
+            styledComponentId: true,
+            target: true,
+            withComponent: true,
+        });
+    }
+    return WrappedStyledComponent;
+}
+
+function interleave(strings, interpolations) {
+    var result = [strings[0]];
+    for (var i = 0, len = interpolations.length; i < len; i += 1) {
+        result.push(interpolations[i], strings[i + 1]);
+    }
+    return result;
+}
+
+/**
+ * Used when flattening object styles to determine if we should
+ * expand an array of styles.
+ */
+var addTag = function (arg) {
+    if (Array.isArray(arg)) {
+        // eslint-disable-next-line no-param-reassign
+        arg.isCss = true;
+    }
+    return arg;
+};
+function css(styles) {
+    var interpolations = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        interpolations[_i - 1] = arguments[_i];
+    }
+    if (isFunction(styles) || isPlainObject(styles)) {
+        var styleFunctionOrObject = styles;
+        return addTag(flatten(interleave(EMPTY_ARRAY, __spreadArray([
+            styleFunctionOrObject
+        ], interpolations, true))));
+    }
+    var styleStringArray = styles;
+    if (interpolations.length === 0 &&
+        styleStringArray.length === 1 &&
+        typeof styleStringArray[0] === 'string') {
+        return styleStringArray;
+    }
+    return addTag(flatten(interleave(styleStringArray, interpolations)));
+}
+
+function constructWithOptions(componentConstructor, tag, options) {
+    if (options === void 0) { options = EMPTY_OBJECT; }
+    // We trust that the tag is a valid component as long as it isn't falsish
+    // Typically the tag here is a string or function (i.e. class or pure function component)
+    // However a component may also be an object if it uses another utility, e.g. React.memo
+    // React will output an appropriate warning however if the `tag` isn't valid
+    if (!tag) {
+        throw throwStyledComponentsError(1, tag);
+    }
+    /* This is callable directly as a template function */
+    var templateFunction = function (initialStyles) {
+        var interpolations = [];
+        for (var _i = 1; _i < arguments.length; _i++) {
+            interpolations[_i - 1] = arguments[_i];
+        }
+        return componentConstructor(tag, options, css.apply(void 0, __spreadArray([initialStyles], interpolations, false)));
+    };
+    /* Modify/inject new props at runtime */
+    templateFunction.attrs = function (attrs) {
+        return constructWithOptions(componentConstructor, tag, __assign(__assign({}, options), { attrs: Array.prototype.concat(options.attrs, attrs).filter(Boolean) }));
+    };
+    /**
+     * If config methods are called, wrap up a new template function and merge options */
+    templateFunction.withConfig = function (config) {
+        return constructWithOptions(componentConstructor, tag, __assign(__assign({}, options), config));
+    };
+    return templateFunction;
+}
+
+var baseStyled = function (tag) {
+    return constructWithOptions(createStyledComponent, tag);
+};
+var styled = baseStyled;
+// Shorthands for all valid HTML Elements
+domElements.forEach(function (domElement) {
+    // @ts-expect-error someday they'll handle imperative assignment properly
+    styled[domElement] = baseStyled(domElement);
+});
+
+var GlobalStyle = /** @class */ (function () {
+    function GlobalStyle(rules, componentId) {
+        this.rules = rules;
+        this.componentId = componentId;
+        this.isStatic = isStaticRules(rules);
+        // pre-register the first instance to ensure global styles
+        // load before component ones
+        StyleSheet.registerId(this.componentId + 1);
+    }
+    GlobalStyle.prototype.createStyles = function (instance, executionContext, styleSheet, stylis) {
+        var flatCSS = flatten(this.rules, executionContext, styleSheet, stylis);
+        var css = stylis(flatCSS.join(''), '');
+        var id = this.componentId + instance;
+        // NOTE: We use the id as a name as well, since these rules never change
+        styleSheet.insertRules(id, id, css);
+    };
+    GlobalStyle.prototype.removeStyles = function (instance, styleSheet) {
+        styleSheet.clearRules(this.componentId + instance);
+    };
+    GlobalStyle.prototype.renderStyles = function (instance, executionContext, styleSheet, stylis) {
+        if (instance > 2)
+            StyleSheet.registerId(this.componentId + instance);
+        // NOTE: Remove old styles, then inject the new ones
+        this.removeStyles(instance, styleSheet);
+        this.createStyles(instance, executionContext, styleSheet, stylis);
+    };
+    return GlobalStyle;
+}());
+
+function createGlobalStyle(strings) {
+    var interpolations = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        interpolations[_i - 1] = arguments[_i];
+    }
+    var rules = css.apply(void 0, __spreadArray([strings], interpolations, false));
+    var styledComponentId = "sc-global-".concat(generateComponentId(JSON.stringify(rules)));
+    var globalStyle = new GlobalStyle(rules, styledComponentId);
+    if (process.env.NODE_ENV !== 'production') {
+        checkDynamicCreation(styledComponentId);
+    }
+    var GlobalStyleComponent = function (props) {
+        var styleSheet = useStyleSheet();
+        var stylis = useStylis();
+        var theme = React.useContext(ThemeContext);
+        var instanceRef = React.useRef(styleSheet.allocateGSInstance(styledComponentId));
+        var instance = instanceRef.current;
+        if (process.env.NODE_ENV !== 'production' && React.Children.count(props.children)) {
+            // eslint-disable-next-line no-console
+            console.warn("The global style component ".concat(styledComponentId, " was given child JSX. createGlobalStyle does not render children."));
+        }
+        if (process.env.NODE_ENV !== 'production' &&
+            rules.some(function (rule) { return typeof rule === 'string' && rule.indexOf('@import') !== -1; })) {
+            // eslint-disable-next-line no-console
+            console.warn("Please do not use @import CSS syntax in createGlobalStyle at this time, as the CSSOM APIs we use in production do not handle it well. Instead, we recommend using a library such as react-helmet to inject a typical <link> meta tag to the stylesheet, or simply embedding it manually in your index.html <head> section for a simpler app.");
+        }
+        if (styleSheet.server) {
+            renderStyles(instance, props, styleSheet, theme, stylis);
+        }
+        {
+            // eslint-disable-next-line react-hooks/rules-of-hooks
+            // @ts-expect-error still using React 17 types for the time being
+            (React.useInsertionEffect || React.useLayoutEffect)(function () {
+                if (!styleSheet.server) {
+                    renderStyles(instance, props, styleSheet, theme, stylis);
+                    return function () { return globalStyle.removeStyles(instance, styleSheet); };
+                }
+            }, [instance, props, styleSheet, theme, stylis]);
+        }
+        return null;
+    };
+    function renderStyles(instance, props, styleSheet, theme, stylis) {
+        if (globalStyle.isStatic) {
+            globalStyle.renderStyles(instance, STATIC_EXECUTION_CONTEXT, styleSheet, stylis);
+        }
+        else {
+            var context = __assign(__assign({}, props), { theme: determineTheme(props, theme, GlobalStyleComponent.defaultProps) });
+            globalStyle.renderStyles(instance, context, styleSheet, stylis);
+        }
+    }
+    return React.memo(GlobalStyleComponent);
+}
+
+function keyframes(strings) {
+    var interpolations = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        interpolations[_i - 1] = arguments[_i];
+    }
+    /* Warning if you've used keyframes on React Native */
+    if (process.env.NODE_ENV !== 'production' &&
+        typeof navigator !== 'undefined' &&
+        navigator.product === 'ReactNative') {
+        // eslint-disable-next-line no-console
+        console.warn('`keyframes` cannot be used on ReactNative, only on the web. To do animation in ReactNative please use Animated.');
+    }
+    var rules = css.apply(void 0, __spreadArray([strings], interpolations, false)).join('');
+    var name = generateComponentId(rules);
+    return new Keyframes(name, rules);
+}
+
+function withTheme(Component) {
+    var WithTheme = React.forwardRef(function (props, ref) {
+        var theme = React.useContext(ThemeContext);
+        var themeProp = determineTheme(props, theme, Component.defaultProps);
+        if (process.env.NODE_ENV !== 'production' && themeProp === undefined) {
+            // eslint-disable-next-line no-console
+            console.warn("[withTheme] You are not using a ThemeProvider nor passing a theme prop or a theme in defaultProps in component class \"".concat(getComponentName(Component), "\""));
+        }
+        return React.createElement(Component, __assign({}, props, { theme: themeProp, ref: ref }));
+    });
+    WithTheme.displayName = "WithTheme(".concat(getComponentName(Component), ")");
+    return hoistNonReactStatics(WithTheme, Component);
+}
+
+var useTheme = function () { return useContext(ThemeContext); };
+
+var ServerStyleSheet = /** @class */ (function () {
+    function ServerStyleSheet() {
+        var _this = this;
+        this._emitSheetCSS = function () {
+            var css = _this.instance.toString();
+            var nonce = getNonce();
+            var attrs = [
+                nonce && "nonce=\"".concat(nonce, "\""),
+                "".concat(SC_ATTR, "=\"true\""),
+                "".concat(SC_ATTR_VERSION, "=\"").concat(SC_VERSION, "\""),
+            ];
+            var htmlAttr = attrs.filter(Boolean).join(' ');
+            return "<style ".concat(htmlAttr, ">").concat(css, "</style>");
+        };
+        this.getStyleTags = function () {
+            if (_this.sealed) {
+                throw throwStyledComponentsError(2);
+            }
+            return _this._emitSheetCSS();
+        };
+        this.getStyleElement = function () {
+            var _a;
+            if (_this.sealed) {
+                throw throwStyledComponentsError(2);
+            }
+            var props = (_a = {},
+                _a[SC_ATTR] = '',
+                _a[SC_ATTR_VERSION] = SC_VERSION,
+                _a.dangerouslySetInnerHTML = {
+                    __html: _this.instance.toString(),
+                },
+                _a);
+            var nonce = getNonce();
+            if (nonce) {
+                props.nonce = nonce;
+            }
+            // v4 returned an array for this fn, so we'll do the same for v5 for backward compat
+            return [React.createElement("style", __assign({}, props, { key: "sc-0-0" }))];
+        };
+        this.seal = function () {
+            _this.sealed = true;
+        };
+        this.instance = new StyleSheet({ isServer: true });
+        this.sealed = false;
+    }
+    ServerStyleSheet.prototype.collectStyles = function (children) {
+        if (this.sealed) {
+            throw throwStyledComponentsError(2);
+        }
+        return React.createElement(StyleSheetManager, { sheet: this.instance }, children);
+    };
+    // eslint-disable-next-line consistent-return
+    // @ts-expect-error alternate return types are not possible due to code transformation
+    ServerStyleSheet.prototype.interleaveWithNodeStream = function (input) {
+        {
+            throw throwStyledComponentsError(3);
+        }
+    };
+    return ServerStyleSheet;
+}());
+
+/* eslint-disable */
+var __PRIVATE__ = {
+    StyleSheet: StyleSheet,
+    mainSheet: mainSheet,
+};
+
+/* Import singletons */
+/* Warning if you've imported this file on React Native */
+if (process.env.NODE_ENV !== 'production' &&
+    typeof navigator !== 'undefined' &&
+    navigator.product === 'ReactNative') {
+    // eslint-disable-next-line no-console
+    console.warn("It looks like you've imported 'styled-components' on React Native.\n" +
+        "Perhaps you're looking to import 'styled-components/native'?\n" +
+        'Read more about this at https://www.styled-components.com/docs/basics#react-native');
+}
+/* Warning if there are several instances of styled-components */
+if (process.env.NODE_ENV !== 'production' &&
+    process.env.NODE_ENV !== 'test' &&
+    typeof window !== 'undefined') {
+    window['__styled-components-init__'] || (window['__styled-components-init__'] = 0);
+    if (window['__styled-components-init__'] === 1) {
+        // eslint-disable-next-line no-console
+        console.warn("It looks like there are several instances of 'styled-components' initialized in this application. " +
+            'This may cause dynamic styles to not render properly, errors during the rehydration process, ' +
+            'a missing theme prop, and makes your application bigger without good reason.\n\n' +
+            'See https://s-c.sh/2BAXzed for more info.');
+    }
+    window['__styled-components-init__'] += 1;
+}
+
+export { ServerStyleSheet, StyleSheetConsumer, StyleSheetContext, StyleSheetManager, ThemeConsumer, ThemeContext, ThemeProvider, __PRIVATE__, createGlobalStyle, css, styled as default, isStyledComponent, keyframes, useTheme, SC_VERSION as version, withTheme };
 //# sourceMappingURL=styled-components.browser.esm.js.map