styled-components 6.0.0-alpha.7 → 6.0.0-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/dist/constructors/constructWithOptions.d.ts +16 -21
- package/dist/constructors/css.d.ts +2 -2
- package/dist/constructors/styled.d.ts +179 -179
- package/dist/models/ComponentStyle.d.ts +1 -0
- package/dist/models/StyledComponent.d.ts +1 -1
- package/dist/models/StyledNativeComponent.d.ts +2 -2
- package/dist/native/index.d.ts +29 -29
- package/dist/styled-components-macro.cjs.js +47 -1
- package/dist/styled-components-macro.cjs.js.map +1 -1
- package/dist/styled-components-macro.esm.js +38 -1
- package/dist/styled-components-macro.esm.js.map +1 -1
- package/dist/styled-components.browser.cjs.js +1854 -1
- package/dist/styled-components.browser.cjs.js.map +1 -1
- package/dist/styled-components.browser.esm.js +1829 -1
- package/dist/styled-components.browser.esm.js.map +1 -1
- package/dist/styled-components.cjs.js +1874 -1
- package/dist/styled-components.cjs.js.map +1 -1
- package/dist/styled-components.esm.js +1849 -1
- package/dist/styled-components.esm.js.map +1 -1
- package/dist/styled-components.js +2074 -1
- package/dist/styled-components.js.map +1 -1
- package/dist/styled-components.min.js +1 -1
- package/dist/styled-components.min.js.map +1 -1
- package/dist/test/utils.d.ts +178 -178
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/types.d.ts +33 -44
- package/dist/utils/generateDisplayName.d.ts +1 -1
- package/dist/utils/getComponentName.d.ts +1 -1
- package/dist/utils/isStyledComponent.d.ts +1 -1
- package/dist/utils/isTag.d.ts +1 -1
- package/dist/utils/stylis.d.ts +2 -1
- package/native/dist/constructors/constructWithOptions.d.ts +16 -21
- package/native/dist/constructors/css.d.ts +2 -2
- package/native/dist/constructors/styled.d.ts +179 -179
- package/native/dist/models/ComponentStyle.d.ts +1 -0
- package/native/dist/models/StyledComponent.d.ts +1 -1
- package/native/dist/models/StyledNativeComponent.d.ts +2 -2
- package/native/dist/native/index.d.ts +29 -29
- package/native/dist/styled-components.native.cjs.js +438 -403
- package/native/dist/styled-components.native.cjs.js.map +1 -1
- package/native/dist/styled-components.native.esm.js +439 -404
- package/native/dist/styled-components.native.esm.js.map +1 -1
- package/native/dist/test/utils.d.ts +178 -178
- package/native/dist/types.d.ts +33 -44
- package/native/dist/utils/generateDisplayName.d.ts +1 -1
- package/native/dist/utils/getComponentName.d.ts +1 -1
- package/native/dist/utils/isStyledComponent.d.ts +1 -1
- package/native/dist/utils/isTag.d.ts +1 -1
- package/native/dist/utils/stylis.d.ts +2 -1
- package/package.json +8 -8
- package/test-utils/setupTestFramework.ts +9 -3
|
@@ -1,2 +1,2075 @@
|
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).styled=t(e.React)}(this,(function(e){"use strict";function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=t(e);const r="undefined"!=typeof process&&(process.env.REACT_APP_SC_ATTR||process.env.SC_ATTR)||"data-styled",s="active",o="data-styled-version",i="6.0.0-alpha.7",a="undefined"!=typeof window&&"HTMLElement"in window,c=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),l={},u=Object.freeze([]),d=Object.freeze({}),h={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 p(e,...t){return new Error(function(...e){let t=e[0];const n=[];for(let t=1,r=e.length;t<r;t+=1)n.push(e[t]);return n.forEach((e=>{t=t.replace(/%[a-z]/,e)})),t}(h[e],...t).trim())}let f=new Map,m=new Map,g=1;const y=e=>{if(f.has(e))return f.get(e);for(;m.has(g);)g++;const t=g++;if((0|t)<0||t>1073741824)throw p(16,`${t}`);return f.set(e,t),m.set(t,e),t},S=e=>m.get(e),b=(e,t)=>{f.set(e,t),m.set(t,e)},w=`style[${r}][${o}="6.0.0-alpha.7"]`,v=new RegExp(`^${r}\\.g(\\d+)\\[id="([\\w\\d-]+)"\\].*?"([^"]*)`),x=(e,t,n)=>{const r=n.split(",");let s;for(let n=0,o=r.length;n<o;n++)(s=r[n])&&e.registerName(t,s)},C=(e,t)=>{const n=(t.textContent??"").split("/*!sc*/\n"),r=[];for(let t=0,s=n.length;t<s;t++){const s=n[t].trim();if(!s)continue;const o=s.match(v);if(o){const t=0|parseInt(o[1],10),n=o[2];0!==t&&(b(n,t),x(e,n,o[3]),e.getTag().insertRules(t,r)),r.length=0}else r.push(s)}};function k(){return"undefined"!=typeof __webpack_nonce__?__webpack_nonce__:null}const $=e=>{const t=document.head,n=e||t,a=document.createElement("style"),c=(e=>{const{childNodes:t}=e;for(let e=t.length;e>=0;e--){const n=t[e];if(n&&1===n.nodeType&&n.hasAttribute(r))return n}})(n),l=void 0!==c?c.nextSibling:null;a.setAttribute(r,s),a.setAttribute(o,i);const u=k();return u&&a.setAttribute("nonce",u),n.insertBefore(a,l),a};let P=a;const A={isServer:!a,useCSSOMInjection:!c};class I{gs;names;options;server;tag;static registerId(e){return y(e)}constructor(e=d,t={},n){this.options={...A,...e},this.gs=t,this.names=new Map(n),this.server=!!e.isServer,!this.server&&a&&P&&(P=!1,(e=>{const t=document.querySelectorAll(w);for(let n=0,o=t.length;n<o;n++){const o=t[n];o&&o.getAttribute(r)!==s&&(C(e,o),o.parentNode&&o.parentNode.removeChild(o))}})(this))}reconstructWithOptions(e,t=!0){return new I({...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=$(e);t.appendChild(document.createTextNode("")),this.sheet=(e=>{if(e.sheet)return e.sheet;const{styleSheets:t}=document;for(let n=0,r=t.length;n<r;n++){const r=t[n];if(r.ownerNode===e)return r}throw p(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=$(e);this.nodes=t.childNodes,this.length=0}insertRule(e,t){if(e<=this.length&&e>=0){const n=document.createTextNode(t),r=this.nodes[e];return this.element.insertBefore(n,r||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 r=n;for(;e>=r;)if(r<<=1,r<0)throw p(16,`${e}`);this.groupSizes=new Uint32Array(r),this.groupSizes.set(t),this.length=r;for(let e=n;e<r;e++)this.groupSizes[e]=0}let n=this.indexOfGroup(e+1);if(Array.isArray(t))for(let r=0,s=t.length;r<s;r++)this.tag.insertRule(n,t[r])&&(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),r=n+t;this.groupSizes[e]=0;for(let e=n;e<r;e++)this.tag.deleteRule(n)}}getGroup(e){let t="";if(e>=this.length||0===this.groupSizes[e])return t;const n=this.groupSizes[e],r=this.indexOfGroup(e),s=r+n;for(let e=r;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(y(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(y(e),n)}clearNames(e){this.names.has(e)&&this.names.get(e).clear()}clearRules(e){this.getTag().clearGroup(y(e)),this.clearNames(e)}clearTag(){this.tag=void 0}toString(){return(e=>{const t=e.getTag(),{length:n}=t;let s="";for(let o=0;o<n;o++){const n=S(o);if(void 0===n)continue;const i=e.names.get(n),a=t.getGroup(o);if(void 0===i||0===a.length)continue;const c=`${r}.g${o}[id="${n}"]`;let l="";void 0!==i&&i.forEach((e=>{e.length>0&&(l+=`${e},`)})),s+=`${a}${c}{content:"${l}"}/*!sc*/\n`}return s})(this)}}var R="-ms-",T="-moz-",O="-webkit-",_="comm",E="rule",j="decl",N="@keyframes",D=Math.abs,M=String.fromCharCode,z=Object.assign;function L(e){return e.trim()}function G(e,t){return(e=t.exec(e))?e[0]:e}function F(e,t,n){return e.replace(t,n)}function B(e,t){return e.indexOf(t)}function H(e,t){return 0|e.charCodeAt(t)}function W(e,t,n){return e.slice(t,n)}function Y(e){return e.length}function q(e){return e.length}function U(e,t){return t.push(e),e}var V=1,X=1,Z=0,J=0,K=0,Q="";function ee(e,t,n,r,s,o,i){return{value:e,root:t,parent:n,type:r,props:s,children:o,line:V,column:X,length:i,return:""}}function te(e,t){return z(ee("",null,null,"",null,null,0),e,{length:-e.length},t)}function ne(){return K=J>0?H(Q,--J):0,X--,10===K&&(X=1,V--),K}function re(){return K=J<Z?H(Q,J++):0,X++,10===K&&(X=1,V++),K}function se(){return H(Q,J)}function oe(){return J}function ie(e,t){return W(Q,e,t)}function ae(e){switch(e){case 0:case 9:case 10:case 13:case 32:return 5;case 33:case 43:case 44:case 47:case 62:case 64:case 126:case 59:case 123:case 125:return 4;case 58:return 3;case 34:case 39:case 40:case 91:return 2;case 41:case 93:return 1}return 0}function ce(e){return L(ie(J-1,de(91===e?e+2:40===e?e+1:e)))}function le(e){for(;(K=se())&&K<33;)re();return ae(e)>2||ae(K)>3?"":" "}function ue(e,t){for(;--t&&re()&&!(K<48||K>102||K>57&&K<65||K>70&&K<97););return ie(e,oe()+(t<6&&32==se()&&32==re()))}function de(e){for(;re();)switch(K){case e:return J;case 34:case 39:34!==e&&39!==e&&de(K);break;case 40:41===e&&de(e);break;case 92:re()}return J}function he(e,t){for(;re()&&e+K!==57&&(e+K!==84||47!==se()););return"/*"+ie(t,J-1)+"*"+M(47===e?e:re())}function pe(e){for(;!ae(se());)re();return ie(e,J)}function fe(e){return function(e){return Q="",e}(me("",null,null,null,[""],e=function(e){return V=X=1,Z=Y(Q=e),J=0,[]}(e),0,[0],e))}function me(e,t,n,r,s,o,i,a,c){for(var l=0,u=0,d=i,h=0,p=0,f=0,m=1,g=1,y=1,S=0,b="",w=s,v=o,x=r,C=b;g;)switch(f=S,S=re()){case 40:if(108!=f&&58==C.charCodeAt(d-1)){-1!=B(C+=F(ce(S),"&","&\f"),"&\f")&&(y=-1);break}case 34:case 39:case 91:C+=ce(S);break;case 9:case 10:case 13:case 32:C+=le(f);break;case 92:C+=ue(oe()-1,7);continue;case 47:switch(se()){case 42:case 47:U(ye(he(re(),oe()),t,n),c);break;default:C+="/"}break;case 123*m:a[l++]=Y(C)*y;case 125*m:case 59:case 0:switch(S){case 0:case 125:g=0;case 59+u:p>0&&Y(C)-d&&U(p>32?Se(C+";",r,n,d-1):Se(F(C," ","")+";",r,n,d-2),c);break;case 59:C+=";";default:if(U(x=ge(C,t,n,l,u,s,a,b,w=[],v=[],d),o),123===S)if(0===u)me(C,t,x,x,w,o,d,a,v);else switch(h){case 100:case 109:case 115:me(e,x,x,r&&U(ge(e,x,x,0,0,s,a,b,s,w=[],d),v),s,v,d,a,r?w:v);break;default:me(C,x,x,x,[""],v,0,a,v)}}l=u=p=0,m=y=1,b=C="",d=i;break;case 58:d=1+Y(C),p=f;default:if(m<1)if(123==S)--m;else if(125==S&&0==m++&&125==ne())continue;switch(C+=M(S),S*m){case 38:y=u>0?1:(C+="\f",-1);break;case 44:a[l++]=(Y(C)-1)*y,y=1;break;case 64:45===se()&&(C+=ce(re())),h=se(),u=d=Y(b=C+=pe(oe())),S++;break;case 45:45===f&&2==Y(C)&&(m=0)}}return o}function ge(e,t,n,r,s,o,i,a,c,l,u){for(var d=s-1,h=0===s?o:[""],p=q(h),f=0,m=0,g=0;f<r;++f)for(var y=0,S=W(e,d+1,d=D(m=i[f])),b=e;y<p;++y)(b=L(m>0?h[y]+" "+S:F(S,/&\f/g,h[y])))&&(c[g++]=b);return ee(e,t,n,0===s?E:a,c,l,u)}function ye(e,t,n){return ee(e,t,n,_,M(K),W(e,2,-2),0)}function Se(e,t,n,r){return ee(e,t,n,j,W(e,0,r),W(e,r+1,-1),r)}function be(e,t,n){switch(function(e,t){return(((t<<2^H(e,0))<<2^H(e,1))<<2^H(e,2))<<2^H(e,3)}(e,t)){case 5103:return O+"print-"+e+e;case 5737:case 4201:case 3177:case 3433:case 1641:case 4457:case 2921:case 5572:case 6356:case 5844:case 3191:case 6645:case 3005:case 6391:case 5879:case 5623:case 6135:case 4599:case 4855:case 4215:case 6389:case 5109:case 5365:case 5621:case 3829:return O+e+e;case 4789:return T+e+e;case 5349:case 4246:case 4810:case 6968:case 2756:return O+e+T+e+R+e+e;case 6828:case 4268:return O+e+R+e+e;case 6165:return O+e+R+"flex-"+e+e;case 5187:return O+e+F(e,/(\w+).+(:[^]+)/,O+"box-$1$2"+R+"flex-$1$2")+e;case 5443:return O+e+R+"flex-item-"+F(e,/flex-|-self/g,"")+(G(e,/flex-|baseline/)?"":R+"grid-row-"+F(e,/flex-|-self/g,""))+e;case 4675:return O+e+R+"flex-line-pack"+F(e,/align-content|flex-|-self/g,"")+e;case 5548:return O+e+R+F(e,"shrink","negative")+e;case 5292:return O+e+R+F(e,"basis","preferred-size")+e;case 6060:return O+"box-"+F(e,"-grow","")+O+e+R+F(e,"grow","positive")+e;case 4554:return O+F(e,/([^-])(transform)/g,"$1"+O+"$2")+e;case 6187:return F(F(F(e,/(zoom-|grab)/,O+"$1"),/(image-set)/,O+"$1"),e,"")+e;case 5495:case 3959:return F(e,/(image-set\([^]*)/,O+"$1$`$1");case 4968:return F(F(e,/(.+:)(flex-)?(.*)/,O+"box-pack:$3"+R+"flex-pack:$3"),/s.+-b[^;]+/,"justify")+O+e+e;case 4200:if(!G(e,/flex-|baseline/))return R+"grid-column-align"+W(e,t)+e;break;case 2592:case 3360:return R+F(e,"template-","")+e;case 4384:case 3616:return n&&n.some((function(e,n){return t=n,G(e.props,/grid-\w+-end/)}))?~B(e+(n=n[t].value),"span")?e:R+F(e,"-start","")+e+R+"grid-row-span:"+(~B(n,"span")?G(n,/\d+/):+G(n,/\d+/)-+G(e,/\d+/))+";":R+F(e,"-start","")+e;case 4896:case 4128:return n&&n.some((function(e){return G(e.props,/grid-\w+-start/)}))?e:R+F(F(e,"-end","-span"),"span ","")+e;case 4095:case 3583:case 4068:case 2532:return F(e,/(.+)-inline(.+)/,O+"$1$2")+e;case 8116:case 7059:case 5753:case 5535:case 5445:case 5701:case 4933:case 4677:case 5533:case 5789:case 5021:case 4765:if(Y(e)-1-t>6)switch(H(e,t+1)){case 109:if(45!==H(e,t+4))break;case 102:return F(e,/(.+:)(.+)-([^]+)/,"$1"+O+"$2-$3$1"+T+(108==H(e,t+3)?"$3":"$2-$3"))+e;case 115:return~B(e,"stretch")?be(F(e,"stretch","fill-available"),t,n)+e:e}break;case 5152:case 5920:return F(e,/(.+?):(\d+)(\s*\/\s*(span)?\s*(\d+))?(.*)/,(function(t,n,r,s,o,i,a){return R+n+":"+r+a+(s?R+n+"-span:"+(o?i:+i-+r)+a:"")+e}));case 4949:if(121===H(e,t+6))return F(e,":",":"+O)+e;break;case 6444:switch(H(e,45===H(e,14)?18:11)){case 120:return F(e,/(.+:)([^;\s!]+)(;|(\s+)?!.+)?/,"$1"+O+(45===H(e,14)?"inline-":"")+"box$3$1"+O+"$2$3$1"+R+"$2box$3")+e;case 100:return F(e,":",":"+R)+e}break;case 5936:switch(H(e,t+11)){case 114:return O+e+R+F(e,/[svh]\w+-[tblr]{2}/,"tb")+e;case 108:return O+e+R+F(e,/[svh]\w+-[tblr]{2}/,"tb-rl")+e;case 45:return O+e+R+F(e,/[svh]\w+-[tblr]{2}/,"lr")+e}case 2903:return O+e+R+e+e;case 5719:case 2647:case 2135:case 3927:case 2391:return F(e,"scroll-","scroll-snap-")+e}return e}function we(e,t){for(var n="",r=q(e),s=0;s<r;s++)n+=t(e[s],s,e,t)||"";return n}function ve(e,t,n,r){switch(e.type){case"@import":case j:return e.return=e.return||e.value;case _:return"";case N:return e.return=e.value+"{"+we(e.children,r)+"}";case E:e.value=e.props.join(",")}return Y(n=we(e.children,r))?e.return=e.value+"{"+n+"}":""}function xe(e,t,n,r){if(e.length>-1&&!e.return)switch(e.type){case j:return void(e.return=be(e.value,e.length,n));case N:return we([te(e,{value:F(e.value,"@","@"+O)})],r);case E:if(e.length)return function(e,t){return e.map(t).join("")}(e.props,(function(t){switch(G(t,/(::plac\w+|:read-\w+)/)){case":read-only":case":read-write":return we([te(e,{props:[F(t,/:(read-\w+)/,":-moz-$1")]})],r);case"::placeholder":return we([te(e,{props:[F(t,/:(plac\w+)/,":"+O+"input-$1")]}),te(e,{props:[F(t,/:(plac\w+)/,":-moz-$1")]}),te(e,{props:[F(t,/:(plac\w+)/,R+"input-$1")]})],r)}return""}))}}const Ce=(e,t)=>{let n=t.length;for(;n;)e=33*e^t.charCodeAt(--n);return e},ke=e=>Ce(5381,e),$e=/^\s*\/\/.*$/gm,Pe=[":","[",".","#"];function Ae({options:e=d,plugins:t=u}=d){let n,r,s,o;const i=(e,t,s)=>0===t&&Pe.includes(s[r.length])||s.match(o)?e:`.${n}`,a=e=>{if(e.type===E&&e.value.includes("&")){const t=e.props;t[0]=t[0].replace(s,i)}},c=(i,c="",l="",u="&")=>{let d=i.replace($e,"");n=u,r=c,s=new RegExp(`\\${r}\\b`,"g"),o=new RegExp(`(\\${r}\\b){2,}`);const h=t.slice();return(e.prefix||void 0===e.prefix)&&h.unshift(xe),h.push(a,ve),we(fe(l||c?`${l} ${c} { ${d} }`:d),function(e){var t=q(e);return function(n,r,s,o){for(var i="",a=0;a<t;a++)i+=e[a](n,r,s,o)||"";return i}}(h))};return c.hash=t.length?t.reduce(((e,t)=>(t.name||p(15),Ce(e,t.name))),5381).toString():"",c}const Ie=n.default.createContext(void 0),Re=Ie.Consumer,Te=n.default.createContext(void 0);Te.Consumer;const Oe=new I,_e=Ae();function Ee(){return e.useContext(Ie)||Oe}function je(){return e.useContext(Te)||_e}function Ne(t){const[r,s]=e.useState(t.stylisPlugins),o=Ee(),i=e.useMemo((()=>{let e=o;return t.sheet?e=t.sheet:t.target&&(e=e.reconstructWithOptions({target:t.target},!1)),t.disableCSSOMInjection&&(e=e.reconstructWithOptions({useCSSOMInjection:!1})),e}),[t.disableCSSOMInjection,t.sheet,t.target]),a=e.useMemo((()=>Ae({options:{prefix:!t.disableVendorPrefixes},plugins:r})),[t.disableVendorPrefixes,r]);return e.useEffect((()=>{(function(e,t,n,r){var s=void 0;if(void 0!==s)return!!s;if(e===t)return!0;if("object"!=typeof e||!e||"object"!=typeof t||!t)return!1;var o=Object.keys(e),i=Object.keys(t);if(o.length!==i.length)return!1;for(var a=Object.prototype.hasOwnProperty.bind(t),c=0;c<o.length;c++){var l=o[c];if(!a(l))return!1;var u=e[l],d=t[l];if(!1===(s=void 0)||void 0===s&&u!==d)return!1}return!0})(r,t.stylisPlugins)||s(t.stylisPlugins)}),[t.stylisPlugins]),n.default.createElement(Ie.Provider,{value:i},n.default.createElement(Te.Provider,{value:a},n.default.Children.only(t.children)))}class De{id;name;rules;constructor(e,t){this.name=e,this.id=`sc-keyframes-${e}`,this.rules=t}inject=(e,t=_e)=>{const n=this.name+t.hash;e.hasNameForId(this.id,n)||e.insertRules(this.id,n,t(this.rules,n,"@keyframes"))};toString=()=>{throw p(12,String(this.name))};getName(e=_e){return this.name+e.hash}}function Me(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function ze(e,t){return e(t={exports:{}},t.exports),t.exports}Me(ze((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default={animationIterationCount:1,borderImageOutset:1,borderImageSlice:1,borderImageWidth:1,boxFlex:1,boxFlexGroup:1,boxOrdinalGroup:1,columnCount:1,columns:1,flex:1,flexGrow:1,flexPositive:1,flexShrink:1,flexNegative:1,flexOrder:1,gridRow:1,gridRowEnd:1,gridRowSpan:1,gridRowStart:1,gridColumn:1,gridColumnEnd:1,gridColumnSpan:1,gridColumnStart:1,msGridRow:1,msGridRowSpan:1,msGridColumn:1,msGridColumnSpan:1,fontWeight:1,lineHeight:1,opacity:1,order:1,orphans:1,tabSize:1,widows:1,zIndex:1,zoom:1,WebkitLineClamp:1,fillOpacity:1,floodOpacity:1,stopOpacity:1,strokeDasharray:1,strokeDashoffset:1,strokeMiterlimit:1,strokeOpacity:1,strokeWidth:1}})));var Le=ze((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default={animationIterationCount:1,borderImageOutset:1,borderImageSlice:1,borderImageWidth:1,boxFlex:1,boxFlexGroup:1,boxOrdinalGroup:1,columnCount:1,columns:1,flex:1,flexGrow:1,flexPositive:1,flexShrink:1,flexNegative:1,flexOrder:1,gridRow:1,gridRowEnd:1,gridRowSpan:1,gridRowStart:1,gridColumn:1,gridColumnEnd:1,gridColumnSpan:1,gridColumnStart:1,msGridRow:1,msGridRowSpan:1,msGridColumn:1,msGridColumnSpan:1,fontWeight:1,lineHeight:1,opacity:1,order:1,orphans:1,tabSize:1,widows:1,zIndex:1,zoom:1,WebkitLineClamp:1,fillOpacity:1,floodOpacity:1,stopOpacity:1,strokeDasharray:1,strokeDashoffset:1,strokeMiterlimit:1,strokeOpacity:1,strokeWidth:1}}));Me(Le);var Ge=ze((function(e){e.exports=Le}));function Fe(e){return"string"==typeof e&&e||e.displayName||e.name||"Component"}const Be=/([A-Z])/,He=/([A-Z])/g,We=/^ms-/,Ye=e=>`-${e.toLowerCase()}`;function qe(e){return Be.test(e)?e.replace(He,Ye).replace(We,"-ms-"):e}function Ue(e){return"function"==typeof e}function Ve(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 Xe(e){return"object"==typeof e&&"styledComponentId"in e}const Ze=e=>null==e||!1===e||""===e,Je=(e,t)=>{const n=[];for(const t in e)e.hasOwnProperty(t)&&!Ze(e[t])&&(Array.isArray(e[t])&&e[t].isCss||Ue(e[t])?n.push(`${qe(t)}:`,e[t],";"):Ve(e[t])?n.push(...Je(e[t],t)):n.push(`${qe(t)}: ${r=t,s=e[t],null==s||"boolean"==typeof s||""===s?"":"number"!=typeof s||0===s||r in Ge?String(s).trim():`${s}px`};`));var r,s;return t?[`${t} {`,...n,"}"]:n};function Ke(e,t,n,r){if(Array.isArray(e)){const s=[];for(let o,i=0,a=e.length;i<a;i+=1)o=Ke(e[i],t,n,r),""!==o&&(Array.isArray(o)?s.push(...o):s.push(o));return s}if(Ze(e))return"";if(Xe(e))return`.${e.styledComponentId}`;if(Ue(e)){if("function"!=typeof(s=e)||s.prototype&&s.prototype.isReactComponent||!t)return e;{const s=e,o=s(t);return"object"!=typeof o||Array.isArray(o)||o instanceof De||Ve(o)||console.error(`${Fe(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.`),Ke(o,t,n,r)}}var s;return e instanceof De?n?(e.inject(n,r),e.getName(r)):e:Ve(e)?Je(e):e.toString()}class Qe{componentId;isStatic;rules;constructor(e,t){this.rules=e,this.componentId=t,this.isStatic=function(e){for(let t=0;t<e.length;t+=1){const n=e[t];if(Ue(n)&&!Xe(n))return!1}return!0}(e),I.registerId(this.componentId+1)}createStyles(e,t,n,r){const s=r(Ke(this.rules,t,n,r).join(""),""),o=this.componentId+e;n.insertRules(o,o,s)}removeStyles(e,t){t.clearRules(this.componentId+e)}renderStyles(e,t,n,r){e>2&&I.registerId(this.componentId+e),this.removeStyles(e,n),this.createStyles(e,t,n,r)}}const et=n.default.createContext(void 0),tt=et.Consumer,nt=/invalid hook call/i,rt=new Set,st=(t,n)=>{{const r=`The component ${t}${n?` with the id of "${n}"`:""} 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 t=!0;console.error=(e,...n)=>{nt.test(e)?(t=!1,rt.delete(r)):s(e,...n)},e.useRef(),t&&!rt.has(r)&&(console.warn(r),rt.add(r))}catch(e){nt.test(e.message)&&rt.delete(r)}finally{console.error=s}}};function ot(e,t,n=d){return e.theme!==n.theme&&e.theme||t||n.theme}const it=/(a)(d)/gi,at=e=>String.fromCharCode(e+(e>25?39:97));function ct(e){let t,n="";for(t=Math.abs(e);t>52;t=t/52|0)n=at(t%52)+n;return(at(t%52)+n).replace(it,"$1-$2")}function lt(e){return ct(ke(e)>>>0)}function ut(e,t){const n=[e[0]];for(let r=0,s=t.length;r<s;r+=1)n.push(t[r],e[r+1]);return n}const dt=e=>(Array.isArray(e)&&(e.isCss=!0),e);function ht(e,...t){if(Ue(e)||Ve(e))return dt(Ke(ut(u,[e,...t])));const n=e;return 0===t.length&&1===n.length&&"string"==typeof n[0]?n:dt(Ke(ut(n,t)))}const pt="function"==typeof Symbol&&Symbol.for,ft=pt?Symbol.for("react.memo"):60115,mt=pt?Symbol.for("react.forward_ref"):60112,gt={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},yt={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},St={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},bt={[mt]:{$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},[ft]:St};function wt(e){return("type"in(t=e)&&t.type.$$typeof)===ft?St:"$$typeof"in e?bt[e.$$typeof]:gt;var t}const vt=Object.defineProperty,xt=Object.getOwnPropertyNames,Ct=Object.getOwnPropertySymbols,kt=Object.getOwnPropertyDescriptor,$t=Object.getPrototypeOf,Pt=Object.prototype;function At(e,t,n){if("string"!=typeof t){if(Pt){const r=$t(t);r&&r!==Pt&&At(e,r,n)}let r=xt(t);Ct&&(r=r.concat(Ct(t)));const s=wt(e),o=wt(t);for(let i=0;i<r.length;++i){const a=r[i];if(!(a in yt||n&&n[a]||o&&a in o||s&&a in s)){const n=kt(t,a);try{vt(e,a,n)}catch(e){}}}}return e}const It={StyleSheet:I,mainSheet:Oe};"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"),"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);var Rt=Object.freeze({__proto__:null,createGlobalStyle:function(e,...t){const r=ht(e,...t),s=`sc-global-${lt(JSON.stringify(r))}`,o=new Qe(r,s);st(s);const i=e=>{const t=Ee(),i=je(),c=n.default.useContext(et),l=n.default.useRef(t.allocateGSInstance(s)).current;return n.default.Children.count(e.children)&&console.warn(`The global style component ${s} was given child JSX. createGlobalStyle does not render children.`),r.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."),t.server&&a(l,e,t,c,i),(n.default.useInsertionEffect||n.default.useLayoutEffect)((()=>{if(!t.server)return a(l,e,t,c,i),()=>o.removeStyles(l,t)}),[l,e,t,c,i]),null};function a(e,t,n,r,s){if(o.isStatic)o.renderStyles(e,l,n,s);else{const a={...t,theme:ot(t,r,i.defaultProps)};o.renderStyles(e,a,n,s)}}return n.default.memo(i)},css:ht,isStyledComponent:Xe,keyframes:function(e,...t){"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=ht(e,...t).join(""),r=lt(n);return new De(r,n)},ServerStyleSheet:class{instance;sealed;constructor(){this.instance=new I({isServer:!0}),this.sealed=!1}_emitSheetCSS=()=>{const e=this.instance.toString(),t=k();return`<style ${[t&&`nonce="${t}"`,`${r}="true"`,`${o}="6.0.0-alpha.7"`].filter(Boolean).join(" ")}>${e}</style>`};collectStyles(e){if(this.sealed)throw p(2);return n.default.createElement(Ne,{sheet:this.instance},e)}getStyleTags=()=>{if(this.sealed)throw p(2);return this._emitSheetCSS()};getStyleElement=()=>{if(this.sealed)throw p(2);const e={[r]:"",[o]:i,dangerouslySetInnerHTML:{__html:this.instance.toString()}},t=k();return t&&(e.nonce=t),[n.default.createElement("style",{...e,key:"sc-0-0"})]};interleaveWithNodeStream(e){throw p(3)}seal=()=>{this.sealed=!0}},StyleSheetConsumer:Re,StyleSheetContext:Ie,StyleSheetManager:Ne,ThemeConsumer:tt,ThemeContext:et,ThemeProvider:function(t){const r=e.useContext(et),s=e.useMemo((()=>function(e,t){if(!e)throw p(14);if(Ue(e)){const n=e(t);if(null===n||Array.isArray(n)||"object"!=typeof n)throw p(7);return n}if(Array.isArray(e)||"object"!=typeof e)throw p(8);return t?{...t,...e}:e}(t.theme,r)),[t.theme,r]);return t.children?n.default.createElement(et.Provider,{value:s},t.children):null},useTheme:()=>e.useContext(et),version:i,withTheme:function(e){const t=n.default.forwardRef(((t,r)=>{const s=ot(t,n.default.useContext(et),e.defaultProps);return 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 "${Fe(e)}"`),n.default.createElement(e,{...t,theme:s,ref:r})}));return t.displayName=`WithTheme(${Fe(e)})`,At(t,e)},__PRIVATE__:It});function Tt(e){var t=Object.create(null);return function(n){return void 0===t[n]&&(t[n]=e(n)),t[n]}}var Ot=/^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|enterKeyHint|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/,_t=Tt((function(e){return Ot.test(e)||111===e.charCodeAt(0)&&110===e.charCodeAt(1)&&e.charCodeAt(2)<91})),Et=["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 jt=/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~-]+/g,Nt=/(^-|-$)/g;function Dt(e){return e.replace(jt,"-").replace(Nt,"")}function Mt(e){return"string"==typeof e&&e.charAt(0)===e.charAt(0).toLowerCase()}function zt(e){return Mt(e)?`styled.${e}`:`Styled(${Fe(e)})`}function Lt(e,t){return e&&t?`${e} ${t}`:e||t}function Gt(e,t,n=!1){if(!n&&!Ve(e)&&!Array.isArray(e))return t;if(Array.isArray(t))for(let n=0;n<t.length;n++)e[n]=Gt(e[n],t[n]);else if(Ve(t))for(const n in t)e[n]=Gt(e[n],t[n]);return e}const Ft=ke(i);class Bt{baseHash;baseStyle;componentId;isStatic;rules;staticRulesId;constructor(e,t,n){this.rules=e,this.staticRulesId="",this.isStatic=!1,this.componentId=t,this.baseHash=Ce(Ft,t),this.baseStyle=n,I.registerId(t)}generateAndInjectStyles(e,t,n){const{componentId:r}=this,s=[];if(this.baseStyle&&s.push(this.baseStyle.generateAndInjectStyles(e,t,n)),this.isStatic&&!n.hash)if(this.staticRulesId&&t.hasNameForId(r,this.staticRulesId))s.push(this.staticRulesId);else{const o=Ke(this.rules,e,t,n).join(""),i=ct(Ce(this.baseHash,o)>>>0);if(!t.hasNameForId(r,i)){const e=n(o,`.${i}`,void 0,r);t.insertRules(r,i,e)}s.push(i),this.staticRulesId=i}else{const{length:o}=this.rules;let i=Ce(this.baseHash,n.hash),a="";for(let r=0;r<o;r++){const s=this.rules[r];if("string"==typeof s)a+=s,i=Ce(i,s+r);else if(s){const o=Ke(s,e,t,n),c=Array.isArray(o)?o.join(""):o;i=Ce(i,c+r),a+=c}}if(a){const e=ct(i>>>0);if(!t.hasNameForId(r,e)){const s=n(a,`.${e}`,void 0,r);t.insertRules(r,e,s)}s.push(e)}}return s.join(" ")}}const Ht={};function Wt(e,t){const n="string"!=typeof e?"sc":Dt(e);Ht[n]=(Ht[n]||0)+1;const r=`${n}-${lt(i+n+Ht[n])}`;return t?`${t}-${r}`:r}function Yt(t,r,s){const o=Xe(t),i=t,a=!Mt(t),{attrs:c=u,componentId:l=Wt(r.displayName,r.parentComponentId),displayName:h=zt(t)}=r,p=r.displayName&&r.componentId?`${Dt(r.displayName)}-${r.componentId}`:r.componentId||l,f=o&&i.attrs?i.attrs.concat(c).filter(Boolean):c;let{shouldForwardProp:m}=r;if(o&&i.shouldForwardProp){const e=i.shouldForwardProp;if(r.shouldForwardProp){const t=r.shouldForwardProp;m=(n,r,s)=>e(n,r,s)&&t(n,r,s)}else m=e}const g=new Bt(s,p,o?i.componentStyle:void 0),y=g.isStatic&&0===c.length;function S(t,n){return function(t,n,r,s){const{attrs:o,componentStyle:i,defaultProps:a,foldedComponentIds:c,shouldForwardProp:l,styledComponentId:u,target:h}=t;e.useDebugValue(u);const p=ot(n,e.useContext(et),a),[f,m]=function(e=d,t,n){const r={...t,theme:e},s={};return n.forEach((e=>{const t="function"==typeof e?e(r):e;let n;for(n in t)r[n]=s[n]="className"===n?Lt(s[n],t[n]):t[n]})),[r,s]}(p||d,n,o),g=function(t,n,r,s){const o=Ee(),i=je(),a=n?t.generateAndInjectStyles(d,o,i):t.generateAndInjectStyles(r,o,i);return e.useDebugValue(a),!n&&s&&s(a),a}(i,s,f,t.warnTooManyClasses),y=r,S=m.$as||n.$as||m.as||n.as||h,b=Mt(S),w=m!==n?{...n,...m}:n,v={};for(const e in w)"$"!==e[0]&&"as"!==e&&("forwardedAs"===e?v.as=w[e]:(l?l(e,_t,S):!b||_t(e))&&(v[e]=w[e]));return n.style&&m.style!==n.style&&(v.style={...n.style,...m.style}),v[b&&-1===Et.indexOf(S)?"class":"className"]=c.concat(u,g!==u?g:null,n.className,m.className).filter(Boolean).join(" "),v.ref=y,e.createElement(S,v)}(b,t,n,y)}S.displayName=h;let b=n.default.forwardRef(S);return b.attrs=f,b.componentStyle=g,b.displayName=h,b.shouldForwardProp=m,b.foldedComponentIds=o?i.foldedComponentIds.concat(i.styledComponentId):u,b.styledComponentId=p,b.target=o?i.target:t,b.withComponent=function(e){const{componentId:t,...n}=r,o=t&&`${t}-${Mt(e)?e:Dt(Fe(e))}`;return Yt(e,{...n,attrs:f,componentId:o},s)},Object.defineProperty(b,"defaultProps",{get(){return this._foldedDefaultProps},set(e){this._foldedDefaultProps=o?function(e={},...t){for(const n of t)Gt(e,n,!0);return e}({},i.defaultProps,e):e}}),st(h,p),b.warnTooManyClasses=((e,t)=>{let n={},r=!1;return s=>{if(!r&&(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 />`),r=!0,n={}}}})(h,p),b.toString=()=>`.${b.styledComponentId}`,a&&At(b,t,{attrs:!0,componentStyle:!0,displayName:!0,foldedComponentIds:!0,shouldForwardProp:!0,styledComponentId:!0,target:!0,withComponent:!0}),b}function qt(e,t,n=d){if(!t)throw p(1,t);const r=(r,...s)=>e(t,n,ht(r,...s));return r.attrs=r=>qt(e,t,{...n,attrs:Array.prototype.concat(n.attrs,r).filter(Boolean)}),r.withConfig=r=>qt(e,t,{...n,...r}),r}const Ut=e=>qt(Yt,e),Vt=Ut;Et.forEach((e=>{Vt[e]=Ut(e)}));for(const e in Rt)Vt[e]=Rt[e];return Vt}));
|
|
1
|
+
(function (global, factory) {
|
|
2
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react')) :
|
|
3
|
+
typeof define === 'function' && define.amd ? define(['react'], factory) :
|
|
4
|
+
(global = global || self, global.styled = factory(global.React));
|
|
5
|
+
})(this, (function (React) { 'use strict';
|
|
6
|
+
|
|
7
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
8
|
+
|
|
9
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
10
|
+
|
|
11
|
+
var SC_ATTR = (typeof process !== 'undefined' && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR)) ||
|
|
12
|
+
'data-styled';
|
|
13
|
+
var SC_ATTR_ACTIVE = 'active';
|
|
14
|
+
var SC_ATTR_VERSION = 'data-styled-version';
|
|
15
|
+
var SC_VERSION = "6.0.0-beta.2";
|
|
16
|
+
var SPLITTER = '/*!sc*/\n';
|
|
17
|
+
var IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;
|
|
18
|
+
var DISABLE_SPEEDY = Boolean(typeof SC_DISABLE_SPEEDY === 'boolean'
|
|
19
|
+
? SC_DISABLE_SPEEDY
|
|
20
|
+
: typeof process !== 'undefined' &&
|
|
21
|
+
typeof process.env.REACT_APP_SC_DISABLE_SPEEDY !== 'undefined' &&
|
|
22
|
+
process.env.REACT_APP_SC_DISABLE_SPEEDY !== ''
|
|
23
|
+
? process.env.REACT_APP_SC_DISABLE_SPEEDY === 'false'
|
|
24
|
+
? false
|
|
25
|
+
: process.env.REACT_APP_SC_DISABLE_SPEEDY
|
|
26
|
+
: typeof process !== 'undefined' &&
|
|
27
|
+
typeof process.env.SC_DISABLE_SPEEDY !== 'undefined' &&
|
|
28
|
+
process.env.SC_DISABLE_SPEEDY !== ''
|
|
29
|
+
? process.env.SC_DISABLE_SPEEDY === 'false'
|
|
30
|
+
? false
|
|
31
|
+
: process.env.SC_DISABLE_SPEEDY
|
|
32
|
+
: "development" !== 'production');
|
|
33
|
+
// Shared empty execution context when generating static styles
|
|
34
|
+
var STATIC_EXECUTION_CONTEXT = {};
|
|
35
|
+
|
|
36
|
+
/******************************************************************************
|
|
37
|
+
Copyright (c) Microsoft Corporation.
|
|
38
|
+
|
|
39
|
+
Permission to use, copy, modify, and/or distribute this software for any
|
|
40
|
+
purpose with or without fee is hereby granted.
|
|
41
|
+
|
|
42
|
+
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
43
|
+
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
44
|
+
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
45
|
+
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
46
|
+
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
47
|
+
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
48
|
+
PERFORMANCE OF THIS SOFTWARE.
|
|
49
|
+
***************************************************************************** */
|
|
50
|
+
|
|
51
|
+
var __assign = function() {
|
|
52
|
+
__assign = Object.assign || function __assign(t) {
|
|
53
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
54
|
+
s = arguments[i];
|
|
55
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
56
|
+
}
|
|
57
|
+
return t;
|
|
58
|
+
};
|
|
59
|
+
return __assign.apply(this, arguments);
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
function __rest(s, e) {
|
|
63
|
+
var t = {};
|
|
64
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
65
|
+
t[p] = s[p];
|
|
66
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
67
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
68
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
69
|
+
t[p[i]] = s[p[i]];
|
|
70
|
+
}
|
|
71
|
+
return t;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
function __spreadArray(to, from, pack) {
|
|
75
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
76
|
+
if (ar || !(i in from)) {
|
|
77
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
78
|
+
ar[i] = from[i];
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
var EMPTY_ARRAY = Object.freeze([]);
|
|
85
|
+
var EMPTY_OBJECT = Object.freeze({});
|
|
86
|
+
|
|
87
|
+
var errorMap = {
|
|
88
|
+
'1': 'Cannot create styled-component for component: %s.\n\n',
|
|
89
|
+
'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",
|
|
90
|
+
'3': 'Streaming SSR is only supported in a Node.js environment; Please do not try to call this method in the browser.\n\n',
|
|
91
|
+
'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',
|
|
92
|
+
'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',
|
|
93
|
+
'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",
|
|
94
|
+
'7': 'ThemeProvider: Please return an object from your "theme" prop function, e.g.\n\n```js\ntheme={() => ({})}\n```\n\n',
|
|
95
|
+
'8': 'ThemeProvider: Please make your "theme" prop an object.\n\n',
|
|
96
|
+
'9': 'Missing document `<head>`\n\n',
|
|
97
|
+
'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',
|
|
98
|
+
'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',
|
|
99
|
+
'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',
|
|
100
|
+
'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',
|
|
101
|
+
'14': 'ThemeProvider: "theme" prop is required.\n\n',
|
|
102
|
+
'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",
|
|
103
|
+
'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",
|
|
104
|
+
'17': "CSSStyleSheet could not be found on HTMLStyleElement.\nHas styled-components' style tag been unmounted or altered by another script?\n",
|
|
105
|
+
};
|
|
106
|
+
|
|
107
|
+
var ERRORS = errorMap ;
|
|
108
|
+
/**
|
|
109
|
+
* super basic version of sprintf
|
|
110
|
+
*/
|
|
111
|
+
function format() {
|
|
112
|
+
var args = [];
|
|
113
|
+
for (var _i = 0; _i < arguments.length; _i++) {
|
|
114
|
+
args[_i] = arguments[_i];
|
|
115
|
+
}
|
|
116
|
+
var a = args[0];
|
|
117
|
+
var b = [];
|
|
118
|
+
for (var c = 1, len = args.length; c < len; c += 1) {
|
|
119
|
+
b.push(args[c]);
|
|
120
|
+
}
|
|
121
|
+
b.forEach(function (d) {
|
|
122
|
+
a = a.replace(/%[a-z]/, d);
|
|
123
|
+
});
|
|
124
|
+
return a;
|
|
125
|
+
}
|
|
126
|
+
/**
|
|
127
|
+
* Create an error file out of errors.md for development and a simple web link to the full errors
|
|
128
|
+
* in production mode.
|
|
129
|
+
*/
|
|
130
|
+
function throwStyledComponentsError(code) {
|
|
131
|
+
var interpolations = [];
|
|
132
|
+
for (var _i = 1; _i < arguments.length; _i++) {
|
|
133
|
+
interpolations[_i - 1] = arguments[_i];
|
|
134
|
+
}
|
|
135
|
+
{
|
|
136
|
+
return new Error(format.apply(void 0, __spreadArray([ERRORS[code]], interpolations, false)).trim());
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
/** Create a GroupedTag with an underlying Tag implementation */
|
|
141
|
+
var makeGroupedTag = function (tag) {
|
|
142
|
+
return new DefaultGroupedTag(tag);
|
|
143
|
+
};
|
|
144
|
+
var BASE_SIZE = 1 << 9;
|
|
145
|
+
var DefaultGroupedTag = /** @class */ (function () {
|
|
146
|
+
function DefaultGroupedTag(tag) {
|
|
147
|
+
this.groupSizes = new Uint32Array(BASE_SIZE);
|
|
148
|
+
this.length = BASE_SIZE;
|
|
149
|
+
this.tag = tag;
|
|
150
|
+
}
|
|
151
|
+
DefaultGroupedTag.prototype.indexOfGroup = function (group) {
|
|
152
|
+
var index = 0;
|
|
153
|
+
for (var i = 0; i < group; i++) {
|
|
154
|
+
index += this.groupSizes[i];
|
|
155
|
+
}
|
|
156
|
+
return index;
|
|
157
|
+
};
|
|
158
|
+
DefaultGroupedTag.prototype.insertRules = function (group, rules) {
|
|
159
|
+
if (group >= this.groupSizes.length) {
|
|
160
|
+
var oldBuffer = this.groupSizes;
|
|
161
|
+
var oldSize = oldBuffer.length;
|
|
162
|
+
var newSize = oldSize;
|
|
163
|
+
while (group >= newSize) {
|
|
164
|
+
newSize <<= 1;
|
|
165
|
+
if (newSize < 0) {
|
|
166
|
+
throw throwStyledComponentsError(16, "".concat(group));
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
this.groupSizes = new Uint32Array(newSize);
|
|
170
|
+
this.groupSizes.set(oldBuffer);
|
|
171
|
+
this.length = newSize;
|
|
172
|
+
for (var i = oldSize; i < newSize; i++) {
|
|
173
|
+
this.groupSizes[i] = 0;
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
var ruleIndex = this.indexOfGroup(group + 1);
|
|
177
|
+
if (Array.isArray(rules)) {
|
|
178
|
+
for (var i = 0, l = rules.length; i < l; i++) {
|
|
179
|
+
if (this.tag.insertRule(ruleIndex, rules[i])) {
|
|
180
|
+
this.groupSizes[group]++;
|
|
181
|
+
ruleIndex++;
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
else {
|
|
186
|
+
if (this.tag.insertRule(ruleIndex, rules)) {
|
|
187
|
+
this.groupSizes[group]++;
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
};
|
|
191
|
+
DefaultGroupedTag.prototype.clearGroup = function (group) {
|
|
192
|
+
if (group < this.length) {
|
|
193
|
+
var length_1 = this.groupSizes[group];
|
|
194
|
+
var startIndex = this.indexOfGroup(group);
|
|
195
|
+
var endIndex = startIndex + length_1;
|
|
196
|
+
this.groupSizes[group] = 0;
|
|
197
|
+
for (var i = startIndex; i < endIndex; i++) {
|
|
198
|
+
this.tag.deleteRule(startIndex);
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
};
|
|
202
|
+
DefaultGroupedTag.prototype.getGroup = function (group) {
|
|
203
|
+
var css = '';
|
|
204
|
+
if (group >= this.length || this.groupSizes[group] === 0) {
|
|
205
|
+
return css;
|
|
206
|
+
}
|
|
207
|
+
var length = this.groupSizes[group];
|
|
208
|
+
var startIndex = this.indexOfGroup(group);
|
|
209
|
+
var endIndex = startIndex + length;
|
|
210
|
+
for (var i = startIndex; i < endIndex; i++) {
|
|
211
|
+
css += "".concat(this.tag.getRule(i)).concat(SPLITTER);
|
|
212
|
+
}
|
|
213
|
+
return css;
|
|
214
|
+
};
|
|
215
|
+
return DefaultGroupedTag;
|
|
216
|
+
}());
|
|
217
|
+
|
|
218
|
+
var MAX_SMI = 1 << (31 - 1);
|
|
219
|
+
var groupIDRegister = new Map();
|
|
220
|
+
var reverseRegister = new Map();
|
|
221
|
+
var nextFreeGroup = 1;
|
|
222
|
+
var getGroupForId = function (id) {
|
|
223
|
+
if (groupIDRegister.has(id)) {
|
|
224
|
+
return groupIDRegister.get(id);
|
|
225
|
+
}
|
|
226
|
+
while (reverseRegister.has(nextFreeGroup)) {
|
|
227
|
+
nextFreeGroup++;
|
|
228
|
+
}
|
|
229
|
+
var group = nextFreeGroup++;
|
|
230
|
+
if (((group | 0) < 0 || group > MAX_SMI)) {
|
|
231
|
+
throw throwStyledComponentsError(16, "".concat(group));
|
|
232
|
+
}
|
|
233
|
+
groupIDRegister.set(id, group);
|
|
234
|
+
reverseRegister.set(group, id);
|
|
235
|
+
return group;
|
|
236
|
+
};
|
|
237
|
+
var getIdForGroup = function (group) {
|
|
238
|
+
return reverseRegister.get(group);
|
|
239
|
+
};
|
|
240
|
+
var setGroupForId = function (id, group) {
|
|
241
|
+
groupIDRegister.set(id, group);
|
|
242
|
+
reverseRegister.set(group, id);
|
|
243
|
+
};
|
|
244
|
+
|
|
245
|
+
var SELECTOR = "style[".concat(SC_ATTR, "][").concat(SC_ATTR_VERSION, "=\"").concat(SC_VERSION, "\"]");
|
|
246
|
+
var MARKER_RE = new RegExp("^".concat(SC_ATTR, "\\.g(\\d+)\\[id=\"([\\w\\d-]+)\"\\].*?\"([^\"]*)"));
|
|
247
|
+
var outputSheet = function (sheet) {
|
|
248
|
+
var tag = sheet.getTag();
|
|
249
|
+
var length = tag.length;
|
|
250
|
+
var css = '';
|
|
251
|
+
var _loop_1 = function (group) {
|
|
252
|
+
var id = getIdForGroup(group);
|
|
253
|
+
if (id === undefined)
|
|
254
|
+
return "continue";
|
|
255
|
+
var names = sheet.names.get(id);
|
|
256
|
+
var rules = tag.getGroup(group);
|
|
257
|
+
if (names === undefined || rules.length === 0)
|
|
258
|
+
return "continue";
|
|
259
|
+
var selector = "".concat(SC_ATTR, ".g").concat(group, "[id=\"").concat(id, "\"]");
|
|
260
|
+
var content = '';
|
|
261
|
+
if (names !== undefined) {
|
|
262
|
+
names.forEach(function (name) {
|
|
263
|
+
if (name.length > 0) {
|
|
264
|
+
content += "".concat(name, ",");
|
|
265
|
+
}
|
|
266
|
+
});
|
|
267
|
+
}
|
|
268
|
+
// NOTE: It's easier to collect rules and have the marker
|
|
269
|
+
// after the actual rules to simplify the rehydration
|
|
270
|
+
css += "".concat(rules).concat(selector, "{content:\"").concat(content, "\"}").concat(SPLITTER);
|
|
271
|
+
};
|
|
272
|
+
for (var group = 0; group < length; group++) {
|
|
273
|
+
_loop_1(group);
|
|
274
|
+
}
|
|
275
|
+
return css;
|
|
276
|
+
};
|
|
277
|
+
var rehydrateNamesFromContent = function (sheet, id, content) {
|
|
278
|
+
var names = content.split(',');
|
|
279
|
+
var name;
|
|
280
|
+
for (var i = 0, l = names.length; i < l; i++) {
|
|
281
|
+
// eslint-disable-next-line
|
|
282
|
+
if ((name = names[i])) {
|
|
283
|
+
sheet.registerName(id, name);
|
|
284
|
+
}
|
|
285
|
+
}
|
|
286
|
+
};
|
|
287
|
+
var rehydrateSheetFromTag = function (sheet, style) {
|
|
288
|
+
var _a;
|
|
289
|
+
var parts = ((_a = style.textContent) !== null && _a !== void 0 ? _a : '').split(SPLITTER);
|
|
290
|
+
var rules = [];
|
|
291
|
+
for (var i = 0, l = parts.length; i < l; i++) {
|
|
292
|
+
var part = parts[i].trim();
|
|
293
|
+
if (!part)
|
|
294
|
+
continue;
|
|
295
|
+
var marker = part.match(MARKER_RE);
|
|
296
|
+
if (marker) {
|
|
297
|
+
var group = parseInt(marker[1], 10) | 0;
|
|
298
|
+
var id = marker[2];
|
|
299
|
+
if (group !== 0) {
|
|
300
|
+
// Rehydrate componentId to group index mapping
|
|
301
|
+
setGroupForId(id, group);
|
|
302
|
+
// Rehydrate names and rules
|
|
303
|
+
// looks like: data-styled.g11[id="idA"]{content:"nameA,"}
|
|
304
|
+
rehydrateNamesFromContent(sheet, id, marker[3]);
|
|
305
|
+
sheet.getTag().insertRules(group, rules);
|
|
306
|
+
}
|
|
307
|
+
rules.length = 0;
|
|
308
|
+
}
|
|
309
|
+
else {
|
|
310
|
+
rules.push(part);
|
|
311
|
+
}
|
|
312
|
+
}
|
|
313
|
+
};
|
|
314
|
+
var rehydrateSheet = function (sheet) {
|
|
315
|
+
var nodes = document.querySelectorAll(SELECTOR);
|
|
316
|
+
for (var i = 0, l = nodes.length; i < l; i++) {
|
|
317
|
+
var node = nodes[i];
|
|
318
|
+
if (node && node.getAttribute(SC_ATTR) !== SC_ATTR_ACTIVE) {
|
|
319
|
+
rehydrateSheetFromTag(sheet, node);
|
|
320
|
+
if (node.parentNode) {
|
|
321
|
+
node.parentNode.removeChild(node);
|
|
322
|
+
}
|
|
323
|
+
}
|
|
324
|
+
}
|
|
325
|
+
};
|
|
326
|
+
|
|
327
|
+
function getNonce() {
|
|
328
|
+
return typeof __webpack_nonce__ !== 'undefined' ? __webpack_nonce__ : null;
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
var ELEMENT_TYPE = 1;
|
|
332
|
+
/* Node.ELEMENT_TYPE */
|
|
333
|
+
/** Find last style element if any inside target */
|
|
334
|
+
var findLastStyleTag = function (target) {
|
|
335
|
+
var childNodes = target.childNodes;
|
|
336
|
+
for (var i = childNodes.length; i >= 0; i--) {
|
|
337
|
+
var child = childNodes[i];
|
|
338
|
+
if (child && child.nodeType === ELEMENT_TYPE && child.hasAttribute(SC_ATTR)) {
|
|
339
|
+
return child;
|
|
340
|
+
}
|
|
341
|
+
}
|
|
342
|
+
return undefined;
|
|
343
|
+
};
|
|
344
|
+
/** Create a style element inside `target` or <head> after the last */
|
|
345
|
+
var makeStyleTag = function (target) {
|
|
346
|
+
var head = document.head;
|
|
347
|
+
var parent = target || head;
|
|
348
|
+
var style = document.createElement('style');
|
|
349
|
+
var prevStyle = findLastStyleTag(parent);
|
|
350
|
+
var nextSibling = prevStyle !== undefined ? prevStyle.nextSibling : null;
|
|
351
|
+
style.setAttribute(SC_ATTR, SC_ATTR_ACTIVE);
|
|
352
|
+
style.setAttribute(SC_ATTR_VERSION, SC_VERSION);
|
|
353
|
+
var nonce = getNonce();
|
|
354
|
+
if (nonce)
|
|
355
|
+
style.setAttribute('nonce', nonce);
|
|
356
|
+
parent.insertBefore(style, nextSibling);
|
|
357
|
+
return style;
|
|
358
|
+
};
|
|
359
|
+
/** Get the CSSStyleSheet instance for a given style element */
|
|
360
|
+
var getSheet = function (tag) {
|
|
361
|
+
if (tag.sheet) {
|
|
362
|
+
return tag.sheet;
|
|
363
|
+
}
|
|
364
|
+
// Avoid Firefox quirk where the style element might not have a sheet property
|
|
365
|
+
var styleSheets = document.styleSheets;
|
|
366
|
+
for (var i = 0, l = styleSheets.length; i < l; i++) {
|
|
367
|
+
var sheet = styleSheets[i];
|
|
368
|
+
if (sheet.ownerNode === tag) {
|
|
369
|
+
return sheet;
|
|
370
|
+
}
|
|
371
|
+
}
|
|
372
|
+
throw throwStyledComponentsError(17);
|
|
373
|
+
};
|
|
374
|
+
|
|
375
|
+
/** Create a CSSStyleSheet-like tag depending on the environment */
|
|
376
|
+
var makeTag = function (_a) {
|
|
377
|
+
var isServer = _a.isServer, useCSSOMInjection = _a.useCSSOMInjection, target = _a.target;
|
|
378
|
+
if (isServer) {
|
|
379
|
+
return new VirtualTag(target);
|
|
380
|
+
}
|
|
381
|
+
else if (useCSSOMInjection) {
|
|
382
|
+
return new CSSOMTag(target);
|
|
383
|
+
}
|
|
384
|
+
else {
|
|
385
|
+
return new TextTag(target);
|
|
386
|
+
}
|
|
387
|
+
};
|
|
388
|
+
var CSSOMTag = /** @class */ (function () {
|
|
389
|
+
function CSSOMTag(target) {
|
|
390
|
+
var element = (this.element = makeStyleTag(target));
|
|
391
|
+
// Avoid Edge bug where empty style elements don't create sheets
|
|
392
|
+
element.appendChild(document.createTextNode(''));
|
|
393
|
+
this.sheet = getSheet(element);
|
|
394
|
+
this.length = 0;
|
|
395
|
+
}
|
|
396
|
+
CSSOMTag.prototype.insertRule = function (index, rule) {
|
|
397
|
+
try {
|
|
398
|
+
this.sheet.insertRule(rule, index);
|
|
399
|
+
this.length++;
|
|
400
|
+
return true;
|
|
401
|
+
}
|
|
402
|
+
catch (_error) {
|
|
403
|
+
return false;
|
|
404
|
+
}
|
|
405
|
+
};
|
|
406
|
+
CSSOMTag.prototype.deleteRule = function (index) {
|
|
407
|
+
this.sheet.deleteRule(index);
|
|
408
|
+
this.length--;
|
|
409
|
+
};
|
|
410
|
+
CSSOMTag.prototype.getRule = function (index) {
|
|
411
|
+
var rule = this.sheet.cssRules[index];
|
|
412
|
+
// Avoid IE11 quirk where cssText is inaccessible on some invalid rules
|
|
413
|
+
if (rule !== undefined && typeof rule.cssText === 'string') {
|
|
414
|
+
return rule.cssText;
|
|
415
|
+
}
|
|
416
|
+
else {
|
|
417
|
+
return '';
|
|
418
|
+
}
|
|
419
|
+
};
|
|
420
|
+
return CSSOMTag;
|
|
421
|
+
}());
|
|
422
|
+
/** A Tag that emulates the CSSStyleSheet API but uses text nodes */
|
|
423
|
+
var TextTag = /** @class */ (function () {
|
|
424
|
+
function TextTag(target) {
|
|
425
|
+
var element = (this.element = makeStyleTag(target));
|
|
426
|
+
this.nodes = element.childNodes;
|
|
427
|
+
this.length = 0;
|
|
428
|
+
}
|
|
429
|
+
TextTag.prototype.insertRule = function (index, rule) {
|
|
430
|
+
if (index <= this.length && index >= 0) {
|
|
431
|
+
var node = document.createTextNode(rule);
|
|
432
|
+
var refNode = this.nodes[index];
|
|
433
|
+
this.element.insertBefore(node, refNode || null);
|
|
434
|
+
this.length++;
|
|
435
|
+
return true;
|
|
436
|
+
}
|
|
437
|
+
else {
|
|
438
|
+
return false;
|
|
439
|
+
}
|
|
440
|
+
};
|
|
441
|
+
TextTag.prototype.deleteRule = function (index) {
|
|
442
|
+
this.element.removeChild(this.nodes[index]);
|
|
443
|
+
this.length--;
|
|
444
|
+
};
|
|
445
|
+
TextTag.prototype.getRule = function (index) {
|
|
446
|
+
if (index < this.length) {
|
|
447
|
+
return this.nodes[index].textContent;
|
|
448
|
+
}
|
|
449
|
+
else {
|
|
450
|
+
return '';
|
|
451
|
+
}
|
|
452
|
+
};
|
|
453
|
+
return TextTag;
|
|
454
|
+
}());
|
|
455
|
+
/** A completely virtual (server-side) Tag that doesn't manipulate the DOM */
|
|
456
|
+
var VirtualTag = /** @class */ (function () {
|
|
457
|
+
function VirtualTag(_target) {
|
|
458
|
+
this.rules = [];
|
|
459
|
+
this.length = 0;
|
|
460
|
+
}
|
|
461
|
+
VirtualTag.prototype.insertRule = function (index, rule) {
|
|
462
|
+
if (index <= this.length) {
|
|
463
|
+
this.rules.splice(index, 0, rule);
|
|
464
|
+
this.length++;
|
|
465
|
+
return true;
|
|
466
|
+
}
|
|
467
|
+
else {
|
|
468
|
+
return false;
|
|
469
|
+
}
|
|
470
|
+
};
|
|
471
|
+
VirtualTag.prototype.deleteRule = function (index) {
|
|
472
|
+
this.rules.splice(index, 1);
|
|
473
|
+
this.length--;
|
|
474
|
+
};
|
|
475
|
+
VirtualTag.prototype.getRule = function (index) {
|
|
476
|
+
if (index < this.length) {
|
|
477
|
+
return this.rules[index];
|
|
478
|
+
}
|
|
479
|
+
else {
|
|
480
|
+
return '';
|
|
481
|
+
}
|
|
482
|
+
};
|
|
483
|
+
return VirtualTag;
|
|
484
|
+
}());
|
|
485
|
+
|
|
486
|
+
var SHOULD_REHYDRATE = IS_BROWSER;
|
|
487
|
+
var defaultOptions = {
|
|
488
|
+
isServer: !IS_BROWSER,
|
|
489
|
+
useCSSOMInjection: !DISABLE_SPEEDY,
|
|
490
|
+
};
|
|
491
|
+
/** Contains the main stylesheet logic for stringification and caching */
|
|
492
|
+
var StyleSheet = /** @class */ (function () {
|
|
493
|
+
function StyleSheet(options, globalStyles, names) {
|
|
494
|
+
if (options === void 0) { options = EMPTY_OBJECT; }
|
|
495
|
+
if (globalStyles === void 0) { globalStyles = {}; }
|
|
496
|
+
this.options = __assign(__assign({}, defaultOptions), options);
|
|
497
|
+
this.gs = globalStyles;
|
|
498
|
+
this.names = new Map(names);
|
|
499
|
+
this.server = !!options.isServer;
|
|
500
|
+
// We rehydrate only once and use the sheet that is created first
|
|
501
|
+
if (!this.server && IS_BROWSER && SHOULD_REHYDRATE) {
|
|
502
|
+
SHOULD_REHYDRATE = false;
|
|
503
|
+
rehydrateSheet(this);
|
|
504
|
+
}
|
|
505
|
+
}
|
|
506
|
+
/** Register a group ID to give it an index */
|
|
507
|
+
StyleSheet.registerId = function (id) {
|
|
508
|
+
return getGroupForId(id);
|
|
509
|
+
};
|
|
510
|
+
StyleSheet.prototype.reconstructWithOptions = function (options, withNames) {
|
|
511
|
+
if (withNames === void 0) { withNames = true; }
|
|
512
|
+
return new StyleSheet(__assign(__assign({}, this.options), options), this.gs, (withNames && this.names) || undefined);
|
|
513
|
+
};
|
|
514
|
+
StyleSheet.prototype.allocateGSInstance = function (id) {
|
|
515
|
+
return (this.gs[id] = (this.gs[id] || 0) + 1);
|
|
516
|
+
};
|
|
517
|
+
/** Lazily initialises a GroupedTag for when it's actually needed */
|
|
518
|
+
StyleSheet.prototype.getTag = function () {
|
|
519
|
+
return this.tag || (this.tag = makeGroupedTag(makeTag(this.options)));
|
|
520
|
+
};
|
|
521
|
+
/** Check whether a name is known for caching */
|
|
522
|
+
StyleSheet.prototype.hasNameForId = function (id, name) {
|
|
523
|
+
return this.names.has(id) && this.names.get(id).has(name);
|
|
524
|
+
};
|
|
525
|
+
/** Mark a group's name as known for caching */
|
|
526
|
+
StyleSheet.prototype.registerName = function (id, name) {
|
|
527
|
+
getGroupForId(id);
|
|
528
|
+
if (!this.names.has(id)) {
|
|
529
|
+
var groupNames = new Set();
|
|
530
|
+
groupNames.add(name);
|
|
531
|
+
this.names.set(id, groupNames);
|
|
532
|
+
}
|
|
533
|
+
else {
|
|
534
|
+
this.names.get(id).add(name);
|
|
535
|
+
}
|
|
536
|
+
};
|
|
537
|
+
/** Insert new rules which also marks the name as known */
|
|
538
|
+
StyleSheet.prototype.insertRules = function (id, name, rules) {
|
|
539
|
+
this.registerName(id, name);
|
|
540
|
+
this.getTag().insertRules(getGroupForId(id), rules);
|
|
541
|
+
};
|
|
542
|
+
/** Clears all cached names for a given group ID */
|
|
543
|
+
StyleSheet.prototype.clearNames = function (id) {
|
|
544
|
+
if (this.names.has(id)) {
|
|
545
|
+
this.names.get(id).clear();
|
|
546
|
+
}
|
|
547
|
+
};
|
|
548
|
+
/** Clears all rules for a given group ID */
|
|
549
|
+
StyleSheet.prototype.clearRules = function (id) {
|
|
550
|
+
this.getTag().clearGroup(getGroupForId(id));
|
|
551
|
+
this.clearNames(id);
|
|
552
|
+
};
|
|
553
|
+
/** Clears the entire tag which deletes all rules but not its names */
|
|
554
|
+
StyleSheet.prototype.clearTag = function () {
|
|
555
|
+
// NOTE: This does not clear the names, since it's only used during SSR
|
|
556
|
+
// so that we can continuously output only new rules
|
|
557
|
+
this.tag = undefined;
|
|
558
|
+
};
|
|
559
|
+
/** Outputs the current sheet as a CSS string with markers for SSR */
|
|
560
|
+
StyleSheet.prototype.toString = function () {
|
|
561
|
+
return outputSheet(this);
|
|
562
|
+
};
|
|
563
|
+
return StyleSheet;
|
|
564
|
+
}());
|
|
565
|
+
|
|
566
|
+
//
|
|
567
|
+
|
|
568
|
+
var shallowequal = function shallowEqual(objA, objB, compare, compareContext) {
|
|
569
|
+
var ret = compare ? compare.call(compareContext, objA, objB) : void 0;
|
|
570
|
+
|
|
571
|
+
if (ret !== void 0) {
|
|
572
|
+
return !!ret;
|
|
573
|
+
}
|
|
574
|
+
|
|
575
|
+
if (objA === objB) {
|
|
576
|
+
return true;
|
|
577
|
+
}
|
|
578
|
+
|
|
579
|
+
if (typeof objA !== "object" || !objA || typeof objB !== "object" || !objB) {
|
|
580
|
+
return false;
|
|
581
|
+
}
|
|
582
|
+
|
|
583
|
+
var keysA = Object.keys(objA);
|
|
584
|
+
var keysB = Object.keys(objB);
|
|
585
|
+
|
|
586
|
+
if (keysA.length !== keysB.length) {
|
|
587
|
+
return false;
|
|
588
|
+
}
|
|
589
|
+
|
|
590
|
+
var bHasOwnProperty = Object.prototype.hasOwnProperty.bind(objB);
|
|
591
|
+
|
|
592
|
+
// Test for A's keys different from B.
|
|
593
|
+
for (var idx = 0; idx < keysA.length; idx++) {
|
|
594
|
+
var key = keysA[idx];
|
|
595
|
+
|
|
596
|
+
if (!bHasOwnProperty(key)) {
|
|
597
|
+
return false;
|
|
598
|
+
}
|
|
599
|
+
|
|
600
|
+
var valueA = objA[key];
|
|
601
|
+
var valueB = objB[key];
|
|
602
|
+
|
|
603
|
+
ret = compare ? compare.call(compareContext, valueA, valueB, key) : void 0;
|
|
604
|
+
|
|
605
|
+
if (ret === false || (ret === void 0 && valueA !== valueB)) {
|
|
606
|
+
return false;
|
|
607
|
+
}
|
|
608
|
+
}
|
|
609
|
+
|
|
610
|
+
return true;
|
|
611
|
+
};
|
|
612
|
+
|
|
613
|
+
var e="-ms-";var r="-moz-";var a="-webkit-";var n="comm";var c="rule";var s="decl";var i="@import";var h="@keyframes";var $=Math.abs;var k=String.fromCharCode;var g=Object.assign;function m(e,r){return (((r<<2^z(e,0))<<2^z(e,1))<<2^z(e,2))<<2^z(e,3)}function x(e){return e.trim()}function y(e,r){return (e=r.exec(e))?e[0]:e}function j(e,r,a){return e.replace(r,a)}function C(e,r){return e.indexOf(r)}function z(e,r){return e.charCodeAt(r)|0}function A(e,r,a){return e.slice(r,a)}function O(e){return e.length}function M(e){return e.length}function S(e,r){return r.push(e),e}function q(e,r){return e.map(r).join("")}var B=1;var D=1;var E=0;var F=0;var G=0;var H="";function I(e,r,a,n,c,s,t){return {value:e,root:r,parent:a,type:n,props:c,children:s,line:B,column:D,length:t,return:""}}function J(e,r){return g(I("",null,null,"",null,null,0),e,{length:-e.length},r)}function K(){return G}function L(){G=F>0?z(H,--F):0;if(D--,G===10)D=1,B--;return G}function N(){G=F<E?z(H,F++):0;if(D++,G===10)D=1,B++;return G}function P(){return z(H,F)}function Q(){return F}function R(e,r){return A(H,e,r)}function T(e){switch(e){case 0:case 9:case 10:case 13:case 32:return 5;case 33:case 43:case 44:case 47:case 62:case 64:case 126:case 59:case 123:case 125:return 4;case 58:return 3;case 34:case 39:case 40:case 91:return 2;case 41:case 93:return 1}return 0}function U(e){return B=D=1,E=O(H=e),F=0,[]}function V(e){return H="",e}function W(e){return x(R(F-1,ee(e===91?e+2:e===40?e+1:e)))}function Y(e){while(G=P())if(G<33)N();else break;return T(e)>2||T(G)>3?"":" "}function _(e,r){while(--r&&N())if(G<48||G>102||G>57&&G<65||G>70&&G<97)break;return R(e,Q()+(r<6&&P()==32&&N()==32))}function ee(e){while(N())switch(G){case e:return F;case 34:case 39:if(e!==34&&e!==39)ee(G);break;case 40:if(e===41)ee(e);break;case 92:N();break}return F}function re(e,r){while(N())if(e+G===47+10)break;else if(e+G===42+42&&P()===47)break;return "/*"+R(r,F-1)+"*"+k(e===47?e:N())}function ae(e){while(!T(P()))N();return R(e,F)}function ne(e){return V(ce("",null,null,null,[""],e=U(e),0,[0],e))}function ce(e,r,a,n,c,s,t,u,i){var f=0;var o=0;var l=t;var v=0;var p=0;var h=0;var b=1;var w=1;var d=1;var $=0;var g="";var m=c;var x=s;var y=n;var z=g;while(w)switch(h=$,$=N()){case 40:if(h!=108&&z.charCodeAt(l-1)==58){if(C(z+=j(W($),"&","&\f"),"&\f")!=-1)d=-1;break}case 34:case 39:case 91:z+=W($);break;case 9:case 10:case 13:case 32:z+=Y(h);break;case 92:z+=_(Q()-1,7);continue;case 47:switch(P()){case 42:case 47:S(te(re(N(),Q()),r,a),i);break;default:z+="/";}break;case 123*b:u[f++]=O(z)*d;case 125*b:case 59:case 0:switch($){case 0:case 125:w=0;case 59+o:if(p>0&&O(z)-l)S(p>32?ue(z+";",n,a,l-1):ue(j(z," ","")+";",n,a,l-2),i);break;case 59:z+=";";default:S(y=se(z,r,a,f,o,c,u,g,m=[],x=[],l),s);if($===123)if(o===0)ce(z,r,y,y,m,s,l,u,x);else switch(v){case 100:case 109:case 115:ce(e,y,y,n&&S(se(e,y,y,0,0,c,u,g,c,m=[],l),x),c,x,l,u,n?m:x);break;default:ce(z,y,y,y,[""],x,0,u,x);}}f=o=p=0,b=d=1,g=z="",l=t;break;case 58:l=1+O(z),p=h;default:if(b<1)if($==123)--b;else if($==125&&b++==0&&L()==125)continue;switch(z+=k($),$*b){case 38:d=o>0?1:(z+="\f",-1);break;case 44:u[f++]=(O(z)-1)*d,d=1;break;case 64:if(P()===45)z+=W(N());v=P(),o=l=O(g=z+=ae(Q())),$++;break;case 45:if(h===45&&O(z)==2)b=0;}}return s}function se(e,r,a,n,s,t,u,i,f,o,l){var v=s-1;var p=s===0?t:[""];var h=M(p);for(var b=0,w=0,d=0;b<n;++b)for(var k=0,g=A(e,v+1,v=$(w=u[b])),m=e;k<h;++k)if(m=x(w>0?p[k]+" "+g:j(g,/&\f/g,p[k])))f[d++]=m;return I(e,r,a,s===0?c:i,f,o,l)}function te(e,r,a){return I(e,r,a,n,k(K()),A(e,2,-2),0)}function ue(e,r,a,n){return I(e,r,a,s,A(e,0,n),A(e,n+1,-1),n)}function ie(n,c,s){switch(m(n,c)){case 5103:return a+"print-"+n+n;case 5737:case 4201:case 3177:case 3433:case 1641:case 4457:case 2921:case 5572:case 6356:case 5844:case 3191:case 6645:case 3005:case 6391:case 5879:case 5623:case 6135:case 4599:case 4855:case 4215:case 6389:case 5109:case 5365:case 5621:case 3829:return a+n+n;case 4789:return r+n+n;case 5349:case 4246:case 4810:case 6968:case 2756:return a+n+r+n+e+n+n;case 6828:case 4268:return a+n+e+n+n;case 6165:return a+n+e+"flex-"+n+n;case 5187:return a+n+j(n,/(\w+).+(:[^]+)/,a+"box-$1$2"+e+"flex-$1$2")+n;case 5443:return a+n+e+"flex-item-"+j(n,/flex-|-self/g,"")+(!y(n,/flex-|baseline/)?e+"grid-row-"+j(n,/flex-|-self/g,""):"")+n;case 4675:return a+n+e+"flex-line-pack"+j(n,/align-content|flex-|-self/g,"")+n;case 5548:return a+n+e+j(n,"shrink","negative")+n;case 5292:return a+n+e+j(n,"basis","preferred-size")+n;case 6060:return a+"box-"+j(n,"-grow","")+a+n+e+j(n,"grow","positive")+n;case 4554:return a+j(n,/([^-])(transform)/g,"$1"+a+"$2")+n;case 6187:return j(j(j(n,/(zoom-|grab)/,a+"$1"),/(image-set)/,a+"$1"),n,"")+n;case 5495:case 3959:return j(n,/(image-set\([^]*)/,a+"$1"+"$`$1");case 4968:return j(j(n,/(.+:)(flex-)?(.*)/,a+"box-pack:$3"+e+"flex-pack:$3"),/s.+-b[^;]+/,"justify")+a+n+n;case 4200:if(!y(n,/flex-|baseline/))return e+"grid-column-align"+A(n,c)+n;break;case 2592:case 3360:return e+j(n,"template-","")+n;case 4384:case 3616:if(s&&s.some((function(e,r){return c=r,y(e.props,/grid-\w+-end/)}))){return ~C(n+(s=s[c].value),"span")?n:e+j(n,"-start","")+n+e+"grid-row-span:"+(~C(s,"span")?y(s,/\d+/):+y(s,/\d+/)-+y(n,/\d+/))+";"}else {return e+j(n,"-start","")+n}case 4896:case 4128:return s&&s.some((function(e){return y(e.props,/grid-\w+-start/)}))?n:e+j(j(n,"-end","-span"),"span ","")+n;case 4095:case 3583:case 4068:case 2532:return j(n,/(.+)-inline(.+)/,a+"$1$2")+n;case 8116:case 7059:case 5753:case 5535:case 5445:case 5701:case 4933:case 4677:case 5533:case 5789:case 5021:case 4765:if(O(n)-1-c>6)switch(z(n,c+1)){case 109:if(z(n,c+4)!==45)break;case 102:return j(n,/(.+:)(.+)-([^]+)/,"$1"+a+"$2-$3"+"$1"+r+(z(n,c+3)==108?"$3":"$2-$3"))+n;case 115:return ~C(n,"stretch")?ie(j(n,"stretch","fill-available"),c,s)+n:n}break;case 5152:case 5920:return j(n,/(.+?):(\d+)(\s*\/\s*(span)?\s*(\d+))?(.*)/,(function(r,a,c,s,t,u,i){return e+a+":"+c+i+(s?e+a+"-span:"+(t?u:+u-+c)+i:"")+n}));case 4949:if(z(n,c+6)===121)return j(n,":",":"+a)+n;break;case 6444:switch(z(n,z(n,14)===45?18:11)){case 120:return j(n,/(.+:)([^;\s!]+)(;|(\s+)?!.+)?/,"$1"+a+(z(n,14)===45?"inline-":"")+"box$3"+"$1"+a+"$2$3"+"$1"+e+"$2box$3")+n;case 100:return j(n,":",":"+e)+n}break;case 5936:switch(z(n,c+11)){case 114:return a+n+e+j(n,/[svh]\w+-[tblr]{2}/,"tb")+n;case 108:return a+n+e+j(n,/[svh]\w+-[tblr]{2}/,"tb-rl")+n;case 45:return a+n+e+j(n,/[svh]\w+-[tblr]{2}/,"lr")+n}case 2903:return a+n+e+n+n;case 5719:case 2647:case 2135:case 3927:case 2391:return j(n,"scroll-","scroll-snap-")+n}return n}function fe(e,r){var a="";var n=M(e);for(var c=0;c<n;c++)a+=r(e[c],c,e,r)||"";return a}function oe(e,r,a,t){switch(e.type){case i:case s:return e.return=e.return||e.value;case n:return "";case h:return e.return=e.value+"{"+fe(e.children,t)+"}";case c:e.value=e.props.join(",");}return O(a=fe(e.children,t))?e.return=e.value+"{"+a+"}":""}function le(e){var r=M(e);return function(a,n,c,s){var t="";for(var u=0;u<r;u++)t+=e[u](a,n,c,s)||"";return t}}function pe(n,t,u,i){if(n.length>-1)if(!n.return)switch(n.type){case s:n.return=ie(n.value,n.length,u);return;case h:return fe([J(n,{value:j(n.value,"@","@"+a)})],i);case c:if(n.length)return q(n.props,(function(c){switch(y(c,/(::plac\w+|:read-\w+)/)){case":read-only":case":read-write":return fe([J(n,{props:[j(c,/:(read-\w+)/,":"+r+"$1")]})],i);case"::placeholder":return fe([J(n,{props:[j(c,/:(plac\w+)/,":"+a+"input-$1")]}),J(n,{props:[j(c,/:(plac\w+)/,":"+r+"$1")]}),J(n,{props:[j(c,/:(plac\w+)/,e+"input-$1")]})],i)}return ""}))}}
|
|
614
|
+
|
|
615
|
+
var SEED$1 = 5381;
|
|
616
|
+
// When we have separate strings it's useful to run a progressive
|
|
617
|
+
// version of djb2 where we pretend that we're still looping over
|
|
618
|
+
// the same string
|
|
619
|
+
var phash = function (h, x) {
|
|
620
|
+
var i = x.length;
|
|
621
|
+
while (i) {
|
|
622
|
+
h = (h * 33) ^ x.charCodeAt(--i);
|
|
623
|
+
}
|
|
624
|
+
return h;
|
|
625
|
+
};
|
|
626
|
+
// This is a djb2 hashing function
|
|
627
|
+
var hash = function (x) {
|
|
628
|
+
return phash(SEED$1, x);
|
|
629
|
+
};
|
|
630
|
+
|
|
631
|
+
var COMMENT_REGEX = /^\s*\/\/.*$/gm;
|
|
632
|
+
var COMPLEX_SELECTOR_PREFIX = [':', '[', '.', '#'];
|
|
633
|
+
/**
|
|
634
|
+
* Serialize stylis output as an array of css strings. It is important that rules are
|
|
635
|
+
* separated when using CSSOM injection.
|
|
636
|
+
*/
|
|
637
|
+
function serialize(children, callback) {
|
|
638
|
+
return children.map(function (c, i) { return callback(c, i, children, callback); }).filter(Boolean);
|
|
639
|
+
}
|
|
640
|
+
function createStylisInstance(_a) {
|
|
641
|
+
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;
|
|
642
|
+
var _componentId;
|
|
643
|
+
var _selector;
|
|
644
|
+
var _selectorRegexp;
|
|
645
|
+
var _consecutiveSelfRefRegExp;
|
|
646
|
+
var selfReferenceReplacer = function (match, offset, string) {
|
|
647
|
+
if (
|
|
648
|
+
// do not replace the first occurrence if it is complex (has a modifier)
|
|
649
|
+
(offset === 0 ? !COMPLEX_SELECTOR_PREFIX.includes(string[_selector.length]) : true) && // no consecutive self refs (.b.b); that is a precedence boost and treated differently
|
|
650
|
+
!string.match(_consecutiveSelfRefRegExp)) {
|
|
651
|
+
return ".".concat(_componentId);
|
|
652
|
+
}
|
|
653
|
+
return match;
|
|
654
|
+
};
|
|
655
|
+
/**
|
|
656
|
+
* When writing a style like
|
|
657
|
+
*
|
|
658
|
+
* & + & {
|
|
659
|
+
* color: red;
|
|
660
|
+
* }
|
|
661
|
+
*
|
|
662
|
+
* The second ampersand should be a reference to the static component class. stylis
|
|
663
|
+
* has no knowledge of static class so we have to intelligently replace the base selector.
|
|
664
|
+
*
|
|
665
|
+
* https://github.com/thysultan/stylis.js/tree/v4.0.2#abstract-syntax-structure
|
|
666
|
+
*/
|
|
667
|
+
var selfReferenceReplacementPlugin = function (element) {
|
|
668
|
+
if (element.type === c && element.value.includes('&')) {
|
|
669
|
+
var props = element.props;
|
|
670
|
+
props[0] = props[0].replace(_selectorRegexp, selfReferenceReplacer);
|
|
671
|
+
}
|
|
672
|
+
};
|
|
673
|
+
var stringifyRules = function (css, selector, prefix, componentId) {
|
|
674
|
+
if (selector === void 0) { selector = ''; }
|
|
675
|
+
if (prefix === void 0) { prefix = ''; }
|
|
676
|
+
if (componentId === void 0) { componentId = '&'; }
|
|
677
|
+
var flatCSS = css.replace(COMMENT_REGEX, '');
|
|
678
|
+
// stylis has no concept of state to be passed to plugins
|
|
679
|
+
// but since JS is single-threaded, we can rely on that to ensure
|
|
680
|
+
// these properties stay in sync with the current stylis run
|
|
681
|
+
_componentId = componentId;
|
|
682
|
+
_selector = selector;
|
|
683
|
+
_selectorRegexp = new RegExp("\\".concat(_selector, "\\b"), 'g');
|
|
684
|
+
_consecutiveSelfRefRegExp = new RegExp("(\\".concat(_selector, "\\b){2,}"));
|
|
685
|
+
var middlewares = plugins.slice();
|
|
686
|
+
if (options.prefix || options.prefix === undefined) {
|
|
687
|
+
middlewares.unshift(pe);
|
|
688
|
+
}
|
|
689
|
+
middlewares.push(selfReferenceReplacementPlugin, oe);
|
|
690
|
+
return serialize(ne(prefix || selector ? "".concat(prefix, " ").concat(selector, " { ").concat(flatCSS, " }") : flatCSS), le(middlewares));
|
|
691
|
+
};
|
|
692
|
+
stringifyRules.hash = plugins.length
|
|
693
|
+
? plugins
|
|
694
|
+
.reduce(function (acc, plugin) {
|
|
695
|
+
if (!plugin.name) {
|
|
696
|
+
throwStyledComponentsError(15);
|
|
697
|
+
}
|
|
698
|
+
return phash(acc, plugin.name);
|
|
699
|
+
}, SEED$1)
|
|
700
|
+
.toString()
|
|
701
|
+
: '';
|
|
702
|
+
return stringifyRules;
|
|
703
|
+
}
|
|
704
|
+
|
|
705
|
+
var StyleSheetContext = React__default["default"].createContext(undefined);
|
|
706
|
+
var StyleSheetConsumer = StyleSheetContext.Consumer;
|
|
707
|
+
var StylisContext = React__default["default"].createContext(undefined);
|
|
708
|
+
var mainSheet = new StyleSheet();
|
|
709
|
+
var mainStylis = createStylisInstance();
|
|
710
|
+
function useStyleSheet() {
|
|
711
|
+
return React.useContext(StyleSheetContext) || mainSheet;
|
|
712
|
+
}
|
|
713
|
+
function useStylis() {
|
|
714
|
+
return React.useContext(StylisContext) || mainStylis;
|
|
715
|
+
}
|
|
716
|
+
function StyleSheetManager(props) {
|
|
717
|
+
var _a = React.useState(props.stylisPlugins), plugins = _a[0], setPlugins = _a[1];
|
|
718
|
+
var contextStyleSheet = useStyleSheet();
|
|
719
|
+
var styleSheet = React.useMemo(function () {
|
|
720
|
+
var sheet = contextStyleSheet;
|
|
721
|
+
if (props.sheet) {
|
|
722
|
+
// eslint-disable-next-line prefer-destructuring
|
|
723
|
+
sheet = props.sheet;
|
|
724
|
+
}
|
|
725
|
+
else if (props.target) {
|
|
726
|
+
sheet = sheet.reconstructWithOptions({ target: props.target }, false);
|
|
727
|
+
}
|
|
728
|
+
if (props.disableCSSOMInjection) {
|
|
729
|
+
sheet = sheet.reconstructWithOptions({ useCSSOMInjection: false });
|
|
730
|
+
}
|
|
731
|
+
return sheet;
|
|
732
|
+
}, [props.disableCSSOMInjection, props.sheet, props.target]);
|
|
733
|
+
var stylis = React.useMemo(function () {
|
|
734
|
+
return createStylisInstance({
|
|
735
|
+
options: { prefix: !props.disableVendorPrefixes },
|
|
736
|
+
plugins: plugins,
|
|
737
|
+
});
|
|
738
|
+
}, [props.disableVendorPrefixes, plugins]);
|
|
739
|
+
React.useEffect(function () {
|
|
740
|
+
if (!shallowequal(plugins, props.stylisPlugins))
|
|
741
|
+
setPlugins(props.stylisPlugins);
|
|
742
|
+
}, [props.stylisPlugins]);
|
|
743
|
+
return (React__default["default"].createElement(StyleSheetContext.Provider, { value: styleSheet },
|
|
744
|
+
React__default["default"].createElement(StylisContext.Provider, { value: stylis }, React__default["default"].Children.only(props.children)
|
|
745
|
+
)));
|
|
746
|
+
}
|
|
747
|
+
|
|
748
|
+
var Keyframes = /** @class */ (function () {
|
|
749
|
+
function Keyframes(name, rules) {
|
|
750
|
+
var _this = this;
|
|
751
|
+
this.inject = function (styleSheet, stylisInstance) {
|
|
752
|
+
if (stylisInstance === void 0) { stylisInstance = mainStylis; }
|
|
753
|
+
var resolvedName = _this.name + stylisInstance.hash;
|
|
754
|
+
if (!styleSheet.hasNameForId(_this.id, resolvedName)) {
|
|
755
|
+
styleSheet.insertRules(_this.id, resolvedName, stylisInstance(_this.rules, resolvedName, '@keyframes'));
|
|
756
|
+
}
|
|
757
|
+
};
|
|
758
|
+
this.toString = function () {
|
|
759
|
+
throw throwStyledComponentsError(12, String(_this.name));
|
|
760
|
+
};
|
|
761
|
+
this.name = name;
|
|
762
|
+
this.id = "sc-keyframes-".concat(name);
|
|
763
|
+
this.rules = rules;
|
|
764
|
+
}
|
|
765
|
+
Keyframes.prototype.getName = function (stylisInstance) {
|
|
766
|
+
if (stylisInstance === void 0) { stylisInstance = mainStylis; }
|
|
767
|
+
return this.name + stylisInstance.hash;
|
|
768
|
+
};
|
|
769
|
+
return Keyframes;
|
|
770
|
+
}());
|
|
771
|
+
|
|
772
|
+
function unwrapExports (x) {
|
|
773
|
+
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
|
|
774
|
+
}
|
|
775
|
+
|
|
776
|
+
function createCommonjsModule(fn, module) {
|
|
777
|
+
return module = { exports: {} }, fn(module, module.exports), module.exports;
|
|
778
|
+
}
|
|
779
|
+
|
|
780
|
+
var unitless_cjs_prod = createCommonjsModule(function (module, exports) {
|
|
781
|
+
|
|
782
|
+
Object.defineProperty(exports, "__esModule", {
|
|
783
|
+
value: !0
|
|
784
|
+
});
|
|
785
|
+
|
|
786
|
+
var unitlessKeys = {
|
|
787
|
+
animationIterationCount: 1,
|
|
788
|
+
borderImageOutset: 1,
|
|
789
|
+
borderImageSlice: 1,
|
|
790
|
+
borderImageWidth: 1,
|
|
791
|
+
boxFlex: 1,
|
|
792
|
+
boxFlexGroup: 1,
|
|
793
|
+
boxOrdinalGroup: 1,
|
|
794
|
+
columnCount: 1,
|
|
795
|
+
columns: 1,
|
|
796
|
+
flex: 1,
|
|
797
|
+
flexGrow: 1,
|
|
798
|
+
flexPositive: 1,
|
|
799
|
+
flexShrink: 1,
|
|
800
|
+
flexNegative: 1,
|
|
801
|
+
flexOrder: 1,
|
|
802
|
+
gridRow: 1,
|
|
803
|
+
gridRowEnd: 1,
|
|
804
|
+
gridRowSpan: 1,
|
|
805
|
+
gridRowStart: 1,
|
|
806
|
+
gridColumn: 1,
|
|
807
|
+
gridColumnEnd: 1,
|
|
808
|
+
gridColumnSpan: 1,
|
|
809
|
+
gridColumnStart: 1,
|
|
810
|
+
msGridRow: 1,
|
|
811
|
+
msGridRowSpan: 1,
|
|
812
|
+
msGridColumn: 1,
|
|
813
|
+
msGridColumnSpan: 1,
|
|
814
|
+
fontWeight: 1,
|
|
815
|
+
lineHeight: 1,
|
|
816
|
+
opacity: 1,
|
|
817
|
+
order: 1,
|
|
818
|
+
orphans: 1,
|
|
819
|
+
tabSize: 1,
|
|
820
|
+
widows: 1,
|
|
821
|
+
zIndex: 1,
|
|
822
|
+
zoom: 1,
|
|
823
|
+
WebkitLineClamp: 1,
|
|
824
|
+
fillOpacity: 1,
|
|
825
|
+
floodOpacity: 1,
|
|
826
|
+
stopOpacity: 1,
|
|
827
|
+
strokeDasharray: 1,
|
|
828
|
+
strokeDashoffset: 1,
|
|
829
|
+
strokeMiterlimit: 1,
|
|
830
|
+
strokeOpacity: 1,
|
|
831
|
+
strokeWidth: 1
|
|
832
|
+
};
|
|
833
|
+
|
|
834
|
+
exports.default = unitlessKeys;
|
|
835
|
+
});
|
|
836
|
+
|
|
837
|
+
unwrapExports(unitless_cjs_prod);
|
|
838
|
+
|
|
839
|
+
var unitless_cjs_dev = createCommonjsModule(function (module, exports) {
|
|
840
|
+
|
|
841
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
842
|
+
|
|
843
|
+
var unitlessKeys = {
|
|
844
|
+
animationIterationCount: 1,
|
|
845
|
+
borderImageOutset: 1,
|
|
846
|
+
borderImageSlice: 1,
|
|
847
|
+
borderImageWidth: 1,
|
|
848
|
+
boxFlex: 1,
|
|
849
|
+
boxFlexGroup: 1,
|
|
850
|
+
boxOrdinalGroup: 1,
|
|
851
|
+
columnCount: 1,
|
|
852
|
+
columns: 1,
|
|
853
|
+
flex: 1,
|
|
854
|
+
flexGrow: 1,
|
|
855
|
+
flexPositive: 1,
|
|
856
|
+
flexShrink: 1,
|
|
857
|
+
flexNegative: 1,
|
|
858
|
+
flexOrder: 1,
|
|
859
|
+
gridRow: 1,
|
|
860
|
+
gridRowEnd: 1,
|
|
861
|
+
gridRowSpan: 1,
|
|
862
|
+
gridRowStart: 1,
|
|
863
|
+
gridColumn: 1,
|
|
864
|
+
gridColumnEnd: 1,
|
|
865
|
+
gridColumnSpan: 1,
|
|
866
|
+
gridColumnStart: 1,
|
|
867
|
+
msGridRow: 1,
|
|
868
|
+
msGridRowSpan: 1,
|
|
869
|
+
msGridColumn: 1,
|
|
870
|
+
msGridColumnSpan: 1,
|
|
871
|
+
fontWeight: 1,
|
|
872
|
+
lineHeight: 1,
|
|
873
|
+
opacity: 1,
|
|
874
|
+
order: 1,
|
|
875
|
+
orphans: 1,
|
|
876
|
+
tabSize: 1,
|
|
877
|
+
widows: 1,
|
|
878
|
+
zIndex: 1,
|
|
879
|
+
zoom: 1,
|
|
880
|
+
WebkitLineClamp: 1,
|
|
881
|
+
// SVG-related properties
|
|
882
|
+
fillOpacity: 1,
|
|
883
|
+
floodOpacity: 1,
|
|
884
|
+
stopOpacity: 1,
|
|
885
|
+
strokeDasharray: 1,
|
|
886
|
+
strokeDashoffset: 1,
|
|
887
|
+
strokeMiterlimit: 1,
|
|
888
|
+
strokeOpacity: 1,
|
|
889
|
+
strokeWidth: 1
|
|
890
|
+
};
|
|
891
|
+
|
|
892
|
+
exports.default = unitlessKeys;
|
|
893
|
+
});
|
|
894
|
+
|
|
895
|
+
unwrapExports(unitless_cjs_dev);
|
|
896
|
+
|
|
897
|
+
var unitless_cjs = createCommonjsModule(function (module) {
|
|
898
|
+
|
|
899
|
+
{
|
|
900
|
+
module.exports = unitless_cjs_dev;
|
|
901
|
+
}
|
|
902
|
+
});
|
|
903
|
+
|
|
904
|
+
// Taken from https://github.com/facebook/react/blob/b87aabdfe1b7461e7331abb3601d9e6bb27544bc/packages/react-dom/src/shared/dangerousStyleValue.js
|
|
905
|
+
function addUnitIfNeeded(name, value) {
|
|
906
|
+
// https://github.com/amilajack/eslint-plugin-flowtype-errors/issues/133
|
|
907
|
+
if (value == null || typeof value === 'boolean' || value === '') {
|
|
908
|
+
return '';
|
|
909
|
+
}
|
|
910
|
+
if (typeof value === 'number' && value !== 0 && !(name in unitless_cjs)) {
|
|
911
|
+
return "".concat(value, "px"); // Presumes implicit 'px' suffix for unitless numbers
|
|
912
|
+
}
|
|
913
|
+
return String(value).trim();
|
|
914
|
+
}
|
|
915
|
+
|
|
916
|
+
function getComponentName(target) {
|
|
917
|
+
return ((typeof target === 'string' && target ) ||
|
|
918
|
+
target.displayName ||
|
|
919
|
+
target.name ||
|
|
920
|
+
'Component');
|
|
921
|
+
}
|
|
922
|
+
|
|
923
|
+
/**
|
|
924
|
+
* inlined version of
|
|
925
|
+
* https://github.com/facebook/fbjs/blob/master/packages/fbjs/src/core/hyphenateStyleName.js
|
|
926
|
+
*/
|
|
927
|
+
var uppercaseCheck = /([A-Z])/;
|
|
928
|
+
var uppercasePattern = /([A-Z])/g;
|
|
929
|
+
var msPattern = /^ms-/;
|
|
930
|
+
var prefixAndLowerCase = function (char) { return "-".concat(char.toLowerCase()); };
|
|
931
|
+
/**
|
|
932
|
+
* Hyphenates a camelcased CSS property name, for example:
|
|
933
|
+
*
|
|
934
|
+
* > hyphenateStyleName('backgroundColor')
|
|
935
|
+
* < "background-color"
|
|
936
|
+
* > hyphenateStyleName('MozTransition')
|
|
937
|
+
* < "-moz-transition"
|
|
938
|
+
* > hyphenateStyleName('msTransition')
|
|
939
|
+
* < "-ms-transition"
|
|
940
|
+
*
|
|
941
|
+
* As Modernizr suggests (http://modernizr.com/docs/#prefixed), an `ms` prefix
|
|
942
|
+
* is converted to `-ms-`.
|
|
943
|
+
*/
|
|
944
|
+
function hyphenateStyleName(string) {
|
|
945
|
+
return uppercaseCheck.test(string)
|
|
946
|
+
? string.replace(uppercasePattern, prefixAndLowerCase).replace(msPattern, '-ms-')
|
|
947
|
+
: string;
|
|
948
|
+
}
|
|
949
|
+
|
|
950
|
+
function isFunction(test) {
|
|
951
|
+
return typeof test === 'function';
|
|
952
|
+
}
|
|
953
|
+
|
|
954
|
+
function isPlainObject(x) {
|
|
955
|
+
return (x !== null &&
|
|
956
|
+
typeof x === 'object' &&
|
|
957
|
+
/* a check for empty prototype would be more typical, but that
|
|
958
|
+
doesn't play well with objects created in different vm contexts */
|
|
959
|
+
(!x.constructor || x.constructor.name === 'Object') &&
|
|
960
|
+
(x.toString ? x.toString() : Object.prototype.toString.call(x)) === '[object Object]' &&
|
|
961
|
+
/* check for reasonable markers that the object isn't an element for react & preact/compat */
|
|
962
|
+
!('props' in x && (x.$$typeof || x.constructor === undefined)));
|
|
963
|
+
}
|
|
964
|
+
|
|
965
|
+
function isStatelessFunction(test) {
|
|
966
|
+
return typeof test === 'function' && !(test.prototype && test.prototype.isReactComponent);
|
|
967
|
+
}
|
|
968
|
+
|
|
969
|
+
function isStyledComponent(target) {
|
|
970
|
+
return typeof target === 'object' && 'styledComponentId' in target;
|
|
971
|
+
}
|
|
972
|
+
|
|
973
|
+
/**
|
|
974
|
+
* It's falsish not falsy because 0 is allowed.
|
|
975
|
+
*/
|
|
976
|
+
var isFalsish = function (chunk) {
|
|
977
|
+
return chunk === undefined || chunk === null || chunk === false || chunk === '';
|
|
978
|
+
};
|
|
979
|
+
var objToCssArray = function (obj, prevKey) {
|
|
980
|
+
var rules = [];
|
|
981
|
+
for (var key in obj) {
|
|
982
|
+
if (!obj.hasOwnProperty(key) || isFalsish(obj[key]))
|
|
983
|
+
continue;
|
|
984
|
+
if ((Array.isArray(obj[key]) && obj[key].isCss) || isFunction(obj[key])) {
|
|
985
|
+
rules.push("".concat(hyphenateStyleName(key), ":"), obj[key], ';');
|
|
986
|
+
}
|
|
987
|
+
else if (isPlainObject(obj[key])) {
|
|
988
|
+
rules.push.apply(rules, objToCssArray(obj[key], key));
|
|
989
|
+
}
|
|
990
|
+
else {
|
|
991
|
+
rules.push("".concat(hyphenateStyleName(key), ": ").concat(addUnitIfNeeded(key, obj[key]), ";"));
|
|
992
|
+
}
|
|
993
|
+
}
|
|
994
|
+
return prevKey ? __spreadArray(__spreadArray(["".concat(prevKey, " {")], rules, true), ['}'], false) : rules;
|
|
995
|
+
};
|
|
996
|
+
function flatten(chunk, executionContext, styleSheet, stylisInstance) {
|
|
997
|
+
if (Array.isArray(chunk)) {
|
|
998
|
+
var ruleSet = [];
|
|
999
|
+
for (var i = 0, len = chunk.length, result = void 0; i < len; i += 1) {
|
|
1000
|
+
result = flatten(chunk[i], executionContext, styleSheet, stylisInstance);
|
|
1001
|
+
if (result === '')
|
|
1002
|
+
continue;
|
|
1003
|
+
else if (Array.isArray(result))
|
|
1004
|
+
ruleSet.push.apply(ruleSet, result);
|
|
1005
|
+
else
|
|
1006
|
+
ruleSet.push(result);
|
|
1007
|
+
}
|
|
1008
|
+
return ruleSet;
|
|
1009
|
+
}
|
|
1010
|
+
if (isFalsish(chunk)) {
|
|
1011
|
+
return '';
|
|
1012
|
+
}
|
|
1013
|
+
/* Handle other components */
|
|
1014
|
+
if (isStyledComponent(chunk)) {
|
|
1015
|
+
return ".".concat(chunk.styledComponentId);
|
|
1016
|
+
}
|
|
1017
|
+
/* Either execute or defer the function */
|
|
1018
|
+
if (isFunction(chunk)) {
|
|
1019
|
+
if (isStatelessFunction(chunk) && executionContext) {
|
|
1020
|
+
var chunkFn = chunk;
|
|
1021
|
+
var result = chunkFn(executionContext);
|
|
1022
|
+
if (typeof result === 'object' &&
|
|
1023
|
+
!Array.isArray(result) &&
|
|
1024
|
+
!(result instanceof Keyframes) &&
|
|
1025
|
+
!isPlainObject(result)) {
|
|
1026
|
+
// eslint-disable-next-line no-console
|
|
1027
|
+
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."));
|
|
1028
|
+
}
|
|
1029
|
+
return flatten(result, executionContext, styleSheet, stylisInstance);
|
|
1030
|
+
}
|
|
1031
|
+
else
|
|
1032
|
+
return chunk;
|
|
1033
|
+
}
|
|
1034
|
+
if (chunk instanceof Keyframes) {
|
|
1035
|
+
if (styleSheet) {
|
|
1036
|
+
chunk.inject(styleSheet, stylisInstance);
|
|
1037
|
+
return chunk.getName(stylisInstance);
|
|
1038
|
+
}
|
|
1039
|
+
else
|
|
1040
|
+
return chunk;
|
|
1041
|
+
}
|
|
1042
|
+
/* Handle objects */
|
|
1043
|
+
return isPlainObject(chunk) ? objToCssArray(chunk) : chunk.toString();
|
|
1044
|
+
}
|
|
1045
|
+
|
|
1046
|
+
function isStaticRules(rules) {
|
|
1047
|
+
for (var i = 0; i < rules.length; i += 1) {
|
|
1048
|
+
var rule = rules[i];
|
|
1049
|
+
if (isFunction(rule) &&
|
|
1050
|
+
!isStyledComponent(rule)) {
|
|
1051
|
+
// functions are allowed to be static if they're just being
|
|
1052
|
+
// used to get the classname of a nested styled component
|
|
1053
|
+
return false;
|
|
1054
|
+
}
|
|
1055
|
+
}
|
|
1056
|
+
return true;
|
|
1057
|
+
}
|
|
1058
|
+
|
|
1059
|
+
var GlobalStyle = /** @class */ (function () {
|
|
1060
|
+
function GlobalStyle(rules, componentId) {
|
|
1061
|
+
this.rules = rules;
|
|
1062
|
+
this.componentId = componentId;
|
|
1063
|
+
this.isStatic = isStaticRules(rules);
|
|
1064
|
+
// pre-register the first instance to ensure global styles
|
|
1065
|
+
// load before component ones
|
|
1066
|
+
StyleSheet.registerId(this.componentId + 1);
|
|
1067
|
+
}
|
|
1068
|
+
GlobalStyle.prototype.createStyles = function (instance, executionContext, styleSheet, stylis) {
|
|
1069
|
+
var flatCSS = flatten(this.rules, executionContext, styleSheet, stylis);
|
|
1070
|
+
var css = stylis(flatCSS.join(''), '');
|
|
1071
|
+
var id = this.componentId + instance;
|
|
1072
|
+
// NOTE: We use the id as a name as well, since these rules never change
|
|
1073
|
+
styleSheet.insertRules(id, id, css);
|
|
1074
|
+
};
|
|
1075
|
+
GlobalStyle.prototype.removeStyles = function (instance, styleSheet) {
|
|
1076
|
+
styleSheet.clearRules(this.componentId + instance);
|
|
1077
|
+
};
|
|
1078
|
+
GlobalStyle.prototype.renderStyles = function (instance, executionContext, styleSheet, stylis) {
|
|
1079
|
+
if (instance > 2)
|
|
1080
|
+
StyleSheet.registerId(this.componentId + instance);
|
|
1081
|
+
// NOTE: Remove old styles, then inject the new ones
|
|
1082
|
+
this.removeStyles(instance, styleSheet);
|
|
1083
|
+
this.createStyles(instance, executionContext, styleSheet, stylis);
|
|
1084
|
+
};
|
|
1085
|
+
return GlobalStyle;
|
|
1086
|
+
}());
|
|
1087
|
+
|
|
1088
|
+
var ThemeContext = React__default["default"].createContext(undefined);
|
|
1089
|
+
var ThemeConsumer = ThemeContext.Consumer;
|
|
1090
|
+
function mergeTheme(theme, outerTheme) {
|
|
1091
|
+
if (!theme) {
|
|
1092
|
+
throw throwStyledComponentsError(14);
|
|
1093
|
+
}
|
|
1094
|
+
if (isFunction(theme)) {
|
|
1095
|
+
var themeFn = theme;
|
|
1096
|
+
var mergedTheme = themeFn(outerTheme);
|
|
1097
|
+
if ((mergedTheme === null || Array.isArray(mergedTheme) || typeof mergedTheme !== 'object')) {
|
|
1098
|
+
throw throwStyledComponentsError(7);
|
|
1099
|
+
}
|
|
1100
|
+
return mergedTheme;
|
|
1101
|
+
}
|
|
1102
|
+
if (Array.isArray(theme) || typeof theme !== 'object') {
|
|
1103
|
+
throw throwStyledComponentsError(8);
|
|
1104
|
+
}
|
|
1105
|
+
return outerTheme ? __assign(__assign({}, outerTheme), theme) : theme;
|
|
1106
|
+
}
|
|
1107
|
+
/**
|
|
1108
|
+
* Provide a theme to an entire react component tree via context
|
|
1109
|
+
*/
|
|
1110
|
+
function ThemeProvider(props) {
|
|
1111
|
+
var outerTheme = React.useContext(ThemeContext);
|
|
1112
|
+
var themeContext = React.useMemo(function () { return mergeTheme(props.theme, outerTheme); }, [props.theme, outerTheme]);
|
|
1113
|
+
if (!props.children) {
|
|
1114
|
+
return null;
|
|
1115
|
+
}
|
|
1116
|
+
return React__default["default"].createElement(ThemeContext.Provider, { value: themeContext }, props.children);
|
|
1117
|
+
}
|
|
1118
|
+
|
|
1119
|
+
var invalidHookCallRe = /invalid hook call/i;
|
|
1120
|
+
var seen = new Set();
|
|
1121
|
+
var checkDynamicCreation = function (displayName, componentId) {
|
|
1122
|
+
{
|
|
1123
|
+
var parsedIdString = componentId ? " with the id of \"".concat(componentId, "\"") : '';
|
|
1124
|
+
var message_1 = "The component ".concat(displayName).concat(parsedIdString, " has been created dynamically.\n") +
|
|
1125
|
+
"You may see this warning because you've called styled inside another component.\n" +
|
|
1126
|
+
'To resolve this only create new StyledComponents outside of any render method and function component.';
|
|
1127
|
+
// If a hook is called outside of a component:
|
|
1128
|
+
// React 17 and earlier throw an error
|
|
1129
|
+
// React 18 and above use console.error
|
|
1130
|
+
var originalConsoleError_1 = console.error;
|
|
1131
|
+
try {
|
|
1132
|
+
var didNotCallInvalidHook_1 = true;
|
|
1133
|
+
console.error = function (consoleErrorMessage) {
|
|
1134
|
+
var consoleErrorArgs = [];
|
|
1135
|
+
for (var _i = 1; _i < arguments.length; _i++) {
|
|
1136
|
+
consoleErrorArgs[_i - 1] = arguments[_i];
|
|
1137
|
+
}
|
|
1138
|
+
// The error here is expected, since we're expecting anything that uses `checkDynamicCreation` to
|
|
1139
|
+
// be called outside of a React component.
|
|
1140
|
+
if (invalidHookCallRe.test(consoleErrorMessage)) {
|
|
1141
|
+
didNotCallInvalidHook_1 = false;
|
|
1142
|
+
// This shouldn't happen, but resets `warningSeen` if we had this error happen intermittently
|
|
1143
|
+
seen.delete(message_1);
|
|
1144
|
+
}
|
|
1145
|
+
else {
|
|
1146
|
+
originalConsoleError_1.apply(void 0, __spreadArray([consoleErrorMessage], consoleErrorArgs, false));
|
|
1147
|
+
}
|
|
1148
|
+
};
|
|
1149
|
+
// We purposefully call `useRef` outside of a component and expect it to throw
|
|
1150
|
+
// If it doesn't, then we're inside another component.
|
|
1151
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
1152
|
+
React.useRef();
|
|
1153
|
+
if (didNotCallInvalidHook_1 && !seen.has(message_1)) {
|
|
1154
|
+
// eslint-disable-next-line no-console
|
|
1155
|
+
console.warn(message_1);
|
|
1156
|
+
seen.add(message_1);
|
|
1157
|
+
}
|
|
1158
|
+
}
|
|
1159
|
+
catch (error) {
|
|
1160
|
+
// The error here is expected, since we're expecting anything that uses `checkDynamicCreation` to
|
|
1161
|
+
// be called outside of a React component.
|
|
1162
|
+
if (invalidHookCallRe.test(error.message)) {
|
|
1163
|
+
// This shouldn't happen, but resets `warningSeen` if we had this error happen intermittently
|
|
1164
|
+
seen.delete(message_1);
|
|
1165
|
+
}
|
|
1166
|
+
}
|
|
1167
|
+
finally {
|
|
1168
|
+
console.error = originalConsoleError_1;
|
|
1169
|
+
}
|
|
1170
|
+
}
|
|
1171
|
+
};
|
|
1172
|
+
|
|
1173
|
+
function determineTheme(props, providedTheme, defaultProps) {
|
|
1174
|
+
if (defaultProps === void 0) { defaultProps = EMPTY_OBJECT; }
|
|
1175
|
+
return (props.theme !== defaultProps.theme && props.theme) || providedTheme || defaultProps.theme;
|
|
1176
|
+
}
|
|
1177
|
+
|
|
1178
|
+
var AD_REPLACER_R = /(a)(d)/gi;
|
|
1179
|
+
/* This is the "capacity" of our alphabet i.e. 2x26 for all letters plus their capitalised
|
|
1180
|
+
* counterparts */
|
|
1181
|
+
var charsLength = 52;
|
|
1182
|
+
/* start at 75 for 'a' until 'z' (25) and then start at 65 for capitalised letters */
|
|
1183
|
+
var getAlphabeticChar = function (code) { return String.fromCharCode(code + (code > 25 ? 39 : 97)); };
|
|
1184
|
+
/* input a number, usually a hash and convert it to base-52 */
|
|
1185
|
+
function generateAlphabeticName(code) {
|
|
1186
|
+
var name = '';
|
|
1187
|
+
var x;
|
|
1188
|
+
/* get a char and divide by alphabet-length */
|
|
1189
|
+
for (x = Math.abs(code); x > charsLength; x = (x / charsLength) | 0) {
|
|
1190
|
+
name = getAlphabeticChar(x % charsLength) + name;
|
|
1191
|
+
}
|
|
1192
|
+
return (getAlphabeticChar(x % charsLength) + name).replace(AD_REPLACER_R, '$1-$2');
|
|
1193
|
+
}
|
|
1194
|
+
|
|
1195
|
+
function generateComponentId(str) {
|
|
1196
|
+
return generateAlphabeticName(hash(str) >>> 0);
|
|
1197
|
+
}
|
|
1198
|
+
|
|
1199
|
+
function interleave(strings, interpolations) {
|
|
1200
|
+
var result = [strings[0]];
|
|
1201
|
+
for (var i = 0, len = interpolations.length; i < len; i += 1) {
|
|
1202
|
+
result.push(interpolations[i], strings[i + 1]);
|
|
1203
|
+
}
|
|
1204
|
+
return result;
|
|
1205
|
+
}
|
|
1206
|
+
|
|
1207
|
+
/**
|
|
1208
|
+
* Used when flattening object styles to determine if we should
|
|
1209
|
+
* expand an array of styles.
|
|
1210
|
+
*/
|
|
1211
|
+
var addTag = function (arg) {
|
|
1212
|
+
if (Array.isArray(arg)) {
|
|
1213
|
+
// eslint-disable-next-line no-param-reassign
|
|
1214
|
+
arg.isCss = true;
|
|
1215
|
+
}
|
|
1216
|
+
return arg;
|
|
1217
|
+
};
|
|
1218
|
+
function css(styles) {
|
|
1219
|
+
var interpolations = [];
|
|
1220
|
+
for (var _i = 1; _i < arguments.length; _i++) {
|
|
1221
|
+
interpolations[_i - 1] = arguments[_i];
|
|
1222
|
+
}
|
|
1223
|
+
if (isFunction(styles) || isPlainObject(styles)) {
|
|
1224
|
+
var styleFunctionOrObject = styles;
|
|
1225
|
+
return addTag(flatten(interleave(EMPTY_ARRAY, __spreadArray([
|
|
1226
|
+
styleFunctionOrObject
|
|
1227
|
+
], interpolations, true))));
|
|
1228
|
+
}
|
|
1229
|
+
var styleStringArray = styles;
|
|
1230
|
+
if (interpolations.length === 0 &&
|
|
1231
|
+
styleStringArray.length === 1 &&
|
|
1232
|
+
typeof styleStringArray[0] === 'string') {
|
|
1233
|
+
return styleStringArray;
|
|
1234
|
+
}
|
|
1235
|
+
return addTag(flatten(interleave(styleStringArray, interpolations)));
|
|
1236
|
+
}
|
|
1237
|
+
|
|
1238
|
+
function createGlobalStyle(strings) {
|
|
1239
|
+
var interpolations = [];
|
|
1240
|
+
for (var _i = 1; _i < arguments.length; _i++) {
|
|
1241
|
+
interpolations[_i - 1] = arguments[_i];
|
|
1242
|
+
}
|
|
1243
|
+
var rules = css.apply(void 0, __spreadArray([strings], interpolations, false));
|
|
1244
|
+
var styledComponentId = "sc-global-".concat(generateComponentId(JSON.stringify(rules)));
|
|
1245
|
+
var globalStyle = new GlobalStyle(rules, styledComponentId);
|
|
1246
|
+
{
|
|
1247
|
+
checkDynamicCreation(styledComponentId);
|
|
1248
|
+
}
|
|
1249
|
+
var GlobalStyleComponent = function (props) {
|
|
1250
|
+
var styleSheet = useStyleSheet();
|
|
1251
|
+
var stylis = useStylis();
|
|
1252
|
+
var theme = React__default["default"].useContext(ThemeContext);
|
|
1253
|
+
var instanceRef = React__default["default"].useRef(styleSheet.allocateGSInstance(styledComponentId));
|
|
1254
|
+
var instance = instanceRef.current;
|
|
1255
|
+
if (React__default["default"].Children.count(props.children)) {
|
|
1256
|
+
// eslint-disable-next-line no-console
|
|
1257
|
+
console.warn("The global style component ".concat(styledComponentId, " was given child JSX. createGlobalStyle does not render children."));
|
|
1258
|
+
}
|
|
1259
|
+
if (rules.some(function (rule) { return typeof rule === 'string' && rule.indexOf('@import') !== -1; })) {
|
|
1260
|
+
// eslint-disable-next-line no-console
|
|
1261
|
+
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.");
|
|
1262
|
+
}
|
|
1263
|
+
if (styleSheet.server) {
|
|
1264
|
+
renderStyles(instance, props, styleSheet, theme, stylis);
|
|
1265
|
+
}
|
|
1266
|
+
{
|
|
1267
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
1268
|
+
// @ts-expect-error still using React 17 types for the time being
|
|
1269
|
+
(React__default["default"].useInsertionEffect || React__default["default"].useLayoutEffect)(function () {
|
|
1270
|
+
if (!styleSheet.server) {
|
|
1271
|
+
renderStyles(instance, props, styleSheet, theme, stylis);
|
|
1272
|
+
return function () { return globalStyle.removeStyles(instance, styleSheet); };
|
|
1273
|
+
}
|
|
1274
|
+
}, [instance, props, styleSheet, theme, stylis]);
|
|
1275
|
+
}
|
|
1276
|
+
return null;
|
|
1277
|
+
};
|
|
1278
|
+
function renderStyles(instance, props, styleSheet, theme, stylis) {
|
|
1279
|
+
if (globalStyle.isStatic) {
|
|
1280
|
+
globalStyle.renderStyles(instance, STATIC_EXECUTION_CONTEXT, styleSheet, stylis);
|
|
1281
|
+
}
|
|
1282
|
+
else {
|
|
1283
|
+
var context = __assign(__assign({}, props), { theme: determineTheme(props, theme, GlobalStyleComponent.defaultProps) });
|
|
1284
|
+
globalStyle.renderStyles(instance, context, styleSheet, stylis);
|
|
1285
|
+
}
|
|
1286
|
+
}
|
|
1287
|
+
return React__default["default"].memo(GlobalStyleComponent);
|
|
1288
|
+
}
|
|
1289
|
+
|
|
1290
|
+
function keyframes(strings) {
|
|
1291
|
+
var interpolations = [];
|
|
1292
|
+
for (var _i = 1; _i < arguments.length; _i++) {
|
|
1293
|
+
interpolations[_i - 1] = arguments[_i];
|
|
1294
|
+
}
|
|
1295
|
+
/* Warning if you've used keyframes on React Native */
|
|
1296
|
+
if (typeof navigator !== 'undefined' &&
|
|
1297
|
+
navigator.product === 'ReactNative') {
|
|
1298
|
+
// eslint-disable-next-line no-console
|
|
1299
|
+
console.warn('`keyframes` cannot be used on ReactNative, only on the web. To do animation in ReactNative please use Animated.');
|
|
1300
|
+
}
|
|
1301
|
+
var rules = css.apply(void 0, __spreadArray([strings], interpolations, false)).join('');
|
|
1302
|
+
var name = generateComponentId(rules);
|
|
1303
|
+
return new Keyframes(name, rules);
|
|
1304
|
+
}
|
|
1305
|
+
|
|
1306
|
+
var _a;
|
|
1307
|
+
var hasSymbol = typeof Symbol === 'function' && Symbol.for;
|
|
1308
|
+
// copied from react-is
|
|
1309
|
+
var REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
|
|
1310
|
+
var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
|
|
1311
|
+
/**
|
|
1312
|
+
* Adapted from hoist-non-react-statics to avoid the react-is dependency.
|
|
1313
|
+
*/
|
|
1314
|
+
var REACT_STATICS = {
|
|
1315
|
+
childContextTypes: true,
|
|
1316
|
+
contextType: true,
|
|
1317
|
+
contextTypes: true,
|
|
1318
|
+
defaultProps: true,
|
|
1319
|
+
displayName: true,
|
|
1320
|
+
getDefaultProps: true,
|
|
1321
|
+
getDerivedStateFromError: true,
|
|
1322
|
+
getDerivedStateFromProps: true,
|
|
1323
|
+
mixins: true,
|
|
1324
|
+
propTypes: true,
|
|
1325
|
+
type: true,
|
|
1326
|
+
};
|
|
1327
|
+
var KNOWN_STATICS = {
|
|
1328
|
+
name: true,
|
|
1329
|
+
length: true,
|
|
1330
|
+
prototype: true,
|
|
1331
|
+
caller: true,
|
|
1332
|
+
callee: true,
|
|
1333
|
+
arguments: true,
|
|
1334
|
+
arity: true,
|
|
1335
|
+
};
|
|
1336
|
+
var FORWARD_REF_STATICS = {
|
|
1337
|
+
$$typeof: true,
|
|
1338
|
+
render: true,
|
|
1339
|
+
defaultProps: true,
|
|
1340
|
+
displayName: true,
|
|
1341
|
+
propTypes: true,
|
|
1342
|
+
};
|
|
1343
|
+
var MEMO_STATICS = {
|
|
1344
|
+
$$typeof: true,
|
|
1345
|
+
compare: true,
|
|
1346
|
+
defaultProps: true,
|
|
1347
|
+
displayName: true,
|
|
1348
|
+
propTypes: true,
|
|
1349
|
+
type: true,
|
|
1350
|
+
};
|
|
1351
|
+
var TYPE_STATICS = (_a = {},
|
|
1352
|
+
_a[REACT_FORWARD_REF_TYPE] = FORWARD_REF_STATICS,
|
|
1353
|
+
_a[REACT_MEMO_TYPE] = MEMO_STATICS,
|
|
1354
|
+
_a);
|
|
1355
|
+
// adapted from react-is
|
|
1356
|
+
function isMemo(object) {
|
|
1357
|
+
var $$typeofType = 'type' in object && object.type.$$typeof;
|
|
1358
|
+
return $$typeofType === REACT_MEMO_TYPE;
|
|
1359
|
+
}
|
|
1360
|
+
function getStatics(component) {
|
|
1361
|
+
// React v16.11 and below
|
|
1362
|
+
if (isMemo(component)) {
|
|
1363
|
+
return MEMO_STATICS;
|
|
1364
|
+
}
|
|
1365
|
+
// React v16.12 and above
|
|
1366
|
+
return '$$typeof' in component
|
|
1367
|
+
? TYPE_STATICS[component['$$typeof']]
|
|
1368
|
+
: REACT_STATICS;
|
|
1369
|
+
}
|
|
1370
|
+
var defineProperty = Object.defineProperty;
|
|
1371
|
+
var getOwnPropertyNames = Object.getOwnPropertyNames;
|
|
1372
|
+
var getOwnPropertySymbols = Object.getOwnPropertySymbols;
|
|
1373
|
+
var getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
|
|
1374
|
+
var getPrototypeOf = Object.getPrototypeOf;
|
|
1375
|
+
var objectPrototype = Object.prototype;
|
|
1376
|
+
function hoistNonReactStatics(targetComponent, sourceComponent, excludelist) {
|
|
1377
|
+
if (typeof sourceComponent !== 'string') {
|
|
1378
|
+
// don't hoist over string (html) components
|
|
1379
|
+
if (objectPrototype) {
|
|
1380
|
+
var inheritedComponent = getPrototypeOf(sourceComponent);
|
|
1381
|
+
if (inheritedComponent && inheritedComponent !== objectPrototype) {
|
|
1382
|
+
hoistNonReactStatics(targetComponent, inheritedComponent, excludelist);
|
|
1383
|
+
}
|
|
1384
|
+
}
|
|
1385
|
+
var keys = getOwnPropertyNames(sourceComponent);
|
|
1386
|
+
if (getOwnPropertySymbols) {
|
|
1387
|
+
keys = keys.concat(getOwnPropertySymbols(sourceComponent));
|
|
1388
|
+
}
|
|
1389
|
+
var targetStatics = getStatics(targetComponent);
|
|
1390
|
+
var sourceStatics = getStatics(sourceComponent);
|
|
1391
|
+
for (var i = 0; i < keys.length; ++i) {
|
|
1392
|
+
var key = keys[i];
|
|
1393
|
+
if (!(key in KNOWN_STATICS) &&
|
|
1394
|
+
!(excludelist && excludelist[key]) &&
|
|
1395
|
+
!(sourceStatics && key in sourceStatics) &&
|
|
1396
|
+
!(targetStatics && key in targetStatics)) {
|
|
1397
|
+
var descriptor = getOwnPropertyDescriptor(sourceComponent, key);
|
|
1398
|
+
try {
|
|
1399
|
+
// Avoid failures from read-only properties
|
|
1400
|
+
defineProperty(targetComponent, key, descriptor);
|
|
1401
|
+
}
|
|
1402
|
+
catch (e) {
|
|
1403
|
+
/* ignore */
|
|
1404
|
+
}
|
|
1405
|
+
}
|
|
1406
|
+
}
|
|
1407
|
+
}
|
|
1408
|
+
return targetComponent;
|
|
1409
|
+
}
|
|
1410
|
+
|
|
1411
|
+
function withTheme(Component) {
|
|
1412
|
+
var WithTheme = React__default["default"].forwardRef(function (props, ref) {
|
|
1413
|
+
var theme = React__default["default"].useContext(ThemeContext);
|
|
1414
|
+
var themeProp = determineTheme(props, theme, Component.defaultProps);
|
|
1415
|
+
if (themeProp === undefined) {
|
|
1416
|
+
// eslint-disable-next-line no-console
|
|
1417
|
+
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), "\""));
|
|
1418
|
+
}
|
|
1419
|
+
return React__default["default"].createElement(Component, __assign({}, props, { theme: themeProp, ref: ref }));
|
|
1420
|
+
});
|
|
1421
|
+
WithTheme.displayName = "WithTheme(".concat(getComponentName(Component), ")");
|
|
1422
|
+
return hoistNonReactStatics(WithTheme, Component);
|
|
1423
|
+
}
|
|
1424
|
+
|
|
1425
|
+
var useTheme = function () { return React.useContext(ThemeContext); };
|
|
1426
|
+
|
|
1427
|
+
var ServerStyleSheet = /** @class */ (function () {
|
|
1428
|
+
function ServerStyleSheet() {
|
|
1429
|
+
var _this = this;
|
|
1430
|
+
this._emitSheetCSS = function () {
|
|
1431
|
+
var css = _this.instance.toString();
|
|
1432
|
+
var nonce = getNonce();
|
|
1433
|
+
var attrs = [
|
|
1434
|
+
nonce && "nonce=\"".concat(nonce, "\""),
|
|
1435
|
+
"".concat(SC_ATTR, "=\"true\""),
|
|
1436
|
+
"".concat(SC_ATTR_VERSION, "=\"").concat(SC_VERSION, "\""),
|
|
1437
|
+
];
|
|
1438
|
+
var htmlAttr = attrs.filter(Boolean).join(' ');
|
|
1439
|
+
return "<style ".concat(htmlAttr, ">").concat(css, "</style>");
|
|
1440
|
+
};
|
|
1441
|
+
this.getStyleTags = function () {
|
|
1442
|
+
if (_this.sealed) {
|
|
1443
|
+
throw throwStyledComponentsError(2);
|
|
1444
|
+
}
|
|
1445
|
+
return _this._emitSheetCSS();
|
|
1446
|
+
};
|
|
1447
|
+
this.getStyleElement = function () {
|
|
1448
|
+
var _a;
|
|
1449
|
+
if (_this.sealed) {
|
|
1450
|
+
throw throwStyledComponentsError(2);
|
|
1451
|
+
}
|
|
1452
|
+
var props = (_a = {},
|
|
1453
|
+
_a[SC_ATTR] = '',
|
|
1454
|
+
_a[SC_ATTR_VERSION] = SC_VERSION,
|
|
1455
|
+
_a.dangerouslySetInnerHTML = {
|
|
1456
|
+
__html: _this.instance.toString(),
|
|
1457
|
+
},
|
|
1458
|
+
_a);
|
|
1459
|
+
var nonce = getNonce();
|
|
1460
|
+
if (nonce) {
|
|
1461
|
+
props.nonce = nonce;
|
|
1462
|
+
}
|
|
1463
|
+
// v4 returned an array for this fn, so we'll do the same for v5 for backward compat
|
|
1464
|
+
return [React__default["default"].createElement("style", __assign({}, props, { key: "sc-0-0" }))];
|
|
1465
|
+
};
|
|
1466
|
+
this.seal = function () {
|
|
1467
|
+
_this.sealed = true;
|
|
1468
|
+
};
|
|
1469
|
+
this.instance = new StyleSheet({ isServer: true });
|
|
1470
|
+
this.sealed = false;
|
|
1471
|
+
}
|
|
1472
|
+
ServerStyleSheet.prototype.collectStyles = function (children) {
|
|
1473
|
+
if (this.sealed) {
|
|
1474
|
+
throw throwStyledComponentsError(2);
|
|
1475
|
+
}
|
|
1476
|
+
return React__default["default"].createElement(StyleSheetManager, { sheet: this.instance }, children);
|
|
1477
|
+
};
|
|
1478
|
+
// eslint-disable-next-line consistent-return
|
|
1479
|
+
// @ts-expect-error alternate return types are not possible due to code transformation
|
|
1480
|
+
ServerStyleSheet.prototype.interleaveWithNodeStream = function (input) {
|
|
1481
|
+
{
|
|
1482
|
+
throw throwStyledComponentsError(3);
|
|
1483
|
+
}
|
|
1484
|
+
};
|
|
1485
|
+
return ServerStyleSheet;
|
|
1486
|
+
}());
|
|
1487
|
+
|
|
1488
|
+
/* eslint-disable */
|
|
1489
|
+
var __PRIVATE__ = {
|
|
1490
|
+
StyleSheet: StyleSheet,
|
|
1491
|
+
mainSheet: mainSheet,
|
|
1492
|
+
};
|
|
1493
|
+
|
|
1494
|
+
/* Import singletons */
|
|
1495
|
+
/* Warning if you've imported this file on React Native */
|
|
1496
|
+
if (typeof navigator !== 'undefined' &&
|
|
1497
|
+
navigator.product === 'ReactNative') {
|
|
1498
|
+
// eslint-disable-next-line no-console
|
|
1499
|
+
console.warn("It looks like you've imported 'styled-components' on React Native.\n" +
|
|
1500
|
+
"Perhaps you're looking to import 'styled-components/native'?\n" +
|
|
1501
|
+
'Read more about this at https://www.styled-components.com/docs/basics#react-native');
|
|
1502
|
+
}
|
|
1503
|
+
/* Warning if there are several instances of styled-components */
|
|
1504
|
+
if (typeof window !== 'undefined') {
|
|
1505
|
+
window['__styled-components-init__'] || (window['__styled-components-init__'] = 0);
|
|
1506
|
+
if (window['__styled-components-init__'] === 1) {
|
|
1507
|
+
// eslint-disable-next-line no-console
|
|
1508
|
+
console.warn("It looks like there are several instances of 'styled-components' initialized in this application. " +
|
|
1509
|
+
'This may cause dynamic styles to not render properly, errors during the rehydration process, ' +
|
|
1510
|
+
'a missing theme prop, and makes your application bigger without good reason.\n\n' +
|
|
1511
|
+
'See https://s-c.sh/2BAXzed for more info.');
|
|
1512
|
+
}
|
|
1513
|
+
window['__styled-components-init__'] += 1;
|
|
1514
|
+
}
|
|
1515
|
+
|
|
1516
|
+
var secondary = /*#__PURE__*/Object.freeze({
|
|
1517
|
+
__proto__: null,
|
|
1518
|
+
createGlobalStyle: createGlobalStyle,
|
|
1519
|
+
css: css,
|
|
1520
|
+
isStyledComponent: isStyledComponent,
|
|
1521
|
+
keyframes: keyframes,
|
|
1522
|
+
ServerStyleSheet: ServerStyleSheet,
|
|
1523
|
+
StyleSheetConsumer: StyleSheetConsumer,
|
|
1524
|
+
StyleSheetContext: StyleSheetContext,
|
|
1525
|
+
StyleSheetManager: StyleSheetManager,
|
|
1526
|
+
ThemeConsumer: ThemeConsumer,
|
|
1527
|
+
ThemeContext: ThemeContext,
|
|
1528
|
+
ThemeProvider: ThemeProvider,
|
|
1529
|
+
useTheme: useTheme,
|
|
1530
|
+
version: SC_VERSION,
|
|
1531
|
+
withTheme: withTheme,
|
|
1532
|
+
__PRIVATE__: __PRIVATE__
|
|
1533
|
+
});
|
|
1534
|
+
|
|
1535
|
+
var LIMIT = 200;
|
|
1536
|
+
var createWarnTooManyClasses = (function (displayName, componentId) {
|
|
1537
|
+
var generatedClasses = {};
|
|
1538
|
+
var warningSeen = false;
|
|
1539
|
+
return function (className) {
|
|
1540
|
+
if (!warningSeen) {
|
|
1541
|
+
generatedClasses[className] = true;
|
|
1542
|
+
if (Object.keys(generatedClasses).length >= LIMIT) {
|
|
1543
|
+
// Unable to find latestRule in test environment.
|
|
1544
|
+
/* eslint-disable no-console, prefer-template */
|
|
1545
|
+
var parsedIdString = componentId ? " with the id of \"".concat(componentId, "\"") : '';
|
|
1546
|
+
console.warn("Over ".concat(LIMIT, " classes were generated for component ").concat(displayName).concat(parsedIdString, ".\n") +
|
|
1547
|
+
'Consider using the attrs method, together with a style object for frequently changed styles.\n' +
|
|
1548
|
+
'Example:\n' +
|
|
1549
|
+
' const Component = styled.div.attrs(props => ({\n' +
|
|
1550
|
+
' style: {\n' +
|
|
1551
|
+
' background: props.background,\n' +
|
|
1552
|
+
' },\n' +
|
|
1553
|
+
' }))`width: 100%;`\n\n' +
|
|
1554
|
+
' <Component />');
|
|
1555
|
+
warningSeen = true;
|
|
1556
|
+
generatedClasses = {};
|
|
1557
|
+
}
|
|
1558
|
+
}
|
|
1559
|
+
};
|
|
1560
|
+
});
|
|
1561
|
+
|
|
1562
|
+
// Thanks to ReactDOMFactories for this handy list!
|
|
1563
|
+
var domElements = [
|
|
1564
|
+
'a',
|
|
1565
|
+
'abbr',
|
|
1566
|
+
'address',
|
|
1567
|
+
'area',
|
|
1568
|
+
'article',
|
|
1569
|
+
'aside',
|
|
1570
|
+
'audio',
|
|
1571
|
+
'b',
|
|
1572
|
+
'base',
|
|
1573
|
+
'bdi',
|
|
1574
|
+
'bdo',
|
|
1575
|
+
'big',
|
|
1576
|
+
'blockquote',
|
|
1577
|
+
'body',
|
|
1578
|
+
'br',
|
|
1579
|
+
'button',
|
|
1580
|
+
'canvas',
|
|
1581
|
+
'caption',
|
|
1582
|
+
'cite',
|
|
1583
|
+
'code',
|
|
1584
|
+
'col',
|
|
1585
|
+
'colgroup',
|
|
1586
|
+
'data',
|
|
1587
|
+
'datalist',
|
|
1588
|
+
'dd',
|
|
1589
|
+
'del',
|
|
1590
|
+
'details',
|
|
1591
|
+
'dfn',
|
|
1592
|
+
'dialog',
|
|
1593
|
+
'div',
|
|
1594
|
+
'dl',
|
|
1595
|
+
'dt',
|
|
1596
|
+
'em',
|
|
1597
|
+
'embed',
|
|
1598
|
+
'fieldset',
|
|
1599
|
+
'figcaption',
|
|
1600
|
+
'figure',
|
|
1601
|
+
'footer',
|
|
1602
|
+
'form',
|
|
1603
|
+
'h1',
|
|
1604
|
+
'h2',
|
|
1605
|
+
'h3',
|
|
1606
|
+
'h4',
|
|
1607
|
+
'h5',
|
|
1608
|
+
'h6',
|
|
1609
|
+
'head',
|
|
1610
|
+
'header',
|
|
1611
|
+
'hgroup',
|
|
1612
|
+
'hr',
|
|
1613
|
+
'html',
|
|
1614
|
+
'i',
|
|
1615
|
+
'iframe',
|
|
1616
|
+
'img',
|
|
1617
|
+
'input',
|
|
1618
|
+
'ins',
|
|
1619
|
+
'kbd',
|
|
1620
|
+
'keygen',
|
|
1621
|
+
'label',
|
|
1622
|
+
'legend',
|
|
1623
|
+
'li',
|
|
1624
|
+
'link',
|
|
1625
|
+
'main',
|
|
1626
|
+
'map',
|
|
1627
|
+
'mark',
|
|
1628
|
+
'menu',
|
|
1629
|
+
'menuitem',
|
|
1630
|
+
'meta',
|
|
1631
|
+
'meter',
|
|
1632
|
+
'nav',
|
|
1633
|
+
'noscript',
|
|
1634
|
+
'object',
|
|
1635
|
+
'ol',
|
|
1636
|
+
'optgroup',
|
|
1637
|
+
'option',
|
|
1638
|
+
'output',
|
|
1639
|
+
'p',
|
|
1640
|
+
'param',
|
|
1641
|
+
'picture',
|
|
1642
|
+
'pre',
|
|
1643
|
+
'progress',
|
|
1644
|
+
'q',
|
|
1645
|
+
'rp',
|
|
1646
|
+
'rt',
|
|
1647
|
+
'ruby',
|
|
1648
|
+
's',
|
|
1649
|
+
'samp',
|
|
1650
|
+
'script',
|
|
1651
|
+
'section',
|
|
1652
|
+
'select',
|
|
1653
|
+
'small',
|
|
1654
|
+
'source',
|
|
1655
|
+
'span',
|
|
1656
|
+
'strong',
|
|
1657
|
+
'style',
|
|
1658
|
+
'sub',
|
|
1659
|
+
'summary',
|
|
1660
|
+
'sup',
|
|
1661
|
+
'table',
|
|
1662
|
+
'tbody',
|
|
1663
|
+
'td',
|
|
1664
|
+
'textarea',
|
|
1665
|
+
'tfoot',
|
|
1666
|
+
'th',
|
|
1667
|
+
'thead',
|
|
1668
|
+
'time',
|
|
1669
|
+
'title',
|
|
1670
|
+
'tr',
|
|
1671
|
+
'track',
|
|
1672
|
+
'u',
|
|
1673
|
+
'ul',
|
|
1674
|
+
'var',
|
|
1675
|
+
'video',
|
|
1676
|
+
'wbr',
|
|
1677
|
+
'circle',
|
|
1678
|
+
'clipPath',
|
|
1679
|
+
'defs',
|
|
1680
|
+
'ellipse',
|
|
1681
|
+
'foreignObject',
|
|
1682
|
+
'g',
|
|
1683
|
+
'image',
|
|
1684
|
+
'line',
|
|
1685
|
+
'linearGradient',
|
|
1686
|
+
'marker',
|
|
1687
|
+
'mask',
|
|
1688
|
+
'path',
|
|
1689
|
+
'pattern',
|
|
1690
|
+
'polygon',
|
|
1691
|
+
'polyline',
|
|
1692
|
+
'radialGradient',
|
|
1693
|
+
'rect',
|
|
1694
|
+
'stop',
|
|
1695
|
+
'svg',
|
|
1696
|
+
'text',
|
|
1697
|
+
'tspan',
|
|
1698
|
+
];
|
|
1699
|
+
|
|
1700
|
+
// Source: https://www.w3.org/TR/cssom-1/#serialize-an-identifier
|
|
1701
|
+
// Control characters and non-letter first symbols are not supported
|
|
1702
|
+
var escapeRegex = /[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~-]+/g;
|
|
1703
|
+
var dashesAtEnds = /(^-|-$)/g;
|
|
1704
|
+
/**
|
|
1705
|
+
* TODO: Explore using CSS.escape when it becomes more available
|
|
1706
|
+
* in evergreen browsers.
|
|
1707
|
+
*/
|
|
1708
|
+
function escape(str) {
|
|
1709
|
+
return str // Replace all possible CSS selectors
|
|
1710
|
+
.replace(escapeRegex, '-') // Remove extraneous hyphens at the start and end
|
|
1711
|
+
.replace(dashesAtEnds, '');
|
|
1712
|
+
}
|
|
1713
|
+
|
|
1714
|
+
function isTag(target) {
|
|
1715
|
+
return (typeof target === 'string' &&
|
|
1716
|
+
(target.charAt(0) === target.charAt(0).toLowerCase()
|
|
1717
|
+
));
|
|
1718
|
+
}
|
|
1719
|
+
|
|
1720
|
+
function generateDisplayName(target) {
|
|
1721
|
+
return isTag(target) ? "styled.".concat(target) : "Styled(".concat(getComponentName(target), ")");
|
|
1722
|
+
}
|
|
1723
|
+
|
|
1724
|
+
/**
|
|
1725
|
+
* Convenience function for joining strings to form className chains
|
|
1726
|
+
*/
|
|
1727
|
+
function joinStrings(a, b) {
|
|
1728
|
+
return a && b ? "".concat(a, " ").concat(b) : a || b;
|
|
1729
|
+
}
|
|
1730
|
+
|
|
1731
|
+
function mixinRecursively(target, source, forceMerge) {
|
|
1732
|
+
if (forceMerge === void 0) { forceMerge = false; }
|
|
1733
|
+
/* only merge into POJOs, Arrays, but for top level objects only
|
|
1734
|
+
* allow to merge into anything by passing forceMerge = true */
|
|
1735
|
+
if (!forceMerge && !isPlainObject(target) && !Array.isArray(target)) {
|
|
1736
|
+
return source;
|
|
1737
|
+
}
|
|
1738
|
+
if (Array.isArray(source)) {
|
|
1739
|
+
for (var key = 0; key < source.length; key++) {
|
|
1740
|
+
target[key] = mixinRecursively(target[key], source[key]);
|
|
1741
|
+
}
|
|
1742
|
+
}
|
|
1743
|
+
else if (isPlainObject(source)) {
|
|
1744
|
+
for (var key in source) {
|
|
1745
|
+
target[key] = mixinRecursively(target[key], source[key]);
|
|
1746
|
+
}
|
|
1747
|
+
}
|
|
1748
|
+
return target;
|
|
1749
|
+
}
|
|
1750
|
+
/**
|
|
1751
|
+
* Arrays & POJOs merged recursively, other objects and value types are overridden
|
|
1752
|
+
* If target is not a POJO or an Array, it will get source properties injected via shallow merge
|
|
1753
|
+
* Source objects applied left to right. Mutates & returns target. Similar to lodash merge.
|
|
1754
|
+
*/
|
|
1755
|
+
function mixinDeep(target) {
|
|
1756
|
+
if (target === void 0) { target = {}; }
|
|
1757
|
+
var sources = [];
|
|
1758
|
+
for (var _i = 1; _i < arguments.length; _i++) {
|
|
1759
|
+
sources[_i - 1] = arguments[_i];
|
|
1760
|
+
}
|
|
1761
|
+
for (var _a = 0, sources_1 = sources; _a < sources_1.length; _a++) {
|
|
1762
|
+
var source = sources_1[_a];
|
|
1763
|
+
mixinRecursively(target, source, true);
|
|
1764
|
+
}
|
|
1765
|
+
return target;
|
|
1766
|
+
}
|
|
1767
|
+
|
|
1768
|
+
var SEED = hash(SC_VERSION);
|
|
1769
|
+
/**
|
|
1770
|
+
* ComponentStyle is all the CSS-specific stuff, not the React-specific stuff.
|
|
1771
|
+
*/
|
|
1772
|
+
var ComponentStyle = /** @class */ (function () {
|
|
1773
|
+
function ComponentStyle(rules, componentId, baseStyle) {
|
|
1774
|
+
this.names = [];
|
|
1775
|
+
this.rules = rules;
|
|
1776
|
+
this.staticRulesId = '';
|
|
1777
|
+
this.isStatic =
|
|
1778
|
+
"development" === 'production' ;
|
|
1779
|
+
this.componentId = componentId;
|
|
1780
|
+
// SC_VERSION gives us isolation between multiple runtimes on the page at once
|
|
1781
|
+
// this is improved further with use of the babel plugin "namespace" feature
|
|
1782
|
+
this.baseHash = phash(SEED, componentId);
|
|
1783
|
+
this.baseStyle = baseStyle;
|
|
1784
|
+
// NOTE: This registers the componentId, which ensures a consistent order
|
|
1785
|
+
// for this component's styles compared to others
|
|
1786
|
+
StyleSheet.registerId(componentId);
|
|
1787
|
+
}
|
|
1788
|
+
/*
|
|
1789
|
+
* Flattens a rule set into valid CSS
|
|
1790
|
+
* Hashes it, wraps the whole chunk in a .hash1234 {}
|
|
1791
|
+
* Returns the hash to be injected on render()
|
|
1792
|
+
* */
|
|
1793
|
+
ComponentStyle.prototype.generateAndInjectStyles = function (executionContext, styleSheet, stylis) {
|
|
1794
|
+
var componentId = this.componentId;
|
|
1795
|
+
this.names.length = 0;
|
|
1796
|
+
if (this.baseStyle) {
|
|
1797
|
+
this.names.push(this.baseStyle.generateAndInjectStyles(executionContext, styleSheet, stylis));
|
|
1798
|
+
}
|
|
1799
|
+
// force dynamic classnames if user-supplied stylis plugins are in use
|
|
1800
|
+
if (this.isStatic && !stylis.hash) {
|
|
1801
|
+
if (this.staticRulesId && styleSheet.hasNameForId(componentId, this.staticRulesId)) {
|
|
1802
|
+
this.names.push(this.staticRulesId);
|
|
1803
|
+
}
|
|
1804
|
+
else {
|
|
1805
|
+
var cssStatic = flatten(this.rules, executionContext, styleSheet, stylis).join('');
|
|
1806
|
+
var name_1 = generateAlphabeticName(phash(this.baseHash, cssStatic) >>> 0);
|
|
1807
|
+
if (!styleSheet.hasNameForId(componentId, name_1)) {
|
|
1808
|
+
var cssStaticFormatted = stylis(cssStatic, ".".concat(name_1), undefined, componentId);
|
|
1809
|
+
styleSheet.insertRules(componentId, name_1, cssStaticFormatted);
|
|
1810
|
+
}
|
|
1811
|
+
this.names.push(name_1);
|
|
1812
|
+
this.staticRulesId = name_1;
|
|
1813
|
+
}
|
|
1814
|
+
}
|
|
1815
|
+
else {
|
|
1816
|
+
var length_1 = this.rules.length;
|
|
1817
|
+
var dynamicHash = phash(this.baseHash, stylis.hash);
|
|
1818
|
+
var css = '';
|
|
1819
|
+
for (var i = 0; i < length_1; i++) {
|
|
1820
|
+
var partRule = this.rules[i];
|
|
1821
|
+
if (typeof partRule === 'string') {
|
|
1822
|
+
css += partRule;
|
|
1823
|
+
dynamicHash = phash(dynamicHash, partRule);
|
|
1824
|
+
}
|
|
1825
|
+
else if (partRule) {
|
|
1826
|
+
var partChunk = flatten(partRule, executionContext, styleSheet, stylis);
|
|
1827
|
+
var partString = Array.isArray(partChunk) ? partChunk.join('') : partChunk;
|
|
1828
|
+
dynamicHash = phash(dynamicHash, partString);
|
|
1829
|
+
css += partString;
|
|
1830
|
+
}
|
|
1831
|
+
}
|
|
1832
|
+
if (css) {
|
|
1833
|
+
var name_2 = generateAlphabeticName(dynamicHash >>> 0);
|
|
1834
|
+
if (!styleSheet.hasNameForId(componentId, name_2)) {
|
|
1835
|
+
var cssFormatted = stylis(css, ".".concat(name_2), undefined, componentId);
|
|
1836
|
+
styleSheet.insertRules(componentId, name_2, cssFormatted);
|
|
1837
|
+
}
|
|
1838
|
+
this.names.push(name_2);
|
|
1839
|
+
}
|
|
1840
|
+
}
|
|
1841
|
+
return this.names.join(' ');
|
|
1842
|
+
};
|
|
1843
|
+
return ComponentStyle;
|
|
1844
|
+
}());
|
|
1845
|
+
|
|
1846
|
+
var identifiers = {};
|
|
1847
|
+
/* We depend on components having unique IDs */
|
|
1848
|
+
function generateId(displayName, parentComponentId) {
|
|
1849
|
+
var name = typeof displayName !== 'string' ? 'sc' : escape(displayName);
|
|
1850
|
+
// Ensure that no displayName can lead to duplicate componentIds
|
|
1851
|
+
identifiers[name] = (identifiers[name] || 0) + 1;
|
|
1852
|
+
var componentId = "".concat(name, "-").concat(generateComponentId(
|
|
1853
|
+
// SC_VERSION gives us isolation between multiple runtimes on the page at once
|
|
1854
|
+
// this is improved further with use of the babel plugin "namespace" feature
|
|
1855
|
+
SC_VERSION + name + identifiers[name]));
|
|
1856
|
+
return parentComponentId ? "".concat(parentComponentId, "-").concat(componentId) : componentId;
|
|
1857
|
+
}
|
|
1858
|
+
function useResolvedAttrs(theme, props, attrs) {
|
|
1859
|
+
if (theme === void 0) { theme = EMPTY_OBJECT; }
|
|
1860
|
+
// NOTE: can't memoize this
|
|
1861
|
+
// returns [context, resolvedAttrs]
|
|
1862
|
+
// where resolvedAttrs is only the things injected by the attrs themselves
|
|
1863
|
+
var context = __assign(__assign({}, props), { theme: theme });
|
|
1864
|
+
attrs.forEach(function (attrDef) {
|
|
1865
|
+
// @ts-expect-error narrowing isn't working properly for some reason
|
|
1866
|
+
var resolvedAttrDef = typeof attrDef === 'function' ? attrDef(context) : attrDef;
|
|
1867
|
+
var key;
|
|
1868
|
+
/* eslint-disable guard-for-in */
|
|
1869
|
+
for (key in resolvedAttrDef) {
|
|
1870
|
+
// @ts-expect-error bad types
|
|
1871
|
+
context[key] =
|
|
1872
|
+
key === 'className'
|
|
1873
|
+
? joinStrings(context[key], resolvedAttrDef[key])
|
|
1874
|
+
: key === 'style'
|
|
1875
|
+
? __assign(__assign({}, context[key]), resolvedAttrDef[key]) : resolvedAttrDef[key];
|
|
1876
|
+
}
|
|
1877
|
+
/* eslint-enable guard-for-in */
|
|
1878
|
+
});
|
|
1879
|
+
return context;
|
|
1880
|
+
}
|
|
1881
|
+
function useInjectedStyle(componentStyle, isStatic, resolvedAttrs, warnTooManyClasses) {
|
|
1882
|
+
var styleSheet = useStyleSheet();
|
|
1883
|
+
var stylis = useStylis();
|
|
1884
|
+
var className = isStatic
|
|
1885
|
+
? componentStyle.generateAndInjectStyles(EMPTY_OBJECT, styleSheet, stylis)
|
|
1886
|
+
: componentStyle.generateAndInjectStyles(resolvedAttrs, styleSheet, stylis);
|
|
1887
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
1888
|
+
React.useDebugValue(className);
|
|
1889
|
+
if (!isStatic && warnTooManyClasses) {
|
|
1890
|
+
warnTooManyClasses(className);
|
|
1891
|
+
}
|
|
1892
|
+
return className;
|
|
1893
|
+
}
|
|
1894
|
+
function useStyledComponentImpl(forwardedComponent, props, forwardedRef, isStatic) {
|
|
1895
|
+
var componentAttrs = forwardedComponent.attrs, componentStyle = forwardedComponent.componentStyle, defaultProps = forwardedComponent.defaultProps, foldedComponentIds = forwardedComponent.foldedComponentIds, shouldForwardProp = forwardedComponent.shouldForwardProp, styledComponentId = forwardedComponent.styledComponentId, target = forwardedComponent.target;
|
|
1896
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
1897
|
+
React.useDebugValue(styledComponentId);
|
|
1898
|
+
// NOTE: the non-hooks version only subscribes to this when !componentStyle.isStatic,
|
|
1899
|
+
// but that'd be against the rules-of-hooks. We could be naughty and do it anyway as it
|
|
1900
|
+
// should be an immutable value, but behave for now.
|
|
1901
|
+
var theme = determineTheme(props, React.useContext(ThemeContext), defaultProps);
|
|
1902
|
+
var context = useResolvedAttrs(theme || EMPTY_OBJECT, props, componentAttrs);
|
|
1903
|
+
var generatedClassName = useInjectedStyle(componentStyle, isStatic, context, forwardedComponent.warnTooManyClasses );
|
|
1904
|
+
var refToForward = forwardedRef;
|
|
1905
|
+
var elementToBeCreated = context.$as || context.as || target;
|
|
1906
|
+
var isTargetTag = isTag(elementToBeCreated);
|
|
1907
|
+
var propsForElement = {};
|
|
1908
|
+
// eslint-disable-next-line guard-for-in
|
|
1909
|
+
for (var key in context) {
|
|
1910
|
+
if (key[0] === '$' || key === 'as' || key === 'theme')
|
|
1911
|
+
continue;
|
|
1912
|
+
else if (key === 'forwardedAs') {
|
|
1913
|
+
propsForElement.as = context[key];
|
|
1914
|
+
}
|
|
1915
|
+
else if (shouldForwardProp ? shouldForwardProp(key, elementToBeCreated) : true) {
|
|
1916
|
+
// Don't pass through non HTML tags through to HTML elements
|
|
1917
|
+
propsForElement[key] = context[key];
|
|
1918
|
+
}
|
|
1919
|
+
}
|
|
1920
|
+
propsForElement[
|
|
1921
|
+
// handle custom elements which React doesn't properly alias
|
|
1922
|
+
isTargetTag &&
|
|
1923
|
+
domElements.indexOf(elementToBeCreated) === -1
|
|
1924
|
+
? 'class'
|
|
1925
|
+
: 'className'] = foldedComponentIds
|
|
1926
|
+
.concat(styledComponentId, (generatedClassName !== styledComponentId ? generatedClassName : null), context.className)
|
|
1927
|
+
.filter(Boolean)
|
|
1928
|
+
.join(' ');
|
|
1929
|
+
propsForElement.ref = refToForward;
|
|
1930
|
+
return React.createElement(elementToBeCreated, propsForElement);
|
|
1931
|
+
}
|
|
1932
|
+
function createStyledComponent(target, options, rules) {
|
|
1933
|
+
var isTargetStyledComp = isStyledComponent(target);
|
|
1934
|
+
var styledComponentTarget = target;
|
|
1935
|
+
var isCompositeComponent = !isTag(target);
|
|
1936
|
+
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;
|
|
1937
|
+
var styledComponentId = options.displayName && options.componentId
|
|
1938
|
+
? "".concat(escape(options.displayName), "-").concat(options.componentId)
|
|
1939
|
+
: options.componentId || componentId;
|
|
1940
|
+
// fold the underlying StyledComponent attrs up (implicit extend)
|
|
1941
|
+
var finalAttrs = isTargetStyledComp && styledComponentTarget.attrs
|
|
1942
|
+
? styledComponentTarget.attrs.concat(attrs).filter(Boolean)
|
|
1943
|
+
: attrs;
|
|
1944
|
+
var shouldForwardProp = options.shouldForwardProp;
|
|
1945
|
+
if (isTargetStyledComp && styledComponentTarget.shouldForwardProp) {
|
|
1946
|
+
var shouldForwardPropFn_1 = styledComponentTarget.shouldForwardProp;
|
|
1947
|
+
if (options.shouldForwardProp) {
|
|
1948
|
+
var passedShouldForwardPropFn_1 = options.shouldForwardProp;
|
|
1949
|
+
// compose nested shouldForwardProp calls
|
|
1950
|
+
shouldForwardProp = function (prop, elementToBeCreated) {
|
|
1951
|
+
return shouldForwardPropFn_1(prop, elementToBeCreated) &&
|
|
1952
|
+
passedShouldForwardPropFn_1(prop, elementToBeCreated);
|
|
1953
|
+
};
|
|
1954
|
+
}
|
|
1955
|
+
else {
|
|
1956
|
+
shouldForwardProp = shouldForwardPropFn_1;
|
|
1957
|
+
}
|
|
1958
|
+
}
|
|
1959
|
+
var componentStyle = new ComponentStyle(rules, styledComponentId, isTargetStyledComp ? styledComponentTarget.componentStyle : undefined);
|
|
1960
|
+
// statically styled-components don't need to build an execution context object,
|
|
1961
|
+
// and shouldn't be increasing the number of class names
|
|
1962
|
+
var isStatic = componentStyle.isStatic && attrs.length === 0;
|
|
1963
|
+
function forwardRef(props, ref) {
|
|
1964
|
+
// eslint-disable-next-line
|
|
1965
|
+
return useStyledComponentImpl(WrappedStyledComponent, props, ref, isStatic);
|
|
1966
|
+
}
|
|
1967
|
+
forwardRef.displayName = displayName;
|
|
1968
|
+
/**
|
|
1969
|
+
* forwardRef creates a new interim component, which we'll take advantage of
|
|
1970
|
+
* instead of extending ParentComponent to create _another_ interim class
|
|
1971
|
+
*/
|
|
1972
|
+
var WrappedStyledComponent = React__default["default"].forwardRef(forwardRef);
|
|
1973
|
+
WrappedStyledComponent.attrs = finalAttrs;
|
|
1974
|
+
WrappedStyledComponent.componentStyle = componentStyle;
|
|
1975
|
+
WrappedStyledComponent.displayName = displayName;
|
|
1976
|
+
WrappedStyledComponent.shouldForwardProp = shouldForwardProp;
|
|
1977
|
+
// this static is used to preserve the cascade of static classes for component selector
|
|
1978
|
+
// purposes; this is especially important with usage of the css prop
|
|
1979
|
+
WrappedStyledComponent.foldedComponentIds = isTargetStyledComp
|
|
1980
|
+
? styledComponentTarget.foldedComponentIds.concat(styledComponentTarget.styledComponentId)
|
|
1981
|
+
: EMPTY_ARRAY;
|
|
1982
|
+
WrappedStyledComponent.styledComponentId = styledComponentId;
|
|
1983
|
+
// fold the underlying StyledComponent target up since we folded the styles
|
|
1984
|
+
WrappedStyledComponent.target = isTargetStyledComp ? styledComponentTarget.target : target;
|
|
1985
|
+
WrappedStyledComponent.withComponent = function withComponent(tag) {
|
|
1986
|
+
var previousComponentId = options.componentId, optionsToCopy = __rest(options, ["componentId"]);
|
|
1987
|
+
var newComponentId = previousComponentId &&
|
|
1988
|
+
"".concat(previousComponentId, "-").concat(isTag(tag) ? tag : escape(getComponentName(tag)));
|
|
1989
|
+
var newOptions = __assign(__assign({}, optionsToCopy), { attrs: finalAttrs, componentId: newComponentId });
|
|
1990
|
+
return createStyledComponent(tag, newOptions, rules);
|
|
1991
|
+
};
|
|
1992
|
+
Object.defineProperty(WrappedStyledComponent, 'defaultProps', {
|
|
1993
|
+
get: function () {
|
|
1994
|
+
return this._foldedDefaultProps;
|
|
1995
|
+
},
|
|
1996
|
+
set: function (obj) {
|
|
1997
|
+
this._foldedDefaultProps = isTargetStyledComp
|
|
1998
|
+
? mixinDeep({}, styledComponentTarget.defaultProps, obj)
|
|
1999
|
+
: obj;
|
|
2000
|
+
},
|
|
2001
|
+
});
|
|
2002
|
+
{
|
|
2003
|
+
checkDynamicCreation(displayName, styledComponentId);
|
|
2004
|
+
WrappedStyledComponent.warnTooManyClasses = createWarnTooManyClasses(displayName, styledComponentId);
|
|
2005
|
+
}
|
|
2006
|
+
WrappedStyledComponent.toString = function () { return ".".concat(WrappedStyledComponent.styledComponentId); };
|
|
2007
|
+
if (isCompositeComponent) {
|
|
2008
|
+
var compositeComponentTarget = target;
|
|
2009
|
+
hoistNonReactStatics(WrappedStyledComponent, compositeComponentTarget, {
|
|
2010
|
+
// all SC-specific things should not be hoisted
|
|
2011
|
+
attrs: true,
|
|
2012
|
+
componentStyle: true,
|
|
2013
|
+
displayName: true,
|
|
2014
|
+
foldedComponentIds: true,
|
|
2015
|
+
shouldForwardProp: true,
|
|
2016
|
+
styledComponentId: true,
|
|
2017
|
+
target: true,
|
|
2018
|
+
withComponent: true,
|
|
2019
|
+
});
|
|
2020
|
+
}
|
|
2021
|
+
return WrappedStyledComponent;
|
|
2022
|
+
}
|
|
2023
|
+
|
|
2024
|
+
function constructWithOptions(componentConstructor, tag, options) {
|
|
2025
|
+
if (options === void 0) { options = EMPTY_OBJECT; }
|
|
2026
|
+
// We trust that the tag is a valid component as long as it isn't falsish
|
|
2027
|
+
// Typically the tag here is a string or function (i.e. class or pure function component)
|
|
2028
|
+
// However a component may also be an object if it uses another utility, e.g. React.memo
|
|
2029
|
+
// React will output an appropriate warning however if the `tag` isn't valid
|
|
2030
|
+
if (!tag) {
|
|
2031
|
+
throw throwStyledComponentsError(1, tag);
|
|
2032
|
+
}
|
|
2033
|
+
/* This is callable directly as a template function */
|
|
2034
|
+
var templateFunction = function (initialStyles) {
|
|
2035
|
+
var interpolations = [];
|
|
2036
|
+
for (var _i = 1; _i < arguments.length; _i++) {
|
|
2037
|
+
interpolations[_i - 1] = arguments[_i];
|
|
2038
|
+
}
|
|
2039
|
+
return componentConstructor(tag, options, css.apply(void 0, __spreadArray([initialStyles], interpolations, false)));
|
|
2040
|
+
};
|
|
2041
|
+
/* Modify/inject new props at runtime */
|
|
2042
|
+
templateFunction.attrs = function (attrs) {
|
|
2043
|
+
return constructWithOptions(componentConstructor, tag, __assign(__assign({}, options), { attrs: Array.prototype.concat(options.attrs, attrs).filter(Boolean) }));
|
|
2044
|
+
};
|
|
2045
|
+
/**
|
|
2046
|
+
* If config methods are called, wrap up a new template function and merge options */
|
|
2047
|
+
templateFunction.withConfig = function (config) {
|
|
2048
|
+
return constructWithOptions(componentConstructor, tag, __assign(__assign({}, options), config));
|
|
2049
|
+
};
|
|
2050
|
+
return templateFunction;
|
|
2051
|
+
}
|
|
2052
|
+
|
|
2053
|
+
var baseStyled = function (tag) {
|
|
2054
|
+
return constructWithOptions(createStyledComponent, tag);
|
|
2055
|
+
};
|
|
2056
|
+
var styled = baseStyled;
|
|
2057
|
+
// Shorthands for all valid HTML Elements
|
|
2058
|
+
domElements.forEach(function (domElement) {
|
|
2059
|
+
// @ts-expect-error someday they'll handle imperative assignment properly
|
|
2060
|
+
styled[domElement] = baseStyled(domElement);
|
|
2061
|
+
});
|
|
2062
|
+
|
|
2063
|
+
/**
|
|
2064
|
+
* eliminates the need to do styled.default since the other APIs
|
|
2065
|
+
* are directly assigned as properties to the main function
|
|
2066
|
+
* */
|
|
2067
|
+
for (var key in secondary) {
|
|
2068
|
+
// @ts-expect-error shush
|
|
2069
|
+
styled[key] = secondary[key];
|
|
2070
|
+
}
|
|
2071
|
+
|
|
2072
|
+
return styled;
|
|
2073
|
+
|
|
2074
|
+
}));
|
|
2
2075
|
//# sourceMappingURL=styled-components.js.map
|