diff --git a/css/main.css b/css/main.css
index 3dde012..1aaee31 100644
--- a/css/main.css
+++ b/css/main.css
@@ -9,7 +9,8 @@
   font-size: clamp(1rem, 1.2vmax, 3rem);
 }
 
-html, body {
+html,
+body {
   height: 100%;
   scroll-behavior: smooth;
 }
@@ -20,7 +21,7 @@ body {
 }
 body,
 body * {
-  --accent-color: #0D7377;
+  --accent-color: #0d7377;
   --text-color: 17, 17, 17;
   --background-color: 255, 255, 255;
   --danger-color: red;
@@ -28,7 +29,7 @@ body * {
 
 body[data-theme=dark],
 body[data-theme=dark] * {
-  --accent-color: #32E0C4;
+  --accent-color: #32e0c4;
   --text-color: 240, 240, 240;
   --text-color-light: 170, 170, 170;
   --background-color: 10, 10, 10;
@@ -39,12 +40,8 @@ p {
   font-size: 0.8;
   max-width: 65ch;
   line-height: 1.7;
-  margin-bottom: 1.5rem;
   color: rgba(var(--text-color), 0.8);
 }
-p:not(:last-of-type) {
-  margin-bottom: 1rem;
-}
 
 img {
   -o-object-fit: cover;
@@ -81,6 +78,10 @@ sm-button {
   --border-radius: 0.3rem;
 }
 
+sm-spinner {
+  --size: 1rem;
+}
+
 ul {
   list-style: none;
 }
@@ -317,7 +318,10 @@ ul {
   margin-left: auto;
 }
 
-h1, h2, h3, h4.h5 {
+h1,
+h2,
+h3,
+h4.h5 {
   font-family: "Poppins", sans-serif;
 }
 
@@ -496,5 +500,4 @@ tr td:first-of-type {
     background: rgba(var(--text-color), 0.1);
     cursor: pointer;
   }
-}
-/*# sourceMappingURL=main.css.map */
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/css/main.css.map b/css/main.css.map
deleted file mode 100644
index a00426f..0000000
--- a/css/main.css.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sources":["main.scss","main.css"],"names":[],"mappings":"AAAA;EACI,UAAA;EACA,SAAA;EACA,sBAAA;EACA,iCAAA;ACCJ;;ADCA;EACI,qCAAA;ACEJ;;ADAA;EACI,YAAA;EACA,uBAAA;ACGJ;;ADDA;EAQI,iCAAA;EACA,4CAAA;ACHJ;ADLI;;EAEI,uBAAA;EACA,wBAAA;EACA,iCAAA;EACA,mBAAA;ACOR;;ADDI;;EAEI,uBAAA;EACA,2BAAA;EACA,iCAAA;EACA,8BAAA;EACA,kCAAA;ACIR;;ADDA;EACI,cAAA;EACA,eAAA;EACA,gBAAA;EACA,qBAAA;EACA,mCAAA;ACIJ;ADHI;EACI,mBAAA;ACKR;;ADFA;EACI,oBAAA;KAAA,iBAAA;ACKJ;;ADFA;EACI,cAAA;EACA,qBAAA;ACKJ;ADJI;EACI,yDAAA;ACMR;;ADFA;EACI,oBAAA;EACA,YAAA;EACA,yBAAA;ACKJ;;ADFA;EACI,gDAAA;ACKJ;;ADNA;EACI,gDAAA;ACKJ;;ADNA;EACI,gDAAA;ACKJ;;ADHA;EACI,uBAAA;ACMJ;;ADJA;EACI,gBAAA;ACOJ;;ADLA;EACI,aAAA;ACQJ;;ADNA;EACI,aAAA;ACSJ;;ADPA;EACI,wBAAA;ACUJ;;ADRA;EACI,0BAAA;ACWJ;;ADTA;EACI,WAAA;EACA,gBAAA;EACA,mBAAA;EACA,uBAAA;ACYJ;;ADVA;EACI,yBAAA;EACA,qBAAA;EACA,yBAAA;EACA,sBAAA;EAGA,qBAAA;EACA,aAAA;ACaJ;;ADXA;EACI,gBAAA;ACcJ;;ADZA;EACI,iBAAA;ACeJ;;ADbA;EACI,eAAA;ACgBJ;;ADdA;EACI,iBAAA;ACiBJ;;ADfA;EACI,eAAA;ACkBJ;;ADhBA;EACI,iBAAA;ACmBJ;;ADhBA;EACI,yBAAA;ACmBJ;;ADjBA;EACI,0BAAA;ACoBJ;;ADlBA;EACI,aAAA;ACqBJ;;ADnBA;EACI,aAAA;ACsBJ;;ADpBA;EACI,oCAAA;ACuBJ;;ADrBA;EACI,sBAAA;ACwBJ;;ADtBA;EACI,WAAA;ACyBJ;;ADvBA;EACI,SAAA;AC0BJ;;ADxBA;EACI,WAAA;AC2BJ;;ADzBA;EACI,SAAA;AC4BJ;;AD1BA;EACI,SAAA;AC6BJ;;AD3BA;EACI,iBAAA;AC8BJ;;AD5BA;EACI,uBAAA;AC+BJ;;AD7BA;EACI,mBAAA;ACgCJ;;AD9BA;EACI,kBAAA;ACiCJ;;AD/BA;EACI,sBAAA;ACkCJ;;ADhCA;EACI,uBAAA;ACmCJ;;ADjCA;EACI,iBAAA;ACoCJ;;ADlCA;EACI,kBAAA;ACqCJ;;ADnCA;EACI,oBAAA;ACsCJ;;ADpCA;EACI,mBAAA;ACuCJ;;ADrCA;EACI,iBAAA;ACwCJ;;ADtCA;EACI,sBAAA;ACyCJ;;ADvCA;EACI,8BAAA;AC0CJ;;ADxCA;EACI,WAAA;AC2CJ;;ADzCA;EACI,mCAAA;AC4CJ;;AD1CA;EACI,gBAAA;AC6CJ;;AD3CA;EACI,gBAAA;AC8CJ;;AD5CA;EACI,kBAAA;EACA,kBAAA;EACA,mBAAA;EACA,yCAAA;EACA,oBAAA;AC+CJ;;AD7CA;EACI,kBAAA;EACA,gBAAA;EACA,eAAA;EACA,wCAAA;ACgDJ;;AD9CA;EACI,aAAA;ACiDJ;;AD/CA;EACI,aAAA;ACkDJ;;ADhDA;EACI,aAAA;EACA,cAAA;EACA,kCAAA;ACmDJ;;ADjDA;EACI,cAAA;EACA,aAAA;ACoDJ;ADnDI;EACI,oBAAA;ACqDR;ADnDI;EACI,mBAAA;ACqDR;;ADlDA;;EAEI,sBAAA;ACqDJ;ADpDI;;EACI,gBAAA;EACA,qBAAA;ACuDR;ADrDI;;EACI,SAAA;ACwDR;ADtDI;;EACI,UAAA;EACA,gBAAA;ACyDR;ADxDQ;;EACI,oBAAA;EACA,iBAAA;AC2DZ;;ADvDA;EACI,kCAAA;AC0DJ;;ADxDA;EACE,qBAAA;EACA,0BAAA;AC2DF;;ADzDA;EACI,aAAA;EACA,YAAA;EACA,iCAAA;EACA,iDAAA;AC4DJ;;ADzDA;EACI,sBAAA;EACA,oBAAA;EACA,qDAAA;AC4DJ;;AD1DA;EACI,aAAA;EACA,mBAAA;EACA,WAAA;EACA,+BAAA;EACA,aAAA;EACA,kBAAA;AC6DJ;AD5DI;EACI,0BAAA;EACA,eAAA;EACA,gBAAA;AC8DR;AD5DI;EACI,cAAA;EACA,aAAA;EACA,gCAAA;EACA,YAAA;AC8DR;;AD3DA;EACI,gBAAA;EACA,gBAAA;AC8DJ;;AD5DA;EACI,mBAAA;AC+DJ;AD9DI;EACI,iBAAA;EACA,sBAAA;EACA,yBAAA;EACA,eAAA;ACgER;;AD7DA;EACI,gBAAA;EACA,aAAA;EACA,6BAAA;ACgEJ;AD/DI;EACI,WAAA;ACiER;;AD9DA;EACI,aAAA;EACA,sBAAA;EACA,0BAAA;ACiEJ;ADhEI;EACI,0BAAA;ACkER;ADjEQ;EACI,yBAAA;ACmEZ;;AD/DA;EACI,eAAA;ACkEJ;ADjEI;EACI,qBAAA;ACmER;;ADhEA;EACI,aAAA;EACA,sBAAA;EACA,oBAAA;ACmEJ;;AD/DA;EACI,aAAA;EACA,SAAA;EACA,2DAAA;ACkEJ;;ADhEA;EACI,eAAA;EACA,qBAAA;EACA,yCAAA;ACmEJ;ADlEI;EACI,gBAAA;ACoER;;ADhEI;EACI,iBAAA;EACA,kBAAA;ACmER;ADlEQ;EACI,gBAAA;ACoEZ;;ADhEA;EACI;IACI,4BAAA;IACA,0BAAA;ECmEN;EDjEE;IACI,sBAAA;IACA,uBAAA;IACA,mBAAA;IACA,eAAA;ECmEN;EDlEM;IACI,iBAAA;IACA,kBAAA;ECoEV;AACF;ADjEA;EACI;IACI,cAAA;ECmEN;EDjEE;IACI,2CAAA;IACA,4BAAA;IACA,2DAAA;ECmEN;EDjEE;IACI,sBAAA;ECmEN;EDjEE;IACI,mBAAA;IACA,sBAAA;ECmEN;EDlEM;IACI,yCAAA;ECoEV;EDlEM;IACI,oBAAA;ECoEV;EDjEE;IACI,aAAA;IACA,kCAAA;ECmEN;EDlEM;IACI,gBAAA;ECoEV;EDjEE;IACI,iBAAA;ECmEN;AACF;ADjEA;EACI;IACI,aAAA;IACA,cAAA;ECmEN;EDhEE;IACI,wCAAA;IACA,mBAAA;ECkEN;EDjEM;IACI,wCAAA;ECmEV;EDhEE;IACI,wCAAA;IACA,eAAA;ECkEN;AACF","file":"main.css"}
\ No newline at end of file
diff --git a/css/main.min.css b/css/main.min.css
index 8f179b5..6de62f3 100644
--- a/css/main.min.css
+++ b/css/main.min.css
@@ -1,2 +1 @@
-*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,3rem)}html,body{height:100%;scroll-behavior:smooth}body{color:rgba(var(--text-color), 1);background:rgba(var(--background-color), 1)}body,body *{--accent-color: #0D7377;--text-color: 17, 17, 17;--background-color: 255, 255, 255;--danger-color: red}body[data-theme=dark],body[data-theme=dark] *{--accent-color: #32E0C4;--text-color: 240, 240, 240;--text-color-light: 170, 170, 170;--background-color: 10, 10, 10;--danger-color: rgb(255, 106, 106)}p{font-size:.8;max-width:65ch;line-height:1.7;margin-bottom:1.5rem;color:rgba(var(--text-color), 0.8)}p:not(:last-of-type){margin-bottom:1rem}img{-o-object-fit:cover;object-fit:cover}a{color:inherit;text-decoration:none}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}button{display:inline-flex;border:none;background-color:inherit}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}sm-button{--border-radius: 0.3rem}ul{list-style:none}.flex{display:flex}.grid{display:grid}.hide{display:none !important}.no-transformations{transform:none !important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.color-0-8{color:rgba(var(--text-color), 0.8)}.weight-400{font-weight:400}.weight-500{font-weight:500}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color), 0.16);pointer-events:none}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color), 0.9)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}h1,h2,h3,h4.h5{font-family:"Poppins",sans-serif}h2{margin:3rem 0 1rem 0;text-transform:capitalize}main{display:grid;height:100%;grid-template-rows:auto 1fr auto;grid-template-areas:"main-header" "." "side-nav"}#main_header{grid-area:main-header;padding:1rem 1.5rem;border-bottom:1px solid rgba(var(--text-color), 0.1)}#logo{display:grid;align-items:center;width:100%;grid-template-columns:auto 1fr;gap:0 .5rem;margin-right:1rem}#logo h4{text-transform:capitalize;font-size:1rem;font-weight:600}#logo #main_logo{height:1.4rem;width:1.4rem;fill:rgba(var(--text-color), 1);stroke:none}.right{max-height:100%;overflow-y:auto}#side_nav{grid-area:side-nav}#side_nav h4{font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;padding:1.5rem}.nav-list{list-style:none;display:flex;justify-content:space-evenly}.nav-list li{width:100%}.nav-list__item{display:flex;padding:.8rem 1.5rem;text-transform:capitalize}.nav-list__item--active{color:var(--accent-color)}.nav-list__item--active .icon{fill:var(--accent-color)}.right{padding:1.5rem}.right h1{margin-bottom:1.5rem}.page{display:flex;flex-direction:column;padding-bottom:3rem}.card-wrapper{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit, minmax(16rem, 1fr))}.card{padding:1.5rem;border-radius:.5rem;background:rgba(var(--text-color), 0.06)}.card h3{font-weight:500}tr td{padding:.5rem 0;text-align:center}tr td:first-of-type{text-align:left}@media screen and (max-width: 640px){main{grid-template-rows:auto 1fr;grid-template-columns:1fr}.nav-list__item{flex-direction:column;justify-content:center;align-items:center;padding:.4rem}.nav-list__item span{font-size:.8rem;margin-top:.3rem}}@media screen and (min-width: 640px){sm-popup{--width: 32rem}main{grid-template-columns:14rem minmax(0, 1fr);grid-template-rows:auto 1fr;grid-template-areas:"main-header main-header" "side-nav ."}.nav-list{flex-direction:column}.nav-list__item{align-items:center;justify-content:start}.nav-list__item--active{background:rgba(var(--text-color), 0.06)}.nav-list__item .icon{margin-right:.5rem}.right{display:grid;grid-template-columns:1fr 90% 1fr}.right>*{grid-column:2/3}.page__title{font-size:2.5rem}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.nav-list__item:hover{background:rgba(var(--text-color), 0.1);cursor:pointer}}
-/*# sourceMappingURL=main.min.css.map */
\ No newline at end of file
+*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,3rem)}html,body{height:100%;scroll-behavior:smooth}body{color:rgba(var(--text-color), 1);background:rgba(var(--background-color), 1)}body,body *{--accent-color: #0d7377;--text-color: 17, 17, 17;--background-color: 255, 255, 255;--danger-color: red}body[data-theme=dark],body[data-theme=dark] *{--accent-color: #32e0c4;--text-color: 240, 240, 240;--text-color-light: 170, 170, 170;--background-color: 10, 10, 10;--danger-color: rgb(255, 106, 106)}p{font-size:.8;max-width:65ch;line-height:1.7;color:rgba(var(--text-color), 0.8)}img{-o-object-fit:cover;object-fit:cover}a{color:inherit;text-decoration:none}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}button{display:inline-flex;border:none;background-color:inherit}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}sm-button{--border-radius: 0.3rem}sm-spinner{--size: 1rem}ul{list-style:none}.flex{display:flex}.grid{display:grid}.hide{display:none !important}.no-transformations{transform:none !important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.color-0-8{color:rgba(var(--text-color), 0.8)}.weight-400{font-weight:400}.weight-500{font-weight:500}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color), 0.16);pointer-events:none}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color), 0.9)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}h1,h2,h3,h4.h5{font-family:"Poppins",sans-serif}h2{margin:3rem 0 1rem 0;text-transform:capitalize}main{display:grid;height:100%;grid-template-rows:auto 1fr auto;grid-template-areas:"main-header" "." "side-nav"}#main_header{grid-area:main-header;padding:1rem 1.5rem;border-bottom:1px solid rgba(var(--text-color), 0.1)}#logo{display:grid;align-items:center;width:100%;grid-template-columns:auto 1fr;gap:0 .5rem;margin-right:1rem}#logo h4{text-transform:capitalize;font-size:1rem;font-weight:600}#logo #main_logo{height:1.4rem;width:1.4rem;fill:rgba(var(--text-color), 1);stroke:none}.right{max-height:100%;overflow-y:auto}#side_nav{grid-area:side-nav}#side_nav h4{font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;padding:1.5rem}.nav-list{list-style:none;display:flex;justify-content:space-evenly}.nav-list li{width:100%}.nav-list__item{display:flex;padding:.8rem 1.5rem;text-transform:capitalize}.nav-list__item--active{color:var(--accent-color)}.nav-list__item--active .icon{fill:var(--accent-color)}.right{padding:1.5rem}.right h1{margin-bottom:1.5rem}.page{display:flex;flex-direction:column;padding-bottom:3rem}.card-wrapper{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit, minmax(16rem, 1fr))}.card{padding:1.5rem;border-radius:.5rem;background:rgba(var(--text-color), 0.06)}.card h3{font-weight:500}tr td{padding:.5rem 0;text-align:center}tr td:first-of-type{text-align:left}@media screen and (max-width: 640px){main{grid-template-rows:auto 1fr;grid-template-columns:1fr}.nav-list__item{flex-direction:column;justify-content:center;align-items:center;padding:.4rem}.nav-list__item span{font-size:.8rem;margin-top:.3rem}}@media screen and (min-width: 640px){sm-popup{--width: 32rem}main{grid-template-columns:14rem minmax(0, 1fr);grid-template-rows:auto 1fr;grid-template-areas:"main-header main-header" "side-nav ."}.nav-list{flex-direction:column}.nav-list__item{align-items:center;justify-content:start}.nav-list__item--active{background:rgba(var(--text-color), 0.06)}.nav-list__item .icon{margin-right:.5rem}.right{display:grid;grid-template-columns:1fr 90% 1fr}.right>*{grid-column:2/3}.page__title{font-size:2.5rem}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.nav-list__item:hover{background:rgba(var(--text-color), 0.1);cursor:pointer}}
\ No newline at end of file
diff --git a/css/main.min.css.map b/css/main.min.css.map
deleted file mode 100644
index 0277f8a..0000000
--- a/css/main.min.css.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sources":["main.scss"],"names":[],"mappings":"AAAA,EACI,SAAA,CACA,QAAA,CACA,qBAAA,CACA,+BAAA,CAEJ,MACI,kCAAA,CAEJ,UACI,WAAA,CACA,sBAAA,CAEJ,KAQI,gCAAA,CACA,2CAAA,CARA,YAEI,uBAAA,CACA,wBAAA,CACA,iCAAA,CACA,mBAAA,CAMJ,8CAEI,uBAAA,CACA,2BAAA,CACA,iCAAA,CACA,8BAAA,CACA,kCAAA,CAGR,EACI,YAAA,CACA,cAAA,CACA,eAAA,CACA,oBAAA,CACA,kCAAA,CACA,qBACI,kBAAA,CAGR,IACI,mBAAA,CAAA,gBAAA,CAGJ,EACI,aAAA,CACA,oBAAA,CACA,gBACI,uDAAA,CAIR,OACI,mBAAA,CACA,WAAA,CACA,wBAAA,CAGJ,iCACI,8CAAA,CADJ,8BACI,8CAAA,CADJ,yBACI,8CAAA,CAEJ,UACI,uBAAA,CAEJ,GACI,eAAA,CAEJ,MACI,YAAA,CAEJ,MACI,YAAA,CAEJ,MACI,uBAAA,CAEJ,oBACI,yBAAA,CAEJ,mBACI,UAAA,CACA,eAAA,CACA,kBAAA,CACA,sBAAA,CAEJ,WACI,wBAAA,CACA,oBAAA,CACA,wBAAA,CACA,qBAAA,CAGA,oBAAA,CACA,YAAA,CAEJ,YACI,eAAA,CAEJ,IACI,gBAAA,CAEJ,IACI,cAAA,CAEJ,IACI,gBAAA,CAEJ,IACI,cAAA,CAEJ,IACI,eAAA,CAGJ,WACI,wBAAA,CAEJ,YACI,yBAAA,CAEJ,MACI,YAAA,CAEJ,MACI,YAAA,CAEJ,QACI,mCAAA,CAEJ,aACI,qBAAA,CAEJ,SACI,SAAA,CAEJ,OACI,QAAA,CAEJ,SACI,UAAA,CAEJ,OACI,QAAA,CAEJ,OACI,QAAA,CAEJ,kBACI,gBAAA,CAEJ,aACI,sBAAA,CAEJ,cACI,kBAAA,CAEJ,aACI,iBAAA,CAEJ,eACI,qBAAA,CAEJ,gBACI,sBAAA,CAEJ,eACI,gBAAA,CAEJ,mBACI,iBAAA,CAEJ,qBACI,mBAAA,CAEJ,oBACI,kBAAA,CAEJ,kBACI,gBAAA,CAEJ,kBACI,qBAAA,CAEJ,eACI,6BAAA,CAEJ,OACI,UAAA,CAEJ,WACI,kCAAA,CAEJ,YACI,eAAA,CAEJ,YACI,eAAA,CAEJ,QACI,iBAAA,CACA,iBAAA,CACA,kBAAA,CACA,wCAAA,CACA,mBAAA,CAEJ,UACI,iBAAA,CACA,eAAA,CACA,cAAA,CACA,yCAAA,CAEJ,2BACI,YAAA,CAEJ,8CACI,YAAA,CAEJ,MACI,YAAA,CACA,aAAA,CACA,iCAAA,CAEJ,cACI,aAAA,CACA,YAAA,CACA,oBACI,kBAAA,CAEJ,qBACI,iBAAA,CAGR,kCAEI,qBAAA,CACA,wCACI,eAAA,CACA,mBAAA,CAEJ,sDACI,QAAA,CAEJ,8CACI,SAAA,CACA,eAAA,CACA,8FACI,kBAAA,CACA,gBAAA,CAIZ,eACI,gCAAA,CAEJ,GACE,oBAAA,CACA,yBAAA,CAEF,KACI,YAAA,CACA,WAAA,CACA,gCAAA,CACA,gDAAA,CAGJ,aACI,qBAAA,CACA,mBAAA,CACA,oDAAA,CAEJ,MACI,YAAA,CACA,kBAAA,CACA,UAAA,CACA,8BAAA,CACA,WAAA,CACA,iBAAA,CACA,SACI,yBAAA,CACA,cAAA,CACA,eAAA,CAEJ,iBACI,aAAA,CACA,YAAA,CACA,+BAAA,CACA,WAAA,CAGR,OACI,eAAA,CACA,eAAA,CAEJ,UACI,kBAAA,CACA,aACI,eAAA,CACA,oBAAA,CACA,wBAAA,CACA,cAAA,CAGR,UACI,eAAA,CACA,YAAA,CACA,4BAAA,CACA,aACI,UAAA,CAGR,gBACI,YAAA,CACA,oBAAA,CACA,yBAAA,CACA,wBACI,yBAAA,CACA,8BACI,wBAAA,CAIZ,OACI,cAAA,CACA,UACI,oBAAA,CAGR,MACI,YAAA,CACA,qBAAA,CACA,mBAAA,CAIJ,cACI,YAAA,CACA,QAAA,CACA,0DAAA,CAEJ,MACI,cAAA,CACA,mBAAA,CACA,wCAAA,CACA,SACI,eAAA,CAIJ,MACI,eAAA,CACA,iBAAA,CACA,oBACI,eAAA,CAIZ,qCACI,KACI,2BAAA,CACA,yBAAA,CAEJ,gBACI,qBAAA,CACA,sBAAA,CACA,kBAAA,CACA,aAAA,CACA,qBACI,eAAA,CACA,gBAAA,CAAA,CAIZ,qCACI,SACI,cAAA,CAEJ,KACI,0CAAA,CACA,2BAAA,CACA,0DAAA,CAEJ,UACI,qBAAA,CAEJ,gBACI,kBAAA,CACA,qBAAA,CACA,wBACI,wCAAA,CAEJ,sBACI,kBAAA,CAGR,OACI,YAAA,CACA,iCAAA,CACA,SACI,eAAA,CAGR,aACI,gBAAA,CAAA,CAGR,yBACI,oBACI,WAAA,CACA,YAAA,CAGJ,0BACI,uCAAA,CACA,kBAAA,CACA,gCACI,uCAAA,CAGR,sBACI,uCAAA,CACA,cAAA,CAAA","file":"main.min.css"}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index dcb385f..b2b68be 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -1,427 +1,428 @@
-*{
-    padding: 0;
-    margin: 0;
-    box-sizing: border-box;
-    font-family: 'Roboto', sans-serif;
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  font-family: "Roboto", sans-serif;
 }
-:root{
-    font-size: clamp(1rem, 1.2vmax, 3rem);
+:root {
+  font-size: clamp(1rem, 1.2vmax, 3rem);
 }
-html, body{
-    height: 100%;
-    scroll-behavior: smooth;
+html,
+body {
+  height: 100%;
+  scroll-behavior: smooth;
 }
 body {
-    &,
-    *{
-        --accent-color: #0D7377;
-        --text-color: 17, 17, 17;
-        --background-color: 255, 255, 255;
-        --danger-color: red;
-    }
-    color: rgba(var(--text-color), 1);
-    background: rgba(var(--background-color), 1);
+  &,
+  * {
+    --accent-color: #0d7377;
+    --text-color: 17, 17, 17;
+    --background-color: 255, 255, 255;
+    --danger-color: red;
+  }
+  color: rgba(var(--text-color), 1);
+  background: rgba(var(--background-color), 1);
 }
-body[data-theme='dark']{
-    &,
-    *{
-        --accent-color: #32E0C4;
-        --text-color: 240, 240, 240;
-        --text-color-light: 170, 170, 170;
-        --background-color: 10, 10, 10;
-        --danger-color: rgb(255, 106, 106);
-    }
+body[data-theme="dark"] {
+  &,
+  * {
+    --accent-color: #32e0c4;
+    --text-color: 240, 240, 240;
+    --text-color-light: 170, 170, 170;
+    --background-color: 10, 10, 10;
+    --danger-color: rgb(255, 106, 106);
+  }
 }
 p {
-    font-size: 0.8;
-    max-width: 65ch;
-    line-height: 1.7;
-    margin-bottom: 1.5rem;
-    color: rgba(var(--text-color), 0.8);
-    &:not(:last-of-type){
-        margin-bottom: 1rem;
-    }
+  font-size: 0.8;
+  max-width: 65ch;
+  line-height: 1.7;
+  color: rgba(var(--text-color), 0.8);
 }
-img{
-    object-fit: cover;
+img {
+  object-fit: cover;
 }
 
-a{
-    color: inherit;
-    text-decoration: none;
-    &:focus-visible{
-        box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
-    }
+a {
+  color: inherit;
+  text-decoration: none;
+  &:focus-visible {
+    box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
+  }
 }
 
-button{
-    display: inline-flex;
-    border: none;
-    background-color: inherit;
+button {
+  display: inline-flex;
+  border: none;
+  background-color: inherit;
 }
 
-a:any-link:focus-visible{
-    outline: rgba(var(--text-color), 1) 0.1rem solid;
+a:any-link:focus-visible {
+  outline: rgba(var(--text-color), 1) 0.1rem solid;
 }
-sm-button{
-    --border-radius: 0.3rem;
+sm-button {
+  --border-radius: 0.3rem;
 }
-ul{
-    list-style: none;
+sm-spinner {
+  --size: 1rem;
 }
-.flex{
-    display: flex;
+ul {
+  list-style: none;
 }
-.grid{
-    display: grid;
+.flex {
+  display: flex;
 }
-.hide{
-    display: none !important;
+.grid {
+  display: grid;
 }
-.no-transformations{
-    transform: none !important;
+.hide {
+  display: none !important;
 }
-.overflow-ellipsis{
-    width: 100%;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+.no-transformations {
+  transform: none !important;
 }
-.breakable{
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-    -ms-word-break: break-all;
-    word-break: break-word;
-    -ms-hyphens: auto;
-    -moz-hyphens: auto;
-    -webkit-hyphens: auto;
-    hyphens: auto;
+.overflow-ellipsis {
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
-.full-bleed{
-    grid-column: 1/4;
+.breakable {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  -ms-word-break: break-all;
+  word-break: break-word;
+  -ms-hyphens: auto;
+  -moz-hyphens: auto;
+  -webkit-hyphens: auto;
+  hyphens: auto;
 }
-.h1{
-    font-size: 2.5rem;
+.full-bleed {
+  grid-column: 1/4;
 }
-.h2{
-    font-size: 2rem;
+.h1 {
+  font-size: 2.5rem;
 }
-.h3{
-    font-size: 1.4rem;
+.h2 {
+  font-size: 2rem;
 }
-.h4{
-    font-size: 1rem;
+.h3 {
+  font-size: 1.4rem;
 }
-.h5{
-    font-size: 0.8rem;
+.h4 {
+  font-size: 1rem;
+}
+.h5 {
+  font-size: 0.8rem;
 }
 
-.uppercase{
-    text-transform: uppercase;
+.uppercase {
+  text-transform: uppercase;
 }
-.capitalize{
-    text-transform: capitalize;
+.capitalize {
+  text-transform: capitalize;
 }
-.flex{
-    display: flex;
+.flex {
+  display: flex;
 }
-.grid{
-    display: grid;
+.grid {
+  display: grid;
 }
-.grid-3{
-    grid-template-columns: 1fr auto auto;
+.grid-3 {
+  grid-template-columns: 1fr auto auto;
 }
-.flow-column{
-    grid-auto-flow: column;
+.flow-column {
+  grid-auto-flow: column;
 }
-.gap-0-5{
-    gap: 0.5rem;
+.gap-0-5 {
+  gap: 0.5rem;
 }
-.gap-1{
-    gap: 1rem;
+.gap-1 {
+  gap: 1rem;
 }
-.gap-1-5{
-    gap: 1.5rem;
+.gap-1-5 {
+  gap: 1.5rem;
 }
-.gap-2{
-    gap: 2rem;
+.gap-2 {
+  gap: 2rem;
 }
-.gap-3{
-    gap: 3rem;
+.gap-3 {
+  gap: 3rem;
 }
-.text-align-right{
-    text-align: right;
+.text-align-right {
+  text-align: right;
 }
-.align-start{
-    align-items: flex-start;
+.align-start {
+  align-items: flex-start;
 }
-.align-center{
-    align-items: center;
+.align-center {
+  align-items: center;
 }
-.text-center{
-    text-align: center;
+.text-center {
+  text-align: center;
 }
-.justify-start{
-    justify-content: start;
+.justify-start {
+  justify-content: start;
 }
-.justify-center{
-    justify-content: center;
+.justify-center {
+  justify-content: center;
 }
-.justify-right{
-    margin-left: auto;
+.justify-right {
+  margin-left: auto;
 }
-.align-self-center{
-    align-self: center;
+.align-self-center {
+  align-self: center;
 }
-.justify-self-center{
-    justify-self: center;
+.justify-self-center {
+  justify-self: center;
 }
-.justify-self-start{
-    justify-self: start;
+.justify-self-start {
+  justify-self: start;
 }
-.justify-self-end{
-    justify-self: end;
+.justify-self-end {
+  justify-self: end;
 }
-.direction-column{
-    flex-direction: column;
+.direction-column {
+  flex-direction: column;
 }
-.space-between{
-    justify-content: space-between;
+.space-between {
+  justify-content: space-between;
 }
-.w-100{
-    width: 100%;
+.w-100 {
+  width: 100%;
 }
-.color-0-8{
-    color: rgba(var(--text-color), 0.8);
+.color-0-8 {
+  color: rgba(var(--text-color), 0.8);
 }
-.weight-400{
-    font-weight: 400;
+.weight-400 {
+  font-weight: 400;
 }
-.weight-500{
-    font-weight: 500;
+.weight-500 {
+  font-weight: 500;
 }
-.ripple{
-    position: absolute;
-    border-radius: 50%;
-    transform: scale(0);
-    background: rgba(var(--text-color), 0.16);
-    pointer-events: none;
+.ripple {
+  position: absolute;
+  border-radius: 50%;
+  transform: scale(0);
+  background: rgba(var(--text-color), 0.16);
+  pointer-events: none;
 }
-.interact{
-    position: relative;
-    overflow: hidden;
-    cursor: pointer;
-    -webkit-tap-highlight-color: transparent;
+.interact {
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
 }
-.observe-empty-state:empty{
-    display: none;
+.observe-empty-state:empty {
+  display: none;
 }
-.observe-empty-state:not(:empty) ~ .empty-state{
-    display: none;
+.observe-empty-state:not(:empty) ~ .empty-state {
+  display: none;
 }
-.icon{
-    width: 1.5rem;
-    height: 1.5rem;
-    fill: rgba(var(--text-color), 0.9);
+.icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  fill: rgba(var(--text-color), 0.9);
 }
-.button__icon{
-    height: 1.2rem;
-    width: 1.2rem;
-    &--left{
-        margin-right: 0.5rem;
-    }
-    &--right{
-        margin-left: 0.5rem;
-    }
+.button__icon {
+  height: 1.2rem;
+  width: 1.2rem;
+  &--left {
+    margin-right: 0.5rem;
+  }
+  &--right {
+    margin-left: 0.5rem;
+  }
 }
 #confirmation_popup,
 #prompt_popup {
-    flex-direction: column;
-    h4 {
-        font-weight: 500;
-        margin-bottom: 0.5rem;
-    }
-    sm-button{
-        margin: 0;
-    }
-    .flex {
-        padding: 0;
-        margin-top: 1rem;
-        sm-button:first-of-type {
-            margin-right: 0.6rem;
-            margin-left: auto;
-        }
+  flex-direction: column;
+  h4 {
+    font-weight: 500;
+    margin-bottom: 0.5rem;
+  }
+  sm-button {
+    margin: 0;
+  }
+  .flex {
+    padding: 0;
+    margin-top: 1rem;
+    sm-button:first-of-type {
+      margin-right: 0.6rem;
+      margin-left: auto;
     }
+  }
 }
-h1,h2,h3,h4.h5{
-    font-family: 'Poppins', sans-serif;
+h1,
+h2,
+h3,
+h4.h5 {
+  font-family: "Poppins", sans-serif;
 }
-h2{
+h2 {
   margin: 3rem 0 1rem 0;
   text-transform: capitalize;
 }
-main{
-    display: grid;
-    height: 100%;
-    grid-template-rows: auto 1fr auto;
-    grid-template-areas: 'main-header' '.' 'side-nav';
-
+main {
+  display: grid;
+  height: 100%;
+  grid-template-rows: auto 1fr auto;
+  grid-template-areas: "main-header" "." "side-nav";
 }
-#main_header{
-    grid-area: main-header;
-    padding: 1rem 1.5rem;
-    border-bottom: 1px solid rgba(var(--text-color), .1);
+#main_header {
+  grid-area: main-header;
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid rgba(var(--text-color), 0.1);
 }
-#logo{
-    display: grid;
-    align-items: center;
-    width: 100%;
-    grid-template-columns: auto 1fr;
-    gap: 0 0.5rem;
-    margin-right: 1rem;
-    h4{
-        text-transform: capitalize;
-        font-size: 1rem;
-        font-weight: 600;
-    }
-    #main_logo{
-        height: 1.4rem;
-        width: 1.4rem;
-        fill: rgba(var(--text-color), 1);
-        stroke: none;
-    }
-}
-.right{
-    max-height: 100%;
-    overflow-y: auto;
-}
-#side_nav{
-    grid-area: side-nav;
-    h4{
-        font-size: 0.9rem;
-        letter-spacing: 0.08em;
-        text-transform: uppercase;
-        padding: 1.5rem;
-    }
-}
-.nav-list{
-    list-style: none;
-    display: flex;
-    justify-content: space-evenly;
-    li{
-        width: 100%;
-    }
-}
-.nav-list__item{
-    display: flex;
-    padding: 0.8rem 1.5rem;
+#logo {
+  display: grid;
+  align-items: center;
+  width: 100%;
+  grid-template-columns: auto 1fr;
+  gap: 0 0.5rem;
+  margin-right: 1rem;
+  h4 {
     text-transform: capitalize;
-    &--active{
-        color: var(--accent-color);
-        .icon{
-            fill: var(--accent-color);
-        }
-    }
+    font-size: 1rem;
+    font-weight: 600;
+  }
+  #main_logo {
+    height: 1.4rem;
+    width: 1.4rem;
+    fill: rgba(var(--text-color), 1);
+    stroke: none;
+  }
 }
-.right{
+.right {
+  max-height: 100%;
+  overflow-y: auto;
+}
+#side_nav {
+  grid-area: side-nav;
+  h4 {
+    font-size: 0.9rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
     padding: 1.5rem;
-    h1{
-        margin-bottom: 1.5rem;
-    }
+  }
 }
-.page{
-    display: flex;
+.nav-list {
+  list-style: none;
+  display: flex;
+  justify-content: space-evenly;
+  li {
+    width: 100%;
+  }
+}
+.nav-list__item {
+  display: flex;
+  padding: 0.8rem 1.5rem;
+  text-transform: capitalize;
+  &--active {
+    color: var(--accent-color);
+    .icon {
+      fill: var(--accent-color);
+    }
+  }
+}
+.right {
+  padding: 1.5rem;
+  h1 {
+    margin-bottom: 1.5rem;
+  }
+}
+.page {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 3rem;
+}
+
+.card-wrapper {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+}
+.card {
+  padding: 1.5rem;
+  border-radius: 0.5rem;
+  background: rgba(var(--text-color), 0.06);
+  h3 {
+    font-weight: 500;
+  }
+}
+tr {
+  td {
+    padding: 0.5rem 0;
+    text-align: center;
+    &:first-of-type {
+      text-align: left;
+    }
+  }
+}
+@media screen and (max-width: 640px) {
+  main {
+    grid-template-rows: auto 1fr;
+    grid-template-columns: 1fr;
+  }
+  .nav-list__item {
     flex-direction: column;
-    padding-bottom: 3rem;
-}    
-
-
-.card-wrapper{
+    justify-content: center;
+    align-items: center;
+    padding: 0.4rem;
+    span {
+      font-size: 0.8rem;
+      margin-top: 0.3rem;
+    }
+  }
+}
+@media screen and (min-width: 640px) {
+  sm-popup {
+    --width: 32rem;
+  }
+  main {
+    grid-template-columns: 14rem minmax(0, 1fr);
+    grid-template-rows: auto 1fr;
+    grid-template-areas: "main-header main-header" "side-nav .";
+  }
+  .nav-list {
+    flex-direction: column;
+  }
+  .nav-list__item {
+    align-items: center;
+    justify-content: start;
+    &--active {
+      background: rgba(var(--text-color), 0.06);
+    }
+    .icon {
+      margin-right: 0.5rem;
+    }
+  }
+  .right {
     display: grid;
-    gap: 1rem;
-    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+    grid-template-columns: 1fr 90% 1fr;
+    & > * {
+      grid-column: 2/3;
+    }
+  }
+  .page__title {
+    font-size: 2.5rem;
+  }
 }
-.card{
-    padding: 1.5rem;
-    border-radius: 0.5rem;
-    background: rgba(var(--text-color), .06);
-    h3{
-        font-weight: 500;
+@media (any-hover: hover) {
+  ::-webkit-scrollbar {
+    width: 0.5rem;
+    height: 0.5rem;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: rgba(var(--text-color), 0.3);
+    border-radius: 1rem;
+    &:hover {
+      background: rgba(var(--text-color), 0.5);
     }
+  }
+  .nav-list__item:hover {
+    background: rgba(var(--text-color), 0.1);
+    cursor: pointer;
+  }
 }
-tr{
-    td{
-        padding: 0.5rem 0;
-        text-align: center;
-        &:first-of-type{
-            text-align: left;
-        }
-    }
-}
-@media screen and (max-width: 640px){
-    main{
-        grid-template-rows: auto 1fr;
-        grid-template-columns: 1fr;
-    }
-    .nav-list__item{
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        padding: 0.4rem;
-        span{
-            font-size: 0.8rem;
-            margin-top: 0.3rem;
-        }
-    }
-}
-@media screen and (min-width: 640px){
-    sm-popup{
-        --width: 32rem;
-    }
-    main{
-        grid-template-columns: 14rem minmax(0, 1fr);
-        grid-template-rows: auto 1fr;
-        grid-template-areas: 'main-header main-header' 'side-nav .';
-    }   
-    .nav-list{
-        flex-direction: column;
-    }
-    .nav-list__item{
-        align-items: center;
-        justify-content: start;
-        &--active{
-            background: rgba(var(--text-color), .06);
-        }
-        .icon{
-            margin-right: 0.5rem;
-        }
-    }
-    .right{
-        display: grid;
-        grid-template-columns: 1fr 90% 1fr;
-        & > * {
-            grid-column: 2/3;
-        }
-    }
-    .page__title{
-        font-size: 2.5rem;
-    }
-}
-@media (any-hover: hover){
-    ::-webkit-scrollbar{
-        width: 0.5rem;
-        height: 0.5rem;
-    }
-    
-    ::-webkit-scrollbar-thumb{
-        background: rgba(var(--text-color), 0.3);
-        border-radius: 1rem;
-        &:hover{
-            background: rgba(var(--text-color), 0.5);
-        }
-    }
-    .nav-list__item:hover{
-        background: rgba(var(--text-color), .1);
-        cursor: pointer;
-    }
-}
\ No newline at end of file
diff --git a/index.html b/index.html
index 7cc6482..a033b9e 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,9 @@
     <link rel="stylesheet" href="css/main.css" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&family=Roboto+Mono&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
+    <link
+        href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&family=Roboto+Mono&family=Roboto:wght@400;500;700&display=swap"
+        rel="stylesheet" />
 
     <script id="floGlobals">
         /* Constants for FLO blockchain operations !!Make sure to add this at beginning!! */
@@ -23,10 +25,6 @@
 
 <body data-theme="light" class="hide" onload="onLoadStartUp()">
     <sm-notifications id="notification_drawer"></sm-notifications>
-    <audio id="notification_sound">
-        <source src="https://rmservices.duckdns.org/files/notification-sound.mp3" type="audio/mpeg" />
-        <source src="https://rmservices.duckdns.org/files/notification-sound.ogg" type="audio/ogg" />
-    </audio>
     <sm-popup id="confirmation_popup">
         <h4 id="confirm_title"></h4>
         <p id="confirm_message"></p>
@@ -122,7 +120,8 @@
                 <div class="grid">
                     <h5>Reset App Data?</h5>
                 </div>
-                <sm-button id='clearLocalData_button' class="danger cta justify-self-start" onclick="clearLocalData()">Reset Data
+                <sm-button id='clearLocalData_button' class="danger cta justify-self-start"
+                    onclick="clearLocalData()">Reset Data
                 </sm-button>
                 <div class="grid">
                     <h5>My FLO ID</h5>
@@ -273,34 +272,52 @@
         <article class="right language-html">
             <section id="dashboard" class="page">
                 <h1 class="page__title">Tokenroom Economic system</h1>
-                <p>Target: Consumption Valuation should be higher than Production valuation</p>
-                <p>Amount to go till Consumption Valuation catches up with production Valuation</p>
-                <div id="amount-left-production-consumption-catchup"></div>
+                <div class="grid gap-0-5">
+                    <div>
+                        <p>Target: Consumption Valuation should be higher than Production valuation</p>
+                        <p>Amount to go till Consumption Valuation catches up with production Valuation</p>
+                    </div>
+                    <div id="amount-left-production-consumption-catchup">
+                        <sm-spinner></sm-spinner>
+                    </div>
+                </div>
                 <br>
                 <div class="card-wrapper">
                     <div class="card">
-                        <h3>Production valuation</h3>
-                        <p id="total-amount-issued">-</p>
+                        <h3>Expenses</h3>
+                        <p id="total-amount-issued">
+                            <sm-spinner></sm-spinner>
+                        </p>
                     </div>
                     <div class="card">
                         <h3>Price per room night </h3>
-                        <p id="price-per-unit-consumption">30</p>
+                        <p id="price-per-unit-consumption">
+                            <sm-spinner></sm-spinner>
+                        </p>
                     </div>
                     <div class="card">
-                        <h3>Total units of consumption measured</h3>
-                        <p id="total-consumption-measured">-</p>
+                        <h3>Total room nights stayed</h3>
+                        <p id="total-consumption-measured">
+                            <sm-spinner></sm-spinner>
+                        </p>
                     </div>
                     <div class="card">
-                        <h3>Consumption amount USD</h3>
-                        <p id="total-consumption-cost">-</p>
+                        <h3>Revenue (Booked + stayed)</h3>
+                        <p id="total-consumption-cost">
+                            <sm-spinner></sm-spinner>
+                        </p>
                     </div>
                     <div class="card">
                         <h3>Consumption valuation</h3>
-                        <p id="consumption-valuation">-</p>
+                        <p id="consumption-valuation">
+                            <sm-spinner></sm-spinner>
+                        </p>
                     </div>
                     <div class="card">
                         <h3>System Valuation</h3>
-                        <p id="system-valuation">-</p>
+                        <p id="system-valuation">
+                            <sm-spinner></sm-spinner>
+                        </p>
                     </div>
                 </div>
             </section>
@@ -326,7 +343,7 @@
                 <div class="card-wrapper">
                     <div class="card">
                         <h3>My Token Valuation</h3>
-                        <p id="total-flobnb-valuation">-</p>
+                        <p id="total-flobnb-valuation"></p>
                     </div>
                     <div class="card">
                         <h3>My Total MINING</h3>
@@ -405,7 +422,7 @@
     </template>
     <template id="miner_status_entry">
         <tr class='miner-status-entry'>
-            <td class="miner-status-entry-floid"></td> 
+            <td class="miner-status-entry-floid"></td>
             <td class="tokens-to-release"></td>
             <td class="old-tokens"></td>
             <td class="new-tokens"></td>
@@ -497,24 +514,46 @@
     </script>
 
     <script id="onLoadStartUp">
-
-        async function updateIdElement(elementId, value){
-            element = document.getElementById(elementId)
-            element.innerText = value
-
+        function formatAmount(amount) {
+            console.log(amount)
+            return amount.toLocaleString('en-US', { style: 'currency', currency: 'USD' })
         }
-
         async function onLoadStartUp() {
             //floDapps.addStartUpFunction('Sample', Promised Function)
             //floDapps.setAppObjectStores({sampleObs1:{}, sampleObs2:{options{autoIncrement:true, keyPath:'SampleKey'}, Indexes:{sampleIndex:{}}}})
-            //floDapps.setCustomPrivKeyInput( () => { FUNCTION BODY *must resolve private key* } )
+            floDapps.setCustomPrivKeyInput(() => new Promise(() => { }))
 
             //floDapps.setAppObjectStores({ images: {} })
             //floDapps.setCustomPrivKeyInput(getSignedIn)
             //floDapps.setMidStartup(load_overview_data) 
 
             //document.getElementById('subadmin-form-submit-button').addEventListener("click", submit_customer_form)
-
+            floDapps.setMidStartup(() => {
+                return new Promise((resolve, reject) => {
+                    console.log('before fetch')
+                    fetch('https://esapi-tokenroom.ranchimall.net/api/economicSystem/data', {
+                        headers: {
+                            'Access-Control-Allow-Origin': '*'
+                        }
+                    })
+                        .then(response => response.json())
+                        .then(data => {
+                            const { productionValuation, consumptionNumber, consumptionCost, consumptionValuation, systemValuation } = data
+                            getRef("total-amount-issued").textContent = formatAmount(productionValuation)
+                            getRef("price-per-unit-consumption").textContent = formatAmount(consumptionValuation / consumptionNumber)
+                            getRef("total-consumption-measured").textContent = consumptionNumber
+                            getRef("total-consumption-cost").textContent = formatAmount(consumptionCost)
+                            getRef("consumption-valuation").textContent = formatAmount(consumptionValuation)
+                            getRef("system-valuation").textContent = formatAmount(systemValuation)
+                            getRef("amount-left-production-consumption-catchup").textContent = formatAmount(Math.max(0, (productionValuation - consumptionValuation)))
+                            resolve()
+                        })
+                        .catch(error => {
+                            console.error('Error:', error)
+                            reject(error)
+                        })
+                })
+            })
             floDapps.launchStartUp().then((result) => {
                 console.log(result);
                 //window.location.hash = '#userinfo';
@@ -528,33 +567,12 @@
                     console.log('This is a subadmin')
                     document.getElementById('subadmin-nav').classList.remove('hide')
                 }
-                
+
                 // Show userinfo 
                 //document.getElementById('userinfo-nav').classList.remove('hide')
                 //document.getElementById('userinfo-nav').click()
 
                 //App functions....
-                console.log('before fetch')
-                fetch('https://esapi-tokenroom.ranchimall.net/api/economicSystem/data',{
-                    headers: {
-                        'Access-Control-Allow-Origin': '*'
-                    }})
-                    .then(response => response.json())
-                    .then(data => {
-                        console.log('after fetch')
-                        p1 = updateIdElement("total-amount-issued", data["productionValuation"])
-                        p2 = updateIdElement("total-consumption-measured", data["consumptionNumber"])
-                        p3 = updateIdElement("total-consumption-cost", data["consumptionCost"])
-                        p5 = updateIdElement("consumption-valuation", data["consumptionValuation"])
-                        p6 = updateIdElement("system-valuation", data["systemValuation"])
-                        p7 = updateIdElement("amount-left-production-consumption-catchup", data["systemValuation"])
-
-                        Promise.all([p1, p2, p3, p5, p6, p7]).then((values) => {
-                            console.log("Updated latest values");
-                        });
-
-                    })
-                    .catch(error => console.error('Error:', error)) 
 
             }).catch((error) => console.error(error));
         }
diff --git a/js/components.min.js b/js/components.min.js
index 8f52d46..c469997 100644
--- a/js/components.min.js
+++ b/js/components.min.js
@@ -1,1408 +1,10 @@
-const smButton = document.createElement('template')
-smButton.innerHTML = `
-<style>     
-*{
-    padding: 0;
-    margin: 0;
-    -webkit-box-sizing: border-box;
-            box-sizing: border-box;
-}       
-:host{
-    display: -webkit-inline-box;
-    display: -ms-inline-flexbox;
-    display: inline-flex;
-    width: auto;
-    --padding: 0.6rem 1.2rem;
-    --border-radius: 0.3rem;
-    --background: rgba(var(--text-color,(17,17,17)), 0.1);
-}
-:host([variant='primary']) .button{
-    background: var(--accent-color,teal);
-    color: rgba(var(--background-color,(255,255,255)), 1);
-}
-:host([variant='outlined']) .button{
-    -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color,(17,17,17)), 0.2) inset;
-            box-shadow: 0 0 0 1px rgba(var(--text-color,(17,17,17)), 0.2) inset;
-    background: transparent; 
-    color: var(--accent-color,teal);
-}
-:host([variant='no-outline']) .button{
-    background: inherit; 
-    color: var(--accent-color,teal);
-}
-:host([disabled]){
-    pointer-events: none;
-    cursor: not-allowed;
-}
-.button {
-    position: relative;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    width: 100%;
-    padding: var(--padding);
-    cursor: pointer;
-    -webkit-user-select: none;
-       -moz-user-select: none;
-        -ms-user-select: none;
-            user-select: none;
-    border-radius: var(--border-radius); 
-    -webkit-box-pack: center; 
-        -ms-flex-pack: center; 
-            justify-content: center;
-    transition: box-shadow 0.3s, background-color 0.3s;
-    font-family: inherit;
-    font-size: 0.9rem;
-    font-weight: 500;
-    background-color: var(--background); 
-    -webkit-tap-highlight-color: transparent;
-    outline: none;
-    overflow: hidden;
-    border: none;
-    color: inherit;
-    align-items: center;
-}
-:host([disabled]) .button{
-    pointer-events: none;
-    cursor: not-allowed;
-    opacity: 0.6;
-    color: rgba(var(--text-color,(17,17,17)), 1);
-    background-color: rgba(var(--text-color,(17,17,17)), 0.3);
-}
-@media (hover: hover){
-    :host(:not([disabled])) .button:hover,
-    :host(:focus-within:not([disabled])) .button{
-        -webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);
-        box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);
-    }
-    :host([variant='outlined']:not([disabled])) .button:hover,
-    :host(:focus-within[variant='outlined']:not([disabled])) .button:hover{
-        -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color,(17,17,17)), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12);
-                box-shadow: 0 0 0 1px rgba(var(--text-color,(17,17,17)), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12);
-    }
-}
-@media (hover: none){
-    :host(:not([disabled])) .button:active{
-        -webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);
-                box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);
-    }
-    :host([variant='outlined']) .button:active{
-        -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color,(17,17,17)), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
-                box-shadow: 0 0 0 1px rgba(var(--text-color,(17,17,17)), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
-    }
-}
-</style>
-<div part="button" class="button">
-    <slot></slot>   
-</div>`;
-customElements.define('sm-button',
-    class extends HTMLElement {
-        constructor() {
-            super();
-            this.attachShadow({
-                mode: 'open'
-            }).append(smButton.content.cloneNode(true));
-        }
-        static get observedAttributes() {
-            return ['disabled'];
-        }
-
-        get disabled() {
-            return this.hasAttribute('disabled');
-        }
-
-        set disabled(value) {
-            if (value) {
-                this.setAttribute('disabled', '');
-            } else {
-                this.removeAttribute('disabled');
-            }
-        }
-        focusIn() {
-            this.focus();
-        }
-
-        handleKeyDown(e) {
-            if (!this.hasAttribute('disabled') && (e.key === 'Enter' || e.key === ' ')) {
-                e.preventDefault();
-                this.click();
-            }
-        }
-
-        connectedCallback() {
-            if (!this.hasAttribute('disabled')) {
-                this.setAttribute('tabindex', '0');
-            }
-            this.setAttribute('role', 'button');
-            this.addEventListener('keydown', this.handleKeyDown);
-        }
-        attributeChangedCallback(name) {
-            if (name === 'disabled') {
-                if (this.hasAttribute('disabled')) {
-                    this.removeAttribute('tabindex');
-                } else {
-                    this.setAttribute('tabindex', '0');
-                }
-                this.setAttribute('aria-disabled', this.hasAttribute('disabled'));
-            }
-        }
-    })
-
-    const smForm = document.createElement('template');
-    smForm.innerHTML = `
-            <style>
-            *{
-                padding: 0;
-                margin: 0;
-                box-sizing: border-box;
-            }
-            :host{
-                display: flex;
-                width: 100%;
-            }
-            form{
-                display: grid;
-                gap: var(--gap, 1.5rem);
-                width: 100%;
-            }
-            </style>
-            <form part="form" onsubmit="return false">
-                <slot></slot>
-            </form>
-        `;
-    
-    customElements.define('sm-form', class extends HTMLElement {
-        constructor() {
-            super()
-            this.attachShadow({
-                mode: 'open'
-            }).append(smForm.content.cloneNode(true))
-    
-            this.form = this.shadowRoot.querySelector('form');
-            this.formElements
-            this.requiredElements
-            this.submitButton
-            this.resetButton
-            this.allRequiredValid = false;
-    
-            this.debounce = this.debounce.bind(this)
-            this._checkValidity = this._checkValidity.bind(this)
-            this.handleKeydown = this.handleKeydown.bind(this)
-            this.reset = this.reset.bind(this)
-            this.elementsChanged = this.elementsChanged.bind(this)
-        }
-        debounce(callback, wait) {
-            let timeoutId = null;
-            return (...args) => {
-                window.clearTimeout(timeoutId);
-                timeoutId = window.setTimeout(() => {
-                    callback.apply(null, args);
-                }, wait);
-            };
-        }
-        _checkValidity() {
-            this.allRequiredValid = this.requiredElements.every(elem => elem.isValid)
-            if (!this.submitButton) return;
-            if (this.allRequiredValid) {
-                this.submitButton.disabled = false;
-            }
-            else {
-                this.submitButton.disabled = true;
-            }
-        }
-        handleKeydown(e) {
-            if (e.key === 'Enter' && !e.target.tagName.includes('TEXTAREA')) {
-                if (this.allRequiredValid) {
-                    if (this.submitButton) {
-                        this.submitButton.click()
-                    }
-                    this.dispatchEvent(new CustomEvent('submit', {
-                        bubbles: true,
-                        composed: true,
-                    }))
-                }
-                else {
-                    this.requiredElements.find(elem => !elem.isValid).vibrate()
-                }
-            }
-        }
-        reset() {
-            this.formElements.forEach(elem => elem.reset())
-        }
-        elementsChanged() {
-            this.formElements = [...this.querySelectorAll('sm-input, sm-textarea, sm-checkbox, tags-input, file-input, sm-switch, sm-radio')]
-            this.requiredElements = this.formElements.filter(elem => elem.hasAttribute('required'));
-            this.submitButton = this.querySelector('[variant="primary"], [type="submit"]');
-            this.resetButton = this.querySelector('[type="reset"]');
-            if (this.resetButton) {
-                this.resetButton.addEventListener('click', this.reset);
-            }
-            this._checkValidity()
-        }
-        connectedCallback() {
-            const slot = this.shadowRoot.querySelector('slot')
-            slot.addEventListener('slotchange', this.elementsChanged)
-            this.addEventListener('input', this.debounce(this._checkValidity, 100));
-            this.addEventListener('keydown', this.debounce(this.handleKeydown, 100));
-        }
-        disconnectedCallback() {
-            this.removeEventListener('input', this.debounce(this._checkValidity, 100));
-            this.removeEventListener('keydown', this.debounce(this.handleKeydown, 100));
-        }
-    })
-    
-    const smInput = document.createElement('template')
-    smInput.innerHTML = `
-    <style>
-    *{
-        padding: 0;
-        margin: 0;
-        -webkit-box-sizing: border-box;
-                box-sizing: border-box;
-    } 
-    input[type="search"]::-webkit-search-decoration,
-    input[type="search"]::-webkit-search-cancel-button,
-    input[type="search"]::-webkit-search-results-button,
-    input[type="search"]::-webkit-search-results-decoration { display: none; }
-    input[type=number] {
-    -moz-appearance:textfield;
-    }
-    input[type=number]::-webkit-inner-spin-button, 
-    input[type=number]::-webkit-outer-spin-button { 
-        -webkit-appearance: none;
-        -moz-appearance: none;
-        appearance: none;
-        margin: 0; 
-    }
-    input::-ms-reveal,
-    input::-ms-clear {
-      display: none;
-    }
-    input:invalid{
-        outline: none;
-        -webkit-box-shadow: none;
-                box-shadow: none;
-    }
-    ::-moz-focus-inner{
-    border: none;
-    }
-    :host{
-        display: flex;
-        --success-color: #00C853;
-        --danger-color: red;
-        --width: 100%;
-        --icon-gap: 0.5rem;
-        --border-radius: 0.3rem;
-        --background: rgba(var(--text-color, (17,17,17)), 0.06);
-    }
-    .hide{
-       display: none !important;
-    }
-    button{
-        display: flex;
-        border: none;
-        background: none;
-        padding: 0;
-        border-radius: 1rem;
-        min-width: 0;
-        cursor: pointer;
-    }
-    button:focus{
-        outline: var(--accent-color, teal) solid medium;
-    }
-    .icon {
-        height: 1.4rem;
-        width: 1.4rem;
-        fill: rgba(var(--text-color, (17,17,17)), 0.6);
-    }
-    
-    :host(.round) .input{
-        border-radius: 10rem;
-    }
-    .input {
-        display: flex;
-        cursor: text;
-        min-width: 0;
-        text-align: left;
-                align-items: center;
-        position: relative;
-        gap: var(--icon-gap);
-        padding: var(--padding, 0.6rem 0.8rem);
-        border-radius: var(--border-radius);
-        transition: opacity 0.3s, box-shadow 0.2s;
-        background: var(--background);
-        width: 100%;
-        outline: none;
-        min-height: 3.5rem;
-    }
-    .input.readonly .clear{
-        opacity: 0 !important;
-        margin-right: -2rem;
-        pointer-events: none !important;
-    }
-    .readonly{
-        pointer-events: none;
-    }
-    .input:focus-within:not(.readonly){
-        box-shadow: 0 0 0 0.1rem var(--accent-color,teal) inset !important;
-    }
-    .disabled{
-        pointer-events: none;
-        opacity: 0.6;
-    }
-    .label {
-        grid-area: 1/1/2/2;
-        font-size: inherit;
-        opacity: .7;
-        font-weight: 400;
-        top: 0;
-        transition: -webkit-transform 0.3s;
-        transition: transform 0.3s;
-        transition: transform 0.3s, -webkit-transform 0.3s, color .03;
-            transform-origin: left;
-        pointer-events: none;
-        white-space: nowrap;
-        overflow: hidden;
-        width: 100%;
-        user-select: none;
-        will-change: transform;
-    }
-    .outer-container{
-        position: relative;
-        width: var(--width);
-    }
-    .container{
-        width: 100%;
-        display: grid;
-        grid-template-columns: 1fr auto;
-        position: relative;
-        align-items: center;
-    }    
-    input{
-        grid-area: 1/1/2/2;
-        font-size: inherit;
-        border: none;
-        background: transparent;
-        outline: none;
-        color: rgba(var(--text-color, (17,17,17)), 1);
-        width: 100%;
-        caret-color: var(--accent-color, teal);
-    }
-    :host([animate]) .input:focus-within .container input,
-    .animate-label .container input {
-        -webkit-transform: translateY(0.6rem);
-                -ms-transform: translateY(0.6rem);
-            transform: translateY(0.6rem);
-        }
-      
-        :host([animate]) .input:focus-within .label,
-        .animate-label .label {
-        -webkit-transform: translateY(-0.7em) scale(0.8);
-                -ms-transform: translateY(-0.7em) scale(0.8);
-            transform: translateY(-0.7em) scale(0.8);
-        opacity: 1;
-        color: var(--accent-color,teal)
-    }
-    :host([variant="outlined"]) .input {
-        box-shadow: 0 0 0 1px var(--border-color, rgba(var(--text-color, (17,17,17)), 0.3)) inset;
-        background: rgba(var(--background-color, (255,255,255)), 1);
-    }
-    .animate-label:focus-within:not(.readonly) .label{
-        color: var(--accent-color,teal)
-    }
-    .feedback-text:not(:empty){
-        display: flex;
-        width: 100%;
-        text-align: left;
-        font-size: 0.9rem;
-        align-items: center;
-        padding: 0.8rem 0;
-        color: rgba(var(--text-color, (17,17,17)), 0.8);
-    }
-    .success{
-        color: var(--success-color);
-    }
-    .error{
-        color: var(--danger-color);
-    }
-    .status-icon{
-        margin-right: 0.2rem;
-    }
-    .status-icon--error{
-        fill: var(--danger-color);
-    }
-    .status-icon--success{
-        fill: var(--success-color);
-    }
-    @media (any-hover: hover){
-        .icon:hover{
-            background: rgba(var(--text-color, (17,17,17)), 0.1);
-        }
-    }
-    </style>
-    <div class="outer-container">
-        <label part="input" class="input">
-            <slot name="icon"></slot>
-            <div class="container">
-                <input type="text"/>
-                <div part="placeholder" class="label"></div>
-                <button class="clear hide" title="Clear">
-                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z"/></svg>
-                </button>
-            </div>
-            <slot name="right"></slot>
-        </label>
-        <p class="feedback-text"></p>
-    </div>
-    `;
-    customElements.define('sm-input',
-        class extends HTMLElement {
-    
-            constructor() {
-                super();
-                this.attachShadow({
-                    mode: 'open'
-                }).append(smInput.content.cloneNode(true));
-    
-                this.inputParent = this.shadowRoot.querySelector('.input');
-                this.input = this.shadowRoot.querySelector('input');
-                this.clearBtn = this.shadowRoot.querySelector('.clear');
-                this.label = this.shadowRoot.querySelector('.label');
-                this.feedbackText = this.shadowRoot.querySelector('.feedback-text');
-                this.outerContainer = this.shadowRoot.querySelector('.outer-container');
-                this._helperText = '';
-                this._errorText = '';
-                this.isRequired = false;
-                this.validationFunction = undefined;
-                this.reflectedAttributes = ['value', 'required', 'disabled', 'type', 'inputmode', 'readonly', 'min', 'max', 'pattern', 'minlength', 'maxlength', 'step'];
-    
-                this.reset = this.reset.bind(this);
-                this.clear = this.clear.bind(this);
-                this.focusIn = this.focusIn.bind(this);
-                this.focusOut = this.focusOut.bind(this);
-                this.fireEvent = this.fireEvent.bind(this);
-                this.checkInput = this.checkInput.bind(this);
-                this.vibrate = this.vibrate.bind(this);
-            }
-    
-            static get observedAttributes() {
-                return ['value', 'placeholder', 'required', 'disabled', 'type', 'inputmode', 'readonly', 'min', 'max', 'pattern', 'minlength', 'maxlength', 'step', 'helper-text', 'error-text', 'hiderequired'];
-            }
-    
-            get value() {
-                return this.input.value;
-            }
-    
-            set value(val) {
-                this.input.value = val;
-                this.checkInput();
-                this.fireEvent();
-            }
-    
-            get placeholder() {
-                return this.getAttribute('placeholder');
-            }
-    
-            set placeholder(val) {
-                this.setAttribute('placeholder', val);
-            }
-    
-            get type() {
-                return this.getAttribute('type');
-            }
-    
-            set type(val) {
-                this.setAttribute('type', val);
-            }
-    
-            get validity() {
-                return this.input.validity;
-            }
-    
-            get disabled() {
-                return this.hasAttribute('disabled');
-            }
-            set disabled(value) {
-                if (value)
-                    this.inputParent.classList.add('disabled');
-                else
-                    this.inputParent.classList.remove('disabled');
-            }
-            get readOnly() {
-                return this.hasAttribute('readonly');
-            }
-            set readOnly(value) {
-                if (value) {
-                    this.setAttribute('readonly', '');
-                } else {
-                    this.removeAttribute('readonly');
-                }
-            }
-            set customValidation(val) {
-                this.validationFunction = val;
-            }
-            set errorText(val) {
-                this._errorText = val;
-            }
-            set helperText(val) {
-                this._helperText = val;
-            }
-            get isValid() {
-                if (this.input.value !== '') {
-                    const _isValid = this.input.checkValidity();
-                    let _customValid = true;
-                    if (this.validationFunction) {
-                        _customValid = Boolean(this.validationFunction(this.input.value));
-                    }
-                    if (_isValid && _customValid) {
-                        this.feedbackText.classList.remove('error');
-                        this.feedbackText.classList.add('success');
-                        this.feedbackText.textContent = '';
-                    } else {
-                        if (this._errorText) {
-                            this.feedbackText.classList.add('error');
-                            this.feedbackText.classList.remove('success');
-                            this.feedbackText.innerHTML = `
-                                <svg class="status-icon status-icon--error" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>
-                            ${this._errorText}
-                            `;
-                        }
-                    }
-                    return (_isValid && _customValid);
-                }
-            }
-            reset() {
-                this.value = '';
-            }
-            clear() {
-                this.value = '';
-                this.input.focus();
-            }
-    
-            focusIn() {
-                this.input.focus();
-            }
-    
-            focusOut() {
-                this.input.blur();
-            }
-    
-            fireEvent() {
-                let event = new Event('input', {
-                    bubbles: true,
-                    cancelable: true,
-                    composed: true
-                });
-                this.dispatchEvent(event);
-            }
-    
-            checkInput(e) {
-                if (!this.hasAttribute('readonly')) {
-                    if (this.input.value.trim() !== '') {
-                        this.clearBtn.classList.remove('hide');
-                    } else {
-                        this.clearBtn.classList.add('hide');
-                    }
-                }
-                if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder').trim() === '') return;
-                if (this.input.value !== '') {
-                    if (this.animate)
-                        this.inputParent.classList.add('animate-label');
-                    else
-                        this.label.classList.add('hide');
-                } else {
-                    if (this.animate)
-                        this.inputParent.classList.remove('animate-label');
-                    else
-                        this.label.classList.remove('hide');
-                    this.feedbackText.textContent = '';
-                }
-            }
-            vibrate() {
-                this.outerContainer.animate([
-                    { transform: 'translateX(-1rem)' },
-                    { transform: 'translateX(1rem)' },
-                    { transform: 'translateX(-0.5rem)' },
-                    { transform: 'translateX(0.5rem)' },
-                    { transform: 'translateX(0)' },
-                ], {
-                    duration: 300,
-                    easing: 'ease'
-                });
-            }
-    
-    
-            connectedCallback() {
-                this.animate = this.hasAttribute('animate');
-                this.setAttribute('role', 'textbox');
-                this.input.addEventListener('input', this.checkInput);
-                this.clearBtn.addEventListener('click', this.clear);
-            }
-    
-            attributeChangedCallback(name, oldValue, newValue) {
-                if (oldValue !== newValue) {
-                    if (this.reflectedAttributes.includes(name)) {
-                        if (this.hasAttribute(name)) {
-                            this.input.setAttribute(name, this.getAttribute(name) ? this.getAttribute(name) : '');
-                        }
-                        else {
-                            this.input.removeAttribute(name);
-                        }
-                    }
-                    if (name === 'placeholder') {
-                        this.label.textContent = newValue;
-                        this.setAttribute('aria-label', newValue);
-                    }
-                    else if (this.hasAttribute('value')) {
-                        this.checkInput();
-                    }
-                    else if (name === 'type') {
-                        if (this.hasAttribute('type') && this.getAttribute('type') === 'number') {
-                            this.input.setAttribute('inputmode', 'numeric');
-                        }
-                    }
-                    else if (name === 'helper-text') {
-                        this._helperText = this.getAttribute('helper-text');
-                    }
-                    else if (name === 'error-text') {
-                        this._errorText = this.getAttribute('error-text');
-                    }
-                    else if (name === 'required') {
-                        this.isRequired = this.hasAttribute('required');
-                        if (this.isRequired) {
-                            this.setAttribute('aria-required', 'true');
-                        }
-                        else {
-                            this.setAttribute('aria-required', 'false');
-                        }
-                    }
-                    else if (name === 'readonly') {
-                        if (this.hasAttribute('readonly')) {
-                            this.inputParent.classList.add('readonly');
-                        } else {
-                            this.inputParent.classList.remove('readonly');
-                        }
-                    }
-                    else if (name === 'disabled') {
-                        if (this.hasAttribute('disabled')) {
-                            this.inputParent.classList.add('disabled');
-                        }
-                        else {
-                            this.inputParent.classList.remove('disabled');
-                        }
-                    }
-                }
-            }
-            disconnectedCallback() {
-                this.input.removeEventListener('input', this.checkInput);
-                this.clearBtn.removeEventListener('click', this.clear);
-            }
-        })
-
-const hamburgerMenu=document.createElement("template");hamburgerMenu.innerHTML='\n<style>\n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n} \n:host{\n    display: flex;\n    width: 100%;\n    height: 100%;\n    overflow-y: auto;\n    scrollbar-width: thin;\n    --accent-color: #4d2588;\n    --text-color: 17, 17, 17;\n    --background-color: 255, 255, 255;\n    --padding: 0 0 3rem 0;\n    --backdrop-color: rgba(0,0,0,0.5);\n}\n.backdrop{\n    position: fixed;\n}\n.side-nav{\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n}\n.hide{\n    display: none !important;\n}\n@media screen and (max-width: 640px){\n    :host{\n        position: fixed;\n        z-index: 10;\n    }\n    .side-nav{\n        height: 100%;\n        overflow-y: auto;  \n        width: calc(100% - 4rem);\n        transition: transform 0.3s;\n        background-color: rgba(var(--background-color), 1);\n        box-shadow: 0.5rem 0 2rem rgba(0,0,0, 0.1);\n        z-index: 1;\n    }\n    .side-nav:not(.reveal){\n        transform: translateX(-100%);\n    }\n    .reveal{\n        transform: none;\n    }\n    .backdrop{\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        background-color: var(--backdrop-color);\n        -webkit-transition: opacity 0.3s;\n        -o-transition: opacity 0.3s;\n        transition: opacity 0.3s;\n    }\n}\n@media screen and (min-width: 640px){\n    .backdrop{\n        pointer-events: none;\n    }\n}\n@media (any-hover: hover){\n    ::-webkit-scrollbar{\n        width: 0.5rem;\n    }\n    ::-webkit-scrollbar-thumb{\n        border-radius: 1rem;\n        background: rgba(var(--text-color), 0.3);\n        &:hover{\n            background: rgba(var(--text-color), 0.5);\n        }\n    }\n}\n</style>\n<section class="backdrop hide"></section>\n<nav class="side-nav">\n    <slot></slot>\n</nav>\n';class HamburgerMenu extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(hamburgerMenu.content.cloneNode(!0)),this.resumeScrolling=this.resumeScrolling.bind(this),this.open=this.open.bind(this),this.close=this.close.bind(this),this.sideNav=this.shadowRoot.querySelector(".side-nav"),this.backdrop=this.shadowRoot.querySelector(".backdrop"),this.isOpen=!1,this.animeOptions={duration:300,easing:"ease"}}static get observedAttributes(){return["open"]}resumeScrolling(){const n=document.body.style.top;window.scrollTo(0,-1*parseInt(n||"0")),setTimeout(()=>{document.body.style.overflow="auto",document.body.style.top="initial"},300)}open(){this.isOpen||(document.body.style.overflow="hidden",document.body.style.top=`-${window.scrollY}px`,this.classList.remove("hide"),this.sideNav.classList.add("reveal"),this.backdrop.classList.remove("hide"),this.backdrop.animate([{opacity:0},{opacity:1}],this.animeOptions).onfinish=(()=>{this.isOpen=!0,this.setAttribute("open","")}))}close(){this.isOpen&&(this.sideNav.classList.remove("reveal"),this.backdrop.animate([{opacity:1},{opacity:0}],this.animeOptions).onfinish=(()=>{this.backdrop.classList.add("hide"),this.classList.add("hide"),this.isOpen=!1,this.removeAttribute("open")}))}connectedCallback(){this.backdrop.addEventListener("click",this.close);const n=new ResizeObserver(n=>{window.innerWidth<640&&this.isOpen?this.classList.remove("hide"):this.classList.add("hide"),window.innerWidth>640&&this.classList.remove("hide")});n.observe(this)}disconnectedCallback(){this.backdrop.removeEventListener("click",this.close)}attributeChangedCallback(n,e,t){"open"===n&&this.hasAttribute("open")&&this.open()}}window.customElements.define("hamburger-menu",HamburgerMenu);
-const smMenu=document.createElement("template");smMenu.innerHTML='\n<style>     \n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n}\n:host{\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n}\n.menu{\n    display: -ms-grid;\n    display: grid;\n    place-items: center;\n    height: 2rem;\n    width: 2rem;\n    outline: none;\n}\n.icon {\n    position: absolute;\n    fill: rgba(var(--text-color), 0.7);\n    height: 2.4rem;\n    width: 2.4rem;\n    padding: 0.5rem;\n    border-radius: 2rem;\n    -webkit-transition: background 0.3s;\n    -o-transition: background 0.3s;\n    transition: background 0.3s;\n}      \n.select{\n    position: relative;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    cursor: pointer;\n    width: 100%;\n    -webkit-tap-highlight-color: transparent;\n}\n.menu:focus .icon,\n.focused{\n    background: rgba(var(--text-color), 0.1); \n}\n:host([align-options="left"]) .options{\n    left: 0;\n}\n:host([align-options="right"]) .options{\n    right: 0;\n}\n.options{\n    padding: 0.5rem 0;\n    overflow: hidden auto;\n    position: absolute;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    min-width: -webkit-max-content;\n    min-width: -moz-max-content;\n    min-width: max-content;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    background: rgba(var(--background-color), 1);\n    border-radius: 0.3rem;\n    z-index: 1;\n    -webkit-box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(0,0,0,0.3);\n            box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(0,0,0,0.3);\n    bottom: auto;\n}\n.hide{\n    display: none;\n}\n@media screen and (max-width: 640px){\n    .options{\n        position: fixed;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        top: auto;\n        border-radius: 0.5rem 0.5rem 0 0;\n    }\n}\n@media (hover: hover){\n    .menu:hover .icon{\n        background: rgba(var(--text-color), 0.1); \n    }\n}\n</style>\n<div class="select">\n    <div class="menu" tabindex="0">\n        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 3c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-7c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>\n    </div>\n    <div class="options hide">\n        <slot></slot> \n    </div>\n</div>',customElements.define("sm-menu",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smMenu.content.cloneNode(!0)),this.isOpen=!1,this.availableOptions,this.containerDimensions,this.animOptions={duration:200,easing:"ease"},this.optionList=this.shadowRoot.querySelector(".options"),this.menu=this.shadowRoot.querySelector(".menu"),this.icon=this.shadowRoot.querySelector(".icon"),this.expand=this.expand.bind(this),this.collapse=this.collapse.bind(this),this.toggle=this.toggle.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleClickoutSide=this.handleClickoutSide.bind(this)}static get observedAttributes(){return["value"]}get value(){return this.getAttribute("value")}set value(n){this.setAttribute("value",n)}expand(){this.isOpen||(this.optionList.classList.remove("hide"),this.optionList.animate([{transform:window.innerWidth<640?"translateY(1.5rem)":"translateY(-1rem)",opacity:"0"},{transform:"none",opacity:"1"}],this.animOptions).onfinish=(()=>{this.isOpen=!0,this.icon.classList.add("focused")}))}collapse(){this.isOpen&&(this.optionList.animate([{transform:"none",opacity:"1"},{transform:window.innerWidth<640?"translateY(1.5rem)":"translateY(-1rem)",opacity:"0"}],this.animOptions).onfinish=(()=>{this.isOpen=!1,this.icon.classList.remove("focused"),this.optionList.classList.add("hide")}))}toggle(){this.isOpen?this.collapse():this.expand()}handleKeyDown(n){n.target===this?"ArrowDown"===n.code?(n.preventDefault(),this.availableOptions[0].focus()):"Enter"!==n.code&&"Space"!==n.code||(n.preventDefault(),this.toggle()):"ArrowUp"===n.code?(n.preventDefault(),document.activeElement.previousElementSibling?document.activeElement.previousElementSibling.focus():this.availableOptions[this.availableOptions.length-1].focus()):"ArrowDown"===n.code?(n.preventDefault(),document.activeElement.nextElementSibling?document.activeElement.nextElementSibling.focus():this.availableOptions[0].focus()):"Enter"!==n.code&&"Space"!==n.code||(n.preventDefault(),n.target.click())}handleClickoutSide(n){this.contains(n.target)||2===n.button||this.collapse()}connectedCallback(){this.setAttribute("role","listbox"),this.setAttribute("aria-label","dropdown menu");const n=this.shadowRoot.querySelector(".options slot");n.addEventListener("slotchange",n=>{this.availableOptions=n.target.assignedElements(),this.containerDimensions=this.optionList.getBoundingClientRect()}),this.addEventListener("click",this.toggle),this.addEventListener("keydown",this.handleKeyDown),document.addEventListener("mousedown",this.handleClickoutSide)}disconnectedCallback(){this.removeEventListener("click",this.toggle),this.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("mousedown",this.handleClickoutSide)}});const menuOption=document.createElement("template");menuOption.innerHTML='\n<style>     \n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n}     \n:host{\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    --padding: 0.6rem 1.6rem;\n}\n.option{\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    min-width: 100%;\n    padding: var(--padding);\n    cursor: pointer;\n    overflow-wrap: break-word;\n    white-space: nowrap;\n    outline: none;\n    font-size: 1rem;\n    user-select: none;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n:host(:focus){\n    outline: none;\n    background: rgba(var(--text-color), 0.1);\n}\n@media (any-hover: hover){\n    :host{\n        --padding: 0.8rem 1.6rem;\n    }\n    .option:hover{\n        background: rgba(var(--text-color), 0.1);\n    }\n}\n</style>\n<div class="option">\n    <slot></slot> \n</div>',customElements.define("menu-option",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(menuOption.content.cloneNode(!0))}connectedCallback(){this.setAttribute("role","option"),this.addEventListener("keyup",n=>{"Enter"!==n.code&&"Space"!==n.code||(n.preventDefault(),this.click())})}});
-const smNotifications=document.createElement("template");smNotifications.innerHTML='\n<style>\n    *{\n        padding: 0;\n        margin: 0;\n        -webkit-box-sizing: border-box;\n                box-sizing: border-box;\n    } \n    :host{\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        --accent-color: #4d2588;\n        --text-color: 17, 17, 17;\n        --background-color: 255, 255, 255;\n        --danger-color: red;\n        --icon-height: 1.5rem;\n        --icon-width: 1.5rem;\n    }\n    .hide{\n        opacity: 0 !important;\n        pointer-events: none !important;\n    }\n    .notification-panel{\n        display: grid;\n        width: 100%;\n        gap: 0.5rem;\n        position: fixed;\n        left: 0;\n        bottom: 0;\n        z-index: 100;\n        max-height: 100%;\n        padding: 1rem;\n        overflow: hidden auto;\n        -ms-scroll-chaining: none;\n            overscroll-behavior: contain;\n    }\n    .notification-panel:empty{\n        display:none;\n    }\n    .notification{\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        position: relative;\n        border-radius: 0.3rem;\n        background: rgba(var(--background-color), 1);\n        overflow: hidden;\n        overflow-wrap: break-word;\n        word-wrap: break-word;\n        -ms-word-break: break-all;\n        word-break: break-all;\n        word-break: break-word;\n        -ms-hyphens: auto;\n        -webkit-hyphens: auto;\n        hyphens: auto;\n        max-width: 100%;\n        padding: 1rem;\n        align-items: center;\n    }\n    .icon-container:not(:empty){\n        margin-right: 0.5rem;\n        height: var(--icon-height);\n        width: var(--icon-width);\n    }\n    h4:first-letter,\n    p:first-letter{\n        text-transform: uppercase;\n    }\n    h4{\n        font-weight: 400;\n    }\n    p{\n        line-height: 1.6;\n        -webkit-box-flex: 1;\n            -ms-flex: 1;\n                flex: 1;\n        color: rgba(var(--text-color), 0.9);\n        overflow-wrap: break-word;\n        overflow-wrap: break-word;\n        word-wrap: break-word;\n        -ms-word-break: break-all;\n        word-break: break-all;\n        word-break: break-word;\n        -ms-hyphens: auto;\n        -webkit-hyphens: auto;\n        hyphens: auto;\n        max-width: 100%;\n    }\n    .notification:last-of-type{\n        margin-bottom: 0;\n    }\n    .icon {\n        height: 100%;\n        width: 100%;\n        fill: rgba(var(--text-color), 0.7);\n    }\n    .close{\n        height: 2rem;\n        width: 2rem;\n        border: none;\n        cursor: pointer;\n        margin-left: 1rem;\n        border-radius: 50%;\n        padding: 0.3rem;\n        transition: background-color 0.3s, transform 0.3s;\n        background-color: transparent;\n    }\n    .close:active{\n        transform: scale(0.9);\n    }\n    @media screen and (min-width: 640px){\n        .notification-panel{\n            max-width: 28rem;\n            width: max-content;\n        }\n        .notification{\n            width: auto;\n            border: solid 1px rgba(var(--text-color), 0.2);\n        }\n    }\n    @media (any-hover: hover){\n        ::-webkit-scrollbar{\n            width: 0.5rem;\n        }\n        \n        ::-webkit-scrollbar-thumb{\n            background: rgba(var(--text-color), 0.3);\n            border-radius: 1rem;\n            &:hover{\n                background: rgba(var(--text-color), 0.5);\n            }\n        }\n        .close:hover{\n            background-color: rgba(var(--text-color), 0.1);\n        }\n    }\n</style>\n<div class="notification-panel"></div>\n',customElements.define("sm-notifications",class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}).append(smNotifications.content.cloneNode(!0)),this.notificationPanel=this.shadowRoot.querySelector(".notification-panel"),this.animationOptions={duration:300,fill:"forwards",easing:"cubic-bezier(0.175, 0.885, 0.32, 1.275)"},this.push=this.push.bind(this),this.createNotification=this.createNotification.bind(this),this.removeNotification=this.removeNotification.bind(this),this.clearAll=this.clearAll.bind(this)}randString(n){let t="";const i="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";for(let o=0;o<n;o++)t+=i.charAt(Math.floor(Math.random()*i.length));return t}createNotification(n,t){const{pinned:i=!1,icon:o=""}=t,e=document.createElement("div");e.id=this.randString(8),e.classList.add("notification");let a="";return a+=`\n            <div class="icon-container">${o}</div>\n            <p>${n}</p>\n            `,i&&(e.classList.add("pinned"),a+='\n                <button class="close">\n                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>\n                </button>\n            '),e.innerHTML=a,e}push(n,t={}){const i=this.createNotification(n,t);return this.notificationPanel.append(i),i.animate([{transform:"translateY(1rem)",opacity:"0"},{transform:"none",opacity:"1"}],this.animationOptions),i.id}removeNotification(n){n.animate([{transform:"none",opacity:"1"},{transform:"translateY(0.5rem)",opacity:"0"}],this.animationOptions).onfinish=(()=>{n.remove()})}clearAll(){Array.from(this.notificationPanel.children).forEach(n=>{this.removeNotification(n)})}connectedCallback(){this.notificationPanel.addEventListener("click",n=>{n.target.closest(".close")&&this.removeNotification(n.target.closest(".notification"))});const n=new MutationObserver(n=>{n.forEach(n=>{"childList"===n.type&&n.addedNodes.length&&!n.addedNodes[0].classList.contains("pinned")&&setTimeout(()=>{this.removeNotification(n.addedNodes[0])},5e3)})});n.observe(this.notificationPanel,{childList:!0})}});
-const themeToggle=document.createElement("template");themeToggle.innerHTML='\n    <style>\n    *{\n        padding: 0;\n        margin: 0;\n        box-sizing: border-box;\n    }\n    :host{\n        cursor: pointer;\n        --height: 2.5rem;\n        --width: 2.5rem;\n    }\n    .theme-toggle {\n        display: flex;\n        position: relative;\n        width: 1.4rem;\n        height: 1.4rem;\n        cursor: pointer;\n        -webkit-tap-highlight-color: transparent;\n    }\n    .theme-toggle::after{\n        content: \'\';\n        position: absolute;\n        height: var(--height);\n        width: var(--width);\n        top: 50%;\n        left: 50%;\n        opacity: 0;\n        border-radius: 50%;\n        pointer-events: none;\n        transition: transform 0.3s, opacity 0.3s;\n        transform: translate(-50%, -50%) scale(1.2);\n        background-color: rgba(var(--text-color), 0.12);\n    }\n    :host(:focus-within) .theme-toggle{\n        outline: none;\n    }\n    :host(:focus-within) .theme-toggle::after{\n        opacity: 1;\n        transform: translate(-50%, -50%) scale(1);\n    }\n    .icon {\n        position: absolute;\n        height: 100%;\n        width: 100%;\n        fill: rgba(var(--text-color), 1);\n        transition: transform 0.6s;\n    }\n    \n    .theme-switcher__checkbox {\n        display: none;\n    }\n    :host([checked]) .moon-icon {\n        transform: scale(0) rotate(90deg);\n    }\n    :host(:not([checked])) .sun-icon {\n        transform: scale(0) rotate(-90deg);\n    }\n    </style>\n    <label class="theme-toggle" title="Change theme" tabindex="0">\n        <slot name="light-mode-icon">\n            <svg class="icon moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"\n                height="24">\n                <path fill="none" d="M0 0h24v24H0z" />\n                <path\n                    d="M10 6a8 8 0 0 0 11.955 6.956C21.474 18.03 17.2 22 12 22 6.477 22 2 17.523 2 12c0-5.2 3.97-9.474 9.044-9.955A7.963 7.963 0 0 0 10 6zm-6 6a8 8 0 0 0 8 8 8.006 8.006 0 0 0 6.957-4.045c-.316.03-.636.045-.957.045-5.523 0-10-4.477-10-10 0-.321.015-.64.045-.957A8.006 8.006 0 0 0 4 12zm14.164-9.709L19 2.5v1l-.836.209a2 2 0 0 0-1.455 1.455L16.5 6h-1l-.209-.836a2 2 0 0 0-1.455-1.455L13 3.5v-1l.836-.209A2 2 0 0 0 15.29.836L15.5 0h1l.209.836a2 2 0 0 0 1.455 1.455zm5 5L24 7.5v1l-.836.209a2 2 0 0 0-1.455 1.455L21.5 11h-1l-.209-.836a2 2 0 0 0-1.455-1.455L18 8.5v-1l.836-.209a2 2 0 0 0 1.455-1.455L20.5 5h1l.209.836a2 2 0 0 0 1.455 1.455z" />\n            </svg>\n        </slot>\n        <slot name="dark-mode-icon">\n            <svg class="icon sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">\n                <path fill="none" d="M0 0h24v24H0z" />\n                <path\n                d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z" />\n            </svg>\n        </slot>\n    </label>\n';class ThemeToggle extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(themeToggle.content.cloneNode(!0)),this.isChecked=!1,this.hasTheme="light",this.toggleState=this.toggleState.bind(this),this.fireEvent=this.fireEvent.bind(this),this.handleThemeChange=this.handleThemeChange.bind(this)}static get observedAttributes(){return["checked"]}daylight(){this.hasTheme="light",document.body.dataset.theme="light",this.setAttribute("aria-checked","false")}nightlight(){this.hasTheme="dark",document.body.dataset.theme="dark",this.setAttribute("aria-checked","true")}toggleState(){this.toggleAttribute("checked"),this.fireEvent()}handleKeyDown(e){"Space"===e.code&&this.toggleState()}handleThemeChange(e){e.detail.theme!==this.hasTheme&&("dark"===e.detail.theme?this.setAttribute("checked",""):this.removeAttribute("checked"))}fireEvent(){this.dispatchEvent(new CustomEvent("themechange",{bubbles:!0,composed:!0,detail:{theme:this.hasTheme}}))}connectedCallback(){this.setAttribute("role","switch"),this.setAttribute("aria-label","theme toggle"),"dark"===localStorage.theme?(this.nightlight(),this.setAttribute("checked","")):"light"===localStorage.theme?(this.daylight(),this.removeAttribute("checked")):window.matchMedia("(prefers-color-scheme: dark)").matches?(this.nightlight(),this.setAttribute("checked","")):(this.daylight(),this.removeAttribute("checked")),this.addEventListener("click",this.toggleState),this.addEventListener("keydown",this.handleKeyDown),document.addEventListener("themechange",this.handleThemeChange)}disconnectedCallback(){this.removeEventListener("click",this.toggleState),this.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("themechange",this.handleThemeChange)}attributeChangedCallback(e,t,n){"checked"===e&&(this.hasAttribute("checked")?(this.nightlight(),localStorage.setItem("theme","dark")):(this.daylight(),localStorage.setItem("theme","light")))}}window.customElements.define("theme-toggle",ThemeToggle);
-const fileInput=document.createElement("template");fileInput.innerHTML='\n  \t<style>\n\t\t*{\n\t\t\tpadding: 0;\n\t\t\tmargin: 0;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t\t:host{\n\t\t\t--accent-color: #4d2588;\n\t\t\t--text-color: 17, 17, 17;\n\t\t\t--background-color: 255, 255, 255;\n\t\t\t--border-radius: 0.3rem;\n\t\t\t--button-color: rgba(var(--background-color), 1);\n\t\t\t--button-font-weight: 500;\n\t\t\t--button-background-color: var(--accent-color);\n\t\t}\n\t\t.file-input {\n\t\t\tdisplay: flex;\n\t\t}\n\t\t\n\t\t.file-picker-button {\n            display: flex;\n\t\t\tcursor: pointer;\n\t\t\tuser-select: none;\n            align-items: center;\n\t\t\tpadding: 0.5rem 0.8rem;\n\t\t\tcolor: var(--button-color);\n\t\t\tborder-radius: var(--border-radius);\n\t\t\tfont-weight: var(--button-font-weight);\n\t\t\tbackground-color: var(--button-background-color);\n\t\t}\n\t\t.files-preview-wrapper{\n\t\t\tdisplay: grid;\n\t\t\tgap: 0.5rem;\n\t\t\tlist-style: none;\n\t\t}\n\t\t.files-preview-wrapper:not(:empty){\n            margin-bottom: 1rem;\n\t\t}\n\t\t.file-preview{\n\t\t\tdisplay: grid;\n            gap: 0.5rem;\n            align-items: center;\n\t\t\tpadding: 0.5rem 0.8rem;\n\t\t\tborder-radius: var(--border-radius);\n\t\t\tbackground-color: rgba(var(--text-color), 0.06)\n\t\t}\n\t\t.file-name{\n\t\t}\n        .file-size{\n            font-size: 0.8rem;\n            font-weight: 400;\n            color: rgba(var(--text-color), 0.8);\n        }\n\t\tinput[type=file] {\n\t\t\tdisplay: none;\n\t\t}\n  \t</style>\n\t<ul class="files-preview-wrapper"></ul>\n  \t<label tabindex="0" class="file-input">\n\t\t<div class="file-picker-button"><slot>Choose file</slot></div>\n\t\t<input type="file">\n\t</label>\n',customElements.define("file-input",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(fileInput.content.cloneNode(!0)),this.input=this.shadowRoot.querySelector("input"),this.fileInput=this.shadowRoot.querySelector(".file-input"),this.filesPreviewWrapper=this.shadowRoot.querySelector(".files-preview-wrapper"),this.reflectedAttributes=["accept","multiple","capture","type"],this.reset=this.reset.bind(this),this.formatBytes=this.formatBytes.bind(this),this.createFilePreview=this.createFilePreview.bind(this),this.handleChange=this.handleChange.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this)}static get observedAttributes(){return["accept","multiple","capture","type"]}get files(){return this.input.files}set accept(t){this.setAttribute("accept",t)}set multiple(t){t?this.setAttribute("multiple",""):this.removeAttribute("multiple")}set capture(t){this.setAttribute("capture",t)}set value(t){this.input.value=t}get isValid(){return""!==this.input.value}reset(){this.input.value="",this.filesPreviewWrapper.innerHTML=""}formatBytes(t,e=2){if(0===t)return"0 Bytes";const n=0>e?0:e,i=Math.floor(Math.log(t)/Math.log(1024));return parseFloat((t/Math.pow(1024,i)).toFixed(n))+" "+["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"][i]}createFilePreview(t){const e=document.createElement("li"),{name:n,size:i}=t;return e.className="file-preview",e.innerHTML=`\n\t\t\t<div class="file-name">${n}</div>\n            <h5 class="file-size">${this.formatBytes(i)}</h5>\n\t\t`,e}handleChange(t){this.filesPreviewWrapper.innerHTML="";const e=document.createDocumentFragment();Array.from(t.target.files).forEach(t=>{e.append(this.createFilePreview(t))}),this.filesPreviewWrapper.append(e)}handleKeyDown(t){"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.input.click())}connectedCallback(){this.setAttribute("role","button"),this.setAttribute("aria-label","File upload"),this.input.addEventListener("change",this.handleChange),this.fileInput.addEventListener("keydown",this.handleKeyDown)}attributeChangedCallback(t){this.reflectedAttributes.includes(t)&&(this.hasAttribute(t)?this.input.setAttribute(t,this.getAttribute(t)?this.getAttribute(t):""):this.input.removeAttribute(t))}disconnectedCallback(){this.input.removeEventListener("change",this.handleChange),this.fileInput.removeEventListener("keydown",this.handleKeyDown)}});
-
-const smCarousel=document.createElement("template");smCarousel.innerHTML='\n<style>\n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n} \n:host{\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    --accent-color: #4d2588;\n    --text-color: 17, 17, 17;\n    --background-color: 255, 255, 255;\n    --arrow-left: 1rem;\n    --arrow-right: 1rem;\n    --arrow-top: auto;\n    --arrow-bottom: auto;\n    --nav-icon-fill: rgba(var(--background-color), 1);\n    --nav-background-color: rgba(var(--text-color), 1);\n    --nav-box-shadow: 0 0.2rem 0.2rem #00000020, 0 0.5rem 1rem #00000040;\n    --indicator-top: auto;\n    --indicator-bottom: -1.5rem;\n    --indicator-height: 0.2rem;\n    --indicator-width: 0.4rem;\n    --indicator-border-radius: 0.4rem;\n    --indicators-gap: 0.5rem;\n    --active-indicator-color: var(--accent-color);\n}\n.carousel__button{\n    position: absolute;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    cursor: pointer;\n    min-width: 0;\n    top:  var(--arrow-top);\n    bottom:  var(--arrow-bottom);\n    border: none;\n    background: var(--nav-background-color);\n    -webkit-box-shadow: var(--nav-box-shadow);\n            box-shadow:  var(--nav-box-shadow); \n    -webkit-tap-highlight-color: transparent;\n    transition: transform 0.3s, opacity 0.3s;\n    z-index: 1;\n    border-radius: 3rem;\n    padding: 0.5rem;\n}\nbutton:focus{\n    outline: none;\n}\nbutton:focus-visible{\n    outline: rgba(var(--text-color), 1) 0.1rem solid;\n}\n.carousel__button:active{\n    transform: scale(0.9);\n}\n.carousel__button--left{\n    left: var(--arrow-left);\n}\n.carousel__button--right{\n    right: var(--arrow-right);\n}\n.icon {\n    height: 1.5rem;\n    width: 1.5rem;\n    fill: var(--nav-icon-fill);\n}\n.hide{\n    display: none !important;\n}\n:host([indicator]) .carousel-container{\n    margin-bottom: 2rem;\n}\n.carousel-container{\n    position: relative;\n    display: grid;\n    width: 100%;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.carousel{\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    max-width: 100%;\n    width: 100%;\n    overflow: auto hidden;\n    -ms-scroll-snap-type: x mandatory;\n        scroll-snap-type: x mandatory;\n}\n.indicators{\n    display: -ms-grid;\n    display: grid;\n    grid-auto-flow: column;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    position: absolute;\n    padding: 0.5rem 0;\n    top: var(--indicator-top);\n    bottom: var(--indicator-bottom);\n    gap: var(--indicators-gap);\n    width: 100%;\n}\n.indicator{\n    position: relative;\n    height: var(--indicator-height);\n    width: var(--indicator-width);\n    background: rgba(var(--text-color), 0.3);\n    border-radius: var(--indicator-border-radius);\n    -webkit-transition: 0.2s;\n    -o-transition: 0.2s;\n    transition: 0.2s;\n    cursor: pointer;\n}\n.indicator.active{\n    -webkit-transform: scale(1.5);\n        -ms-transform: scale(1.5);\n            transform: scale(1.5);\n    background: var(--active-indicator-color);\n}\nslot::slotted(*){\n    scroll-snap-align: center;\n}\n:host([align-items="start"]) slot::slotted(*){\n    scroll-snap-align: start;\n}\n:host([align-items="center"]) slot::slotted(*){\n    scroll-snap-align: center;\n}\n:host([align-items="end"]) slot::slotted(*){\n    scroll-snap-align: end;\n}\n@media (hover: hover){\n    .carousel{\n        overflow: hidden;\n    }\n    .carousel__button{\n        opacity: 0.8;\n    }\n    :host(:hover) .carousel__button{\n        opacity: 1;\n    }\n    .left,.right{\n        display: none;\n    }\n    .indicators{\n        transition: gap 0.3s;\n    }\n    .indicators:hover{\n        gap: calc(var(--indicators-gap) * 2);\n    }\n    .indicators:hover .indicator{\n        transform: scale(2);\n    }\n}\n@media (hover: none){\n    ::-webkit-scrollbar-track {\n        -webkit-box-shadow: none !important;\n        background-color: transparent !important;\n    }\n    ::-webkit-scrollbar {\n        height: 0;\n        background-color: transparent;\n    }\n    .carousel{\n        overflow: auto none;\n    }\n    .carousel__button{\n        display: none;\n    }\n    .left,.right{\n        display: block;\n    }\n}\n</style>\n<div class="carousel-container">\n    <button class="carousel__button carousel__button--left hide">\n        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10.828 12l4.95 4.95-1.414 1.414L8 12l6.364-6.364 1.414 1.414z"/></svg>\n    </button>\n    <div part="carousel" class="carousel">\n        <slot></slot>\n    </div>\n    <button class="carousel__button carousel__button--right hide">\n        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z"/></svg>\n    </button>\n    <div class="indicators"></div>\n</div>\n',customElements.define("sm-carousel",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smCarousel.content.cloneNode(!0)),this.isAutoPlaying=!1,this.autoPlayInterval=5e3,this.autoPlayTimeout,this.initialTimeout,this.activeSlideNum=0,this.carouselItems,this.indicators,this.showIndicator=!1,this.carousel=this.shadowRoot.querySelector(".carousel"),this.carouselContainer=this.shadowRoot.querySelector(".carousel-container"),this.carouselSlot=this.shadowRoot.querySelector("slot"),this.navButtonRight=this.shadowRoot.querySelector(".carousel__button--right"),this.navButtonLeft=this.shadowRoot.querySelector(".carousel__button--left"),this.indicatorsContainer=this.shadowRoot.querySelector(".indicators"),this.scrollLeft=this.scrollLeft.bind(this),this.scrollRight=this.scrollRight.bind(this),this.handleIndicatorClick=this.handleIndicatorClick.bind(this),this.showSlide=this.showSlide.bind(this),this.nextSlide=this.nextSlide.bind(this),this.autoPlay=this.autoPlay.bind(this),this.startAutoPlay=this.startAutoPlay.bind(this),this.stopAutoPlay=this.stopAutoPlay.bind(this)}static get observedAttributes(){return["indicator","autoplay","interval"]}scrollLeft(){this.carousel.scrollBy({left:-this.scrollDistance,behavior:"smooth"})}scrollRight(){this.carousel.scrollBy({left:this.scrollDistance,behavior:"smooth"})}showSlide(t){this.carousel.scrollTo({left:this.carouselItems[t].getBoundingClientRect().left-this.carousel.getBoundingClientRect().left+this.carousel.scrollLeft,behavior:"smooth"})}nextSlide(){if(!this.carouselItems)return;let t=this.activeSlideNum+1<this.carouselItems.length?this.activeSlideNum+1:0;this.showSlide(t)}autoPlay(){this.nextSlide(),this.isAutoPlaying&&(this.autoPlayTimeout=setTimeout(()=>{this.autoPlay()},this.autoPlayInterval))}startAutoPlay(){this.setAttribute("autoplay","")}stopAutoPlay(){this.removeAttribute("autoplay")}createIndicator(t){let n=document.createElement("div");return n.classList.add("indicator"),n.dataset.rank=t,n}handleIndicatorClick(t){if(t.target.closest(".indicator")){const n=parseInt(t.target.closest(".indicator").dataset.rank);this.activeSlideNum!==n&&this.showSlide(n)}}handleKeyDown(t){"ArrowLeft"===t.code?this.scrollRight():"ArrowRight"===t.code&&this.scrollRight()}connectedCallback(){let t=document.createDocumentFragment();this.carouselSlot.addEventListener("slotchange",n=>{this.carouselItems=this.carouselSlot.assignedElements(),this.carouselItems.forEach(t=>i.observe(t)),this.carouselItems.length>0?(o.observe(this.carouselItems[0]),e.observe(this.carouselItems[this.carouselItems.length-1])):(navButtonLeft.classList.add("hide"),navButtonRight.classList.add("hide"),o.disconnect(),e.disconnect()),this.showIndicator&&(this.indicatorsContainer.innerHTML="",this.carouselItems.forEach((n,i)=>{t.append(this.createIndicator(i)),n.dataset.rank=i}),this.indicatorsContainer.append(t),this.indicators=this.indicatorsContainer.children)});const n={threshold:.9,root:this},i=new IntersectionObserver(t=>{t.forEach(t=>{if(this.showIndicator){const n=parseInt(t.target.dataset.rank);t.isIntersecting?(this.indicators[n].classList.add("active"),this.activeSlideNum=n):this.indicators[n].classList.remove("active")}})},n),o=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting?this.navButtonLeft.classList.add("hide"):this.navButtonLeft.classList.remove("hide")})},n),e=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting?this.navButtonRight.classList.add("hide"):this.navButtonRight.classList.remove("hide")})},n),s=new ResizeObserver(t=>{t.forEach(t=>{if(t.contentBoxSize){const n=Array.isArray(t.contentBoxSize)?t.contentBoxSize[0]:t.contentBoxSize;this.scrollDistance=.6*n.inlineSize}else this.scrollDistance=.6*t.contentRect.width})});s.observe(this),this.addEventListener("keydown",this.handleKeyDown),this.navButtonRight.addEventListener("click",this.scrollRight),this.navButtonLeft.addEventListener("click",this.scrollLeft),this.indicatorsContainer.addEventListener("click",this.handleIndicatorClick)}attributeChangedCallback(t,n,i){n!==i&&("indicator"===t&&(this.showIndicator=this.hasAttribute("indicator")),"autoplay"===t&&(this.hasAttribute("autoplay")?this.initialTimeout=setTimeout(()=>{this.isAutoPlaying=!0,this.autoPlay()},this.autoPlayInterval):(this.isAutoPlaying=!1,clearTimeout(this.autoPlayTimeout),clearTimeout(this.initialTimeout))),"interval"===t&&(this.hasAttribute("interval")&&""!==this.getAttribute("interval").trim()?this.autoPlayInterval=Math.abs(parseInt(this.getAttribute("interval").trim())):this.autoPlayInterval=5e3))}disconnectedCallback(){this.navButtonRight.removeEventListener("click",this.scrollRight),this.navButtonLeft.removeEventListener("click",this.scrollLeft),this.indicatorsContainer.removeEventListener("click",this.handleIndicatorClick)}});
-const smTabHeader=document.createElement("template");smTabHeader.innerHTML='\n<style>\n    *{\n        padding: 0;\n        margin: 0;\n        -webkit-box-sizing: border-box;\n                box-sizing: border-box;\n    } \n    :host{\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        --accent-color: #4d2588;\n        --text-color: 17, 17, 17;\n        --background-color: 255, 255, 255;\n        --tab-indicator-border-radius: 0.3rem;\n    }\n    .tabs{\n        position: relative;\n        display: -ms-grid;\n        display: grid;\n        width: 100%;\n    }\n    .tab-header{\n        display: -ms-grid;\n        display: grid;\n        grid-auto-flow: column;\n        -webkit-box-pack: start;\n            -ms-flex-pack: start;\n                justify-content: flex-start;\n        gap: 1rem;\n        position: relative;\n        overflow: auto hidden;\n        max-width: 100%;\n        scrollbar-width: 0;\n    }\n    .indicator{\n        position: absolute;\n        left: 0;\n        bottom: 0;\n        height: 0.15rem;\n        border-radius: 1rem 1rem 0 0;  \n        background: var(--accent-color);\n        -webkit-transition: width 0.3s, -webkit-transform 0.3s;\n        transition: width 0.3s, -webkit-transform 0.3s;\n        -o-transition: transform 0.3s, width 0.3s;\n        transition: transform 0.3s, width 0.3s;\n        transition: transform 0.3s, width 0.3s, -webkit-transform 0.3s;\n        pointer-events: none;\n    }\n    :host([variant="tab"]) .indicator{\n        height: 100%;\n        border-radius: var(--tab-indicator-border-radius);\n    }\n    :host([variant="tab"]) .tab-header{\n        border-bottom: none; \n    }\n    .hide-completely{\n        display: none;\n    }\n    :host([variant="tab"]) .tab-header{\n        gap: 0.2rem;\n        display: -ms-inline-grid;\n        display: inline-grid;\n        justify-self: flex-start;\n        border-radius: 0.3rem;\n    }\n    :host([variant="tab"]) slot::slotted(.active){\n        color: rgba(var(--background-color), 1);\n    }\n    slot::slotted(.active){\n        color: var(--accent-color);\n        opacity: 1;\n    }\n    @media (hover: none){\n        .tab-header::-webkit-scrollbar-track {\n            -webkit-box-shadow: none !important;\n            background-color: transparent !important;\n        }\n        .tab-header::-webkit-scrollbar {\n            height: 0;\n            background-color: transparent;\n        }\n    }         \n</style>\n<div part="tab-container" class="tabs">\n    <div part="tab-header" class="tab-header">\n        <slot></slot>\n        <div part="indicator" class="indicator"></div>\n    </div>\n</div>\n',customElements.define("sm-tab-header",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smTabHeader.content.cloneNode(!0)),this.prevTab,this.allTabs,this.activeTab,this.indicator=this.shadowRoot.querySelector(".indicator"),this.tabSlot=this.shadowRoot.querySelector("slot"),this.tabHeader=this.shadowRoot.querySelector(".tab-header"),this.changeTab=this.changeTab.bind(this),this.handleClick=this.handleClick.bind(this),this.handlePanelChange=this.handlePanelChange.bind(this)}fireEvent(t){this.dispatchEvent(new CustomEvent(`switchedtab${this.target}`,{bubbles:!0,detail:{index:parseInt(t)}}))}moveIndiactor(t){this.indicator.setAttribute("style",`width: ${t.width}px; transform: translateX(${t.left-this.tabHeader.getBoundingClientRect().left+this.tabHeader.scrollLeft}px)`)}changeTab(t){t!==this.prevTab&&t.closest("sm-tab")&&(this.prevTab&&this.prevTab.classList.remove("active"),t.classList.add("active"),t.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"}),this.moveIndiactor(t.getBoundingClientRect()),this.prevTab=t,this.activeTab=t)}handleClick(t){t.target.closest("sm-tab")&&(this.changeTab(t.target),this.fireEvent(t.target.dataset.index))}handlePanelChange(t){this.changeTab(this.allTabs[t.detail.index])}connectedCallback(){if(!this.hasAttribute("target")||""===this.getAttribute("target").value)return;this.target=this.getAttribute("target"),this.tabSlot.addEventListener("slotchange",()=>{this.allTabs=this.tabSlot.assignedElements(),this.allTabs.forEach((t,n)=>{t.dataset.index=n})}),this.addEventListener("click",this.handleClick),document.addEventListener(`switchedpanel${this.target}`,this.handlePanelChange);let t=new ResizeObserver(t=>{t.forEach(t=>{if(this.prevTab){let t=this.activeTab.getBoundingClientRect();this.moveIndiactor(t)}})});t.observe(this);let n=new IntersectionObserver(t=>{t.forEach(t=>{if(t.isIntersecting)if(this.indicator.style.transition="none",this.activeTab){let t=this.activeTab.getBoundingClientRect();this.moveIndiactor(t)}else{this.allTabs[0].classList.add("active");let t=this.allTabs[0].getBoundingClientRect();this.moveIndiactor(t),this.fireEvent(0),this.prevTab=this.tabSlot.assignedElements()[0],this.activeTab=this.prevTab}})},{threshold:1});n.observe(this)}disconnectedCallback(){this.removeEventListener("click",this.handleClick),document.removeEventListener(`switchedpanel${this.target}`,this.handlePanelChange)}});const smTab=document.createElement("template");smTab.innerHTML='\n<style>\n    *{\n        padding: 0;\n        margin: 0;\n        -webkit-box-sizing: border-box;\n                box-sizing: border-box;\n    } \n    :host{\n        position: relative;\n        display: -webkit-inline-box;\n        display: -ms-inline-flexbox;\n        display: inline-flex;\n        z-index: 1;\n    }\n    .tab{\n        position: relative;\n        -webkit-user-select: none;\n        -moz-user-select: none;\n            -ms-user-select: none;\n                user-select: none;\n        -webkit-box-pack: center;\n            -ms-flex-pack: center;\n                justify-content: center;\n        cursor: pointer;\n        -webkit-tap-highlight-color: transparent;\n        white-space: nowrap;\n        padding: 0.4rem 0.8rem;\n        font-weight: 500;\n        word-spacing: 0.1rem;\n        text-align: center;\n        -webkit-transition: color 0.3s;\n        -o-transition: color 0.3s;\n        transition: color 0.3s;\n        text-transform: capitalize;\n        height: 100%;\n    }\n    @media (hover: hover){\n        :host(.active) .tab{\n            opacity: 1;\n        }\n        .tab{\n            opacity: 0.7\n        }\n        .tab:hover{\n            opacity: 1\n        }\n    }\n</style>\n<div part="tab" class="tab">\n<slot></slot>\n</div>\n',customElements.define("sm-tab",class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}).append(smTab.content.cloneNode(!0))}});const smTabPanels=document.createElement("template");smTabPanels.innerHTML='\n<style>\n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n} \n:host{\n    width: 100%;\n}\n.panel-container{\n    position: relative;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    scroll-snap-type: x mandatory;\n    content-visibility: auto;\n}\n::slotted(*){\n    min-width: 100%;\n    scroll-snap-align: center;\n}\n@media (any-hover: none) {\n    .panel-container{\n        overflow-x: auto;\n        scrollbar-width: none;\n    }\n    .container {\n        overflow-y: scroll;\n    }\n    ::-webkit-scrollbar {\n        width: 0;\n        height: 0;\n    }\n}\n</style>\n<div part="panel-container" class="panel-container">\n    <slot>Nothing to see here.</slot>\n</div>\n',customElements.define("sm-tab-panels",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smTabPanels.content.cloneNode(!0)),this.isTransitioning=!1,this.panelContainer=this.shadowRoot.querySelector(".panel-container"),this.panelSlot=this.shadowRoot.querySelector("slot"),this.handleTabChange=this.handleTabChange.bind(this)}handleTabChange(t){this.isTransitioning=!0,this.panelContainer.scrollTo({left:this.allPanels[t.detail.index].getBoundingClientRect().left-this.panelContainer.getBoundingClientRect().left+this.panelContainer.scrollLeft,behavior:"smooth"}),setTimeout(()=>{this.isTransitioning=!1},300)}fireEvent(t){this.dispatchEvent(new CustomEvent(`switchedpanel${this.id}`,{bubbles:!0,detail:{index:parseInt(t)}}))}connectedCallback(){this.panelSlot.addEventListener("slotchange",()=>{this.allPanels=this.panelSlot.assignedElements(),this.allPanels.forEach((n,e)=>{n.dataset.index=e,t.observe(n)})}),document.addEventListener(`switchedtab${this.id}`,this.handleTabChange);const t=new IntersectionObserver(t=>{t.forEach(t=>{!this.isTransitioning&&t.isIntersecting&&this.fireEvent(t.target.dataset.index)})},{threshold:.6})}disconnectedCallback(){intersectionObserver.disconnect(),document.removeEventListener(`switchedtab${this.id}`,this.handleTabChange)}});
-const smCheckbox=document.createElement("template");smCheckbox.innerHTML='\n<style>\n    *{\n        padding: 0;\n        margin: 0;\n        -webkit-box-sizing: border-box;\n                box-sizing: border-box;\n    } \n    :host{\n        display: -webkit-inline-box;\n        display: -ms-inline-flexbox;\n        display: inline-flex;\n        --accent-color: #4d2588;\n        --text-color: 17, 17, 17;\n        --background-color: 255, 255, 255;\n        --height: 1.2rem;\n        --width: 1.2rem;\n        --border-radius: 0.2rem;\n        --border-color: rgba(var(--text-color), 0.7);\n    }\n    :host([disabled]) {\n        opacity: 0.6;\n        user-select: none;\n        pointer-events: none;\n    }\n    .checkbox {\n        position: relative;\n        display:-webkit-box;\n        display:-ms-flexbox;\n        display:flex;\n        -webkit-box-align: center;\n            -ms-flex-align: center;\n                align-items: center;\n        cursor: pointer;\n        outline: none;\n        -webkit-tap-highlight-color: transparent;\n    }\n    \n    .checkbox:focus-visible{\n        outline: auto;\n    }\n    .checkbox:active .icon,\n    .checkbox:focus-within .icon{\n        box-shadow: 0 0 0 0.1rem var(--accent-color) inset;\n    }\n    \n    input {\n        display: none;\n    }\n    \n    .checkmark {\n        stroke-dashoffset: -65;\n        stroke-dasharray: 65;\n        -webkit-transition: stroke-dashoffset 0.3s; \n        -o-transition: stroke-dashoffset 0.3s; \n        transition: stroke-dashoffset 0.3s;\n    }\n    \n    :host([checked]) .checkmark {\n        stroke-dashoffset: 0;\n        stroke: rgba(var(--background-color), 1);\n    }\n    :host([checked]) .icon {\n        background: var(--accent-color);\n        box-shadow: 0 0 0 0.1rem var(--accent-color) inset;\n    }    \n    .icon {\n        fill: none;\n        height: var(--height);\n        width: var(--width);\n        padding: 0.1rem;\n        stroke-width: 8; \n        stroke: var(--border-color);\n        overflow: visible;\n        stroke-linecap: round;\n        stroke-linejoin: round;\n        -webkit-transition: background 0.3s;\n        -o-transition: background 0.3s;\n        transition: background 0.3s;\n        border-radius: var(--border-radius);\n        box-shadow: 0 0 0 0.1rem var(--border-color) inset;\n    }\n</style>\n<label class="checkbox">\n    <svg class="icon" viewBox="0 0 64 64">\n        <path class="checkmark" d="M50.52,19.56,26,44.08,13.48,31.56" />\n    </svg>\n    <slot></slot>\n</label>',customElements.define("sm-checkbox",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smCheckbox.content.cloneNode(!0)),this.defaultState,this.checkbox=this.shadowRoot.querySelector(".checkbox"),this.reset=this.reset.bind(this),this.dispatch=this.dispatch.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleClick=this.handleClick.bind(this)}static get observedAttributes(){return["value","disabled","checked"]}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get checked(){return this.hasAttribute("checked")}set checked(e){e?this.setAttribute("checked",""):this.removeAttribute("checked")}set value(e){this.setAttribute("value",e)}get value(){return this.getAttribute("value")}focusIn(){this.focus()}reset(){this.value=this.defaultState}dispatch(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0}))}handleKeyDown(e){" "===e.key&&(e.preventDefault(),this.click())}handleClick(e){this.toggleAttribute("checked")}connectedCallback(){this.hasAttribute("disabled")||this.setAttribute("tabindex","0"),this.setAttribute("role","checkbox"),this.defaultState=this.hasAttribute("checked"),this.hasAttribute("checked")||this.setAttribute("aria-checked","false"),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("click",this.handleClick)}attributeChangedCallback(e,t,n){t!==n&&("checked"===e?(this.setAttribute("aria-checked",this.hasAttribute("checked")),this.dispatch()):"disabled"===e&&(this.hasAttribute("disabled")?this.removeAttribute("tabindex"):this.setAttribute("tabindex","0")))}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("change",this.handleClick)}});
-const smCopy=document.createElement("template");smCopy.innerHTML='\n<style>     \n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n}       \n:host{\n    display: -webkit-box;\n    display: flex;\n    --accent-color: #4d2588;\n    --text-color: 17, 17, 17;\n    --background-color: 255, 255, 255;\n    --padding: 0;\n    --background-color: inherit;\n    --button-background-color: rgba(var(--text-color), 0.2);\n}\n.copy{\n    display: grid;\n    width: 100%;\n    gap: 0.5rem;\n    padding: var(--padding);\n    align-items: center;\n    grid-template-columns: minmax(0, 1fr) auto;\n}\n:host(:not([clip-text])) .copy-content{\n    overflow-wrap: break-word;\n    word-wrap: break-word;\n}\n:host([clip-text]) .copy-content{\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.copy-button{\n    display: inline-flex;\n    justify-content: center;\n    cursor: pointer;\n    border: none;\n    padding: 0.4rem;\n    background-color: inherit;\n    border-radius: var(--button-border-radius, 0.3rem);\n}\n.copy-button:active{\n    background-color: var(--button-background-color);\n}\n.icon{\n    height: 1.2rem;\n    width: 1.2rem;\n    fill: rgba(var(--text-color), 0.8);\n}\n@media (any-hover: hover){\n    .copy:hover .copy-button{\n        opacity: 1;\n    }\n    .copy-button{\n        opacity: 0.6;\n    }\n    .copy-button:hover{\n        background-color: var(--button-background-color);\n    }\n}\n</style>\n<section class="copy">\n    <p class="copy-content"></p>\n    <button part="button" class="copy-button" title="copy">\n        <slot name="copy-icon">\n            <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"/></svg>\n        </slot>\n    </button>\n</section>\n',customElements.define("sm-copy",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smCopy.content.cloneNode(!0)),this.copyContent=this.shadowRoot.querySelector(".copy-content"),this.copyButton=this.shadowRoot.querySelector(".copy-button"),this.copy=this.copy.bind(this)}static get observedAttributes(){return["value"]}set value(n){this.setAttribute("value",n)}get value(){return this.getAttribute("value")}fireEvent(){this.dispatchEvent(new CustomEvent("copy",{composed:!0,bubbles:!0,cancelable:!0}))}copy(){navigator.clipboard.writeText(this.copyContent.textContent).then(n=>this.fireEvent()).catch(n=>console.error(n))}connectedCallback(){this.copyButton.addEventListener("click",this.copy)}attributeChangedCallback(n,t,o){"value"===n&&(this.copyContent.textContent=o)}disconnectedCallback(){this.copyButton.removeEventListener("click",this.copy)}});
-
-class Stack {
-    constructor() {
-        this.items = [];
-    }
-    push(element) {
-        this.items.push(element);
-    }
-    pop() {
-        if (this.items.length == 0)
-            return "Underflow";
-        return this.items.pop();
-    }
-    peek() {
-        return this.items[this.items.length - 1];
-    }
-}
-const popupStack = new Stack();
-
-const smPopup = document.createElement('template');
-smPopup.innerHTML = `
-<style>
-*{
-    padding: 0;
-    margin: 0;
-    -webkit-box-sizing: border-box;
-            box-sizing: border-box;
-} 
-:host{
-    position: fixed;
-    display: -ms-grid;
-    display: grid;
-    z-index: 10;
-    --width: 100%;
-    --height: auto;
-    --min-width: auto;
-    --min-height: auto;
-    --backdrop-background: rgba(0, 0, 0, 0.6);
-    --border-radius: 0.8rem 0.8rem 0 0;
-}
-.popup-container{
-    display: -ms-grid;
-    display: grid;
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    place-items: center;
-    z-index: 10;
-    touch-action: none;
-}
-:host(.stacked) .popup{
-    -webkit-transform: scale(0.9) translateY(-2rem) !important;
-            transform: scale(0.9) translateY(-2rem) !important;
-}
-.background{
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    pointer-events: none;
-    background: var(--backdrop-background);
-    -webkit-transition: opacity 0.3s;
-    -o-transition: opacity 0.3s;
-    transition: opacity 0.3s;
-}
-.popup{
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-            flex-direction: column;
-    position: relative;
-    -ms-flex-item-align: end;
-        align-self: flex-end;
-    -webkit-box-align: start;
-        -ms-flex-align: start;
-            align-items: flex-start;
-    width: var(--width);
-    min-width: var(--min-width);
-    height: var(--height);
-    min-height: var(--min-height);
-    max-height: 90vh;
-    border-radius: var(--border-radius);
-    background: rgba(var(--background-color,(255,255,255)), 1);
-    -webkit-box-shadow: 0 -1rem 2rem #00000020;
-            box-shadow: 0 -1rem 2rem #00000020;
-}
-.container-header{
-    display: -webkit-box;
-    display: flex;
-    width: 100%;
-    touch-action: none;
-    -webkit-box-align: center;
-        -ms-flex-align: center;
-            align-items: center;
-}
-.popup-top{
-    display: -webkit-box;
-    display: flex;
-    width: 100%;
-}
-.popup-body{
-    display: -webkit-box;
-    display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-            flex-direction: column;
-    -webkit-box-flex: 1;
-        -ms-flex: 1;
-            flex: 1;
-    width: 100%;
-    padding: var(--body-padding, 1.5rem);
-    overflow-y: auto;
-}
-.hide{
-    display:none;
-}
-@media screen and (min-width: 640px){
-    :host{
-        --border-radius: 0.5rem;
-    }
-    .popup{
-        -ms-flex-item-align: center;
-            -ms-grid-row-align: center;
-            align-self: center;
-        border-radius: var(--border-radius);
-        height: var(--height);
-        -webkit-box-shadow: 0 3rem 2rem -0.5rem #00000040;
-                box-shadow: 0 3rem 2rem -0.5rem #00000040;
-    }
-}
-@media screen and (max-width: 640px){
-    .popup-top{
-        -webkit-box-orient: vertical;
-        -webkit-box-direction: normal;
-                flex-direction: column;
-        -webkit-box-align: center;
-                align-items: center;
-    }
-    .handle{
-        height: 0.3rem;
-        width: 2rem;
-        background: rgba(var(--text-color,(17,17,17)), .4);
-        border-radius: 1rem;
-        margin: 0.5rem 0;
-    }
-}
-@media (any-hover: hover){
-    ::-webkit-scrollbar{
-        width: 0.5rem;
-    }
-    
-    ::-webkit-scrollbar-thumb{
-        background: rgba(var(--text-color,(17,17,17)), 0.3);
-        border-radius: 1rem;
-        &:hover{
-            background: rgba(var(--text-color,(17,17,17)), 0.5);
-        }
-    }
-}
-</style>
-<div class="popup-container hide" role="dialog">
-    <div part="background" class="background"></div>
-    <div part="popup" class="popup">
-        <div part="popup-header" class="popup-top">
-            <div class="handle"></div>
-            <slot name="header"></slot>
-        </div>
-        <div part="popup-body" class="popup-body">
-            <slot></slot>
-        </div>
-    </div>
-</div>
-`;
-customElements.define('sm-popup', class extends HTMLElement {
-    constructor() {
-        super();
-        this.attachShadow({
-            mode: 'open'
-        }).append(smPopup.content.cloneNode(true));
-
-        this.allowClosing = false;
-        this.isOpen = false;
-        this.pinned = false;
-        this.offset = 0;
-        this.touchStartY = 0;
-        this.touchEndY = 0;
-        this.touchStartTime = 0;
-        this.touchEndTime = 0;
-        this.touchEndAnimation = undefined;
-        this.focusable
-        this.autoFocus
-        this.mutationObserver
-
-        this.popupContainer = this.shadowRoot.querySelector('.popup-container');
-        this.backdrop = this.shadowRoot.querySelector('.background');
-        this.popup = this.shadowRoot.querySelector('.popup');
-        this.popupBodySlot = this.shadowRoot.querySelector('.popup-body slot');
-        this.popupHeader = this.shadowRoot.querySelector('.popup-top');
-
-        this.resumeScrolling = this.resumeScrolling.bind(this);
-        this.setStateOpen = this.setStateOpen.bind(this);
-        this.show = this.show.bind(this);
-        this.hide = this.hide.bind(this);
-        this.handleTouchStart = this.handleTouchStart.bind(this);
-        this.handleTouchMove = this.handleTouchMove.bind(this);
-        this.handleTouchEnd = this.handleTouchEnd.bind(this);
-        this.detectFocus = this.detectFocus.bind(this);
-    }
-
-    static get observedAttributes() {
-        return ['open'];
-    }
-
-    get open() {
-        return this.isOpen;
-    }
-
-    animateTo(element, keyframes, options) {
-        const anime = element.animate(keyframes, { ...options, fill: 'both' })
-        anime.finished.then(() => {
-            anime.commitStyles()
-            anime.cancel()
-        })
-        return anime
-    }
-
-    resumeScrolling() {
-        const scrollY = document.body.style.top;
-        window.scrollTo(0, parseInt(scrollY || '0') * -1);
-        document.body.style.overflow = '';
-        document.body.style.top = 'initial';
-    }
-
-    setStateOpen() {
-        if (!this.isOpen || this.offset) {
-            const animOptions = {
-                duration: 300,
-                easing: 'ease'
-            }
-            const initialAnimation = (window.innerWidth > 640) ? 'scale(1.1)' : `translateY(${this.offset ? `${this.offset}px` : '100%'})`
-            this.animateTo(this.popup, [
-                {
-                    opacity: this.offset ? 1 : 0,
-                    transform: initialAnimation
-                },
-                {
-                    opacity: 1,
-                    transform: 'none'
-                },
-            ], animOptions)
-
-        }
-    }
-
-    show(options = {}) {
-        const { pinned = false } = options;
-        if (!this.isOpen) {
-            const animOptions = {
-                duration: 300,
-                easing: 'ease'
-            }
-            popupStack.push({
-                popup: this,
-                permission: pinned
-            });
-            if (popupStack.items.length > 1) {
-                this.animateTo(popupStack.items[popupStack.items.length - 2].popup.shadowRoot.querySelector('.popup'), [
-                    { transform: 'none' },
-                    { transform: (window.innerWidth > 640) ? 'scale(0.95)' : 'translateY(-1.5rem)' },
-                ], animOptions)
-            }
-            this.popupContainer.classList.remove('hide');
-            if (!this.offset)
-                this.backdrop.animate([
-                    { opacity: 0 },
-                    { opacity: 1 },
-                ], animOptions)
-            this.setStateOpen()
-            this.dispatchEvent(
-                new CustomEvent("popupopened", {
-                    bubbles: true,
-                    detail: {
-                        popup: this,
-                    }
-                })
-            );
-            this.pinned = pinned;
-            this.isOpen = true;
-            document.body.style.overflow = 'hidden';
-            document.body.style.top = `-${window.scrollY}px`;
-            const elementToFocus = this.autoFocus || this.focusable[0];
-            elementToFocus.tagName.includes('SM-') ? elementToFocus.focusIn() : elementToFocus.focus();
-            if (!this.hasAttribute('open'))
-                this.setAttribute('open', '');
-        }
-    }
-    hide() {
-        const animOptions = {
-            duration: 150,
-            easing: 'ease'
-        }
-        this.backdrop.animate([
-            { opacity: 1 },
-            { opacity: 0 }
-        ], animOptions)
-        this.animateTo(this.popup, [
-            {
-                opacity: 1,
-                transform: (window.innerWidth > 640) ? 'none' : `translateY(${this.offset ? `${this.offset}px` : '0'})`
-            },
-            {
-                opacity: 0,
-                transform: (window.innerWidth > 640) ? 'scale(1.1)' : 'translateY(100%)'
-            },
-        ], animOptions).finished
-            .finally(() => {
-                this.popupContainer.classList.add('hide');
-                this.popup.style = ''
-                this.removeAttribute('open');
-
-                if (this.forms.length) {
-                    this.forms.forEach(form => form.reset());
-                }
-                this.dispatchEvent(
-                    new CustomEvent("popupclosed", {
-                        bubbles: true,
-                        detail: {
-                            popup: this,
-                        }
-                    })
-                );
-                this.isOpen = false;
-            })
-        popupStack.pop();
-        if (popupStack.items.length) {
-            this.animateTo(popupStack.items[popupStack.items.length - 1].popup.shadowRoot.querySelector('.popup'), [
-                { transform: (window.innerWidth > 640) ? 'scale(0.95)' : 'translateY(-1.5rem)' },
-                { transform: 'none' },
-            ], animOptions)
-
-        } else {
-            this.resumeScrolling();
-        }
-    }
-
-    handleTouchStart(e) {
-        this.offset = 0
-        this.popupHeader.addEventListener('touchmove', this.handleTouchMove, { passive: true });
-        this.popupHeader.addEventListener('touchend', this.handleTouchEnd, { passive: true });
-        this.touchStartY = e.changedTouches[0].clientY;
-        this.touchStartTime = e.timeStamp;
-    }
-
-    handleTouchMove(e) {
-        if (this.touchStartY < e.changedTouches[0].clientY) {
-            this.offset = e.changedTouches[0].clientY - this.touchStartY;
-            this.touchEndAnimation = window.requestAnimationFrame(() => {
-                this.popup.style.transform = `translateY(${this.offset}px)`;
-            });
-        }
-    }
-
-    handleTouchEnd(e) {
-        this.touchEndTime = e.timeStamp;
-        cancelAnimationFrame(this.touchEndAnimation);
-        this.touchEndY = e.changedTouches[0].clientY;
-        this.threshold = this.popup.getBoundingClientRect().height * 0.3;
-        if (this.touchEndTime - this.touchStartTime > 200) {
-            if (this.touchEndY - this.touchStartY > this.threshold) {
-                if (this.pinned) {
-                    this.setStateOpen();
-                    return;
-                } else
-                    this.hide();
-            } else {
-                this.setStateOpen();
-            }
-        } else {
-            if (this.touchEndY > this.touchStartY)
-                if (this.pinned) {
-                    this.setStateOpen();
-                    return;
-                }
-                else
-                    this.hide();
-        }
-        this.popupHeader.removeEventListener('touchmove', this.handleTouchMove, { passive: true });
-        this.popupHeader.removeEventListener('touchend', this.handleTouchEnd, { passive: true });
-    }
-
-
-    detectFocus(e) {
-        if (e.key === 'Tab') {
-            const lastElement = this.focusable[this.focusable.length - 1];
-            const firstElement = this.focusable[0];
-            if (e.shiftKey && document.activeElement === firstElement) {
-                e.preventDefault();
-                lastElement.tagName.includes('SM-') ? lastElement.focusIn() : lastElement.focus();
-            } else if (!e.shiftKey && document.activeElement === lastElement) {
-                e.preventDefault();
-                firstElement.tagName.includes('SM-') ? firstElement.focusIn() : firstElement.focus();
-            }
-        }
-    }
-
-    updateFocusableList() {
-        this.focusable = this.querySelectorAll('sm-button:not([disabled]), button:not([disabled]), [href], sm-input, input, sm-select, select, sm-checkbox, sm-textarea, textarea, [tabindex]:not([tabindex="-1"])')
-        this.autoFocus = this.querySelector('[autofocus]')
-    }
-
-    connectedCallback() {
-        this.popupBodySlot.addEventListener('slotchange', () => {
-            this.forms = this.querySelectorAll('sm-form');
-            this.updateFocusableList()
-        });
-        this.popupContainer.addEventListener('mousedown', e => {
-            if (e.target === this.popupContainer && !this.pinned) {
-                if (this.pinned) {
-                    this.setStateOpen();
-                } else
-                    this.hide();
-            }
-        });
-
-        const resizeObserver = new ResizeObserver(entries => {
-            for (let entry of entries) {
-                if (entry.contentBoxSize) {
-                    // Firefox implements `contentBoxSize` as a single content rect, rather than an array
-                    const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize;
-                    this.threshold = contentBoxSize.blockSize.height * 0.3;
-                } else {
-                    this.threshold = entry.contentRect.height * 0.3;
-                }
-            }
-        });
-        resizeObserver.observe(this);
-
-        this.mutationObserver = new MutationObserver(entries => {
-            this.updateFocusableList()
-        })
-        this.mutationObserver.observe(this, { attributes: true, childList: true, subtree: true })
-
-        this.addEventListener('keydown', this.detectFocus);
-        this.popupHeader.addEventListener('touchstart', this.handleTouchStart, { passive: true });
-    }
-    disconnectedCallback() {
-        this.removeEventListener('keydown', this.detectFocus);
-        resizeObserver.unobserve();
-        this.mutationObserver.disconnect()
-        this.popupHeader.removeEventListener('touchstart', this.handleTouchStart, { passive: true });
-    }
-    attributeChangedCallback(name) {
-        if (name === 'open') {
-            if (this.hasAttribute('open')) {
-                this.show();
-            }
-        }
-    }
-});
-
-//switch
-
-const smSwitch = document.createElement('template')
-smSwitch.innerHTML = `	
-<style>
-    *{
-        -webkit-box-sizing: border-box;
-                box-sizing: border-box;
-        padding: 0;
-        margin: 0;
-    }
-    
-    :host{
-        display: -webkit-inline-box;
-        display: -ms-inline-flexbox;
-        display: inline-flex;
-    }
-    label{
-        display: -webkit-box;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-box-align: center;
-            -ms-flex-align: center;
-                align-items: center;
-        width: 100%;
-        outline: none;
-        cursor: pointer;
-        -webkit-tap-highlight-color: transparent;
-    }
-    :host([disabled]) {
-        cursor: not-allowed;
-        opacity: 0.6;
-        pointer-events: none;
-    }
-    .switch {
-        position: relative;
-        display: -webkit-box;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-box-align: center;
-            -ms-flex-align: center;
-                align-items: center;
-        width: 2.4rem;
-        flex-shrink: 0;
-        margin-left: auto;
-        padding: 0.2rem;
-        cursor: pointer;
-        border-radius: 2rem;
-    }
-    
-    input {
-        display: none;
-    }
-    
-    .track {
-        position: absolute;
-        left: 0;
-        right: 0;
-        height: 1.4rem;
-        -webkit-transition: background 0.3s;
-        -o-transition: background 0.3s;
-        transition: background 0.3s;
-        background: rgba(var(--text-color,inherit), 0.4);
-        -webkit-box-shadow: 0 0.1rem 0.3rem #00000040 inset;
-                box-shadow: 0 0.1rem 0.3rem #00000040 inset;
-        border-radius: 1rem;
-    }
-    
-    label:active .thumb::after,
-    label:focus-within .thumb::after{
-        opacity: 1;
-    }
-    
-    .thumb::after{
-        content: '';
-        display: -webkit-box;
-        display: -ms-flexbox;
-        display: flex;
-        position: absolute;
-        height: 2.6rem;
-        width: 2.6rem;
-        background: rgba(var(--text-color,inherit), 0.2);
-        border-radius: 2rem;
-        opacity: 0;
-        -webkit-transition: opacity 0.3s;
-        -o-transition: opacity 0.3s;
-        transition: opacity 0.3s;
-    }
-    
-    .thumb {
-        position: relative;
-        display: -webkit-inline-box;
-        display: -ms-inline-flexbox;
-        display: inline-flex;
-        height: 1rem;
-        width: 1rem;
-        -webkit-box-pack: center;
-            -ms-flex-pack: center;
-                justify-content: center;
-        -webkit-box-align: center;
-            -ms-flex-align: center;
-                align-items: center;
-        border-radius: 1rem;
-        -webkit-box-shadow: 0 0.1rem 0.4rem #00000060;
-                box-shadow: 0 0.1rem 0.4rem #00000060;
-        -webkit-transition: -webkit-transform 0.3s;
-        transition: -webkit-transform 0.3s;
-        -o-transition: transform 0.3s;
-        transition: transform 0.3s;
-        transition: transform 0.3s, -webkit-transform 0.3s;
-        border: solid 0.3rem white;
-    }
-    
-    input:checked ~ .thumb {
-        -webkit-transform: translateX(100%);
-            -ms-transform: translateX(100%);
-                transform: translateX(100%);
-    }
-    
-    input:checked ~ .track {
-        background: var(--accent-color, teal);
-    }
-</style>
-<label tabindex="0">
-    <slot name="left"></slot>
-    <div part="switch" class="switch">
-        <input type="checkbox">
-        <div class="track"></div>
-        <div class="thumb"></div>
-    </div>
-    <slot name="right"></slot>
-</label>`
-
-customElements.define('sm-switch', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({
-            mode: 'open'
-        }).append(smSwitch.content.cloneNode(true))
-        this.switch = this.shadowRoot.querySelector('.switch');
-        this.input = this.shadowRoot.querySelector('input')
-        this.isChecked = false
-        this.isDisabled = false
-
-        this.dispatch = this.dispatch.bind(this)
-    }
-
-    static get observedAttributes() {
-        return ['disabled', 'checked']
-    }
-
-    get disabled() {
-        return this.isDisabled
-    }
-
-    set disabled(val) {
-        if (val) {
-            this.setAttribute('disabled', '')
-        } else {
-            this.removeAttribute('disabled')
-        }
-    }
-
-    get checked() {
-        return this.isChecked
-    }
-
-    set checked(value) {
-        if (value) {
-            this.setAttribute('checked', '')
-        } else {
-            this.removeAttribute('checked')
-        }
-    }
-    get value() {
-        return this.isChecked
-    }
-
-    reset() {
-
-    }
-
-    dispatch() {
-        this.dispatchEvent(new CustomEvent('change', {
-            bubbles: true,
-            composed: true,
-            detail: {
-                value: this.isChecked
-            }
-        }))
-    }
-
-    connectedCallback() {
-        this.addEventListener('keydown', e => {
-            if (e.key === ' ' && !this.isDisabled) {
-                e.preventDefault()
-                this.input.click()
-            }
-        })
-        this.input.addEventListener('click', e => {
-            if (this.input.checked)
-                this.checked = true
-            else
-                this.checked = false
-            this.dispatch()
-        })
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (oldValue !== newValue) {
-            if (name === 'disabled') {
-                if (this.hasAttribute('disabled')) {
-                    this.disabled = true
-                }
-                else {
-                    this.disabled = false
-                }
-            }
-            else if (name === 'checked') {
-                if (this.hasAttribute('checked')) {
-                    this.isChecked = true
-                    this.input.checked = true
-                }
-                else {
-                    this.isChecked = false
-                    this.input.checked = false
-                }
-            }
-        }
-    }
-
-})
\ No newline at end of file
+// Components downloaded: button,copy,form,input,notifications,popup,switch,spinner,theme-toggle
+const smButton = document.createElement("template"); smButton.innerHTML = "<style> *{ padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box;} :host{ display: inline-flex; width: auto; --padding: 0.6rem 1.2rem; --border-radius: 0.3rem; --background: rgba(var(--text-color, (17,17,17)), 0.1);}:host([variant='primary']) .button{ background: var(--accent-color,teal); color: rgba(var(--background-color, (255,255,255)), 1);}:host([variant='outlined']) .button{ box-shadow: 0 0 0 1px rgba(var(--text-color, (17,17,17)), 0.2) inset; background: transparent;  color: var(--accent-color,teal);}:host([variant='no-outline']) .button{ background: inherit;  color: var(--accent-color,teal);}:host([disabled]){ pointer-events: none; cursor: not-allowed;}.button { position: relative; display: flex; width: 100%; padding: var(--padding); cursor: pointer; user-select: none; border-radius: var(--border-radius);  justify-content: center; transition: box-shadow 0.3s, background-color 0.3s; font-family: inherit; font-size: 0.9rem; font-weight: 500; background-color: var(--background);  -webkit-tap-highlight-color: transparent; outline: none; overflow: hidden; border: none; color: inherit; align-items: center;}:host([disabled]) .button{ pointer-events: none; cursor: not-allowed; opacity: 0.6; color: rgba(var(--text-color, (17,17,17)), 1); background-color: rgba(var(--text-color, (17,17,17)), 0.3);}@media (hover: hover){ :host(:not([disabled])) .button:hover, :host(:focus-within:not([disabled])) .button{ -webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12); box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12); } :host([variant='outlined']:not([disabled])) .button:hover, :host(:focus-within[variant='outlined']:not([disabled])) .button:hover{ -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color, (17,17,17)), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12); box-shadow: 0 0 0 1px rgba(var(--text-color, (17,17,17)), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12); }}@media (hover: none){ :host(:not([disabled])) .button:active{ -webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2); box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2); } :host([variant='outlined']) .button:active{ -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color, (17,17,17)), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2); box-shadow: 0 0 0 1px rgba(var(--text-color, (17,17,17)), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2); }}</style><div part=\"button\" class=\"button\"> <slot></slot> </div>", customElements.define("sm-button", class extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(smButton.content.cloneNode(!0)) } static get observedAttributes() { return ["disabled"] } get disabled() { return this.hasAttribute("disabled") } set disabled(t) { t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled") } focusIn() { this.focus() } handleKeyDown(t) { this.hasAttribute("disabled") || "Enter" !== t.key && " " !== t.key || (t.preventDefault(), this.click()) } connectedCallback() { this.hasAttribute("disabled") || this.setAttribute("tabindex", "0"), this.setAttribute("role", "button"), this.addEventListener("keydown", this.handleKeyDown) } attributeChangedCallback(t) { "disabled" === t && (this.hasAttribute("disabled") ? this.removeAttribute("tabindex") : this.setAttribute("tabindex", "0"), this.setAttribute("aria-disabled", this.hasAttribute("disabled"))) } });
+const smCopy = document.createElement("template"); smCopy.innerHTML = '<style> *{ padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box;} :host{ display: -webkit-box; display: flex; --padding: 0; --button-background-color: rgba(var(--text-color, (17,17,17)), 0.2);}.copy{ display: grid; gap: 0.5rem; padding: var(--padding); align-items: center; grid-template-columns: minmax(0, 1fr) auto;}:host(:not([clip-text])) .copy-content{ overflow-wrap: break-word; word-wrap: break-word;}:host([clip-text]) .copy-content{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}.copy-button{ display: inline-flex; justify-content: center; cursor: pointer; border: none; padding: 0.4rem; background-color: rgba(var(--text-color, (17,17,17)), 0.06); border-radius: var(--button-border-radius, 0.3rem); transition: background-color 0.2s; font-family: inherit; color: inherit; font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05rem;}.copy-button:active{ background-color: var(--button-background-color);}@media (any-hover: hover){ .copy:hover .copy-button{ opacity: 1; } .copy-button:hover{ background-color: var(--button-background-color); }}</style><section class="copy"> <p class="copy-content"> <slot></slot> </p> <button part="button" class="copy-button" title="copy"> <slot name="copy-icon"> COPY </slot> </button></section>', customElements.define("sm-copy", class extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(smCopy.content.cloneNode(!0)), this.copyContent = this.shadowRoot.querySelector(".copy-content"), this.copyButton = this.shadowRoot.querySelector(".copy-button"), this.copy = this.copy.bind(this) } static get observedAttributes() { return ["value"] } set value(t) { this.setAttribute("value", t) } get value() { return this.getAttribute("value") } fireEvent() { this.dispatchEvent(new CustomEvent("copy", { composed: !0, bubbles: !0, cancelable: !0 })) } copy() { navigator.clipboard.writeText(this.getAttribute("value")).then(t => this.fireEvent()).catch(t => console.error(t)) } connectedCallback() { this.copyButton.addEventListener("click", this.copy) } attributeChangedCallback(t, n, o) { "value" === t && 0 === this.copyContent.querySelector("slot").assignedNodes().length && (this.copyContent.textContent = o) } disconnectedCallback() { this.copyButton.removeEventListener("click", this.copy) } });
+const smForm = document.createElement("template"); smForm.innerHTML = ' <style> *{ padding: 0; margin: 0; box-sizing: border-box; } :host{ display: grid; width: 100%; } form{ display: inherit; gap: var(--gap, 1.5rem); width: 100%; } </style> <form part="form" onsubmit="return false"> <slot></slot> </form> ', customElements.define("sm-form", class extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(smForm.content.cloneNode(!0)), this.form = this.shadowRoot.querySelector("form"), this.invalidFieldsCount, this.skipSubmit = !1, this.isFormValid = void 0, this.supportedElements = "input, sm-input, sm-textarea, sm-checkbox, tags-input, file-input, sm-switch, sm-radio", this.formElements = [], this._requiredElements = [], this.debounce = this.debounce.bind(this), this._checkValidity = this._checkValidity.bind(this), this.handleKeydown = this.handleKeydown.bind(this), this.reset = this.reset.bind(this), this.elementsChanged = this.elementsChanged.bind(this) } static get observedAttributes() { return ["skip-submit"] } get validity() { return this.isFormValid } debounce(e, t) { let i = null; return (...s) => { window.clearTimeout(i), i = window.setTimeout((() => { e.apply(null, s) }), t) } } _checkValidity() { this.submitButton && 0 !== this._requiredElements.length && (this.invalidFieldsCount = 0, this._requiredElements.forEach((([e, t]) => { (!e.disabled && t && !e.isValid || !t && !e.checkValidity()) && this.invalidFieldsCount++ })), this.isFormValid !== (0 === this.invalidFieldsCount) && (this.isFormValid = 0 === this.invalidFieldsCount, this.dispatchEvent(new CustomEvent(this.isFormValid ? "valid" : "invalid", { bubbles: !0, composed: !0 })), this.skipSubmit || (this.submitButton.disabled = !this.isFormValid))) } handleKeydown(e) { if ("Enter" === e.key && e.target.tagName.includes("INPUT")) if (0 === this.invalidFieldsCount) this.submitButton && this.submitButton.click(), this.dispatchEvent(new CustomEvent("submit", { bubbles: !0, composed: !0 })); else for (const [e, t] of this._requiredElements) { if (t ? !e.isValid : !e.checkValidity()) { (e?.shadowRoot?.lastElementChild || e).animate([{ transform: "translateX(-1rem)" }, { transform: "translateX(1rem)" }, { transform: "translateX(-0.5rem)" }, { transform: "translateX(0.5rem)" }, { transform: "translateX(0)" }], { duration: 300, easing: "ease" }), t ? e.focusIn() : e.focus(); break } } } reset() { this.formElements.forEach((([e, t]) => { if (t) e.reset(); else switch (e.type) { case "checkbox": case "radio": e.checked = !1; break; default: e.value = "" } })), this._checkValidity() } elementsChanged() { this.formElements = [...this.querySelectorAll(this.supportedElements)].map((e => [e, e.tagName.includes("-")])), this._requiredElements = this.formElements.filter((([e]) => e.hasAttribute("required"))), this.submitButton = this.querySelector('[variant="primary"], [type="submit"]'), this.resetButton = this.querySelector('[type="reset"]'), this.resetButton && this.resetButton.addEventListener("click", this.reset), this._checkValidity() } connectedCallback() { const e = this.debounce(this.elementsChanged, 100); this.addEventListener("input", this.debounce(this._checkValidity, 100)), this.addEventListener("keydown", this.debounce(this.handleKeydown, 100)), this.shadowRoot.querySelector("slot").addEventListener("slotchange", e), this.mutationObserver = new MutationObserver((t => { t.forEach((t => { ("childList" === t.type && [...t.addedNodes].some((e => 1 === e.nodeType && e.querySelector(this.supportedElements))) || [...t.removedNodes].some((e => 1 === e.nodeType && e.querySelector(this.supportedElements)))) && e() })) })), this.mutationObserver.observe(this, { childList: !0, subtree: !0 }) } attributeChangedCallback(e, t, i) { "skip-submit" === e && (this.skipSubmit = null !== i) } disconnectedCallback() { this.removeEventListener("input", this.debounce(this._checkValidity, 100)), this.removeEventListener("keydown", this.debounce(this.handleKeydown, 100)), this.mutationObserver.disconnect() } });
+const smInput = document.createElement("template"); smInput.innerHTML = ' <style> *{ padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box; }  input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { display: none; } input[type=number] { -moz-appearance:textfield; } input[type=number]::-webkit-inner-spin-button,  input[type=number]::-webkit-outer-spin-button {  -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0;  } input::-ms-reveal, input::-ms-clear { display: none; } input:invalid{ outline: none; -webkit-box-shadow: none; box-shadow: none; } ::-moz-focus-inner{ border: none; } :host{ display: flex; --success-color: #00C853; --danger-color: red; --width: 100%; --icon-gap: 0.5rem; --min-height: 3.2rem; --background: rgba(var(--text-color, (17,17,17)), 0.06); } .hidden{ display: none !important; } button{ display: flex; border: none; background: none; padding: 0; border-radius: 1rem; min-width: 0; cursor: pointer; } button:focus{ outline: var(--accent-color, teal) solid medium; } .icon { height: 1.2rem; width: 1.2rem; fill: rgba(var(--text-color, (17,17,17)), 0.6); }  :host(.round) .input{ border-radius: 10rem; } .input { display: flex; cursor: text; min-width: 0; text-align: left; align-items: center; position: relative; gap: var(--icon-gap); padding: var(--padding, 0.6rem 0.8rem); border-radius: var(--border-radius,0.3rem); transition: opacity 0.3s, box-shadow 0.2s; background: var(--background); width: 100%; outline: none; min-height: var(--min-height); } .input.readonly .clear{ opacity: 0 !important; margin-right: -2rem; pointer-events: none !important; } .readonly{ pointer-events: none; } .input:focus-within:not(.readonly){ box-shadow: 0 0 0 0.1rem var(--accent-color,teal) inset !important; } .disabled{ pointer-events: none; opacity: 0.6; } .label { grid-area: 1/1/2/2; font-size: inherit; opacity: .7; font-weight: 400; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s, color .03; transform-origin: left; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; user-select: none; will-change: transform; } .outer-container{ position: relative; width: var(--width); } .container{ width: 100%; display: grid; grid-template-columns: 1fr auto; position: relative; align-items: center; }  input{ grid-area: 1/1/2/2; font-size: inherit; border: none; background: transparent; outline: none; color: inherit; font-family: inherit; width: 100%; caret-color: var(--accent-color, teal); } :host([animate]) .input:focus-within .container input, .animate-placeholder .container input { -webkit-transform: translateY(0.6rem); -ms-transform: translateY(0.6rem); transform: translateY(0.6rem); }  :host([animate]) .input:focus-within .label, .animate-placeholder .label { -webkit-transform: translateY(-0.7em) scale(0.8); -ms-transform: translateY(-0.7em) scale(0.8); transform: translateY(-0.7em) scale(0.8); opacity: 1; color: var(--accent-color,teal) } :host([variant="outlined"]) .input { box-shadow: 0 0 0 1px var(--border-color, rgba(var(--text-color, (17,17,17)), 0.3)) inset; background: rgba(var(--background-color, (255,255,255)), 1); } .animate-placeholder:focus-within:not(.readonly) .label{ color: var(--accent-color,teal) } .feedback-text:not(:empty){ display: flex; width: 100%; text-align: left; font-size: 0.9rem; align-items: center; padding: 0.8rem 0; color: rgba(var(--text-color, (17,17,17)), 0.8); } .success{ color: var(--success-color); } .error{ color: var(--danger-color); } .status-icon{ margin-right: 0.2rem; } .status-icon--error{ fill: var(--danger-color); } .status-icon--success{ fill: var(--success-color); } .datalist{ position: absolute; top: 100%; left: 0; width: 100%; z-index: 100; background: rgba(var(--foreground-color, (255,255,255)), 1); border-radius: 0 0 var(--border-radius,0.5rem) var(--border-radius,0.5rem); box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1); max-height: 20rem; overflow-y: auto; overflow-x: hidden; padding: 0.3rem; } .datalist-item{ padding: 0.8rem 1rem; cursor: pointer; transition: background 0.2s; border-radius: 0.5rem; content-visibility: auto; } .datalist-item:focus{ outline: none; } .datalist-item:focus-visible{ outline: var(--accent-color, teal) solid medium; } @media (any-hover: hover){ .icon:hover{ background: rgba(var(--text-color, (17,17,17)), 0.1); } .datalist-item:hover{ background: rgba(var(--text-color, (17,17,17)), 0.06); } } </style> <div class="outer-container"> <label part="input" class="input"> <slot name="icon"></slot> <div class="container"> <input type="text"/> <div part="placeholder" class="label"></div> <button class="clear hidden" title="Clear" tabindex="-1"> <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z"/></svg> </button> </div> <slot name="right"></slot> </label> <ul class="datalist hidden"></ul> <p class="feedback-text"></p> </div> ', customElements.define("sm-input", class extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(smInput.content.cloneNode(!0)), this.inputParent = this.shadowRoot.querySelector(".input"), this.input = this.shadowRoot.querySelector("input"), this.clearBtn = this.shadowRoot.querySelector(".clear"), this.label = this.shadowRoot.querySelector(".label"), this.feedbackText = this.shadowRoot.querySelector(".feedback-text"), this.outerContainer = this.shadowRoot.querySelector(".outer-container"), this.optionList = this.shadowRoot.querySelector(".datalist"), this._helperText = "", this._errorText = "", this.isRequired = !1, this.datalist = [], this.validationFunction = void 0, this.reflectedAttributes = ["value", "required", "disabled", "type", "inputmode", "readonly", "min", "max", "pattern", "minlength", "maxlength", "step", "list", "autocomplete"], this.reset = this.reset.bind(this), this.clear = this.clear.bind(this), this.focusIn = this.focusIn.bind(this), this.focusOut = this.focusOut.bind(this), this.fireEvent = this.fireEvent.bind(this), this.checkInput = this.checkInput.bind(this), this.showError = this.showError.bind(this), this.allowOnlyNum = this.allowOnlyNum.bind(this), this.handleOptionClick = this.handleOptionClick.bind(this), this.handleInputNavigation = this.handleInputNavigation.bind(this), this.handleDatalistNavigation = this.handleDatalistNavigation.bind(this), this.handleFocus = this.handleFocus.bind(this), this.handleBlur = this.handleBlur.bind(this) } static get observedAttributes() { return ["value", "placeholder", "required", "disabled", "type", "inputmode", "readonly", "min", "max", "pattern", "minlength", "maxlength", "step", "helper-text", "error-text", "list"] } get value() { return this.input.value } set value(t) { t !== this.input.value && (this.input.value = t, this.checkInput()) } get placeholder() { return this.getAttribute("placeholder") } set placeholder(t) { this.setAttribute("placeholder", t) } get type() { return this.getAttribute("type") } set type(t) { this.setAttribute("type", t) } get validity() { return this.input.validity } get disabled() { return this.hasAttribute("disabled") } set disabled(t) { t ? (this.inputParent.classList.add("disabled"), this.setAttribute("disabled", "")) : (this.inputParent.classList.remove("disabled"), this.removeAttribute("disabled")) } get readOnly() { return this.hasAttribute("readonly") } set readOnly(t) { t ? this.setAttribute("readonly", "") : this.removeAttribute("readonly") } set customValidation(t) { this.validationFunction = t } set errorText(t) { this._errorText = t } showError() { this.feedbackText.className = "feedback-text error", this.feedbackText.innerHTML = ` <svg class="status-icon status-icon--error" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg> ${this._errorText}` } set helperText(t) { this._helperText = t } get isValid() { if ("" !== this.input.value) { const t = this.input.checkValidity(); let e = !0; return this.validationFunction && (e = Boolean(this.validationFunction(this.input.value))), t && e ? (this.feedbackText.className = "feedback-text success", this.feedbackText.textContent = "") : this._errorText && this.showError(), t && e } } reset() { this.value = "" } clear() { this.value = "", this.input.focus(), this.fireEvent() } focusIn() { this.input.focus() } focusOut() { this.input.blur() } fireEvent() { let t = new Event("input", { bubbles: !0, cancelable: !0, composed: !0 }); this.dispatchEvent(t) } searchDatalist(t) { const e = this.datalist.filter(e => e.toLowerCase().includes(t.toLowerCase())); if (e.sort((e, n) => { const i = e.toLowerCase().indexOf(t.toLowerCase()), s = n.toLowerCase().indexOf(t.toLowerCase()); return i - s }), e.length) { if (this.optionList.children.length > e.length) { const t = this.optionList.children.length - e.length; for (let e = 0; e < t; e++)this.optionList.removeChild(this.optionList.lastChild) } e.forEach((t, e) => { if (this.optionList.children[e]) this.optionList.children[e].textContent = t; else { const e = document.createElement("li"); e.textContent = t, e.classList.add("datalist-item"), e.setAttribute("tabindex", "0"), this.optionList.appendChild(e) } }), this.optionList.classList.remove("hidden") } else this.optionList.classList.add("hidden") } checkInput(t) { this.hasAttribute("readonly") || ("" !== this.input.value ? this.clearBtn.classList.remove("hidden") : this.clearBtn.classList.add("hidden")), this.hasAttribute("placeholder") && "" !== this.getAttribute("placeholder").trim() && ("" !== this.input.value ? (this.animate ? this.inputParent.classList.add("animate-placeholder") : this.label.classList.add("hidden"), this.datalist.length && (this.searchTimeout && clearTimeout(this.searchTimeout), this.searchTimeout = setTimeout(() => { this.searchDatalist(this.input.value.trim()) }, 100))) : (this.animate ? this.inputParent.classList.remove("animate-placeholder") : this.label.classList.remove("hidden"), this.feedbackText.textContent = "", this.datalist.length && (this.optionList.innerHTML = "", this.optionList.classList.add("hidden")))) } allowOnlyNum(t) { 1 === t.key.length && (("." !== t.key || !t.target.value.includes(".") && 0 !== t.target.value.length) && ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "."].includes(t.key) || t.preventDefault()) } handleOptionClick(t) { this.input.value = t.target.textContent, this.optionList.classList.add("hidden"), this.input.focus() } handleInputNavigation(t) { "ArrowDown" === t.key ? (t.preventDefault(), this.optionList.children.length && this.optionList.children[0].focus()) : "ArrowUp" === t.key && (t.preventDefault(), this.optionList.children.length && this.optionList.children[this.optionList.children.length - 1].focus()) } handleDatalistNavigation(t) { "ArrowUp" === t.key ? (t.preventDefault(), this.shadowRoot.activeElement.previousElementSibling ? this.shadowRoot.activeElement.previousElementSibling.focus() : this.input.focus()) : "ArrowDown" === t.key ? (t.preventDefault(), this.shadowRoot.activeElement.nextElementSibling ? this.shadowRoot.activeElement.nextElementSibling.focus() : this.input.focus()) : "Enter" !== t.key && " " !== t.key || (t.preventDefault(), this.input.value = t.target.textContent, this.optionList.classList.add("hidden"), this.input.focus()) } handleFocus(t) { this.datalist.length && this.searchDatalist(this.input.value.trim()) } handleBlur(t) { this.datalist.length && this.optionList.classList.add("hidden") } connectedCallback() { this.animate = this.hasAttribute("animate"), this.setAttribute("role", "textbox"), this.input.addEventListener("input", this.checkInput), this.clearBtn.addEventListener("click", this.clear), this.datalist.length && (this.optionList.addEventListener("click", this.handleOptionClick), this.input.addEventListener("keydown", this.handleInputNavigation), this.optionList.addEventListener("keydown", this.handleDatalistNavigation)), this.input.addEventListener("focusin", this.handleFocus), this.addEventListener("focusout", this.handleBlur) } attributeChangedCallback(t, e, n) { if (e !== n) switch (this.reflectedAttributes.includes(t) && (this.hasAttribute(t) ? this.input.setAttribute(t, this.getAttribute(t) ? this.getAttribute(t) : "") : this.input.removeAttribute(t)), t) { case "placeholder": this.label.textContent = n, this.setAttribute("aria-label", n); break; case "value": this.checkInput(); break; case "type": this.hasAttribute("type") && "number" === this.getAttribute("type") ? (this.input.setAttribute("inputmode", "decimal"), this.input.addEventListener("keydown", this.allowOnlyNum)) : this.input.removeEventListener("keydown", this.allowOnlyNum); break; case "helper-text": this._helperText = n; break; case "error-text": this._errorText = n; break; case "required": this.isRequired = this.hasAttribute("required"), this.isRequired ? this.setAttribute("aria-required", "true") : this.setAttribute("aria-required", "false"); break; case "readonly": this.hasAttribute("readonly") ? this.inputParent.classList.add("readonly") : this.inputParent.classList.remove("readonly"); break; case "disabled": this.hasAttribute("disabled") ? this.inputParent.classList.add("disabled") : this.inputParent.classList.remove("disabled"); break; case "list": this.hasAttribute("list") && "" !== this.getAttribute("list").trim() && (this.datalist = this.getAttribute("list").split(",")) } } disconnectedCallback() { this.input.removeEventListener("input", this.checkInput), this.clearBtn.removeEventListener("click", this.clear), this.input.removeEventListener("keydown", this.allowOnlyNum), this.optionList.removeEventListener("click", this.handleOptionClick), this.input.removeEventListener("keydown", this.handleInputNavigation), this.optionList.removeEventListener("keydown", this.handleDatalistNavigation), this.input.removeEventListener("focusin", this.handleFocus), this.removeEventListener("focusout", this.handleBlur) } });
+const smNotifications = document.createElement("template"); smNotifications.innerHTML = ' <style> *{ padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box; }  :host{ display: flex; --icon-height: 1.5rem; --icon-width: 1.5rem; } .hide{ opacity: 0 !important; pointer-events: none !important; } .notification-panel{ display: grid; width: 100%; gap: 0.5rem; position: fixed; left: 0; top: 0; z-index: 100; max-height: 100%; padding: 1rem; overflow: hidden auto; -ms-scroll-chaining: none; overscroll-behavior: contain; touch-action: none; } .notification-panel:empty{ display:none; } .notification{ display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; border-radius: 0.3rem; background: rgba(var(--foreground-color, (255,255,255)), 1); overflow: hidden; overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-all; word-break: break-word; -ms-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; max-width: 100%; padding: 1rem; align-items: center; box-shadow: 0 0.5rem 1rem 0 rgba(0,0,0,0.14); touch-action: none; } .icon-container:not(:empty){ margin-right: 0.5rem; height: var(--icon-height); width: var(--icon-width); flex-shrink: 0; } h4:first-letter, p:first-letter{ text-transform: uppercase; } h4{ font-weight: 400; } p{ line-height: 1.6; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; color: rgba(var(--text-color, (17,17,17)), 0.9); overflow-wrap: break-word; overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-all; word-break: break-word; -ms-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; max-width: 100%; } .notification:last-of-type{ margin-bottom: 0; } .icon { height: 100%; width: 100%; fill: rgba(var(--text-color, (17,17,17)), 0.7); } .icon--success { fill: var(--green); } .icon--failure, .icon--error { fill: var(--danger-color); } .close{ height: 2rem; width: 2rem; border: none; cursor: pointer; margin-left: 1rem; border-radius: 50%; padding: 0.3rem; transition: background-color 0.3s, transform 0.3s; background-color: transparent; flex-shrink: 0; } .close:active{ transform: scale(0.9); } .action{ display: flex; align-items: center; justify-content: center; padding: 0.5rem 0.8rem; border-radius: 0.2rem; border: none; background-color: rgba(var(--text-color, (17,17,17)), 0.03); font-family: inherit; font-size: inherit; color: var(--accent-color, teal); font-weight: 500; cursor: pointer; } @media screen and (max-width: 640px){ .notification-panel:not(:empty){ padding-bottom: 3rem; } } @media screen and (min-width: 640px){ .notification-panel{ max-width: 28rem; width: max-content; top: auto; bottom: 0; } .notification{ width: auto; border: solid 1px rgba(var(--text-color, (17,17,17)), 0.2); } } @media (any-hover: hover){ ::-webkit-scrollbar{ width: 0.5rem; }  ::-webkit-scrollbar-thumb{ background: rgba(var(--text-color, (17,17,17)), 0.3); border-radius: 1rem; &:hover{ background: rgba(var(--text-color, (17,17,17)), 0.5); } } .close:hover{ background-color: rgba(var(--text-color, (17,17,17)), 0.1); } } </style> <div class="notification-panel"></div> ', customElements.define("sm-notifications", class extends HTMLElement { constructor() { super(), this.shadow = this.attachShadow({ mode: "open" }).append(smNotifications.content.cloneNode(!0)), this.notificationPanel = this.shadowRoot.querySelector(".notification-panel"), this.animationOptions = { duration: 300, fill: "forwards", easing: "cubic-bezier(0.175, 0.885, 0.32, 1.275)" }, this.push = this.push.bind(this), this.createNotification = this.createNotification.bind(this), this.removeNotification = this.removeNotification.bind(this), this.clearAll = this.clearAll.bind(this), this.remove = this.remove.bind(this), this.handlePointerMove = this.handlePointerMove.bind(this), this.startX = 0, this.currentX = 0, this.endX = 0, this.swipeDistance = 0, this.swipeDirection = "", this.swipeThreshold = 0, this.startTime = 0, this.swipeTime = 0, this.swipeTimeThreshold = 200, this.currentTarget = null, this.mediaQuery = window.matchMedia("(min-width: 640px)"), this.handleOrientationChange = this.handleOrientationChange.bind(this), this.isLandscape = !1 } randString(n) { let t = ""; const e = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"; for (let i = 0; i < n; i++)t += e.charAt(Math.floor(Math.random() * e.length)); return t } createNotification(n, t = {}) { const { pinned: e = !1, icon: i = "", action: o } = t, r = document.createElement("div"); r.id = this.randString(8), r.className = `notification ${e ? "pinned" : ""}`; const a = document.createElement("div"); a.className = "icon-container", a.innerHTML = i; const s = document.createElement("output"); if (s.textContent = n, r.append(a, s), o) { const n = document.createElement("button"); n.className = "action", n.innerText = o.label, n.addEventListener("click", o.callback) } if (e) { const n = document.createElement("button"); n.className = "close", n.innerHTML = ' <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg> ', n.addEventListener("click", () => { this.remove(r.id) }), r.append(n) } return r } push(n, t = {}) { const e = this.createNotification(n, t); return this.isLandscape ? this.notificationPanel.append(e) : this.notificationPanel.prepend(e), this.notificationPanel.animate([{ transform: `translateY(${this.isLandscape ? "" : "-"}${e.clientHeight}px)` }, { transform: "none" }], this.animationOptions), e.animate([{ transform: "translateY(-1rem)", opacity: "0" }, { transform: "none", opacity: "1" }], this.animationOptions).onfinish = (n => { n.target.commitStyles(), n.target.cancel() }), e.querySelector(".action") && e.querySelector(".action").addEventListener("click", t.action.callback), e.id } removeNotification(n, t = "left") { if (!n) return; const e = "left" === t ? "-" : "+"; n.animate([{ transform: this.currentX ? `translateX(${this.currentX}px)` : "none", opacity: "1" }, { transform: `translateX(calc(${e}${Math.abs(this.currentX)}px ${e} 1rem))`, opacity: "0" }], this.animationOptions).onfinish = (() => { n.remove() }) } remove(n) { const t = this.notificationPanel.querySelector(`#${n}`); t && this.removeNotification(t) } clearAll() { Array.from(this.notificationPanel.children).forEach(n => { this.removeNotification(n) }) } handlePointerMove(n) { this.currentX = n.clientX - this.startX, this.currentTarget.style.transform = `translateX(${this.currentX}px)` } handleOrientationChange(n) { this.isLandscape = n.matches, n.matches } connectedCallback() { this.handleOrientationChange(this.mediaQuery), this.mediaQuery.addEventListener("change", this.handleOrientationChange), this.notificationPanel.addEventListener("pointerdown", n => { n.target.closest(".close") ? this.removeNotification(n.target.closest(".notification")) : n.target.closest(".notification") && (this.swipeThreshold = n.target.closest(".notification").getBoundingClientRect().width / 2, this.currentTarget = n.target.closest(".notification"), this.currentTarget.setPointerCapture(n.pointerId), this.startTime = Date.now(), this.startX = n.clientX, this.startY = n.clientY, this.notificationPanel.addEventListener("pointermove", this.handlePointerMove)) }), this.notificationPanel.addEventListener("pointerup", n => { this.endX = n.clientX, this.endY = n.clientY, this.swipeDistance = Math.abs(this.endX - this.startX), this.swipeTime = Date.now() - this.startTime, this.endX > this.startX ? this.swipeDirection = "right" : this.swipeDirection = "left", this.swipeTime < this.swipeTimeThreshold ? this.swipeDistance > 50 && this.removeNotification(this.currentTarget, this.swipeDirection) : this.swipeDistance > this.swipeThreshold ? this.removeNotification(this.currentTarget, this.swipeDirection) : this.currentTarget.animate([{ transform: `translateX(${this.currentX}px)` }, { transform: "none" }], this.animationOptions).onfinish = (n => { n.target.commitStyles(), n.target.cancel() }), this.notificationPanel.removeEventListener("pointermove", this.handlePointerMove), this.notificationPanel.releasePointerCapture(n.pointerId), this.currentX = 0 }); const n = new MutationObserver(n => { n.forEach(n => { "childList" === n.type && n.addedNodes.length && !n.addedNodes[0].classList.contains("pinned") && setTimeout(() => { this.removeNotification(n.addedNodes[0]) }, 5e3) }) }); n.observe(this.notificationPanel, { childList: !0 }) } disconnectedCallback() { mediaQueryList.removeEventListener("change", handleOrientationChange) } });
+class Stack { constructor() { this.items = [] } push(t) { this.items.push(t) } pop() { return 0 == this.items.length ? "Underflow" : this.items.pop() } peek() { return this.items[this.items.length - 1] } } const popupStack = new Stack, smPopup = document.createElement("template"); smPopup.innerHTML = ` <style> *{ padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } :host{ position: fixed; display: -ms-grid; display: grid; z-index: 10; --width: 100%; --height: auto; --min-width: auto; --min-height: auto; --backdrop-background: rgba(0, 0, 0, 0.6); --border-radius: 0.8rem 0.8rem 0 0; } .popup-container{ display: -ms-grid; display: grid; position: fixed; top: 0; bottom: 0; left: 0; right: 0; place-items: center; z-index: 10; touch-action: none; } :host(.stacked) .popup{ -webkit-transform: scale(0.9) translateY(-2rem) !important; transform: scale(0.9) translateY(-2rem) !important; } .backdrop{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: var(--backdrop-background); -webkit-transition: opacity 0.3s; -o-transition: opacity 0.3s; transition: opacity 0.3s; } .popup{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; position: relative; -ms-flex-item-align: end; align-self: flex-end; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: var(--width); min-width: var(--min-width); height: var(--height); min-height: var(--min-height); max-height: 90vh; border-radius: var(--border-radius); background: rgba(var(--background-color, (255,255,255)), 1); -webkit-box-shadow: 0 -1rem 2rem #00000020; box-shadow: 0 -1rem 2rem #00000020; } .container-header{ display: -webkit-box; display: flex; width: 100%; touch-action: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .popup-top{ display: -webkit-box; display: flex; width: 100%; } .popup-body{ display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; width: 100%; padding: var(--body-padding, 1.5rem); overflow-y: auto; } .hide{ display:none; } @media screen and (min-width: 640px){ :host{ --border-radius: 0.5rem; } .popup{ -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; border-radius: var(--border-radius); height: var(--height); -webkit-box-shadow: 0 3rem 2rem -0.5rem #00000040; box-shadow: 0 3rem 2rem -0.5rem #00000040; } } @media screen and (max-width: 640px){ .popup-top{ -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: center; align-items: center; } .handle{ height: 0.3rem; width: 2rem; background: rgba(var(--text-color, (17,17,17)), .4); border-radius: 1rem; margin: 0.5rem 0; } } @media (any-hover: hover){ ::-webkit-scrollbar{ width: 0.5rem; } ::-webkit-scrollbar-thumb{ background: rgba(var(--text-color, (17,17,17)), 0.3); border-radius: 1rem; &:hover{ background: rgba(var(--text-color, (17,17,17))), 0.5); } } } </style> <div class="popup-container hide" role="dialog"> <div part="backdrop" class="backdrop"></div> <div part="popup" class="popup"> <div part="popup-header" class="popup-top"> <div class="handle"></div> <slot name="header"></slot> </div> <div part="popup-body" class="popup-body"> <slot></slot> </div> </div> </div> `, customElements.define("sm-popup", class extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(smPopup.content.cloneNode(!0)), this.allowClosing = !1, this.isOpen = !1, this.offset = 0, this.touchStartY = 0, this.touchEndY = 0, this.touchStartTime = 0, this.touchEndTime = 0, this.touchEndAnimation = void 0, this.focusable, this.autoFocus, this.mutationObserver, this.popupContainer = this.shadowRoot.querySelector(".popup-container"), this.backdrop = this.shadowRoot.querySelector(".backdrop"), this.dialogBox = this.shadowRoot.querySelector(".popup"), this.popupBodySlot = this.shadowRoot.querySelector(".popup-body slot"), this.popupHeader = this.shadowRoot.querySelector(".popup-top"), this.resumeScrolling = this.resumeScrolling.bind(this), this.setStateOpen = this.setStateOpen.bind(this), this.show = this.show.bind(this), this.hide = this.hide.bind(this), this.handleTouchStart = this.handleTouchStart.bind(this), this.handleTouchMove = this.handleTouchMove.bind(this), this.handleTouchEnd = this.handleTouchEnd.bind(this), this.detectFocus = this.detectFocus.bind(this), this.handleSoftDismiss = this.handleSoftDismiss.bind(this), this.debounce = this.debounce.bind(this) } static get observedAttributes() { return ["open"] } get open() { return this.isOpen } animateTo(t, e, i) { let s = t.animate(e, { ...i, fill: "both" }); return s.finished.then(() => { s.commitStyles(), s.cancel() }), s } resumeScrolling() { let t = document.body.style.top; window.scrollTo(0, -1 * parseInt(t || "0")), document.body.style.overflow = "", document.body.style.top = "initial" } setStateOpen() { if (!this.isOpen || this.offset) { let t = window.innerWidth > 640 ? "scale(1.1)" : `translateY(${this.offset ? `${this.offset}px` : "100%"})`; this.animateTo(this.dialogBox, [{ opacity: this.offset ? 1 : 0, transform: t }, { opacity: 1, transform: "none" },], { duration: 300, easing: "ease" }) } } show(t = {}) { let { pinned: e = !1, payload: i } = t; if (this.isOpen) return; let s = { duration: 300, easing: "ease" }; return this.payload = i, popupStack.push({ popup: this, permission: e }), popupStack.items.length > 1 && this.animateTo(popupStack.items[popupStack.items.length - 2].popup.shadowRoot.querySelector(".popup"), [{ transform: "none" }, { transform: window.innerWidth > 640 ? "scale(0.95)" : "translateY(-1.5rem)" },], s), this.popupContainer.classList.remove("hide"), this.offset || (this.backdrop.animate([{ opacity: 0 }, { opacity: 1 },], s).onfinish = () => { this.resolveOpen(this.payload) }, this.dispatchEvent(new CustomEvent("popupopened", { bubbles: !0, composed: !0, detail: { payload: this.payload } })), document.body.style.overflow = "hidden", document.body.style.top = `-${window.scrollY}px`), this.setStateOpen(), this.pinned = e, this.isOpen = !0, setTimeout(() => { let t = this.autoFocus || this.focusable?.[0] || this.dialogBox; t && (t.tagName.includes("-") ? t.focusIn() : t.focus()) }, 0), this.hasAttribute("open") || (this.setAttribute("open", ""), this.addEventListener("keydown", this.detectFocus), this.resizeObserver.observe(this), this.mutationObserver.observe(this, { attributes: !0, childList: !0, subtree: !0 }), this.popupHeader.addEventListener("touchstart", this.handleTouchStart, { passive: !0 }), this.backdrop.addEventListener("mousedown", this.handleSoftDismiss)), { opened: new Promise(t => { this.resolveOpen = t }), closed: new Promise(t => { this.resolveClose = t }) } } hide(t = {}) { let { payload: e } = t, i = { duration: 150, easing: "ease" }; this.backdrop.animate([{ opacity: 1 }, { opacity: 0 }], i), this.animateTo(this.dialogBox, [{ opacity: 1, transform: window.innerWidth > 640 ? "none" : `translateY(${this.offset ? `${this.offset}px` : "0"})` }, { opacity: 0, transform: window.innerWidth > 640 ? "scale(1.1)" : "translateY(100%)" },], i).finished.finally(() => { this.popupContainer.classList.add("hide"), this.dialogBox.style = "", this.removeAttribute("open"), this.forms.length && this.forms.forEach(t => t.reset()), this.dispatchEvent(new CustomEvent("popupclosed", { bubbles: !0, composed: !0, detail: { payload: e || this.payload } })), this.resolveClose(e || this.payload), this.isOpen = !1 }), popupStack.pop(), popupStack.items.length ? this.animateTo(popupStack.items[popupStack.items.length - 1].popup.shadowRoot.querySelector(".popup"), [{ transform: window.innerWidth > 640 ? "scale(0.95)" : "translateY(-1.5rem)" }, { transform: "none" },], i) : this.resumeScrolling(), this.resizeObserver.disconnect(), this.mutationObserver.disconnect(), this.removeEventListener("keydown", this.detectFocus), this.popupHeader.removeEventListener("touchstart", this.handleTouchStart, { passive: !0 }), this.backdrop.removeEventListener("mousedown", this.handleSoftDismiss) } handleTouchStart(t) { this.offset = 0, this.popupHeader.addEventListener("touchmove", this.handleTouchMove, { passive: !0 }), this.popupHeader.addEventListener("touchend", this.handleTouchEnd, { passive: !0 }), this.touchStartY = t.changedTouches[0].clientY, this.touchStartTime = t.timeStamp } handleTouchMove(t) { this.touchStartY < t.changedTouches[0].clientY && (this.offset = t.changedTouches[0].clientY - this.touchStartY, this.touchEndAnimation = window.requestAnimationFrame(() => { this.dialogBox.style.transform = `translateY(${this.offset}px)` })) } handleTouchEnd(t) { if (this.touchEndTime = t.timeStamp, cancelAnimationFrame(this.touchEndAnimation), this.touchEndY = t.changedTouches[0].clientY, this.threshold = .3 * this.dialogBox.getBoundingClientRect().height, this.touchEndTime - this.touchStartTime > 200) { if (this.touchEndY - this.touchStartY > this.threshold) { if (this.pinned) { this.setStateOpen(); return } this.hide() } else this.setStateOpen() } else if (this.touchEndY > this.touchStartY) { if (this.pinned) { this.setStateOpen(); return } this.hide() } this.popupHeader.removeEventListener("touchmove", this.handleTouchMove, { passive: !0 }), this.popupHeader.removeEventListener("touchend", this.handleTouchEnd, { passive: !0 }) } detectFocus(t) { if ("Tab" === t.key && this.focusable.length) { if (!this.firstFocusable) { for (let e = 0; e < this.focusable.length; e++)if (!this.focusable[e].disabled) { this.firstFocusable = this.focusable[e]; break } } if (!this.lastFocusable) { for (let i = this.focusable.length - 1; i >= 0; i--)if (!this.focusable[i].disabled) { this.lastFocusable = this.focusable[i]; break } } t.shiftKey && document.activeElement === this.firstFocusable ? (t.preventDefault(), this.lastFocusable.tagName.includes("SM-") ? this.lastFocusable.focusIn() : this.lastFocusable.focus()) : t.shiftKey || document.activeElement !== this.lastFocusable || (t.preventDefault(), this.firstFocusable.tagName.includes("SM-") ? this.firstFocusable.focusIn() : this.firstFocusable.focus()) } } updateFocusableList() { this.focusable = this.querySelectorAll('sm-button:not([disabled]), button:not([disabled]), [href], sm-input, input:not([readonly]), sm-select, select, sm-checkbox, sm-textarea, textarea, [tabindex]:not([tabindex="-1"])'), this.autoFocus = this.querySelector("[autofocus]"), this.firstFocusable = null, this.lastFocusable = null } handleSoftDismiss() { this.pinned ? this.dialogBox.animate([{ transform: "translateX(-1rem)" }, { transform: "translateX(1rem)" }, { transform: "translateX(-0.5rem)" }, { transform: "translateX(0.5rem)" }, { transform: "translateX(0)" },], { duration: 300, easing: "ease" }) : this.hide() } debounce(t, e) { let i = null; return (...s) => { window.clearTimeout(i), i = window.setTimeout(() => { t.apply(null, s) }, e) } } connectedCallback() { this.popupBodySlot.addEventListener("slotchange", this.debounce(() => { this.forms = this.querySelectorAll("sm-form"), this.updateFocusableList() }, 0)), this.resizeObserver = new ResizeObserver(t => { t.forEach(t => { if (t.contentBoxSize) { let e = Array.isArray(t.contentBoxSize) ? t.contentBoxSize[0] : t.contentBoxSize; this.threshold = .3 * e.blockSize.height } else this.threshold = .3 * t.contentRect.height }) }), this.mutationObserver = new MutationObserver(t => { this.updateFocusableList() }) } disconnectedCallback() { this.resizeObserver.disconnect(), this.mutationObserver.disconnect(), this.removeEventListener("keydown", this.detectFocus), this.popupHeader.removeEventListener("touchstart", this.handleTouchStart, { passive: !0 }), this.backdrop.removeEventListener("mousedown", this.handleSoftDismiss) } attributeChangedCallback(t) { "open" === t && this.hasAttribute("open") && this.show() } });
+const smSwitch = document.createElement("template"); smSwitch.innerHTML = '\t<style> *{ box-sizing: border-box; padding: 0; margin: 0; }  :host{ display: inline-flex; } :host(:active) .thumb{ box-shadow: 0 0.1rem 0.4rem #00000060, 0 0 0 0.2rem white inset; } label{ display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; width: 100%; outline: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } :host([disabled]) { cursor: not-allowed; opacity: 0.6; pointer-events: none; } .switch { position: relative; display: flex; align-items: center; width: 2.4rem; flex-shrink: 0; margin-left: auto; padding: 0.2rem; cursor: pointer; border-radius: 2rem; }  input { display: none; }  .track { position: absolute; left: 0; right: 0; height: 1.4rem; transition: background 0.3s; background: rgba(var(--text-color,inherit), 0.4); box-shadow: 0 0.1rem 0.3rem #00000040 inset; border-radius: 1rem; }  label:active .thumb::after, label:focus-within .thumb::after{ opacity: 1; }  .thumb::after{ content: \'\'; display: flex; position: absolute; height: 2.6rem; width: 2.6rem; background: rgba(var(--text-color,inherit), 0.2); border-radius: 2rem; opacity: 0; transition: opacity 0.3s; }  .thumb { position: relative; display: inline-flex; height: 1rem; width: 1rem; justify-content: center; align-items: center; border-radius: 1rem; box-shadow: 0 0.1rem 0.4rem #00000060, 0 0 0 0.3rem white inset; transition: 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6); background-color: inherit; }  input:checked ~ .thumb { transform: translateX(100%); }  input:checked ~ .track { background: var(--accent-color, teal); }</style><label tabindex="0"> <slot name="left"></slot> <div part="switch" class="switch"> <input type="checkbox"> <div class="track"></div> <div class="thumb"></div> </div> <slot name="right"></slot></label>', customElements.define("sm-switch", class extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(smSwitch.content.cloneNode(!0)), this.switch = this.shadowRoot.querySelector(".switch"), this.input = this.shadowRoot.querySelector("input"), this.isChecked = !1, this.isDisabled = !1, this.dispatch = this.dispatch.bind(this) } static get observedAttributes() { return ["disabled", "checked"] } get disabled() { return this.isDisabled } set disabled(e) { e ? this.setAttribute("disabled", "") : this.removeAttribute("disabled") } get checked() { return this.isChecked } set checked(e) { e ? this.setAttribute("checked", "") : this.removeAttribute("checked") } get value() { return this.isChecked } reset() { } dispatch() { this.dispatchEvent(new CustomEvent("change", { bubbles: !0, composed: !0, detail: { value: this.isChecked } })) } connectedCallback() { this.addEventListener("keydown", e => { " " !== e.key || this.isDisabled || (e.preventDefault(), this.input.click()) }), this.input.addEventListener("click", e => { this.input.checked ? this.checked = !0 : this.checked = !1, this.dispatch() }) } attributeChangedCallback(e, t, n) { t !== n && ("disabled" === e ? this.hasAttribute("disabled") ? this.disabled = !0 : this.disabled = !1 : "checked" === e && (this.hasAttribute("checked") ? (this.isChecked = !0, this.input.checked = !0) : (this.isChecked = !1, this.input.checked = !1))) } });
+const spinner = document.createElement("template"); spinner.innerHTML = '<style> *{ padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box;}.loader { display: flex; height: var(--size, 1.5rem); width: var(--size, 1.5rem); stroke-width: 8; overflow: visible; stroke: var(--accent-color, teal); fill: none; stroke-dashoffset: 180; stroke-dasharray: 180; animation: load 2s infinite, spin 1s linear infinite;}@keyframes load { 50% { stroke-dashoffset: 0; } 100%{ stroke-dashoffset: -180; }}@keyframes spin { 100% { transform: rotate(360deg); }}</style><svg viewBox="0 0 64 64" class="loader"><circle cx="32" cy="32" r="32" /></svg>'; class SpinnerLoader extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(spinner.content.cloneNode(!0)) } } window.customElements.define("sm-spinner", SpinnerLoader);
+const themeToggle = document.createElement("template"); themeToggle.innerHTML = ' <style> *{ padding: 0; margin: 0; box-sizing: border-box; } :host{ cursor: pointer; --height: 2.5rem; --width: 2.5rem; } .theme-toggle { display: flex; position: relative; width: 1.2rem; height: 1.2rem; cursor: pointer; -webkit-tap-highlight-color: transparent; } .theme-toggle::after{ content: \'\'; position: absolute; height: var(--height); width: var(--width); top: 50%; left: 50%; opacity: 0; border-radius: 50%; pointer-events: none; transition: transform 0.3s, opacity 0.3s; transform: translate(-50%, -50%) scale(1.2); background-color: rgba(var(--text-color,inherit), 0.12); } :host(:focus-within) .theme-toggle{ outline: none; } :host(:focus-within) .theme-toggle::after{ opacity: 1; transform: translate(-50%, -50%) scale(1); } .icon { position: absolute; height: 100%; width: 100%; fill: rgba(var(--text-color,inherit), 1); transition: transform 0.3s, opacity 0.1s; }  .theme-switcher__checkbox { display: none; } :host([checked]) .moon-icon { transform: translateY(50%); opacity: 0; } :host(:not([checked])) .sun-icon { transform: translateY(50%); opacity: 0; } </style> <label class="theme-toggle" title="Change theme" tabindex="0"> <slot name="light-mode-icon"> <svg xmlns="http://www.w3.org/2000/svg" class="icon moon-icon" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><path d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"/></svg> </slot> <slot name="dark-mode-icon"> <svg xmlns="http://www.w3.org/2000/svg" class="icon sun-icon" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><path d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"/></svg> </slot> </label>'; class ThemeToggle extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(themeToggle.content.cloneNode(!0)), this.isChecked = !1, this.hasTheme = "light", this.toggleState = this.toggleState.bind(this), this.fireEvent = this.fireEvent.bind(this), this.handleThemeChange = this.handleThemeChange.bind(this) } static get observedAttributes() { return ["checked"] } daylight() { this.hasTheme = "light", document.body.dataset.theme = "light", this.setAttribute("aria-checked", "false") } nightlight() { this.hasTheme = "dark", document.body.dataset.theme = "dark", this.setAttribute("aria-checked", "true") } toggleState() { this.toggleAttribute("checked"), this.fireEvent() } handleKeyDown(e) { " " === e.key && this.toggleState() } handleThemeChange(e) { e.detail.theme !== this.hasTheme && ("dark" === e.detail.theme ? this.setAttribute("checked", "") : this.removeAttribute("checked")) } fireEvent() { this.dispatchEvent(new CustomEvent("themechange", { bubbles: !0, composed: !0, detail: { theme: this.hasTheme } })) } connectedCallback() { this.setAttribute("role", "switch"), this.setAttribute("aria-label", "theme toggle"), "dark" === localStorage.getItem(`${window.location.hostname}-theme`) ? (this.nightlight(), this.setAttribute("checked", "")) : "light" === localStorage.getItem(`${window.location.hostname}-theme`) ? (this.daylight(), this.removeAttribute("checked")) : window.matchMedia("(prefers-color-scheme: dark)").matches ? (this.nightlight(), this.setAttribute("checked", "")) : (this.daylight(), this.removeAttribute("checked")), this.addEventListener("click", this.toggleState), this.addEventListener("keydown", this.handleKeyDown), document.addEventListener("themechange", this.handleThemeChange) } disconnectedCallback() { this.removeEventListener("click", this.toggleState), this.removeEventListener("keydown", this.handleKeyDown), document.removeEventListener("themechange", this.handleThemeChange) } attributeChangedCallback(e, t, n) { "checked" === e && (this.hasAttribute("checked") ? (this.nightlight(), localStorage.setItem(`${window.location.hostname}-theme`, "dark")) : (this.daylight(), localStorage.setItem(`${window.location.hostname}-theme`, "light"))) } } window.customElements.define("theme-toggle", ThemeToggle);
\ No newline at end of file