styled-components 6.0.0-alpha.4 → 6.0.0-alpha.7

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

@@ -1,2 +1,2 @@
-import{__spreadArray as e,__read as t,__values as n,__assign as o,__rest as r}from"tslib";import i from"@emotion/is-prop-valid";import s,{useRef as a,useState as c,useContext as l,useMemo as u,useEffect as p,createElement as d,useDebugValue as h,useLayoutEffect as f}from"react";import y from"shallowequal";import{prefixer as m,stringify as v,serialize as g,compile as S,middleware as w,RULESET as b}from"stylis";import E from"@emotion/unitless";var N="undefined"!=typeof process&&(process.env.REACT_APP_SC_ATTR||process.env.SC_ATTR)||"data-styled",_="6.0.0-alpha.4",C="undefined"!=typeof window&&"HTMLElement"in window,A=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),P={},I=/invalid hook call/i,O=new Set,D=function(n,o){if("production"!==process.env.NODE_ENV){var r=o?' with the id of "'.concat(o,'"'):"",i="The component ".concat(n).concat(r," 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 c=!0;console.error=function(n){for(var o=[],r=1;r<arguments.length;r++)o[r-1]=arguments[r];I.test(n)?(c=!1,O.delete(i)):s.apply(void 0,e([n],t(o),!1))},a(),c&&!O.has(i)&&(console.warn(i),O.add(i))}catch(e){I.test(e.message)&&O.delete(i)}finally{console.error=s}}},R=Object.freeze([]),j=Object.freeze({});function T(e,t,n){return void 0===n&&(n=j),e.theme!==n.theme&&e.theme||t||n.theme}var x=["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"],k=/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~-]+/g,V=/(^-|-$)/g;function $(e){return e.replace(k,"-").replace(V,"")}var B=/(a)(d)/gi,z=function(e){return String.fromCharCode(e+(e>25?39:97))};function M(e){var t,n="";for(t=Math.abs(e);t>52;t=t/52|0)n=z(t%52)+n;return(z(t%52)+n).replace(B,"$1-$2")}var F,G=function(e,t){for(var n=t.length;n;)e=33*e^t.charCodeAt(--n);return e},L=function(e){return G(5381,e)};function Y(e){return M(L(e)>>>0)}function q(e){return"production"!==process.env.NODE_ENV&&"string"==typeof e&&e||e.displayName||e.name||"Component"}function H(e){return"string"==typeof e&&("production"===process.env.NODE_ENV||e.charAt(0)===e.charAt(0).toLowerCase())}var W="function"==typeof Symbol&&Symbol.for,U=W?Symbol.for("react.memo"):60115,J=W?Symbol.for("react.forward_ref"):60112,X={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},Z={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},K={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},Q=((F={})[J]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},F[U]=K,F);function ee(e){return("type"in(t=e)&&t.type.$$typeof)===U?K:"$$typeof"in e?Q[e.$$typeof]:X;var t}var te=Object.defineProperty,ne=Object.getOwnPropertyNames,oe=Object.getOwnPropertySymbols,re=Object.getOwnPropertyDescriptor,ie=Object.getPrototypeOf,se=Object.prototype;function ae(e,t,n){if("string"!=typeof t){if(se){var o=ie(t);o&&o!==se&&ae(e,o,n)}var r=ne(t);oe&&(r=r.concat(oe(t)));for(var i=ee(e),s=ee(t),a=0;a<r.length;++a){var c=r[a];if(!(c in Z||n&&n[c]||s&&c in s||i&&c in i)){var l=re(t,c);try{te(e,c,l)}catch(e){}}}}return e}function ce(e){return"object"==typeof e&&"styledComponentId"in e}function le(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 ue(e,t,n){if(void 0===n&&(n=!1),!n&&!le(e)&&!Array.isArray(e))return t;if(Array.isArray(t))for(var o=0;o<t.length;o++)e[o]=ue(e[o],t[o]);else if(le(t))for(var o in t)e[o]=ue(e[o],t[o]);return e}var pe="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 de(){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 he(n){for(var o=[],r=1;r<arguments.length;r++)o[r-1]=arguments[r];return"production"===process.env.NODE_ENV?new Error("An error occurred. See https://git.io/JUIaE#".concat(n," for more information.").concat(o.length>0?" Args: ".concat(o.join(", ")):"")):new Error(de.apply(void 0,e([pe[n]],t(o),!1)).trim())}var fe=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 he(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}(),ye=new Map,me=new Map,ve=1,ge=function(e){if(ye.has(e))return ye.get(e);for(;me.has(ve);)ve++;var t=ve++;if("production"!==process.env.NODE_ENV&&((0|t)<0||t>1073741824))throw he(16,"".concat(t));return ye.set(e,t),me.set(t,e),t},Se=function(e,t){ye.set(e,t),me.set(t,e)},we="style[".concat(N,"][").concat("data-styled-version",'="').concat(_,'"]'),be=new RegExp("^".concat(N,'\\.g(\\d+)\\[id="([\\w\\d-]+)"\\].*?"([^"]*)')),Ee=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)},Ne=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(be);if(c){var l=0|parseInt(c[1],10),u=c[2];0!==l&&(Se(u,l),Ee(e,u,c[3]),e.getTag().insertRules(l,r)),r.length=0}else r.push(a)}}};function _e(){return"undefined"!=typeof __webpack_nonce__?__webpack_nonce__:null}var Ce=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(N))return o}}(n),i=void 0!==r?r.nextSibling:null;o.setAttribute(N,"active"),o.setAttribute("data-styled-version",_);var s=_e();return s&&o.setAttribute("nonce",s),n.insertBefore(o,i),o},Ae=function(){function e(e){var t=this.element=Ce(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 he(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}(),Pe=function(){function e(e){var t=this.element=Ce(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),o=this.nodes[e];return this.element.insertBefore(n,o||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}(),Ie=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}(),Oe=C,De={isServer:!C,useCSSOMInjection:!A},Re=function(){function e(e,t,n){void 0===e&&(e=j),void 0===t&&(t={}),this.options=o(o({},De),e),this.gs=t,this.names=new Map(n),this.server=!!e.isServer,!this.server&&C&&Oe&&(Oe=!1,function(e){for(var t=document.querySelectorAll(we),n=0,o=t.length;n<o;n++){var r=t[n];r&&"active"!==r.getAttribute(N)&&(Ne(e,r),r.parentNode&&r.parentNode.removeChild(r))}}(this))}return e.registerId=function(e){return ge(e)},e.prototype.reconstructWithOptions=function(t,n){return void 0===n&&(n=!0),new e(o(o({},this.options),t),this.gs,n&&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.isServer,n=e.useCSSOMInjection,o=e.target;return t?new Ie(o):n?new Ae(o):new Pe(o)}(this.options),new fe(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(ge(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(ge(e),n)},e.prototype.clearNames=function(e){this.names.has(e)&&this.names.get(e).clear()},e.prototype.clearRules=function(e){this.getTag().clearGroup(ge(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 me.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(N,".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}(),je=/^\s*\/\/.*$/gm,Te=[":","[",".","#"];function xe(e){var t,n,o,r,i=void 0===e?j:e,s=i.options,a=void 0===s?j:s,c=i.plugins,l=void 0===c?R:c,u=function(e,o,i){return 0===o&&Te.includes(i[n.length])||i.match(r)?e:".".concat(t)},p=function(e){if(e.type===b&&e.value.includes("&")){var t=e.props;t[0]=t[0].replace(o,u)}},d=function(e,i,s,c){void 0===i&&(i=""),void 0===s&&(s=""),void 0===c&&(c="&");var u=e.replace(je,"");t=c,n=i,o=new RegExp("\\".concat(n,"\\b"),"g"),r=new RegExp("(\\".concat(n,"\\b){2,}"));var d=l.slice();return(a.prefix||void 0===a.prefix)&&d.unshift(m),d.push(p,v),g(S(s||i?"".concat(s," ").concat(i," { ").concat(u," }"):u),w(d))};return d.hash=l.length?l.reduce((function(e,t){return t.name||he(15),G(e,t.name)}),5381).toString():"",d}var ke=s.createContext(void 0),Ve=ke.Consumer,$e=s.createContext(void 0);$e.Consumer;var Be=new Re,ze=xe();function Me(){return l(ke)||Be}function Fe(){return l($e)||ze}function Ge(e){var n=t(c(e.stylisPlugins),2),o=n[0],r=n[1],i=Me(),a=u((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=u((function(){return xe({options:{prefix:!e.disableVendorPrefixes},plugins:o})}),[e.disableVendorPrefixes,o]);return p((function(){y(o,e.stylisPlugins)||r(e.stylisPlugins)}),[e.stylisPlugins]),s.createElement(ke.Provider,{value:a},s.createElement($e.Provider,{value:l},"production"!==process.env.NODE_ENV?s.Children.only(e.children):e.children))}var Le=function(){function e(e,t){var n=this;this.inject=function(e,t){void 0===t&&(t=ze);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 he(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=ze),this.name+e.hash},e}(),Ye=/([A-Z])/,qe=/([A-Z])/g,He=/^ms-/,We=function(e){return"-".concat(e.toLowerCase())};function Ue(e){return Ye.test(e)?e.replace(qe,We).replace(He,"-ms-"):e}function Je(e){return"function"==typeof e}var Xe=function(e){return null==e||!1===e||""===e},Ze=function(n,o){var r,i,s=[];for(var a in n)n.hasOwnProperty(a)&&!Xe(n[a])&&(Array.isArray(n[a])&&n[a].isCss||Je(n[a])?s.push("".concat(Ue(a),":"),n[a],";"):le(n[a])?s.push.apply(s,e([],t(Ze(n[a],a)),!1)):s.push("".concat(Ue(a),": ").concat((r=a,null==(i=n[a])||"boolean"==typeof i||""===i?"":"number"!=typeof i||0===i||r in E?String(i).trim():"".concat(i,"px")),";")));return o?e(e(["".concat(o," {")],t(s),!1),["}"],!1):s};function Ke(n,o,r,i){if(Array.isArray(n)){for(var s=[],a=0,c=n.length,l=void 0;a<c;a+=1)""!==(l=Ke(n[a],o,r,i))&&(Array.isArray(l)?s.push.apply(s,e([],t(l),!1)):s.push(l));return s}if(Xe(n))return"";if(ce(n))return".".concat(n.styledComponentId);if(Je(n)){if("function"!=typeof(p=n)||p.prototype&&p.prototype.isReactComponent||!o)return n;var u=n;return l=u(o),"production"===process.env.NODE_ENV||"object"!=typeof l||Array.isArray(l)||l instanceof Le||le(l)||console.error("".concat(q(u)," 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.")),Ke(l,o,r,i)}var p;return n instanceof Le?r?(n.inject(r,i),n.getName(i)):n:le(n)?Ze(n):n.toString()}function Qe(e){for(var t=0;t<e.length;t+=1){var n=e[t];if(Je(n)&&!ce(n))return!1}return!0}var et=L(_),tt=function(){function e(e,t,n){this.rules=e,this.staticRulesId="",this.isStatic="production"===process.env.NODE_ENV&&(void 0===n||n.isStatic)&&Qe(e),this.componentId=t,this.baseHash=G(et,t),this.baseStyle=n,Re.registerId(t)}return e.prototype.generateAndInjectStyles=function(e,t,n){var o=this.componentId,r=[];if(this.baseStyle&&r.push(this.baseStyle.generateAndInjectStyles(e,t,n)),this.isStatic&&!n.hash)if(this.staticRulesId&&t.hasNameForId(o,this.staticRulesId))r.push(this.staticRulesId);else{var i=Ke(this.rules,e,t,n).join(""),s=M(G(this.baseHash,i)>>>0);if(!t.hasNameForId(o,s)){var a=n(i,".".concat(s),void 0,o);t.insertRules(o,s,a)}r.push(s),this.staticRulesId=s}else{for(var c=this.rules.length,l=G(this.baseHash,n.hash),u="",p=0;p<c;p++){var d=this.rules[p];if("string"==typeof d)u+=d,"production"!==process.env.NODE_ENV&&(l=G(l,d+p));else if(d){var h=Ke(d,e,t,n),f=Array.isArray(h)?h.join(""):h;l=G(l,f+p),u+=f}}if(u){var y=M(l>>>0);if(!t.hasNameForId(o,y)){var m=n(u,".".concat(y),void 0,o);t.insertRules(o,y,m)}r.push(y)}}return r.join(" ")},e}(),nt=s.createContext(void 0),ot=nt.Consumer;function rt(e){var t=l(nt),n=u((function(){return function(e,t){if(!e)throw he(14);if(Je(e)){var n=e(t);if("production"!==process.env.NODE_ENV&&(null===n||Array.isArray(n)||"object"!=typeof n))throw he(7);return n}if(Array.isArray(e)||"object"!=typeof e)throw he(8);return t?o(o({},t),e):e}(e.theme,t)}),[e.theme,t]);return e.children?s.createElement(nt.Provider,{value:n},e.children):null}var it={};function st(e,a,c){var u=ce(e),p=e,f=!H(e),y=a.attrs,m=void 0===y?R:y,v=a.componentId,g=void 0===v?function(e,t){var n="string"!=typeof e?"sc":$(e);it[n]=(it[n]||0)+1;var o="".concat(n,"-").concat(Y(_+n+it[n]));return t?"".concat(t,"-").concat(o):o}(a.displayName,a.parentComponentId):v,S=a.displayName,w=void 0===S?function(e){return H(e)?"styled.".concat(e):"Styled(".concat(q(e),")")}(e):S,b=a.displayName&&a.componentId?"".concat($(a.displayName),"-").concat(a.componentId):a.componentId||g,E=u&&p.attrs?p.attrs.concat(m).filter(Boolean):m,N=a.shouldForwardProp;if(u&&p.shouldForwardProp){var C=p.shouldForwardProp;if(a.shouldForwardProp){var A=a.shouldForwardProp;N=function(e,t,n){return C(e,t,n)&&A(e,t,n)}}else N=C}var P=new tt(c,b,u?p.componentStyle:void 0),I=P.isStatic&&0===m.length;function O(e,n){return function(e,n,r,s){var a=e.attrs,c=e.componentStyle,u=e.defaultProps,p=e.foldedComponentIds,f=e.shouldForwardProp,y=e.styledComponentId,m=e.target;"production"!==process.env.NODE_ENV&&h(y);var v=T(n,l(nt),u),g=t(function(e,t,n){void 0===e&&(e=j);var r=o(o({},t),{theme:e}),i={};return n.forEach((function(e){var t,n,o,s="function"==typeof e?e(r):e;for(t in s)r[t]=i[t]="className"===t?(n=i[t],o=s[t],n&&o?"".concat(n," ").concat(o):n||o):s[t]})),[r,i]}(v||j,n,a),2),S=g[0],w=g[1],b=function(e,t,n,o){var r=Me(),i=Fe(),s=t?e.generateAndInjectStyles(j,r,i):e.generateAndInjectStyles(n,r,i);return"production"!==process.env.NODE_ENV&&h(s),"production"!==process.env.NODE_ENV&&!t&&o&&o(s),s}(c,s,S,"production"!==process.env.NODE_ENV?e.warnTooManyClasses:void 0),E=r,N=w.$as||n.$as||w.as||n.as||m,_=H(N),C=w!==n?o(o({},n),w):n,A={};for(var P in C)"$"!==P[0]&&"as"!==P&&("forwardedAs"===P?A.as=C[P]:(f?f(P,i,N):!_||i(P))&&(A[P]=C[P]));return n.style&&w.style!==n.style&&(A.style=o(o({},n.style),w.style)),A[_&&-1===x.indexOf(N)?"class":"className"]=p.concat(y,b!==y?b:null,n.className,w.className).filter(Boolean).join(" "),A.ref=E,d(N,A)}(k,e,n,I)}O.displayName=w;var k=s.forwardRef(O);return k.attrs=E,k.componentStyle=P,k.displayName=w,k.shouldForwardProp=N,k.foldedComponentIds=u?p.foldedComponentIds.concat(p.styledComponentId):R,k.styledComponentId=b,k.target=u?p.target:e,k.withComponent=function(e){var t=a.componentId,n=r(a,["componentId"]),i=t&&"".concat(t,"-").concat(H(e)?e:$(q(e)));return st(e,o(o({},n),{attrs:E,componentId:i}),c)},Object.defineProperty(k,"defaultProps",{get:function(){return this._foldedDefaultProps},set:function(e){this._foldedDefaultProps=u?function(e){var t,o;void 0===e&&(e={});for(var r=[],i=1;i<arguments.length;i++)r[i-1]=arguments[i];try{for(var s=n(r),a=s.next();!a.done;a=s.next())ue(e,a.value,!0)}catch(e){t={error:e}}finally{try{a&&!a.done&&(o=s.return)&&o.call(s)}finally{if(t)throw t.error}}return e}({},p.defaultProps,e):e}}),"production"!==process.env.NODE_ENV&&(D(w,b),k.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={}}}}(w,b)),k.toString=function(){return".".concat(k.styledComponentId)},f&&ae(k,e,{attrs:!0,componentStyle:!0,displayName:!0,foldedComponentIds:!0,shouldForwardProp:!0,styledComponentId:!0,target:!0,withComponent:!0}),k}function at(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 ct=function(e){return Array.isArray(e)&&(e.isCss=!0),e};function lt(n){for(var o=[],r=1;r<arguments.length;r++)o[r-1]=arguments[r];if(Je(n)||le(n)){var i=n;return ct(Ke(at(R,e([i],t(o),!1))))}var s=n;return 0===o.length&&1===s.length&&"string"==typeof s[0]?s:ct(Ke(at(s,o)))}function ut(n,r,i){if(void 0===i&&(i=j),!r)throw he(1,r);var s=function(o){for(var s=[],a=1;a<arguments.length;a++)s[a-1]=arguments[a];return n(r,i,lt.apply(void 0,e([o],t(s),!1)))};return s.attrs=function(e){return ut(n,r,o(o({},i),{attrs:Array.prototype.concat(i.attrs,e).filter(Boolean)}))},s.withConfig=function(e){return ut(n,r,o(o({},i),e))},s}var pt=function(e){return ut(st,e)},dt=pt;x.forEach((function(e){dt[e]=pt(e)}));var ht=function(){function e(e,t){this.rules=e,this.componentId=t,this.isStatic=Qe(e),Re.registerId(this.componentId+1)}return e.prototype.createStyles=function(e,t,n,o){var r=o(Ke(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&&Re.registerId(this.componentId+e),this.removeStyles(e,n),this.createStyles(e,t,n,o)},e}();function ft(n){for(var r=[],i=1;i<arguments.length;i++)r[i-1]=arguments[i];var c=lt.apply(void 0,e([n],t(r),!1)),u="sc-global-".concat(Y(JSON.stringify(c))),p=new ht(c,u);"production"!==process.env.NODE_ENV&&D(u);var d=function(e){var t=Me(),n=Fe(),o=l(nt),r=a(t.allocateGSInstance(u)).current;return"production"!==process.env.NODE_ENV&&s.Children.count(e.children)&&console.warn("The global style component ".concat(u," was given child JSX. createGlobalStyle does not render children.")),"production"!==process.env.NODE_ENV&&c.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&&h(r,e,t,o,n),f((function(){if(!t.server)return h(r,e,t,o,n),function(){return p.removeStyles(r,t)}}),[r,e,t,o,n]),null};function h(e,t,n,r,i){if(p.isStatic)p.renderStyles(e,P,n,i);else{var s=o(o({},t),{theme:T(t,r,d.defaultProps)});p.renderStyles(e,s,n,i)}}return s.memo(d)}function yt(n){for(var o=[],r=1;r<arguments.length;r++)o[r-1]=arguments[r];"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 i=lt.apply(void 0,e([n],t(o),!1)).join(""),s=Y(i);return new Le(s,i)}function mt(e){var t=s.forwardRef((function(t,n){var r=T(t,s.useContext(nt),e.defaultProps);return"production"!==process.env.NODE_ENV&&void 0===r&&console.warn('[withTheme] You are not using a ThemeProvider nor passing a theme prop or a theme in defaultProps in component class "'.concat(q(e),'"')),s.createElement(e,o({},t,{theme:r,ref:n}))}));return t.displayName="WithTheme(".concat(q(e),")"),ae(t,e)}var vt=function(){return l(nt)},gt=function(){function e(){var e=this;this._emitSheetCSS=function(){var t=e.instance.toString(),n=_e(),o=[n&&'nonce="'.concat(n,'"'),"".concat(N,'="true"'),"".concat("data-styled-version",'="').concat(_,'"')].filter(Boolean).join(" ");return"<style ".concat(o,">").concat(t,"</style>")},this.getStyleTags=function(){if(e.sealed)throw he(2);return e._emitSheetCSS()},this.getStyleElement=function(){var t;if(e.sealed)throw he(2);var n=((t={})[N]="",t["data-styled-version"]=_,t.dangerouslySetInnerHTML={__html:e.instance.toString()},t),r=_e();return r&&(n.nonce=r),[s.createElement("style",o({},n,{key:"sc-0-0"}))]},this.seal=function(){e.sealed=!0},this.instance=new Re({isServer:!0}),this.sealed=!1}return e.prototype.collectStyles=function(e){if(this.sealed)throw he(2);return s.createElement(Ge,{sheet:this.instance},e)},e.prototype.interleaveWithNodeStream=function(e){throw he(3)},e}(),St={StyleSheet:Re,mainSheet:Be};"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{gt as ServerStyleSheet,Ve as StyleSheetConsumer,ke as StyleSheetContext,Ge as StyleSheetManager,ot as ThemeConsumer,nt as ThemeContext,rt as ThemeProvider,St as __PRIVATE__,ft as createGlobalStyle,lt as css,dt as default,ce as isStyledComponent,yt as keyframes,vt as useTheme,_ as version,mt as withTheme};
+import e from"@emotion/is-prop-valid";import t,{useRef as n,useState as o,useContext as s,useMemo as r,useEffect as i,createElement as a,useDebugValue as c}from"react";import l from"shallowequal";import{prefixer as u,stringify as d,serialize as h,compile as p,middleware as m,RULESET as f}from"stylis";import y from"@emotion/unitless";const g="undefined"!=typeof process&&(process.env.REACT_APP_SC_ATTR||process.env.SC_ATTR)||"data-styled",S="6.0.0-alpha.7",v="undefined"!=typeof window&&"HTMLElement"in window,w=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),b={},E=/invalid hook call/i,N=new Set,_=(e,t)=>{if("production"!==process.env.NODE_ENV){const o=`The component ${e}${t?` with the id of "${t}"`:""} has been created dynamically.\nYou may see this warning because you've called styled inside another component.\nTo resolve this only create new StyledComponents outside of any render method and function component.`,s=console.error;try{let e=!0;console.error=(t,...n)=>{E.test(t)?(e=!1,N.delete(o)):s(t,...n)},n(),e&&!N.has(o)&&(console.warn(o),N.add(o))}catch(e){E.test(e.message)&&N.delete(o)}finally{console.error=s}}},$=Object.freeze([]),C=Object.freeze({});function A(e,t,n=C){return e.theme!==n.theme&&e.theme||t||n.theme}var P=["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"];const I=/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~-]+/g,O=/(^-|-$)/g;function R(e){return e.replace(I,"-").replace(O,"")}const D=/(a)(d)/gi,j=e=>String.fromCharCode(e+(e>25?39:97));function T(e){let t,n="";for(t=Math.abs(e);t>52;t=t/52|0)n=j(t%52)+n;return(j(t%52)+n).replace(D,"$1-$2")}const x=(e,t)=>{let n=t.length;for(;n;)e=33*e^t.charCodeAt(--n);return e},k=e=>x(5381,e);function V(e){return T(k(e)>>>0)}function z(e){return"production"!==process.env.NODE_ENV&&"string"==typeof e&&e||e.displayName||e.name||"Component"}function B(e){return"string"==typeof e&&("production"===process.env.NODE_ENV||e.charAt(0)===e.charAt(0).toLowerCase())}function M(e){return B(e)?`styled.${e}`:`Styled(${z(e)})`}const L="function"==typeof Symbol&&Symbol.for,F=L?Symbol.for("react.memo"):60115,G=L?Symbol.for("react.forward_ref"):60112,Y={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},H={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},q={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},W={[G]:{$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},[F]:q};function U(e){return("type"in(t=e)&&t.type.$$typeof)===F?q:"$$typeof"in e?W[e.$$typeof]:Y;var t}const J=Object.defineProperty,X=Object.getOwnPropertyNames,Z=Object.getOwnPropertySymbols,K=Object.getOwnPropertyDescriptor,Q=Object.getPrototypeOf,ee=Object.prototype;function te(e,t,n){if("string"!=typeof t){if(ee){const o=Q(t);o&&o!==ee&&te(e,o,n)}let o=X(t);Z&&(o=o.concat(Z(t)));const s=U(e),r=U(t);for(let i=0;i<o.length;++i){const a=o[i];if(!(a in H||n&&n[a]||r&&a in r||s&&a in s)){const n=K(t,a);try{J(e,a,n)}catch(e){}}}}return e}function ne(e){return"object"==typeof e&&"styledComponentId"in e}function oe(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=!1){if(!n&&!oe(e)&&!Array.isArray(e))return t;if(Array.isArray(t))for(let n=0;n<t.length;n++)e[n]=se(e[n],t[n]);else if(oe(t))for(const n in t)e[n]=se(e[n],t[n]);return e}const re="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 ie(e,...t){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#${e} for more information.${t.length>0?` Args: ${t.join(", ")}`:""}`):new Error(function(...e){let t=e[0];const n=[];for(let t=1,o=e.length;t<o;t+=1)n.push(e[t]);return n.forEach((e=>{t=t.replace(/%[a-z]/,e)})),t}(re[e],...t).trim())}let ae=new Map,ce=new Map,le=1;const ue=e=>{if(ae.has(e))return ae.get(e);for(;ce.has(le);)le++;const t=le++;if("production"!==process.env.NODE_ENV&&((0|t)<0||t>1073741824))throw ie(16,`${t}`);return ae.set(e,t),ce.set(t,e),t},de=e=>ce.get(e),he=(e,t)=>{ae.set(e,t),ce.set(t,e)},pe=`style[${g}][data-styled-version="6.0.0-alpha.7"]`,me=new RegExp(`^${g}\\.g(\\d+)\\[id="([\\w\\d-]+)"\\].*?"([^"]*)`),fe=(e,t,n)=>{const o=n.split(",");let s;for(let n=0,r=o.length;n<r;n++)(s=o[n])&&e.registerName(t,s)},ye=(e,t)=>{const n=(t.textContent??"").split("/*!sc*/\n"),o=[];for(let t=0,s=n.length;t<s;t++){const s=n[t].trim();if(!s)continue;const r=s.match(me);if(r){const t=0|parseInt(r[1],10),n=r[2];0!==t&&(he(n,t),fe(e,n,r[3]),e.getTag().insertRules(t,o)),o.length=0}else o.push(s)}};function ge(){return"undefined"!=typeof __webpack_nonce__?__webpack_nonce__:null}const Se=e=>{const t=document.head,n=e||t,o=document.createElement("style"),s=(e=>{const{childNodes:t}=e;for(let e=t.length;e>=0;e--){const n=t[e];if(n&&1===n.nodeType&&n.hasAttribute(g))return n}})(n),r=void 0!==s?s.nextSibling:null;o.setAttribute(g,"active"),o.setAttribute("data-styled-version","6.0.0-alpha.7");const i=ge();return i&&o.setAttribute("nonce",i),n.insertBefore(o,r),o};let ve=v;const we={isServer:!v,useCSSOMInjection:!w};class be{gs;names;options;server;tag;static registerId(e){return ue(e)}constructor(e=C,t={},n){this.options={...we,...e},this.gs=t,this.names=new Map(n),this.server=!!e.isServer,!this.server&&v&&ve&&(ve=!1,(e=>{const t=document.querySelectorAll(pe);for(let n=0,o=t.length;n<o;n++){const o=t[n];o&&"active"!==o.getAttribute(g)&&(ye(e,o),o.parentNode&&o.parentNode.removeChild(o))}})(this))}reconstructWithOptions(e,t=!0){return new be({...this.options,...e},this.gs,t&&this.names||void 0)}allocateGSInstance(e){return this.gs[e]=(this.gs[e]||0)+1}getTag(){return this.tag||(this.tag=(e=(({isServer:e,useCSSOMInjection:t,target:n})=>e?new class{rules;length;constructor(e){this.rules=[],this.length=0}insertRule(e,t){return e<=this.length&&(this.rules.splice(e,0,t),this.length++,!0)}deleteRule(e){this.rules.splice(e,1),this.length--}getRule(e){return e<this.length?this.rules[e]:""}}(n):t?new class{element;sheet;length;constructor(e){const t=this.element=Se(e);t.appendChild(document.createTextNode("")),this.sheet=(e=>{if(e.sheet)return e.sheet;const{styleSheets:t}=document;for(let n=0,o=t.length;n<o;n++){const o=t[n];if(o.ownerNode===e)return o}throw ie(17)})(t),this.length=0}insertRule(e,t){try{return this.sheet.insertRule(t,e),this.length++,!0}catch(e){return!1}}deleteRule(e){this.sheet.deleteRule(e),this.length--}getRule(e){const t=this.sheet.cssRules[e];return void 0!==t&&"string"==typeof t.cssText?t.cssText:""}}(n):new class{element;nodes;length;constructor(e){const t=this.element=Se(e);this.nodes=t.childNodes,this.length=0}insertRule(e,t){if(e<=this.length&&e>=0){const n=document.createTextNode(t),o=this.nodes[e];return this.element.insertBefore(n,o||null),this.length++,!0}return!1}deleteRule(e){this.element.removeChild(this.nodes[e]),this.length--}getRule(e){return e<this.length?this.nodes[e].textContent:""}}(n))(this.options),new class{groupSizes;length;tag;constructor(e){this.groupSizes=new Uint32Array(512),this.length=512,this.tag=e}indexOfGroup(e){let t=0;for(let n=0;n<e;n++)t+=this.groupSizes[n];return t}insertRules(e,t){if(e>=this.groupSizes.length){const t=this.groupSizes,n=t.length;let o=n;for(;e>=o;)if(o<<=1,o<0)throw ie(16,`${e}`);this.groupSizes=new Uint32Array(o),this.groupSizes.set(t),this.length=o;for(let e=n;e<o;e++)this.groupSizes[e]=0}let n=this.indexOfGroup(e+1);if(Array.isArray(t))for(let o=0,s=t.length;o<s;o++)this.tag.insertRule(n,t[o])&&(this.groupSizes[e]++,n++);else this.tag.insertRule(n,t)&&this.groupSizes[e]++}clearGroup(e){if(e<this.length){const t=this.groupSizes[e],n=this.indexOfGroup(e),o=n+t;this.groupSizes[e]=0;for(let e=n;e<o;e++)this.tag.deleteRule(n)}}getGroup(e){let t="";if(e>=this.length||0===this.groupSizes[e])return t;const n=this.groupSizes[e],o=this.indexOfGroup(e),s=o+n;for(let e=o;e<s;e++)t+=`${this.tag.getRule(e)}/*!sc*/\n`;return t}}(e)));var e}hasNameForId(e,t){return this.names.has(e)&&this.names.get(e).has(t)}registerName(e,t){if(ue(e),this.names.has(e))this.names.get(e).add(t);else{const n=new Set;n.add(t),this.names.set(e,n)}}insertRules(e,t,n){this.registerName(e,t),this.getTag().insertRules(ue(e),n)}clearNames(e){this.names.has(e)&&this.names.get(e).clear()}clearRules(e){this.getTag().clearGroup(ue(e)),this.clearNames(e)}clearTag(){this.tag=void 0}toString(){return(e=>{const t=e.getTag(),{length:n}=t;let o="";for(let s=0;s<n;s++){const n=de(s);if(void 0===n)continue;const r=e.names.get(n),i=t.getGroup(s);if(void 0===r||0===i.length)continue;const a=`${g}.g${s}[id="${n}"]`;let c="";void 0!==r&&r.forEach((e=>{e.length>0&&(c+=`${e},`)})),o+=`${i}${a}{content:"${c}"}/*!sc*/\n`}return o})(this)}}const Ee=/^\s*\/\/.*$/gm,Ne=[":","[",".","#"];function _e({options:e=C,plugins:t=$}=C){let n,o,s,r;const i=(e,t,s)=>0===t&&Ne.includes(s[o.length])||s.match(r)?e:`.${n}`,a=e=>{if(e.type===f&&e.value.includes("&")){const t=e.props;t[0]=t[0].replace(s,i)}},c=(i,c="",l="",f="&")=>{let y=i.replace(Ee,"");n=f,o=c,s=new RegExp(`\\${o}\\b`,"g"),r=new RegExp(`(\\${o}\\b){2,}`);const g=t.slice();return(e.prefix||void 0===e.prefix)&&g.unshift(u),g.push(a,d),h(p(l||c?`${l} ${c} { ${y} }`:y),m(g))};return c.hash=t.length?t.reduce(((e,t)=>(t.name||ie(15),x(e,t.name))),5381).toString():"",c}const $e=t.createContext(void 0),Ce=$e.Consumer,Ae=t.createContext(void 0);Ae.Consumer;const Pe=new be,Ie=_e();function Oe(){return s($e)||Pe}function Re(){return s(Ae)||Ie}function De(e){const[n,s]=o(e.stylisPlugins),a=Oe(),c=r((()=>{let t=a;return e.sheet?t=e.sheet:e.target&&(t=t.reconstructWithOptions({target:e.target},!1)),e.disableCSSOMInjection&&(t=t.reconstructWithOptions({useCSSOMInjection:!1})),t}),[e.disableCSSOMInjection,e.sheet,e.target]),u=r((()=>_e({options:{prefix:!e.disableVendorPrefixes},plugins:n})),[e.disableVendorPrefixes,n]);return i((()=>{l(n,e.stylisPlugins)||s(e.stylisPlugins)}),[e.stylisPlugins]),t.createElement($e.Provider,{value:c},t.createElement(Ae.Provider,{value:u},"production"!==process.env.NODE_ENV?t.Children.only(e.children):e.children))}class je{id;name;rules;constructor(e,t){this.name=e,this.id=`sc-keyframes-${e}`,this.rules=t}inject=(e,t=Ie)=>{const n=this.name+t.hash;e.hasNameForId(this.id,n)||e.insertRules(this.id,n,t(this.rules,n,"@keyframes"))};toString=()=>{throw ie(12,String(this.name))};getName(e=Ie){return this.name+e.hash}}const Te=/([A-Z])/,xe=/([A-Z])/g,ke=/^ms-/,Ve=e=>`-${e.toLowerCase()}`;function ze(e){return Te.test(e)?e.replace(xe,Ve).replace(ke,"-ms-"):e}function Be(e){return"function"==typeof e}const Me=e=>null==e||!1===e||""===e,Le=(e,t)=>{const n=[];for(const t in e)e.hasOwnProperty(t)&&!Me(e[t])&&(Array.isArray(e[t])&&e[t].isCss||Be(e[t])?n.push(`${ze(t)}:`,e[t],";"):oe(e[t])?n.push(...Le(e[t],t)):n.push(`${ze(t)}: ${o=t,s=e[t],null==s||"boolean"==typeof s||""===s?"":"number"!=typeof s||0===s||o in y?String(s).trim():`${s}px`};`));var o,s;return t?[`${t} {`,...n,"}"]:n};function Fe(e,t,n,o){if(Array.isArray(e)){const s=[];for(let r,i=0,a=e.length;i<a;i+=1)r=Fe(e[i],t,n,o),""!==r&&(Array.isArray(r)?s.push(...r):s.push(r));return s}if(Me(e))return"";if(ne(e))return`.${e.styledComponentId}`;if(Be(e)){if("function"!=typeof(s=e)||s.prototype&&s.prototype.isReactComponent||!t)return e;{const s=e,r=s(t);return"production"===process.env.NODE_ENV||"object"!=typeof r||Array.isArray(r)||r instanceof je||oe(r)||console.error(`${z(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.`),Fe(r,t,n,o)}}var s;return e instanceof je?n?(e.inject(n,o),e.getName(o)):e:oe(e)?Le(e):e.toString()}function Ge(e){for(let t=0;t<e.length;t+=1){const n=e[t];if(Be(n)&&!ne(n))return!1}return!0}const Ye=k("6.0.0-alpha.7");class He{baseHash;baseStyle;componentId;isStatic;rules;staticRulesId;constructor(e,t,n){this.rules=e,this.staticRulesId="",this.isStatic="production"===process.env.NODE_ENV&&(void 0===n||n.isStatic)&&Ge(e),this.componentId=t,this.baseHash=x(Ye,t),this.baseStyle=n,be.registerId(t)}generateAndInjectStyles(e,t,n){const{componentId:o}=this,s=[];if(this.baseStyle&&s.push(this.baseStyle.generateAndInjectStyles(e,t,n)),this.isStatic&&!n.hash)if(this.staticRulesId&&t.hasNameForId(o,this.staticRulesId))s.push(this.staticRulesId);else{const r=Fe(this.rules,e,t,n).join(""),i=T(x(this.baseHash,r)>>>0);if(!t.hasNameForId(o,i)){const e=n(r,`.${i}`,void 0,o);t.insertRules(o,i,e)}s.push(i),this.staticRulesId=i}else{const{length:r}=this.rules;let i=x(this.baseHash,n.hash),a="";for(let o=0;o<r;o++){const s=this.rules[o];if("string"==typeof s)a+=s,"production"!==process.env.NODE_ENV&&(i=x(i,s+o));else if(s){const r=Fe(s,e,t,n),c=Array.isArray(r)?r.join(""):r;i=x(i,c+o),a+=c}}if(a){const e=T(i>>>0);if(!t.hasNameForId(o,e)){const s=n(a,`.${e}`,void 0,o);t.insertRules(o,e,s)}s.push(e)}}return s.join(" ")}}const qe=t.createContext(void 0),We=qe.Consumer;function Ue(e){const n=s(qe),o=r((()=>function(e,t){if(!e)throw ie(14);if(Be(e)){const n=e(t);if("production"!==process.env.NODE_ENV&&(null===n||Array.isArray(n)||"object"!=typeof n))throw ie(7);return n}if(Array.isArray(e)||"object"!=typeof e)throw ie(8);return t?{...t,...e}:e}(e.theme,n)),[e.theme,n]);return e.children?t.createElement(qe.Provider,{value:o},e.children):null}const Je={};function Xe(e,t){const n="string"!=typeof e?"sc":R(e);Je[n]=(Je[n]||0)+1;const o=`${n}-${V("6.0.0-alpha.7"+n+Je[n])}`;return t?`${t}-${o}`:o}function Ze(n,o,r){const i=ne(n),l=n,u=!B(n),{attrs:d=$,componentId:h=Xe(o.displayName,o.parentComponentId),displayName:p=M(n)}=o,m=o.displayName&&o.componentId?`${R(o.displayName)}-${o.componentId}`:o.componentId||h,f=i&&l.attrs?l.attrs.concat(d).filter(Boolean):d;let{shouldForwardProp:y}=o;if(i&&l.shouldForwardProp){const e=l.shouldForwardProp;if(o.shouldForwardProp){const t=o.shouldForwardProp;y=(n,o,s)=>e(n,o,s)&&t(n,o,s)}else y=e}const g=new He(r,m,i?l.componentStyle:void 0),S=g.isStatic&&0===d.length;function v(t,n){return function(t,n,o,r){const{attrs:i,componentStyle:l,defaultProps:u,foldedComponentIds:d,shouldForwardProp:h,styledComponentId:p,target:m}=t;"production"!==process.env.NODE_ENV&&c(p);const f=A(n,s(qe),u),[y,g]=function(e=C,t,n){const o={...t,theme:e},s={};return n.forEach((e=>{const t="function"==typeof e?e(o):e;let n;for(n in t)o[n]=s[n]="className"===n?(r=s[n],i=t[n],r&&i?`${r} ${i}`:r||i):t[n];var r,i})),[o,s]}(f||C,n,i),S=function(e,t,n,o){const s=Oe(),r=Re(),i=t?e.generateAndInjectStyles(C,s,r):e.generateAndInjectStyles(n,s,r);return"production"!==process.env.NODE_ENV&&c(i),"production"!==process.env.NODE_ENV&&!t&&o&&o(i),i}(l,r,y,"production"!==process.env.NODE_ENV?t.warnTooManyClasses:void 0),v=o,w=g.$as||n.$as||g.as||n.as||m,b=B(w),E=g!==n?{...n,...g}:n,N={};for(const t in E)"$"!==t[0]&&"as"!==t&&("forwardedAs"===t?N.as=E[t]:(h?h(t,e,w):!b||e(t))&&(N[t]=E[t]));return n.style&&g.style!==n.style&&(N.style={...n.style,...g.style}),N[b&&-1===P.indexOf(w)?"class":"className"]=d.concat(p,S!==p?S:null,n.className,g.className).filter(Boolean).join(" "),N.ref=v,a(w,N)}(w,t,n,S)}v.displayName=p;let w=t.forwardRef(v);return w.attrs=f,w.componentStyle=g,w.displayName=p,w.shouldForwardProp=y,w.foldedComponentIds=i?l.foldedComponentIds.concat(l.styledComponentId):$,w.styledComponentId=m,w.target=i?l.target:n,w.withComponent=function(e){const{componentId:t,...n}=o,s=t&&`${t}-${B(e)?e:R(z(e))}`;return Ze(e,{...n,attrs:f,componentId:s},r)},Object.defineProperty(w,"defaultProps",{get(){return this._foldedDefaultProps},set(e){this._foldedDefaultProps=i?function(e={},...t){for(const n of t)se(e,n,!0);return e}({},l.defaultProps,e):e}}),"production"!==process.env.NODE_ENV&&(_(p,m),w.warnTooManyClasses=((e,t)=>{let n={},o=!1;return s=>{if(!o&&(n[s]=!0,Object.keys(n).length>=200)){const s=t?` with the id of "${t}"`:"";console.warn(`Over 200 classes were generated for component ${e}${s}.\nConsider using the attrs method, together with a style object for frequently changed styles.\nExample:\n  const Component = styled.div.attrs(props => ({\n    style: {\n      background: props.background,\n    },\n  }))\`width: 100%;\`\n\n  <Component />`),o=!0,n={}}}})(p,m)),w.toString=()=>`.${w.styledComponentId}`,u&&te(w,n,{attrs:!0,componentStyle:!0,displayName:!0,foldedComponentIds:!0,shouldForwardProp:!0,styledComponentId:!0,target:!0,withComponent:!0}),w}function Ke(e,t){const n=[e[0]];for(let o=0,s=t.length;o<s;o+=1)n.push(t[o],e[o+1]);return n}const Qe=e=>(Array.isArray(e)&&(e.isCss=!0),e);function et(e,...t){if(Be(e)||oe(e))return Qe(Fe(Ke($,[e,...t])));const n=e;return 0===t.length&&1===n.length&&"string"==typeof n[0]?n:Qe(Fe(Ke(n,t)))}function tt(e,t,n=C){if(!t)throw ie(1,t);const o=(o,...s)=>e(t,n,et(o,...s));return o.attrs=o=>tt(e,t,{...n,attrs:Array.prototype.concat(n.attrs,o).filter(Boolean)}),o.withConfig=o=>tt(e,t,{...n,...o}),o}const nt=e=>tt(Ze,e),ot=nt;P.forEach((e=>{ot[e]=nt(e)}));class st{componentId;isStatic;rules;constructor(e,t){this.rules=e,this.componentId=t,this.isStatic=Ge(e),be.registerId(this.componentId+1)}createStyles(e,t,n,o){const s=o(Fe(this.rules,t,n,o).join(""),""),r=this.componentId+e;n.insertRules(r,r,s)}removeStyles(e,t){t.clearRules(this.componentId+e)}renderStyles(e,t,n,o){e>2&&be.registerId(this.componentId+e),this.removeStyles(e,n),this.createStyles(e,t,n,o)}}function rt(e,...n){const o=et(e,...n),s=`sc-global-${V(JSON.stringify(o))}`,r=new st(o,s);"production"!==process.env.NODE_ENV&&_(s);const i=e=>{const n=Oe(),i=Re(),c=t.useContext(qe),l=t.useRef(n.allocateGSInstance(s)).current;return"production"!==process.env.NODE_ENV&&t.Children.count(e.children)&&console.warn(`The global style component ${s} was given child JSX. createGlobalStyle does not render children.`),"production"!==process.env.NODE_ENV&&o.some((e=>"string"==typeof e&&-1!==e.indexOf("@import")))&&console.warn("Please do not use @import CSS syntax in createGlobalStyle at this time, as the CSSOM APIs we use in production do not handle it well. Instead, we recommend using a library such as react-helmet to inject a typical <link> meta tag to the stylesheet, or simply embedding it manually in your index.html <head> section for a simpler app."),n.server&&a(l,e,n,c,i),(t.useInsertionEffect||t.useLayoutEffect)((()=>{if(!n.server)return a(l,e,n,c,i),()=>r.removeStyles(l,n)}),[l,e,n,c,i]),null};function a(e,t,n,o,s){if(r.isStatic)r.renderStyles(e,b,n,s);else{const a={...t,theme:A(t,o,i.defaultProps)};r.renderStyles(e,a,n,s)}}return t.memo(i)}function it(e,...t){"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.");const n=et(e,...t).join(""),o=V(n);return new je(o,n)}function at(e){const n=t.forwardRef(((n,o)=>{const s=A(n,t.useContext(qe),e.defaultProps);return"production"!==process.env.NODE_ENV&&void 0===s&&console.warn(`[withTheme] You are not using a ThemeProvider nor passing a theme prop or a theme in defaultProps in component class "${z(e)}"`),t.createElement(e,{...n,theme:s,ref:o})}));return n.displayName=`WithTheme(${z(e)})`,te(n,e)}const ct=()=>s(qe);class lt{instance;sealed;constructor(){this.instance=new be({isServer:!0}),this.sealed=!1}_emitSheetCSS=()=>{const e=this.instance.toString(),t=ge();return`<style ${[t&&`nonce="${t}"`,`${g}="true"`,'data-styled-version="6.0.0-alpha.7"'].filter(Boolean).join(" ")}>${e}</style>`};collectStyles(e){if(this.sealed)throw ie(2);return t.createElement(De,{sheet:this.instance},e)}getStyleTags=()=>{if(this.sealed)throw ie(2);return this._emitSheetCSS()};getStyleElement=()=>{if(this.sealed)throw ie(2);const e={[g]:"","data-styled-version":"6.0.0-alpha.7",dangerouslySetInnerHTML:{__html:this.instance.toString()}},n=ge();return n&&(e.nonce=n),[t.createElement("style",{...e,key:"sc-0-0"})]};interleaveWithNodeStream(e){throw ie(3)}seal=()=>{this.sealed=!0}}const ut={StyleSheet:be,mainSheet:Pe};"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__"]||=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{lt as ServerStyleSheet,Ce as StyleSheetConsumer,$e as StyleSheetContext,De as StyleSheetManager,We as ThemeConsumer,qe as ThemeContext,Ue as ThemeProvider,ut as __PRIVATE__,rt as createGlobalStyle,et as css,ot as default,ne as isStyledComponent,it as keyframes,ct as useTheme,S as version,at as withTheme};
 //# sourceMappingURL=styled-components.browser.esm.js.map