diff --git a/README.md b/README.md
index 5a52b3e..1bcae69 100644
--- a/README.md
+++ b/README.md
@@ -41,6 +41,12 @@
 
 <hr>
 
+## News
+
+nano-jsx is now at v0.1.x 🎉  
+This means, no breaking changes till v0.2.x  
+[Tweet about it!](http://twitter.com/share?text=nano-jsx%20has%20reached%20v0.1!&url=https://nanojsx.io/)
+
 ## Getting Started
 
 - Visit the [website](http://nanojsx.io/)
diff --git a/bundles/nano.full.min.js b/bundles/nano.full.min.js
index 184646c..d4f7731 100644
--- a/bundles/nano.full.min.js
+++ b/bundles/nano.full.min.js
@@ -1 +1 @@
-var nanoJSX;(()=>{"use strict";var e={974:function(e,t,n){var o=this&&this.__createBinding||(Object.create?function(e,t,n,o){void 0===o&&(o=n);var i=Object.getOwnPropertyDescriptor(t,n);i&&!("get"in i?!t.__esModule:i.writable||i.configurable)||(i={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,o,i)}:function(e,t,n,o){void 0===o&&(o=n),e[o]=t[n]}),i=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),s=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&o(t,e,n);return i(t,e),t};Object.defineProperty(t,"__esModule",{value:!0}),t.VERSION=t.printVersion=void 0;const r=n(900),a=n(236),l=n(743),c=n(205),d=n(998),h=n(681),p=n(403),u=n(790),m=n(723),f=n(714),b=n(174),g=n(432),_=s(n(287)),v=n(726),x=n(325),y=s(n(992));t.default={Component:c.Component,Fragment:d.Fragment,Helmet:m.Helmet,Img:b.Img,Link:f.Link,Router:_,Store:h.Store,UI:y,Visible:g.Visible,createContext:p.createContext,h:r.h,hydrate:r.hydrate,hydrateLazy:a.hydrateLazy,jsx:x.jsx,nodeToString:l.nodeToString,removeAllChildNodes:r.removeAllChildNodes,render:r.render,task:l.task,tick:r.tick,withStyles:u.withStyles,defineAsCustomElements:v.defineAsCustomElements};var w=n(743);Object.defineProperty(t,"printVersion",{enumerable:!0,get:function(){return w.printVersion}});var k=n(122);Object.defineProperty(t,"VERSION",{enumerable:!0,get:function(){return k.VERSION}})},205:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Component=void 0;const o=n(743),i=n(900),s=n(417);t.Component=class{constructor(e){this._elements=[],this._skipUnmount=!1,this._hasUnmounted=!1,this.props=e||{},this.id=this._getHash()}static get isClass(){return!0}get isClass(){return!0}setState(e,t=!1){"object"==typeof e&&null!==e&&void 0!==this.state?this.state=Object.assign(Object.assign({},this.state),e):this.state=e,t&&this.update()}set state(e){s._state.set(this.id,e)}get state(){return s._state.get(this.id)}set initState(e){void 0===this.state&&(this.state=e)}get elements(){return this._elements||[]}set elements(e){Array.isArray(e)||(e=[e]),e.forEach((e=>{this._elements.push(e)}))}_addNodeRemoveListener(){/^[^{]+{\s+}$/gm.test(this.didUnmount.toString())||(0,o.onNodeRemove)(this.elements[0],(()=>{this._skipUnmount||this._didUnmount()}))}_didMount(){this._addNodeRemoveListener(),this.didMount()}_willUpdate(){this.willUpdate()}_didUpdate(){this.didUpdate()}_didUnmount(){this._hasUnmounted||(this.didUnmount(),this._hasUnmounted=!0)}willMount(){}didMount(){}willUpdate(){}didUpdate(){}didUnmount(){}render(e){}update(e){this._skipUnmount=!0,this._willUpdate();const t=[...this.elements];this._elements=[];let n=this.render(e);n=(0,i._render)(n),this.elements=n;const o=t[0].parentElement;o||console.warn("Component needs a parent element to get updated!"),this.elements.forEach((e=>{o&&o.insertBefore(e,t[0])})),t.forEach((e=>{this.elements.includes(e)||(e.remove(),e=null)})),this._addNodeRemoveListener(),(0,i.tick)((()=>{this._skipUnmount=!1,this.elements[0].isConnected?this._didUpdate():this._didUnmount()}))}_getHash(){}}},723:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Helmet=void 0;const o=n(205),i=n(900);class s extends Map{toString(){let e="";for(const[t,n]of this)e+=` ${t}="${n}"`;return e.trim()}}class r extends o.Component{static SSR(e){var t,n;const o=/(<helmet\b[^>]*>)((.|\r|\n)*?)(<\/helmet>)/gm,i=[],r=[],a={html:new s,body:new s};if("undefined"!=typeof document&&document.head){let e=[];e=[].slice.call(document.head.children);for(let t=0;t<e.length;t++)-1===i.indexOf(e[t])&&i.push(e[t])}let l;for(;null!==(l=o.exec(e));){const o=l[1];let s=l[2];const c=/<html\s([^>]+)><\/html>/gm,d=/<body\s([^>]+)><\/body>/gm,h=/(\w+)="([^"]+)"/gm;let p=null;null===(t=e.match(c))||void 0===t||t.forEach((e=>{for(s=s.replace(e,"");null!==(p=h.exec(e));)a.html.set(p[1],p[2])})),null===(n=e.match(d))||void 0===n||n.forEach((e=>{for(s=s.replace(e,"");null!==(p=h.exec(e));)a.body.set(p[1],p[2])}));const u=o.includes('data-placement="head"');u&&!i.includes(s)?i.push(s):u||r.includes(s)||r.push(s)}return{body:e.replace(o,""),head:i,footer:r,attributes:a}}didMount(){this.props.children.forEach((e=>{var t,n,o,s;if(!(e instanceof HTMLElement))return;const r=this.props.footer?document.body:document.head,a=e.tagName;let l=[];l.push(e.innerText);for(let o=0;o<e.attributes.length;o++)l.push(null===(t=e.attributes.item(o))||void 0===t?void 0:t.name.toLowerCase()),l.push(null===(n=e.attributes.item(o))||void 0===n?void 0:n.value.toLowerCase());if("HTML"===a||"BODY"===a){const e=document.getElementsByTagName(a)[0];for(let t=1;t<l.length;t+=2)e.setAttribute(l[t],l[t+1]);return}if("TITLE"===a){const t=document.getElementsByTagName("TITLE");if(t.length>0){const n=e;t[0].text=n.text}else{const t=(0,i.h)("title",null,e.innerHTML);(0,i.appendChildren)(r,[t],!1)}return}let c=!1;l=l.sort();const d=document.getElementsByTagName(a);for(let e=0;e<d.length;e++){let t=[];t.push(d[e].innerText);for(let n=0;n<d[e].attributes.length;n++)t.push(null===(o=d[e].attributes.item(n))||void 0===o?void 0:o.name.toLowerCase()),t.push(null===(s=d[e].attributes.item(n))||void 0===s?void 0:s.value.toLowerCase());t=t.sort(),l.length>0&&t.length>0&&JSON.stringify(l)===JSON.stringify(t)&&(c=!0)}c||(0,i.appendChildren)(r,[e],!1)}))}render(){const e=this.props.footer?"footer":"head";return(0,i.isSSR)()?(0,i.h)("helmet",{"data-ssr":!0,"data-placement":e},this.props.children):[]}}t.Helmet=r},174:function(e,t,n){var o=this&&this.__rest||function(e,t){var n={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(o=Object.getOwnPropertySymbols(e);i<o.length;i++)t.indexOf(o[i])<0&&Object.prototype.propertyIsEnumerable.call(e,o[i])&&(n[o[i]]=e[o[i]])}return n};Object.defineProperty(t,"__esModule",{value:!0}),t.Img=void 0;const i=n(205),s=n(900);class r extends i.Component{constructor(e){super(e);const{src:t,key:n}=e;this.id=`${(0,s.strToHash)(t)}-${(0,s.strToHash)(JSON.stringify(e))}`,n&&(this.id+=`key-${n}`),this.state||this.setState({isLoaded:!1,image:void 0})}didMount(){const e=this.props,{lazy:t=!0,placeholder:n,children:i,key:r,ref:a}=e,l=o(e,["lazy","placeholder","children","key","ref"]);"boolean"==typeof t&&!1===t||new IntersectionObserver(((e,t)=>{e.forEach((e=>{e.isIntersecting&&(t.disconnect(),this.state.image=(0,s.h)("img",Object.assign({},l)),this.state.image.complete?(this.state.isLoaded=!0,this.update()):this.state.image.onload=()=>{this.state.isLoaded=!0,this.update()})}))}),{threshold:[0,1]}).observe(this.elements[0])}render(){const e=this.props,{src:t,placeholder:n,children:i,lazy:r=!0,key:a,ref:l}=e,c=o(e,["src","placeholder","children","lazy","key","ref"]);if("boolean"==typeof r&&!1===r)return this.state.image=(0,s.h)("img",Object.assign({src:t},c)),this.state.image;if(this.state.isLoaded)return this.state.image;if(n&&"string"==typeof n)return(0,s.h)("img",Object.assign({src:n},c));if(n&&"function"==typeof n)return n();{const e={};c.width&&(e.width=`${c.width}px`),c.height&&(e.height=`${c.height}px`);const{width:t,height:n}=c,i=o(c,["width","height"]);return(0,s.h)("div",Object.assign({style:e},i))}}}t.Img=r},714:function(e,t,n){var o=this&&this.__rest||function(e,t){var n={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(o=Object.getOwnPropertySymbols(e);i<o.length;i++)t.indexOf(o[i])<0&&Object.prototype.propertyIsEnumerable.call(e,o[i])&&(n[o[i]]=e[o[i]])}return n};Object.defineProperty(t,"__esModule",{value:!0}),t.Link=void 0;const i=n(205),s=n(723),r=n(900),a=n(998);class l extends i.Component{prefetchOnHover(){this.elements[0].addEventListener("mouseover",(()=>this.addPrefetch()),{once:!0})}prefetchOnVisible(){new IntersectionObserver(((e,t)=>{e.forEach((e=>{e.isIntersecting&&(t.disconnect(),this.addPrefetch())}))}),{threshold:[0,1]}).observe(this.elements[0])}addPrefetch(){let e=!1;const t=document.getElementsByTagName("link");for(let n=0;n<t.length;n++)"prefetch"===t[n].getAttribute("rel")&&t[n].getAttribute("href")===this.props.href&&(e=!0);if(!e){const e=(0,r.h)("link",{rel:"prefetch",href:this.props.href,as:"document"});document.head.appendChild(e)}}didMount(){const{href:e,prefetch:t,delay:n=0,back:o=!1}=this.props;o&&this.elements[0].addEventListener("click",(e=>{e.preventDefault();const t=e.target;t.href===document.referrer?window.history.back():window.location.href=t.href})),n>0&&this.elements[0].addEventListener("click",(t=>{t.preventDefault(),setTimeout((()=>window.location.href=e),n)})),t&&("hover"===t?this.prefetchOnHover():"visible"===t?this.prefetchOnVisible():this.addPrefetch())}render(){const e=this.props,{children:t,prefetch:n,back:i,ref:l}=e,c=o(e,["children","prefetch","back","ref"]);this.props.href||console.warn('Please add "href" to <Link>'),1!==t.length&&console.warn("Please add ONE child to <Link> (<Link>child</Link>)");const d=(0,r.h)("a",Object.assign({},c),...t);if(!0!==n||"undefined"!=typeof window&&window.document)return d;{const e=(0,r.h)("link",{rel:"prefetch",href:this.props.href,as:"document"}),t=(0,r.h)(s.Helmet,null,e);return(0,r.h)(a.Fragment,null,[t,d])}}}t.Link=l},287:function(e,t,n){var o=this&&this.__rest||function(e,t){var n={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(o=Object.getOwnPropertySymbols(e);i<o.length;i++)t.indexOf(o[i])<0&&Object.prototype.propertyIsEnumerable.call(e,o[i])&&(n[o[i]]=e[o[i]])}return n};Object.defineProperty(t,"__esModule",{value:!0}),t.parseParamsFromPath=t.Listener=t.Link=t.to=t.Route=t.Routes=t.Switch=t.matchPath=void 0;const i=n(205),s=n(900),r=[],a=e=>{window.history.pushState({},"",e),r.forEach((e=>e.handleChanges())),window.dispatchEvent(new Event("pushstate"))},l=e=>{window.history.replaceState({},"",e),r.forEach((e=>e.handleChanges())),window.dispatchEvent(new Event("replacestate"))};t.matchPath=(e,t)=>{const{exact:n=!1,regex:o}=t;let i,{path:s}=t;if(!s)return{path:null,url:e,isExact:!0,params:{}};let r={};if(s.includes("/:")){const t=s.split("/"),n=e.split("/");t.forEach(((e,i)=>{if(/^:/.test(e)){const s=e.slice(1),a=n[i];if(o&&o[s]&&!o[s].test(a))return null;r=Object.assign(Object.assign({},r),{[s]:a}),t[i]=n[i]}})),s=t.join("/")}if("*"===s&&(i=[e]),i||(i=new RegExp(`^${s}`).exec(e)),!i)return null;const a=i[0],l=e===a;return n&&!l?null:{path:s,url:a,isExact:l,params:r}};class c extends i.Component{constructor(){super(...arguments),this.index=0,this.path="",this.match={index:-1,path:""}}didMount(){window.addEventListener("popstate",this.handleChanges.bind(this)),r.push(this)}didUnmount(){window.removeEventListener("popstate",this.handleChanges.bind(this)),r.splice(r.indexOf(this),1)}handleChanges(){this.findChild(),this.shouldUpdate()&&this.update()}findChild(){this.match={index:-1,path:""},this.props.children=this.props.children.flat();for(let e=0;e<this.props.children.length;e++){const n=this.props.children[e],{path:o,exact:i,regex:r}=n.props;if((0,t.matchPath)((0,s.isSSR)()?_nano.location.pathname:window.location.pathname,{path:o,exact:i,regex:r}))return this.match.index=e,void(this.match.path=o)}}shouldUpdate(){return this.path!==this.match.path||this.index!==this.match.index}render(){this.findChild();const e=this.props.children[this.match.index];if(-1===this.match.index&&(this.path="",this.index=0),e){const{path:t}=e.props;this.path=t,this.index=this.match.index;const n=(0,s._render)(e);return(0,s.h)("div",{},(0,s._render)(n))}return this.props.fallback?(0,s.h)("div",{},(0,s._render)(this.props.fallback)):(0,s.h)("div",{},"not found")}}t.Switch=c,t.Routes=class extends c{},t.Route=({path:e,regex:n,children:o})=>{const i=(0,s.isSSR)()?_nano.location.pathname:window.location.pathname,r=(0,t.parseParamsFromPath)(e);return o.forEach((t=>{t.props&&(t.props=Object.assign(Object.assign({},t.props),{route:{path:e,regex:n,pathname:i,params:r}}))})),o},t.to=(e,t=!1)=>{t?l(e):a(e)},t.Link=e=>{var{to:t,replace:n,children:i}=e,r=o(e,["to","replace","children"]);return(0,s.h)("a",Object.assign({href:t,onClick:e=>(e.preventDefault(),void(n?l(t):a(t)))},r),i)};class d{constructor(){if(this._listeners=new Map,(0,s.isSSR)())return;this._route=window.location.pathname;const e=()=>{const e=window.location.pathname;this._listeners.forEach((t=>{t(e,this._route)})),this._route=e};window.addEventListener("pushstate",e),window.addEventListener("replacestate",e)}use(){const e=Math.random().toString(36).substring(2);return{subscribe:t=>{this._listeners.set(e,t)},cancel:()=>{this._listeners.has(e)&&this._listeners.delete(e)}}}}let h;t.Listener=()=>(h||(h=new d),h),t.parseParamsFromPath=e=>{let t={};const n=(0,s.isSSR)()?_nano.location.pathname.split("/"):window.location.pathname.split("/");return e.split("/").forEach(((e,o)=>{e.startsWith(":")&&(t=Object.assign(Object.assign({},t),{[e.slice(1)]:n[o]}))})),t}},432:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Visible=void 0;const o=n(900),i=n(205);class s extends i.Component{constructor(){super(...arguments),this.isVisible=!1}didMount(){new IntersectionObserver(((e,t)=>{e.forEach((e=>{e.isIntersecting&&(t.disconnect(),this.isVisible=!0,this.update())}))}),{threshold:[0,1]}).observe(this.elements[0])}render(){return this.isVisible?(this.props.onVisible&&this.props.onVisible(),(0,o.render)(this.props.component||this.props.children[0])):(0,o.h)("div",{"data-visible":!1,visibility:"hidden"})}}t.Visible=s},403:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.useContext=t.createContext=void 0,t.createContext=e=>{let t=e;return{Provider:e=>(e.value&&(t=e.value),e.children),Consumer:e=>({component:e.children[0](t),props:Object.assign(Object.assign({},e),{context:t})}),get:()=>t,set:e=>t=e}},t.useContext=e=>{const t=e;if(t&&"function"==typeof t.get)return t.get()}},900:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.h=t._render=t.hydrate=t.render=t.appendChildren=t.strToHash=t.removeAllChildNodes=t.tick=t.isSSR=void 0,n(499),t.isSSR=()=>"undefined"!=typeof _nano&&!0===_nano.isSSR,t.tick=Promise.prototype.then.bind(Promise.resolve()),t.removeAllChildNodes=e=>{for(;e.firstChild;)e.removeChild(e.firstChild)},t.strToHash=e=>{let t=0;for(let n=0;n<e.length;n++)t=(t<<5)-t+e.charCodeAt(n),t|=0;return Math.abs(t).toString(32)},t.appendChildren=(e,n,o=!0)=>{Array.isArray(n)?("object"==typeof n&&(n=Array.prototype.slice.call(n)),n.forEach((n=>{if(Array.isArray(n))(0,t.appendChildren)(e,n,o);else{const i=(0,t._render)(n);void 0!==i&&(Array.isArray(i)?(0,t.appendChildren)(e,i,o):(0,t.isSSR)()&&!o?e.appendChild(null==i.nodeType?i.toString():i):e.appendChild(null==i.nodeType?document.createTextNode(i.toString()):i))}}))):(0,t.appendChildren)(e,[n],o)},t.render=(e,n=null,o=!0)=>{let i=(0,t._render)(e);return Array.isArray(i)&&(i=i.map((e=>(0,t._render)(e))),1===i.length&&(i=i[0])),n?(o&&(0,t.removeAllChildNodes)(n),i&&n.id&&n.id===i.id&&n.parentElement?n.parentElement.replaceChild(i,n):Array.isArray(i)?i.forEach((e=>{(0,t.appendChildren)(n,(0,t._render)(e))})):(0,t.appendChildren)(n,(0,t._render)(i)),n):(0,t.isSSR)()&&!Array.isArray(i)?[i]:i},t.hydrate=t.render,t._render=e=>null===e||!1===e||void 0===e?[]:"string"==typeof e||"number"==typeof e?e.toString():e.tagName&&"svg"===e.tagName.toLowerCase()?(e=>{const n=e.children[0],o=n.attributes;if((0,t.isSSR)())return n;const i=s("svg");for(let e=o.length-1;e>=0;e--)i.setAttribute(o[e].name,o[e].value);return i.innerHTML=n.innerHTML,i})({children:[e]}):e.tagName||e&&3===e.nodeType?e:e&&e.component&&e.component.isClass?i(e):e.isClass?i({component:e,props:{}}):e.component&&"function"==typeof e.component?o(e):Array.isArray(e)?e.map((e=>(0,t._render)(e))).flat():"function"!=typeof e||e.isClass?e.component&&e.component.tagName&&"string"==typeof e.component.tagName||Array.isArray(e.component)||e.component?(0,t._render)(e.component):"object"==typeof e?[]:void console.warn("Something unexpected happened with:",e):(0,t._render)(e());const o=e=>{const{component:n,props:o}=e;return(0,t._render)(n(o))},i=e=>{const{component:n,props:o}=e,i=(0,t.strToHash)(n.toString());n.prototype._getHash=()=>i;const s=new n(o);(0,t.isSSR)()||s.willMount();let r=s.render();return r=(0,t._render)(r),s.elements=r,o&&o.ref&&o.ref(s),(0,t.isSSR)()||(0,t.tick)((()=>{s._didMount()})),r},s=e=>document.createElementNS("http://www.w3.org/2000/svg",e);t.h=(e,n={},...o)=>{if(n&&n.children&&(Array.isArray(o)?Array.isArray(n.children)?o=[...n.children,...o]:o.push(n.children):o=Array.isArray(n.children)?n.children:[n.children]),(0,t.isSSR)()&&_nano.ssrTricks.isWebComponent(e)){const i=_nano.ssrTricks.renderWebComponent(e,n,o,t._render);return null===i?`ERROR: "<${e} />"`:i}if("string"!=typeof e)return{component:e,props:Object.assign(Object.assign({},n),{children:o})};try{if((0,t.isSSR)()&&"string"==typeof e&&!document)throw new Error("document is not defined")}catch(e){console.log("ERROR:",e.message,"\n > Please read: https://github.com/nanojsx/nano/issues/106")}let i;const r="svg"===e?s("svg"):document.createElement(e),a=(e,t)=>0===t.indexOf("on")&&(!!e._ssr||"object"==typeof e[t]||"function"==typeof e[t]);for(const e in n){if("style"===e&&"object"==typeof n[e]){const t=Object.keys(n[e]).map((t=>`${t}:${n[e][t]}`)).join(";").replace(/[A-Z]/g,(e=>`-${e.toLowerCase()}`));n[e]=`${t};`}if("ref"===e)i=n[e];else if(a(r,e.toLowerCase()))r.addEventListener(e.toLowerCase().substring(2),(t=>n[e](t)));else if("dangerouslySetInnerHTML"===e&&n[e].__html)if((0,t.isSSR)())r.innerHTML=n[e].__html;else{const t=document.createElement("fragment");t.innerHTML=n[e].__html,r.appendChild(t)}else if("innerHTML"===e&&n[e].__dangerousHtml)if((0,t.isSSR)())r.innerHTML=n[e].__dangerousHtml;else{const t=document.createElement("fragment");t.innerHTML=n[e].__dangerousHtml,r.appendChild(t)}else/^className$/i.test(e)?r.setAttribute("class",n[e]):void 0!==n[e]&&r.setAttribute(e,n[e])}const l=!["noscript","script","style"].includes(e);return(0,t.appendChildren)(r,o,l),i&&i(r),r}},726:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.defineAsCustomElements=void 0;const o=n(900);t.defineAsCustomElements=function(e,t,n,i){(0,o.isSSR)()?((e,t,n=[],o={})=>{/^[a-zA-Z0-9]+-[a-zA-Z0-9]+$/.test(t)?_nano.customElements.set(t,e):console.log(`Error: WebComponent name "${t}" is invalid.`)})(e,t,n):customElements.define(t,class extends HTMLElement{constructor(){let t;super(),i?(this.attachShadow(i),this.$root=this.shadowRoot):this.$root=this;const n=this.buildEl((0,o._render)({component:e,props:{ref:e=>t=e,children:Array.from(this.children).map((e=>(0,o.render)(e)))}}));this.component=t,this.isFunctionalComponent=!e.isClass,this.functionalComponentsProps={},this.appendEl(n),this.isFunctionalComponent||(this.component.updatePropsValue=(e,t)=>{this.component.props||(this.component.props={}),this.component.props[e]=t,this.component[e]=t})}static get observedAttributes(){return n}buildEl(e){return(0,o.h)(this.shadowRoot?"div":"template",null,e)}appendEl(e){this.shadowRoot?this.$root.append(e):this.$root.append(...e.childNodes)}removeChildren(){var e;if(this.$root){const t=Array.from(null===(e=this.$root)||void 0===e?void 0:e.children)||[];for(const e of t)e.remove()}}attributeChangedCallback(t,n,i){if(this.isFunctionalComponent){this.removeChildren(),this.functionalComponentsProps[t]=i;const n=this.buildEl((0,o._render)({component:e,props:Object.assign({children:[],ref:e=>this.component=e},this.functionalComponentsProps)}));this.appendEl(n)}else this.component.updatePropsValue(t,i),this.component.update()}})}},998:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Fragment=void 0,t.Fragment=e=>e.children},743:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.printVersion=t.escapeHtml=t.onNodeRemove=t.detectSSR=t.nodeToString=t.task=void 0;const o=n(122);function i(e,t){return!!e&&(e===t||i(e.parentNode,t))}t.task=e=>setTimeout(e,0),t.nodeToString=e=>{const t=document.createElement("div");return t.appendChild(e.cloneNode(!0)),t.innerHTML},t.detectSSR=()=>{const e="undefined"!=typeof Deno,t="undefined"!=typeof window;return"undefined"!=typeof _nano&&_nano.isSSR||e||!t},t.onNodeRemove=(e,t)=>{let n=new MutationObserver((o=>{o.forEach((o=>{o.removedNodes.forEach((o=>{i(e,o)&&(t(),n&&(n.disconnect(),n=void 0))}))}))}));return n.observe(document,{childList:!0,subtree:!0}),n},t.escapeHtml=e=>e&&"string"==typeof e?e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&apos;"):e,t.printVersion=()=>{const e=`Powered by nano JSX v${o.VERSION}`;console.log(`%c %c %c %c %c ${e} %c http://nanojsx.io`,"background: #ff0000","background: #ffff00","background: #00ff00","background: #00ffff","color: #fff; background: #000000;","background: none")}},614:function(e,t,n){var o=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});const i=o(n(215));t.default=i.default},931:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.build=t.evaluate=t.treeify=void 0;const o=n(333);t.treeify=(e,t)=>{const n=e=>{let o="",i=null;const s=[],r=[];for(let a=1;a<e.length;a++){const l=e[a++],c=e[a]?t[e[a++]-1]:e[++a];3===l?o=c:4===l?(s.push(c),i=null):5===l?(i||(i=Object.create(null),s.push(i)),i[e[++a]]=[c]):6===l?i[e[++a]].push(c):2===l?r.push(n(c)):0===l&&r.push(c)}return{tag:o,props:s,children:r}},{children:o}=n(e);return o.length>1?o:o[0]},t.evaluate=(e,n,o,i)=>{let s;n[0]=0;for(let r=1;r<n.length;r++){const a=n[r++],l=n[r]?(n[0]|=a?1:2,o[n[r++]]):n[++r];3===a?i[0]=l:4===a?i[1]=Object.assign(i[1]||{},l):5===a?(i[1]=i[1]||{})[n[++r]]=l:6===a?i[1][n[++r]]+=`${l}`:a?(s=e.apply(l,(0,t.evaluate)(e,l,o,["",null])),i.push(s),l[0]?n[0]|=2:(n[r-2]=0,n[r]=s)):i.push(l)}return i},t.build=function(e,...t){const n=[e,...t],i=this;let s,r,a=1,l="",c="",d=[0];const h=e=>{1===a&&(e||(l=l.replace(/^\s*\n\s*|\s*\n\s*$/g,"")))?o.MINI?d.push(e?n[e]:l):d.push(0,e,l):3===a&&(e||l)?(o.MINI?d[1]=e?n[e]:l:d.push(3,e,l),a=2):2===a&&"..."===l&&e?o.MINI?d[2]=Object.assign(d[2]||{},n[e]):d.push(4,e,0):2===a&&l&&!e?o.MINI?(d[2]=d[2]||{})[l]=!0:d.push(5,0,!0,l):a>=5&&(o.MINI?5===a?((d[2]=d[2]||{})[r]=e?l?l+n[e]:n[e]:l,a=6):(e||l)&&(d[2][r]+=e?l+n[e]:l):((l||!e&&5===a)&&(d.push(a,0,l,r),a=6),e&&(d.push(a,e,0,r),a=6))),l=""};for(let t=0;t<e.length;t++){t&&(1===a&&h(),h(t));for(let n=0;n<e[t].length;n++)s=e[t][n],1===a?"<"===s?(h(),d=o.MINI?[d,"",null]:[d],a=3):l+=s:4===a?"--"===l&&">"===s?(a=1,l=""):l=s+l[0]:c?s===c?c="":l+=s:'"'===s||"'"===s?c=s:">"===s?(h(),a=1):a&&("="===s?(a=5,r=l,l=""):"/"===s&&(a<5||">"===e[t][n+1])?(h(),3===a&&(d=d[0]),a=d,o.MINI?(d=d[0]).push(i(...a.slice(1))):(d=d[0]).push(2,0,a),a=0):" "===s||"\t"===s||"\n"===s||"\r"===s?(h(),a=2):l+=s),3===a&&"!--"===l&&(a=4,d=d[0])}return h(),o.MINI?d.length>2?d.slice(1):d[1]:d}},333:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.MINI=void 0,t.MINI=!1},215:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0});const o=n(333),i=n(931),s=new Map;t.default=o.MINI?i.build:function(e){let t=s.get(this);return t||(t=new Map,s.set(this,t)),t=(0,i.evaluate)(this,t.get(e)||(t.set(e,t=(0,i.build)(e)),t),arguments,[]),t.length>1?t:t[0]}},325:function(e,t,n){var o=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.jsx=void 0;const i=n(900),s=o(n(614)).default.bind(i.h);t.jsx=s},236:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.hydrateLazy=void 0;const o=n(900),i=n(432);t.hydrateLazy=(e,t=null,n=!0)=>{const s=(0,o.h)(i.Visible,null,e);return(0,o.hydrate)(s,t,n)}},417:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t._clearState=t._state=void 0,t._state=new Map,t._clearState=()=>{t._state.clear()}},681:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Store=void 0;const o=n(900);t.Store=class{constructor(e,t="",n="memory"){if(this._listeners=new Map,(0,o.isSSR)()&&(n="memory"),this._id=t,this._storage=n,this._state=this._prevState=e,"memory"===n||!n)return;const i="local"===n?localStorage:sessionStorage,s=i.getItem(this._id);s?this._state=this._prevState=JSON.parse(s):i.setItem(this._id,JSON.stringify(e))}persist(e){"memory"!==this._storage&&("local"===this._storage?localStorage:sessionStorage).setItem(this._id,JSON.stringify(e))}clear(){this._state=this._prevState=void 0,"local"===this._storage?localStorage.removeItem(this._id):"session"===this._storage&&sessionStorage.removeItem(this._id)}setState(e){this.state=e}set state(e){this._prevState=this._state,this._state=e,this.persist(e),this._listeners.forEach((e=>{e(this._state,this._prevState)}))}get state(){return this._state}use(){const e=Math.random().toString(36).substring(2,9),t=this;return{get state(){return t.state},setState:e=>{this.state=e},subscribe:t=>{this._listeners.set(e,t)},cancel:()=>{this._listeners.has(e)&&this._listeners.delete(e)}}}}},499:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0})},690:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.zIndex=t.rippleEffect=t.userSelect=t.boxShadow=void 0;const o=n(900);t.boxShadow="\n  -webkit-box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12);\n  -moz-box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12);\n  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12);\n",t.userSelect="\n  -webkit-touch-callout:none;\n  -webkit-user-select:none;\n  -khtml-user-select:none;\n  -moz-user-select:none;\n  -ms-user-select:none;\n  user-select:none;\n  -webkit-tap-highlight-color:rgba(0,0,0,0);\n",t.rippleEffect=(e,t)=>{const n=`ripple-${(0,o.strToHash)(e+t)}`;return{styles:`  \n  .${n} {\n    background-position: center;\n    transition: background 0.8s;\n  }\n  \n  .${n}:hover {\n    background: ${t} radial-gradient(circle, transparent 1%, ${t} 1%) center/15000%;\n  }\n\n  .${n}:focus {\n    background: ${t} radial-gradient(circle, transparent 1%, ${t} 1%) center/15000%;\n  }\n  \n  .${n}:active {\n    background-color: ${e};\n    background-size: 100%;\n    transition: background 0s;\n  }`,class:n}},t.zIndex={button:"unset;",banner:"50;",bar:"100;",navigation:"100;",fab:"200;",sheet:"300;",menu:"400;",snackbar:"500;",dialog:"600;"}},437:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.addStylesToHead=t.lightenColor=void 0;const o=n(900);t.lightenColor=(e,t)=>{const n=parseInt(e.replace("#",""),16),o=Math.round(2.55*t),i=(n>>16)+o,s=(n>>8&255)+o,r=(255&n)+o;return`#${(16777216+65536*(i<255?i<1?0:i:255)+256*(s<255?s<1?0:s:255)+(r<255?r<1?0:r:255)).toString(16).slice(1)}`},t.addStylesToHead=(e,t)=>{if(!document.querySelector(`[data-css-hash*="${t}"]`)){const n=(0,o.h)("style",{"data-css-hash":t},e);document.head.appendChild(n)}}},308:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.AppBar=void 0;const o=n(205),i=n(900),s=n(690);class r extends o.Component{constructor(){super(...arguments),this.curr_scrollY=0,this.last_scrollY=0,this.curr_scrollingState="none",this.last_scrollingState="none"}calcScrollPosition(){this.curr_scrollY=window.scrollY,this.curr_scrollY>this.last_scrollY?this.curr_scrollingState="down":this.curr_scrollY<this.last_scrollY&&(this.curr_scrollingState="up"),this.last_scrollY=this.curr_scrollY}scroll(){this.calcScrollPosition(),this.curr_scrollY<1?this.container.classList.remove("appBar_scrolling_down"):this.last_scrollingState!==this.curr_scrollingState&&(this.last_scrollingState=this.curr_scrollingState,"down"===this.curr_scrollingState?this.container.classList.add("appBar_scrolling_down"):this.container.classList.remove("appBar_scrolling_down"))}merge(){this.calcScrollPosition(),this.curr_scrollY<=1?this.container.classList.add("appBar_merged"):this.container.classList.remove("appBar_merged")}didMount(){this.curr_scrollY=this.last_scrollY=window.scrollY,this.props.autoHide&&window.addEventListener("scroll",(()=>this.scroll())),this.props.autoMerge&&window.addEventListener("scroll",(()=>this.merge()))}didUnmount(){this.props.autoHide&&window.removeEventListener("scroll",this.scroll),this.props.autoMerge&&window.removeEventListener("scroll",(()=>this.merge()))}render(){const{background:e="#6200EE",color:t="white"}=this.props,n=`\n    .appBar_container {\n      background: ${e};\n      color: ${t};\n      font-weight: 500;\n\n      z-index: ${s.zIndex.bar}\n\n      position: fixed;\n      top: 0;\n      left: 0;\n      min-height: 24px;\n      width: 100vw;\n\n\n      ${s.boxShadow}\n\n      transition: top 0.2s, -webkit-box-shadow 0.5s, -moz-box-shadow 0.5s, box-shadow 0.5s;\n    }\n\n    .appBar_container.appBar_scrolling_down {\n      top: -56px;\n    }\n\n    .appBar_container.appBar_merged {\n      -webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n    }\n\n    .appBar_container .toolbar_container {\n      display: flex;\n      justify-content: space-between;\n    }\n\n    .appBar_container .toolbar_container,\n    .appBar_container .tabs_container {\n      margin: 0 auto;\n      ${this.props.maxWidth?`max-width: ${this.props.maxWidth}px;`:""}\n    }\n\n    .appBar_container .toolbar_container .toolbar_left,\n    .appBar_container .toolbar_container .toolbar_right {\n      display: flex;\n      align-items: center;      \n    }\n\n    .appBar_container .toolbar_container .toolbar_left {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .appBar_container .toolbar_title {\n      font-size: 20px;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    `;document.head.appendChild((0,i.h)("style",{},n));const o=this.props.autoMerge?"appBar_merged":"";return this.container=(0,i.h)("div",{class:`appBar_container ${o}`},this.props.children),this.container}}t.AppBar=r},620:function(e,t,n){var o=this&&this.__rest||function(e,t){var n={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(o=Object.getOwnPropertySymbols(e);i<o.length;i++)t.indexOf(o[i])<0&&Object.prototype.propertyIsEnumerable.call(e,o[i])&&(n[o[i]]=e[o[i]])}return n};Object.defineProperty(t,"__esModule",{value:!0}),t.Button=void 0;const i=n(900),s=n(690),r=n(437),a=n(897);t.Button=e=>{const{children:t,outlined:n=!1,text:l=!1,background:c="#6200ee",color:d="#ffffff",style:h="",class:p="",icon:u}=e,m=o(e,["children","outlined","text","background","color","style","class","icon"]),f=!(n||l),b=f?c:"#ffffff",g=f?d:c,_=f?(0,r.lightenColor)(b,10):(0,r.lightenColor)(b,-10),v=f?(0,r.lightenColor)(b,50):(0,r.lightenColor)(c,50),x=(0,i.strToHash)(n.toString()+l.toString()+b+g+h),y=(0,s.rippleEffect)(v,_),w=`\n    .nano_jsx_button-${x} {\n      color: ${g};\n      background: ${b};\n      border-radius: 4px;\n      display: inline-flex;\n      font-size: 14px;\n      padding: 10px 16px;\n      margin: 0px 0px 1em 0px;\n      text-align: center;\n      cursor: pointer;\n\n      ${s.userSelect}\n      \n\n      z-index: ${s.zIndex.button}\n\n      ${s.boxShadow}\n\n      border: none;\n      text-transform: uppercase;\n      box-shadow: 0 0 4px #999;\n      outline: none;\n    }\n\n    ${y.styles}\n  `;(0,r.addStylesToHead)(w,x);let k="";return(n||l)&&(k+="padding-top: 9px; padding-bottom: 9px; ",k+="-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow none; ",n&&(k+=`border: 1px ${g} solid; `)),k+=h,(0,i.h)("button",Object.assign({class:`nano_jsx_button-${x} ${y.class} ${p}`,style:k},m),u?(0,i.h)(a.Icon,{style:"margin-left: -4px; margin-right: 8px; width: 14px; height: 14px;"},u):null,t)}},485:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Dialog=void 0;const o=n(900),i=n(690),s=n(620);t.Dialog=class{constructor(e={}){this.options=e,this.defaultParentId="dialog_container",this.defaultActionColor="#6200EE";const t={title:"Dialog Title",body:"Dialog body text.",actions:[{name:"Action 1",color:this.defaultActionColor},{name:"Action 2",color:this.defaultActionColor}],firstFocusAction:!1};this.options=Object.assign(Object.assign({},t),e);const n=`\n    #dialog_container {  \n      background: #00000070;\n      position: fixed;\n      bottom: 0px;\n      left: 0px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-direction: column;\n      width: 100vw;\n      height: 100vh;\n      overflow: hidden;\n      \n      z-index: ${i.zIndex.dialog}\n\n      animation-name: dialog-fadein;\n      animation-duration: 0.2s;\n\n      transition: opacity 0.2s;\n      opacity: 1;\n    }\n\n    #dialog_container.dialog_fadeout {\n      opacity: 0;\n    } \n\n    #dialog_container .dialog {\n      background-color: white;\n      border-radius: 4px;\n      min-width: 240px;\n      max-width: min(500px, 80%);\n\n      margin: 8px;\n\n      ${i.boxShadow}\n    }\n\n    #dialog_container .dialog .dialog_header {\n      color: #000000DE;\n      font-size: 20px;\n      padding: 0px 24px 9px;\n      margin: 24px 0px 6px 0px;\n      line-height: 1;\n    }\n\n    #dialog_container .dialog .dialog_body {\n      color: #00000099;\n      font-size: 16px;  \n      padding: 0px 24px 20px;\n      line-height: 1.5em;\n    }\n\n    #dialog_container .dialog .dialog_actions {\n      \n      margin: 0;\n      padding: 8px;\n      \n      display: flex;\n      flex-direction: row;\n      align-items: flex-end;\n      float: right;\n\n      flex-wrap: wrap;\n      justify-content: flex-end;\n    }\n\n    #dialog_container .dialog .dialog_action {\n      margin-bottom: 0px;\n      margin-left: 10px;\n    }\n\n    /*#dialog_container .dialog .dialog_action:hover {\n      border-radius: 4px;      \n      background: #0000000a;\n    }*/\n\n    @keyframes dialog-fadein {\n      from {opacity: 0;}\n      to {opacity: 1;}\n    }\n    `;document.head.appendChild((0,o.h)("style",{},n)),this.handleKeydown=this.handleKeydown.bind(this)}getParentElement(e){let t=document.getElementById(e||this.defaultParentId);return t||(t=document.createElement("div"),t.id=this.defaultParentId,t.ariaHidden="true",document.body.appendChild(t)),t}handleKeydown(e){if("Escape"!==e.key&&"Esc"!==e.key||this.remove(),"Tab"===e.key){e.preventDefault();const t=Array.from(document.querySelectorAll(".dialog_action"));if(t.length<1)return;const n=t.findIndex((e=>document.activeElement===e));-1===n&&t[0].focus();const o=n+(e.shiftKey?-1:1);if(-1===o)return void t[t.length-1].focus();if(o===t.length)return void t[0].focus();t[o].focus()}}remove(){const e=document.getElementById("dialog_container");e&&(e.classList.add("dialog_fadeout"),setTimeout((()=>{e.remove(),window.removeEventListener("keydown",this.handleKeydown),this.enableScroll()}),200))}disableScroll(){document.body.style.overflow="hidden"}enableScroll(){document.body.style.overflow=""}focusAction(e,t){const n=Array.from(document.querySelectorAll(".dialog_action"))[t.findIndex((t=>t.id===e))];n&&n.focus()}focusFirstAction(){const e=Array.from(document.querySelectorAll(".dialog_action"))[0];e&&e.focus()}show(e,t){e=Object.assign(Object.assign({},this.options),e);const n=this.getParentElement(e.parentId||this.defaultParentId);if(n.hasChildNodes())return;n.addEventListener("click",(e=>{e.target===n&&this.remove()}));const i=((e,n,i)=>{const r=i.map((e=>(0,o.h)(s.Button,{text:!0,color:e.color||this.defaultActionColor,class:"dialog_action",onClick:()=>{t({name:e.name,id:e.id}),this.remove()}},e.name.toUpperCase()))),a=(0,o.h)("h2",{class:"dialog_header",id:"dialog-title"},e),l=(0,o.h)("div",{class:"dialog_body"},n),c=(0,o.h)("div",{class:"dialog_actions"},r);return(0,o.h)("div",{class:"dialog",role:"dialog","aria-modal":"true","aria-labelledby":"dialog-title"},a,l,c)})(e.title,e.body,e.actions||[]);n.appendChild(i);const{firstFocusAction:r}=e;e.actions&&r&&("string"==typeof r?this.focusAction(r,e.actions):this.focusFirstAction()),this.disableScroll(),window.addEventListener("keydown",this.handleKeydown);const a=document.getElementsByClassName("dialog")[0],l=document.getElementsByClassName("dialog_actions")[0];a.clientWidth<=l.clientWidth&&l.setAttribute("style","flex-direction: column;")}}},571:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Fab=void 0;const o=n(205),i=n(900),s=n(690),r=n(437);class a extends o.Component{render(){const{background:e="#6200EE",color:t="white",extended:n=!1,mini:o=!1,center:a=!1,left:l=!1,onClick:c=(()=>{})}=this.props,d=o?40:n?48:56,h=(0,i.strToHash)(n.toString()+o.toString()+a.toString()+l.toString()),p=`fab-container-${h}`,u=`\n      .${p} {\n        ${o?"width: 40px;":n?"padding: 0px 12px;":"width: 56px;"}\n        height: ${d}px;\n        position: fixed;\n        background: ${e};\n        border-radius: 36px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        color: ${t};\n        cursor: pointer;\n\n        z-index: ${s.zIndex.fab}\n        bottom: ${this.props.offsetY?16+this.props.offsetY:16}px;        \n        ${l?"left: 16px;":"right: 16px;"}\n        ${a?"transform: translateX(50%); right: 50%;":""}\n        ${s.boxShadow}\n        ${s.userSelect}\n      }\n    `;(0,r.addStylesToHead)(u,h);const{children:m}=this.props;return(0,i.h)("div",{class:p,onClick:e=>c(e)},m)}}t.Fab=a},897:function(e,t,n){var o=this&&this.__rest||function(e,t){var n={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(o=Object.getOwnPropertySymbols(e);i<o.length;i++)t.indexOf(o[i])<0&&Object.prototype.propertyIsEnumerable.call(e,o[i])&&(n[o[i]]=e[o[i]])}return n};Object.defineProperty(t,"__esModule",{value:!0}),t.Icon=void 0;const i=n(205),s=n(900),r=n(437);class a extends i.Component{didUnmount(){}render(){const e=this.props,{src:t,size:n=16,active:i=!0,color:a="#6204EE",style:l=""}=e,c=o(e,["src","size","active","color","style"]),d=this.props.children;this.cssHash=(0,s.strToHash)(i+a+n.toString());const h=a,p=`\n    i.icon-${this.cssHash} {\n      width: ${n}px;\n      height: ${n}px;\n      display: inline-block;\n      content: '';\n\n      /*-webkit-mask: url(YOUR_SVG_URL) no-repeat 50% 50%;\n      mask: url(YOUR_SVG_URL) no-repeat 50% 50%;*/\n\n      -webkit-mask-size: cover;\n      mask-size: cover; \n\n      background-color: ${h};\n    }\n\n    i.icon-${this.cssHash}.icon_inactive-${this.cssHash} {\n      background-color: #00000070;\n    }\n    `;(0,r.addStylesToHead)(p,this.cssHash);const u=`-webkit-mask: url(${t||d}) no-repeat 50% 50%; mask: url(${t||d}) no-repeat 50% 50%;`,m=[`icon-${this.cssHash}`];return i||m.push(`icon_inactive-${this.cssHash}`),(0,s.h)("i",Object.assign(Object.assign({class:m.join(" ")},c),{style:u+l}))}}t.Icon=a},992:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Sheet=t.Tab=t.Tabs=t.Snackbar=t.Menu=t.ListItem=t.List=t.Icon=t.Fab=t.Dialog=t.Button=t.NavigationAction=t.Navigation=t.Toolbar=t.AppBar=void 0;var o=n(308);Object.defineProperty(t,"AppBar",{enumerable:!0,get:function(){return o.AppBar}});var i=n(865);Object.defineProperty(t,"Toolbar",{enumerable:!0,get:function(){return i.Toolbar}});var s=n(302);Object.defineProperty(t,"Navigation",{enumerable:!0,get:function(){return s.Navigation}}),Object.defineProperty(t,"NavigationAction",{enumerable:!0,get:function(){return s.NavigationAction}});var r=n(620);Object.defineProperty(t,"Button",{enumerable:!0,get:function(){return r.Button}});var a=n(485);Object.defineProperty(t,"Dialog",{enumerable:!0,get:function(){return a.Dialog}});var l=n(571);Object.defineProperty(t,"Fab",{enumerable:!0,get:function(){return l.Fab}});var c=n(897);Object.defineProperty(t,"Icon",{enumerable:!0,get:function(){return c.Icon}});var d=n(203);Object.defineProperty(t,"List",{enumerable:!0,get:function(){return d.List}}),Object.defineProperty(t,"ListItem",{enumerable:!0,get:function(){return d.ListItem}});var h=n(32);Object.defineProperty(t,"Menu",{enumerable:!0,get:function(){return h.Menu}});var p=n(878);Object.defineProperty(t,"Snackbar",{enumerable:!0,get:function(){return p.Snackbar}});var u=n(248);Object.defineProperty(t,"Tabs",{enumerable:!0,get:function(){return u.Tabs}}),Object.defineProperty(t,"Tab",{enumerable:!0,get:function(){return u.Tab}});var m=n(340);Object.defineProperty(t,"Sheet",{enumerable:!0,get:function(){return m.Sheet}})},203:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.List=t.ListItem=void 0;const o=n(205),i=n(900),s=n(897),r=n(437);class a extends o.Component{render(){const{props:e}=this,{onClick:t=(()=>{})}=e,n="margin-right: 16px;",o=e.icon?(0,i.h)(s.Icon,{size:20,style:"margin-right: 32px;",src:e.icon}):null,r=e.avatar?(0,i.h)("img",{src:e.avatar,width:40,height:40,style:`border-radius: 20px; ${n}`}):null,a=e.square?(0,i.h)("img",{src:e.square,width:56,height:56,style:n}):null,l=e.image?(0,i.h)("img",{src:e.image,width:100,height:56,style:"margin-left: -16px; margin-right: 16px;"}):null,c=(0,i.h)("span",null,e.children);let d="";return(e.icon||e.avatar)&&(d+="min-height: 56px; "),(e.square||e.image)&&(d+="min-height: 72px; "),(0,i.h)("li",{style:d,onClick:t},o,r,a,l,c)}}t.ListItem=a;class l extends o.Component{render(){const{small:e=!1}=this.props;this.cssHash=(0,i.strToHash)(`List${e.toString()}`);const t=`\n      .list-${this.cssHash} ul {\n        margin: 0px;\n        padding: 8px 16px;\n      }\n\n      .list-${this.cssHash} ul li {\n        list-style: none;\n        min-height: ${e?32:46}px;\n        display: flex;\n        align-items: center;\n        margin: 0px -16px;\n        padding: 0px 16px;\n        cursor: pointer;\n      }\n\n      .list-${this.cssHash} ul li span {\n        font-size: 16px;\n      }\n\n      .list-${this.cssHash} ul li:hover  {\n        background:#00000010\n      }    \n    `;(0,r.addStylesToHead)(t,this.cssHash);const n=(0,i.h)("ul",null,this.props.children);return(0,i.h)("div",{class:`list-${this.cssHash}`},n)}}t.List=l},32:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Menu=void 0;const o=n(900),i=n(690),s=n(437);t.Menu=class{constructor(){this.defaultParentId="menu_items_container",this.cssHash=Math.random().toString(36).substring(2)}getParentElement(e){document.querySelectorAll(`[id^="${this.defaultParentId}"]`).forEach((e=>{e.remove()}));let t=document.getElementById(`${this.defaultParentId}-${e}`);return t||(t=document.createElement("div"),t.id=`${this.defaultParentId}-${e}`),(0,o.removeAllChildNodes)(t),document.body.appendChild(t),t}close(){(0,o.removeAllChildNodes)(this.getParentElement(this.cssHash))}open(e){const{position:t,list:n}=e,r=t.x<window.innerWidth/2?"left":"right",a=t.y<window.innerHeight/2?"top":"bottom",l=`\n   \n    #menu_items_background-${this.cssHash} {\n      width: 100vw;\n      height: 100vh;\n      background: transparent;\n      position: fixed;\n      top: 0;\n      left: 0;\n      z-index: ${i.zIndex.menu}      \n    }\n   \n    #menu_items_list-${this.cssHash} {\n      position: fixed;\n      background: white;\n      \n      border-radius: 4px;\n      min-width: 112px;\n\n      ${a}: ${t.y>window.innerHeight/2?window.innerHeight-t.y:t.y}px;\n      ${r}: ${t.x>window.innerWidth/2?window.innerWidth-t.x:t.x}px;\n\n      z-index: ${i.zIndex.menu}\n\n      ${i.boxShadow}\n    }\n\n    `,c=document.querySelector(`[data-css-hash*="${this.cssHash}"]`);c&&c.remove(),(0,s.addStylesToHead)(l,this.cssHash);const d=(0,o.h)("div",{id:`menu_items_list-${this.cssHash}`},n),h=(0,o.h)("div",{onClick:()=>this.close(),id:`menu_items_background-${this.cssHash}`},d);d.addEventListener("click",(e=>e.stopPropagation())),this.getParentElement(this.cssHash).appendChild((0,o.render)(h))}}},302:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Navigation=t.NavigationAction=void 0;const o=n(900),i=n(205),s=n(690),r=n(897),a="bottom_navigation_action_id-",l="bottom_navigation_action_inactive";class c extends i.Component{willMount(){var e;this.id=null!==(e=this.props.id)&&void 0!==e?e:this.props.label.toLowerCase().replace(/\s/gm,"-").replace(/[-]+/gm,"-")}render(){const e=(0,o.h)("span",{class:"bottom_navigation_label"},this.props.label),t=["bottom_navigation_action"];return this.props.active?t.push("bottom_navigation_label_initial_active"):t.push(l),(0,o.h)("div",{id:`${a}${this.id}`,class:t.join(" "),onClick:()=>{var e,t;this.props.link&&(window.location.href=this.props.link),null===(t=(e=this.props).onClick)||void 0===t||t.call(e,{navigate:!!this.props.link,id:this.id,label:this.props.label,component:this})}},this.props.icon?(0,o.h)(r.Icon,{size:22,style:"margin-bottom: 2px;",src:this.props.icon}):null,e)}}t.NavigationAction=c;class d extends i.Component{didMount(){this.props.children.forEach((e=>{e.props.onClick=e=>{var t,n;e.navigate||(document.querySelectorAll(`[id^="${a}"]`).forEach((t=>{t.id===`${a}${e.id}`?t.classList.remove(l):t.classList.add(l)})),null===(n=(t=this.props).onClick)||void 0===n||n.call(t,e))}}))}render(){const e="#00000070",t=`\n      #bottom_navigation_container {\n\n        background-color: white;\n        position: fixed;\n        bottom: 0;\n        left: 0;\n        width: 100vw;\n        min-height: 56px;\n\n        z-index: ${s.zIndex.navigation}\n\n        display: flex;\n        justify-content: center;\n        \n        ${s.boxShadow}\n      } \n\n      #bottom_navigation_container .bottom_navigation_label {\n        transition: font-size 0.2s;\n      }\n\n      #bottom_navigation_container .bottom_navigation_label_initial_active .bottom_navigation_label{\n        animation-name: bottom_navigation_label_fontsize;\n        animation-duration: 0.2s;\n      }\n\n      @keyframes bottom_navigation_label_fontsize {\n        from {font-size: 12px;}\n        to {font-size: 14px;}\n      }\n\n      #bottom_navigation_container .bottom_navigation_action {\n        color: #6204EE;\n        font-size: 14px;\n\n        min-width: 80px;\n        max-width: 168px;\n        flex-grow: 1;\n\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        align-items: center;\n\n        cursor: pointer;\n      }\n\n      #bottom_navigation_container .bottom_navigation_action_inactive{\n        color: ${e};\n        font-size: 12px;\n      }\n\n      #bottom_navigation_container .bottom_navigation_action_inactive i {\n        background-color: ${e}\n      }\n    `;document.head.appendChild((0,o.h)("style",{},t));const{parentId:n,children:i}=this.props,r=(0,o.h)("div",{id:"bottom_navigation_container"},i);if(n){const e=document.getElementById(n);if(e)return void e.appendChild(r)}return r}}t.Navigation=d},340:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Sheet=void 0;const o=n(205),i=n(900),s=n(690),r=n(437);class a extends o.Component{static show(e){document.body.appendChild((0,i.render)(e))}static close(){const e=document.querySelector("[class^=sheet_container]");e&&e.remove()}render(){const{mode:e="custom",title:t,subtitle:n}=this.props,o=(0,i.strToHash)(`sheet${e}`),a="side"===e?"left":e;let l="";("side"===e||"right"===e||"left"===e)&&(l+=`\n        min-width: 256px;\n        max-width: calc(100vw - 56px);\n        height: 100vh;\n\n        top: 0;\n        ${"right"===e?"right":"left"}: 0;`),"bottom"===e&&(l+="\n        width: 100vw;\n        bottom: 0px;      \n        left: 0;");const c=`\n      @keyframes sheet_fadein_${a}-${o} {\n        from {${a}: -100%;}\n        to {${a}: 0;}\n      }\n\n      .sheet_container-${o} {\n      }\n\n      .sheet_sheet-${o} {\n        overflow: scroll;\n        max-height: 100vh;\n\n        ${l}\n        background: white;\n        position: fixed;\n\n        ${"bottom"===e?"border-radius: 4px;":""}\n\n        box-sizing: border-box;\n        ${s.boxShadow}\n\n        z-index: ${s.zIndex.sheet}\n\n        animation-name: sheet_fadein_${a}-${o};\n        animation-duration: 0.2s;\n\n        transition: top 2s, right 2s, bottom 2s, left 2s;\n      }\n\n      .sheet_background-${o} {\n        background: #00000070;\n        position: fixed;\n        top: 0px;\n        left: 0px;\n        width: 100vw;\n        height: 100vh;\n        z-index: ${s.zIndex.sheet}\n\n        animation-name: sheet-background-fadein;\n        animation-duration: 0.2s;\n      }\n\n      @keyframes sheet-background-fadein {\n        from {opacity: 0;}\n        to {opacity: 1;}\n      }\n      \n      .sheet_title-${o} {\n        padding: 20px 16px 0px;\n        font-size: 24px;\n      }\n      \n      .sheet_subtitle-${o} {\n        padding: 8px 16px;\n        font-size: 14px;\n        color: #000000b0;\n      }`;(0,r.addStylesToHead)(c,o);const d=(0,i.h)("div",{class:`sheet_background-${o}`,onClick:()=>{m.remove()}}),h=t?(0,i.h)("div",{class:`sheet_title-${o}`},t):null,p=n?(0,i.h)("div",{class:`sheet_subtitle-${o}`},n):null,u=(0,i.h)("div",{class:`sheet_sheet-${o}`},h,p,this.props.children),m=(0,i.h)("div",{class:`sheet_container-${o}`},d,u);return m}}t.Sheet=a},878:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Snackbar=void 0;const o=n(900),i=n(690);t.Snackbar=class{constructor(e={}){this.options=e,this.defaultParentId="snackbar_container",this.defaultActionColor="#BC86FC";const t={message:"Hello Snack!",actions:[{name:"Dismiss",color:this.defaultActionColor}],autoHide:!0,consecutive:!0,offsetY:0};this.options=Object.assign(Object.assign({},t),e);const n=`\n      #snackbar_container {    \n        position: fixed;\n        bottom: ${this.options.offsetY}px;\n        left: 0px;\n        overflow: hidden;\n        z-index: ${i.zIndex.snackbar}\n      }\n\n      #snackbar_container .snackbar_snack {\n        background-color: #323232;\n\n        padding: 16px 16px 16px 16px;\n        margin: 0px 8px 8px 8px;\n\n        border-radius: 4px;\n        width: 344px;\n        max-width: calc(100vw - 16px);\n        box-sizing: border-box;\n        display: flex;\n        justify-content: space-between;\n        height: fit-content;\n        overflow: hidden;\n\n        ${i.boxShadow}\n\n        animation-name: snackbar-fadein;\n        animation-duration: 0.2s;\n\n        transition: opacity 0.2s;\n        opacity: 1;\n      }\n\n      #snackbar_container .snackbar_snack_fadeout {\n        opacity: 0;\n      } \n\n      #snackbar_container .snackbar_snack .snackbar_message {\n        color: #DFDFDF;\n        font-size: 16px;\n        align-self: center;\n      }\n\n      #snackbar_container .snackbar_snack .snackbar_actions {\n        align-self: center;\n      }\n\n      #snackbar_container .snackbar_snack .snackbar_action {\n        font-size: 16px;\n        cursor: pointer;\n        padding: 8px;\n        margin-right: -8px;\n      }\n\n      @keyframes snackbar-fadein {\n        from {opacity: 0;}\n        to {opacity: 1;}\n      }\n    `;document.head.appendChild((0,o.h)("style",{},n))}getParentElement(e){let t=document.getElementById(e||this.defaultParentId);return t||(t=document.createElement("div"),t.id=this.defaultParentId,document.body.appendChild(t)),t}remove(e){e.classList.add("snackbar_snack_fadeout"),setTimeout((()=>e.remove()),200)}show(e,t){if(this.options.consecutive){const n=document.querySelectorAll(".snackbar_snack");return n.forEach((e=>this.remove(e))),void(n.length>0?setTimeout((()=>this._show(e,t)),220):this._show(e,t))}this._show(e,t)}_show(e,t){e=Object.assign(Object.assign({},this.options),e);const n=this.getParentElement(e.parentId||this.defaultParentId);"number"==typeof e.offsetY&&(n.style.bottom=`${e.offsetY}px`);const i=((e,n)=>{const s=n.map((e=>(0,o.h)("a",{class:"snackbar_action",style:`color: ${e.color||this.defaultActionColor}`,onClick:()=>{t&&t({name:e.name,id:e.id}),this.remove(i)}},e.name.toUpperCase()))),r=(0,o.h)("div",{class:"snackbar_message"},e),a=(0,o.h)("div",{class:"snackbar_actions"},s);return(0,o.h)("div",{class:"snackbar_snack"},r,a)})(e.message,e.actions||[]);!0===e.autoHide?setTimeout((()=>this.remove(i)),5e3):"number"==typeof e.autoHide&&setTimeout((()=>this.remove(i)),e.autoHide),n.appendChild(i)}}},248:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Tabs=t.Tab=void 0;const o=n(205),i=n(900),s=n(690),r=n(437);t.Tab=e=>{const t=[e.itemClass,e.rippleClass];e.active&&t.push("active");const n=e.href?{href:e.href}:{},o=(0,i.h)("a",Object.assign({},n),e.children);return(0,i.h)("li",{class:t.join(" "),onClick:()=>e.onClickHandler({index:e.index})},o)};class a extends o.Component{constructor(){super(...arguments),this.active=this.props.active||0}didMount(){const e=e=>{var t;if(!e)return;const n=this.items[0].getBoundingClientRect(),o=e.getBoundingClientRect();this.line.style.left=o.x-n.x+"px",this.line.style.width=`${o.width}px`,null===(t=document.querySelector(".tabs_item.active"))||void 0===t||t.classList.remove("active"),e.classList.add("active")},t=e=>{this.props.scroll&&e.scrollIntoView({behavior:"smooth",block:"center",inline:"center"})};(0,i.tick)((()=>{e(this.items[this.active]),t(this.items[this.active])}));for(let n=0;n<this.items.length;n++){const o=this.items[n];o.addEventListener("click",(()=>{this.active=n,setTimeout((()=>e(o)),50),setTimeout((()=>e(o)),100),setTimeout((()=>e(o)),150),t(o)}))}}render(){var e;const t=(0,s.rippleEffect)("#ffffff70","#5902db"),{scroll:n=!1,children:o,active:a}=this.props,l=(0,i.strToHash)(n.toString()+(null==o?void 0:o.length)+a+t.class),c=`\n      .tabs_container-${l} {\n        background: #6204ee;\n\n        width: 100%;\n        height: 48px;\n\n        overflow-x: ${this.props.scroll?"scroll":"hidden"};\n        overflow-y: hidden;\n\n        ${s.userSelect}\n      }\n\n      /* Hide scrollbar for Chrome, Safari and Opera */\n      .tabs_container-${l}::-webkit-scrollbar {\n        display: none;\n      }\n\n      /* Hide scrollbar for IE, Edge and Firefox */\n      .tabs_container-${l} {\n        -ms-overflow-style: none; /* IE and Edge */\n        scrollbar-width: none; /* Firefox */\n      }\n\n      .tabs_list-${l} {\n        ${this.props.scroll?"":"display: flex; justify-content: space-evenly;"}\n\n        height: 100%;\n        display: flex;\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n        cursor: pointer;\n      }\n\n      .tabs_item-${l} {\n        ${this.props.scroll?"":"width: 100%; text-align: center;"}\n\n        padding-top: 16px;\n        font-size: 14px;\n        text-transform: uppercase;\n        color: rgba(255, 255, 255, 0.75);\n        transition: color 0.2s;\n      }\n      \n      \n      .tabs_item-${l} a {\n        font-size: 14px;\n        padding: 16px 32px;\n        text-decoration: none;\n        text-transform: uppercase;\n        color: rgba(255, 255, 255, 0.75);\n        transition: color 0.2s;\n      }\n\n      .tabs_item-${l}.active a {\n        color: rgba(255, 255, 255, 1);\n      }\n\n      .tabs_item-${l}:active {\n        background: #5902db;\n      }\n\n      /* if the primary input mechanism system of the device can hover over elements with ease, we use hover */\n      @media (hover: hover) {\n        .tabs_item-${l}:hover {\n          background: #5902db;\n        }\n      }\n\n      ${t.styles}\n\n      .tabs_line-${l} {\n        border-bottom: 2px solid white;\n        position: relative;\n        top: -2px;\n\n        opacity: 0;\n        \n        left: 50%;\n        width: 0px;\n\n        transition: left 0.5s, width 0.5s;\n\n        animation-name: tabs_line_fadein;\n        animation-duration: 0.25s;\n        animation-delay: 0.25s;\n        animation-fill-mode: forwards;\n      }\n      \n      @keyframes tabs_line_fadein {\n        from {opacity: 0;}\n        to {opacity: 1;}\n      }\n      `;(0,r.addStylesToHead)(c,l),null===(e=this.props.children)||void 0===e||e.forEach(((e,n)=>{n===this.active&&(e.props=Object.assign(Object.assign({},e.props),{active:!0})),e.props=Object.assign(Object.assign({},e.props),{rippleClass:t.class,itemClass:`tabs_item-${l}`,index:n}),e.props.onClickHandler=e=>this.props.onClick(e)})),this.items=(0,i.render)(this.props.children);const d=(0,i.h)("ul",{class:`tabs_list-${l}`},this.items);return this.line=(0,i.h)("div",{class:`tabs_line-${l}`}),(0,i.h)("div",{class:`tabs_container-${l}`},d,this.line)}}t.Tabs=a},865:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Toolbar=void 0;const o=n(205),i=n(900);class s extends o.Component{static setTitle(e){const t=document.querySelector(".toolbar_title");t&&(t.innerText=e)}render(){document.head.appendChild((0,i.h)("style",{},"\n      .toolbar_container {\n        padding: 16px;\n      }\n\n      .toolbar_container .toolbar_text {\n        font-size: 20px;\n        margin-left: 24px;\n        cursor: pointer;\n      }\n\n      .toolbar_container .toolbar_icon {\n        width: 22px;\n        height: 22px;\n        margin-left: 24px;\n        cursor: pointer;\n\n        display: inline-block;\n        content: '';\n\n        /*-webkit-mask: url(YOUR_SVG_URL) no-repeat 50% 50%;\n        mask: url(YOUR_SVG_URL) no-repeat 50% 50%;*/\n\n        -webkit-mask-size: cover;\n        mask-size: cover; \n\n        background-color: white;\n      }\n\n      .toolbar_navigation_box {\n        padding: 4px;\n        width: 20px;\n        height: 16px;\n        margin-right: 32px;\n        cursor: pointer;\n      }\n\n      .toolbar_hamburger_button,\n      .toolbar_hamburger_button::before,\n      .toolbar_hamburger_button::after {\n        position: absolute;\n        width: 20px;\n        height: 2px;\n        border-radius: 2px;\n        background: white;\n        content: '';\n      }\n      .toolbar_hamburger_button::before {\n        top: 6px;\n      }\n      .toolbar_hamburger_button::after {\n        top: 12px;\n      }\n\n      .toolbar_button_wrapper {\n        width: 24px;\n        height: 24px;\n        padding: 2px;\n        position: relative;\n        top: -2px;\n      }\n\n      .toolbar_back_button,\n      .toolbar_back_button::before,\n      .toolbar_back_button::after {\n        position: relative;\n        top: 7px;\n        width: 20px;\n        height: 2px;\n        border-radius: 2px;\n        background: white;\n        content: '';\n      }\n\n      .toolbar_back_button::before {\n        position: absolute;\n        top: -5px;\n        transform: translate3d(-4px,0,0) rotate(-45deg) scaleX(.7);\n      }\n\n      .toolbar_back_button::after {\n        position: absolute;\n        top: 5px;\n        transform: translate3d(-4px,0,0) rotate(45deg) scaleX(.7);\n      }\n    "));const{back:e=!1,actionClick:t=(()=>{}),menu:n}=this.props,o=n?(0,i.h)("div",{class:"toolbar_button_wrapper",onClick:t},(0,i.h)("div",{class:"toolbar_hamburger_button"})):e?(0,i.h)("div",{class:"toolbar_button_wrapper",onClick:t},(0,i.h)("div",{class:"toolbar_back_button"})):null,s=o?(0,i.h)("div",{class:"toolbar_navigation_box"},o):null,r=this.props.title?(0,i.h)("div",{class:"toolbar_title"},this.props.title):null,a=(0,i.h)("div",{class:"toolbar_left"},s,r),l=(0,i.h)("div",{class:"toolbar_right"},this.props.children);return(0,i.h)("div",{class:"toolbar_container"},a,l)}}t.Toolbar=s},122:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.VERSION=void 0,t.VERSION="0.0.37"},790:function(e,t,n){var o=this&&this.__rest||function(e,t){var n={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(o=Object.getOwnPropertySymbols(e);i<o.length;i++)t.indexOf(o[i])<0&&Object.prototype.propertyIsEnumerable.call(e,o[i])&&(n[o[i]]=e[o[i]])}return n};Object.defineProperty(t,"__esModule",{value:!0}),t.withStyles=void 0;const i=n(900),s=n(205),r=n(998),a=n(723);t.withStyles=(...e)=>t=>class extends s.Component{render(){const n=this.props,{children:s}=n,l=o(n,["children"]),c=[];e.forEach((e=>{var t;if("string"==typeof e)c.push((0,i.h)(a.Helmet,null,(0,i.h)("style",null,e)));else if("function"==typeof e){const t=e();"string"==typeof t&&c.push((0,i.h)(a.Helmet,null,(0,i.h)("style",null,t)))}else if("object"==typeof e){const n=null===(t=e.toString)||void 0===t?void 0:t.call(e);"string"==typeof n&&c.push((0,i.h)(a.Helmet,null,(0,i.h)("style",null,n)))}}));const d=s&&s.length>0?(0,i.h)(t,Object.assign({},l),s):(0,i.h)(t,Object.assign({},this.props));return(0,i.h)(r.Fragment,null,...c,d)}}}},t={},n=function n(o){var i=t[o];if(void 0!==i)return i.exports;var s=t[o]={exports:{}};return e[o].call(s.exports,s,s.exports,n),s.exports}(974);nanoJSX=n.default})();
\ No newline at end of file
+var nanoJSX;(()=>{"use strict";var e={974:function(e,t,n){var o=this&&this.__createBinding||(Object.create?function(e,t,n,o){void 0===o&&(o=n);var i=Object.getOwnPropertyDescriptor(t,n);i&&!("get"in i?!t.__esModule:i.writable||i.configurable)||(i={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,o,i)}:function(e,t,n,o){void 0===o&&(o=n),e[o]=t[n]}),i=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),s=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&o(t,e,n);return i(t,e),t};Object.defineProperty(t,"__esModule",{value:!0}),t.VERSION=t.printVersion=void 0;const r=n(900),a=n(236),l=n(743),c=n(205),d=n(998),h=n(681),p=n(403),u=n(790),m=n(723),f=n(714),b=n(174),g=n(432),_=s(n(287)),v=n(726),x=n(325),y=s(n(992));t.default={Component:c.Component,Fragment:d.Fragment,Helmet:m.Helmet,Img:b.Img,Link:f.Link,Router:_,Store:h.Store,UI:y,Visible:g.Visible,createContext:p.createContext,h:r.h,hydrate:r.hydrate,hydrateLazy:a.hydrateLazy,jsx:x.jsx,nodeToString:l.nodeToString,removeAllChildNodes:r.removeAllChildNodes,render:r.render,task:l.task,tick:r.tick,withStyles:u.withStyles,defineAsCustomElements:v.defineAsCustomElements};var w=n(743);Object.defineProperty(t,"printVersion",{enumerable:!0,get:function(){return w.printVersion}});var k=n(122);Object.defineProperty(t,"VERSION",{enumerable:!0,get:function(){return k.VERSION}})},205:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Component=void 0;const o=n(743),i=n(900),s=n(417);t.Component=class{constructor(e){this._elements=[],this._skipUnmount=!1,this._hasUnmounted=!1,this.props=e||{},this.id=this._getHash()}static get isClass(){return!0}get isClass(){return!0}setState(e,t=!1){"object"==typeof e&&null!==e&&void 0!==this.state?this.state=Object.assign(Object.assign({},this.state),e):this.state=e,t&&this.update()}set state(e){s._state.set(this.id,e)}get state(){return s._state.get(this.id)}set initState(e){void 0===this.state&&(this.state=e)}get elements(){return this._elements||[]}set elements(e){Array.isArray(e)||(e=[e]),e.forEach((e=>{this._elements.push(e)}))}_addNodeRemoveListener(){/^[^{]+{\s+}$/gm.test(this.didUnmount.toString())||(0,o.onNodeRemove)(this.elements[0],(()=>{this._skipUnmount||this._didUnmount()}))}_didMount(){this._addNodeRemoveListener(),this.didMount()}_willUpdate(){this.willUpdate()}_didUpdate(){this.didUpdate()}_didUnmount(){this._hasUnmounted||(this.didUnmount(),this._hasUnmounted=!0)}willMount(){}didMount(){}willUpdate(){}didUpdate(){}didUnmount(){}render(e){}update(e){this._skipUnmount=!0,this._willUpdate();const t=[...this.elements];this._elements=[];let n=this.render(e);n=(0,i._render)(n),this.elements=n;const o=t[0].parentElement;o||console.warn("Component needs a parent element to get updated!"),this.elements.forEach((e=>{o&&o.insertBefore(e,t[0])})),t.forEach((e=>{this.elements.includes(e)||(e.remove(),e=null)})),this._addNodeRemoveListener(),(0,i.tick)((()=>{this._skipUnmount=!1,this.elements[0].isConnected?this._didUpdate():this._didUnmount()}))}_getHash(){}}},723:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Helmet=void 0;const o=n(205),i=n(900);class s extends Map{toString(){let e="";for(const[t,n]of this)e+=` ${t}="${n}"`;return e.trim()}}class r extends o.Component{static SSR(e){var t,n;const o=/(<helmet\b[^>]*>)((.|\r|\n)*?)(<\/helmet>)/gm,i=[],r=[],a={html:new s,body:new s};if("undefined"!=typeof document&&document.head){let e=[];e=[].slice.call(document.head.children);for(let t=0;t<e.length;t++)-1===i.indexOf(e[t])&&i.push(e[t])}let l;for(;null!==(l=o.exec(e));){const o=l[1];let s=l[2];const c=/<html\s([^>]+)><\/html>/gm,d=/<body\s([^>]+)><\/body>/gm,h=/(\w+)="([^"]+)"/gm;let p=null;null===(t=e.match(c))||void 0===t||t.forEach((e=>{for(s=s.replace(e,"");null!==(p=h.exec(e));)a.html.set(p[1],p[2])})),null===(n=e.match(d))||void 0===n||n.forEach((e=>{for(s=s.replace(e,"");null!==(p=h.exec(e));)a.body.set(p[1],p[2])}));const u=o.includes('data-placement="head"');u&&!i.includes(s)?i.push(s):u||r.includes(s)||r.push(s)}return{body:e.replace(o,""),head:i,footer:r,attributes:a}}didMount(){this.props.children.forEach((e=>{var t,n,o,s;if(!(e instanceof HTMLElement))return;const r=this.props.footer?document.body:document.head,a=e.tagName;let l=[];l.push(e.innerText);for(let o=0;o<e.attributes.length;o++)l.push(null===(t=e.attributes.item(o))||void 0===t?void 0:t.name.toLowerCase()),l.push(null===(n=e.attributes.item(o))||void 0===n?void 0:n.value.toLowerCase());if("HTML"===a||"BODY"===a){const e=document.getElementsByTagName(a)[0];for(let t=1;t<l.length;t+=2)e.setAttribute(l[t],l[t+1]);return}if("TITLE"===a){const t=document.getElementsByTagName("TITLE");if(t.length>0){const n=e;t[0].text=n.text}else{const t=(0,i.h)("title",null,e.innerHTML);(0,i.appendChildren)(r,[t],!1)}return}let c=!1;l=l.sort();const d=document.getElementsByTagName(a);for(let e=0;e<d.length;e++){let t=[];t.push(d[e].innerText);for(let n=0;n<d[e].attributes.length;n++)t.push(null===(o=d[e].attributes.item(n))||void 0===o?void 0:o.name.toLowerCase()),t.push(null===(s=d[e].attributes.item(n))||void 0===s?void 0:s.value.toLowerCase());t=t.sort(),l.length>0&&t.length>0&&JSON.stringify(l)===JSON.stringify(t)&&(c=!0)}c||(0,i.appendChildren)(r,[e],!1)}))}render(){const e=this.props.footer?"footer":"head";return(0,i.isSSR)()?(0,i.h)("helmet",{"data-ssr":!0,"data-placement":e},this.props.children):[]}}t.Helmet=r},174:function(e,t,n){var o=this&&this.__rest||function(e,t){var n={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(o=Object.getOwnPropertySymbols(e);i<o.length;i++)t.indexOf(o[i])<0&&Object.prototype.propertyIsEnumerable.call(e,o[i])&&(n[o[i]]=e[o[i]])}return n};Object.defineProperty(t,"__esModule",{value:!0}),t.Img=void 0;const i=n(205),s=n(900);class r extends i.Component{constructor(e){super(e);const{src:t,key:n}=e;this.id=`${(0,s.strToHash)(t)}-${(0,s.strToHash)(JSON.stringify(e))}`,n&&(this.id+=`key-${n}`),this.state||this.setState({isLoaded:!1,image:void 0})}didMount(){const e=this.props,{lazy:t=!0,placeholder:n,children:i,key:r,ref:a}=e,l=o(e,["lazy","placeholder","children","key","ref"]);"boolean"==typeof t&&!1===t||new IntersectionObserver(((e,t)=>{e.forEach((e=>{e.isIntersecting&&(t.disconnect(),this.state.image=(0,s.h)("img",Object.assign({},l)),this.state.image.complete?(this.state.isLoaded=!0,this.update()):this.state.image.onload=()=>{this.state.isLoaded=!0,this.update()})}))}),{threshold:[0,1]}).observe(this.elements[0])}render(){const e=this.props,{src:t,placeholder:n,children:i,lazy:r=!0,key:a,ref:l}=e,c=o(e,["src","placeholder","children","lazy","key","ref"]);if("boolean"==typeof r&&!1===r)return this.state.image=(0,s.h)("img",Object.assign({src:t},c)),this.state.image;if(this.state.isLoaded)return this.state.image;if(n&&"string"==typeof n)return(0,s.h)("img",Object.assign({src:n},c));if(n&&"function"==typeof n)return n();{const e={};c.width&&(e.width=`${c.width}px`),c.height&&(e.height=`${c.height}px`);const{width:t,height:n}=c,i=o(c,["width","height"]);return(0,s.h)("div",Object.assign({style:e},i))}}}t.Img=r},714:function(e,t,n){var o=this&&this.__rest||function(e,t){var n={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(o=Object.getOwnPropertySymbols(e);i<o.length;i++)t.indexOf(o[i])<0&&Object.prototype.propertyIsEnumerable.call(e,o[i])&&(n[o[i]]=e[o[i]])}return n};Object.defineProperty(t,"__esModule",{value:!0}),t.Link=void 0;const i=n(205),s=n(723),r=n(900),a=n(998);class l extends i.Component{prefetchOnHover(){this.elements[0].addEventListener("mouseover",(()=>this.addPrefetch()),{once:!0})}prefetchOnVisible(){new IntersectionObserver(((e,t)=>{e.forEach((e=>{e.isIntersecting&&(t.disconnect(),this.addPrefetch())}))}),{threshold:[0,1]}).observe(this.elements[0])}addPrefetch(){let e=!1;const t=document.getElementsByTagName("link");for(let n=0;n<t.length;n++)"prefetch"===t[n].getAttribute("rel")&&t[n].getAttribute("href")===this.props.href&&(e=!0);if(!e){const e=(0,r.h)("link",{rel:"prefetch",href:this.props.href,as:"document"});document.head.appendChild(e)}}didMount(){const{href:e,prefetch:t,delay:n=0,back:o=!1}=this.props;o&&this.elements[0].addEventListener("click",(e=>{e.preventDefault();const t=e.target;t.href===document.referrer?window.history.back():window.location.href=t.href})),n>0&&this.elements[0].addEventListener("click",(t=>{t.preventDefault(),setTimeout((()=>window.location.href=e),n)})),t&&("hover"===t?this.prefetchOnHover():"visible"===t?this.prefetchOnVisible():this.addPrefetch())}render(){const e=this.props,{children:t,prefetch:n,back:i,ref:l}=e,c=o(e,["children","prefetch","back","ref"]);this.props.href||console.warn('Please add "href" to <Link>'),1!==t.length&&console.warn("Please add ONE child to <Link> (<Link>child</Link>)");const d=(0,r.h)("a",Object.assign({},c),...t);if(!0!==n||"undefined"!=typeof window&&window.document)return d;{const e=(0,r.h)("link",{rel:"prefetch",href:this.props.href,as:"document"}),t=(0,r.h)(s.Helmet,null,e);return(0,r.h)(a.Fragment,null,[t,d])}}}t.Link=l},287:function(e,t,n){var o=this&&this.__rest||function(e,t){var n={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(o=Object.getOwnPropertySymbols(e);i<o.length;i++)t.indexOf(o[i])<0&&Object.prototype.propertyIsEnumerable.call(e,o[i])&&(n[o[i]]=e[o[i]])}return n};Object.defineProperty(t,"__esModule",{value:!0}),t.parseParamsFromPath=t.Listener=t.Link=t.to=t.Route=t.Routes=t.Switch=t.matchPath=void 0;const i=n(205),s=n(900),r=[],a=e=>{window.history.pushState({},"",e),r.forEach((e=>e.handleChanges())),window.dispatchEvent(new Event("pushstate"))},l=e=>{window.history.replaceState({},"",e),r.forEach((e=>e.handleChanges())),window.dispatchEvent(new Event("replacestate"))};t.matchPath=(e,t)=>{const{exact:n=!1,regex:o}=t;let i,{path:s}=t;if(!s)return{path:null,url:e,isExact:!0,params:{}};let r={};if(s.includes("/:")){const t=s.split("/"),n=e.split("/");t.forEach(((e,i)=>{if(/^:/.test(e)){const s=e.slice(1),a=n[i];if(o&&o[s]&&!o[s].test(a))return null;r=Object.assign(Object.assign({},r),{[s]:a}),t[i]=n[i]}})),s=t.join("/")}if("*"===s&&(i=[e]),i||(i=new RegExp(`^${s}`).exec(e)),!i)return null;const a=i[0],l=e===a;return n&&!l?null:{path:s,url:a,isExact:l,params:r}};class c extends i.Component{constructor(){super(...arguments),this.index=0,this.path="",this.match={index:-1,path:""}}didMount(){window.addEventListener("popstate",this.handleChanges.bind(this)),r.push(this)}didUnmount(){window.removeEventListener("popstate",this.handleChanges.bind(this)),r.splice(r.indexOf(this),1)}handleChanges(){this.findChild(),this.shouldUpdate()&&this.update()}findChild(){this.match={index:-1,path:""},this.props.children=this.props.children.flat();for(let e=0;e<this.props.children.length;e++){const n=this.props.children[e],{path:o,exact:i,regex:r}=n.props;if((0,t.matchPath)((0,s.isSSR)()?_nano.location.pathname:window.location.pathname,{path:o,exact:i,regex:r}))return this.match.index=e,void(this.match.path=o)}}shouldUpdate(){return this.path!==this.match.path||this.index!==this.match.index}render(){this.findChild();const e=this.props.children[this.match.index];if(-1===this.match.index&&(this.path="",this.index=0),e){const{path:t}=e.props;this.path=t,this.index=this.match.index;const n=(0,s._render)(e);return(0,s.h)("div",{},(0,s._render)(n))}return this.props.fallback?(0,s.h)("div",{},(0,s._render)(this.props.fallback)):(0,s.h)("div",{},"not found")}}t.Switch=c,t.Routes=class extends c{},t.Route=({path:e,regex:n,children:o})=>{const i=(0,s.isSSR)()?_nano.location.pathname:window.location.pathname,r=(0,t.parseParamsFromPath)(e);return o.forEach((t=>{t.props&&(t.props=Object.assign(Object.assign({},t.props),{route:{path:e,regex:n,pathname:i,params:r}}))})),o},t.to=(e,t=!1)=>{t?l(e):a(e)},t.Link=e=>{var{to:t,replace:n,children:i}=e,r=o(e,["to","replace","children"]);return(0,s.h)("a",Object.assign({href:t,onClick:e=>(e.preventDefault(),void(n?l(t):a(t)))},r),i)};class d{constructor(){if(this._listeners=new Map,(0,s.isSSR)())return;this._route=window.location.pathname;const e=()=>{const e=window.location.pathname;this._listeners.forEach((t=>{t(e,this._route)})),this._route=e};window.addEventListener("pushstate",e),window.addEventListener("replacestate",e)}use(){const e=Math.random().toString(36).substring(2);return{subscribe:t=>{this._listeners.set(e,t)},cancel:()=>{this._listeners.has(e)&&this._listeners.delete(e)}}}}let h;t.Listener=()=>(h||(h=new d),h),t.parseParamsFromPath=e=>{let t={};const n=(0,s.isSSR)()?_nano.location.pathname.split("/"):window.location.pathname.split("/");return e.split("/").forEach(((e,o)=>{e.startsWith(":")&&(t=Object.assign(Object.assign({},t),{[e.slice(1)]:n[o]}))})),t}},432:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Visible=void 0;const o=n(900),i=n(205);class s extends i.Component{constructor(){super(...arguments),this.isVisible=!1}didMount(){new IntersectionObserver(((e,t)=>{e.forEach((e=>{e.isIntersecting&&(t.disconnect(),this.isVisible=!0,this.update())}))}),{threshold:[0,1]}).observe(this.elements[0])}render(){return this.isVisible?(this.props.onVisible&&this.props.onVisible(),(0,o.render)(this.props.component||this.props.children[0])):(0,o.h)("div",{"data-visible":!1,visibility:"hidden"})}}t.Visible=s},403:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.useContext=t.createContext=void 0,t.createContext=e=>{let t=e;return{Provider:e=>(e.value&&(t=e.value),e.children),Consumer:e=>({component:e.children[0](t),props:Object.assign(Object.assign({},e),{context:t})}),get:()=>t,set:e=>t=e}},t.useContext=e=>{const t=e;if(t&&"function"==typeof t.get)return t.get()}},900:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.h=t._render=t.hydrate=t.render=t.appendChildren=t.strToHash=t.removeAllChildNodes=t.tick=t.isSSR=void 0,n(499),t.isSSR=()=>"undefined"!=typeof _nano&&!0===_nano.isSSR,t.tick=Promise.prototype.then.bind(Promise.resolve()),t.removeAllChildNodes=e=>{for(;e.firstChild;)e.removeChild(e.firstChild)},t.strToHash=e=>{let t=0;for(let n=0;n<e.length;n++)t=(t<<5)-t+e.charCodeAt(n),t|=0;return Math.abs(t).toString(32)},t.appendChildren=(e,n,o=!0)=>{Array.isArray(n)?("object"==typeof n&&(n=Array.prototype.slice.call(n)),n.forEach((n=>{if(Array.isArray(n))(0,t.appendChildren)(e,n,o);else{const i=(0,t._render)(n);void 0!==i&&(Array.isArray(i)?(0,t.appendChildren)(e,i,o):(0,t.isSSR)()&&!o?e.appendChild(null==i.nodeType?i.toString():i):e.appendChild(null==i.nodeType?document.createTextNode(i.toString()):i))}}))):(0,t.appendChildren)(e,[n],o)},t.render=(e,n=null,o=!0)=>{let i=(0,t._render)(e);return Array.isArray(i)&&(i=i.map((e=>(0,t._render)(e))),1===i.length&&(i=i[0])),n?(o&&(0,t.removeAllChildNodes)(n),i&&n.id&&n.id===i.id&&n.parentElement?n.parentElement.replaceChild(i,n):Array.isArray(i)?i.forEach((e=>{(0,t.appendChildren)(n,(0,t._render)(e))})):(0,t.appendChildren)(n,(0,t._render)(i)),n):(0,t.isSSR)()&&!Array.isArray(i)?[i]:i},t.hydrate=t.render,t._render=e=>null===e||!1===e||void 0===e?[]:"string"==typeof e||"number"==typeof e?e.toString():e.tagName&&"svg"===e.tagName.toLowerCase()?(e=>{const n=e.children[0],o=n.attributes;if((0,t.isSSR)())return n;const i=s("svg");for(let e=o.length-1;e>=0;e--)i.setAttribute(o[e].name,o[e].value);return i.innerHTML=n.innerHTML,i})({children:[e]}):e.tagName||e&&3===e.nodeType?e:e&&e.component&&e.component.isClass?i(e):e.isClass?i({component:e,props:{}}):e.component&&"function"==typeof e.component?o(e):Array.isArray(e)?e.map((e=>(0,t._render)(e))).flat():"function"!=typeof e||e.isClass?e.component&&e.component.tagName&&"string"==typeof e.component.tagName||Array.isArray(e.component)||e.component?(0,t._render)(e.component):"object"==typeof e?[]:void console.warn("Something unexpected happened with:",e):(0,t._render)(e());const o=e=>{const{component:n,props:o}=e;return(0,t._render)(n(o))},i=e=>{const{component:n,props:o}=e,i=(0,t.strToHash)(n.toString());n.prototype._getHash=()=>i;const s=new n(o);(0,t.isSSR)()||s.willMount();let r=s.render();return r=(0,t._render)(r),s.elements=r,o&&o.ref&&o.ref(s),(0,t.isSSR)()||(0,t.tick)((()=>{s._didMount()})),r},s=e=>document.createElementNS("http://www.w3.org/2000/svg",e);t.h=(e,n={},...o)=>{if(n&&n.children&&(Array.isArray(o)?Array.isArray(n.children)?o=[...n.children,...o]:o.push(n.children):o=Array.isArray(n.children)?n.children:[n.children]),(0,t.isSSR)()&&_nano.ssrTricks.isWebComponent(e)){const i=_nano.ssrTricks.renderWebComponent(e,n,o,t._render);return null===i?`ERROR: "<${e} />"`:i}if("string"!=typeof e)return{component:e,props:Object.assign(Object.assign({},n),{children:o})};try{if((0,t.isSSR)()&&"string"==typeof e&&!document)throw new Error("document is not defined")}catch(e){console.log("ERROR:",e.message,"\n > Please read: https://github.com/nanojsx/nano/issues/106")}let i;const r="svg"===e?s("svg"):document.createElement(e),a=(e,t)=>0===t.indexOf("on")&&(!!e._ssr||"object"==typeof e[t]||"function"==typeof e[t]);for(const e in n){if("style"===e&&"object"==typeof n[e]){const t=Object.keys(n[e]).map((t=>`${t}:${n[e][t]}`)).join(";").replace(/[A-Z]/g,(e=>`-${e.toLowerCase()}`));n[e]=`${t};`}if("ref"===e)i=n[e];else if(a(r,e.toLowerCase()))r.addEventListener(e.toLowerCase().substring(2),(t=>n[e](t)));else if("dangerouslySetInnerHTML"===e&&n[e].__html)if((0,t.isSSR)())r.innerHTML=n[e].__html;else{const t=document.createElement("fragment");t.innerHTML=n[e].__html,r.appendChild(t)}else if("innerHTML"===e&&n[e].__dangerousHtml)if((0,t.isSSR)())r.innerHTML=n[e].__dangerousHtml;else{const t=document.createElement("fragment");t.innerHTML=n[e].__dangerousHtml,r.appendChild(t)}else/^className$/i.test(e)?r.setAttribute("class",n[e]):void 0!==n[e]&&r.setAttribute(e,n[e])}const l=!["noscript","script","style"].includes(e);return(0,t.appendChildren)(r,o,l),i&&i(r),r}},726:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.defineAsCustomElements=void 0;const o=n(900);t.defineAsCustomElements=function(e,t,n,i){(0,o.isSSR)()?((e,t,n=[],o={})=>{/^[a-zA-Z0-9]+-[a-zA-Z0-9]+$/.test(t)?_nano.customElements.set(t,e):console.log(`Error: WebComponent name "${t}" is invalid.`)})(e,t,n):customElements.define(t,class extends HTMLElement{constructor(){let t;super(),i?(this.attachShadow(i),this.$root=this.shadowRoot):this.$root=this;const n=this.buildEl((0,o._render)({component:e,props:{ref:e=>t=e,children:Array.from(this.children).map((e=>(0,o.render)(e)))}}));this.component=t,this.isFunctionalComponent=!e.isClass,this.functionalComponentsProps={},this.appendEl(n),this.isFunctionalComponent||(this.component.updatePropsValue=(e,t)=>{this.component.props||(this.component.props={}),this.component.props[e]=t,this.component[e]=t})}static get observedAttributes(){return n}buildEl(e){return(0,o.h)(this.shadowRoot?"div":"template",null,e)}appendEl(e){this.shadowRoot?this.$root.append(e):this.$root.append(...e.childNodes)}removeChildren(){var e;if(this.$root){const t=Array.from(null===(e=this.$root)||void 0===e?void 0:e.children)||[];for(const e of t)e.remove()}}attributeChangedCallback(t,n,i){if(this.isFunctionalComponent){this.removeChildren(),this.functionalComponentsProps[t]=i;const n=this.buildEl((0,o._render)({component:e,props:Object.assign({children:[],ref:e=>this.component=e},this.functionalComponentsProps)}));this.appendEl(n)}else this.component.updatePropsValue(t,i),this.component.update()}})}},998:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Fragment=void 0,t.Fragment=e=>e.children},743:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.printVersion=t.escapeHtml=t.onNodeRemove=t.detectSSR=t.nodeToString=t.task=void 0;const o=n(122);function i(e,t){return!!e&&(e===t||i(e.parentNode,t))}t.task=e=>setTimeout(e,0),t.nodeToString=e=>{const t=document.createElement("div");return t.appendChild(e.cloneNode(!0)),t.innerHTML},t.detectSSR=()=>{const e="undefined"!=typeof Deno,t="undefined"!=typeof window;return"undefined"!=typeof _nano&&_nano.isSSR||e||!t},t.onNodeRemove=(e,t)=>{let n=new MutationObserver((o=>{o.forEach((o=>{o.removedNodes.forEach((o=>{i(e,o)&&(t(),n&&(n.disconnect(),n=void 0))}))}))}));return n.observe(document,{childList:!0,subtree:!0}),n},t.escapeHtml=e=>e&&"string"==typeof e?e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&apos;"):e,t.printVersion=()=>{const e=`Powered by nano JSX v${o.VERSION}`;console.log(`%c %c %c %c %c ${e} %c http://nanojsx.io`,"background: #ff0000","background: #ffff00","background: #00ff00","background: #00ffff","color: #fff; background: #000000;","background: none")}},614:function(e,t,n){var o=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});const i=o(n(215));t.default=i.default},931:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.build=t.evaluate=t.treeify=void 0;const o=n(333);t.treeify=(e,t)=>{const n=e=>{let o="",i=null;const s=[],r=[];for(let a=1;a<e.length;a++){const l=e[a++],c=e[a]?t[e[a++]-1]:e[++a];3===l?o=c:4===l?(s.push(c),i=null):5===l?(i||(i=Object.create(null),s.push(i)),i[e[++a]]=[c]):6===l?i[e[++a]].push(c):2===l?r.push(n(c)):0===l&&r.push(c)}return{tag:o,props:s,children:r}},{children:o}=n(e);return o.length>1?o:o[0]},t.evaluate=(e,n,o,i)=>{let s;n[0]=0;for(let r=1;r<n.length;r++){const a=n[r++],l=n[r]?(n[0]|=a?1:2,o[n[r++]]):n[++r];3===a?i[0]=l:4===a?i[1]=Object.assign(i[1]||{},l):5===a?(i[1]=i[1]||{})[n[++r]]=l:6===a?i[1][n[++r]]+=`${l}`:a?(s=e.apply(l,(0,t.evaluate)(e,l,o,["",null])),i.push(s),l[0]?n[0]|=2:(n[r-2]=0,n[r]=s)):i.push(l)}return i},t.build=function(e,...t){const n=[e,...t],i=this;let s,r,a=1,l="",c="",d=[0];const h=e=>{1===a&&(e||(l=l.replace(/^\s*\n\s*|\s*\n\s*$/g,"")))?o.MINI?d.push(e?n[e]:l):d.push(0,e,l):3===a&&(e||l)?(o.MINI?d[1]=e?n[e]:l:d.push(3,e,l),a=2):2===a&&"..."===l&&e?o.MINI?d[2]=Object.assign(d[2]||{},n[e]):d.push(4,e,0):2===a&&l&&!e?o.MINI?(d[2]=d[2]||{})[l]=!0:d.push(5,0,!0,l):a>=5&&(o.MINI?5===a?((d[2]=d[2]||{})[r]=e?l?l+n[e]:n[e]:l,a=6):(e||l)&&(d[2][r]+=e?l+n[e]:l):((l||!e&&5===a)&&(d.push(a,0,l,r),a=6),e&&(d.push(a,e,0,r),a=6))),l=""};for(let t=0;t<e.length;t++){t&&(1===a&&h(),h(t));for(let n=0;n<e[t].length;n++)s=e[t][n],1===a?"<"===s?(h(),d=o.MINI?[d,"",null]:[d],a=3):l+=s:4===a?"--"===l&&">"===s?(a=1,l=""):l=s+l[0]:c?s===c?c="":l+=s:'"'===s||"'"===s?c=s:">"===s?(h(),a=1):a&&("="===s?(a=5,r=l,l=""):"/"===s&&(a<5||">"===e[t][n+1])?(h(),3===a&&(d=d[0]),a=d,o.MINI?(d=d[0]).push(i(...a.slice(1))):(d=d[0]).push(2,0,a),a=0):" "===s||"\t"===s||"\n"===s||"\r"===s?(h(),a=2):l+=s),3===a&&"!--"===l&&(a=4,d=d[0])}return h(),o.MINI?d.length>2?d.slice(1):d[1]:d}},333:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.MINI=void 0,t.MINI=!1},215:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0});const o=n(333),i=n(931),s=new Map;t.default=o.MINI?i.build:function(e){let t=s.get(this);return t||(t=new Map,s.set(this,t)),t=(0,i.evaluate)(this,t.get(e)||(t.set(e,t=(0,i.build)(e)),t),arguments,[]),t.length>1?t:t[0]}},325:function(e,t,n){var o=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.jsx=void 0;const i=n(900),s=o(n(614)).default.bind(i.h);t.jsx=s},236:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.hydrateLazy=void 0;const o=n(900),i=n(432);t.hydrateLazy=(e,t=null,n=!0)=>{const s=(0,o.h)(i.Visible,null,e);return(0,o.hydrate)(s,t,n)}},417:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t._clearState=t._state=void 0,t._state=new Map,t._clearState=()=>{t._state.clear()}},681:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Store=void 0;const o=n(900);t.Store=class{constructor(e,t="",n="memory"){if(this._listeners=new Map,(0,o.isSSR)()&&(n="memory"),this._id=t,this._storage=n,this._state=this._prevState=e,"memory"===n||!n)return;const i="local"===n?localStorage:sessionStorage,s=i.getItem(this._id);s?this._state=this._prevState=JSON.parse(s):i.setItem(this._id,JSON.stringify(e))}persist(e){"memory"!==this._storage&&("local"===this._storage?localStorage:sessionStorage).setItem(this._id,JSON.stringify(e))}clear(){this._state=this._prevState=void 0,"local"===this._storage?localStorage.removeItem(this._id):"session"===this._storage&&sessionStorage.removeItem(this._id)}setState(e){this.state=e}set state(e){this._prevState=this._state,this._state=e,this.persist(e),this._listeners.forEach((e=>{e(this._state,this._prevState)}))}get state(){return this._state}use(){const e=Math.random().toString(36).substring(2,9),t=this;return{get state(){return t.state},setState:e=>{this.state=e},subscribe:t=>{this._listeners.set(e,t)},cancel:()=>{this._listeners.has(e)&&this._listeners.delete(e)}}}}},499:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0})},690:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.zIndex=t.rippleEffect=t.userSelect=t.boxShadow=void 0;const o=n(900);t.boxShadow="\n  -webkit-box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12);\n  -moz-box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12);\n  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12);\n",t.userSelect="\n  -webkit-touch-callout:none;\n  -webkit-user-select:none;\n  -khtml-user-select:none;\n  -moz-user-select:none;\n  -ms-user-select:none;\n  user-select:none;\n  -webkit-tap-highlight-color:rgba(0,0,0,0);\n",t.rippleEffect=(e,t)=>{const n=`ripple-${(0,o.strToHash)(e+t)}`;return{styles:`  \n  .${n} {\n    background-position: center;\n    transition: background 0.8s;\n  }\n  \n  .${n}:hover {\n    background: ${t} radial-gradient(circle, transparent 1%, ${t} 1%) center/15000%;\n  }\n\n  .${n}:focus {\n    background: ${t} radial-gradient(circle, transparent 1%, ${t} 1%) center/15000%;\n  }\n  \n  .${n}:active {\n    background-color: ${e};\n    background-size: 100%;\n    transition: background 0s;\n  }`,class:n}},t.zIndex={button:"unset;",banner:"50;",bar:"100;",navigation:"100;",fab:"200;",sheet:"300;",menu:"400;",snackbar:"500;",dialog:"600;"}},437:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.addStylesToHead=t.lightenColor=void 0;const o=n(900);t.lightenColor=(e,t)=>{const n=parseInt(e.replace("#",""),16),o=Math.round(2.55*t),i=(n>>16)+o,s=(n>>8&255)+o,r=(255&n)+o;return`#${(16777216+65536*(i<255?i<1?0:i:255)+256*(s<255?s<1?0:s:255)+(r<255?r<1?0:r:255)).toString(16).slice(1)}`},t.addStylesToHead=(e,t)=>{if(!document.querySelector(`[data-css-hash*="${t}"]`)){const n=(0,o.h)("style",{"data-css-hash":t},e);document.head.appendChild(n)}}},308:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.AppBar=void 0;const o=n(205),i=n(900),s=n(690);class r extends o.Component{constructor(){super(...arguments),this.curr_scrollY=0,this.last_scrollY=0,this.curr_scrollingState="none",this.last_scrollingState="none"}calcScrollPosition(){this.curr_scrollY=window.scrollY,this.curr_scrollY>this.last_scrollY?this.curr_scrollingState="down":this.curr_scrollY<this.last_scrollY&&(this.curr_scrollingState="up"),this.last_scrollY=this.curr_scrollY}scroll(){this.calcScrollPosition(),this.curr_scrollY<1?this.container.classList.remove("appBar_scrolling_down"):this.last_scrollingState!==this.curr_scrollingState&&(this.last_scrollingState=this.curr_scrollingState,"down"===this.curr_scrollingState?this.container.classList.add("appBar_scrolling_down"):this.container.classList.remove("appBar_scrolling_down"))}merge(){this.calcScrollPosition(),this.curr_scrollY<=1?this.container.classList.add("appBar_merged"):this.container.classList.remove("appBar_merged")}didMount(){this.curr_scrollY=this.last_scrollY=window.scrollY,this.props.autoHide&&window.addEventListener("scroll",(()=>this.scroll())),this.props.autoMerge&&window.addEventListener("scroll",(()=>this.merge()))}didUnmount(){this.props.autoHide&&window.removeEventListener("scroll",this.scroll),this.props.autoMerge&&window.removeEventListener("scroll",(()=>this.merge()))}render(){const{background:e="#6200EE",color:t="white"}=this.props,n=`\n    .appBar_container {\n      background: ${e};\n      color: ${t};\n      font-weight: 500;\n\n      z-index: ${s.zIndex.bar}\n\n      position: fixed;\n      top: 0;\n      left: 0;\n      min-height: 24px;\n      width: 100vw;\n\n\n      ${s.boxShadow}\n\n      transition: top 0.2s, -webkit-box-shadow 0.5s, -moz-box-shadow 0.5s, box-shadow 0.5s;\n    }\n\n    .appBar_container.appBar_scrolling_down {\n      top: -56px;\n    }\n\n    .appBar_container.appBar_merged {\n      -webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n    }\n\n    .appBar_container .toolbar_container {\n      display: flex;\n      justify-content: space-between;\n    }\n\n    .appBar_container .toolbar_container,\n    .appBar_container .tabs_container {\n      margin: 0 auto;\n      ${this.props.maxWidth?`max-width: ${this.props.maxWidth}px;`:""}\n    }\n\n    .appBar_container .toolbar_container .toolbar_left,\n    .appBar_container .toolbar_container .toolbar_right {\n      display: flex;\n      align-items: center;      \n    }\n\n    .appBar_container .toolbar_container .toolbar_left {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .appBar_container .toolbar_title {\n      font-size: 20px;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    `;document.head.appendChild((0,i.h)("style",{},n));const o=this.props.autoMerge?"appBar_merged":"";return this.container=(0,i.h)("div",{class:`appBar_container ${o}`},this.props.children),this.container}}t.AppBar=r},620:function(e,t,n){var o=this&&this.__rest||function(e,t){var n={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(o=Object.getOwnPropertySymbols(e);i<o.length;i++)t.indexOf(o[i])<0&&Object.prototype.propertyIsEnumerable.call(e,o[i])&&(n[o[i]]=e[o[i]])}return n};Object.defineProperty(t,"__esModule",{value:!0}),t.Button=void 0;const i=n(900),s=n(690),r=n(437),a=n(897);t.Button=e=>{const{children:t,outlined:n=!1,text:l=!1,background:c="#6200ee",color:d="#ffffff",style:h="",class:p="",icon:u}=e,m=o(e,["children","outlined","text","background","color","style","class","icon"]),f=!(n||l),b=f?c:"#ffffff",g=f?d:c,_=f?(0,r.lightenColor)(b,10):(0,r.lightenColor)(b,-10),v=f?(0,r.lightenColor)(b,50):(0,r.lightenColor)(c,50),x=(0,i.strToHash)(n.toString()+l.toString()+b+g+h),y=(0,s.rippleEffect)(v,_),w=`\n    .nano_jsx_button-${x} {\n      color: ${g};\n      background: ${b};\n      border-radius: 4px;\n      display: inline-flex;\n      font-size: 14px;\n      padding: 10px 16px;\n      margin: 0px 0px 1em 0px;\n      text-align: center;\n      cursor: pointer;\n\n      ${s.userSelect}\n      \n\n      z-index: ${s.zIndex.button}\n\n      ${s.boxShadow}\n\n      border: none;\n      text-transform: uppercase;\n      box-shadow: 0 0 4px #999;\n      outline: none;\n    }\n\n    ${y.styles}\n  `;(0,r.addStylesToHead)(w,x);let k="";return(n||l)&&(k+="padding-top: 9px; padding-bottom: 9px; ",k+="-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow none; ",n&&(k+=`border: 1px ${g} solid; `)),k+=h,(0,i.h)("button",Object.assign({class:`nano_jsx_button-${x} ${y.class} ${p}`,style:k},m),u?(0,i.h)(a.Icon,{style:"margin-left: -4px; margin-right: 8px; width: 14px; height: 14px;"},u):null,t)}},485:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Dialog=void 0;const o=n(900),i=n(690),s=n(620);t.Dialog=class{constructor(e={}){this.options=e,this.defaultParentId="dialog_container",this.defaultActionColor="#6200EE";const t={title:"Dialog Title",body:"Dialog body text.",actions:[{name:"Action 1",color:this.defaultActionColor},{name:"Action 2",color:this.defaultActionColor}],firstFocusAction:!1};this.options=Object.assign(Object.assign({},t),e);const n=`\n    #dialog_container {  \n      background: #00000070;\n      position: fixed;\n      bottom: 0px;\n      left: 0px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-direction: column;\n      width: 100vw;\n      height: 100vh;\n      overflow: hidden;\n      \n      z-index: ${i.zIndex.dialog}\n\n      animation-name: dialog-fadein;\n      animation-duration: 0.2s;\n\n      transition: opacity 0.2s;\n      opacity: 1;\n    }\n\n    #dialog_container.dialog_fadeout {\n      opacity: 0;\n    } \n\n    #dialog_container .dialog {\n      background-color: white;\n      border-radius: 4px;\n      min-width: 240px;\n      max-width: min(500px, 80%);\n\n      margin: 8px;\n\n      ${i.boxShadow}\n    }\n\n    #dialog_container .dialog .dialog_header {\n      color: #000000DE;\n      font-size: 20px;\n      padding: 0px 24px 9px;\n      margin: 24px 0px 6px 0px;\n      line-height: 1;\n    }\n\n    #dialog_container .dialog .dialog_body {\n      color: #00000099;\n      font-size: 16px;  \n      padding: 0px 24px 20px;\n      line-height: 1.5em;\n    }\n\n    #dialog_container .dialog .dialog_actions {\n      \n      margin: 0;\n      padding: 8px;\n      \n      display: flex;\n      flex-direction: row;\n      align-items: flex-end;\n      float: right;\n\n      flex-wrap: wrap;\n      justify-content: flex-end;\n    }\n\n    #dialog_container .dialog .dialog_action {\n      margin-bottom: 0px;\n      margin-left: 10px;\n    }\n\n    /*#dialog_container .dialog .dialog_action:hover {\n      border-radius: 4px;      \n      background: #0000000a;\n    }*/\n\n    @keyframes dialog-fadein {\n      from {opacity: 0;}\n      to {opacity: 1;}\n    }\n    `;document.head.appendChild((0,o.h)("style",{},n)),this.handleKeydown=this.handleKeydown.bind(this)}getParentElement(e){let t=document.getElementById(e||this.defaultParentId);return t||(t=document.createElement("div"),t.id=this.defaultParentId,t.ariaHidden="true",document.body.appendChild(t)),t}handleKeydown(e){if("Escape"!==e.key&&"Esc"!==e.key||this.remove(),"Tab"===e.key){e.preventDefault();const t=Array.from(document.querySelectorAll(".dialog_action"));if(t.length<1)return;const n=t.findIndex((e=>document.activeElement===e));-1===n&&t[0].focus();const o=n+(e.shiftKey?-1:1);if(-1===o)return void t[t.length-1].focus();if(o===t.length)return void t[0].focus();t[o].focus()}}remove(){const e=document.getElementById("dialog_container");e&&(e.classList.add("dialog_fadeout"),setTimeout((()=>{e.remove(),window.removeEventListener("keydown",this.handleKeydown),this.enableScroll()}),200))}disableScroll(){document.body.style.overflow="hidden"}enableScroll(){document.body.style.overflow=""}focusAction(e,t){const n=Array.from(document.querySelectorAll(".dialog_action"))[t.findIndex((t=>t.id===e))];n&&n.focus()}focusFirstAction(){const e=Array.from(document.querySelectorAll(".dialog_action"))[0];e&&e.focus()}show(e,t){e=Object.assign(Object.assign({},this.options),e);const n=this.getParentElement(e.parentId||this.defaultParentId);if(n.hasChildNodes())return;n.addEventListener("click",(e=>{e.target===n&&this.remove()}));const i=((e,n,i)=>{const r=i.map((e=>(0,o.h)(s.Button,{text:!0,color:e.color||this.defaultActionColor,class:"dialog_action",onClick:()=>{t({name:e.name,id:e.id}),this.remove()}},e.name.toUpperCase()))),a=(0,o.h)("h2",{class:"dialog_header",id:"dialog-title"},e),l=(0,o.h)("div",{class:"dialog_body"},n),c=(0,o.h)("div",{class:"dialog_actions"},r);return(0,o.h)("div",{class:"dialog",role:"dialog","aria-modal":"true","aria-labelledby":"dialog-title"},a,l,c)})(e.title,e.body,e.actions||[]);n.appendChild(i);const{firstFocusAction:r}=e;e.actions&&r&&("string"==typeof r?this.focusAction(r,e.actions):this.focusFirstAction()),this.disableScroll(),window.addEventListener("keydown",this.handleKeydown);const a=document.getElementsByClassName("dialog")[0],l=document.getElementsByClassName("dialog_actions")[0];a.clientWidth<=l.clientWidth&&l.setAttribute("style","flex-direction: column;")}}},571:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Fab=void 0;const o=n(205),i=n(900),s=n(690),r=n(437);class a extends o.Component{render(){const{background:e="#6200EE",color:t="white",extended:n=!1,mini:o=!1,center:a=!1,left:l=!1,onClick:c=(()=>{})}=this.props,d=o?40:n?48:56,h=(0,i.strToHash)(n.toString()+o.toString()+a.toString()+l.toString()),p=`fab-container-${h}`,u=`\n      .${p} {\n        ${o?"width: 40px;":n?"padding: 0px 12px;":"width: 56px;"}\n        height: ${d}px;\n        position: fixed;\n        background: ${e};\n        border-radius: 36px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        color: ${t};\n        cursor: pointer;\n\n        z-index: ${s.zIndex.fab}\n        bottom: ${this.props.offsetY?16+this.props.offsetY:16}px;        \n        ${l?"left: 16px;":"right: 16px;"}\n        ${a?"transform: translateX(50%); right: 50%;":""}\n        ${s.boxShadow}\n        ${s.userSelect}\n      }\n    `;(0,r.addStylesToHead)(u,h);const{children:m}=this.props;return(0,i.h)("div",{class:p,onClick:e=>c(e)},m)}}t.Fab=a},897:function(e,t,n){var o=this&&this.__rest||function(e,t){var n={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(o=Object.getOwnPropertySymbols(e);i<o.length;i++)t.indexOf(o[i])<0&&Object.prototype.propertyIsEnumerable.call(e,o[i])&&(n[o[i]]=e[o[i]])}return n};Object.defineProperty(t,"__esModule",{value:!0}),t.Icon=void 0;const i=n(205),s=n(900),r=n(437);class a extends i.Component{didUnmount(){}render(){const e=this.props,{src:t,size:n=16,active:i=!0,color:a="#6204EE",style:l=""}=e,c=o(e,["src","size","active","color","style"]),d=this.props.children;this.cssHash=(0,s.strToHash)(i+a+n.toString());const h=a,p=`\n    i.icon-${this.cssHash} {\n      width: ${n}px;\n      height: ${n}px;\n      display: inline-block;\n      content: '';\n\n      /*-webkit-mask: url(YOUR_SVG_URL) no-repeat 50% 50%;\n      mask: url(YOUR_SVG_URL) no-repeat 50% 50%;*/\n\n      -webkit-mask-size: cover;\n      mask-size: cover; \n\n      background-color: ${h};\n    }\n\n    i.icon-${this.cssHash}.icon_inactive-${this.cssHash} {\n      background-color: #00000070;\n    }\n    `;(0,r.addStylesToHead)(p,this.cssHash);const u=`-webkit-mask: url(${t||d}) no-repeat 50% 50%; mask: url(${t||d}) no-repeat 50% 50%;`,m=[`icon-${this.cssHash}`];return i||m.push(`icon_inactive-${this.cssHash}`),(0,s.h)("i",Object.assign(Object.assign({class:m.join(" ")},c),{style:u+l}))}}t.Icon=a},992:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Sheet=t.Tab=t.Tabs=t.Snackbar=t.Menu=t.ListItem=t.List=t.Icon=t.Fab=t.Dialog=t.Button=t.NavigationAction=t.Navigation=t.Toolbar=t.AppBar=void 0;var o=n(308);Object.defineProperty(t,"AppBar",{enumerable:!0,get:function(){return o.AppBar}});var i=n(865);Object.defineProperty(t,"Toolbar",{enumerable:!0,get:function(){return i.Toolbar}});var s=n(302);Object.defineProperty(t,"Navigation",{enumerable:!0,get:function(){return s.Navigation}}),Object.defineProperty(t,"NavigationAction",{enumerable:!0,get:function(){return s.NavigationAction}});var r=n(620);Object.defineProperty(t,"Button",{enumerable:!0,get:function(){return r.Button}});var a=n(485);Object.defineProperty(t,"Dialog",{enumerable:!0,get:function(){return a.Dialog}});var l=n(571);Object.defineProperty(t,"Fab",{enumerable:!0,get:function(){return l.Fab}});var c=n(897);Object.defineProperty(t,"Icon",{enumerable:!0,get:function(){return c.Icon}});var d=n(203);Object.defineProperty(t,"List",{enumerable:!0,get:function(){return d.List}}),Object.defineProperty(t,"ListItem",{enumerable:!0,get:function(){return d.ListItem}});var h=n(32);Object.defineProperty(t,"Menu",{enumerable:!0,get:function(){return h.Menu}});var p=n(878);Object.defineProperty(t,"Snackbar",{enumerable:!0,get:function(){return p.Snackbar}});var u=n(248);Object.defineProperty(t,"Tabs",{enumerable:!0,get:function(){return u.Tabs}}),Object.defineProperty(t,"Tab",{enumerable:!0,get:function(){return u.Tab}});var m=n(340);Object.defineProperty(t,"Sheet",{enumerable:!0,get:function(){return m.Sheet}})},203:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.List=t.ListItem=void 0;const o=n(205),i=n(900),s=n(897),r=n(437);class a extends o.Component{render(){const{props:e}=this,{onClick:t=(()=>{})}=e,n="margin-right: 16px;",o=e.icon?(0,i.h)(s.Icon,{size:20,style:"margin-right: 32px;",src:e.icon}):null,r=e.avatar?(0,i.h)("img",{src:e.avatar,width:40,height:40,style:`border-radius: 20px; ${n}`}):null,a=e.square?(0,i.h)("img",{src:e.square,width:56,height:56,style:n}):null,l=e.image?(0,i.h)("img",{src:e.image,width:100,height:56,style:"margin-left: -16px; margin-right: 16px;"}):null,c=(0,i.h)("span",null,e.children);let d="";return(e.icon||e.avatar)&&(d+="min-height: 56px; "),(e.square||e.image)&&(d+="min-height: 72px; "),(0,i.h)("li",{style:d,onClick:t},o,r,a,l,c)}}t.ListItem=a;class l extends o.Component{render(){const{small:e=!1}=this.props;this.cssHash=(0,i.strToHash)(`List${e.toString()}`);const t=`\n      .list-${this.cssHash} ul {\n        margin: 0px;\n        padding: 8px 16px;\n      }\n\n      .list-${this.cssHash} ul li {\n        list-style: none;\n        min-height: ${e?32:46}px;\n        display: flex;\n        align-items: center;\n        margin: 0px -16px;\n        padding: 0px 16px;\n        cursor: pointer;\n      }\n\n      .list-${this.cssHash} ul li span {\n        font-size: 16px;\n      }\n\n      .list-${this.cssHash} ul li:hover  {\n        background:#00000010\n      }    \n    `;(0,r.addStylesToHead)(t,this.cssHash);const n=(0,i.h)("ul",null,this.props.children);return(0,i.h)("div",{class:`list-${this.cssHash}`},n)}}t.List=l},32:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Menu=void 0;const o=n(900),i=n(690),s=n(437);t.Menu=class{constructor(){this.defaultParentId="menu_items_container",this.cssHash=Math.random().toString(36).substring(2)}getParentElement(e){document.querySelectorAll(`[id^="${this.defaultParentId}"]`).forEach((e=>{e.remove()}));let t=document.getElementById(`${this.defaultParentId}-${e}`);return t||(t=document.createElement("div"),t.id=`${this.defaultParentId}-${e}`),(0,o.removeAllChildNodes)(t),document.body.appendChild(t),t}close(){(0,o.removeAllChildNodes)(this.getParentElement(this.cssHash))}open(e){const{position:t,list:n}=e,r=t.x<window.innerWidth/2?"left":"right",a=t.y<window.innerHeight/2?"top":"bottom",l=`\n   \n    #menu_items_background-${this.cssHash} {\n      width: 100vw;\n      height: 100vh;\n      background: transparent;\n      position: fixed;\n      top: 0;\n      left: 0;\n      z-index: ${i.zIndex.menu}      \n    }\n   \n    #menu_items_list-${this.cssHash} {\n      position: fixed;\n      background: white;\n      \n      border-radius: 4px;\n      min-width: 112px;\n\n      ${a}: ${t.y>window.innerHeight/2?window.innerHeight-t.y:t.y}px;\n      ${r}: ${t.x>window.innerWidth/2?window.innerWidth-t.x:t.x}px;\n\n      z-index: ${i.zIndex.menu}\n\n      ${i.boxShadow}\n    }\n\n    `,c=document.querySelector(`[data-css-hash*="${this.cssHash}"]`);c&&c.remove(),(0,s.addStylesToHead)(l,this.cssHash);const d=(0,o.h)("div",{id:`menu_items_list-${this.cssHash}`},n),h=(0,o.h)("div",{onClick:()=>this.close(),id:`menu_items_background-${this.cssHash}`},d);d.addEventListener("click",(e=>e.stopPropagation())),this.getParentElement(this.cssHash).appendChild((0,o.render)(h))}}},302:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Navigation=t.NavigationAction=void 0;const o=n(900),i=n(205),s=n(690),r=n(897),a="bottom_navigation_action_id-",l="bottom_navigation_action_inactive";class c extends i.Component{willMount(){var e;this.id=null!==(e=this.props.id)&&void 0!==e?e:this.props.label.toLowerCase().replace(/\s/gm,"-").replace(/[-]+/gm,"-")}render(){const e=(0,o.h)("span",{class:"bottom_navigation_label"},this.props.label),t=["bottom_navigation_action"];return this.props.active?t.push("bottom_navigation_label_initial_active"):t.push(l),(0,o.h)("div",{id:`${a}${this.id}`,class:t.join(" "),onClick:()=>{var e,t;this.props.link&&(window.location.href=this.props.link),null===(t=(e=this.props).onClick)||void 0===t||t.call(e,{navigate:!!this.props.link,id:this.id,label:this.props.label,component:this})}},this.props.icon?(0,o.h)(r.Icon,{size:22,style:"margin-bottom: 2px;",src:this.props.icon}):null,e)}}t.NavigationAction=c;class d extends i.Component{didMount(){this.props.children.forEach((e=>{e.props.onClick=e=>{var t,n;e.navigate||(document.querySelectorAll(`[id^="${a}"]`).forEach((t=>{t.id===`${a}${e.id}`?t.classList.remove(l):t.classList.add(l)})),null===(n=(t=this.props).onClick)||void 0===n||n.call(t,e))}}))}render(){const e="#00000070",t=`\n      #bottom_navigation_container {\n\n        background-color: white;\n        position: fixed;\n        bottom: 0;\n        left: 0;\n        width: 100vw;\n        min-height: 56px;\n\n        z-index: ${s.zIndex.navigation}\n\n        display: flex;\n        justify-content: center;\n        \n        ${s.boxShadow}\n      } \n\n      #bottom_navigation_container .bottom_navigation_label {\n        transition: font-size 0.2s;\n      }\n\n      #bottom_navigation_container .bottom_navigation_label_initial_active .bottom_navigation_label{\n        animation-name: bottom_navigation_label_fontsize;\n        animation-duration: 0.2s;\n      }\n\n      @keyframes bottom_navigation_label_fontsize {\n        from {font-size: 12px;}\n        to {font-size: 14px;}\n      }\n\n      #bottom_navigation_container .bottom_navigation_action {\n        color: #6204EE;\n        font-size: 14px;\n\n        min-width: 80px;\n        max-width: 168px;\n        flex-grow: 1;\n\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        align-items: center;\n\n        cursor: pointer;\n      }\n\n      #bottom_navigation_container .bottom_navigation_action_inactive{\n        color: ${e};\n        font-size: 12px;\n      }\n\n      #bottom_navigation_container .bottom_navigation_action_inactive i {\n        background-color: ${e}\n      }\n    `;document.head.appendChild((0,o.h)("style",{},t));const{parentId:n,children:i}=this.props,r=(0,o.h)("div",{id:"bottom_navigation_container"},i);if(n){const e=document.getElementById(n);if(e)return void e.appendChild(r)}return r}}t.Navigation=d},340:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Sheet=void 0;const o=n(205),i=n(900),s=n(690),r=n(437);class a extends o.Component{static show(e){document.body.appendChild((0,i.render)(e))}static close(){const e=document.querySelector("[class^=sheet_container]");e&&e.remove()}render(){const{mode:e="custom",title:t,subtitle:n}=this.props,o=(0,i.strToHash)(`sheet${e}`),a="side"===e?"left":e;let l="";("side"===e||"right"===e||"left"===e)&&(l+=`\n        min-width: 256px;\n        max-width: calc(100vw - 56px);\n        height: 100vh;\n\n        top: 0;\n        ${"right"===e?"right":"left"}: 0;`),"bottom"===e&&(l+="\n        width: 100vw;\n        bottom: 0px;      \n        left: 0;");const c=`\n      @keyframes sheet_fadein_${a}-${o} {\n        from {${a}: -100%;}\n        to {${a}: 0;}\n      }\n\n      .sheet_container-${o} {\n      }\n\n      .sheet_sheet-${o} {\n        overflow: scroll;\n        max-height: 100vh;\n\n        ${l}\n        background: white;\n        position: fixed;\n\n        ${"bottom"===e?"border-radius: 4px;":""}\n\n        box-sizing: border-box;\n        ${s.boxShadow}\n\n        z-index: ${s.zIndex.sheet}\n\n        animation-name: sheet_fadein_${a}-${o};\n        animation-duration: 0.2s;\n\n        transition: top 2s, right 2s, bottom 2s, left 2s;\n      }\n\n      .sheet_background-${o} {\n        background: #00000070;\n        position: fixed;\n        top: 0px;\n        left: 0px;\n        width: 100vw;\n        height: 100vh;\n        z-index: ${s.zIndex.sheet}\n\n        animation-name: sheet-background-fadein;\n        animation-duration: 0.2s;\n      }\n\n      @keyframes sheet-background-fadein {\n        from {opacity: 0;}\n        to {opacity: 1;}\n      }\n      \n      .sheet_title-${o} {\n        padding: 20px 16px 0px;\n        font-size: 24px;\n      }\n      \n      .sheet_subtitle-${o} {\n        padding: 8px 16px;\n        font-size: 14px;\n        color: #000000b0;\n      }`;(0,r.addStylesToHead)(c,o);const d=(0,i.h)("div",{class:`sheet_background-${o}`,onClick:()=>{m.remove()}}),h=t?(0,i.h)("div",{class:`sheet_title-${o}`},t):null,p=n?(0,i.h)("div",{class:`sheet_subtitle-${o}`},n):null,u=(0,i.h)("div",{class:`sheet_sheet-${o}`},h,p,this.props.children),m=(0,i.h)("div",{class:`sheet_container-${o}`},d,u);return m}}t.Sheet=a},878:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Snackbar=void 0;const o=n(900),i=n(690);t.Snackbar=class{constructor(e={}){this.options=e,this.defaultParentId="snackbar_container",this.defaultActionColor="#BC86FC";const t={message:"Hello Snack!",actions:[{name:"Dismiss",color:this.defaultActionColor}],autoHide:!0,consecutive:!0,offsetY:0};this.options=Object.assign(Object.assign({},t),e);const n=`\n      #snackbar_container {    \n        position: fixed;\n        bottom: ${this.options.offsetY}px;\n        left: 0px;\n        overflow: hidden;\n        z-index: ${i.zIndex.snackbar}\n      }\n\n      #snackbar_container .snackbar_snack {\n        background-color: #323232;\n\n        padding: 16px 16px 16px 16px;\n        margin: 0px 8px 8px 8px;\n\n        border-radius: 4px;\n        width: 344px;\n        max-width: calc(100vw - 16px);\n        box-sizing: border-box;\n        display: flex;\n        justify-content: space-between;\n        height: fit-content;\n        overflow: hidden;\n\n        ${i.boxShadow}\n\n        animation-name: snackbar-fadein;\n        animation-duration: 0.2s;\n\n        transition: opacity 0.2s;\n        opacity: 1;\n      }\n\n      #snackbar_container .snackbar_snack_fadeout {\n        opacity: 0;\n      } \n\n      #snackbar_container .snackbar_snack .snackbar_message {\n        color: #DFDFDF;\n        font-size: 16px;\n        align-self: center;\n      }\n\n      #snackbar_container .snackbar_snack .snackbar_actions {\n        align-self: center;\n      }\n\n      #snackbar_container .snackbar_snack .snackbar_action {\n        font-size: 16px;\n        cursor: pointer;\n        padding: 8px;\n        margin-right: -8px;\n      }\n\n      @keyframes snackbar-fadein {\n        from {opacity: 0;}\n        to {opacity: 1;}\n      }\n    `;document.head.appendChild((0,o.h)("style",{},n))}getParentElement(e){let t=document.getElementById(e||this.defaultParentId);return t||(t=document.createElement("div"),t.id=this.defaultParentId,document.body.appendChild(t)),t}remove(e){e.classList.add("snackbar_snack_fadeout"),setTimeout((()=>e.remove()),200)}show(e,t){if(this.options.consecutive){const n=document.querySelectorAll(".snackbar_snack");return n.forEach((e=>this.remove(e))),void(n.length>0?setTimeout((()=>this._show(e,t)),220):this._show(e,t))}this._show(e,t)}_show(e,t){e=Object.assign(Object.assign({},this.options),e);const n=this.getParentElement(e.parentId||this.defaultParentId);"number"==typeof e.offsetY&&(n.style.bottom=`${e.offsetY}px`);const i=((e,n)=>{const s=n.map((e=>(0,o.h)("a",{class:"snackbar_action",style:`color: ${e.color||this.defaultActionColor}`,onClick:()=>{t&&t({name:e.name,id:e.id}),this.remove(i)}},e.name.toUpperCase()))),r=(0,o.h)("div",{class:"snackbar_message"},e),a=(0,o.h)("div",{class:"snackbar_actions"},s);return(0,o.h)("div",{class:"snackbar_snack"},r,a)})(e.message,e.actions||[]);!0===e.autoHide?setTimeout((()=>this.remove(i)),5e3):"number"==typeof e.autoHide&&setTimeout((()=>this.remove(i)),e.autoHide),n.appendChild(i)}}},248:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Tabs=t.Tab=void 0;const o=n(205),i=n(900),s=n(690),r=n(437);t.Tab=e=>{const t=[e.itemClass,e.rippleClass];e.active&&t.push("active");const n=e.href?{href:e.href}:{},o=(0,i.h)("a",Object.assign({},n),e.children);return(0,i.h)("li",{class:t.join(" "),onClick:()=>e.onClickHandler({index:e.index})},o)};class a extends o.Component{constructor(){super(...arguments),this.active=this.props.active||0}didMount(){const e=e=>{var t;if(!e)return;const n=this.items[0].getBoundingClientRect(),o=e.getBoundingClientRect();this.line.style.left=o.x-n.x+"px",this.line.style.width=`${o.width}px`,null===(t=document.querySelector(".tabs_item.active"))||void 0===t||t.classList.remove("active"),e.classList.add("active")},t=e=>{this.props.scroll&&e.scrollIntoView({behavior:"smooth",block:"center",inline:"center"})};(0,i.tick)((()=>{e(this.items[this.active]),t(this.items[this.active])}));for(let n=0;n<this.items.length;n++){const o=this.items[n];o.addEventListener("click",(()=>{this.active=n,setTimeout((()=>e(o)),50),setTimeout((()=>e(o)),100),setTimeout((()=>e(o)),150),t(o)}))}}render(){var e;const t=(0,s.rippleEffect)("#ffffff70","#5902db"),{scroll:n=!1,children:o,active:a}=this.props,l=(0,i.strToHash)(n.toString()+(null==o?void 0:o.length)+a+t.class),c=`\n      .tabs_container-${l} {\n        background: #6204ee;\n\n        width: 100%;\n        height: 48px;\n\n        overflow-x: ${this.props.scroll?"scroll":"hidden"};\n        overflow-y: hidden;\n\n        ${s.userSelect}\n      }\n\n      /* Hide scrollbar for Chrome, Safari and Opera */\n      .tabs_container-${l}::-webkit-scrollbar {\n        display: none;\n      }\n\n      /* Hide scrollbar for IE, Edge and Firefox */\n      .tabs_container-${l} {\n        -ms-overflow-style: none; /* IE and Edge */\n        scrollbar-width: none; /* Firefox */\n      }\n\n      .tabs_list-${l} {\n        ${this.props.scroll?"":"display: flex; justify-content: space-evenly;"}\n\n        height: 100%;\n        display: flex;\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n        cursor: pointer;\n      }\n\n      .tabs_item-${l} {\n        ${this.props.scroll?"":"width: 100%; text-align: center;"}\n\n        padding-top: 16px;\n        font-size: 14px;\n        text-transform: uppercase;\n        color: rgba(255, 255, 255, 0.75);\n        transition: color 0.2s;\n      }\n      \n      \n      .tabs_item-${l} a {\n        font-size: 14px;\n        padding: 16px 32px;\n        text-decoration: none;\n        text-transform: uppercase;\n        color: rgba(255, 255, 255, 0.75);\n        transition: color 0.2s;\n      }\n\n      .tabs_item-${l}.active a {\n        color: rgba(255, 255, 255, 1);\n      }\n\n      .tabs_item-${l}:active {\n        background: #5902db;\n      }\n\n      /* if the primary input mechanism system of the device can hover over elements with ease, we use hover */\n      @media (hover: hover) {\n        .tabs_item-${l}:hover {\n          background: #5902db;\n        }\n      }\n\n      ${t.styles}\n\n      .tabs_line-${l} {\n        border-bottom: 2px solid white;\n        position: relative;\n        top: -2px;\n\n        opacity: 0;\n        \n        left: 50%;\n        width: 0px;\n\n        transition: left 0.5s, width 0.5s;\n\n        animation-name: tabs_line_fadein;\n        animation-duration: 0.25s;\n        animation-delay: 0.25s;\n        animation-fill-mode: forwards;\n      }\n      \n      @keyframes tabs_line_fadein {\n        from {opacity: 0;}\n        to {opacity: 1;}\n      }\n      `;(0,r.addStylesToHead)(c,l),null===(e=this.props.children)||void 0===e||e.forEach(((e,n)=>{n===this.active&&(e.props=Object.assign(Object.assign({},e.props),{active:!0})),e.props=Object.assign(Object.assign({},e.props),{rippleClass:t.class,itemClass:`tabs_item-${l}`,index:n}),e.props.onClickHandler=e=>this.props.onClick(e)})),this.items=(0,i.render)(this.props.children);const d=(0,i.h)("ul",{class:`tabs_list-${l}`},this.items);return this.line=(0,i.h)("div",{class:`tabs_line-${l}`}),(0,i.h)("div",{class:`tabs_container-${l}`},d,this.line)}}t.Tabs=a},865:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Toolbar=void 0;const o=n(205),i=n(900);class s extends o.Component{static setTitle(e){const t=document.querySelector(".toolbar_title");t&&(t.innerText=e)}render(){document.head.appendChild((0,i.h)("style",{},"\n      .toolbar_container {\n        padding: 16px;\n      }\n\n      .toolbar_container .toolbar_text {\n        font-size: 20px;\n        margin-left: 24px;\n        cursor: pointer;\n      }\n\n      .toolbar_container .toolbar_icon {\n        width: 22px;\n        height: 22px;\n        margin-left: 24px;\n        cursor: pointer;\n\n        display: inline-block;\n        content: '';\n\n        /*-webkit-mask: url(YOUR_SVG_URL) no-repeat 50% 50%;\n        mask: url(YOUR_SVG_URL) no-repeat 50% 50%;*/\n\n        -webkit-mask-size: cover;\n        mask-size: cover; \n\n        background-color: white;\n      }\n\n      .toolbar_navigation_box {\n        padding: 4px;\n        width: 20px;\n        height: 16px;\n        margin-right: 32px;\n        cursor: pointer;\n      }\n\n      .toolbar_hamburger_button,\n      .toolbar_hamburger_button::before,\n      .toolbar_hamburger_button::after {\n        position: absolute;\n        width: 20px;\n        height: 2px;\n        border-radius: 2px;\n        background: white;\n        content: '';\n      }\n      .toolbar_hamburger_button::before {\n        top: 6px;\n      }\n      .toolbar_hamburger_button::after {\n        top: 12px;\n      }\n\n      .toolbar_button_wrapper {\n        width: 24px;\n        height: 24px;\n        padding: 2px;\n        position: relative;\n        top: -2px;\n      }\n\n      .toolbar_back_button,\n      .toolbar_back_button::before,\n      .toolbar_back_button::after {\n        position: relative;\n        top: 7px;\n        width: 20px;\n        height: 2px;\n        border-radius: 2px;\n        background: white;\n        content: '';\n      }\n\n      .toolbar_back_button::before {\n        position: absolute;\n        top: -5px;\n        transform: translate3d(-4px,0,0) rotate(-45deg) scaleX(.7);\n      }\n\n      .toolbar_back_button::after {\n        position: absolute;\n        top: 5px;\n        transform: translate3d(-4px,0,0) rotate(45deg) scaleX(.7);\n      }\n    "));const{back:e=!1,actionClick:t=(()=>{}),menu:n}=this.props,o=n?(0,i.h)("div",{class:"toolbar_button_wrapper",onClick:t},(0,i.h)("div",{class:"toolbar_hamburger_button"})):e?(0,i.h)("div",{class:"toolbar_button_wrapper",onClick:t},(0,i.h)("div",{class:"toolbar_back_button"})):null,s=o?(0,i.h)("div",{class:"toolbar_navigation_box"},o):null,r=this.props.title?(0,i.h)("div",{class:"toolbar_title"},this.props.title):null,a=(0,i.h)("div",{class:"toolbar_left"},s,r),l=(0,i.h)("div",{class:"toolbar_right"},this.props.children);return(0,i.h)("div",{class:"toolbar_container"},a,l)}}t.Toolbar=s},122:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.VERSION=void 0,t.VERSION="0.1.0"},790:function(e,t,n){var o=this&&this.__rest||function(e,t){var n={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(o=Object.getOwnPropertySymbols(e);i<o.length;i++)t.indexOf(o[i])<0&&Object.prototype.propertyIsEnumerable.call(e,o[i])&&(n[o[i]]=e[o[i]])}return n};Object.defineProperty(t,"__esModule",{value:!0}),t.withStyles=void 0;const i=n(900),s=n(205),r=n(998),a=n(723);t.withStyles=(...e)=>t=>class extends s.Component{render(){const n=this.props,{children:s}=n,l=o(n,["children"]),c=[];e.forEach((e=>{var t;if("string"==typeof e)c.push((0,i.h)(a.Helmet,null,(0,i.h)("style",null,e)));else if("function"==typeof e){const t=e();"string"==typeof t&&c.push((0,i.h)(a.Helmet,null,(0,i.h)("style",null,t)))}else if("object"==typeof e){const n=null===(t=e.toString)||void 0===t?void 0:t.call(e);"string"==typeof n&&c.push((0,i.h)(a.Helmet,null,(0,i.h)("style",null,n)))}}));const d=s&&s.length>0?(0,i.h)(t,Object.assign({},l),s):(0,i.h)(t,Object.assign({},this.props));return(0,i.h)(r.Fragment,null,...c,d)}}}},t={},n=function n(o){var i=t[o];if(void 0!==i)return i.exports;var s=t[o]={exports:{}};return e[o].call(s.exports,s,s.exports,n),s.exports}(974);nanoJSX=n.default})();
\ No newline at end of file
diff --git a/bundles/nano.slim.min.js b/bundles/nano.slim.min.js
index f08f23a..7d386a2 100644
--- a/bundles/nano.slim.min.js
+++ b/bundles/nano.slim.min.js
@@ -1 +1 @@
-var nanoJSX;(()=>{"use strict";var e={233:function(e,t,n){var s=this&&this.__createBinding||(Object.create?function(e,t,n,s){void 0===s&&(s=n);var r=Object.getOwnPropertyDescriptor(t,n);r&&!("get"in r?!t.__esModule:r.writable||r.configurable)||(r={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,s,r)}:function(e,t,n,s){void 0===s&&(s=n),e[s]=t[n]}),r=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),o=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&s(t,e,n);return r(t,e),t};Object.defineProperty(t,"__esModule",{value:!0}),t.VERSION=t.printVersion=void 0;const i=n(900),a=n(743),l=n(205),d=n(998),c=n(681),h=n(403),p=n(790),u=o(n(287)),f=n(325);t.default={Component:l.Component,Fragment:d.Fragment,Router:u,Store:c.Store,createContext:h.createContext,h:i.h,jsx:f.jsx,render:i.render,task:a.task,tick:i.tick,withStyles:p.withStyles};var m=n(743);Object.defineProperty(t,"printVersion",{enumerable:!0,get:function(){return m.printVersion}});var g=n(122);Object.defineProperty(t,"VERSION",{enumerable:!0,get:function(){return g.VERSION}})},205:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Component=void 0;const s=n(743),r=n(900),o=n(417);t.Component=class{constructor(e){this._elements=[],this._skipUnmount=!1,this._hasUnmounted=!1,this.props=e||{},this.id=this._getHash()}static get isClass(){return!0}get isClass(){return!0}setState(e,t=!1){"object"==typeof e&&null!==e&&void 0!==this.state?this.state=Object.assign(Object.assign({},this.state),e):this.state=e,t&&this.update()}set state(e){o._state.set(this.id,e)}get state(){return o._state.get(this.id)}set initState(e){void 0===this.state&&(this.state=e)}get elements(){return this._elements||[]}set elements(e){Array.isArray(e)||(e=[e]),e.forEach((e=>{this._elements.push(e)}))}_addNodeRemoveListener(){/^[^{]+{\s+}$/gm.test(this.didUnmount.toString())||(0,s.onNodeRemove)(this.elements[0],(()=>{this._skipUnmount||this._didUnmount()}))}_didMount(){this._addNodeRemoveListener(),this.didMount()}_willUpdate(){this.willUpdate()}_didUpdate(){this.didUpdate()}_didUnmount(){this._hasUnmounted||(this.didUnmount(),this._hasUnmounted=!0)}willMount(){}didMount(){}willUpdate(){}didUpdate(){}didUnmount(){}render(e){}update(e){this._skipUnmount=!0,this._willUpdate();const t=[...this.elements];this._elements=[];let n=this.render(e);n=(0,r._render)(n),this.elements=n;const s=t[0].parentElement;s||console.warn("Component needs a parent element to get updated!"),this.elements.forEach((e=>{s&&s.insertBefore(e,t[0])})),t.forEach((e=>{this.elements.includes(e)||(e.remove(),e=null)})),this._addNodeRemoveListener(),(0,r.tick)((()=>{this._skipUnmount=!1,this.elements[0].isConnected?this._didUpdate():this._didUnmount()}))}_getHash(){}}},723:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Helmet=void 0;const s=n(205),r=n(900);class o extends Map{toString(){let e="";for(const[t,n]of this)e+=` ${t}="${n}"`;return e.trim()}}class i extends s.Component{static SSR(e){var t,n;const s=/(<helmet\b[^>]*>)((.|\r|\n)*?)(<\/helmet>)/gm,r=[],i=[],a={html:new o,body:new o};if("undefined"!=typeof document&&document.head){let e=[];e=[].slice.call(document.head.children);for(let t=0;t<e.length;t++)-1===r.indexOf(e[t])&&r.push(e[t])}let l;for(;null!==(l=s.exec(e));){const s=l[1];let o=l[2];const d=/<html\s([^>]+)><\/html>/gm,c=/<body\s([^>]+)><\/body>/gm,h=/(\w+)="([^"]+)"/gm;let p=null;null===(t=e.match(d))||void 0===t||t.forEach((e=>{for(o=o.replace(e,"");null!==(p=h.exec(e));)a.html.set(p[1],p[2])})),null===(n=e.match(c))||void 0===n||n.forEach((e=>{for(o=o.replace(e,"");null!==(p=h.exec(e));)a.body.set(p[1],p[2])}));const u=s.includes('data-placement="head"');u&&!r.includes(o)?r.push(o):u||i.includes(o)||i.push(o)}return{body:e.replace(s,""),head:r,footer:i,attributes:a}}didMount(){this.props.children.forEach((e=>{var t,n,s,o;if(!(e instanceof HTMLElement))return;const i=this.props.footer?document.body:document.head,a=e.tagName;let l=[];l.push(e.innerText);for(let s=0;s<e.attributes.length;s++)l.push(null===(t=e.attributes.item(s))||void 0===t?void 0:t.name.toLowerCase()),l.push(null===(n=e.attributes.item(s))||void 0===n?void 0:n.value.toLowerCase());if("HTML"===a||"BODY"===a){const e=document.getElementsByTagName(a)[0];for(let t=1;t<l.length;t+=2)e.setAttribute(l[t],l[t+1]);return}if("TITLE"===a){const t=document.getElementsByTagName("TITLE");if(t.length>0){const n=e;t[0].text=n.text}else{const t=(0,r.h)("title",null,e.innerHTML);(0,r.appendChildren)(i,[t],!1)}return}let d=!1;l=l.sort();const c=document.getElementsByTagName(a);for(let e=0;e<c.length;e++){let t=[];t.push(c[e].innerText);for(let n=0;n<c[e].attributes.length;n++)t.push(null===(s=c[e].attributes.item(n))||void 0===s?void 0:s.name.toLowerCase()),t.push(null===(o=c[e].attributes.item(n))||void 0===o?void 0:o.value.toLowerCase());t=t.sort(),l.length>0&&t.length>0&&JSON.stringify(l)===JSON.stringify(t)&&(d=!0)}d||(0,r.appendChildren)(i,[e],!1)}))}render(){const e=this.props.footer?"footer":"head";return(0,r.isSSR)()?(0,r.h)("helmet",{"data-ssr":!0,"data-placement":e},this.props.children):[]}}t.Helmet=i},287:function(e,t,n){var s=this&&this.__rest||function(e,t){var n={};for(var s in e)Object.prototype.hasOwnProperty.call(e,s)&&t.indexOf(s)<0&&(n[s]=e[s]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(s=Object.getOwnPropertySymbols(e);r<s.length;r++)t.indexOf(s[r])<0&&Object.prototype.propertyIsEnumerable.call(e,s[r])&&(n[s[r]]=e[s[r]])}return n};Object.defineProperty(t,"__esModule",{value:!0}),t.parseParamsFromPath=t.Listener=t.Link=t.to=t.Route=t.Routes=t.Switch=t.matchPath=void 0;const r=n(205),o=n(900),i=[],a=e=>{window.history.pushState({},"",e),i.forEach((e=>e.handleChanges())),window.dispatchEvent(new Event("pushstate"))},l=e=>{window.history.replaceState({},"",e),i.forEach((e=>e.handleChanges())),window.dispatchEvent(new Event("replacestate"))};t.matchPath=(e,t)=>{const{exact:n=!1,regex:s}=t;let r,{path:o}=t;if(!o)return{path:null,url:e,isExact:!0,params:{}};let i={};if(o.includes("/:")){const t=o.split("/"),n=e.split("/");t.forEach(((e,r)=>{if(/^:/.test(e)){const o=e.slice(1),a=n[r];if(s&&s[o]&&!s[o].test(a))return null;i=Object.assign(Object.assign({},i),{[o]:a}),t[r]=n[r]}})),o=t.join("/")}if("*"===o&&(r=[e]),r||(r=new RegExp(`^${o}`).exec(e)),!r)return null;const a=r[0],l=e===a;return n&&!l?null:{path:o,url:a,isExact:l,params:i}};class d extends r.Component{constructor(){super(...arguments),this.index=0,this.path="",this.match={index:-1,path:""}}didMount(){window.addEventListener("popstate",this.handleChanges.bind(this)),i.push(this)}didUnmount(){window.removeEventListener("popstate",this.handleChanges.bind(this)),i.splice(i.indexOf(this),1)}handleChanges(){this.findChild(),this.shouldUpdate()&&this.update()}findChild(){this.match={index:-1,path:""},this.props.children=this.props.children.flat();for(let e=0;e<this.props.children.length;e++){const n=this.props.children[e],{path:s,exact:r,regex:i}=n.props;if((0,t.matchPath)((0,o.isSSR)()?_nano.location.pathname:window.location.pathname,{path:s,exact:r,regex:i}))return this.match.index=e,void(this.match.path=s)}}shouldUpdate(){return this.path!==this.match.path||this.index!==this.match.index}render(){this.findChild();const e=this.props.children[this.match.index];if(-1===this.match.index&&(this.path="",this.index=0),e){const{path:t}=e.props;this.path=t,this.index=this.match.index;const n=(0,o._render)(e);return(0,o.h)("div",{},(0,o._render)(n))}return this.props.fallback?(0,o.h)("div",{},(0,o._render)(this.props.fallback)):(0,o.h)("div",{},"not found")}}t.Switch=d,t.Routes=class extends d{},t.Route=({path:e,regex:n,children:s})=>{const r=(0,o.isSSR)()?_nano.location.pathname:window.location.pathname,i=(0,t.parseParamsFromPath)(e);return s.forEach((t=>{t.props&&(t.props=Object.assign(Object.assign({},t.props),{route:{path:e,regex:n,pathname:r,params:i}}))})),s},t.to=(e,t=!1)=>{t?l(e):a(e)},t.Link=e=>{var{to:t,replace:n,children:r}=e,i=s(e,["to","replace","children"]);return(0,o.h)("a",Object.assign({href:t,onClick:e=>(e.preventDefault(),void(n?l(t):a(t)))},i),r)};class c{constructor(){if(this._listeners=new Map,(0,o.isSSR)())return;this._route=window.location.pathname;const e=()=>{const e=window.location.pathname;this._listeners.forEach((t=>{t(e,this._route)})),this._route=e};window.addEventListener("pushstate",e),window.addEventListener("replacestate",e)}use(){const e=Math.random().toString(36).substring(2);return{subscribe:t=>{this._listeners.set(e,t)},cancel:()=>{this._listeners.has(e)&&this._listeners.delete(e)}}}}let h;t.Listener=()=>(h||(h=new c),h),t.parseParamsFromPath=e=>{let t={};const n=(0,o.isSSR)()?_nano.location.pathname.split("/"):window.location.pathname.split("/");return e.split("/").forEach(((e,s)=>{e.startsWith(":")&&(t=Object.assign(Object.assign({},t),{[e.slice(1)]:n[s]}))})),t}},403:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.useContext=t.createContext=void 0,t.createContext=e=>{let t=e;return{Provider:e=>(e.value&&(t=e.value),e.children),Consumer:e=>({component:e.children[0](t),props:Object.assign(Object.assign({},e),{context:t})}),get:()=>t,set:e=>t=e}},t.useContext=e=>{const t=e;if(t&&"function"==typeof t.get)return t.get()}},900:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.h=t._render=t.hydrate=t.render=t.appendChildren=t.strToHash=t.removeAllChildNodes=t.tick=t.isSSR=void 0,n(499),t.isSSR=()=>"undefined"!=typeof _nano&&!0===_nano.isSSR,t.tick=Promise.prototype.then.bind(Promise.resolve()),t.removeAllChildNodes=e=>{for(;e.firstChild;)e.removeChild(e.firstChild)},t.strToHash=e=>{let t=0;for(let n=0;n<e.length;n++)t=(t<<5)-t+e.charCodeAt(n),t|=0;return Math.abs(t).toString(32)},t.appendChildren=(e,n,s=!0)=>{Array.isArray(n)?("object"==typeof n&&(n=Array.prototype.slice.call(n)),n.forEach((n=>{if(Array.isArray(n))(0,t.appendChildren)(e,n,s);else{const r=(0,t._render)(n);void 0!==r&&(Array.isArray(r)?(0,t.appendChildren)(e,r,s):(0,t.isSSR)()&&!s?e.appendChild(null==r.nodeType?r.toString():r):e.appendChild(null==r.nodeType?document.createTextNode(r.toString()):r))}}))):(0,t.appendChildren)(e,[n],s)},t.render=(e,n=null,s=!0)=>{let r=(0,t._render)(e);return Array.isArray(r)&&(r=r.map((e=>(0,t._render)(e))),1===r.length&&(r=r[0])),n?(s&&(0,t.removeAllChildNodes)(n),r&&n.id&&n.id===r.id&&n.parentElement?n.parentElement.replaceChild(r,n):Array.isArray(r)?r.forEach((e=>{(0,t.appendChildren)(n,(0,t._render)(e))})):(0,t.appendChildren)(n,(0,t._render)(r)),n):(0,t.isSSR)()&&!Array.isArray(r)?[r]:r},t.hydrate=t.render,t._render=e=>null===e||!1===e||void 0===e?[]:"string"==typeof e||"number"==typeof e?e.toString():e.tagName&&"svg"===e.tagName.toLowerCase()?(e=>{const n=e.children[0],s=n.attributes;if((0,t.isSSR)())return n;const r=o("svg");for(let e=s.length-1;e>=0;e--)r.setAttribute(s[e].name,s[e].value);return r.innerHTML=n.innerHTML,r})({children:[e]}):e.tagName||e&&3===e.nodeType?e:e&&e.component&&e.component.isClass?r(e):e.isClass?r({component:e,props:{}}):e.component&&"function"==typeof e.component?s(e):Array.isArray(e)?e.map((e=>(0,t._render)(e))).flat():"function"!=typeof e||e.isClass?e.component&&e.component.tagName&&"string"==typeof e.component.tagName||Array.isArray(e.component)||e.component?(0,t._render)(e.component):"object"==typeof e?[]:void console.warn("Something unexpected happened with:",e):(0,t._render)(e());const s=e=>{const{component:n,props:s}=e;return(0,t._render)(n(s))},r=e=>{const{component:n,props:s}=e,r=(0,t.strToHash)(n.toString());n.prototype._getHash=()=>r;const o=new n(s);(0,t.isSSR)()||o.willMount();let i=o.render();return i=(0,t._render)(i),o.elements=i,s&&s.ref&&s.ref(o),(0,t.isSSR)()||(0,t.tick)((()=>{o._didMount()})),i},o=e=>document.createElementNS("http://www.w3.org/2000/svg",e);t.h=(e,n={},...s)=>{if(n&&n.children&&(Array.isArray(s)?Array.isArray(n.children)?s=[...n.children,...s]:s.push(n.children):s=Array.isArray(n.children)?n.children:[n.children]),(0,t.isSSR)()&&_nano.ssrTricks.isWebComponent(e)){const r=_nano.ssrTricks.renderWebComponent(e,n,s,t._render);return null===r?`ERROR: "<${e} />"`:r}if("string"!=typeof e)return{component:e,props:Object.assign(Object.assign({},n),{children:s})};try{if((0,t.isSSR)()&&"string"==typeof e&&!document)throw new Error("document is not defined")}catch(e){console.log("ERROR:",e.message,"\n > Please read: https://github.com/nanojsx/nano/issues/106")}let r;const i="svg"===e?o("svg"):document.createElement(e),a=(e,t)=>0===t.indexOf("on")&&(!!e._ssr||"object"==typeof e[t]||"function"==typeof e[t]);for(const e in n){if("style"===e&&"object"==typeof n[e]){const t=Object.keys(n[e]).map((t=>`${t}:${n[e][t]}`)).join(";").replace(/[A-Z]/g,(e=>`-${e.toLowerCase()}`));n[e]=`${t};`}if("ref"===e)r=n[e];else if(a(i,e.toLowerCase()))i.addEventListener(e.toLowerCase().substring(2),(t=>n[e](t)));else if("dangerouslySetInnerHTML"===e&&n[e].__html)if((0,t.isSSR)())i.innerHTML=n[e].__html;else{const t=document.createElement("fragment");t.innerHTML=n[e].__html,i.appendChild(t)}else if("innerHTML"===e&&n[e].__dangerousHtml)if((0,t.isSSR)())i.innerHTML=n[e].__dangerousHtml;else{const t=document.createElement("fragment");t.innerHTML=n[e].__dangerousHtml,i.appendChild(t)}else/^className$/i.test(e)?i.setAttribute("class",n[e]):void 0!==n[e]&&i.setAttribute(e,n[e])}const l=!["noscript","script","style"].includes(e);return(0,t.appendChildren)(i,s,l),r&&r(i),i}},998:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Fragment=void 0,t.Fragment=e=>e.children},743:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.printVersion=t.escapeHtml=t.onNodeRemove=t.detectSSR=t.nodeToString=t.task=void 0;const s=n(122);function r(e,t){return!!e&&(e===t||r(e.parentNode,t))}t.task=e=>setTimeout(e,0),t.nodeToString=e=>{const t=document.createElement("div");return t.appendChild(e.cloneNode(!0)),t.innerHTML},t.detectSSR=()=>{const e="undefined"!=typeof Deno,t="undefined"!=typeof window;return"undefined"!=typeof _nano&&_nano.isSSR||e||!t},t.onNodeRemove=(e,t)=>{let n=new MutationObserver((s=>{s.forEach((s=>{s.removedNodes.forEach((s=>{r(e,s)&&(t(),n&&(n.disconnect(),n=void 0))}))}))}));return n.observe(document,{childList:!0,subtree:!0}),n},t.escapeHtml=e=>e&&"string"==typeof e?e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&apos;"):e,t.printVersion=()=>{const e=`Powered by nano JSX v${s.VERSION}`;console.log(`%c %c %c %c %c ${e} %c http://nanojsx.io`,"background: #ff0000","background: #ffff00","background: #00ff00","background: #00ffff","color: #fff; background: #000000;","background: none")}},614:function(e,t,n){var s=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});const r=s(n(215));t.default=r.default},931:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.build=t.evaluate=t.treeify=void 0;const s=n(333);t.treeify=(e,t)=>{const n=e=>{let s="",r=null;const o=[],i=[];for(let a=1;a<e.length;a++){const l=e[a++],d=e[a]?t[e[a++]-1]:e[++a];3===l?s=d:4===l?(o.push(d),r=null):5===l?(r||(r=Object.create(null),o.push(r)),r[e[++a]]=[d]):6===l?r[e[++a]].push(d):2===l?i.push(n(d)):0===l&&i.push(d)}return{tag:s,props:o,children:i}},{children:s}=n(e);return s.length>1?s:s[0]},t.evaluate=(e,n,s,r)=>{let o;n[0]=0;for(let i=1;i<n.length;i++){const a=n[i++],l=n[i]?(n[0]|=a?1:2,s[n[i++]]):n[++i];3===a?r[0]=l:4===a?r[1]=Object.assign(r[1]||{},l):5===a?(r[1]=r[1]||{})[n[++i]]=l:6===a?r[1][n[++i]]+=`${l}`:a?(o=e.apply(l,(0,t.evaluate)(e,l,s,["",null])),r.push(o),l[0]?n[0]|=2:(n[i-2]=0,n[i]=o)):r.push(l)}return r},t.build=function(e,...t){const n=[e,...t],r=this;let o,i,a=1,l="",d="",c=[0];const h=e=>{1===a&&(e||(l=l.replace(/^\s*\n\s*|\s*\n\s*$/g,"")))?s.MINI?c.push(e?n[e]:l):c.push(0,e,l):3===a&&(e||l)?(s.MINI?c[1]=e?n[e]:l:c.push(3,e,l),a=2):2===a&&"..."===l&&e?s.MINI?c[2]=Object.assign(c[2]||{},n[e]):c.push(4,e,0):2===a&&l&&!e?s.MINI?(c[2]=c[2]||{})[l]=!0:c.push(5,0,!0,l):a>=5&&(s.MINI?5===a?((c[2]=c[2]||{})[i]=e?l?l+n[e]:n[e]:l,a=6):(e||l)&&(c[2][i]+=e?l+n[e]:l):((l||!e&&5===a)&&(c.push(a,0,l,i),a=6),e&&(c.push(a,e,0,i),a=6))),l=""};for(let t=0;t<e.length;t++){t&&(1===a&&h(),h(t));for(let n=0;n<e[t].length;n++)o=e[t][n],1===a?"<"===o?(h(),c=s.MINI?[c,"",null]:[c],a=3):l+=o:4===a?"--"===l&&">"===o?(a=1,l=""):l=o+l[0]:d?o===d?d="":l+=o:'"'===o||"'"===o?d=o:">"===o?(h(),a=1):a&&("="===o?(a=5,i=l,l=""):"/"===o&&(a<5||">"===e[t][n+1])?(h(),3===a&&(c=c[0]),a=c,s.MINI?(c=c[0]).push(r(...a.slice(1))):(c=c[0]).push(2,0,a),a=0):" "===o||"\t"===o||"\n"===o||"\r"===o?(h(),a=2):l+=o),3===a&&"!--"===l&&(a=4,c=c[0])}return h(),s.MINI?c.length>2?c.slice(1):c[1]:c}},333:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.MINI=void 0,t.MINI=!1},215:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0});const s=n(333),r=n(931),o=new Map;t.default=s.MINI?r.build:function(e){let t=o.get(this);return t||(t=new Map,o.set(this,t)),t=(0,r.evaluate)(this,t.get(e)||(t.set(e,t=(0,r.build)(e)),t),arguments,[]),t.length>1?t:t[0]}},325:function(e,t,n){var s=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.jsx=void 0;const r=n(900),o=s(n(614)).default.bind(r.h);t.jsx=o},417:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t._clearState=t._state=void 0,t._state=new Map,t._clearState=()=>{t._state.clear()}},681:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Store=void 0;const s=n(900);t.Store=class{constructor(e,t="",n="memory"){if(this._listeners=new Map,(0,s.isSSR)()&&(n="memory"),this._id=t,this._storage=n,this._state=this._prevState=e,"memory"===n||!n)return;const r="local"===n?localStorage:sessionStorage,o=r.getItem(this._id);o?this._state=this._prevState=JSON.parse(o):r.setItem(this._id,JSON.stringify(e))}persist(e){"memory"!==this._storage&&("local"===this._storage?localStorage:sessionStorage).setItem(this._id,JSON.stringify(e))}clear(){this._state=this._prevState=void 0,"local"===this._storage?localStorage.removeItem(this._id):"session"===this._storage&&sessionStorage.removeItem(this._id)}setState(e){this.state=e}set state(e){this._prevState=this._state,this._state=e,this.persist(e),this._listeners.forEach((e=>{e(this._state,this._prevState)}))}get state(){return this._state}use(){const e=Math.random().toString(36).substring(2,9),t=this;return{get state(){return t.state},setState:e=>{this.state=e},subscribe:t=>{this._listeners.set(e,t)},cancel:()=>{this._listeners.has(e)&&this._listeners.delete(e)}}}}},499:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0})},122:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.VERSION=void 0,t.VERSION="0.0.37"},790:function(e,t,n){var s=this&&this.__rest||function(e,t){var n={};for(var s in e)Object.prototype.hasOwnProperty.call(e,s)&&t.indexOf(s)<0&&(n[s]=e[s]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(s=Object.getOwnPropertySymbols(e);r<s.length;r++)t.indexOf(s[r])<0&&Object.prototype.propertyIsEnumerable.call(e,s[r])&&(n[s[r]]=e[s[r]])}return n};Object.defineProperty(t,"__esModule",{value:!0}),t.withStyles=void 0;const r=n(900),o=n(205),i=n(998),a=n(723);t.withStyles=(...e)=>t=>class extends o.Component{render(){const n=this.props,{children:o}=n,l=s(n,["children"]),d=[];e.forEach((e=>{var t;if("string"==typeof e)d.push((0,r.h)(a.Helmet,null,(0,r.h)("style",null,e)));else if("function"==typeof e){const t=e();"string"==typeof t&&d.push((0,r.h)(a.Helmet,null,(0,r.h)("style",null,t)))}else if("object"==typeof e){const n=null===(t=e.toString)||void 0===t?void 0:t.call(e);"string"==typeof n&&d.push((0,r.h)(a.Helmet,null,(0,r.h)("style",null,n)))}}));const c=o&&o.length>0?(0,r.h)(t,Object.assign({},l),o):(0,r.h)(t,Object.assign({},this.props));return(0,r.h)(i.Fragment,null,...d,c)}}}},t={},n=function n(s){var r=t[s];if(void 0!==r)return r.exports;var o=t[s]={exports:{}};return e[s].call(o.exports,o,o.exports,n),o.exports}(233);nanoJSX=n.default})();
\ No newline at end of file
+var nanoJSX;(()=>{"use strict";var e={233:function(e,t,n){var s=this&&this.__createBinding||(Object.create?function(e,t,n,s){void 0===s&&(s=n);var r=Object.getOwnPropertyDescriptor(t,n);r&&!("get"in r?!t.__esModule:r.writable||r.configurable)||(r={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,s,r)}:function(e,t,n,s){void 0===s&&(s=n),e[s]=t[n]}),r=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),o=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&s(t,e,n);return r(t,e),t};Object.defineProperty(t,"__esModule",{value:!0}),t.VERSION=t.printVersion=void 0;const i=n(900),a=n(743),l=n(205),d=n(998),c=n(681),h=n(403),p=n(790),u=o(n(287)),f=n(325);t.default={Component:l.Component,Fragment:d.Fragment,Router:u,Store:c.Store,createContext:h.createContext,h:i.h,jsx:f.jsx,render:i.render,task:a.task,tick:i.tick,withStyles:p.withStyles};var m=n(743);Object.defineProperty(t,"printVersion",{enumerable:!0,get:function(){return m.printVersion}});var g=n(122);Object.defineProperty(t,"VERSION",{enumerable:!0,get:function(){return g.VERSION}})},205:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Component=void 0;const s=n(743),r=n(900),o=n(417);t.Component=class{constructor(e){this._elements=[],this._skipUnmount=!1,this._hasUnmounted=!1,this.props=e||{},this.id=this._getHash()}static get isClass(){return!0}get isClass(){return!0}setState(e,t=!1){"object"==typeof e&&null!==e&&void 0!==this.state?this.state=Object.assign(Object.assign({},this.state),e):this.state=e,t&&this.update()}set state(e){o._state.set(this.id,e)}get state(){return o._state.get(this.id)}set initState(e){void 0===this.state&&(this.state=e)}get elements(){return this._elements||[]}set elements(e){Array.isArray(e)||(e=[e]),e.forEach((e=>{this._elements.push(e)}))}_addNodeRemoveListener(){/^[^{]+{\s+}$/gm.test(this.didUnmount.toString())||(0,s.onNodeRemove)(this.elements[0],(()=>{this._skipUnmount||this._didUnmount()}))}_didMount(){this._addNodeRemoveListener(),this.didMount()}_willUpdate(){this.willUpdate()}_didUpdate(){this.didUpdate()}_didUnmount(){this._hasUnmounted||(this.didUnmount(),this._hasUnmounted=!0)}willMount(){}didMount(){}willUpdate(){}didUpdate(){}didUnmount(){}render(e){}update(e){this._skipUnmount=!0,this._willUpdate();const t=[...this.elements];this._elements=[];let n=this.render(e);n=(0,r._render)(n),this.elements=n;const s=t[0].parentElement;s||console.warn("Component needs a parent element to get updated!"),this.elements.forEach((e=>{s&&s.insertBefore(e,t[0])})),t.forEach((e=>{this.elements.includes(e)||(e.remove(),e=null)})),this._addNodeRemoveListener(),(0,r.tick)((()=>{this._skipUnmount=!1,this.elements[0].isConnected?this._didUpdate():this._didUnmount()}))}_getHash(){}}},723:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Helmet=void 0;const s=n(205),r=n(900);class o extends Map{toString(){let e="";for(const[t,n]of this)e+=` ${t}="${n}"`;return e.trim()}}class i extends s.Component{static SSR(e){var t,n;const s=/(<helmet\b[^>]*>)((.|\r|\n)*?)(<\/helmet>)/gm,r=[],i=[],a={html:new o,body:new o};if("undefined"!=typeof document&&document.head){let e=[];e=[].slice.call(document.head.children);for(let t=0;t<e.length;t++)-1===r.indexOf(e[t])&&r.push(e[t])}let l;for(;null!==(l=s.exec(e));){const s=l[1];let o=l[2];const d=/<html\s([^>]+)><\/html>/gm,c=/<body\s([^>]+)><\/body>/gm,h=/(\w+)="([^"]+)"/gm;let p=null;null===(t=e.match(d))||void 0===t||t.forEach((e=>{for(o=o.replace(e,"");null!==(p=h.exec(e));)a.html.set(p[1],p[2])})),null===(n=e.match(c))||void 0===n||n.forEach((e=>{for(o=o.replace(e,"");null!==(p=h.exec(e));)a.body.set(p[1],p[2])}));const u=s.includes('data-placement="head"');u&&!r.includes(o)?r.push(o):u||i.includes(o)||i.push(o)}return{body:e.replace(s,""),head:r,footer:i,attributes:a}}didMount(){this.props.children.forEach((e=>{var t,n,s,o;if(!(e instanceof HTMLElement))return;const i=this.props.footer?document.body:document.head,a=e.tagName;let l=[];l.push(e.innerText);for(let s=0;s<e.attributes.length;s++)l.push(null===(t=e.attributes.item(s))||void 0===t?void 0:t.name.toLowerCase()),l.push(null===(n=e.attributes.item(s))||void 0===n?void 0:n.value.toLowerCase());if("HTML"===a||"BODY"===a){const e=document.getElementsByTagName(a)[0];for(let t=1;t<l.length;t+=2)e.setAttribute(l[t],l[t+1]);return}if("TITLE"===a){const t=document.getElementsByTagName("TITLE");if(t.length>0){const n=e;t[0].text=n.text}else{const t=(0,r.h)("title",null,e.innerHTML);(0,r.appendChildren)(i,[t],!1)}return}let d=!1;l=l.sort();const c=document.getElementsByTagName(a);for(let e=0;e<c.length;e++){let t=[];t.push(c[e].innerText);for(let n=0;n<c[e].attributes.length;n++)t.push(null===(s=c[e].attributes.item(n))||void 0===s?void 0:s.name.toLowerCase()),t.push(null===(o=c[e].attributes.item(n))||void 0===o?void 0:o.value.toLowerCase());t=t.sort(),l.length>0&&t.length>0&&JSON.stringify(l)===JSON.stringify(t)&&(d=!0)}d||(0,r.appendChildren)(i,[e],!1)}))}render(){const e=this.props.footer?"footer":"head";return(0,r.isSSR)()?(0,r.h)("helmet",{"data-ssr":!0,"data-placement":e},this.props.children):[]}}t.Helmet=i},287:function(e,t,n){var s=this&&this.__rest||function(e,t){var n={};for(var s in e)Object.prototype.hasOwnProperty.call(e,s)&&t.indexOf(s)<0&&(n[s]=e[s]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(s=Object.getOwnPropertySymbols(e);r<s.length;r++)t.indexOf(s[r])<0&&Object.prototype.propertyIsEnumerable.call(e,s[r])&&(n[s[r]]=e[s[r]])}return n};Object.defineProperty(t,"__esModule",{value:!0}),t.parseParamsFromPath=t.Listener=t.Link=t.to=t.Route=t.Routes=t.Switch=t.matchPath=void 0;const r=n(205),o=n(900),i=[],a=e=>{window.history.pushState({},"",e),i.forEach((e=>e.handleChanges())),window.dispatchEvent(new Event("pushstate"))},l=e=>{window.history.replaceState({},"",e),i.forEach((e=>e.handleChanges())),window.dispatchEvent(new Event("replacestate"))};t.matchPath=(e,t)=>{const{exact:n=!1,regex:s}=t;let r,{path:o}=t;if(!o)return{path:null,url:e,isExact:!0,params:{}};let i={};if(o.includes("/:")){const t=o.split("/"),n=e.split("/");t.forEach(((e,r)=>{if(/^:/.test(e)){const o=e.slice(1),a=n[r];if(s&&s[o]&&!s[o].test(a))return null;i=Object.assign(Object.assign({},i),{[o]:a}),t[r]=n[r]}})),o=t.join("/")}if("*"===o&&(r=[e]),r||(r=new RegExp(`^${o}`).exec(e)),!r)return null;const a=r[0],l=e===a;return n&&!l?null:{path:o,url:a,isExact:l,params:i}};class d extends r.Component{constructor(){super(...arguments),this.index=0,this.path="",this.match={index:-1,path:""}}didMount(){window.addEventListener("popstate",this.handleChanges.bind(this)),i.push(this)}didUnmount(){window.removeEventListener("popstate",this.handleChanges.bind(this)),i.splice(i.indexOf(this),1)}handleChanges(){this.findChild(),this.shouldUpdate()&&this.update()}findChild(){this.match={index:-1,path:""},this.props.children=this.props.children.flat();for(let e=0;e<this.props.children.length;e++){const n=this.props.children[e],{path:s,exact:r,regex:i}=n.props;if((0,t.matchPath)((0,o.isSSR)()?_nano.location.pathname:window.location.pathname,{path:s,exact:r,regex:i}))return this.match.index=e,void(this.match.path=s)}}shouldUpdate(){return this.path!==this.match.path||this.index!==this.match.index}render(){this.findChild();const e=this.props.children[this.match.index];if(-1===this.match.index&&(this.path="",this.index=0),e){const{path:t}=e.props;this.path=t,this.index=this.match.index;const n=(0,o._render)(e);return(0,o.h)("div",{},(0,o._render)(n))}return this.props.fallback?(0,o.h)("div",{},(0,o._render)(this.props.fallback)):(0,o.h)("div",{},"not found")}}t.Switch=d,t.Routes=class extends d{},t.Route=({path:e,regex:n,children:s})=>{const r=(0,o.isSSR)()?_nano.location.pathname:window.location.pathname,i=(0,t.parseParamsFromPath)(e);return s.forEach((t=>{t.props&&(t.props=Object.assign(Object.assign({},t.props),{route:{path:e,regex:n,pathname:r,params:i}}))})),s},t.to=(e,t=!1)=>{t?l(e):a(e)},t.Link=e=>{var{to:t,replace:n,children:r}=e,i=s(e,["to","replace","children"]);return(0,o.h)("a",Object.assign({href:t,onClick:e=>(e.preventDefault(),void(n?l(t):a(t)))},i),r)};class c{constructor(){if(this._listeners=new Map,(0,o.isSSR)())return;this._route=window.location.pathname;const e=()=>{const e=window.location.pathname;this._listeners.forEach((t=>{t(e,this._route)})),this._route=e};window.addEventListener("pushstate",e),window.addEventListener("replacestate",e)}use(){const e=Math.random().toString(36).substring(2);return{subscribe:t=>{this._listeners.set(e,t)},cancel:()=>{this._listeners.has(e)&&this._listeners.delete(e)}}}}let h;t.Listener=()=>(h||(h=new c),h),t.parseParamsFromPath=e=>{let t={};const n=(0,o.isSSR)()?_nano.location.pathname.split("/"):window.location.pathname.split("/");return e.split("/").forEach(((e,s)=>{e.startsWith(":")&&(t=Object.assign(Object.assign({},t),{[e.slice(1)]:n[s]}))})),t}},403:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.useContext=t.createContext=void 0,t.createContext=e=>{let t=e;return{Provider:e=>(e.value&&(t=e.value),e.children),Consumer:e=>({component:e.children[0](t),props:Object.assign(Object.assign({},e),{context:t})}),get:()=>t,set:e=>t=e}},t.useContext=e=>{const t=e;if(t&&"function"==typeof t.get)return t.get()}},900:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.h=t._render=t.hydrate=t.render=t.appendChildren=t.strToHash=t.removeAllChildNodes=t.tick=t.isSSR=void 0,n(499),t.isSSR=()=>"undefined"!=typeof _nano&&!0===_nano.isSSR,t.tick=Promise.prototype.then.bind(Promise.resolve()),t.removeAllChildNodes=e=>{for(;e.firstChild;)e.removeChild(e.firstChild)},t.strToHash=e=>{let t=0;for(let n=0;n<e.length;n++)t=(t<<5)-t+e.charCodeAt(n),t|=0;return Math.abs(t).toString(32)},t.appendChildren=(e,n,s=!0)=>{Array.isArray(n)?("object"==typeof n&&(n=Array.prototype.slice.call(n)),n.forEach((n=>{if(Array.isArray(n))(0,t.appendChildren)(e,n,s);else{const r=(0,t._render)(n);void 0!==r&&(Array.isArray(r)?(0,t.appendChildren)(e,r,s):(0,t.isSSR)()&&!s?e.appendChild(null==r.nodeType?r.toString():r):e.appendChild(null==r.nodeType?document.createTextNode(r.toString()):r))}}))):(0,t.appendChildren)(e,[n],s)},t.render=(e,n=null,s=!0)=>{let r=(0,t._render)(e);return Array.isArray(r)&&(r=r.map((e=>(0,t._render)(e))),1===r.length&&(r=r[0])),n?(s&&(0,t.removeAllChildNodes)(n),r&&n.id&&n.id===r.id&&n.parentElement?n.parentElement.replaceChild(r,n):Array.isArray(r)?r.forEach((e=>{(0,t.appendChildren)(n,(0,t._render)(e))})):(0,t.appendChildren)(n,(0,t._render)(r)),n):(0,t.isSSR)()&&!Array.isArray(r)?[r]:r},t.hydrate=t.render,t._render=e=>null===e||!1===e||void 0===e?[]:"string"==typeof e||"number"==typeof e?e.toString():e.tagName&&"svg"===e.tagName.toLowerCase()?(e=>{const n=e.children[0],s=n.attributes;if((0,t.isSSR)())return n;const r=o("svg");for(let e=s.length-1;e>=0;e--)r.setAttribute(s[e].name,s[e].value);return r.innerHTML=n.innerHTML,r})({children:[e]}):e.tagName||e&&3===e.nodeType?e:e&&e.component&&e.component.isClass?r(e):e.isClass?r({component:e,props:{}}):e.component&&"function"==typeof e.component?s(e):Array.isArray(e)?e.map((e=>(0,t._render)(e))).flat():"function"!=typeof e||e.isClass?e.component&&e.component.tagName&&"string"==typeof e.component.tagName||Array.isArray(e.component)||e.component?(0,t._render)(e.component):"object"==typeof e?[]:void console.warn("Something unexpected happened with:",e):(0,t._render)(e());const s=e=>{const{component:n,props:s}=e;return(0,t._render)(n(s))},r=e=>{const{component:n,props:s}=e,r=(0,t.strToHash)(n.toString());n.prototype._getHash=()=>r;const o=new n(s);(0,t.isSSR)()||o.willMount();let i=o.render();return i=(0,t._render)(i),o.elements=i,s&&s.ref&&s.ref(o),(0,t.isSSR)()||(0,t.tick)((()=>{o._didMount()})),i},o=e=>document.createElementNS("http://www.w3.org/2000/svg",e);t.h=(e,n={},...s)=>{if(n&&n.children&&(Array.isArray(s)?Array.isArray(n.children)?s=[...n.children,...s]:s.push(n.children):s=Array.isArray(n.children)?n.children:[n.children]),(0,t.isSSR)()&&_nano.ssrTricks.isWebComponent(e)){const r=_nano.ssrTricks.renderWebComponent(e,n,s,t._render);return null===r?`ERROR: "<${e} />"`:r}if("string"!=typeof e)return{component:e,props:Object.assign(Object.assign({},n),{children:s})};try{if((0,t.isSSR)()&&"string"==typeof e&&!document)throw new Error("document is not defined")}catch(e){console.log("ERROR:",e.message,"\n > Please read: https://github.com/nanojsx/nano/issues/106")}let r;const i="svg"===e?o("svg"):document.createElement(e),a=(e,t)=>0===t.indexOf("on")&&(!!e._ssr||"object"==typeof e[t]||"function"==typeof e[t]);for(const e in n){if("style"===e&&"object"==typeof n[e]){const t=Object.keys(n[e]).map((t=>`${t}:${n[e][t]}`)).join(";").replace(/[A-Z]/g,(e=>`-${e.toLowerCase()}`));n[e]=`${t};`}if("ref"===e)r=n[e];else if(a(i,e.toLowerCase()))i.addEventListener(e.toLowerCase().substring(2),(t=>n[e](t)));else if("dangerouslySetInnerHTML"===e&&n[e].__html)if((0,t.isSSR)())i.innerHTML=n[e].__html;else{const t=document.createElement("fragment");t.innerHTML=n[e].__html,i.appendChild(t)}else if("innerHTML"===e&&n[e].__dangerousHtml)if((0,t.isSSR)())i.innerHTML=n[e].__dangerousHtml;else{const t=document.createElement("fragment");t.innerHTML=n[e].__dangerousHtml,i.appendChild(t)}else/^className$/i.test(e)?i.setAttribute("class",n[e]):void 0!==n[e]&&i.setAttribute(e,n[e])}const l=!["noscript","script","style"].includes(e);return(0,t.appendChildren)(i,s,l),r&&r(i),i}},998:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Fragment=void 0,t.Fragment=e=>e.children},743:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.printVersion=t.escapeHtml=t.onNodeRemove=t.detectSSR=t.nodeToString=t.task=void 0;const s=n(122);function r(e,t){return!!e&&(e===t||r(e.parentNode,t))}t.task=e=>setTimeout(e,0),t.nodeToString=e=>{const t=document.createElement("div");return t.appendChild(e.cloneNode(!0)),t.innerHTML},t.detectSSR=()=>{const e="undefined"!=typeof Deno,t="undefined"!=typeof window;return"undefined"!=typeof _nano&&_nano.isSSR||e||!t},t.onNodeRemove=(e,t)=>{let n=new MutationObserver((s=>{s.forEach((s=>{s.removedNodes.forEach((s=>{r(e,s)&&(t(),n&&(n.disconnect(),n=void 0))}))}))}));return n.observe(document,{childList:!0,subtree:!0}),n},t.escapeHtml=e=>e&&"string"==typeof e?e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&apos;"):e,t.printVersion=()=>{const e=`Powered by nano JSX v${s.VERSION}`;console.log(`%c %c %c %c %c ${e} %c http://nanojsx.io`,"background: #ff0000","background: #ffff00","background: #00ff00","background: #00ffff","color: #fff; background: #000000;","background: none")}},614:function(e,t,n){var s=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});const r=s(n(215));t.default=r.default},931:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.build=t.evaluate=t.treeify=void 0;const s=n(333);t.treeify=(e,t)=>{const n=e=>{let s="",r=null;const o=[],i=[];for(let a=1;a<e.length;a++){const l=e[a++],d=e[a]?t[e[a++]-1]:e[++a];3===l?s=d:4===l?(o.push(d),r=null):5===l?(r||(r=Object.create(null),o.push(r)),r[e[++a]]=[d]):6===l?r[e[++a]].push(d):2===l?i.push(n(d)):0===l&&i.push(d)}return{tag:s,props:o,children:i}},{children:s}=n(e);return s.length>1?s:s[0]},t.evaluate=(e,n,s,r)=>{let o;n[0]=0;for(let i=1;i<n.length;i++){const a=n[i++],l=n[i]?(n[0]|=a?1:2,s[n[i++]]):n[++i];3===a?r[0]=l:4===a?r[1]=Object.assign(r[1]||{},l):5===a?(r[1]=r[1]||{})[n[++i]]=l:6===a?r[1][n[++i]]+=`${l}`:a?(o=e.apply(l,(0,t.evaluate)(e,l,s,["",null])),r.push(o),l[0]?n[0]|=2:(n[i-2]=0,n[i]=o)):r.push(l)}return r},t.build=function(e,...t){const n=[e,...t],r=this;let o,i,a=1,l="",d="",c=[0];const h=e=>{1===a&&(e||(l=l.replace(/^\s*\n\s*|\s*\n\s*$/g,"")))?s.MINI?c.push(e?n[e]:l):c.push(0,e,l):3===a&&(e||l)?(s.MINI?c[1]=e?n[e]:l:c.push(3,e,l),a=2):2===a&&"..."===l&&e?s.MINI?c[2]=Object.assign(c[2]||{},n[e]):c.push(4,e,0):2===a&&l&&!e?s.MINI?(c[2]=c[2]||{})[l]=!0:c.push(5,0,!0,l):a>=5&&(s.MINI?5===a?((c[2]=c[2]||{})[i]=e?l?l+n[e]:n[e]:l,a=6):(e||l)&&(c[2][i]+=e?l+n[e]:l):((l||!e&&5===a)&&(c.push(a,0,l,i),a=6),e&&(c.push(a,e,0,i),a=6))),l=""};for(let t=0;t<e.length;t++){t&&(1===a&&h(),h(t));for(let n=0;n<e[t].length;n++)o=e[t][n],1===a?"<"===o?(h(),c=s.MINI?[c,"",null]:[c],a=3):l+=o:4===a?"--"===l&&">"===o?(a=1,l=""):l=o+l[0]:d?o===d?d="":l+=o:'"'===o||"'"===o?d=o:">"===o?(h(),a=1):a&&("="===o?(a=5,i=l,l=""):"/"===o&&(a<5||">"===e[t][n+1])?(h(),3===a&&(c=c[0]),a=c,s.MINI?(c=c[0]).push(r(...a.slice(1))):(c=c[0]).push(2,0,a),a=0):" "===o||"\t"===o||"\n"===o||"\r"===o?(h(),a=2):l+=o),3===a&&"!--"===l&&(a=4,c=c[0])}return h(),s.MINI?c.length>2?c.slice(1):c[1]:c}},333:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.MINI=void 0,t.MINI=!1},215:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0});const s=n(333),r=n(931),o=new Map;t.default=s.MINI?r.build:function(e){let t=o.get(this);return t||(t=new Map,o.set(this,t)),t=(0,r.evaluate)(this,t.get(e)||(t.set(e,t=(0,r.build)(e)),t),arguments,[]),t.length>1?t:t[0]}},325:function(e,t,n){var s=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.jsx=void 0;const r=n(900),o=s(n(614)).default.bind(r.h);t.jsx=o},417:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t._clearState=t._state=void 0,t._state=new Map,t._clearState=()=>{t._state.clear()}},681:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Store=void 0;const s=n(900);t.Store=class{constructor(e,t="",n="memory"){if(this._listeners=new Map,(0,s.isSSR)()&&(n="memory"),this._id=t,this._storage=n,this._state=this._prevState=e,"memory"===n||!n)return;const r="local"===n?localStorage:sessionStorage,o=r.getItem(this._id);o?this._state=this._prevState=JSON.parse(o):r.setItem(this._id,JSON.stringify(e))}persist(e){"memory"!==this._storage&&("local"===this._storage?localStorage:sessionStorage).setItem(this._id,JSON.stringify(e))}clear(){this._state=this._prevState=void 0,"local"===this._storage?localStorage.removeItem(this._id):"session"===this._storage&&sessionStorage.removeItem(this._id)}setState(e){this.state=e}set state(e){this._prevState=this._state,this._state=e,this.persist(e),this._listeners.forEach((e=>{e(this._state,this._prevState)}))}get state(){return this._state}use(){const e=Math.random().toString(36).substring(2,9),t=this;return{get state(){return t.state},setState:e=>{this.state=e},subscribe:t=>{this._listeners.set(e,t)},cancel:()=>{this._listeners.has(e)&&this._listeners.delete(e)}}}}},499:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0})},122:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.VERSION=void 0,t.VERSION="0.1.0"},790:function(e,t,n){var s=this&&this.__rest||function(e,t){var n={};for(var s in e)Object.prototype.hasOwnProperty.call(e,s)&&t.indexOf(s)<0&&(n[s]=e[s]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(s=Object.getOwnPropertySymbols(e);r<s.length;r++)t.indexOf(s[r])<0&&Object.prototype.propertyIsEnumerable.call(e,s[r])&&(n[s[r]]=e[s[r]])}return n};Object.defineProperty(t,"__esModule",{value:!0}),t.withStyles=void 0;const r=n(900),o=n(205),i=n(998),a=n(723);t.withStyles=(...e)=>t=>class extends o.Component{render(){const n=this.props,{children:o}=n,l=s(n,["children"]),d=[];e.forEach((e=>{var t;if("string"==typeof e)d.push((0,r.h)(a.Helmet,null,(0,r.h)("style",null,e)));else if("function"==typeof e){const t=e();"string"==typeof t&&d.push((0,r.h)(a.Helmet,null,(0,r.h)("style",null,t)))}else if("object"==typeof e){const n=null===(t=e.toString)||void 0===t?void 0:t.call(e);"string"==typeof n&&d.push((0,r.h)(a.Helmet,null,(0,r.h)("style",null,n)))}}));const c=o&&o.length>0?(0,r.h)(t,Object.assign({},l),o):(0,r.h)(t,Object.assign({},this.props));return(0,r.h)(i.Fragment,null,...d,c)}}}},t={},n=function n(s){var r=t[s];if(void 0!==r)return r.exports;var o=t[s]={exports:{}};return e[s].call(o.exports,o,o.exports,n),o.exports}(233);nanoJSX=n.default})();
\ No newline at end of file
diff --git a/bundles/nano.ui.min.js b/bundles/nano.ui.min.js
index 0956532..222cbee 100644
--- a/bundles/nano.ui.min.js
+++ b/bundles/nano.ui.min.js
@@ -1 +1 @@
-var nanoJSX;(()=>{"use strict";var n={205:(n,t,e)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Component=void 0;const o=e(743),i=e(900),s=e(417);t.Component=class{constructor(n){this._elements=[],this._skipUnmount=!1,this._hasUnmounted=!1,this.props=n||{},this.id=this._getHash()}static get isClass(){return!0}get isClass(){return!0}setState(n,t=!1){"object"==typeof n&&null!==n&&void 0!==this.state?this.state=Object.assign(Object.assign({},this.state),n):this.state=n,t&&this.update()}set state(n){s._state.set(this.id,n)}get state(){return s._state.get(this.id)}set initState(n){void 0===this.state&&(this.state=n)}get elements(){return this._elements||[]}set elements(n){Array.isArray(n)||(n=[n]),n.forEach((n=>{this._elements.push(n)}))}_addNodeRemoveListener(){/^[^{]+{\s+}$/gm.test(this.didUnmount.toString())||(0,o.onNodeRemove)(this.elements[0],(()=>{this._skipUnmount||this._didUnmount()}))}_didMount(){this._addNodeRemoveListener(),this.didMount()}_willUpdate(){this.willUpdate()}_didUpdate(){this.didUpdate()}_didUnmount(){this._hasUnmounted||(this.didUnmount(),this._hasUnmounted=!0)}willMount(){}didMount(){}willUpdate(){}didUpdate(){}didUnmount(){}render(n){}update(n){this._skipUnmount=!0,this._willUpdate();const t=[...this.elements];this._elements=[];let e=this.render(n);e=(0,i._render)(e),this.elements=e;const o=t[0].parentElement;o||console.warn("Component needs a parent element to get updated!"),this.elements.forEach((n=>{o&&o.insertBefore(n,t[0])})),t.forEach((n=>{this.elements.includes(n)||(n.remove(),n=null)})),this._addNodeRemoveListener(),(0,i.tick)((()=>{this._skipUnmount=!1,this.elements[0].isConnected?this._didUpdate():this._didUnmount()}))}_getHash(){}}},900:(n,t,e)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.h=t._render=t.hydrate=t.render=t.appendChildren=t.strToHash=t.removeAllChildNodes=t.tick=t.isSSR=void 0,e(499),t.isSSR=()=>"undefined"!=typeof _nano&&!0===_nano.isSSR,t.tick=Promise.prototype.then.bind(Promise.resolve()),t.removeAllChildNodes=n=>{for(;n.firstChild;)n.removeChild(n.firstChild)},t.strToHash=n=>{let t=0;for(let e=0;e<n.length;e++)t=(t<<5)-t+n.charCodeAt(e),t|=0;return Math.abs(t).toString(32)},t.appendChildren=(n,e,o=!0)=>{Array.isArray(e)?("object"==typeof e&&(e=Array.prototype.slice.call(e)),e.forEach((e=>{if(Array.isArray(e))(0,t.appendChildren)(n,e,o);else{const i=(0,t._render)(e);void 0!==i&&(Array.isArray(i)?(0,t.appendChildren)(n,i,o):(0,t.isSSR)()&&!o?n.appendChild(null==i.nodeType?i.toString():i):n.appendChild(null==i.nodeType?document.createTextNode(i.toString()):i))}}))):(0,t.appendChildren)(n,[e],o)},t.render=(n,e=null,o=!0)=>{let i=(0,t._render)(n);return Array.isArray(i)&&(i=i.map((n=>(0,t._render)(n))),1===i.length&&(i=i[0])),e?(o&&(0,t.removeAllChildNodes)(e),i&&e.id&&e.id===i.id&&e.parentElement?e.parentElement.replaceChild(i,e):Array.isArray(i)?i.forEach((n=>{(0,t.appendChildren)(e,(0,t._render)(n))})):(0,t.appendChildren)(e,(0,t._render)(i)),e):(0,t.isSSR)()&&!Array.isArray(i)?[i]:i},t.hydrate=t.render,t._render=n=>null===n||!1===n||void 0===n?[]:"string"==typeof n||"number"==typeof n?n.toString():n.tagName&&"svg"===n.tagName.toLowerCase()?(n=>{const e=n.children[0],o=e.attributes;if((0,t.isSSR)())return e;const i=s("svg");for(let n=o.length-1;n>=0;n--)i.setAttribute(o[n].name,o[n].value);return i.innerHTML=e.innerHTML,i})({children:[n]}):n.tagName||n&&3===n.nodeType?n:n&&n.component&&n.component.isClass?i(n):n.isClass?i({component:n,props:{}}):n.component&&"function"==typeof n.component?o(n):Array.isArray(n)?n.map((n=>(0,t._render)(n))).flat():"function"!=typeof n||n.isClass?n.component&&n.component.tagName&&"string"==typeof n.component.tagName||Array.isArray(n.component)||n.component?(0,t._render)(n.component):"object"==typeof n?[]:void console.warn("Something unexpected happened with:",n):(0,t._render)(n());const o=n=>{const{component:e,props:o}=n;return(0,t._render)(e(o))},i=n=>{const{component:e,props:o}=n,i=(0,t.strToHash)(e.toString());e.prototype._getHash=()=>i;const s=new e(o);(0,t.isSSR)()||s.willMount();let r=s.render();return r=(0,t._render)(r),s.elements=r,o&&o.ref&&o.ref(s),(0,t.isSSR)()||(0,t.tick)((()=>{s._didMount()})),r},s=n=>document.createElementNS("http://www.w3.org/2000/svg",n);t.h=(n,e={},...o)=>{if(e&&e.children&&(Array.isArray(o)?Array.isArray(e.children)?o=[...e.children,...o]:o.push(e.children):o=Array.isArray(e.children)?e.children:[e.children]),(0,t.isSSR)()&&_nano.ssrTricks.isWebComponent(n)){const i=_nano.ssrTricks.renderWebComponent(n,e,o,t._render);return null===i?`ERROR: "<${n} />"`:i}if("string"!=typeof n)return{component:n,props:Object.assign(Object.assign({},e),{children:o})};try{if((0,t.isSSR)()&&"string"==typeof n&&!document)throw new Error("document is not defined")}catch(n){console.log("ERROR:",n.message,"\n > Please read: https://github.com/nanojsx/nano/issues/106")}let i;const r="svg"===n?s("svg"):document.createElement(n),a=(n,t)=>0===t.indexOf("on")&&(!!n._ssr||"object"==typeof n[t]||"function"==typeof n[t]);for(const n in e){if("style"===n&&"object"==typeof e[n]){const t=Object.keys(e[n]).map((t=>`${t}:${e[n][t]}`)).join(";").replace(/[A-Z]/g,(n=>`-${n.toLowerCase()}`));e[n]=`${t};`}if("ref"===n)i=e[n];else if(a(r,n.toLowerCase()))r.addEventListener(n.toLowerCase().substring(2),(t=>e[n](t)));else if("dangerouslySetInnerHTML"===n&&e[n].__html)if((0,t.isSSR)())r.innerHTML=e[n].__html;else{const t=document.createElement("fragment");t.innerHTML=e[n].__html,r.appendChild(t)}else if("innerHTML"===n&&e[n].__dangerousHtml)if((0,t.isSSR)())r.innerHTML=e[n].__dangerousHtml;else{const t=document.createElement("fragment");t.innerHTML=e[n].__dangerousHtml,r.appendChild(t)}else/^className$/i.test(n)?r.setAttribute("class",e[n]):void 0!==e[n]&&r.setAttribute(n,e[n])}const l=!["noscript","script","style"].includes(n);return(0,t.appendChildren)(r,o,l),i&&i(r),r}},743:(n,t,e)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.printVersion=t.escapeHtml=t.onNodeRemove=t.detectSSR=t.nodeToString=t.task=void 0;const o=e(122);function i(n,t){return!!n&&(n===t||i(n.parentNode,t))}t.task=n=>setTimeout(n,0),t.nodeToString=n=>{const t=document.createElement("div");return t.appendChild(n.cloneNode(!0)),t.innerHTML},t.detectSSR=()=>{const n="undefined"!=typeof Deno,t="undefined"!=typeof window;return"undefined"!=typeof _nano&&_nano.isSSR||n||!t},t.onNodeRemove=(n,t)=>{let e=new MutationObserver((o=>{o.forEach((o=>{o.removedNodes.forEach((o=>{i(n,o)&&(t(),e&&(e.disconnect(),e=void 0))}))}))}));return e.observe(document,{childList:!0,subtree:!0}),e},t.escapeHtml=n=>n&&"string"==typeof n?n.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&apos;"):n,t.printVersion=()=>{const n=`Powered by nano JSX v${o.VERSION}`;console.log(`%c %c %c %c %c ${n} %c http://nanojsx.io`,"background: #ff0000","background: #ffff00","background: #00ff00","background: #00ffff","color: #fff; background: #000000;","background: none")}},417:(n,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t._clearState=t._state=void 0,t._state=new Map,t._clearState=()=>{t._state.clear()}},499:(n,t)=>{Object.defineProperty(t,"__esModule",{value:!0})},690:(n,t,e)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.zIndex=t.rippleEffect=t.userSelect=t.boxShadow=void 0;const o=e(900);t.boxShadow="\n  -webkit-box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12);\n  -moz-box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12);\n  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12);\n",t.userSelect="\n  -webkit-touch-callout:none;\n  -webkit-user-select:none;\n  -khtml-user-select:none;\n  -moz-user-select:none;\n  -ms-user-select:none;\n  user-select:none;\n  -webkit-tap-highlight-color:rgba(0,0,0,0);\n",t.rippleEffect=(n,t)=>{const e=`ripple-${(0,o.strToHash)(n+t)}`;return{styles:`  \n  .${e} {\n    background-position: center;\n    transition: background 0.8s;\n  }\n  \n  .${e}:hover {\n    background: ${t} radial-gradient(circle, transparent 1%, ${t} 1%) center/15000%;\n  }\n\n  .${e}:focus {\n    background: ${t} radial-gradient(circle, transparent 1%, ${t} 1%) center/15000%;\n  }\n  \n  .${e}:active {\n    background-color: ${n};\n    background-size: 100%;\n    transition: background 0s;\n  }`,class:e}},t.zIndex={button:"unset;",banner:"50;",bar:"100;",navigation:"100;",fab:"200;",sheet:"300;",menu:"400;",snackbar:"500;",dialog:"600;"}},437:(n,t,e)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.addStylesToHead=t.lightenColor=void 0;const o=e(900);t.lightenColor=(n,t)=>{const e=parseInt(n.replace("#",""),16),o=Math.round(2.55*t),i=(e>>16)+o,s=(e>>8&255)+o,r=(255&e)+o;return`#${(16777216+65536*(i<255?i<1?0:i:255)+256*(s<255?s<1?0:s:255)+(r<255?r<1?0:r:255)).toString(16).slice(1)}`},t.addStylesToHead=(n,t)=>{if(!document.querySelector(`[data-css-hash*="${t}"]`)){const e=(0,o.h)("style",{"data-css-hash":t},n);document.head.appendChild(e)}}},308:(n,t,e)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.AppBar=void 0;const o=e(205),i=e(900),s=e(690);class r extends o.Component{constructor(){super(...arguments),this.curr_scrollY=0,this.last_scrollY=0,this.curr_scrollingState="none",this.last_scrollingState="none"}calcScrollPosition(){this.curr_scrollY=window.scrollY,this.curr_scrollY>this.last_scrollY?this.curr_scrollingState="down":this.curr_scrollY<this.last_scrollY&&(this.curr_scrollingState="up"),this.last_scrollY=this.curr_scrollY}scroll(){this.calcScrollPosition(),this.curr_scrollY<1?this.container.classList.remove("appBar_scrolling_down"):this.last_scrollingState!==this.curr_scrollingState&&(this.last_scrollingState=this.curr_scrollingState,"down"===this.curr_scrollingState?this.container.classList.add("appBar_scrolling_down"):this.container.classList.remove("appBar_scrolling_down"))}merge(){this.calcScrollPosition(),this.curr_scrollY<=1?this.container.classList.add("appBar_merged"):this.container.classList.remove("appBar_merged")}didMount(){this.curr_scrollY=this.last_scrollY=window.scrollY,this.props.autoHide&&window.addEventListener("scroll",(()=>this.scroll())),this.props.autoMerge&&window.addEventListener("scroll",(()=>this.merge()))}didUnmount(){this.props.autoHide&&window.removeEventListener("scroll",this.scroll),this.props.autoMerge&&window.removeEventListener("scroll",(()=>this.merge()))}render(){const{background:n="#6200EE",color:t="white"}=this.props,e=`\n    .appBar_container {\n      background: ${n};\n      color: ${t};\n      font-weight: 500;\n\n      z-index: ${s.zIndex.bar}\n\n      position: fixed;\n      top: 0;\n      left: 0;\n      min-height: 24px;\n      width: 100vw;\n\n\n      ${s.boxShadow}\n\n      transition: top 0.2s, -webkit-box-shadow 0.5s, -moz-box-shadow 0.5s, box-shadow 0.5s;\n    }\n\n    .appBar_container.appBar_scrolling_down {\n      top: -56px;\n    }\n\n    .appBar_container.appBar_merged {\n      -webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n    }\n\n    .appBar_container .toolbar_container {\n      display: flex;\n      justify-content: space-between;\n    }\n\n    .appBar_container .toolbar_container,\n    .appBar_container .tabs_container {\n      margin: 0 auto;\n      ${this.props.maxWidth?`max-width: ${this.props.maxWidth}px;`:""}\n    }\n\n    .appBar_container .toolbar_container .toolbar_left,\n    .appBar_container .toolbar_container .toolbar_right {\n      display: flex;\n      align-items: center;      \n    }\n\n    .appBar_container .toolbar_container .toolbar_left {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .appBar_container .toolbar_title {\n      font-size: 20px;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    `;document.head.appendChild((0,i.h)("style",{},e));const o=this.props.autoMerge?"appBar_merged":"";return this.container=(0,i.h)("div",{class:`appBar_container ${o}`},this.props.children),this.container}}t.AppBar=r},620:function(n,t,e){var o=this&&this.__rest||function(n,t){var e={};for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&t.indexOf(o)<0&&(e[o]=n[o]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(o=Object.getOwnPropertySymbols(n);i<o.length;i++)t.indexOf(o[i])<0&&Object.prototype.propertyIsEnumerable.call(n,o[i])&&(e[o[i]]=n[o[i]])}return e};Object.defineProperty(t,"__esModule",{value:!0}),t.Button=void 0;const i=e(900),s=e(690),r=e(437),a=e(897);t.Button=n=>{const{children:t,outlined:e=!1,text:l=!1,background:c="#6200ee",color:d="#ffffff",style:p="",class:h="",icon:u}=n,m=o(n,["children","outlined","text","background","color","style","class","icon"]),g=!(e||l),b=g?c:"#ffffff",_=g?d:c,f=g?(0,r.lightenColor)(b,10):(0,r.lightenColor)(b,-10),x=g?(0,r.lightenColor)(b,50):(0,r.lightenColor)(c,50),v=(0,i.strToHash)(e.toString()+l.toString()+b+_+p),y=(0,s.rippleEffect)(x,f),w=`\n    .nano_jsx_button-${v} {\n      color: ${_};\n      background: ${b};\n      border-radius: 4px;\n      display: inline-flex;\n      font-size: 14px;\n      padding: 10px 16px;\n      margin: 0px 0px 1em 0px;\n      text-align: center;\n      cursor: pointer;\n\n      ${s.userSelect}\n      \n\n      z-index: ${s.zIndex.button}\n\n      ${s.boxShadow}\n\n      border: none;\n      text-transform: uppercase;\n      box-shadow: 0 0 4px #999;\n      outline: none;\n    }\n\n    ${y.styles}\n  `;(0,r.addStylesToHead)(w,v);let k="";return(e||l)&&(k+="padding-top: 9px; padding-bottom: 9px; ",k+="-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow none; ",e&&(k+=`border: 1px ${_} solid; `)),k+=p,(0,i.h)("button",Object.assign({class:`nano_jsx_button-${v} ${y.class} ${h}`,style:k},m),u?(0,i.h)(a.Icon,{style:"margin-left: -4px; margin-right: 8px; width: 14px; height: 14px;"},u):null,t)}},485:(n,t,e)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Dialog=void 0;const o=e(900),i=e(690),s=e(620);t.Dialog=class{constructor(n={}){this.options=n,this.defaultParentId="dialog_container",this.defaultActionColor="#6200EE";const t={title:"Dialog Title",body:"Dialog body text.",actions:[{name:"Action 1",color:this.defaultActionColor},{name:"Action 2",color:this.defaultActionColor}],firstFocusAction:!1};this.options=Object.assign(Object.assign({},t),n);const e=`\n    #dialog_container {  \n      background: #00000070;\n      position: fixed;\n      bottom: 0px;\n      left: 0px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-direction: column;\n      width: 100vw;\n      height: 100vh;\n      overflow: hidden;\n      \n      z-index: ${i.zIndex.dialog}\n\n      animation-name: dialog-fadein;\n      animation-duration: 0.2s;\n\n      transition: opacity 0.2s;\n      opacity: 1;\n    }\n\n    #dialog_container.dialog_fadeout {\n      opacity: 0;\n    } \n\n    #dialog_container .dialog {\n      background-color: white;\n      border-radius: 4px;\n      min-width: 240px;\n      max-width: min(500px, 80%);\n\n      margin: 8px;\n\n      ${i.boxShadow}\n    }\n\n    #dialog_container .dialog .dialog_header {\n      color: #000000DE;\n      font-size: 20px;\n      padding: 0px 24px 9px;\n      margin: 24px 0px 6px 0px;\n      line-height: 1;\n    }\n\n    #dialog_container .dialog .dialog_body {\n      color: #00000099;\n      font-size: 16px;  \n      padding: 0px 24px 20px;\n      line-height: 1.5em;\n    }\n\n    #dialog_container .dialog .dialog_actions {\n      \n      margin: 0;\n      padding: 8px;\n      \n      display: flex;\n      flex-direction: row;\n      align-items: flex-end;\n      float: right;\n\n      flex-wrap: wrap;\n      justify-content: flex-end;\n    }\n\n    #dialog_container .dialog .dialog_action {\n      margin-bottom: 0px;\n      margin-left: 10px;\n    }\n\n    /*#dialog_container .dialog .dialog_action:hover {\n      border-radius: 4px;      \n      background: #0000000a;\n    }*/\n\n    @keyframes dialog-fadein {\n      from {opacity: 0;}\n      to {opacity: 1;}\n    }\n    `;document.head.appendChild((0,o.h)("style",{},e)),this.handleKeydown=this.handleKeydown.bind(this)}getParentElement(n){let t=document.getElementById(n||this.defaultParentId);return t||(t=document.createElement("div"),t.id=this.defaultParentId,t.ariaHidden="true",document.body.appendChild(t)),t}handleKeydown(n){if("Escape"!==n.key&&"Esc"!==n.key||this.remove(),"Tab"===n.key){n.preventDefault();const t=Array.from(document.querySelectorAll(".dialog_action"));if(t.length<1)return;const e=t.findIndex((n=>document.activeElement===n));-1===e&&t[0].focus();const o=e+(n.shiftKey?-1:1);if(-1===o)return void t[t.length-1].focus();if(o===t.length)return void t[0].focus();t[o].focus()}}remove(){const n=document.getElementById("dialog_container");n&&(n.classList.add("dialog_fadeout"),setTimeout((()=>{n.remove(),window.removeEventListener("keydown",this.handleKeydown),this.enableScroll()}),200))}disableScroll(){document.body.style.overflow="hidden"}enableScroll(){document.body.style.overflow=""}focusAction(n,t){const e=Array.from(document.querySelectorAll(".dialog_action"))[t.findIndex((t=>t.id===n))];e&&e.focus()}focusFirstAction(){const n=Array.from(document.querySelectorAll(".dialog_action"))[0];n&&n.focus()}show(n,t){n=Object.assign(Object.assign({},this.options),n);const e=this.getParentElement(n.parentId||this.defaultParentId);if(e.hasChildNodes())return;e.addEventListener("click",(n=>{n.target===e&&this.remove()}));const i=((n,e,i)=>{const r=i.map((n=>(0,o.h)(s.Button,{text:!0,color:n.color||this.defaultActionColor,class:"dialog_action",onClick:()=>{t({name:n.name,id:n.id}),this.remove()}},n.name.toUpperCase()))),a=(0,o.h)("h2",{class:"dialog_header",id:"dialog-title"},n),l=(0,o.h)("div",{class:"dialog_body"},e),c=(0,o.h)("div",{class:"dialog_actions"},r);return(0,o.h)("div",{class:"dialog",role:"dialog","aria-modal":"true","aria-labelledby":"dialog-title"},a,l,c)})(n.title,n.body,n.actions||[]);e.appendChild(i);const{firstFocusAction:r}=n;n.actions&&r&&("string"==typeof r?this.focusAction(r,n.actions):this.focusFirstAction()),this.disableScroll(),window.addEventListener("keydown",this.handleKeydown);const a=document.getElementsByClassName("dialog")[0],l=document.getElementsByClassName("dialog_actions")[0];a.clientWidth<=l.clientWidth&&l.setAttribute("style","flex-direction: column;")}}},571:(n,t,e)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Fab=void 0;const o=e(205),i=e(900),s=e(690),r=e(437);class a extends o.Component{render(){const{background:n="#6200EE",color:t="white",extended:e=!1,mini:o=!1,center:a=!1,left:l=!1,onClick:c=(()=>{})}=this.props,d=o?40:e?48:56,p=(0,i.strToHash)(e.toString()+o.toString()+a.toString()+l.toString()),h=`fab-container-${p}`,u=`\n      .${h} {\n        ${o?"width: 40px;":e?"padding: 0px 12px;":"width: 56px;"}\n        height: ${d}px;\n        position: fixed;\n        background: ${n};\n        border-radius: 36px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        color: ${t};\n        cursor: pointer;\n\n        z-index: ${s.zIndex.fab}\n        bottom: ${this.props.offsetY?16+this.props.offsetY:16}px;        \n        ${l?"left: 16px;":"right: 16px;"}\n        ${a?"transform: translateX(50%); right: 50%;":""}\n        ${s.boxShadow}\n        ${s.userSelect}\n      }\n    `;(0,r.addStylesToHead)(u,p);const{children:m}=this.props;return(0,i.h)("div",{class:h,onClick:n=>c(n)},m)}}t.Fab=a},897:function(n,t,e){var o=this&&this.__rest||function(n,t){var e={};for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&t.indexOf(o)<0&&(e[o]=n[o]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(o=Object.getOwnPropertySymbols(n);i<o.length;i++)t.indexOf(o[i])<0&&Object.prototype.propertyIsEnumerable.call(n,o[i])&&(e[o[i]]=n[o[i]])}return e};Object.defineProperty(t,"__esModule",{value:!0}),t.Icon=void 0;const i=e(205),s=e(900),r=e(437);class a extends i.Component{didUnmount(){}render(){const n=this.props,{src:t,size:e=16,active:i=!0,color:a="#6204EE",style:l=""}=n,c=o(n,["src","size","active","color","style"]),d=this.props.children;this.cssHash=(0,s.strToHash)(i+a+e.toString());const p=a,h=`\n    i.icon-${this.cssHash} {\n      width: ${e}px;\n      height: ${e}px;\n      display: inline-block;\n      content: '';\n\n      /*-webkit-mask: url(YOUR_SVG_URL) no-repeat 50% 50%;\n      mask: url(YOUR_SVG_URL) no-repeat 50% 50%;*/\n\n      -webkit-mask-size: cover;\n      mask-size: cover; \n\n      background-color: ${p};\n    }\n\n    i.icon-${this.cssHash}.icon_inactive-${this.cssHash} {\n      background-color: #00000070;\n    }\n    `;(0,r.addStylesToHead)(h,this.cssHash);const u=`-webkit-mask: url(${t||d}) no-repeat 50% 50%; mask: url(${t||d}) no-repeat 50% 50%;`,m=[`icon-${this.cssHash}`];return i||m.push(`icon_inactive-${this.cssHash}`),(0,s.h)("i",Object.assign(Object.assign({class:m.join(" ")},c),{style:u+l}))}}t.Icon=a},203:(n,t,e)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.List=t.ListItem=void 0;const o=e(205),i=e(900),s=e(897),r=e(437);class a extends o.Component{render(){const{props:n}=this,{onClick:t=(()=>{})}=n,e="margin-right: 16px;",o=n.icon?(0,i.h)(s.Icon,{size:20,style:"margin-right: 32px;",src:n.icon}):null,r=n.avatar?(0,i.h)("img",{src:n.avatar,width:40,height:40,style:`border-radius: 20px; ${e}`}):null,a=n.square?(0,i.h)("img",{src:n.square,width:56,height:56,style:e}):null,l=n.image?(0,i.h)("img",{src:n.image,width:100,height:56,style:"margin-left: -16px; margin-right: 16px;"}):null,c=(0,i.h)("span",null,n.children);let d="";return(n.icon||n.avatar)&&(d+="min-height: 56px; "),(n.square||n.image)&&(d+="min-height: 72px; "),(0,i.h)("li",{style:d,onClick:t},o,r,a,l,c)}}t.ListItem=a;class l extends o.Component{render(){const{small:n=!1}=this.props;this.cssHash=(0,i.strToHash)(`List${n.toString()}`);const t=`\n      .list-${this.cssHash} ul {\n        margin: 0px;\n        padding: 8px 16px;\n      }\n\n      .list-${this.cssHash} ul li {\n        list-style: none;\n        min-height: ${n?32:46}px;\n        display: flex;\n        align-items: center;\n        margin: 0px -16px;\n        padding: 0px 16px;\n        cursor: pointer;\n      }\n\n      .list-${this.cssHash} ul li span {\n        font-size: 16px;\n      }\n\n      .list-${this.cssHash} ul li:hover  {\n        background:#00000010\n      }    \n    `;(0,r.addStylesToHead)(t,this.cssHash);const e=(0,i.h)("ul",null,this.props.children);return(0,i.h)("div",{class:`list-${this.cssHash}`},e)}}t.List=l},32:(n,t,e)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Menu=void 0;const o=e(900),i=e(690),s=e(437);t.Menu=class{constructor(){this.defaultParentId="menu_items_container",this.cssHash=Math.random().toString(36).substring(2)}getParentElement(n){document.querySelectorAll(`[id^="${this.defaultParentId}"]`).forEach((n=>{n.remove()}));let t=document.getElementById(`${this.defaultParentId}-${n}`);return t||(t=document.createElement("div"),t.id=`${this.defaultParentId}-${n}`),(0,o.removeAllChildNodes)(t),document.body.appendChild(t),t}close(){(0,o.removeAllChildNodes)(this.getParentElement(this.cssHash))}open(n){const{position:t,list:e}=n,r=t.x<window.innerWidth/2?"left":"right",a=t.y<window.innerHeight/2?"top":"bottom",l=`\n   \n    #menu_items_background-${this.cssHash} {\n      width: 100vw;\n      height: 100vh;\n      background: transparent;\n      position: fixed;\n      top: 0;\n      left: 0;\n      z-index: ${i.zIndex.menu}      \n    }\n   \n    #menu_items_list-${this.cssHash} {\n      position: fixed;\n      background: white;\n      \n      border-radius: 4px;\n      min-width: 112px;\n\n      ${a}: ${t.y>window.innerHeight/2?window.innerHeight-t.y:t.y}px;\n      ${r}: ${t.x>window.innerWidth/2?window.innerWidth-t.x:t.x}px;\n\n      z-index: ${i.zIndex.menu}\n\n      ${i.boxShadow}\n    }\n\n    `,c=document.querySelector(`[data-css-hash*="${this.cssHash}"]`);c&&c.remove(),(0,s.addStylesToHead)(l,this.cssHash);const d=(0,o.h)("div",{id:`menu_items_list-${this.cssHash}`},e),p=(0,o.h)("div",{onClick:()=>this.close(),id:`menu_items_background-${this.cssHash}`},d);d.addEventListener("click",(n=>n.stopPropagation())),this.getParentElement(this.cssHash).appendChild((0,o.render)(p))}}},302:(n,t,e)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Navigation=t.NavigationAction=void 0;const o=e(900),i=e(205),s=e(690),r=e(897),a="bottom_navigation_action_id-",l="bottom_navigation_action_inactive";class c extends i.Component{willMount(){var n;this.id=null!==(n=this.props.id)&&void 0!==n?n:this.props.label.toLowerCase().replace(/\s/gm,"-").replace(/[-]+/gm,"-")}render(){const n=(0,o.h)("span",{class:"bottom_navigation_label"},this.props.label),t=["bottom_navigation_action"];return this.props.active?t.push("bottom_navigation_label_initial_active"):t.push(l),(0,o.h)("div",{id:`${a}${this.id}`,class:t.join(" "),onClick:()=>{var n,t;this.props.link&&(window.location.href=this.props.link),null===(t=(n=this.props).onClick)||void 0===t||t.call(n,{navigate:!!this.props.link,id:this.id,label:this.props.label,component:this})}},this.props.icon?(0,o.h)(r.Icon,{size:22,style:"margin-bottom: 2px;",src:this.props.icon}):null,n)}}t.NavigationAction=c;class d extends i.Component{didMount(){this.props.children.forEach((n=>{n.props.onClick=n=>{var t,e;n.navigate||(document.querySelectorAll(`[id^="${a}"]`).forEach((t=>{t.id===`${a}${n.id}`?t.classList.remove(l):t.classList.add(l)})),null===(e=(t=this.props).onClick)||void 0===e||e.call(t,n))}}))}render(){const n="#00000070",t=`\n      #bottom_navigation_container {\n\n        background-color: white;\n        position: fixed;\n        bottom: 0;\n        left: 0;\n        width: 100vw;\n        min-height: 56px;\n\n        z-index: ${s.zIndex.navigation}\n\n        display: flex;\n        justify-content: center;\n        \n        ${s.boxShadow}\n      } \n\n      #bottom_navigation_container .bottom_navigation_label {\n        transition: font-size 0.2s;\n      }\n\n      #bottom_navigation_container .bottom_navigation_label_initial_active .bottom_navigation_label{\n        animation-name: bottom_navigation_label_fontsize;\n        animation-duration: 0.2s;\n      }\n\n      @keyframes bottom_navigation_label_fontsize {\n        from {font-size: 12px;}\n        to {font-size: 14px;}\n      }\n\n      #bottom_navigation_container .bottom_navigation_action {\n        color: #6204EE;\n        font-size: 14px;\n\n        min-width: 80px;\n        max-width: 168px;\n        flex-grow: 1;\n\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        align-items: center;\n\n        cursor: pointer;\n      }\n\n      #bottom_navigation_container .bottom_navigation_action_inactive{\n        color: ${n};\n        font-size: 12px;\n      }\n\n      #bottom_navigation_container .bottom_navigation_action_inactive i {\n        background-color: ${n}\n      }\n    `;document.head.appendChild((0,o.h)("style",{},t));const{parentId:e,children:i}=this.props,r=(0,o.h)("div",{id:"bottom_navigation_container"},i);if(e){const n=document.getElementById(e);if(n)return void n.appendChild(r)}return r}}t.Navigation=d},878:(n,t,e)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Snackbar=void 0;const o=e(900),i=e(690);t.Snackbar=class{constructor(n={}){this.options=n,this.defaultParentId="snackbar_container",this.defaultActionColor="#BC86FC";const t={message:"Hello Snack!",actions:[{name:"Dismiss",color:this.defaultActionColor}],autoHide:!0,consecutive:!0,offsetY:0};this.options=Object.assign(Object.assign({},t),n);const e=`\n      #snackbar_container {    \n        position: fixed;\n        bottom: ${this.options.offsetY}px;\n        left: 0px;\n        overflow: hidden;\n        z-index: ${i.zIndex.snackbar}\n      }\n\n      #snackbar_container .snackbar_snack {\n        background-color: #323232;\n\n        padding: 16px 16px 16px 16px;\n        margin: 0px 8px 8px 8px;\n\n        border-radius: 4px;\n        width: 344px;\n        max-width: calc(100vw - 16px);\n        box-sizing: border-box;\n        display: flex;\n        justify-content: space-between;\n        height: fit-content;\n        overflow: hidden;\n\n        ${i.boxShadow}\n\n        animation-name: snackbar-fadein;\n        animation-duration: 0.2s;\n\n        transition: opacity 0.2s;\n        opacity: 1;\n      }\n\n      #snackbar_container .snackbar_snack_fadeout {\n        opacity: 0;\n      } \n\n      #snackbar_container .snackbar_snack .snackbar_message {\n        color: #DFDFDF;\n        font-size: 16px;\n        align-self: center;\n      }\n\n      #snackbar_container .snackbar_snack .snackbar_actions {\n        align-self: center;\n      }\n\n      #snackbar_container .snackbar_snack .snackbar_action {\n        font-size: 16px;\n        cursor: pointer;\n        padding: 8px;\n        margin-right: -8px;\n      }\n\n      @keyframes snackbar-fadein {\n        from {opacity: 0;}\n        to {opacity: 1;}\n      }\n    `;document.head.appendChild((0,o.h)("style",{},e))}getParentElement(n){let t=document.getElementById(n||this.defaultParentId);return t||(t=document.createElement("div"),t.id=this.defaultParentId,document.body.appendChild(t)),t}remove(n){n.classList.add("snackbar_snack_fadeout"),setTimeout((()=>n.remove()),200)}show(n,t){if(this.options.consecutive){const e=document.querySelectorAll(".snackbar_snack");return e.forEach((n=>this.remove(n))),void(e.length>0?setTimeout((()=>this._show(n,t)),220):this._show(n,t))}this._show(n,t)}_show(n,t){n=Object.assign(Object.assign({},this.options),n);const e=this.getParentElement(n.parentId||this.defaultParentId);"number"==typeof n.offsetY&&(e.style.bottom=`${n.offsetY}px`);const i=((n,e)=>{const s=e.map((n=>(0,o.h)("a",{class:"snackbar_action",style:`color: ${n.color||this.defaultActionColor}`,onClick:()=>{t&&t({name:n.name,id:n.id}),this.remove(i)}},n.name.toUpperCase()))),r=(0,o.h)("div",{class:"snackbar_message"},n),a=(0,o.h)("div",{class:"snackbar_actions"},s);return(0,o.h)("div",{class:"snackbar_snack"},r,a)})(n.message,n.actions||[]);!0===n.autoHide?setTimeout((()=>this.remove(i)),5e3):"number"==typeof n.autoHide&&setTimeout((()=>this.remove(i)),n.autoHide),e.appendChild(i)}}},865:(n,t,e)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Toolbar=void 0;const o=e(205),i=e(900);class s extends o.Component{static setTitle(n){const t=document.querySelector(".toolbar_title");t&&(t.innerText=n)}render(){document.head.appendChild((0,i.h)("style",{},"\n      .toolbar_container {\n        padding: 16px;\n      }\n\n      .toolbar_container .toolbar_text {\n        font-size: 20px;\n        margin-left: 24px;\n        cursor: pointer;\n      }\n\n      .toolbar_container .toolbar_icon {\n        width: 22px;\n        height: 22px;\n        margin-left: 24px;\n        cursor: pointer;\n\n        display: inline-block;\n        content: '';\n\n        /*-webkit-mask: url(YOUR_SVG_URL) no-repeat 50% 50%;\n        mask: url(YOUR_SVG_URL) no-repeat 50% 50%;*/\n\n        -webkit-mask-size: cover;\n        mask-size: cover; \n\n        background-color: white;\n      }\n\n      .toolbar_navigation_box {\n        padding: 4px;\n        width: 20px;\n        height: 16px;\n        margin-right: 32px;\n        cursor: pointer;\n      }\n\n      .toolbar_hamburger_button,\n      .toolbar_hamburger_button::before,\n      .toolbar_hamburger_button::after {\n        position: absolute;\n        width: 20px;\n        height: 2px;\n        border-radius: 2px;\n        background: white;\n        content: '';\n      }\n      .toolbar_hamburger_button::before {\n        top: 6px;\n      }\n      .toolbar_hamburger_button::after {\n        top: 12px;\n      }\n\n      .toolbar_button_wrapper {\n        width: 24px;\n        height: 24px;\n        padding: 2px;\n        position: relative;\n        top: -2px;\n      }\n\n      .toolbar_back_button,\n      .toolbar_back_button::before,\n      .toolbar_back_button::after {\n        position: relative;\n        top: 7px;\n        width: 20px;\n        height: 2px;\n        border-radius: 2px;\n        background: white;\n        content: '';\n      }\n\n      .toolbar_back_button::before {\n        position: absolute;\n        top: -5px;\n        transform: translate3d(-4px,0,0) rotate(-45deg) scaleX(.7);\n      }\n\n      .toolbar_back_button::after {\n        position: absolute;\n        top: 5px;\n        transform: translate3d(-4px,0,0) rotate(45deg) scaleX(.7);\n      }\n    "));const{back:n=!1,actionClick:t=(()=>{}),menu:e}=this.props,o=e?(0,i.h)("div",{class:"toolbar_button_wrapper",onClick:t},(0,i.h)("div",{class:"toolbar_hamburger_button"})):n?(0,i.h)("div",{class:"toolbar_button_wrapper",onClick:t},(0,i.h)("div",{class:"toolbar_back_button"})):null,s=o?(0,i.h)("div",{class:"toolbar_navigation_box"},o):null,r=this.props.title?(0,i.h)("div",{class:"toolbar_title"},this.props.title):null,a=(0,i.h)("div",{class:"toolbar_left"},s,r),l=(0,i.h)("div",{class:"toolbar_right"},this.props.children);return(0,i.h)("div",{class:"toolbar_container"},a,l)}}t.Toolbar=s},122:(n,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.VERSION=void 0,t.VERSION="0.0.37"}},t={};function e(o){var i=t[o];if(void 0!==i)return i.exports;var s=t[o]={exports:{}};return n[o].call(s.exports,s,s.exports,e),s.exports}var o={};(()=>{var n=o;const t=e(308),i=e(865),s=e(302),r=e(620),a=e(485),l=e(571),c=e(897),d=e(203),p=e(32),h=e(878);n.default={AppBar:t.AppBar,Toolbar:i.Toolbar,Navigation:s.Navigation,NavigationAction:s.NavigationAction,Button:r.Button,Dialog:a.Dialog,Fab:l.Fab,Icon:c.Icon,List:d.List,ListItem:d.ListItem,Menu:p.Menu,Snackbar:h.Snackbar}})(),nanoJSX=o.default})();
\ No newline at end of file
+var nanoJSX;(()=>{"use strict";var n={205:(n,t,e)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Component=void 0;const o=e(743),i=e(900),s=e(417);t.Component=class{constructor(n){this._elements=[],this._skipUnmount=!1,this._hasUnmounted=!1,this.props=n||{},this.id=this._getHash()}static get isClass(){return!0}get isClass(){return!0}setState(n,t=!1){"object"==typeof n&&null!==n&&void 0!==this.state?this.state=Object.assign(Object.assign({},this.state),n):this.state=n,t&&this.update()}set state(n){s._state.set(this.id,n)}get state(){return s._state.get(this.id)}set initState(n){void 0===this.state&&(this.state=n)}get elements(){return this._elements||[]}set elements(n){Array.isArray(n)||(n=[n]),n.forEach((n=>{this._elements.push(n)}))}_addNodeRemoveListener(){/^[^{]+{\s+}$/gm.test(this.didUnmount.toString())||(0,o.onNodeRemove)(this.elements[0],(()=>{this._skipUnmount||this._didUnmount()}))}_didMount(){this._addNodeRemoveListener(),this.didMount()}_willUpdate(){this.willUpdate()}_didUpdate(){this.didUpdate()}_didUnmount(){this._hasUnmounted||(this.didUnmount(),this._hasUnmounted=!0)}willMount(){}didMount(){}willUpdate(){}didUpdate(){}didUnmount(){}render(n){}update(n){this._skipUnmount=!0,this._willUpdate();const t=[...this.elements];this._elements=[];let e=this.render(n);e=(0,i._render)(e),this.elements=e;const o=t[0].parentElement;o||console.warn("Component needs a parent element to get updated!"),this.elements.forEach((n=>{o&&o.insertBefore(n,t[0])})),t.forEach((n=>{this.elements.includes(n)||(n.remove(),n=null)})),this._addNodeRemoveListener(),(0,i.tick)((()=>{this._skipUnmount=!1,this.elements[0].isConnected?this._didUpdate():this._didUnmount()}))}_getHash(){}}},900:(n,t,e)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.h=t._render=t.hydrate=t.render=t.appendChildren=t.strToHash=t.removeAllChildNodes=t.tick=t.isSSR=void 0,e(499),t.isSSR=()=>"undefined"!=typeof _nano&&!0===_nano.isSSR,t.tick=Promise.prototype.then.bind(Promise.resolve()),t.removeAllChildNodes=n=>{for(;n.firstChild;)n.removeChild(n.firstChild)},t.strToHash=n=>{let t=0;for(let e=0;e<n.length;e++)t=(t<<5)-t+n.charCodeAt(e),t|=0;return Math.abs(t).toString(32)},t.appendChildren=(n,e,o=!0)=>{Array.isArray(e)?("object"==typeof e&&(e=Array.prototype.slice.call(e)),e.forEach((e=>{if(Array.isArray(e))(0,t.appendChildren)(n,e,o);else{const i=(0,t._render)(e);void 0!==i&&(Array.isArray(i)?(0,t.appendChildren)(n,i,o):(0,t.isSSR)()&&!o?n.appendChild(null==i.nodeType?i.toString():i):n.appendChild(null==i.nodeType?document.createTextNode(i.toString()):i))}}))):(0,t.appendChildren)(n,[e],o)},t.render=(n,e=null,o=!0)=>{let i=(0,t._render)(n);return Array.isArray(i)&&(i=i.map((n=>(0,t._render)(n))),1===i.length&&(i=i[0])),e?(o&&(0,t.removeAllChildNodes)(e),i&&e.id&&e.id===i.id&&e.parentElement?e.parentElement.replaceChild(i,e):Array.isArray(i)?i.forEach((n=>{(0,t.appendChildren)(e,(0,t._render)(n))})):(0,t.appendChildren)(e,(0,t._render)(i)),e):(0,t.isSSR)()&&!Array.isArray(i)?[i]:i},t.hydrate=t.render,t._render=n=>null===n||!1===n||void 0===n?[]:"string"==typeof n||"number"==typeof n?n.toString():n.tagName&&"svg"===n.tagName.toLowerCase()?(n=>{const e=n.children[0],o=e.attributes;if((0,t.isSSR)())return e;const i=s("svg");for(let n=o.length-1;n>=0;n--)i.setAttribute(o[n].name,o[n].value);return i.innerHTML=e.innerHTML,i})({children:[n]}):n.tagName||n&&3===n.nodeType?n:n&&n.component&&n.component.isClass?i(n):n.isClass?i({component:n,props:{}}):n.component&&"function"==typeof n.component?o(n):Array.isArray(n)?n.map((n=>(0,t._render)(n))).flat():"function"!=typeof n||n.isClass?n.component&&n.component.tagName&&"string"==typeof n.component.tagName||Array.isArray(n.component)||n.component?(0,t._render)(n.component):"object"==typeof n?[]:void console.warn("Something unexpected happened with:",n):(0,t._render)(n());const o=n=>{const{component:e,props:o}=n;return(0,t._render)(e(o))},i=n=>{const{component:e,props:o}=n,i=(0,t.strToHash)(e.toString());e.prototype._getHash=()=>i;const s=new e(o);(0,t.isSSR)()||s.willMount();let r=s.render();return r=(0,t._render)(r),s.elements=r,o&&o.ref&&o.ref(s),(0,t.isSSR)()||(0,t.tick)((()=>{s._didMount()})),r},s=n=>document.createElementNS("http://www.w3.org/2000/svg",n);t.h=(n,e={},...o)=>{if(e&&e.children&&(Array.isArray(o)?Array.isArray(e.children)?o=[...e.children,...o]:o.push(e.children):o=Array.isArray(e.children)?e.children:[e.children]),(0,t.isSSR)()&&_nano.ssrTricks.isWebComponent(n)){const i=_nano.ssrTricks.renderWebComponent(n,e,o,t._render);return null===i?`ERROR: "<${n} />"`:i}if("string"!=typeof n)return{component:n,props:Object.assign(Object.assign({},e),{children:o})};try{if((0,t.isSSR)()&&"string"==typeof n&&!document)throw new Error("document is not defined")}catch(n){console.log("ERROR:",n.message,"\n > Please read: https://github.com/nanojsx/nano/issues/106")}let i;const r="svg"===n?s("svg"):document.createElement(n),a=(n,t)=>0===t.indexOf("on")&&(!!n._ssr||"object"==typeof n[t]||"function"==typeof n[t]);for(const n in e){if("style"===n&&"object"==typeof e[n]){const t=Object.keys(e[n]).map((t=>`${t}:${e[n][t]}`)).join(";").replace(/[A-Z]/g,(n=>`-${n.toLowerCase()}`));e[n]=`${t};`}if("ref"===n)i=e[n];else if(a(r,n.toLowerCase()))r.addEventListener(n.toLowerCase().substring(2),(t=>e[n](t)));else if("dangerouslySetInnerHTML"===n&&e[n].__html)if((0,t.isSSR)())r.innerHTML=e[n].__html;else{const t=document.createElement("fragment");t.innerHTML=e[n].__html,r.appendChild(t)}else if("innerHTML"===n&&e[n].__dangerousHtml)if((0,t.isSSR)())r.innerHTML=e[n].__dangerousHtml;else{const t=document.createElement("fragment");t.innerHTML=e[n].__dangerousHtml,r.appendChild(t)}else/^className$/i.test(n)?r.setAttribute("class",e[n]):void 0!==e[n]&&r.setAttribute(n,e[n])}const l=!["noscript","script","style"].includes(n);return(0,t.appendChildren)(r,o,l),i&&i(r),r}},743:(n,t,e)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.printVersion=t.escapeHtml=t.onNodeRemove=t.detectSSR=t.nodeToString=t.task=void 0;const o=e(122);function i(n,t){return!!n&&(n===t||i(n.parentNode,t))}t.task=n=>setTimeout(n,0),t.nodeToString=n=>{const t=document.createElement("div");return t.appendChild(n.cloneNode(!0)),t.innerHTML},t.detectSSR=()=>{const n="undefined"!=typeof Deno,t="undefined"!=typeof window;return"undefined"!=typeof _nano&&_nano.isSSR||n||!t},t.onNodeRemove=(n,t)=>{let e=new MutationObserver((o=>{o.forEach((o=>{o.removedNodes.forEach((o=>{i(n,o)&&(t(),e&&(e.disconnect(),e=void 0))}))}))}));return e.observe(document,{childList:!0,subtree:!0}),e},t.escapeHtml=n=>n&&"string"==typeof n?n.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&apos;"):n,t.printVersion=()=>{const n=`Powered by nano JSX v${o.VERSION}`;console.log(`%c %c %c %c %c ${n} %c http://nanojsx.io`,"background: #ff0000","background: #ffff00","background: #00ff00","background: #00ffff","color: #fff; background: #000000;","background: none")}},417:(n,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t._clearState=t._state=void 0,t._state=new Map,t._clearState=()=>{t._state.clear()}},499:(n,t)=>{Object.defineProperty(t,"__esModule",{value:!0})},690:(n,t,e)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.zIndex=t.rippleEffect=t.userSelect=t.boxShadow=void 0;const o=e(900);t.boxShadow="\n  -webkit-box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12);\n  -moz-box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12);\n  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12);\n",t.userSelect="\n  -webkit-touch-callout:none;\n  -webkit-user-select:none;\n  -khtml-user-select:none;\n  -moz-user-select:none;\n  -ms-user-select:none;\n  user-select:none;\n  -webkit-tap-highlight-color:rgba(0,0,0,0);\n",t.rippleEffect=(n,t)=>{const e=`ripple-${(0,o.strToHash)(n+t)}`;return{styles:`  \n  .${e} {\n    background-position: center;\n    transition: background 0.8s;\n  }\n  \n  .${e}:hover {\n    background: ${t} radial-gradient(circle, transparent 1%, ${t} 1%) center/15000%;\n  }\n\n  .${e}:focus {\n    background: ${t} radial-gradient(circle, transparent 1%, ${t} 1%) center/15000%;\n  }\n  \n  .${e}:active {\n    background-color: ${n};\n    background-size: 100%;\n    transition: background 0s;\n  }`,class:e}},t.zIndex={button:"unset;",banner:"50;",bar:"100;",navigation:"100;",fab:"200;",sheet:"300;",menu:"400;",snackbar:"500;",dialog:"600;"}},437:(n,t,e)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.addStylesToHead=t.lightenColor=void 0;const o=e(900);t.lightenColor=(n,t)=>{const e=parseInt(n.replace("#",""),16),o=Math.round(2.55*t),i=(e>>16)+o,s=(e>>8&255)+o,r=(255&e)+o;return`#${(16777216+65536*(i<255?i<1?0:i:255)+256*(s<255?s<1?0:s:255)+(r<255?r<1?0:r:255)).toString(16).slice(1)}`},t.addStylesToHead=(n,t)=>{if(!document.querySelector(`[data-css-hash*="${t}"]`)){const e=(0,o.h)("style",{"data-css-hash":t},n);document.head.appendChild(e)}}},308:(n,t,e)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.AppBar=void 0;const o=e(205),i=e(900),s=e(690);class r extends o.Component{constructor(){super(...arguments),this.curr_scrollY=0,this.last_scrollY=0,this.curr_scrollingState="none",this.last_scrollingState="none"}calcScrollPosition(){this.curr_scrollY=window.scrollY,this.curr_scrollY>this.last_scrollY?this.curr_scrollingState="down":this.curr_scrollY<this.last_scrollY&&(this.curr_scrollingState="up"),this.last_scrollY=this.curr_scrollY}scroll(){this.calcScrollPosition(),this.curr_scrollY<1?this.container.classList.remove("appBar_scrolling_down"):this.last_scrollingState!==this.curr_scrollingState&&(this.last_scrollingState=this.curr_scrollingState,"down"===this.curr_scrollingState?this.container.classList.add("appBar_scrolling_down"):this.container.classList.remove("appBar_scrolling_down"))}merge(){this.calcScrollPosition(),this.curr_scrollY<=1?this.container.classList.add("appBar_merged"):this.container.classList.remove("appBar_merged")}didMount(){this.curr_scrollY=this.last_scrollY=window.scrollY,this.props.autoHide&&window.addEventListener("scroll",(()=>this.scroll())),this.props.autoMerge&&window.addEventListener("scroll",(()=>this.merge()))}didUnmount(){this.props.autoHide&&window.removeEventListener("scroll",this.scroll),this.props.autoMerge&&window.removeEventListener("scroll",(()=>this.merge()))}render(){const{background:n="#6200EE",color:t="white"}=this.props,e=`\n    .appBar_container {\n      background: ${n};\n      color: ${t};\n      font-weight: 500;\n\n      z-index: ${s.zIndex.bar}\n\n      position: fixed;\n      top: 0;\n      left: 0;\n      min-height: 24px;\n      width: 100vw;\n\n\n      ${s.boxShadow}\n\n      transition: top 0.2s, -webkit-box-shadow 0.5s, -moz-box-shadow 0.5s, box-shadow 0.5s;\n    }\n\n    .appBar_container.appBar_scrolling_down {\n      top: -56px;\n    }\n\n    .appBar_container.appBar_merged {\n      -webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n    }\n\n    .appBar_container .toolbar_container {\n      display: flex;\n      justify-content: space-between;\n    }\n\n    .appBar_container .toolbar_container,\n    .appBar_container .tabs_container {\n      margin: 0 auto;\n      ${this.props.maxWidth?`max-width: ${this.props.maxWidth}px;`:""}\n    }\n\n    .appBar_container .toolbar_container .toolbar_left,\n    .appBar_container .toolbar_container .toolbar_right {\n      display: flex;\n      align-items: center;      \n    }\n\n    .appBar_container .toolbar_container .toolbar_left {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .appBar_container .toolbar_title {\n      font-size: 20px;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    `;document.head.appendChild((0,i.h)("style",{},e));const o=this.props.autoMerge?"appBar_merged":"";return this.container=(0,i.h)("div",{class:`appBar_container ${o}`},this.props.children),this.container}}t.AppBar=r},620:function(n,t,e){var o=this&&this.__rest||function(n,t){var e={};for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&t.indexOf(o)<0&&(e[o]=n[o]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(o=Object.getOwnPropertySymbols(n);i<o.length;i++)t.indexOf(o[i])<0&&Object.prototype.propertyIsEnumerable.call(n,o[i])&&(e[o[i]]=n[o[i]])}return e};Object.defineProperty(t,"__esModule",{value:!0}),t.Button=void 0;const i=e(900),s=e(690),r=e(437),a=e(897);t.Button=n=>{const{children:t,outlined:e=!1,text:l=!1,background:c="#6200ee",color:d="#ffffff",style:p="",class:h="",icon:u}=n,m=o(n,["children","outlined","text","background","color","style","class","icon"]),g=!(e||l),b=g?c:"#ffffff",_=g?d:c,f=g?(0,r.lightenColor)(b,10):(0,r.lightenColor)(b,-10),x=g?(0,r.lightenColor)(b,50):(0,r.lightenColor)(c,50),v=(0,i.strToHash)(e.toString()+l.toString()+b+_+p),y=(0,s.rippleEffect)(x,f),w=`\n    .nano_jsx_button-${v} {\n      color: ${_};\n      background: ${b};\n      border-radius: 4px;\n      display: inline-flex;\n      font-size: 14px;\n      padding: 10px 16px;\n      margin: 0px 0px 1em 0px;\n      text-align: center;\n      cursor: pointer;\n\n      ${s.userSelect}\n      \n\n      z-index: ${s.zIndex.button}\n\n      ${s.boxShadow}\n\n      border: none;\n      text-transform: uppercase;\n      box-shadow: 0 0 4px #999;\n      outline: none;\n    }\n\n    ${y.styles}\n  `;(0,r.addStylesToHead)(w,v);let k="";return(e||l)&&(k+="padding-top: 9px; padding-bottom: 9px; ",k+="-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow none; ",e&&(k+=`border: 1px ${_} solid; `)),k+=p,(0,i.h)("button",Object.assign({class:`nano_jsx_button-${v} ${y.class} ${h}`,style:k},m),u?(0,i.h)(a.Icon,{style:"margin-left: -4px; margin-right: 8px; width: 14px; height: 14px;"},u):null,t)}},485:(n,t,e)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Dialog=void 0;const o=e(900),i=e(690),s=e(620);t.Dialog=class{constructor(n={}){this.options=n,this.defaultParentId="dialog_container",this.defaultActionColor="#6200EE";const t={title:"Dialog Title",body:"Dialog body text.",actions:[{name:"Action 1",color:this.defaultActionColor},{name:"Action 2",color:this.defaultActionColor}],firstFocusAction:!1};this.options=Object.assign(Object.assign({},t),n);const e=`\n    #dialog_container {  \n      background: #00000070;\n      position: fixed;\n      bottom: 0px;\n      left: 0px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-direction: column;\n      width: 100vw;\n      height: 100vh;\n      overflow: hidden;\n      \n      z-index: ${i.zIndex.dialog}\n\n      animation-name: dialog-fadein;\n      animation-duration: 0.2s;\n\n      transition: opacity 0.2s;\n      opacity: 1;\n    }\n\n    #dialog_container.dialog_fadeout {\n      opacity: 0;\n    } \n\n    #dialog_container .dialog {\n      background-color: white;\n      border-radius: 4px;\n      min-width: 240px;\n      max-width: min(500px, 80%);\n\n      margin: 8px;\n\n      ${i.boxShadow}\n    }\n\n    #dialog_container .dialog .dialog_header {\n      color: #000000DE;\n      font-size: 20px;\n      padding: 0px 24px 9px;\n      margin: 24px 0px 6px 0px;\n      line-height: 1;\n    }\n\n    #dialog_container .dialog .dialog_body {\n      color: #00000099;\n      font-size: 16px;  \n      padding: 0px 24px 20px;\n      line-height: 1.5em;\n    }\n\n    #dialog_container .dialog .dialog_actions {\n      \n      margin: 0;\n      padding: 8px;\n      \n      display: flex;\n      flex-direction: row;\n      align-items: flex-end;\n      float: right;\n\n      flex-wrap: wrap;\n      justify-content: flex-end;\n    }\n\n    #dialog_container .dialog .dialog_action {\n      margin-bottom: 0px;\n      margin-left: 10px;\n    }\n\n    /*#dialog_container .dialog .dialog_action:hover {\n      border-radius: 4px;      \n      background: #0000000a;\n    }*/\n\n    @keyframes dialog-fadein {\n      from {opacity: 0;}\n      to {opacity: 1;}\n    }\n    `;document.head.appendChild((0,o.h)("style",{},e)),this.handleKeydown=this.handleKeydown.bind(this)}getParentElement(n){let t=document.getElementById(n||this.defaultParentId);return t||(t=document.createElement("div"),t.id=this.defaultParentId,t.ariaHidden="true",document.body.appendChild(t)),t}handleKeydown(n){if("Escape"!==n.key&&"Esc"!==n.key||this.remove(),"Tab"===n.key){n.preventDefault();const t=Array.from(document.querySelectorAll(".dialog_action"));if(t.length<1)return;const e=t.findIndex((n=>document.activeElement===n));-1===e&&t[0].focus();const o=e+(n.shiftKey?-1:1);if(-1===o)return void t[t.length-1].focus();if(o===t.length)return void t[0].focus();t[o].focus()}}remove(){const n=document.getElementById("dialog_container");n&&(n.classList.add("dialog_fadeout"),setTimeout((()=>{n.remove(),window.removeEventListener("keydown",this.handleKeydown),this.enableScroll()}),200))}disableScroll(){document.body.style.overflow="hidden"}enableScroll(){document.body.style.overflow=""}focusAction(n,t){const e=Array.from(document.querySelectorAll(".dialog_action"))[t.findIndex((t=>t.id===n))];e&&e.focus()}focusFirstAction(){const n=Array.from(document.querySelectorAll(".dialog_action"))[0];n&&n.focus()}show(n,t){n=Object.assign(Object.assign({},this.options),n);const e=this.getParentElement(n.parentId||this.defaultParentId);if(e.hasChildNodes())return;e.addEventListener("click",(n=>{n.target===e&&this.remove()}));const i=((n,e,i)=>{const r=i.map((n=>(0,o.h)(s.Button,{text:!0,color:n.color||this.defaultActionColor,class:"dialog_action",onClick:()=>{t({name:n.name,id:n.id}),this.remove()}},n.name.toUpperCase()))),a=(0,o.h)("h2",{class:"dialog_header",id:"dialog-title"},n),l=(0,o.h)("div",{class:"dialog_body"},e),c=(0,o.h)("div",{class:"dialog_actions"},r);return(0,o.h)("div",{class:"dialog",role:"dialog","aria-modal":"true","aria-labelledby":"dialog-title"},a,l,c)})(n.title,n.body,n.actions||[]);e.appendChild(i);const{firstFocusAction:r}=n;n.actions&&r&&("string"==typeof r?this.focusAction(r,n.actions):this.focusFirstAction()),this.disableScroll(),window.addEventListener("keydown",this.handleKeydown);const a=document.getElementsByClassName("dialog")[0],l=document.getElementsByClassName("dialog_actions")[0];a.clientWidth<=l.clientWidth&&l.setAttribute("style","flex-direction: column;")}}},571:(n,t,e)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Fab=void 0;const o=e(205),i=e(900),s=e(690),r=e(437);class a extends o.Component{render(){const{background:n="#6200EE",color:t="white",extended:e=!1,mini:o=!1,center:a=!1,left:l=!1,onClick:c=(()=>{})}=this.props,d=o?40:e?48:56,p=(0,i.strToHash)(e.toString()+o.toString()+a.toString()+l.toString()),h=`fab-container-${p}`,u=`\n      .${h} {\n        ${o?"width: 40px;":e?"padding: 0px 12px;":"width: 56px;"}\n        height: ${d}px;\n        position: fixed;\n        background: ${n};\n        border-radius: 36px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        color: ${t};\n        cursor: pointer;\n\n        z-index: ${s.zIndex.fab}\n        bottom: ${this.props.offsetY?16+this.props.offsetY:16}px;        \n        ${l?"left: 16px;":"right: 16px;"}\n        ${a?"transform: translateX(50%); right: 50%;":""}\n        ${s.boxShadow}\n        ${s.userSelect}\n      }\n    `;(0,r.addStylesToHead)(u,p);const{children:m}=this.props;return(0,i.h)("div",{class:h,onClick:n=>c(n)},m)}}t.Fab=a},897:function(n,t,e){var o=this&&this.__rest||function(n,t){var e={};for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&t.indexOf(o)<0&&(e[o]=n[o]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(o=Object.getOwnPropertySymbols(n);i<o.length;i++)t.indexOf(o[i])<0&&Object.prototype.propertyIsEnumerable.call(n,o[i])&&(e[o[i]]=n[o[i]])}return e};Object.defineProperty(t,"__esModule",{value:!0}),t.Icon=void 0;const i=e(205),s=e(900),r=e(437);class a extends i.Component{didUnmount(){}render(){const n=this.props,{src:t,size:e=16,active:i=!0,color:a="#6204EE",style:l=""}=n,c=o(n,["src","size","active","color","style"]),d=this.props.children;this.cssHash=(0,s.strToHash)(i+a+e.toString());const p=a,h=`\n    i.icon-${this.cssHash} {\n      width: ${e}px;\n      height: ${e}px;\n      display: inline-block;\n      content: '';\n\n      /*-webkit-mask: url(YOUR_SVG_URL) no-repeat 50% 50%;\n      mask: url(YOUR_SVG_URL) no-repeat 50% 50%;*/\n\n      -webkit-mask-size: cover;\n      mask-size: cover; \n\n      background-color: ${p};\n    }\n\n    i.icon-${this.cssHash}.icon_inactive-${this.cssHash} {\n      background-color: #00000070;\n    }\n    `;(0,r.addStylesToHead)(h,this.cssHash);const u=`-webkit-mask: url(${t||d}) no-repeat 50% 50%; mask: url(${t||d}) no-repeat 50% 50%;`,m=[`icon-${this.cssHash}`];return i||m.push(`icon_inactive-${this.cssHash}`),(0,s.h)("i",Object.assign(Object.assign({class:m.join(" ")},c),{style:u+l}))}}t.Icon=a},203:(n,t,e)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.List=t.ListItem=void 0;const o=e(205),i=e(900),s=e(897),r=e(437);class a extends o.Component{render(){const{props:n}=this,{onClick:t=(()=>{})}=n,e="margin-right: 16px;",o=n.icon?(0,i.h)(s.Icon,{size:20,style:"margin-right: 32px;",src:n.icon}):null,r=n.avatar?(0,i.h)("img",{src:n.avatar,width:40,height:40,style:`border-radius: 20px; ${e}`}):null,a=n.square?(0,i.h)("img",{src:n.square,width:56,height:56,style:e}):null,l=n.image?(0,i.h)("img",{src:n.image,width:100,height:56,style:"margin-left: -16px; margin-right: 16px;"}):null,c=(0,i.h)("span",null,n.children);let d="";return(n.icon||n.avatar)&&(d+="min-height: 56px; "),(n.square||n.image)&&(d+="min-height: 72px; "),(0,i.h)("li",{style:d,onClick:t},o,r,a,l,c)}}t.ListItem=a;class l extends o.Component{render(){const{small:n=!1}=this.props;this.cssHash=(0,i.strToHash)(`List${n.toString()}`);const t=`\n      .list-${this.cssHash} ul {\n        margin: 0px;\n        padding: 8px 16px;\n      }\n\n      .list-${this.cssHash} ul li {\n        list-style: none;\n        min-height: ${n?32:46}px;\n        display: flex;\n        align-items: center;\n        margin: 0px -16px;\n        padding: 0px 16px;\n        cursor: pointer;\n      }\n\n      .list-${this.cssHash} ul li span {\n        font-size: 16px;\n      }\n\n      .list-${this.cssHash} ul li:hover  {\n        background:#00000010\n      }    \n    `;(0,r.addStylesToHead)(t,this.cssHash);const e=(0,i.h)("ul",null,this.props.children);return(0,i.h)("div",{class:`list-${this.cssHash}`},e)}}t.List=l},32:(n,t,e)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Menu=void 0;const o=e(900),i=e(690),s=e(437);t.Menu=class{constructor(){this.defaultParentId="menu_items_container",this.cssHash=Math.random().toString(36).substring(2)}getParentElement(n){document.querySelectorAll(`[id^="${this.defaultParentId}"]`).forEach((n=>{n.remove()}));let t=document.getElementById(`${this.defaultParentId}-${n}`);return t||(t=document.createElement("div"),t.id=`${this.defaultParentId}-${n}`),(0,o.removeAllChildNodes)(t),document.body.appendChild(t),t}close(){(0,o.removeAllChildNodes)(this.getParentElement(this.cssHash))}open(n){const{position:t,list:e}=n,r=t.x<window.innerWidth/2?"left":"right",a=t.y<window.innerHeight/2?"top":"bottom",l=`\n   \n    #menu_items_background-${this.cssHash} {\n      width: 100vw;\n      height: 100vh;\n      background: transparent;\n      position: fixed;\n      top: 0;\n      left: 0;\n      z-index: ${i.zIndex.menu}      \n    }\n   \n    #menu_items_list-${this.cssHash} {\n      position: fixed;\n      background: white;\n      \n      border-radius: 4px;\n      min-width: 112px;\n\n      ${a}: ${t.y>window.innerHeight/2?window.innerHeight-t.y:t.y}px;\n      ${r}: ${t.x>window.innerWidth/2?window.innerWidth-t.x:t.x}px;\n\n      z-index: ${i.zIndex.menu}\n\n      ${i.boxShadow}\n    }\n\n    `,c=document.querySelector(`[data-css-hash*="${this.cssHash}"]`);c&&c.remove(),(0,s.addStylesToHead)(l,this.cssHash);const d=(0,o.h)("div",{id:`menu_items_list-${this.cssHash}`},e),p=(0,o.h)("div",{onClick:()=>this.close(),id:`menu_items_background-${this.cssHash}`},d);d.addEventListener("click",(n=>n.stopPropagation())),this.getParentElement(this.cssHash).appendChild((0,o.render)(p))}}},302:(n,t,e)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Navigation=t.NavigationAction=void 0;const o=e(900),i=e(205),s=e(690),r=e(897),a="bottom_navigation_action_id-",l="bottom_navigation_action_inactive";class c extends i.Component{willMount(){var n;this.id=null!==(n=this.props.id)&&void 0!==n?n:this.props.label.toLowerCase().replace(/\s/gm,"-").replace(/[-]+/gm,"-")}render(){const n=(0,o.h)("span",{class:"bottom_navigation_label"},this.props.label),t=["bottom_navigation_action"];return this.props.active?t.push("bottom_navigation_label_initial_active"):t.push(l),(0,o.h)("div",{id:`${a}${this.id}`,class:t.join(" "),onClick:()=>{var n,t;this.props.link&&(window.location.href=this.props.link),null===(t=(n=this.props).onClick)||void 0===t||t.call(n,{navigate:!!this.props.link,id:this.id,label:this.props.label,component:this})}},this.props.icon?(0,o.h)(r.Icon,{size:22,style:"margin-bottom: 2px;",src:this.props.icon}):null,n)}}t.NavigationAction=c;class d extends i.Component{didMount(){this.props.children.forEach((n=>{n.props.onClick=n=>{var t,e;n.navigate||(document.querySelectorAll(`[id^="${a}"]`).forEach((t=>{t.id===`${a}${n.id}`?t.classList.remove(l):t.classList.add(l)})),null===(e=(t=this.props).onClick)||void 0===e||e.call(t,n))}}))}render(){const n="#00000070",t=`\n      #bottom_navigation_container {\n\n        background-color: white;\n        position: fixed;\n        bottom: 0;\n        left: 0;\n        width: 100vw;\n        min-height: 56px;\n\n        z-index: ${s.zIndex.navigation}\n\n        display: flex;\n        justify-content: center;\n        \n        ${s.boxShadow}\n      } \n\n      #bottom_navigation_container .bottom_navigation_label {\n        transition: font-size 0.2s;\n      }\n\n      #bottom_navigation_container .bottom_navigation_label_initial_active .bottom_navigation_label{\n        animation-name: bottom_navigation_label_fontsize;\n        animation-duration: 0.2s;\n      }\n\n      @keyframes bottom_navigation_label_fontsize {\n        from {font-size: 12px;}\n        to {font-size: 14px;}\n      }\n\n      #bottom_navigation_container .bottom_navigation_action {\n        color: #6204EE;\n        font-size: 14px;\n\n        min-width: 80px;\n        max-width: 168px;\n        flex-grow: 1;\n\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        align-items: center;\n\n        cursor: pointer;\n      }\n\n      #bottom_navigation_container .bottom_navigation_action_inactive{\n        color: ${n};\n        font-size: 12px;\n      }\n\n      #bottom_navigation_container .bottom_navigation_action_inactive i {\n        background-color: ${n}\n      }\n    `;document.head.appendChild((0,o.h)("style",{},t));const{parentId:e,children:i}=this.props,r=(0,o.h)("div",{id:"bottom_navigation_container"},i);if(e){const n=document.getElementById(e);if(n)return void n.appendChild(r)}return r}}t.Navigation=d},878:(n,t,e)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Snackbar=void 0;const o=e(900),i=e(690);t.Snackbar=class{constructor(n={}){this.options=n,this.defaultParentId="snackbar_container",this.defaultActionColor="#BC86FC";const t={message:"Hello Snack!",actions:[{name:"Dismiss",color:this.defaultActionColor}],autoHide:!0,consecutive:!0,offsetY:0};this.options=Object.assign(Object.assign({},t),n);const e=`\n      #snackbar_container {    \n        position: fixed;\n        bottom: ${this.options.offsetY}px;\n        left: 0px;\n        overflow: hidden;\n        z-index: ${i.zIndex.snackbar}\n      }\n\n      #snackbar_container .snackbar_snack {\n        background-color: #323232;\n\n        padding: 16px 16px 16px 16px;\n        margin: 0px 8px 8px 8px;\n\n        border-radius: 4px;\n        width: 344px;\n        max-width: calc(100vw - 16px);\n        box-sizing: border-box;\n        display: flex;\n        justify-content: space-between;\n        height: fit-content;\n        overflow: hidden;\n\n        ${i.boxShadow}\n\n        animation-name: snackbar-fadein;\n        animation-duration: 0.2s;\n\n        transition: opacity 0.2s;\n        opacity: 1;\n      }\n\n      #snackbar_container .snackbar_snack_fadeout {\n        opacity: 0;\n      } \n\n      #snackbar_container .snackbar_snack .snackbar_message {\n        color: #DFDFDF;\n        font-size: 16px;\n        align-self: center;\n      }\n\n      #snackbar_container .snackbar_snack .snackbar_actions {\n        align-self: center;\n      }\n\n      #snackbar_container .snackbar_snack .snackbar_action {\n        font-size: 16px;\n        cursor: pointer;\n        padding: 8px;\n        margin-right: -8px;\n      }\n\n      @keyframes snackbar-fadein {\n        from {opacity: 0;}\n        to {opacity: 1;}\n      }\n    `;document.head.appendChild((0,o.h)("style",{},e))}getParentElement(n){let t=document.getElementById(n||this.defaultParentId);return t||(t=document.createElement("div"),t.id=this.defaultParentId,document.body.appendChild(t)),t}remove(n){n.classList.add("snackbar_snack_fadeout"),setTimeout((()=>n.remove()),200)}show(n,t){if(this.options.consecutive){const e=document.querySelectorAll(".snackbar_snack");return e.forEach((n=>this.remove(n))),void(e.length>0?setTimeout((()=>this._show(n,t)),220):this._show(n,t))}this._show(n,t)}_show(n,t){n=Object.assign(Object.assign({},this.options),n);const e=this.getParentElement(n.parentId||this.defaultParentId);"number"==typeof n.offsetY&&(e.style.bottom=`${n.offsetY}px`);const i=((n,e)=>{const s=e.map((n=>(0,o.h)("a",{class:"snackbar_action",style:`color: ${n.color||this.defaultActionColor}`,onClick:()=>{t&&t({name:n.name,id:n.id}),this.remove(i)}},n.name.toUpperCase()))),r=(0,o.h)("div",{class:"snackbar_message"},n),a=(0,o.h)("div",{class:"snackbar_actions"},s);return(0,o.h)("div",{class:"snackbar_snack"},r,a)})(n.message,n.actions||[]);!0===n.autoHide?setTimeout((()=>this.remove(i)),5e3):"number"==typeof n.autoHide&&setTimeout((()=>this.remove(i)),n.autoHide),e.appendChild(i)}}},865:(n,t,e)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Toolbar=void 0;const o=e(205),i=e(900);class s extends o.Component{static setTitle(n){const t=document.querySelector(".toolbar_title");t&&(t.innerText=n)}render(){document.head.appendChild((0,i.h)("style",{},"\n      .toolbar_container {\n        padding: 16px;\n      }\n\n      .toolbar_container .toolbar_text {\n        font-size: 20px;\n        margin-left: 24px;\n        cursor: pointer;\n      }\n\n      .toolbar_container .toolbar_icon {\n        width: 22px;\n        height: 22px;\n        margin-left: 24px;\n        cursor: pointer;\n\n        display: inline-block;\n        content: '';\n\n        /*-webkit-mask: url(YOUR_SVG_URL) no-repeat 50% 50%;\n        mask: url(YOUR_SVG_URL) no-repeat 50% 50%;*/\n\n        -webkit-mask-size: cover;\n        mask-size: cover; \n\n        background-color: white;\n      }\n\n      .toolbar_navigation_box {\n        padding: 4px;\n        width: 20px;\n        height: 16px;\n        margin-right: 32px;\n        cursor: pointer;\n      }\n\n      .toolbar_hamburger_button,\n      .toolbar_hamburger_button::before,\n      .toolbar_hamburger_button::after {\n        position: absolute;\n        width: 20px;\n        height: 2px;\n        border-radius: 2px;\n        background: white;\n        content: '';\n      }\n      .toolbar_hamburger_button::before {\n        top: 6px;\n      }\n      .toolbar_hamburger_button::after {\n        top: 12px;\n      }\n\n      .toolbar_button_wrapper {\n        width: 24px;\n        height: 24px;\n        padding: 2px;\n        position: relative;\n        top: -2px;\n      }\n\n      .toolbar_back_button,\n      .toolbar_back_button::before,\n      .toolbar_back_button::after {\n        position: relative;\n        top: 7px;\n        width: 20px;\n        height: 2px;\n        border-radius: 2px;\n        background: white;\n        content: '';\n      }\n\n      .toolbar_back_button::before {\n        position: absolute;\n        top: -5px;\n        transform: translate3d(-4px,0,0) rotate(-45deg) scaleX(.7);\n      }\n\n      .toolbar_back_button::after {\n        position: absolute;\n        top: 5px;\n        transform: translate3d(-4px,0,0) rotate(45deg) scaleX(.7);\n      }\n    "));const{back:n=!1,actionClick:t=(()=>{}),menu:e}=this.props,o=e?(0,i.h)("div",{class:"toolbar_button_wrapper",onClick:t},(0,i.h)("div",{class:"toolbar_hamburger_button"})):n?(0,i.h)("div",{class:"toolbar_button_wrapper",onClick:t},(0,i.h)("div",{class:"toolbar_back_button"})):null,s=o?(0,i.h)("div",{class:"toolbar_navigation_box"},o):null,r=this.props.title?(0,i.h)("div",{class:"toolbar_title"},this.props.title):null,a=(0,i.h)("div",{class:"toolbar_left"},s,r),l=(0,i.h)("div",{class:"toolbar_right"},this.props.children);return(0,i.h)("div",{class:"toolbar_container"},a,l)}}t.Toolbar=s},122:(n,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.VERSION=void 0,t.VERSION="0.1.0"}},t={};function e(o){var i=t[o];if(void 0!==i)return i.exports;var s=t[o]={exports:{}};return n[o].call(s.exports,s,s.exports,e),s.exports}var o={};(()=>{var n=o;const t=e(308),i=e(865),s=e(302),r=e(620),a=e(485),l=e(571),c=e(897),d=e(203),p=e(32),h=e(878);n.default={AppBar:t.AppBar,Toolbar:i.Toolbar,Navigation:s.Navigation,NavigationAction:s.NavigationAction,Button:r.Button,Dialog:a.Dialog,Fab:l.Fab,Icon:c.Icon,List:d.List,ListItem:d.ListItem,Menu:p.Menu,Snackbar:h.Snackbar}})(),nanoJSX=o.default})();
\ No newline at end of file
diff --git a/deno.lock b/deno.lock
new file mode 100644
index 0000000..a2b324a
--- /dev/null
+++ b/deno.lock
@@ -0,0 +1,15 @@
+{
+  "version": "2",
+  "remote": {
+    "https://cdn.skypack.dev/-/@twind/typography@v0.0.2-WONWjzcQy8JEZ5dPCwoI/dist=es2019,mode=imports/optimized/@twind/typography.js": "865040d2ed01c37044afd78fe1570d06880e8c07ad5181c6f1a6e2b677157e0a",
+    "https://cdn.skypack.dev/-/style-vendorizer@v2.0.0-M3RNjjqClSTio1f91tNw/dist=es2019,mode=imports/optimized/style-vendorizer.js": "e91a6c68e6f347259a7ca221fb8f0b2682a91e0bbc2739b54f7f14911a2af1db",
+    "https://cdn.skypack.dev/-/twind@v0.16.16-LPGqCzM3XVHFUO0IDjyk/dist=es2019,mode=imports/optimized/twind.js": "7a46f656d2682518a94287b30fccbf0ceaeb396215a0b961e6ce3bb77eddbeee",
+    "https://cdn.skypack.dev/-/twind@v0.16.16-LPGqCzM3XVHFUO0IDjyk/dist=es2019,mode=imports/optimized/twind/sheets.js": "d8490b1c1f6157c358f5d6a1df980e9a5887239d4aa9c4a69bc2d107f36dab32",
+    "https://cdn.skypack.dev/@twind/typography": "47a13cb72f3549b92c0fc7b9d00dc1597f42da01d17350b7d07206ef30ce871a",
+    "https://cdn.skypack.dev/twind": "ce13d20ccb648f056539c3f2837905158216167e5300d0953c5e6da400c84855",
+    "https://cdn.skypack.dev/twind/sheets": "a46ba77c11288c5641bfeb6870e899ba466f30b056dc312b98961928da1ed961",
+    "https://deno.land/std@0.115.1/fmt/colors.ts": "8368ddf2d48dfe413ffd04cdbb7ae6a1009cf0dccc9c7ff1d76259d9c61a0621",
+    "https://deno.land/std@0.115.1/testing/_diff.ts": "e6a10d2aca8d6c27a9c5b8a2dbbf64353874730af539707b5b39d4128140642d",
+    "https://deno.land/std@0.115.1/testing/asserts.ts": "a1fef0239a2c343b0baa49c77dcdd7412613c46f3aba2887c331a2d7ed1f645e"
+  }
+}
diff --git a/deno_lib/README.md b/deno_lib/README.md
index d09e7bb..1bcae69 100644
--- a/deno_lib/README.md
+++ b/deno_lib/README.md
@@ -1,6 +1,11 @@
 <p align="center">
   <a href="http://nanojsx.io/">
-    <img src="https://raw.githubusercontent.com/nanojsx/nano/master/readme/nano-jsx-logo.svg" alt="Nano JSX Logo" width="350"/>
+  <!-- https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#specifying-the-theme-an-image-is-shown-to -->
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/nanojsx/nano/master/readme/nano-jsx-logo-dark.svg">
+    <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/nanojsx/nano/master/readme/nano-jsx-logo.svg">
+    <img alt="Nano JSX Logo" src="https://raw.githubusercontent.com/nanojsx/nano/master/readme/nano-jsx-logo.svg">
+  </picture>
   </a>
 </p>
 
@@ -36,6 +41,12 @@
 
 <hr>
 
+## News
+
+nano-jsx is now at v0.1.x 🎉  
+This means, no breaking changes till v0.2.x  
+[Tweet about it!](http://twitter.com/share?text=nano-jsx%20has%20reached%20v0.1!&url=https://nanojsx.io/)
+
 ## Getting Started
 
 - Visit the [website](http://nanojsx.io/)
diff --git a/deno_lib/ssr.ts b/deno_lib/ssr.ts
index 3c23aa2..caa8271 100644
--- a/deno_lib/ssr.ts
+++ b/deno_lib/ssr.ts
@@ -56,7 +56,9 @@ export const renderSSR = (component: any, options: { pathname?: string; clearSta
   initSSR(pathname)
   if (clearState) _state.clear()
 
-  return render(component, null, true).join('') as string
+  const tmp = render(component, null, true) as string | string[]
+  if (Array.isArray(tmp)) return tmp.join('')
+  else return Array.from(tmp).join('')
 }
 
 export const clearState = () => {
diff --git a/deno_lib/version.ts b/deno_lib/version.ts
index d55e1df..ada3457 100644
--- a/deno_lib/version.ts
+++ b/deno_lib/version.ts
@@ -1,2 +1,2 @@
 // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-export const VERSION = '0.0.37'
+export const VERSION = '0.1.0'
diff --git a/package-lock.json b/package-lock.json
index 4ad7ec8..123e085 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "nano-jsx",
-  "version": "0.0.37",
+  "version": "0.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "nano-jsx",
-      "version": "0.0.37",
+      "version": "0.1.0",
       "license": "MIT",
       "devDependencies": {
         "@types/jest": "^29.0.3",
diff --git a/package.json b/package.json
index d46a2c4..12dc806 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nano-jsx",
-  "version": "0.0.37",
+  "version": "0.1.0",
   "description": "SSR first, lightweight 1kB JSX library.",
   "main": "./lib/index.js",
   "types": "./lib/index.d.ts",
diff --git a/src/version.ts b/src/version.ts
index d55e1df..ada3457 100644
--- a/src/version.ts
+++ b/src/version.ts
@@ -1,2 +1,2 @@
 // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-export const VERSION = '0.0.37'
+export const VERSION = '0.1.0'